/* ================================================================
   High Street Mode — Overlay / Bottom-Sheet CSS
   Add to styles_9.css or include as <link rel="stylesheet" href="/css/hsm.css">
   Used by rate.php (post-rating overlay) and listing.php (sticky pill + sheet)
   ================================================================ */

:root {
    --hsm-purple:      #8238BC;
    --hsm-purple-light:#F3ECF9;
    --hsm-card-bg:     #F9F6FD;
    --hsm-card-border: #E4D4F4;
    --hsm-open-green:  #16A34A;
    --hsm-gray:        #9CA3AF;
    --hsm-radius:      14px;
    --hsm-sheet-radius:20px 20px 0 0;
    --hsm-peek-height: 210px; /* handle + title + 1 card + half card */
}

/* ── Dim overlay behind the sheet ── */
.hsm-dim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.18);
    z-index: 1100;
    animation: hsmFadeIn 0.2s ease;
}
.hsm-dim.active { display: block; }

@keyframes hsmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Bottom sheet panel ── */
.hsm-panel {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 480px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--hsm-sheet-radius);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
    z-index: 1101;
    /* Start fully off-screen */
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 90vh;
    overflow: hidden; /* hidden in peek, auto when expanded */
}

/* Peek state — slides up to show first card + half second */
.hsm-panel.peek {
    display: block;
    transform: translateY(calc(100% - var(--hsm-peek-height)));
    overflow: hidden;
}

/* Expanded state — full panel */
.hsm-panel.expanded {
    display: block;
    transform: translateY(0);
    overflow-y: auto;
}

/* ── Panel inner padding ── */
.hsm-panel-inner {
    padding: 12px 20px 32px;
    /* Extra bottom padding so half-card clip looks intentional */
}

/* ── Drag handle ── */
.hsm-panel-handle {
    width: 40px;
    height: 4px;
    background: #E5E7EB;
    border-radius: 2px;
    margin: 0 auto 16px;
    cursor: grab;
}

/* ── Panel title ── */
.hsm-panel-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--hsm-purple);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* ── Expand hint — shown in peek state only ── */
.hsm-expand-hint {
    text-align: center;
    font-size: 11px;
    color: var(--hsm-gray);
    margin-top: -8px;
    margin-bottom: 8px;
    letter-spacing: 0.03em;
}
.hsm-panel.expanded .hsm-expand-hint {
    display: none;
}

/* ── Loading state ── */
.hsm-loading {
    text-align: center;
    padding: 32px 0;
    color: var(--hsm-gray);
    font-size: 14px;
}
.hsm-loading-dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hsm-purple);
    margin: 0 2px;
    animation: hsmDot 1.2s infinite;
}
.hsm-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.hsm-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes hsmDot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}

/* ── Suggestion cards ── */
.hsm-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.hsm-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--hsm-card-bg);
    border: 1.5px solid var(--hsm-card-border);
    border-radius: var(--hsm-radius);
    padding: 12px 14px;
    flex-shrink: 0;
}
.hsm-card-left  { flex-shrink: 0; }
.hsm-card-logo,
.hsm-card-initials {
    width: 44px;
    height: 44px;
    border-radius: 9px;
    object-fit: cover;
}
.hsm-card-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.hsm-card-body  { flex: 1; min-width: 0; }
.hsm-card-name  { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsm-card-cat   { font-size: 11px; color: var(--hsm-purple); font-weight: 600; margin-top: 2px; }
.hsm-card-meta  { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.hsm-open-status{ font-size: 10px; color: var(--hsm-open-green); font-weight: 600; display: flex; align-items: center; gap: 3px; }
.hsm-open-dot   { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--hsm-open-green); flex-shrink: 0; }
.hsm-dist       { font-size: 10px; color: var(--hsm-gray); }
.hsm-card-right { flex-shrink: 0; }

.hsm-walk-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--hsm-purple);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 13px;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.hsm-walk-btn:hover,
.hsm-walk-btn:active { background: #6b2a9e; color: #fff; }

/* ── Dismiss link ── */
.hsm-dismiss {
    display: block;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--hsm-gray);
    text-align: center;
    padding: 8px;
    margin-top: 4px;
}
.hsm-dismiss:hover { color: #666; }

/* ── listing.php sticky pill ── */
.hsm-pill {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: var(--hsm-purple);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(130, 56, 188, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.hsm-pill:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 24px rgba(130, 56, 188, 0.5);
}
.hsm-pill:active {
    transform: translateX(-50%) translateY(0);
}
.hsm-pill.hidden { display: none; }