/* Fishing Zones & Regulations page styles. Place at /css/zones.css */
:root {
    --z1-color:#1d4ed8; --z1-bg:#dbeafe; --z1-fg:#1e3a8a;
    --z2-color:#7c3aed; --z2-bg:#ede9fe; --z2-fg:#4c1d95;
    --z3-color:#15803d; --z3-bg:#dcfce7; --z3-fg:#14532d;
}

.hero {
    margin-bottom: 28px;
}

.hero h1 {
    font-size: clamp(36px, 5vw, 58px);
}

.map-card,
.zone-card,
.defs-card,
.regs-card {
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86));
    border: 1px solid rgba(255,255,255,.46);
    border-radius: 24px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.map-card {
    overflow: hidden;
    margin-bottom: 18px;
}

.map-card-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: rgba(255,255,255,.35);
}

.map-card-title,
.stitle {
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -.035em;
    margin-bottom: 5px;
    color: var(--text);
}

.map-card-sub,
.ssub {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55;
}

.legend-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.legend-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 900;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.08);
}

/* Map with overlay */
.map-container {
    position: relative;
    cursor: crosshair;
    line-height: 0;
    user-select: none;
    background: #f8fafc;
}

.map-container img {
    width: 100%;
    height: auto;
    display: block;
}

.zone-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.zone-area {
    pointer-events: all;
    cursor: pointer;
    transition: fill-opacity .18s, stroke-width .18s;
}

.zone-area:hover  { fill-opacity: .42 !important; }
.zone-area.active { fill-opacity: .52 !important; stroke-width: 3.5 !important; }

/* Popup */
.zone-popup {
    position: absolute;
    background: rgba(255,255,255,.96);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 18px 44px rgba(0,0,0,.24);
    min-width: 230px;
    max-width: 290px;
    font-size: 13px;
    line-height: 1.5;
    z-index: 100;
    border: 1px solid rgba(226,232,240,.9);
    border-top: 5px solid #ccc;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .15s, transform .15s;
    pointer-events: none;
}

.zone-popup.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
.zone-popup.z1 { border-top-color: var(--z1-color); }
.zone-popup.z2 { border-top-color: var(--z2-color); }
.zone-popup.z3 { border-top-color: var(--z3-color); }
.zp-title { font-weight: 950; font-size: 14px; margin-bottom: 2px; }
.zp-sub   { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.zp-rule  { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 4px; font-size: 12px; line-height: 1.4; }
.zp-ok    { color:#16a34a; font-size:14px; font-weight:950; flex-shrink:0; }
.zp-no    { color:#dc2626; font-size:14px; font-weight:950; flex-shrink:0; }
.zp-more  { margin-top:9px; font-size:11px; color:var(--teal); font-weight:900; cursor:pointer; text-decoration:underline; }

/* Zone cards */
.zone-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.zone-card {
    overflow: hidden;
    scroll-margin-top: 90px;
}

.zcheader {
    padding: 17px 18px 13px;
    border-bottom: 1px solid rgba(15,23,42,.07);
}

.znum {
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 4px;
}

.znum.z1 { color:var(--z1-color); }
.znum.z2 { color:var(--z2-color); }
.znum.z3 { color:var(--z3-color); }

.zname {
    font-size: 18px;
    font-weight: 950;
    letter-spacing: -.025em;
    margin-bottom: 4px;
}

.zbounds {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

.zcbody { padding: 15px 18px 17px; }

.zsec {
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin: 12px 0 7px;
}

.zsec:first-child { margin-top: 0; }

.rlist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ritem {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 13px;
    line-height: 1.42;
}

.ri {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 950;
    margin-top: 1px;
}

.ri.y { background:#dcfce7; color:#166534; }
.ri.n { background:#fee2e2; color:#991b1b; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 900;
    margin-top: 10px;
    margin-right: 4px;
    border: 1px solid rgba(15,23,42,.08);
}

.bcr   { background:#fef9c3; color:#854d0e; }
.bwade { background:#e0f2fe; color:#0c4a6e; }

/* Defs / Regs */
.defs-card,
.regs-card {
    padding: 24px;
    margin-bottom: 18px;
}

.dgrid,
.rgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.ditem,
.ritem2 {
    background: rgba(255,255,255,.54);
    border: 1px solid rgba(226,232,240,.9);
    border-radius: 14px;
    padding: 13px 14px;
}

.dterm {
    font-weight: 950;
    font-size: 14px;
    margin-bottom: 4px;
}

.ddesc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55;
}

.rlabel {
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin-bottom: 4px;
}

.rval {
    font-size: 14px;
    font-weight: 850;
    line-height: 1.4;
}

/* Hours */
.htable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 6px;
}

.htable th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.htable td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.htable tbody tr:last-child td { border-bottom: none; }
.htable tbody tr:hover { background: rgba(15,118,110,.06); }

.source {
    margin-top: 14px;
    font-size: 13px;
}

@media (max-width: 860px) {
    .zone-grid { grid-template-columns: 1fr; }
    .map-card-header { padding: 16px; }
    .defs-card, .regs-card { padding: 18px; }
    .htable { min-width: 540px; }
    .regs-card > div[style*="margin-top:20px"] { overflow-x: auto; }
}

@media (max-width: 520px) {
    .legend-pills { width: 100%; }
    .legend-pill { flex: 1; justify-content: center; }
    .map-card-title, .stitle { font-size: 18px; }
}