/**
 * AstroLeaf Universal Calculator Design System Layer
 * Authoritative Baseline: Vedic Numerology Grid Calculator & PKR Baseline
 * Palette: Warm Almond (#FFFBF4), Wheat (#FFEFD6), Deep Terracotta (#65250C), Gold/Amber (#FFBA5F, #FF9F2E, #C37A2E)
 * Version: 5.0.0
 */

:root {
    --ale-calc-bg: #FFFBF4;
    --ale-calc-card: #FFFDF9;
    --ale-calc-input-bg: #FFFFFF;
    --ale-calc-primary: #36190B;
    --ale-calc-primary-dark: #2A150A;
    --ale-calc-accent: #D97706;
    --ale-calc-gold: #F59E0B;
    --ale-calc-orange: #9A3412;
    --ale-calc-text: #1E293B;
    --ale-calc-text-muted: #64748B;
    --ale-calc-border: #CBD5E1;
    --ale-calc-border-subtle: rgba(217, 119, 6, 0.22);
    --ale-calc-shadow: 0 8px 30px rgba(42, 21, 10, 0.05);
}

/* Base Workspaces & Containers */
html body,
.ale-calc-workspace,
.cd-strict-container,
.vng-strict-wrapper {
    color: var(--ale-calc-text) !important;
    background-color: var(--ale-calc-bg) !important;
    background: var(--ale-calc-bg) !important;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}

/* Universal Hero Banners */
.pkr-hero-banner,
.vng-hero-banner,
.calc-hero-banner {
    background: linear-gradient(135deg, #36190B 0%, #2A150A 100%) !important;
    padding: clamp(36px, 5vw, 48px) 20px !important;
    text-align: center !important;
    border-bottom: 2px solid #D97706 !important;
}

.pkr-hero-title,
.vng-hero-title,
.calc-hero-title {
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(1.8rem, 3.5vw, 2.35rem) !important;
    font-weight: 800 !important;
    color: #FFFDF9 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.25 !important;
}

.pkr-hero-sub,
.vng-hero-sub,
.calc-hero-sub {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1rem !important;
    color: #F8EFE4 !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

/* Universal Card Wrappers (Single Clean Border, Luxury Ivory Surface) */
.aap-form-card,
.vng-card-wrapper,
.calc-form-card,
.kl-form-card,
.ud-form-card,
.arudha-form-card,
.al-form-card,
.ry-form-card,
.ck-form-card {
    background: #FFFDF9 !important;
    border: 1px solid rgba(217, 119, 6, 0.22) !important;
    border-radius: 16px !important;
    padding: clamp(16px, 2.5vw, 22px) clamp(16px, 3.5vw, 28px) !important;
    box-shadow: 0 8px 30px rgba(42, 21, 10, 0.05) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.pkr-checkout-section,
.ale-calc-form-section,
.cd-form-section,
.kl-form-section {
    padding: 20px 16px 30px !important;
}

/* Eliminate double-card nested borders when form is inside an outer card */
.aap-form-card .ale-universal-form-container,
.vng-card-wrapper .ale-universal-form-container,
.calc-form-card .ale-universal-form-container,
.kl-form-card .ale-universal-form-container,
.ud-form-card .ale-universal-form-container,
.cd-strict-container .ale-universal-form-container,
.arudha-form-card .ale-universal-form-container {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.aap-card-title,
.vng-card-title-main,
.calc-card-title {
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #2A150A !important;
    margin: 0 0 20px 0 !important;
    text-align: left !important;
}

/* Universal Form Inputs & Selects - Left Aligned, Clean Borders, No Excess Indent */
.aap-input,
.lc-input,
.vnc-input,
.ale-input,
.kl-input,
.ud-input,
.cd-input,
select.aap-select,
select.lc-select,
select.vnc-select,
select.ale-select,
select.kl-select,
select.ud-select,
select.cd-select,
.ale-calc-workspace input:not([type='checkbox']):not([type='radio']),
.ale-calc-workspace select,
.cd-strict-container input:not([type='checkbox']):not([type='radio']),
.cd-strict-container select,
.ale-universal-form-container input:not([type='checkbox']):not([type='radio']),
.ale-universal-form-container select {
    display: block !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    line-height: normal !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    text-align: left !important;
    margin: 0 !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 8px !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
    color: #1E293B !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Universal Select Dropdown Chevron Styling (Right Arrow, Clean Left Padding) */
select.aap-select,
select.lc-select,
select.vnc-select,
select.ale-select,
select.kl-select,
select.ud-select,
select.cd-select,
.ale-calc-workspace select,
.cd-strict-container select,
.ale-universal-form-container select {
    padding-left: 14px !important;
    padding-right: 36px !important;
    text-align: left !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23D97706' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 12px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
}

/* Multi-select date/time grids */
.cd-sub-select-grid select,
.kl-sub-select-grid select,
.al-sub-select-grid select,
.ud-sub-select-grid select,
.ry-sub-select-grid select,
.ck-sub-select-grid select {
    padding-left: 10px !important;
    padding-right: 26px !important;
    text-align: left !important;
}

/* Focus State */
.aap-input:focus,
select.aap-select:focus,
.lc-input:focus,
select.lc-select:focus,
.vnc-input:focus,
select.vnc-select:focus,
.ale-calc-workspace input:focus,
.ale-calc-workspace select:focus,
.cd-strict-container input:focus,
.cd-strict-container select:focus,
.ale-universal-form-container input:focus,
.ale-universal-form-container select:focus,
.kl-form-card input:focus,
.kl-form-card select:focus {
    border-color: #D97706 !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16) !important;
    outline: none !important;
}

/* Error State Validation */
.input-error,
.aap-input.input-error,
select.aap-select.input-error,
.ale-calc-workspace input.input-error,
.ale-calc-workspace select.input-error,
.cd-strict-container input.input-error,
.cd-strict-container select.input-error,
.ale-universal-form-container input.input-error,
.ale-universal-form-container select.input-error,
input.error,
select.error {
    border-color: #DC2626 !important;
    background-color: #FEF2F2 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14) !important;
}

/* Icon Alignment & Spacing Overrides - Left padding applied ONLY when wrapper has an icon */
.vnc-field-wrapper,
.lc-field-wrapper,
.cd-input-wrapper,
.input-icon-wrap,
.pkr-form-field-group,
.places-autocomplete-wrap,
.ale-input-wrap {
    position: relative !important;
}

/* Universal baseline: Flush left alignment for all fields without phantom icon gaps */
.cd-input-wrapper input,
.cd-input-wrapper select,
.cd-input-wrapper textarea,
.vnc-field-wrapper input,
.vnc-field-wrapper select,
.vnc-field-wrapper textarea,
.lc-field-wrapper input,
.lc-field-wrapper select,
.lc-field-wrapper textarea,
.input-icon-wrap input,
.input-icon-wrap select,
.input-icon-wrap textarea,
.aap-input,
.sds-input,
.pkr-input,
.kp-input,
.yg-input,
.btr-input,
.prashna-input,
.ale-input,
.cd-input,
.yoga-field-wrapper input,
.yoga-field-wrapper select,
#ayanamsha-select {
    padding-left: 14px !important;
    text-align: left !important;
}

/* Multi-select sub-grids (Day/Month/Year or HH/MM/AM) */
.cd-date-grid select,
.cd-time-grid select,
.vnc-date-grid select,
.vnc-time-grid select,
.pkr-multi-select-grid select {
    padding-left: 10px !important;
    padding-right: 18px !important;
    text-align: left !important;
}

/* Apply 42px left padding ONLY when the field wrapper explicitly contains an icon element */
.cd-input-wrapper:has(> .cd-input-icon, > i, > svg, > span > svg) input,
.vnc-field-wrapper:has(> .vnc-field-icon, > i, > svg, > span > svg) input,
.lc-field-wrapper:has(> .lc-field-icon, > i, > svg, > span > svg) input,
.input-icon-wrap:has(> i, > svg, > span > svg) input,
.places-autocomplete-wrap:has(> i, > svg) input,
div:has(> i.fa-solid) > input.aap-input,
div:has(> i.fa-solid) > input.ale-input {
    padding-left: 42px !important;
}

.vnc-field-icon,
.lc-field-icon,
.cd-input-icon,
.vnc-field-wrapper > .vnc-field-icon,
.lc-field-wrapper > .lc-field-icon,
.cd-input-wrapper > .cd-input-icon,
.lc-field-wrapper > i,
.lc-field-wrapper > span > svg,
.lc-field-wrapper > svg,
.cd-input-wrapper > span > svg,
.cd-input-wrapper > svg,
.input-icon-wrap > i,
.places-autocomplete-wrap > i,
div:has(> input.ale-input) > i.fa-solid,
div:has(> input.aap-input) > i.fa-solid {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    z-index: 10 !important;
    color: var(--ale-calc-primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    line-height: 1 !important;
}

/* Button Icons Must Maintain Natural Inline Flow */
.aap-date-nav-btn i,
.aap-date-today-btn i,
button i,
.pay-now-hero-btn i,
.vng-btn-submit i {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
}

/* Clean Minimal Left Spacing for All Inputs (Zero Icon Indents) */
.aap-input,
.lc-input,
.vnc-input,
.ale-input,
select.aap-select,
select.lc-select,
select.vnc-select,
#calc-name,
#calc-birthplace,
#calc-city,
#calc-pob,
#kundli-name,
#kundli-city-search,
#kundli-pob,
#kundli-birthplace,
#vng-full-name,
#vng-name,
#user_name,
#search_city,
#places-autocomplete,
#panchang-city-input,
#hora-city-input,
#choghadiya-city-input,
.vnc-field-wrapper input,
.lc-field-wrapper input,
.cd-input-wrapper input {
    padding-left: 14px !important;
}

/* Sub-inputs & Compact Triple Columns (e.g. Day, Month, Year, Hour, Min, Sec without icons) */
select#calc-dob-day,
select#calc-dob-month,
input#calc-dob-year,
select#calc-tob-hour,
select#calc-tob-min,
select#calc-tob-sec,
select#calc-tob-am,
select#select-dob-day,
select#select-dob-month,
select#select-dob-year,
select#select-tob-hour,
select#select-tob-min,
select#select-tob-am,
.cd-sub-select-grid select,
select#vng-dob-day,
select#vng-dob-month,
input#vng-dob-year,
input#calc-year,
input#vng-year {
    padding-left: 10px !important;
    padding-right: 22px !important;
}

/* Universal Action Submit Buttons (Janam Kundli Modern Gradient System) */
.pay-now-hero-btn,
button.vng-btn-submit,
.ale-calc-workspace button[type='submit'],
.cd-strict-container button[type='submit'],
.ale-universal-form-container button[type='submit'],
.btn-calc-submit,
.ud-btn-submit,
.kl-btn-submit,
.cd-btn-submit,
.btn-submit {
    display: inline-flex !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    border-radius: 10px !important;
    background: #F97316 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 1.02rem !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    border: 1px solid #F97316 !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    margin: 8px 0 0 0 !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.pay-now-hero-btn:hover,
button.vng-btn-submit:hover,
.ale-calc-workspace button[type='submit']:hover,
.cd-strict-container button[type='submit']:hover,
.ale-universal-form-container button[type='submit']:hover,
.btn-calc-submit:hover,
.ud-btn-submit:hover,
.kl-btn-submit:hover,
.cd-btn-submit:hover,
.btn-submit:hover {
    background: #EA580C !important;
    border-color: #EA580C !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45) !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Clear Cross Location Button */
html body #clear-pob,
#clear-pob {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #D97706 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    z-index: 10 !important;
    box-shadow: none !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
}

html body #clear-pob:hover,
#clear-pob:hover {
    color: #DC2626 !important;
    transform: translateY(-50%) scale(1.15) !important;
}

/* Universal Autocomplete Suggestions Dropdown (Google Places & OpenStreetMap) - Compact Premium Design */
html body #osm-suggestions,
html body #pob-suggestions,
html body #fallback-pob-suggestions,
html body .osm-suggestions-dropdown,
html body .al-pac-dropdown,
html body #google-places-suggestions,
html body .pac-container,
#osm-suggestions,
#pob-suggestions,
#fallback-pob-suggestions,
.osm-suggestions-dropdown,
.al-pac-dropdown,
#google-places-suggestions,
.pac-container {
    z-index: 999999 !important;
    position: absolute !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
    margin-top: 4px !important;
    padding: 4px 0 !important;
    max-height: 210px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

html body .pac-item,
html body .osm-item,
html body .al-pac-item,
html body .pob-suggestion-item,
html body .cd-autocomplete-item,
html body .al-autocomplete-item,
html body .osm-suggestion-item,
.pac-item,
.osm-item,
.al-pac-item,
.pob-suggestion-item,
.cd-autocomplete-item,
.al-autocomplete-item,
.osm-suggestion-item {
    padding: 10px 16px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 20px !important;
    color: #1E293B !important;
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #F1F5F9 !important;
    border-top: none !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-decoration: none !important;
}

html body .pac-item:last-child,
html body .osm-item:last-child,
html body .al-pac-item:last-child,
html body .pob-suggestion-item:last-child,
html body .cd-autocomplete-item:last-child,
html body .al-autocomplete-item:last-child,
html body .osm-suggestion-item:last-child,
.pac-item:last-child,
.osm-item:last-child,
.al-pac-item:last-child,
.pob-suggestion-item:last-child,
.cd-autocomplete-item:last-child,
.al-autocomplete-item:last-child,
.osm-suggestion-item:last-child {
    border-bottom: none !important;
}

html body .pac-item:hover,
html body .pac-item.pac-item-selected,
html body .osm-item:hover,
html body .al-pac-item:hover,
html body .al-pac-item.active,
html body .pob-suggestion-item:hover,
html body .cd-autocomplete-item:hover,
html body .al-autocomplete-item:hover,
html body .osm-suggestion-item:hover,
.pac-item:hover,
.pac-item.pac-item-selected,
.osm-item:hover,
.al-pac-item:hover,
.al-pac-item.active,
.pob-suggestion-item:hover,
.cd-autocomplete-item:hover,
.al-autocomplete-item:hover,
.osm-suggestion-item:hover {
    background-color: #FFF7ED !important;
    color: #EA580C !important;
    padding-left: 18px !important;
    text-decoration: none !important;
}

html body .pac-item-query,
.pac-item-query {
    font-size: 0.85rem !important;
    color: #1E293B !important;
    font-weight: 700 !important;
    display: inline !important;
    padding-right: 0 !important;
}

html body .pac-item-query:not(:last-child)::after,
.pac-item-query:not(:last-child)::after {
    content: ", " !important;
    font-weight: 500 !important;
    color: #64748B !important;
}

html body .pac-matched,
.pac-matched {
    color: #D97706 !important;
    font-weight: 800 !important;
}

html body .pac-item > span:not(.pac-item-query):not(.pac-icon),
.pac-item > span:not(.pac-item-query):not(.pac-icon) {
    font-size: 0.82rem !important;
    color: #64748B !important;
    font-weight: 500 !important;
    display: inline !important;
}

html body .pac-icon,
html body .pac-icon-marker,
.pac-icon,
.pac-icon-marker {
    display: inline-block !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    margin-right: 8px !important;
    margin-top: 0 !important;
    vertical-align: middle !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23D97706' d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    filter: none !important;
    flex-shrink: 0 !important;
}

/* Results Stack Containers */
.vng-results-container,
.calc-results-container,
#calc-results:not([style*="display: none"]):not([style*="display:none"]) {
    max-width: 840px !important;
    margin: 20px auto 0 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    box-sizing: border-box !important;
}

.vng-card-wrapper,
.cd-table-box,
.cd-antardasha-box,
.ry-section-block,
.calc-result-card {
    background: var(--ale-calc-card) !important;
    border: 1.5px solid var(--ale-calc-border) !important;
    border-radius: 12px !important;
    padding: clamp(16px, 2.5vw, 24px) !important;
    box-shadow: var(--ale-calc-shadow) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.vng-driver-card,
.calc-metric-box,
.calc-highlight-box {
    background: var(--ale-calc-input-bg) !important;
    border: 1.5px solid var(--ale-calc-border) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
}

/* Table styling with warm highlights */
.ale-calc-workspace table,
.cd-strict-container table,
.vng-results-container table,
.calc-results-container table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #FFF7E8 !important;
    border: 1px solid var(--ale-calc-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.ale-calc-workspace table th,
.cd-strict-container table th,
.vng-results-container table th,
.calc-results-container table th {
    background: #FFEFD6 !important;
    color: var(--ale-calc-primary) !important;
    font-weight: 700 !important;
    padding: 14px 18px !important;
    border-bottom: 1.5px solid var(--ale-calc-border) !important;
    font-size: 0.94rem !important;
    text-align: left !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

.ale-calc-workspace table td,
.cd-strict-container table td,
.vng-results-container table td,
.calc-results-container table td {
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(101, 37, 12, 0.15) !important;
    color: var(--ale-calc-text) !important;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
}

.ale-calc-workspace table tbody tr:hover,
.cd-strict-container table tbody tr:hover,
.vng-results-container table tbody tr:hover,
.calc-results-container table tbody tr:hover {
    background: #FFE2C2 !important;
    transition: background 0.15s ease !important;
}

/* Ensure spacious horizontal scrolling for tables on mobile screens without squishing cells */
.ale-calc-workspace .table-responsive,
.cd-strict-container .table-responsive,
.vng-results-container .table-responsive,
.calc-results-container .table-responsive,
.cd-table-box,
.al-table-box,
.kl-table-box,
.padas-table-wrap,
.chara-dasha-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Explanatory SEO Content & FAQ Section */
.wy-seo-articles {
    max-width: 860px !important;
    margin: clamp(28px, 4vw, 40px) auto 0 !important;
    padding: 0 20px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--ale-calc-text) !important;
}

.wy-seo-articles h2,
.wy-seo-articles h3 {
    color: var(--ale-calc-primary) !important;
    font-family: 'Outfit', 'Be Vietnam Pro', sans-serif !important;
    font-weight: 700 !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
}

.wy-seo-articles p,
.wy-seo-articles li {
    color: #4A260F !important;
    line-height: 1.75 !important;
    font-size: 0.98rem !important;
}

.pkr-faq-section {
    max-width: 860px !important;
    margin: 32px auto 48px auto !important;
    padding: 0 20px !important;
}

.pkr-faq-item {
    background: #FFFDF9 !important;
    border: 1px solid rgba(101, 37, 12, 0.22) !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.pkr-faq-item.active {
    border-color: #D97706 !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.08) !important;
}

.pkr-faq-question {
    width: 100% !important;
    padding: 18px 20px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--ale-calc-primary) !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    user-select: none !important;
}

.pkr-faq-question:hover {
    color: var(--ale-calc-accent) !important;
    background: #FFF7ED !important;
}

.pkr-faq-item.active .pkr-faq-question {
    color: #D97706 !important;
    background: #FFF7ED !important;
}

/* FAQ answer: hidden by default, revealed via inline height from JS */
.pkr-faq-answer {
    height: 0 !important;
    overflow: hidden !important;
    transition: height 0.28s ease !important;
    padding: 0 20px !important;
    color: #4A260F !important;
    line-height: 1.65 !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
}

/* Fallback for when JS hasn't run yet - ensure active is always visible */
.pkr-faq-item.active .pkr-faq-answer {
    height: auto !important;
    padding: 0 20px 18px 20px !important;
}

/* FAQ icon */
.pkr-faq-question .faq-icon {
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.28s ease !important;
    color: #94A3B8 !important;
}

.pkr-faq-question .faq-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    stroke-width: 2.5 !important;
    fill: none !important;
    stroke-linecap: round !important;
}

.pkr-faq-item.active .pkr-faq-question .faq-icon {
    transform: rotate(45deg) !important;
    color: #D97706 !important;
}

/* Mobile Responsive Refinements */
@media (max-width: 640px) {
    .checkout-wrapper,
    .calc-form-wrapper,
    .vng-results-container,
    .calc-results-container {
        padding: 0 12px !important;
    }
    
    .aap-form-card,
    .vng-card-wrapper {
        padding: 20px 16px !important;
    }
    
    .pkr-hero-banner {
        padding: 32px 16px !important;
    }
    
    .pkr-hero-title {
        font-size: 1.65rem !important;
    }
}

/* ==========================================================================
   AUTHORITATIVE UNIVERSAL CALCULATOR FORM & INPUT MODERNIZATION LAYER
   Guarantees all calculator pages have identical crisp, luxury styling:
   - Single refined border cards (No double nested boxes)
   - Crisp white #FFFFFF input & select fields with #CBD5E1 borders
   - Perfectly left-aligned selects with 14px padding (No excessive icon indent)
   - Signature orange gradient submit buttons with white text
   - Comprehensive error validation states
   ========================================================================== */

/* ==========================================================================
   ASTROLEAF UNIVERSAL CALCULATOR FORM DESIGN SYSTEM (SUPREME SPECIFICITY)
   - Single outer container card (#FFFDF9, 1px solid rgba(217, 119, 6, 0.22))
   - Crisp white #FFFFFF input & select fields with #CBD5E1 borders
   - Perfectly left-aligned selects with 14px padding (No excessive icon indent)
   - Signature orange gradient submit buttons with white bold text
   - Centered cross × clear buttons inside birth city inputs
   - Real-time red error validation with red placeholder & red select text
   ========================================================================== */

/* Universal Form Container Cards */
html body .ud-form-card,
html body .aap-form-card,
html body .kl-form-card,
html body .calc-form-card,
html body .vng-card-wrapper,
html body .arudha-form-card,
html body .al-form-card,
html body .ry-form-card,
html body .ck-form-card,
html body .lc-form-card,
html body .cd-form-card,
html body .btr-form-card,
html body .d9-form-card,
html body .d10-form-card,
html body .vp-form-card,
html body .sb-form-card,
html body .panchang-form-card,
html body .ms-form-card,
html body .ss-form-card,
html body .as-form-card,
html body .vnc-form-card,
html body .raj-form-card,
html body .form-card,
html body .astroleaf-calc-card,
html body [class*="form-card"],
html body [class*="card-wrapper"],
html body .vng-strict-wrapper .d9-form-card,
html body .vng-strict-wrapper .d10-form-card,
html body .cd-strict-wrapper .cd-form-card,
html body .cd-strict-wrapper .vng-card-wrapper,
html body .cd-strict-wrapper .aap-form-card,
html body .ck-strict-wrapper .ck-form-card,
html body .ck-strict-wrapper .vng-card-wrapper,
html body .ck-strict-wrapper .aap-form-card,
html body .cd-strict-container .aap-form-card {
    background-color: #FFFDF9 !important;
    background: #FFFDF9 !important;
    border: 1px solid rgba(217, 119, 6, 0.22) !important;
    border-radius: 16px !important;
    padding: clamp(24px, 4vw, 36px) !important;
    box-shadow: 0 8px 30px rgba(42, 21, 10, 0.05) !important;
    box-sizing: border-box !important;
    max-width: 840px !important;
    margin: 36px auto !important;
    width: 100% !important;
}

/* Eliminate nested inner form borders everywhere */
html body .ud-form-card form,
html body .aap-form-card form,
html body .kl-form-card form,
html body .calc-form-card form,
html body .vng-card-wrapper form,
html body .arudha-form-card form,
html body .al-form-card form,
html body .ry-form-card form,
html body .ck-form-card form,
html body .lc-form-card form,
html body .cd-form-card form,
html body .btr-form-card form,
html body .d9-form-card form,
html body .d10-form-card form,
html body .vp-form-card form,
html body .sb-form-card form,
html body [class*="form-card"] form,
html body .cd-strict-container form,
html body form.kl-form-grid,
html body form.ud-form-grid,
html body form.ale-universal-form-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Form Card Eyebrow & Titles */
html body .form-card-eyebrow,
html body .form-card-header,
html body [class*="form-header"],
html body .vp-form-header,
html body .al-form-header,
html body .cd-form-header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    box-shadow: none !important;
    text-align: left !important;
}

html body .cd-form-eyebrow,
html body .ck-form-eyebrow,
html body .d9-form-eyebrow,
html body .d10-form-eyebrow,
html body .vp-form-eyebrow,
html body [class*="form-eyebrow"],
html body .jaimini-badge {
    color: #D97706 !important;
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    margin-bottom: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

html body .form-card-title,
html body .cd-form-title,
html body .ck-form-title,
html body .d9-form-title,
html body .d10-form-title,
html body .vp-form-title,
html body [class*="form-title"],
html body h2.form-card-title,
html body h3.form-card-title {
    color: #2A150A !important;
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    margin: 0 0 20px 0 !important;
    line-height: 1.3 !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Form Labels */
html body label,
html body .form-input-group label,
html body .pkr-form-field-group label,
html body .ud-input-group label,
html body .cd-label,
html body .ck-label,
html body [class*="form-card"] label {
    color: #36190B !important;
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Universal Inputs & Selects: Crisp White, Subtle Border, Left-Aligned */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
html body select,
html body textarea,
html body [class*="form-card"] input,
html body [class*="form-card"] select,
html body [class*="card-wrapper"] input,
html body [class*="card-wrapper"] select,
html body .ud-form-card input,
html body .ud-form-card select,
html body .d9-form-card input,
html body .d9-form-card select,
html body .d10-form-card input,
html body .d10-form-card select,
html body .vp-form-card input,
html body .vp-form-card select,
html body .vng-strict-wrapper .d9-form-card input,
html body .vng-strict-wrapper .d9-form-card select,
html body .vng-strict-wrapper .d10-form-card input,
html body .vng-strict-wrapper .d10-form-card select,
html body .cd-strict-wrapper input,
html body .cd-strict-wrapper select,
html body .ck-strict-wrapper input,
html body .ck-strict-wrapper select,
html body .d9-form-card input.ale-input,
html body .d9-form-card select.ale-input,
html body .d10-form-card input.ale-input,
html body .d10-form-card select.ale-input,
html body .ud-input,
html body .aap-input,
html body .kl-input,
html body .lc-input,
html body .vnc-input,
html body .ale-input,
html body .cd-input,
html body .ck-input,
html body .d9-input,
html body .d10-input,
html body .vp-input,
html body .sb-input,
html body input.ale-input,
html body select.ale-input,
html body select.ud-select,
html body select.aap-select,
html body select.kl-select,
html body select.lc-select,
html body select.vnc-select,
html body select.cd-select {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    line-height: normal !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    text-align: left !important;
    text-align-last: left !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 8px !important;
    color: #1E293B !important;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

/* Universal Select Chevron and Padding */
html body select,
html body [class*="form-card"] select,
html body select.ud-select,
html body select.aap-select,
html body select.kl-select,
html body select.lc-select,
html body select.vnc-select,
html body select.ale-select,
html body select.cd-select,
html body select.ale-input {
    padding-left: 14px !important;
    padding-right: 36px !important;
    text-align: left !important;
    text-align-last: left !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23D97706' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 12px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
}

/* Sub-select grids (Day, Month, Year, Hour, Min, Sec) */
html body .cd-sub-select-grid,
html body .kl-sub-select-grid,
html body .al-sub-select-grid,
html body .ud-sub-select-grid,
html body .ry-sub-select-grid,
html body .ck-sub-select-grid,
html body [class*="sub-select-grid"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
}

html body .cd-sub-select-grid select,
html body .kl-sub-select-grid select,
html body .al-sub-select-grid select,
html body .ud-sub-select-grid select,
html body .ry-sub-select-grid select,
html body .ck-sub-select-grid select,
html body [class*="sub-select-grid"] select {
    padding-left: 10px !important;
    padding-right: 22px !important;
    text-align: left !important;
    text-align-last: left !important;
    font-size: 0.88rem !important;
    height: 46px !important;
    min-height: 46px !important;
    background-position: right 6px center !important;
}

/* Universal Input Focus Ring */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
html body select:focus,
html body textarea:focus,
html body [class*="form-card"] input:focus,
html body [class*="form-card"] select:focus {
    border-color: #D97706 !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16) !important;
    outline: none !important;
}

/* Universal Submit Buttons: Signature Warm Orange Gradient with White Bold Text */
html body .ud-btn-submit,
html body .kl-btn-submit,
html body .aap-btn-submit,
html body .lc-submit-btn,
html body .vng-btn-submit,
html body .arudha-btn-submit,
html body .pay-now-hero-btn,
html body button[type="submit"].btn-submit,
html body .btn-calculate,
html body #btn-calculate,
html body button.ud-btn-submit,
html body .cd-btn-submit,
html body .ck-btn-submit,
html body .d9-btn-submit,
html body .d10-btn-submit,
html body .vp-btn-submit,
html body .sb-btn-submit,
html body [class*="btn-submit"],
html body [class*="submit-btn"] {
    background: #F97316 !important;
    color: #FFFFFF !important;
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    height: 50px !important;
    border-radius: 10px !important;
    border: 1px solid #F97316 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35) !important;
    transition: all 0.25s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

html body .ud-btn-submit:hover,
html body .kl-btn-submit:hover,
html body .aap-btn-submit:hover,
html body .lc-submit-btn:hover,
html body .vng-btn-submit:hover,
html body .arudha-btn-submit:hover,
html body .pay-now-hero-btn:hover,
html body button[type="submit"].btn-submit:hover,
html body .btn-calculate:hover,
html body #btn-calculate:hover,
html body [class*="btn-submit"]:hover {
    background: #EA580C !important;
    border-color: #EA580C !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45) !important;
    transform: translateY(-2px) !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Universal Center Alignment for Birth Location Clear Cross Icon */
html body #clear-pob,
html body .clear-pob-btn,
html body #clear-location,
html body [id*="clear-pob"],
html body [id*="clear-location"],
html body [class*="clear-pob"],
#clear-pob,
.clear-pob-btn,
#clear-location {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #D97706 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    z-index: 10 !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
}

html body #clear-pob:hover,
html body .clear-pob-btn:hover,
html body #clear-location:hover,
#clear-pob:hover,
.clear-pob-btn:hover,
#clear-location:hover {
    color: #DC2626 !important;
    transform: translateY(-50%) scale(1.15) !important;
}

/* Universal Form Error Highlighting with Red Placeholder & Red Select Text */
html body input.input-error,
html body select.input-error,
html body textarea.input-error,
html body .input-error,
input.input-error,
select.input-error,
textarea.input-error,
.input-error {
    border-color: #DC2626 !important;
    background-color: #FEF2F2 !important;
    background: #FEF2F2 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16) !important;
    color: #DC2626 !important;
}

/* Red Placeholders on Empty Error */
html body input.input-error::placeholder,
html body textarea.input-error::placeholder,
input.input-error::placeholder,
textarea.input-error::placeholder,
.input-error::placeholder {
    color: #DC2626 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #DC2626 !important;
}

html body input.input-error::-webkit-input-placeholder,
html body textarea.input-error::-webkit-input-placeholder,
input.input-error::-webkit-input-placeholder,
textarea.input-error::-webkit-input-placeholder,
.input-error::-webkit-input-placeholder {
    color: #DC2626 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #DC2626 !important;
}

html body input.input-error::-moz-placeholder,
html body textarea.input-error::-moz-placeholder,
input.input-error::-moz-placeholder,
textarea.input-error::-moz-placeholder,
.input-error::-moz-placeholder {
    color: #DC2626 !important;
    opacity: 1 !important;
}

html body input.input-error:-ms-input-placeholder,
html body textarea.input-error:-ms-input-placeholder,
input.input-error:-ms-input-placeholder,
textarea.input-error:-ms-input-placeholder,
.input-error:-ms-input-placeholder {
    color: #DC2626 !important;
    opacity: 1 !important;
}

/* Red Select Text on Error */
html body select.input-error,
select.input-error {
    color: #DC2626 !important;
}

html body select.input-error option:not([value=""]) {
    color: #1E293B !important;
}

/* Standalone Universal Report Promotion Card (Guaranteed Side-by-Side on All Devices) */
.ale-rep-promo-wrapper {
    margin-top: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ale-rep-card-unified {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(195, 122, 46, 0.25) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    box-shadow: 0 4px 16px rgba(54, 25, 11, 0.05) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.ale-rep-card-unified:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(195, 122, 46, 0.12) !important;
    border-color: rgba(249, 115, 22, 0.5) !important;
}

.ale-rep-card-left {
    flex: 0 0 68px !important;
    width: 68px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ale-rep-cover-image {
    width: 68px !important;
    height: 92px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12)) !important;
    display: block !important;
}

.ale-rep-card-right {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.ale-rep-card-header {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.ale-rep-card-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    color: #2E1836 !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.25 !important;
}

.ale-rep-card-desc {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.82rem !important;
    color: #4B5563 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.ale-rep-card-action {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-shrink: 0 !important;
}

.ale-rep-price-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.ale-rep-current-price {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #65250C !important;
    line-height: 1 !important;
    display: inline-block !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
}

.ale-rep-original-price {
    text-decoration: line-through !important;
    font-size: 0.78rem !important;
    color: #A89F91 !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

.ale-rep-cta-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #F97316 !important;
    color: #FFFFFF !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(249, 115, 22, 0.3) !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.ale-rep-cta-button:hover {
    background: #EA580C !important;
    transform: translateY(-1px) !important;
}

/* Mobile responsive layout - image stays locked on the left */
@media (max-width: 640px) {
    .ale-rep-card-unified {
        padding: 12px 14px !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    
    .ale-rep-card-left {
        flex: 0 0 60px !important;
        width: 60px !important;
        align-items: center !important;
    }
    
    .ale-rep-cover-image {
        width: 60px !important;
        height: 82px !important;
    }
    
    .ale-rep-card-right {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    .ale-rep-card-title {
        font-size: 1.02rem !important;
    }
    
    .ale-rep-card-desc {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
    }
    
    .ale-rep-card-action {
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 2px !important;
    }
    
    .ale-rep-price-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    .ale-rep-current-price {
        font-size: 1.25rem !important;
        white-space: nowrap !important;
    }
    
    .ale-rep-original-price {
        font-size: 0.76rem !important;
        white-space: nowrap !important;
    }
    
    .ale-rep-cta-button {
        padding: 8px 14px !important;
        font-size: 0.84rem !important;
    }
}

/* ==========================================================================
   AUTHORITATIVE UNIVERSAL MOBILE RESPONSIVENESS LAYER FOR ALL CALCULATORS
   Guarantees 100% responsive, beautiful, touch-friendly UI on all mobile screens:
   - Form containers & workspaces (<=768px, <=640px, <=480px, <=360px)
   - 1-Column input grid collapse with zero horizontal overflow
   - Balanced 3-column sub-grids for Date of Birth & Time of Birth
   - Touch-friendly 50px submit action buttons with signature orange gradient
   - Responsive Kundli SVG / Canvas charts with 1:1 aspect-ratio
   - Responsive 3x3 Loshu / Vedic numerology grids
   - Horizontal-scrollable data tables (Ashtakvarga, Shadbala, Dasha, Panchang)
   - Smooth horizontal scrollable tab bars with hidden scrollbars
   ========================================================================== */

@media (max-width: 768px) {
    /* Calculator Hero Banners */
    html body .pkr-hero-banner,
    html body .vng-hero-banner,
    html body .calc-hero-banner,
    html body .ale-calc-hero {
        padding: 32px 16px 24px !important;
    }

    html body .pkr-hero-title,
    html body .vng-hero-title,
    html body .calc-hero-title,
    html body .ale-calc-hero-title {
        font-size: 1.85rem !important;
        line-height: 1.25 !important;
    }

    html body .pkr-hero-sub,
    html body .vng-hero-sub,
    html body .calc-hero-sub,
    html body .ale-calc-hero-sub {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
    }
}

@media (max-width: 640px) {
    /* Workspace & Main Containers */
    html body,
    html body .ale-calc-workspace,
    html body .cd-strict-container,
    html body .vng-strict-wrapper,
    html body .calc-wrapper,
    html body .aap-calc-wrapper,
    html body .kl-wrapper,
    html body .ud-wrapper {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Calculator Form Container Cards */
    html body .aap-form-card,
    html body .vng-card-wrapper,
    html body .calc-form-card,
    html body .kl-form-card,
    html body .ud-form-card,
    html body .arudha-form-card,
    html body .al-form-card,
    html body .ry-form-card,
    html body .ck-form-card,
    html body .lc-form-card,
    html body .cd-form-card,
    html body .btr-form-card,
    html body .d9-form-card,
    html body .d10-form-card,
    html body .panchang-card,
    html body .hora-card,
    html body .choghadiya-card,
    html body .shadbala-card,
    html body .transit-card,
    html body .yoga-card,
    html body .ale-universal-form-container {
        padding: 18px 14px !important;
        border-radius: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Collapse ALL multi-column form grids to single column */
    html body .ale-form-grid-2,
    html body .calc-form-grid-2,
    html body .vng-form-row-2,
    html body .kl-form-row-2,
    html body .arudha-grid-2,
    html body .form-row-2,
    html body .form-grid-2,
    html body .grid-2-cols,
    html body .grid-3-cols,
    html body .ud-grid-2,
    html body .ry-grid-2,
    html body .ck-grid-2,
    html body .lc-grid-2,
    html body .cd-grid-2,
    html body .aap-grid-2,
    html body .ale-form-row-2,
    html body .d9-grid-2,
    html body .d10-grid-2,
    html body .kp-form-grid-2,
    html body .retro-form-grid,
    html body .shadbala-form-grid,
    html body .transit-form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* All Inputs & Selects full width */
    html body input[type="text"],
    html body input[type="number"],
    html body input[type="date"],
    html body select,
    html body textarea,
    html body .ale-input-field,
    html body .calc-input,
    html body .vng-input,
    html body .kl-input,
    html body .arudha-input {
        width: 100% !important;
        max-width: 100% !important;
        height: 46px !important;
        font-size: 0.95rem !important;
        box-sizing: border-box !important;
    }

    /* Date of Birth & Time of Birth 3-Column Sub-Grids */
    html body .dob-grid-3,
    html body .tob-grid-3,
    html body .time-inputs-row,
    html body .date-inputs-row,
    html body .ale-dob-row,
    html body .ale-tob-row,
    html body .pkr-date-grid,
    html body .vng-dob-grid,
    html body .calc-dob-grid,
    html body .calc-tob-grid,
    html body .kl-dob-grid,
    html body .kl-tob-grid,
    html body .grid-3-dob,
    html body .grid-3-tob {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Gender Toggle Buttons */
    html body .gender-grid-2,
    html body .ale-gender-toggle,
    html body .gender-buttons,
    html body .calc-gender-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* City Search Autocomplete Dropdown */
    html body .places-autocomplete-list,
    html body .geo-suggestions-box,
    html body .city-dropdown,
    html body .pac-container,
    html body .ale-places-autocomplete-dropdown {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
        z-index: 99999 !important;
        max-height: 220px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    }

    /* Full-Width Mobile Action / Submit Button */
    html body .ale-calc-btn-primary,
    html body .calc-submit-btn,
    html body .vng-btn-primary,
    html body .pkr-btn-primary,
    html body .kl-submit-btn,
    html body .arudha-submit-btn,
    html body .ud-submit-btn,
    html body .ck-submit-btn,
    html body .ry-submit-btn,
    html body .lc-submit-btn,
    html body .cd-submit-btn,
    html body .btr-submit-btn,
    html body .d9-submit-btn,
    html body .d10-submit-btn,
    html body .shadbala-submit-btn,
    html body .transit-submit-btn,
    html body .yoga-submit-btn,
    html body .panchang-submit-btn,
    html body button[type="submit"].btn-primary {
        width: 100% !important;
        min-height: 50px !important;
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        padding: 12px 18px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 18px !important;
        box-sizing: border-box !important;
    }

    /* Result Containers & Cards on Mobile */
    html body .vng-results-container,
    html body .calc-results-container,
    html body .kl-results-container,
    html body .arudha-results-container,
    html body .ud-results-container,
    html body .ry-results-container,
    html body .ck-results-container,
    html body .d9-results-container,
    html body .d10-results-container,
    html body .shadbala-results-container,
    html body .panchang-results-container,
    html body .choghadiya-results-container {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Kundli SVG / Canvas Charts Responsive Scaling */
    html body .ale-kundli-chart-wrap,
    html body .kundli-chart-container,
    html body .chart-canvas-wrap,
    html body svg.kundli-chart,
    html body svg.north-indian-chart,
    html body .chart-svg,
    html body #kundli-svg,
    html body .navamsha-chart-svg {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 !important;
        margin: 0 auto !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Numerology 3x3 Grids Responsive */
    html body .vng-grid-table,
    html body .loshu-grid-table,
    html body .vedic-grid-table,
    html body .grid-3x3-container {
        max-width: 320px !important;
        width: 100% !important;
        margin: 0 auto !important;
        aspect-ratio: 1 !important;
        box-sizing: border-box !important;
    }

    /* Universal Responsive Tables (Horizontal Scroll) */
    html body table,
    html body .ale-calc-table,
    html body .vng-data-table,
    html body .ashtakvarga-table,
    html body .shadbala-table,
    html body .dasha-table,
    html body .panchang-table,
    html body .choghadiya-table,
    html body .hora-table,
    html body .table-responsive,
    html body .wy-table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Tab Navigation Bars Horizontal Scroll */
    html body .calc-tab-nav,
    html body .dasha-nav-tabs,
    html body .kundli-tab-btns,
    html body .panchang-tabs,
    html body .tabs-header {
        overflow-x: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        width: 100% !important;
    }

    html body .calc-tab-nav::-webkit-scrollbar,
    html body .dasha-nav-tabs::-webkit-scrollbar,
    html body .kundli-tab-btns::-webkit-scrollbar,
    html body .panchang-tabs::-webkit-scrollbar {
        display: none !important;
    }

    html body .calc-tab-btn,
    html body .dasha-tab-btn,
    html body .kundli-tab-btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 8px 14px !important;
        font-size: 0.88rem !important;
    }
}

@media (max-width: 380px) {
    html body .dob-grid-3,
    html body .tob-grid-3,
    html body .time-inputs-row,
    html body .date-inputs-row {
        gap: 5px !important;
    }

    html body .dob-grid-3 select,
    html body .dob-grid-3 input,
    html body .tob-grid-3 select,
    html body .tob-grid-3 input {
        padding: 0 6px !important;
        font-size: 0.84rem !important;
    }
}