/* ==========================================================================
   EXPLORE MORE WITH BUDDY — scoped styles.

   Every selector is prefixed .xp- (or lives inside .xp-section / .xp-page), so
   this file cannot affect any existing page. It reuses the brand tokens already
   defined in base.html (--blue, --orange, --ink, --muted, --line, --shadow …)
   rather than introducing a second visual identity.
   ========================================================================== */

/* ==========================================================================
   THE `hidden` ATTRIBUTE MUST ACTUALLY HIDE.

   The browser's own stylesheet says `[hidden] { display: none }`, but that
   is a UA rule with the lowest possible precedence: ANY author rule that
   sets `display` on the same element beats it. This file has several —
   `.xr-actions { display: flex }`, `.xp-note { display: flex }` — so an
   element the JavaScript marked `hidden` stayed fully visible.

   Seen in production on 2026-08-17: after the customer's Buddy was
   assigned and approved, `#xrApprovalActions` was correctly set to hidden
   and still rendered, so the customer pressed "Approve these Buddies"
   three times (02:33:32, 02:33:40, 02:33:50). Every press was a no-op the
   page gave no feedback on.

   One `!important` here is the correct fix rather than chasing every
   individual rule: `hidden` is a statement of intent by the markup, and no
   layout rule should be able to overrule it.
   ========================================================================== */
[hidden] { display: none !important; }

/* Visually hidden, still announced by screen readers. */
.sr-only-x {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Section header ------------------------------------------------------ */
.xp-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }

.xp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-warm);
    color: var(--orange);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.xp-title {
    font-size: clamp(1.75rem, 4.4vw, 2.7rem);
    font-weight: 800;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

.xp-lead { font-size: clamp(1rem, 2vw, 1.12rem); color: var(--ink); opacity: 0.86; margin-bottom: 10px; }
.xp-sub { font-size: 0.97rem; color: var(--muted); line-height: 1.6; }

/* --- Three equal category cards ------------------------------------------ */
/* Equal columns, equal card height, identical internals: no category is ever
   allowed to look bigger, richer or more expensive than the other two. */
.xp-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* Keep the people and shared table visible when the portrait leisure photo is cropped. */
.xp-card:first-child .xp-card-media img { object-position: 50% 68%; }

.xp-tags { display: flex; flex-wrap: wrap; gap: 7px; }

.xp-tag {
    background: var(--surface-soft);
    color: var(--blue);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

.xp-tag-warm { background: var(--surface-warm); color: var(--orange); }
.xp-tag-night { background: #e8edf9; color: #2c4a7c; }
.xp-tag-day { background: #fff2dd; color: #b8701a; }

.xp-safety {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1d8a4c;
    text-decoration: none;
}

.xp-safety:hover { text-decoration: underline; }
.xp-safety i { font-size: 0.82rem; }

/* --- Buttons -------------------------------------------------------------- */
.xp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
    min-height: 46px;
}

.xp-btn-primary { background: linear-gradient(135deg, var(--blue) 0%, var(--orange) 100%); color: #fff; }
.xp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(30, 79, 145, 0.3); }

.xp-btn-outline { background: #fff; color: var(--blue); border-color: var(--line); }
.xp-btn-outline:hover { border-color: var(--blue); background: var(--surface-soft); transform: translateY(-2px); }

.xp-btn-block { width: 100%; }
.xp-btn-sm { padding: 10px 18px; font-size: 0.85rem; min-height: 40px; }

.xp-btn[aria-disabled="true"],
.xp-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* --- Day / Night discovery buttons --------------------------------------- */
.xp-jump {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.xp-jump-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 58px;
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    color: var(--ink);
    font-weight: 800;
    font-size: 0.92rem;
    text-decoration: none;
    text-align: center;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.xp-jump-btn i { color: var(--orange); font-size: 1rem; }
.xp-jump-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(30, 79, 145, 0.4);
    box-shadow: 0 12px 26px rgba(30, 79, 145, 0.12);
    background: #fff;
}

/* --- Focus states (keyboard) --------------------------------------------- */
.xp-section :focus-visible,
.xp-page :focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 3px;
    border-radius: 8px;
}

/* --- Entrance animation --------------------------------------------------- */
.xp-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.xp-reveal.xp-in { opacity: 1; transform: none; }
.xp-reveal:nth-child(2) { transition-delay: 0.08s; }
.xp-reveal:nth-child(3) { transition-delay: 0.16s; }

/* ==========================================================================
   Category + browsing pages
   ========================================================================== */

.xp-page { max-width: 1180px; margin: 0 auto; padding: 110px 24px 70px; }

.xp-hero { margin-bottom: 30px; }
.xp-hero .xp-title { max-width: 900px; }
.xp-hero .xp-lead { max-width: 720px; }

.xp-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-left: 4px solid var(--blue);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.55;
    margin: 18px 0;
}

.xp-note i { color: var(--blue); margin-top: 2px; }
.xp-note-warm { background: var(--surface-warm); border-left-color: var(--orange); }
.xp-note-warm i { color: var(--orange); }

/* Disclaimer must be unmissable and appear on page, card and checkout. */
.xp-disclaimer {
    background: #fff;
    border: 1.5px solid rgba(239, 139, 44, 0.45);
    border-radius: 14px;
    padding: 13px 16px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.55;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.xp-disclaimer i { color: var(--orange); margin-top: 2px; }

.xp-disclaimer-mini {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.5;
    border-top: 1px dashed var(--line);
    padding-top: 10px;
    margin-top: 2px;
    display: flex;
    gap: 7px;
    align-items: flex-start;
}

.xp-disclaimer-mini i { color: var(--orange); margin-top: 2px; font-size: 0.76rem; }

/* --- Experience grid ------------------------------------------------------ */
.xp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 22px;
    align-items: stretch;
}

/* The four experience catalogues use the same two-across rhythm on desktop
   and mobile. The modifier keeps this layout separate from the homepage
   category cards, Buddy results and every other grid on the site. */
.xp-grid.xp-grid--catalogue {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
}

.xp-item {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 8px 24px rgba(30, 79, 145, 0.06);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.xp-item:hover,
.xp-item:focus-within {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: rgba(30, 79, 145, 0.3);
}

.xp-item-media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-soft); overflow: hidden; }
.xp-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
/* Keep faces and the action visible when portrait originals are cropped into
   the shared landscape frame. Apply the same focal point on cards and detail
   pages so opening an experience never changes the crop unexpectedly. */
:is(.xp-item-media, .xp-detail-media) img[src*="exp_aodai.jpg"] { object-position: 50% 36% !important; }
:is(.xp-item-media, .xp-detail-media) img[src*="exp_citywalk.jpg"] { object-position: 50% 40% !important; }
:is(.xp-item-media, .xp-detail-media) img[src*="exp_coffee.jpg"] { object-position: 50% 38% !important; }
:is(.xp-item-media, .xp-detail-media) img[src*="exp_party.jpg"] { object-position: 50% 34% !important; }
:is(.xp-item-media, .xp-detail-media) img[src*="exp_streetfood.jpg"] { object-position: 50% 36% !important; }
:is(.xp-item-media, .xp-detail-media) img[src*="buddy_bar.jpg"] { object-position: 50% 34% !important; }
:is(.xp-item-media, .xp-detail-media) img[src*="IMG_1747.JPG.jpeg"] { object-position: 50% 28% !important; }
:is(.xp-item-media, .xp-detail-media) img[src*="IMG_1749.JPG.jpeg"] { object-position: 50% 38% !important; }
:is(.xp-item-media, .xp-detail-media) img[src*="IMG_1752.JPG.jpeg"] { object-position: 50% 40% !important; }
.xp-item:hover .xp-item-media img { transform: scale(1.04); }

.xp-time-badge {
    position: absolute;
    right: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 3px 12px rgba(20, 40, 70, 0.16);
}

.xp-item-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; flex: 1; }
.xp-item-title { font-size: 1.04rem; font-weight: 800; color: var(--ink); line-height: 1.3; }
.xp-item-text { font-size: 0.87rem; color: var(--muted); line-height: 1.6; }

.xp-meta { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }

.xp-meta-row {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.45;
}

.xp-meta-row i { color: var(--blue); width: 15px; flex-shrink: 0; margin-top: 2px; font-size: 0.78rem; }
.xp-meta-row span { min-width: 0; }

.xp-buddy-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1d8a4c;
    background: #e5f7ec;
    padding: 8px 12px;
    border-radius: 10px;
}

.xp-buddy-line.xp-buddy-none { color: var(--muted); background: var(--surface-soft); font-weight: 600; }

/* ---------------------------------------------------------------------------
   PRICE

   A card has one job here: let somebody decide whether this is in their
   range, without making them open anything. So the figure is the loudest
   thing in the block, the qualifier next to it says what it buys, and the
   full includes/excludes list is one tap away rather than four more lines
   of small print on every card.
   --------------------------------------------------------------------------- */
.xp-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--blue);
}

.xp-price b { font-size: 1.16rem; letter-spacing: -0.01em; }

.xp-price-from,
.xp-price-tag {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.xp-price-tag {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    color: var(--blue);
}

.xp-price-for {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}

.xp-price small {
    flex: 1 0 100%;
    display: block;
    font-weight: 500;
    color: var(--muted);
    font-size: 0.75rem;
    margin-top: 2px;
    line-height: 1.5;
}

.xp-includes { margin-top: 8px; }

.xp-includes summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--blue);
    cursor: pointer;
    list-style: none;
}

.xp-includes summary::-webkit-details-marker { display: none; }

.xp-includes summary::before {
    content: 'B';
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--line);
    font-size: 0.72rem;
    line-height: 1;
}

.xp-includes[open] summary::before { content: '‘2'; }

.xp-includes-body {
    padding: 10px 12px;
    margin-top: 4px;
    border-radius: 12px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
}

.xp-inc, .xp-exc { list-style: none; margin: 0; padding: 0; }

.xp-inc li, .xp-exc li {
    position: relative;
    padding-left: 20px;
    font-size: 0.78rem;
    line-height: 1.65;
    color: var(--ink);
    font-weight: 500;
}

.xp-inc li::before {
    content: '¹3';
    position: absolute;
    left: 0;
    color: #1c6b3f;
    font-weight: 800;
}

.xp-exc li::before {
    content: '3';
    position: absolute;
    left: 2px;
    color: var(--muted);
    font-weight: 800;
}

.xp-exc-h {
    margin: 8px 0 2px;
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--muted);
    line-height: 1.5;
}

.xp-item-actions { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }

.xp-help-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    padding: 6px;
    border-radius: 8px;
}

.xp-help-link:hover { color: var(--blue); background: var(--surface-soft); }

/* --- Loading / empty states ---------------------------------------------- */
.xp-skel {
    background: linear-gradient(90deg, #eef2f8 25%, #f7fafd 50%, #eef2f8 75%);
    background-size: 200% 100%;
    animation: xp-shimmer 1.3s ease-in-out infinite;
    border-radius: 12px;
}

@keyframes xp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.xp-skel-card { height: 340px; border-radius: 20px; }

.xp-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 56px 24px;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: 20px;
}

.xp-empty i { font-size: 2rem; color: var(--orange); margin-bottom: 14px; display: block; }
.xp-empty h3 { font-size: 1.1rem; color: var(--ink); margin-bottom: 8px; }
.xp-empty p { font-size: 0.9rem; color: var(--muted); max-width: 420px; margin: 0 auto 18px; line-height: 1.6; }

/* --- Upcoming services ---------------------------------------------------- */
.xp-upcoming {
    margin-top: 54px;
    padding: 30px 24px 34px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 22px;
}

.xp-upcoming-head { text-align: center; margin-bottom: 22px; }
.xp-upcoming-head h2 { font-size: 1.35rem; color: var(--ink); margin-bottom: 6px; }
.xp-upcoming-head p { font-size: 0.9rem; color: var(--muted); }

.xp-upcoming-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 16px; }

.xp-soon {
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    opacity: 0.92;
}

.xp-soon-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.xp-soon h4 { font-size: 0.96rem; color: var(--ink); }
.xp-soon p { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }

.xp-soon-badge {
    align-self: flex-start;
    background: var(--surface-warm);
    color: var(--orange);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
}

.xp-soon button { margin-top: auto; }

/* --- Detail page ---------------------------------------------------------- */
.xp-detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: start; }

.xp-detail-media { border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-soft); }
.xp-detail-media img { width: 100%; height: 100%; object-fit: cover; }

.xp-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 20px 22px;
    margin-bottom: 18px;
}

.xp-panel h3 { font-size: 1.02rem; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }
.xp-panel h3 i { color: var(--orange); }

.xp-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.xp-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--muted); line-height: 1.55; }
.xp-list li i { color: #1d8a4c; margin-top: 3px; font-size: 0.8rem; }
.xp-list-x li i { color: var(--muted); }

.xp-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.xp-dl div { background: var(--surface-soft); border-radius: 12px; padding: 12px 14px; }
.xp-dl dt { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; }
.xp-dl dd { font-size: 0.9rem; font-weight: 700; color: var(--ink); }

.xp-pending { color: var(--muted); font-weight: 600; font-style: italic; }

.xp-book-panel { position: sticky; top: 96px; }

/* --- Buddy strip ---------------------------------------------------------- */
.xp-buddies { display: flex; flex-wrap: wrap; gap: 10px; }

.xp-buddy {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-soft);
    border-radius: 999px;
    padding: 6px 14px 6px 6px;
    text-decoration: none;
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 700;
    transition: transform 0.2s ease, background 0.2s ease;
}

.xp-buddy:hover { transform: translateY(-2px); background: var(--surface-warm); }
.xp-buddy img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.xp-buddy .xp-buddy-fallback {
    width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 0.8rem;
}
.xp-buddy small { display: block; font-weight: 600; color: var(--muted); font-size: 0.72rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
    .xp-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xp-detail-grid { grid-template-columns: 1fr; }
    .xp-book-panel { position: static; }
}

@media (max-width: 860px) {
    /* Match the Buddy-card rhythm: two equal cards per row on smaller screens. */
    .xp-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        max-width: 820px;
        margin: 0 auto;
    }
    .xp-reveal:nth-child(2), .xp-reveal:nth-child(3) { transition-delay: 0.05s; }
}

@media (max-width: 700px) {
    .xp-page { padding: 96px 18px 56px; }
    .xp-head { margin-bottom: 30px; }
    /* One column, not the desktop two. Each of these cards carries a title, a
       description, tags, three meta rows, a Buddy line, a price, a dashed
       disclaimer, two buttons and a help link. Half a phone cannot hold that
       without taking every one of them down to nine pixels — so the card
       takes the full width instead, and each element below keeps the desktop
       size it has everywhere else. */
    .xp-grid.xp-grid--catalogue {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .xp-grid--catalogue .xp-item {
        min-width: 0;
        border-radius: 16px;
        box-shadow: 0 5px 16px rgba(30, 79, 145, 0.06);
    }
    .xp-grid--catalogue .xp-item-body {
        min-width: 0;
        gap: 9px;
        padding: 15px 15px 17px;
    }
    .xp-grid--catalogue .xp-item-title { overflow-wrap: anywhere; }
    /* Long activity names should wrap inside the pill rather than push the
       row wider than the card. */
    .xp-grid--catalogue .xp-tag {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .xp-grid--catalogue .xp-meta-row span,
    .xp-grid--catalogue .xp-price { overflow-wrap: anywhere; }
    .xp-grid--catalogue .xp-item-actions .xp-btn { min-height: 44px; }
}

@media (max-width: 420px) {
    .xp-jump { grid-template-columns: minmax(0, 1fr); }
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .xp-item, .xp-jump-btn, .xp-btn, .xp-buddy, .xp-item-media img {
        transition: none !important;
        transform: none !important;
    }
    .xp-reveal { opacity: 1; transform: none; transition: none; }
    .xp-skel { animation: none; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
    .xp-jump, .xp-item-actions { display: none; }
}

/* ==========================================================================
   Experience requests — the experience-first form, matches and quote.
   Uses the existing tokens, buttons and card shapes; no new design language.
   ========================================================================== */
.xr-card { min-width: 0; margin-bottom: 22px; }
.xr-card legend, .xr-card h2 {
    font-size: 1.05rem; font-weight: 800; color: var(--ink);
    max-width: 100%; margin-bottom: 14px; padding: 0 4px;
    display: flex; align-items: center; gap: 9px; line-height: 1.3;
}
.xr-card legend i, .xr-card h2 i { flex: none; color: var(--orange); line-height: 1; }

.xr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.xr-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.xr-field > span {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em;
    line-height: 1.35; text-transform: uppercase; color: var(--muted);
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 4px;
}
.xr-field > span b { color: var(--orange); line-height: 1; }
.xr-field input, .xr-field select, .xr-field textarea {
    display: block; width: 100%; min-width: 0; padding: 11px 13px;
    min-height: 44px; border: 1.5px solid var(--line);
    border-radius: 12px; font-family: inherit; font-size: 0.92rem;
    line-height: 1.35; color: var(--ink); background-color: #fff;
}
.xr-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;
}
.xr-field textarea { resize: vertical; }
.xr-field input[type="checkbox"] { min-height: 0; width: 20px; height: 20px; }
.xr-field small { font-size: 0.78rem; color: var(--muted); line-height: 1.45; }
.xr-field.xr-wide { grid-column: 1 / -1; }
.xr-lock { color: var(--muted); font-size: 0.7rem; margin-left: 0; line-height: 1; }
.xr-error { display: block; font-size: 0.8rem; color: #c0392b; font-style: normal; font-weight: 700; }
.xr-form-error {
    margin-top: 14px; padding: 12px 14px; border-radius: 12px;
    background: #fdecea; color: #a5281b; font-weight: 700; font-size: 0.9rem;
}
.xr-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }

.xr-summary { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.xr-summary dt { font-size: 0.74rem; font-weight: 800; text-transform: uppercase;
                 letter-spacing: 0.05em; color: var(--muted); }
.xr-summary dd { margin: 0; color: var(--ink); font-weight: 700; font-size: 0.92rem; }

.xr-matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
              gap: 14px; margin-bottom: 16px; }
.xr-match {
    display: flex; gap: 11px; padding: 14px; border: 1.5px solid var(--line);
    border-radius: 16px; background: #fff; cursor: pointer;
}
.xr-match:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,79,145,.12); }
.xr-match-busy { opacity: .55; cursor: not-allowed; }
.xr-match-body { display: flex; flex-direction: column; gap: 3px; }
.xr-match-meta { font-size: 0.8rem; color: var(--muted); }
.xr-why { font-size: 0.78rem; color: var(--blue); font-weight: 700; }
.xr-match-price { font-weight: 800; color: var(--ink); margin-top: 4px; }
.xr-match-avail { font-size: 0.76rem; color: var(--muted); }
.xr-team { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 700; }
.xr-empty { color: var(--muted); font-size: 0.9rem; }

.xr-assignment { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.xr-assignment:last-child { border-bottom: 0; }
.xr-state { font-size: 0.78rem; color: var(--muted); }

.xr-quote-table { width: 100%; border-collapse: collapse; }
.xr-quote-table th { text-align: left; font-weight: 600; color: var(--ink);
                     padding: 9px 0; font-size: 0.9rem; }
.xr-quote-table td { text-align: right; padding: 9px 0; font-weight: 700; color: var(--ink); }
.xr-quote-total th, .xr-quote-total td {
    border-top: 2px solid var(--line); padding-top: 13px; font-weight: 800; font-size: 1rem;
}
.xr-quote-note { font-size: 0.84rem; color: var(--muted); margin-top: 10px; line-height: 1.6; }

@media (max-width: 700px) {
    .xr-grid { grid-template-columns: 1fr; }
    .xr-card legend, .xr-card h2 { font-size: 0.98rem; }
    .xr-actions .pg-btn { flex: 1 1 100%; }
}