@charset "utf-8";
/* BeBloom Child Theme RTL CSS for Hebrew Front-End */

/* --- General Body Direction --- */
body {
    direction: rtl;
    text-align: right;
}

/* --- Header --- */
.header,
.header .menu,
.header .logo,
.header .header-top,
.header .header-bottom {
    direction: rtl;
    text-align: right;
}

/* --- Footer --- */
.footer,
.footer .widget,
.footer .menu,
.footer .footer-bottom {
    direction: rtl;
    text-align: right;
}

/* --- Main Menu --- */
.menu,
.menu ul,
.menu li,
.menu li a {
    direction: rtl;
    text-align: right;
}

/* --- Product Grid / WooCommerce --- */
.products,
.woocommerce ul.products,
.woocommerce-page ul.products {
    direction: rtl;
    text-align: right;
}

/* --- Buttons / Sliders / Portfolio Titles --- */
.button,
.btn,
.slider-caption,
.portfolio-title,
.woocommerce .button,
.woocommerce .checkout .button {
    direction: rtl;
    text-align: right;
}

/* --- WooCommerce Checkout & Cart Pages --- */
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-order-received,
.woocommerce .cart,
.woocommerce .checkout,
.woocommerce .order-review {
    direction: rtl;
    text-align: right;
}

/* --- Portfolio Grid / Featured Sections --- */
.portfolio-grid,
.portfolio-item,
.portfolio-title {
    direction: rtl;
    text-align: right;
}

/* --- Misc Elements --- */
.entry-content,
.widget,
.widget-title,
.site-title,
.site-description {
    direction: rtl;
    text-align: right;
}


/* ===== FIX: Footer Ticker RTL Issue (Osty Theme) ===== */
/* This fixes the infinite scrolling ticker in the footer that breaks in RTL.
   It forces the ticker to behave as LTR internally while keeping the whole site RTL. */

body.rtl .ms-text-ticker {
    direction: ltr;
    overflow: hidden;
}

body.rtl .ms-text-ticker .ms-tt-wrap {
    direction: ltr;
    display: flex;
    flex-wrap: nowrap;
}

body.rtl .ms-text-ticker .ms-tt {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

body.rtl .ms-text-ticker .ms-tt__text {
    white-space: nowrap;
}

/* Ensure animation runs correctly */
body.rtl .ms-text-ticker .ticker-active {
    animation-direction: normal !important;
}

/* Extra safety for layout consistency */
body.rtl .ms-text-ticker .ms-tt-wrap > div {
    display: flex;
}



/* --- FIX: Back to Top dots color (force white in all modes) --- */
.back-to-top .ms-btt--inner svg path {
    fill: #ffffff !important;
}

/* --- Additional Custom Fixes --- */
/* Add any specific element adjustments here */



/* ===================================================
   BEBLOOM NUCLEAR FIX: MULTI-LINE TITLE & SAFE BUTTON V5
   1. Drops the "single line" rule so full text shows.
   2. Absolute lockdown on the Add to Cart button.
   =================================================== */

/* 1. THE MAIN WRAPPER */
.ms-product-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; 
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; 
}

/* 2. THE TITLE: Multi-Line + Grid Height Equalizer */
.ms-product-info .ms-product-title {
    display: block !important;
    width: 100% !important;
    
    /* THE GRID EQUALIZER: Mathematically lock the height to 2 lines */
    line-height: 1.3em !important; 
    min-height: 2.6em !important; /* 1.3em x 2. Forces 1-line titles to hold empty space */
    max-height: 2.6em !important; /* 1.3em x 2. Prevents 3-line titles from breaking the grid */
    
    overflow: hidden !important; /* Gracefully hides any text that tries to go to a 3rd line */
    margin-bottom: 8px !important;
}

/* 2b. THE LINK TEXT: Bidi Alignment */
.ms-product-info .ms-product-title a {
    display: block !important;
    width: 100% !important;
    
    /* Allow the text to wrap */
    white-space: normal !important; 
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    
    /* BIDI FIX: English text LTR flow, aligned Right for Hebrew layout */
    direction: ltr !important; 
    text-align: right !important; 
    unicode-bidi: isolate !important; 
}

/* ===================================================
   2.5 THE CATEGORIES: Single-Line Truncation
   Prevents multiple categories from wrapping to a 
   second line and breaking the grid height.
   =================================================== */

.ms-product-info .ms-product-cat {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    
    /* Force the text to stay on one line */
    white-space: nowrap !important; 
    
    /* Hide anything that spills over the edge */
    overflow: hidden !important; 
    
    /* Add the three dots (...) at the end of the cutoff */
    text-overflow: ellipsis !important; 
    
    /* Optional: Ensure a consistent gap below the categories */
    margin-bottom: 12px !important; 
}



/* 3. THE FOOTER (Price + Button): The Immovable Row */
.ms-product-footer, 
.ms-product-info-inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important; /* Never wrap the button */
    gap: 8px !important;
}

/* 4. THE BUTTON: Absolute Lockdown */
.ms-product-info .ms-product-cart,
.ms-product-info .add_to_cart_button,
.ms-product-info .ms-btn {
    flex-shrink: 0 !important; /* NEVER allow the button to shrink or crop */
    flex-grow: 0 !important;
    white-space: nowrap !important; /* Keep button text on one line */
    max-width: 100% !important;
    margin-right: auto !important; /* Forces button to the left edge in RTL */
}


/* Mobile Specific Tweaks */
@media (max-width: 768px) {
    .ms-product-info .ms-product-title,
    .ms-product-info .ms-product-title a {
        font-size: 16px !important; /* Increased from 14px for better luxury readability */
    }
    .ms-product-footer {
        gap: 5px !important;
    }
}




/* BEBLOOM FIX: Force Elementor H2 headings to Extra Bold on mobile (≤768px)
   This prevents theme/RTL overrides from making headings appear lighter on mobile */
@media (max-width: 768px) {
  .elementor-widget-heading h2.elementor-heading-title {
    font-weight: 800 !important;
  }
}



/* ===================================================
   BEBLOOM FIX: SAFE LIGHT MODE BUTTONS (VER 3)
   Targets ONLY buttons with solid backgrounds.
   Ignores "naked" UI buttons and table headers.
   =================================================== */

/* 1. Target ONLY elements with explicit solid-button classes */
body[data-theme="light"] .button,
body[data-theme="light"] .btn,
body[data-theme="light"] input[type="submit"],
body[data-theme="light"] .wc-block-components-button:not(.is-link),
body[data-theme="light"] .wp-element-button {
    color: #ffffff !important;
}

/* 2. Target the text specifically inside those solid buttons */
body[data-theme="light"] .button span,
body[data-theme="light"] .btn span,
body[data-theme="light"] .wc-block-components-button:not(.is-link) .wc-block-components-button__text,
body[data-theme="light"] .wp-element-button span {
    color: #ffffff !important;
}

/* 3. Hover states for solid buttons */
body[data-theme="light"] .button:hover,
body[data-theme="light"] .btn:hover,
body[data-theme="light"] input[type="submit"]:hover,
body[data-theme="light"] .wc-block-components-button:not(.is-link):hover,
body[data-theme="light"] .wp-element-button:hover,
body[data-theme="light"] .button:hover span,
body[data-theme="light"] .btn:hover span,
body[data-theme="light"] .wc-block-components-button:not(.is-link):hover .wc-block-components-button__text,
body[data-theme="light"] .wp-element-button:hover span {
    color: #ffffff !important;
}

/* 4. SVGs inside SOLID buttons only */
body[data-theme="light"] .button svg path,
body[data-theme="light"] .btn svg path,
body[data-theme="light"] .wc-block-components-button:not(.is-link) svg path,
body[data-theme="light"] .wp-element-button svg path {
    fill: #ffffff !important;
}

/* ===================================================
   5. HEADER CART ICON: NATIVE SCROLL RESTORE
   Allows the theme to natively change the SVG from 
   black to white on scroll, while permanently locking 
   the badge number to white.
   =================================================== */

/* Lock ONLY the number '1' inside the purple badge to white */
body[data-theme="light"] .header__cart-count span {
    color: #ffffff !important;
}

/* (We intentionally leave the SVG path empty here so your theme's native scroll logic takes over again) */

/* ===================================================
   7. TABLE BORDERS: LIGHT MODE OVERRIDE
   Forces the dividing lines of all tables (including 
   the WooCommerce checkout cart) to be black/dark.
   =================================================== */

body[data-theme="light"] table,
body[data-theme="light"] table tr,
body[data-theme="light"] table th,
body[data-theme="light"] table td,
body[data-theme="light"] .wc-block-cart-items,
body[data-theme="light"] .wc-block-cart-items tr,
body[data-theme="light"] .wc-block-cart-items th,
body[data-theme="light"] .wc-block-cart-items td,
body[data-theme="light"] .wp-block-woocommerce-cart-line-items-block {
    border-color: #121212 !important; /* Uses your theme's native off-black */
}



/* ===================================================
   BEBLOOM FIX: REVEAL CART ON MAIN SHOP PAGE
   Forces the mini-cart to be visible on the /shop page
   =================================================== */

body.woocommerce-shop .ms-h_w,
body.woocommerce-shop .main-header__cart {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important; /* Ensures it is actually clickable */
}



/* ===================================================
   BEBLOOM FIX: WOOCOMMERCE SORTING BAR RTL
   1. Adds perfect spacing between text and dropdown.
   2. Moves the dropdown arrow to the left side.
   3. Fixes text padding so words are fully visible.
   =================================================== */

/* 1. THE SPACING FIX: Center align with a healthy gap */
.woocommerce-content-loop-header {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Keeps both items centered as requested */
    align-items: center !important;
    gap: 20px !important; /* Forces a perfect, un-collapsible space between them */
    margin-bottom: 25px !important; /* Adds breathing room below the bar */
}

/* Remove default theme margins so our gap handles the spacing perfectly */
.woocommerce-content-loop-header .woocommerce-result-count,
.woocommerce-content-loop-header .woocommerce-ordering {
    margin: 0 !important;
}

/* 2. THE ARROW FIX: Move arrow left, text right */
.woocommerce-ordering select.orderby {
    direction: rtl !important;
    text-align: right !important; 
    
    /* Move the custom theme arrow image to the far left side */
    background-position: left 15px center !important; 
    
    /* Fix the inner padding so text doesn't overlap the arrow */
    padding-right: 15px !important; /* Normal padding for the right edge */
    padding-left: 40px !important; /* Extra thick padding on the left to protect the arrow */
    
    /* Make sure the box looks consistent */
    min-width: 220px !important;
}

/* Mobile Tweaks for the Sorting Bar */
@media (max-width: 768px) {
    .woocommerce-content-loop-header {
        flex-direction: column !important; /* Stacks them on top of each other on tiny screens */
        gap: 15px !important;
    }
    .woocommerce-ordering select.orderby {
        width: 100% !important; /* Makes the dropdown full-width for easier thumb tapping */
    }
}


/* ===================================================
   BEBLOOM FIX: CENTER ALL WOOCOMMERCE ACCOUNT BUTTONS
   Automatically centers text in Login, Register, Lost 
   Password, and internal My Account buttons.
   =================================================== */

.woocommerce-account button.button,
.woocommerce-account input.button,
form.woocommerce-ResetPassword button.button,
form.lost_reset_password button.button,
form.login button.button,
form.register button.button {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important; /* Centers text horizontally */
    align-items: center !important; /* Centers text vertically */
    padding-right: 0 !important; /* Kills lingering RTL padding */
    padding-left: 0 !important;
}


/* ===================================================
   BEBLOOM FIX: PORTFOLIO SPINNER (LIGHT MODE)
   Changes ONLY the moving outline (stroke) to white,
   leaving the background track and inside untouched.
   =================================================== */

body[data-theme="light"] .load-filter-icon circle.spin2 {
    stroke: #ffffff !important; /* Turns the moving theme-colored line white */
    fill: transparent !important; /* Guarantees the inside of the circle stays empty/invisible */
}