/* ===== checkout.html inline style 1 ===== */
:root{ --black:#111827; --white:#fff; --muted:#6b7280; --line:#eef2f7; --gold:#C89B3C; }
    body{ background:linear-gradient(180deg,#f7fafc,#fff); color:var(--black); -webkit-font-smoothing:antialiased; }
    .container-xl{ max-width:1400px; margin:0 auto; padding:1rem; }
    .btn{ border:1px solid #e5e7eb; padding:.6rem .9rem; border-radius:.8rem; background:#fff; color:var(--black); transition:all .15s; }
    .btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.06); }
    .btn-primary{ background:var(--black); color:#fff; border-color:var(--black); }
    .btn-ghost{ background:#fff; }
    .btn[disabled]{ opacity:.6; cursor:not-allowed; }
    .badge{ display:inline-block; padding:.18rem .5rem; border-radius:999px; background:#f3f4f6; color:#374151; font-size:.82rem; }
    .sticky-summary{ position:sticky; top:1rem; }
    .prod-img{ width:80px; height:80px; object-fit:cover; border-radius:.6rem; border:1px solid var(--line); background:#fff; }
    .line{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
    .line .min-w-0 .truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    #loader{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:60; background:rgba(255,255,255,.55); backdrop-filter:blur(3px); }
    #loader.active{ display:flex; }
    .spinner{ width:56px; height:56px; border-radius:9999px; border:6px solid rgba(0,0,0,.06); border-top-color:var(--gold); animation:spin 900ms linear infinite; }
    @keyframes spin{ to{ transform:rotate(360deg); } }
    .muted{ color:var(--muted); }
    .field{ display:flex; flex-direction:column; gap:.4rem; }
    .field input, .field textarea, .field select{ border:1px solid var(--line); border-radius:.7rem; padding:.65rem .8rem; background:#fff; }
    .field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:#d1d5db; box-shadow:0 0 0 3px rgba(17,24,39,.08); }
    .hint{ font-size:.85rem; color:var(--muted); }
    .err{ color:#b91c1c; font-size:.85rem; display:none; }
    .show{ display:block !important; }

    /* address cards */
    .addr-card{ border:1px solid var(--line); border-radius:.8rem; padding:.75rem; display:flex; gap:.75rem; align-items:flex-start; }
    .addr-actions{ display:flex; gap:.25rem; flex-wrap:wrap; }
    .addr-badges{ display:flex; gap:.25rem; flex-wrap:wrap; }
    .addr-badge{ font-size:.75rem; background:#f3f4f6; border-radius:999px; padding:.1rem .45rem; }
    .addr-default{ background:#ecfdf5; }
    .addr-deleted{ opacity:.6 }
    .grid-addr{ display:grid; gap:.6rem; }
    @media(min-width:640px){ .grid-addr{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

    /* ===== Modals ===== */
    .modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:70; padding:1rem; }
    .modal-overlay.show{ display:flex; }
    .modal-card{ width:100%; max-width:640px; background:#fff; border-radius:1rem; border:1px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,.12); display:flex; flex-direction:column; max-height:92vh; }
    .modal-head{ padding:1rem 1.25rem; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
    .modal-body{ padding:1rem 1.25rem; overflow:auto; -webkit-overflow-scrolling:touch; }
    .modal-foot{ padding:1rem 1.25rem; border-top:1px solid var(--line); display:flex; gap:.5rem; justify-content:flex-end; }