/*
 * PinMyPage V2 — production design system.
 * Lean, dependency-free (no Bootstrap/CDN), accessible (WCAG 2.2 AA target),
 * responsive, light theme. Brand tokens per UI_Design_Structure.md §3.
 * System font stack (no external font requests) with a heading/body split.
 */

/* ======================================================================
   1. Tokens
   ====================================================================== */
:root {
    --c-primary: #173D35;
    --c-primary-hover: #24594D;
    --c-primary-subtle: #E8EFEA;
    --c-accent: #F2B84B;
    --c-accent-hover: #E5A937;
    --c-accent-subtle: #FEF7EA;
    --c-text: #1C2622;
    --c-muted: #66716B;
    --c-bg: #F6F8F6;
    --c-surface: #FFFFFF;
    --c-border: #E2E8E4;
    --c-border-strong: #C9D2CB;
    --c-success: #18794E;
    --c-success-bg: #EAF5EE;
    --c-warning: #9A6700;
    --c-warning-bg: #FFF8E6;
    --c-danger: #B42318;
    --c-danger-bg: #FEF3F2;
    --c-info: #175CD3;
    --c-info-bg: #EFF6FF;

    --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
    --shadow-sm: 0 1px 3px rgba(23,61,53,.07), 0 1px 2px rgba(23,61,53,.04);
    --shadow-md: 0 8px 20px -6px rgba(23,61,53,.12), 0 3px 8px -4px rgba(23,61,53,.07);
    --shadow-lg: 0 20px 40px -12px rgba(23,61,53,.18), 0 8px 16px -8px rgba(23,61,53,.10);
    --ease: cubic-bezier(.16, 1, .3, 1);
    --tr: all .2s var(--ease);
    --content: 1200px;
}

/* ======================================================================
   2. Reset & base
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
body {
    font-family: var(--font-body);
    color: var(--c-text);
    background: var(--c-bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--c-primary); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary-hover); text-decoration: none; transition: var(--tr); }
a:hover { color: var(--c-primary); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--c-primary-subtle); padding: 1px 5px; border-radius: 5px; }

/* ======================================================================
   3. Layout utilities
   ====================================================================== */
.container { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--sp-5); }
.flow > * + * { margin-top: var(--sp-4); }
.stack-6 > * + * { margin-top: var(--sp-6); }
.grid { display: grid; gap: var(--sp-5); }
.muted { color: var(--c-muted); }
.center { text-align: center; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--sp-4); top: var(--sp-2); z-index: 2000; background: #fff; padding: var(--sp-2) var(--sp-4); border: 2px solid var(--c-primary); border-radius: var(--r-md); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ======================================================================
   4. Buttons
   ====================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 46px; padding: 11px 22px; border-radius: var(--r-md); font-weight: 700; font-size: .95rem; border: 1px solid transparent; transition: var(--tr); text-decoration: none; white-space: nowrap; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn--primary:hover { background: var(--c-primary-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn--accent { background: var(--c-accent); color: var(--c-primary); border-color: var(--c-accent); }
.btn--accent:hover { background: var(--c-accent-hover); color: var(--c-primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn--outline { background: transparent; color: var(--c-primary); border-color: var(--c-border-strong); }
.btn--outline:hover { border-color: var(--c-primary); background: var(--c-surface); color: var(--c-primary); }
.btn--ghost { background: transparent; color: var(--c-primary); min-height: auto; padding: 6px 10px; }
.btn--ghost:hover { background: var(--c-primary-subtle); }
.btn--sm { min-height: 38px; padding: 7px 14px; font-size: .85rem; }
.btn--block { width: 100%; }

/* ======================================================================
   5. Forms
   ====================================================================== */
.field { display: block; margin-bottom: var(--sp-4); }
.field > label, .form-label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 6px; color: var(--c-text); }
.input, .select, .textarea { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); font: inherit; color: var(--c-text); background: var(--c-surface); transition: var(--tr); }
.textarea { min-height: 110px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-primary); }
.field-error { color: var(--c-danger); font-size: .82rem; margin-top: 6px; }
.field-hint { color: var(--c-muted); font-size: .82rem; margin-top: 5px; }
.input-group { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.input-group > * { flex: 1 1 180px; }

/* ======================================================================
   6. Header / nav
   ====================================================================== */
.site-header { background: var(--c-primary); color: #fff; position: sticky; top: 0; z-index: 900; box-shadow: 0 2px 12px rgba(23,61,53,.18); }
.site-header__row { display: flex; align-items: center; gap: var(--sp-5); padding-block: var(--sp-4); }
.brand { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.brand:hover { color: #fff; }
.brand b { color: var(--c-accent); font-weight: 800; }
.main-nav { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
.main-nav a { color: rgba(255,255,255,.88); font-weight: 600; font-size: .95rem; padding: 8px 12px; border-radius: var(--r-sm); }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.12); }
.main-nav .btn--accent { color: var(--c-primary); }
.nav-logout { display: inline; }
.nav-logout button { background: none; border: none; color: rgba(255,255,255,.88); font-weight: 600; padding: 8px 12px; border-radius: var(--r-sm); }
.nav-logout button:hover { color: #fff; background: rgba(255,255,255,.12); }
.nav-toggle { display: none; background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: var(--r-sm); padding: 8px 10px; margin-left: auto; }

@media (max-width: 860px) {
    .nav-toggle { display: inline-flex; }
    .main-nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: var(--c-primary); padding: var(--sp-3) var(--sp-5) var(--sp-5); gap: 2px; box-shadow: var(--shadow-md); display: none; }
    .main-nav.is-open { display: flex; }
    .main-nav a, .nav-logout button { width: 100%; }
}

/* ======================================================================
   7. Footer
   ====================================================================== */
.site-footer { margin-top: auto; background: var(--c-primary); color: rgba(255,255,255,.8); padding-block: var(--sp-12) var(--sp-6); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--sp-6); }
.footer-grid h4 { color: #fff; font-size: .95rem; margin-bottom: var(--sp-3); }
.footer-grid a { color: rgba(255,255,255,.78); display: block; padding: 3px 0; font-size: .9rem; }
.footer-grid a:hover { color: #fff; }
.footer-brand b { color: var(--c-accent); }
.footer-bottom { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.14); font-size: .85rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ======================================================================
   8. Flash / alerts
   ====================================================================== */
.flash { padding: 12px 16px; border-radius: var(--r-md); margin-bottom: var(--sp-5); border: 1px solid; font-weight: 500; }
.flash--success, .alert--success { background: var(--c-success-bg); color: var(--c-success); border-color: rgba(24,121,78,.3); }
.flash--error, .alert--danger { background: var(--c-danger-bg); color: var(--c-danger); border-color: #F5C2BC; }
.alert { padding: 12px 16px; border-radius: var(--r-md); margin-bottom: var(--sp-5); border: 1px solid; }
.alert--info { background: var(--c-info-bg); color: var(--c-info); border-color: #B2D4FF; }
.alert--warn { background: var(--c-warning-bg); color: var(--c-warning); border-color: #F5C671; }

/* ======================================================================
   9. Cards / badges / chips
   ====================================================================== */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-6); }
.card--pad-lg { padding: var(--sp-8); }
.card--hover { transition: var(--tr); }
.card--hover:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--c-border); }
.badge--verified { background: var(--c-success-bg); color: var(--c-success); border-color: rgba(24,121,78,.25); }
.badge--sponsored { background: var(--c-accent-subtle); color: #925C00; border-color: #F5C671; text-transform: uppercase; letter-spacing: .3px; }
.badge--open { background: var(--c-success-bg); color: var(--c-success); border-color: rgba(24,121,78,.25); }
.badge--rating { background: var(--c-accent-subtle); color: #925C00; border-color: #F5C671; }
.badge--muted { background: var(--c-bg); color: var(--c-muted); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.status--approved { background: var(--c-success); }
.status--pending { background: var(--c-warning); }
.status--draft { background: var(--c-muted); }
.status--rejected, .status--suspended { background: var(--c-danger); }

/* ======================================================================
   10. Business card (shared across home/search/category/location)
   ====================================================================== */
.biz-card { display: flex; gap: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); transition: var(--tr); }
.biz-card:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.biz-card__thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; background: linear-gradient(135deg, var(--c-primary), var(--c-primary-hover)); }
.biz-card__body { min-width: 0; flex: 1; }
.biz-card__name { font-family: var(--font-head); font-weight: 700; color: var(--c-primary); font-size: 1.05rem; margin-bottom: 2px; }
.biz-card__meta { color: var(--c-muted); font-size: .85rem; margin-bottom: var(--sp-2); }
.biz-card__tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--sp-3); }
.biz-card__desc { color: var(--c-text); font-size: .9rem; margin-bottom: var(--sp-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.biz-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ======================================================================
   11. Category / stat tiles
   ====================================================================== */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
.cat-tile { display: flex; flex-direction: column; gap: 6px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); transition: var(--tr); }
.cat-tile:hover { border-color: var(--c-primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.cat-tile__icon { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--c-primary-subtle); color: var(--c-primary); font-size: 1.3rem; margin-bottom: var(--sp-2); }
.cat-tile__name { font-family: var(--font-head); font-weight: 700; color: var(--c-primary); }
.cat-tile__count { color: var(--c-muted); font-size: .82rem; }
.stat-tile { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); }
.stat-tile__label { color: var(--c-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.stat-tile__value { font-family: var(--font-head); font-weight: 800; font-size: 1.9rem; color: var(--c-primary); margin-top: 4px; }
.stat-tile__sub { color: var(--c-muted); font-size: .82rem; margin-top: 2px; }

/* ======================================================================
   12. Breadcrumbs / pagination / tables
   ====================================================================== */
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; font-size: .82rem; color: var(--c-muted); margin-bottom: var(--sp-3); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--c-border-strong); }
.crumbs a { color: var(--c-muted); } .crumbs a:hover { color: var(--c-primary); }
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: var(--sp-8); flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); font-weight: 600; padding: 0 12px; }
.pagination a:hover { border-color: var(--c-primary); }
.pagination [aria-current="page"] { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.pagination .is-disabled { opacity: .45; pointer-events: none; }
.table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
.table { width: 100%; border-collapse: collapse; min-width: 560px; }
.table th, .table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--c-border); font-size: .9rem; }
.table th { background: var(--c-bg); font-family: var(--font-head); font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; color: var(--c-muted); }
.table tr:last-child td { border-bottom: none; }

/* ======================================================================
   13. Empty / section
   ====================================================================== */
.section { padding-block: var(--sp-12); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.section__head p { color: var(--c-muted); }
.empty-state { text-align: center; padding: var(--sp-12) var(--sp-5); border: 1px dashed var(--c-border-strong); border-radius: var(--r-lg); color: var(--c-muted); background: var(--c-surface); }
.empty-state h3 { color: var(--c-primary); margin-bottom: var(--sp-2); }

/* ======================================================================
   14. Hero + search (home)
   ====================================================================== */
.hero { background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-hover) 100%); color: #fff; padding-block: var(--sp-16); }
.hero h1 { color: #fff; max-width: 16ch; }
.hero p { color: rgba(255,255,255,.85); font-size: 1.1rem; max-width: 52ch; margin-top: var(--sp-4); }
.hero__search { margin-top: var(--sp-8); background: var(--c-surface); border-radius: var(--r-lg); padding: var(--sp-3); box-shadow: var(--shadow-lg); display: flex; gap: var(--sp-2); max-width: 760px; }
.hero__search .input { border-color: transparent; }
.hero__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.hero__chips a { background: rgba(255,255,255,.14); color: #fff; padding: 6px 14px; border-radius: var(--r-pill); font-size: .85rem; font-weight: 600; }
.hero__chips a:hover { background: rgba(255,255,255,.24); }
@media (max-width: 640px) { .hero__search { flex-direction: column; } }

/* ======================================================================
   15. Dashboard shell (owner + admin)
   ====================================================================== */
.shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.shell__side { background: var(--c-primary); color: #fff; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.shell__side .brand { font-size: 1.2rem; }
.shell__badge { display: inline-block; background: var(--c-accent); color: var(--c-primary); font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; padding: 3px 8px; border-radius: var(--r-pill); }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a { color: rgba(255,255,255,.82); padding: 10px 12px; border-radius: var(--r-sm); font-weight: 600; font-size: .92rem; display: flex; align-items: center; gap: var(--sp-2); }
.side-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.side-nav a[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; }
.shell__main { display: flex; flex-direction: column; min-width: 0; }
/* Backdrop is only a visible element on mobile (drawer open); never a grid item on desktop. */
.shell__backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 999; }
.shell__topbar { background: var(--c-surface); border-bottom: 1px solid var(--c-border); padding: var(--sp-4) var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); position: sticky; top: 0; z-index: 10; }
.shell__content { padding: var(--sp-8) var(--sp-6); flex: 1; }
.shell__content > .page-head { margin-bottom: var(--sp-6); }
.page-head h1 { font-size: 1.6rem; }
.shell__side-foot { margin-top: auto; }
.shell__side-foot a { color: rgba(255,255,255,.7); font-size: .85rem; }
@media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; }
    .shell__side { position: fixed; z-index: 1000; width: 260px; transform: translateX(-100%); transition: transform .25s var(--ease); }
    .shell__side.is-open { transform: none; }
    .shell__backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 999; }
    .shell__backdrop.is-open { display: block; }
}
.shell-toggle { display: none; background: none; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); padding: 8px 10px; }
@media (max-width: 900px) { .shell-toggle { display: inline-flex; } }

/* ======================================================================
   16. Misc
   ====================================================================== */
.rating-stars { color: var(--c-accent); letter-spacing: 1px; }
.divider { height: 1px; background: var(--c-border); border: 0; margin-block: var(--sp-6); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.results-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 992px) { .grid-4 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr; } .results-layout { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid-2, .grid-4 { grid-template-columns: 1fr; } .biz-card { flex-direction: column; } }

/* ===== Auth (login / register / password reset) ===== */
.auth { max-width: 460px; margin-block: var(--sp-12); margin-inline: auto; padding-inline: var(--sp-5); }
.auth__card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-8); box-shadow: var(--shadow-sm); }
.auth__card h1 { font-size: 1.5rem; margin-bottom: var(--sp-1); }
.auth__sub { color: var(--c-muted); margin-bottom: var(--sp-6); }
.auth__hint { color: var(--c-muted); font-size: .82rem; margin-top: -8px; margin-bottom: var(--sp-4); }
.auth .btn { width: 100%; margin-top: var(--sp-2); }
.auth__links { margin-top: var(--sp-5); font-size: .9rem; color: var(--c-muted); text-align: center; }

/* ===== Simple content page (account, legal, errors) ===== */
.page { padding-block: var(--sp-10) var(--sp-16); }
.page__head { margin-bottom: var(--sp-6); }
.page__head h1 { font-size: 1.7rem; }
.page__head p { color: var(--c-muted); margin-top: var(--sp-1); }
.def-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-5); }
.def-list dt { color: var(--c-muted); font-size: .85rem; font-weight: 700; }
.def-list dd { color: var(--c-text); }
.error-page { text-align: center; padding-block: var(--sp-20); }
.error-page__code { font-family: var(--font-head); font-size: 4rem; font-weight: 800; color: var(--c-primary); line-height: 1; }