/* --- Base theme --- */
:root{
  --bg:#151718;
  --surface:#1b1d1f;
  --surface-2:#202325;
  --surface-3:#2a2e31;
  --text:#e7e9ea;
  --muted:#a1a7ac;
  --primary:#ff4b37;
  --primary-600:#ff614f;
  --ring: #3a3f43;
  --success:#33d69f;
  --shadow: 0 10px 25px rgba(0,0,0,.3);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#121314, #181a1c 120%);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
}

.container{ max-width:1100px; margin-inline:auto; padding:24px; }
.row-between{ display:flex;align-items:center;justify-content:space-between; }

.topbar{ position:sticky;top:0;z-index:100; background:rgba(18,19,20,.75); backdrop-filter: blur(8px); border-bottom:1px solid var(--ring); }
.brand{ font-weight:800; font-size:28px; letter-spacing:.5px; text-decoration:none;color:#fff; }
.topbar-right{display:flex; gap:12px; align-items:center;}

.pill{ display:inline-flex;align-items:center;gap:10px; background:var(--surface-2);border:1px solid var(--ring); border-radius:999px;padding:10px 14px;font-weight:700;color:#d1d5db; }
.pill .flag{display:inline-flex;align-items:center;}
/* Tamaños de pill */
.pill.sm{ padding:12px 16px; font-size:15px; }
.pill.lg{ padding:12px 16px; font-size:15px; }

/* Alineación del header: brand + wallet a la IZQUIERDA, user a la DERECHA */

.topbar .topbar-right{
  display: flex;
  gap: 12px;
  align-items: center; /* ✅ */
}

.btn-primary, .btn-ghost{ appearance:none;border:0;cursor:pointer;text-decoration:none; border-radius:12px;padding:12px 16px;font-weight:700; }
.btn-primary{ background:var(--primary); color:white; box-shadow: 0 6px 16px rgba(255,75,55,.25); }
.btn-primary:hover{ background:var(--primary-600) }
.btn-primary.sm{ padding:10px 14px; font-size:14px }

.btn-ghost{ background:transparent; border:1px solid var(--ring); color:#e5e7eb; }
.btn-ghost:hover{ background:var(--surface-2) }
.btn-ghost .icon { margin-right:8px; display:inline-flex; }

/* Layout */
.grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:start; padding-top:28px; }

.product-title{ font-size:40px; margin:0 0 18px 0; }
.title-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }

.muted{ color:var(--muted); font-weight:700; margin:6px 0 10px 0; }

.kv{ display:grid; grid-template-columns:180px 1fr 180px 1fr; gap:14px 18px; align-items:center; }
.kv .k{ color:#b5bcc2; }
.kv .v{ color:#dbe0e5; }
.kv .strong{ font-weight:700; color:#f2f5f7; }
.badge{ display:inline-flex; align-items:center; gap:8px; background:var(--surface-3); border:1px solid var(--ring); border-radius:999px; padding:4px 10px; font-size:13px; font-weight:700; }

.sep{ margin:22px 0; border-top:1px dashed #31363a; }
.mini-sep{ margin:24px 0; border-top:1px solid #2b3034; }

.lead{ font-size:18px; color:#d9dee3; }

.details summary{ display:inline-block; cursor:pointer; color:#dbe2ea; font-weight:700; text-decoration:underline; text-underline-offset:3px; list-style:none; }
.details summary::-webkit-details-marker{ display:none }
.details[open] summary{ color:#fff }
.details-body{ margin-top:12px; color:#cbd5dd }

/* Checkout Card */
.checkout-card{ background: var(--surface); border:1px solid var(--ring); border-radius:20px; padding:24px; box-shadow: var(--shadow); }
.available{ text-align:center; color:#c5cacf; margin:4px 0 16px 0; }

.qty-stepper{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:6px; background: var(--surface-2); border:1px solid var(--ring); border-radius:999px; }
.qty-stepper .circle{ width:48px;height:48px;border-radius:50%; border:0; cursor:pointer; font-size:26px; font-weight:900; background:#2b2f33; color:#e3e7ea; display:grid;place-items:center; box-shadow: inset 0 -2px 0 rgba(255,255,255,.05); }
.qty-stepper .circle.primary{ background:var(--primary); color:white; }
.qty-stepper input{ flex:1; min-width:0; background:transparent; border:0; text-align:center; font-weight:800; font-size:18px; color:#fff; outline:none; padding:12px 0; }

.total-row{ display:flex; align-items:center; justify-content:space-between; color:#cdd3d8; font-weight:700; font-size:20px; }
.price{ font-size:28px; font-weight:800; color:#f8fafc; margin-right:6px; }
.currency{ color:#a6acb1; font-size:12px; font-weight:700; }

.btn-buy{ display:block; width:100%; border:0; border-radius:16px; padding:18px 18px; font-weight:800; font-size:20px; cursor:pointer; margin-top:18px; background:var(--primary); color:white; box-shadow: 0 10px 20px rgba(255,75,55,.3); }
.btn-buy:hover{ background:var(--primary-600) }
.disclaimer{ color:#9aa0a6; font-size:12px; margin-top:10px; text-align:center; }

.footer{ color:#89919a; padding-bottom:48px; }

/* Forms */
.auth-bg{ background: radial-gradient(1200px 800px at 80% -10%, #202225 0%, transparent 60%), linear-gradient(180deg,#121314, #181a1c 120%);}
.auth{ display:grid; place-items:center; min-height:70vh; }
.card{ width:min(560px, 100%); background:var(--surface); border:1px solid var(--ring); border-radius:20px; padding:24px; box-shadow: var(--shadow); }
.card h1{ margin:0 0 10px; }
.field{ display:grid; gap:8px; margin:14px 0; }
.field input{ width:100%; border:1px solid var(--ring); border-radius:12px; background:var(--surface-2); padding:14px 14px; color:#fff; font-size:16px; outline:none; }
.field input:focus{ border-color:#3f6796; box-shadow:0 0 0 3px rgba(63,103,150,.25); }
.form-msg{ margin-top:12px; font-weight:700; }
.small{ font-size:14px }

/* Screenreader */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* User menu dropdown */
.user-menu{ position:relative; }
.user-menu .user-pill{ background:var(--surface-2); border:1px solid var(--ring); }
button.pill{ cursor:pointer; font-weight:700; }
.dropdown{ position:absolute; right:0; top:calc(100% + 8px); background:var(--surface); border:1px solid var(--ring); border-radius:12px; min-width:220px; box-shadow:var(--shadow); padding:6px; display:none; z-index:1000; }
.dropdown.open{ display:block; }
.dropdown a, .dropdown button{ display:block; width:100%; text-align:left; background:transparent; border:0; color:#e5e7eb; padding:10px 12px; border-radius:10px; font-weight:700; }
.dropdown a:hover, .dropdown button:hover{ background:var(--surface-2); }
.dropdown .drop-danger{ color:#ff6b57; }

/* Orders table */
.orders-table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--ring); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.orders-table th, .orders-table td{ text-align:left; padding:14px 16px; border-bottom:1px solid #2b3034; }
.orders-table thead th{ background:var(--surface-2); color:#d3d8dd; font-weight:800; }
.orders-table tbody tr:last-child td{ border-bottom:none; }
.orders-table code{ background:var(--surface-2); padding:2px 6px; border-radius:6px; }

/* Responsive */
@media (max-width: 980px){
  .grid{ grid-template-columns:1fr; }
  .product-title{ font-size:34px; }
  .kv{ grid-template-columns:1fr 1fr; }
  .title-row{ align-items:flex-start; }
}
@media (max-width: 560px){
  .product-title{ font-size:28px; }
  .btn-primary.sm{ font-size:13px; }
  .pill{ padding:8px 12px }
  .qty-stepper .circle{ width:44px; height:44px; }
}

/* === CC-PRO.icu: Responsive fixes to avoid horizontal scroll on phones === */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, table { max-width: 100%; height: auto; }
.title-row { flex-wrap: wrap; }

/* Prevent intrinsic content from forcing overflow in grid columns */
.grid{ grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); }

/* Orders table: wrap long content and avoid overflow */
.orders-table{ table-layout: fixed; }
.orders-table th, .orders-table td{ word-break: break-word; }
.orders-table code{ word-break: break-all; }

/* Slightly tighter padding on very small screens */
@media (max-width: 560px){
  .container { padding: 16px; }
  .qty-stepper .circle{ width: 42px; height: 42px; }
  .price{ font-size: 24px; }
}


/* === CC-PRO.icu: Mobile stacked layout === */
@media (max-width: 768px){
  /* stack the main layout */
  .grid{ display:block; padding-top:16px; gap:0 !important; }

  /* ensure blocks take full width and have spacing */
  .product-side, .checkout-card{ width:100%; max-width:100%; margin:0 0 20px 0; }

  /* avoid cramped space-between rows on tiny screens */
  .row-between, .title-row{ flex-direction:column; align-items:flex-start; gap:10px; }

  /* topbar content wraps nicely */
  .topbar .container{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }

  /* remove any sticky/side behaviors that could force widths */
  .checkout-card{ position:static; }

  /* typography scales down a bit */
  .product-title{ font-size: clamp(20px, 5vw, 28px); line-height: 1.2; }
  .price{ font-size: clamp(18px, 5.2vw, 24px); }

  /* images/forms never overflow */
  img, svg, video{ max-width:100%; height:auto; }
  input, select, textarea, button{ max-width:100%; }

  /* containers never exceed the viewport width */
  .container{ max-width:100%; padding-left:16px; padding-right:16px; }

  /* footer sits as last block full-width */
  .footer{ margin-top: 12px; }
}


/* === CC-PRO.icu: orders back button spacing fix === */
.back-row{ display:flex; align-items:center; gap:10px; margin: 6px 0 14px; }
.back-row .btn-ghost{ display:inline-flex; align-items:center; }
@media (max-width: 768px){
  .back-row{ margin: 4px 0 16px; }
}


/* === CC-PRO.icu: Orders page typography scale === */
.orders-page h1{
  font-size: clamp(22px, 3.6vw, 28px);
  line-height: 1.18;
}
.orders-page p,
.orders-page .muted{
  font-size: clamp(13px, 2.6vw, 15px);
}
.orders-page .btn-ghost.sm{
  font-size: 13px;
  padding: 8px 12px;
}

/* Table density and size */
.orders-page .orders-table th,
.orders-page .orders-table td{
  font-size: 14px;
  padding: 12px 12px;
}
@media (max-width: 768px){
  .orders-page h1{ font-size: clamp(20px, 6vw, 24px); }
  .orders-page .orders-table th,
  .orders-page .orders-table td{ font-size: 13px; padding: 10px; }
  .orders-page p,
  .orders-page .muted{ font-size: 13px; }
}


/* === CC-PRO.icu: Orders details panel === */
.order-details{ margin-top:16px; background:var(--surface); border:1px solid var(--ring); border-radius:16px; padding:16px; box-shadow:var(--shadow); }
.order-details .h5{ font-size:16px; margin:0 0 8px; color:#e5e7eb; }
.details-list{ list-style:none; padding:0; margin:0; }
.details-list li{ padding:8px 0; border-top:1px solid #2b3034; }
.details-list li:first-child{ border-top:none; }

/* Highlight selected order row */
.orders-table tr.is-selected{ background: var(--surface-2); }


/* === CC-PRO.icu: Inline details row styles === */
.orders-table tr.details-row td.details-cell{
  background: var(--surface-2);
  padding: 14px 16px;
  border-top: 1px solid #2b3034;
}
.details-wrap{ display:flex; flex-direction:column; gap:10px; }
.details-title{ font-weight:700; font-size:14px; color:#e5e7eb; }

.item-list{ display:flex; flex-direction:column; gap:6px; }
.item{ border:1px solid #2b3034; border-radius:10px; padding:10px 12px; background:var(--surface); }
.item-toggle{ background:none; border:0; font-weight:700; cursor:pointer; padding:0; text-align:left; color:#d3d8dd; }
.item-content{ margin-top:8px; }
.item-line{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.item-line .sep{ opacity:.6; }

.btn-copy{ line-height:1; }

@media (max-width: 560px){
  .orders-table tr.details-row td.details-cell{ padding: 12px; }
  .item{ padding:10px; }
  .item-line{ gap:8px; }
}


/* === CC-PRO.icu: share button at bottom of checkout-card === */
.share-row{ margin-top:12px; }
.share-row #shareBtn{ width:100%; display:block; }
@media (max-width: 768px){
  .share-row{ justify-content:stretch; }
  .share-row #shareBtn{ width:100%; }
}


/* === CC-PRO.icu: share button below checkout-card (same width) === */
.share-row-out{ margin-top:12px; }
.grid .share-row-out{ grid-column: 2; }
.share-row-out #shareBtn{ width:100%; display:block; }

@media (max-width: 768px){
  /* en móvil la grid pasa a block, así que ocupará 100% igual que checkout-card */
  .share-row-out{ margin-top:12px; }
}


/* === CC-PRO.icu: product heading above grid === */
.product-heading{ margin-top: 10px; margin-bottom: 12px; }
.product-heading .product-title{ margin: 0 0 2px; }
.product-heading .product-info{ margin: 0; line-height: 1.35; color:#c6ccd3; font-size: 14px; }
@media (max-width: 768px){
  .product-heading .product-title{ font-size: clamp(20px, 6vw, 28px); }
  .product-heading .product-info{ font-size: 13px; line-height: 1.35; }
}


/* === CC-PRO.icu: product-heading spans full grid === */
.container.grid > .product-heading{ grid-column: 1 / -1; margin: 10px 0 2px; }
.product-heading .product-title{ margin: 0 0 2px; }
.product-heading .product-info{ margin: 0; line-height: 1.35; color:#c6ccd3; font-size: 14px; }
@media (max-width: 768px){
  .product-heading .product-title{ font-size: clamp(20px, 6vw, 28px); }
  .product-heading .product-info{ font-size: 13px; }
}

.product-side .title-row{ margin-bottom: 0; }

/* === Descriptionón: feature grid + tabs + FAQs === */
.h5{ font-size:16px; margin:0 0 8px; color:#e5e7eb; }

.feature-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin:8px 0 18px;
}
.feature-card{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--ring);
  border-radius:12px; padding:12px; box-shadow: var(--shadow);
}
.feature-icon{
  width:30px; height:30px; display:grid; place-items:center;
  border-radius:8px; background:var(--surface-2); color:#fff;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.05);
}
.feature-title{ margin:0; font-weight:800; }
.feature-text{ margin:2px 0 0; color:#cbd5dd; font-size:14px; }

/* Tabs */
.info-tabs{ margin-top:8px; }
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.tab{
  appearance:none; border:1px solid var(--ring); background:var(--surface-2);
  color:#e5e7eb; font-weight:800; border-radius:999px; padding:8px 12px; cursor:pointer;
}
.tab.is-active{ background:var(--primary); color:#fff; border-color:transparent; }

.tab-panel{ background:var(--surface); border:1px solid var(--ring); border-radius:12px; padding:14px; }
.tab-panel.is-active{ display:block; }
.tab-panel[hidden]{ display:none !important; }

/* Lists */
.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.check-list li{
  position:relative; padding-left:26px;
}
.check-list li::before{
  content:""; position:absolute; left:0; top:.3em; width:16px; height:16px;
  border-radius:50%; background:var(--primary);
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/14px 14px no-repeat;
}
.step-list{ margin:0; padding-left:18px; display:grid; gap:8px; }
.step-list li{ color:#dbe0e5; }

/* FAQs / details */
.faq{ border-top:1px solid #2b3034; padding:10px 0; }
.faq:first-child{ border-top:none; }
.faq > summary{
  list-style:none; cursor:pointer; font-weight:800; color:#dbe2ea;
  display:flex; align-items:center; gap:8px;
}
.faq > summary::-webkit-details-marker{ display:none; }
.faq > summary::before{
  content:"+"; width:18px; height:18px; display:inline-grid; place-items:center;
  font-weight:800; color:#cbd5dd; background:var(--surface-2); border:1px solid var(--ring); border-radius:6px;
}
.faq[open] > summary::before{ content:"–"; }
.faq p{ margin:8px 0 0; color:#cbd5dd; }

/* Responsive tweaks */
@media (max-width: 768px){
  .feature-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .feature-grid{ grid-template-columns: 1fr; }
  .tab{ padding:7px 10px; font-size:13px; }
  .tab-panel{ padding:12px; }
}


/* Remaining balance line under Total Amount */
.after-balance{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.after-balance.negative{
  color: var(--primary);
  font-weight: 700;
}
/* Errores por campo */
.field .error-text{
  color:#ff6b57;
  font-size:13px;
  font-weight:700;
  margin-top:6px;
}
.field input.is-invalid{
  border-color:#ff6b57;
  box-shadow:0 0 0 3px rgba(255,107,87,.12);
}

/* === Wallet amount: ocultar spinners en inputs number === */
/* Chrome, Safari, Edge, Opera */
#amountInput::-webkit-outer-spin-button,
#amountInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
#amountInput {
  -moz-appearance: textfield;
  appearance: textfield; /* estándar */
}
/* === Back / Cancel buttons (visibles y consistentes) === */
.btn-back,
.btn-cancel{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  text-decoration:none;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--ring);
}

/* Back (primario sutil): borde/acento rojo y fondo translúcido */
.btn-back{
  border-color: var(--primary);
  background: rgba(255,75,55,.12);
  color:#fff;
}
.btn-back:hover{
  background: rgba(255,75,55,.20);
}
.btn-back:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(255,75,55,.25);
}

/* Cancel (neutro): sigue la paleta del tema */
.btn-cancel{
  background: var(--surface-2);
  color:#e5e7eb;
}
.btn-cancel:hover{
  background: var(--surface-3);
}
.btn-cancel:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(120,120,120,.25);
}

/* Afinado del contenedor de back */
.back-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 10px 0 16px;
}
.back-row .icon{
  display:inline-flex;
  line-height:1;
}
@media (max-width: 768px){
  .back-row{ margin: 8px 0 16px; }
}
/* === Toasts (avisos globales) === */
.toast-host{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: grid;
  gap: 8px;
}
.toast{
  background: var(--surface);
  border: 1px solid var(--ring);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-weight: 800;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-6px);
  animation: toast-in 220ms ease-out forwards;
}
.toast--success{ border-color:#1b7f5f; background: rgba(51,214,159,.14); }
.toast--error{ border-color:#a43b2f; background: rgba(255,75,55,.12); }
@keyframes toast-in{
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out{
  to { opacity: 0; transform: translateY(-6px); }
}

/* === Resaltado suave de la fila nueva en Orders === */
@keyframes flashRow {
  0%   { background: rgba(51,214,159,.22); }
  100% { background: transparent; }
}
.orders-table tr.flash { animation: flashRow 1400ms ease-out; }

/* === Footer soporte === */
.footer .support{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.footer .support .dot{ opacity:.6; }
.footer a.support-link{
  color:#dbe0e5;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}
.footer a.support-link:hover{ color:#ffffff; }

@media (max-width:560px){
  .footer .support{ gap:6px; }
}