/* assets/style.css — Midnight minimal palette */
:root{
  --bg:#0B1E3F;
  --bg-elev:#0F254F;
  --primary:#1E3A8A;
  --accent:#3B82F6;
  --tint:#E0ECFF;
  --text:#0B1E3F;
  --muted:#5B6B85;
  --card:#FFFFFF;
  --border:#D9E2F2;
  --green:#16A34A;
  --red:#9F1F2A;
  --gold:#F59E0B;
  --radius:4px;
  --shadow:0 1px 2px rgba(11,30,63,.08), 0 8px 24px rgba(11,30,63,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter,'Segoe UI',Arial,sans-serif;
  font-size:16px; line-height:1.6;
  background:var(--bg); color:var(--tint);
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1180px; margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}
h1,h2,h3,h4{font-weight:700; line-height:1.25; margin:0 0 .5em}
h1{font-size:2rem}
h2{font-size:1.4rem}
h3{font-size:1.15rem}

/* Header */
.site-header{background:var(--bg-elev); border-bottom:1px solid rgba(255,255,255,.06); padding:14px 0; position:sticky; top:0; z-index:20}
.header-inner{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.brand{color:#fff; font-weight:800; font-size:1.15rem; text-decoration:none; letter-spacing:-.01em}
.header-search{display:flex; flex:1; min-width:260px; gap:8px}
.header-search input{flex:1; padding:10px 12px; border:1px solid rgba(255,255,255,.18); background:#0A1B3A; color:#fff; border-radius:var(--radius); font-size:.95rem}
.header-search input::placeholder{color:#7e8ca8}
.header-nav{display:flex; gap:14px; align-items:center}
.header-nav a{color:#fff; opacity:.92}

/* Main wrapper */
.site-main{padding:28px 20px 60px}

/* Cards / listings on dark bg */
.card{background:var(--card); color:var(--text); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
.card h3{margin:0 0 6px}
.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr} .header-nav .btn-sm{display:none} }

/* Listing tile */
.tile{background:var(--card); color:var(--text); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
.tile .tile-img{aspect-ratio: 16/10; background:#EDF2FB; object-fit:cover; width:100%}
.tile .tile-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.tile .tile-meta{font-size:.85rem; color:var(--muted)}
.tile .tile-foot{display:flex; justify-content:space-between; align-items:center; margin-top:8px}
.badge{display:inline-block; padding:3px 8px; border-radius:999px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.badge-open{background:#DCFCE7; color:#136D33}
.badge-closed{background:#FEE2E2; color:var(--red)}
.badge-premium{background:#FEF3C7; color:#92400E}
.badge-sponsored{background:#E0ECFF; color:#1E3A8A}

/* Buttons */
.btn{display:inline-block; padding:10px 16px; border-radius:var(--radius); font-weight:600; border:1px solid transparent; cursor:pointer; font-size:.95rem; text-decoration:none}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:#2563EB; text-decoration:none}
.btn-ghost{background:transparent; color:var(--tint); border-color:rgba(255,255,255,.18)}
.btn-light{background:#fff; color:var(--primary); border-color:var(--border)}
.btn-sm{padding:7px 11px; font-size:.85rem}
.btn-danger{background:var(--red); color:#fff}
.btn-block{display:block; width:100%; text-align:center}

/* Forms */
.form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.form-row label{font-weight:600; color:var(--text)}
.form-row input, .form-row textarea, .form-row select{
  padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); font:inherit; background:#fff; color:var(--text)
}
textarea{min-height:120px; resize:vertical}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:700px){ .form-grid{grid-template-columns:1fr} }

/* Hero */
.hero{background:linear-gradient(180deg,#0F254F 0%, var(--bg) 100%); padding:54px 0 32px; border-radius:var(--radius); margin-bottom:28px}
.hero h1{color:#fff; font-size:2.4rem; margin-bottom:8px}
.hero p{color:var(--tint); opacity:.85; margin:0 0 22px; max-width:640px}
.hero form{display:flex; gap:8px; flex-wrap:wrap; max-width:680px}
.hero input{flex:1; min-width:240px; padding:14px 16px; border:1px solid rgba(255,255,255,.18); background:#0A1B3A; color:#fff; border-radius:var(--radius)}

/* Section */
.section{margin:32px 0}
.section-head{display:flex; justify-content:space-between; align-items:end; margin-bottom:14px; color:#fff}
.section-head a{color:var(--tint); opacity:.8; font-size:.9rem}

/* Listing detail */
.listing-hero{display:grid; grid-template-columns:1.6fr 1fr; gap:22px; margin-bottom:24px}
.listing-hero .gallery{background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.listing-hero .gallery img{aspect-ratio:16/9; object-fit:cover; width:100%}
.listing-side{background:var(--card); color:var(--text); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
.listing-side h1{font-size:1.5rem; margin-bottom:4px}
.listing-side .row{display:flex; gap:8px; align-items:center; margin:6px 0; font-size:.95rem}
@media (max-width:900px){ .listing-hero{grid-template-columns:1fr} }

.cols{display:grid; grid-template-columns:2fr 1fr; gap:22px}
@media (max-width:900px){ .cols{grid-template-columns:1fr} }

.panel{background:var(--card); color:var(--text); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:18px}
.panel h2{margin-top:0}

.hours-table{width:100%; border-collapse:collapse}
.hours-table td{padding:6px 0; border-bottom:1px solid #EEF2F8}
.hours-table tr.today{background:#F0F7FF}
.hours-table tr.today td{font-weight:700}

.review{border-bottom:1px solid #EEF2F8; padding:12px 0}
.review:last-child{border-bottom:0}
.stars{color:var(--gold); letter-spacing:2px}

#map{height:340px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}

/* Flash */
.flash{padding:12px 14px; border-radius:var(--radius); margin-bottom:16px; font-weight:500}
.flash-success{background:#DCFCE7; color:#136D33}
.flash-error{background:#FEE2E2; color:var(--red)}

/* Footer */
.site-footer{padding:30px 0; background:#08183A; color:var(--tint); margin-top:48px; border-top:1px solid rgba(255,255,255,.05)}
.footer-inner{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:24px; align-items:center}
.footer-inner a{color:var(--tint); display:inline-block; margin-right:14px; opacity:.85}
@media(max-width:700px){ .footer-inner{grid-template-columns:1fr} }

/* Pagination */
.pagination{display:flex; gap:10px; align-items:center; justify-content:center; margin:24px 0; color:var(--tint)}
.pagination-info{opacity:.8}

/* Admin */
.admin-shell{display:grid; grid-template-columns:240px 1fr; gap:22px}
.admin-side{background:var(--bg-elev); border-radius:var(--radius); padding:18px}
.admin-side a{display:block; color:var(--tint); padding:8px 10px; border-radius:var(--radius); margin-bottom:4px}
.admin-side a.active, .admin-side a:hover{background:rgba(255,255,255,.06); text-decoration:none}
.admin-main{min-width:0}
@media(max-width:900px){ .admin-shell{grid-template-columns:1fr} }
.table{width:100%; background:#fff; color:var(--text); border-collapse:collapse; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.table th, .table td{padding:10px 12px; border-bottom:1px solid #EEF2F8; text-align:left; font-size:.92rem; vertical-align:top}
.table th{background:#F6F9FF; color:var(--primary); font-weight:700}
.table tr:last-child td{border-bottom:0}
.tag{display:inline-block; padding:2px 8px; border-radius:999px; font-size:.75rem; background:#E0ECFF; color:#1E3A8A; font-weight:600}
.toolbar{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; align-items:center}
.toolbar form{display:flex; gap:8px}
.right{margin-left:auto}

.thumbs{display:flex; gap:8px; flex-wrap:wrap}
.thumb{width:96px; height:96px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--border)}

.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.kpi{background:#fff; color:var(--text); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.kpi b{font-size:1.6rem; display:block; color:var(--primary)}
@media(max-width:900px){ .kpi-grid{grid-template-columns:repeat(2,1fr)} }

/* Category chips */
.chips{display:flex; gap:10px; flex-wrap:wrap}
.chip{background:#0F254F; color:var(--tint); padding:8px 14px; border-radius:999px; font-size:.9rem; border:1px solid rgba(255,255,255,.12)}
.chip:hover{background:#13306A; text-decoration:none}

/* Placeholder image */
.placeholder{background:linear-gradient(135deg,#E0ECFF,#F6F9FF); color:var(--primary); display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; font-weight:700}

/* =========================================================
   CityStars applied design layer — portable PHP directory
   ========================================================= */
body.citystars-directory{background:#f6f7fb!important;color:#1f2933;font-family:Arial,Helvetica,sans-serif;}
body.citystars-directory a{color:#263c97}
body.citystars-directory .container{max-width:1180px;margin:0 auto;padding-left:20px;padding-right:20px;}
.cs-topbar{background:#263c97;color:#fff;font-size:14px;}
.cs-topbar-inner{display:flex;justify-content:space-between;align-items:center;min-height:46px;gap:18px;}
.cs-account-links{display:flex;gap:12px;align-items:center;}
.cs-account-links a,.cs-account-links span{color:#fff;text-decoration:none;}
.cs-local-label{font-weight:700;letter-spacing:.2px;}
.cs-main-header{background:#fff;box-shadow:0 6px 20px rgba(20,33,61,.08);position:sticky;top:0;z-index:40;}
.cs-header-grid{display:grid;grid-template-columns:220px 1fr 130px;gap:26px;align-items:center;min-height:92px;}
.cs-logo img{max-width:205px;height:auto;display:block;}
.cs-header-search{display:flex;border:2px solid #edf0f7;border-radius:999px;background:#fff;overflow:hidden;box-shadow:0 10px 30px rgba(38,60,151,.08);}
.cs-header-search input{flex:1;border:0;padding:17px 22px;font-size:16px;outline:none;background:#fff;color:#222;}
.cs-header-search button,.cs-browse-btn{background:#ffb703;color:#141414;border:0;font-weight:800;padding:15px 24px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;cursor:pointer;box-shadow:0 8px 20px rgba(255,183,3,.35);}
.cs-header-search button{border-radius:0;min-width:120px;}
.cs-browse-btn:hover,.cs-header-search button:hover{text-decoration:none;filter:brightness(.96);}
.cs-nav{background:#10205f;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12);}
.cs-nav-inner{display:flex;gap:2px;align-items:center;overflow-x:auto;white-space:nowrap;}
.cs-nav a{color:#fff;text-decoration:none;padding:15px 16px;font-weight:700;font-size:14px;display:block;}
.cs-nav a:hover{background:#ffb703;color:#111;text-decoration:none;}
.cs-nav .cs-list-link{margin-left:auto;background:#ffb703;color:#111;}
.site-main{padding:0 0 60px!important;background:#f6f7fb;}
body.citystars-directory .flash{margin-top:20px;}
.hero{position:relative;background:linear-gradient(90deg,rgba(16,32,95,.94),rgba(38,60,151,.78)),url('citystars/images/business01.jpg') center/cover!important;border-radius:0!important;margin:0 0 46px!important;padding:90px 0 94px!important;color:#fff;overflow:hidden;}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 30%,rgba(255,183,3,.28),transparent 34%);pointer-events:none;}
.hero>.container{position:relative;z-index:1;}
.hero h1{font-size:54px!important;line-height:1.05!important;max-width:720px;margin-bottom:18px!important;color:#fff!important;font-weight:900!important;letter-spacing:-1.5px;}
.hero p{font-size:20px!important;max-width:680px;color:rgba(255,255,255,.9)!important;margin-bottom:30px!important;}
.hero form{background:#fff;border-radius:14px;padding:10px;box-shadow:0 18px 45px rgba(0,0,0,.2);max-width:850px!important;display:grid!important;grid-template-columns:1fr 1fr auto;gap:8px!important;}
.hero input{background:#f5f7fb!important;color:#111!important;border:1px solid #e5e9f2!important;border-radius:10px!important;padding:16px!important;}
.hero .btn,.hero button{background:#ffb703!important;color:#111!important;border:0!important;border-radius:10px!important;font-weight:900!important;padding:15px 26px!important;}
.section{margin:42px auto!important;max-width:1180px;padding:0 20px;}
.section-head{color:#121826!important;margin-bottom:20px!important;}
.section-head h2{font-size:31px!important;font-weight:900!important;color:#121826!important;}
.section-head a{color:#263c97!important;font-weight:800!important;}
.chips{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px!important;}
.chip{background:#fff!important;border:1px solid #eef1f7!important;border-radius:14px!important;padding:16px 18px!important;color:#172033!important;font-weight:800!important;box-shadow:0 8px 24px rgba(20,33,61,.06)!important;text-decoration:none!important;}
.chip:before{content:"★";color:#ffb703;margin-right:8px;}
.chip:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(38,60,151,.15)!important;color:#263c97!important;}
.grid.cols-4,.grid.cols-3,.grid.cols-2{gap:22px!important;}
.tile,.card,.panel,.listing-side{background:#fff!important;color:#172033!important;border:1px solid #eef1f7!important;border-radius:18px!important;box-shadow:0 12px 35px rgba(20,33,61,.08)!important;overflow:hidden;}
.tile{text-decoration:none!important;transition:.2s ease;}
.tile:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(38,60,151,.16)!important;}
.tile .tile-img{aspect-ratio:16/11!important;background:#e9edf7!important;}
.tile .placeholder{background:linear-gradient(135deg,#263c97,#10205f)!important;color:#fff!important;font-size:42px!important;font-weight:900!important;display:flex!important;align-items:center!important;justify-content:center!important;}
.tile .tile-body{padding:20px!important;}
.tile .tile-meta{color:#667085!important;font-weight:700!important;}
.tile h3{font-size:20px!important;color:#121826!important;font-weight:900!important;}
.badge{border-radius:999px!important;font-weight:900!important;}
.badge-open{background:#e7f8ec!important;color:#16703a!important;}
.badge-closed{background:#feecec!important;color:#9a1c1c!important;}
.badge-premium,.badge-sponsored{background:#fff0bf!important;color:#8a5a00!important;}
.btn,.button,.btn-action{border-radius:999px!important;font-weight:900!important;text-decoration:none!important;}
.btn-primary{background:#263c97!important;color:#fff!important;border:0!important;}
.btn-light,.btn-ghost{background:#fff!important;color:#263c97!important;border:1px solid #e5e9f2!important;}
.cols{max-width:1180px;margin:40px auto;padding:0 20px;}
.listing-hero{max-width:1180px;margin:40px auto 24px!important;padding:0 20px;}
.listing-side h1{font-size:34px!important;font-weight:900!important;color:#121826!important;}
.cs-footer{background:#10205f;color:#dce4ff;padding:54px 0 22px;margin-top:60px;}
.cs-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;}
.cs-footer-logo{max-width:190px;margin-bottom:18px;}
.cs-footer h3{color:#fff;font-size:18px;margin-bottom:14px;}
.cs-footer a{display:block;color:#dce4ff;text-decoration:none;margin:8px 0;font-weight:700;}
.cs-footer a:hover{color:#ffb703;}
.cs-footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:20px;color:#aebbef;font-size:14px;}
@media(max-width:900px){.cs-header-grid{grid-template-columns:1fr;gap:14px;padding-top:16px;padding-bottom:16px}.cs-browse-btn{display:none}.hero h1{font-size:38px!important}.hero form{grid-template-columns:1fr!important}.chips{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-footer-grid{grid-template-columns:1fr}.cs-nav .cs-list-link{margin-left:0}}
@media(max-width:600px){.cs-topbar-inner{flex-direction:column;align-items:flex-start;padding-top:10px;padding-bottom:10px}.chips{grid-template-columns:1fr}.hero{padding:58px 0!important}.hero h1{font-size:32px!important}.cs-nav-inner{padding-left:0;padding-right:0}}
/* Normalize older page markup inside the CityStars shell */
body.citystars-directory .site-main > h1,
body.citystars-directory .site-main > p,
body.citystars-directory .site-main > nav,
body.citystars-directory .site-main > .grid,
body.citystars-directory .site-main > .chips,
body.citystars-directory .site-main > .panel,
body.citystars-directory .site-main > .pagination{max-width:1180px;margin-left:auto!important;margin-right:auto!important;padding-left:20px;padding-right:20px;}
body.citystars-directory .site-main > h1{color:#121826!important;font-size:42px!important;font-weight:900!important;margin-top:42px!important;margin-bottom:8px!important;}
body.citystars-directory .site-main > p.muted{color:#667085!important;font-size:18px!important;margin-bottom:24px!important;}
body.citystars-directory .site-main > nav.muted{color:#667085!important;margin-top:28px!important;}
body.citystars-directory .site-main > nav.muted a{color:#263c97!important;opacity:1!important;}
body.citystars-directory .pagination{display:flex;justify-content:center;gap:14px;align-items:center;margin-top:30px!important;}
body.citystars-directory .pagination-info{color:#667085;font-weight:800;}