/* ==========================================================================
   Fokawood Master Contact Us Page Stylesheet
   Modern, Ultra-Luxury, Neshan Map Integration, Professional Mobile-First UX
   ========================================================================== */

:root {
    --foka-font: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --foka-c-orange: #ff7a00;
    --foka-c-orange-dark: #ea580c;
    --foka-c-dark: #0f172a;
    --foka-c-slate: #1e293b;
    --foka-c-muted: #64748b;
    --foka-c-light-muted: #94a3b8;
    --foka-c-bg: #f8fafc;
    --foka-c-card-bg: #ffffff;
    --foka-c-border: #e2e8f0;
    --foka-c-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
    --foka-c-shadow-hover: 0 12px 30px -4px rgba(15, 23, 42, 0.12);
    --foka-contact-map-height: 340px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.foka-contact-page-wrapper {
    font-family: var(--foka-font) !important;
    background: #f8fafc !important;
    min-height: calc(100vh - 120px) !important;
    padding: 18px 0 48px 0 !important;
    box-sizing: border-box !important;
    color: #1e293b !important;
    width: 100% !important;
    max-width: 100% !important;
}

.foka-contact-container {
    max-width: var(--foka-site-max-width, 1240px) !important;
    margin: 0 auto !important;
    padding: 0 var(--foka-site-padding, 16px) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* ==========================================================================
   1. Flash Messages Alert
   ========================================================================== */
.foka-contact-messages {
    margin-bottom: 12px !important;
}

.foka-c-alert {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

.foka-c-alert-success {
    background: #ecfdf5 !important;
    border: 1.5px solid #a7f3d0 !important;
    color: #065f46 !important;
}

.foka-c-alert-error {
    background: #fef2f2 !important;
    border: 1.5px solid #fecaca !important;
    color: #991b1b !important;
}

.foka-c-alert-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   2. Micro Breadcrumbs & Control Hub Master Card (Unified Design Language with Shop)
   ========================================================================== */
.foka-shop-breadcrumbs {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: #64748b !important;
    margin: 4px 0 14px 0 !important;
    font-weight: 500 !important;
}

.foka-shop-breadcrumbs a {
    color: #64748b !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: color 0.2s ease !important;
}

.foka-shop-breadcrumbs a:hover {
    color: #ea580c !important;
}

.foka-shop-breadcrumbs .foka-bc-sep {
    color: #cbd5e1 !important;
    font-size: 11px !important;
}

.foka-shop-breadcrumbs .foka-bc-current {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* Master Control Hub Card (Desktop Base) */
.foka-shop-hub-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 24px 28px 20px 28px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
    margin-bottom: 24px !important;
    transition: box-shadow 0.3s ease !important;
    box-sizing: border-box !important;
}

.foka-shub-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    flex-wrap: nowrap !important;
}

.foka-shub-right {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.foka-shub-icon-box {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
    border: 1.5px solid #fed7aa !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ea580c !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.12) !important;
}

.foka-shub-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.foka-shub-title-flex {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 4px !important;
    flex-wrap: wrap !important;
}

.foka-shub-title {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
}

.foka-shub-badge {
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    border: 1px solid #e2e8f0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
}

.foka-shub-badge::before {
    content: '' !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #16a34a !important;
}

.foka-shub-sub {
    font-size: 0.88rem !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.foka-shub-phone-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    background: #fff7ed !important;
    border: 1.5px solid #fed7aa !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    color: #ea580c !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.22s ease !important;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.08) !important;
    flex-shrink: 0 !important;
    margin-inline-start: auto !important;
}

.foka-shub-phone-pill:hover {
    background: linear-gradient(135deg, #ff7a00 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    border-color: #ea580c !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 16px rgba(234, 88, 12, 0.3) !important;
}

/* Category & Action Chips Slider Nav */
.foka-shub-chips-wrap {
    position: relative !important;
    width: 100% !important;
}

.foka-shub-chips-nav {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding: 4px 2px 8px 2px !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
}

.foka-shub-chips-nav::-webkit-scrollbar {
    height: 5px !important;
}

.foka-shub-chips-nav::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 10px !important;
}

.foka-shub-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 20px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.foka-shub-chip.active {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1.5px solid #0f172a !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2) !important;
}

.foka-shub-chip.active svg {
    color: #ff7a00 !important;
}

.foka-shub-chip:not(.active) {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1.5px solid #e2e8f0 !important;
}

.foka-shub-chip:not(.active):hover {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
    color: #ea580c !important;
    transform: translateY(-1px) !important;
}

/* Fallback / Subtext helpers */
.foka-sub-text-desktop {
    display: inline !important;
}

.foka-sub-text-mobile {
    display: none !important;
}

/* ==========================================================================
   4. Desktop Contact Cards System (3-Card Unified Suite)
   ========================================================================== */
.foka-contact-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 32px !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

.foka-c-card {
    background: var(--foka-c-card-bg) !important;
    border: 1.5px solid var(--foka-c-border) !important;
    border-radius: 18px !important;
    padding: 24px 22px !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    min-height: 236px !important;
    height: 100% !important;
}

.foka-c-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.08) !important;
    border-color: #cbd5e1 !important;
}

.foka-c-card-highlight {
    border-color: #fed7aa !important;
    background: linear-gradient(180deg, #ffffff 0%, #fffcf8 100%) !important;
    box-shadow: 0 4px 16px -2px rgba(234, 88, 12, 0.06) !important;
}

.foka-c-card-highlight:hover {
    border-color: #ea580c !important;
    box-shadow: 0 14px 32px -4px rgba(234, 88, 12, 0.14) !important;
}

.foka-c-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

.foka-c-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: transform 0.22s ease, background-color 0.22s ease !important;
}

.foka-c-card:hover .foka-c-icon {
    transform: scale(1.05) !important;
}

.foka-c-phone-icon {
    background: #fff7ed !important;
    color: var(--foka-c-orange-dark) !important;
    border: 1px solid #ffedd5 !important;
}

.foka-c-wa-icon {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #d1fae5 !important;
}

.foka-c-addr-icon {
    background: #f8fafc !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
}

.foka-c-card-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
}

.foka-c-card-badge::before {
    content: "" !important;
    display: inline-block !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #64748b !important;
    flex-shrink: 0 !important;
}

.foka-c-card-highlight .foka-c-card-badge {
    background: #fff7ed !important;
    color: #9a3412 !important;
    border-color: #fed7aa !important;
}

.foka-c-card-highlight .foka-c-card-badge::before {
    background: #ea580c !important;
}

.foka-badge-green {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border-color: #a7f3d0 !important;
}

.foka-badge-green::before {
    background: #10b981 !important;
}

.foka-c-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    gap: 4px !important;
    margin-bottom: 20px !important;
    min-width: 0 !important;
}

.foka-c-label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--foka-c-muted) !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
}

.foka-c-val {
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: var(--foka-c-dark) !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
}

.foka-c-address {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

.foka-c-sub {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--foka-c-light-muted) !important;
    line-height: 1.45 !important;
    margin-top: 4px !important;
}

.foka-c-val-link {
    text-decoration: none !important;
    color: var(--foka-c-dark) !important;
    transition: color 0.18s ease !important;
    display: inline-block !important;
}

.foka-c-val-link:hover {
    color: var(--foka-c-orange) !important;
}

.foka-c-actions {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: auto !important;
}

.foka-c-actions-single {
    width: 100% !important;
}

.foka-c-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    height: 40px !important;
    padding: 0 16px !important;
    border-radius: 11px !important;
    font-family: var(--foka-font) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1.5px solid transparent !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.foka-c-btn svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
}

.foka-btn-text-desktop {
    display: inline !important;
}

.foka-btn-text-mobile {
    display: none !important;
}

.foka-c-btn-primary {
    background: linear-gradient(135deg, #ff7a00 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(234, 88, 12, 0.25) !important;
    border-color: transparent !important;
}

.foka-c-btn-primary:hover {
    background: linear-gradient(135deg, #ff8a1a 0%, #d94e08 100%) !important;
    box-shadow: 0 6px 16px rgba(234, 88, 12, 0.38) !important;
    color: #ffffff !important;
    transform: translateY(-1.5px) !important;
}

.foka-c-btn-wa {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25) !important;
    border-color: transparent !important;
}

.foka-c-btn-wa:hover {
    background: linear-gradient(135deg, #18c289 0%, #04865b 100%) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.38) !important;
    color: #ffffff !important;
    transform: translateY(-1.5px) !important;
}

.foka-c-btn-outline,
.foka-c-btn-secondary {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.foka-c-btn-outline:hover,
.foka-c-btn-secondary:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: var(--foka-c-dark) !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}


/* ==========================================================================
   5. Main 2-Column Section (Map Hub & Quote Form)
   ========================================================================== */
.foka-contact-main-grid {
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    align-items: start !important;
    box-sizing: border-box !important;
}

/* 5.1 Map Hub Card - Compact, Balanced & Professional */
.foka-map-hub-card {
    background: var(--foka-c-card-bg) !important;
    border: 1.5px solid var(--foka-c-border) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
}

/* Compact Map Canvas Viewport (Controlled height on desktop) */
.foka-map-canvas-wrap {
    position: relative !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    height: 195px !important;
    width: 100% !important;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    background: #f1f5f9 !important;
}

.foka-map-container {
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    background: #f1f5f9 !important;
}

/* Minimal Semi-Transparent Overlay Badge */
.foka-map-overlay-badge {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    background: rgba(15, 23, 42, 0.78) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 400 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
    pointer-events: none !important;
}

.foka-map-pin-pulse {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #ff7a00 !important;
    box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.4) !important;
    animation: fokaDotPulse 2s infinite !important;
}

/* Custom Marker Styling for Leaflet */
.foka-custom-marker {
    background: none !important;
    border: none !important;
}

.foka-marker-container {
    position: relative;
    width: 28px;
    height: 34px;
}

.foka-marker-pin {
    width: 26px;
    height: 26px;
    border-radius: 50% 50% 50% 0;
    background: linear-gradient(135deg, #ff7a00 0%, #ea580c 100%);
    position: absolute;
    transform: rotate(-45deg);
    left: 1px;
    top: 1px;
    box-shadow: 0 3px 10px rgba(234, 88, 12, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    z-index: 2;
}

.foka-marker-dot {
    width: 7px;
    height: 7px;
    background: #ffffff;
    border-radius: 50%;
}

.foka-marker-pulse {
    position: absolute;
    width: 22px;
    height: 10px;
    background: rgba(255, 122, 0, 0.25);
    border-radius: 50%;
    bottom: -2px;
    left: 3px;
    animation: fokaMarkerGroundPulse 2.4s ease-out infinite;
    z-index: 1;
}

@keyframes fokaMarkerGroundPulse {
    0% { transform: scale(0.6); opacity: 0.8; }
    70% { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Redesigned Minimal RTL Popup */
.foka-leaflet-popup .leaflet-popup-content-wrapper {
    background: #ffffff !important;
    color: #0f172a !important;
    border-radius: 12px !important;
    padding: 0 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.12), 0 2px 6px -1px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
}

.foka-leaflet-popup .leaflet-popup-tip-container {
    margin-top: -1px !important;
}

.foka-leaflet-popup .leaflet-popup-tip {
    background: #ffffff !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #e2e8f0 !important;
}

.foka-leaflet-popup .leaflet-popup-content {
    margin: 10px 12px 10px 14px !important;
    line-height: 1.4 !important;
    min-width: 170px !important;
    max-width: 220px !important;
}

.foka-leaflet-popup a.leaflet-popup-close-button {
    top: 6px !important;
    left: 6px !important;
    right: auto !important;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    text-align: center !important;
    border-radius: 50% !important;
    transition: all 0.18s ease !important;
}

.foka-leaflet-popup a.leaflet-popup-close-button:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
}

.foka-map-popup-inner {
    font-family: var(--foka-font) !important;
    text-align: right !important;
    direction: rtl !important;
}

.foka-popup-title {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
}

.foka-popup-sub {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    line-height: 1.45 !important;
    margin-bottom: 8px !important;
}

.foka-popup-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: linear-gradient(135deg, #ff7a00 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.25) !important;
    transition: all 0.18s ease !important;
}

.foka-popup-btn:hover {
    background: linear-gradient(135deg, #ff8a1a 0%, #d94e08 100%) !important;
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.4) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

/* Navigation Apps Section - Compact Segmented Row */
.foka-nav-apps-section {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 !important;
}

.foka-nav-apps-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--foka-c-muted) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.foka-nav-apps-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
}

.foka-app-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 29px !important;
    padding: 0 8px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    transition: all 0.16s ease !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.foka-app-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.foka-app-neshan:hover {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
    transform: translateY(-1px) !important;
}

.foka-app-balad:hover {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    color: #15803d !important;
    transform: translateY(-1px) !important;
}

.foka-app-google:hover {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
    transform: translateY(-1px) !important;
}

/* Access Note - Minimal Informational Box */
.foka-access-note {
    display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
    padding: 6px 10px !important;
    background: #f8fafc !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 8px !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
    color: #475569 !important;
    box-sizing: border-box !important;
}

.foka-access-note svg {
    color: var(--foka-c-orange) !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    width: 13px !important;
    height: 13px !important;
}

.foka-access-text {
    flex: 1 1 auto !important;
}

.foka-access-title {
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    margin-inline-end: 4px !important;
}

/* Mobile Location Card (Hidden on Desktop) */
.foka-mobile-location-card {
    display: none !important;
}

.foka-mlc-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.foka-mlc-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.foka-mlc-pin-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 8px !important;
    background: #fff7ed !important;
    color: #ea580c !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.foka-mlc-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--foka-c-dark, #0f172a) !important;
}

.foka-mlc-badge {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
}

.foka-mlc-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.foka-mlc-address {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-align: right !important;
    direction: rtl !important;
}

.foka-mlc-sub {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    text-align: right !important;
}

.foka-mlc-apps-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 2px !important;
}

.foka-mlc-app-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 36px !important;
    background: #f8fafc !important;
    color: #334155 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 9px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
}

.foka-mlc-app-btn:active {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    transform: scale(0.98) !important;
}

/* 5.2 Direct Quote & Inquiry Form Card */
.foka-contact-form-card {
    background: var(--foka-c-card-bg) !important;
    border: 1.5px solid var(--foka-c-border) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

.foka-form-header {
    margin-bottom: 8px !important;
}

.foka-form-header-top {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 2px !important;
}

.foka-form-badge {
    display: inline-block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 1.5px 7px !important;
    border-radius: 999px !important;
    background: #fff7ed !important;
    color: var(--foka-c-orange-dark) !important;
    border: 1px solid #fed7aa !important;
    margin-bottom: 0 !important;
}

.foka-form-title {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: var(--foka-c-dark) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}

.foka-form-desc {
    font-size: 10.5px !important;
    color: var(--foka-c-muted) !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

.foka-inquiry-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

/* 2-Column Row on Desktop */
.foka-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

.foka-form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.foka-form-label {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin-bottom: 0 !important;
}

.foka-req {
    color: #ef4444 !important;
    font-weight: 700 !important;
}

.foka-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.foka-form-input {
    width: 100% !important;
    height: 33px !important;
    padding: 0 28px 0 10px !important;
    border-radius: 7px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8fafc !important;
    font-family: var(--foka-font) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: var(--foka-c-dark) !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.18s ease !important;
}

.foka-ltr-input {
    direction: ltr !important;
    text-align: right !important;
}

.foka-form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
}

.foka-form-textarea {
    height: 46px !important;
    padding: 5px 8px !important;
    resize: vertical !important;
    min-height: 42px !important;
    max-height: 80px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}

.foka-input-icon {
    position: absolute !important;
    right: 9px !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.foka-input-icon svg {
    width: 13px !important;
    height: 13px !important;
}

.foka-form-input:focus {
    background: #ffffff !important;
    border-color: var(--foka-c-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.12) !important;
}

.foka-form-input:focus + .foka-input-icon {
    color: var(--foka-c-orange) !important;
}

/* Submit Button & Security Note in Compact Footer Row */
.foka-form-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 2px !important;
}

.foka-form-submit-btn {
    width: auto !important;
    min-width: 145px !important;
    height: 33px !important;
    padding: 0 14px !important;
    border-radius: 7px !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    border: 1px solid #334155 !important;
    color: #ffffff !important;
    font-family: var(--foka-font) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.foka-form-submit-btn:hover {
    background: linear-gradient(135deg, #ff7a00 0%, #ea580c 100%) !important;
    border-color: #ea580c !important;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.35) !important;
    transform: translateY(-1px) !important;
}

.foka-form-security {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 9.5px !important;
    color: #94a3b8 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.foka-form-security svg {
    color: #10b981 !important;
    flex-shrink: 0 !important;
    width: 12px !important;
    height: 12px !important;
}

/* ==========================================================================
   6. FAQ Accordion Section - Redesigned Premium Experience
   ========================================================================== */
.foka-contact-faq-section {
    background: var(--foka-c-card-bg, #ffffff) !important;
    border: 1.5px solid var(--foka-c-border, #e2e8f0) !important;
    border-radius: 22px !important;
    padding: 30px 32px 28px 32px !important;
    box-shadow: 0 4px 24px -2px rgba(15, 23, 42, 0.05) !important;
    box-sizing: border-box !important;
    margin-top: 32px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Subtle architectural warm top border highlight */
.foka-contact-faq-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 28px !important;
    right: 28px !important;
    height: 3px !important;
    background: linear-gradient(90deg, rgba(234, 88, 12, 0) 0%, rgba(234, 88, 12, 0.6) 25%, rgba(255, 122, 0, 0.95) 50%, rgba(234, 88, 12, 0.6) 75%, rgba(234, 88, 12, 0) 100%) !important;
    border-radius: 0 0 3px 3px !important;
    pointer-events: none !important;
}

/* FAQ Header */
.foka-faq-header {
    margin-bottom: 22px !important;
}

.foka-faq-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: #fff7ed !important;
    border: 1px solid #ffedd5 !important;
    color: var(--foka-c-orange-dark, #ea580c) !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 1px 3px rgba(234, 88, 12, 0.08) !important;
}

.foka-faq-badge-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--foka-c-orange, #ff7a00) !important;
}

.foka-faq-section-title {
    font-size: 19px !important;
    font-weight: 900 !important;
    color: var(--foka-c-dark, #0f172a) !important;
    margin: 0 0 6px 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    letter-spacing: 0 !important;
    line-height: 1.45 !important;
}

.foka-faq-section-desc {
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* FAQ Grid List */
.foka-faq-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* FAQ Item Card */
.foka-faq-item {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    overflow: hidden !important;
    transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
}

/* Precision Wood Edge Accent Indicator (Active State) */
.foka-faq-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: linear-gradient(180deg, #ff7a00, #ea580c) !important;
    border-radius: 0 14px 14px 0 !important;
    opacity: 0 !important;
    transform: scaleY(0.4) !important;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
}

.foka-faq-item:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.06) !important;
}

.foka-faq-item.active {
    border-color: #fdba74 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 26px -6px rgba(234, 88, 12, 0.09),
                0 2px 8px -2px rgba(15, 23, 42, 0.04) !important;
}

.foka-faq-item.active::before {
    opacity: 1 !important;
    transform: scaleY(1) !important;
}

/* Question Trigger Button */
.foka-faq-q {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    user-select: none !important;
    font-family: var(--foka-font) !important;
    text-align: right !important;
    gap: 14px !important;
    position: relative !important;
    border-radius: 14px !important;
    transition: color 0.2s ease, background-color 0.2s ease !important;
}

.foka-faq-q:focus-visible {
    outline: 2px solid var(--foka-c-orange) !important;
    outline-offset: 2px !important;
}

.foka-faq-q-main {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Persian Step / Number Pill */
.foka-faq-num-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.04) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    flex-shrink: 0 !important;
    transition: all 0.22s ease !important;
}

.foka-faq-item.active .foka-faq-num-pill {
    background: rgba(255, 122, 0, 0.12) !important;
    border-color: rgba(255, 122, 0, 0.3) !important;
    color: var(--foka-c-orange-dark, #ea580c) !important;
}

.foka-faq-q-text,
.foka-faq-q > span:not(.foka-faq-chevron-wrap) {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--foka-c-dark, #0f172a) !important;
    line-height: 1.6 !important;
    transition: color 0.2s ease !important;
}

.foka-faq-item.active .foka-faq-q-text,
.foka-faq-item.active .foka-faq-q > span:not(.foka-faq-chevron-wrap) {
    color: var(--foka-c-orange-dark, #ea580c) !important;
}

/* Chevron Button Pill */
.foka-faq-chevron-wrap {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #64748b !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.foka-faq-q svg {
    color: inherit !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
}

.foka-faq-item:hover .foka-faq-chevron-wrap {
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

.foka-faq-item.active .foka-faq-chevron-wrap {
    background: var(--foka-c-orange, #ff7a00) !important;
    border-color: var(--foka-c-orange, #ff7a00) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.35) !important;
}

.foka-faq-item.active .foka-faq-q svg {
    transform: rotate(180deg) !important;
}

/* Answer Smooth Grid Accordion */
.foka-faq-a {
    display: grid !important;
    grid-template-rows: 0fr !important;
    transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 0 20px !important;
    font-size: 13px !important;
    color: #475569 !important;
    line-height: 1.8 !important;
    box-sizing: border-box !important;
}

.foka-faq-a-inner {
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transform: translateY(-4px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.foka-faq-item.active .foka-faq-a {
    grid-template-rows: 1fr !important;
    padding: 0 20px 20px 20px !important;
}

.foka-faq-item.active .foka-faq-a-inner {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.28s ease 0.06s, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) 0.06s !important;
}

/* Subtle Answer Divider */
.foka-faq-divider {
    height: 1px !important;
    background: linear-gradient(90deg, rgba(226, 232, 240, 0) 0%, rgba(226, 232, 240, 0.9) 15%, rgba(226, 232, 240, 0.9) 85%, rgba(226, 232, 240, 0) 100%) !important;
    margin: 4px 0 14px 0 !important;
}

.foka-faq-a p {
    margin: 0 !important;
    font-size: 13px !important;
    color: #334155 !important;
    line-height: 1.85 !important;
    font-weight: 450 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
}

/* FAQ Footer Help Note */
.foka-faq-footer-help {
    margin-top: 24px !important;
    padding: 16px 20px !important;
    background: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    box-sizing: border-box !important;
}

.foka-faq-help-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.foka-faq-help-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--foka-c-dark, #0f172a) !important;
}

.foka-faq-help-sub {
    font-size: 11.5px !important;
    color: #64748b !important;
}

.foka-faq-help-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--foka-c-orange-dark, #ea580c) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    transition: all 0.22s ease !important;
    flex-shrink: 0 !important;
}

.foka-faq-help-btn:hover {
    background: var(--foka-c-orange, #ff7a00) !important;
    border-color: var(--foka-c-orange, #ff7a00) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3) !important;
    transform: translateY(-1px) !important;
}

.foka-faq-btn-text {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ==========================================================================
   8. Responsive Breakpoints (Tablet Optimization: 769px - 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .foka-contact-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        margin-bottom: 24px !important;
    }

    .foka-c-card {
        padding: 20px 16px !important;
        min-height: 230px !important;
    }

    .foka-c-val {
        font-size: 15.5px !important;
    }

    .foka-c-address {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    .foka-c-btn {
        height: 38px !important;
        font-size: 12px !important;
        padding: 0 12px !important;
    }

    .foka-contact-main-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .foka-map-canvas-wrap {
        height: 210px !important;
    }

    .foka-map-hub-card {
        padding: 16px !important;
    }
}

/* ==========================================================================
   9. Mobile-First Optimization (Phones <= 768px)
   Ultra-Compact, High-Density, Zero-Waste, Touch-Friendly
   ========================================================================== */
@media (max-width: 768px) {
    .foka-contact-page-wrapper {
        padding: 12px 0 calc(var(--foka-bottom-bar-height, 68px) + 26px) 0 !important;
    }

    .foka-contact-container {
        padding: 0 12px !important;
    }

    /* 9.1 Compact & Unified Hub Card on Mobile */
    /* 9.1 Clean, Purpose-Built Mobile Hub Header */
    .foka-shop-breadcrumbs {
        margin: 2px 0 8px 0 !important;
        font-size: 11px !important;
    }

    .foka-shop-hub-card.foka-contact-hub-card {
        padding: 12px 14px !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
        border-color: #e2e8f0 !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
    }

    .foka-contact-hub-card .foka-shub-top-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        margin-bottom: 0 !important;
        width: 100% !important;
    }

    .foka-contact-hub-card .foka-shub-right {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .foka-contact-hub-card .foka-shub-icon-box {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 11px !important;
        flex-shrink: 0 !important;
    }

    .foka-contact-hub-card .foka-shub-icon-box svg {
        width: 19px !important;
        height: 19px !important;
    }

    .foka-contact-hub-card .foka-shub-info {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    .foka-contact-hub-card .foka-shub-title-flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 3px !important;
        margin-bottom: 0 !important;
        width: 100% !important;
    }

    .foka-contact-hub-card .foka-shub-title {
        font-size: 1.08rem !important;
        font-weight: 900 !important;
        line-height: 1.45 !important;
        letter-spacing: 0 !important;
        color: #0f172a !important;
        margin: 0 !important;
        white-space: normal !important;
    }

    .foka-contact-hub-card .foka-shub-badge {
        font-size: 10px !important;
        font-weight: 700 !important;
        padding: 2px 8px !important;
        border-radius: 999px !important;
        line-height: 1.3 !important;
        align-self: flex-start !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* In mobile header: Only show title and badge; hide description subtext */
    .foka-contact-hub-card .foka-shub-sub {
        display: none !important;
    }

    /* Remove Phone CTA pill & Horizontal Action Chips from Mobile Header */
    .foka-contact-hub-card .foka-shub-phone-pill,
    .foka-contact-hub-card .foka-shub-chips-wrap {
        display: none !important;
    }

    /* 9.3 Unified Grouped Contact Cards (Single Integrated Container on Mobile) */
    .foka-contact-cards-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-bottom: 14px !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .foka-c-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 14px !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        border: none !important;
        box-shadow: none !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        transition: background-color 0.18s ease !important;
        min-height: unset !important;
        height: auto !important;
        transform: none !important;
        width: 100% !important;
        position: relative !important;
    }

    .foka-c-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .foka-c-card:active {
        background: #f8fafc !important;
    }

    /* Keep all cards completely uniform in background and border */
    .foka-c-card-highlight {
        border: none !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .foka-c-card-highlight:active {
        background: #f8fafc !important;
    }

    /* Professional Inset Divider between unified rows */
    .foka-contact-cards-grid .foka-c-card + .foka-c-card:not(.foka-c-card-address-desktop) {
        border-top: 1px solid #edf2f7 !important;
    }

    /* Icon: Right side */
    .foka-c-card-top {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        width: auto !important;
        margin: 0 !important;
    }

    .foka-c-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .foka-c-icon svg {
        width: 19px !important;
        height: 19px !important;
    }

    /* Hide decorative badges & secondary descriptions on mobile for zero clutter */
    .foka-c-card-badge {
        display: none !important;
    }

    .foka-c-sub {
        display: none !important;
    }

    /* Information: Center, expands to fill horizontal space */
    .foka-c-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 2px !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        text-align: right !important;
    }

    .foka-c-label {
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: var(--foka-c-muted) !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        margin: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .foka-c-card-address-desktop {
        display: none !important;
    }

    .foka-c-val {
        font-size: 15.5px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        letter-spacing: 0 !important;
        color: var(--foka-c-dark) !important;
        white-space: nowrap !important;
        margin: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .foka-c-address {
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Actions: Unified button sizing for all contact card buttons */
    .foka-c-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
        width: auto !important;
        margin: 0 !important;
    }

    .foka-c-actions-single {
        width: auto !important;
    }

    .foka-c-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        height: 34px !important;
        padding: 0 12px !important;
        border-radius: 9px !important;
        font-family: var(--foka-font) !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        border: 1.5px solid transparent !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        flex: unset !important;
        line-height: 1 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    .foka-c-actions-single .foka-c-btn {
        height: 34px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        border-radius: 9px !important;
    }

    .foka-c-btn-outline {
        border-color: #e2e8f0 !important;
    }

    .foka-c-btn svg {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }

    .foka-c-btn:hover {
        transform: none !important;
    }

    .foka-c-btn:active {
        transform: scale(0.96) !important;
    }

    .foka-btn-text-desktop {
        display: none !important;
    }

    .foka-btn-text-mobile {
        display: inline !important;
    }

    /* 9.4 Mobile Map Replacement & Unified Location Card */
    .foka-map-canvas-wrap {
        display: none !important;
    }

    .foka-map-overlay-badge {
        display: none !important;
    }

    .foka-nav-apps-section {
        display: none !important;
    }

    .foka-access-note {
        display: none !important;
    }

    .foka-c-card-address-desktop {
        display: none !important;
    }

    .foka-contact-main-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .foka-map-hub-card {
        padding: 12px !important;
        border-radius: 12px !important;
        gap: 8px !important;
    }

    .foka-mobile-location-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 9.5 Direct Quote Form (Compact One-Column) */
    .foka-contact-form-card {
        padding: 12px !important;
        border-radius: 12px !important;
        gap: 8px !important;
    }

    .foka-form-header {
        margin-bottom: 6px !important;
    }

    .foka-form-badge {
        font-size: 8.5px !important;
        padding: 1.5px 6px !important;
        margin-bottom: 0 !important;
    }

    .foka-form-title {
        font-size: 13px !important;
        margin-bottom: 1px !important;
    }

    .foka-form-desc {
        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    .foka-inquiry-form {
        gap: 6px !important;
    }

    .foka-form-row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .foka-form-group {
        gap: 2px !important;
    }

    .foka-form-label {
        font-size: 10.5px !important;
    }

    .foka-form-input {
        height: 33px !important;
        font-size: 11.5px !important;
        padding: 0 28px 0 10px !important;
        border-radius: 7px !important;
    }

    .foka-input-icon {
        right: 9px !important;
    }

    .foka-input-icon svg {
        width: 13px !important;
        height: 13px !important;
    }

    .foka-form-textarea {
        height: 48px !important;
        min-height: 42px !important;
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    .foka-form-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 5px !important;
        margin-top: 2px !important;
    }

    .foka-form-submit-btn {
        width: 100% !important;
        height: 35px !important;
        font-size: 11.5px !important;
        border-radius: 7px !important;
    }

    .foka-form-security {
        font-size: 9px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* 9.6 FAQ Accordion Mobile UX Redesign */
    .foka-contact-faq-section {
        padding: 20px 16px !important;
        border-radius: 18px !important;
        margin-top: 20px !important;
    }

    .foka-contact-faq-section::before {
        left: 20px !important;
        right: 20px !important;
    }

    .foka-faq-header {
        margin-bottom: 16px !important;
    }

    .foka-faq-badge {
        font-size: 11px !important;
        padding: 3px 10px !important;
        margin-bottom: 8px !important;
    }

    .foka-faq-section-title {
        font-size: 16px !important;
        margin-bottom: 5px !important;
    }

    .foka-faq-section-desc {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    .foka-faq-grid {
        gap: 10px !important;
    }

    .foka-faq-item {
        border-radius: 12px !important;
    }

    .foka-faq-item::before {
        border-radius: 0 12px 12px 0 !important;
    }

    .foka-faq-q {
        padding: 13px 14px !important;
        gap: 10px !important;
        min-height: 48px !important;
    }

    .foka-faq-q-main {
        gap: 10px !important;
    }

    .foka-faq-num-pill {
        width: 25px !important;
        height: 25px !important;
        font-size: 10.5px !important;
        border-radius: 7px !important;
    }

    .foka-faq-q-text,
    .foka-faq-q > span:not(.foka-faq-chevron-wrap) {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
    }

    .foka-faq-chevron-wrap {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
    }

    .foka-faq-chevron-wrap svg {
        width: 14px !important;
        height: 14px !important;
    }

    .foka-faq-a {
        padding: 0 14px !important;
        font-size: 12px !important;
    }

    .foka-faq-item.active .foka-faq-a {
        padding: 0 14px 16px 14px !important;
    }

    .foka-faq-a p {
        font-size: 12px !important;
        line-height: 1.75 !important;
    }

    .foka-faq-footer-help {
        margin-top: 16px !important;
        padding: 14px 14px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        text-align: center !important;
    }

    .foka-faq-help-info {
        text-align: center !important;
    }

    .foka-faq-help-btn {
        justify-content: center !important;
        width: 100% !important;
        padding: 11px 14px !important;
        font-size: 12.5px !important;
    }
}

/* ==========================================================================
   10. Extra Small Screens (<= 390px, 375px, 360px)
   ========================================================================== */
@media (max-width: 390px) {
    .foka-shub-title {
        font-size: 1rem !important;
    }

    .foka-shub-phone-pill {
        padding: 5px 9px !important;
        font-size: 10px !important;
    }

    .foka-shub-phone-pill strong {
        font-size: 10.5px !important;
    }

    .foka-contact-cards-grid {
        border-radius: 14px !important;
    }

    .foka-c-card {
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    .foka-c-icon {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
    }

    .foka-c-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .foka-c-info {
        gap: 2px !important;
    }

    .foka-c-val {
        font-size: 15px !important;
    }

    .foka-c-label {
        font-size: 11px !important;
    }


    .foka-c-actions {
        width: auto !important;
        gap: 3px !important;
    }

    .foka-c-actions-single {
        width: auto !important;
    }

    .foka-c-actions-single .foka-c-btn,
    .foka-c-btn {
        height: 30px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
        border-radius: 7px !important;
    }

    .foka-app-btn {
        font-size: 10px !important;
        padding: 0 3px !important;
    }

    /* FAQ for extra small screens */
    .foka-contact-faq-section {
        padding: 16px 12px !important;
        border-radius: 14px !important;
    }

    .foka-faq-section-title {
        font-size: 14.5px !important;
    }

    .foka-faq-q {
        padding: 11px 10px !important;
        gap: 8px !important;
    }

    .foka-faq-q-text,
    .foka-faq-q > span:not(.foka-faq-chevron-wrap) {
        font-size: 11.5px !important;
    }

    .foka-faq-num-pill {
        width: 22px !important;
        height: 22px !important;
        font-size: 10px !important;
    }

    .foka-faq-a p {
        font-size: 11.5px !important;
    }
}

/* ==========================================================================
   11. Dark Mode Theme Overrides
   ========================================================================== */
html[data-theme="dark"] .foka-contact-page-wrapper,
body.dark-theme .foka-contact-page-wrapper {
    background: #090d16 !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .foka-c-card,
html[data-theme="dark"] .foka-map-hub-card,
html[data-theme="dark"] .foka-contact-form-card,
html[data-theme="dark"] .foka-contact-faq-section,
body.dark-theme .foka-c-card,
body.dark-theme .foka-map-hub-card,
body.dark-theme .foka-contact-form-card,
body.dark-theme .foka-contact-faq-section {
    background: #0f172a !important;
    border-color: #1e293b !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .foka-c-card-highlight,
body.dark-theme .foka-c-card-highlight {
    background: linear-gradient(90deg, #0f172a 0%, #161e2e 100%) !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .foka-c-label,
body.dark-theme .foka-c-label {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-c-sub,
body.dark-theme .foka-c-sub {
    color: #64748b !important;
}

html[data-theme="dark"] .foka-c-card-badge,
body.dark-theme .foka-c-card-badge {
    background: #1e293b !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .foka-c-card-highlight .foka-c-card-badge,
body.dark-theme .foka-c-card-highlight .foka-c-card-badge {
    background: rgba(234, 88, 12, 0.2) !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-badge-green,
body.dark-theme .foka-badge-green {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

html[data-theme="dark"] .foka-contact-title,
html[data-theme="dark"] .foka-shub-title,
html[data-theme="dark"] .foka-c-val,
html[data-theme="dark"] .foka-form-title,
html[data-theme="dark"] .foka-faq-section-title,
html[data-theme="dark"] .foka-faq-q,
body.dark-theme .foka-contact-title,
body.dark-theme .foka-shub-title,
body.dark-theme .foka-c-val,
body.dark-theme .foka-form-title,
body.dark-theme .foka-faq-section-title,
body.dark-theme .foka-faq-q {
    color: #ffffff !important;
}

/* Dark Mode Support for Control Hub */
html[data-theme="dark"] .foka-shop-hub-card,
body.dark-theme .foka-shop-hub-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .foka-shop-breadcrumbs a,
body.dark-theme .foka-shop-breadcrumbs a {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-shop-breadcrumbs .foka-bc-current,
body.dark-theme .foka-shop-breadcrumbs .foka-bc-current {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .foka-shub-sub,
body.dark-theme .foka-shub-sub {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-shub-badge,
body.dark-theme .foka-shub-badge {
    background: #0f172a !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .foka-shub-icon-box,
body.dark-theme .foka-shub-icon-box {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.15) 0%, rgba(255, 122, 0, 0.25) 100%) !important;
    border-color: rgba(234, 88, 12, 0.4) !important;
}

html[data-theme="dark"] .foka-shub-phone-pill,
body.dark-theme .foka-shub-phone-pill {
    background: rgba(234, 88, 12, 0.15) !important;
    border-color: rgba(234, 88, 12, 0.4) !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-shub-phone-pill:hover,
body.dark-theme .foka-shub-phone-pill:hover {
    background: linear-gradient(135deg, #ff7a00 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    border-color: #ea580c !important;
}

html[data-theme="dark"] .foka-shub-chip:not(.active),
body.dark-theme .foka-shub-chip:not(.active) {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .foka-shub-chip:not(.active):hover,
body.dark-theme .foka-shub-chip:not(.active):hover {
    background: rgba(234, 88, 12, 0.15) !important;
    border-color: #ea580c !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-form-input,
body.dark-theme .foka-form-input {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .foka-access-note,
body.dark-theme .foka-access-note {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* FAQ Dark Mode Refined Styling */
html[data-theme="dark"] .foka-contact-faq-section,
body.dark-theme .foka-contact-faq-section {
    background: #0f172a !important;
    border-color: #1e293b !important;
    box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .foka-faq-badge,
body.dark-theme .foka-faq-badge {
    background: rgba(255, 122, 0, 0.12) !important;
    border-color: rgba(255, 122, 0, 0.25) !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-faq-section-desc,
body.dark-theme .foka-faq-section-desc {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-faq-item,
body.dark-theme .foka-faq-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .foka-faq-item:hover,
body.dark-theme .foka-faq-item:hover {
    background: #243247 !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] .foka-faq-item.active,
body.dark-theme .foka-faq-item.active {
    background: #0f172a !important;
    border-color: rgba(255, 122, 0, 0.55) !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .foka-faq-q-text,
html[data-theme="dark"] .foka-faq-q > span:not(.foka-faq-chevron-wrap),
body.dark-theme .foka-faq-q-text,
body.dark-theme .foka-faq-q > span:not(.foka-faq-chevron-wrap) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .foka-faq-item.active .foka-faq-q-text,
html[data-theme="dark"] .foka-faq-item.active .foka-faq-q > span:not(.foka-faq-chevron-wrap),
body.dark-theme .foka-faq-item.active .foka-faq-q-text,
body.dark-theme .foka-faq-item.active .foka-faq-q > span:not(.foka-faq-chevron-wrap) {
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-faq-num-pill,
body.dark-theme .foka-faq-num-pill {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-faq-item.active .foka-faq-num-pill,
body.dark-theme .foka-faq-item.active .foka-faq-num-pill {
    background: rgba(255, 122, 0, 0.2) !important;
    border-color: rgba(255, 122, 0, 0.4) !important;
    color: #fdba74 !important;
}

html[data-theme="dark"] .foka-faq-chevron-wrap,
body.dark-theme .foka-faq-chevron-wrap {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-faq-item.active .foka-faq-chevron-wrap,
body.dark-theme .foka-faq-item.active .foka-faq-chevron-wrap {
    background: #ff7a00 !important;
    border-color: #ff7a00 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .foka-faq-a p,
body.dark-theme .foka-faq-a p {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .foka-faq-divider,
body.dark-theme .foka-faq-divider {
    background: linear-gradient(90deg, transparent 0%, #334155 15%, #334155 85%, transparent 100%) !important;
}

html[data-theme="dark"] .foka-faq-footer-help,
body.dark-theme .foka-faq-footer-help {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .foka-faq-help-title,
body.dark-theme .foka-faq-help-title {
    color: #f8fafc !important;
}

html[data-theme="dark"] .foka-faq-help-sub,
body.dark-theme .foka-faq-help-sub {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-faq-help-btn,
body.dark-theme .foka-faq-help-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #fdba74 !important;
}

html[data-theme="dark"] .foka-faq-help-btn:hover,
body.dark-theme .foka-faq-help-btn:hover {
    background: #ff7a00 !important;
    border-color: #ff7a00 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .foka-c-card:hover,
body.dark-theme .foka-c-card:hover {
    border-color: #334155 !important;
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .foka-c-card-highlight:hover,
body.dark-theme .foka-c-card-highlight:hover {
    border-color: #ea580c !important;
    box-shadow: 0 12px 28px -4px rgba(234, 88, 12, 0.25) !important;
}

html[data-theme="dark"] .foka-c-phone-icon,
body.dark-theme .foka-c-phone-icon {
    background: rgba(234, 88, 12, 0.15) !important;
    color: #fb923c !important;
    border-color: rgba(234, 88, 12, 0.3) !important;
}

html[data-theme="dark"] .foka-c-wa-icon,
body.dark-theme .foka-c-wa-icon {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

html[data-theme="dark"] .foka-c-addr-icon,
body.dark-theme .foka-c-addr-icon {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .foka-c-card-badge::before,
body.dark-theme .foka-c-card-badge::before {
    background: #94a3b8 !important;
}

html[data-theme="dark"] .foka-c-card-highlight .foka-c-card-badge::before,
body.dark-theme .foka-c-card-highlight .foka-c-card-badge::before {
    background: #fb923c !important;
}

html[data-theme="dark"] .foka-badge-green::before,
body.dark-theme .foka-badge-green::before {
    background: #34d399 !important;
}

html[data-theme="dark"] .foka-c-address,
body.dark-theme .foka-c-address {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .foka-c-btn-outline,
body.dark-theme .foka-c-btn-outline,
html[data-theme="dark"] .foka-c-btn-secondary,
body.dark-theme .foka-c-btn-secondary {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .foka-c-btn-outline:hover,
body.dark-theme .foka-c-btn-outline:hover,
html[data-theme="dark"] .foka-c-btn-secondary:hover,
body.dark-theme .foka-c-btn-secondary:hover {
    background: #283548 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode for Hero & Action Suite */
html[data-theme="dark"] .foka-contact-subtitle,
body.dark-theme .foka-contact-subtitle {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-hero-badge,
body.dark-theme .foka-hero-badge {
    background: rgba(234, 88, 12, 0.15) !important;
    border-color: rgba(234, 88, 12, 0.35) !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-cta-secondary,
body.dark-theme .foka-cta-secondary {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .foka-cta-secondary:hover,
body.dark-theme .foka-cta-secondary:hover {
    background: #283548 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .foka-cta-wa:hover,
body.dark-theme .foka-cta-wa:hover {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: #10b981 !important;
    color: #34d399 !important;
}

html[data-theme="dark"] .foka-cta-nav:hover,
body.dark-theme .foka-cta-nav:hover {
    background: #334155 !important;
    border-color: #64748b !important;
    color: #f8fafc !important;
}

/* Dark mode for Map & Navigation components */
html[data-theme="dark"] .foka-map-canvas-wrap,
body.dark-theme .foka-map-canvas-wrap {
    background: #090d16 !important;
    border-color: #1e293b !important;
}

html[data-theme="dark"] .foka-app-btn,
body.dark-theme .foka-app-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .foka-app-btn:hover,
body.dark-theme .foka-app-btn:hover {
    background: #283548 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .foka-access-note,
body.dark-theme .foka-access-note {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-access-title,
body.dark-theme .foka-access-title {
    color: #f8fafc !important;
}

/* Dark mode for Mobile Location Card */
html[data-theme="dark"] .foka-mlc-app-btn,
body.dark-theme .foka-mlc-app-btn {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .foka-mlc-pin-icon,
body.dark-theme .foka-mlc-pin-icon {
    background: rgba(255, 122, 0, 0.15) !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .foka-mlc-label,
body.dark-theme .foka-mlc-label {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .foka-mlc-address,
body.dark-theme .foka-mlc-address {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .foka-mlc-sub,
body.dark-theme .foka-mlc-sub {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .foka-mlc-badge,
body.dark-theme .foka-mlc-badge {
    background: #1e293b !important;
    color: #cbd5e1 !important;
}