/**
 * product-offers.css — selecteur d'offres bundle sur single-product.
 */

/* Quand le selecteur d'offres est rendu, on cache le form add-to-cart standard. */
.dropwp-single .dropwp-offers + .dropwp-cta-add-to-cart,
.dropwp-single:has(.dropwp-offers) form.cart {
    display: none !important;
}

/* ============================================================
   Container
   ============================================================ */
.dropwp-offers {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

/* ============================================================
   Carte offre
   ============================================================ */
.dropwp-offer {
    position: relative;
    display: block;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.dropwp-offer:hover { border-color: var(--color-text-soft); }
.dropwp-offer.is-selected {
    border-color: var(--color-brand);
    background: var(--color-brand-soft);
    box-shadow: 0 0 0 4px rgba(31, 77, 61, 0.08);
}

/* Radio cache, l'etat passe par la classe .is-selected */
.dropwp-offer__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   Badge urgence (top-right)
   ============================================================ */
.dropwp-offer__badge {
    position: absolute;
    top: 0;
    right: var(--space-4);
    transform: translateY(-50%);
    background: var(--color-brand);
    color: var(--color-cta-text);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    line-height: 1;
    text-transform: uppercase;
}

/* ============================================================
   Inner : libelle + body + prix
   ============================================================ */
.dropwp-offer__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}
.dropwp-offer__inner > .dropwp-offer__label { flex: 0 0 56px; }
.dropwp-offer__inner > .dropwp-offer__body {
    flex: 1 1 auto;
    min-width: 0;
}
.dropwp-offer__inner > .dropwp-offer__price { flex: 0 0 auto; }

.dropwp-offer__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    padding: 0 var(--space-2);
    background: var(--color-text);
    color: var(--color-cta-text);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
}
.dropwp-offer.is-selected .dropwp-offer__label {
    background: var(--color-brand);
}

.dropwp-offer__body { min-width: 0; }
.dropwp-offer__title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.dropwp-offer__subtitle {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-sm);
    color: var(--color-muted);
    line-height: 1.35;
}
.dropwp-offer__subtitle li { margin: 0; }

.dropwp-offer__price {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-family: var(--font-body);
}
.dropwp-offer__price strong {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
}
.dropwp-offer__price del {
    font-size: var(--text-sm);
    color: var(--color-muted);
    font-weight: var(--weight-regular);
    text-decoration: line-through;
}

/* ============================================================
   Cadeaux (sous l'offre)
   ============================================================ */
.dropwp-offer__gifts {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: var(--space-3) 0 0;
    border-top: 1px dashed var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.dropwp-gift {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: var(--space-3);
    align-items: center;
}
.dropwp-gift__img {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    object-fit: cover;
}
.dropwp-gift__img--ph { background: var(--color-surface-2); }
.dropwp-gift__label {
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: 1.3;
}
.dropwp-gift__tag {
    display: inline-block;
    background: var(--color-promo);
    color: var(--color-promo-text);
    font-size: 10px;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    margin-right: 6px;
    text-transform: uppercase;
}
.dropwp-gift__price {
    font-size: var(--text-sm);
    color: var(--color-muted);
    text-decoration: line-through;
}

/* ============================================================
   CTA principal sous les offres
   ============================================================ */
.dropwp-offers__cta {
    margin-top: var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    background: var(--color-cta);
    color: var(--color-cta-text);
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.dropwp-offers__cta:hover {
    background: var(--color-cta-hover);
    transform: translateY(-1px);
}
.dropwp-offers__cta:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.dropwp-offers__cta.is-loading { pointer-events: none; opacity: 0.7; }

.dropwp-offers__cta-total {
    font-feature-settings: 'tnum';
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}