/* ============================================================================
   Double Discount campaign - page + homepage-widget styles.
   Loaded via $page_extra_css on the /doublediscount landing page and the homepage
   (so the widget reuses the same shared band/ribbon). Mobile-first; kebab-case,
   block-element naming consistent with the rest of the BDStall design system.
   ============================================================================ */

/* ---- Shared dual-savings band + ribbon (used by both the landing card and the widget) ---- */
.double-discount-ribbon {
    position: absolute; top: 0; left: 0; z-index: 2;
    display: inline-flex; align-items: center; gap: 3px;
    background: linear-gradient(135deg, #0059cc, #003a87); color: #fff;
    font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 8px 3px 6px; border-bottom-right-radius: 9px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.double-discount-band {
    display: flex; border-radius: 8px; overflow: hidden; margin-top: 7px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.double-discount-band-seg {
    flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: center;
    padding: 8px 6px; text-align: center; gap: 4px; white-space: nowrap;
}
.double-discount-band-seg svg { flex: none; }
.double-discount-band-price { background: linear-gradient(135deg, #eaf1fe, #d8e6fb); color: #0b57d0; }
.double-discount-band-points { background: linear-gradient(135deg, #eaf7ec, #d4efd9); color: #1f7a37; }
.double-discount-band-price + .double-discount-band-points { border-left: 2px solid #fff; }
.double-discount-band-value { font-size: .8125rem; font-weight: 800; letter-spacing: -.01em; }
.double-discount-band-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .92; }

/* ---- Shared promotion badge (category / search / cart cards consume promotion_state_for) ---- */
.double-discount-tag {
    display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700;
    color: #0b57d0; background: #eaf1fe; border-radius: 5px; padding: 2px 6px; line-height: 1.3;
}
.double-discount-tag-points { color: #1f7a37; }

/* ---- Homepage widget extras ---- */
.double-discount-widget-subtitle { margin: 2px 0 0; font-size: 11.5px; color: #6b6964; font-weight: 500; }
.double-discount-widget-subtitle strong { color: #2e7d32; }

/* ---- Landing page ---- */
.double-discount-wrap { max-width: 1200px; margin: 0 auto; padding: 0 0 64px; }
.double-discount-hero {
    background: linear-gradient(135deg, #0059cc 0%, #003a87 100%); color: #fff;
    border-radius: 14px; padding: 28px 24px; margin: 20px 0 22px; text-align: center;
}
.double-discount-hero h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 6px; }
.double-discount-hero p { font-size: 0.9rem; margin: 0; opacity: .93; }
.double-discount-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.double-discount-card {
    display: flex; flex-direction: column; background: #fff; border: 1px solid #e8e8e4;
    border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .15s;
}
.double-discount-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .10); border-color: #c5d8f0; }
.double-discount-card-img { position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden; background: #f8f8f8; }
.double-discount-card-img img { display: block; width: 84%; height: 84%; object-fit: contain; margin: 8%; transition: transform 0.3s ease; }
.double-discount-card:hover .double-discount-card-img img { transform: scale(1.08); }
.double-discount-card-body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 5px; }
.double-discount-card-name { font-size: .8125rem; font-weight: 600; margin: 0; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.double-discount-price-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.double-discount-price { font-size: .9375rem; font-weight: 700; color: var(--green, #2e7d32); margin: 0; }
.double-discount-price-was { font-size: .75rem; color: #9aa0a6; text-decoration: line-through; margin: 0; }
.double-discount-empty { text-align: center; padding: 56px 20px; color: #6b6964; }
.double-discount-empty h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 8px; }
.double-discount-info { margin: 30px 0 0; padding: 20px; background: #f6f9ff; border: 1px solid #dbe7fb; border-radius: 12px; }
.double-discount-info h2 { font-size: 1rem; font-weight: 700; margin: 0 0 10px; color: #1C1C1A; }
.double-discount-info-lead { margin: 0 0 14px; font-size: .9rem; font-weight: 600; color: #185FA5; }
.double-discount-steps { display: flex; flex-direction: column; gap: 13px; }
.double-discount-step { display: flex; align-items: flex-start; gap: 11px; }
.double-discount-step-icon {
    flex: none; width: 32px; height: 32px; border-radius: 9px; display: inline-flex;
    align-items: center; justify-content: center; background: #e7f0fe; color: #0b57d0;
}
.double-discount-step-icon-done { background: #e8f5e9; color: #1f7a37; }
.double-discount-step p { margin: 0; font-size: .85rem; line-height: 1.5; color: #4a4a48; }
.double-discount-step p strong { color: #1C1C1A; }

@media (min-width: 768px) {
    .double-discount-hero h1 { font-size: 1.9rem; }
    .double-discount-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
}