/**
 * =========================================================================
 * 🎨 ABDM 2.0 - Universal Enterprise Theme & Styling System
 * =========================================================================
 * Clean, modern healthcare design system for ABHA Widget & Modal Dialogs.
 * Fully decoupled from JavaScript bundle: developers can customize any
 * variable, color, font-size, background, or theme preset directly!
 * =========================================================================
 */

:root,
:host {
    /* --- Brand & Accent Colors --- */
    --abdm-primary: #2563eb;
    /* Primary Action Blue */
    --abdm-primary-hover: #1d4ed8;
    /* Button Hover Blue */
    --abdm-primary-light: #eff6ff;
    /* Soft Background Highlight */
    --abdm-primary-ring: rgba(37, 99, 235, 0.25);

    /* --- Surface & Background Colors --- */
    --abdm-bg-body: #f8fafc;
    /* Page Body Tint */
    --abdm-bg-card: #ffffff;
    /* Container / Card Surface */
    --abdm-bg-card-subtle: #f8fafc;
    /* Accordion / Terms Box Surface */
    --abdm-bg-pill: #f1f5f9;
    /* Inactive Navigation Pill */
    --abdm-bg-pill-active: #2563eb;
    /* Active Navigation Pill */
    --abdm-bg-input: #ffffff;
    /* Input Fields Background */

    /* --- Typography & Font Sizes --- */
    --abdm-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --abdm-font-size-title: 19px;
    /* Modal / Main Title */
    --abdm-font-size-subtitle: 13px;
    /* Explanatory Subtitle */
    --abdm-font-size-label: 13px;
    /* Field Labels */
    --abdm-font-size-base: 14px;
    /* Normal Body Text */
    --abdm-font-size-sm: 12px;
    /* Secondary Text */
    --abdm-font-size-terms: 12.5px;
    /* Terms & Conditions Text */
    --abdm-line-height-terms: 1.5;
    /* Terms Line Height */

    /* --- Text Colors --- */
    --abdm-text-main: #0f172a;
    /* Dark Slate Primary Text */
    --abdm-text-muted: #64748b;
    /* Muted Grey Secondary Text */
    --abdm-text-pill-active: #ffffff;
    /* White Text on Active Pill */

    /* --- Borders & Radii --- */
    --abdm-border-color: #e2e8f0;
    /* Subtle Gray Border */
    --abdm-border-radius-sm: 6px;
    --abdm-border-radius: 10px;
    /* Standard Inputs & Accordion */
    --abdm-border-radius-pill: 9999px;
    /* Rounded Tabs */
    --abdm-border-radius-modal: 16px;
    /* Dialog Modal Corners */

    /* --- Shadows & Elevation --- */
    --abdm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --abdm-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --abdm-shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* --- Modal & Overlay Dimensions --- */
    /* --- Modal & Overlay Dimensions --- */
    --abdm-modal-max-width: 520px;
    --abdm-modal-max-width: 480px;
    --abdm-modal-max-height: min(86vh, 440px);
    --abdm-modal-bg: #ffffff;
    --abdm-modal-backdrop: rgba(15, 23, 42, 0.65);
}

/* =========================================================================
   1. FULL-VIEWPORT BACKDROP OVERLAY
   ========================================================================= */
div[data-slot="dialog-overlay"],
div.fixed.inset-0.bg-black\/80,
div.fixed.inset-0.z-50,
div[data-state][class*="bg-black"],
div[data-radix-dialog-overlay] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    background-color: var(--abdm-modal-backdrop) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: 2147483646 !important;
    margin: 0 !important;
}

/* =========================================================================
   2. PERFECTLY CENTERED DIALOG MODAL (Fits 100% Zoom & Responsive Screens)
   ========================================================================= */
@keyframes abdmModalPop {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

div[role="dialog"] {
    position: fixed !important;
    top: 30% !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, -50%) !important;
    -moz-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    --tw-translate-x: -50% !important;
    --tw-translate-y: -50% !important;
    margin: 0 !important;
    width: 92vw !important;
    max-width: 480px !important;
    height: auto !important;
    min-height: unset !important;
    max-height: min(88vh, 460px) !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid rgba(27, 117, 187, 0.22) !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(27, 117, 187, 0.08) !important;
    z-index: 2147483647 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding: 0 !important;
    animation: abdmModalPop 0.15s ease-out forwards !important;
}

/* Modal Scrollable Inner Body (Create ABHA, Profile Card) */
div[role="dialog"]>div[style*="overflow"],
div[role="dialog"]>div.flex-1,
div[role="dialog"]>div[class*="flex-1"] {
    padding: 12px 16px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
    height: auto !important;
    max-height: calc(min(88vh, 460px) - 2px) !important;
}

/* Modal Inner Body Direct Children Default Reset (Prevents OTP Modal Spacing Blowout) */
div[role="dialog"]>div {
    padding: 0 !important;
    margin: 0 !important;
}

/* Direct Padding for OTP Dialog (where children are direct siblings without .flex-1) */
div[role="dialog"]:not(:has(> div.flex-1)):not(:has(> div[class*="flex-1"])) {
    padding: 14px 18px !important;
    gap: 6px !important;
    overflow-y: auto !important;
    max-height: min(88vh, 420px) !important;
}

/* Modal Titles & Subtitles */
div[role="dialog"] h2,
div[role="dialog"] .text-xl,
div[role="dialog"] [data-slot="dialog-title"] {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: var(--abdm-primary, #1b75bb) !important;
    margin: 0 !important;
    margin-bottom: 2px !important;
    line-height: 1.25 !important;
}

div[role="dialog"] p.text-sm,
div[role="dialog"] [data-slot="dialog-description"] {
    font-size: 11.5px !important;
    color: var(--abdm-text-muted, #64748b) !important;
    margin: 0 !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
}

/* Close Button ('X') */
div[role="dialog"] button.absolute,
div[role="dialog"] button[class*="absolute"],
div[role="dialog"] button:has(svg.lucide-x) {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: none !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
    z-index: 10 !important;
}

div[role="dialog"] button.absolute:hover,
div[role="dialog"] button[class*="absolute"]:hover,
div[role="dialog"] button:has(svg.lucide-x):hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    transform: scale(1.05) !important;
}

/* =========================================================================
   3. MODE SWITCHER TABS (AADHAAR OTP vs AADHAAR Biometric)
   ========================================================================= */

/* Mode Switcher Track (Grey rounded pill container) */
.grid-cols-2[role="tablist"],
div[role="tablist"].grid,
div[role="dialog"] .grid[role="tablist"] {
    background-color: #f1f5f9 !important;
    border-radius: 8px !important;
    padding: 3px !important;
    border: 1px solid #e2e8f0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-bottom: 8px !important;
}

/* Individual Mode Tab Button */
.grid-cols-2[role="tablist"] button[role="tab"],
div[role="tablist"].grid button[role="tab"],
div[role="dialog"] .grid button[role="tab"] {
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    padding: 6px 14px !important;
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.18s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
}

.grid-cols-2[role="tablist"] button[role="tab"]:hover,
div[role="tablist"].grid button[role="tab"]:hover {
    color: #1e293b !important;
}

/* ACTIVE STATE: Crisp Primary Blue with White Text */
.grid-cols-2[role="tablist"] button[role="tab"][data-state="active"],
div[role="tablist"].grid button[role="tab"][data-state="active"],
div[role="dialog"] .grid button[role="tab"][data-state="active"] {
    background: linear-gradient(135deg, var(--abdm-primary, #1b75bb), #135b94) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(27, 117, 187, 0.3) !important;
}

/* =========================================================================
   4. CLEAN STEPPER WIZARD (Consent / Verification / Address Creation)
   ========================================================================= */

/* Reset Stepper Buttons in Dialog completely */
.pointer-events-none button[role="tab"],
div[role="dialog"] .pointer-events-none button[role="tab"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Stepper Indicator Circle (Numbers 1, 2, 3) */
.pointer-events-none button span:first-child,
.pointer-events-none button>div:first-child,
div[role="dialog"] [data-slot="stepper-indicator"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 50% !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    background-color: #e2e8f0 !important;
    color: #475569 !important;
}

/* Active Step 1 Indicator Circle: Crisp Primary Blue */
.pointer-events-none button[data-state="active"] span:first-child,
.pointer-events-none button[data-state="active"]>div:first-child,
div[role="dialog"] [data-slot="stepper-step"][data-state="active"] [data-slot="stepper-indicator"] {
    background: linear-gradient(135deg, var(--abdm-primary, #1b75bb), #135b94) !important;
    color: #ffffff !important;
}

/* Stepper Text Labels (Consent / Verification / Address Creation) */
div[role="dialog"] .pointer-events-none div.text-left div,
div[role="dialog"] .pointer-events-none div.text-left span,
div[role="dialog"] .pointer-events-none div.text-left * {
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}

div[role="dialog"] .pointer-events-none div.text-left span.text-muted-foreground,
div[role="dialog"] .pointer-events-none div.text-left span.text-xs {
    color: #64748b !important;
    font-weight: 400 !important;
    font-size: 10px !important;
}

/* =========================================================================
   4. TERMS & CONDITIONS BOX (Compact for 100% Zoom)
   ========================================================================= */
.abha-terms-scroll {
    max-height: 95px !important;
    overflow-y: auto !important;
    border: 1px solid var(--abdm-border-color, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    background-color: #f8fafc !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: #334155 !important;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    margin-bottom: 8px !important;
}

/* =========================================================================
   5. MAIN WIDGET ACCORDION (Tab Pills Strictly for Main Accordion Only)
   ========================================================================= */

#chikitsa-abha-container {
    font-family: var(--abdm-font-family);
    color: var(--abdm-text-main);
    width: 100%;
}

/* Accordion Header */
.bg-accent {
    background-color: #f1f5f9 !important;
    border-radius: var(--abdm-border-radius) !important;
    border: 1px solid var(--abdm-border-color) !important;
}

/* 5 Main Navigation Tab Pills ONLY on Main Widget Accordion (NOT in dialog) */
#chikitsa-abha-container:not(:has(div[role="dialog"])) .flex-wrap button[role="tab"],
#abdm-root>div:first-child .flex-wrap button[role="tab"] {
    font-family: var(--abdm-font-family) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    border-radius: var(--abdm-border-radius-pill) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 7px 16px !important;
    background-color: var(--abdm-bg-pill) !important;
    color: var(--abdm-text-muted) !important;
    border: 1px solid transparent !important;
}

#chikitsa-abha-container:not(:has(div[role="dialog"])) .flex-wrap button[role="tab"][data-state="active"],
#abdm-root>div:first-child .flex-wrap button[role="tab"][data-state="active"] {
    background-color: var(--abdm-bg-pill-active) !important;
    color: var(--abdm-text-pill-active) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
}

/* Primary Action Buttons (Verify / Open Scanner / Generate OTP) */
button.bg-primary,
button[type="submit"] {
    background-color: var(--abdm-primary) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 8px 18px !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

button.bg-primary:hover,
button[type="submit"]:hover {
    background-color: var(--abdm-primary-hover) !important;
    transform: translateY(-1px) !important;
}

/* Input Fields */
input[type="text"],
input[type="number"],
input[type="tel"] {
    border-radius: 8px !important;
    border: 1px solid var(--abdm-border-color) !important;
    font-family: var(--abdm-font-family) !important;
    font-size: 14px !important;
    background-color: var(--abdm-bg-input) !important;
    color: var(--abdm-text-main) !important;
    outline: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input:focus {
    border-color: var(--abdm-primary) !important;
    box-shadow: 0 0 0 3px var(--abdm-primary-ring) !important;
}

/* =========================================================================
   6. SLEEK CUSTOM SCROLLBARS (No clunky browser arrows!)
   ========================================================================= */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* =========================================================================
   7. CLIENT THEME PRESETS (Dark, Emerald Green, Royal Purple, Slate)
   ========================================================================= */

/* 🌙 Dark Mode Preset (.abdm-theme-dark or data-theme="dark") */
.abdm-theme-dark,
[data-theme="dark"] {
    --abdm-bg-body: #0b0f19;
    --abdm-bg-card: #111827;
    --abdm-bg-card-subtle: #1e293b;
    --abdm-bg-pill: #1f2937;
    --abdm-bg-input: #1f2937;
    --abdm-text-main: #f9fafb;
    --abdm-text-muted: #9ca3af;
    --abdm-border-color: #374151;
    --abdm-modal-bg: #111827;
    --abdm-modal-backdrop: rgba(0, 0, 0, 0.85);
}

/* 🌿 Emerald Healthcare Green Preset */
.abdm-theme-green,
[data-theme="green"] {
    --abdm-primary: #059669;
    --abdm-primary-hover: #047857;
    --abdm-primary-light: #ecfdf5;
    --abdm-primary-ring: rgba(5, 150, 105, 0.25);
    --abdm-bg-pill-active: #059669;
}

/* 💜 Royal Hospital Purple Preset */
.abdm-theme-purple,
[data-theme="purple"] {
    --abdm-primary: #7c3aed;
    --abdm-primary-hover: #6d28d9;
    --abdm-primary-light: #f5f3ff;
    --abdm-primary-ring: rgba(124, 58, 237, 0.25);
    --abdm-bg-pill-active: #7c3aed;
}

/* 🩺 Minimal Slate Healthcare Preset */
.abdm-theme-slate,
[data-theme="slate"] {
    --abdm-primary: #0284c7;
    --abdm-primary-hover: #0369a1;
    --abdm-primary-light: #f0f9ff;
    --abdm-primary-ring: rgba(2, 132, 199, 0.25);
    --abdm-bg-pill-active: #0284c7;
}

/* =========================================================================
   🛡️ BOOTSTRAP RESETS & ISOLATION SYSTEM (Zero Conflict with Bootstrap 3/4/5)
   ========================================================================= */

/* 1. Global Box-Sizing Isolation */
div[role="dialog"],
div[role="dialog"] *,
#chikitsa-abha-container,
#chikitsa-abha-container * {
    box-sizing: border-box !important;
}

/* 2. Neutralize Bootstrap's Paragraph Margins (fixes large empty spaces in OTP modal) */
div[role="dialog"] p,
#chikitsa-abha-container p {
    margin: 0 !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    line-height: 1.45 !important;
}

/* 3. Neutralize Bootstrap Heading Margins */
div[role="dialog"] h1,
div[role="dialog"] h2,
div[role="dialog"] h3,
div[role="dialog"] h4,
div[role="dialog"] h5,
div[role="dialog"] h6,
#chikitsa-abha-container h1,
#chikitsa-abha-container h2,
#chikitsa-abha-container h3,
#chikitsa-abha-container h4 {
    margin: 0 !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}

/* 4. Fix OTP Input boxes (Screenshot 1: Confirm OTP) */
div[role="dialog"] input[type="text"],
div[role="dialog"] input[type="password"],
div[role="dialog"] input[type="number"],
div[role="dialog"] input:not([type="checkbox"]) {
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: normal !important;
    height: 40px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 6px 12px !important;
    background: #ffffff !important;
}

div[role="dialog"] input:focus {
    border-color: var(--abdm-primary, #1b75bb) !important;
    box-shadow: 0 0 0 3px rgba(27, 117, 187, 0.16) !important;
    outline: none !important;
}

/* 6 Individual OTP Digits Container & Boxes */
div[role="dialog"] [data-slot="input-otp"],
div[role="dialog"] [class*="input-otp"],
div[role="dialog"] .flex:has(> input[maxlength="1"]),
div[role="dialog"] div:has(> div > input[maxlength="1"]) {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 6px 0 10px 0 !important;
}

div[role="dialog"] [data-slot="input-otp-slot"],
div[role="dialog"] input[maxlength="1"] {
    width: 44px !important;
    height: 46px !important;
    min-width: 44px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    text-align: center !important;
    border-radius: 8px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
}

div[role="dialog"] [data-slot="input-otp-slot"][data-active="true"],
div[role="dialog"] input[maxlength="1"]:focus {
    border-color: var(--abdm-primary, #1b75bb) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(27, 117, 187, 0.18) !important;
}

/* 5. Fix Terms & Conditions Text & Scroll Container (Screenshot 2: Create ABHA) */
div[role="dialog"] .abha-terms-scroll,
div[role="dialog"] [class*="terms-scroll"] {
    font-size: 11px !important;
    line-height: 1.4 !important;
    max-height: 95px !important;
    padding: 8px 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    margin-bottom: 8px !important;
}

/* 6. Fix Bootstrap Checkbox Squishing */
div[role="dialog"] input[type="checkbox"],
#chikitsa-abha-container input[type="checkbox"] {
    margin: 2px 7px 0 0 !important;
    min-width: 15px !important;
    min-height: 15px !important;
    width: 15px !important;
    height: 15px !important;
    cursor: pointer !important;
    position: static !important;
    display: inline-block !important;
    vertical-align: top !important;
    accent-color: var(--abdm-primary, #1b75bb) !important;
}

div[role="dialog"] label:has(input[type="checkbox"]),
div[role="dialog"] .flex:has(> input[type="checkbox"]) {
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #334155 !important;
    margin-bottom: 5px !important;
    display: flex !important;
    align-items: flex-start !important;
}

/* 7. Modal Structure & Button Sizing & Polish */
div[role="dialog"] button {
    text-transform: none !important;
    font-family: inherit !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

/* "Create New ABHA" Link / Button in OTP Modal */
div[role="dialog"] button:has-text("Create New ABHA"),
div[role="dialog"] .flex.justify-end button {
    background-color: transparent !important;
    color: var(--abdm-primary, #1b75bb) !important;
    border: 1px solid rgba(27, 117, 187, 0.3) !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    padding: 3px 10px !important;
    height: auto !important;
    margin-bottom: 6px !important;
    box-shadow: none !important;
}

div[role="dialog"] .flex.justify-end button:hover {
    background-color: #eff6ff !important;
    border-color: var(--abdm-primary, #1b75bb) !important;
    transform: none !important;
}

/* Primary Action Buttons (Verify OTP / Next / Submit) */
div[role="dialog"] button.bg-primary,
div[role="dialog"] button[type="submit"],
div[role="dialog"]>button:last-child {
    background: linear-gradient(135deg, var(--abdm-primary, #1b75bb) 0%, #135b94 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    height: 40px !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(27, 117, 187, 0.25) !important;
    cursor: pointer !important;
    margin-top: 6px !important;
}

div[role="dialog"] button.bg-primary:hover,
div[role="dialog"] button[type="submit"]:hover,
div[role="dialog"]>button:last-child:hover {
    background: linear-gradient(135deg, #1664a0 0%, #0e4c7d 100%) !important;
    box-shadow: 0 6px 16px rgba(27, 117, 187, 0.32) !important;
    transform: translateY(-1px) !important;
}

/* =========================================================================
   8. RESPONSIVE MOBILE & SMALL SCREEN SYSTEM (No cut-off, always centered)
   ========================================================================= */
@media (max-height: 768px) and (min-width: 641px) {
    div[role="dialog"] {
        top: 30% !important;
        max-height: 94vh !important;
    }

    div[role="dialog"] .abha-terms-scroll,
    div[role="dialog"] [class*="terms-scroll"] {
        max-height: 60px !important;
    }

    div[role="dialog"]>div[style*="overflow"],
    div[role="dialog"]>div.flex-1,
    div[role="dialog"]>div[class*="flex-1"] {
        padding: 10px 14px !important;
    }
}

@media (max-width: 640px) {
    div[role="dialog"] {
        width: 95vw !important;
        max-width: 95vw !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        --tw-translate-x: -50% !important;
        --tw-translate-y: -50% !important;
        max-height: 94vh !important;
        border-radius: 12px !important;
    }

    div[role="dialog"] [data-slot="input-otp-slot"],
    div[role="dialog"] input[maxlength="1"] {
        width: 36px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}