/* ------------------------------------------------------------------
   UI3 account pages: registration + password reset / change.

   Shared shell (.ac-*) plus overrides for the Bootstrap 3 .form-control
   markup that Partial_SME_RegisterRegularUserForm.cshtml emits through
   Html.LabelFor / EditorFor - that partial's input names drive the
   registration JS, so only presentation is touched here.

   newDesign.css forces `border` + `border-radius` on every text input
   with !important, hence the !important on those two properties.
   ------------------------------------------------------------------ */

/* ============================ page shell ========================== */
.ac-page {
    background: var(--background, #F8FAFC);
    direction: rtl;
    text-align: right;
    font-family: Vazirmatn, tahoma, sans-serif;
    color: var(--text, #374151);
    font-size: 16px;
    line-height: 1.9;
    /* opens tighter than it used to, so the content starts higher up */
    padding: 20px 0 48px;
}

    .ac-page * {
        box-sizing: border-box;
    }

.ac-shell {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px;
}

.ac-shell--wide {
    max-width: 1040px;
}

/* ------------------------------ head ----------------------------- */
.ac-head {
    text-align: center;
    margin-bottom: 18px;
}

/*  the rounded badge above the title is off: it cost ~78px of height on
    every panel page and pushed the useful content below the fold. The
    <div class="ac-head-icon"> markup stays in the views, so bringing it
    back is a change to this one rule. */
.ac-head-icon {
    display: none;
}

.ac-head h1 {
    margin: 0 0 8px;
    font-size: 27px;
    line-height: 1.6;
    font-weight: 700;
    color: var(--text, #374151);
}

.ac-head p {
    margin: 0;
    font-size: 16px;
    line-height: 2;
    color: var(--text-secondary, #6B7280);
}

/* ------------------------------ hero ----------------------------- */
/*  The brand-coloured banner the public pages open with instead of the
    centred .ac-head - Home/Contact, Home/Complaint and Help/Index. It is
    the sub-page cut of the .pv-hero on Home/Index_ui3: same gradient,
    same radial glows, same 58px grid film and same closing wave, at a
    smaller type scale.

    Markup:
      <div class="ac-page ac-hero-page">
        <section class="ac-hero">
          <div class="ac-shell"><div class="ac-hero-inner"> badge/h1/p </div></div>
          <div class="ac-hero-wave"></div>
        </section>
        <div class="ac-shell ac-band"> cards </div>
      </div>                                                         */
.ac-hero-page {
    /*  how far the content band climbs back onto the red. one value, read
        by both the band's negative margin and the top edge of its dot
        screen, so the screen still starts exactly at the hero's foot. */
    --ac-lift: 116px;
    /* .ac-page opens with 20px of padding; the hero supplies its own */
    padding: 0 0 64px;
}

    /*  newDesign.css sets `h1..h6, p { line-height: 1.3em }` - a fixed px
        value once resolved, which crushes Persian text. Restate it. */
    .ac-hero-page h1,
    .ac-hero-page h2,
    .ac-hero-page h3,
    .ac-hero-page p {
        line-height: 1.8;
    }

.ac-hero {
    position: relative;
    overflow: hidden;
    /* the bottom padding clears the 120px wave plus the lifted band */
    padding: 62px 0 176px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary, #C1122F) 0%, var(--primary-hover, #A10F26) 60%, #7C0B1D 100%);
}

    .ac-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 12% 18%, rgba(242,92,84,.45), transparent 46%), radial-gradient(circle at 88% 6%, rgba(255,255,255,.14), transparent 42%);
    }

    /* the faint graph-paper film over the gradient */
    .ac-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .35;
        pointer-events: none;
        background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
        background-size: 58px 58px;
    }

/* lifts the text over ::before / ::after, which cover the whole band */
.ac-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.ac-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 20px;
    margin-bottom: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.14);
    font-size: 15px;
    font-weight: 600;
    backdrop-filter: blur(8px);
}

.ac-page .ac-hero h1 {
    margin: 0 0 16px;
    font-size: 38px;
    font-weight: 700;
    color: #fff;
}

.ac-page .ac-hero p {
    margin: 0;
    font-size: 18px;
    line-height: 2.05;
    color: rgba(255,255,255,.94);
}

/*  The wave that closes the band, as a background image rather than an
    inline <svg> so the three views need one empty div each. Its fill is
    the literal --background value: a data uri cannot read a custom
    property, and Home/Index_ui3 hardcodes the same colour in its own
    wave. Keep the two in step if the page background ever moves.     */
.ac-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 120px;
    pointer-events: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path fill='%23F8FAFC' d='M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z'/></svg>") bottom center / 100% 120px no-repeat;
}

/* --------------------------- content band ------------------------ */
/*  The stretch under the hero. Pure white cards on the near-white page
    background read as one flat sheet, so the band carries a dot screen
    and a breath of brand colour for the cards to sit on top of.      */
.ac-band {
    position: relative;
    z-index: 2;
    /* the cards climb back onto the red, above the wave's crest */
    margin-top: calc(-1 * var(--ac-lift, 116px));
}

    .ac-band::before {
        content: "";
        position: absolute;
        z-index: 0;
        /* bled sideways so the screen does not stop at the shell's edge */
        inset: var(--ac-lift, 116px) -100vw 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(193, 18, 47, .10) 1px, transparent 1px), radial-gradient(circle at 78% 4%, rgba(193, 18, 47, .05), transparent 38%);
        background-size: 22px 22px, auto;
        -webkit-mask-image: linear-gradient(#000 0%, #000 62%, transparent 100%);
        mask-image: linear-gradient(#000 0%, #000 62%, transparent 100%);
    }

    /* everything in the band paints over the screen */
    .ac-band > * {
        position: relative;
        z-index: 1;
    }

@media (max-width: 600px) {
    .ac-hero {
        padding: 44px 0 132px;
    }

    .ac-page .ac-hero h1 {
        font-size: 27px;
    }

    .ac-page .ac-hero p {
        font-size: 15px;
    }

    .ac-hero-page {
        --ac-lift: 76px;
    }

    .ac-hero-wave {
        height: 80px;
        background-size: 100% 80px;
    }
}

/* ------------------------------ card ----------------------------- */
.ac-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .07);
    padding: 30px 28px;
}

.ac-section + .ac-section {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px dashed var(--border, #E5E7EB);
}

.ac-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 700;
    color: var(--text, #374151);
}

    .ac-section-title i {
        width: 32px;
        height: 32px;
        flex: 0 0 auto;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        color: var(--primary, #C1122F);
        background: rgba(193, 18, 47, .08);
    }

/* ----------------------------- fields ---------------------------- */
.ac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.ac-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ac-field--full {
    grid-column: 1 / -1;
}

/*  .ac-label / .ac-req and every input, select, textarea, file,
    checkbox, label, .ltrField, .date-picker and parsley state now
    live in fields-ui3.css so the login dialog, the account pages and
    the panel forms share one definition. Only layout and the
    id-scoped legacy re-assertions remain here.                      */

.ac-hint {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.9;
    color: var(--text-secondary, #6B7280);
}

/* --------------------------- captcha ----------------------------- */
/* CaptchaComponent renders 400x96; every consumer must size the img or
   it lands at natural size and blows the layout apart. All three cells
   (answer box, image, refresh button) sit at --field-height so the row
   lines up with every other field on the form. */
.ac-captcha {
    display: grid;
    /* the answer box takes the slack so the row spans the field width
       like every other input. The image column is fixed instead: at
       --field-height the 400x96 bitmap draws ~167px wide, so a wider
       track would only letterbox it inside its frame (and a plain 1fr
       stretched it to ~800px on the wide registration card). */
    grid-template-columns: minmax(92px, 1fr) 176px auto;
    /* …but the slack is capped: on a full-width panel card the row is
       over 1000px wide and the 3-digit box looks absurd next to it.
       176 + 44 + 2 gaps leaves ~284px for the answer box, which is the
       width an ordinary field gets in a multi-column form. */
    max-width: var(--captcha-max-width, 520px);
    gap: 8px;
    align-items: center;
}

.ac-page input.ac-captcha-input {
    width: 100%;
    height: var(--field-height);
    padding: 0 6px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
    direction: ltr;
}

.ac-captcha-img {
    width: 100%;
    height: var(--field-height);
    padding: 2px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px;
    background: var(--surface, #fff);
    object-fit: contain;
}

.ac-page button.ac-captcha-refresh {
    width: 44px;
    height: var(--field-height);
    padding: 0;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px;
    background: var(--surface-alt, #F1F5F9);
    color: var(--text-secondary, #6B7280);
    font-size: 16px;
    cursor: pointer;
    transition: all .2s ease;
}

    .ac-page button.ac-captcha-refresh:hover {
        color: var(--primary, #C1122F);
        border-color: var(--primary-light, #F25C54);
        background: var(--surface, #fff);
    }

/* `#pnlRegularUser input[type=...]` in newDesign.css is (1,1,1) !important
   and squares off / shrinks every registration field. Same fix. */
.ac-page #pnlRegularUser input[type="text"],
.ac-page #pnlRegularUser input[type="password"],
.ac-page #pnlRegularUser input[type="email"] {
    height: var(--field-height);
    margin: 0 !important;
    padding: 0 var(--field-padding-x) !important;
    border: 1px solid var(--field-border) !important;
    border-radius: var(--field-radius) !important;
    box-shadow: none !important;
    font-size: var(--field-font-size) !important;
    line-height: var(--field-height);
    vertical-align: middle !important;
}

    .ac-page #pnlRegularUser input.ac-captcha-input[type="text"] {
        height: var(--field-height);
        padding: 0 6px !important;
        font-size: 20px !important;
        text-align: center;
        letter-spacing: 3px;
    }

    .ac-page #pnlRegularUser input[type="text"]:focus,
    .ac-page #pnlRegularUser input[type="password"]:focus,
    .ac-page #pnlRegularUser input[type="email"]:focus {
        border-color: var(--field-border-focus) !important;
        box-shadow: var(--field-ring) !important;
    }

/* --------------- legacy id-scoped rules in newDesign.css ---------------
   `#frmResetPassword input` and `#frmChangePassword input[type=password]`
   are id-specific (1,0,1), so they outrank every class selector above and
   were forcing width:100%, square corners and 14px text onto these forms -
   including the action buttons. Re-assert with an id in the selector.     */
.ac-page #frmResetPassword input[type="text"],
.ac-page #frmResetPassword input[type="email"],
.ac-page #frmResetPassword input[type="password"],
.ac-page #frmChangePassword input[type="text"],
.ac-page #frmChangePassword input[type="email"],
.ac-page #frmChangePassword input[type="password"] {
    width: 100%;
    height: var(--field-height);
    margin: 0 !important;
    padding: 0 var(--field-padding-x) !important;
    border: 1px solid var(--field-border) !important;
    border-radius: var(--field-radius) !important;
    box-shadow: none !important;
    font-size: var(--field-font-size) !important;
    line-height: var(--field-height);
    vertical-align: middle !important;
}

.ac-page #frmResetPassword input.ac-captcha-input,
.ac-page #frmChangePassword input.ac-captcha-input {
    width: 100%;
    height: var(--field-height);
    padding: 0 6px !important;
    font-size: 20px !important;
    text-align: center;
    letter-spacing: 3px;
}

.ac-page #frmResetPassword input.ac-btn,
.ac-page #frmChangePassword input.ac-btn {
    width: auto;
    min-width: 170px;
    height: 48px;
    margin: 0 !important;
    padding: 0 26px !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
}

/* ---------------------------- actions ---------------------------- */
.ac-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border, #E5E7EB);
}

.ac-page .ac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 170px;
    height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow .25s ease, transform .2s ease, background .2s ease, color .2s ease;
}

.ac-page .ac-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--primary, #C1122F) 0%, var(--primary-hover, #A10F26) 100%);
}

    .ac-page .ac-btn--primary:hover {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 12px 26px rgba(193, 18, 47, .3);
    }

    .ac-page .ac-btn--primary[disabled] {
        opacity: .6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.ac-page .ac-btn--ghost {
    color: var(--text, #374151);
    background: transparent;
    border: 1.5px solid var(--border, #E5E7EB);
}

    .ac-page .ac-btn--ghost:hover {
        color: var(--primary, #C1122F);
        border-color: var(--primary, #C1122F);
    }

/* ---------------------------- notices ---------------------------- */
.ac-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 22px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.95;
}

    .ac-alert i {
        flex: 0 0 auto;
        margin-top: 4px;
        font-size: 15px;
    }

.ac-alert--error {
    background: rgba(220, 38, 38, .07);
    border: 1px solid rgba(220, 38, 38, .22);
    color: var(--error, #DC2626);
}

.ac-alert--info {
    background: rgba(37, 99, 235, .07);
    border: 1px solid rgba(37, 99, 235, .2);
    color: var(--text, #374151);
}

    .ac-alert--info i {
        color: var(--info, #2563EB);
    }

.ac-alert--success {
    background: rgba(22, 163, 74, .08);
    border: 1px solid rgba(22, 163, 74, .22);
    color: var(--text, #374151);
}

    .ac-alert--success i {
        color: var(--success, #16A34A);
    }

/* ---------------------------- success ---------------------------- */
.ac-done {
    text-align: center;
    padding: 16px 4px 8px;
}

    .ac-done .ac-done-mark {
        width: 66px;
        height: 66px;
        margin: 0 auto 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 27px;
        color: #fff;
        background: var(--success, #16A34A);
        box-shadow: 0 12px 26px rgba(22, 163, 74, .26);
    }

    .ac-done p {
        margin: 0 0 22px;
        font-size: 17px;
        line-height: 2;
        color: var(--text, #374151);
    }

/* ---------------------------- footnote --------------------------- */
.ac-foot {
    margin-top: 22px;
    text-align: center;
    font-size: 15px;
    line-height: 1.95;
    color: var(--text-secondary, #6B7280);
}

    .ac-foot a {
        margin-right: 6px;
        color: var(--primary, #C1122F);
        font-weight: 700;
        text-decoration: none;
    }

        .ac-foot a:hover {
            color: var(--primary-hover, #A10F26);
            text-decoration: underline;
        }

/* --------------------------- responsive -------------------------- */
@media (max-width: 600px) {
    .ac-page {
        padding: 26px 0 44px;
    }

    .ac-card {
        padding: 22px 18px;
    }

    .ac-head h1 {
        font-size: 22px;
    }

    .ac-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* image + refresh on one line, the answer box full width underneath.
       The image keeps its fixed track so the refresh button stays next
       to it instead of being pushed to the far edge. */
    .ac-captcha {
        grid-template-columns: 176px 1fr;
        grid-template-areas:
            "img   refresh"
            "input input";
        gap: 10px;
    }

        .ac-captcha .ac-captcha-cell {
            grid-area: input;
        }

    .ac-page input.ac-captcha-input {
        width: 100%;
    }

    .ac-captcha-img {
        grid-area: img;
        max-width: 176px;
        height: var(--field-height);
    }

    .ac-page button.ac-captcha-refresh {
        grid-area: refresh;
        height: var(--field-height);
    }

    .ac-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ac-page .ac-btn {
        width: 100%;
    }
}