/* ============ CAPO GANG — Cowboy theme (cream white + leather palette) ============ */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Special+Elite&family=Ultra&family=Oswald:wght@300;400;500;600;700&display=swap');

:root{
  /* palette from brief */
  --espresso:#260B01;
  --olive:#64563C;
  --saddle:#8D5B2F;   /* primary accent (leather tan) */
  --sage:#939789;
  --sand:#CBB89C;
  --cream:#DBD5CA;
  --cream-white:#F7F2E9; /* main background cream white */
  --paper:#FBF8F1;
  --ink:#2A1B10;

  --brand:var(--saddle);
  --brand-dark:#6f441f;
  --line:#E3D9C6;
  --shadow:0 10px 30px rgba(38,11,1,.12);
  --shadow-sm:0 4px 14px rgba(38,11,1,.10);
  --radius:14px;
  --radius-sm:10px;
  --maxw:1200px;

  --font-display:'Ultra', 'Alfa Slab One', Rockwell, serif;   /* heavy Western slab-serif (wanted-poster look) */
  --font-type:'Special Elite', cursive;
  --font-body:'Oswald', system-ui, sans-serif;
}

*{box-sizing:border-box;}
/* clip (not hidden) so off-screen panels/drawers never create a horizontal scrollbar,
   while position:sticky keeps working (hidden/auto would break it) */
html{scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);
  background:var(--cream-white);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(141,91,47,.05), transparent 40%),
    radial-gradient(circle at 88% 8%, rgba(100,86,60,.05), transparent 35%);
  line-height:1.5;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:.5px;line-height:1.1;margin:0;}
.type{font-family:var(--font-type);}
.muted{color:var(--olive);}
.center{text-align:center;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:12px 22px;border-radius:999px;font-weight:600;font-size:14px;letter-spacing:.4px;
  text-transform:uppercase;transition:.2s transform,.2s box-shadow,.2s background;border:2px solid transparent;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--saddle);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--brand-dark);box-shadow:var(--shadow);}
.btn-ghost{background:transparent;border-color:var(--saddle);color:var(--saddle);}
.btn-ghost:hover{background:var(--saddle);color:#fff;}
.btn-dark{background:var(--espresso);color:var(--cream-white);}
.btn-dark:hover{background:#3a1607;}
.btn-block{width:100%;}
.btn-sm{padding:8px 14px;font-size:12px;}
.btn:disabled{opacity:.55;cursor:not-allowed;}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;background:var(--cream);color:var(--olive);}
.badge-sale{background:var(--saddle);color:#fff;}
.badge-low{background:#b4452e;color:#fff;}

.icon{width:20px;height:20px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* ---- inputs ---- */
input,select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:15px;background:var(--paper);color:var(--ink);transition:.15s border;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--saddle);}
label{font-size:13px;font-weight:600;color:var(--olive);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px;}
.field{margin-bottom:16px;}

/* ---- card ---- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);}

/* ===================== REVOLVER LOADER ===================== */
#loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(0deg, rgba(141,91,47,.025) 0 2px, transparent 2px 26px),
    var(--cream-white);
  transition:opacity .5s ease, visibility .5s;}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none;}
.duel{display:flex;align-items:center;gap:0;position:relative;}
.gun{width:120px;height:auto;color:var(--espresso);}
.gun.left{transform-origin:right center;animation:recoilL 1.1s ease-in-out infinite;}
.gun.right{transform:scaleX(-1);transform-origin:right center;animation:recoilR 1.1s ease-in-out infinite;}
@keyframes recoilL{0%,55%,100%{transform:translateX(0) rotate(0)}62%{transform:translateX(-10px) rotate(-7deg)}75%{transform:translateX(-3px) rotate(-2deg)}}
@keyframes recoilR{0%,55%,100%{transform:scaleX(-1) translateX(0) rotate(0)}62%{transform:scaleX(-1) translateX(-10px) rotate(-7deg)}75%{transform:scaleX(-1) translateX(-3px) rotate(-2deg)}}
.flash{width:0;height:0;border-radius:50%;background:radial-gradient(circle,#ffd66b,#f59e2c 50%,transparent 70%);
  position:absolute;top:34%;opacity:0;}
.flash.l{left:118px;animation:flash 1.1s ease-in-out infinite;}
.flash.r{right:118px;animation:flash 1.1s ease-in-out infinite;}
@keyframes flash{0%,58%,100%{width:0;height:0;opacity:0}63%{width:46px;height:46px;opacity:1}72%{width:14px;height:14px;opacity:.3}}
.loader-title{font-family:var(--font-display);font-size:clamp(26px,5vw,44px);color:var(--espresso);margin-top:26px;letter-spacing:2px;}
.loader-sub{font-family:var(--font-type);color:var(--saddle);letter-spacing:3px;margin-top:4px;font-size:13px;}
/* tumbleweed rolling along loader floor */
.loader-tumble{position:absolute;bottom:8%;left:-120px;width:64px;height:64px;
  animation:rollAcross 3s linear infinite;}
.loader-tumble img{width:100%;animation:spin 1.1s linear infinite;}
@keyframes rollAcross{0%{left:-120px}100%{left:108%}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* small inline image loader (spinning tumbleweed) */
.img-load{position:relative;overflow:hidden;background:var(--cream);}
.img-load::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-100%);animation:shimmer 1.3s infinite;}
@keyframes shimmer{100%{transform:translateX(100%)}}
.img-load.loaded::after{display:none;}

/* ambient page tumbleweed (small, occasional) */
.page-tumble{position:fixed;bottom:14px;left:-90px;width:46px;z-index:40;pointer-events:none;opacity:.85;
  animation:pageRoll 16s linear infinite;}
.page-tumble img{width:100%;animation:spin 1.2s linear infinite;}
@keyframes pageRoll{0%{left:-90px;opacity:0}5%{opacity:.85}95%{opacity:.85}100%{left:106%;opacity:0}}

/* ---- toast ---- */
#toasts{position:fixed;right:18px;bottom:18px;z-index:9998;display:flex;flex-direction:column;gap:10px;}
.toast{background:var(--espresso);color:var(--cream-white);padding:13px 18px;border-radius:12px;box-shadow:var(--shadow);
  font-size:14px;font-weight:500;animation:toastIn .25s ease;max-width:320px;border-left:4px solid var(--saddle);}
.toast.err{border-left-color:#d9583a;}
.toast.ok{border-left-color:#7a8b53;}
@keyframes toastIn{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ---- modal ---- */
.modal-bg{position:fixed;inset:0;background:rgba(38,11,1,.55);z-index:9000;display:flex;align-items:center;justify-content:center;
  padding:18px;opacity:0;visibility:hidden;transition:.2s;}
.modal-bg.show{opacity:1;visibility:visible;}
.modal{background:var(--paper);border-radius:18px;max-width:560px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow);
  transform:translateY(12px);transition:.2s;}
.modal-bg.show .modal{transform:translateY(0);}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);}
.modal-body{padding:22px;}
.x{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--olive);}
.x:hover{background:var(--cream);}

/* utility */
.row{display:flex;gap:14px;}
.grow{flex:1;}
.hidden{display:none!important;}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.stack-sm>*+*{margin-top:8px;}
@media (max-width:640px){.gun{width:84px;}.flash.l{left:82px;}.flash.r{right:82px;}}

/* ── Responsive additions ──────────────────────────────────────────────── */

/* Close / X button: raise tap target to 40×40 (was 34×34) */
.x{width:40px;height:40px;}

/* Toasts: prevent right-edge bleed on narrow phones */
@media(max-width:480px){
  #toasts{right:12px;left:12px;bottom:12px;}
  .toast{max-width:none;}
}