:root{color:#102f38;background:radial-gradient(circle at top left,rgba(142,232,202,.3),transparent 32%),linear-gradient(180deg,#f4fbfa,#eef5f7);font-family:Segoe UI,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at top left,rgba(142,232,202,.3),transparent 32%),linear-gradient(180deg,#f4fbfa,#eef5f7)}button,input,select,textarea{font:inherit}button{cursor:pointer}.customer-shell{width:min(100%,calc(100% - 1rem));margin:0 auto;padding:1rem 0 2rem}.customer-hero{padding:.95rem 1.15rem;border-radius:24px;background:linear-gradient(135deg,#093643f5,#136f5deb),url(https://source.unsplash.com/featured/1600x900/?badminton,arena);color:#f8fffe;box-shadow:0 24px 56px #102f382e}.hero-tag,.panel-tag{margin:0 0 .35rem;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:#f7fffcb8}.panel-copy h2,.panel-copy h3,.payment-highlight strong,.summary-card h3,.panel-copy p,.photo-card-copy p,.summary-card p,.summary-card small{margin:0}.hero-copy{display:flex;align-items:center}.customer-layout{margin-top:1rem}.customer-form,.form-grid,.slot-grid,.info-grid,.payment-screen,.payment-layout,.payment-actions{display:grid;gap:1.35rem}.quick-slot-card{display:grid;gap:1rem}.quick-slot-card .form-grid{margin-top:.2rem}.booking-panel,.quick-slot-card,.photo-card,.payment-card,.payment-info,.summary-card,.info-grid article{border-radius:28px;border:1px solid rgba(16,47,56,.08);background:#ffffffe0;box-shadow:0 18px 40px #2f4a5a14}.booking-panel{padding:1.25rem}.panel-copy{display:grid;gap:.4rem;margin-bottom:1rem}.panel-copy.compact{margin-bottom:0}.panel-tag{color:#68808a}.customer-form label{display:grid;gap:.42rem;font-weight:600}.customer-form input,.customer-form select,.customer-form textarea{width:100%;padding:.9rem .95rem;border-radius:18px;border:1px solid #d5e2e7;background:#f8fbfc}.quick-slot-card,.photo-card,.payment-card,.payment-info,.summary-card{padding:1.15rem}.slot-button,.submit-button,.secondary-button,.ghost-button,.lightbox-close{border:none;border-radius:999px;transition:transform .15s ease,opacity .15s ease}.slot-button{padding:.9rem 1rem;background:#edf5f8;color:#102f38}.slot-button.active{background:linear-gradient(135deg,#145f55,#20806d);color:#f8fffe}.photo-card{display:grid;gap:1rem}.photo-card-side{display:grid;gap:.85rem}.photo-preview-button{padding:0;border:none;background:transparent}.photo-preview-button img,.lightbox-card img{display:block;width:100%;border-radius:24px;object-fit:cover}.photo-preview-button img{max-width:220px;aspect-ratio:1 / 1}.photo-placeholder,.qr-fallback{display:grid;place-items:center;min-height:160px;padding:1rem;border-radius:22px;border:1px dashed #c7d6dc;background:#f6fbfc;color:#68808a;text-align:center}.submit-button,.secondary-button,.ghost-button{padding:.92rem 1.1rem}.submit-button{background:linear-gradient(135deg,#0e5b54,#22836f);color:#fff}.secondary-button{background:#dff3ec;color:#135d4a}.ghost-button{background:#e7eef2;color:#153541}.payment-pill{display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:.48rem .78rem;border-radius:999px;font-weight:700;font-size:.85rem;margin-bottom:1.4rem}.payment-loading-row{display:inline-flex;align-items:center;gap:.55rem;margin:-.7rem 0 1rem;color:#68808a}.payment-loading-row small{margin:0}.payment-spinner{width:1rem;height:1rem;border-radius:999px;border:2px solid rgba(128,83,0,.2);border-top-color:#805300;animation:payment-spin .8s linear infinite}.payment-pill.pending{background:#fff1cd;color:#805300}.payment-pill.success{background:#dff6ec;color:#156848}.qr-button{padding:0;border:none;background:transparent}.qr-button img{width:min(100%,320px);border-radius:24px;background:#fff;border:1px solid #dde7eb}.payment-highlight{display:grid;gap:.45rem;margin-top:.65rem}.payment-highlight strong{font-size:clamp(1.8rem,4vw,2.4rem)}.summary-card small,.info-grid span{color:#617983}.info-grid article{padding:.95rem 1rem}.payment-info .summary-card{margin-bottom:1.4rem}.payment-actions{margin-top:1.4rem}.info-grid span{display:block;margin-bottom:.3rem;font-size:.85rem}.lightbox{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;background:#071c25e0;z-index:40}.lightbox-card{position:relative;width:min(900px,100%)}.lightbox-close{position:absolute;top:1rem;right:1rem;padding:.65rem .95rem;background:#ffffffeb;color:#153541}.success-modal-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;background:#071c259e;z-index:50}.success-modal{width:min(560px,100%);display:grid;gap:.9rem;padding:1.35rem;border-radius:28px;background:#fff;box-shadow:0 24px 60px #102f3838}.success-modal h2,.success-modal p{margin:0}.success-modal-icon{display:inline-flex;align-items:center;justify-content:center;width:3.2rem;height:3.2rem;border-radius:999px;background:#dff6ec;color:#156848;font-size:1.7rem;font-weight:700}@keyframes payment-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(min-width:900px){.customer-shell{width:calc(100% - 2rem);padding-top:1.4rem}.customer-hero{padding:1rem 1.2rem}.customer-layout{display:block}.form-grid,.info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.slot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.photo-card{grid-template-columns:1.25fr 1fr;align-items:center}.payment-layout{grid-template-columns:minmax(280px,360px) 1fr;align-items:start}}@media(max-width:767px){.customer-shell{width:calc(100% - 1.5rem);padding-bottom:1.25rem}.customer-hero,.booking-panel,.quick-slot-card,.photo-card,.payment-card,.payment-info,.summary-card,.info-grid article{border-radius:22px}.customer-hero{padding:.85rem .95rem}.booking-panel,.quick-slot-card,.photo-card,.payment-card,.payment-info{padding:1rem}.success-modal{padding:1rem;border-radius:22px}.customer-form input,.customer-form select,.customer-form textarea,.slot-button,.submit-button,.secondary-button,.ghost-button{padding:.8rem .9rem}}