/**
 * Stock, Brand & Model Wrapper + Low-Stock Tooltip Styles
 * Loaded on single product pages
 */

.cfwc-stock-brand-model-wrapper{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 15px 0;
}
.cfwc-brand-field, .cfwc-model-field, .cfwc-stock-info{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    justify-content: flex-start;
    background: #f1f1f1;
    border-radius: 10px;
    padding: 10px 5px;
}
.cfwc-model-field .field-title, .cfwc-brand-field .field-title {
    color: #000000;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
}
.cfwc-stock-brand-model-wrapper .stock{
     display: flex !important;
    flex-direction: column;
}
.cfwc-model-field .field-value, .cfwc-brand-field .field-value{
    text-align: center;
    font-size: 16px;
    margin: auto;
}
.content-area p.stock.in-stock{
    margin: 0;
    height: 100%;

}
.cfwc-stock-brand-model-wrapper .stock-title{
    margin-bottom: 5px;
}
.cfwc-stock-brand-model-wrapper .stock-instock{
    margin: auto;
}
.cfwcl-custom-field-wrapper.lead-timee{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    height: 100%
}
.cfwcl-custom-field-wrapper.lead-timee .cfwc-lead-time{
    margin: auto;
}

/* Low Stock Styles */
.stock-low {
    color: #d97706;
    font-weight: 600;
    font-size: 13px;
    cursor: help;
    position: relative;
    padding: 5px 10px;
    border-radius: 15px;
    display: inline-block;
    transition: all 0.3s ease;
    border: 1px solid #c9c9c9;
    line-height: 15px;
}

.low-stock-wrapper {
    position: relative;
    display: inline-block;
}

.low-stock-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #1f2937;
    color: #ffffff;
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.5;
    white-space: normal;
    width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-weight: normal;
}

.low-stock-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #1f2937;
}

.low-stock-wrapper:hover .low-stock-tooltip {
    opacity: 1;
    visibility: visible;
}

.stock-low:hover {
    transform: scale(1.05);
}

/* Media query for mobile responsiveness */
@media (max-width: 768px) {
    .low-stock-tooltip {
        width: 220px;
        font-size: 14px;
        padding: 12px 16px;
        /* Adjust positioning for mobile */
        left: 0;
        transform: translateX(0);
        margin-left: -20px; /* Shift slightly to the right */
    }

    /* Adjust arrow position for mobile */
    .low-stock-tooltip::after {
        left: 30px; /* Position arrow closer to left side */
        transform: translateX(0);
    }

    /* For very small screens, adjust further */
    @media (max-width: 375px) {
        .low-stock-tooltip {
            width: 200px;
            margin-left: -10px;
        }
    }
}

/* Alternative solution: Position tooltip to the right on mobile if space allows */
@media (max-width: 768px) {
    .cfwc-stock-info:first-child .low-stock-tooltip {
        /* If stock is the first column, position tooltip differently */

        right: -10px;
        transform: none;
        margin-left: 0;
    }

    .cfwc-stock-info:first-child .low-stock-tooltip::after {
        left: 20px;
    }
}

/* =================================================================
   "See Stock" preorder badge + tooltip
   -----------------------------------------------------------------
   The preorder branch of cfwc_display_stock_brand_model() (fires when
   customl_text_field_title is set) outputs <span class="cfwc-lead-time">
   with a .leadtime-tooltipp inside. Historically the pill had no badge
   styling (rendered as a bare text link, wrapping to "See / Stock") and
   the tooltip was hardcoded width:375px / left:-193% (tuned for an old
   wide-text-link layout), so it overflowed right over Brand/Model on
   desktop and off the left viewport edge on mobile.

   The legacy rules live in an inline <style> block from theme options
   (assets/customstyle.css is NOT enqueued on PDPs), unscoped (0,0,1,0),
   with !important on the media-query copies. We override them here from
   the enqueued component sheet using .cfwc-stock-info-scoped selectors
   (0,0,2,0 [+ !important]) so they win regardless of source order, and
   we mirror .stock-low / .low-stock-tooltip so both stock badges look
   and behave identically.
   ================================================================= */

/* Wrapper: the lead-timee wrapper inherits display:block + an asymmetric
   `margin: 10px 5px 10px 0px` from inline theme-options CSS that pushes it
   left in the Stock cell. Force symmetric centering so the pill matches the
   centered Brand/Model values. text-align:center centers the inline-block
   pill and the "Stock:" label inside this block-level wrapper. */
.cfwc-stock-info .cfwcl-custom-field-wrapper.lead-timee {
    text-align: center !important;
    margin: 10px auto !important;
}

/* Pill: mirror .stock-low visual weight */
.cfwc-stock-info .cfwc-lead-time {
    display: inline-block;
    white-space: nowrap;          /* stop "See / Stock" mid-phrase wrap */
    color: #d97706;
    font-weight: 600;
    font-size: 13px;
    line-height: 15px;
    cursor: help;
    position: relative;
    padding: 5px 10px;
    border: 1px solid #c9c9c9;
    border-radius: 15px;
    box-shadow: none;             /* drop legacy orange glow */
    margin: 0 !important;         /* override legacy margin-left:10px / margin-right:9px */
    transition: all 0.3s ease;
}

.cfwc-stock-info .cfwc-lead-time:hover {
    transform: scale(1.05);
}

/* Tooltip: the trigger is always in the left-most Stock column, so a centered
   tooltip would spill off the left edge. Instead anchor it to the pill's left
   and let it grow rightward, capped to the viewport so it never overflows.
   Opens DOWNWARD on every viewport: the sticky header sits ~110px below the
   top of the page so an upward-opening tooltip gets clipped by the header on
   desktop, and on mobile the gallery sits directly above. Downward lands on
   the price / Brand-Model / Add-to-Cart content which is plain text/buttons
   the dark tooltip can sit on cleanly. Legacy was width:375px/left:-193%
   (tuned for the old wide text link); these scoped rules (0,0,2,0 + !important)
   override it. */
/* =================================================================
   See Stock / Pre-Order tooltip stacking
   -----------------------------------------------------------------
   (1) Raise Stock/Brand/Model row above .hdm-pm (z-index:1).
   (2) Open tooltip DOWNWARD so title + breadcrumb stay visible.
   (3) Fully opaque dark panel; z-index high enough to paint over
       price-match / OUR PROMISE while open. Header search modal
       still wins via body.hdm-dpop-open / hdm-hsearch-open pin-down.
   ================================================================= */

/* Whole stock row slightly above price-match (.hdm-pm z-index:1).
   Keep these LOW so we never paint over the header AI-search modal
   (modal is fixed inside the header stacking context). */
.cfwc-stock-brand-model-wrapper {
    position: relative;
    z-index: 5;
}

.cfwc-stock-info {
    position: relative;
    z-index: 6;
    overflow: visible;
}

.cfwc-stock-info .cfwc-lead-time {
    position: relative;
    z-index: 7;
}

/* Search modal open: force stock row under header UI */
body.hdm-dpop-open .cfwc-stock-brand-model-wrapper,
body.hdm-hsearch-open .cfwc-stock-brand-model-wrapper,
body.hdm-dpop-open .cfwc-stock-info,
body.hdm-hsearch-open .cfwc-stock-info {
    z-index: 0 !important;
}

/* Open DOWNWARD below the Pre-Order / lead pill.
   Upward covered product title + breadcrumb (2026-07-12 screenshot).
   Downward sits over price/promise area; stock row z-index > .hdm-pm so it stays readable.
   High-specificity selectors beat legacy customstyle bottom:145% / left:-193%. */
.single-product .cfwc-stock-info .leadtime-tooltipp,
.cfwc-stock-info .leadtime-tooltipp {
    width: 320px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 20px) !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: none !important;
    top: calc(100% + 12px) !important;
    bottom: auto !important;
    background-color: #111827 !important;
    background: #111827 !important;
    opacity: 1 !important;
    color: #ffffff !important;
    text-align: center;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    z-index: 40 !important;
    isolation: isolate;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-sizing: border-box !important;
}

/* Arrow pointing UP toward the Pre-Order pill above the tooltip. */
.single-product .cfwc-stock-info .leadtime-tooltipp::after,
.cfwc-stock-info .leadtime-tooltipp::after {
    content: "";
    position: absolute;
    top: auto !important;
    bottom: 100% !important;
    left: 28px !important;
    margin-left: 0;
    transform: none;
    border: 8px solid transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: #111827 !important;
}

/* "X months" pill: countdown.js now emits .month for date ranges > 42 days
   (1-42 days stays as .day, 43+ days renders as .month). The legacy stylesheet
   only had .day / .week.weeksh rules, so .month had no border / colour and
   rendered as bare text. Mirror the green-bordered pill styling here. */
.cfwc-stock-info .leadtime-tooltipp .month {
    margin-bottom: 10px;
    font-weight: 700;
    padding: 8px 10px;
    border: 2px solid #2cba0b;
    color: #fff;
    border-radius: 20px;
    display: inline-block;
}

/* Inner countdown/notice pills: allow wrap + cap width so nothing clips in the
   narrower box (the green "New Stock Coming in X weeks" pill was 19px nowrap). */
.cfwc-stock-info .leadtime-tooltipp .day,
.cfwc-stock-info .leadtime-tooltipp .week,
.cfwc-stock-info .leadtime-tooltipp .month,
.cfwc-stock-info .leadtime-tooltipp .red-bubble {
    white-space: normal !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: 14px !important;
    line-height: 1.4 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Mobile: Stock is the far-left column, so nudge the box left to hug the
   viewport edge (instead of the pill's x-offset) and cap to viewport width. */
@media (max-width: 768px) {
    .single-product .cfwc-stock-info .leadtime-tooltipp,
    .cfwc-stock-info .leadtime-tooltipp {
        width: min(320px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        left: 0 !important;
        margin-left: 0 !important;
        top: calc(100% + 10px) !important;
        bottom: auto !important;
    }

    .single-product .cfwc-stock-info .leadtime-tooltipp::after,
    .cfwc-stock-info .leadtime-tooltipp::after {
        left: 28px !important;
        top: auto !important;
        bottom: 100% !important;
        border-top-color: transparent !important;
        border-bottom-color: #111827 !important;
    }
}


/* Hide core WC stock HTML OUTSIDE the custom Stock/Brand/Model row.
   Do NOT hide p.stock inside .cfwc-stock-info — that is the live See Stock pill
   (wc_get_stock_html). Broad .summary p.stock.in-stock was emptying the grey Stock box. */
.single-product .summary .cfwc-stock-brand-model-wrapper ~ p.stock,
.single-product .summary-left > p.stock,
.single-product .summary-right > p.stock,
.single-product .summary.entry-summary > p.stock {
    display: none !important;
}
/* Stock pill inside the custom grey Stock cell must stay visible */
.single-product .cfwc-stock-info p.stock,
.single-product .cfwc-stock-info p.stock.in-stock,
.single-product .cfwc-stock-info p.stock.out-of-stock {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.single-product .cfwc-stock-info .stock-title {
    display: block !important;
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    margin-bottom: 5px !important;
}
.single-product .cfwc-stock-info p.stock > span.stock-instock {
    color: #2cba0b !important;
    border: 1px solid #2cba0b !important;
    border-radius: 15px !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 15px !important;
    display: inline-block !important;
    margin: auto 0 !important;
    white-space: nowrap !important;
}
/* Discontinued: never show Add to Cart (sticky or main) */
body.single-product.product_tag-discontinued_product .single_add_to_cart_button,
body.single-product.product_tag-discontinued_product .ajax_add_to_cart.add_to_cart_button,
body.single-product.product_tag-discontinued_product .shoptimizer-sticky-add-to-cart,
body.single-product.product_tag-discontinued_product form.cart .quantity {
    display: none !important;
}

/* Call for Stock — same orange pill as Low Stock, no tooltip/popup.
   Extra horizontal padding so the longer label does not feel tight. */
.stock-call-for-stock,
.cfwc-stock-info .stock-call-for-stock {
    color: #d97706 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 15px !important;
    padding: 6px 14px !important;
    border: 1px solid #c9c9c9 !important;
    border-radius: 15px !important;
    background: transparent !important;
    display: inline-block !important;
    cursor: default !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    max-width: 100%;
}

/* Discontinued — plain pill, no popup */
.stock-discontinued,
.cfwc-stock-info .stock-discontinued {
    color: #B74559 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 15px !important;
    padding: 6px 14px !important;
    border: 1px solid #B74559 !important;
    border-radius: 15px !important;
    background: #fff5f7 !important;
    display: inline-block !important;
    cursor: default !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    max-width: 100%;
}

/* Pre-Order pill — clear on mobile without hover */
.cfwc-stock-info .cfwc-lead-time.hdm-preorder-pill {
    color: #b45309 !important;
    border-color: #f59e0b !important;
    background: #fffbeb !important;
    font-weight: 700 !important;
}
.cfwc-stock-info .cfwc-lead-time.hdm-preorder-open .leadtime-tooltipp,
.cfwc-stock-info .cfwc-lead-time:focus .leadtime-tooltipp,
.cfwc-stock-info .cfwc-lead-time:focus-within .leadtime-tooltipp {
    visibility: visible !important;
    opacity: 1 !important;
}
/* Pre-Order tooltip always opens DOWN (never cover title/breadcrumb). */
.cfwc-stock-info .cfwc-lead-time.hdm-preorder-pill .leadtime-tooltipp,
.cfwc-stock-info .cfwc-lead-time.hdm-preorder-open .leadtime-tooltipp {
    top: calc(100% + 12px) !important;
    bottom: auto !important;
    left: 0 !important;
}
.cfwc-stock-info .cfwc-lead-time.hdm-preorder-pill .leadtime-tooltipp::after,
.cfwc-stock-info .cfwc-lead-time.hdm-preorder-open .leadtime-tooltipp::after {
    top: auto !important;
    bottom: 100% !important;
    left: 28px !important;
    border-top-color: transparent !important;
    border-bottom-color: #111827 !important;
}
@media (max-width: 768px) {
    .cfwc-stock-info .cfwc-lead-time.hdm-preorder-pill .leadtime-tooltipp {
        top: calc(100% + 10px) !important;
        bottom: auto !important;
        left: 0 !important;
        margin-left: 0 !important;
    }
    .cfwc-stock-info .cfwc-lead-time.hdm-preorder-pill .leadtime-tooltipp::after {
        top: auto !important;
        bottom: 100% !important;
        left: 28px !important;
        border-top-color: transparent !important;
        border-bottom-color: #111827 !important;
    }
}