/* ===============================================
   Bond & Bloom - Consolidated RTL Overrides
   Scoped under html[dir="rtl"] for WordPress Arabic locale
   Only directional overrides - base styles live in style.css & pages.css
   =============================================== */

/* ===============================================
   1. GLOBAL / BODY
   =============================================== */
html[dir="rtl"] body {
    text-align: right;
    font-family: 'Tajawal', 'Rubik', sans-serif;
}

html[dir="rtl"] .page-content {
    font-family: 'Tajawal', 'Rubik', sans-serif;
    text-align: right;
}

/* ===============================================
   2. HEADER RTL OVERRIDES
   =============================================== */

/* Nav dropdown: position from right instead of left */
html[dir="rtl"] .nav-dropdown-content {
    left: auto;
    right: 0;
}

html[dir="rtl"] .nav-dropdown-content a {
    text-align: right;
}

/* Kit dropdown links: RTL alignment (flex-start is inline-start = right in RTL) */
html[dir="rtl"] .kit-dropdown-link {
    align-items: flex-start !important;
    text-align: right !important;
}

html[dir="rtl"] .kit-dropdown-link .kit-name,
html[dir="rtl"] .kit-dropdown-link .kit-age {
    text-align: right;
    font-family: 'Tajawal', Arial, sans-serif;
}

/* User dropdown: position from left instead of right */
html[dir="rtl"] .user-dropdown {
    right: auto;
    left: 0;
}

html[dir="rtl"] .user-dropdown a {
    font-family: 'Tajawal', 'Rubik', sans-serif;
}

html[dir="rtl"] .user-dropdown a i {
    margin-left: 8px;
    margin-right: 0;
}

/* User menu toggle font */
html[dir="rtl"] .user-menu-toggle {
    font-family: 'Tajawal', 'Rubik', sans-serif;
}

/* Search bar: swap border-radius and border sides */
html[dir="rtl"] .search-bar input {
    border-right: 1px solid #ccc;
    border-left: none;
    border-radius: 0 4px 4px 0;
}

html[dir="rtl"] .search-bar button {
    border-left: 1px solid #ccc;
    border-right: none;
    border-radius: 4px 0 0 4px;
}

/* ===============================================
   3. FOOTER RTL OVERRIDES
   =============================================== */

/* Footer link hover: padding-right instead of padding-left */
html[dir="rtl"] .footer-column a:hover {
    padding-left: 0;
    padding-right: var(--spacing-sm);
}

/* Footer CTA button: keep padding stable on hover */
html[dir="rtl"] .footer-cta-btn:hover {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

/* Footer social icons: no hover padding shift */
html[dir="rtl"] .footer-social-icons a:hover {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Brand logo: margin swap */
html[dir="rtl"] .brand-logo {
    margin-right: 0;
    margin-left: 10px;
}

/* ===============================================
   4. ABOUT US PAGE RTL OVERRIDES
   =============================================== */
html[dir="rtl"] .page-content .about-text {
    text-align: right;
}

/* Reverse the "reverse" pattern: in RTL the alternate layout
   is achieved by NOT reversing, since the base is already RTL */
html[dir="rtl"] .page-content .about-section.reverse {
    direction: ltr;
}

html[dir="rtl"] .page-content .about-section.reverse > * {
    direction: rtl;
}

/* ===============================================
   5. PLAY KIT (SINGLE PRODUCT) PAGE RTL OVERRIDES
   =============================================== */

/* Product info text alignment */
html[dir="rtl"] .product-info,
html[dir="rtl"] .product-info h1,
html[dir="rtl"] .product-info .price,
html[dir="rtl"] .product-info p {
    text-align: right;
}

/* Carousel track: keep LTR for proper image sliding */
html[dir="rtl"] .carousel-track {
    direction: ltr;
}

/* Carousel arrows: swap left/right positions */
html[dir="rtl"] #prevBtn {
    left: auto;
    right: 10px;
}

html[dir="rtl"] #nextBtn {
    right: auto;
    left: 10px;
}

/* How it helps section: list padding swap */
html[dir="rtl"] .helps-section ul {
    padding-right: 1.5rem;
    padding-left: 0;
}

html[dir="rtl"] .helps-section,
html[dir="rtl"] .helps-section h2,
html[dir="rtl"] .helps-section li {
    text-align: right;
}

/* Product card content alignment */
html[dir="rtl"] .product-card-content,
html[dir="rtl"] .product-card h3,
html[dir="rtl"] .product-card .age-range,
html[dir="rtl"] .product-card p,
html[dir="rtl"] .product-card .price {
    text-align: right;
}

/* Button row: keep LTR for button layout */
html[dir="rtl"] .button-row {
    direction: ltr;
}

/* Modal close button: position on left for RTL */
html[dir="rtl"] .close-modal {
    right: auto;
    left: 15px;
}

/* Price container: margin swap */
html[dir="rtl"] .price-container {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* View details button: keep colors */
html[dir="rtl"] .view-details-btn,
html[dir="rtl"] a.view-details-btn {
    background: #05b9b2 !important;
    color: #fff !important;
}

html[dir="rtl"] .view-details-btn:hover,
html[dir="rtl"] a.view-details-btn:hover {
    background: #47D1C2 !important;
    color: #fff !important;
}

/* ===============================================
   6. SHOP PLAY KITS PAGE RTL OVERRIDES
   =============================================== */

/* Reverse the "reversed" containers in RTL */
html[dir="rtl"] .page-content .play-kits-container.reversed {
    direction: ltr;
}

html[dir="rtl"] .page-content .play-kits-container.reversed > * {
    direction: rtl;
}

/* Shop carousel arrows swap */
html[dir="rtl"] .page-content .kit-carousel-wrapper .prev-btn {
    left: auto;
    right: 10px;
}

html[dir="rtl"] .page-content .kit-carousel-wrapper .next-btn {
    right: auto;
    left: 10px;
}

/* ===============================================
   7. GIFTING PAGE RTL OVERRIDES
   =============================================== */

/* Gift form text alignment */
html[dir="rtl"] .page-content .gift-form {
    text-align: right;
}

/* Gift details section: border swap (left -> right) */
html[dir="rtl"] .page-content .gift-details-section {
    border-left: none;
    border-right: 4px solid #4cc0c0;
    text-align: right;
}

html[dir="rtl"] .page-content .gift-details-section h3 {
    font-family: 'Tajawal', Arial, sans-serif;
}

html[dir="rtl"] .page-content .section-subtitle {
    font-family: 'Tajawal', Arial, sans-serif;
    text-align: right;
}

/* Form field labels alignment */
html[dir="rtl"] .page-content .form-field label {
    text-align: right;
    font-family: 'Tajawal', Arial, sans-serif;
}

html[dir="rtl"] .page-content .form-field input {
    text-align: right;
    font-family: 'Tajawal', Arial, sans-serif;
}

/* Checkbox: checkmark margin swap */
html[dir="rtl"] .page-content .checkmark {
    margin-left: 12px;
    margin-right: 0;
}

html[dir="rtl"] .page-content .checkbox-option {
    text-align: right;
    font-family: 'Tajawal', Arial, sans-serif;
}

html[dir="rtl"] .page-content .checkbox-option:hover {
    transform: translateX(4px);
}

/* Bundle options RTL */
html[dir="rtl"] .page-content .bundle-options-section h3,
html[dir="rtl"] .page-content .bundle-header h4 {
    font-family: 'Tajawal', Arial, sans-serif;
}

html[dir="rtl"] .page-content .bundle-description {
    text-align: right;
    font-family: 'Tajawal', Arial, sans-serif;
}

html[dir="rtl"] .page-content .bundle-features li {
    text-align: right;
    font-family: 'Tajawal', Arial, sans-serif;
    padding-left: 0;
    padding-right: 1.5rem;
}

html[dir="rtl"] .page-content .bundle-features li::before {
    left: auto;
    right: 0;
}

/* Bundle "best value" badge: position swap */
html[dir="rtl"] .page-content .bundle-option[data-bundle="4"]::before {
    right: auto;
    left: 20px;
    font-family: 'Tajawal', Arial, sans-serif;
}

/* Bundle price original margin swap */
html[dir="rtl"] .page-content .bundle-price .original {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Bundle discount line RTL */
html[dir="rtl"] .bundle-discount-line,
html[dir="rtl"] .page-content .bundle-discount-line {
    direction: rtl;
    text-align: right;
    font-family: 'Tajawal', 'Sofia Pro', Arial, sans-serif;
}

html[dir="rtl"] .bundle-discount-line .discount-emoji {
    margin-left: 8px;
    margin-right: 0;
}

html[dir="rtl"] .discount-message,
html[dir="rtl"] .page-content .discount-message {
    direction: rtl;
    font-family: 'Tajawal', 'Sofia Pro', Arial, sans-serif;
}

/* Gift tabs font */
html[dir="rtl"] .page-content .gift-tab {
    font-family: 'Tajawal', Arial, sans-serif;
}

/* ===============================================
   8. CART PAGE RTL OVERRIDES
   =============================================== */

/* Cart badge: margin swap */
html[dir="rtl"] .cart-badge,
html[dir="rtl"] .page-content .cart-badge {
    margin-left: 0;
    margin-right: 0.3rem;
}

/* Form labels */
html[dir="rtl"] .page-content .form-group label {
    text-align: right;
}

/* Cart items layout */
html[dir="rtl"] .page-content .cart-item-info {
    flex-direction: row-reverse;
}

/* Payment summary line: already uses justify-content: space-between */

/* ===============================================
   9. PARTNERSHIP / REFERRAL PAGE RTL OVERRIDES
   =============================================== */

/* Partnership list: padding swap */
html[dir="rtl"] .referral-content ul {
    padding-left: 0;
    padding-right: 1.5rem;
    text-align: right;
}

html[dir="rtl"] .referral-content li {
    padding-left: 0;
    padding-right: 2rem;
    text-align: right;
}

html[dir="rtl"] .referral-content li::before {
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: 0;
}

html[dir="rtl"] .referral-content p {
    text-align: right;
}

/* Referral form labels */
html[dir="rtl"] .referral-form label {
    text-align: right;
    font-family: 'Tajawal', Arial, sans-serif;
}

html[dir="rtl"] .referral-form input,
html[dir="rtl"] .referral-form select,
html[dir="rtl"] .referral-form textarea {
    text-align: right;
    font-family: 'Tajawal', Arial, sans-serif;
}

/* Select dropdown arrow: reposition for RTL */
html[dir="rtl"] .referral-form select {
    background-position: left 0.75rem center !important;
    padding-left: 2.5rem;
    padding-right: 1rem;
}

/* ===============================================
   10. POLICY PAGES RTL OVERRIDES
   =============================================== */

/* Policy content lists: padding swap */
html[dir="rtl"] .page-content .shipping-content ul,
html[dir="rtl"] .page-content .return-content ul,
html[dir="rtl"] .page-content .terms-content ul {
    padding-left: 0;
    padding-right: 1.5rem;
}

html[dir="rtl"] .page-content .return-content ul ul {
    padding-left: 0;
    padding-right: 1rem;
}

/* Policy section heading border: swap left to right */
html[dir="rtl"] .page-content .shipping-content h2,
html[dir="rtl"] .page-content .return-content h2,
html[dir="rtl"] .page-content .terms-content h2 {
    text-align: right;
}

/* ===============================================
   11. CONTACT PAGE RTL OVERRIDES
   =============================================== */
html[dir="rtl"] .page-content .contact-form .form-group label {
    text-align: right;
}

html[dir="rtl"] .page-content .contact-form .form-group input,
html[dir="rtl"] .page-content .contact-form .form-group select,
html[dir="rtl"] .page-content .contact-form .form-group textarea {
    text-align: right;
}

/* ===============================================
   12. FAQs PAGE RTL OVERRIDES
   =============================================== */
html[dir="rtl"] .faq-question {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .faq-answer {
    text-align: right;
    direction: rtl;
}

/* ===============================================
   13. INDEX / HOMEPAGE RTL OVERRIDES
   =============================================== */

/* Dino animation: swap right to left */
html[dir="rtl"] .fixed-circle-container {
    right: auto;
    left: calc((100% + 100px) / 2);
}

/* Features section title alignment */
html[dir="rtl"] .features-section-title {
    text-align: right;
}

/* Why Bond & Bloom items: text-align for RTL */
html[dir="rtl"] .why-item {
    text-align: right;
}

/* Login modal: close button position swap */
html[dir="rtl"] .login-page label {
    text-align: right;
}

/* ===============================================
   14. WOOCOMMERCE RTL OVERRIDES
   =============================================== */

/* WooCommerce form labels */
html[dir="rtl"] .woocommerce form .form-row label {
    text-align: right;
}

html[dir="rtl"] .woocommerce .woocommerce-form-login label,
html[dir="rtl"] .woocommerce .woocommerce-form-register label {
    text-align: right;
}

/* Product meta alignment */
html[dir="rtl"] .woocommerce div.product .product_meta {
    text-align: right;
}

/* ===============================================
   15. MOBILE HEADER RTL OVERRIDES (768px and below)
   =============================================== */
@media (max-width: 768px) {
    /* Mobile nav dropdown alignment */
    html[dir="rtl"] .nav-dropdown-content a {
        text-align: right;
    }

    /* Mobile kit dropdown */
    html[dir="rtl"] .kit-dropdown-link {
        align-items: flex-start !important;
        text-align: right !important;
    }

    html[dir="rtl"] .kit-dropdown-link .kit-name,
    html[dir="rtl"] .kit-dropdown-link .kit-age {
        text-align: right !important;
        font-family: 'Tajawal', Arial, sans-serif;
    }

    /* Mobile user dropdown: reposition for RTL */
    html[dir="rtl"] .user-dropdown {
        left: -40px;
        right: auto;
    }

    html[dir="rtl"] .user-dropdown .user-info h4,
    html[dir="rtl"] .user-dropdown .user-info span {
        text-align: right;
        font-family: 'Tajawal', 'Rubik', sans-serif;
    }

    html[dir="rtl"] .user-dropdown a {
        flex-direction: row-reverse;
        font-family: 'Tajawal', 'Rubik', sans-serif;
    }

    /* Mobile cart badge: margin swap */
    html[dir="rtl"] .cart-badge {
        margin-left: 0;
        margin-right: 0.2rem;
    }

    /* Mobile brand logo: margin swap */
    html[dir="rtl"] .brand-logo {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* Mobile about text alignment */
    html[dir="rtl"] .page-content .about-text {
        text-align: right;
    }

    /* Mobile about section reverse: reset */
    html[dir="rtl"] .page-content .about-section.reverse {
        direction: ltr;
    }

    /* Mobile play kit: carousel arrows swap */
    html[dir="rtl"] #prevBtn {
        right: 15px;
        left: auto;
    }

    html[dir="rtl"] #nextBtn {
        left: 15px;
        right: auto;
    }

    html[dir="rtl"] .page-content .kit-carousel-wrapper .prev-btn {
        left: auto;
        right: 5px;
    }

    html[dir="rtl"] .page-content .kit-carousel-wrapper .next-btn {
        right: auto;
        left: 5px;
    }

    /* Mobile price container margin swap */
    html[dir="rtl"] .price-container {
        margin-right: 0.3rem;
        margin-left: 0;
    }

    /* Mobile gifting: form field alignment */
    html[dir="rtl"] .page-content .gift-form label {
        text-align: right;
    }

    /* Mobile gifting: checkmark margin */
    html[dir="rtl"] .page-content .checkmark {
        margin-left: 10px;
        margin-right: 0;
    }

    /* Mobile bundle header alignment */
    html[dir="rtl"] .page-content .bundle-header {
        align-items: flex-end;
    }

    /* Mobile partnership list */
    html[dir="rtl"] .referral-content li {
        padding-right: 1.5rem;
        padding-left: 0;
    }

    /* Mobile gifting section title */
    html[dir="rtl"] .page-content .section-container h1 {
        text-align: right;
    }

    /* Mobile dino: center */
    html[dir="rtl"] .fixed-circle-container {
        left: 50%;
        right: auto;
        transform: translate(-50%, 0);
    }

    /* Mobile why-item text alignment */
    html[dir="rtl"] .why-item {
        text-align: right;
    }
}

/* ===============================================
   16. TABLET RTL OVERRIDES (769px to 1024px)
   =============================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet partnership text alignment */
    html[dir="rtl"] .referral-content p {
        text-align: right;
    }

    /* Tablet carousel arrows swap */
    html[dir="rtl"] .page-content .kit-carousel-wrapper .prev-btn {
        left: auto;
        right: 10px;
    }

    html[dir="rtl"] .page-content .kit-carousel-wrapper .next-btn {
        right: auto;
        left: 10px;
    }

    /* Tablet reversed containers */
    html[dir="rtl"] .page-content .play-kits-container.reversed {
        direction: ltr;
    }

    /* Tablet table & list alignment */
    html[dir="rtl"] td {
        text-align: right;
    }

    html[dir="rtl"] ul {
        text-align: right;
    }
}

/* ===============================================
   17. SMALL MOBILE RTL OVERRIDES (480px and below)
   =============================================== */
@media (max-width: 480px) {
    /* Small mobile partnership list */
    html[dir="rtl"] .referral-content li {
        padding-right: 1.25rem;
        padding-left: 0;
    }
}