/* Load Cairo Font from Local Files */
@font-face {
    font-family: 'Cairo';
    src: url('/wp-content/uploads/cairo-extralight/Cairo-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Cairo';
    src: url('/wp-content/uploads/cairo-light/Cairo-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Cairo';
    src: url('/wp-content/uploads/cairo-regular/Cairo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Cairo';
    src: url('/wp-content/uploads/cairo-medium/Cairo-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Cairo';
    src: url('/wp-content/uploads/cairo-semibold/Cairo-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Cairo';
    src: url('/wp-content/uploads/cairo-bold/Cairo-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Cairo';
    src: url('/wp-content/uploads/cairo-extrabold/Cairo-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Cairo';
    src: url('/wp-content/uploads/cairo-black/Cairo-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

/* Globals for Arabic Layout */
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p {
    direction: rtl !important;
    text-align: right !important;
    font-family: 'Cairo', sans-serif !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 4px !important;
}

/* Product title and price - Cairo + RTL */
.entry-summary .product_title,
.entry-summary p.price,
.entry-summary .woocommerce-Price-amount {
    font-family: 'Cairo', sans-serif !important;
    direction: rtl !important;
    text-align: right !important;
    padding-right: 4px !important;
}

@media (min-width: 1025px) {
    .woocommerce-product-details__short-description,
    .woocommerce-product-details__short-description p,
    .entry-summary .product_title,
    .entry-summary p.price,
    .entry-summary .woocommerce-Price-amount {
        padding-right: 16px !important;
    }
}

#wcb-bundles-wrapper,
#wcb-bundles-wrapper * {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', sans-serif !important;
}

/* Kill duplicate select chevron injected by theme + fix Arabic font clipping */
.wcb-custom-select {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    background-image: none !important;

    /* Fix: Cairo font tall glyphs get clipped inside select */
    line-height: 1.8 !important;
    min-height: 46px !important;
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    display: block !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Mobile title + price block injected above gallery */
.wcb-mobile-product-header {
    display: none; /* hidden on desktop - shown only via mobile media query */
    direction: rtl;
    text-align: right;
    padding: 10px 16px 6px !important;
    font-family: 'Cairo', sans-serif !important;
}

/* Title in mobile header - match .entry-summary h1 */
.wcb-mobile-product-header .product_title {
    font-family: 'Cairo', sans-serif !important;
    direction: rtl !important;
    text-align: right !important;
    padding-right: 4px !important;
    margin-bottom: 6px !important;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--theme-palette-color-2);
    line-height: 1.3;
}

/* Price in mobile header - match .entry-summary p.price */
.wcb-mobile-product-header p.price {
    font-family: 'Cairo', sans-serif !important;
    direction: rtl !important;
    text-align: right !important;
    padding-right: 4px !important;
    margin-bottom: 4px !important;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--theme-palette-color-1);
}

.wcb-mobile-product-header p.price .woocommerce-Price-amount {
    color: var(--theme-palette-color-1);
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700;
}

@media (max-width: 767px) {
    .wcb-mobile-product-header {
        display: block;
    }
}

/* Main Container */
#wcb-bundles-wrapper {
    margin: 20px 0;
    max-width: 600px;
}

/* Card Styles */
.wcb-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.wcb-card:hover {
    border-color: #bbb;
}

.wcb-card.wcb-active {
    border: 2.5px solid var(--theme-palette-color-1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Card Header */
.wcb-card-header {
    padding: 15px;
    display: flex;
    flex-direction: column;
}

/* Title row uses natural RTL direction from parent */
.wcb-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    direction: rtl;
    gap: 10px;
}

.wcb-title {
    font-weight: 700;
    font-size: 17px;
    color: var(--theme-palette-color-2);
}

/* Title Row RTL override - remove duplicate, keep price on left */
.wcb-title-row .wcb-price {
    margin-inline-start: auto;
    text-align: left;
    direction: ltr; /* keep price digits LTR */
}

/* Radio */
.wcb-radio {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.wcb-card.wcb-active .wcb-radio {
    border-color: var(--theme-palette-color-1);
}

.wcb-card.wcb-active .wcb-radio::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--theme-palette-color-1);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Price */

/* Also apply the stacking logic globally if desired, or just mobile?
   User said "Make the offer price in the first line... always in the far right".
   Implies global change. Let's apply standard styles first.
*/
.wcb-price {
    font-weight: 700;
    font-size: 18px;
    color: var(--theme-palette-color-1);
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    line-height: 1.2;
}

.wcb-price del {
    color: #555;
    font-size: 0.85em;
    margin-right: 0;
    /* No margin right needed if stacked */
    font-weight: normal;
    text-decoration: line-through;
}

/* Card Content (Expandable) */
.wcb-card-content {
    display: none;
    /* JS will toggle this */
    padding: 0 15px 15px 15px;
    border-top: 1px solid #f0f0f0;
    margin-top: 10px;
}

/* Piece Selector */
.wcb-piece-selector {
    margin-top: 15px;
}

.wcb-piece-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
}

.wcb-attribute-row {
    margin-bottom: 12px;
}

.wcb-attr-label {
    display: block;
    font-size: 13px;
    color: #555;
    margin-bottom: 5px;
    font-weight: 500;
}

.wcb-attr-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Options: Color Circles */
.wcb-option-color {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ddd;
    transition: transform 0.2s;
}

.wcb-option-color:hover {
    transform: scale(1.1);
}

.wcb-option-color.selected {
    box-shadow: 0 0 0 2px #222;
    transform: scale(1.1);
}

.wcb-option-color.disabled {
    opacity: 0.2;
    cursor: not-allowed;
    position: relative;
}

.wcb-option-color.disabled::after {
    content: 'x';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: 10px;
}

/* Options: Thumbnails (Images) */
.wcb-option-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ddd;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.2s;
}

.wcb-option-thumb:hover {
    transform: scale(1.1);
}

.wcb-option-thumb.selected {
    box-shadow: 0 0 0 2px #222;
    transform: scale(1.1);
}

.wcb-option-thumb.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(100%);
    position: relative;
}

/* Options: Text/Size Boxes */
.wcb-option-text {
    min-width: 35px;

    height: 35px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    background: #fff;
    transition: all 0.2s;
}

.wcb-option-text:hover {
    border-color: #999;
}

.wcb-option-text.selected {
    background: var(--theme-palette-color-2);
    color: #fff;
    border-color: var(--theme-palette-color-2);
}

.wcb-option-text.disabled {
    background: #f9f9f9;
    color: #ccc;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Add to Cart Button override */
#wcb_main_add_to_cart {
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    font-size: 16px;
    /* Often theme styles override this, but we ensure basic prominent style */
    display: block;
    text-align: center;
}


.wcb-separator {
    display: none;
}


@media (max-width: 768px) {

    /* Keep title row nicely spaced */
    .wcb-title-row {
        align-items: flex-start;
        /* Align top since price will be taller */
    }

    .wcb-radio {
        margin-top: 5px;
        /* Align radio with the first line of text roughly */
    }

    .wcb-title {
        /* Let flexbox handle it normally */
        margin: 0;
        padding: 0;
    }

    .wcb-price {
        /* Already defined globally */
        margin: 0 0 0 auto;
        white-space: nowrap;
    }
}

/* Single Mode Wrapper */
.wcb-single-content {
    margin-bottom: 20px;
}

/* 
=========================================================
Product Gallery Image (Main Image) Overrides
=========================================================
*/
.flexy-view .flexy-item figure.ct-media-container {
    border: 3px solid var(--theme-palette-color-1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}

.flexy-view .flexy-item img {
    border-radius: 10px !important; /* Slightly smaller to fit inside perfectly without clipping */
}

/* 
=========================================================
WooCommerce Product Tabs & Description (Arabic/RTL) 
=========================================================
*/
.woocommerce-tabs.wc-tabs-wrapper,
.woocommerce-tabs.wc-tabs-wrapper * {
    font-family: 'Cairo', sans-serif !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel {
    direction: rtl !important;
    text-align: right !important;
}

/* Ensure list items inside description are also RTL aligned */
.woocommerce-tabs .woocommerce-Tabs-panel ul,
.woocommerce-tabs .woocommerce-Tabs-panel ol {
    margin-right: 20px;
    margin-left: 0;
}