/* ============================================================
   SIGNALADS MODERN THEME — Digits front-end restyle.
   Matches the look of .dev/login.html and .dev/register.html:
     - White Bootstrap card on soft gray background
     - Blue accent (#0d6efd)
     - Tab-style phone/email switch with underline
     - Phone input group with Iran flag emoji + +98 country code
     - Vazirmatn font
   Active only when "Modern theme" is enabled in admin.
   ============================================================ */

/* ---------- Tokens (cascade everywhere) ---------- */
.digits-form_container.digits,
.digits_ui,
.digits-form_page,
.digits_login_form,
#digits_protected,
.digits_secure_modal_box {
    --sa-bs-primary: #0d6efd;
    --sa-bs-primary-dark: #0b5ed7;
    --sa-bs-bg: #f4f6f9;
    --sa-bs-card-bg: #ffffff;
    --sa-bs-border: #dee2e6;
    --sa-bs-border-focus: #86b7fe;
    --sa-bs-input-bg: #f8f9fa;
    --sa-bs-text: #212529;
    --sa-bs-muted: #6c757d;
    --sa-bs-muted-light: #adb5bd;
    --sa-bs-radius: 0.375rem;
    --sa-bs-radius-card: 16px;
    --sa-bs-shadow-card: 0 10px 30px rgba(0,0,0,0.05);
    --sa-bs-shadow-focus: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --sa-bs-font: 'Vazirmatn', 'Tahoma', -apple-system, 'Segoe UI', sans-serif;
    direction: rtl !important;
    font-family: var(--sa-bs-font) !important;
}

/* Body / container: soft gray backdrop, centered */
body.digits_body,
body.login {
    background-color: var(--sa-bs-bg) !important;
}

.digits_ui,
.digits-form_page,
.digits_login_form,
#digits_protected {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* ---------- Card ---------- */
body .digits_ui .digits_embed-form,
body .digits-form_page > .digits-form_container,
body .digits_login_form > .digits-form_container,
body #digits_protected > .digits-form_container,
body .digits_ui > .digits-form_container,
body .digits_secure_modal_box.digits-form_container {
    max-width: 440px !important;
    width: 100% !important;
    margin: 0 auto !important;
    background: var(--sa-bs-card-bg) !important;
    border: none !important;
    border-radius: var(--sa-bs-radius-card) !important;
    box-shadow: var(--sa-bs-shadow-card) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 32px 24px !important;
    direction: rtl !important;
    font-family: var(--sa-bs-font) !important;
}

/* ---------- Modal overlay (when [dm-modal] is clicked) ---------- */
body .digits-overlay,
body .dig-overlay {
    background: rgba(15, 23, 42, .55) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 99999 !important;
}

/* Modal container that holds the form */
body .dig-box,
body .digits_login_form {
    z-index: 100000 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

body .dig-box .digits-form_container,
body .digits_login_form .digits-form_container {
    margin: 0 auto !important;
}

/* Reset Digits' own panel background */
body .digits-form_wrapper.digits_modal_box.digits2_box {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* ---------- Title ---------- */
body .digits-form_container .digits-form_heading {
    background: transparent !important;
    color: var(--sa-bs-text) !important;
    padding: 0 0 16px 0 !important;
    margin: 0 0 16px 0 !important;
    border: 0 !important;
    text-align: center !important;
    position: relative !important;
    font-family: var(--sa-bs-font) !important;
    box-sizing: border-box !important;
    display: block !important;
}

body .digits-form_container .digits-form_heading_text {
    color: var(--sa-bs-text) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    font-family: var(--sa-bs-font) !important;
}

body .digits-form_container .digits_back_icon {
    color: var(--sa-bs-muted) !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* ---------- Tabs (phone / email switch) ---------- */
body .digits-form_container .digits-form_tab-bar {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 0 24px 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sa-bs-border) !important;
    display: flex !important;
    box-sizing: border-box !important;
}

body .digits-form_container .digits-form_tab-item {
    flex: 1 1 0 !important;
    text-align: center !important;
    padding: 0 0 12px 0 !important;
    border-radius: 0 !important;
    color: var(--sa-bs-muted) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    transition: color .15s ease, border-color .15s ease !important;
    font-family: var(--sa-bs-font) !important;
}

body .digits-form_container .digits-form_tab-item:hover {
    color: var(--sa-bs-primary) !important;
}

body .digits-form_container .digits-form_tab-item.digits-tab_active {
    background: transparent !important;
    color: var(--sa-bs-primary) !important;
    border-bottom-color: var(--sa-bs-primary) !important;
    box-shadow: none !important;
}

/* ---------- Body ---------- */
body .digits-form_container .digits-form_body,
body .digits-form_container .digits-form_body_wrapper {
    padding: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

body .digits-form_container .digits-form_tab_wrapper,
body .digits-form_container .digits-form_tab_container,
body .digits-form_container .digits-form_tabs {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ---------- Phone input group (flag + code + field) ---------- */
/* LTR layout: flag + country code on the LEFT, phone input on the RIGHT. */
body .digits-form_container .digits-form_input_row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 16px 0 !important;
    padding: 0.5rem 0.85rem !important;
    border-radius: var(--sa-bs-radius) !important;
    border: 1px solid var(--sa-bs-border) !important;
    background: var(--sa-bs-input-bg) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    direction: ltr !important; /* phone rows always LTR — flag/code on the left */
}

/* Signup form wraps the phone+cc inside an extra #dig_cs_mobilenumber.
   Flatten it so the same row treatment applies. */
body .digits-form_container .digits-form_input_row .digits-mobile_wrapper,
body .digits-form_container .digits-form_input_row #dig_cs_mobilenumber,
body .digits-form_container .digits-form_input_row #dig_cs_email,
body .digits-form_container .digits-form_input_row #dig_cs_name,
body .digits-form_container .digits-form_input_row #dig_cs_password {
    display: contents !important;
}

/* The signup form's outer row also needs the focus-within ring on the
   actual phone wrapper. */
body .digits-form_container .digits-form_input_row:has(.digits-mobile_wrapper):focus-within,
body .digits-form_container .digits-form_input_row:has(#dig_cs_mobilenumber):focus-within {
    border-color: var(--sa-bs-border-focus) !important;
    box-shadow: var(--sa-bs-shadow-focus) !important;
    background: #fff !important;
}

/* When the row directly contains name/password/email inputs (no phone),
   keep the same gray group styling for visual consistency. The label
   inside needs a slight tweak so it doesn't break the flex row. */
body .digits-form_container .digits-form_input_row .field_label {
    display: none !important; /* placeholders are enough; matches template */
}

body .digits-form_container .digits-form_input_row:focus-within {
    border-color: var(--sa-bs-border-focus) !important;
    box-shadow: var(--sa-bs-shadow-focus) !important;
    background: #fff !important;
}

body .digits-form_container .digits-form_input {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
}

/* Country code cell — show as static flag + +98 label, not editable */
body .digits-form_container .digits-form_countrycode,
body .digits-form_container .countrycodecontainer {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    background: transparent !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
}

body .digits-form_container .digits-form_countrycode input.countrycode,
body .digits-form_container .countrycodecontainer input.countrycode {
    width: auto !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: 700 !important;
    color: var(--sa-bs-muted) !important;
    font-size: 0.95rem !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    direction: ltr !important;
    font-family: var(--sa-bs-font) !important;
    cursor: default !important;
}

/* Iran flag emoji (rendered before the country code) */
body .digits-form_container .digits-field-country_flag,
body .digits-form_container .untdovr_flag_container_flag {
    display: inline-block !important;
    width: 24px !important;
    height: 18px !important;
    border-radius: 4px !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
    position: relative !important;
    background:
        linear-gradient(180deg, #239f40 0%, #239f40 33%, #fff 33%, #fff 67%, #da0000 67%) !important;
    flex-shrink: 0 !important;
    font-size: 0 !important;
}

body .digits-form_container .digits-field-country_flag::before {
    content: "🇮🇷" !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
    background: transparent !important;
}

body .digits-form_container .digits-field-country_flag::after {
    content: "" !important;
}

/* All inputs (text/tel/email/password/number) — flat, transparent */
body .digits-form_container .digits-form_input input,
body .digits-form_container input[type="text"],
body .digits-form_container input[type="tel"],
body .digits-form_container input[type="email"],
body .digits-form_container input[type="password"],
body .digits-form_container input[type="number"] {
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    color: var(--sa-bs-text) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    direction: ltr !important;
    text-align: right !important;
    font-family: var(--sa-bs-font) !important;
    height: auto !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
}

/* Override Digits' inline style="padding-left: 123px" on phone inputs.
   Also force LTR + text-align:left so the number reads naturally
   (country code already on the left via the row's direction:ltr). */
body .digits-form_container input.mobile_field,
body .digits-form_container input.dig-mobile_field,
body .digits-form_container input[name="digits_phone"],
body .digits-form_container input[name="phone"] {
    padding: 8px 0 !important;
    direction: ltr !important;
    text-align: left !important;
}

body .digits-form_container input::placeholder {
    color: var(--sa-bs-muted-light) !important;
    font-size: 0.95rem !important;
    text-align: right !important;
    font-weight: 400 !important;
    font-family: var(--sa-bs-font) !important;
}

body .digits-form_container input:focus {
    outline: none !important;
}

/* Standalone input rows (not phone-field): same group styling */
body .digits-form_container .digits-form_input_row:not(:has(.digits-form_countrycode)) {
    padding: 0 0.85rem !important;
}

/* ---------- Primary button ---------- */
body .digits-form_container .digits-form_button,
body .digits-form_container .digits-form_button[type="submit"],
body .digits-form_container button.digits-form_submit,
body .digits-form_container button[type="submit"].digits-form_button,
body .digits-form_container .digits-form_submit-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 0 24px 0 !important;
    padding: 12px !important;
    height: auto !important;
    background: var(--sa-bs-primary) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background-color .15s ease !important;
    font-family: var(--sa-bs-font) !important;
    direction: rtl !important;
    text-align: center !important;
    outline: none !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

body .digits-form_container .digits-form_button:hover,
body .digits-form_container button[type="submit"]:hover {
    background: var(--sa-bs-primary-dark) !important;
}

body .digits-form_container .digits-form_button-text {
    color: #fff !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    font-family: var(--sa-bs-font) !important;
    line-height: 1 !important;
}

body .digits-form_container .digits-form_button_ic {
    display: none !important;
}

/* OTP / send-code secondary buttons */
body .digits-form_container .dig_resendotp,
body .digits-form_container .digits_send_otp,
body .digits-form_container .digits-login-otp {
    background: transparent !important;
    color: var(--sa-bs-primary) !important;
    border: 1px solid var(--sa-bs-primary) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    margin: 0 0 16px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    box-shadow: none !important;
    width: 100% !important;
    cursor: pointer !important;
    font-family: var(--sa-bs-font) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* ---------- Checkbox / remember-me ---------- */
body .digits-form_container .digits-form_rememberme,
body .digits-form_container .digits_form-init_step_data {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: none !important; /* hidden — kept checked via JS so the value submits */
}

body .digits-form_container .digits-form_rememberme label,
body .digits-form_container .dig_input_wrapper label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.9rem !important;
    color: var(--sa-bs-muted) !important;
    cursor: pointer !important;
    font-family: var(--sa-bs-font) !important;
    margin: 0 !important;
}

body .digits-form_container .digits-form_rememberme input[type="checkbox"],
body .digits-form_container .dig_input_wrapper input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--sa-bs-primary) !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* ---------- Footer ---------- */
body .digits-form_container .digits-form_footer {
    padding: 8px 0 0 !important;
    text-align: center !important;
    font-size: 0.85rem !important;
    color: var(--sa-bs-muted) !important;
    box-sizing: border-box !important;
    margin-top: 16px !important;
}

body .digits-form_container .digits-form_link,
body .digits-form_container .digits-form_footer a,
body .digits-form_container .digits_login-uploaddata {
    color: var(--sa-bs-primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    font-family: var(--sa-bs-font) !important;
}

body .digits-form_container .digits-form_link:hover {
    text-decoration: underline !important;
}

/* ---------- Modal launcher buttons ([dm-page] etc.) ---------- */
body span.digits-login-modal,
body .digits-login-modal[type="1"],
body .digits-login-modal[type="2"],
body .digits-login-modal[type="3"],
body .digits-login-modal[type="4"],
body .digits-login-modal[type="10"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: var(--sa-bs-primary) !important;
    color: #fff !important;
    padding: 12px 24px !important;
    margin: 4px 0 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    border: 0 !important;
    transition: background-color .15s ease !important;
    font-family: var(--sa-bs-font) !important;
    text-decoration: none !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    position: relative !important;
}

body .digits-login-modal[type]:hover {
    background: var(--sa-bs-primary-dark) !important;
}

body .digits-login-modal > span {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    font-family: var(--sa-bs-font) !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
    body .digits_ui .digits_embed-form,
    body .digits-form_page > .digits-form_container,
    body .digits_login_form > .digits-form_container,
    body #digits_protected > .digits-form_container,
    body .digits_ui > .digits-form_container {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 24px 18px !important;
    }
}