/* SkyRock Superior — the license page's "Obtain" widget (components/licenseObtain).
   Ships with every /licenses/<slug> landing that mounts the widget. The Obtain button
   itself wears the PAGE's button classes (the mount's data-btn), so only the pieces
   around it are styled here: the price line, the exclusivity selector, the name field,
   the requirements list, the status line, and the terms modal. Colours read the page's
   variables where the landings share them (--text, --muted, --line, --accent …) and fall
   back to the same measured values the landings use; `.lo--on-dark` is the variant for a
   mount that sits on the cosmos (the Logbooks closing panel). */

/* The hub's "Ver más" lands on #obtener — the bare anchor that HEADS the section holding the
   mount (2026-09-21; until then the id sat on the mount itself, at the foot of the price card,
   so the landing showed the button with the heading and the price scrolled away). Keep the
   anchor clear of the landings' sticky top bar instead of scrolling the section head
   underneath it (audit 2026-09-20; the agents page pins the same 5rem in its own stylesheet). */
#obtener { scroll-margin-top: 5rem; }
.lo { display: block; margin-top: 12px; }
.lo-status { min-height: 1.2rem; margin: 10px 0 0; font-size: 0.9rem; color: var(--muted, #5b6473); }
.lo-status.is-error { color: var(--danger-ink, #a33531); }
.lo-login, .lo-note { margin: 10px 0 0; font-size: 0.9rem; color: var(--muted, #5b6473); }
.lo-link { color: var(--accent, #3C486B); font-weight: 600; text-decoration: underline; }
.lo-link:focus-visible { outline: 2px solid var(--accent, #3C486B); outline-offset: 2px; }
.lo-choose { margin: 0 0 6px; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--subtle, #545a63); }

.lo-plan { border-top: 1px solid var(--line, #e4e4e4); padding-top: 12px; margin-top: 12px; }
.lo-plan:first-child, .lo-choose + .lo-plan { border-top: 0; padding-top: 0; margin-top: 0; }
.lo-plan-name { margin: 0 0 2px; font-weight: 600; color: var(--text, #2a2f3a); }
.lo-plan-price { margin: 0 0 10px; font-size: 0.95rem; color: var(--muted, #5b6473); }
.lo-plan-note { margin: 0 0 8px; font-size: 0.86rem; color: var(--muted, #5b6473); }
.lo-btn[disabled] { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.4); }
/* A page that gave no button classes still gets a legible button. */
.lo-btn-default { display: inline-block; padding: 10px 18px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; background: #3C486B; color: #fff; }

/* Exclusivity selector (Agent hires) */
.lo-field-label { display: block; margin: 0 0 4px; font-size: 0.82rem; color: var(--muted, #5b6473); }
.lo-excl { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.lo-excl-opt { border: 1px solid var(--line-strong, #d2d2d2); background: var(--surface, #ffffff); color: var(--text, #2a2f3a); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 0.86rem; cursor: pointer; }
.lo-excl-opt.is-active { border-color: var(--accent, #3C486B); background: var(--accent-soft, #eef1f7); color: var(--accent, #3C486B); font-weight: 600; }
.lo-excl-opt:focus-visible { outline: 2px solid var(--accent, #3C486B); outline-offset: 2px; }

/* The Agent's name */
.lo-field { display: block; margin: 0 0 4px; }
.lo-input { width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong, #d2d2d2); border-radius: 8px; padding: 9px 11px; font: inherit; color: var(--text, #2a2f3a); background: var(--surface, #ffffff); }
.lo-input:focus { outline: none; border-color: var(--accent, #3C486B); box-shadow: 0 0 0 3px var(--accent-ring, rgba(60, 72, 107, 0.22)); }
.lo-field-err { min-height: 1em; margin: 0 0 8px; font-size: 0.85rem; color: var(--danger-ink, #a33531); }

/* Requirements — said before the button is pressed */
.lo-req { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--line, #e4e4e4); border-radius: 10px; background: var(--surface-2, #f7f7f7); text-align: left; }
.lo-req-title { margin: 0 0 6px; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--subtle, #545a63); }
.lo-req ul { margin: 0; padding-left: 18px; font-size: 0.88rem; line-height: 1.45; color: var(--muted, #5b6473); }
.lo-req li + li { margin-top: 4px; }
.lo-req-link { padding: 0; border: 0; background: none; font: inherit; color: var(--accent, #3C486B); text-decoration: underline; cursor: pointer; }
.lo-req-link:focus-visible { outline: 2px solid var(--accent, #3C486B); outline-offset: 2px; }

/* The terms modal */
.lo-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(11, 14, 26, 0.62); }
.lo-overlay[hidden] { display: none; }
.lo-modal { display: flex; flex-direction: column; width: min(680px, 100%); max-height: 90vh; padding: 20px; border-radius: 14px; background: #ffffff; color: #2a2f3a; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); text-align: left; }
.lo-modal-title { margin: 0 0 2px; font-size: 1.15rem; font-weight: 700; }
.lo-modal-date { margin: 0 0 10px; font-size: 0.85rem; color: #5b6473; }
.lo-modal-body { flex: 1 1 auto; min-height: 120px; overflow: auto; padding: 12px; border: 1px solid #e4e4e4; border-radius: 8px; background: #f7f7f7; font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; }
.lo-modal-body:focus-visible { outline: 2px solid #3C486B; outline-offset: 2px; }
.lo-modal-check { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 0.9rem; cursor: pointer; }
.lo-modal-check[hidden] { display: none; }
.lo-modal-check input { margin-top: 3px; accent-color: #c2a35a; }
.lo-modal-err { min-height: 1em; margin: 6px 0 0; font-size: 0.85rem; color: #a33531; }
.lo-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.lo-modal-btn[hidden] { display: none; }

/* On the cosmos: light ink, translucent chrome */
.lo--on-dark .lo-status, .lo--on-dark .lo-login, .lo--on-dark .lo-note, .lo--on-dark .lo-plan-price, .lo--on-dark .lo-plan-note, .lo--on-dark .lo-field-label, .lo--on-dark .lo-req ul { color: rgba(255, 255, 255, 0.76); }
.lo--on-dark .lo-status.is-error, .lo--on-dark .lo-field-err { color: #f0b3b0; }
.lo--on-dark .lo-plan-name { color: #FFF6F6; }
.lo--on-dark .lo-choose, .lo--on-dark .lo-req-title { color: rgba(255, 255, 255, 0.55); }
.lo--on-dark .lo-link, .lo--on-dark .lo-req-link { color: #d9c08a; }
.lo--on-dark .lo-link:focus-visible, .lo--on-dark .lo-req-link:focus-visible, .lo--on-dark .lo-excl-opt:focus-visible { outline-color: #d9c08a; }
.lo--on-dark .lo-plan { border-top-color: rgba(255, 255, 255, 0.2); }
.lo--on-dark .lo-req { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); }
.lo--on-dark .lo-excl-opt { background: rgba(255, 255, 255, 0.08); color: #FFF6F6; border-color: rgba(255, 255, 255, 0.42); }
.lo--on-dark .lo-excl-opt.is-active { background: rgba(255, 255, 255, 0.18); border-color: #d9c08a; color: #ffffff; }
.lo--on-dark .lo-input { background: rgba(255, 255, 255, 0.1); color: #ffffff; border-color: rgba(255, 255, 255, 0.42); }
.lo--on-dark .lo-input:focus { border-color: #d9c08a; box-shadow: 0 0 0 3px rgba(217, 192, 138, 0.35); }

@media (prefers-reduced-motion: reduce) {
    .lo-excl-opt, .lo-input { transition: none; }
}