/**
 * Bulk Volume Pricing — Styles
 * Proxywing design system: pw- prefix, BEM, CSS Custom Properties on .pw-root
 * Dark theme — matches Lagom2 dark (no separate light/dark switch needed).
 *
 * All visual properties use !important to override LagomOrderForm's
 * viewcart-other-template.css which scopes every rule under #lagom-one-step-order,
 * giving it ID-level specificity (1,N,N) that cascade order cannot defeat.
 */

/* ─── Design Tokens ─── */
.pw-root {
    /* Brand */
    --pw-color-primary:       #1062fe;
    --pw-color-primary-hover: #0051e5;
    --pw-color-primary-light: rgba(16, 98, 254, 0.12);
    --pw-color-primary-text:  #ffffff;

    /* Surfaces (dark theme) */
    --pw-color-surface:       rgba(255, 255, 255, 0.04);
    --pw-color-surface-hover: rgba(255, 255, 255, 0.06);

    /* Borders */
    --pw-color-border:        rgba(255, 255, 255, 0.10);
    --pw-color-border-open:   rgba(16, 98, 254, 0.45);

    /* Text */
    --pw-color-text:          #ffffff;
    --pw-color-text-secondary: rgba(255, 255, 255, 0.60);
    --pw-color-text-muted:    rgba(255, 255, 255, 0.35);

    /* Typography */
    --pw-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pw-font-size-xs:   0.75rem;
    --pw-font-size-sm:   0.875rem;
    --pw-font-size-base: 1rem;

    /* Spacing (4 px grid) */
    --pw-space-1: 0.25rem;
    --pw-space-2: 0.5rem;
    --pw-space-3: 0.75rem;
    --pw-space-4: 1rem;
    --pw-space-5: 1.25rem;

    /* Radius */
    --pw-radius-sm:   4px;
    --pw-radius-md:   8px;
    --pw-radius-full: 9999px;

    /* Transitions */
    --pw-transition-fast: 150ms ease;
    --pw-transition-base: 250ms ease;

    /* Focus ring */
    --pw-ring-focus: 0 0 0 3px rgba(16, 98, 254, 0.30);
}

/* ─── Scoped Reset ─── */
.pw-root,
.pw-root *,
.pw-root *::before,
.pw-root *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pw-root {
    font-family: var(--pw-font-family) !important;
    font-size:   var(--pw-font-size-base) !important;
    line-height: 1.5 !important;
    color:       var(--pw-color-text) !important;
    -webkit-font-smoothing: antialiased;
}

/* ─── Section label ─── */
.pw-bp__label {
    font-size:      var(--pw-font-size-sm) !important;
    font-weight:    700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color:          var(--pw-color-primary) !important;
    margin-bottom:  var(--pw-space-3) !important;
}

/* ─── Dropdown shell ─── */
.pw-bp__select {
    border:        1px solid var(--pw-color-border) !important;
    border-radius: var(--pw-radius-md) !important;
    background:    var(--pw-color-surface) !important;
    overflow:      hidden !important;
    transition:    border-color var(--pw-transition-fast);
}

.pw-bp__select--open {
    border-color: var(--pw-color-border-open) !important;
}

/* ─── Header (always visible) ─── */
.pw-bp__header {
    display:     flex !important;
    align-items: center !important;
    gap:         var(--pw-space-3) !important;
    padding:     var(--pw-space-3) var(--pw-space-4) !important;
    min-height:  52px !important;
    cursor:      pointer !important;
    user-select: none !important;
    transition:  background-color var(--pw-transition-fast);
}

.pw-bp__header:hover {
    background: var(--pw-color-surface-hover) !important;
}

.pw-bp__header-qty {
    flex:        1 !important;
    font-size:   var(--pw-font-size-base) !important;
    font-weight: 500 !important;
    color:       var(--pw-color-text) !important;
}

.pw-bp__header-price {
    font-size:   var(--pw-font-size-sm) !important;
    font-weight: 500 !important;
    color:       var(--pw-color-text-secondary) !important;
    white-space: nowrap !important;
}

.pw-bp__header-badge {
    min-width:   42px !important;
    text-align:  center !important;
    padding:     2px 8px !important;
    border-radius: var(--pw-radius-sm) !important;
    font-size:   var(--pw-font-size-xs) !important;
    font-weight: 600 !important;
    color:       var(--pw-color-text-muted) !important;
    transition:  background-color var(--pw-transition-fast),
                 color var(--pw-transition-fast);
}

.pw-bp__header-badge--active {
    background: var(--pw-color-primary) !important;
    color:      var(--pw-color-primary-text) !important;
}

/* Chevron toggle button */
.pw-bp__chevron {
    background:    var(--pw-color-primary) !important;
    border:        none !important;
    border-radius: var(--pw-radius-sm) !important;
    width:  30px !important;
    height: 30px !important;
    display:     flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor:      pointer !important;
    flex-shrink: 0 !important;
    transition:  background-color var(--pw-transition-fast),
                 transform var(--pw-transition-fast);
    -webkit-appearance: none !important;
}

.pw-bp__chevron:hover {
    background: var(--pw-color-primary-hover) !important;
}

.pw-bp__chevron:focus-visible {
    outline:    none !important;
    box-shadow: var(--pw-ring-focus) !important;
}

.pw-bp__chevron:active {
    transform: scale(0.93) !important;
}

.pw-bp__chevron svg {
    fill:   #ffffff !important;
    width:  16px !important;
    height: 16px !important;
    transition: transform var(--pw-transition-base);
    display: block !important;
}

.pw-bp__select--open .pw-bp__chevron svg {
    transform: rotate(180deg) !important;
}

/* ─── Body (collapsed by default) ─── */
.pw-bp__body {
    display:     none !important;
    border-top:  1px solid var(--pw-color-border) !important;
}

.pw-bp__select--open .pw-bp__body {
    display: block !important;
}

/* ─── Input row ─── */
.pw-bp__input-row {
    display:     flex !important;
    align-items: center !important;
    gap:         var(--pw-space-3) !important;
    padding:     var(--pw-space-3) var(--pw-space-4) !important;
    border-bottom: 1px solid var(--pw-color-border) !important;
}

.pw-bp__qty-input {
    width:        80px !important;
    padding:      var(--pw-space-2) var(--pw-space-2) !important;
    background:   rgba(255, 255, 255, 0.07) !important;
    border:       1px solid rgba(16, 98, 254, 0.40) !important;
    border-radius: var(--pw-radius-sm) !important;
    color:        var(--pw-color-text) !important;
    font-size:    var(--pw-font-size-sm) !important;
    font-family:  var(--pw-font-family) !important;
    text-align:   center !important;
    outline:      none !important;
    flex-shrink:  0 !important;
    -moz-appearance: textfield !important;
    transition:   border-color var(--pw-transition-fast),
                  box-shadow   var(--pw-transition-fast);
}

.pw-bp__qty-input::-webkit-inner-spin-button,
.pw-bp__qty-input::-webkit-outer-spin-button {
    opacity: 1 !important;
}

.pw-bp__qty-input:focus {
    border-color: var(--pw-color-primary) !important;
    box-shadow:   var(--pw-ring-focus) !important;
}

.pw-bp__row-price {
    flex:        1 !important;
    font-size:   var(--pw-font-size-sm) !important;
    color:       var(--pw-color-text-secondary) !important;
}

.pw-bp__row-disc {
    min-width:   42px !important;
    text-align:  right !important;
    font-size:   var(--pw-font-size-xs) !important;
    font-weight: 600 !important;
    color:       var(--pw-color-text-muted) !important;
}

/* ─── Tier rows ─── */
.pw-bp__tier {
    display:     flex !important;
    align-items: center !important;
    gap:         var(--pw-space-3) !important;
    padding:     var(--pw-space-3) var(--pw-space-4) !important;
    cursor:      pointer !important;
    border-bottom: 1px solid var(--pw-color-border) !important;
    transition:  background-color var(--pw-transition-fast);
}

.pw-bp__tier:last-child {
    border-bottom: none !important;
}

.pw-bp__tier:hover {
    background: var(--pw-color-surface-hover) !important;
}

.pw-bp__tier--active {
    background: var(--pw-color-primary-light) !important;
}

.pw-bp__tier-label {
    flex:        1 !important;
    font-size:   var(--pw-font-size-sm) !important;
    color:       var(--pw-color-text) !important;
    display:     flex !important;
    align-items: center !important;
    gap:         var(--pw-space-2) !important;
}

.pw-bp__tier-price {
    width:       72px !important;
    text-align:  right !important;
    font-size:   var(--pw-font-size-sm) !important;
    color:       var(--pw-color-text-secondary) !important;
    white-space: nowrap !important;
    transition:  color var(--pw-transition-fast);
}

.pw-bp__tier--active .pw-bp__tier-price {
    color: var(--pw-color-primary) !important;
    font-weight: 500 !important;
}

.pw-bp__tier-badge {
    min-width:    42px !important;
    text-align:   center !important;
    padding:      2px 8px !important;
    border-radius: var(--pw-radius-sm) !important;
    font-size:    var(--pw-font-size-xs) !important;
    font-weight:  600 !important;
    color:        var(--pw-color-text-muted) !important;
}

.pw-bp__tier-badge--discount {
    background: var(--pw-color-primary) !important;
    color:      var(--pw-color-primary-text) !important;
}

/* Recommended badge (pill) */
.pw-bp__rec {
    display:        inline-flex !important;
    align-items:    center !important;
    padding:        1px var(--pw-space-2) !important;
    background:     rgba(16, 98, 254, 0.15) !important;
    color:          #6699ff !important;
    border-radius:  var(--pw-radius-full) !important;
    font-size:      var(--pw-font-size-xs) !important;
    font-weight:    500 !important;
    white-space:    nowrap !important;
    letter-spacing: 0.02em !important;
}

/* ─── Order Summary: discounted price (viewcart + configureproduct) ─── */

/* Discounted bandwidth line price — white, slightly larger than the strikethrough */
[data-product-config-option].pw-bp--discounted {
    color:     #ffffff !important;
    font-size: 1em !important;
    transition: color 0.3s ease;
}

/* Inline original (undiscounted) price — smaller, red strikethrough, shown before discounted */
[data-product-config-option].pw-bp--discounted .pw-bp__orig-inline {
    text-decoration: line-through !important;
    color:           #F12F75 !important;
    font-size:       0.78em !important;
    margin-right:    5px !important;
    vertical-align:  middle !important;
}

/* Inline "BULK DISCOUNT" badge — injected as <span> by JS (locale-aware text) */
[data-product-config-option].pw-bp--discounted .pw-bp__badge-inline {
    display:        inline-block !important;
    font-size:      10px !important;
    font-weight:    700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding:        1px 5px !important;
    border-radius:  3px !important;
    background:     rgba(16, 98, 254, 0.15) !important;
    color:          #1062FE !important;
    border:         1px solid rgba(16, 98, 254, 0.30) !important;
    margin-left:    6px !important;
    vertical-align: middle !important;
}

/* ─── Order Summary: original price strikethrough ─── */
.pw-bp__original-price {
    display:         block;
    text-decoration: line-through !important;
    color:           #F12F75 !important;
    font-size:       12px !important;
    font-family:     Roboto, sans-serif !important;
    line-height:     1.4 !important;
}

/* ─── Order Summary: promo + bulk info note ─── */
.pw-bp__promo-note {
    display:        flex;
    align-items:    flex-start !important;
    gap:            var(--pw-space-2) !important;
    padding:        var(--pw-space-2) var(--pw-space-3) !important;
    margin:         var(--pw-space-2) 0 0 !important;
    border-radius:  var(--pw-radius-sm) !important;
    border-left:    2px solid var(--pw-color-primary) !important;
    background:     rgba(16, 98, 254, 0.08) !important;
    font-size:      var(--pw-font-size-xs) !important;
    font-family:    var(--pw-font-family) !important;
    line-height:    1.45 !important;
    color:          #B3B3B3 !important;
    transition:     background-color var(--pw-transition-fast),
                    border-color     var(--pw-transition-fast);
}

/* Leading dot indicator */
.pw-bp__promo-note::before {
    content:     '●' !important;
    font-size:   7px !important;
    line-height: 1.7 !important;
    flex-shrink: 0 !important;
    color:       var(--pw-color-primary) !important;
    transition:  color var(--pw-transition-fast);
}

/* Promo + bulk capped at max_combined_discount */
.pw-bp__promo-note--capped {
    background:   rgba(245, 158, 11, 0.09) !important;
    border-color: #f59e0b !important;
    color:        #B3B3B3 !important;
}

.pw-bp__promo-note--capped::before {
    color: #f59e0b !important;
}

/* Bulk alone ≥ cap — promo not applied */
.pw-bp__promo-note--ignored {
    background:   rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
    color:        #B3B3B3 !important;
}

.pw-bp__promo-note--ignored::before {
    color: rgba(255, 255, 255, 0.22) !important;
}

/* ─── Page 2 checkout: remove panel-body bottom gap when no promo row ─── */
/* ul.summary-list is not :last-child (hidden #recurring still in DOM),   */
/* so it keeps its border-bottom. Combined with panel-footer border-top    */
/* this creates a double divider. Remove the list border; footer border    */
/* alone provides the single visual separator.                             */
#orderSummary.pw-bp--no-promo .panel-body {
    padding-bottom: 0 !important;
}
#orderSummary.pw-bp--no-promo .panel-body .summary-list {
    border-bottom: none !important;
}

/* ─── Responsive ─── */
@media (max-width: 480px) {
    .pw-bp__tier-price {
        width: 58px !important;
    }

    .pw-bp__header-price {
        display: none !important;
    }
}