/* ============================================================
   CHECKOUT — /pago, built from the same chrome as the ficha wizard
   (masthead, app-shell, rail, card, .step — all in app.css). Two
   deliberate departures from that shared chrome, both scoped to
   `.checkout` below: no pulse-bar (see checkout_views._wizard_page's
   docstring) and a masthead brand that matches landing-lorena-qf's own
   logo + typography instead of the wizard's stroke-icon mark. This file
   otherwise only owns what's genuinely specific to this page: the
   embedded Mercado Pago Payment Brick container and the inline result
   messages.
   ============================================================ */

/* ---------- masthead brand: same logo + typography as landing-lorena-qf's
   own nav (Playfair Display for the name, Jost for the role label) — this
   is the other front door into the same brand, so it should look like it,
   not just share the app's chrome. Colors stay on the app's own tokens
   (teal/ink) rather than the Landing's dark/gold palette: this page still
   sits on the light `--paper` masthead, not the Landing's dark hero. */
.checkout .brand__logo{ width:34px; height:34px; flex:none; object-fit:contain; }
.checkout .brand__name{ font-family:'Playfair Display',serif; font-weight:600; }
.checkout .brand__role{ font-family:'Jost',sans-serif; letter-spacing:.16em; }

#paymentBrick_container{ margin-top:var(--space-5); }

/* Mercado Pago's Payment Brick renders straight into the DOM (no shadow
   root), but ships its own Svelte build with zero row padding/gaps and
   hard-coded neutral grays — customVariables (see checkout.js) only reach
   colors/radius tokens, not spacing, so the "elige cómo pagar" list reads
   cramped and disconnected from the rest of the page out of the box. These
   selectors key off the `mp-checkout-bricks__*` prefix, which has stayed
   stable across SDK releases even though the hash suffix after it changes
   per build — if MP ever renames the prefix, these rules just stop
   matching (silent no-op), they can't break the underlying widget. */
#paymentBrick_container [class*="mp-checkout-bricks__payment-options-"]{
  border-color:var(--line) !important;
}
#paymentBrick_container [class*="mp-checkout-bricks__selector-"]:not([class*="-icon-"]):not([class*="-text-container-"]){
  padding:.75rem .9rem !important; gap:.7rem !important;
  border-bottom:1px solid var(--line) !important; cursor:pointer;
  transition:background var(--dur) var(--ease);
}
#paymentBrick_container [class*="mp-checkout-bricks__selector-"]:not([class*="-icon-"]):not([class*="-text-container-"]):last-child{
  border-bottom:none !important;
}
#paymentBrick_container [class*="mp-checkout-bricks__selector-"]:not([class*="-icon-"]):not([class*="-text-container-"]):hover{
  background:var(--paper-sunken) !important;
}
#paymentBrick_container [class*="mp-checkout-bricks__selector-"]:not([class*="-icon-"]):not([class*="-text-container-"]):has(input:checked){
  background:var(--teal-tint) !important;
}
#paymentBrick_container [class*="-selector-icon-"][class*="default-"]{ border-color:var(--line) !important; }
#paymentBrick_container button[class*="primary-"]{ width:100% !important; margin-top:var(--space-5) !important; }

.checkout-error,.checkout-status{
  border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); font-size:.9rem; line-height:1.5;
  margin-top:var(--space-5); animation:fade-up .25s var(--ease);
}
.checkout-error{ background:var(--alert-tint); color:var(--alert); border:1px solid var(--alert); }
.checkout-status{ background:var(--teal-tint); color:var(--teal-deep); border:1px solid var(--teal); }

.checkout-noscript{
  display:block; background:var(--alert-tint); color:var(--alert); border-radius:var(--radius-sm);
  padding:var(--space-4); margin-top:var(--space-6); font-size:.9rem;
}

/* .done is normally reached after a full-page submit (ficha wizard); here it's
   a step swapped in by JS, so it needs the same entrance the other steps get. */
.step[data-step="done"].is-active .done{ animation:fade-up .35s var(--ease); }