/* CampusOS — Terminal component styles. Scoped to app screens.
   Class prefix: cos- (avoids collisions with GD/Elementor/UsersWP). */

body.cos-app{
  margin:0; background:var(--cos-bg); color:var(--cos-ink);
  font-family:var(--cos-sans); font-size:15px; line-height:1.5;
  padding-bottom:108px;
}
.cos-app a{color:inherit}
.cos-app button{font:inherit;color:inherit;cursor:pointer}
.cos-app :focus-visible{outline:2px solid var(--cos-green); outline-offset:2px; border-radius:4px}
.cos-mono{font-family:var(--cos-mono)}
.cos-num{font-variant-numeric:tabular-nums}
.cos-wrap{max-width:1040px; margin:0 auto; padding:0 16px}
@media (min-width:900px){ body.cos-app{padding-bottom:32px} }

/* ---------- chrome ---------- */
.cos-sysbar{background:var(--cos-ink); color:var(--cos-bg); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; font-family:var(--cos-mono)}
.cos-sysbar .cos-wrap{display:flex; gap:16px; padding:6px 16px; align-items:center}
.cos-sysbar .right{margin-left:auto}
.cos-sysbar .pulse{display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#3CC97F; margin-right:6px; animation:cos-pulse 2.4s ease-in-out infinite}
@keyframes cos-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){ .cos-sysbar .pulse{animation:none} }
@media (max-width:560px){ .cos-sysbar .hide-s{display:none} }

.cos-header{position:sticky; top:0; z-index:40; background:var(--cos-bg); border-bottom:1px solid var(--cos-line)}
.cos-header__bar{display:flex; align-items:center; gap:12px; padding:13px 0}
.cos-brand{display:flex; align-items:baseline; text-decoration:none; font-weight:800;
  font-size:18px; letter-spacing:-.02em}
.cos-brand .os{color:var(--cos-green)}
.cos-header__search{flex:1; display:flex; align-items:center; gap:9px; background:var(--cos-card);
  border:1px solid var(--cos-line); border-radius:12px; padding:2px 6px 2px 13px; box-shadow:var(--cos-shadow);
  max-width:560px}
.cos-header__search .prompt{color:var(--cos-green); font-weight:700; font-family:var(--cos-mono)}
.cos-header__search input{flex:1; border:0; background:none; padding:9px 0; font:inherit;
  font-weight:600; color:var(--cos-ink); min-width:0}
.cos-header__search input::placeholder{color:var(--cos-mut)}
.cos-header__search button{border:0; background:var(--cos-green); color:var(--cos-on-accent);
  border-radius:9px; padding:8px 14px; font-weight:700; font-size:12.5px}
.cos-header__post{border:0; background:var(--cos-green); color:var(--cos-on-accent); font-weight:800;
  font-size:13px; border-radius:10px; padding:9px 16px; text-decoration:none; white-space:nowrap}
@media (max-width:640px){ .cos-header__post{display:none} /* dock covers Post on mobile */ }

/* campus switcher */
.cos-campus{position:relative}
.cos-campus summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px;
  background:var(--cos-chip); border-radius:999px; padding:8px 13px; font-weight:700;
  font-size:12.5px; white-space:nowrap; user-select:none}
.cos-campus summary::-webkit-details-marker{display:none}
.cos-campus summary svg{width:14px; height:14px; stroke:var(--cos-green); fill:none; stroke-width:2.2}
.cos-campus[open] summary{background:var(--cos-line)}
.cos-campus__menu{position:absolute; right:0; top:calc(100% + 8px); background:var(--cos-card);
  border:1px solid var(--cos-line); border-radius:14px; box-shadow:var(--cos-shadow);
  min-width:230px; overflow:hidden; z-index:80}
.cos-campus__menu a{display:block; padding:11px 15px; font-weight:600; font-size:13px;
  text-decoration:none; border-top:1px solid var(--cos-line)}
.cos-campus__menu a:first-child{border-top:0}
.cos-campus__menu a:hover{background:var(--cos-chip)}
.cos-campus__menu a.is-on{color:var(--cos-green); font-weight:800}
.cos-campus__menu a.is-on::after{content:" ✓"}
@media (max-width:480px){ .cos-campus summary span{max-width:84px; overflow:hidden; text-overflow:ellipsis} }

/* ---------- shared bits ---------- */
.cos-vbadge{font-size:9.5px; font-weight:800; letter-spacing:.06em; color:var(--cos-green-ink);
  background:color-mix(in srgb, var(--cos-green) 16%, transparent); border-radius:var(--cos-r-badge);
  padding:2px 7px; text-transform:uppercase; vertical-align:2px; margin-left:6px}
.cos-wa-tag{display:inline-block; font-size:9px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--cos-green-ink);
  background:color-mix(in srgb, var(--cos-green) 14%, transparent);
  border-radius:5px; padding:2px 7px; margin-top:3px}
.cos-open{font-size:10.5px; font-weight:700; color:var(--cos-green)}
.cos-open::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--cos-green); margin-right:4px; vertical-align:1px}
.cos-closed{font-size:10.5px; font-weight:700; color:var(--cos-mut)}
.cos-price{font-weight:700; font-size:13px; display:block; font-variant-numeric:tabular-nums}
.cos-chipb{font-size:11px; font-weight:700; color:var(--cos-mut); background:var(--cos-chip);
  border-radius:999px; padding:4px 12px; text-decoration:none; display:inline-block}

.cos-save{position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:8px;
  border:0; background:rgba(13,18,15,.55); display:flex; align-items:center; justify-content:center;
  padding:0; z-index:2}
.cos-save svg{width:13px; height:13px; stroke:#fff; fill:none; stroke-width:2.2}
.cos-save[aria-pressed="true"] svg{fill:var(--cos-amber); stroke:var(--cos-amber)}

/* photo placeholders when a listing has no image yet */
.cos-ph{display:block; width:100%; height:100%}
.cos-ph--service{background:linear-gradient(150deg,#2F6FB2,#1C4A7C)}
.cos-ph--food{background:linear-gradient(140deg,#C7513F,#8A2F22 70%)}
.cos-ph--deal{background:linear-gradient(150deg,#2F3D52,#1B2534)}

/* ---------- widgets / panels ---------- */
.cos-panel{background:var(--cos-card); border:1px solid var(--cos-line);
  border-radius:var(--cos-r-panel); box-shadow:var(--cos-shadow); overflow:hidden}
.cos-whead{display:flex; align-items:center; gap:10px; padding:15px 18px 11px}
.cos-whead h2{margin:0; font-size:15px; font-weight:800}
.cos-whead .cos-mono{font-size:10.5px; color:var(--cos-mut); text-transform:uppercase; letter-spacing:.1em}
.cos-whead a{margin-left:auto; font-size:12px; font-weight:700; color:var(--cos-green); text-decoration:none}

/* ---------- service row ---------- */
.cos-srow{display:flex; align-items:center; gap:12px; padding:11px 18px; text-decoration:none;
  border-top:1px solid var(--cos-line)}
.cos-srow:first-of-type{border-top:0}
.cos-srow:hover{background:var(--cos-chip)}
.cos-srow__ic{width:42px; height:42px; border-radius:12px; flex:none; overflow:hidden}
.cos-srow__ic img{width:100%; height:100%; object-fit:cover; display:block}
.cos-srow__tx{min-width:0; flex:1}
.cos-srow__tx b{display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cos-srow__tx > span{font-size:12px; color:var(--cos-mut); font-weight:600}
.cos-srow__st{text-align:right; flex:none}

/* ---------- food tile ---------- */
.cos-ftile{border-radius:var(--cos-r-card); overflow:hidden; text-decoration:none;
  border:1px solid var(--cos-line); background:var(--cos-card); position:relative; display:block;
  box-shadow:var(--cos-shadow)}
.cos-ftile__img{height:120px; position:relative; display:block; overflow:hidden}
.cos-ftile__img img{width:100%; height:100%; object-fit:cover; display:block}
.cos-ftile__tag{position:absolute; top:8px; left:8px; background:rgba(13,18,15,.72); color:#fff;
  font-size:9.5px; font-weight:700; letter-spacing:.06em; border-radius:6px; padding:2px 7px;
  text-transform:uppercase; z-index:2}
.cos-ftile__tag.is-open{background:var(--cos-green); color:var(--cos-on-accent)}
.cos-ftile__body{padding:9px 11px 11px; display:block}
.cos-ftile__body b{display:block; font-size:13px; line-height:1.3}
.cos-ftile__body > span{font-size:11px; color:var(--cos-mut); display:block}

/* ---------- deal card ---------- */
.cos-deal{text-decoration:none; border:1px solid var(--cos-line); border-radius:var(--cos-r-card);
  overflow:hidden; background:var(--cos-card); display:block; position:relative; box-shadow:var(--cos-shadow)}
.cos-deal__img{height:120px; display:block; position:relative; overflow:hidden}
.cos-deal__img img{width:100%; height:100%; object-fit:cover; display:block}
.cos-deal__body{padding:9px 11px 11px; display:block}
.cos-deal__body b{display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cos-deal__price{font-size:13.5px; font-weight:800; margin-top:2px; display:block; font-variant-numeric:tabular-nums}
.cos-deal__t{font-size:10.5px; color:var(--cos-mut); font-weight:600; display:block}

/* ---------- layout grids ---------- */
.cos-grid-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; padding:4px 18px 18px}
.cos-grid-page{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
.cos-widgets{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; padding:18px 0}
.cos-widgets > *{grid-column:span 12}
@media (min-width:820px){
  .cos-w5{grid-column:span 5} .cos-w7{grid-column:span 7}
  .cos-w8{grid-column:span 8} .cos-w4{grid-column:span 4}
}

/* ---------- hero / greeting ---------- */
.cos-hero{padding:26px 0 4px}
.cos-hero h1{margin:0 0 4px; font-size:clamp(24px,4.6vw,34px); font-weight:800;
  letter-spacing:-.03em; text-wrap:balance}
.cos-hero h1 .campus{color:var(--cos-green)}
.cos-hero p{margin:0 0 16px; color:var(--cos-mut); font-size:14px}
.cos-hints{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.cos-hints a{border:1px solid var(--cos-line); background:var(--cos-card); color:var(--cos-mut);
  border-radius:999px; padding:5px 12px; font-size:12px; font-weight:600; text-decoration:none}
.cos-hints a:hover{color:var(--cos-ink); border-color:var(--cos-green)}

/* ---------- category app grid ---------- */
.cos-apps{display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:10px; padding:20px 0 4px}
.cos-app-tile{display:flex; flex-direction:column; align-items:center; gap:7px; text-decoration:none;
  padding:13px 6px 11px; border-radius:16px; border:1px solid transparent}
.cos-app-tile:hover{background:var(--cos-card); border-color:var(--cos-line); box-shadow:var(--cos-shadow)}
.cos-app-tile .tile{width:50px; height:50px; border-radius:15px; display:flex;
  align-items:center; justify-content:center}
.cos-app-tile .tile svg{width:23px; height:23px; stroke:#fff; fill:none; stroke-width:1.9}
.cos-app-tile .n{font-size:12px; font-weight:600; text-align:center}
.cos-app-tile .c{font-size:10px; color:var(--cos-mut)}
.cos-a1{background:#0B8A4B}.cos-a2{background:#C75146}.cos-a3{background:#2F6FB2}
.cos-a4{background:#8352A8}.cos-a5{background:#B77C1F}.cos-a6{background:#3B8C8C}

/* ---------- buttons ---------- */
.cos-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0;
  border-radius:var(--cos-r-btn); padding:12px 20px; font-weight:800; font-size:14px; text-decoration:none}
.cos-btn svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.1}
.cos-btn--pri{background:var(--cos-green); color:var(--cos-on-accent)}
.cos-btn--sec{background:var(--cos-chip); color:var(--cos-ink)}
.cos-btn--ghost{background:none; border:1px solid var(--cos-line); color:var(--cos-mut)}
.cos-btn--danger{background:none; border:1px solid var(--cos-red); color:var(--cos-red)}

/* ---------- single listing ---------- */
.cos-cols{display:grid; grid-template-columns:1fr; gap:18px; padding:14px 0 20px}
@media (min-width:880px){ .cos-cols{grid-template-columns:1fr 340px; align-items:start} }
.cos-gallery{height:280px; position:relative; overflow:hidden}
.cos-gallery img{width:100%; height:100%; object-fit:cover; display:block}
.cos-gallery .cat-tag{position:absolute; top:12px; left:12px; background:rgba(13,18,15,.7);
  color:#fff; border-radius:8px; font-size:10px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 10px}
.cos-tblock{padding:16px 18px 18px}
.cos-tblock h1{margin:0 0 6px; font-size:clamp(20px,3.6vw,26px); font-weight:800;
  letter-spacing:-.02em; text-wrap:balance}
.cos-badges{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-bottom:10px}
.cos-pricebig{display:flex; align-items:baseline; gap:8px; margin:4px 0 2px}
.cos-pricebig b{font-size:26px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.cos-pricebig span{font-size:12.5px; color:var(--cos-mut); font-weight:600}
.cos-sect{padding:15px 18px; border-top:1px solid var(--cos-line)}
.cos-sect h2{margin:0 0 10px; font-size:13.5px; font-weight:800}
.cos-sect .cos-prose{font-size:14px; max-width:62ch}
.cos-sect .cos-prose p{margin:0 0 8px}
.cos-locrow{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600}
.cos-locrow svg{width:17px; height:17px; stroke:var(--cos-green); fill:none; stroke-width:2; flex:none}
.cos-locrow span{color:var(--cos-mut); font-weight:500}
.cos-contact{padding:18px}
.cos-contact .lbl{font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cos-mut); display:block; margin-bottom:12px}
.cos-contact .cos-btn{width:100%; margin-top:9px}
.cos-contact .cos-btn:first-of-type{margin-top:0}
.cos-safety{padding:14px 18px; display:flex; gap:11px; align-items:flex-start;
  background:color-mix(in srgb, var(--cos-amber) 9%, var(--cos-card))}
.cos-safety svg{width:18px; height:18px; stroke:var(--cos-amber); fill:none; stroke-width:2; flex:none; margin-top:2px}
.cos-safety p{margin:0; font-size:12px; font-weight:500}
.cos-safety b{display:block}
.cos-side{display:flex; flex-direction:column; gap:18px}

/* mobile contact bar on single listings */
.cos-cbar{position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:color-mix(in srgb, var(--cos-card) 92%, transparent); backdrop-filter:blur(12px);
  border-top:1px solid var(--cos-line); display:flex; gap:9px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.cos-cbar .cos-btn{flex:1; padding:12px}
.cos-cbar .cos-btn--sec{flex:0 0 auto; padding:12px 16px}
@media (min-width:880px){ .cos-cbar{display:none} }
body.cos-has-cbar .cos-dock{display:none} /* contact bar replaces the dock on listing pages */

/* ---------- archive / results ---------- */
.cos-rmeta{display:flex; align-items:baseline; gap:10px; padding:16px 0 12px; flex-wrap:wrap}
.cos-rmeta h1{margin:0; font-size:17px; font-weight:800}
.cos-rmeta .cos-mono{font-size:10.5px; color:var(--cos-mut); text-transform:uppercase; letter-spacing:.1em}
.cos-filters{display:flex; gap:8px; padding:12px 0 4px; overflow-x:auto}
.cos-filters::-webkit-scrollbar{display:none}
.cos-filters a{border:1px solid var(--cos-line); background:var(--cos-card); color:var(--cos-mut);
  border-radius:999px; padding:6px 13px; font-size:12px; font-weight:700; white-space:nowrap; text-decoration:none}
.cos-filters a.is-on{border-color:var(--cos-green); color:var(--cos-green-ink);
  background:color-mix(in srgb, var(--cos-green) 10%, var(--cos-card))}
.cos-pagination{display:flex; gap:8px; justify-content:center; padding:22px 0}
.cos-pagination .page-numbers{border:1px solid var(--cos-line); background:var(--cos-card);
  border-radius:10px; padding:8px 14px; font-weight:700; font-size:13px; text-decoration:none}
.cos-pagination .page-numbers.current{background:var(--cos-green); color:var(--cos-on-accent); border-color:var(--cos-green)}

/* ---------- empty state ---------- */
.cos-empty{background:var(--cos-card); border:1px dashed var(--cos-line); border-radius:var(--cos-r-panel);
  padding:44px 24px; text-align:center; margin:14px 0}
.cos-empty .glyph{width:60px; height:60px; border-radius:17px; background:var(--cos-chip);
  margin:0 auto 14px; display:flex; align-items:center; justify-content:center}
.cos-empty .glyph svg{width:26px; height:26px; stroke:var(--cos-mut); fill:none; stroke-width:1.8}
.cos-empty h2{margin:0 0 6px; font-size:16px; font-weight:800}
.cos-empty p{margin:0 auto 18px; color:var(--cos-mut); font-size:13.5px; max-width:38ch}

/* ---------- CTA band ---------- */
.cos-cta{margin:10px 0 26px; border-radius:var(--cos-r-panel); background:var(--cos-ink); color:var(--cos-bg);
  padding:26px 22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.cos-cta h2{margin:0; font-size:clamp(20px,3.4vw,26px); letter-spacing:-.02em; flex:1 1 240px}
.cos-cta .k{display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cos-amber); margin-bottom:6px; font-family:var(--cos-mono)}
.cos-cta p{margin:6px 0 0; font-size:13.5px; opacity:.75; max-width:44ch}

/* ---------- dock ---------- */
.cos-dock{position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom)); z-index:60;
  background:color-mix(in srgb, var(--cos-card) 88%, transparent); backdrop-filter:blur(12px);
  border:1px solid var(--cos-line); border-radius:var(--cos-r-dock);
  box-shadow:0 12px 32px rgba(0,0,0,.18); display:flex; gap:4px; padding:8px}
.cos-dock a{display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none;
  color:var(--cos-mut); font-size:9.5px; font-weight:700; padding:6px 13px; border-radius:14px}
.cos-dock a.is-on{color:var(--cos-green); background:color-mix(in srgb, var(--cos-green) 12%, transparent)}
.cos-dock svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:2}
.cos-dock .post{background:var(--cos-green); color:var(--cos-on-accent); border-radius:16px; padding:6px 15px}
.cos-dock .post svg{stroke:var(--cos-on-accent)}
@media (min-width:900px){ .cos-dock{display:none} }

/* ---------- footer ---------- */
.cos-footer{border-top:1px solid var(--cos-line); padding:22px 0; color:var(--cos-mut); font-size:12px}
.cos-footer .cos-wrap{display:flex; gap:16px; flex-wrap:wrap}
.cos-footer a{text-decoration:none}
.cos-footer .r{margin-left:auto; font-family:var(--cos-mono); letter-spacing:.1em; text-transform:uppercase; font-size:10.5px}

/* ---------- GD form skin (add listing) + UsersWP (dashboard) ---------- */
.cos-formwrap .geodir_form_row label,
.cos-formwrap .uwp-form label{
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--cos-mut)}
.cos-formwrap input[type=text], .cos-formwrap input[type=tel], .cos-formwrap input[type=email],
.cos-formwrap input[type=number], .cos-formwrap input[type=url], .cos-formwrap select,
.cos-formwrap textarea{
  width:100%; border:1.5px solid var(--cos-line); background:var(--cos-bg); color:var(--cos-ink);
  border-radius:var(--cos-r-btn); padding:11px 13px; font:inherit; font-weight:600}
.cos-formwrap input:focus, .cos-formwrap select:focus, .cos-formwrap textarea:focus{
  outline:none; border-color:var(--cos-green)}
.cos-formwrap input[type=submit], .cos-formwrap button[type=submit], .cos-formwrap .geodir_button{
  background:var(--cos-green); color:var(--cos-on-accent); border:0; border-radius:var(--cos-r-btn);
  padding:13px 24px; font-weight:800; font-size:14px; cursor:pointer}