/* HTPars EZY Business — base design tokens
   Palette: deep emerald (trust) + warm apricot (accent), paper background.
   Deliberately avoids the generic cream+terracotta / near-black+neon defaults. */

@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

:root {
    --ez-primary: #0E7C66;
    --ez-secondary: #1B2A4A;
    --ez-accent: #F2A65A;
    --ez-bg: #F6F8F7;
    --ez-surface: #FFFFFF;
    --ez-text: #14231F;
    --ez-border: #E1E7E4;
    --ez-radius: 16px;
    --ez-font: 'Vazirmatn', Tahoma, sans-serif;
    --ez-muted: #5B6B65;
    --ez-shadow: 0 1px 2px rgba(20,35,31,.04), 0 8px 24px rgba(20,35,31,.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--ez-font);
    background: var(--ez-bg);
    color: var(--ez-text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

[dir="rtl"] body { direction: rtl; }
[dir="ltr"] body { direction: ltr; }

a { color: inherit; }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }

h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; color: var(--ez-muted); }

.ez-container { max-width: 480px; margin: 0 auto; padding: 0 20px; }

.ez-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 20px; border-radius: var(--ez-radius); border: none;
    font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none;
    transition: transform .12s ease, opacity .12s ease;
    background: var(--ez-primary); color: #fff;
}
.ez-btn:active { transform: scale(.98); }
.ez-btn:hover { opacity: .92; }
.ez-btn.outline { background: transparent; color: var(--ez-primary); border: 1.5px solid var(--ez-primary); }
.ez-btn.accent { background: var(--ez-accent); color: #2B1D0E; }
.ez-btn.block { width: 100%; }
.ez-btn.sm { padding: 8px 14px; font-size: .85rem; }
.ez-btn.danger { background: #B4232B; }

.ez-field { margin-bottom: 16px; text-align: right; }
[dir="ltr"] .ez-field { text-align: left; }
.ez-field > label:not(.ez-toggle) { display: block; margin-bottom: 6px; font-size: .88rem; font-weight: 600; color: var(--ez-secondary); }
.ez-field input, .ez-field select, .ez-field textarea {
    width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--ez-border);
    background: var(--ez-surface); color: var(--ez-text); outline: none;
    transition: border-color .12s ease;
}
.ez-field input:focus, .ez-field select:focus, .ez-field textarea:focus { border-color: var(--ez-primary); }
.ez-field .error {
    display: block; width: 100%; box-sizing: border-box; clear: both; position: static;
    color: #B4232B; font-size: .82rem; line-height: 1.7; margin-top: 6px;
    white-space: normal; overflow-wrap: anywhere; word-break: normal; text-align: start;
}
img.logo, img.ez-auth-logo { background: transparent !important; object-fit: contain; padding: 0 !important; display: block; }
/* Rows that pair a switch/checkbox with a text label (RTL-safe, wraps instead of overlapping). */
.ez-field.ez-row, .ez-field[style*="display:flex"] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ez-field.ez-row > label:not(.ez-toggle), .ez-field[style*="display:flex"] > label:not(.ez-toggle) { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; line-height: 1.7; }
/* Submit buttons never sit on top of the text above them. */
form .ez-btn { position: relative; z-index: 0; }
.ez-field + .ez-btn, .ez-field + button { margin-top: 12px; }
.ez-field.ez-has-error input, .ez-field.ez-has-error textarea, .ez-field.ez-has-error select { border-color: #B4232B; }

.ez-card { background: var(--ez-surface); border: 1px solid var(--ez-border); border-radius: var(--ez-radius); padding: 20px; box-shadow: var(--ez-shadow); }

.ez-flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-size: .9rem; font-weight: 600; }
.ez-flash.success { background: #E4F5EE; color: #0E7C66; }
.ez-flash.error { background: #FCEAEA; color: #B4232B; }

.ez-muted { color: var(--ez-muted); font-size: .88rem; }

/* Dark mode (platform pages). Business public pages keep their own theme. */
html[data-theme="dark"] {
    --ez-bg: #0F1614; --ez-surface: #17201D; --ez-text: #E7F0EC; --ez-border: #26332E; --ez-muted: #9DB0A8;
    --ez-shadow: none; color-scheme: dark;
}
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--ez-surface); color: var(--ez-text); border-color: var(--ez-border); }
.ez-theme-toggle {
    position: fixed; bottom: 14px; inset-inline-start: 14px; z-index: 50; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--ez-border); background: var(--ez-surface); color: var(--ez-text); cursor: pointer;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--ez-shadow);
}