/* ============================================================
   GreekConnect — Dark theme (screenshot 2 design)
   ============================================================ */
:root{
  --gc-accent:#2E7DF5; --gc-accent-light:#5B9DFF; --gc-accent-deep:#1E62D6;
  --gc-accent-rgb:46,125,245;
  --gc-ink:#E8EEF8; --gc-muted:#8A97B0;
  --gc-surface:#111A33; --gc-surface-alt:#0C1428; --gc-hero:#0A1228;
  --gc-bg:#070C1A; --gc-bg-2:#0A1228;
  --gc-border:rgba(255,255,255,0.09); --gc-border-strong:rgba(255,255,255,0.16);
  --gc-soft:rgba(46,125,245,0.12); --gc-soft-2:rgba(46,125,245,0.06);
  --gc-radius:18px; --gc-radius-sm:12px;
  --gc-shadow:0 10px 40px rgba(0,0,0,0.45);
  --gc-maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--gc-bg); color:var(--gc-ink); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:var(--gc-accent-light); text-decoration:none}
a:hover{color:#fff}
h1,h2,h3,h4{margin:0 0 .4em; font-weight:700; letter-spacing:-.02em; color:#fff}
img{max-width:100%}
.gc-container{max-width:var(--gc-maxw); margin:0 auto; padding:0 24px}
.gc-center{text-align:center}
.gc-muted{color:var(--gc-muted)}
.gc-eyebrow{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gc-accent-light); margin-bottom:10px}
.gc-soon{display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:20px; background:var(--gc-soft); color:var(--gc-accent-light); vertical-align:middle; margin-left:6px}

.gc-btn{display:inline-flex; align-items:center; gap:9px; justify-content:center; font-family:inherit; font-weight:700; font-size:.96rem; cursor:pointer; padding:13px 26px; border-radius:12px; border:1px solid transparent; transition:.18s; white-space:nowrap}
.gc-btn-sm{padding:9px 16px; font-size:.85rem; border-radius:10px}
.gc-btn-lg{padding:16px 34px; font-size:1.04rem}
.gc-btn-block{width:100%}
.gc-btn-primary{background:var(--gc-accent); color:#fff; box-shadow:0 8px 26px rgba(46,125,245,.4)}
.gc-btn-primary:hover{background:var(--gc-accent-deep); color:#fff; transform:translateY(-1px)}
.gc-btn-ghost{background:transparent; color:var(--gc-ink); border-color:var(--gc-border-strong)}
.gc-btn-ghost:hover{border-color:var(--gc-accent); color:#fff; background:rgba(255,255,255,.03)}
.gc-btn-light{background:rgba(255,255,255,.08); color:#fff}
.gc-btn-light:hover{background:rgba(255,255,255,.14); color:#fff}
.gc-btn[disabled]{opacity:.6; cursor:not-allowed}

.gc-nav{position:fixed; top:0; left:0; right:0; z-index:1000; transition:.25s; background:transparent; padding:14px 0}
.gc-nav.scrolled,.gc-nav.solid{background:rgba(10,16,32,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--gc-border); padding:9px 0}
.gc-nav-inner{display:flex; align-items:center; gap:24px}
.gc-nav-logo{display:flex; align-items:center; flex:none}
.gc-logo{display:inline-flex; align-items:center; gap:11px}
.gc-logo-badge{width:46px; height:46px; border-radius:50%; flex:none; overflow:hidden; display:grid; place-items:center; background:#0d1c3a; border:2px solid rgba(255,255,255,.18)}
.gc-logo-badge img{width:100%; height:100%; object-fit:cover}
.gc-logo-text{display:flex; flex-direction:column; line-height:1}
.gc-logo-name{font-weight:800; font-size:1.18rem; letter-spacing:-.01em}
.gc-logo-name b{color:#fff} .gc-logo-name i{color:var(--gc-accent-light); font-style:normal}
.gc-logo-tag{font-size:.56rem; font-weight:700; letter-spacing:.22em; color:var(--gc-muted); text-transform:uppercase; margin-top:3px}
.gc-nav-links{display:flex; align-items:center; gap:7px; margin:0 auto}
.gc-nav-links a{color:rgba(232,238,248,.82); font-size:.92rem; font-weight:600; padding:8px 13px; border-radius:9px; transition:.15s}
.gc-nav-links a:hover{color:#fff; background:rgba(255,255,255,.05)}
.gc-nav-links a.active{color:var(--gc-accent-light)}
.gc-nav-cta{display:flex; align-items:center; gap:12px; flex:none}
.gc-nav-ghost{color:#fff; font-weight:600; font-size:.92rem}
.gc-nav-toggle{display:none; background:none; border:none; color:#fff; cursor:pointer; padding:6px}

.gc-lang{position:relative}
.gc-lang-btn{display:inline-flex; align-items:center; gap:6px; cursor:pointer; background:rgba(255,255,255,.06); border:1px solid var(--gc-border); color:#fff; font-family:inherit; font-weight:700; font-size:.82rem; padding:8px 12px; border-radius:10px}
.gc-lang-btn:hover{background:rgba(255,255,255,.1)}
.gc-lang-menu{position:absolute; top:calc(100% + 6px); right:0; min-width:130px; background:#0f1830; border:1px solid var(--gc-border); border-radius:12px; padding:6px; box-shadow:var(--gc-shadow); display:none; z-index:50}
.gc-lang-menu.open{display:block}
.gc-lang-menu a{display:flex; align-items:center; gap:8px; padding:8px 11px; border-radius:8px; color:var(--gc-ink); font-size:.86rem; font-weight:600}
.gc-lang-menu a:hover{background:rgba(255,255,255,.06); color:#fff}
.gc-lang-menu a.active{color:var(--gc-accent-light)}

.gc-hero{position:relative; overflow:hidden; padding:150px 0 70px; background:radial-gradient(1200px 700px at 78% 35%, rgba(46,125,245,.18), transparent 60%), linear-gradient(165deg, #0A1228 0%, #0C1A3C 50%, #070C1A 100%)}
.gc-hero-grid{position:absolute; inset:0; z-index:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%); mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%)}
.gc-hero-inner{position:relative; z-index:3; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:30px; min-height:430px}
.gc-hero-copy{max-width:560px}
.gc-hero h1{font-size:clamp(2.6rem,4.6vw,4rem); line-height:1.05; margin-bottom:18px}
.gc-hero h1 .hl{color:var(--gc-accent-light)}
.gc-hero .sub{font-size:1.12rem; color:#c4cee0; margin-bottom:26px; max-width:480px}
.gc-hero-badge{display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#c8d6f0; background:rgba(255,255,255,.05); border:1px solid var(--gc-border); padding:8px 14px; border-radius:30px; margin-bottom:22px}
.gc-hero-badge .dot{width:8px; height:8px; border-radius:50%; background:#34d27b; box-shadow:0 0 10px #34d27b}
.gc-hero-search{display:flex; gap:10px; background:var(--gc-surface); border:1px solid var(--gc-border); border-radius:14px; padding:8px; margin-bottom:18px; box-shadow:var(--gc-shadow); max-width:540px}
.gc-hero-search .ic{display:grid; place-items:center; padding-left:10px; color:var(--gc-muted)}
.gc-hero-search input{flex:1; background:transparent; border:none; outline:none; color:var(--gc-ink); font-family:inherit; font-size:1rem; padding:10px 4px}
.gc-hero-search input::placeholder{color:var(--gc-muted)}
.gc-pills{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:26px}
.gc-pills .lbl{color:var(--gc-muted); font-size:.9rem; margin-right:2px}
.gc-pill-link{background:rgba(255,255,255,.05); border:1px solid var(--gc-border); color:var(--gc-ink); font-size:.86rem; font-weight:600; padding:8px 15px; border-radius:30px; transition:.15s}
.gc-pill-link:hover{border-color:var(--gc-accent); color:#fff; background:rgba(46,125,245,.12)}
.gc-hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.gc-globe-wrap{position:relative; display:grid; place-items:center; min-height:440px}
.gc-globe-wrap img.gc-globe-img{width:115%; max-width:none; filter:drop-shadow(0 0 60px rgba(46,125,245,.35))}
/* The canvas is a control now: it takes the pointer, so it must sit above
   the hero's decorative layers and say so with a cursor. */
.gc-globe-canvas{width:115%; max-width:none; aspect-ratio:1/1; grid-area:1/1; position:relative; z-index:2;
  cursor:grab; touch-action:none; outline:none; border-radius:50%}
.gc-globe-canvas:active{cursor:grabbing}
.gc-globe-canvas:focus-visible{box-shadow:0 0 0 2px var(--gc-accent), 0 0 0 6px var(--gc-soft)}
.gc-globe-fallback{display:none; grid-area:1/1}
.gc-globe-static .gc-globe-canvas{display:none}
.gc-globe-static .gc-globe-fallback{display:block}
/* Zoom / reset, bottom-right of the globe */
.gc-globe-tools{position:absolute; z-index:4; right:6px; bottom:34px; display:flex; flex-direction:column; gap:6px}
.gc-globe-tools button{width:30px; height:30px; display:grid; place-items:center; cursor:pointer;
  font:700 15px/1 Poppins,system-ui,sans-serif; color:#cfe0fb; background:rgba(12,22,46,.72);
  border:1px solid var(--gc-border); border-radius:9px; backdrop-filter:blur(8px); transition:.15s}
.gc-globe-tools button:hover{color:#fff; border-color:var(--gc-accent); background:rgba(46,125,245,.28)}
.gc-globe-hint{position:absolute; z-index:4; left:0; right:0; bottom:2px; margin:0; text-align:center;
  font-size:.72rem; color:var(--gc-muted); pointer-events:none; opacity:.75}
@media (hover:none){.gc-globe-hint{display:none}}
.gc-globe-static .gc-globe-tools,.gc-globe-static .gc-globe-hint{display:none}


.gc-section{padding:72px 0}
.gc-section-tight{padding:46px 0}
.gc-section-head{text-align:center; max-width:640px; margin:0 auto 44px}
.gc-section-head h2{font-size:2.1rem}
.gc-section-head .lead{color:var(--gc-muted); font-size:1.05rem}
.gc-features{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.gc-feature{background:var(--gc-surface); border:1px solid var(--gc-border); border-radius:var(--gc-radius); padding:26px 22px; transition:.18s}
.gc-feature:hover{border-color:rgba(46,125,245,.4); transform:translateY(-3px)}
.gc-feature .fic{width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:var(--gc-soft); color:var(--gc-accent-light); margin-bottom:16px}
.gc-feature h3{font-size:1.08rem; margin-bottom:7px}
.gc-feature p{color:var(--gc-muted); font-size:.92rem; margin:0}
.gc-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:22px}
.gc-stat{background:var(--gc-surface); border:1px solid var(--gc-border); border-radius:var(--gc-radius); padding:24px; display:flex; align-items:center; gap:16px}
.gc-stat .sic{width:50px; height:50px; border-radius:12px; flex:none; display:grid; place-items:center; background:var(--gc-soft-2); color:var(--gc-accent-light)}
.gc-stat .snum{font-size:1.7rem; font-weight:800; color:#fff; line-height:1}
.gc-stat .slbl{color:var(--gc-muted); font-size:.9rem}
.gc-cats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.gc-cat{background:var(--gc-surface); border:1px solid var(--gc-border); border-radius:var(--gc-radius); padding:22px; transition:.18s; display:block}
.gc-cat:hover{border-color:rgba(46,125,245,.4); transform:translateY(-3px)}
.gc-cat .ic{width:50px; height:50px; border-radius:13px; display:grid; place-items:center; background:var(--gc-soft); color:var(--gc-accent-light); margin-bottom:14px}
.gc-cat .nm{display:block; font-weight:700; color:#fff; margin-bottom:3px}
.gc-cat .ct{font-size:.84rem; color:var(--gc-muted)}

.gc-cta{position:relative; overflow:hidden; border-radius:24px; padding:54px 40px; text-align:center; background:radial-gradient(700px 300px at 50% 0,rgba(46,125,245,.3),transparent 70%),linear-gradient(135deg,#0E1E44,#0A1228); border:1px solid var(--gc-border)}
.gc-cta h2{font-size:2rem} .gc-cta p{color:#c4cee0; max-width:540px; margin:0 auto 24px}

.gc-footer{background:#070C1A; border-top:1px solid var(--gc-border); padding:60px 0 28px; margin-top:20px}
.gc-footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px}
.gc-footer-brand p{color:var(--gc-muted); font-size:.92rem; margin:14px 0; max-width:320px}
.gc-footer-social{display:flex; gap:16px}
.gc-footer-social a{display:inline-flex; align-items:center; gap:7px; color:var(--gc-muted); font-size:.85rem}
.gc-footer-social a:hover{color:#fff}
.gc-footer-col h4{font-size:.96rem; margin-bottom:14px; color:#fff}
.gc-footer-col a{display:block; color:var(--gc-muted); font-size:.9rem; padding:5px 0}
.gc-footer-col a:hover{color:var(--gc-accent-light)}
.gc-footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid var(--gc-border); margin-top:38px; padding-top:22px; color:var(--gc-muted); font-size:.85rem}
.gc-footer-tag em{font-style:normal; color:var(--gc-accent-light); font-weight:700}
.gc-footer-tag b{color:#fff}

.gc-results-section{padding-top:120px}
.gc-results-layout{display:grid; grid-template-columns:1fr; gap:24px; transition:.3s}
.gc-results-layout.gc-panel-open{grid-template-columns:1fr 420px}
.gc-results-pane{min-width:0}
.gc-resultbar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:22px}
.gc-results-title{font-size:1.6rem; margin:0 0 3px}
/* 2026-10-20: city searches - the city's own listings, then Nearby by distance. */
.gc-block-title{font-size:1.1rem; margin:18px 0 10px}
.gc-block-title .gc-muted{font-size:.85rem; font-weight:400}
.gc-block-near{margin-top:28px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1)}
/* 2026-10-21 (owner): businesses found only on a social network or a platform are
   not real listings yet: one line each, in their own block below the results. */
.gc-block-social{margin-top:28px; padding-top:16px; border-top:1px solid var(--gc-border)}
.gc-social-note{color:var(--gc-muted); font-size:.88rem; margin:0 0 10px; max-width:70ch}
.gc-social-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:8px}
.gc-social-item{display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"site name" "site where"; column-gap:10px; align-items:center;
  padding:10px 12px; border:1px solid var(--gc-border); border-radius:var(--gc-radius-sm); background:var(--gc-surface-alt); color:var(--gc-ink); text-decoration:none}
.gc-social-item:hover,.gc-social-item:focus-visible{border-color:var(--gc-border-strong); background:var(--gc-soft-2)}
.gc-social-site{grid-area:site; font-size:.7rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--gc-accent-light);
  background:var(--gc-soft); border-radius:999px; padding:3px 9px; white-space:nowrap}
.gc-social-name{grid-area:name; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gc-social-where{grid-area:where; font-size:.82rem; color:var(--gc-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gc-result-count{color:var(--gc-muted); font-size:.9rem}
.gc-resultbar-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.gc-sort-select{font-family:inherit; font-size:.85rem; padding:10px 14px; border:1px solid var(--gc-border); border-radius:10px; background:var(--gc-surface); color:var(--gc-ink); cursor:pointer}
.gc-sort-select:focus{outline:none; border-color:var(--gc-accent)}
/* 2026-10-22 (owner): "Closest to me": the position in use (Change, Clear) and the prompt that asks for one. */
.gc-me-bar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-4px 0 14px; padding:8px 12px; border:1px solid var(--gc-border); border-radius:10px; background:var(--gc-surface-alt); font-size:.88rem; color:var(--gc-ink)}
.gc-me-where{min-width:0; overflow-wrap:anywhere}
.gc-me-link{font:inherit; font-size:.85rem; background:none; border:0; padding:2px 4px; color:var(--gc-accent-light); cursor:pointer; text-decoration:underline}
.gc-me-panel{position:relative; display:grid; gap:10px; margin:0 0 16px; padding:16px 44px 16px 16px; border:1px solid var(--gc-border-strong); border-radius:var(--gc-radius); background:var(--gc-surface); color:var(--gc-ink); box-shadow:var(--gc-shadow); max-width:560px}
.gc-me-panel[hidden]{display:none}
.gc-me-title{margin:0; font-weight:600; font-size:1rem}
.gc-me-panel > .gc-btn{justify-self:start}
.gc-me-form{display:grid; gap:6px; margin:0}
.gc-me-form label{font-size:.85rem; color:var(--gc-muted)}
.gc-me-row{display:flex; gap:8px; min-width:0}
.gc-me-row input{flex:1; min-width:0; font:inherit; font-size:.9rem; padding:9px 12px; border:1px solid var(--gc-border); border-radius:10px; background:var(--gc-surface-alt); color:var(--gc-ink)}
.gc-me-row input:focus{outline:none; border-color:var(--gc-accent)}
.gc-me-msg{margin:0; min-height:1.2em; font-size:.85rem; color:var(--gc-accent-light)}
.gc-me-note{margin:0; font-size:.78rem; color:var(--gc-muted)}
.gc-me-close{position:absolute; top:8px; right:8px; width:32px; height:32px; border:0; border-radius:8px; background:none; color:var(--gc-muted); font-size:1.4rem; line-height:1; cursor:pointer}
.gc-me-close:hover{color:var(--gc-ink); background:var(--gc-surface-alt)}
@media (max-width:480px){.gc-me-row{flex-direction:column} .gc-me-row .gc-btn{width:100%}}
/* ── B6: facet filter bar above the results grid ── */
.gc-filterbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 14px; margin-bottom:18px; border:1px solid var(--gc-border);
  border-radius:14px; background:var(--gc-surface-alt)}
.gc-filterbar-label{font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gc-muted); margin-right:2px}
.gc-filterbar .gc-sort-select{background:var(--gc-surface)}
.gc-filter-chip{display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:.82rem;
  font-weight:600; padding:9px 14px; border-radius:10px; cursor:pointer;
  border:1px solid var(--gc-border); background:var(--gc-surface); color:var(--gc-ink); transition:.16s}
.gc-filter-chip:hover{border-color:var(--gc-accent); color:#fff}
.gc-filter-chip.is-on{background:var(--gc-accent); border-color:var(--gc-accent); color:#fff}
.gc-filter-chip svg{flex:none}
/* 2026-10-21 (owner): the Nearby toggle reads as a button, outlined in the accent */
.gc-filter-btn{border-color:var(--gc-accent); color:var(--gc-accent)}
.gc-filter-btn:hover{background:var(--gc-accent); color:#fff}
.gc-filter-clear{margin-left:auto; background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:.82rem; font-weight:600; color:var(--gc-muted); padding:8px 6px; border-radius:8px}
.gc-filter-clear:hover{color:#fff}
.gc-filter-clear[hidden]{display:none}
.gc-biz-card.gc-filtered-out{display:none}
.gc-filter-empty{background:var(--gc-surface); border:1px solid var(--gc-border); border-radius:14px;
  padding:26px 20px; text-align:center; color:var(--gc-muted); font-size:.92rem}
.gc-filter-empty[hidden]{display:none}
/* 2026-10-29 (owner): the specialties of Doctors & Health, a panel of four groups above the filters (index.php). */
.gc-specpanel{padding:12px 14px; margin-bottom:12px; border:1px solid var(--gc-border); border-radius:14px;
  background:var(--gc-surface-alt)}
.gc-specpanel-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.gc-specgroup{border-top:1px solid var(--gc-border)}
.gc-specgroup summary{cursor:pointer; padding:10px 2px; font-weight:700; font-size:.9rem; color:var(--gc-ink)}
.gc-specgroup summary:hover{color:#fff}
.gc-specchips{display:flex; flex-wrap:wrap; gap:6px; padding:2px 0 12px}
.gc-specchip{display:inline-block; font-size:.82rem; font-weight:600; padding:7px 12px; border-radius:999px;
  border:1px solid var(--gc-border); background:var(--gc-surface); color:var(--gc-ink); text-decoration:none; transition:.16s}
.gc-specchip:hover{border-color:var(--gc-accent); color:#fff}
.gc-specchip.is-on{background:var(--gc-accent); border-color:var(--gc-accent); color:#fff}
@media(max-width:680px){ .gc-specpanel{padding:11px 12px} .gc-specchip{font-size:.8rem; padding:7px 11px} }
@media(max-width:680px){
  .gc-filterbar{gap:8px; padding:11px 12px}
  .gc-filterbar-label{width:100%; margin-bottom:2px}
  .gc-filterbar .gc-sort-select,.gc-filter-chip{flex:1 1 44%; min-width:0}
  .gc-filter-clear{flex:1 1 100%; margin-left:0; text-align:left}
}
.gc-search-notice{background:rgba(255,193,7,.12); border:1px solid rgba(255,193,7,.4); border-radius:10px; padding:12px 16px; margin-bottom:16px; font-size:.9rem; color:#ffe08a}
/* ── B7: result cards — the crest plate (release5) ─────────────
   Every positioning rule is scoped under .gc-biz-card on purpose.
   js/greekconnect.js renderData() re-emits .gc-biz-cat, .gc-biz-meta,
   .gc-biz-loc, .gc-biz-addr, .gc-biz-rating, .gc-biz-web and .gc-badge
   inside the detail panel, where they must stay flat. The unscoped base
   rules further down are the panel's, not the card's.
   No new :root token and no new hex: the per-category colour arrives
   inline as --gc-cat, read out of data/categories.json by PHP. */
/* ── Grid ────────────────────────────────────────────────────
   auto-fill + minmax, so opening the detail panel simply drops a
   column — no media query and no .gc-panel-open selector involved.
   1240 container - 48 padding = 1192: 3 tracks (906) fit, 4 (1214)
   do not, so 3 columns of ~385px. Panel open leaves 1192-420-24 =
   748: 2 tracks (598) fit, 3 (906) do not, so it re-solves to 2
   columns of ~365px by itself. min() stops the track ever exceeding
   the viewport below ~338px. */
.gc-biz-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));
  gap:18px;
  align-items:stretch;
}
/* js/greekconnect.js:355 inserts the inline mobile detail panel as a
   DIRECT child of #gcResultGrid via insertAdjacentElement('afterend').
   Under display:grid it becomes a grid item and would sit in one
   column beside a card. This line is not optional. */
.gc-dp-mobile-slot.open{grid-column:1 / -1}

/* ── Card shell ─────────────────────────────────────────────── */
.gc-biz-card{
  --gc-cat:var(--gc-accent-light);        /* PHP overrides this inline, per category */
  position:relative;
  display:flex; flex-direction:column;
  height:100%;
  padding:0;                              /* the plate is flush to the card edge */
  overflow:hidden;
  isolation:isolate;
  background:var(--gc-surface);
  border:1px solid var(--gc-border);
  border-radius:var(--gc-radius);
  color:var(--gc-ink);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.gc-biz-card:hover{transform:translateY(-3px); border-color:var(--gc-cat); box-shadow:var(--gc-shadow)}
.gc-biz-card:focus-visible{outline:2px solid var(--gc-cat); outline-offset:3px}

/* ── The plate ───────────────────────────────────────────────
   Same 16:10 band on every card. A photo is a layer on top of it,
   never a replacement, so a dead CDN URL degrades to the crest with
   zero layout shift — the failure mode and the design are the same
   thing. Class kept as .gc-biz-media for js:329. */
.gc-biz-card .gc-biz-media{
  position:relative; flex:none;
  aspect-ratio:16 / 10;
  min-height:150px;                       /* floor if aspect-ratio is unsupported */
  max-height:270px;                       /* caps the one very wide single column */
  overflow:hidden;
  background:linear-gradient(155deg, var(--gc-surface-alt), var(--gc-bg-2));
}
/* layer 1 — the category's own colour, washed in from the top-left */
.gc-biz-card .gc-biz-media::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(118% 96% at 18% 0%, var(--gc-cat), transparent 62%);
  opacity:.34;
}
/* layer 2 — the hero's own hairline grid (.gc-hero-grid, line 71),
   scaled to 26px and radially masked, so an empty plate reads as
   brand texture rather than as a placeholder */
.gc-biz-card .gc-card-weave{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--gc-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--gc-border) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at 28% 18%, #000 18%, transparent 76%);
          mask-image:radial-gradient(ellipse at 28% 18%, #000 18%, transparent 76%);
}
/* layer 3 — the crest: the category emoji, ghosted, rotated and
   clipped by the band edge. This single element is what makes 20
   categories produce 20 visibly different empty plates. */
.gc-biz-card .gc-card-crest{
  position:absolute; z-index:1; right:-4px; bottom:-16px;
  font-size:5.4rem; line-height:1;
  opacity:.15; transform:rotate(-8deg);
  filter:saturate(.7);
  pointer-events:none; user-select:none;
}
/* layer 3b — a 32px web crop blurred past legibility, so the plate
   takes the business's own brand colour. The same file is also on the
   chip below at native size: one URL, one HTTP request. */
.gc-biz-card .gc-card-wash{
  position:absolute; z-index:1; inset:-25%;
  width:150%; height:150%; object-fit:cover;
  opacity:.5; filter:blur(26px) saturate(1.5) brightness(.9);
}
/* layer 4 — the photograph, when the row owns a real one */
.gc-biz-card .gc-card-photo{
  position:absolute; z-index:2; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.gc-biz-card:hover .gc-card-photo{transform:scale(1.05)}
/* layer 5 — melts the plate into the body and keeps the bottom
   overlays legible over any photograph */
.gc-biz-card .gc-card-scrim{
  position:absolute; z-index:3; left:0; right:0; bottom:0; height:66%;
  pointer-events:none;
  background:linear-gradient(to top, var(--gc-surface), transparent);
}

/* ── Plate overlays — four corners, all scoped so the detail
      panel's copies of these classes stay flat ───────────────── */
.gc-biz-card .gc-biz-cat{
  position:absolute; z-index:4; top:11px; left:11px;
  max-width:calc(100% - 96px);
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:20px;
  font-size:.71rem; font-weight:700; line-height:1.5;
  color:var(--gc-ink);
  background:var(--gc-hero);
  border:1px solid var(--gc-border-strong);
  border-left:3px solid var(--gc-cat);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gc-biz-card .gc-biz-cat i{font-style:normal; font-size:.88rem; line-height:1; flex:none}
.gc-biz-card .gc-biz-badges{
  position:absolute; z-index:4; top:11px; right:11px;
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px;
  max-width:62%;
}
/* The score slot: rating, else the founding year, else absent.
   .gc-biz-rating (line 193) supplies the gold — not redeclared here. */
.gc-biz-card .gc-card-score{
  position:absolute; z-index:4; right:11px; bottom:12px;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:20px;
  font-size:.73rem; font-weight:700; line-height:1.5;
  background:var(--gc-hero);
  border:1px solid var(--gc-border-strong);
}
.gc-biz-card .gc-card-score b{font-size:.95rem; font-weight:800}
.gc-biz-card .gc-card-est{color:var(--gc-muted)}
.gc-biz-card .gc-card-est b{color:var(--gc-ink)}

/* ── Body ────────────────────────────────────────────────────── */
.gc-biz-card .gc-biz-body{
  position:relative;
  display:flex; flex-direction:column; gap:7px;
  flex:1 1 auto; min-width:0;
  padding:34px 16px 15px;                 /* top clears the chip overhang */
}

/* THE MARK — same x and y on every card in the grid. A 32px asset
   lands in a 30px content box, so it is never upscaled. */
.gc-biz-card .gc-card-chip{
  position:absolute; top:-26px; left:16px;
  width:52px; height:52px; border-radius:15px;
  display:grid; place-items:center; overflow:hidden;
  background:var(--gc-surface-alt);
  border:1px solid var(--gc-border-strong);
  box-shadow:0 0 0 3px var(--gc-surface), var(--gc-shadow);
}
.gc-biz-card .gc-card-chip > *{grid-area:1 / 1}
.gc-biz-card .gc-card-chip img{
  width:100%; height:100%; padding:11px;
  object-fit:contain; display:block;
  background:var(--gc-surface-alt);       /* masks the initial underneath */
}
.gc-biz-card .gc-biz-initial{font-size:1.4rem; font-weight:800; color:var(--gc-cat)}

.gc-biz-card .gc-biz-name{
  margin:0; font-size:1.02rem; line-height:1.32; font-weight:700; color:#fff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:anywhere;
}
.gc-biz-card .gc-biz-meta{
  display:flex; align-items:center; gap:7px;
  min-width:0; margin:0;
  font-size:.81rem; color:var(--gc-muted);
}
.gc-biz-card .gc-biz-loc,
.gc-biz-card .gc-biz-addr{display:inline-flex; align-items:center; gap:4px; min-width:0}
/* the label is wrapped in its own span: text-overflow cannot ellipsise
   a bare text node inside an inline-flex box */
.gc-biz-card .gc-biz-loc span,
.gc-biz-card .gc-biz-addr span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gc-biz-card .gc-biz-loc svg,
.gc-biz-card .gc-biz-addr svg{flex:none}
.gc-biz-card .gc-card-dot{flex:none; opacity:.5}
.gc-biz-card .gc-biz-desc{margin:0; font-size:.855rem; line-height:1.5}

/* ── The rail: pinned to the card floor, which is what makes a photo
      card and a crest card in the same row end on the same line ── */
.gc-biz-card .gc-card-foot{margin-top:auto; padding-top:12px}
.gc-biz-card .gc-biz-facts{margin-top:0; gap:6px}
.gc-biz-card .gc-fact{font-size:.7rem; padding:2px 8px}
.gc-biz-card .gc-card-line{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:11px; padding-top:11px;
  border-top:1px solid var(--gc-border);
  min-height:30px;
}
.gc-biz-card .gc-biz-web{
  display:inline-flex; align-items:center; gap:7px; min-width:0;
  font-size:.78rem; color:var(--gc-muted);
}
.gc-biz-card .gc-biz-web img{width:16px; height:16px; border-radius:4px; flex:none; background:var(--gc-surface-alt)}
.gc-biz-card .gc-biz-web span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gc-biz-card .gc-card-go{
  flex:none; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--gc-soft); color:var(--gc-accent-light);
  transition:background .18s ease, transform .18s ease;
}
.gc-biz-card:hover .gc-card-go{background:var(--gc-soft-2); transform:translateX(3px)}

/* ── States ──────────────────────────────────────────────────
   Closed: the property-site "SOLD" cue — the plate goes cold. The
   red Κλειστό chip in the fact rail is the r4 one, untouched. */
.gc-biz-card[data-closed="1"] .gc-biz-media{filter:grayscale(1) brightness(.62)}
.gc-biz-card[data-closed="1"] .gc-biz-name{color:var(--gc-muted)}
.gc-biz-card[data-closed="1"]:hover{border-color:var(--gc-border-strong)}
/* Featured: a firmer hairline. The gold badge on the plate shouts. */
.gc-biz-card[data-featured="1"]{border-color:var(--gc-border-strong)}
/* .gc-card-active (panel open) keeps its existing rule at line 240 */

@media (prefers-reduced-motion:reduce){
  .gc-biz-card,
  .gc-biz-card .gc-card-photo,
  .gc-biz-card .gc-card-go{transition:none}
  .gc-biz-card:hover,
  .gc-biz-card:hover .gc-card-photo,
  .gc-biz-card:hover .gc-card-go{transform:none}
}

/* ── Narrow ──────────────────────────────────────────────────
   The old phone rule set padding:14px on the card itself, which would
   now inset the plate from the card edge on every phone. It has been
   removed from the @media block further down; the card keeps padding:0
   and the body carries its own instead. */
@media(max-width:680px){
  .gc-biz-list{gap:14px}
  .gc-biz-card .gc-biz-body{padding:32px 14px 14px}
  .gc-biz-card .gc-card-crest{font-size:4.8rem}
}

/* 400px viewport: 352px of content, one 352px column, 220px plate. */
@media(max-width:430px){
  .gc-biz-card .gc-biz-body{padding:30px 14px 14px}
  .gc-biz-card .gc-card-chip{width:46px; height:46px; top:-23px; left:14px; border-radius:13px}
  .gc-biz-card .gc-card-chip img{padding:10px}
  .gc-biz-card .gc-biz-initial{font-size:1.24rem}
  .gc-biz-card .gc-card-crest{font-size:4.4rem; bottom:-13px}
  .gc-biz-card .gc-biz-name{font-size:.97rem}
  .gc-biz-card .gc-biz-cat{max-width:calc(100% - 84px)}
  .gc-biz-card .gc-biz-cat,
  .gc-biz-card .gc-biz-badges{top:9px}
  .gc-biz-card .gc-biz-cat{left:9px}
  .gc-biz-card .gc-biz-badges{right:9px}
  .gc-biz-card .gc-card-score{right:9px; bottom:10px}
}
.gc-biz-badges{display:flex; gap:6px; flex-wrap:wrap}
.gc-biz-meta{display:flex; flex-wrap:wrap; gap:12px; font-size:.82rem; color:var(--gc-muted); margin-bottom:8px; align-items:center}
.gc-biz-cat{background:var(--gc-soft); color:var(--gc-accent-light); padding:3px 10px; border-radius:20px; font-weight:600; font-size:.76rem}
.gc-biz-loc,.gc-biz-web{display:inline-flex; align-items:center; gap:4px}
/* Google Places: rating + street address on business cards */
.gc-biz-addr{display:inline-flex; align-items:center; gap:4px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gc-biz-rating{display:inline-flex; align-items:center; gap:4px; color:#ffc861; font-weight:700; font-size:.78rem}
.gc-biz-rcount{color:var(--gc-muted); font-weight:500}
/* Detail row on result cards: phone, founded, date added, closed badge */
.gc-biz-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.gc-fact{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;color:#93a2ba;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:7px;padding:3px 9px}
.gc-fact-added{color:#7f8fa8}
.gc-fact-closed{color:#ff9b9b;background:rgba(255,90,90,.10);border-color:rgba(255,90,90,.28);font-weight:700}
@media(max-width:640px){.gc-biz-facts{gap:6px}.gc-fact{font-size:.7rem;padding:2px 7px}}
.gc-detail-rating{display:inline-flex; align-items:center; gap:5px; color:#ffc861; font-weight:700}
.gc-detail-rating .gc-biz-rcount{color:var(--gc-muted); font-weight:500}
.gc-biz-desc{margin:0; font-size:.9rem; color:#aab6cc; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.gc-badge{display:inline-block; font-size:.66rem; font-weight:800; padding:3px 9px; border-radius:20px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap}
.gc-badge-featured{background:linear-gradient(135deg,#ffd36e,#f5a623); color:#5a3b00}
.gc-badge-verified{background:rgba(52,210,123,.18); color:#34d27b}
.gc-badge-premium{background:var(--gc-soft); color:var(--gc-accent-light)}
.gc-badge-pro{background:linear-gradient(135deg,var(--gc-accent),var(--gc-accent-deep)); color:#fff}
.gc-detail-pane{background:var(--gc-surface); border:1px solid var(--gc-border); border-radius:var(--gc-radius); display:flex; flex-direction:column; position:sticky; top:100px; height:calc(100vh - 120px); overflow:hidden; opacity:0; transform:translateX(16px); transition:.22s; pointer-events:none}
/* Without this the closed pane keeps display:flex and leaves a full viewport
   of dead scroll under every desktop result page. Author origin beats the UA
   [hidden] rule, so it has to be declared here. */
.gc-detail-pane[hidden]{display:none}
.gc-panel-open .gc-detail-pane{opacity:1; transform:none; pointer-events:auto}
.gc-dp-head{display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--gc-border); flex:none}
.gc-dp-label{font-size:.78rem; font-weight:700; color:var(--gc-muted); text-transform:uppercase; letter-spacing:.06em}
.gc-dp-close{background:none; border:none; cursor:pointer; color:var(--gc-muted); font-size:1.4rem; padding:2px 6px; border-radius:6px}
.gc-dp-close:hover{background:rgba(255,255,255,.06); color:#fff}
.gc-dp-scroll{flex:1; overflow-y:auto; padding:20px}
.gc-dp-loading{display:flex; align-items:center; justify-content:center; min-height:120px; color:var(--gc-muted); font-size:.9rem}
.gc-dp-cover{width:100%; height:150px; border-radius:12px; background:var(--gc-surface-alt) center/cover no-repeat; margin-bottom:16px; border:1px solid var(--gc-border)}
.gc-dp-title{font-size:1.18rem; font-weight:800; color:#fff; margin:0 0 8px}
.gc-dp-meta{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; font-size:.82rem; color:var(--gc-muted); align-items:center}
.gc-dp-desc{font-size:.9rem; color:#aab6cc; line-height:1.6; margin:0 0 14px}
.gc-dp-actions{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
/* Social + email row in the detail panel (C3) */
.gc-dp-social{display:flex; gap:8px; flex-wrap:wrap; margin:-6px 0 16px}
.gc-dp-social a{display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600;
  padding:8px 13px; border-radius:10px; border:1px solid var(--gc-border-strong);
  background:rgba(255,255,255,.03); color:var(--gc-ink); transition:.16s}
.gc-dp-social a:hover{color:#fff; border-color:var(--gc-accent); background:rgba(var(--gc-accent-rgb),.14)}
.gc-dp-social a svg{flex:none}
.gc-dp-social .gc-sc-fb:hover{border-color:#4b7bec; background:rgba(75,123,236,.16)}
.gc-dp-social .gc-sc-ig:hover{border-color:#d94f8c; background:rgba(217,79,140,.16)}
.gc-dp-claim{background:var(--gc-surface-alt); border-radius:10px; padding:14px 16px; font-size:.88rem; color:var(--gc-muted); border:1px solid var(--gc-border)}
.gc-dp-claim strong{display:block; color:#fff; font-size:.95rem; margin-bottom:4px}
.gc-biz-card.gc-card-active{border-color:var(--gc-accent); box-shadow:0 0 0 3px var(--gc-soft)}
.gc-dp-mobile-slot{display:none}
.gc-dp-mobile-slot.open{display:block; background:var(--gc-surface-alt); border:1px solid var(--gc-border); border-radius:14px; padding:16px; margin:4px 0 8px; position:relative}
.gc-dp-mobile-close{position:absolute; top:12px; right:12px; background:none; border:none; cursor:pointer; color:var(--gc-muted); font-size:1.2rem}

.gc-plans{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start}
.gc-plan{position:relative; background:var(--gc-surface); border:1px solid var(--gc-border); border-radius:20px; padding:32px 26px}
.gc-plan.featured{border-color:var(--gc-accent); box-shadow:0 0 0 3px var(--gc-soft)}
.gc-plan .ptag{position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 13px; border-radius:20px; white-space:nowrap}
.ptag-popular{background:var(--gc-accent); color:#fff}
.ptag-best{background:linear-gradient(135deg,#ffd36e,#f5a623); color:#5a3b00}
.gc-plan .pname{font-weight:700; font-size:1.05rem; color:#fff; margin-bottom:8px}
.gc-plan .pprice{font-size:2.6rem; font-weight:800; color:#fff; line-height:1; margin-bottom:4px}
.gc-plan .pprice small{font-size:.95rem; font-weight:500; color:var(--gc-muted)}
.gc-plan ul{list-style:none; padding:0; margin:20px 0 24px}
.gc-plan li{display:flex; gap:9px; align-items:flex-start; padding:7px 0; color:#c4cee0; font-size:.92rem}
.gc-plan li svg{color:var(--gc-accent-light); flex:none; margin-top:3px}

.gc-authwrap{max-width:440px; margin:0 auto; padding:130px 0 60px}
.gc-formcard{background:var(--gc-surface); border:1px solid var(--gc-border); border-radius:var(--gc-radius); padding:30px}
.gc-form label{display:block; font-size:.86rem; font-weight:600; color:#c4cee0; margin:14px 0 6px}
.gc-form input,.gc-form select,.gc-form textarea{width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--gc-border); background:var(--gc-surface-alt); color:var(--gc-ink); font-family:inherit; font-size:.96rem}
.gc-form input:focus,.gc-form select:focus,.gc-form textarea:focus{outline:none; border-color:var(--gc-accent); box-shadow:0 0 0 3px var(--gc-soft)}
.gc-pill{display:inline-block; background:var(--gc-soft); color:var(--gc-accent-light); padding:3px 10px; border-radius:20px; font-size:.76rem; font-weight:600}
.gc-alert{padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:.9rem}
.gc-alert-ok{background:rgba(52,210,123,.12); border:1px solid rgba(52,210,123,.4); color:#7ee2a8}
.gc-alert-err{background:rgba(255,90,90,.12); border:1px solid rgba(255,90,90,.4); color:#ff9b9b}

.gc-detail-cover{height:240px; background:radial-gradient(700px 300px at 50% 0,rgba(46,125,245,.3),transparent),linear-gradient(135deg,#0E1E44,#0A1228); margin-top:64px}
.gc-detail-head{margin-top:-90px; position:relative; z-index:2}
.gc-detail-card{background:var(--gc-surface); border:1px solid var(--gc-border); border-radius:var(--gc-radius); padding:30px}
.gc-detail-title{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:flex-start}
.gc-detail-title h1{font-size:2rem; margin:0}
.gc-actions{display:flex; gap:9px; flex-wrap:wrap; margin-top:16px}
.gc-detail-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:30px; margin-top:28px}
.gc-detail-grid h3{font-size:1.15rem; margin-bottom:10px}
.gc-info-row{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--gc-border); font-size:.92rem}
.gc-info-row .ic{color:var(--gc-accent-light)} .gc-info-row .lb{font-size:.74rem; color:var(--gc-muted); text-transform:uppercase; letter-spacing:.05em}
#gc-map{height:260px; border-radius:14px; border:1px solid var(--gc-border); background:var(--gc-surface-alt); overflow:hidden}

.gc-page-hero{padding:140px 0 50px; text-align:center; position:relative; overflow:hidden; background:radial-gradient(900px 400px at 50% 0,rgba(46,125,245,.16),transparent 65%),linear-gradient(165deg,#0A1228,#070C1A)}
.gc-page-hero h1{font-size:2.6rem} .gc-page-hero p{color:#c4cee0; max-width:560px; margin:0 auto}
.gc-prose{max-width:780px; margin:0 auto; color:#c4cee0}
.gc-prose h2{color:#fff; margin-top:32px} .gc-prose a{color:var(--gc-accent-light)}

@media(max-width:960px){
  .gc-hero-inner{grid-template-columns:1fr} .gc-globe-wrap{display:none}
  .gc-features,.gc-stats,.gc-cats{grid-template-columns:repeat(2,1fr)}
  .gc-plans{grid-template-columns:1fr; max-width:420px; margin:0 auto}
  .gc-footer-grid{grid-template-columns:1fr 1fr}
  .gc-detail-grid{grid-template-columns:1fr}
  .gc-results-layout.gc-panel-open{grid-template-columns:1fr} .gc-detail-pane{display:none}
}
@media(max-width:680px){
  .gc-hero{padding:120px 0 50px}
  .gc-features,.gc-stats,.gc-cats,.gc-footer-grid{grid-template-columns:1fr}
  .gc-resultbar{flex-direction:column; align-items:flex-start} .gc-resultbar-right{width:100%; justify-content:space-between}
  .gc-hero-actions{flex-direction:column} .gc-hero-actions .gc-btn{width:100%}
}


/* ── countries.php: plain country list, then category picker ── */
.gc-country-filter{display:flex;gap:10px;align-items:center;position:relative;margin:0 0 14px;flex-wrap:wrap}
.gc-country-filter .ic{position:absolute;left:14px;color:var(--gc-muted);display:flex;pointer-events:none}
.gc-country-filter input{flex:1;min-width:220px;padding:12px 14px 12px 42px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--gc-ink);font-size:.92rem}
.gc-country-filter input:focus{outline:none;border-color:var(--gc-accent);background:rgba(255,255,255,.06)}
.gc-country-count{color:var(--gc-muted);font-size:.85rem;margin:0 0 18px}
/* ── Country picker: region groups of tiles (r6) ──────────────
   Replaces the flat list of 52 rows that printed every city under every
   country — about 180 links before the visitor had chosen anything.
   Cities now wait for step 2. */
.gc-cgroup{margin:0 0 34px}
.gc-cgroup-head{display:flex; align-items:center; gap:10px; margin:0 0 14px;
  font-size:.82rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gc-muted)}
.gc-cgroup-head::after{content:''; flex:1; height:1px; background:rgba(255,255,255,.08)}
.gc-cgroup-n{order:3; font-size:.74rem; letter-spacing:0; color:var(--gc-muted); opacity:.8}
.gc-ctiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px}
.gc-ctiles.is-main-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}

.gc-ctile{position:relative; display:flex; align-items:center; gap:12px; padding:13px 14px;
  border-radius:14px; background:var(--gc-surface); border:1px solid rgba(255,255,255,.07);
  text-decoration:none; color:var(--gc-ink); transition:border-color .15s, transform .15s, background .15s}
.gc-ctile:hover{border-color:var(--gc-accent); transform:translateY(-2px); background:rgba(46,125,245,.08)}
.gc-ctile.is-main{padding:17px 16px; background:linear-gradient(150deg,rgba(46,125,245,.13),var(--gc-surface) 70%)}
.gc-ctile-body{display:flex; flex-direction:column; gap:2px; min-width:0}
.gc-ctile-name{font-weight:700; font-size:.96rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gc-ctile.is-main .gc-ctile-name{font-size:1.05rem}
/* Two short lines rather than one that wraps mid-phrase at tile width. */
.gc-ctile-meta{display:flex; flex-direction:column; align-items:flex-start; gap:0; line-height:1.4; font-size:.76rem; color:var(--gc-muted)}
.gc-ctile-meta b{color:var(--gc-accent-light); font-weight:700}
.gc-ctile-empty{opacity:.65}
.gc-ctile-dot{opacity:.5}
/* The same short code the globe draws, so the two read as one system.
   It took the flag's place on the left (2026-09-17): fixed width, so every
   name in a column starts at the same x. */
.gc-ctile-code{flex:none; width:42px; height:34px; display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:800; letter-spacing:.06em;
  color:rgba(191,220,255,.45); background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07);
  border-radius:9px}
.gc-ctile:hover .gc-ctile-code{color:#fff; border-color:var(--gc-accent)}
/* A country holding listings: accent badge and a brighter edge. Empty ones stay quiet. */
.gc-ctile.is-live{border-color:rgba(46,125,245,.28); background:linear-gradient(150deg,rgba(46,125,245,.10),var(--gc-surface) 65%)}
.gc-ctile.is-live .gc-ctile-code{color:#fff; background:rgba(46,125,245,.22); border-color:rgba(46,125,245,.45)}
.gc-ctile:not(.is-live) .gc-ctile-name{color:#c9d3e6; font-weight:600}
.gc-ctile:not(.is-live):hover .gc-ctile-name{color:var(--gc-ink)}
.gc-cgroup{scroll-margin-top:90px}
/* Region jump bar above the groups */
.gc-cjump{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px}
.gc-cjump a{display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:20px;
  font-size:.82rem; font-weight:600; color:#c9d3e6; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09); transition:border-color .15s, color .15s}
.gc-cjump a:hover{color:#fff; border-color:var(--gc-accent)}
.gc-cjump span{font-size:.72rem; color:var(--gc-muted)}

@media(max-width:560px){
  .gc-ctiles,.gc-ctiles.is-main-grid{grid-template-columns:1fr}
}
.gc-city-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.gc-city-chip{font-size:.78rem;color:#bcd0ee;background:rgba(93,157,255,.10);border:1px solid rgba(93,157,255,.20);border-radius:20px;padding:4px 11px;text-decoration:none}
.gc-city-chip:hover{background:rgba(93,157,255,.24);color:#fff}
.gc-city-chip.is-on{background:var(--gc-accent);border-color:var(--gc-accent);color:#fff;font-weight:700}
.gc-back-link{margin-bottom:18px;display:inline-flex}
.gc-step{margin-bottom:26px}
.gc-step-label{font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gc-muted);margin-bottom:10px;font-weight:700}
.gc-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.gc-cat-tile{display:flex;align-items:center;gap:10px;padding:14px;border-radius:12px;background:var(--gc-surface);border:1px solid rgba(255,255,255,.07);text-decoration:none;color:var(--gc-ink);transition:border-color .15s,transform .15s}
.gc-cat-tile:hover{border-color:var(--gc-accent);transform:translateY(-2px)}
.gc-cat-emoji{font-size:1.3rem;line-height:1}
.gc-cat-name{font-size:.9rem;font-weight:600}
@media(max-width:640px){.gc-cat-grid{grid-template-columns:1fr 1fr}.gc-cat-name{font-size:.8rem}}

/* ── Checkout (r6) ────────────────────────────────────────────
   checkout.php and payment-return.php. Deliberately plain: a page
   that is about to take money should look like a receipt, not a
   marketing panel. */
.gc-pay-table{width:100%; border-collapse:collapse; margin-top:14px; font-size:.9rem}
.gc-pay-table td{padding:9px 0; border-bottom:1px solid rgba(255,255,255,.07); color:var(--gc-muted)}
.gc-pay-table td:last-child{text-align:right; color:var(--gc-ink)}
.gc-pay-table tr:last-child td{border-bottom:none}
.gc-pay-features{list-style:none; padding:0; margin:14px 0 0}
.gc-pay-features li{position:relative; padding:6px 0 6px 22px; color:#c4cee0; font-size:.9rem}
.gc-pay-features li::before{content:'✓'; position:absolute; left:0; color:var(--gc-accent-light); font-weight:800}
.gc-pay-methods{display:flex; flex-direction:column; gap:8px; margin-top:18px}
.gc-btn-block{display:flex; align-items:center; justify-content:center; width:100%; text-align:center}
.gc-pay-ok{width:62px; height:62px; margin:0 auto; display:grid; place-items:center; border-radius:50%;
  color:#8fd6a8; background:rgba(63,185,110,.13); border:1px solid rgba(63,185,110,.35)}
/* The subscription strip on account.php */
.gc-sub-card{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 18px; margin-bottom:18px;
  border-radius:16px; border:1px solid var(--gc-border); background:linear-gradient(150deg,rgba(46,125,245,.12),var(--gc-surface) 70%)}
.gc-sub-card .gc-sub-tier{font-size:1.1rem; font-weight:800; color:#fff}
.gc-sub-card .gc-sub-meta{font-size:.82rem; color:var(--gc-muted)}
.gc-sub-card .gc-sub-actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.gc-sub-pill{font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:20px; background:rgba(63,185,110,.16); color:#8fd6a8; border:1px solid rgba(63,185,110,.3)}
.gc-sub-pill.is-off{background:rgba(255,255,255,.05); color:var(--gc-muted); border-color:var(--gc-border)}
@media(max-width:560px){.gc-sub-card .gc-sub-actions{margin-left:0; width:100%}}

/* ── C5: rotating promo box (r6) ──────────────────────────────
   Paid event slots on the homepage. The whole section is absent
   when nothing is promoted — an empty ad box reads as a broken site. */
.gc-promo{background:var(--gc-surface); border:1px solid var(--gc-border); border-radius:20px; padding:18px}
.gc-promo-head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.gc-promo-all{margin-left:auto; font-size:.82rem; font-weight:600; color:var(--gc-accent-light)}
.gc-promo-all:hover{color:#fff}
/* Every slide stacks in one grid cell, so the box keeps the height of the
   tallest and nothing jumps as they cycle. */
.gc-promo-stage{display:grid}
.gc-promo-slide{grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .45s ease}
.gc-promo-slide.is-on{opacity:1; visibility:visible}
.gc-promo-link{display:flex; align-items:center; gap:18px; text-decoration:none; color:var(--gc-ink)}
.gc-promo-poster{flex:none; width:96px; height:128px; border-radius:12px; overflow:hidden;
  background:var(--gc-surface-alt); border:1px solid var(--gc-border); display:block}
.gc-promo-poster img{width:100%; height:100%; object-fit:cover; display:block}
.gc-promo-body{display:flex; flex-direction:column; gap:5px; min-width:0}
.gc-promo-tag{align-self:flex-start; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:20px; background:rgba(46,125,245,.18); color:var(--gc-accent-light);
  border:1px solid rgba(46,125,245,.32)}
.gc-promo-title{font-size:1.25rem; font-weight:800; color:#fff; line-height:1.25}
.gc-promo-sub{font-size:.92rem; color:#c4cee0}
.gc-promo-meta{font-size:.84rem; color:var(--gc-muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.gc-promo-meta b{color:var(--gc-ink)}
.gc-promo-link:hover .gc-promo-title{color:var(--gc-accent-light)}
.gc-promo-dots{display:flex; gap:7px; justify-content:center; margin-top:14px}
.gc-promo-dot{width:7px; height:7px; padding:0; border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.22); transition:.2s}
.gc-promo-dot.is-on{background:var(--gc-accent); width:20px; border-radius:20px}
@media(max-width:560px){
  .gc-promo-link{gap:13px}
  .gc-promo-poster{width:74px; height:99px}
  .gc-promo-title{font-size:1.05rem}
}

/* ── Events page (r6) ─────────────────────────────────────── */
.gc-ev-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px}
.gc-ev-card{display:flex; flex-direction:column; background:var(--gc-surface); border:1px solid var(--gc-border);
  border-radius:18px; overflow:hidden; transition:border-color .15s, transform .15s}
.gc-ev-card:hover{border-color:var(--gc-accent); transform:translateY(-3px)}
.gc-ev-card.is-promoted{border-color:rgba(46,125,245,.45); box-shadow:0 0 0 3px var(--gc-soft)}
.gc-ev-poster{position:relative; aspect-ratio:3/4; background:var(--gc-surface-alt); overflow:hidden}
.gc-ev-poster img{width:100%; height:100%; object-fit:cover; display:block}
.gc-ev-poster img.gc-ev-ph{object-fit:contain; opacity:.85}
/* The date block, punched into the poster corner */
.gc-ev-date{position:absolute; top:10px; left:10px; display:grid; place-items:center; line-height:1;
  padding:7px 10px; border-radius:11px; background:rgba(7,14,30,.82); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14)}
.gc-ev-date b{font-size:1.12rem; font-weight:800; color:#fff}
.gc-ev-date i{font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.1em; color:var(--gc-accent-light)}
.gc-ev-tag{position:absolute; top:10px; right:10px; font-size:.62rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; padding:4px 9px; border-radius:20px; background:var(--gc-accent); color:#fff}
.gc-ev-body{display:flex; flex-direction:column; gap:7px; padding:15px 16px 17px}
.gc-ev-title{margin:0; font-size:1.05rem; font-weight:700; line-height:1.3}
.gc-ev-sub{margin:0; font-size:.88rem; color:#c4cee0}
.gc-ev-meta{display:flex; flex-direction:column; gap:4px; font-size:.8rem; color:var(--gc-muted)}
.gc-ev-meta span{display:inline-flex; align-items:center; gap:6px}
.gc-ev-meta svg{flex:none}
.gc-ev-desc{margin:2px 0 0; font-size:.855rem; line-height:1.5; color:#c4cee0}
.gc-ev-body .gc-btn{margin-top:auto; align-self:flex-start}
@media(max-width:560px){.gc-ev-grid{grid-template-columns:1fr}}

/* ── r7: the help icon in the nav ─────────────────────────────
   How It Works used to take a full slot in the link row, which is
   part of why that row would not fit on one line in three languages.
   Same footprint as the language button beside it. */
.gc-nav-help{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  flex:none; border-radius:10px; color:#fff; background:rgba(255,255,255,.06);
  border:1px solid var(--gc-border); transition:.15s}
.gc-nav-help:hover{background:rgba(46,125,245,.28); border-color:var(--gc-accent)}
.gc-nav-help.active{background:var(--gc-accent); border-color:var(--gc-accent)}
/* 2026-10-24: the help button shows a lowercase i, the same Georgia italic as the globe's (i) button. */
.gc-nav-help-i{font:italic 700 19px/1 Georgia,'Times New Roman',serif; margin-top:-1px}

/* ── r7: hero country / city navigation strips ────────────────
   Replaces six hardcoded "popular" pills. Every country and city,
   scrollable, with a button at each end. */
.gc-navstrip{margin:16px 0 0}
.gc-navstrip-head{display:flex; align-items:center; gap:10px; margin-bottom:7px}
.gc-navstrip-head .lbl{font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gc-muted)}
.gc-navstrip-all{margin-left:auto; font-size:.78rem; font-weight:600; color:var(--gc-accent-light)}
.gc-navstrip-all:hover{color:#fff}
.gc-navstrip-row{display:flex; align-items:center; gap:7px}
.gc-navstrip-btn{flex:none; width:28px; height:28px; display:grid; place-items:center; cursor:pointer;
  color:#cfe0fb; background:rgba(255,255,255,.06); border:1px solid var(--gc-border);
  border-radius:9px; transition:.15s}
.gc-navstrip-btn:hover:not(:disabled){color:#fff; background:rgba(46,125,245,.28); border-color:var(--gc-accent)}
.gc-navstrip-btn:disabled{opacity:.3; cursor:default}
/* The track itself: one line, scrolls sideways, no visible scrollbar. */
.gc-navstrip-track{display:flex; gap:7px; overflow-x:auto; flex:1; min-width:0;
  padding:2px 0; scrollbar-width:none; -ms-overflow-style:none; outline:none}
.gc-navstrip-track::-webkit-scrollbar{display:none}
.gc-navstrip-track:focus-visible{outline:2px solid var(--gc-accent); outline-offset:3px; border-radius:10px}
.gc-navstrip.is-static .gc-navstrip-btn{display:none}
.gc-chip{flex:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:.82rem; font-weight:600; color:#bcd0ee; text-decoration:none;
  background:rgba(93,157,255,.10); border:1px solid rgba(93,157,255,.20);
  border-radius:20px; padding:6px 12px; transition:.15s}
.gc-chip:hover{background:rgba(93,157,255,.26); color:#fff; border-color:var(--gc-accent)}
.gc-chip .n{font-size:.68rem; font-weight:800; color:var(--gc-accent-light);
  background:rgba(46,125,245,.18); border-radius:20px; padding:1px 6px}
.gc-chip.has-n{border-color:rgba(93,157,255,.36)}

/* ── r7: the slim results header ──────────────────────────────
   What replaces the full hero once a search has run. */
.gc-rhead{padding:96px 0 0; background:linear-gradient(165deg,#0A1228,#070C1A)}
.gc-rhead-inner{display:flex; align-items:center; gap:10px}
.gc-rhead-search{position:relative; display:flex; align-items:center; gap:8px; flex:1; min-width:0}
.gc-rhead-search .ic{position:absolute; left:13px; color:var(--gc-muted); display:flex; pointer-events:none}
.gc-rhead-search input{flex:1; min-width:0; padding:11px 13px 11px 40px; border-radius:11px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); color:var(--gc-ink); font-size:.92rem}
.gc-rhead-search input:focus{outline:none; border-color:var(--gc-accent); background:rgba(255,255,255,.07)}
.gc-rhead-home{flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
  color:#cfe0fb; background:rgba(255,255,255,.06); border:1px solid var(--gc-border); transition:.15s}
.gc-rhead-home:hover{color:#fff; background:rgba(46,125,245,.28); border-color:var(--gc-accent)}
/* The results section sat under a 150px hero; it needs its own top gap now. */
.gc-rhead + .gc-results-section{padding-top:26px}

/* ── r7: the category place picker ────────────────────────── */
.gc-pick{width:min(94vw,430px); padding:0; border:1px solid var(--gc-border); border-radius:18px;
  background:var(--gc-surface); color:var(--gc-ink); box-shadow:var(--gc-shadow)}
.gc-pick::backdrop{background:rgba(4,8,18,.72); backdrop-filter:blur(3px)}
.gc-pick-form{padding:20px 22px 22px}
.gc-pick-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:16px}
.gc-pick-head h2{margin:4px 0 0; font-size:1.3rem}
.gc-pick-x{margin-left:auto; flex:none; width:30px; height:30px; display:grid; place-items:center; cursor:pointer;
  font-size:1.3rem; line-height:1; color:var(--gc-muted); background:none; border:none; border-radius:8px}
.gc-pick-x:hover{color:#fff; background:rgba(255,255,255,.07)}
.gc-pick-lbl{display:block; font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gc-muted); margin:12px 0 6px}
.gc-pick-sel{width:100%}
.gc-pick-note{margin:14px 0 0; font-size:.8rem; color:var(--gc-muted)}
.gc-pick-actions{margin-top:16px}

/* ── r7b: strip drag, spacing, bigger event posters ───────── */
/* Hold and drag the strip. grab/grabbing says so before you try. */
.gc-navstrip-track{cursor:grab; user-select:none}
.gc-navstrip-track.is-dragging{cursor:grabbing; scroll-behavior:auto}
/* Chips must not be draggable as images/links, or the browser starts its own
   drag and the strip never moves. */
.gc-navstrip-track .gc-chip{-webkit-user-drag:none; user-select:none}
/* The hero buttons sat right under the city strip with nothing between them. */
.gc-hero-actions{margin-top:24px}

/* Event posters, twice the size. Two per row on a normal screen so the page
   does not read as a wall of thumbnails, one on a phone. */
.gc-ev-grid{grid-template-columns:repeat(auto-fill,minmax(440px,1fr)); gap:26px}
.gc-ev-card{flex-direction:row}
.gc-ev-poster{flex:none; width:46%; max-width:260px; aspect-ratio:3/4}
.gc-ev-body{flex:1; min-width:0; padding:20px 22px; gap:9px; justify-content:center}
.gc-ev-title{font-size:1.3rem}
.gc-ev-sub{font-size:.96rem}
.gc-ev-meta{font-size:.86rem; gap:6px}
.gc-ev-desc{font-size:.9rem}
@media(max-width:900px){
  .gc-ev-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  /* Back to a stacked card, with the poster full width and full height. */
  .gc-ev-card{flex-direction:column}
  .gc-ev-poster{width:100%; max-width:none}
  .gc-ev-body{padding:15px 16px 17px}
  .gc-ev-title{font-size:1.05rem}
}

/* ── r7b: member listing form ─────────────────────────────── */
.gc-form-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.gc-catpick{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:6px; margin-top:8px}
.gc-catpick-item{display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); font-size:.88rem; transition:.15s}
.gc-catpick-item:hover{border-color:var(--gc-accent)}
.gc-catpick-item input{flex:none; margin:0; accent-color:var(--gc-accent)}
.gc-catpick-item:has(input:checked){background:rgba(46,125,245,.14); border-color:var(--gc-accent)}
/* Over the plan's allowance: dimmed, and the script stops it being ticked. */
.gc-catpick-item.is-locked{opacity:.42}
.gc-catpick-item.is-locked:hover{border-color:rgba(255,255,255,.07)}
@media(max-width:560px){.gc-form-2{grid-template-columns:1fr}}

/* ── r8: a bigger grab area on the strips ─────────────────────
   The row was exactly chip-height, so the only reliably grabbable
   pixels were the gaps between chips. Padding gives the whole band
   a surface to hold, and the chips themselves now accept the drag. */
.gc-navstrip-track{padding:6px 2px; -webkit-user-select:none}
.gc-navstrip-track .gc-chip{-webkit-touch-callout:none}
/* 2026-09-24: `pointer-events:none` on a chip while the track is being
   dragged is GONE. It is what made the country and city buttons dead for
   four releases: pointerdown fires before mousedown, so a chip made inert
   there was inert at the moment the browser picked the mousedown target,
   and the click that followed belonged to the track, not the link. The
   drag does not need it — a pointer capture on the track already takes the
   move events away from the chips. `is-dragging` now changes the CURSOR
   and nothing else.
   A chip is a link: say so with the cursor. Inheriting the track's `grab`
   made every one of them look like scenery rather than a button. */
.gc-navstrip-track .gc-chip{cursor:pointer}

/* ── r8: the world map on countries.php ───────────────────────
   2:1, because the projection is equirectangular and the script
   sizes the canvas to match. */
.gc-worldmap{position:relative; margin:0 0 26px; border-radius:18px; overflow:hidden;
  border:1px solid var(--gc-border);
  background:radial-gradient(120% 90% at 50% 18%, rgba(46,125,245,.16), transparent 62%),
             linear-gradient(165deg,#0C1A3C,#070C1A)}
.gc-worldmap canvas{display:block; width:100%; height:auto; outline:none; cursor:grab; touch-action:pan-y}
.gc-worldmap canvas.is-dragging{cursor:grabbing}
.gc-worldmap canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--gc-accent)}
.gc-worldmap-hint{position:absolute; left:0; right:0; bottom:8px; margin:0; text-align:center;
  font-size:.74rem; color:var(--gc-muted); pointer-events:none; opacity:.8}
@media(hover:none){.gc-worldmap-hint{display:none}}
/* 200 countries is a long page; keep the tiles tighter than before. */
.gc-ctiles{grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px}
.gc-ctile{padding:11px 12px; min-height:64px}
.gc-ctile-name{font-size:.9rem}

/* ── 2026-09-17: map controls, country page, country results hub ── */
.gc-worldmap{min-height:170px}
.gc-worldmap.is-focus{margin:0 0 28px; min-height:280px}
.gc-map-tools{position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:6px; z-index:2}
.gc-map-tools button{width:32px; height:32px; display:grid; place-items:center; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:1rem; line-height:1; color:#dbe7ff; background:rgba(8,16,36,.78); border:1px solid rgba(143,196,255,.25);
  border-radius:9px; transition:background .15s, border-color .15s}
.gc-map-tools button:hover{background:rgba(46,125,245,.35); border-color:var(--gc-accent); color:#fff}
.gc-country-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 18px}
.gc-country-actions .gc-back-link{margin:0}
.gc-btn-n{display:inline-block; margin-left:6px; padding:1px 8px; border-radius:20px; font-size:.75rem; font-weight:800; background:rgba(255,255,255,.22)}

.gc-hub{display:flex; flex-direction:column; gap:12px; margin:4px 0 20px; padding:14px 16px;
  border-radius:14px; background:var(--gc-surface); border:1px solid rgba(255,255,255,.07)}
.gc-hub-row{display:flex; align-items:flex-start; gap:12px}
.gc-hub-lbl{flex:none; width:84px; padding-top:5px; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gc-muted)}
.gc-hub-chips{display:flex; flex-wrap:wrap; gap:6px; min-width:0}
.gc-hub-chips .gc-city-chip{font-size:.8rem}
.gc-hub-cat{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; font-size:.8rem; font-weight:600;
  color:#dbe7ff; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); text-decoration:none;
  transition:border-color .15s, background .15s}
.gc-hub-cat i{font-style:normal}
.gc-hub-cat:hover{color:#fff; border-color:var(--gc-accent); background:rgba(46,125,245,.14)}
@media(max-width:640px){
  .gc-hub-row{flex-direction:column; gap:6px}
  .gc-hub-lbl{width:auto; padding:0}
  .gc-map-tools{top:8px; right:8px}
  .gc-map-tools button{width:28px; height:28px}
}.gc-footer-credit{color:inherit; opacity:.75; font-size:.8rem}
.gc-footer-credit:hover{opacity:1; color:var(--gc-accent-light)}

/* ── 2026-09-17: result pages ── */
.gc-pager{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin:28px 0 8px}
.gc-pager > :first-child{justify-self:start}
.gc-pager > :last-child{justify-self:end}
.gc-pager-n{font-size:.85rem; font-weight:700; color:var(--gc-muted); font-variant-numeric:tabular-nums}
.gc-pager-end{font-size:.85rem; color:var(--gc-muted)}
@media(max-width:560px){ .gc-pager{grid-template-columns:1fr 1fr} .gc-pager-n{display:none} }

/* ── 2026-09-17: event image thumbnails ── */
.gc-ev-thumbs{display:flex; gap:6px; margin:4px 0 12px; overflow-x:auto; scrollbar-width:thin; max-width:100%}
.gc-ev-thumbs a{flex:none; width:52px; height:52px; border-radius:8px; overflow:hidden; border:2px solid transparent; opacity:.7; transition:opacity .15s, border-color .15s}
.gc-ev-thumbs a:hover, .gc-ev-thumbs a:focus-visible{opacity:1}
.gc-ev-thumbs a.is-on{border-color:var(--gc-accent); opacity:1}
.gc-ev-thumbs img{width:100%; height:100%; object-fit:cover; display:block}

/* ── 2026-09-17: language menu for 19 languages ── */
.gc-lang-menu{min-width:0; width:min(420px, calc(100vw - 32px)); max-height:min(70vh, 520px); overflow-y:auto;
  display:none; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2px}
.gc-lang-menu.open{display:grid}
.gc-lang-menu a{gap:10px; padding:8px 10px}
.gc-lang-menu a b{flex:none; width:26px; font-size:.72rem; font-weight:800; letter-spacing:.04em; color:var(--gc-muted)}
.gc-lang-menu a span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gc-lang-menu a.active{background:rgba(46,125,245,.16)}
.gc-lang-menu a.active b{color:var(--gc-accent-light)}
@media(max-width:480px){ .gc-lang-menu{grid-template-columns:1fr} }

/* ── 2026-09-17: the nav bar and hero at every width ──────────
   Found by measuring: in German the bar ran past the window at 1100px, and
   on a phone the hero column was 560px wide inside a 444px page, so the
   heading, the search button and the chips were cut off (body has
   overflow-x:hidden, which hid it instead of scrolling).

   The bar now steps down: tighter links on a small laptop, the menu button
   from 1040px, and on a phone only the logo, the language button, help and
   the menu — the login and "add business" links move inside the menu. */
.gc-only-mobile{display:none}

@media(max-width:1400px){
  .gc-nav-inner{gap:14px}
  .gc-nav-links{gap:2px}
  .gc-nav-links a{padding:8px 9px; font-size:.86rem}
  .gc-nav-cta{gap:9px}
}
@media(max-width:1200px){
  .gc-nav-links{display:none}
  .gc-nav-toggle{display:block}
  .gc-nav-links.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:#0c1430; border-top:1px solid var(--gc-border); padding:12px; gap:2px; margin:0}
  .gc-nav-links.open a{padding:10px 12px; font-size:.95rem}
  .gc-nav-links.open .gc-only-mobile{display:block}
}
@media(max-width:700px){
  .gc-nav-ghost{display:none}
  .gc-nav-cta > .gc-btn-primary{display:none}
  .gc-logo-tag{display:none}
  .gc-logo-badge{width:38px; height:38px}
  .gc-logo-name{font-size:1.02rem}
  .gc-logo{gap:8px}
  /* 2026-11-03 (owner): the language menu hung from its button's right edge, but on a phone the help (i) and the
     menu button sit to its right, so the menu ran ~90px off the left of the screen. It opens under the bar now,
     full width, like the phone menu (.gc-nav is the positioned box). */
  .gc-lang{position:static}
  /* 100vh on a phone is the screen WITHOUT the browser's address bar, so the end of the list sat below the visible
     screen and could not be scrolled to (owner: "it stops at Russian"). svh = the screen with the bars showing. */
  .gc-lang-menu{top:100%; left:12px; right:12px; width:auto; max-height:calc(100vh - 140px); max-height:calc(100svh - 90px);
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y}
}
/* 2026-11-03: on the smallest phones (320-380px) the bar was ~40px too wide and the menu button sat off the
   screen, so the menu could not be opened. The bar alone gets tighter here; the rest of the page is unchanged. */
@media(max-width:380px){
  .gc-nav > .gc-container{padding:0 14px}
  .gc-nav-inner{gap:8px}
  .gc-nav-cta{gap:6px}
  .gc-logo-badge{width:34px; height:34px}
  .gc-logo-name{font-size:.94rem}
  .gc-lang-btn{padding:7px 8px; gap:4px}
  .gc-nav-help{width:32px; height:32px}
  .gc-nav-toggle{padding:4px 2px}
}

/* A grid or flex item never shrinks below its content unless it is told to,
   which is what pushed the hero column past the screen. */
.gc-hero-inner > *{min-width:0}
.gc-hero-copy{min-width:0}
.gc-hero h1{overflow-wrap:break-word; hyphens:auto}
.gc-hero .sub{overflow-wrap:break-word}
.gc-hero-search{max-width:min(540px, 100%)}
.gc-hero-search input{min-width:0}
@media(max-width:560px){
  .gc-hero h1{font-size:clamp(1.9rem, 7.6vw, 2.6rem)}
  .gc-hero .sub{font-size:1rem}
  .gc-hero-search{flex-wrap:wrap}
  .gc-hero-search .gc-btn{width:100%}
}

/* ── 2026-09-18: the hero copy must sit above the globe ───────
   The globe is drawn 115% wide so it bleeds out of its column — which also
   put it on top of the right-hand half of the country and city strips, where
   clicking a chip hit the globe instead of the link and nothing happened.
   The copy column now wins the stack; the globe still bleeds, behind it. */
.gc-hero-copy{position:relative; z-index:4}
.gc-globe-wrap{z-index:1}

/* ── 2026-09-18: the picture on a result card ─────────────────
   The fade at the bottom of the plate was 66% tall, so two thirds of every
   photograph was washed out — "half visible half not". It now covers the
   bottom third, which is all the overlays there need. */
.gc-biz-card .gc-card-scrim{height:34%; background:linear-gradient(to top, var(--gc-surface) 6%, rgba(17,26,51,.72) 46%, transparent)}
.gc-biz-card .gc-card-photo{object-position:center}

/* The address line: the place a visitor actually reads first. */
.gc-biz-card .gc-biz-meta{font-size:.84rem}
.gc-biz-card .gc-biz-loc{font-weight:700; color:var(--gc-accent-light)}
.gc-biz-card .gc-biz-addr{font-weight:600; color:#cfdcf4}

/* ── 2026-09-18: events use the business card, and open a page ──
   The list was its own card design and led nowhere. It is now the same card
   as a search result — one card on the whole site — and each one opens
   event.php. A poster is portrait, so it is shown whole (contain) over a
   blurred copy of itself, rather than cropped to the plate. */
.gc-ev-item .gc-biz-media{aspect-ratio:4 / 3; max-height:320px}
.gc-ev-item .gc-card-photo{object-fit:contain; padding:10px 10px 22px}
.gc-ev-item:hover .gc-card-photo{transform:none}
.gc-ev-item .gc-card-wash{opacity:.55; filter:blur(22px) saturate(1.4) brightness(.8)}
.gc-ev-item.is-promoted{border-color:rgba(46,125,245,.45); box-shadow:0 0 0 3px var(--gc-soft)}

.gc-ev-page{padding-top:110px}
.gc-ev-back{margin-bottom:18px; display:inline-flex}
.gc-ev-detail{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:30px; align-items:start}
.gc-ev-detail-media{background:var(--gc-surface); border:1px solid var(--gc-border); border-radius:var(--gc-radius); padding:12px}
.gc-ev-detail-img{width:100%; max-height:70vh; object-fit:contain; border-radius:10px; display:block}
.gc-ev-detail-media .gc-ev-thumbs{margin:10px 0 0}
.gc-ev-detail-body h1{font-size:2rem; margin:10px 0 6px; text-wrap:balance}
.gc-ev-detail-sub{margin:0 0 14px; color:var(--gc-accent-light); font-weight:600}
.gc-ev-detail-facts{display:flex; flex-direction:column; gap:10px; margin:18px 0; padding:16px 18px;
  background:var(--gc-surface); border:1px solid var(--gc-border); border-radius:14px}
.gc-ev-fact{display:flex; align-items:center; gap:10px; color:#dbe7ff; font-size:.95rem}
.gc-ev-fact svg{flex:none; color:var(--gc-accent-light)}
.gc-ev-detail-text{color:#c4cee0; line-height:1.7; margin:0 0 20px; max-width:66ch}
.gc-ev-detail-actions{display:flex; gap:10px; flex-wrap:wrap}
@media(max-width:860px){ .gc-ev-detail{grid-template-columns:1fr} .gc-ev-page{padding-top:92px} }

/* ── 2026-09-18: the whole site sits 15% smaller ──────────────
   At 100% browser zoom the design felt too large (owner). Zooming the root
   element scales everything together — type, spacing, the grid — and the
   layout viewport grows with it, so the media queries below still fire at
   the right real-world widths. */
body{zoom:.85}

/* ── Sponsor slot ──────────────────────────────────────────────────
   A paid banner under the hero on the front page, and above the
   results after a search. Deliberately small and left-aligned: it
   should read as a card someone paid for, not as site content, and
   it must never push the businesses below the fold. Managed in
   Admin → Sponsors; the whole block is absent when none is live. */
.gc-sponsors-wrap:empty{display:none}
.gc-sponsors{max-width:640px; margin:22px 0 0; padding:12px 14px 13px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--gc-border); border-left:3px solid var(--gc-accent);
  border-radius:var(--gc-radius-sm)}
.gc-sponsors-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px}
.gc-sponsors-tag{font-size:.6rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gc-muted)}
.gc-sponsors-cta{font-size:.72rem; font-weight:700; color:var(--gc-muted); border-bottom:1px dashed var(--gc-border-strong)}
.gc-sponsors-cta:hover{color:var(--gc-accent-light)}
.gc-sponsors-row{display:flex; flex-wrap:wrap; gap:10px}
/* 2026-10-16: the Events card at the end of the sponsor row, front page only.
   The same card as a sponsor, so the three line up as one set. */
.gc-sponsors.has-aside{max-width:860px}
.gc-sponsor-ev .gc-sponsor-pic{display:flex; align-items:center; justify-content:center;
  background:rgba(var(--gc-accent-rgb),.14); color:var(--gc-accent-light)}
.gc-sponsors-solo{margin-top:22px; display:flex}
.gc-sponsors-solo .gc-sponsor{flex:0 1 300px}
/* Hero, second row: Add, Consulates, Social clubs side by side. */
/* 2026-11-03 (owner): row 1 = Explore + Add Yours, one line in every language (Greek, German, Hungarian are long) */
.gc-hero-row1,.gc-hero-row2{display:flex; gap:12px; flex-wrap:nowrap; width:100%}
.gc-hero-row1 .gc-btn-lg,.gc-hero-row2 .gc-btn-lg{padding:16px 20px; white-space:nowrap; flex:0 1 auto}
@media(max-width:1280px){.gc-hero-row1 .gc-btn-lg,.gc-hero-row2 .gc-btn-lg{padding:14px 15px; font-size:.95rem; gap:7px}}
@media(max-width:680px){.gc-hero-row2{flex-direction:column} .gc-hero-row2 .gc-btn{width:100%}
  /* 2026-11-03 (owner): on a phone "Add Yours" goes under Social clubs (on a wide screen it sits beside Explore) */
  .gc-hero-row1{display:contents} .gc-hero-row1 > .gc-btn-primary{order:1} .gc-hero-actions > .gc-hero-row2{order:2} .gc-hero-row1 > .gc-btn-ghost{order:3}}
.gc-sponsor{flex:1 1 260px; min-width:0; display:flex; align-items:center; gap:11px;
  padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.035);
  border:1px solid var(--gc-border); color:var(--gc-ink); transition:border-color .16s,transform .16s}
a.gc-sponsor:hover{border-color:var(--gc-accent); transform:translateY(-1px); color:var(--gc-ink)}
.gc-sponsor-pic{flex:0 0 auto; width:74px; height:46px; border-radius:7px; overflow:hidden; background:var(--gc-surface-alt)}
.gc-sponsor-pic img{width:100%; height:100%; object-fit:cover; display:block}
.gc-sponsor-body{min-width:0; display:flex; flex-direction:column; gap:2px}
.gc-sponsor-name{font-weight:800; font-size:.92rem; line-height:1.25}
.gc-sponsor-text{font-size:.78rem; color:var(--gc-muted); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
@media (max-width:640px){
  .gc-sponsors{max-width:none; margin-top:16px}
  .gc-sponsor{flex:1 1 100%}
}
/* With a sponsor showing, the results section does not also need its full
   top padding — the two together left a hole above the first business. */
.gc-sponsors-wrap:has(.gc-sponsors)+.gc-results-section{padding-top:22px}

/* ════════════════════════════════════════════════════════════
   PHOTOS (2026-09-21)
   A business may show pictures: 5 on the free plan, 20 on Premium,
   no limit on Premium Plus. The number is the PLAN's rule and lives in
   data/plans.json — none of it is decided here. These are only the
   three places a photo is seen: the member's own form, the business
   page, and the detail panel beside the results.
   ════════════════════════════════════════════════════════════ */

/* The member's editing grid: each picture with its own Remove tick. */
.gc-photogrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px; margin-top:10px}
.gc-photoitem{position:relative; border:1px solid var(--gc-border); border-radius:10px; padding:6px;
  background:rgba(255,255,255,.03); display:grid; gap:5px}
.gc-photoitem img{width:100%; height:104px; object-fit:cover; border-radius:7px; display:block; background:var(--gc-surface-alt)}
.gc-photorm{display:flex; align-items:center; gap:6px; font-size:.75rem; color:var(--gc-muted); cursor:pointer}
.gc-photorm input{accent-color:#e05b5b; margin:0}
/* A ticked photo is shown as going, so nothing is deleted by surprise. */
.gc-photoitem:has(input:checked){border-color:#e05b5b; opacity:.55}
.gc-filein{width:100%; font-size:.85rem; color:var(--gc-muted); padding:10px 12px;
  border:1px dashed var(--gc-border-strong); border-radius:10px; background:rgba(255,255,255,.02)}
.gc-filein:disabled{opacity:.45; cursor:not-allowed}

/* The business page. Square tiles, each opening the full picture. */
.gc-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:12px}
.gc-gallery-item{display:block; border-radius:10px; overflow:hidden; border:1px solid var(--gc-border);
  background:var(--gc-surface-alt); transition:border-color .16s, transform .16s}
.gc-gallery-item:hover{border-color:var(--gc-accent); transform:translateY(-2px)}
.gc-gallery-item img{width:100%; height:130px; object-fit:cover; display:block}

/* The detail panel beside the results. Narrower, so a smaller tile. */
.gc-dp-shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:6px; margin:0 0 14px}
.gc-dp-shots a{display:block; border-radius:8px; overflow:hidden; border:1px solid var(--gc-border)}
.gc-dp-shots a:hover{border-color:var(--gc-accent)}
.gc-dp-shots img{width:100%; height:66px; object-fit:cover; display:block}

/* ════════════════════════════════════════════════════════════
   CONSULATES + EVENTS ON THE FRONT PAGE (2026-09-21)
   ════════════════════════════════════════════════════════════ */

/* The consulate button in the hero. Its own look — neither the blue
   primary nor a plain ghost — because it opens a different KIND of
   thing: an official address, not a business. */
.gc-btn-consul{background:rgba(255,255,255,.05); color:var(--gc-ink);
  border:1px solid var(--gc-border-strong); box-shadow:inset 0 0 0 1px rgba(var(--gc-accent-rgb),.12)}
.gc-btn-consul:hover{background:rgba(var(--gc-accent-rgb),.16); border-color:var(--gc-accent); color:#fff}
.gc-btn-consul svg{flex:none; opacity:.85}

/* A category hub with nothing indexed yet: pick a place and search for
   real, rather than stopping at "no results". */
.gc-pickhere{margin-top:18px}
.gc-pickhere-lead{color:var(--gc-muted); font-size:.92rem; margin:0 0 10px; text-align:center}

/* The six kinds of event. Used on the events page and on the homepage.
   A kind holding nothing is .is-empty: named, but not a link, so it can
   never promise a page that turns out to be blank. */
.gc-evtypes{margin-bottom:26px}
.gc-evtypes.is-soon{text-align:center; padding:26px 18px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid var(--gc-border); border-radius:var(--gc-radius)}
.gc-evtypes-h{margin:0 0 6px; font-size:1.5rem}
.gc-evtypes-soon{margin:0 0 4px; font-weight:800; color:var(--gc-accent-light); letter-spacing:.02em}
.gc-evtypes-lead{margin:0 0 16px; color:var(--gc-muted); font-size:.92rem}

.gc-evtype-row{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.gc-evtype{display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px;
  font-size:.86rem; font-weight:700; line-height:1; color:var(--gc-ink);
  background:rgba(255,255,255,.04); border:1px solid var(--gc-border); transition:border-color .16s,background .16s}
a.gc-evtype:hover{border-color:var(--gc-accent); background:rgba(var(--gc-accent-rgb),.14); color:#fff}
.gc-evtype.is-on{border-color:var(--gc-accent); background:rgba(var(--gc-accent-rgb),.18)}
.gc-evtype.is-empty{color:var(--gc-muted); opacity:.72; cursor:default}
.gc-evtype i{font-style:normal; font-size:1rem; line-height:1}
.gc-evtype .n{font-size:.72rem; font-weight:800; color:var(--gc-muted);
  background:rgba(255,255,255,.07); border-radius:999px; padding:2px 6px}
.gc-evtype-home{margin-top:18px}

/* The kind, as a tag on a card or a detail page. */
.gc-evtag{display:inline-flex; align-items:center; gap:5px; margin:0 0 6px;
  font-size:.72rem; font-weight:800; letter-spacing:.02em; color:var(--gc-accent-light);
  background:rgba(var(--gc-accent-rgb),.13); border-radius:999px; padding:3px 9px}
.gc-evtag i{font-style:normal}
a.gc-evtag:hover{background:rgba(var(--gc-accent-rgb),.22); color:#fff}

/* The three next events on the homepage. */
.gc-evhome-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px}
.gc-evhome{display:flex; gap:12px; padding:11px; border-radius:var(--gc-radius-sm);
  background:var(--gc-surface); border:1px solid var(--gc-border); color:var(--gc-ink);
  transition:border-color .16s, transform .16s}
.gc-evhome:hover{border-color:var(--gc-accent); transform:translateY(-2px); color:var(--gc-ink)}
.gc-evhome-pic{flex:0 0 auto; width:86px; height:108px; border-radius:9px; overflow:hidden; background:var(--gc-surface-alt)}
.gc-evhome-pic img{width:100%; height:100%; object-fit:cover; display:block}
.gc-evhome-body{min-width:0; display:flex; flex-direction:column; gap:3px; justify-content:center}
.gc-evhome-title{font-weight:800; font-size:.98rem; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.gc-evhome-meta{font-size:.8rem; color:var(--gc-muted)}
@media (max-width:640px){
  .gc-evtypes.is-soon{padding:20px 14px}
  .gc-evhome-pic{width:70px; height:88px}
}

/* ── 2026-09-24: photos at full size, and one Share button ────
   Both are used by the listing page, the results detail panel and
   the event page, so they live here once rather than three times. */

/* The lightbox. A fixed sheet over the page — the photo opens where
   the visitor already is instead of in a browser tab they then have
   to close. Built by js/greekconnect.js on first use. */
.gc-lb{position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  gap:6px; padding:clamp(12px,4vw,44px); background:rgba(4,8,18,.92); backdrop-filter:blur(4px)}
.gc-lb[hidden]{display:none}
body.gc-lb-on{overflow:hidden}
.gc-lb-fig{margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px}
.gc-lb-img{max-width:100%; max-height:calc(100vh - 120px); width:auto; height:auto; display:block;
  border-radius:12px; box-shadow:0 30px 90px rgba(0,0,0,.6)}
.gc-lb-cap{font-size:.82rem; color:#b9c6dd; text-align:center}
.gc-lb-cap[hidden]{display:none}
.gc-lb-x{position:absolute; top:14px; right:16px; width:40px; height:40px; display:grid; place-items:center;
  cursor:pointer; font-size:1.05rem; line-height:1; color:#dbe6f8; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); border-radius:12px; transition:.15s}
.gc-lb-x:hover{color:#fff; background:rgba(46,125,245,.4); border-color:var(--gc-accent)}
.gc-lb-nav{flex:none; width:46px; height:46px; display:grid; place-items:center; cursor:pointer;
  font-size:1.9rem; line-height:1; color:#dbe6f8; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14); border-radius:50%; transition:.15s}
.gc-lb-nav:hover{color:#fff; background:rgba(46,125,245,.4); border-color:var(--gc-accent)}
/* One photo needs no arrows; hidden rather than removed so the flex
   centring of the figure does not shift between sets. */
.gc-lb.is-single .gc-lb-nav{visibility:hidden}
@media(max-width:560px){
  .gc-lb-nav{position:absolute; bottom:16px; width:42px; height:42px}
  .gc-lb-prev{left:16px} .gc-lb-next{right:16px}
  .gc-lb-img{max-height:calc(100vh - 150px)}
}

/* The Share control: a button, and the menu it opens where the browser
   has no share sheet of its own. Positioned relative so the menu hangs
   off the button rather than off the page. */
.gc-share{position:relative; display:inline-flex}
.gc-share-btn{display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:inherit}
.gc-share-menu{position:absolute; z-index:60; top:calc(100% + 7px); left:0; min-width:176px; padding:6px;
  display:flex; flex-direction:column; background:#0f1830; border:1px solid var(--gc-border);
  border-radius:12px; box-shadow:var(--gc-shadow)}
/* Near the right edge of a narrow panel the menu would spill off-screen. */
.gc-dp-actions .gc-share-menu, .gc-share-menu.is-right{left:auto; right:0}
.gc-share-item{display:block; width:100%; text-align:left; padding:8px 11px; border-radius:8px;
  font-size:.86rem; font-weight:600; color:#cfe0fb; background:none; border:none; cursor:pointer;
  font-family:inherit; text-decoration:none; transition:.12s}
.gc-share-item:hover{background:rgba(46,125,245,.24); color:#fff}

/* Detail-panel photo tiles: five on show, the rest carried hidden so the
   lightbox still opens the whole gallery. */
.gc-dp-shot-hide{display:none !important}
.gc-dp-shots a{position:relative}
.gc-dp-shot-more span{position:absolute; inset:0; display:grid; place-items:center;
  font-size:.92rem; font-weight:800; color:#fff; background:rgba(6,12,26,.66)}

/* The listing page's own gallery, and the share row above it. */
.gc-detail-share{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px}
.gc-gallery-item{position:relative}

/* An event's pictures beside its text, not only under the poster. The
   poster column is a fixed width, so a second set here is where the
   room actually is. */
.gc-ev-shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; margin:6px 0 22px}
.gc-ev-shots a{display:block; border-radius:10px; overflow:hidden; border:1px solid var(--gc-border); transition:.15s}
.gc-ev-shots a:hover{border-color:var(--gc-accent); transform:translateY(-2px)}
.gc-ev-shots img{width:100%; height:92px; object-fit:cover; display:block}
.gc-ev-shots-h{font-size:.74rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gc-muted); margin:22px 0 4px}

/* ── 2026-09-24: countries.php without the tile wall ──────────
   The region row is the way in now that the 203 tiles are off by
   default, so it is a row of real buttons rather than page anchors. */
.gc-cjump a.is-on{background:var(--gc-accent); border-color:var(--gc-accent); color:#fff}
.gc-cjump a.is-on span{background:rgba(255,255,255,.22); color:#fff}
.gc-region-note{margin:18px 0 0; font-size:.9rem; color:var(--gc-muted)}

/* ── 2026-09-24: one fixed scale on a phone ───────────────────
   The viewport meta in head.php stops pinch-zoom on the page. These
   three rules finish the job and make sure the layout it locks to is
   the right one.

   touch-action:manipulation removes the double-tap-to-zoom delay, so a
   tap on a chip or a card is acted on at once instead of after 300ms.

   The 15% shrink (body{zoom:.85}) is a DESKTOP decision. A media query
   is evaluated against the real viewport width, but `zoom` scales the
   layout inside it — so on a 360px phone the page was being laid out as
   if it were 424px wide while every breakpoint still fired at 360. That
   mismatch is exactly how content ends up clipped off the right edge.
   Below the tablet breakpoint the site sits at its true size. */
body{touch-action:manipulation}
@media(max-width:860px){ body{zoom:1} }

/* The globe and the world map are the exception the owner asked for:
   they still zoom. touch-action:none hands every touch to their own
   handlers — a one-finger drag to spin or pan, two fingers to zoom —
   rather than letting the browser treat it as a page gesture. */
.gc-globe-canvas, #gcWorldMap{touch-action:none}

/* A phone has no room for a 40-character name on one line. */
@media(max-width:560px){
  .gc-lb-x{top:8px; right:8px; width:36px; height:36px}
  .gc-share-menu{left:auto; right:0}
  .gc-ev-shots{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .gc-ev-shots img{height:76px}
}

/* ── 2026-09-24: the hero has to LAND on the page, not stop dead ──
   The owner: "if it doesnt FADE down to sponsored and color changes
   drastically thats bad."

   The hero's own gradient ends on its own colour, and the page below it
   is a different, darker one, so the join read as a horizontal seam
   straight across the screen just above the sponsor strip.

   A last 200px of the hero now dissolves into the page background, so
   there is no edge to see. It sits at z-index 1 — under .gc-hero-inner
   (3) and under .gc-page-hero's content (2, set below) — so it fades the
   BACKGROUND and never the buttons or the headline sitting on it.

   This is not part of the background-picture feature: it applies whether
   a photograph is switched on or not, because the seam was there either
   way. */
.gc-hero::after,
.gc-page-hero::after{
  content:''; position:absolute; z-index:1; left:0; right:0; bottom:0;
  height:200px; pointer-events:none;
  /* rgba(7,12,26,0) is --gc-bg with no alpha: fading to `transparent`
     travels through grey in some engines, which shows as a dirty band. */
  background:linear-gradient(to bottom, rgba(7,12,26,0) 0%, rgba(7,12,26,.55) 55%, var(--gc-bg) 100%);
}
/* .gc-page-hero's heading is in normal flow, so without this the fade
   above would paint over the text instead of behind it. */
.gc-page-hero > .gc-container{position:relative; z-index:2}

/* ── The cover band on a business page ────────────────────────
   It was painting whatever was in thumbnail_url at its natural size and
   TILING it — and for most crawled rows that value is a 32x32 website
   icon, so the top of the page became a wallpaper of repeating little
   favicons. Only a real photograph gets painted here now (the class is
   added in listing.php), and it is scaled to cover instead of repeated. */
.gc-detail-cover.has-photo{
  background-size:cover; background-position:center center; background-repeat:no-repeat;
}

/* A business with no photographs says so, quietly, instead of leaving a
   gap where the gallery would be. */
.gc-nophotos{
  margin:12px 0 0; padding:22px; border:1px dashed var(--gc-border-strong);
  border-radius:var(--gc-radius-sm); color:var(--gc-muted); font-size:.9rem; text-align:center;
}

/* ── 2026-09-24: the card's mark sits IN FRONT, always ────────
   Owner: "these icons or whatever fading inside half out the image
   thumbnail to be first shown front of thumbnail always instead".

   The mark overhangs the picture by design — that is what ties the two
   halves of the card together — but it was reading as though it were
   *behind* the photograph: the plate is dark, the chip's background was
   the same dark, and nothing separated them. It now carries its own
   stacking order and an opaque face, so it is unmistakably on top
   whatever the picture behind it happens to be.

   2026-09-26: it still showed only its lower half (owner, screenshot:
   "its always half shown"). The body was given z-index 2, which makes
   it a stacking context of its own, so the chip's z-index 3 only counts
   INSIDE the body. The plate's layers are not in the body: the fade at
   its foot (.gc-card-scrim) is 3 and the corner labels are 4, and both
   out-rank a body at 2, so the fade painted straight over the top half
   of every chip. The body now sits above every plate layer. It has no
   background, so the only thing it covers is the part of the chip that
   overhangs the picture, which is the point. */
.gc-biz-card .gc-biz-body{z-index:5}
.gc-biz-card .gc-card-chip{
  z-index:3;
  background:var(--gc-surface);
  box-shadow:0 0 0 3px var(--gc-surface), 0 8px 20px rgba(0,0,0,.6);
}
.gc-biz-card .gc-card-chip img{background:var(--gc-surface)}

/* ── 2026-09-24: the globe's controls ─────────────────────────
   Pushed to the right-hand edge of the planet rather than sitting a
   finger's width inside it, and given a fourth button: (i), which is
   where the "drag to spin · scroll to zoom" tip lives now. The tip used
   to be printed across the bottom on every visit.
   -2% lines the stack up with the canvas, which is 115% of this box and
   centred, so it overflows 7.5% each side. The wrap is hidden below
   960px, so this never reaches a phone. */
.gc-globe-tools{right:-2%; bottom:58px}
.gc-globe-tools button.gc-globe-i{font-style:italic; font-family:Georgia,serif; font-size:16px}
.gc-globe-tools button.is-on{color:#fff; border-color:var(--gc-accent); background:rgba(46,125,245,.32)}
/* The tip, when asked for: beside the buttons, not across the planet. */
.gc-globe-hint{
  left:auto; right:calc(-2% + 40px); bottom:58px; text-align:right;
  max-width:min(240px, 60%); opacity:1; color:#cfe0fb;
  background:rgba(12,22,46,.88); border:1px solid var(--gc-border);
  border-radius:10px; padding:8px 11px; backdrop-filter:blur(8px);
  font-size:.74rem; line-height:1.45;
}
.gc-globe-hint[hidden]{display:none}

/* ── 2026-09-26: "Is this your business? Update info" ─────────
   The box on the business page and in the results panel, and the
   request form in claim.php. The form is a free request, not a plan,
   so it deliberately looks like the member forms and not like pricing. */
.gc-claim-box{margin-top:18px; padding:18px; background:var(--gc-surface-alt)}
.gc-claim-box p{font-size:.88rem; margin:6px 0 12px}
.gc-claim-box .gc-btn svg,.gc-dp-claim .gc-btn svg{flex:none; margin-right:2px; vertical-align:-2px}

.gc-claim-hero{padding-bottom:34px}
.gc-claim-hero h1{font-size:2.3rem; margin:4px 0 8px}
.gc-claim-biz{font-size:.98rem}
.gc-claim-biz a{color:#fff; font-weight:700}
.gc-claim{padding-top:28px}
.gc-claim-lead{color:#c4cee0; margin:0 0 16px; font-size:1rem}
.gc-claim-err{padding:14px 18px; margin-bottom:14px; border-color:#7a2b2b; color:#ffb4b4}

.gc-claim-form{padding:26px 28px}
.gc-hp{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.gc-claim-step{border:0; margin:0 0 26px; padding:0; min-width:0}
.gc-claim-step[hidden]{display:none}
.gc-claim-step legend{display:flex; align-items:center; gap:10px; padding:0; margin:0 0 12px;
  font-size:1.08rem; font-weight:800; color:#fff}
.gc-claim-n{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:.82rem; background:var(--gc-soft); color:var(--gc-accent-light); border:1px solid rgba(var(--gc-accent-rgb),.35)}
.gc-claim-hint{font-size:.84rem; color:var(--gc-muted); margin:8px 0 0}
.gc-claim-hint[hidden]{display:none}

/* Radio tiles: who is asking, and how they can prove it. */
.gc-claim-roles{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.gc-claim-methods{display:grid; gap:8px}
.gc-form .gc-claim-opt{display:flex; align-items:center; gap:10px; margin:0; padding:12px 14px; cursor:pointer;
  border-radius:12px; border:1px solid var(--gc-border-strong); background:rgba(255,255,255,.03);
  color:var(--gc-ink); font-size:.92rem; font-weight:500; transition:border-color .15s, background .15s}
.gc-form .gc-claim-opt:hover{border-color:var(--gc-accent)}
.gc-form .gc-claim-opt:has(input:checked){border-color:var(--gc-accent); background:rgba(var(--gc-accent-rgb),.14)}
.gc-claim-opt .ic{flex:none; font-size:1.15rem; line-height:1}
.gc-claim-opt b{font-weight:700}
.gc-claim-method{align-items:flex-start}
.gc-claim-method .ic{margin-top:2px}
.gc-claim-method .tx{display:flex; flex-direction:column; gap:3px; min-width:0}
.gc-claim-method small{color:var(--gc-muted); font-size:.82rem; line-height:1.45}
.gc-claim-best{font-style:normal; font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 7px; border-radius:20px; background:rgba(46,204,113,.14); color:#7fe0a6; margin-left:6px; vertical-align:2px}
.gc-claim-form input[type=radio],
.gc-claim-form input[type=checkbox]{flex:none; width:18px; height:18px; padding:0; margin:0; accent-color:var(--gc-accent)}
.gc-claim-method input[type=radio]{margin-top:2px}
.gc-form .gc-claim-check{display:flex; align-items:flex-start; gap:10px; margin:16px 0 0; font-weight:500; cursor:pointer}
.gc-form .gc-claim-check input{margin-top:2px}
.gc-claim-confirm{padding:14px; border-radius:12px; background:var(--gc-surface-alt); border:1px solid var(--gc-border)}
.gc-claim-free{font-size:.82rem; margin:10px 0 0; text-align:center}

/* A field the person has changed shows that it has. */
.gc-form .is-changed{border-color:rgba(46,204,113,.7); box-shadow:0 0 0 3px rgba(46,204,113,.12)}

/* The thank-you. */
.gc-claim-done{text-align:center; padding:36px 28px}
.gc-claim-done h2{margin:10px 0 4px}
.gc-claim-done p{max-width:560px; margin-left:auto; margin-right:auto}
.gc-claim-done-ic{width:58px; height:58px; margin:0 auto; border-radius:50%; display:grid; place-items:center;
  font-size:1.6rem; color:#7fe0a6; background:rgba(46,204,113,.12); border:1px solid rgba(46,204,113,.35)}
.gc-claim-note{font-size:.9rem; color:#f0c674}
.gc-claim-code{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px;
  margin:20px auto; padding:16px 18px; max-width:460px; border-radius:14px;
  background:var(--gc-surface-alt); border:1px dashed rgba(var(--gc-accent-rgb),.55)}
.gc-claim-code span{font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gc-muted)}
.gc-claim-code b{font-family:ui-monospace,Consolas,Menlo,monospace; font-size:1.55rem; letter-spacing:.08em; color:#fff}
.gc-claim-snippet{display:block; max-width:560px; margin:0 auto 14px; padding:10px 12px; border-radius:10px; text-align:left;
  background:var(--gc-bg); border:1px solid var(--gc-border); color:#c4cee0; font-size:.8rem; overflow-x:auto; white-space:nowrap}
@media(max-width:560px){
  .gc-claim-roles{grid-template-columns:1fr}
  .gc-claim-form{padding:20px 16px}
  .gc-claim-hero h1{font-size:1.8rem}
}

/* 2026-10-16: OpenStreetMap results loading in after the page (index.php #gcOsmLate). */
.gc-osm-late{display:flex; align-items:center; justify-content:center; gap:10px; margin:22px 0 6px; color:var(--gc-muted); font-size:.88rem}
.gc-osm-spin{width:16px; height:16px; border-radius:50%; border:2px solid var(--gc-border); border-top-color:var(--gc-accent); animation:gcOsmSpin .8s linear infinite}
@keyframes gcOsmSpin{to{transform:rotate(360deg)}}
.gc-biz-card.is-late{animation:gcLateIn .45s ease-out}
@keyframes gcLateIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){.gc-osm-spin,.gc-biz-card.is-late{animation:none}}

/* 2026-10-16: source of a result card, admins only (includes/result-card.php).
   Colour only, no text (owner): blue Google, green OpenStreetMap, orange web page,
   grey entered by hand. */
.gc-src-badge{position:absolute; right:12px; top:12px; z-index:6; width:14px; height:14px; border-radius:50%; opacity:.85; box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.gc-src-google{background:#1A73E8}
.gc-src-osm{background:#34A853}
.gc-src-web{background:#FB542B}
.gc-src-manual{background:#9CA3AF}

/* 2026-10-21 (owner): attributions.php, one block per data source */
.gc-attr{padding:16px 0;border-top:1px solid var(--gc-border)}
.gc-attr:first-child{border-top:0}
.gc-attr h3{margin:0 0 6px}
.gc-attr p{margin:2px 0}

/* 2026-10-21 (owner): a country with no listings says so, and its page says the site is still looking */
.gc-ctile-none{display:block; font-size:.74rem; color:var(--gc-muted); font-style:italic}
.gc-country-empty{margin:14px 0 0; padding:12px 14px; border:1px dashed var(--gc-border-strong); border-radius:10px; color:var(--gc-muted); max-width:70ch}

/* 2026-10-22 (owner): a country searched with nothing found - say so and offer two ways on. */
.gc-none-here{margin-top:14px;display:grid;gap:16px;justify-items:center}
.gc-none-here h3{margin:0;font-size:1.05rem;line-height:1.45;max-width:560px}
.gc-none-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* 2026-10-22 (owner: "check every page at phone width and fix what breaks"). On a phone the filter
   dropdowns cut their own words ("Doctors & He…", "All specialtie…"), so each takes a full row; the
   toggle buttons (Rated only, Nearby) stay two to a row. The countries search icon is anchored to the
   input row: when the form wraps on a phone it used to sit in the middle of the whole form, on top of
   the Search button. The two Events buttons on the home page keep a gap when they wrap. */
@media(max-width:480px){
  .gc-filterbar .gc-sort-select{flex:1 1 100%}
}
.gc-country-filter .ic{top:15px}
.gc-ev-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}