/* ═══════════════════════════════════════════════════════════════
   WooCommerce Bundle Offer — Frontend Styles
   Font: Poppins (loaded via Google Fonts in JS or enqueue)
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ── CSS Variables ───────────────────────────────────────────── */
:root {
    --wbo-orange:      #ff6b35;
    --wbo-orange-soft: #fff0eb;
    --wbo-orange-border: #ff6b35;
    --wbo-purple:      #a855f7;
    --wbo-green:       #16a34a;
    --wbo-green-soft:  #f0fdf4;
    --wbo-red:         #dc2626;
    --wbo-bg:          #fdf9f0;
    --wbo-white:       #ffffff;
    --wbo-gray-100:    #f5f5f5;
    --wbo-gray-200:    #e5e5e5;
    --wbo-gray-400:    #9ca3af;
    --wbo-gray-600:    #4b5563;
    --wbo-gray-900:    #111827;
    --wbo-radius:      14px;
    --wbo-radius-sm:   8px;
    --wbo-shadow:      0 2px 12px rgba(0,0,0,.08);
    --wbo-shadow-hover:0 6px 24px rgba(255,107,53,.18);
    --wbo-font:        'Poppins', sans-serif;
    --wbo-transition:  all .22s cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper ─────────────────────────────────────────────────── */
.wbo-wrap {
    font-family: var(--wbo-font);
    background: var(--wbo-bg);
    border: 1.5px solid #f0e8d5;
    border-radius: var(--wbo-radius);
    padding: 22px 20px 20px;
    max-width: 540px;
    margin: 24px 0;
    box-shadow: var(--wbo-shadow);
}

/* ── Header ──────────────────────────────────────────────────── */
.wbo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.wbo-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--wbo-gray-900);
    letter-spacing: -.3px;
}

.wbo-scarcity {
    font-size: 13px;
    font-weight: 600;
    color: var(--wbo-orange);
}

/* ── Options List ────────────────────────────────────────────── */
.wbo-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Single Option ───────────────────────────────────────────── */
.wbo-option {
    position: relative;
    background: var(--wbo-white);
    border: 1.5px solid var(--wbo-gray-200);
    border-radius: var(--wbo-radius);
    cursor: pointer;
    transition: var(--wbo-transition);
    overflow: visible;
}

.wbo-option:hover {
    border-color: #fbbf80;
    box-shadow: 0 2px 8px rgba(255,107,53,.1);
}

.wbo-option--selected {
    border-color: var(--wbo-orange-border) !important;
    box-shadow: 0 0 0 2px rgba(255,107,53,.15), var(--wbo-shadow-hover);
}

/* ── Badge ───────────────────────────────────────────────────── */
.wbo-badge {
    position: absolute;
    top: -13px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .2px;
    white-space: nowrap;
    pointer-events: none;
    font-family: var(--wbo-font);
}

/* ── Option Inner Layout ─────────────────────────────────────── */
.wbo-option-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}

/* ── Radio Indicator ─────────────────────────────────────────── */
.wbo-radio {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--wbo-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--wbo-transition);
    background: transparent;
}

.wbo-option--selected .wbo-radio,
.wbo-radio--checked {
    background: var(--wbo-orange) !important;
    border-color: var(--wbo-orange) !important;
    color: #fff;
}

/* ── Option Info ─────────────────────────────────────────────── */
.wbo-option-info {
    flex: 1;
    min-width: 0;
}

.wbo-option-label {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--wbo-gray-900);
    line-height: 1.3;
    font-family: var(--wbo-font);
}

.wbo-option-meta {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--wbo-gray-600);
    margin-top: 2px;
    line-height: 1.4;
    font-family: var(--wbo-font);
}

/* ── Prices ──────────────────────────────────────────────────── */
.wbo-option-price {
    text-align: right;
    flex-shrink: 0;
}

.wbo-price-sale {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--wbo-orange);
    line-height: 1.2;
    font-family: var(--wbo-font);
}

.wbo-price-original {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--wbo-gray-400);
    text-decoration: line-through;
    font-family: var(--wbo-font);
}

/* ── Upsell Bar ──────────────────────────────────────────────── */
.wbo-upsell {
    margin-top: 12px;
    background: var(--wbo-green-soft);
    border: 1.5px solid #bbf7d0;
    border-radius: var(--wbo-radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wbo-green);
    transition: var(--wbo-transition);
    font-family: var(--wbo-font);
}

.wbo-upsell--hidden {
    display: none !important;
}

/* ── CTA Buttons ─────────────────────────────────────────────── */
.wbo-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.wbo-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 13px 18px;
    border: none;
    border-radius: var(--wbo-radius-sm);
    font-family: var(--wbo-font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--wbo-transition);
    outline: none;
    letter-spacing: .1px;
    position: relative;
    overflow: hidden;
}

.wbo-btn:active {
    transform: scale(.97);
}

.wbo-btn--cart {
    background: #fff;
    color: var(--wbo-orange);
    border: 2px solid var(--wbo-orange);
}

.wbo-btn--cart:hover {
    background: var(--wbo-orange-soft);
}

.wbo-btn--checkout {
    background: var(--wbo-orange);
    color: #fff;
    border: 2px solid var(--wbo-orange);
}

.wbo-btn--checkout:hover {
    background: #e85a28;
    border-color: #e85a28;
    box-shadow: 0 4px 14px rgba(255,107,53,.35);
}

.wbo-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ── Message ─────────────────────────────────────────────────── */
.wbo-message {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--wbo-radius-sm);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--wbo-font);
}

.wbo-message--success {
    background: var(--wbo-green-soft);
    color: var(--wbo-green);
    border: 1px solid #bbf7d0;
}

.wbo-message--error {
    background: #fef2f2;
    color: var(--wbo-red);
    border: 1px solid #fecaca;
}

/* ── Ripple animation on button click ───────────────────────── */
@keyframes wbo-ripple {
    from { transform: scale(0); opacity:.4; }
    to   { transform: scale(4); opacity:0; }
}

.wbo-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    width: 40px;
    height: 40px;
    pointer-events: none;
    transform: scale(0);
    animation: wbo-ripple .55s linear;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    .wbo-wrap { padding: 16px 14px; }
    .wbo-actions { flex-direction: column; }
    .wbo-price-sale { font-size: 16px; }
    .wbo-option-label { font-size: 13.5px; }
}