/*
 * DG Bulk / Pack Pricing — Front-End Styles  v2.1.0
 * Mobile-first · matches DrugsGeneral CSS variables + design tokens
 * Fixes: correct parent selectors, specificity beats main.css, proper card layout
 */

/* ═══════════════════════════════════════════════════════
   WRAPPER
═══════════════════════════════════════════════════════ */

.dg-bulk-wrap {
    margin: 0 0 18px;
    font-family: var(--font-body, 'Inter', -apple-system, sans-serif);
}

/* ═══════════════════════════════════════════════════════
   HEADING ROW  ("Available Dosages" + "30 Capsules per Box")
═══════════════════════════════════════════════════════ */

.dg-bulk-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.dg-bulk-heading-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    color: var(--slate, #565959);
    text-transform: uppercase;
    letter-spacing: .065em;
    line-height: 1;
}

.dg-bulk-heading-label svg {
    color: var(--navy, var(--navy,#0891B2));
    flex-shrink: 0;
}

.dg-bulk-heading-info {
    font-size: 11px;
    font-weight: 600;
    color: var(--navy, var(--navy,#0891B2));
    background: var(--primary-50,#ECFEFF);
    border: 1px solid var(--primary-200,#A5F3FC);
    border-radius: 20px;
    padding: 2px 10px;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   PACK CARD GRID
═══════════════════════════════════════════════════════ */

.dg-bulk-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 0;
}

/* 3-column on wider single-product column */
@media (min-width: 480px) {
    .dg-bulk-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Narrow sidebar layout (WooCommerce 2-col) — keep 2-up */
@media (min-width: 860px) and (max-width: 1060px) {
    .dg-bulk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1060px) {
    .dg-bulk-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 4-tier products */
.dg-bulk-grid.has-4 {
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) {
    .dg-bulk-grid.has-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════
   PACK CARD
═══════════════════════════════════════════════════════ */

.dg-bulk-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 14px 10px 12px;
    border: 1.5px solid var(--border, #D5D9D9);
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    user-select: none;
    text-align: center;
    box-sizing: border-box;
    min-height: 100px;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .13s ease,
        background .18s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    text-decoration: none;
    color: inherit;
}

.dg-bulk-card:hover {
    border-color: var(--navy, var(--navy,#0891B2));
    box-shadow: 0 3px 14px rgba(0,130,150,.14);
    transform: translateY(-2px);
    text-decoration: none;
}

/* ── Selected / Active ── */
.dg-bulk-card.is-active {
    border: 2px solid var(--navy, var(--navy,#0891B2));
    background: var(--primary-50,#ECFEFF);
    box-shadow:
        0 0 0 3px rgba(0,130,150,.14),
        0 3px 12px rgba(0,130,150,.12);
    transform: translateY(-1px);
}
.dg-bulk-card.is-active .dg-bulk-card-qty   { color: var(--navy, var(--navy,#0891B2)); }
.dg-bulk-card.is-active .dg-bulk-card-total { color: var(--navy-deep,#0E7490); }
.dg-bulk-card.is-active .dg-bulk-card-unit  { color: var(--navy, var(--navy,#0891B2)); opacity: .8; }

/* ── Best Value ── */
.dg-bulk-card.is-best:not(.is-active) {
    border-color: var(--primary-600, #0891B2);
    background: var(--primary-50, #ECFEFF);
    box-shadow: 0 3px 14px rgba(8,145,178,.13);
}
.dg-bulk-card.is-best:hover {
    border-color: var(--primary-700, #0E7490);
    box-shadow: 0 3px 18px rgba(8,145,178,.22);
}
.dg-bulk-card.is-best.is-active {
    border-color: var(--primary-700, #0E7490);
    background: var(--primary-50, #ECFEFF);
    box-shadow:
        0 0 0 3px rgba(8,145,178,.20),
        0 3px 14px rgba(8,145,178,.16);
}

/* ── Keyboard focus ── */
.dg-bulk-card:focus-visible {
    outline: 2.5px solid var(--navy, var(--navy,#0891B2));
    outline-offset: 3px;
}

/* ── Selection pop ── */
@keyframes dgBulkPop {
    0%   { transform: scale(1)     translateY(-1px); }
    42%  { transform: scale(1.038) translateY(-3px); }
    100% { transform: scale(1)     translateY(-1px); }
}
.dg-bulk-card.is-active {
    animation: dgBulkPop .2s ease-out;
}

/* ── Badges ── */

/* "Best Value" ribbon at the top */
.dg-bulk-best-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-700, #0E7490);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(14,116,144,.35);
    pointer-events: none;
    z-index: 2;
}
.dg-bulk-card.is-active .dg-bulk-best-badge {
    background: var(--primary-700, #0E7490);
    box-shadow: 0 2px 8px rgba(14,116,144,.45);
}

/* Savings % — top-right corner pill */
.dg-bulk-save-tag {
    position: absolute;
    top: 7px;
    right: 7px;
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 800;
    padding: 1.5px 6px;
    line-height: 1.5;
    pointer-events: none;
    z-index: 1;
}
.dg-bulk-card.is-best:not(.is-active) .dg-bulk-save-tag {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
}
.dg-bulk-card.is-active .dg-bulk-save-tag {
    background: #CFFAFE;
    color: #0E7490;
    border-color: #67E8F9;
}

/* ── Card content ── */

.dg-bulk-card-qty {
    font-family: var(--font-head, 'Outfit', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #0F1111);
    line-height: 1.25;
    margin-top: 10px;          /* clears the best-badge ribbon */
}

.dg-bulk-card-total {
    font-family: var(--font-head, 'Outfit', sans-serif);
    font-size: 17px;
    font-weight: 900;
    color: var(--navy, var(--navy,#0891B2));
    line-height: 1.15;
    margin-top: 2px;
}

.dg-bulk-card-unit {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--muted, #8F9191);
    line-height: 1.4;
}

.dg-bulk-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   SUMMARY BAR
═══════════════════════════════════════════════════════ */

.dg-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    background: var(--primary-50,#ECFEFF);
    border: 1.5px solid var(--primary-200,#A5F3FC);
    border-radius: 9px;
    padding: 8px 13px;
    box-sizing: border-box;
}

.dg-bulk-bar-left {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy-deep,#0E7490);
    min-width: 0;
}

.dg-bulk-bar-pack {
    font-weight: 800;
    color: var(--navy, var(--navy,#0891B2));
    white-space: nowrap;
}

.dg-bulk-bar-dot {
    color: var(--primary-200,#A5F3FC);
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.dg-bulk-bar-unit {
    color: var(--navy-deep,#0E7490);
    white-space: nowrap;
}

.dg-bulk-bar-save {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--navy, var(--navy,#0891B2));
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    border-radius: 20px;
    padding: 3px 11px;
    flex-shrink: 0;
    white-space: nowrap;
    box-shadow: 0 1px 5px rgba(0,130,150,.28);
}

/* ═══════════════════════════════════════════════════════
   MAIN PRICE ROW — shimmer on bulk selection update
═══════════════════════════════════════════════════════ */

@keyframes dgBulkShimmer {
    0%   { opacity: 1; }
    50%  { opacity: .4; }
    100% { opacity: 1; }
}
.dg-bulk-price-updating {
    animation: dgBulkShimmer .42s ease;
}

/* ═══════════════════════════════════════════════════════
   QTY STEPPER — hidden when bulk active
   Parent: .dg-product-info (JS adds .dg-has-bulk here)
═══════════════════════════════════════════════════════ */

.dg-product-info.dg-has-bulk .dg-qty-row,
.dg-single-main.dg-has-bulk  .dg-qty-row {
    display: none !important;
    visibility: hidden !important;
}

/* ═══════════════════════════════════════════════════════
   MOBILE — < 380px
═══════════════════════════════════════════════════════ */

@media (max-width: 379px) {
    .dg-bulk-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 7px;
    }
    .dg-bulk-card {
        padding: 12px 7px 10px;
        min-height: 88px;
        border-radius: 9px;
    }
    .dg-bulk-card-qty   { font-size: 11.5px; margin-top: 9px; }
    .dg-bulk-card-total { font-size: 15px; }
    .dg-bulk-card-unit  { font-size: 9.5px; }

    .dg-bulk-best-badge { font-size: 8.5px; padding: 2px 8px; top: -10px; }
    .dg-bulk-save-tag   { font-size: 9px; right: 5px; top: 5px; padding: 1px 5px; }

    .dg-bulk-bar { padding: 7px 11px; gap: 6px; }
    .dg-bulk-bar-left { font-size: 12px; gap: 5px; }
    .dg-bulk-bar-save { font-size: 11px; padding: 2px 9px; }

    .dg-bulk-heading-label { font-size: 10.5px; }
}

/* ═══════════════════════════════════════════════════════
   TABLET: tight product column (768-900px)
═══════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 900px) {
    .dg-bulk-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .dg-bulk-card-total { font-size: 15.5px; }
}

/* ═══════════════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════════════ */

@media print {
    .dg-bulk-wrap { display: none; }
}

/* ═══════════════════════════════════════════════════════
   V100-FINAL INTEGRATION — Hide native qty stepper when
   bulk selector is active (.dg-has-bulk added by JS).
   The bulk selector manages quantity; the stepper is
   redundant and confusing when bulk cards are shown.
═══════════════════════════════════════════════════════ */

.dg-has-bulk .dg-qty-row {
    display: none !important;
}

/* Price row update animation */
.dg-product-price-row.dg-bulk-price-updating {
    transition: opacity 0.22s ease;
    opacity: 0.45;
}

/* ═══════════════════════════════════════════════════════
   FOOTER TRUST BADGES — Licensed / Certified / Export Ready
   Ensures the badge row stays inside .dg-footer-brand,
   which is already inside the footer grid. These rules
   prevent the badges from "escaping" the grid container
   on certain viewport widths where overflow or flex
   wrapping causes them to render below the footer.
═══════════════════════════════════════════════════════ */

.dg-footer-brand {
    overflow: visible; /* let flex children breathe */
}

.dg-footer-badges {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    align-items: center;
}

.dg-footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 20px;
    padding: 4px 10px 4px 8px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    letter-spacing: .02em;
    white-space: nowrap;
    /* subtle shimmer on hover */
    transition: background .18s, border-color .18s;
}

.dg-footer-badge:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .30);
}

/* Icon inside badge */
.dg-footer-badge svg {
    flex-shrink: 0;
    opacity: .7;
}

/* Make sure the footer grid doesn't clip the brand column */
.dg-footer-grid {
    align-items: start !important;
}

/* ═══════════════════════════════════════════════════════
   PAGINATION — Shop & Archive pages
   Styles the WordPress "Posts pagination" nav that
   the_posts_pagination() outputs, using the theme's
   --navy / --teal CSS variables.
═══════════════════════════════════════════════════════ */

/* Wrapper */
.dg-shop-main .navigation.pagination,
.dg-shop-main .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 28px 0 8px;
}

/* Hide the "Posts pagination" heading (screen-reader only becomes visible) */
.dg-shop-main .navigation.pagination .nav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Individual page number / prev / next link */
.dg-shop-main .nav-links a,
.dg-shop-main .nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    border: 1px solid rgba(0, 0, 0, .10);
    color: var(--navy, #1e3a5f);
    background: #fff;
}

/* Current page */
.dg-shop-main .nav-links span.current,
.dg-shop-main .nav-links .current {
    background: var(--navy, #1e3a5f);
    color: #fff;
    border-color: var(--navy, #1e3a5f);
    cursor: default;
}

/* Hover state */
.dg-shop-main .nav-links a:hover {
    background: var(--navy, #1e3a5f);
    color: #fff;
    border-color: var(--navy, #1e3a5f);
}

/* Dots / ellipsis */
.dg-shop-main .nav-links .dots {
    background: transparent;
    border: none;
    color: var(--muted, #888);
    min-width: 20px;
    padding: 0 2px;
}

/* Prev / Next arrows */
.dg-shop-main .nav-links .prev,
.dg-shop-main .nav-links .next {
    gap: 5px;
    padding: 0 14px;
    font-size: 13px;
}

/* Dark-mode / navy footer area – keep pagination above footer white */
@media (max-width: 639px) {
    .dg-shop-main .nav-links a,
    .dg-shop-main .nav-links span {
        min-width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════
   FIX: Pagination wrapper — also cover .dg-pagination-wrap
   (archive-product.php uses a standalone div, not inside .dg-shop-main)
═══════════════════════════════════════════════════════ */

.dg-pagination-wrap .navigation.pagination,
.dg-pagination-wrap .nav-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 28px 0 8px !important;
}

.dg-pagination-wrap .nav-links a,
.dg-pagination-wrap .nav-links span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: background .15s, color .15s, border-color .15s !important;
    border: 1.5px solid var(--border, #D5D9D9) !important;
    color: var(--navy, #008296) !important;
    background: #fff !important;
}

.dg-pagination-wrap .nav-links span.current,
.dg-pagination-wrap .nav-links .current {
    background: var(--navy, #008296) !important;
    color: #fff !important;
    border-color: var(--navy, #008296) !important;
    cursor: default !important;
}

.dg-pagination-wrap .nav-links a:hover {
    background: var(--navy, #008296) !important;
    color: #fff !important;
    border-color: var(--navy, #008296) !important;
}

.dg-pagination-wrap .nav-links .dots {
    background: transparent !important;
    border: none !important;
    color: var(--muted, #888) !important;
    min-width: 20px !important;
    padding: 0 4px !important;
}

.dg-pagination-wrap .nav-links .prev,
.dg-pagination-wrap .nav-links .next {
    gap: 5px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    min-width: auto !important;
}

@media (max-width: 639px) {
    .dg-pagination-wrap .nav-links a,
    .dg-pagination-wrap .nav-links span {
        min-width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   FIX: Google Translate floating widget — keep INSIDE viewport
   and ABOVE the mobile bottom nav
═══════════════════════════════════════════════════════ */

.dg-float-translate {
    position: fixed !important;
    bottom: 90px !important;   /* above mobile bottom nav (62px) */
    right: 20px !important;
    z-index: 9980 !important;  /* below cart drawer (9950) but above everything else */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

@media (min-width: 768px) {
    .dg-float-translate {
        bottom: 28px !important;  /* desktop: no bottom nav */
        right: 24px !important;
    }
}

/* Ensure lang panel opens upward and stays in frame */
.dg-lang-panel {
    bottom: calc(100% + 10px) !important;
    right: 0 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
}

/* Language suggestion bar — keep above mobile nav */
.dg-lang-bar {
    bottom: 90px !important;
    right: 20px !important;
    z-index: 9979 !important;
    max-width: min(300px, calc(100vw - 40px)) !important;
}

@media (min-width: 768px) {
    .dg-lang-bar {
        bottom: 90px !important;
        right: 24px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   FIX: Licensed / Certified / Export Ready badges
   — elevated style so they stand out in the footer
═══════════════════════════════════════════════════════ */

.dg-footer-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-top: 14px !important;
    align-items: center !important;
}

.dg-footer-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 20px !important;
    padding: 5px 12px 5px 9px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, .90) !important;
    letter-spacing: .03em !important;
    white-space: nowrap !important;
    transition: background .18s, border-color .18s, color .18s !important;
    text-decoration: none !important;
    cursor: default !important;
}

.dg-footer-badge:hover {
    background: rgba(255, 255, 255, .20) !important;
    border-color: rgba(255, 255, 255, .38) !important;
    color: #fff !important;
}

.dg-footer-badge svg {
    flex-shrink: 0 !important;
    opacity: .80 !important;
}

/* ═══════════════════════════════════════════════════════
   FIX: Bulk add-to-cart — ensure REST fallback fires
   when admin-ajax.php returns 403 (ad-blocker / WAF)
═══════════════════════════════════════════════════════ */
/* (CSS-only marker — actual fix is in dg-bulk-pricing.js) */

/* Ensure the bulk card selected state is clearly visible */
.dg-bulk-card.is-active {
    border-color: var(--navy, #008296) !important;
    box-shadow: 0 0 0 2.5px rgba(0,130,150,.18) !important;
}

/* Price update animation */
.dg-product-price-row.dg-bulk-price-updating {
    opacity: .5 !important;
    transition: opacity .2s !important;
}


/* ── v4 cart quantity context ───────────────────────────────────────────────
   WooCommerce quantity is the number of physical boxes. The selected tier
   remains visible below the +/- control so customers see both dimensions.
──────────────────────────────────────────────────────────────────────────── */
.dg-bulk-cart-context {
    margin-top: 4px;
    font-size: 10.5px;
    line-height: 1.35;
    color: #64748B;
    white-space: nowrap;
}
.dg-bulk-cart-context strong {
    color: #0891B2;
    font-weight: 800;
}
.dg-bulk-cart-context span {
    color: #94A3B8;
}

/* ── Bulk pricing clarity in custom cart drawer ───────────────────────────── */
.dg-cart-item-bulk-price {
    margin-top: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 10.5px;
    line-height: 1.35;
    color: #64748B;
}
.dg-cart-item-bulk-price strong {
    color: #008296;
    font-weight: 800;
}
.dg-cart-item-bulk-price span {
    color: #64748B;
}
.dg-cart-item-bulk-price small {
    display: inline-block;
    color: #94A3B8;
    font-size: 9.5px;
    font-weight: 600;
}