/* Net30Offers - site styles. Mobile first: base rules are for phones,
   min-width queries add to them for larger screens. */

:root {
    --n30-slate: #1e293b;
    --n30-slate-2: #334155;
    --n30-amber: #f59e0b;
    --n30-orange: #f97316;
    --n30-pink: #db2777;
    --n30-grad: linear-gradient(135deg, #f59e0b 0%, #f97316 45%, #db2777 100%);
    --bs-body-color: #1e293b;
    --bs-link-color-rgb: 194, 65, 12;
    --bs-link-hover-color-rgb: 154, 52, 18;
}

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
/* Bootstrap's .display-* and .h* helpers reset the weight; put it back. */
h1[class], h2[class] { font-weight: 800; }
h3[class] { font-weight: 700; }

/* ---- header ---- */
.n30-logo { height: 40px; width: auto; }
.n30-header .nav-link { font-weight: 600; color: var(--n30-slate); }
.n30-header .nav-link:hover, .n30-header .nav-link:focus { color: #c2410c; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .4); }

/* ---- buttons ---- */
.btn-n30 {
    background: var(--n30-grad);
    border: 0;
    color: #fff;
    font-weight: 700;
    padding: .7rem 1.25rem;
    border-radius: .75rem;
    box-shadow: 0 6px 16px rgba(219, 39, 119, .22);
}
.btn-n30:hover, .btn-n30:focus { color: #fff; filter: brightness(1.06); }
.btn-n30:focus-visible { outline: 3px solid var(--n30-slate); outline-offset: 2px; }
.btn-n30.btn-lg { padding: .95rem 1.5rem; font-size: 1.1rem; }
.btn-n30:disabled { filter: grayscale(.4); opacity: .75; }

/* ---- shared pieces ---- */
.n30-hero { background: var(--n30-slate); color: #e2e8f0; }
.n30-hero h1 { color: #fff; }
.n30-accent { background: var(--n30-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.n30-card { border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; box-shadow: 0 4px 18px rgba(30, 41, 59, .06); }
.n30-icon-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: .9rem;
    background: var(--n30-grad); color: #fff; font-size: 1.25rem; flex: 0 0 auto;
}
.n30-soft { background: #f8fafc; }
.form-control:focus, .form-check-input:focus {
    border-color: var(--n30-amber);
    box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .25);
}
.form-control-lg { border-radius: .75rem; }

/* ---- footer ---- */
.n30-footer { background: var(--n30-slate); color: #cbd5e1; }
.n30-footer a { color: #e2e8f0; text-decoration: none; display: inline-block; padding: .3rem 0; }
.n30-footer a:hover, .n30-footer a:focus { color: var(--n30-amber); text-decoration: underline; }
.n30-footer-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; font-weight: 700; margin-bottom: .5rem; }
.n30-fine { color: #94a3b8; }

/* ---- landing page ---- */
.n30-eyebrow { color: var(--n30-amber); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.n30-hero-fine { color: #94a3b8; }
.n30-hero-badge { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
.n30-pill { background: var(--n30-grad); color: #fff; font-weight: 700; padding: .5rem .8rem; border-radius: 50rem; font-size: .8rem; }
.n30-offer { border-top: 6px solid var(--n30-amber); }
.n30-checks li { display: flex; gap: .6rem; align-items: baseline; padding: .3rem 0; }
.n30-checks i { color: #16a34a; }
.n30-fee { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1rem; }
.n30-fee-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: #64748b; }
.n30-fee-amount { font-size: 3rem; font-weight: 800; line-height: 1.1; color: var(--n30-slate); }
.n30-fee-amount span { font-size: 1rem; font-weight: 600; color: #64748b; }
.n30-pill-plain { background: #e2e8f0; color: #475569; font-weight: 700; padding: .5rem .8rem; border-radius: 50rem; font-size: .8rem; }
.n30-vlogo { width: 64px; height: 64px; object-fit: contain; border-radius: .9rem; border: 1px solid #e2e8f0; background: #fff; padding: 4px; flex: 0 0 auto; }
.n30-promo { background: #fff7ed; border: 1px dashed var(--n30-amber); color: #9a3412; font-weight: 700; padding: .6rem .9rem; border-radius: .75rem; }
.n30-facts { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; }
.n30-facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: #64748b; padding-top: .2rem; }
.n30-facts dd { margin: 0; font-weight: 700; color: var(--n30-slate); }
.n30-step {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--n30-slate); color: #fff; font-weight: 800; font-size: 1.15rem;
}
.n30-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem .5rem;
    min-height: 7.5rem; text-align: center; font-weight: 600;
}
.n30-tile i { font-size: 1.75rem; color: var(--n30-orange); }
.n30-accent-icon { color: var(--n30-orange); }
.n30-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.accordion-button:not(.collapsed) { background: #fff7ed; color: var(--n30-slate); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .25); border-color: var(--n30-amber); }
.accordion-button { font-weight: 600; }

/* ---- offers list and detail ---- */
.min-w-0 { min-width: 0; }
.n30-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: #f1f5f9; color: #334155; border-radius: 50rem;
    padding: .3rem .7rem; font-size: .8rem; font-weight: 600;
}
.n30-chip i { color: var(--n30-orange); }
.n30-offer-card { position: relative; transition: box-shadow .15s ease, transform .15s ease; }
.n30-offer-card:hover { box-shadow: 0 10px 28px rgba(30, 41, 59, .12); transform: translateY(-2px); }
.n30-card-link { color: var(--n30-slate); text-decoration: none; }
.n30-card-link:hover { color: #c2410c; }
.n30-loading { opacity: .45; pointer-events: none; }
.page-link { color: var(--n30-slate); min-width: 2.75rem; text-align: center; padding: .6rem .75rem; }
.page-item.active .page-link { background: var(--n30-slate); border-color: var(--n30-slate); }
.n30-vlogo-lg { width: 72px; height: 72px; }
.n30-rich { overflow-wrap: anywhere; }
.n30-rich img { max-width: 100%; height: auto; }
.n30-rich > :last-child { margin-bottom: 0; }
.n30-note { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .75rem; padding: .9rem 1rem; font-size: .875rem; color: #475569; }
.n30-applybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
    background: #fff; border-top: 1px solid #e2e8f0; box-shadow: 0 -6px 18px rgba(30, 41, 59, .08);
    padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom));
}
@media (max-width: 991.98px) { body:has(.n30-applybar) { padding-bottom: 4.5rem; } }
@media (min-width: 992px) { .n30-sticky-lg { position: sticky; top: 96px; } }
@media (prefers-reduced-motion: reduce) { .n30-offer-card { transition: none; } .n30-offer-card:hover { transform: none; } }

/* ---- admin ---- */
body.n30-admin { background: #f1f5f9; }
.n30-adminbar { background: var(--n30-slate); }
.n30-adminbar .nav-link { color: #cbd5e1; font-weight: 600; border-radius: .5rem; padding: .6rem .8rem; }
.n30-adminbar .nav-link:hover, .n30-adminbar .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .08); }
.n30-adminbar .nav-link.active { color: #fff; background: rgba(245, 158, 11, .22); }
.n30-admin-main { max-width: 1400px; }
.n30-stat {
    display: flex; flex-direction: column; gap: .15rem; height: 100%;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1rem;
    color: var(--n30-slate); text-decoration: none;
}
a.n30-stat:hover, a.n30-stat:focus { border-color: var(--n30-amber); color: var(--n30-slate); }
.n30-stat-num { font-size: 1.75rem; font-weight: 800; line-height: 1.1; }
.n30-stat-label { font-size: .85rem; color: #64748b; font-weight: 600; }
.n30-stat-alert { border-color: var(--n30-amber); background: #fff7ed; }
.n30-stat-alert .n30-stat-num { color: #c2410c; }

#offerRows { grid-template-columns: minmax(0, 1fr); }
.n30-adminrow { min-width: 0; }
.n30-adminrow .n30-vlogo { width: 48px; height: 48px; }
.n30-adminrow .form-check-input { cursor: pointer; }
.offcanvas.n30-editpanel { --bs-offcanvas-width: min(100vw, 720px); }
.n30-editpanel .offcanvas-body { padding-bottom: 1.5rem; }
.n30-editpanel-foot { padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: #fff; }
.note-editor.note-frame { border-color: #dee2e6; border-radius: .5rem; }
.note-editor .note-editable { font-family: inherit; font-size: 1rem; }

@media (min-width: 768px) {
    .n30-logo { height: 48px; }
    html { scroll-padding-top: 88px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}