/* ==========================================================================
   Cart Variant Toggle — classic slider: label  [o]  label
   Right side = priorytetowy (promo) — highlighted with gold accent + badge
   ========================================================================== */

.cart-variant-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    max-width: 420px;
}

/* --- Labels on each side --- */
.cart-variant-toggle__label {
    font-size: 12px;
    font-weight: 600;
    font-family: 'Poppins', system-ui, sans-serif;
    line-height: 1.3;
    color: #999;
    cursor: pointer;
    transition: color 0.25s;
    user-select: none;
    text-align: center;
    position: relative;
}

/* Left active = grey, right active = green (matches promo badge) */
.cart-variant-toggle__label[data-side="left"].cart-variant-toggle__label--active {
    color: #555;
}

.cart-variant-toggle__label[data-side="right"].cart-variant-toggle__label--active {
    color: #1e8449;
}

.cart-variant-toggle__label[data-side="left"]:hover {
    color: #555;
}

.cart-variant-toggle__label[data-side="right"]:hover {
    color: #1e8449;
}

.cart-variant-toggle__price {
    display: block;
    font-size: 11px;
    font-weight: 400;
    margin-top: 1px;
}

/* Second line of label — parenthetical detail like "(do 72h)" */
.cart-variant-toggle__label-detail {
    display: inline-block;
    margin-top: 1px;
    font-size: 10px;
    font-weight: 400;
    opacity: 0.75;
}

/* --- The switch track --- */
.cart-variant-toggle__switch {
    position: relative;
    width: 48px;
    min-width: 48px;
    height: 26px;
    background: #aaa;
    border-radius: 13px;
    cursor: pointer;
    transition: background 0.25s;
    flex-shrink: 0;
}

.cart-variant-toggle__switch:hover {
    background: #999;
}

/* Right = priorytetowy = green track */
.cart-variant-toggle--right .cart-variant-toggle__switch {
    background: #27ae60;
}

.cart-variant-toggle--right .cart-variant-toggle__switch:hover {
    background: #1e8449;
}

/* --- The knob --- */
.cart-variant-toggle__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.cart-variant-toggle--right .cart-variant-toggle__knob {
    left: 25px;
}

/* --- Promo badge over the right label ---
   Sits above the label, doesn't affect layout (absolute), doesn't block clicks. */
.cart-variant-toggle__badge {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    white-space: nowrap;
    color: #fff;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 50%, #1e8449 100%);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(39, 174, 96, 0.4);
    pointer-events: none;
    overflow: hidden;
    animation: cart-variant-toggle-pulse 2.4s ease-in-out infinite;
}

/* Subtle shimmer sweep — runs across the badge */
.cart-variant-toggle__badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 100%
    );
    animation: cart-variant-toggle-shimmer 3.2s ease-in-out infinite;
}

/* Tiny notch pointing down to the label */
.cart-variant-toggle__badge::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #1e8449;
}

/* Two text states stacked — only one visible at a time */
.cart-variant-toggle__badge-text {
    display: inline-block;
}

.cart-variant-toggle__badge-text[data-state="active"] {
    display: none;
}

/* When right variant is selected: switch badge copy to confirmation,
   stop the pulse (stops being a CTA, becomes a confirmation),
   and shift to a calmer "selected" appearance. */
.cart-variant-toggle--right .cart-variant-toggle__badge {
    animation: none;
    background: linear-gradient(135deg, #1e8449 0%, #186a3b 100%);
    box-shadow: 0 1px 3px rgba(30, 132, 73, 0.3);
}

.cart-variant-toggle--right .cart-variant-toggle__badge::before {
    display: none;
}

.cart-variant-toggle--right .cart-variant-toggle__badge::after {
    border-top-color: #186a3b;
}

.cart-variant-toggle--right .cart-variant-toggle__badge-text[data-state="default"] {
    display: none;
}

.cart-variant-toggle--right .cart-variant-toggle__badge-text[data-state="active"] {
    display: inline-block;
}

/* --- Animations --- */
@keyframes cart-variant-toggle-pulse {
    0%, 100% {
        box-shadow: 0 1px 4px rgba(39, 174, 96, 0.4);
        transform: translateX(-50%) scale(1);
    }
    50% {
        box-shadow: 0 2px 8px rgba(39, 174, 96, 0.6);
        transform: translateX(-50%) scale(1.04);
    }
}

@keyframes cart-variant-toggle-shimmer {
    0% { left: -50%; }
    60%, 100% { left: 110%; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .cart-variant-toggle__badge,
    .cart-variant-toggle__badge::before {
        animation: none;
    }
}

/* --- Loading state --- */
.cart-variant-toggle--loading {
    opacity: 0.45;
    pointer-events: none;
}

/* --- Responsive --- */
@media (max-width: 480px) {
    .cart-variant-toggle {
        gap: 6px;
        max-width: 100%;
        margin-top: 26px;
    }

    .cart-variant-toggle__label {
        font-size: 11px;
    }

    .cart-variant-toggle__switch {
        width: 42px;
        min-width: 42px;
        height: 24px;
    }

    .cart-variant-toggle__knob {
        width: 18px;
        height: 18px;
    }

    .cart-variant-toggle--right .cart-variant-toggle__knob {
        left: 22px;
    }

    .cart-variant-toggle__badge {
        font-size: 8px;
        padding: 2px 6px;
        letter-spacing: 0.04em;
        bottom: calc(100% + 3px);
    }
}

/* ==========================================================================
   Cart "Przejdź do płatności" submit button
   Green CTA, no underline, lock icon for trust signal.
   ========================================================================== */

.wc-block-components-button:not(.is-link).wc-block-cart__submit-button {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 50%, #1e8449 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px 22px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(39, 174, 96, 0.3);
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.wc-block-components-button:not(.is-link).wc-block-cart__submit-button:hover,
.wc-block-components-button:not(.is-link).wc-block-cart__submit-button:focus {
    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
    box-shadow: 0 3px 12px rgba(39, 174, 96, 0.45);
    color: #fff;
    text-decoration: none;
}

.wc-block-components-button:not(.is-link).wc-block-cart__submit-button:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(39, 174, 96, 0.4);
}

.wc-block-components-button:not(.is-link).wc-block-cart__submit-button .wc-block-components-button__text {
    text-decoration: none;
    color: inherit;
}

/* Lock icon — trust signal for "płatności" */
.wc-block-components-button:not(.is-link).wc-block-cart__submit-button::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}