/*
Theme Name: Dr. Aissa Baslimane Custom Theme
Theme URI: https://dr-aissa-baslimane.com
Author: Custom Web Dev
Author URI: https://dr-aissa-baslimane.com
Description: Custom, Elementor-compatible WordPress theme for Dr. Aissa Baslimane (Orthopedic Surgeon & Metabolic Specialist), featuring consultation booking, second opinion evaluation, and BANT assessment routing.
Version: 1.2.0
Text Domain: dr-baslimane
*/

@font-face {
    font-family: 'Sakkal Majalla';
    src: url('assets/fonts/majalla.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sakkal Majalla';
    src: url('assets/fonts/majallab.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    --brand-primary: rgb(0, 74, 153);
    --brand-accent: rgb(16, 185, 129);
}

[dir="rtl"],
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] button {
    font-family: 'Tajawal', 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[dir="rtl"] #site-header,
[dir="rtl"] #site-header *,
[dir="rtl"] .site-brand-logo,
[dir="rtl"] .site-brand-logo *,
[dir="rtl"] .font-majalla {
    font-family: 'Sakkal Majalla', 'Majalla', 'Tajawal', 'Cairo', sans-serif !important;
}

[dir="rtl"] * {
    letter-spacing: normal !important;
}

#site-header {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

[dir="ltr"],
[dir="ltr"] body,
[dir="ltr"] input,
[dir="ltr"] select,
[dir="ltr"] textarea,
[dir="ltr"] button {
    font-family: 'Inter', system-ui, sans-serif;
}

body {
    -webkit-font-smoothing: antialiased;
    font-size: 1.25rem;
    line-height: 1.85;
}

/* Dark Mode Global Overrides */
html.dark {
    color-scheme: dark;
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

html.dark body {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

.glass {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
}

.dark .glass {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}

.floating-wa {
    position: fixed;
    bottom: 2rem;
    z-index: 100;
    transition: all 0.3s ease;
}

[dir="rtl"] .floating-wa {
    left: 2rem;
}

[dir="ltr"] .floating-wa {
    right: 2rem;
}

.floating-wa:hover {
    transform: scale(1.1);
}

.accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease;
}

.accordion-item[data-open="true"] .accordion-panel {
    grid-template-rows: 1fr;
}

.accordion-item[data-open="true"] .chevron {
    transform: rotate(180deg);
}

.chevron {
    transition: transform .3s ease;
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

input:focus, select:focus, textarea:focus {
    outline: none;
}

.field-error {
    border-color: #ef4444 !important;
}

.err-msg {
    display: none;
}

.field-error ~ .err-msg, .field-error + .err-msg {
    display: block;
}

.gradient-bg {
    background: linear-gradient(135deg, rgb(0, 51, 102) 0%, rgb(0, 74, 153) 100%);
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px);
}

/* ==========================================================
   PayPal Mobile Layout & LTR Isolation Fix
   ========================================================== */

/* 1. Reset text direction and enforce LTR on all PayPal containers */
.paypal-ltr-wrapper,
.paypal-responsive-wrapper,
.payment_box.payment_method_dr_baslimane_paypal,
.payment_box.payment_method_ppcp-gateway,
.payment_box.payment_method_paypal,
#paypal-button-container,
#dr-paypal-smart-button-container,
.dr-paypal-smart-box,
.paypal-buttons-context-iframe {
    direction: ltr !important;
    text-align: left !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* 2. Force PayPal iframes to fit container width exactly without overflow */
.paypal-buttons,
.paypal-buttons-context-iframe,
iframe.component-frame,
iframe[name^="__zoid__paypal_"],
#paypal-button-container iframe,
#dr-paypal-smart-button-container iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* 3. Prevent Flexbox parents from overflowing on mobile */
.wc_payment_method .flex-1,
.wc_payment_method .payment_box {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* 4. Kill horizontal scrolling on checkout container */
.woocommerce-checkout,
.woocommerce-checkout-payment,
#order_review,
.wc_payment_methods {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* 5. Mobile-specific polish (Screens <= 768px) */
@media (max-width: 768px) {
    /* Prevent floating WhatsApp button from covering form inputs */
    .floating-wa,
    .whatsapp-float {
        bottom: 1rem !important;
        transform: scale(0.85);
        z-index: 40 !important;
    }

    /* Contextual text alignment for instructions while card fields stay LTR */
    [dir="rtl"] .dr-paypal-smart-box > p {
        direction: rtl !important;
        text-align: right !important;
        line-height: 1.6 !important;
    }
    [dir="ltr"] .dr-paypal-smart-box > p {
        direction: ltr !important;
        text-align: left !important;
        line-height: 1.6 !important;
    }

    /* Provide comfortable padding for mobile card inputs */
    .payment_box {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* 6. Hide redundant Place Order button when PayPal Smart Buttons is active */
body:has(#payment_method_dr_baslimane_paypal:checked) #place_order,
form.checkout:has(#payment_method_dr_baslimane_paypal:checked) #place_order,
.woocommerce-checkout-payment:has(#payment_method_dr_baslimane_paypal:checked) #place_order,
body:has(input[name="payment_method"][value*="paypal"]:checked) #place_order,
form.checkout:has(input[name="payment_method"][value*="paypal"]:checked) #place_order,
.woocommerce-checkout-payment:has(input[name="payment_method"][value*="paypal"]:checked) #place_order {
    display: none !important;
}