/* ============================================================
   TrendCave Bulk Order — Tab Design
   Version 1.7.0
   ============================================================ */

.trendcave-bulk-wrap {
    margin: 20px 0;
    font-family: inherit;
}

/* ============================================================
   DEALER DISCOUNT BANNER
   ============================================================ */
.bulk-dealer-discount {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-left: 4px solid #10b981;
    border-radius: 6px;
    padding: 9px 14px;
    margin-bottom: 14px;
}

.dealer-disc-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #047857;
    background: #d1fae5;
    padding: 2px 8px;
    border-radius: 4px;
}

.dealer-disc-value {
    font-size: 15px;
    font-weight: 800;
    color: #059669;
}

.dealer-disc-pct {
    font-size: 12px;
    font-weight: 700;
    color: #10b981;
}

.dealer-disc-mrp {
    font-size: 12px;
    color: #6b7280;
    margin-left: auto;
}

.dealer-disc-mrp s { color: #9ca3af; }

@media (max-width: 480px) {
    .dealer-disc-mrp { margin-left: 0; width: 100%; }
    .dealer-disc-value { font-size: 14px; }
}

/* ============================================================
   COLOR TABS
   ============================================================ */
.bulk-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0;
}

.bulk-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    min-width: 70px;
    justify-content: center;
    font-size: 10px;              /* small text */
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: #e8e8e8;          /* fallback — JS sets real color */
    border: 1.5px solid rgba(0,0,0,0.12);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    color: #333;                  /* JS sets contrast color per swatch */
    transition: filter 0.15s, transform 0.1s;
    white-space: nowrap;
}

.bulk-tab:hover {
    filter: brightness(0.95);
}

/* Active tab — raised with a clear ring, color stays */
.bulk-tab.active {
    z-index: 2;
    margin-bottom: -1px;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #1a73e8;
}

.tab-label {
    display: inline-block;
    line-height: 1.3;
}

/* Image-swatch tab keeps text readable with a chip */
.bulk-tab.has-image .tab-label {
    background: rgba(255,255,255,0.9);
    color: #222;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Badge showing how many pieces selected for that color */
.tab-count {
    display: none;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    vertical-align: middle;
}

.tab-count.visible { display: inline-block; }

/* ============================================================
   SIZE TABLE
   ============================================================ */
.trendcave-bulk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 0 6px 6px 6px;
    overflow: hidden;
    margin-bottom: 10px;
}

.trendcave-bulk-table th,
.trendcave-bulk-table td {
    padding: 2px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    text-align: left;
}

.trendcave-bulk-table thead th {
    background: #fafafa;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    border-bottom: 1px solid #ddd;
    padding: 6px 10px;
}

.trendcave-bulk-table thead th.col-subtotal,
.trendcave-bulk-table td.cell-row-total {
    text-align: right;
}

.trendcave-bulk-table tbody tr:last-child td { border-bottom: none; }
.trendcave-bulk-table tbody tr:hover { background: #fafeff; }

/* Columns */
.col-size    { width: 95px; }
.col-price   { width: 75px; }
.col-qty     { }
.col-subtotal { width: 75px; }

/* Size + "in cart" badge stay on ONE line */
.cell-size  {
    font-weight: 700;
    font-size: 12px;
    color: #222;
    white-space: nowrap;
}
.cell-price { font-size: 11px; color: #999; white-space: nowrap; }
.cell-row-total {
    font-weight: 600;
    color: #333;
    font-size: 12px;
    white-space: nowrap;
}
.cell-row-total.has-value { color: #1a73e8; }

/* ============================================================
   QTY CONTROLS
   ============================================================ */
.qty-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;               /* small space between buttons and number */
}

.qty-minus,
.qty-plus {
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;     /* each fully rounded, separated */
    font-size: 15px;
    cursor: pointer;
    padding: 0;
    margin: 0 !important;   /* kill any theme-added margin */
    color: #333;
    transition: background 0.15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.qty-minus:hover,
.qty-plus:hover { background: #e5e5e5; }

/* qty-display is a <span> — completely immune to theme CSS overrides */
.qty-display {
    box-sizing: border-box;
    display: inline-block;
    min-width: 32px;
    height: 26px;
    line-height: 24px;       /* 26 - 2px border */
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;      /* rounded, separated box */
    margin: 0 !important;
    padding: 0 !important;
    user-select: none;
}

/* hidden input — stores value, not visible */
.qty-input { display: none; }

.out-of-stock {
    font-size: 12px;
    color: #ccc;
    font-style: italic;
}

/* Low-stock hint next to qty stepper */
.stock-hint {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 600;
    color: #d97706;
    white-space: nowrap;
    vertical-align: middle;
}

.stock-hint-flash {
    color: #dc2626;
    animation: tc-stock-flash 0.6s ease;
}

@keyframes tc-stock-flash {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
}

/* Warning message (stock capped) */
.bulk-message.msg-warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fcd34d;
}

/* In-cart badge — inline next to size on the same line */
.in-cart-badge {
    display: inline-block;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 10px;
    margin-left: 5px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ============================================================
   FOOTER / TOTAL BAR
   ============================================================ */
.bulk-footer td {
    background: #f9f9f9;
    font-size: 14px;
    padding: 11px 14px;
    border-top: 1.5px solid #ddd;
    border-bottom: none;
}

.total-pieces-cell { color: #555; text-align: left; }
.total-pieces      { color: #222; font-size: 15px; }
.grand-total-cell  { text-align: right; }

.grand-total {
    font-size: 17px;
    font-weight: 700;
    color: #1a73e8;
}

.grand-total.below-min { color: #d32f2f; }

/* ============================================================
   NOTE
   ============================================================ */
.bulk-note {
    font-size: 12px;
    color: #999;
    margin: 6px 0 12px 0;
}

.bulk-note.below-min { color: #d32f2f; font-weight: 600; }

/* ============================================================
   INLINE MESSAGE — simple, shown below button
   ============================================================ */
.bulk-message {
    display: none;
    padding: 10px 14px;
    border-radius: 5px;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 10px;
}

.bulk-message.msg-success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.bulk-message.msg-error {
    background: #fce4e4;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.bulk-cart-link {
    font-weight: 600;
    color: #2e7d32;
    text-decoration: underline;
    margin-left: 4px;
}

/* ============================================================
   ADD TO CART BUTTON
   Pure custom class — no 'button alt' to avoid theme conflicts
   ============================================================ */
.bulk-add-to-cart-btn {
    display: block;
    width: 100%;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    background: #1a73e8;
    color: #fff;
    border: none;
    border-radius: 5px;
    transition: background 0.2s;
    text-align: center;
    -webkit-appearance: none;
}

.bulk-add-to-cart-btn:hover  { background: #1557b0; color: #fff; }
.bulk-add-to-cart-btn:focus  { outline: none; color: #fff; }
.bulk-add-to-cart-btn:disabled { background: #90b8f0; cursor: not-allowed; }

/* ============================================================
   HIDE DEFAULT WOOCOMMERCE VARIATION FORM
   IMPORTANT: We hide it OFF-SCREEN (not display:none) so the
   theme (Flatsome) still fully renders its color swatches —
   our JS reads those swatch colors and copies them to our tabs.
   display:none would stop swatches from rendering at all.
   ============================================================ */
form.variations_form table.variations,
form.variations_form .single_variation_wrap {
    position: absolute !important;
    left: -99999px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    max-height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 480px) {
    .bulk-tab {
        padding: 6px 12px;
        font-size: 12px;
    }

    .trendcave-bulk-table th,
    .trendcave-bulk-table td { padding: 9px 10px; font-size: 13px; }

    .qty-minus, .qty-plus { width: 26px; height: 26px; font-size: 15px; }

    .qty-input {
        width: 40px !important;
        height: 26px !important;
        font-size: 13px !important;
    }

    /* Toast slides up from bottom on mobile */
    .bulk-message {
        top: auto;
        bottom: -100px;
        right: 0 !important;
        left: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 10px 10px 0 0;
        border-left: none;
        border-top: 4px solid #43a047;
        transition: bottom 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .bulk-message.msg-error { border-top: 4px solid #e53935; }

    .bulk-message.toast-show { bottom: 0; }
}