/* ══════════════════════════════════════════════════════════════════════════
   REQUEST TRAY
   Sticky beside the choices on a desktop, a bottom sheet on a phone.
   Deliberately not styled as a shopping cart: no basket iconography, no badge
   that reads as a quantity of goods, and the accent is the brand teal rather
   than a commerce green.
   ══════════════════════════════════════════════════════════════════════════ */

/* ON :root AND NOT ONLY .rt-scope.
   The variables used to live on the section that held the tray, which was fine
   while everything the stylesheet touched was inside it. The drawer is in the
   footer now and the button is in the header — neither is inside any section —
   so a teal that resolved to nothing gave a header button with white text on a
   transparent badge and no border. .rt-scope is kept so a page can still
   override them locally. */
:root, .rt-scope { --rt-ink:#0A1F2C; --rt-teal:#0d6e6e; --rt-line:#E5E7EB; --rt-mute:#6B7280;
            --rt-warm:#FFF8E7; --rt-warm-line:#E8D9A8; }

/* ─────────────────────────────────────────────────────────────── layout ── */
/* One column. The tray used to sit in a reserved 340px gutter beside the
   choices, which meant a page-wide empty column whenever nothing was chosen —
   and on the pricing grid, where the cards are the whole page, there was
   nowhere sensible to put it at all. It is a drawer now, so the choices get the
   full width and the tray costs nothing until it is opened. */
.rt-grid { display:block; }

.rt-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }

/* ───────────────────────────────────────────────────────────────── card ── */
.rt-card { background:#fff; border:1px solid var(--rt-line); border-radius:16px; padding:20px;
           display:flex; flex-direction:column; gap:10px; transition:border-color .15s, box-shadow .15s; }
.rt-card.is-chosen { border-color:var(--rt-teal); box-shadow:0 0 0 3px rgba(13,110,110,.10); }

.rt-card-h { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.rt-card-h h3 { font-size:17px; font-weight:800; color:var(--rt-ink); margin:0; line-height:1.25; }
.rt-price { font-size:15px; font-weight:800; color:var(--rt-ink); white-space:nowrap; }
.rt-first { font-size:12.5px; color:var(--rt-teal); font-weight:600; margin:-4px 0 0; }
.rt-note  { font-size:13.5px; color:var(--rt-mute); line-height:1.5; margin:0; flex:1; }

.rt-flags { display:flex; flex-wrap:wrap; gap:6px; }
.rt-flag  { font-size:11px; font-weight:700; letter-spacing:.02em; padding:3px 8px; border-radius:999px;
            background:var(--rt-warm); border:1px solid var(--rt-warm-line); color:#6B5312; }

.rt-card-f { display:flex; align-items:center; justify-content:space-between; gap:10px;
             padding-top:12px; border-top:1px solid var(--rt-line); }
.rt-learn { font-size:13px; font-weight:700; color:var(--rt-teal); text-decoration:none; }
.rt-learn:hover { text-decoration:underline; }

/* On the pricing grid the card is a link and the button is its sibling, so the
   two are stacked by the wrapper rather than by the card's own padding. */
.rt-shop { display:flex; flex-direction:column; gap:8px; }
.rt-shop > a { flex:1; }
.rt-add-shop { width:100%; }

.rt-add { font:inherit; font-size:13.5px; font-weight:800; cursor:pointer;
          padding:9px 16px; border-radius:999px; border:1.5px solid var(--rt-teal);
          background:#fff; color:var(--rt-teal); transition:background .15s,color .15s; }
.rt-add:hover { background:rgba(13,110,110,.06); }

/* ── the pricing card ───────────────────────────────────────────────────
   The link is what you read; the footer holds both buttons, at one width, one
   under the other. .rt-shop-go and .rt-add-shop share every geometry value on
   purpose — two buttons on one card that are nearly the same size look like a
   mistake rather than a pair. */
.rt-shop-box { display:flex; flex-direction:column; height:100%; background:#fff;
               border:1px solid var(--rt-line); border-radius:16px; overflow:hidden;
               transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.rt-shop-a { display:block; flex:1; color:inherit; text-decoration:none; }
.rt-shop-f { display:flex; flex-direction:column; gap:8px; padding:0 16px 16px; }

.rt-shop-go, .rt-add-shop { display:block; width:100%; text-align:center;
                            padding:9px 12px; border-radius:999px;
                            font:inherit; font-size:.75rem; font-weight:700; }
.rt-shop-go { color:#fff; text-decoration:none; }
.rt-shop-go:hover { filter:brightness(.94); }
.rt-add-shop { background:#fff; border-width:1.5px; border-style:solid; cursor:pointer; }
/* The brand cards' "Ask your provider" is a link wearing the same button, so a
   row of cards has one straight line of controls across it. */
.rt-ask { text-decoration:none; }
.rt-ask:hover { background:rgba(13,110,110,.06); }
/* Pinned to the bottom of the card, so the buttons align from card to card
   however long the copy above them runs. */
.rt-shop-f { margin-top:auto; }
.rt-add .rt-add-off { display:none; }
/* !important because the pricing card writes its own accent into the button's
   inline style, and the chosen state has to win over it — a card that stays
   outlined after you press it reads as a click that did not land. */
.rt-add[aria-pressed="true"] { background:var(--rt-teal) !important; color:#fff !important;
                               border-color:var(--rt-teal) !important; }
.rt-add[aria-pressed="true"] .rt-add-on  { display:none; }
.rt-add[aria-pressed="true"] .rt-add-off { display:inline; }

/* ───────────────────────────────────────────────────────────────── tray ── */
/* A DRAWER, NOT A CART.
   The mechanics are a shopping cart's — it slides in from the right when you
   add something, it lists what you chose, it totals it. The words are not, and
   that is the part that matters: it is "your request", the total is an estimate
   "if approved", and the button starts an assessment rather than a checkout.
   See the note at the top of inc/request-tray.php before changing any of it. */
.rt-tray { position:fixed; top:0; right:0; bottom:0; width:min(400px, 92vw); z-index:70;
           transform:translateX(102%); transition:transform .26s cubic-bezier(.22,.61,.36,1);
           overflow-y:auto; overscroll-behavior:contain; }
body.rt-open .rt-tray { transform:translateX(0); }
/* Clear the admin bar for signed-in staff, who are the people looking at this
   most while it is behind the coming-soon gate. */
body.admin-bar .rt-tray { top:32px; }
@media (max-width:782px){ body.admin-bar .rt-tray { top:46px; } }

/* The scrim. Click it to close — the same affordance every drawer on the web
   has, and the reason the drawer does not need to trap focus to be usable. */
.rt-scrim { position:fixed; inset:0; z-index:69; background:rgba(10,31,44,.34);
            opacity:0; pointer-events:none; transition:opacity .26s ease; }
body.rt-open .rt-scrim { opacity:1; pointer-events:auto; }

.rt-tray-in { background:#fff; border-left:1px solid var(--rt-line); border-radius:0;
              padding:22px 22px 28px; min-height:100%;
              box-shadow:-14px 0 40px rgba(10,31,44,.16); }
.rt-tray-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.rt-tray-h h3 { margin:0; font-size:18px; font-weight:800; color:var(--rt-ink); }
.rt-close { display:block; background:none; border:0; font-size:28px; line-height:1; cursor:pointer;
            color:var(--rt-mute); padding:0 4px; }
.rt-close:hover { color:var(--rt-ink); }

.rt-list { display:grid; gap:10px; }
.rt-row { display:flex; align-items:center; gap:12px;
          padding:10px 0; border-bottom:1px solid var(--rt-line); }
.rt-row:last-child { border-bottom:0; }
.rt-row b { display:block; font-size:14px; color:var(--rt-ink); font-weight:700; line-height:1.3; }
.rt-row span { display:block; font-size:12.5px; color:var(--rt-mute); margin-top:2px; }
.rt-drop { background:none; border:0; font:inherit; font-size:12.5px; font-weight:700;
           color:var(--rt-mute); cursor:pointer; padding:2px 0; text-decoration:underline; white-space:nowrap; }
.rt-drop:hover { color:#B3261E; }

.rt-empty p { font-size:13.5px; color:var(--rt-mute); line-height:1.55; margin:6px 0 0; }

/* The chosen item, with the picture from its card. A list of names reads as a
   receipt; the render is what somebody recognises. */
.rt-thumb { width:44px; height:44px; flex:0 0 44px; object-fit:contain;
            background:var(--rt-warm); border-radius:8px; }
.rt-thumb-none { background:#F1F7F6; display:block; }
/* Programme art is a photograph: it fills the square rather than sitting
   inside it, the same way it fills its panel on the card. */
.rt-thumb-cover { object-fit:cover; }
.rt-row-t { flex:1; min-width:0; }

.rt-sum { margin-top:14px; padding-top:14px; border-top:2px solid var(--rt-ink); }
.rt-sum-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.rt-sum-row span { font-size:13.5px; color:var(--rt-mute); font-weight:600; }
.rt-sum-row b { font-size:20px; font-weight:800; color:var(--rt-ink); }
.rt-sum-note { font-size:12px; color:var(--rt-mute); line-height:1.5; margin:8px 0 0; }

/* The sentence the whole feature stands on. Styled to be read, not skipped. */
.rt-decides { font-size:12.5px; line-height:1.6; color:#4B5563; margin:16px 0 0;
              background:var(--rt-warm); border:1px solid var(--rt-warm-line);
              border-radius:12px; padding:12px 14px; }
.rt-decides b { color:var(--rt-ink); }

.rt-go { display:block; text-align:center; margin-top:14px; padding:14px 18px; border-radius:999px;
         background:#D4A853; color:#fff; font-weight:800; font-size:15px; text-decoration:none;
         transition:background .15s; }
.rt-go:hover { background:#c49840; }
.rt-go-note { font-size:11.5px; color:var(--rt-mute); text-align:center; margin:8px 0 0; line-height:1.5; }

/* ─────────────────────────────────────────────── the way back into it ── */
/* In the top bar, next to Log In. It appears when there is something on the
   list and carries the count — closing the drawer must not feel like losing
   the request. A corner bubble did this job before; two floating ways into the
   same panel is one too many, and the bar is where people look. */
.rt-nav { display:none; align-items:center; gap:8px; cursor:pointer; font:inherit;
          font-size:13px; font-weight:700; color:var(--rt-ink);
          background:#fff; border:1.5px solid var(--rt-teal); border-radius:999px;
          padding:8px 14px; }
/* Out of the way while the drawer it opens is on screen. */
body.rt-open .rt-nav { visibility:hidden; }
.rt-nav:not([hidden]) { display:inline-flex; }
.rt-nav:hover { background:rgba(13,110,110,.06); }
.rt-nav svg { color:var(--rt-teal); }
.rt-nav-n { background:var(--rt-teal); color:#fff; border-radius:999px; min-width:20px; height:20px;
            display:grid; place-items:center; font-size:12px; font-weight:800; }

/* On a phone the label goes and the mark carries it, so the bar keeps room for
   the logo and the menu. */
@media (max-width:1023px){
  .rt-nav { margin-right:6px; padding:8px 12px; }
  .rt-nav-t { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
}

/* ────────────────────────────────────────────────── phone: bottom sheet ── */
/* A 400px panel on a 390px screen is a full-screen takeover with a hairline of
   page showing. Below that width it comes up from the bottom instead, which is
   where a thumb is. */
@media (max-width:640px){
  .rt-tray { top:auto; left:0; width:auto; max-height:86vh;
             transform:translateY(102%); border-radius:20px 20px 0 0; }
  body.rt-open .rt-tray { transform:translateY(0); }
  .rt-tray-in { border-left:0; border-top:1px solid var(--rt-line); border-radius:20px 20px 0 0;
                box-shadow:0 -12px 34px rgba(10,31,44,.2); }
}

/* Motion is decoration here; the drawer still opens and closes without it. */
@media (prefers-reduced-motion:reduce){
  .rt-tray, .rt-scrim { transition:none; }
}

/* ────────────────────────────────────────────────────────────── a11y ──── */
.rt-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.rt-add:focus-visible, .rt-drop:focus-visible, .rt-go:focus-visible,
.rt-nav:focus-visible, .rt-close:focus-visible { outline:3px solid var(--rt-teal); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  .rt-tray, .rt-card, .rt-add, .rt-go { transition:none; }
}