/* ═══════════════════════════════════════════════════════════════════════════
   Platinum Club B2B SA — Premium Design System v2.0
   ───────────────────────────────────────────────────────────────────────────
   Brand-aligned with the official logo (brushed-platinum SA silhouette on
   deep charcoal). Gold is reserved EXCLUSIVELY for the verified-member
   badge — making it actually mean something against a restrained palette.

   This file is a complete drop-in replacement for premium.css.
   Requires pcb2b-tokens.css to be loaded first (or its tokens already
   merged into pcb2b-main.css).
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Brushed platinum text effect — used for hero headlines ──────────────── */
.pcb2b-text-platinum {
    background:    var(--pcb-grad-platinum);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    /* Brushed-metal vertical streaks */
    background-size: 100% 100%, 4px 100%;
    background-image:
        var(--pcb-grad-platinum),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.04) 0px,
            rgba(255,255,255,0.04) 1px,
            transparent 1px,
            transparent 3px
        );
    background-blend-mode: overlay;
}

/* Verified-only gold text — for the badge label, NEVER body copy */
.pcb2b-text-verified {
    background:    var(--pcb-grad-verified);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}


/* ── Frosted glass card on charcoal ──────────────────────────────────────── */
.pcb2b-glass {
    background:     var(--pcb-glass-bg);
    backdrop-filter: var(--pcb-glass-blur);
    -webkit-backdrop-filter: var(--pcb-glass-blur);
    border:         1px solid var(--pcb-glass-border);
    border-radius:  var(--pcb-radius-lg);
    color:          var(--pcb-platinum-lt);
}
.pcb2b-glass--light {
    background:     rgba(255, 255, 255, 0.85);
    border-color:   rgba(200, 203, 208, 0.40);
    color:          var(--pcb-ink);
}


/* ── Brushed platinum surface (logo-echo treatment) ─────────────────────── */
.pcb2b-metal {
    background:     var(--pcb-grad-platinum);
    position:       relative;
    overflow:       hidden;
    border-radius:  var(--pcb-radius);
}
.pcb2b-metal::before {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.06) 0px,
        rgba(255,255,255,0.06) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
}
.pcb2b-metal::after {
    /* Radial brushing — echoes the brushed-metal silhouette in the logo */
    content:       '';
    position:      absolute;
    inset:         0;
    background:    radial-gradient(
        circle at 50% 50%,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0) 60%
    );
    pointer-events: none;
}


/* ── Buttons: primary becomes platinum-on-charcoal ───────────────────────── */
.pcb2b-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    padding:        12px 24px;
    border-radius:  var(--pcb-radius-sm);
    font-size:      14px;
    font-weight:    600;
    font-family:    var(--pcb-font-head);
    letter-spacing: 0.3px;
    line-height:    1;
    white-space:    nowrap;
    text-decoration:none;
    cursor:         pointer;
    border:         1.5px solid transparent;
    transition:     transform var(--pcb-dur-fast) var(--pcb-ease),
                    box-shadow var(--pcb-dur-fast) var(--pcb-ease),
                    background-color var(--pcb-dur-fast) var(--pcb-ease),
                    border-color var(--pcb-dur-fast) var(--pcb-ease),
                    color var(--pcb-dur-fast) var(--pcb-ease);
}

/* PRIMARY — platinum gradient on charcoal ink text */
.pcb2b-btn--primary,
.pcb2b-btn--platinum {
    background:     var(--pcb-grad-platinum);
    color:          var(--pcb-ink);
    border-color:   var(--pcb-platinum-dk);
    box-shadow:     var(--pcb-shadow-sm), var(--pcb-shadow-inset);
}
.pcb2b-btn--primary:hover,
.pcb2b-btn--platinum:hover {
    transform:      translateY(-1px);
    box-shadow:     var(--pcb-shadow-platinum), var(--pcb-shadow-inset);
}

/* INK — charcoal solid for high-emphasis dark CTAs */
.pcb2b-btn--ink,
.pcb2b-btn--navy {
    background:     var(--pcb-grad-ink);
    color:          var(--pcb-platinum-lt);
    border-color:   var(--pcb-charcoal);
}
.pcb2b-btn--ink:hover,
.pcb2b-btn--navy:hover {
    background:     var(--pcb-charcoal);
    transform:      translateY(-1px);
    box-shadow:     var(--pcb-shadow);
}

/* GHOST — outline on light surfaces */
.pcb2b-btn--outline,
.pcb2b-btn--ghost {
    background:     transparent;
    color:          var(--pcb-ink);
    border-color:   var(--pcb-border);
}
.pcb2b-btn--outline:hover,
.pcb2b-btn--ghost:hover {
    border-color:   var(--pcb-platinum-dk);
    background:     var(--pcb-platinum-alpha);
    color:          var(--pcb-ink);
}

/* GHOST ON DARK */
.pcb2b-btn--ghost-dark {
    background:     transparent;
    color:          var(--pcb-platinum-lt);
    border-color:   var(--pcb-border-dk);
}
.pcb2b-btn--ghost-dark:hover {
    border-color:   var(--pcb-platinum);
    color:          var(--pcb-white);
    background:     rgba(255, 255, 255, 0.04);
}

/* VERIFIED — the only gold button; for "Verify Your Listing" CTA ONLY */
.pcb2b-btn--verified {
    background:     var(--pcb-grad-verified);
    color:          var(--pcb-ink);
    border-color:   var(--pcb-gold-dk);
    box-shadow:     var(--pcb-shadow-verified);
}
.pcb2b-btn--verified:hover {
    transform:      translateY(-1px);
    box-shadow:     0 0 0 4px rgba(212,175,55,0.14),
                    0 6px 16px rgba(212,175,55,0.28);
}

/* LEGACY .pcb2b-btn--gold maps to verified — preserves backwards compat */
.pcb2b-btn--gold {
    background:     var(--pcb-grad-verified);
    color:          var(--pcb-ink);
    border-color:   var(--pcb-gold-dk);
    box-shadow:     var(--pcb-shadow-verified);
}

/* Sizes */
.pcb2b-btn--sm   { padding: 8px 14px; font-size: 12px; }
.pcb2b-btn--lg   { padding: 16px 32px; font-size: 16px; }
.pcb2b-btn--full { width: 100%; justify-content: center; }

.pcb2b-btn:disabled,
.pcb2b-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}


/* ── Verified badge — the ONE warm element on the page ───────────────────── */
.pcb2b-badge--verified {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        4px 12px;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius:  20px;
    background:     var(--pcb-grad-verified);
    color:          var(--pcb-ink);
    border:         1px solid var(--pcb-gold-dk);
    box-shadow:     inset 0 1px 0 rgba(255,255,255,0.35),
                    0 0 0 3px rgba(212,175,55,0.08),
                    0 2px 8px rgba(212,175,55,0.20);
}
.pcb2b-badge--verified::before {
    content:        '';   /* badge text already contains the symbol — no duplicate */
    display:        none;
}


/* ── Tier badges — using platinum + accent variations ───────────────────── */
.pcb2b-tier-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        4px 10px;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-radius:  4px;
    border:         1px solid transparent;
}
.pcb2b-tier-badge--free {
    background:     var(--pcb-off-white);
    color:          var(--pcb-text-sec);
    border-color:   var(--pcb-border);
}
.pcb2b-tier-badge--bronze {
    background:     #E8DCC4;
    color:          #6B4F1F;
    border-color:   #C9A86A;
}
.pcb2b-tier-badge--silver {
    background:     var(--pcb-grad-platinum);
    color:          var(--pcb-ink);
    border-color:   var(--pcb-platinum-dk);
    box-shadow:     inset 0 1px 0 rgba(255,255,255,0.30);
}
.pcb2b-tier-badge--gold {
    background:     var(--pcb-grad-verified);
    color:          var(--pcb-ink);
    border-color:   var(--pcb-gold-dk);
}
.pcb2b-tier-badge--platinum,
.pcb2b-tier-badge--platinum-elite {
    background:     var(--pcb-grad-ink);
    color:          var(--pcb-platinum-lt);
    border-color:   var(--pcb-platinum);
    box-shadow:     inset 0 1px 0 rgba(200,203,208,0.20);
}


/* ── Single-listing header — charcoal hero with platinum logo ring ──────── */
.pcb2b-single-header {
    background:     var(--pcb-grad-charcoal);
    color:          var(--pcb-platinum-lt);
    padding:        var(--pcb-space-7) 0 var(--pcb-space-6);
    position:       relative;
    overflow:       hidden;
}
.pcb2b-single-header::before {
    /* SA silhouette as subtle watermark — extract from logo PDF */
    content:        '';
    position:       absolute;
    top:            50%;
    right:          -100px;
    width:          400px;
    height:         400px;
    transform:      translateY(-50%);
    background-image: url('../icons/sa-silhouette.svg');  /* you'll add this */
    background-size: contain;
    background-repeat: no-repeat;
    opacity:        0.06;
    pointer-events: none;
}
.pcb2b-single-header__inner {
    position:       relative;
    z-index:        1;
    display:        flex;
    align-items:    center;
    gap:            var(--pcb-space-5);
}
.pcb2b-single-header__name {
    font-family:    var(--pcb-font-display);
    font-size:      clamp(28px, 5vw, 44px);
    font-weight:    600;
    color:          var(--pcb-white);
    margin:         0 0 var(--pcb-space-2);
    line-height:    1.1;
}
.pcb2b-single-header__meta {
    display:        flex;
    flex-wrap:      wrap;
    gap:            var(--pcb-space-3);
    color:          var(--pcb-platinum);
    font-size:      14px;
}
.pcb2b-single-header__meta > span {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
}

/* Business logo rendered over a brushed-platinum ring */
.pcb2b-single-logo {
    width:          96px;
    height:         96px;
    border-radius:  50%;
    background:     var(--pcb-grad-platinum);
    padding:        4px;
    box-shadow:     var(--pcb-shadow-md), var(--pcb-shadow-inset);
    flex-shrink:    0;
    position:       relative;
}
.pcb2b-single-logo img {
    width:          100%;
    height:         100%;
    border-radius:  50%;
    object-fit:     cover;
    background:     var(--pcb-white);
}
.pcb2b-single-logo--placeholder {
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          var(--pcb-ink);
    font-family:    var(--pcb-font-head);
    font-weight:    800;
    font-size:      32px;
    letter-spacing: 1px;
}


/* ── Listing card — platinum-trimmed, restrained ─────────────────────────── */
.pcb2b-listing-card {
    background:     var(--pcb-white);
    border:         1px solid var(--pcb-border);
    border-radius:  var(--pcb-radius);
    padding:        var(--pcb-space-5);
    transition:     border-color var(--pcb-dur) var(--pcb-ease),
                    box-shadow var(--pcb-dur) var(--pcb-ease),
                    transform var(--pcb-dur) var(--pcb-ease);
    position:       relative;
}
.pcb2b-listing-card:hover {
    border-color:   var(--pcb-platinum-dk);
    box-shadow:     var(--pcb-shadow-md);
    transform:      translateY(-2px);
}
.pcb2b-listing-card--verified {
    border-color:   var(--pcb-border-gold);
    box-shadow:     0 0 0 1px var(--pcb-border-gold),
                    var(--pcb-shadow-sm);
}
.pcb2b-listing-card--verified:hover {
    border-color:   var(--pcb-gold);
    box-shadow:     0 0 0 1px var(--pcb-gold),
                    var(--pcb-shadow-md);
}


/* ── Section heading — display serif for editorial feel ─────────────────── */
.pcb2b-section-heading {
    font-family:    var(--pcb-font-display);
    font-weight:    500;
    font-size:      clamp(24px, 3.5vw, 36px);
    color:          var(--pcb-ink);
    margin:         0 0 var(--pcb-space-3);
    line-height:    1.15;
    letter-spacing: -0.5px;
}
.pcb2b-section-eyebrow {
    font-family:    var(--pcb-font-head);
    font-size:      12px;
    font-weight:    700;
    color:          var(--pcb-platinum-dk);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin:         0 0 var(--pcb-space-2);
}


/* ── Hero — charcoal canvas with platinum accent ─────────────────────────── */
.pcb2b-hero {
    background:     var(--pcb-grad-charcoal);
    color:          var(--pcb-platinum-lt);
    padding:        var(--pcb-space-8) 0;
    position:       relative;
    overflow:       hidden;
}
.pcb2b-hero__title {
    font-family:    var(--pcb-font-display);
    font-weight:    500;
    font-size:      clamp(36px, 6vw, 64px);
    color:          var(--pcb-white);
    line-height:    1.05;
    margin:         0 0 var(--pcb-space-4);
    letter-spacing: -1px;
}
.pcb2b-hero__lead {
    font-size:      clamp(16px, 1.5vw, 19px);
    line-height:    1.55;
    color:          var(--pcb-platinum);
    max-width:      640px;
    margin:         0 0 var(--pcb-space-5);
}


/* ── Form inputs — refined, restrained focus state ───────────────────────── */
.pcb2b-input,
.pcb2b-textarea,
.pcb2b-select {
    width:          100%;
    padding:        12px 14px;
    border:         1.5px solid var(--pcb-border);
    border-radius:  var(--pcb-radius-sm);
    font-size:      14px;
    font-family:    var(--pcb-font-body);
    color:          var(--pcb-ink);
    background:     var(--pcb-white);
    transition:     border-color var(--pcb-dur-fast),
                    box-shadow var(--pcb-dur-fast);
    outline:        none;
}
.pcb2b-input:focus,
.pcb2b-textarea:focus,
.pcb2b-select:focus {
    border-color:   var(--pcb-ink);
    box-shadow:     0 0 0 3px var(--pcb-platinum-alpha);
}
.pcb2b-input--error {
    border-color:   var(--pcb-error) !important;
    box-shadow:     0 0 0 3px rgba(179, 38, 30, 0.10);
}


/* ── Pricing tier card ─────────────────────────────────────────────────── */
.pcb2b-tier-card {
    background:     var(--pcb-white);
    border:         1px solid var(--pcb-border);
    border-radius:  var(--pcb-radius-lg);
    padding:        var(--pcb-space-6);
    position:       relative;
    transition:     transform var(--pcb-dur) var(--pcb-ease),
                    box-shadow var(--pcb-dur) var(--pcb-ease),
                    border-color var(--pcb-dur) var(--pcb-ease);
}
.pcb2b-tier-card:hover {
    transform:      translateY(-4px);
    box-shadow:     var(--pcb-shadow-md);
    border-color:   var(--pcb-platinum-dk);
}
.pcb2b-tier-card--featured {
    background:     var(--pcb-grad-charcoal);
    color:          var(--pcb-platinum-lt);
    border-color:   var(--pcb-gold);
    box-shadow:     var(--pcb-shadow-verified), var(--pcb-shadow-md);
}
.pcb2b-tier-card--featured::before {
    content:        'Recommended';
    position:       absolute;
    top:            -12px;
    left:           50%;
    transform:      translateX(-50%);
    background:     var(--pcb-grad-verified);
    color:          var(--pcb-ink);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding:        4px 14px;
    border-radius:  20px;
    box-shadow:     0 4px 12px rgba(212,175,55,0.25);
}
.pcb2b-tier-card__price {
    font-family:    var(--pcb-font-display);
    font-size:      48px;
    font-weight:    600;
    color:          var(--pcb-ink);
    line-height:    1;
    margin:         var(--pcb-space-3) 0;
}
.pcb2b-tier-card--featured .pcb2b-tier-card__price {
    color:          var(--pcb-white);
}
.pcb2b-tier-card__period {
    font-size:      14px;
    color:          var(--pcb-text-sec);
    font-weight:    400;
}


/* ── Reputation / rating badges ─────────────────────────────────────────── */
.pcb2b-rep-badge {
    display:        inline-block;
    font-size:      11px;
    font-weight:    700;
    padding:        3px 9px;
    border-radius:  10px;
    letter-spacing: 0.3px;
}
.pcb2b-rep-badge--high { background: var(--pcb-success-bg); color: var(--pcb-success); }
.pcb2b-rep-badge--mid  { background: var(--pcb-warning-bg); color: var(--pcb-warning-txt); }
.pcb2b-rep-badge--low  { background: var(--pcb-off-white);  color: var(--pcb-muted); }


/* ── Notices ────────────────────────────────────────────────────────────── */
.pcb2b-notice {
    padding:        14px 18px;
    border-radius:  var(--pcb-radius-sm);
    font-size:      14px;
    border-left:    3px solid var(--pcb-platinum-dk);
    background:     var(--pcb-platinum-alpha);
    color:          var(--pcb-ink);
}
.pcb2b-notice--success { background: var(--pcb-success-bg); border-left-color: var(--pcb-success); color: var(--pcb-success); }
.pcb2b-notice--error   { background: var(--pcb-error-bg);   border-left-color: var(--pcb-error);   color: var(--pcb-error); }
.pcb2b-notice--warning { background: var(--pcb-warning-bg); border-left-color: var(--pcb-warning); color: var(--pcb-warning-txt); }
.pcb2b-notice--upgrade {
    background:     var(--pcb-gold-alpha);
    border-left-color: var(--pcb-gold);
    color:          var(--pcb-ink);
}


/* ── Spinner ────────────────────────────────────────────────────────────── */
.pcb2b-spinner {
    width:          16px;
    height:         16px;
    border:         2px solid var(--pcb-platinum-alpha);
    border-top-color: var(--pcb-ink);
    border-radius:  50%;
    animation:      pcb2b-spin 0.6s linear infinite;
    display:        inline-block;
}
@keyframes pcb2b-spin {
    to { transform: rotate(360deg); }
}


/* ── Dashboard sidebar — charcoal navigation ────────────────────────────── */
.pcb2b-dash-nav {
    background:     var(--pcb-charcoal);
    color:          var(--pcb-platinum);
    padding:        var(--pcb-space-4);
    border-radius:  var(--pcb-radius);
}
.pcb2b-dash-nav__item {
    display:        flex;
    align-items:    center;
    gap:            var(--pcb-space-3);
    padding:        10px 14px;
    border-radius:  var(--pcb-radius-sm);
    color:          var(--pcb-platinum);
    text-decoration: none;
    font-weight:    500;
    transition:     background var(--pcb-dur-fast), color var(--pcb-dur-fast);
}
.pcb2b-dash-nav__item:hover {
    background:     rgba(255, 255, 255, 0.06);
    color:          var(--pcb-white);
}
.pcb2b-dash-nav__item--active {
    background:     var(--pcb-graphite);
    color:          var(--pcb-white);
    border-left:    3px solid var(--pcb-platinum);
    padding-left:   11px;
}


/* ── Footer trust strip ─────────────────────────────────────────────────── */
.pcb2b-trust-strip {
    background:     var(--pcb-ink);
    color:          var(--pcb-platinum);
    padding:        var(--pcb-space-4) 0;
    font-size:      13px;
    text-align:     center;
    border-top:     1px solid var(--pcb-border-dk);
}
.pcb2b-trust-strip__badge {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        4px 10px;
    margin:         0 var(--pcb-space-2);
    background:     rgba(200, 203, 208, 0.08);
    border:         1px solid rgba(200, 203, 208, 0.20);
    border-radius:  4px;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* ── Light-theme dashboard nav overrides ─────────────────────────────────── */
/* Dashboard sidebar: light background with taupe accent border */
.pcb2b-dash-nav {
    background:     #F5F6F8;
    color:          #1C1F22;
    border:         1px solid #E2E3E6;
}
.pcb2b-dash-nav__item {
    color:          #3A3D44;
}
.pcb2b-dash-nav__item:hover {
    background:     #EAEBEE;
    color:          #1C1F22;
}
.pcb2b-dash-nav__item--active {
    background:     #FFFFFF;
    color:          #1C1F22;
    border-left:    3px solid #ACA79A;
    padding-left:   11px;
}

/* Trust strip: light */
.pcb2b-trust-strip {
    background:     #F5F6F8;
    color:          #3A3D44;
    border-top:     1px solid #E2E3E6;
}
.pcb2b-trust-strip__badge {
    background:     rgba(172,167,154,0.08);
    border:         1px solid rgba(172,167,154,0.25);
    color:          #6B6E73;
}

/* Navy/ink buttons → charcoal-on-light */
.pcb2b-btn--navy,
.pcb2b-btn--ink {
    background:     #3A3D44;
    color:          #FFFFFF;
    border-color:   #3A3D44;
}
.pcb2b-btn--ink:hover,
.pcb2b-btn--navy:hover {
    background:     #1C1F22;
    border-color:   #1C1F22;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pcb2b-btn,
    .pcb2b-listing-card,
    .pcb2b-tier-card {
        transition: none;
    }
    .pcb2b-spinner {
        animation: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Migration notes — apply after dropping this in:
   ───────────────────────────────────────────────────────────────────────────
   1. Audit pcb2b-main.css component CSS for hard-coded `var(--pcb-gold)`
      usage on anything OTHER than `.pcb2b-badge--verified`. Replace with
      `var(--pcb-platinum)` or `var(--pcb-ink)`.
   2. Extract the SA silhouette from b2b-logo.pdf as SVG and save to
      `public/assets/icons/sa-silhouette.svg` for the header watermark
      to render.
   3. Add the Google Fonts link from the bottom of pcb2b-tokens.css to
      your theme header, or import via @import in pcb2b-main.css.
   4. Add `<meta name="theme-color" content="#0E0E10">` to the site head
      so mobile browsers tint the address bar with the brand canvas.
   5. Regenerate favicon and OG images using the new charcoal background.
   ═══════════════════════════════════════════════════════════════════════════ */