/**
 * TMT Self Wash Club — MotoGP UI Kit
 * Reusable racing-inspired components.
 * Requires: wash-brand-vars (--tmt-* tokens) + Montserrat font loaded.
 */

/* ── Racing Stripes (decorative fixed lines) ─────────────── */
.mgp-stripe{position:fixed;top:0;width:3px;height:100vh;background:linear-gradient(to bottom,var(--tmt-blue),transparent 60%);opacity:.12;pointer-events:none;z-index:0;right:5%}
.mgp-stripe--2{right:5.5%;width:1px;opacity:.06}
.mgp-stripe--yellow{left:8%;right:auto;width:2px;background:linear-gradient(to bottom,var(--tmt-yellow),transparent 40%);opacity:.07}

/* ── Page Shell ──────────────────────────────────────────── */
.mgp-page{position:relative;min-height:100vh;min-height:100dvh;background:#060c18;overflow-x:hidden}
.mgp-page__bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(135deg,rgba(26,125,193,.06) 0%,transparent 40%),linear-gradient(215deg,rgba(252,190,20,.04) 0%,transparent 35%),radial-gradient(ellipse 80% 60% at 50% 0%,rgba(15,24,44,.9) 0%,#060c18 70%)}
.mgp-page__grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.025;background-image:repeating-linear-gradient(90deg,rgba(26,125,193,.4) 0px,transparent 1px,transparent 60px),repeating-linear-gradient(0deg,rgba(26,125,193,.4) 0px,transparent 1px,transparent 60px);background-size:60px 60px}
.mgp-page__content{position:relative;z-index:1}

/* ── Header (section title) ──────────────────────────────── */
.mgp-header{position:relative;text-align:center;padding:0 0 1.5rem;margin-bottom:1.5rem}
.mgp-header::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:3px;background:linear-gradient(90deg,transparent,var(--tmt-blue),var(--tmt-yellow),transparent);border-radius:2px}
.mgp-header__badge{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:4px;font-family:var(--tmt-font);font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--tmt-yellow);background:rgba(252,190,20,.08);border:1px solid rgba(252,190,20,.2);margin-bottom:.75rem}
.mgp-header__badge i{font-size:.65rem}
.mgp-header__title{margin:0 0 .4rem;font-family:var(--tmt-font);font-size:clamp(1.5rem,5vw,2.25rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;color:var(--tmt-white)}
.mgp-header__title span{color:var(--tmt-blue)}
.mgp-header__sub{margin:0;font-size:.8125rem;color:var(--tmt-gray)}

/* ── Panel (glassmorphism card with racing corner cuts) ──── */
.mgp-panel{position:relative;padding:1.5rem 1.25rem;background:linear-gradient(160deg,rgba(20,30,52,.85) 0%,rgba(10,16,32,.95) 100%);border:1px solid rgba(26,125,193,.15);border-radius:2px 14px 2px 14px;backdrop-filter:blur(12px);box-shadow:0 16px 48px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04)}
.mgp-profile-layout .mgp-panel{max-width:none}
.mgp-panel::before{content:'';position:absolute;top:-1px;left:-1px;width:40px;height:3px;background:var(--tmt-blue);border-radius:0 0 2px 0}
.mgp-panel::after{content:'';position:absolute;bottom:-1px;right:-1px;width:40px;height:3px;background:var(--tmt-yellow);border-radius:2px 0 0 0}

/* ── Tabs ────────────────────────────────────────────────── */
.mgp-tabs{display:flex;gap:2px;background:rgba(255,255,255,.03);border-radius:6px;padding:3px}
.mgp-tabs__tab{flex:1;padding:.55rem .5rem;border:none;border-radius:4px;font-family:var(--tmt-font);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tmt-gray);background:transparent;cursor:pointer;transition:all .2s;white-space:nowrap}
.mgp-tabs__tab.is-active{background:var(--tmt-blue);color:#fff;box-shadow:0 4px 12px rgba(26,125,193,.3)}
.mgp-tabs__tab:not(.is-active):hover{color:var(--tmt-white);background:rgba(255,255,255,.04)}

/* ── Field ───────────────────────────────────────────────── */
.mgp-field{margin-bottom:1rem}
.mgp-field__label{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem;font-family:var(--tmt-font);font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tmt-white-72)}
.mgp-field__label i{color:var(--tmt-blue);font-size:.7rem}
.mgp-field__input{width:100%;padding:.7rem 1rem;font-family:var(--tmt-font);font-size:.9375rem;font-weight:500;color:var(--tmt-white);background:rgba(255,255,255,.04);border:1.5px solid rgba(26,125,193,.2);border-radius:8px;outline:none;transition:border-color .2s,box-shadow .2s}
.mgp-field__input::placeholder{color:var(--tmt-white-48);font-weight:400}
.mgp-field__input:focus{border-color:var(--tmt-blue);box-shadow:0 0 0 3px rgba(26,125,193,.15)}
.mgp-field__hint{margin:.4rem 0 0;font-size:.75rem;color:var(--tmt-white-48)}
.mgp-field__error{margin:.35rem 0 0;font-size:.8125rem;color:#f87171}

/* ── Buttons ─────────────────────────────────────────────── */
.mgp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:8px;font-family:var(--tmt-font);font-size:.8125rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:transform .15s,box-shadow .15s;text-decoration:none}
.mgp-btn:hover{transform:translateY(-2px);text-decoration:none}
.mgp-btn--primary{color:#fff;background:linear-gradient(135deg,var(--tmt-blue) 0%,#1565a0 100%);box-shadow:0 8px 24px rgba(26,125,193,.3)}
.mgp-btn--primary:hover{box-shadow:0 12px 32px rgba(26,125,193,.4);color:#fff}
.mgp-btn--outline{color:var(--tmt-white-72);background:transparent;border:1px solid var(--tmt-white-12)}
.mgp-btn--outline:hover{border-color:var(--tmt-blue-35);color:var(--tmt-white)}
.mgp-btn--sm{padding:.45rem .9rem;font-size:.6875rem;gap:.4rem;white-space:nowrap}
.mgp-btn--ghost{color:#94a3b8;background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.22);box-shadow:none}
.mgp-btn--ghost:hover{color:#e2e8f0;border-color:rgba(56,189,248,.35);background:rgba(26,125,193,.1)}
.mgp-btn--danger{color:#fff;background:linear-gradient(135deg,#ef4444 0%,#b91c1c 100%);border:1px solid rgba(248,113,113,.45);box-shadow:0 4px 16px rgba(220,38,38,.35)}
.mgp-btn--danger:hover{background:linear-gradient(135deg,#f87171 0%,#dc2626 100%);box-shadow:0 6px 20px rgba(220,38,38,.45);color:#fff}
.mgp-btn:disabled,.mgp-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.mgp-btn--race{color:#fff;background:linear-gradient(135deg,#e10600 0%,#a00000 100%);box-shadow:0 8px 24px rgba(225,6,0,.35)}
.mgp-btn--race:hover{box-shadow:0 12px 32px rgba(225,6,0,.45);color:#fff}
.mgp-btn--full{width:100%}
.mgp-submit{width:100%;margin-top:.5rem;padding:.85rem 1.5rem;border:none;border-radius:8px;font-family:var(--tmt-font);font-size:.875rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:linear-gradient(135deg,var(--tmt-blue) 0%,#1565a0 100%);box-shadow:0 8px 24px rgba(26,125,193,.3);cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;align-items:center;justify-content:center;gap:.5rem}
.mgp-submit:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(26,125,193,.4)}

/* ── Alert ───────────────────────────────────────────────── */
.mgp-alert{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.6rem .85rem;border-radius:6px;font-size:.8125rem;background:rgba(243,18,96,.1);border:1px solid rgba(243,18,96,.25);color:#fca5a5}
.mgp-alert--success{background:rgba(24,201,100,.08);border-color:rgba(24,201,100,.2);color:#86efac}
.mgp-alert--info{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.25);color:#93c5fd}

/* ── Toolbar (info bar with left accent) ─────────────────── */
.mgp-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding:.75rem 1rem;margin-bottom:1.25rem;border-radius:8px;background:rgba(20,30,52,.7);border:1px solid rgba(26,125,193,.12);border-left:3px solid var(--tmt-blue)}
.mgp-toolbar__info{display:flex;flex-direction:column;gap:.15rem}
.mgp-toolbar__name{font-family:var(--tmt-font);font-size:1rem;font-weight:700;color:var(--tmt-white)}
.mgp-toolbar__meta{font-size:.75rem;color:var(--tmt-gray)}
.mgp-toolbar__meta strong{color:var(--tmt-white-72)}
.mgp-toolbar__wallet{font-size:.8125rem;color:var(--tmt-yellow);font-weight:600}

/* ── Sidebar Nav ─────────────────────────────────────────── */
.mgp-sidebar{border-radius:2px 14px 2px 14px;background:linear-gradient(160deg,rgba(20,30,52,.85) 0%,rgba(10,16,32,.95) 100%);border:1px solid rgba(26,125,193,.1);backdrop-filter:blur(12px);overflow:hidden}
.mgp-sidebar__head{padding:1.25rem 1rem;text-align:center;border-bottom:1px solid var(--tmt-white-08)}
.mgp-sidebar__avatar{width:3.5rem;height:3.5rem;border-radius:50%;margin:0 auto .5rem;display:flex;align-items:center;justify-content:center;font-family:var(--tmt-font);font-size:1.25rem;font-weight:800;color:var(--tmt-navy);background:var(--tmt-gradient-blue);box-shadow:var(--tmt-shadow-blue)}
.mgp-sidebar__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.mgp-sidebar__name{margin:0;font-family:var(--tmt-font);font-size:.9375rem;font-weight:700;color:var(--tmt-white)}
.mgp-sidebar__email{margin:.15rem 0 0;font-size:.75rem;color:var(--tmt-gray)}
.mgp-sidebar__nav{padding:.5rem 0}
.mgp-sidebar__link{display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem 1rem;border:none;background:transparent;font-family:var(--tmt-font);font-size:.8125rem;font-weight:600;color:var(--tmt-gray);cursor:pointer;text-decoration:none;transition:color .15s,background .15s}
.mgp-sidebar__link:hover{color:var(--tmt-white);background:rgba(255,255,255,.03)}
.mgp-sidebar__link.is-active{color:var(--tmt-blue);background:rgba(26,125,193,.08);border-left:3px solid var(--tmt-blue)}
.mgp-sidebar__link--danger{color:#f87171}
.mgp-sidebar__link--danger:hover{color:#fca5a5;background:rgba(243,18,96,.06)}
.mgp-sidebar__divider{height:1px;margin:.35rem 1rem;background:var(--tmt-white-08)}

/* ── Mobile Tabs (horizontal scroll) ─────────────────────── */
.mgp-mobile-tabs{display:flex;gap:.25rem;overflow-x:auto;padding:.5rem 0;margin-bottom:1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mgp-mobile-tabs::-webkit-scrollbar{display:none}
.mgp-mobile-tabs__btn{flex-shrink:0;display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .75rem;border:1px solid var(--tmt-white-08);border-radius:6px;background:transparent;font-family:var(--tmt-font);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tmt-gray);cursor:pointer;transition:all .15s;white-space:nowrap;text-decoration:none}
.mgp-mobile-tabs__btn.is-active{background:var(--tmt-blue);border-color:var(--tmt-blue);color:#fff;box-shadow:0 4px 12px rgba(26,125,193,.25)}
.mgp-mobile-tabs__btn:not(.is-active):hover{border-color:var(--tmt-blue-35);color:var(--tmt-white)}
.mgp-mobile-tabs__btn--danger{color:#f87171;border-color:rgba(243,18,96,.2)}

/* ── Content Panel ───────────────────────────────────────── */
.mgp-panel-section{display:none}
.mgp-panel-section.is-active{display:block}
.mgp-panel-section__title{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;font-family:var(--tmt-font);font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--tmt-white)}
.mgp-panel-section__title i{color:var(--tmt-blue);font-size:.9rem}

/* ── Data List (key-value) ───────────────────────────────── */
.mgp-dl{margin:0 0 1.25rem;padding:0}
.mgp-dl__row{display:flex;justify-content:space-between;align-items:baseline;padding:.5rem 0;border-bottom:1px solid var(--tmt-white-08)}
.mgp-dl__row:last-child{border-bottom:none}
.mgp-dl__label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tmt-gray)}
.mgp-dl__value{font-size:.875rem;font-weight:600;color:var(--tmt-white)}

/* ── Wallet Balance ──────────────────────────────────────── */
.mgp-wallet-balance{display:flex;align-items:center;gap:.75rem;padding:1rem;margin-bottom:1.25rem;border-radius:8px;background:rgba(26,125,193,.06);border:1px solid rgba(26,125,193,.15)}
.mgp-wallet-balance i{font-size:1.5rem;color:var(--tmt-yellow)}
.mgp-wallet-balance__label{margin:0;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--tmt-gray)}
.mgp-wallet-balance__amount{margin:0;font-family:var(--tmt-font);font-size:1.5rem;font-weight:900;color:var(--tmt-white)}

/* ── Presets (amount buttons) ────────────────────────────── */
.mgp-presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.mgp-presets .mgp-btn.is-selected{background:var(--tmt-blue);color:#fff;border-color:var(--tmt-blue);box-shadow:0 4px 12px rgba(26,125,193,.25)}

/* ── Order List ──────────────────────────────────────────── */
.mgp-order-list{display:flex;flex-direction:column;gap:.5rem}
.mgp-order-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem .85rem;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid var(--tmt-white-08);text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.mgp-order-item:hover{border-color:var(--tmt-blue-35);background:rgba(26,125,193,.04);text-decoration:none}
.mgp-order-item__id{font-family:var(--tmt-font);font-size:.8125rem;font-weight:700;color:var(--tmt-white)}
.mgp-order-item__date{font-size:.7rem;color:var(--tmt-gray)}
.mgp-order-item__meta{font-size:.65rem;color:var(--tmt-blue-light);margin:.15rem 0 0;font-weight:600}
.mgp-order-item__amount{font-size:.8125rem;font-weight:700;color:var(--tmt-yellow)}

/* ── Transaction List ────────────────────────────────────── */
.mgp-tx-list{display:flex;flex-direction:column;gap:.35rem}
.mgp-tx-row{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--tmt-white-08)}
.mgp-tx-row:last-child{border-bottom:none}
.mgp-tx-type{font-size:.8125rem;font-weight:600;color:var(--tmt-white)}
.mgp-tx-date{font-size:.7rem;color:var(--tmt-gray);margin-left:.5rem}
.mgp-tx-receipt{font-size:.7rem;color:var(--tmt-blue);text-decoration:none;margin-left:.5rem}
.mgp-tx-receipt:hover{color:var(--tmt-blue-light)}
.mgp-tx-amount--pos{font-size:.8125rem;font-weight:700;color:#86efac}
.mgp-tx-amount--neg{font-size:.8125rem;font-weight:700;color:#fca5a5}

/* ── Empty State ─────────────────────────────────────────── */
.mgp-empty{text-align:center;padding:2rem 1rem;border-radius:8px;background:rgba(20,30,52,.5);border:1px solid var(--tmt-white-08)}
.mgp-empty i{font-size:2rem;color:var(--tmt-blue);opacity:.3;margin-bottom:.5rem}
.mgp-empty p{margin:.25rem 0;font-size:.8125rem;color:var(--tmt-gray)}
.mgp-empty__title{font-family:var(--tmt-font);font-size:.9375rem;font-weight:700;color:var(--tmt-white) !important}

/* ── Footer ──────────────────────────────────────────────── */
.mgp-foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding-top:1.5rem;font-family:var(--tmt-font);font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tmt-white-48)}
.mgp-foot__brand{color:var(--tmt-blue)}
.mgp-foot__sep{width:16px;height:1px;background:var(--tmt-blue-35)}

/* ── Layout: Profile 2-col ───────────────────────────────── */
.mgp-profile-layout{display:grid;grid-template-columns:1fr;gap:1.25rem;padding-top:5.5rem;padding-bottom:2rem}
@media(min-width:768px){.mgp-profile-layout{grid-template-columns:240px 1fr;gap:1.5rem}}
@media(min-width:768px){.mgp-mobile-tabs{display:none}}
@media(max-width:767px){.mgp-sidebar{display:none}}

/* Full-width container override for profile pages */
.mgp-profile-container{width:100%;max-width:100%;padding-left:1rem;padding-right:1rem;margin:0}
@media(min-width:768px){.mgp-profile-container{padding-left:1.5rem;padding-right:1.5rem}}
@media(min-width:1024px){.mgp-profile-container{padding-left:2rem;padding-right:2rem}}


/* Kiosk wizard styles moved to public/css/kiosk-wizard.css */