/* ==========================================================================
   bannerself.css
   Consolidated styles for the TELD Banner system pages:
   banner-cart, banner-dashboard, banner-login, banner-order-complete,
   banner_checkout, bannerbuy.
   Extracted from inline <style> blocks and style="" attributes.
   ========================================================================== */

/* ---- Shared bits ---- */
label.required::after { content: ' *'; color: #E91E8C; }

/* ---- Page wrappers ---- */
.cart-wrap          { max-width: 720px; margin: 40px auto; padding: 0 16px 60px; }
.dash-wrap           { max-width: 760px; margin: 40px auto; padding: 0 16px 60px; }
.login-wrap          { max-width: 420px; margin: 80px auto; padding: 0 16px; }
.complete-wrap       { max-width: 520px; margin: 80px auto; padding: 0 16px; text-align: center; }
.checkout-wrap       { max-width: 600px; margin: 40px auto; padding: 0 16px 60px; }
.banner-buy-wrap     { max-width: 680px; margin: 40px auto; padding: 0 16px 60px; }

/* ---- Cards ---- */
.cart-card, .dash-card, .login-card, .complete-card, .checkout-card, .banner-form-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
}
.cart-card       { padding: 28px; margin-bottom: 20px; }
.dash-card       { padding: 28px; margin-bottom: 24px; }
.login-card      { padding: 36px; }
.complete-card   { padding: 48px 32px; }
.checkout-card   { padding: 32px; }
.banner-form-card{ padding: 32px; }

/* ---- Cart ---- */
.cart-item-title { font-weight: 700; color: #1B4332; }
.tier-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: .78rem;
    font-weight: 600;
    background: #D1FAE5;
    color: #1B4332;
}
.cart-total { font-size: 1.6rem; font-weight: 800; color: #1B4332; }
.cart-empty-pad { padding: 48px; }

/* ---- Dashboard ---- */
.banner-status {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: .8rem;
    font-weight: 600;
}
.status-active  { background: #D1FAE5; color: #065F46; }
.status-pending { background: #FEF3C7; color: #92400E; }
.status-paused  { background: #F3F4F6; color: #374151; }
.banner-preview { max-width: 100%; max-height: 80px; border-radius: 6px; border: 1px solid #E5E7EB; }
.size-note      { color: #6B7280; font-size: .8rem; }
.dashed-placeholder {
    background: #F9FAFB;
    border: 2px dashed #E5E7EB;
    border-radius: 8px;
    padding: 20px;
    color: #9CA3AF;
}

/* ---- Order complete ---- */
.check-icon { font-size: 3rem; color: #059669; }

/* ---- Checkout ---- */
.order-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #F3F4F6;
}

/* ---- Banner buy form ---- */
.form-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1B4332;
    margin: 24px 0 12px;
    border-bottom: 2px solid #D1FAE5;
    padding-bottom: 6px;
}
.price-display  { font-size: 2rem; font-weight: 800; color: #1B4332; }
.price-note     { color: #6B7280; font-size: .85rem; }
.slots-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
}
.slots-ok         { background: #D1FAE5; color: #1B4332; }
.slots-full       { background: #FEE2E2; color: #991B1B; }
.promo-validated  { color: #1B4332; font-weight: 600; font-size: .9rem; }
.promo-invalid    { color: #991B1B; font-size: .9rem; }
.highlight-box    { background: #F0FDF4; border-radius: 8px; padding: 16px; }
.hr-tight         { margin: 8px 0; }

/* ---- Generic hide/show toggle (also used by inline JS via addClass/removeClass) ---- */
.is-hidden { display: none; }
#discountRow.is-hidden { display: none !important; }

/* ---- Buttons ---- */
.btn-brand-fill { background: #1B4332; border: none; }

/* ---- Text color utilities ---- */
.text-brand    { color: #1B4332; }
.text-muted    { color: #6B7280; }
.text-success2 { color: #059669; }
.text-gray600  { color: #374151; }

/* ---- Font weight utilities ---- */
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

/* ---- Font size utilities ---- */
.fs-70  { font-size: .7rem; }
.fs-80  { font-size: .8rem; }
.fs-82  { font-size: .82rem; }
.fs-85  { font-size: .85rem; }
.fs-88  { font-size: .88rem; }
.fs-90  { font-size: .9rem; }
.fs-110 { font-size: 1.1rem; }
.fs-120 { font-size: 1.2rem; }
.fs-130 { font-size: 1.3rem; }
.fs-140 { font-size: 1.4rem; }
.fs-160 { font-size: 1.6rem; }

/* ---- Spacing utilities (pixel-precise values used across these pages) ---- */
.mb-2  { margin-bottom: 2px; }
.mb-4  { margin-bottom: 4px; }
.mb-6  { margin-bottom: 6px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-28 { margin-bottom: 28px; }

.mt-4  { margin-top: 4px; }
.mt-6  { margin-top: 6px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-20 { margin-top: 20px; }

.ml-8  { margin-left: 8px; }
.ml-10 { margin-left: 10px; }