/* Customer account, KuKirin Miles, garage and privacy pages (W5). Built on the theme's tokens:
   --display (Barlow Condensed), --body (Manrope), cream paper, white cards, ember accent. */
.okk-acc{--okk-ink:#211e1c;--okk-soft:#645e58;--okk-line:#ded7cb;--okk-ember:#fc753b;--okk-signal:#9d491c;--okk-cream:#f4f0e7;color:var(--okk-ink);padding-bottom:72px}
.okk-acc *{box-sizing:border-box}
.okk-acc__head{padding:40px 20px 22px;max-width:1180px;margin:0 auto}
.okk-acc__eyebrow{color:var(--okk-signal);font:700 11px var(--body);letter-spacing:.1em;text-transform:uppercase;margin:0}
.okk-acc__head h1{font:800 54px/1 var(--display);text-transform:uppercase;margin:10px 0 0;letter-spacing:-.005em}
.okk-acc__lede{font:400 16px/1.55 var(--body);color:var(--okk-soft);margin:12px 0 0;max-width:60ch}
.okk-acc__nav{display:flex;gap:8px;overflow-x:auto;padding:0 20px 4px;max-width:1180px;margin:0 auto 18px;scrollbar-width:none}
.okk-acc__nav::-webkit-scrollbar{display:none}
.okk-acc__nav a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--okk-line);background:#fff;color:var(--okk-ink);font:600 14px var(--body);text-decoration:none;white-space:nowrap}
.okk-acc__nav a[aria-current="page"]{background:var(--okk-ink);border-color:var(--okk-ink);color:#fff}
.okk-acc__nav .okk-acc__signout{margin-left:auto;background:transparent}
.okk-acc__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:0 20px;max-width:1180px;margin:0 auto}
.okk-acc__main,.okk-acc__aside{display:grid;gap:16px;align-content:start;min-width:0}
.okk-acc__card{background:#fff;border-radius:14px;padding:20px;font:400 15px/1.55 var(--body)}
.okk-acc__card h2{font:800 28px/1 var(--display);text-transform:uppercase;margin:0 0 12px}
.okk-acc__card h3{font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px;color:var(--okk-soft)}
.okk-acc__card p{margin:0 0 10px}
.okk-acc__card p:last-child{margin-bottom:0}
.okk-acc__card a:not(.v2-button){color:inherit}
.okk-acc__muted{color:var(--okk-soft)}
.okk-acc__small{font-size:13px;color:var(--okk-soft)}
.okk-acc__notice{max-width:1180px;margin:0 auto 16px;padding:0 20px}
.okk-acc__notice p{margin:0;padding:14px 16px;border-radius:10px;font:600 14px/1.45 var(--body);background:#eaf4ea;color:#1d4d24;border:1px solid #c9e2cb}
.okk-acc__notice p.is-error{background:#fbeee6;color:#7a2b0c;border-color:#f0cdb9}
.okk-acc__cardhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.okk-acc__cardhead h2{margin:0}
.okk-acc__cardhead a{font:600 14px var(--body)}

/* Miles balance */
.okk-acc__miles{background:var(--night,#151b21);color:#fff}
.okk-acc__miles h2,.okk-acc__miles h3{color:#fff}
.okk-acc__miles h3{opacity:.75}
.okk-acc__balance{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:4px 0 6px}
.okk-acc__balance b{font:800 64px/0.9 var(--display);letter-spacing:-.01em}
.okk-acc__balance span{font:600 15px var(--body);opacity:.85}
.okk-acc__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 0;padding:0}
.okk-acc__stats div{background:rgba(255,255,255,.07);border-radius:10px;padding:12px}
.okk-acc__stats dt{font:600 11px var(--body);letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.okk-acc__stats dd{margin:4px 0 0;font:700 18px var(--body)}
.okk-acc__tier{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--okk-ember);color:#21130c;font:800 13px var(--body);letter-spacing:.04em;text-transform:uppercase}
.okk-acc__miles a{color:#fff}
.okk-acc__miles .v2-button--secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}

/* Orders */
.okk-acc__orders{list-style:none;margin:0;padding:0;border-top:1px solid var(--okk-line)}
.okk-acc__orders li{border-bottom:1px solid var(--okk-line)}
.okk-acc__orders a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px 0;text-decoration:none;color:inherit}
.okk-acc__orders b{font:700 15px var(--body)}
.okk-acc__orders .okk-acc__right{text-align:right;font:700 15px var(--body);white-space:nowrap}
.okk-acc__orders small{display:block;font:400 13px/1.4 var(--body);color:var(--okk-soft)}
.okk-acc__pill{display:inline-block;margin-top:4px;padding:3px 9px;border-radius:999px;background:var(--okk-cream);font:600 12px var(--body);color:var(--okk-ink)}
.okk-acc__pill.is-warn{background:#fbeee6;color:#7a2b0c}
.okk-acc__empty{padding:6px 0 0;color:var(--okk-soft)}

/* Forms */
.okk-acc__form{display:grid;gap:14px}
.okk-acc__row{display:grid;gap:14px}
.okk-acc__field{display:grid;gap:6px;font:600 13px var(--body)}
.okk-acc__field small{font-weight:400;color:var(--okk-soft);text-transform:none;letter-spacing:0}
.okk-acc__field input,.okk-acc__field select,.okk-acc__field textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid #c9c1b4;border-radius:8px;background:#fff;color:var(--okk-ink);font:400 16px var(--body)}
.okk-acc__field input:focus,.okk-acc__field select:focus{outline:2px solid var(--okk-ember);outline-offset:1px;border-color:var(--okk-ember)}
.okk-acc .okk-acc__check{display:flex;gap:10px;align-items:center;font:400 14px/1.45 var(--body);text-transform:none;letter-spacing:0}
.okk-acc .okk-acc__check input{flex:none;width:20px;height:20px;min-height:0;margin:0;padding:0;accent-color:var(--okk-ink)}
.okk-acc__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.okk-acc .v2-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;border:0}
.okk-acc .v2-button--secondary{background:#fff;color:var(--okk-ink);border:1px solid #c9c1b4}
.okk-acc__link{background:none;border:0;padding:0;color:inherit;text-decoration:underline;font:600 14px var(--body);cursor:pointer}
.okk-acc__link.is-danger{color:#9b2c0b}
.okk-acc__inline{display:inline}

/* Sign in */
.okk-acc--login .okk-acc__grid{max-width:560px}
.okk-acc__code{letter-spacing:.4em;font:700 24px var(--body)!important;text-align:center}

/* Lists (addresses, garage, history) */
.okk-acc__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.okk-acc__item{border:1px solid var(--okk-line);border-radius:12px;padding:16px;display:grid;gap:8px}
.okk-acc__item-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.okk-acc__badge{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--okk-cream);font:700 11px var(--body);letter-spacing:.05em;text-transform:uppercase}
.okk-acc__badge.is-ok{background:#eaf4ea;color:#1d4d24}
.okk-acc__scooter{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center}
.okk-acc__scooter img{width:72px;height:72px;object-fit:contain;border-radius:10px;background:var(--okk-cream)}
.okk-acc__history{width:100%;border-collapse:collapse;font:400 14px/1.4 var(--body)}
.okk-acc__history th{text-align:left;font:700 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--okk-soft);padding:0 8px 8px 0}
.okk-acc__history td{border-top:1px solid var(--okk-line);padding:10px 8px 10px 0;vertical-align:top}
.okk-acc__history td:last-child,.okk-acc__history th:last-child{text-align:right;padding-right:0;white-space:nowrap}
.okk-acc__plus{color:#1d6b2a;font-weight:700}
.okk-acc__minus{color:var(--okk-ink);font-weight:700}
.okk-acc__earn{list-style:none;margin:0;padding:0;display:grid;gap:0}
.okk-acc__earn li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--okk-line)}
.okk-acc__earn li b{white-space:nowrap}
.okk-acc__tiers{display:grid;gap:10px}
.okk-acc__tiercard{border:1px solid var(--okk-line);border-radius:12px;padding:14px 16px}
.okk-acc__tiercard.is-current{border:2px solid var(--okk-ember)}
.okk-acc__tiercard h3{color:var(--okk-ink);font-size:13px}
.okk-acc__tiercard ul{margin:6px 0 0;padding-left:18px}
.okk-acc__copy{display:flex;gap:8px}
.okk-acc__copy input{flex:1;min-width:0;min-height:48px;padding:12px 14px;border:1px solid #c9c1b4;border-radius:8px;font:600 15px var(--body);background:var(--okk-cream)}

/* Order detail */
.okk-acc__lines{list-style:none;margin:0;padding:0;border-top:1px solid var(--okk-line)}
.okk-acc__lines li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--okk-line);font:600 14px/1.35 var(--body)}
.okk-acc__lines a{color:inherit;text-decoration:none}
.okk-acc__lines small{display:block;font-weight:400;color:var(--okk-soft);font-size:12px}
.okk-acc__thumb{position:relative;width:64px;height:64px;border-radius:8px;background:var(--okk-cream);display:grid;place-items:center;color:#8a8178}
.okk-acc__thumb img{width:64px;height:64px;object-fit:contain;border-radius:8px}
.okk-acc__thumb b{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;background:var(--okk-ink);color:#fff;font:700 11px var(--body)}
.okk-acc__totals{margin:14px 0 0;font:400 14px var(--body)}
.okk-acc__totals>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
.okk-acc__totals dt,.okk-acc__totals dd{margin:0}
.okk-acc__total{border-top:1px solid var(--okk-line);margin-top:8px;padding-top:14px!important;align-items:baseline}
.okk-acc__total dd{font:800 30px/1 var(--display)}

@media (min-width:750px){
  .okk-acc__row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .okk-acc__row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .okk-acc__stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .okk-acc__tiers{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:990px){
  .okk-acc__head{padding:52px 5vw 26px;max-width:none}
  .okk-acc__head h1{font-size:75px}
  .okk-acc__nav{padding:0 5vw 4px;max-width:none}
  .okk-acc__notice{padding:0 5vw;max-width:none}
  .okk-acc__grid{grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:24px;padding:0 5vw;max-width:none;align-items:start}
  .okk-acc__grid--single{grid-template-columns:minmax(0,1fr)}
  .okk-acc--login .okk-acc__grid{padding:0 20px;max-width:560px;grid-template-columns:minmax(0,1fr)}
  .okk-acc--login .okk-acc__head{max-width:560px;padding:52px 20px 22px;margin:0 auto}
  .okk-acc__card{padding:26px 28px}
  .okk-acc__aside{position:sticky;top:100px}
}
/* W50: on phones the account tabs wrap onto a second row, so Addresses and Sign out are on screen without scrolling
   sideways (393 px: five pills do not fit one row) */
@media (max-width:749px){
  .okk-acc__nav{flex-wrap:wrap;overflow-x:visible}
}