/* =========================================================================
   vip-pages.css — Phase 3H visual rebuild
   Self-contained component library for /vip/* pages, ported from the demo
   at EscortsRebuildKentico13/ad-platform-en/ad-platform-enV2/css/style.css.
   Loaded by _shell-open.html so every VIP page renders with the dark/gold
   theme out of the box (no inline styles in templates).

   Custom-property fallbacks point at the colours used by the demo so VIP
   pages look right even before design-tokens.css applies its own
   overrides.
   ========================================================================= */

:root {
    /* Phase 3M: theme retuned to gold/dark. The --vip-primary tokens used to
       be pink (#e91e63) which leaked through every cascading rule (focus
       rings, button accents, required asterisks…). They now resolve to the
       same gold family as --vip-gold so the whole VIP centre reads as one
       coherent theme without per-rule overrides. Keeping the token names
       unchanged so nothing else has to be touched. */
    --vip-primary: var(--gold, #ffd700);
    --vip-primary-light: #ffe066;
    --vip-primary-dark: var(--gold-dark, #c9a227);
    --vip-secondary: var(--gold-dark, #c9a227);
    --vip-gold: var(--gold, #ffd700);
    --vip-gold-dark: var(--gold-dark, #c9a227);
    --vip-bg-dark: #0a0a0f;
    --vip-bg-card: #141419;
    --vip-bg-card-hover: #1a1a22;
    --vip-text-primary: #ffffff;
    --vip-text-secondary: #a0a0b0;
    --vip-text-muted: #606070;
    --vip-border: rgba(255, 255, 255, 0.08);
    --vip-border-glow: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.3);
    --vip-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
    --vip-shadow-glow: 0 0 30px rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.2);
    --vip-radius-sm: 8px;
    --vip-radius-md: 12px;
    --vip-radius-lg: 20px;
    --vip-radius-xl: 30px;
    --vip-success: #4caf50;
    --vip-warning: #ff9800;
    --vip-danger: #f44336;
}

/* Scope: anything inside the .vip-page <html> root. Avoids leaking to the
   advertiser pages that share the same site. */
html.vip-page, html.vip-page body { background: var(--vip-bg-dark); color: var(--vip-text-primary); font-family: 'Outfit', 'Noto Sans SC', sans-serif; line-height: 1.6; }
html.vip-page * , html.vip-page *::before, html.vip-page *::after { box-sizing: border-box; }
html.vip-page h1, html.vip-page h2, html.vip-page h3, html.vip-page h4, html.vip-page h5, html.vip-page h6 { font-family: 'Playfair Display', serif; font-weight: 600; line-height: 1.3; margin: 0; }
html.vip-page a { color: inherit; text-decoration: none; transition: color .2s; }
/* The main-site design-tokens.css ships a higher-specificity rule:
     body a:not([class*="ui "]):not([class*="ui-"]) { color: var(--primary-light) }
   …which is pink and was leaking through to the VIP brand link, sidebar
   links and footer links. Mirroring the same selector under the .vip-page
   root makes us win specificity (extra .vip-page class). */
html.vip-page body a:not([class*="ui "]):not([class*="ui-"]) { color: inherit; }
html.vip-page a:hover { color: #ff4081; }
html.vip-page p { margin: 0; }
html.vip-page ul, html.vip-page ol { margin: 0; padding: 0; list-style: none; }
html.vip-page img { max-width: 100%; }
html.vip-page button { font-family: inherit; }

/* ----- Shell ----- */
.vip-shell { min-height: 100vh; display: flex; flex-direction: column; }
.vip-shell-header { position: sticky; top: 0; z-index: 50; background: rgba(10,10,15,0.95); backdrop-filter: blur(20px); border-bottom: 1px solid var(--vip-border); }
.vip-shell-header-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 24px; max-width: 1400px; margin: 0 auto; }
.vip-shell-brand { display: inline-flex; align-items: center; gap: 10px; font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--vip-text-primary); text-decoration: none; }
.vip-shell-brand:hover { color: var(--vip-text-primary); }
.vip-shell-brand .vip-shell-crown { width: 42px; height: 42px; background: linear-gradient(135deg, var(--vip-gold) 0%, var(--vip-gold-dark) 100%); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #1a1a22; }
.vip-shell-brand .vip-tag { color: var(--vip-gold); margin-left: 4px; }
.vip-shell-nav { display: flex; align-items: center; gap: 6px; }
.vip-shell-nav a { padding: 8px 16px; color: var(--vip-text-secondary); font-weight: 500; border-radius: var(--vip-radius-md); font-size: 0.95rem; transition: all .2s; }
.vip-shell-nav a:hover { color: var(--vip-text-primary); background: rgba(255,255,255,0.05); }
.vip-shell-nav a.is-active { color: var(--vip-gold); background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.08); }
.vip-shell-main { flex: 1; width: 100%; }
.vip-shell-main.is-centered { display: flex; align-items: center; justify-content: center; padding: 40px 20px; min-height: calc(100vh - 70px); background: linear-gradient(135deg, #0a0a0f 0%, #1a1020 100%); }
.vip-shell-main.is-page { padding: 32px 24px; max-width: 1200px; margin: 0 auto; }
.vip-shell-footer { padding: 18px 24px; border-top: 1px solid var(--vip-border); color: var(--vip-text-muted); font-size: 0.8rem; text-align: center; background: var(--vip-bg-card); }
.vip-shell-footer a { color: var(--vip-text-secondary); margin: 0 8px; }

/* ----- Buttons ----- */
.vip-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 24px; font-size: 0.9rem; font-weight: 600; border: none; border-radius: var(--vip-radius-md); cursor: pointer; transition: all .3s; white-space: nowrap; text-decoration: none; }
.vip-btn:hover { color: inherit; }
.vip-btn-primary { background: linear-gradient(135deg, var(--vip-primary) 0%, var(--vip-primary-dark) 100%); color: #fff; }
.vip-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(var(--gold-ffd700-rgb, 255,215,0),0.4); color: #1a1a22; }
.vip-btn-secondary { background: rgba(255,255,255,0.08); color: var(--vip-text-primary); border: 1px solid var(--vip-border); }
.vip-btn-secondary:hover { background: rgba(255,255,255,0.12); border-color: var(--vip-primary); color: var(--vip-text-primary); }
.vip-btn-gold { background: linear-gradient(135deg, var(--vip-gold) 0%, var(--vip-gold-dark) 100%); color: #1a1a22; }
.vip-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(var(--gold-ffd700-rgb, 255,215,0),0.3); color: #1a1a22; }
.vip-btn-outline { background: transparent; color: var(--vip-gold); border: 1px solid rgba(var(--gold-ffd700-rgb, 255,215,0),0.5); }
.vip-btn-outline:hover { background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.1); color: var(--vip-gold); }
.vip-btn-success { background: var(--vip-success); color: #fff; }
.vip-btn-danger { background: var(--vip-danger); color: #fff; }
.vip-btn-lg { padding: 14px 32px; font-size: 1rem; }
.vip-btn-sm { padding: 6px 14px; font-size: 0.8rem; }
.vip-btn-block { width: 100%; }
.vip-btn[disabled],
.vip-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--vip-text-secondary) !important;
    border: 1px solid var(--vip-border) !important;
}
.vip-btn[disabled]:hover,
.vip-btn[aria-disabled="true"]:hover {
    transform: none !important;
    filter: none !important;
}

/* ----- Forms ----- */
.vip-form-group { margin-bottom: 18px; }
.vip-form-label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--vip-text-secondary); font-size: 0.9rem; }
.vip-form-label.is-required::after { content: ' *'; color: var(--vip-primary); }
.vip-form-input { width: 100%; padding: 12px 16px; background: var(--vip-bg-card); border: 1px solid var(--vip-border); border-radius: var(--vip-radius-md); color: var(--vip-text-primary); font-family: inherit; font-size: 0.95rem; transition: all .2s; }
.vip-form-input:focus { outline: none; border-color: var(--vip-primary); box-shadow: 0 0 0 3px rgba(var(--gold-ffd700-rgb, 255,215,0),0.18); }
.vip-form-input::placeholder { color: var(--vip-text-muted); }
.vip-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .vip-form-row { grid-template-columns: 1fr; } }
.vip-form-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--vip-text-secondary); }
.vip-form-check input { width: 18px; height: 18px; accent-color: var(--vip-primary); cursor: pointer; }
.vip-form-error { padding: 10px 14px; margin-bottom: 16px; background: rgba(244,67,54,0.1); border: 1px solid rgba(244,67,54,0.3); border-radius: var(--vip-radius-md); color: #ff7a73; font-size: 0.9rem; }
.vip-form-success { padding: 10px 14px; margin-bottom: 16px; background: rgba(76,175,80,0.1); border: 1px solid rgba(76,175,80,0.3); border-radius: var(--vip-radius-md); color: #7ed47e; font-size: 0.9rem; }

/* ----- Cards ----- */
.vip-card { background: var(--vip-bg-card); border: 1px solid var(--vip-border); border-radius: var(--vip-radius-lg); overflow: hidden; transition: all .3s; }
.vip-card.is-gold-border { border-color: rgba(var(--gold-ffd700-rgb, 255,215,0),0.25); }
.vip-card-header { padding: 16px 20px; border-bottom: 1px solid var(--vip-border); display: flex; justify-content: space-between; align-items: center; }
.vip-card-header h3 { font-size: 1rem; }
.vip-card-body { padding: 24px; }
.vip-card-body.is-flush { padding: 0; }
.vip-card-footer { padding: 16px 20px; border-top: 1px solid var(--vip-border); background: rgba(0,0,0,0.2); }

/* Auth page (login / register / forgot / reset / confirm) */
.vip-auth-card { width: 100%; max-width: 460px; background: var(--vip-bg-card); border: 1px solid rgba(var(--gold-ffd700-rgb, 255,215,0),0.2); border-radius: var(--vip-radius-lg); padding: 32px; box-shadow: var(--vip-shadow-card); }
.vip-auth-card.is-wide { max-width: 560px; }
.vip-auth-header { text-align: center; margin-bottom: 24px; }
.vip-auth-logo { display: inline-flex; align-items: center; gap: 10px; font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700; color: var(--vip-text-primary); margin-bottom: 14px; text-decoration: none; }
.vip-auth-logo .vip-shell-crown { width: 38px; height: 38px; font-size: 1.1rem; }
.vip-auth-title { font-size: 1.5rem; margin-bottom: 8px; }
.vip-auth-sub { color: var(--vip-text-secondary); font-size: 0.9rem; }
.vip-auth-foot { text-align: center; color: var(--vip-text-secondary); font-size: 0.9rem; margin-top: 18px; }
.vip-auth-foot a { color: var(--vip-gold); }
/* Phase 5h v6 — make the register↔login cross-link unmistakable as a CTA. */
.vip-auth-foot .vip-auth-cross-link {
    color: var(--vip-gold);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    transition: filter .15s ease, text-decoration-color .15s ease;
}
.vip-auth-foot .vip-auth-cross-link:hover {
    filter: brightness(1.15);
    text-decoration-color: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.55);
}
.vip-auth-divider { margin: 22px 0 14px; padding-top: 18px; border-top: 1px solid var(--vip-border); text-align: center; color: var(--vip-text-muted); font-size: 0.85rem; }

/* Pricing cards (used by /vip/membership and /vip/account/membership upgrade box) */
.vip-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.vip-pricing-card { background: var(--vip-bg-card); border: 1px solid var(--vip-border); border-radius: var(--vip-radius-xl); padding: 28px; position: relative; transition: all .3s; display: flex; flex-direction: column; }
.vip-pricing-card:hover { transform: translateY(-6px); border-color: rgba(var(--gold-ffd700-rgb, 255,215,0),0.35); }
.vip-pricing-card.is-popular { border-color: var(--vip-gold); box-shadow: 0 0 40px rgba(var(--gold-ffd700-rgb, 255,215,0),0.15); }
.vip-pricing-card.is-popular::before { content: attr(data-badge); position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 14px; background: linear-gradient(135deg, var(--vip-gold) 0%, var(--vip-gold-dark) 100%); border-radius: 20px; font-size: 0.7rem; font-weight: 700; color: #1a1a22; letter-spacing: 0.5px; }
.vip-pricing-card.is-current { border-color: var(--vip-success); box-shadow: 0 0 32px rgba(76, 175, 80, 0.18); }
.vip-pricing-card.is-current::before { content: attr(data-badge); position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 14px; background: var(--vip-success); border-radius: 20px; font-size: 0.7rem; font-weight: 700; color: #fff; letter-spacing: 0.5px; }
.vip-pricing-tier { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--vip-primary-light); margin-bottom: 6px; }
.vip-pricing-name { font-size: 1.4rem; margin-bottom: 10px; }
.vip-pricing-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.vip-pricing-amount { font-size: 2.4rem; font-weight: 700; font-family: 'Playfair Display', serif; }
.vip-pricing-period { color: var(--vip-text-muted); font-size: 0.9rem; }
.vip-pricing-perday { color: var(--vip-gold); font-size: 0.85rem; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--vip-border); }
.vip-pricing-features { list-style: none; margin-bottom: 24px; flex-grow: 1; }
.vip-pricing-features li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; color: var(--vip-text-secondary); font-size: 0.9rem; }
.vip-pricing-features li::before { content: '\2713'; color: var(--vip-gold); font-weight: bold; }
.vip-pricing-fine { font-size: 0.75rem; color: var(--vip-text-muted); margin-top: 12px; text-align: center; }

/* Dashboard layout */
.vip-dashboard { display: grid; grid-template-columns: 240px 1fr; gap: 0; min-height: calc(100vh - 70px - 120px); }
@media (max-width: 900px) { .vip-dashboard { grid-template-columns: 1fr; } }
.vip-sidebar { background: var(--vip-bg-card); border-right: 1px solid var(--vip-border); padding: 20px 12px; }
@media (max-width: 900px) { .vip-sidebar { border-right: none; border-bottom: 1px solid var(--vip-border); } }
.vip-sidebar-user { text-align: center; padding: 16px 0 20px; border-bottom: 1px solid var(--vip-border); margin-bottom: 16px; }
.vip-sidebar-avatar { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, rgba(var(--gold-ffd700-rgb, 255,215,0),0.3), rgba(var(--gold-dark-rgb, 201,162,39),0.25)); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--vip-gold); border: 3px solid var(--vip-gold); margin-bottom: 10px; overflow: hidden; }
/* Phase 5h v8 — show uploaded avatar instead of letter; the gold border
   stays so the chip still reads as the user identity badge. */
.vip-sidebar-avatar.has-photo { background: #1a1a22; padding: 0; }
.vip-sidebar-avatar.has-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vip-sidebar-name { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.vip-sidebar-tier { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.18); color: var(--vip-gold); }
.vip-sidebar-tier.is-free { background: rgba(160,160,176,0.18); color: var(--vip-text-secondary); }
.vip-sidebar-nav { list-style: none; }
.vip-sidebar-nav li { margin-bottom: 2px; }
.vip-sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--vip-text-secondary); border-radius: var(--vip-radius-md); transition: all .2s; font-size: 0.9rem; }
.vip-sidebar-nav a:hover { background: rgba(255,255,255,0.05); color: var(--vip-text-primary); }
.vip-sidebar-nav a.is-active { background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.12); color: var(--vip-gold); }
.vip-sidebar-icon { width: 18px; text-align: center; font-size: 0.95rem; }

.vip-content { padding: 24px; }
.vip-content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.vip-content-title { font-size: 1.5rem; }
.vip-content-title .vip-content-icon { color: var(--vip-gold); margin-right: 6px; }

/* Stat cards */
.vip-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.vip-stat { background: var(--vip-bg-card); border: 1px solid var(--vip-border); border-radius: var(--vip-radius-lg); padding: 18px 20px; transition: all .25s; }
.vip-stat:hover { border-color: rgba(var(--gold-ffd700-rgb, 255,215,0),0.3); transform: translateY(-2px); }
.vip-stat-label { color: var(--vip-text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.vip-stat-value { font-size: 1.85rem; font-weight: 700; font-family: 'Playfair Display', serif; color: var(--vip-text-primary); }
.vip-stat.is-gold .vip-stat-value { color: var(--vip-gold); }

/* Membership status banner (dashboard / membership page hero) */
.vip-status-banner { background: linear-gradient(135deg, rgba(var(--gold-ffd700-rgb, 255,215,0),0.16) 0%, rgba(var(--gold-dark-rgb, 201,162,39),0.08) 100%); border: 1px solid rgba(var(--gold-ffd700-rgb, 255,215,0),0.4); border-radius: var(--vip-radius-lg); padding: 22px 24px; margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.vip-status-title { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.vip-status-title .vip-status-crown { color: var(--vip-gold); font-size: 1.4rem; }
.vip-status-meta { color: var(--vip-text-secondary); font-size: 0.9rem; }
.vip-status-action a { white-space: nowrap; }

/* Profile / favourite / history grid (ad-card style) */
.vip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.vip-grid-card { background: var(--vip-bg-card); border: 1px solid var(--vip-border); border-radius: var(--vip-radius-lg); overflow: hidden; transition: all .3s; display: block; color: inherit; text-decoration: none; }
.vip-grid-card:hover { transform: translateY(-4px); border-color: rgba(var(--gold-ffd700-rgb, 255,215,0),0.35); box-shadow: 0 12px 30px rgba(0,0,0,0.4); color: inherit; }
.vip-grid-card-image { position: relative; aspect-ratio: 3/4; overflow: hidden; background: linear-gradient(135deg, #1a1020 0%, #2a1030 100%); display: flex; align-items: center; justify-content: center; color: rgba(var(--gold-ffd700-rgb, 255,215,0),0.45); font-size: 2.2rem; }
.vip-grid-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; pointer-events: none; -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.vip-grid-card:hover .vip-grid-card-image img { transform: scale(1.05); }
.vip-grid-card-image .vip-grid-card-fallback { font-family: 'Playfair Display', serif; }
.vip-grid-card-body { padding: 12px 14px 14px; }
.vip-grid-card-name { font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; color: var(--vip-text-primary); }
.vip-grid-card-meta { font-size: 0.78rem; color: var(--vip-text-secondary); margin-bottom: 4px; }
.vip-grid-card-foot { font-size: 0.72rem; color: var(--vip-text-muted); }
.vip-grid-card-tag { display: inline-block; padding: 2px 8px; background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.15); color: var(--vip-gold); border-radius: 999px; font-size: 0.7rem; font-weight: 600; margin-right: 4px; }

/* Empty state */
.vip-empty { padding: 60px 24px; text-align: center; color: var(--vip-text-muted); border: 1px dashed var(--vip-border); border-radius: var(--vip-radius-lg); background: rgba(255,255,255,0.02); }
.vip-empty-icon { font-size: 2.4rem; margin-bottom: 12px; color: var(--vip-text-muted); }
.vip-empty-text { color: var(--vip-text-secondary); font-size: 0.95rem; margin-bottom: 8px; }

/* List rows (history / contacts) */
.vip-list { background: var(--vip-bg-card); border: 1px solid var(--vip-border); border-radius: var(--vip-radius-lg); overflow: hidden; }
.vip-list-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--vip-border); transition: background-color .15s; }
.vip-list-row:last-child { border-bottom: none; }
.vip-list-row:hover { background: rgba(255,255,255,0.025); }
.vip-list-thumb { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, rgba(var(--gold-ffd700-rgb, 255,215,0),0.25), rgba(var(--gold-dark-rgb, 201,162,39),0.15)); display: inline-flex; align-items: center; justify-content: center; color: var(--vip-gold); font-weight: 600; flex-shrink: 0; overflow: hidden; }
.vip-list-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.vip-list-name { color: var(--vip-text-primary); font-weight: 600; }
.vip-list-name a { color: inherit; }
.vip-list-name a:hover { color: var(--vip-gold); }
.vip-list-tag { display: inline-block; padding: 2px 8px; background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.15); color: var(--vip-gold); border-radius: 999px; font-size: 0.7rem; font-weight: 600; margin-left: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.vip-list-date { margin-left: auto; color: var(--vip-text-muted); font-size: 0.8rem; white-space: nowrap; }

/* Data table */
.vip-table { width: 100%; border-collapse: collapse; }
.vip-table thead th { background: rgba(255,255,255,0.03); padding: 12px 16px; text-align: left; color: var(--vip-text-secondary); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.vip-table tbody td { padding: 14px 16px; border-top: 1px solid var(--vip-border); color: var(--vip-text-primary); font-size: 0.9rem; }
.vip-table tbody tr:hover { background: rgba(255,255,255,0.02); }
/* Status pills retuned to the gold family — Active reads as solid gold,
   Pending as a muted gold (in-progress), Expired as neutral grey
   (terminal). This drops the green/red/amber rainbow and aligns with
   the rest of the VIP theme. */
.vip-status-pill { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.16); color: var(--vip-gold); border: 1px solid rgba(var(--gold-ffd700-rgb, 255,215,0),0.28); text-transform: uppercase; letter-spacing: 0.5px; }
.vip-status-pill.is-expired { background: rgba(255,255,255,0.05); color: var(--vip-text-secondary); border-color: var(--vip-border); }
.vip-status-pill.is-pending { background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.08); color: var(--vip-gold); border-color: rgba(var(--gold-ffd700-rgb, 255,215,0),0.18); opacity: 0.85; }

/* Marketing landing (index) */
.vip-hero { padding: 80px 24px 60px; background: radial-gradient(circle at top right, rgba(var(--gold-ffd700-rgb, 255,215,0),0.15), transparent 60%), radial-gradient(circle at bottom left, rgba(var(--gold-ffd700-rgb, 255,215,0),0.06), transparent 50%); text-align: center; max-width: 900px; margin: 0 auto; }
.vip-hero-eyebrow { display: inline-block; padding: 6px 14px; background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.12); border: 1px solid rgba(var(--gold-ffd700-rgb, 255,215,0),0.35); border-radius: 999px; color: var(--vip-gold); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px; }
.vip-hero-title { font-size: clamp(2rem, 4.5vw, 3.4rem); margin-bottom: 16px; line-height: 1.15; }
.vip-hero-title .vip-hero-gold { color: var(--vip-gold); }
.vip-hero-sub { color: var(--vip-text-secondary); font-size: 1.05rem; max-width: 640px; margin: 0 auto 28px; }
.vip-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.vip-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 48px 0; }
.vip-feature { background: var(--vip-bg-card); border: 1px solid var(--vip-border); border-radius: var(--vip-radius-lg); padding: 22px; transition: all .3s; }
.vip-feature:hover { border-color: rgba(var(--gold-ffd700-rgb, 255,215,0),0.4); transform: translateY(-3px); }
.vip-feature-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--vip-gold), var(--vip-gold-dark)); display: inline-flex; align-items: center; justify-content: center; color: #1a1a22; font-size: 1.4rem; margin-bottom: 14px; }
.vip-feature-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.vip-feature-text { color: var(--vip-text-secondary); font-size: 0.9rem; }

/* Auth banner above plan cards */
.vip-auth-banner { padding: 14px 18px; background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.08); border: 1px solid rgba(var(--gold-ffd700-rgb, 255,215,0),0.25); border-radius: var(--vip-radius-md); margin-bottom: 24px; text-align: center; color: var(--vip-text-secondary); font-size: 0.9rem; }
.vip-auth-banner a { color: var(--vip-gold); font-weight: 600; }

/* Confirm-email card */
.vip-confirm-card { width: 100%; max-width: 480px; background: var(--vip-bg-card); border: 1px solid var(--vip-border); border-radius: var(--vip-radius-lg); padding: 40px 32px; text-align: center; }
.vip-confirm-icon { font-size: 3rem; margin-bottom: 16px; }
.vip-confirm-title { font-size: 1.5rem; margin-bottom: 10px; }
.vip-confirm-message { color: var(--vip-text-secondary); margin-bottom: 24px; }

/* Settings list (key/value rows) */
.vip-kv { display: grid; grid-template-columns: 180px 1fr; gap: 14px 24px; padding: 14px 0; border-bottom: 1px solid var(--vip-border); }
.vip-kv:last-child { border-bottom: none; }
.vip-kv-key { color: var(--vip-text-muted); font-size: 0.85rem; }
.vip-kv-value { color: var(--vip-text-primary); }
@media (max-width: 600px) { .vip-kv { grid-template-columns: 1fr; gap: 4px; } }

/* Utilities (scoped) */
html.vip-page .vip-text-center { text-align: center; }
html.vip-page .vip-text-gold { color: var(--vip-gold); }
html.vip-page .vip-text-secondary { color: var(--vip-text-secondary); }
html.vip-page .vip-text-muted { color: var(--vip-text-muted); }
html.vip-page .vip-fw-bold { font-weight: 600; }
html.vip-page .vip-mt-1 { margin-top: 8px; }
html.vip-page .vip-mt-2 { margin-top: 16px; }
html.vip-page .vip-mt-3 { margin-top: 24px; }
html.vip-page .vip-mb-1 { margin-bottom: 8px; }
html.vip-page .vip-mb-2 { margin-bottom: 16px; }
html.vip-page .vip-mb-3 { margin-bottom: 24px; }
html.vip-page .vip-d-flex { display: flex; }
html.vip-page .vip-flex-wrap { flex-wrap: wrap; }
html.vip-page .vip-align-center { align-items: center; }
html.vip-page .vip-justify-center { justify-content: center; }
html.vip-page .vip-justify-between { justify-content: space-between; }
html.vip-page .vip-gap-1 { gap: 8px; }
html.vip-page .vip-gap-2 { gap: 16px; }
html.vip-page .vip-gap-3 { gap: 24px; }

/* Mobile tweaks */
@media (max-width: 600px) {
    .vip-shell-header-inner { padding: 0 14px; height: 60px; }
    .vip-shell-nav a { padding: 6px 10px; font-size: 0.85rem; }
    .vip-shell-main.is-page { padding: 20px 14px; }
    .vip-shell-main.is-centered { padding: 24px 14px; }
    .vip-auth-card { padding: 24px 20px; }
    .vip-content { padding: 18px; }
    .vip-content-header { flex-direction: column; align-items: flex-start; }
    .vip-status-banner { flex-direction: column; align-items: flex-start; }
}

/* v8af27 — Mobile: simplify the brand "👑 <brand> VIP" → "👑 VIP".
   font-size:0 hides the bare brand text node; children restore size. */
@media (max-width: 768px) {
    .vip-shell-brand {
        font-size: 0 !important;
        gap: 6px !important;
    }
    .vip-shell-brand .vip-shell-crown {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
    }
    .vip-shell-brand .vip-tag {
        font-size: 0.95rem !important;
    }
}

/* ----- VIP checkout: payment-method radios + Stripe Elements card field ----- */
.vip-pay-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.vip-pay-option { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--vip-border, rgba(255,255,255,0.1)); border-radius: var(--vip-radius-md, 12px); cursor: pointer; transition: all .15s; position: relative; }
.vip-pay-option:hover { border-color: rgba(var(--gold-ffd700-rgb, 255,215,0),0.35); }
.vip-pay-option.is-active { border-color: var(--vip-gold, #ffd700); background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.06); }
.vip-pay-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.vip-pay-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(255,255,255,0.05); display: inline-flex; align-items: center; justify-content: center; color: var(--vip-gold, #ffd700); font-size: 1.1rem; flex-shrink: 0; }
.vip-pay-name { font-weight: 600; }
.vip-pay-meta { color: var(--vip-text-secondary, #a0a0b0); font-size: 0.82rem; margin-top: 2px; }
.vip-pay-form { /* container for either Stripe card field or bank instructions */ }
.vip-bank-note { color: var(--vip-text-secondary, #a0a0b0); font-size: 0.9rem; padding: 12px 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--vip-border, rgba(255,255,255,0.1)); border-radius: var(--vip-radius-md, 12px); }
/* 2026-10-01 (owner): paying for VIP with points - the checkout's points box */
.vip-points-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.vip-points-row .vip-form-input { flex: 1 1 160px; max-width: 240px; }
/* 2026-10-01 (owner): VIP automatic renewal - the switch (checkout + Membership page) and the saved card */
.vip-switch { position: relative; flex: 0 0 auto; width: 50px; height: 28px; padding: 0; border: 1px solid var(--vip-border-glow); border-radius: 999px; background: rgba(255,255,255,0.12); cursor: pointer; transition: background .2s ease; }
.vip-switch .vip-switch-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #d8d8e0; transition: transform .2s ease, background .2s ease; }
.vip-switch.is-on { background: linear-gradient(135deg, var(--vip-gold) 0%, var(--vip-gold-dark) 100%); }
.vip-switch.is-on .vip-switch-knob { transform: translateX(22px); background: #1a1a22; }
.vip-switch:focus-visible { outline: 2px solid var(--vip-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vip-switch, .vip-switch .vip-switch-knob { transition: none; } }
.vip-autorenew-row { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 14px; }
.vip-autorenew-label { color: #fff; font-weight: 600; }
.vip-autorenew-note { font-size: 0.85rem; margin-top: 4px; line-height: 1.5; }
.vip-autorenew-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--vip-border); }
.vip-autorenew-form { margin-top: 12px; }
.vip-renewal-action { display: block; }

/* Stripe Elements iframe container — needs visible padding/min-height in the dark theme */
.vip-stripe-card-element { padding: 14px 16px; min-height: 48px; }
.vip-stripe-card-element.StripeElement { background: var(--vip-bg-card, #141419); }
.vip-stripe-card-element.StripeElement--focus { border-color: var(--vip-primary, #e91e63); box-shadow: 0 0 0 3px rgba(var(--gold-ffd700-rgb, 255,215,0),0.18); }
.vip-stripe-card-errors { margin-top: 10px; display: none; }
.vip-stripe-card-errors:not(:empty) { display: block; }

/* === Privacy Mode (toggleable photo blur for VIP member centre) ===
   When html.vip-privacy-on is set (by vip-privacy-bootstrap.js reading
   localStorage), all advertiser photos in the favourites grid + history /
   contacts list thumbs get a strong blur + dim. Only photos inside
   .vip-shell-main are blurred — sidebar avatar (CSS-only initial chip),
   shell crown (emoji), and font-awesome icons are unaffected.
   Use class="vip-privacy-exempt" on any <img> that should never be blurred. */
/* Phase 5h v8f — Privacy mode covers EVERY <img> on VIP pages (sidebar
   self avatar, advertiser thumbnails, contacts/history rows, message
   conversation avatars, settings preview, favourites grid). VIP shell
   uses emoji 👑 + Font-Awesome <i> for branding/icons — there are no
   `<img>` tags in any VIP shell template — so the universal selector is
   safe. The .vip-privacy-exempt escape hatch remains for any legitimate
   UI image we add in the future (e.g. payment-gateway logos). */
html.vip-privacy-on body img:not(.vip-privacy-exempt) {
    filter: blur(25px) brightness(0.3) !important;
    transition: filter 0.3s;
}
html:not(.vip-privacy-on) .vip-grid-card-image img,
html:not(.vip-privacy-on) .vip-list-thumb img {
    transition: filter 0.3s;
}

/* Eye toggle button in the shell header */
.vip-privacy-toggle {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--vip-border);
    color: var(--vip-text-secondary);
    border-radius: 8px;
    padding: 7px 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    margin-right: 6px;
    transition: all 0.2s;
    line-height: 1;
}
.vip-privacy-toggle:hover { color: var(--vip-text-primary); border-color: rgba(var(--gold-ffd700-rgb, 255,215,0),0.4); background: rgba(255,255,255,0.1); }
.vip-privacy-toggle:focus-visible { outline: 2px solid var(--vip-gold); outline-offset: 2px; }
.vip-privacy-toggle.is-active {
    background: linear-gradient(135deg, var(--vip-gold) 0%, var(--vip-gold-dark) 100%);
    color: #1a1a22;
    border-color: var(--vip-gold);
    box-shadow: 0 4px 12px rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.25);
}

/* Toast confirmation when toggling */
.vip-privacy-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    background: rgba(20,20,30,0.96);
    border: 1px solid var(--vip-border);
    color: var(--vip-text-primary);
    padding: 11px 22px;
    border-radius: 999px;
    font-size: 0.88rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 9999;
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    white-space: nowrap;
}
.vip-privacy-toast.is-shown {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Floating "Privacy" pill — only visible when privacy mode is on */
.vip-privacy-indicator {
    display: none;
    position: fixed;
    top: 80px;
    right: 20px;
    background: linear-gradient(135deg, var(--vip-gold) 0%, var(--vip-gold-dark) 100%);
    color: #1a1a22;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    align-items: center;
    gap: 6px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.35);
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s;
}
.vip-privacy-indicator:hover { transform: translateY(-1px); }
html.vip-privacy-on .vip-privacy-indicator { display: inline-flex; }

/* === Referral & Credits page === */
.vip-wallet-card {
    background: linear-gradient(135deg, rgba(var(--gold-ffd700-rgb, 255,215,0),0.18), rgba(var(--gold-ffd700-rgb, 255,215,0),0.04));
    border: 2px solid var(--vip-gold);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}
.vip-wallet-header {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 16px; margin-bottom: 20px;
}
.vip-wallet-balance { display: flex; align-items: center; gap: 16px; }
.vip-wallet-icon {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, var(--vip-gold), var(--gold-a08020, #a08020));
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
}
.vip-wallet-amount {
    font-size: 2rem; font-weight: 700; color: var(--vip-gold); line-height: 1.1;
}
.vip-wallet-amount span { font-size: 1rem; color: var(--vip-text-secondary); font-weight: normal; }
.vip-wallet-value { color: var(--vip-text-secondary); font-size: 0.9rem; margin-top: 2px; }

.vip-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}
.vip-stat-card {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--vip-border);
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
}
.vip-stat-icon {
    width: 44px; height: 44px; margin: 0 auto 10px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
/* Stat icons unified to the gold family — keeping the .is-* variant
   classes for backwards compatibility, but all four resolve to the same
   gold-tinted look. Differentiation between cards comes from the icon
   glyph + label, not from colour. */
.vip-stat-icon.is-blue,
.vip-stat-icon.is-green,
.vip-stat-icon.is-purple,
.vip-stat-icon.is-orange {
    background: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.10);
    color: var(--vip-gold);
    border: 1px solid rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.18);
}
.vip-stat-value { font-size: 1.4rem; font-weight: 700; margin-bottom: 2px; }
.vip-stat-label { color: var(--vip-text-secondary); font-size: 0.82rem; }

/* Referral link box */
.vip-referral-linkbox { display: flex; gap: 10px; flex-wrap: wrap; }
.vip-referral-link-input {
    flex: 1 1 240px; min-width: 0;
    padding: 13px 14px;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--vip-border);
    border-radius: 10px;
    color: var(--vip-text-primary);
    font-size: 0.95rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}
.vip-referral-link-input:focus {
    outline: none;
    border-color: var(--vip-gold);
    box-shadow: 0 0 0 3px rgba(var(--gold-ffd700-rgb, 255,215,0),0.18);
}
#vipReferralCopyBtn.is-copied { background: linear-gradient(135deg, var(--vip-gold), var(--vip-gold-dark)) !important; color: #1a1a22 !important; }

/* Share buttons — unified ghost style: dark surface + gold border + white
   text. The brand-coloured background each network ships with would
   clash with the gold/dark theme; the icon glyph alone is enough cue. */
.vip-share-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.vip-share-btn {
    padding: 9px 16px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.35);
    cursor: pointer; font-weight: 600; font-size: 0.85rem;
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none; color: var(--vip-text-primary);
    transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.vip-share-btn i { color: var(--vip-gold); }
.vip-share-btn:hover {
    transform: translateY(-1px);
    background: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.08);
    border-color: var(--vip-gold);
    color: var(--vip-gold);
}
.vip-share-btn:hover i { color: var(--vip-gold); }
/* The .is-twitter/is-facebook/is-whatsapp/is-telegram/is-email variants
   keep working — they no longer override colour, just preserve the
   selector contract for any future per-network tweaks. */
.vip-share-btn.is-twitter,
.vip-share-btn.is-facebook,
.vip-share-btn.is-whatsapp,
.vip-share-btn.is-telegram,
.vip-share-btn.is-email { /* inherits unified style from .vip-share-btn */ }

/* "How it works" steps */
.vip-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}
.vip-step { text-align: center; padding: 8px 6px; }
.vip-step-num {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--vip-gold), var(--gold-a08020, #a08020));
    color: #1a1a22; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; margin: 0 auto 10px;
}
.vip-step h4 { margin: 0 0 6px; font-size: 0.96rem; color: var(--vip-text-primary); }
.vip-step p  { margin: 0; color: var(--vip-text-secondary); font-size: 0.83rem; line-height: 1.4; }

/* Reward-table pills */
.vip-reward-pill {
    display: inline-flex; width: 30px; height: 30px;
    align-items: center; justify-content: center;
    border-radius: 8px; margin-right: 10px; font-size: 13px;
    vertical-align: middle;
}
/* Reward-pill icons unified to gold (matches stat-icon family). */
.vip-reward-pill.is-green,
.vip-reward-pill.is-blue,
.vip-reward-pill.is-purple,
.vip-reward-pill.is-orange {
    background: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.12);
    color: var(--vip-gold);
}

/* My referrals avatar chip */
.vip-referral-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; font-size: 0.85rem;
}

/* Earned points and active status: use gold. Pending: same gold but tonal-down via opacity. */
.vip-text-success { color: var(--vip-gold) !important; }
.vip-text-warning { color: var(--vip-gold) !important; opacity: 0.75; }

/* Points history feed */
.vip-history-list { padding: 0; }
.vip-history-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--vip-border);
}
.vip-history-row:last-child { border-bottom: none; }
.vip-history-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex: 0 0 auto;
}
/* Earned/Spent/Pending icons all in the gold family — direction (+/-) and
   the icon glyph itself convey credit vs debit, no need for extra hue
   signal that breaks the gold/dark theme. */
.vip-history-icon.is-earned  { background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.16); color: var(--vip-gold); }
.vip-history-icon.is-spent   { background: rgba(255,255,255,0.06); color: var(--vip-text-secondary); }
.vip-history-icon.is-pending { background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.08); color: var(--vip-gold); opacity: 0.75; }
.vip-history-meta { flex: 1; min-width: 0; }
.vip-history-title { font-size: 0.92rem; color: var(--vip-text-primary); margin-bottom: 2px; }
.vip-history-time  { font-size: 0.78rem; }
.vip-history-amount { font-weight: 700; flex: 0 0 auto; font-size: 0.95rem; }
.vip-history-amount.is-positive { color: var(--vip-gold); }
.vip-history-amount.is-negative { color: var(--vip-text-secondary); }
.vip-history-amount.is-pending  { color: var(--vip-gold); opacity: 0.75; }

@media (max-width: 600px) {
    .vip-wallet-header { flex-direction: column; align-items: flex-start; }
    .vip-referral-linkbox { flex-direction: column; }
    .vip-share-buttons { justify-content: flex-start; }
}

/* === Favourites toolbar (search + browse) === */
.vip-fav-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.vip-fav-search {
    flex: 1 1 240px;
    position: relative;
    min-width: 0;
}
.vip-fav-search > i.fas {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vip-text-secondary);
    font-size: 0.95rem;
    pointer-events: none;
}
.vip-fav-search input[type="search"] {
    width: 100%;
    padding: 12px 40px 12px 40px;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--vip-border);
    border-radius: 10px;
    color: var(--vip-text-primary);
    font-size: 0.95rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    /* Browsers add a default decorative clear (X). We render our own. */
    -webkit-appearance: none;
    appearance: none;
}
.vip-fav-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.vip-fav-search input[type="search"]:focus {
    outline: none;
    border-color: var(--vip-gold);
    box-shadow: 0 0 0 3px rgba(var(--gold-ffd700-rgb, 255,215,0),0.18);
}
.vip-fav-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--vip-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.vip-fav-search-clear:hover {
    background: rgba(255,255,255,0.08);
    color: var(--vip-text-primary);
}

/* Card wrapper: makes the remove button positionable without nesting it
   inside the anchor (nested-interactive HTML is invalid). */
.vip-grid-card-wrap {
    position: relative;
}
.vip-grid-card-wrap.is-removing {
    opacity: 0.4;
    transition: opacity 0.2s;
    pointer-events: none;
}

/* Remove (heart-broken) button overlay */
.vip-fav-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(20,20,30,0.85);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--vip-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 5;
    backdrop-filter: blur(4px);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.vip-fav-remove:hover {
    background: linear-gradient(135deg, var(--vip-gold), var(--vip-gold-dark));
    color: #1a1a22;
    border-color: var(--vip-gold);
    transform: scale(1.05);
}
.vip-fav-remove:focus-visible {
    outline: 2px solid var(--vip-gold);
    outline-offset: 2px;
}

/* "What VIP unlocks" feature pill — gold-tinted card with checkmark.
   Replaces 6 inline styles in membership.html that previously used
   rgba(76,175,80,…) green pills. */
.vip-feature-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.06);
    border: 1px solid rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.2);
    border-radius: 8px;
    color: var(--vip-text-primary);
    font-size: 0.92rem;
}
.vip-feature-pill > i.fas {
    color: var(--vip-gold);
    font-size: 1rem;
    flex: 0 0 auto;
}

/* === Settings page === */

/* Disabled-but-readable form fields (Email + Member-since) */
.vip-form-input[disabled],
.vip-form-input[readonly] {
    background: rgba(255,255,255,0.03);
    color: var(--vip-text-secondary);
    cursor: not-allowed;
}

/* Toggle row: label + description on the left, switch on the right */
.vip-toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--vip-border);
}
.vip-toggle-group:last-child { border-bottom: none; }
.vip-toggle-info { flex: 1; min-width: 0; }
.vip-toggle-info h4 { font-size: 0.95rem; margin: 0 0 4px; color: var(--vip-text-primary); }
.vip-toggle-info p { color: var(--vip-text-secondary); font-size: 0.85rem; margin: 0; line-height: 1.5; }
.vip-toggle-info p a { color: var(--vip-gold); text-decoration: underline; }

/* iOS-style switch tinted gold */
.vip-toggle-switch {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
    display: inline-block;
}
.vip-toggle-switch input {
    opacity: 0; width: 0; height: 0; position: absolute; pointer-events: none;
}
.vip-toggle-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: rgba(255,255,255,0.12);
    border: 1px solid var(--vip-border);
    border-radius: 28px;
    transition: background 0.25s, border-color 0.25s;
}
.vip-toggle-slider::before {
    content: "";
    position: absolute;
    height: 22px; width: 22px;
    left: 2px; bottom: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    transition: transform 0.25s, background 0.25s;
}
.vip-toggle-switch input:checked + .vip-toggle-slider {
    background: linear-gradient(135deg, var(--vip-gold), var(--vip-gold-dark));
    border-color: var(--vip-gold);
}
.vip-toggle-switch input:checked + .vip-toggle-slider::before {
    transform: translateX(24px);
    background: #1a1a22;
}
.vip-toggle-switch input:focus-visible + .vip-toggle-slider {
    box-shadow: 0 0 0 3px rgba(var(--gold-ffd700-rgb, 255,215,0),0.25);
}

/* Password strength meter */
.vip-pwd-strength {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}
.vip-pwd-strength-bar {
    height: 100%;
    width: 0;
    transition: width 0.3s, background 0.3s;
    background: var(--vip-text-muted);
}
.vip-pwd-strength-bar.is-weak   { width: 33%;  background: #b86060; }
.vip-pwd-strength-bar.is-medium { width: 66%;  background: var(--gold-dark, #c9a227); }
.vip-pwd-strength-bar.is-strong { width: 100%; background: var(--vip-gold); }

/* Danger Zone — semantic red allowed because it's a destructive-action UX */
.vip-card-danger {
    background: var(--vip-bg-card);
    border: 1px solid rgba(244,67,54,0.35);
    border-radius: 16px;
    padding: 0;
    margin-bottom: 24px;
}
.vip-card-danger .vip-card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--vip-border);
}
.vip-card-danger .vip-card-header h3 { margin: 0; color: #f87171; display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.vip-card-danger .vip-card-header h3 i { color: #f87171; }
.vip-card-danger .vip-card-body { padding: 6px 24px 18px; }

.vip-btn-danger {
    background: #b6322a;
    color: #fff;
    border: 1px solid #b6322a;
    padding: 9px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s, border-color 0.15s;
}
.vip-btn-danger:hover { background: #d94a3f; border-color: #d94a3f; color: #fff; }

.vip-btn-danger-outline {
    background: transparent;
    color: #f87171;
    border: 1px solid rgba(244,67,54,0.5);
    padding: 9px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.vip-btn-danger-outline:hover { background: rgba(244,67,54,0.1); border-color: #f87171; }
.vip-btn-danger-outline::-webkit-details-marker { display: none; }

/* Inline confirm form revealed by <details> */
.vip-danger-details { flex-shrink: 0; }
.vip-danger-details[open] > .vip-btn-danger-outline { background: rgba(244,67,54,0.12); border-color: #f87171; }
.vip-danger-confirm {
    margin-top: 12px;
    padding: 14px;
    background: rgba(244,67,54,0.05);
    border: 1px solid rgba(244,67,54,0.2);
    border-radius: 10px;
    min-width: 280px;
}
.vip-danger-confirm .vip-form-label { color: var(--vip-text-primary); font-size: 0.85rem; }
.vip-danger-confirm .vip-form-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

@media (max-width: 600px) {
    .vip-toggle-group { flex-direction: column; align-items: flex-start; }
    .vip-danger-confirm { min-width: 0; width: 100%; }
}

/* === Phase 5 — VIP messaging === */

/* Sidebar unread badge — small red pill next to "My messages" */
.vip-sidebar-badge {
    display: inline-block;
    min-width: 20px; padding: 1px 7px;
    margin-left: 6px;
    background: linear-gradient(135deg, #f44336, #c62828);
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-align: center; line-height: 18px;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.4);
}

/* Page wrap: list-only OR split (thread list left + conversation right) */
.vip-msg-page { padding: 0; overflow: hidden; }
.vip-msg-page.is-list-only .vip-msg-thread-pane { padding: 8px 12px; }
.vip-msg-page.is-split {
    display: grid; grid-template-columns: minmax(280px, 320px) 1fr;
    min-height: 560px;
}
@media (max-width: 900px) {
    .vip-msg-page.is-split { grid-template-columns: 1fr; min-height: 0; }
    .vip-msg-page.is-split .vip-msg-thread-pane { display: none; }
}

.vip-msg-thread-pane {
    border-right: 1px solid rgba(var(--gold-ffd700-rgb, 255,215,0),0.12);
    overflow-y: auto;
    max-height: 70vh;
}
.vip-msg-thread-list { list-style: none; padding: 4px 0; margin: 0; }
.vip-msg-thread-item a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--vip-text-primary, #fff);
    text-decoration: none;
    transition: background 0.12s;
}
.vip-msg-thread-item a:hover { background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.05); text-decoration: none; }
.vip-msg-thread-item.is-active a { background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.10); }
.vip-msg-avatar {
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-ffd700, #ffd700), var(--gold-dark, #c9a227));
    color: #1a1a22;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.95rem;
    overflow: hidden;
}
.vip-msg-avatar.is-lg { width: 44px; height: 44px; flex: 0 0 44px; font-size: 1.05rem; }
/* Phase 5h v8 — Settings page avatar block */
.vip-avatar-row {
    display: flex; align-items: center; gap: 24px;
    flex-wrap: wrap;
}
.vip-avatar-preview { flex: 0 0 auto; }
.vip-avatar-form { flex: 1 1 280px; min-width: 0; }
.vip-avatar-circle {
    width: 120px; height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-ffd700, #ffd700), var(--gold-dark, #c9a227));
    color: #1a1a22;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 2.4rem;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
    border: 2px solid rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.45);
}
.vip-avatar-circle.has-photo { background: #1a1a22; }
.vip-avatar-circle img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.vip-avatar-form .vip-btn { margin-right: 8px; }
/* Phase 5h v8 — `hidden` HTML attr is being overridden by .vip-btn's
   inline-flex display rule, so force the native semantics back. */
.vip-avatar-form [hidden] { display: none !important; }
.vip-avatar-status {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
}
.vip-avatar-status.is-info    { background: rgba(33,150,243,0.15); color: #90caf9; }
.vip-avatar-status.is-success { background: rgba(76,175,80,0.15);  color: #a5d6a7; }
.vip-avatar-status.is-error   { background: rgba(244,67,54,0.15);  color: #ef9a9a; }

/* Phase 5h v8 — when an actual profile thumbnail is available we drop the
   gold gradient and stretch a circular <img> across the entire avatar. */
.vip-msg-avatar.has-photo { background: #1a1a22; }
.vip-msg-avatar.has-photo > img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Same treatment for bubble-side mini avatars */
.vip-msg-bubble-avatar.has-photo { background: #1a1a22; padding: 0; overflow: hidden; }
.vip-msg-bubble-avatar.has-photo > img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.vip-msg-thread-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vip-msg-thread-line1, .vip-msg-thread-line2 {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.vip-msg-thread-name { font-weight: 600; color: var(--vip-text-primary, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vip-msg-thread-time { color: var(--vip-text-secondary, #9aa); font-size: 0.72rem; flex-shrink: 0; }
.vip-msg-thread-snippet { color: var(--vip-text-secondary, #9aa); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vip-msg-unread {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #f44336, #c62828);
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    padding: 1px 7px; min-width: 20px;
    text-align: center; line-height: 18px;
}

/* Conversation pane */
.vip-msg-conversation-pane {
    display: flex; flex-direction: column;
    min-height: 560px; max-height: 70vh;
    flex: 1 1 auto;  /* v8af31 — fill parent so composer sits at bottom even when empty */
}
.vip-msg-conversation-header {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(var(--gold-ffd700-rgb, 255,215,0),0.12);
    background: rgba(0,0,0,0.2);
}
.vip-msg-conversation-name { font-weight: 700; color: var(--vip-text-primary, #fff); }

.vip-msg-stream {
    flex: 1; overflow-y: auto;
    padding: 18px;
    display: flex; flex-direction: column; gap: 8px;
    background: rgba(0,0,0,0.18);
}
.vip-msg-empty { padding: 36px 24px; text-align: center; color: var(--vip-text-secondary, #9aa); }

/* Bubble = flex row [avatar?] [body]. Body carries the colored background
   so the avatar can sit OUTSIDE the bubble visually while still being
   logically grouped with it (same data-message-id wrapper). */
.vip-msg-bubble {
    max-width: 75%;
    display: flex; align-items: flex-end; gap: 8px;
    line-height: 1.45;
    word-break: break-word;
}
.vip-msg-bubble.is-mine   { align-self: flex-end; }
.vip-msg-bubble.is-theirs { align-self: flex-start; }

.vip-msg-bubble-body {
    padding: 10px 14px;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    min-width: 0;        /* allow flex item to shrink + wrap long words */
    flex: 0 1 auto;
}
.vip-msg-bubble.is-mine .vip-msg-bubble-body {
    background: linear-gradient(135deg, var(--gold-ffd700, #ffd700), var(--gold-dark, #c9a227));
    color: #1a1a22;
    border-bottom-right-radius: 4px;
}
.vip-msg-bubble.is-theirs .vip-msg-bubble-body {
    background: rgba(255,255,255,0.08);
    color: var(--vip-text-primary, #fff);
    border-bottom-left-radius: 4px;
}

/* Inline avatar circle that sits left of every "is-theirs" bubble. */
.vip-msg-bubble-avatar {
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-ffd700, #ffd700), var(--gold-dark, #c9a227));
    color: #1a1a22;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.82rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.vip-msg-content { font-size: 0.9rem; }
.vip-msg-meta    { font-size: 0.7rem; opacity: 0.7; margin-top: 4px; }
.vip-msg-bubble.is-mine .vip-msg-meta { color: rgba(26,26,34,0.7); }

/* Composer */
.vip-msg-composer {
    display: flex; gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid rgba(var(--gold-ffd700-rgb, 255,215,0),0.12);
    background: rgba(0,0,0,0.25);
    margin-top: auto;   /* v8af31 — always push to bottom even when stream is empty */
    flex-shrink: 0;      /* never compress the composer */
}
.vip-msg-composer textarea {
    flex: 1;
    background: rgba(255,255,255,0.05);
    color: var(--vip-text-primary, #fff);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: inherit; font-size: 0.9rem;
    resize: none;
    min-height: 44px; max-height: 120px;
}
.vip-msg-composer textarea:focus {
    outline: none;
    border-color: rgba(var(--gold-ffd700-rgb, 255,215,0),0.45);
    box-shadow: 0 0 0 3px rgba(var(--gold-ffd700-rgb, 255,215,0),0.12);
}
.vip-msg-composer textarea[disabled] { opacity: 0.55; cursor: not-allowed; }
.vip-msg-composer button { flex-shrink: 0; align-self: flex-end; }

/* ============================================================
   VIP Conversation page: 3-pane fixed-viewport layout (?v=p5b3)
   ------------------------------------------------------------
   Controller flips this on by setting shell_main_class to
   "vip-msg-conversation-page" so <main class="vip-shell-main
   vip-msg-conversation-page"> tells CSS to lock the viewport.
   Three INDEPENDENT scroll zones, body never scrolls:
     1. Left sidebar (avatar + nav)        — fixed, no scroll
     2. Middle thread list (.vip-msg-thread-pane) — independent y-scroll
     3. Right conversation pane:
        a. partner header                  — fixed
        b. message stream (.vip-msg-stream) — independent y-scroll
        c. composer                        — fixed at bottom
   The .vip-shell-header (70px) stays sticky above this locked area.
   ============================================================ */
:root.vip-page { --vip-shell-header-h: 71px; }
html.vip-page:has(main.vip-msg-conversation-page),
html.vip-page:has(main.vip-msg-conversation-page) body {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    margin: 0;                    /* override default 8px body margin */
}

@media (min-width: 901px) {
    /* Lock the outer shell so flex children can't push beyond the viewport. */
    html.vip-page:has(main.vip-msg-conversation-page) .vip-shell {
        height: 100vh;
        max-height: 100vh;
        min-height: 0;             /* override the default min-height: 100vh that lets it grow */
        overflow: hidden;
    }
    /* Lock the main area to the viewport below the sticky shell header. */
    main.vip-shell-main.vip-msg-conversation-page {
        height: calc(100vh - var(--vip-shell-header-h));
        max-height: calc(100vh - var(--vip-shell-header-h));
        min-height: 0;
        flex: 0 0 auto;            /* override flex:1 from .vip-shell-main; we control its size */
        max-width: none;
        padding: 0;
        overflow: hidden;
        display: flex;             /* let .vip-dashboard stretch */
        flex-direction: column;
    }
    main.vip-msg-conversation-page > .vip-dashboard {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
        gap: 0;
    }
    /* Sidebar: fixed, no scroll under normal load (still allow scroll if the
       account has long sub-nav). */
    main.vip-msg-conversation-page > .vip-dashboard > .vip-sidebar {
        height: 100%;
        overflow-y: auto;
    }
    /* Content column: flex column with fixed h1 header + flex-grow card. */
    main.vip-msg-conversation-page > .vip-dashboard > .vip-content {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 16px;
    }
    main.vip-msg-conversation-page .vip-content > .vip-content-header {
        flex: 0 0 auto;
        margin-bottom: 12px;
    }
    main.vip-msg-conversation-page .vip-form-error,
    main.vip-msg-conversation-page .vip-mb-2 {
        flex: 0 0 auto;
    }
    /* The card containing 2-pane split (thread list + conversation). */
    main.vip-msg-conversation-page .vip-msg-page.is-split {
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
        height: auto;
    }
    /* Pane 2 — thread list, independent scroll */
    main.vip-msg-conversation-page .vip-msg-thread-pane {
        max-height: 100%;
        height: 100%;
        overflow-y: auto;          /* THIS is the only scroller in pane 2 */
    }
    /* Pane 3 — conversation: fixed header, scrolling stream, fixed composer */
    main.vip-msg-conversation-page .vip-msg-conversation-pane {
        height: 100%;
        max-height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    main.vip-msg-conversation-page .vip-msg-conversation-header {
        flex: 0 0 auto;            /* locked at top */
    }
    main.vip-msg-conversation-page .vip-msg-stream {
        flex: 1 1 auto;
        min-height: 0;             /* lets the flex child shrink so overflow kicks in */
        max-height: none;          /* override the original 70vh cap */
        overflow-y: auto;          /* THIS is the only scroller in pane 3 */
    }
    main.vip-msg-conversation-page .vip-msg-composer {
        flex: 0 0 auto;            /* locked at bottom */
    }
}

/* === Phase 5d — message retention banner ===
   Top of /vip/account/messages list. Three flavours:
     .is-free      → soft amber, "Upgrade for longer history" CTA
     .is-vip       → gold tint, "X days · Upgrade for longer" CTA
     .is-permanent → infinity glyph, no CTA
   Sits between the page header and the thread list card. */
.vip-msg-retention-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    margin: 0 0 16px;
    border: 1px solid rgba(var(--gold-ffd700-rgb, 255,215,0),0.18);
    border-radius: var(--vip-radius-lg);
    background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.05);
    color: var(--vip-text-primary);
    font-size: 0.9rem;
}
.vip-msg-retention-banner > i { font-size: 1.1rem; flex-shrink: 0; color: var(--vip-gold); }
.vip-msg-retention-banner .vip-msg-retention-text { flex: 1; min-width: 0; }
.vip-msg-retention-banner .vip-msg-retention-cta {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--vip-gold), var(--vip-gold-dark));
    color: #1a1a22 !important;
    font-weight: 700; font-size: 0.82rem;
    text-decoration: none;
    transition: filter 0.2s, transform 0.2s;
}
.vip-msg-retention-banner .vip-msg-retention-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.vip-msg-retention-banner.is-free {
    background: rgba(255, 152, 0, 0.10);
    border-color: rgba(255, 152, 0, 0.35);
}
.vip-msg-retention-banner.is-free > i { color: #ff9800; }
.vip-msg-retention-banner.is-vip {
    background: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.07);
    border-color: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.28);
}
.vip-msg-retention-banner.is-permanent {
    background: rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.30);
}
.vip-msg-retention-banner.is-permanent > i { color: #4caf50; }
@media (max-width: 600px) {
    .vip-msg-retention-banner { flex-wrap: wrap; }
    .vip-msg-retention-banner .vip-msg-retention-cta { width: 100%; justify-content: center; }
}

/* === Phase 5e — Contact History demo-style table === */
.vip-contacts-card { overflow: hidden; }
.vip-contacts-table {
    width: 100%; border-collapse: collapse;
    color: var(--vip-text-primary, #fff);
    font-size: 0.92rem;
}
.vip-contacts-table th,
.vip-contacts-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    vertical-align: middle;
    text-align: left;
}
.vip-contacts-table thead th {
    background: rgba(255,255,255,0.03);
    color: var(--vip-text-secondary, #aaa);
    font-weight: 600; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.vip-contacts-table tbody tr:hover { background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.04); }
.vip-contacts-table tbody tr:last-child td { border-bottom: none; }
.vip-contacts-table .col-actions { text-align: right; white-space: nowrap; }
/* Phase 5h v8 — Send message CTA in the contacts table replaces the old
   "Contact details" duplicate-of-masked-data column. Compact gold pill so
   it stays scannable across long rows. */
.vip-contacts-table .vip-contacts-msg-btn {
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap; font-weight: 600;
}
.vip-contacts-table .vip-contacts-msg-btn i { font-size: 0.85em; }

/* Provider cell: avatar + name stack */
.vip-contacts-provider {
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
}
.vip-contacts-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(var(--gold-ffd700-rgb, 255,215,0),0.3);
}
.vip-contacts-avatar.is-fallback {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(var(--gold-ffd700-rgb, 255,215,0),0.3), rgba(var(--gold-dark-rgb, 201,162,39),0.3));
    color: var(--vip-gold, #ffd700);
    font-weight: 700;
}
.vip-contacts-provider-text { min-width: 0; }
.vip-contacts-name {
    color: var(--vip-text-primary, #fff) !important;
    font-weight: 600;
    text-decoration: none;
}
.vip-contacts-name:hover { color: var(--vip-gold, #ffd700) !important; }
.vip-contacts-location {
    color: var(--vip-text-muted, #888);
    font-size: 0.78rem;
    margin-top: 2px;
}

/* Type badge — colour-coded by account type */
.vip-contacts-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(255,255,255,0.08);
    color: var(--vip-text-primary, #fff);
}
.vip-contacts-badge.is-independent  { background: rgba(76, 175, 80, 0.2);  color: #4caf50; }
.vip-contacts-badge.is-agency       { background: rgba(33, 150, 243, 0.2); color: #2196f3; }
.vip-contacts-badge.is-establishment{ background: rgba(156, 39, 176, 0.2); color: #ce93d8; }

/* Contact details list */
.vip-contacts-details {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 0.85rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--vip-text-primary, #fff);
}
.vip-contacts-detail i { width: 14px; text-align: center; margin-right: 4px; }
.vip-text-info { color: #2196f3 !important; }
.vip-text-success { color: #4caf50 !important; }
.vip-text-muted { color: var(--vip-text-muted, #888) !important; }

.vip-contacts-viewed {
    color: var(--vip-text-muted, #888);
    font-size: 0.82rem;
    white-space: nowrap;
}

/* Action buttons inside the table */
.vip-btn-xs {
    padding: 4px 10px; font-size: 0.72rem;
    border-radius: 6px;
}

/* Mobile: stack each row into a card */
@media (max-width: 800px) {
    .vip-contacts-table thead { display: none; }
    .vip-contacts-table tbody tr {
        display: block;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        padding: 14px 0;
    }
    .vip-contacts-table tbody td {
        display: block;
        border: none;
        padding: 4px 16px;
    }
    .vip-contacts-table tbody td.col-actions { text-align: left; padding-top: 8px; }
}

/* End Phase 5e Contact History */

/* === Phase 5h — messaging quota / await-reply / limit modal ===
   Three UI surfaces:
     1. .vip-msg-quota-banner  — top of /vip/account/messages list page
        showing "Free account: X/3 used today" with Upgrade CTA
     2. .vip-msg-await-banner  — inline banner above composer when the
        consumer must wait for the advertiser to reply
     3. .vip-msg-limit-modal   — overlay shown when /api/vip/messages/send
        returns 429 DailyLimitReached
*/

/* --- 1. quota banner --- */
.vip-msg-quota-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    margin: 0 0 16px;
    border: 1px solid rgba(var(--gold-ffd700-rgb, 255,215,0),0.18);
    border-radius: var(--vip-radius-lg);
    background: rgba(var(--gold-ffd700-rgb, 255,215,0),0.05);
    color: var(--vip-text-primary);
    font-size: 0.9rem;
}
.vip-msg-quota-banner > i { font-size: 1.05rem; flex-shrink: 0; color: var(--vip-gold); }
.vip-msg-quota-banner .vip-msg-quota-text { flex: 1; min-width: 0; }
.vip-msg-quota-banner .vip-msg-quota-cta {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--vip-gold), var(--vip-gold-dark));
    color: #1a1a22 !important;
    font-weight: 700; font-size: 0.82rem;
    text-decoration: none;
    transition: filter .2s, transform .2s;
}
.vip-msg-quota-banner .vip-msg-quota-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.vip-msg-quota-banner.is-free   { background: rgba(33,150,243,0.06); border-color: rgba(33,150,243,0.30); }
.vip-msg-quota-banner.is-free > i { color: #2196f3; }
.vip-msg-quota-banner.is-warn   {
    background: rgba(244,67,54,0.10);
    border-color: rgba(244,67,54,0.40);
}
.vip-msg-quota-banner.is-warn > i { color: #f44336; }

/* --- 2. await-reply banner inline above composer --- */
.vip-msg-await-banner {
    display: flex; align-items: center; gap: 10px;
    margin: 0;
    padding: 10px 16px;
    background: rgba(255,152,0,0.08);
    border-top: 1px solid rgba(255,152,0,0.30);
    color: var(--vip-text-primary);
    font-size: 0.88rem;
    font-style: italic;
}
.vip-msg-await-banner > i { color: #ff9800; }
/* Composer dimming when locked */
.vip-msg-composer.is-awaiting-reply {
    opacity: 0.7;
}
.vip-msg-composer.is-awaiting-reply textarea {
    cursor: not-allowed;
    background: rgba(255,255,255,0.03);
}

/* --- 3. limit-reached modal --- */
.vip-msg-limit-dimmer {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 9998;
    backdrop-filter: blur(2px);
    animation: vipMsgFadeIn .2s ease-out;
}
.vip-msg-limit-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: min(420px, 92vw);
    background: var(--vip-bg-card);
    border: 1px solid rgba(var(--gold-ffd700-rgb, 255,215,0),0.30);
    border-radius: var(--vip-radius-lg);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(var(--gold-ffd700-rgb, 255,215,0),0.15);
    padding: 28px 28px 24px;
    text-align: center;
    color: var(--vip-text-primary);
    animation: vipMsgPopIn .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vip-msg-limit-modal h3 {
    margin: 12px 0 8px;
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: var(--vip-text-primary);
}
.vip-msg-limit-modal p {
    margin: 0 0 18px;
    color: var(--vip-text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
}
.vip-msg-limit-modal .vip-msg-limit-icon {
    width: 56px; height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(244,67,54,0.18), rgba(244,67,54,0.32));
    display: inline-flex; align-items: center; justify-content: center;
    color: #f44336;
    font-size: 1.4rem;
}
.vip-msg-limit-modal .vip-msg-limit-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--vip-gold), var(--vip-gold-dark));
    color: #1a1a22 !important;
    font-weight: 700; font-size: 0.92rem;
    text-decoration: none;
    transition: filter .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(var(--gold-ffd700-rgb, 255,215,0),0.30);
}
.vip-msg-limit-modal .vip-msg-limit-cta:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--gold-ffd700-rgb, 255,215,0),0.45);
}
.vip-msg-limit-modal .vip-msg-limit-close {
    position: absolute;
    top: 10px; right: 14px;
    background: none; border: none;
    color: var(--vip-text-muted);
    font-size: 1.5rem; line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
.vip-msg-limit-modal .vip-msg-limit-close:hover { color: var(--vip-text-primary); }

@keyframes vipMsgFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vipMsgPopIn  { from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* === Phase 5h — register-page profile context hint === */
.vip-register-context-hint {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    margin: 0 0 18px;
    background: linear-gradient(135deg, rgba(var(--gold-ffd700-rgb, 255,215,0),0.08), rgba(255,192,80,0.05));
    border: 1px solid rgba(var(--gold-ffd700-rgb, 255,215,0),0.30);
    border-radius: var(--vip-radius-lg);
    color: var(--vip-text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
}
.vip-register-context-hint > i {
    flex-shrink: 0;
    color: var(--vip-gold);
    font-size: 1.15rem;
    margin-top: 1px;
}
.vip-register-context-hint strong { color: var(--vip-gold); }

/* End vip-pages.css */