/* ═══════════════════════════════════════════
   Digit Builder — Frontend Styles
   Brand: #E8632A
   ═══════════════════════════════════════════ */

:root {
    --db-brand:   #E8632A;
    --db-brand-d: #c94e1a;
    --db-white:   #ffffff;
    --db-dark:    #111111;
    --db-gray:    #f5f5f5;
    --db-text:    #333333;
    --db-border:  #e0e0e0;
    --db-radius:  8px;
    --db-shadow:  0 2px 12px rgba(0,0,0,.08);
}

/* ── BUTTONS ────────────────────────────────── */
.db-btn {
    display: inline-block;
    padding: 12px 26px;
    border-radius: var(--db-radius);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none !important;
    cursor: pointer;
    border: none;
    transition: background .2s, transform .1s;
    line-height: 1.2;
}
.db-btn:hover { transform: translateY(-1px); }
.db-btn--primary  { background: var(--db-brand); color: #fff !important; }
.db-btn--primary:hover { background: var(--db-brand-d); }
.db-btn--ghost    { background: transparent; color: var(--db-brand) !important; border: 2px solid var(--db-brand); }
.db-btn--ghost:hover  { background: var(--db-brand); color: #fff !important; }
.db-btn--amazon   { background: #FF9900; color: #111 !important; }
.db-btn--amazon:hover { background: #e68900; }
.db-btn--white    { background: #fff; color: var(--db-brand) !important; }
.db-btn--white:hover  { background: #f8f8f8; }

/* ── BADGE ──────────────────────────────────── */
.db-badge {
    display: inline-block;
    background: var(--db-brand);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

/* ── STARS ──────────────────────────────────── */
.db-star.full, .db-star.half { color: #f0a500; }
.db-star.empty { color: #ddd; }

/* ── SECTION TITLE ──────────────────────────── */
.db-section-title {
    text-align: center;
    font-size: 1.6rem;
    margin: 0 0 32px;
    color: var(--db-dark);
}

/* ═══════════════════════════════════════════
   MODULE: PRODUCTS
   ═══════════════════════════════════════════ */
.db-product {
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    background: var(--db-white);
    overflow: hidden;
    box-shadow: var(--db-shadow);
    margin: 24px 0;
    position: relative;
}

/* Card (default) */
.db-product--card {
    max-width: 320px;
}
.db-product--card .db-product__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.db-product--card .db-product__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Horizontal */
.db-product--horizontal {
    display: flex;
    align-items: center;
    gap: 0;
}
.db-product--horizontal .db-product__image {
    flex: 0 0 160px;
}
.db-product--horizontal .db-product__image img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    display: block;
}
.db-product--horizontal .db-product__body {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Minimal */
.db-product--minimal {
    border: none;
    box-shadow: none;
    padding: 16px 0;
}
.db-product--minimal .db-product__body {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.db-product__title a { color: var(--db-dark); text-decoration: none; font-size: 1rem; font-weight: 600; }
.db-product__title a:hover { color: var(--db-brand); }
.db-product__desc { font-size: .88rem; color: #666; margin: 0; line-height: 1.5; }
.db-product__pricing { display: flex; align-items: baseline; gap: 8px; }
.db-product__old-price { font-size: .9rem; color: #999; text-decoration: line-through; }
.db-product__price { font-size: 1.3rem; font-weight: 700; color: var(--db-brand); }

/* ═══════════════════════════════════════════
   MODULE: AMAZON
   ═══════════════════════════════════════════ */
.db-amazon {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 20px;
    margin: 24px 0;
    background: var(--db-white);
    box-shadow: var(--db-shadow);
}
.db-amazon__img { flex: 0 0 130px; text-align: center; }
.db-amazon__img img { max-width: 130px; max-height: 130px; object-fit: contain; }
.db-amazon__info { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.db-amazon__title a { font-size: .95rem; font-weight: 600; color: var(--db-dark); text-decoration: none; line-height: 1.4; }
.db-amazon__title a:hover { text-decoration: underline; }
.db-amazon__rating { display: flex; align-items: center; gap: 6px; }
.db-reviews { font-size: .82rem; color: #555; }
.db-amazon__price { font-size: 1.1rem; font-weight: 700; color: #B12704; margin: 0; }
.db-disclaimer { font-size: .7rem; color: #999; margin: 0; }

/* ═══════════════════════════════════════════
   MODULE: LANDING
   ═══════════════════════════════════════════ */

/* Hero */
.db-hero {
    background: var(--db-gray);
    padding: 64px 24px;
}
.db-hero--dark { background: var(--db-dark); color: #fff; }
.db-hero--dark .db-hero__headline, .db-hero--dark .db-hero__sub { color: #fff; }
.db-hero__inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
}
.db-hero__text { flex: 1; }
.db-hero__image { flex: 0 0 auto; }
.db-hero__image img { max-width: 340px; border-radius: var(--db-radius); }
.db-hero__headline { font-size: 2.4rem; font-weight: 800; color: var(--db-dark); margin: 0 0 12px; line-height: 1.2; }
.db-hero__sub { font-size: 1.15rem; color: #555; margin: 0 0 24px; }
.db-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Features */
.db-features { padding: 48px 24px; max-width: 1040px; margin: 0 auto; }
.db-features__grid { display: grid; gap: 24px; }
.db-features--cols-2 .db-features__grid { grid-template-columns: repeat(2, 1fr); }
.db-features--cols-3 .db-features__grid { grid-template-columns: repeat(3, 1fr); }
.db-features--cols-4 .db-features__grid { grid-template-columns: repeat(4, 1fr); }
.db-feature-card {
    background: var(--db-white);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 24px;
    text-align: center;
    box-shadow: var(--db-shadow);
}
.db-feature-card__icon { font-size: 2rem; margin-bottom: 10px; }
.db-feature-card__title { font-size: 1rem; font-weight: 700; margin: 0 0 8px; color: var(--db-dark); }
.db-feature-card__desc { font-size: .88rem; color: #666; margin: 0; line-height: 1.5; }

/* Testimonial */
.db-testimonial {
    border-left: 4px solid var(--db-brand);
    margin: 32px 0;
    padding: 20px 24px;
    background: var(--db-gray);
    border-radius: 0 var(--db-radius) var(--db-radius) 0;
}
.db-testimonial__stars { margin-bottom: 8px; }
.db-testimonial__text { font-size: 1rem; font-style: italic; color: #444; margin: 0 0 12px; line-height: 1.6; }
.db-testimonial__footer { display: flex; align-items: center; gap: 10px; }
.db-testimonial__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.db-testimonial__author { font-weight: 700; color: var(--db-dark); font-size: .9rem; }
.db-testimonial__role { font-size: .82rem; color: #888; }

/* FAQ */
.db-faq { padding: 48px 24px; max-width: 720px; margin: 0 auto; }
.db-faq__list { display: flex; flex-direction: column; gap: 8px; }
.db-faq__item {
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    overflow: hidden;
}
.db-faq__question {
    padding: 16px 20px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    background: var(--db-white);
    color: var(--db-dark);
    font-size: .95rem;
}
.db-faq__question::-webkit-details-marker { display: none; }
.db-faq__question::after { content: '+'; float: right; font-size: 1.2rem; color: var(--db-brand); }
details[open] .db-faq__question::after { content: '−'; }
.db-faq__answer { padding: 0 20px 16px; margin: 0; font-size: .9rem; color: #555; line-height: 1.6; }

/* CTA Banner */
.db-cta {
    padding: 56px 24px;
    text-align: center;
    border-radius: var(--db-radius);
    margin: 32px 0;
}
.db-cta__headline { font-size: 2rem; font-weight: 800; color: #fff; margin: 0 0 12px; }
.db-cta__sub { color: rgba(255,255,255,.88); font-size: 1.05rem; margin: 0 0 24px; }

/* ═══════════════════════════════════════════
   MODULE: CAPTURE
   ═══════════════════════════════════════════ */
.db-input {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    font-size: .95rem;
    box-sizing: border-box;
    margin-bottom: 10px;
    outline: none;
    transition: border .2s;
}
.db-input:focus { border-color: var(--db-brand); }

/* Inline Optin */
.db-optin { margin: 32px 0; }
.db-optin--boxed {
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 32px;
    background: var(--db-gray);
    box-shadow: var(--db-shadow);
}
.db-optin__headline { font-size: 1.3rem; font-weight: 700; color: var(--db-dark); margin: 0 0 8px; }
.db-optin__sub { font-size: .9rem; color: #666; margin: 0 0 16px; }
.db-optin__form .db-btn { width: 100%; text-align: center; }
.db-optin__msg { margin-top: 10px; font-size: .9rem; font-weight: 600; }
.db-optin__msg.success { color: #2e7d32; }
.db-optin__msg.error   { color: #c62828; }

/* Popup */
.db-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-popup {
    background: var(--db-white);
    border-radius: 12px;
    padding: 40px 36px;
    max-width: 420px;
    width: 90%;
    position: relative;
    box-shadow: 0 16px 48px rgba(0,0,0,.22);
    animation: dbPopIn .3s ease;
}
@keyframes dbPopIn { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
.db-popup__close {
    position: absolute;
    top: 12px; right: 16px;
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: #888;
    line-height: 1;
}
.db-popup__close:hover { color: var(--db-brand); }
.db-popup__headline { font-size: 1.4rem; font-weight: 800; color: var(--db-dark); margin: 0 0 8px; }
.db-popup__sub { font-size: .9rem; color: #666; margin: 0 0 20px; }
.db-popup .db-btn { width: 100%; text-align: center; }
.db-popup__msg { margin-top: 10px; font-size: .9rem; font-weight: 600; }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .db-hero__inner { flex-direction: column; }
    .db-hero__image img { max-width: 100%; }
    .db-hero__headline { font-size: 1.7rem; }
    .db-features--cols-3 .db-features__grid,
    .db-features--cols-4 .db-features__grid { grid-template-columns: repeat(2, 1fr); }
    .db-product--horizontal { flex-direction: column; }
    .db-product--horizontal .db-product__image { flex: none; }
    .db-product--horizontal .db-product__image img { width: 100%; height: 200px; }
    .db-amazon { flex-direction: column; align-items: center; text-align: center; }
}
@media (max-width: 480px) {
    .db-features--cols-2 .db-features__grid,
    .db-features--cols-3 .db-features__grid,
    .db-features--cols-4 .db-features__grid { grid-template-columns: 1fr; }
    .db-hero__headline { font-size: 1.4rem; }
}