/* ADICTO.BIKE — Alquiler / Rental — shared styles
   Adapted from the Test Ride visual system (paper + JetBrains Mono). */
:root{
  --paper:#f1ead8; --paper-light:#f8f2e1; --paper-raised:#fffbf0; --paper-sunken:#ede5d0;
  --line:#d4c8ae; --line-soft:#e6ddc9;
  --ink:#1a1510; --ink-2:#5a5044; --ink-3:#6f6556; --ink-4:#8a7d69;
  --brand-red:#D94A2B; --brand-red-ink:#B8632A;
  --accent-blue:rgb(92,158,219); --accent-olive:rgb(85,107,70); --accent-plum:#7A3A5F;
  --accent:var(--accent-blue); --success:var(--accent-olive);
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --radius-sm:6px; --radius:8px; --radius-md:10px; --radius-lg:12px; --radius-xl:16px; --radius-pill:100px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.04);
  --shadow:0 1px 3px rgba(0,0,0,0.07),0 3px 10px rgba(0,0,0,0.06);
  --shadow-md:0 2px 6px rgba(0,0,0,0.05),0 10px 28px rgba(0,0,0,0.08);
  --shadow-lg:0 20px 50px rgba(0,0,0,0.15);
  --ease:cubic-bezier(0.22,1,0.36,1); --dur:180ms;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0; overflow-x:hidden; max-width:100%; touch-action:manipulation; -webkit-text-size-adjust:100%;}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-mono); font-size:13px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:repeating-linear-gradient(0deg, rgba(120,100,70,0.025) 0 1px, transparent 1px 3px);
}
::selection{background:rgba(92,158,219,0.22);}
a{color:var(--accent); text-decoration:none;}

.page{max-width:640px; margin:0 auto; padding:0 16px 80px;}

/* ---------- masthead ---------- */
.masthead{padding:22px 0 16px; display:flex; flex-direction:column; gap:14px;}
.brandrow{display:flex; align-items:center; gap:12px;}
.brandmark{width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex:none;}
.brandmark img{width:100%; height:100%; object-fit:contain; display:block;}
.brandrow .wm{display:flex; flex-direction:column; gap:2px;}
.brandrow .wm b{font-size:14px; font-weight:700; letter-spacing:0.6px;}
.brandrow .wm span{font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-4);}

.langtoggle{margin-left:auto; display:flex; gap:0; background:var(--paper-sunken); border:1px solid var(--line); border-radius:var(--radius-pill); padding:2px; flex:none;}
.langtoggle button{font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:0.5px; color:var(--ink-3);
  background:transparent; border:none; border-radius:var(--radius-pill); padding:5px 8px; cursor:pointer; transition:all var(--dur) var(--ease);}
.langtoggle button[aria-pressed="true"]{background:var(--ink); color:var(--paper-light);}

.title-block{display:flex; flex-direction:column; gap:9px; padding-top:2px;}
.eyebrow{font-size:9.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); font-weight:600;}
.titlerow{display:flex; align-items:baseline; gap:13px; flex-wrap:wrap;}
.bigtitle{font-family:var(--font-mono); font-size:15px; font-weight:700; line-height:1; letter-spacing:0.6px; text-transform:uppercase; margin:0;}
.subline{display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin-top:3px;}
.meta-chip{display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:0.4px; color:var(--ink-2);
  background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:var(--radius-pill); padding:5px 11px;}
.meta-chip .g{color:var(--accent);}
.price-badge{display:inline-flex; align-items:center; gap:6px; font-size:10px; letter-spacing:1px; text-transform:uppercase;
  color:var(--success); background:rgba(85,107,70,0.10); border:1px solid rgba(85,107,70,0.28);
  border-radius:var(--radius-pill); padding:5px 11px; font-weight:600;}

/* ---------- status strip ---------- */
.statusbar{display:flex; align-items:center; gap:8px; font-size:10.5px; letter-spacing:0.4px; color:var(--ink-3);
  padding:9px 12px; background:var(--paper-sunken); border:1px solid var(--line-soft); border-radius:var(--radius); margin-bottom:22px;}
.dot{width:7px; height:7px; border-radius:50%; background:var(--ink-4); flex:none;}
.dot.live{background:var(--success);} .dot.demo{background:var(--brand-red-ink);} .dot.load{background:var(--accent);}

/* ---------- sections ---------- */
.section{margin-bottom:24px;}
.section[hidden]{display:none;}
.sec-head{display:flex; align-items:baseline; gap:10px; margin-bottom:13px;}
.sec-num{font-size:11px; font-weight:700; color:var(--accent); letter-spacing:1px; flex:none;}
.sec-title{font-size:15px; font-weight:600; letter-spacing:-0.2px;}
.sec-hint{font-size:10.5px; color:var(--ink-4); margin-left:auto; letter-spacing:0.3px; text-align:right;}
.card{background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:18px;}

.field-label{font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-4); font-weight:600; margin-bottom:9px; display:block;}

/* ---------- tariff cards (1 day / multi day) ---------- */
.tariff-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.tariff{position:relative; text-align:left; background:var(--paper-light); border:1.5px solid var(--line);
  border-radius:var(--radius-md); padding:15px 15px 14px; cursor:pointer; transition:all var(--dur) var(--ease);
  display:flex; flex-direction:column; gap:6px;}
.tariff:hover{border-color:var(--ink-3);}
.tariff[aria-pressed="true"]{border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(92,158,219,0.16);}
.tariff .t-k{font-size:9px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-4); font-weight:600;}
.tariff .t-name{font-size:15px; font-weight:700; letter-spacing:-0.2px; color:var(--ink);}
.tariff .t-sub{font-size:10.5px; color:var(--ink-3); line-height:1.4;}
.tariff .t-check{position:absolute; top:12px; right:12px; width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:10px; color:transparent; transition:all var(--dur) var(--ease);}
.tariff[aria-pressed="true"] .t-check{background:var(--accent); border-color:var(--accent); color:#fff;}

/* ---------- calendar ---------- */
.cal{background:var(--paper-light); border:1px solid var(--line-soft); border-radius:var(--radius-md); padding:12px 12px 14px;}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.cal-title{font-size:12px; font-weight:700; letter-spacing:0.4px; text-transform:capitalize;}
.cal-nav{display:flex; gap:6px;}
.cal-nav button{width:30px; height:30px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  background:var(--paper-raised); color:var(--ink-2); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--dur) var(--ease);}
.cal-nav button:hover:not(:disabled){border-color:var(--ink-3); color:var(--ink);}
.cal-nav button:disabled{opacity:0.35; cursor:default;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.cal-dow{font-size:8.5px; letter-spacing:0.6px; text-transform:uppercase; color:var(--ink-4); text-align:center; padding:4px 0 6px; font-weight:600;}
.cal-cell{aspect-ratio:1/1; border:none; background:transparent; font-family:var(--font-mono); font-size:12px; font-weight:500;
  color:var(--ink); cursor:pointer; border-radius:var(--radius-sm); position:relative; transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
  display:flex; align-items:center; justify-content:center;}
.cal-cell.empty{visibility:hidden; cursor:default;}
.cal-cell:disabled{color:var(--line); cursor:default;}
.cal-cell:hover:not(:disabled):not(.sel):not(.in){background:var(--paper-sunken);}
.cal-cell.in{background:rgba(92,158,219,0.16); border-radius:0;}
.cal-cell.sel{background:var(--accent); color:#fff; font-weight:700;}
.cal-cell.sel.start{border-radius:var(--radius-sm) 0 0 var(--radius-sm);}
.cal-cell.sel.end{border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.cal-cell.sel.only{border-radius:var(--radius-sm);}
.cal-foot{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px;}
.date-pill{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:var(--ink-2);
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-pill); padding:6px 12px;}
.date-pill .dk{font-size:8.5px; letter-spacing:0.8px; text-transform:uppercase; color:var(--ink-4); font-weight:600;}
.date-pill.empty{color:var(--ink-4); font-style:italic;}
.date-arrow{color:var(--line); font-weight:400;}
.days-tag{margin-left:auto; font-size:10px; letter-spacing:0.6px; text-transform:uppercase; color:var(--success);
  background:rgba(85,107,70,0.10); border:1px solid rgba(85,107,70,0.26); border-radius:var(--radius-pill); padding:5px 11px; font-weight:700;}

/* ---------- return time ---------- */
.timeseg{display:flex; gap:0; background:var(--paper-sunken); border:1px solid var(--line); border-radius:var(--radius-md); padding:4px; flex-wrap:wrap;}
.timeseg button{font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:0.3px; color:var(--ink-3);
  background:transparent; border:none; border-radius:var(--radius-sm); padding:10px 14px; cursor:pointer; transition:all var(--dur) var(--ease); white-space:nowrap;}
.timeseg button[aria-pressed="true"]{background:var(--ink); color:var(--paper-light); box-shadow:var(--shadow-sm);}

/* ---------- height ---------- */
.height-row{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;}
.height-col{display:flex; flex-direction:column;}
.height-input-wrap{position:relative; width:120px; flex:none;}
.height-input{width:100%; font-family:var(--font-mono); font-size:26px; font-weight:600; letter-spacing:-0.5px; text-align:right;
  color:var(--ink); background:var(--paper-light); border:1.5px solid var(--line); border-radius:var(--radius-md);
  padding:12px 44px 12px 12px; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  -moz-appearance:textfield; appearance:textfield;}
.height-input::-webkit-outer-spin-button,.height-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.height-input:focus{outline:none; border-color:var(--accent); background:#fff;}
.height-input::placeholder{color:var(--line); font-weight:600;}
.height-unit{position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--ink-4); letter-spacing:1px; pointer-events:none;}
.size-hint{margin-top:14px; font-size:11.5px; line-height:1.45; color:var(--ink-2); display:flex; gap:9px; align-items:flex-start;
  padding:11px 13px; background:var(--paper-light); border:1px dashed var(--line); border-radius:var(--radius); min-height:42px;}
.size-hint .mk{color:var(--accent); font-weight:700; flex:none;}
.size-hint b{color:var(--ink); font-weight:700;}
.size-hint.warn{border-color:rgba(184,99,42,0.45); background:rgba(184,99,42,0.06);}
.size-hint.warn .mk{color:var(--brand-red-ink);}

/* ---------- size filter ---------- */
.size-filter{display:flex; align-items:center; gap:5px; flex-wrap:wrap;}
.size-filter-label{font-size:9px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-4); font-weight:600; margin-right:4px;}
.talla-f{font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--ink-3); background:var(--paper-light);
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:5px 9px; cursor:pointer; min-width:30px; text-align:center;
  transition:all var(--dur) var(--ease);}
.talla-f:hover{border-color:var(--ink-3);}
.talla-f[aria-pressed="true"]{background:var(--accent); color:#fff; border-color:var(--accent);}

/* ---------- bikes grid ---------- */
.bikegrid{display:grid; grid-template-columns:1fr; gap:12px;}
@media(min-width:560px){ .bikegrid{grid-template-columns:1fr 1fr;} }
.bike{position:relative; background:var(--paper-raised); border:1.5px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:14px; cursor:pointer; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
  display:flex; flex-direction:column; gap:10px;}
.bike:hover{border-color:var(--line);}
.bike[data-fit="no"]{opacity:0.62;}
.bike[data-fit="no"]:hover{opacity:0.82;}
.bike[aria-selected="true"]{border-color:var(--accent); box-shadow:0 0 0 3px rgba(92,158,219,0.18); opacity:1;}
.bike-photo{position:relative; background:radial-gradient(120% 90% at 50% 25%, #ffffff 0%, var(--paper-light) 90%);
  border-radius:var(--radius); border:1px solid var(--line-soft); aspect-ratio:1.6/1; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.bike-ph{width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px;
  background-image:repeating-linear-gradient(135deg, rgba(120,100,70,0.06) 0 6px, transparent 6px 12px);}
.bike-ph .pic{font-size:24px; opacity:0.4;}
.bike-ph .lbl{font-size:8.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-4);}
.sizebadge{position:absolute; top:8px; right:8px; z-index:2; font-size:11px; font-weight:700; letter-spacing:0.5px;
  color:var(--ink); background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-sm); padding:3px 8px; min-width:30px; text-align:center;}
.bike-name{display:flex; align-items:center; gap:8px; justify-content:space-between; flex-wrap:wrap;}
.bike-name b{font-size:14px; font-weight:700; letter-spacing:-0.2px;}
.bike-color{display:inline-flex; align-items:center; gap:5px; font-size:10px; letter-spacing:0.4px; color:var(--ink-3);}
.bike-color .sw{width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,0,0,0.18); flex:none;}
.bike-chips{display:flex; flex-wrap:wrap; gap:5px;}
.minichip{font-size:9px; letter-spacing:0.4px; text-transform:uppercase; color:var(--ink-3); background:var(--paper-sunken);
  border:1px solid var(--line-soft); border-radius:var(--radius-pill); padding:3px 8px; font-weight:500;}
.bike-desc{font-size:11px; line-height:1.5; color:var(--ink-3); margin:0;}
.bike-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:2px;}
.bike-price{display:flex; flex-direction:column; gap:1px;}
.bike-price .pd{font-size:18px; font-weight:700; letter-spacing:-0.4px; color:var(--ink);}
.bike-price .pd .u{font-size:11px; font-weight:500; color:var(--ink-4); letter-spacing:0;}
.bike-price .pt{font-size:10px; letter-spacing:0.3px; color:var(--success); font-weight:600;}
.bike-check{width:22px; height:22px; border-radius:50%; flex:none; align-self:center;
  border:1.5px solid var(--line); background:var(--paper-light); display:flex; align-items:center; justify-content:center;
  font-size:12px; color:transparent; transition:all var(--dur) var(--ease);}
.bike[aria-selected="true"] .bike-check{background:var(--accent); border-color:var(--accent); color:#fff;}
.gridmsg{grid-column:1/-1; text-align:center; padding:24px 16px; color:var(--ink-4); font-size:11.5px; letter-spacing:0.4px;
  border:1px dashed var(--line); border-radius:var(--radius-lg);}

/* ---------- recap / sticky pay bar ---------- */
.recap{background:var(--ink); color:var(--paper-light); border-radius:var(--radius-lg); padding:18px 18px 6px; border:1px solid var(--ink);}
.recap-title{font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:rgba(248,242,225,0.55); font-weight:600; margin-bottom:6px;}
.recap-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid rgba(248,242,225,0.12);}
.recap-row:last-child{border-bottom:none;}
.recap-row .k{font-size:10px; letter-spacing:1px; text-transform:uppercase; color:rgba(248,242,225,0.5); width:96px; flex:none;}
.recap-row .v{font-size:14px; font-weight:600; color:var(--paper-light); letter-spacing:0.2px;}
.recap-row .v.empty{color:rgba(248,242,225,0.4); font-weight:400; font-style:italic;}
.recap-total{display:flex; align-items:baseline; justify-content:space-between; padding:13px 0 7px;}
.recap-total .tk{font-size:11px; letter-spacing:1px; text-transform:uppercase; color:rgba(248,242,225,0.6); font-weight:600;}
.recap-total .tv{font-size:24px; font-weight:700; letter-spacing:-0.6px; color:#fff;}
.recap-total .tv small{font-size:12px; font-weight:500; color:rgba(248,242,225,0.6);}

.submit-btn{width:100%; margin-top:16px; font-family:var(--font-mono); font-size:14px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--paper-light); background:var(--accent); border:none; border-radius:var(--radius-md);
  padding:18px; cursor:pointer; transition:background var(--dur) var(--ease), transform var(--dur) var(--ease); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; gap:10px;}
.submit-btn:hover:not(:disabled){background:var(--ink);}
.submit-btn:active:not(:disabled){transform:translateY(1px);}
.submit-btn:disabled{background:var(--paper-sunken); color:var(--ink-4); cursor:not-allowed; box-shadow:none;}
.submit-sub{text-align:center; font-size:10px; letter-spacing:0.5px; color:var(--ink-4); margin-top:10px; line-height:1.5;}
.ps-badge{display:inline-flex; align-items:center; gap:5px;}

.actions{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px;}
.act-btn{display:flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:0.6px; color:var(--ink); background:var(--paper-raised); border:1.5px solid var(--line); border-radius:var(--radius-md);
  padding:15px; cursor:pointer; transition:all var(--dur) var(--ease); text-decoration:none;}
.act-btn:hover{border-color:var(--ink); background:var(--paper-light);}
.act-btn .ic{font-size:16px;}
.act-btn.wa .ic{color:#25D366;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line-soft);}
.faq-q{width:100%; display:flex; align-items:center; gap:12px; text-align:left; background:none; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--ink); padding:16px 4px; letter-spacing:0.1px;}
.faq-q .pm{margin-left:auto; font-size:16px; color:var(--accent); transition:transform var(--dur) var(--ease); flex:none;}
.faq-q[aria-expanded="true"] .pm{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height var(--dur) var(--ease);}
.faq-a-inner{padding:0 4px 18px 28px; font-size:12px; line-height:1.6; color:var(--ink-2);}

/* ---------- footer ---------- */
.foot{text-align:center; padding-top:28px; color:var(--ink-4); font-size:10px; letter-spacing:0.8px; line-height:1.8;}
.foot a{color:var(--ink-3);}

/* ---------- redirect overlay (demo of PrestaShop handoff) ---------- */
.redir{position:fixed; inset:0; z-index:60; background:rgba(26,21,16,0.62); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:24px;}
.redir.show{display:flex;}
.redir-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  max-width:420px; width:100%; padding:26px 24px; animation:rise var(--dur) var(--ease);}
@keyframes rise{from{transform:translateY(14px); opacity:0;} to{transform:none; opacity:1;}}
.redir-card h3{font-size:16px; letter-spacing:-0.2px; margin:0 0 4px; text-transform:uppercase;}
.redir-card .rs{font-size:11px; color:var(--ink-3); margin:0 0 16px; line-height:1.5;}
.redir-url{font-size:10.5px; line-height:1.6; color:var(--ink-2); background:var(--paper-light); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:12px; word-break:break-all; margin-bottom:16px;}
.redir-url b{color:var(--accent);}
.redir-actions{display:flex; gap:10px;}
.redir-actions button{flex:1; font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:0.6px; cursor:pointer;
  border-radius:var(--radius); padding:13px; border:1.5px solid var(--line); background:var(--paper-light); color:var(--ink-2);}
.redir-actions .go{background:var(--accent); color:#fff; border-color:var(--accent);}