/* ═══════════════════════════════════════════════════════════════════════════
   Claim Listings — Component CSS
   ───────────────────────────────────────────────────────────────────────────
   Uses the platinum/charcoal tokens from pcb2b-tokens.css.
   Append to pcb2b-main.css, or enqueue as its own file.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Banner on unclaimed listings ────────────────────────────────────────── */
.pcb2b-claim-banner {
    display:        grid;
    grid-template-columns: auto 1fr auto;
    gap:            var(--pcb-space-4);
    align-items:    center;
    background:     var(--pcb-grad-charcoal);
    color:          var(--pcb-platinum-lt);
    border-radius:  var(--pcb-radius-lg);
    padding:        var(--pcb-space-5) var(--pcb-space-6);
    margin:         0 0 var(--pcb-space-6);
    border:         1px solid var(--pcb-border-dk);
    box-shadow:     var(--pcb-shadow-md);
    position:       relative;
    overflow:       hidden;
}
.pcb2b-claim-banner::after {
    /* Subtle platinum sheen, top-right */
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 300px; height: 100%;
    background: radial-gradient(circle at top right,
        rgba(200, 203, 208, 0.18) 0%,
        rgba(200, 203, 208, 0) 60%);
    pointer-events: none;
}
.pcb2b-claim-banner > * {
    position: relative;
    z-index: 1;
}
.pcb2b-claim-banner__icon {
    width:          56px;
    height:         56px;
    border-radius:  50%;
    background:     var(--pcb-grad-platinum);
    color:          var(--pcb-ink);
    display:        flex;
    align-items:    center;
    justify-content: center;
    box-shadow:     var(--pcb-shadow-platinum), var(--pcb-shadow-inset);
    flex-shrink:    0;
}
.pcb2b-claim-banner__title {
    font-family:    var(--pcb-font-display);
    font-size:      22px;
    font-weight:    600;
    color:          var(--pcb-white);
    margin:         0 0 4px;
    letter-spacing: -0.3px;
}
.pcb2b-claim-banner__lead {
    margin:         0;
    color:          var(--pcb-platinum);
    font-size:      14px;
    line-height:    1.55;
    max-width:      560px;
}

@media (max-width: 720px) {
    .pcb2b-claim-banner {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            'icon body'
            'cta cta';
        padding: var(--pcb-space-4);
    }
    .pcb2b-claim-banner__icon { grid-area: icon; }
    .pcb2b-claim-banner__body { grid-area: body; }
    .pcb2b-claim-banner__cta  { grid-area: cta; }
    .pcb2b-claim-banner__cta .pcb2b-btn { width: 100%; justify-content: center; }
}


/* ── Claim form ──────────────────────────────────────────────────────────── */
.pcb2b-claim-form-wrap {
    max-width:      720px;
    margin:         0 auto;
    padding:        var(--pcb-space-6) var(--pcb-space-4);
}

.pcb2b-claim-form__header {
    margin-bottom:  var(--pcb-space-6);
    text-align:     center;
}
.pcb2b-claim-form__header .pcb2b-section-heading {
    margin-bottom: var(--pcb-space-3);
}
.pcb2b-claim-form__header .pcb2b-section-heading em {
    font-style: italic;
    color: var(--pcb-platinum-dk);
}
.pcb2b-claim-form__lead {
    color:          var(--pcb-text-sec);
    font-size:      15px;
    line-height:    1.55;
    max-width:      560px;
    margin:         0 auto;
}

.pcb2b-claim-form {
    background:     var(--pcb-white);
    border:         1px solid var(--pcb-border);
    border-radius:  var(--pcb-radius-lg);
    padding:        var(--pcb-space-6);
    box-shadow:     var(--pcb-shadow);
}

.pcb2b-claim-form__step {
    border:         none;
    padding:        0;
    margin:         0 0 var(--pcb-space-6);
}
.pcb2b-claim-form__step legend {
    font-family:    var(--pcb-font-head);
    font-size:      14px;
    font-weight:    700;
    color:          var(--pcb-platinum-dk);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom:  var(--pcb-space-3);
    padding:        0;
}

.pcb2b-form-row {
    margin-bottom:  var(--pcb-space-3);
}
.pcb2b-form-row label {
    display:        block;
    font-size:      13px;
    font-weight:    600;
    color:          var(--pcb-ink);
    margin-bottom:  6px;
}
.pcb2b-form-row label span[aria-hidden="true"] {
    color:          var(--pcb-error);
    margin-left:    2px;
}
.pcb2b-help-text {
    display:        block;
    margin-top:     6px;
    font-size:      12px;
    color:          var(--pcb-text-sec);
    line-height:    1.4;
}


/* ── Verification method radios as cards ────────────────────────────────── */
.pcb2b-claim-methods {
    display:        grid;
    gap:            var(--pcb-space-3);
}
.pcb2b-claim-method {
    display:        block;
    cursor:         pointer;
    padding:        var(--pcb-space-4);
    border:         1.5px solid var(--pcb-border);
    border-radius:  var(--pcb-radius);
    background:     var(--pcb-paper);
    transition:     border-color var(--pcb-dur-fast),
                    background var(--pcb-dur-fast),
                    transform var(--pcb-dur-fast) var(--pcb-ease);
    position:       relative;
    padding-left:   48px;
}
.pcb2b-claim-method:hover {
    border-color:   var(--pcb-platinum-dk);
    background:     var(--pcb-white);
}
.pcb2b-claim-method input[type="radio"] {
    position:       absolute;
    top:            var(--pcb-space-4);
    left:           var(--pcb-space-4);
    width:          20px;
    height:         20px;
    accent-color:   var(--pcb-ink);
    cursor:         pointer;
}
.pcb2b-claim-method:has(input:checked) {
    border-color:   var(--pcb-ink);
    background:     var(--pcb-white);
    box-shadow:     0 0 0 3px var(--pcb-platinum-alpha);
}
.pcb2b-claim-method__title {
    display:        flex;
    align-items:    center;
    gap:            10px;
    font-weight:    600;
    color:          var(--pcb-ink);
    margin-bottom:  4px;
    font-size:      15px;
}
.pcb2b-claim-method__desc {
    display:        block;
    font-size:      13px;
    color:          var(--pcb-text-sec);
    line-height:    1.5;
}
.pcb2b-badge--instant {
    display:        inline-block;
    background:     var(--pcb-success-bg);
    color:          var(--pcb-success);
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding:        2px 8px;
    border-radius:  10px;
}


/* ── POPIA consent checkbox ─────────────────────────────────────────────── */
.pcb2b-claim-form__consent {
    background:     var(--pcb-platinum-alpha);
    border:         1px solid var(--pcb-platinum);
    border-radius:  var(--pcb-radius);
    padding:        var(--pcb-space-4);
    margin-bottom:  var(--pcb-space-4);
}
.pcb2b-checkbox {
    display:        flex;
    align-items:    flex-start;
    gap:            12px;
    cursor:         pointer;
    font-size:      13px;
    line-height:    1.55;
    color:          var(--pcb-ink);
}
.pcb2b-checkbox input[type="checkbox"] {
    margin-top:     3px;
    width:          18px;
    height:         18px;
    accent-color:   var(--pcb-ink);
    flex-shrink:    0;
    cursor:         pointer;
}
.pcb2b-checkbox a {
    color:          var(--pcb-ink);
    text-decoration: underline;
    text-decoration-color: var(--pcb-platinum-dk);
    text-underline-offset: 2px;
}


/* ── Submit / actions ───────────────────────────────────────────────────── */
.pcb2b-claim-form__actions {
    display:        flex;
    justify-content: flex-end;
    gap:            var(--pcb-space-3);
    margin-top:     var(--pcb-space-5);
}
.pcb2b-claim-form__actions .pcb2b-btn { min-width: 200px; }


/* ── Inline messages ────────────────────────────────────────────────────── */
.pcb2b-claim-form__message {
    margin-bottom:  var(--pcb-space-4);
}


/* ── OTP step ───────────────────────────────────────────────────────────── */
.pcb2b-claim-otp-step {
    background:     var(--pcb-white);
    border:         1px solid var(--pcb-border);
    border-radius:  var(--pcb-radius-lg);
    padding:        var(--pcb-space-6);
    text-align:     center;
    box-shadow:     var(--pcb-shadow);
}
.pcb2b-claim-otp-step h2 {
    font-family:    var(--pcb-font-display);
    font-size:      26px;
    color:          var(--pcb-ink);
    margin:         0 0 var(--pcb-space-2);
}
.pcb2b-input--otp {
    font-family:    var(--pcb-font-mono);
    font-size:      32px;
    text-align:     center;
    letter-spacing: 14px;
    padding:        16px;
    max-width:      280px;
    margin:         var(--pcb-space-4) auto;
    border:         2px solid var(--pcb-border);
}
.pcb2b-input--otp:focus {
    border-color:   var(--pcb-ink);
}


/* ── Admin moderation status pills ──────────────────────────────────────── */
.pcb2b-claim-status {
    display:        inline-block;
    padding:        2px 10px;
    border-radius:  12px;
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pcb2b-claim-status--pending          { background: #FFF8E1; color: #B46F00; }
.pcb2b-claim-status--under_review     { background: #E3F2FD; color: #1F5A99; }
.pcb2b-claim-status--more_info_needed { background: #FFF3E0; color: #C26200; }
.pcb2b-claim-status--approved         { background: #E8F5E9; color: #1F7A3A; }
.pcb2b-claim-status--rejected         { background: #FDECEA; color: #B3261E; }


/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pcb2b-claim-method,
    .pcb2b-claim-banner,
    .pcb2b-claim-form { transition: none; }
}