/* Clubs Phase 0 mock-ups (clubs-preview.php): sample data only, staging. Dark carbon + Motor Mania red. */
.cp { --bg:#0a0a0f; --p1:#141a23; --p2:#1b2430; --line:rgba(255,255,255,.1); --tx:#f4f6f8; --mu:#a7b0bd; --red:#dd1a22; --gold:#e8b84a; position:relative; background:var(--bg); color:var(--tx); font-size:15px; padding-bottom:90px; overflow:hidden; }
.cp * { box-sizing:border-box; }
.cp a { text-decoration:none !important; }
.cp::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 30% at 85% 0%, rgba(221,26,34,.28), transparent 70%); }
.cp .wrap { position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 16px; }
.cp h1,.cp h2,.cp h3,.cp h4 { color:#fff !important; text-transform:none; letter-spacing:0; margin:0; }
.cp p { text-align:start; margin:0; }
.cp .mu { color:var(--mu); }
/* mock-up switcher */
.cp-bar { position:relative; z-index:2; background:#000; border-bottom:1px solid var(--line); padding:10px 16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; font-size:13px; }
.cp-bar b { color:#ff8a90; letter-spacing:.1em; text-transform:uppercase; font-size:11.5px; margin-inline-end:8px; }
.cp-bar a { color:#cfd3da; border:1px solid var(--line); padding:6px 14px; border-radius:999px; }
.cp-bar a.on { background:var(--red); border-color:var(--red); color:#fff; }
/* buttons, chips */
.cp .btn-r { display:inline-flex; align-items:center; gap:8px; background:var(--red); color:#fff !important; font-weight:800; font-size:14px; padding:11px 22px; border-radius:12px; border:0; box-shadow:0 12px 24px -12px rgba(221,26,34,.9); }
.cp .btn-g { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.07); color:#fff !important; font-weight:700; font-size:14px; padding:10px 18px; border-radius:12px; border:1px solid var(--line); }
.cp .chip { display:inline-block; border:1px solid var(--line); color:#cfd3da; padding:7px 14px; border-radius:999px; font-size:13px; background:rgba(255,255,255,.03); }
.cp .chip.on { background:rgba(221,26,34,.18); border-color:rgba(255,90,97,.6); color:#ff8a90; }
.cp .tag { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#ff8a90; }
.cp .ver { color:#5fd38d; }
/* hero (list) */
.cp .cp-hero { padding:165px 16px 28px; }
.cp-hero h1 { font-size:clamp(32px,5vw,58px); font-weight:800; line-height:1.05; max-width:760px; margin:14px 0 12px; }
.cp-hero p { max-width:600px; font-size:16.5px; color:var(--mu); }
.cp-search { display:flex; gap:10px; margin:24px 0 14px; max-width:720px; flex-wrap:wrap; }
.cp-search div { flex:1 1 280px; background:var(--p1); border:1px solid var(--line); border-radius:14px; padding:14px 18px; color:var(--mu); }
.cp-chips { display:flex; flex-wrap:wrap; gap:8px; }
.cp-sec { display:flex; justify-content:space-between; align-items:end; margin:38px 0 14px; gap:12px; }
.cp-sec h2 { font-size:22px; font-weight:800; }
.cp-sec a { color:#ff8a90; font-size:13.5px; font-weight:700; }
/* club cards */
.cp-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.cp-club { background:var(--p1); border:1px solid var(--line); border-radius:20px; overflow:hidden; display:block; color:inherit; transition:transform .2s, border-color .2s; }
.cp-club:hover { transform:translateY(-3px); border-color:rgba(255,90,97,.5); }
.cp-club .cv { height:130px; background-size:cover; background-position:center; position:relative; }
.cp-club .cv::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,15,0) 30%,rgba(20,26,35,1)); }
.cp-club .lg { position:absolute; z-index:1; left:16px; bottom:-22px; width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,#ff5a3d,#dd1a22); color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; border:3px solid var(--p1); font-size:18px; }
.cp-club .bd { padding:30px 16px 16px; }
.cp-club h3 { font-size:17px; font-weight:800; margin-bottom:4px; }
.cp-club .meta { color:var(--mu); font-size:13px; margin-bottom:10px; }
.cp-club .row { display:flex; justify-content:space-between; align-items:center; color:var(--mu); font-size:13px; }
.cp-club .pill { background:rgba(221,26,34,.16); color:#ff8a90; border-radius:999px; padding:4px 10px; font-weight:700; font-size:12px; }
/* league strip */
.cp-league { background:linear-gradient(135deg,rgba(221,26,34,.2),rgba(20,26,35,.9)); border:1px solid rgba(255,90,97,.35); border-radius:22px; padding:22px; display:grid; grid-template-columns:1.1fr 1fr; gap:22px; align-items:center; }
.cp-league ol { margin:0; padding:0; list-style:none; }
.cp-league li { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-weight:700; }
.cp-league li:last-child { border:0; }
.cp-league li span:first-child { color:var(--gold); margin-inline-end:10px; }
/* club page */
.cp-cover { height:300px; background-size:cover; background-position:center; position:relative; }
.cp-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,15,.2),#0a0a0f); }
.cp-head { position:relative; z-index:2; margin-top:-80px; display:flex; flex-wrap:wrap; gap:20px; align-items:flex-end; }
.cp-head .lg { width:112px; height:112px; border-radius:26px; background:linear-gradient(135deg,#ff5a3d,#dd1a22); border:5px solid var(--bg); display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:900; color:#fff; }
.cp-head .tt { flex:1 1 320px; }
.cp-head h1 { font-size:clamp(26px,3.6vw,40px); font-weight:800; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cp-head .acts { display:flex; gap:10px; flex-wrap:wrap; }
.cp-stats { display:flex; flex-wrap:wrap; gap:26px; margin:16px 0 4px; }
.cp-stats b { display:block; font-size:22px; color:#fff; }
.cp-stats span { color:var(--mu); font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; }
.cp-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:22px 0 22px; overflow-x:auto; }
.cp-tabs a { color:var(--mu); padding:12px 16px; font-weight:700; white-space:nowrap; border-bottom:3px solid transparent; }
.cp-tabs a.on { color:#fff; border-color:var(--red); }
.cp-cols { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start; }
.cp-box { background:var(--p1); border:1px solid var(--line); border-radius:20px; padding:18px; margin-bottom:18px; }
.cp-box h4 { font-size:15px; font-weight:800; margin-bottom:12px; text-transform:uppercase; letter-spacing:.06em; }
.cp-post .who { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.cp-av { width:42px; height:42px; border-radius:50%; background:var(--p2); border:2px solid var(--red); display:flex; align-items:center; justify-content:center; font-weight:800; flex:0 0 auto; }
.cp-post .ph { height:260px; border-radius:14px; background-size:cover; background-position:center; margin:12px 0; }
.cp-post .act { display:flex; gap:20px; color:var(--mu); font-size:13.5px; }
.cp-ev { display:flex; gap:14px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.cp-ev:last-child { border:0; }
.cp-date { width:54px; text-align:center; background:var(--p2); border-radius:12px; padding:6px 0; flex:0 0 auto; }
.cp-date b { display:block; font-size:20px; color:#fff; line-height:1.1; }
.cp-date span { font-size:11px; color:#ff8a90; text-transform:uppercase; font-weight:800; }
.cp-spons { display:flex; gap:8px; flex-wrap:wrap; }
.cp-spons span { background:var(--p2); border:1px solid var(--line); padding:8px 12px; border-radius:10px; font-weight:700; font-size:13px; }
.cp-box ul { margin:0; padding-inline-start:18px; color:var(--mu); }
.cp-box li { margin-bottom:6px; }
/* garage card */
.cp-gar { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px; padding-top:130px; }
.cp-card { background:linear-gradient(180deg,#1b2430,#10151c); border:1px solid rgba(255,255,255,.14); border-radius:26px; overflow:hidden; box-shadow:0 40px 80px -40px #000; }
.cp-card .ph { height:340px; background-size:cover; background-position:center; position:relative; }
.cp-card .ph::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,#10151c); }
.cp-card .ph .own { position:absolute; z-index:1; left:18px; bottom:16px; display:flex; gap:10px; align-items:center; }
.cp-card .bd { padding:6px 22px 22px; }
.cp-card h1 { font-size:28px; font-weight:800; }
.cp-spec { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0; }
.cp-spec div { background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:12px; padding:10px; text-align:center; }
.cp-spec b { display:block; font-size:17px; color:#fff; }
.cp-spec span { font-size:11px; color:var(--mu); text-transform:uppercase; letter-spacing:.07em; }
.cp-badges { display:flex; gap:8px; flex-wrap:wrap; }
.cp-badges span { background:rgba(232,184,74,.12); border:1px solid rgba(232,184,74,.4); color:var(--gold); border-radius:999px; padding:5px 12px; font-size:12.5px; font-weight:700; }
.cp-line { position:relative; padding-inline-start:26px; }
.cp-line::before { content:""; position:absolute; inset-inline-start:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--red),rgba(221,26,34,.1)); }
.cp-step { position:relative; margin-bottom:20px; }
.cp-step::before { content:""; position:absolute; inset-inline-start:-26px; top:4px; width:16px; height:16px; border-radius:50%; background:var(--red); border:3px solid var(--bg); }
.cp-step .d { color:#ff8a90; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.cp-step h4 { font-size:16px; margin:3px 0 4px; }
.cp-ba { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.cp-ba div { height:110px; border-radius:12px; background-size:cover; background-position:center; position:relative; }
.cp-ba div i { position:absolute; left:8px; top:8px; background:#000a; padding:2px 8px; border-radius:6px; font-size:11px; font-style:normal; font-weight:800; }
/* mobile tab bar */
.cp-tabbar { display:none; }
@media (max-width:991px) {
  .cp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cp-cols,.cp-gar,.cp-league { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:575px) {
  .cp .cp-hero { padding-top:56px; } .cp-gar { padding-top:30px; }
  .cp-grid { grid-template-columns:minmax(0,1fr); }
  .cp-cover { height:200px; }
  .cp-card .ph { height:230px; }
  .cp-spec { grid-template-columns:repeat(2,1fr); }
  .cp { padding-bottom:140px; }
  .cp-tabbar { display:flex; position:fixed; z-index:50; left:0; right:0; bottom:0; background:rgba(10,10,15,.96); border-top:1px solid var(--line); backdrop-filter:blur(12px); justify-content:space-around; padding:8px 0 10px; }
  .cp-tabbar a { color:var(--mu); text-align:center; font-size:11px; font-weight:700; display:flex; flex-direction:column; gap:3px; }
  .cp-tabbar a i { font-size:19px; }
  .cp-tabbar a.on { color:#ff8a90; }
}
@media (prefers-reduced-motion:reduce) { .cp-club { transition:none; } }
/* Phase 1 additions: forms, search, sort, pager, toast */
.cp .cp-in { width:100%; background:var(--p1); border:1px solid var(--line); border-radius:12px; padding:12px 14px; color:var(--tx); font-size:15px; margin-bottom:12px; }
.cp .cp-in::placeholder { color:#7f8896; }
.cp-search .cp-in { flex:1 1 280px; width:auto; margin:0; padding:14px 18px; border-radius:14px; }
.cp-lb { display:block; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mu); margin:4px 0 6px; }
.cp-two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cp-chk { display:flex; gap:10px; align-items:center; color:var(--tx); margin-top:4px; }
.cp-sortrow { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cp-sortrow a { color:var(--mu); font-weight:700; font-size:13.5px; }
.cp-sortrow a.on { color:#fff; border-bottom:2px solid var(--red); }
.cp .cp-sel { background:var(--p1); color:var(--tx); border:1px solid var(--line); border-radius:10px; padding:7px 10px; }
.cp-pager { display:flex; gap:16px; align-items:center; justify-content:center; margin:26px 0; }
.cp-form { position:relative; }
.cp-toast { position:fixed; z-index:60; top:90px; left:50%; transform:translateX(-50%); background:#1b7a45; color:#fff; padding:12px 22px; border-radius:12px; font-weight:700; transition:opacity .6s; box-shadow:0 14px 30px -12px #000; }
@media (max-width:575px) { .cp-two { grid-template-columns:1fr; } }

/* Phase 1b: overview tiles, by-type bars */
.cp-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.cp-tile { background:var(--p1); border:1px solid var(--line); border-radius:16px; padding:16px; }
.cp-tile b { display:block; font-size:28px; color:#fff; line-height:1.1; }
.cp-tile span { color:var(--mu); font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; }
.cp-bar { background:transparent !important; display:flex; align-items:center; gap:12px; padding:6px 0; color:var(--tx); }
.cp-bar .n { flex:0 0 170px; font-size:13.5px; }
.cp-bar .t { flex:1; height:8px; background:var(--p2); border-radius:99px; overflow:hidden; }
.cp-bar .t i { display:block; height:100%; background:linear-gradient(90deg,#ff5a3d,#dd1a22); border-radius:99px; }
.cp-bar .v { flex:0 0 34px; text-align:end; font-weight:800; }
@media (max-width:767px) { .cp-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } .cp-bar .n { flex-basis:120px; } }

/* Phase 1c: sidebar layout */
.cp-layout { display:grid; grid-template-columns:290px minmax(0,1fr); gap:24px; align-items:start; padding-top:8px; }
.cp-side { position:sticky; top:12px; }
.cp-side .cp-box { padding:14px 14px 10px; }
.cp-side h4 { margin-bottom:8px; }
.cp-nav a, .cp-nav summary { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; color:var(--tx); font-size:14px; cursor:pointer; list-style:none; background:transparent !important; }
.cp-nav summary::-webkit-details-marker { display:none; }
.cp-nav a:hover, .cp-nav summary:hover { background:rgba(255,255,255,.06) !important; }
.cp-nav a.on, .cp-nav details.on > summary { color:#ff8a90; font-weight:800; }
.cp-nav .ct { color:var(--mu); font-size:12.5px; margin-inline-start:auto; padding-inline-start:8px; }
.cp-nav summary i.fa { transition:transform .2s; color:var(--mu); font-size:12px; }
.cp-nav details[open] > summary i.fa { transform:rotate(90deg); }
.cp-nav .sub { padding:2px 0 6px; margin-inline-start:12px; border-inline-start:1px solid var(--line); }
.cp-nav .sub a { padding:6px 10px; font-size:13.5px; color:#cfd3da; }
.cp-nav .sub a.z { opacity:.55; }
.cp-mini { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.cp-mini div { background:var(--p1); border:1px solid var(--line); border-radius:14px; padding:10px 14px; }
.cp-mini b { display:block; font-size:20px; color:#fff; line-height:1.15; }
.cp-mini span { color:var(--mu); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; }
.cp-act { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.cp-act a { background:rgba(221,26,34,.16); border:1px solid rgba(255,90,97,.5); color:#ff8a90; border-radius:999px; padding:5px 12px; font-size:13px; font-weight:700; }
.cp-filt-m { display:none; }
.cp-layout .cp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:1200px) { .cp-layout .cp-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:991px) {
  .cp-layout { grid-template-columns:minmax(0,1fr); }
  .cp-side { position:static; }
  .cp-side .cp-box { display:none; }
  .cp-filt-m { display:block; margin-bottom:14px; }
  .cp-filt-m summary { background:var(--p1); border:1px solid var(--line); border-radius:12px; padding:12px 16px; font-weight:800; cursor:pointer; }
  .cp-filt-m .cp-box { margin-top:10px; }
  .cp-mini { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:575px) { .cp-layout .cp-grid { grid-template-columns:minmax(0,1fr); } }
.cp-club .row { margin-left:0; margin-right:0; }

/* Phase 1d: modern directory (cq-*) */
.cq-hero { position:relative; z-index:1; padding:150px 0 34px; background:linear-gradient(180deg,rgba(10,10,15,.55),#0a0a0f 96%),url(../images/bg/hero-cars-l.webp) center 35%/cover no-repeat; }
.cq-hero::after { content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 85% 10%,rgba(221,26,34,.35),transparent 70%); pointer-events:none; }
.cq-hero .wrap { position:relative; z-index:1; }
.cq-hero h1 { font-size:clamp(32px,5.2vw,62px); font-weight:800; line-height:1.03; letter-spacing:-.02em; max-width:880px; margin:14px 0 12px; }
.cq-hero h1 em { font-style:normal; background:linear-gradient(90deg,#ff7a5c,#dd1a22); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; }
.cq-hero p { max-width:620px; font-size:17px; color:#c5cad3; }
.cq-find { display:flex; gap:10px; margin:26px 0 16px; max-width:900px; background:rgba(15,19,26,.82); border:1px solid rgba(255,255,255,.16); border-radius:20px; padding:8px; backdrop-filter:blur(14px); box-shadow:0 30px 60px -30px #000; flex-wrap:wrap; }
.cq-find label { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.05); border-radius:14px; padding:0 14px; margin:0; min-height:52px; color:var(--mu); }
.cq-find .q { flex:1 1 260px; }
.cq-find .c { flex:0 1 230px; }
.cq-find input, .cq-find select { background:transparent; border:0; outline:0; color:#fff; width:100%; font-size:15px; }
.cq-find select option { color:#111; }
.cq-find .go { background:var(--red); color:#fff; border:0; font-weight:800; border-radius:14px; padding:0 30px; min-height:52px; box-shadow:0 12px 24px -12px rgba(221,26,34,.9); cursor:pointer; }
.cq-facts { display:flex; gap:26px; flex-wrap:wrap; align-items:center; color:#c5cad3; font-size:14px; }
.cq-facts b { color:#fff; font-size:20px; margin-inline-end:4px; }
.cq-facts .add { margin-inline-start:auto; color:#fff !important; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:8px 18px; font-weight:700; }
.cq-facts .add:hover { background:var(--red); border-color:var(--red); }
.cq-bar { position:relative; z-index:3; background:rgba(10,10,15,.92); border-top:1px solid var(--line); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.cq-cats, .cq-brands { display:flex; gap:8px; overflow-x:auto; padding:12px 0; scrollbar-width:none; }
.cq-cats::-webkit-scrollbar, .cq-brands::-webkit-scrollbar { display:none; }
.cq-cat { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; color:#d6dae1; padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03); font-weight:700; font-size:14px; white-space:nowrap; }
.cq-cat small, .cq-br small { opacity:.65; font-weight:700; margin-inline-start:2px; }
.cq-cat:hover { border-color:rgba(255,90,97,.5); color:#fff; }
.cq-cat.on { background:var(--red); border-color:var(--red); color:#fff; box-shadow:0 10px 22px -12px rgba(221,26,34,.95); }
.cq-brands { border-top:1px dashed var(--line); padding-top:10px; }
.cq-brands .lb { flex:0 0 auto; align-self:center; color:var(--mu); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; margin-inline-end:4px; }
.cq-br { flex:0 0 auto; color:#cfd3da; padding:6px 13px; border-radius:10px; background:var(--p1); border:1px solid var(--line); font-size:13.5px; white-space:nowrap; }
.cq-br.on { background:rgba(221,26,34,.2); border-color:rgba(255,90,97,.7); color:#ff8a90; font-weight:800; }
.cq-br.z { opacity:.45; }
.cq-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.cq-head h2 { font-size:24px; font-weight:800; }
.cq-head h2 span { color:var(--mu); font-weight:600; font-size:18px; }
.cq-tools { display:flex; gap:12px; align-items:center; }
.cq-tools a { color:var(--mu); font-weight:700; font-size:13.5px; padding:6px 4px; }
.cq-tools a.on { color:#fff; border-bottom:2px solid var(--red); }
.cq-tools .clr { color:#ff8a90; border:1px solid rgba(255,90,97,.4); border-radius:999px; padding:6px 14px; }
.cq-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.cq-card { --h:0; position:relative; display:block; background:var(--p1); border:1px solid var(--line); border-radius:22px; overflow:hidden; color:inherit; transition:transform .25s, border-color .25s, box-shadow .25s; }
.cq-card:hover { transform:translateY(-5px); border-color:hsl(var(--h) 80% 55% / .75); box-shadow:0 26px 50px -28px hsl(var(--h) 90% 50% / .55); }
.cq-card .cv { height:148px; background-size:cover; background-position:center; position:relative; }
/* photo tint removed: photos keep their natural colours */
.cq-card .cv::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,15,0) 40%,var(--p1)); }
.cq-card .ty, .cq-card .mb { position:absolute; z-index:1; top:12px; font-size:11.5px; font-weight:800; letter-spacing:.04em; background:rgba(10,10,15,.72); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:5px 11px; color:#fff; }
.cq-card .ty { inset-inline-start:12px; }
.cq-card .mb { inset-inline-end:12px; }
.cq-card .lg { position:absolute; z-index:2; top:112px; inset-inline-start:18px; width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:19px; background:linear-gradient(135deg,hsl(var(--h) 85% 58%),hsl(var(--h) 80% 36%)); border:3px solid var(--p1); box-shadow:0 8px 16px -10px rgba(0,0,0,.7); }
.cq-card .bd { padding:34px 18px 16px; }
.cq-card h3 { font-size:17.5px; font-weight:800; line-height:1.25; margin-bottom:6px; }
.cq-card .pl { color:var(--mu); font-size:13px; margin-bottom:10px; }
.cq-card .pl i { color:hsl(var(--h) 85% 62%); margin-inline-end:4px; }
.cq-card p { color:#b3bac6; font-size:13.5px; line-height:1.5; min-height:41px; }
.cq-card .ft { display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; }
.cq-card .mk { background:hsl(var(--h) 70% 50% / .16); color:hsl(var(--h) 90% 75%); border-radius:8px; padding:3px 9px; font-weight:800; font-size:12px; }
.cq-card .vw { color:#fff; font-weight:800; }
.cq-card .vw i { transition:transform .2s; }
.cq-card:hover .vw i { transform:translateX(4px); }
.cq-cta { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin-top:34px; padding:26px 28px; border-radius:24px; background:linear-gradient(120deg,rgba(221,26,34,.3),rgba(20,26,35,.9) 70%); border:1px solid rgba(255,90,97,.35); }
.cq-cta h3 { font-size:22px; font-weight:800; }
.cq-cta p { color:#c5cad3; margin-top:4px; }
@media (max-width:1199px) { .cq-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:991px) { .cq-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .cq-hero { padding-top:120px; } }
@media (max-width:575px) { .cq-grid { grid-template-columns:minmax(0,1fr); } .cq-hero { padding-top:48px; } .cq-find .c { flex:1 1 100%; } .cq-find .go { flex:1 1 100%; } .cq-facts .add { margin-inline-start:0; } .cq-bar { position:relative; } }
[dir=rtl] .cq-card:hover .vw i { transform:translateX(-4px); }
/* Phase 1e: pills wrap on wide screens (nothing cut off), swipe with a fade hint on phones */
@media (min-width:768px) { .cq-cats, .cq-brands { flex-wrap:wrap; overflow:visible; } }
@media (max-width:767px) { .cq-cats, .cq-brands { -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); padding-inline-end:28px; } [dir=rtl] .cq-cats, [dir=rtl] .cq-brands { -webkit-mask-image:linear-gradient(270deg,#000 88%,transparent); mask-image:linear-gradient(270deg,#000 88%,transparent); } }

/* Phase 1f: club page (cv-*) */
.cv-hero { --h:0; position:relative; z-index:1; padding:170px 0 70px; background-size:cover; background-position:center 40%; }
.cv-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,15,.68),rgba(10,10,15,.32) 45%,#0a0a0f 96%); }
.cv-hero .wrap { position:relative; z-index:1; }
.cv-crumb { font-size:13.5px; color:#c9ced8; margin-bottom:26px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cv-crumb a { color:#e8ebf0; opacity:.85; }
.cv-crumb a:hover { opacity:1; text-decoration:underline !important; }
.cv-crumb i { opacity:.5; }
.cv-id { display:flex; gap:22px; align-items:flex-end; flex-wrap:wrap; }
.cv-id .lg { flex:0 0 116px; height:116px; border-radius:30px; display:flex; align-items:center; justify-content:center; font-size:40px; font-weight:900; color:#fff; background:linear-gradient(135deg,hsl(var(--h) 85% 58%),hsl(var(--h) 80% 34%)); border:5px solid #0a0a0f; background-clip:padding-box; box-shadow:0 10px 24px -12px rgba(0,0,0,.8); }
.cv-id .tt { flex:1 1 340px; min-width:0; }
.cv-id h1 { font-size:clamp(28px,4vw,46px); font-weight:800; line-height:1.08; letter-spacing:-.01em; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cv-id h1 .ver { font-size:.6em; }
.cv-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.cv-chips span { background:rgba(10,10,15,.6); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:6px 14px; font-size:13.5px; font-weight:700; }
.cv-chips .mk { background:hsl(var(--h) 70% 50% / .25); border-color:hsl(var(--h) 80% 60% / .6); color:hsl(var(--h) 95% 85%); }
.cv-chips i { color:hsl(var(--h) 90% 70%); margin-inline-end:4px; }
.cv-id .acts { display:flex; gap:10px; flex-wrap:wrap; }
.cv-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:-34px; position:relative; z-index:2; }
.cv-tiles div { background:var(--p1); border:1px solid var(--line); border-radius:18px; padding:16px 18px; box-shadow:0 20px 40px -26px #000; }
.cv-tiles b { display:block; font-size:24px; color:#fff; line-height:1.15; }
.cv-tiles span { color:var(--mu); font-size:12px; text-transform:uppercase; letter-spacing:.07em; }
.cv-tabs { display:flex; gap:6px; overflow-x:auto; border-bottom:1px solid var(--line); margin:24px 0 22px; scrollbar-width:none; }
.cv-tabs a, .cv-tabs span { padding:12px 16px; font-weight:800; white-space:nowrap; color:var(--mu); border-bottom:3px solid transparent; }
.cv-tabs a.on { color:#fff; border-color:var(--red); }
.cv-tabs span { opacity:.6; cursor:default; }
.cv-tabs em { font-style:normal; font-size:10.5px; background:var(--p2); border-radius:6px; padding:2px 6px; margin-inline-start:4px; letter-spacing:.05em; text-transform:uppercase; }
.cv-about { white-space:pre-line; line-height:1.7; font-size:15.5px; color:#dfe3ea; }
.cv-dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 28px; margin:0; }
.cv-dl div { padding:11px 0; border-bottom:1px solid var(--line); }
.cv-dl dt { color:var(--mu); font-size:12px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.cv-dl dd { margin:2px 0 0; color:#fff; font-weight:700; }
.cv-ct { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; background:var(--p2); color:#fff !important; margin-bottom:8px; word-break:break-all; }
.cv-ct i { color:#ff6a5e; width:18px; text-align:center; }
.cv-soon { list-style:none; margin:0; padding:0; color:var(--mu); }
.cv-soon li { padding:8px 0; display:flex; gap:12px; align-items:center; }
.cv-soon i { color:#ff6a5e; width:18px; text-align:center; }
.cv-rel { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:991px) { .cv-hero { padding-top:110px; } .cv-rel { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px) { .cv-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } .cv-dl { grid-template-columns:minmax(0,1fr); } .cv-id .lg { flex-basis:92px; height:92px; font-size:32px; border-radius:24px; } }
@media (max-width:575px) { .cv-hero { padding-top:40px; } .cv-rel { grid-template-columns:minmax(0,1fr); } }

/* Phase 2: membership, garage, badges */
.mg-people { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.mg-people a { display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:12px; background:var(--p2); color:#fff; }
.mg-people a:hover { background:#232d3b; }
.mg-people b { display:block; font-size:14px; }
.mg-people small { color:var(--mu); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; }
.mg-bar { height:10px; background:var(--p2); border-radius:99px; margin-top:12px; overflow:hidden; }
.mg-bar i { display:block; height:100%; background:linear-gradient(90deg,#ff5a3d,#dd1a22); border-radius:99px; }
.mg-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.mg-badges span { background:rgba(232,184,74,.12); border:1px solid rgba(232,184,74,.4); color:#e8b84a; border-radius:999px; padding:5px 12px; font-size:12.5px; font-weight:700; }
.mg-mods { margin:0; padding-inline-start:20px; color:#dfe3ea; line-height:1.8; }
.mg-gal { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.mg-gal > div { position:relative; border-radius:12px; overflow:hidden; background:var(--p2); aspect-ratio:4/3; }
.mg-gal img { width:100%; height:100%; object-fit:cover; display:block; }
.mg-gal .x { position:absolute; top:6px; inset-inline-end:6px; width:26px; height:26px; border-radius:50%; border:0; background:rgba(0,0,0,.75); color:#fff; cursor:pointer; line-height:1; }
.mg-ph { max-width:100%; border-radius:12px; margin-top:8px; display:block; }
.mg-add { margin-bottom:6px; }
.mg-add summary { display:inline-flex; cursor:pointer; list-style:none; }
.mg-add summary::-webkit-details-marker { display:none; }
.mg-add .cp-form { margin-top:12px; }
.mg-link { background:none; border:0; color:#ff8a90; padding:0; cursor:pointer; font-size:13px; text-decoration:underline; }
@media (max-width:767px) { .mg-people { grid-template-columns:repeat(2,minmax(0,1fr)); } .mg-gal { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:575px) { .mg-people { grid-template-columns:minmax(0,1fr); } }

/* Phase 3: feed and events */
.ft-compose textarea { margin-bottom:8px; }
.ft-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.ft-poll { margin:4px 0 10px; }
.ft-poll .cp-two { margin-top:8px; }
.ft-ann { border-color:rgba(255,90,97,.55); background:linear-gradient(180deg,rgba(221,26,34,.1),var(--p1)); }
.cp-post .act { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.ft-like { background:none; border:0; color:var(--mu); cursor:pointer; padding:0; font-size:14px; }
.ft-like.on { color:#ff5a61; }
.ft-pollbox { display:grid; gap:8px; margin:12px 0; }
.ft-pollbox form { display:block !important; }
.ft-opt { width:100%; text-align:start; cursor:pointer; border-radius:12px !important; }
.ft-res { position:relative; overflow:hidden; display:flex; justify-content:space-between; border-radius:12px !important; }
.ft-res span { position:absolute; inset:0; background:rgba(221,26,34,.25); }
.ft-res.mine { border-color:rgba(255,90,97,.7); }
.ft-res b, .ft-res em { position:relative; font-style:normal; }
.ft-cm { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; display:grid; gap:10px; }
.ft-cm > div { display:flex; gap:10px; }
.ft-cm p { color:#dfe3ea; margin:2px 0; }
.ft-cf { display:flex; gap:8px; margin-top:12px; }
.ft-cf .cp-in { margin:0; }
.ft-rep summary { list-style:none; cursor:pointer; }
.ft-rep summary::-webkit-details-marker { display:none; }
.ft-rep[open] { display:block; width:100%; }
.et-row { color:inherit; border-radius:12px; padding:10px 8px; }
.et-row:hover { background:rgba(255,255,255,.05); }
.et-qr { width:min(240px,100%); margin:0 auto; background:#fff; border-radius:14px; padding:8px; }
.et-qr svg { width:100%; height:auto; display:block; }
.cp .ft-res { display:flex; justify-content:space-between; gap:10px; } .cp .ft-opt { display:block; }

/* Dashboard batch: bell, tabs with icons */
.cp-bell { position:fixed; z-index:70; inset-inline-start:18px; bottom:86px; width:48px; height:48px; border-radius:50%; background:var(--red); color:#fff !important; display:flex; align-items:center; justify-content:center; font-size:19px; box-shadow:0 14px 30px -10px #000; }
.cp-bell b { position:absolute; top:-4px; inset-inline-end:-4px; background:#fff; color:#dd1a22; border-radius:99px; min-width:20px; height:20px; font-size:11px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.cv-tabs a i { margin-inline-end:6px; opacity:.8; }
.cv-id .lg, .cq-card .lg, .cq-club .lg { overflow:hidden; }
/* notices ("Saved", "Message sent"...) sit at the bottom of the screen, never on top of the site menu */
.cp-toast { top:auto !important; bottom:26px; z-index:90; max-width:min(560px, calc(100vw - 32px)); text-align:center; line-height:1.35; }

/* Near me button and the map */
.cq-tools .cq-near { background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff; border-radius:999px; padding:6px 14px; font-weight:700; font-size:13.5px; cursor:pointer; }
.cq-tools .cq-near:hover, .cq-tools .cq-near.on { border-color:var(--red); background:rgba(221,26,34,.18); }
.cq-tools .cq-near:disabled { opacity:.6; cursor:wait; }
.cq-map { height:560px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:#1a1a1a; z-index:0; }
.cq-map .leaflet-popup-content { color:#222; font-size:14px; line-height:1.4; margin:12px 14px; }
.cq-map .leaflet-popup-content a { color:#dd1a22; }
@media (max-width:640px) { .cq-map { height:420px; } .cq-tools { flex-wrap:wrap; } }