/* Additions to the approved theme (styles.css) for the server-rendered sellercentral site. */

/* Live Google map in the registration form (replaces the theme's illustrated map). */
.map-canvas--live { height: 320px; cursor: default; background: var(--bg-alt); }
@media (max-width: 720px) { .map-canvas--live { height: 260px; } }

/* Captcha (image fallback when Google reCAPTCHA is off). */
.captcha-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.captcha-row .captcha-img { height: 44px; width: auto; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.captcha-row input { flex: 1 1 160px; }

/* Spam honeypot: never visible to people. */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Multiple messages inside one status box. */
.form-status span { display: block; }

/* Seller Guides grouped by category (only when there is more than one guide category). */
.guide-group-h { font-size: var(--fs-xl); margin: 36px 0 16px; }
.guide-group-h:first-child { margin-top: 0; }

/* Rich-text articles: headings from the editor get the same rhythm as the theme's <section>s. */
.prose > h2 { scroll-margin-top: calc(var(--header-h) + 24px); }
.prose > h2:not(:first-child) { margin-top: 20px; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.prose section > h2 { scroll-margin-top: calc(var(--header-h) + 24px); }
/* .prose .sc-i, .prose .role > span { display: inline-flex; } */
.prose .sc-i { display: inline-flex; }
/* Role badges (How Urbanese Works cards, guide articles): keep the theme's centred circle inside .prose too. */
.prose .role > span { display: grid; place-items: center; }
.role > span > svg, .role > span > .sc-i { display: block; }
/* Theme toggle: the visible sun/moon wrapper was inline, so its icon sat on the text baseline, off centre. */
.theme-toggle > span { display: grid; place-items: center; }
:root[data-ui="light"] .theme-toggle .i-moon { display: grid; }
.text-link > span { display: inline-flex; }

/* Commission plan cards (registration step 4): the theme's .package radio card laid out like the plan-cards
   design (name + badge, rate, tagline, ticked points, Choose/Selected button). Reuses .pill, .ticks and .btn. */
.package-cards--1 { grid-template-columns: minmax(0, 360px); }
.package-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.package-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.package--plan { display: flex; }
.package--plan > span { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-height: 0; }
.package--plan .plan-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; }
.package--plan small { font-size: var(--fs-md); }
.package--plan i { position: static; margin-top: 0; }
/* undo the theme's small-screen .package layout (rate beside the name) for these cards */
.package--plan b { grid-row: auto; grid-column: auto; font-size: 2.4rem; }
.package--plan .plan-price { display: grid; gap: 2px; }
.package--plan > span > .small { font-size: var(--fs-xs); line-height: 1.45; }
.package--plan .ticks { flex-grow: 1; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text); }
.package--plan .ticks:empty { border-top: 0; padding-top: 0; }
.ticks > span { display: flex; gap: 8px; align-items: flex-start; overflow-wrap: anywhere; }
.package--plan .ticks svg { color: var(--solid); }
.package--plan .plan-label { font-weight: 700; color: var(--solid); }
.package--plan .btn { width: 100%; margin-top: 4px; }
.package--plan .plan-on { display: none; }
.package--plan:hover > span { border-color: var(--text-3); }
/* selected: yellow border + soft yellow card + primary (yellow) button, instead of the theme's all-yellow card */
.package--plan input:checked + span { background: var(--yellow-soft); border-color: var(--yellow-deep); color: var(--text); }
.package--plan input:checked + span em { color: var(--text-3); }
.package--plan input:checked + span .btn { --btn-bg: var(--yellow); --btn-fg: var(--on-yellow); --btn-bd: var(--yellow); }
.package--plan input:checked + span .plan-idle { display: none; }
.package--plan input:checked + span .plan-on { display: inline; }
/* after a failed "Choose a commission package" check (register.js adds .error right after the grid) */
.package-cards:has(+ .error) .package--plan > span { border-color: var(--err); }
@media (max-width: 720px) {
  .package-cards[class*="package-cards--"] { grid-template-columns: 1fr; }
}

/* Video thumbnail mascot comes from storage (Admin -> Sellercentral -> Images, set as --sc-poster-mascot in the
   layout) instead of the theme's ../img/mascot-flat.png. */
.yt-poster::after { background-image: var(--sc-poster-mascot, none); }

/* Call-back scheduler: AM / PM switch, shown when the chosen day has call hours on both sides of noon. */
.clock-read > .ampm { display: inline-flex; align-self: center; gap: 2px; margin-left: 8px; padding: 3px; border-radius: 10px; background: var(--bg-alt); font-size: 1rem; color: var(--text-2); }
.clock-read .ampm button { font: inherit; font-weight: 800; font-size: .875rem; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); cursor: pointer; }
.clock-read .ampm button[aria-pressed="true"] { background: var(--yellow); color: #0E0E0C; }
.clock-read .ampm button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Call-hours wedge on the hour dial: drawn from the chosen day's hours (site.js sets --sc-window) instead of the
   theme's fixed 3–8 PM wedge. */
.clock-face.is-hours { background: var(--sc-window, none), var(--surface); }