/* ============================================================
   Shared styles for public pages (browse, profile, booking,
   packages, safety...). Uses the design tokens from base.html.
   ============================================================ */

/* The `hidden` attribute must actually hide. `[hidden] { display: none }` is
   a browser rule with the lowest precedence, so any author `display` here
   (.pg-btn is inline-flex, several notes are flex) would silently defeat it.
   See the fuller note in explore.css. */
[hidden] { display: none !important; }

.pg-wrap { max-width: 1180px; margin: 0 auto; padding: 110px 24px 70px; }
.pg-wrap-narrow { max-width: 860px; }

.pg-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface-warm); color: var(--orange);
    font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 7px 14px; border-radius: 999px;
    margin-bottom: 14px;
}
.pg-title { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.pg-sub { color: var(--muted); font-size: 1.02rem; max-width: 640px; margin-bottom: 28px; }

.pg-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 20px; padding: 24px; box-shadow: 0 8px 26px rgba(30,79,145,0.06);
}

/* ---------- buttons ---------- */
.pg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 26px; border-radius: 999px; border: none; cursor: pointer;
    font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
    text-decoration: none; transition: all .2s ease;
}
.pg-btn-primary { background: linear-gradient(135deg, var(--blue) 0%, var(--orange) 100%); color: #fff; }
.pg-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(30,79,145,0.3); }
.pg-btn-outline { background: transparent; color: var(--blue); border: 2px solid var(--blue); }
.pg-btn-outline:hover { background: var(--blue); color: #fff; }
.pg-btn-pink { background: #e8467c; color: #fff; }
.pg-btn-pink:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(232,70,124,0.35); }
.pg-btn-ghost { background: var(--surface-soft); color: var(--ink); }
.pg-btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.pg-btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.pg-btn-block { width: 100%; }

/* ---------- buddy cards grid ---------- */
.buddy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 22px; }
/* Only the Find a Buddy results use a fixed three-across layout. Vibe Match
   keeps its existing grid because it does not have this opt-in class. */
.buddy-grid.buddy-results-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
    overflow: visible;
}
.bcard {
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    overflow: hidden; transition: all .25s ease; display: flex; flex-direction: column;
}
.bcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.bcard-photo { position: relative; aspect-ratio: 4/4.4; background: var(--surface-soft); }
.bcard-photo img { width: 100%; height: 100%; object-fit: cover; }
.bcard-photo .no-photo { display:flex; align-items:center; justify-content:center; height:100%; color:var(--muted); font-size:2.4rem; }
.bcard-verify {
    position: absolute; top: 12px; left: 12px; background: rgba(22,53,95,0.82); color: #ffe9c2;
    font-size: 0.7rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(4px);
}
.bcard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.bcard-name { font-size: 1.08rem; font-weight: 800; color: var(--ink); display:flex; align-items:center; gap:8px; }
.bcard-rating { color: var(--gold); font-weight: 700; font-size: 0.86rem; }
.bcard-meta { color: var(--muted); font-size: 0.82rem; display: flex; align-items: center; gap: 6px; }
.bcard-meta i { width: 14px; color: var(--blue); font-size: 0.78rem; }
.bcard-price { margin-top: auto; padding-top: 10px; font-weight: 800; color: var(--blue); font-size: 0.95rem; }
.bcard-price small { color: var(--muted); font-weight: 500; }
.bcard-next { font-size: 0.78rem; color: #1d8a4c; font-weight: 700; }

@media (max-width: 700px) {
    /* Two across, not the desktop three. A third card costs about 60px of
       card width, and the only way to buy it back is to shrink the name, the
       price and the button below the size they can be read and tapped at.
       All card information remains present either way. */
    .buddy-grid.buddy-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .buddy-results-grid .bcard {
        min-width: 0;
        border-radius: 16px;
    }
    .buddy-results-grid .bcard-verify {
        top: 8px;
        left: 8px;
        max-width: calc(100% - 16px);
        padding: 4px 9px;
        font-size: 0.68rem;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .buddy-results-grid .bcard-body {
        min-width: 0;
        gap: 6px;
        padding: 12px 12px 14px;
    }
    /* The name and its chip stack rather than share a line — at half a phone
       there is not room for both, and the name must not be truncated. */
    .buddy-results-grid .bcard-name {
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        font-size: 0.95rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }
    .buddy-results-grid .bcard-rating { font-size: 0.8rem; }
    .buddy-results-grid .bcard-name .chip {
        padding: 3px 8px;
        font-size: 0.68rem !important;
    }
    .buddy-results-grid .bcard-meta,
    .buddy-results-grid .bcard-next {
        min-width: 0;
        align-items: flex-start;
        gap: 5px;
        font-size: 0.76rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    .buddy-results-grid .bcard-meta i {
        width: 12px;
        flex: 0 0 12px;
        margin-top: 2px;
        font-size: 0.72rem;
    }
    .buddy-results-grid .bcard-price {
        min-width: 0;
        padding-top: 8px;
        font-size: 0.88rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }
    .buddy-results-grid .bcard-price small { font-size: 0.72rem; }
    .buddy-results-grid .pg-btn {
        min-width: 0;
        min-height: 44px;
        padding: 9px 8px;
        font-size: 0.78rem;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
    }
}

/* ---------- badges & chips ---------- */
.chip { display: inline-flex; align-items:center; gap:5px; background: var(--surface-soft); color: var(--blue);
        font-size: 0.75rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.chip-warm { background: var(--surface-warm); color: var(--orange); }
.chip-green { background: #e5f7ec; color: #1d8a4c; }
.chip-select { cursor: pointer; border: 1.5px solid var(--line); background: #fff; user-select: none; padding: 8px 16px; font-size: 0.85rem; }
.chip-select.on { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ---------- profile layout ---------- */
.profile-grid { display: grid; grid-template-columns: 1.25fr 0.95fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 1020px) { .profile-grid { grid-template-columns: 1fr 1fr; } .profile-col-book { grid-column: 1 / -1; } }
@media (max-width: 700px)  { .profile-grid { grid-template-columns: 1fr; } }

.pf-photo-main { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4/4.3; background: var(--surface-soft); }
.pf-photo-main img { width: 100%; height: 100%; object-fit: cover; }
.pf-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pf-thumbs img { width: 62px; height: 62px; object-fit: cover; border-radius: 12px; cursor: pointer; border: 2px solid transparent; }
.pf-thumbs img.on { border-color: var(--orange); }

.trust-list { display: flex; flex-direction: column; gap: 13px; }
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-item .t-ico { width: 34px; height: 34px; border-radius: 10px; background: #e5f7ec; color: #1d8a4c;
                     display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; }
.trust-item .t-ico.muted { background: var(--surface-soft); color: var(--muted); }
.trust-item h5 { font-size: 0.88rem; color: var(--ink); margin-bottom: 2px; }
.trust-item p { font-size: 0.8rem; color: var(--muted); }

.review-card { background: var(--surface-soft); border-radius: 14px; padding: 14px 16px; margin-top: 10px; }
.review-card .stars { color: var(--gold); font-size: 0.8rem; font-weight: 800; }
.review-card p { font-size: 0.86rem; color: var(--ink); margin: 6px 0; font-style: italic; }
.review-card small { color: var(--muted); font-size: 0.75rem; }

/* ---------- booking box ---------- */
.book-box { position: sticky; top: 96px; }
.book-box .field { margin-bottom: 13px; }
.book-box label { display: block; font-size: 0.72rem; font-weight: 800; color: var(--muted);
                  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.book-box select, .book-box input {
    display: block; width: 100%; min-width: 0; padding: 12px 13px;
    border: 1px solid var(--line); border-radius: 12px;
    font-family: var(--font-body); font-size: 0.92rem; line-height: 1.35;
    color: var(--ink); background-color: #fff;
}
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; max-height: 132px; overflow-y: auto; }
.slot { text-align: center; padding: 9px 4px; border: 1.5px solid var(--line); border-radius: 10px;
        font-size: 0.83rem; font-weight: 700; color: var(--ink); cursor: pointer; background: #fff; }
.slot.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.slot.usual { border-color: rgba(37, 99, 235, 0.5); background: #f2f7ff; }
.slot.usual.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.slot-empty { grid-column: 1 / -1; color: var(--muted); font-size: 0.83rem; text-align: center; padding: 8px; }
.slot-advice { margin-top: 7px; color: var(--muted); font-size: 0.75rem; line-height: 1.4; }

.price-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--muted); padding: 4px 0; }
.price-row.total { font-weight: 800; color: var(--ink); font-size: 1.05rem; border-top: 1px dashed var(--line);
                   margin-top: 8px; padding-top: 10px; }
.protect-note { background: var(--surface-warm); border-radius: 12px; padding: 12px 14px; font-size: 0.8rem;
                color: var(--ink); margin-top: 14px; }
.protect-note b { color: var(--orange); }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.f-field label { display: block; font-size: 0.78rem; font-weight: 800; color: var(--muted); margin-bottom: 6px;
                 text-transform: uppercase; letter-spacing: .04em; }
.f-field input, .f-field select, .f-field textarea {
    display: block; width: 100%; min-width: 0; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: 12px;
    font-family: var(--font-body); font-size: 0.93rem; line-height: 1.35;
    color: var(--ink); background-color: #fff;
}
.book-box select, .f-field select {
    -webkit-appearance: none; appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%231e4f91' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}
.f-field textarea { resize: vertical; min-height: 90px; }

/* ---------- info/steps ---------- */
.step-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 26px 0; }
.step-cell { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; text-align: center; }
.step-cell .n { font-size: 1.3rem; font-weight: 800; color: var(--orange); }
.step-cell .t { font-size: 0.85rem; font-weight: 700; color: var(--ink); margin-top: 4px; }

.notice { border-radius: 14px; padding: 14px 18px; font-size: 0.9rem; margin: 18px 0; }
.notice-green { background: #e5f7ec; color: #14532d; border: 1px solid #b7e4c7; }
.notice-blue { background: var(--surface-soft); color: var(--ink); border: 1px solid var(--line); }
.notice-warn { background: var(--surface-warm); color: #7a4a12; border: 1px solid #f3dfb0; }

/* ---------- package cards ---------- */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.pkg-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px;
            display: flex; flex-direction: column; gap: 12px; transition: all .25s ease; }
.pkg-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.pkg-card .p-ico { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
                   background: linear-gradient(135deg, var(--blue), var(--orange)); color: #fff; font-size: 1.3rem; }
.pkg-card h3 { font-size: 1.15rem; color: var(--ink); }
.pkg-card p { font-size: 0.88rem; color: var(--muted); flex: 1; }

/* ---------- chat ---------- */
.chat-box { display: flex; flex-direction: column; gap: 9px; max-height: 330px; overflow-y: auto; padding: 6px 2px; }
.msg { max-width: 78%; padding: 10px 14px; border-radius: 15px; font-size: 0.89rem; line-height: 1.4; }
.msg.me { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 5px; }
.msg.them { align-self: flex-start; background: var(--surface-soft); color: var(--ink); border-bottom-left-radius: 5px; }
.msg small { display: block; opacity: 0.7; font-size: 0.68rem; margin-top: 3px; }

/* ---------- misc ---------- */
.stat-pills { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.toast-inline { border-radius: 12px; padding: 12px 16px; font-size: 0.88rem; font-weight: 600; margin-top: 12px; display: none; }
.toast-inline.ok { display: block; background: #e5f7ec; color: #14532d; }
.toast-inline.err { display: block; background: #fdecec; color: #b42318; }
.sect-h { font-size: 1.2rem; font-weight: 800; color: var(--ink); margin: 26px 0 12px; }
.skel { background: linear-gradient(100deg, #eef2f8 40%, #f8fafc 50%, #eef2f8 60%); background-size: 200% 100%;
        animation: skel 1.3s infinite; }
@keyframes skel { to { background-position-x: -200%; } }

/* ---------- page cover photo ----------
   One shared banner for the top of the public information pages. Every image
   in static/images/cover is pre-cropped to 1600x700, so this only has to pick
   a height and keep the crop centred. Kept deliberately plain so it inherits
   the same rounded/bordered language as .pg-card and the rest of the page.

   loading="lazy" is NOT set on these in the markup: they sit above the fold,
   where lazy-loading delays the largest paint instead of helping it. */
.hb-cover {
    display: block;
    width: 100%;
    height: clamp(150px, 26vw, 300px);
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    margin: 0 0 22px;
}

/* Per-image focal points for the wide public-page banners. The geometry is
   unchanged; only the part of each original shown inside it is corrected. */
.hb-cover[src*="leisure-street-food"],
.hb-cover[src*="photo_5767073775319977731_w"] { object-position: 50% 0% !important; }
.hb-cover[src*="package-family-heritage"] { object-position: 50% 62% !important; }
.hb-cover[src*="package-group-aodai"] { object-position: 50% 64% !important; }
.hb-cover[src*="packages-picnic"] { object-position: 50% 65% !important; }
.hb-cover[src*="sports-buddy-sea"] { object-position: 50% 62% !important; }
.hb-cover[src*="plan-with-me-evening"] { object-position: 50% 56% !important; }
.hb-cover[src*="safety-public-place"] { object-position: 50% 55% !important; }


/* ---------------------------------------------------------------------------
   SAFETY - what we can actually help with

   A plain list on purpose. The page above it has just told somebody to call
   an ambulance; this is the calm part, and it should not compete.
   --------------------------------------------------------------------------- */
.safe-help { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.safe-help li {
    position: relative;
    padding-left: 26px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ink);
}

.safe-help li::before {
    content: '¹3';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e5f7ec;
    color: #1d8a4c;
    font-size: 0.68rem;
    font-weight: 800;
}


/* Shared with marketplace.css: the positioning line, quiet by design. */
.scope-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--muted);
}

.scope-note i { margin-top: 2px; opacity: 0.7; }