/* ==========================================================================
   Table reservation - pizza theme

   Many of these classes are built by reservation.js via innerHTML and appear in no Blade view
   (documented trap in docs/shop/themes.md). Without this file the table map is unstyled and no
   test goes red.
   ========================================================================== */

/* -- Home page banner -- */

.res-banner {
    display: grid;
    gap: 24px;
    padding: 40px;
    border: 1px solid var(--border);
    border-radius: var(--r-xl, 24px);
    background:
        radial-gradient(120% 120% at 100% 0%, var(--primary-tint), transparent 60%),
        var(--surface);
}

.res-banner.has-media {
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 900px) {
    .res-banner.has-media {
        grid-template-columns: 1.15fr 0.85fr;
    }
}

.res-banner-media img {
    width: 100%;
    height: auto;
    border-radius: var(--r-lg, 18px);
    object-fit: cover;
}

.res-banner-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.res-banner-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    transition: border-color .2s, background .2s;
}

.res-banner-chip:hover {
    border-color: var(--primary);
    background: var(--primary-tint);
}

.res-banner-chip small {
    color: var(--text-muted);
}

.res-banner-actions {
    margin-top: 20px;
}

/* -- Reservation page layout -- */

.res-layout {
    display: grid;
    gap: 24px;
    align-items: start;
}

@media (min-width: 1000px) {
    .res-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .res-aside {
        position: sticky;
        top: 24px;
    }
}

.res-block {
    margin-bottom: 40px;
}

.res-block-title {
    margin: 0 0 16px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.res-empty {
    padding: 24px;
    border: 1px dashed var(--border);
    border-radius: var(--r-lg, 18px);
    color: var(--text-muted);
    text-align: center;
}

/* -- Mode selection -- */

.res-modes {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 24px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
}

.res-mode {
    padding: 8px 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
}

.res-mode.is-active {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
}

/* -- Occasion cards -- */

.res-occasions {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.res-occasion {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 18px);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    text-align: start;
    transition: border-color .2s, transform .2s;
}

.res-occasion:hover:not(:disabled) {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.res-occasion.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-tint);
}

.res-occasion.is-full,
.res-occasion:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.res-occasion-img {
    width: 100%;
    height: 130px;
    object-fit: cover;
}

.res-occasion-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
}

.res-occasion-title {
    font-weight: 700;
}

.res-occasion-meta,
.res-occasion-price {
    color: var(--text-muted);
    font-size: .9rem;
}

.res-occasion-full {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(220, 38, 38, .12);
    color: var(--error);
    font-size: .8rem;
}

/* -- Controls and slots -- */

.res-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.res-field {
    display: flex;
    flex: 1 1 180px;
    flex-direction: column;
    gap: 6px;
    color: var(--text-muted);
    font-size: .9rem;
}

.res-field input,
.res-field textarea {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md, 12px);
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

.res-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.res-slot {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    font: inherit;
}

.res-slot.is-active {
    border-color: var(--primary);
    background: var(--primary-tint);
    font-weight: 700;
}

/* -- Salon and table map -- */

.res-salon {
    margin-bottom: 20px;
}

.res-salon-title {
    margin: 0 0 12px;
    font-size: .95rem;
    color: var(--text-muted);
}

.res-tables {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.res-table {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md, 12px);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    text-align: center;
}

.res-table-no {
    font-weight: 700;
}

.res-table-cap,
.res-table-state {
    color: var(--text-muted);
    font-size: .82rem;
}

.res-table.is-available:hover {
    border-color: var(--primary);
}

.res-table.is-active {
    border-color: var(--primary);
    background: var(--primary-tint);
}

/* Status colors - the same four states as ReservationAvailabilityService. */
.res-table.is-reserved {
    border-color: var(--warning);
    background: rgba(245, 158, 11, .14);
    color: var(--warning);
    cursor: not-allowed;
}

.res-table.is-occupied {
    border-color: var(--error);
    background: rgba(220, 38, 38, .12);
    color: var(--error);
    cursor: not-allowed;
}

.res-table.is-too_small {
    opacity: .5;
    cursor: not-allowed;
}

.res-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-muted);
    font-size: .85rem;
}

.res-legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.res-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg);
}

.res-dot.is-available { background: var(--success); }
.res-dot.is-reserved { background: var(--warning); }
.res-dot.is-occupied { background: var(--error); }
.res-dot.is-too_small { background: var(--text-muted); }

/* -- Cost summary -- */

.res-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.res-sum-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    color: var(--text-muted);
}

.res-sum-total {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    color: var(--text);
    font-weight: 700;
}

.res-sum-deposit {
    color: var(--primary);
    font-weight: 700;
}

.res-guest {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.res-note,
.res-terms {
    color: var(--text-muted);
    font-size: .85rem;
}

.res-submit {
    width: 100%;
}

/* -- Customer's reservations list -- */

.res-list {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.res-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 18px);
    background: var(--surface);
}

.res-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.res-card-no {
    font-weight: 700;
}

.res-card-status {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-muted);
    font-size: .8rem;
}

.res-card.is-confirmed .res-card-status { background: rgba(46, 82, 82, .12); color: var(--secondary); }
.res-card.is-pending .res-card-status { background: rgba(245, 158, 11, .14); color: var(--warning); }
.res-card.is-seated .res-card-status { background: var(--success-tint); color: var(--success); }
.res-card.is-canceled .res-card-status,
.res-card.is-no_show .res-card-status { background: rgba(220, 38, 38, .12); color: var(--error); }

.res-card-when,
.res-card-where,
.res-card-occasion {
    margin: 0;
    color: var(--text-muted);
    font-size: .9rem;
}

.res-card-total {
    margin: 0;
    font-weight: 700;
}

.res-new {
    margin-top: 24px;
}

/* Guest reservation receipt - replaces the cost summary after a successful booking. */
.res-receipt {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

.res-receipt-title {
    margin: 0;
    color: var(--success);
    font-weight: 700;
}

.res-receipt-no {
    margin: 0;
    font-weight: 700;
}

.res-receipt-when,
.res-receipt-where,
.res-receipt-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: .9rem;
}


/* -- Day strip (Shamsi calendar) -- */

.res-daybar {
    margin-bottom: 16px;
}

.res-daybar-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.res-field-label {
    color: var(--text-muted);
    font-size: .9rem;
}

.res-day-current {
    color: var(--primary);
    font-size: .95rem;
}

/* Horizontal and scrollable: the allowed range can be up to 60 days. */
.res-days {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.res-day {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 92px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    line-height: 1.35;
}

.res-day:hover {
    border-color: var(--primary);
}

.res-day.is-active {
    border-color: transparent;
    background: var(--primary);
    color: var(--on-primary);
}

.res-day-weekday {
    font-size: .82rem;
    opacity: .8;
}

.res-day-date {
    font-weight: 700;
}

/* -- Reservation mode: occasion vs. free --
   A free reservation has nothing to do with occasions, so neither their list nor their empty
   space shows. The `mode-occasion` class is put on the page root by reservation.js. */

[data-reservation-page]:not(.mode-occasion) .res-occasions-block {
    display: none;
}


/* -- Live salon map --
   Tables and chairs sit at absolute coordinates on a scalable canvas. All numbers inside style
   come from the server; only appearance is defined here.

   Classes built via innerHTML (salon-map.js) have no tests - if a name is missing here, the map
   silently loses its styling. */

.res-view-switch {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 20px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
}

.res-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .18s, color .18s;
}

.res-view svg {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.res-view:hover:not(.is-active) {
    background: var(--surface);
    color: var(--text-strong);
}

.res-view.is-active {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 800;
    box-shadow: 0 2px 10px rgba(244, 114, 11, .3);
}

/* -- Salon picker --
   When a branch has more than one salon, only one is visible instead of stacking the maps, and
   the user switches with these tabs. Horizontal scroll since the number of salons has no cap. */

.res-salon-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.res-salon-tab {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 132px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    text-align: start;
    line-height: 1.4;
    transition: border-color .18s, background .18s, color .18s;
}

.res-salon-tab:hover:not(.is-active) {
    border-color: var(--primary);
}

.res-salon-tab.is-active {
    border-color: transparent;
    background: var(--primary);
    color: var(--on-primary);
}

.res-salon-tab-name {
    font-size: .9rem;
    font-weight: 700;
}

.res-salon-tab-free {
    font-size: .74rem;
    color: var(--success);
}

.res-salon-tab-free.is-none {
    color: var(--error);
}

.res-salon-tab.is-active .res-salon-tab-free,
.res-salon-tab.is-active .res-salon-tab-free.is-none {
    color: inherit;
    opacity: .8;
}

/* "Your selected table is here" marker - without it, switching salons made the user lose track
   of their selection. */
.res-salon-tab.has-pick::after {
    content: "";
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 2px var(--surface);
}

.res-salon-tab.is-active.has-pick::after {
    background: var(--on-primary);
    box-shadow: none;
}

.res-salon-note {
    margin: 0 0 8px;
    font-size: .78rem;
    color: var(--text-muted);
}

.res-salon-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}

.res-salon-free {
    font-size: .78rem;
    font-weight: 700;
    color: var(--map-ok);
}

.res-salon-free.is-none {
    color: var(--map-danger);
}

/* WARNING: without this the map built an endless loop: the scaled canvas width widened the grid
   column, ResizeObserver measured again, the scale grew... up to the zoom ceiling. `min-width: 0`
   cancels the automatic min-content minimum so the column no longer grows with its content. */
.res-main,
.res-salon {
    min-width: 0;
}

.res-map,
.res-map-viewport {
    max-width: 100%;
}

.res-map {
    position: relative;
    border: 1px solid var(--map-border);
    border-radius: var(--r-lg, 18px);
    background: var(--map-shell);
    overflow: hidden;

    /* Palette consumed by the server's SVGs */
    --map-fill: var(--map-paper);
    --map-line: var(--map-stroke);
    --map-ink: var(--map-ink-color);
    --map-screen: #5AB6F0;
    --map-wall: var(--map-wall-fill);
    --map-accent-tint: var(--map-accent-soft);
}

.res-map-tools {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--map-border);
    border-radius: 999px;
    background: var(--map-chip-bg);
    backdrop-filter: blur(6px);
}

.res-map-tool {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--map-muted);
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
}

.res-map-tool:hover {
    background: var(--map-accent-soft);
    color: var(--map-accent-text);
}

.res-map-zoom {
    min-width: 44px;
    text-align: center;
    font-size: .7rem;
    color: var(--map-muted);
}

.res-map-viewport {
    width: 100%;
    padding: 14px;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* The map must never be taller than one screen, otherwise page scroll and map scroll fight
       and the user gets stuck. */
    max-height: min(74vh, 760px);
    touch-action: pan-x pan-y;
    cursor: grab;
}

.res-map-viewport.is-panning {
    cursor: grabbing;
    user-select: none;
}

.res-map-viewport::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.res-map-viewport::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: var(--map-border);
}

.res-map-sizer {
    position: relative;
    margin-inline: auto;
}

.res-map-stage {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    transform-origin: top left;
    /* x coordinates are always counted from the left; an RTL container would swap left and right
       and the map would be mirrored. */
    direction: ltr;
    border-radius: 20px;
    background: var(--map-paper);
}

.res-map-grid {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
        linear-gradient(var(--map-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--map-grid-line) 1px, transparent 1px);
    background-size: 40px 40px;
}

.res-map-walls {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.res-map-walls rect {
    fill: none;
    stroke: var(--map-stroke);
    stroke-width: 5;
}

.res-map-fx {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.res-map-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.res-map-fx-label {
    position: absolute;
    inset-block-end: -19px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: var(--map-muted);
}

.res-map-fx-label.is-inside {
    position: static;
    padding: 0 6px;
    text-align: center;
    color: var(--map-ink-color);
    opacity: .78;
}

.res-map-seat {
    position: absolute;
    z-index: 3;
    width: 40px;
    height: 40px;
    pointer-events: none;
}

.res-map-seat svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--map-muted);
}

.res-map-seat .c-seat {
    fill: var(--map-paper);
}

.res-map-seat.is-available svg { color: var(--map-ok); }
.res-map-seat.is-reserved svg { color: var(--map-danger); }
.res-map-seat.is-occupied svg { color: var(--map-busy); }
.res-map-seat.is-too_small svg { color: var(--map-muted); opacity: .55; }

.res-map-table {
    position: absolute;
    z-index: 4;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 2px solid var(--map-stroke);
    background: var(--map-paper);
    color: var(--map-ink-color);
    cursor: pointer;
    font: inherit;
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.res-map-no {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

.res-map-cap {
    font-size: 17px;
    line-height: 1;
    color: var(--map-muted);
}

.res-map-table.is-available {
    border-color: var(--map-ok);
}

.res-map-table.is-available:hover {
    box-shadow: 0 0 0 5px var(--map-accent-soft);
    border-color: var(--map-accent);
}

.res-map-table.is-active {
    border-color: var(--map-accent);
    background: var(--map-accent-soft);
    box-shadow: 0 0 0 6px var(--map-accent-soft);
}

.res-map-table.is-reserved {
    border-color: var(--map-danger);
    cursor: not-allowed;
}

.res-map-table.is-occupied {
    border-color: var(--map-busy);
    cursor: not-allowed;
}

.res-map-table.is-too_small {
    opacity: .5;
    cursor: not-allowed;
}

.res-map-table:disabled .res-map-no {
    color: var(--map-muted);
}

.res-map-hint {
    display: none;
    margin: 0;
    padding: 0 14px 12px;
    text-align: center;
    font-size: .75rem;
    color: var(--map-muted);
}

.res-map-hint.is-visible {
    display: block;
}

/* -- Responsive --
   On mobile the map takes the full page width (breaking out of the card) so every pixel goes to
   the map itself. */

@media (max-width: 720px) {
    .res-map {
        border-inline: 0;
        border-radius: 0;
        width: 100vw;
        margin-inline: calc(50% - 50vw);
    }

    .res-map-viewport {
        padding: 10px;
        max-height: 66vh;
    }

    .res-map-tools {
        inset-block-start: 8px;
        inset-inline-end: 8px;
    }

    .res-map-tool {
        width: 34px;
        height: 34px;
    }

    .res-salon-head {
        padding-inline: 2px;
    }
}

@media (max-width: 560px) {
    .res-view-switch {
        display: flex;
        width: 100%;
    }

    .res-view {
        flex: 1;
        padding-inline: 8px;
        font-size: .8rem;
    }
}

/* Map tokens - pizza theme (light). */
.res-map {
    --map-paper: #FFFFFF;
    --map-shell: #F6F7F8;
    --map-border: #E7EAEC;
    --map-grid-line: #EDEFF1;
    --map-stroke: #B9C0C7;
    --map-ink-color: #111827;
    --map-device: #2B313A;
    --map-device-line: #59616D;
    --map-muted: #6B7280;
    --map-chip-bg: rgba(255, 255, 255, .94);
    --map-accent: #F4720B;
    --map-accent-soft: rgba(244, 114, 11, .16);
    --map-accent-text: #DD6303;
    --map-ok: #16A34A;
    --map-danger: #DC2626;
    --map-busy: #F59E0B;
    --map-wall-fill: #E7EAEC;
    --map-warm: #FDF0DE;
    --map-warm-line: #D79A55;
    --map-cool: #E6F2FB;
    --map-cool-line: #5B94BE;
    --map-hot: #FDE8E4;
    --map-hot-line: #DE6A4E;
    --map-green: #DCF2E4;
    --map-green-line: #3F8F5F;
}

/* Canceling a reservation is a destructive action and must look like one; until now it was only
   `btn-text` and looked like a harmless link. */
.res-cancel {
    align-self: flex-start;
    margin-top: 8px;
    padding-inline: 0;
    color: var(--error);
    font-size: .85rem;
    font-weight: 600;
}

.res-cancel:hover {
    color: var(--error);
    text-decoration: underline;
}

/* -- Party size: stepper instead of a numeric input --
   The buttons are deliberately 44px - the floor for a reliable touch target on mobile. The previous
   version was the browser's own arrow, which is tiny and sits in the wrong place in RTL. */
.res-party {
    display: flex;
    flex: 1 1 180px;
    flex-direction: column;
    gap: 6px;
}

.res-party-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.res-party-btn {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--r-md, 12px);
    background: var(--bg);
    color: var(--text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s, opacity .15s;
}

.res-party-btn:hover:not(:disabled) {
    border-color: var(--primary, currentColor);
}

.res-party-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* The number is read-only; changing it is the buttons' job. */
.res-party-value {
    width: 64px;
    flex: 0 0 auto;
    padding: 12px 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md, 12px);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    text-align: center;
    cursor: default;
}

.res-party-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: .8rem;
}