/* =====================================================================
   style-ratings.css — Phase 3 rating UI
     - Trigger tile (square, under the beach name)
     - Floating swiper panel (FLIP from tile → centered 66vw card)
     - Backdrop blur (eases in/out alongside the panel)
     - Swiper track (drag to set value, half-star snap)
     - Two-step flow (overall → sub-dims)
   ===================================================================== */

/* ── Tile trigger (sits under the beach name) ──────────────────────── */
/* Opaque dark-blue square with a big star icon and the rating digits
   floating on top.                                                    */
.beach-rate-tile {
    appearance: none;
    border: 0;
    padding: 0;
    width: 64px;
    height: 64px;
    background: var(--bz-color-primary, #1A7E78);
    color: var(--cream, #FAF2E1);
    border-radius: 0;
    cursor: pointer;
    /* Reliable tap on touch devices: allow tap + pinch, suppress the
       300ms double-tap-zoom delay that can swallow the first tap on
       iOS. Without this the tile sometimes needs two taps to open. */
    touch-action: manipulation;
    /* Anchored independently of .beach-label (moved out in #82) so
       bzDesign can drag it freely. Default lands it left-of beach
       name, below the val-stack column. Operator-set positions in
       bzDesign override via published layouts_css. */
    position: absolute;
    left: 48px;
    bottom: 130px;
    z-index: 19;
    overflow: visible;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
    transition: transform .18s ease-out, box-shadow .18s ease-out, opacity .18s;
    display: inline-block;
}
.beach-rate-tile:hover  { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.36); }
.beach-rate-tile:active { transform: translateY(0); }
.beach-rate-tile__star {
    position: absolute;
    inset: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    fill: #f5b301;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
/* Number overlaid on the upper body of the star (the visual centroid
   of a 5-point star sits slightly above geometric center).             */
.beach-rate-tile__num {
    position: absolute;
    left: 50%;
    /* Top:66.67% puts the element's anchor on the 2/3 horizontal line;
       translateY(-50%) centres its height on that line — visually the
       digits sit on the bottom-third gridline.                         */
    top: 66.67%;
    transform: translate(-50%, -50%);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 28px;
    width: 66%;
    text-align: center;
    color: #FFFFFF;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.78),
        0 0 10px rgba(0, 0, 0, 0.60);
    pointer-events: none;
}
.beach-rate-tile__mine { display: none !important; }
.beach-rate-tile__mine {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--bz-color-primary, #1A7E78);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 0;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
}
.beach-rate-tile[data-rated="1"] .beach-rate-tile__mine { display: inline-block; }
.beach-rate-tile.is-flipped { opacity: 0; pointer-events: none; }

/* ── Full-viewport blur backdrop ──────────────────────────────────── */
.bz-rate-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 360ms cubic-bezier(.2,.8,.2,1),
        background-color 360ms cubic-bezier(.2,.8,.2,1),
        backdrop-filter 360ms cubic-bezier(.2,.8,.2,1),
        -webkit-backdrop-filter 360ms cubic-bezier(.2,.8,.2,1);
}
.bz-rate-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ── Floating swiper panel ────────────────────────────────────────── */
/* The CSS default state is the final "open" state. JS applies inline
   transform + opacity to start the panel collapsed at the tile's
   position, then clears those styles in the next frame so the CSS
   transition carries it to center. Same approach in reverse for close. */
.bz-rate-panel {
    position: fixed;
    z-index: 9995;
    top: 50%;
    left: 50%;
    width: 66vw;
    max-width: 560px;
    min-width: 320px;
    transform: translate(-50%, -50%);
    opacity: 1;

    /* No card chrome — content floats against the blurred backdrop. */
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    color: #FFFFFF;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
    padding: 24px 28px;

    transition:
        transform 380ms cubic-bezier(.2,.9,.25,1.1),
        opacity   260ms cubic-bezier(.2,.8,.2,1);
    /* Pointer events stay enabled so the panel can scroll vertically
       when step 2 exceeds the viewport. A click handler on the panel
       (added in ratings.js) closes it when the user clicks the bare
       padding area (e.target === panel). Interactive children handle
       their own clicks normally. */
    pointer-events: auto;
    /* dvh tracks the visible viewport on mobile (excludes browser
       chrome) so the panel never silently overflows behind the URL
       bar. overflow-y:auto guarantees the last row (dog Yes/No +
       Save button) is always reachable on small screens. */
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform-origin: center center;
    text-align: center;
}
.bz-rate-panel .bz-rate-swiper,
.bz-rate-panel .bz-rate-btn,
.bz-rate-panel .bz-rate-note { pointer-events: auto; }
@media (max-width: 540px) {
    .bz-rate-panel {
        width: 88vw;
        padding: 20px 18px;
    }
}

.bz-rate-panel__title {
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 4px;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0;
    text-transform: none;
}
.bz-rate-panel__sub {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 22px;
    color: #FFFFFF;
}

/* ── Swiper track ─────────────────────────────────────────────────── */
.bz-rate-swiper {
    position: relative;
    user-select: none;
    touch-action: pan-y;            /* allow vertical scroll; horizontal is ours */
    padding: 6px 0;
}
.bz-rate-swiper__track {
    position: relative;
    display: flex;
    gap: 4px;
    cursor: grab;
}
.bz-rate-swiper:active .bz-rate-swiper__track { cursor: grabbing; }
.bz-rate-swiper__star {
    flex: 1 1 0;
    position: relative;
    aspect-ratio: 1 / 1;
}
.bz-rate-swiper__star svg {
    width: 100%;
    height: 100%;
    display: block;
}
.bz-rate-swiper__bg { fill: rgba(255, 255, 255, 0.25); }
.bz-rate-swiper__fg { fill: #f5b301; transition: opacity 80ms linear; }

.bz-rate-swiper__readout {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    margin-top: 14px;
    font-variant-numeric: tabular-nums;
    color: #FFFFFF;
    line-height: 1;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.bz-rate-swiper__readout .denom {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    font-size: 20px;
}

/* Sub-dimension row (step 2). Label sits above; stars stripe and the
   numeric value share a single line so the value reads right next to
   the last star.                                                     */
.bz-rate-mini {
    margin-bottom: 10px;
    text-align: center;
}
.bz-rate-mini__label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #FFFFFF;
    text-align: center;
}
/* Three-column grid: spacer / stripe / value. Stars sit in the centred
   column whether or not the right value is visible — the symmetric
   spacer on the left reserves the same width as the value column so
   the visual centre never shifts.
   inline-grid + the parent's text-align:center centres the whole grid
   block inside .bz-rate-mini.                                         */
.bz-rate-mini__row {
    display: inline-grid;
    grid-template-columns: 38px 220px 38px;
    align-items: center;
}
.bz-rate-mini__val {
    grid-column: 3;
    padding-left: 10px;
    font-variant-numeric: tabular-nums;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}
.bz-rate-mini .bz-rate-swiper {
    grid-column: 2;
    width: 220px;
    margin: 0;
    padding: 0;
}
.bz-rate-mini .bz-rate-swiper__track { gap: 4px; }
.bz-rate-mini .bz-rate-swiper__star {
    aspect-ratio: 1 / 1;
    max-width: 36px;
    max-height: 36px;
}
.bz-rate-mini .bz-rate-swiper__readout { display: none; }

/* Yes/No row used by the dog-friendly dimension. */
.bz-rate-mini__binary {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.bz-rate-mini__bin {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 22px;
    cursor: pointer;
    border-radius: 0;
    transition: background .15s, color .15s;
    text-shadow: none;
}
.bz-rate-mini__bin:hover {
    color: #FFFFFF;
}
.bz-rate-mini__bin.is-active {
    background: var(--bz-color-primary, #1A7E78);
    color: #FFFFFF;
}

/* ── Action row ───────────────────────────────────────────────────── */
.bz-rate-actions {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.bz-rate-btn {
    appearance: none;
    border: 0;
    padding: 12px 24px;
    border-radius: 0;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-shadow: none;
    transition: opacity .25s cubic-bezier(.2,.8,.2,1), transform .15s, background .15s, border-color .15s;
}
.bz-rate-btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.bz-rate-btn--ghost:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.08);
}
.bz-rate-btn--primary {
    background: var(--bz-color-primary, #1A7E78);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.bz-rate-btn--primary:hover { background: var(--bz-color-primary-hover, #146963); }
.bz-rate-btn--primary[disabled] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
}

/* ── Multi-step ───────────────────────────────────────────────────── */
.bz-rate-step {
    transition: opacity 220ms cubic-bezier(.2,.8,.2,1), transform 280ms cubic-bezier(.2,.8,.2,1);
}
.bz-rate-step.is-leaving {
    opacity: 0;
    transform: translateX(-40px);
}
.bz-rate-step.is-entering {
    opacity: 0;
    transform: translateX(40px);
}
.bz-rate-step.is-entering.is-mounted {
    opacity: 1;
    transform: translateX(0);
}

.bz-rate-window-hint {
    background: rgba(245, 179, 1, 0.20);
    border: 1px solid rgba(245, 179, 1, 0.55);
    padding: 10px 12px;
    font-size: 13px;
    color: #FFFFFF;
    border-radius: 0;
    margin: 0 auto 14px;
    max-width: 90%;
    text-align: center;
}

.bz-rate-error,
.bz-rate-success {
    padding: 10px 12px;
    border-radius: 0;
    font-size: 14px;
    margin-bottom: 12px;
}
.bz-rate-error   { background: #fbe9e9; color: #c0392b; }
.bz-rate-success { background: #e6f3ec; color: #1f7a4a; }

/* ── Gate states (sign in / verify) — re-using simple stack ───────── */
.bz-rate-gate {
    text-align: center;
    padding: 8px 4px;
}
.bz-rate-gate h3 {
    margin: 0 0 6px;
    font-size: 20px;
    color: #FFFFFF;
}
.bz-rate-gate p {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 14px;
}

.bz-rate-note {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.10);
    color: #FFFFFF;
    font: inherit;
    font-size: 13px;
    resize: none;
    min-height: 44px;
    max-height: 60px;
    text-shadow: none;
}
.bz-rate-note::placeholder { color: rgba(255, 255, 255, 0.55); }
.bz-rate-note:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.70);
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.10);
}
.bz-rate-note-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    text-align: right;
    margin-top: 4px;
}

/* Section divider in step 2 */
.bz-rate-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.70);
    margin: 10px 0 6px;
    text-align: center;
}