/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
*/

/* Accessible skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus, .skip-link:focus-visible{
  left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; z-index:50;
  background:#0f172a; color:#fff; border-radius:.5rem;
  box-shadow:0 0 0 3px rgba(254,95,10,.3);
}

/* Small spinner for status */
.spinner{ display:inline-block; width:12px; height:12px; border-radius:9999px;
  border:2px solid rgba(245,158,11,.35); border-top-color:#f59e0b; animation: spin .8s linear infinite; }
@keyframes spin{ to { transform: rotate(360deg); } }

/* If spinner also has .hidden, force-hide it without affecting other Tailwind utilities */
.spinner.hidden{ display:none !important; }

@keyframes pulse{
  0%, 100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.15); opacity:.6; }
}

/* Payments page accent + UI tokens (global, lightweight) */
:root{ --accent: #fe5f0a; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:.9rem; padding:.7rem 1.05rem; font-weight:650; }
.btn-primary{ background: var(--accent); color:#fff; box-shadow: 0 8px 18px rgba(254,95,10,.18); }
.btn-primary:hover{ filter: brightness(1.05); }
.btn-outline{ background:#fff; color:#0f172a; border:1px solid #e2e8f0; }
.btn-outline:hover{ border-color:#cbd5e1; }
.btn-sm{ padding: .55rem .9rem; border-radius: .8rem; font-size: .95rem; }
.btn-xs{ padding: .4rem .7rem; border-radius: .7rem; font-size: .85rem; }

.card{ border-radius:18px; border:1px solid #eef2f6; background:#fff; box-shadow:0 6px 22px rgba(2,6,23,.06); }

.pp-input{ background:#fff; border:1.5px solid rgb(203 213 225); border-radius:.75rem; padding:12px 14px; min-height:48px; }
.pp-input:focus{ outline:none; border-color: var(--accent); box-shadow:0 0 0 3px rgba(254,95,10,.12); }
.pp-input-sm{ min-height:42px; padding:10px 12px; }

/* Payment page enhancements */
.payment-toast{ position:fixed; top:1rem; left:0; right:0; display:flex; justify-content:center; pointer-events:none; z-index:60; transition:opacity .18s ease, transform .18s ease; opacity:0; transform:translateY(-12px); }
.payment-toast.show{ opacity:1; transform:translateY(0); }
.payment-toast.hidden{ opacity:0; }
.payment-toast__inner{ display:flex; align-items:center; gap:.5rem; background:#0f172a; color:#fff; padding:.65rem 1.05rem; border-radius:999px; box-shadow:0 12px 28px rgba(15,23,42,.22); }
.payment-toast__icon{ display:inline-flex; align-items:center; justify-content:center; width:1.15rem; height:1.15rem; border-radius:999px; background:rgba(255,255,255,.18); font-size:.8rem; font-weight:700; }

.payment-address-collapsed{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace; letter-spacing:.12em; text-transform:uppercase; text-align:center; border:1.5px solid #e2e8f0; border-radius:1rem; background:#f8fafc; padding:1rem; font-size:1rem; line-height:1.6; word-spacing:.4em; }
.payment-address-expanded div{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace; font-size:1rem; letter-spacing:.08em; background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:1rem; padding:1rem; white-space:nowrap; }
.payment-address-expanded div:focus{ outline:none; box-shadow:0 0 0 3px rgba(254,95,10,.15); }

.payment-status-chip{ background:#f8fafc; border:1px solid #e2e8f0; border-radius:999px; color:#1f2937; transition:background .15s ease, border-color .15s ease; }
.payment-status-chip.is-waiting{ background:rgba(254,243,199,.7); border-color:rgba(251,191,36,.35); color:#92400e; }
.payment-status-chip.is-progress{ background:rgba(219,234,254,.7); border-color:rgba(96,165,250,.45); color:#1d4ed8; }
.payment-status-chip.is-success{ background:rgba(220,252,231,.75); border-color:rgba(34,197,94,.45); color:#166534; }
.payment-status-chip.is-danger{ background:rgba(254,226,226,.75); border-color:rgba(248,113,113,.45); color:#991b1b; }

.payment-status-dot{ width:.75rem; height:.75rem; border-radius:999px; background:#fbbf24; box-shadow:0 0 0 4px rgba(251,191,36,.2); animation:pulse 1.4s ease-in-out infinite; }
.payment-status-dot--waiting{ background:#fbbf24; box-shadow:0 0 0 4px rgba(251,191,36,.2); }
.payment-status-dot--progress{ background:#60a5fa; box-shadow:0 0 0 4px rgba(96,165,250,.2); }
.payment-status-dot--success{ background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.2); animation:none; }
.payment-status-dot--danger{ background:#fb7185; box-shadow:0 0 0 4px rgba(251,113,133,.28); animation:none; }

.payment-state{ border-radius:1.5rem; border:1px solid #e2e8f0; background:#fff; padding:2rem 1.75rem; text-align:center; box-shadow:0 14px 36px rgba(15,23,42,.08); }
.payment-state__title{ font-size:1.1rem; font-weight:700; color:#0f172a; }
.payment-state__body{ margin-top:.75rem; font-size:.95rem; color:#475569; }
.payment-state--success{ border-color:rgba(34,197,94,.35); background:rgba(240,253,244,.9); }

.payment-sticky{ position:sticky; bottom:0; left:0; right:0; border-top:1px solid #e2e8f0; background:rgba(255,255,255,.94); box-shadow:0 -20px 40px rgba(15,23,42,.09); z-index:50; backdrop-filter:blur(16px); }
@supports not (backdrop-filter: blur(16px)){
  .payment-sticky{ background:#fff; }
}
.payment-sticky__inner{ max-width:42rem; margin:0 auto; padding:.85rem 1.25rem; display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1rem; }
.payment-sticky__label{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:#64748b; font-weight:600; }
.payment-sticky__value{ font-size:.95rem; font-weight:650; color:#0f172a; }
.payment-sticky__address{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.payment-sticky__divider{ display:none; width:1px; height:28px; background:#e2e8f0; }
@media (min-width: 640px){
  .payment-sticky__inner{ flex-wrap:nowrap; }
  .payment-sticky__divider{ display:block; }
}

/* Success page blocks */
.success-section{ border:1px solid #e2e8f0; border-radius:1rem; background:#f8fafc; padding:1.25rem 1.35rem; }
.success-section__header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.65rem; }
.success-section__title{ font-size:1rem; font-weight:600; color:#0f172a; }
.success-section__body{ color:#1f2937; font-size:.95rem; }
.success-section__body .mono-sm{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace; letter-spacing:.08em; }

.btn.is-copied, .btn-outline.is-copied{ border-color:#10b981; color:#047857; background:rgba(16,185,129,.12); }
.btn.is-copied::after, .btn-outline.is-copied::after{ content:"✓"; margin-left:.4rem; font-weight:700; }

/* Ghost buttons (minimal chrome) */
.btn-ghost{ background: transparent; border: 1px solid #e2e8f0; color:#334155; }
.btn-ghost:hover{ background:#f8fafc; border-color:#cbd5e1; }
.btn-icon{ display:inline-flex; align-items:center; justify-content:center; gap:.35rem; }
.btn-icon svg{ width:14px; height:14px; }

/* Compact definition list for key/value cards */
.kv dl{ display:grid; grid-template-columns: 1fr; row-gap:.5rem; }
@media (min-width: 640px){ .kv dl{ grid-template-columns: 1.2fr 2fr; column-gap:1rem; } }
.kv dt{ font-size:.72rem; letter-spacing:.06em; color:#64748b; text-transform:uppercase; }
.kv dd{ font-size:.95rem; color:#0f172a; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.kv .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; }
.kv .pill{ display:inline-flex; align-items:center; padding:.25rem .45rem; border-radius:.5rem; background:#f1f5f9; border:1px solid #e2e8f0; }
.kv .break{ word-break: break-word; overflow-wrap:anywhere; }
@media (hover:hover){
  .kv dd .copy{ opacity: 0; transition: opacity .15s ease; }
  .kv dd:hover .copy{ opacity: 1; }
}
/* details summary reset */
details.summary-card{ border-radius:.75rem; }
details.summary-card > summary{ list-style:none; cursor:pointer; }
details.summary-card > summary::-webkit-details-marker{ display:none; }