/* ================================================================
   1. GLOBAL RTL RESET (Applies to all screen sizes)
   ================================================================ */
html[dir="rtl"], 
html[dir="rtl"] body.rtl {
    direction: rtl !important;
    text-align: right !important;
    overflow-x: hidden;
}

/* Fix icon spacing for Arabic text globally */
html[dir="rtl"] .summary.entry-summary i, 
html[dir="rtl"] .summary.entry-summary svg {
    margin-left: 10px !important;
    margin-right: 0 !important;
}

/* ================================================================
   2. DESKTOP LAYOUT (Large Screens - 769px and up)
   ================================================================ */
@media (min-width: 769px) {
    /* Ensure the product image and summary sit side-by-side correctly */
    html[dir="rtl"] .site-content .product {
        display: flex !important;
        flex-direction: row-reverse !important; 
        gap: 40px;
    }

    /* Prevent buttons from stretching to 100% on desktop */
    .summary.entry-summary .wrap_compare_wishlist, 
    .summary.entry-summary .wrap_ask_share {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none !important; 
        width: auto !important;
        gap: 15px !important;
    }

    /* THE FIX: Standardize all buttons to perfect circles */
    /* Added .woosq-btn (Eye) here so they all match */
    .woosc-btn, .woosw-btn, .woosq-btn, .ask-question-button, .social-share-button {
        flex: 0 0 35px !important;     /* Force fixed basis */
        width: 35px !important;        /* Match Eye button width */
        height: 35px !important;       /* Match Eye button height */
        min-width: 0 !important;       /* REMOVED 150px stretch causing ovals */
        border-radius: 50% !important; /* Force perfect circle */
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* ================================================================
   3. MOBILE LAYOUT (Phones/Tablets - 768px and below)
   ================================================================ */
@media (max-width: 768px) {
    /* Stack image and text vertically */
    .summary.entry-summary {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 15px !important;
    }

    /* THE GRID LOCK: Forces buttons into a 2-column layout */
    .summary.entry-summary .wrap_compare_wishlist, 
    .summary.entry-summary .wrap_ask_share {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; 
        gap: 10px !important;
        width: 100% !important;
        margin: 15px 0 !important;
    }

    /* Fix Add to Cart + Quantity alignment */
    .summary.entry-summary .cart {
        display: flex !important;
        flex-direction: row !important; 
        align-items: center !important;
        gap: 10px !important;
    }

    /* Keep mobile buttons as rectangles/ovals for better finger tapping */
    .summary.entry-summary a.button, 
    .summary.entry-summary button {
        width: 100% !important;
        justify-content: center !important;
        font-size: 13px !important;
        white-space: nowrap;
        border-radius: 5px !important; /* Slight rounding for mobile */
    }
}

/* ================================================================
   4. POPUP & UI OVERLAYS
   ================================================================ */
html[dir="rtl"] .popup-toggle-close {
    left: 15px !important;
    right: auto !important;
}