/**
 * /home/assets/css/check_registration.css
 *
 * Page-specific styles for /check_registration.php
 * Header/footer/verse-banner styles inherited from logos.css
 * Only check form, card, OTP and iti overrides here.
 *
 * @version 3.9.0
 */


/* ── intl-tel-input v23 flag fix ─────────────────────────────── */

.iti__flag {
    background-image: url('/comAssets/vendors/intl-tel-input/v23.0.7/build/img/flags.png');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url('/comAssets/vendors/intl-tel-input/v23.0.7/build/img/flags@2x.png');
    }
}

/* ── intl-tel-input RTL fix (v23 class names) ────────────────── */

.check-reg-field .iti {
    direction: ltr !important;
    width    : 100%;
}

.check-reg-field .iti__country-container {
    left : 0 !important;
    right: auto !important;
}

.check-reg-field .iti__selected-country {
    direction: ltr !important;
}

.check-reg-field .iti__tel-input {
    direction    : ltr !important;
    text-align   : left !important;
    padding-left : 90px !important;
    padding-right: 12px !important;
}


/* ── Main area ───────────────────────────────────────────────── */

.check-reg-main {
    padding-block: 2.5rem 4rem;
}


/* ── Card ────────────────────────────────────────────────────── */

.check-reg-card {
    max-width    : 820px;
    margin-inline: auto;
    background   : #ffffff;
    border-radius: 12px;
    box-shadow   : 0 4px 20px rgba(0,0,0,.10);
    overflow     : visible;
}

.check-reg-card-header {
    padding      : 1rem 1.5rem;
    color        : #ffffff !important;
    font-weight  : 700;
    border-radius: 12px 12px 0 0;
    direction    : rtl;
}

.check-reg-card-header h5,
.check-reg-card-header * {
    color: #ffffff !important;
}

.check-reg-card-header small {
    display    : block;
    font-size  : 0.78rem;
    font-weight: 400;
    opacity    : 0.8;
    margin-top : 2px;
    direction  : ltr;
}

.check-reg-card-body { padding: 2rem; }


/* ── Instructions ────────────────────────────────────────────── */

.check-reg-instruction {
    font-size    : 0.95rem;
    color        : #555;
    text-align   : right;
    margin-bottom: 0.4rem;
    direction    : rtl;
}

.check-reg-instruction.ltr-note {
    font-size : 0.85rem;
    color     : #888;
    text-align: left;
    direction : ltr;
}


/* ── Notice ──────────────────────────────────────────────────── */

.check-reg-notice {
    display      : flex;
    align-items  : flex-start;
    gap          : 0.5rem;
    background   : var(--cream-mid);
    border       : 1px solid var(--cream-dark);
    border-right : 4px solid var(--gold-mid);
    border-radius: 6px;
    padding      : 0.85rem 1rem;
    font-size    : 0.9rem;
    color        : var(--brown-dark);
    margin-block : 1rem 1.5rem;
    direction    : rtl;
    line-height  : 1.7;
}

.check-reg-notice i {
    color      : var(--gold-mid);
    flex-shrink: 0;
    margin-top : 0.15rem;
}


/* ── Fields grid ─────────────────────────────────────────────── */

.check-reg-fields {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 1.25rem;
    margin-bottom        : 1.5rem;
    overflow             : visible;
    direction            : rtl;
}

.check-reg-field {
    display       : flex;
    flex-direction: column;
    gap           : 0.4rem;
    overflow      : visible;
}

.field-label {
    display       : flex;
    flex-direction: column;
    gap           : 2px;
}

.label-ar {
    font-weight: 600;
    font-size  : 0.88rem;
    color      : #555;
    text-align : right;
    direction  : rtl;
}

.label-en {
    font-size : 0.75rem;
    color     : #888;
    text-align: left;
    direction : ltr;
}

.check-reg-field .input-group { direction: ltr; }
.check-reg-field .form-control { direction: ltr; text-align: left; }


/* ── Actions ─────────────────────────────────────────────────── */

.check-reg-actions {
    display        : flex;
    gap            : 1rem;
    flex-wrap      : wrap;
    justify-content: flex-end;
    direction      : rtl;
    margin-top     : 0.5rem;
}

.btn-outline-reset {
    display      : inline-flex;
    align-items  : center;
    padding      : 0.65rem 1.4rem;
    border-radius: 6px;
    font-size    : 0.95rem;
    font-weight  : 600;
    background   : transparent;
    border       : 2px solid var(--cream-dark);
    color        : #888;
    cursor       : pointer;
    transition   : all .2s;
}

.btn-outline-reset:hover {
    border-color: var(--brown-mid);
    color       : var(--brown-mid);
}


/* ── OTP inputs ──────────────────────────────────────────────── */

.vcode-inputs {
    display        : flex;
    justify-content: center;
    gap            : 0.4rem;
    direction      : ltr;
}

.vcode-input {
    width        : 46px !important;
    height       : 54px !important;
    font-size    : 1.5rem !important;
    padding      : 0 !important;
    text-align   : center !important;
    border       : 2px solid #dee2e6 !important;
    border-radius: 6px !important;
    transition   : border-color .2s !important;
    direction    : ltr !important;
}

.vcode-input:focus {
    border-color: var(--gold-mid) !important;
    outline     : none !important;
    box-shadow  : 0 0 0 3px rgba(196,150,42,.15) !important;
}


/* ── Validation feedback ─────────────────────────────────────── */

/* ── Pristine validation styles ──────────────────────────────── */

/* Pristine adds has-success / has-error to .check-reg-field */
.check-reg-field.has-success .form-control {
    border-color: #198754 !important;
    box-shadow  : 0 0 0 0.2rem rgba(25,135,84,.2) !important;
}

.check-reg-field.has-error .form-control {
    border-color: #dc3545 !important;
    box-shadow  : 0 0 0 0.2rem rgba(220,53,69,.2) !important;
}

/* Pristine error message */
.pristine-error-msg {
    display   : block;
    font-size : 0.8rem;
    color     : #dc3545;
    margin-top: 0.25rem;
    text-align: left;
    direction : ltr;
}

/* Locked field — greyed out */
.check-reg-field.field-locked {
    opacity       : 0.4;
    pointer-events: none;
}


/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 767px) {
    .check-reg-fields        { grid-template-columns: 1fr; }
    .check-reg-card-body     { padding: 1.25rem; }
    .check-reg-actions       { justify-content: center; }
    .vcode-input             { width: 38px !important; height: 46px !important; }
}