:root{--font-family: "Manrope", sans-serif;--font-size-xs: 10px;--font-size-sm: 12px;--font-size-md: 16px;--font-size-lg: 20px;--font-size-xl: 24px;--font-size-xxl: 32px}@media(max-width:499px){:root{--font-size-xs: 10px;--font-size-sm: 12px;--font-size-md: 14px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-xxl: 24px}}@media(max-width:299px){:root{--font-size-xs: 8px;--font-size-sm: 10px;--font-size-md: 12px;--font-size-lg: 16px;--font-size-xl: 18px;--font-size-xxl: 20px}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:Manrope,sans-serif;color:var(--colors-text-primary)}a{color:var(--colors-accent);cursor:pointer}a:hover,a:active{color:var(--colors-accent-hover)}#app{background:var(--colors-page);min-height:100vh;display:flex;flex-direction:column}.main-content{margin:auto;padding:var(--spacing-md) 0;max-width:960px;width:100%;flex:1;font-size:var(--font-size-md)}@media(max-width:1024px){.main-content{max-width:100%;padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}}.global{box-shadow:0 1px 3px #0000001a;padding:var(--spacing-sm);margin:var(--spacing-lg) auto;font-size:var(--font-size-sm);text-align:center;border-radius:var(--radius-sm);align-items:center;display:flex;justify-content:center;gap:var(--spacing-sm)}.global .material-icons{font-size:var(--font-size-md)}.global__error{border:1px solid var(--colors-danger);background:var(--colors-state-error);color:var(--colors-danger)}.global__error .material-icons{color:var(--colors-danger)}.global__success{border:1px solid var(--colors-accent);background:var(--colors-state-success);color:var(--colors-accent)}.global__success .material-icons{color:var(--colors-accent)}.global__info{border:1px solid var(--colors-warning);background:var(--colors-state-warning);color:var(--colors-warning)}.global__info .material-icons{color:var(--colors-warning)}.page-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-xl);color:var(--colors-text-primary);margin-bottom:var(--spacing-xl)}.displayonly{cursor:not-allowed;color:var(--colors-text-muted)}.header{background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--colors-border);box-shadow:0 4px 12px #00000014;position:sticky;top:0;z-index:100;transition:all .3s ease}.header__container{max-width:960px;margin:0 auto;padding:var(--spacing-md) var(--spacing-lg);display:flex;align-items:center;justify-content:space-between}.header__logo{font-weight:var(--font-weight-xl);font-size:var(--font-size-xl);cursor:pointer;color:var(--colors-primary);display:flex;align-items:center;gap:var(--spacing-lg);transition:transform .2s ease,filter .2s ease}.header__logo:hover{transform:translateY(-2px);filter:brightness(1.1)}.header__nav{display:flex;align-items:center;gap:var(--spacing-md);position:relative}.header__user{display:flex;align-items:center;cursor:pointer;position:relative;gap:var(--spacing-md)}.header__user-avatar{display:flex;justify-content:center;align-items:center;border-radius:50%;overflow:hidden}.header__user-avatar .material-icons{font-size:36px;color:var(--colors-text-primary)}.header__user-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--colors-card);border:1px solid var(--colors-border);border-radius:var(--radius-md);box-shadow:0 4px 12px #0000001a;min-width:180px;display:none;flex-direction:column;padding:var(--spacing-sm) 0;z-index:200}.header__user-menu--open{display:flex}.header__user-menu-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-md);color:var(--colors-text-primary);cursor:pointer;transition:background .2s;border-bottom:1px solid var(--colors-border)}.header__user-menu-item:last-child{border-bottom:none}.header__user-menu-item:hover{background:var(--colors-border)}.header__user-menu-item .material-icons{font-size:var(--font-size-md);color:var(--colors-text-secondary)}.footer{border-top:1px solid var(--colors-border);background:var(--colors-surface);margin-top:var(--spacing-xl)}.footer__inner{max-width:960px;margin:0 auto;padding:var(--spacing-lg);font-size:var(--font-size-sm);color:var(--colors-text-muted);text-align:center}.form__item{display:flex;flex-direction:column;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg)}.form__label{font-size:var(--font-size-sm);color:var(--colors-text-primary)}.form__label.required:after{content:" *";color:red;font-weight:400}.form__input{padding:var(--spacing-md);border:1px solid var(--colors-border);border-radius:var(--radius-sm);font-size:var(--font-size-md);background:var(--colors-surface)}.form__input::placeholder{color:var(--colors-text-muted);opacity:.8}.form__input :-webkit-input-placeholder{color:var(--colors-text-muted)}.form__input :-ms-input-placeholder{color:var(--colors-text-muted)}.form__input:focus{border-color:var(--colors-secondary);outline:none;box-shadow:0 0 0 2px #6763f533}.form__input.error{border-color:var(--colors-state-error);box-shadow:0 0 0 1px #ff00004d}.form__input:disabled{color:var(--colors-text-muted);outline:none}.form__hint{font-size:var(--font-size-xs);color:var(--colors-text-secondary);margin-top:var(--spacing-xs);font-style:italic}.form__options{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-sm)}.form__options .checkbox-group{margin-top:0}.form__actions{display:flex;justify-content:center;margin-top:var(--spacing-xl)}.form .checkbox-group{flex-direction:row;align-items:flex-start;font-size:var(--spacing-sm);transition:transform .2s ease}.form .checkbox-group:hover{transform:scale(1.02)}.form input[type=checkbox]{width:14px;height:14px;cursor:pointer;accent-color:var(--colors-accent);border-radius:var(--radius-xs, 4px)}.form input[type=checkbox]:hover{accent-color:var(--colors-accent)}.form input[type=checkbox]:focus{accent-color:var(--colors-accent-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-sm);font-weight:var(--font-weight-lg);border:none;cursor:pointer;transition:background-color .15s ease,opacity .15s ease}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background-color:var(--colors-primary);color:var(--colors-text-inverse)}.btn--primary:hover:not(:disabled){background-color:var(--colors-primary-hover)}.time-slot-grid{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.time-slot-grid__item{flex:1 1 120px;padding:var(--spacing-sm) 0;border-radius:var(--radius-sm);border:1px solid var(--colors-border);background:var(--colors-surface);text-align:center;cursor:pointer;transition:all .2s ease}@media(max-width:1024px){.time-slot-grid__item{flex:1 1 50px}}.time-slot-grid__item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.time-slot-grid__item--selected{background:var(--colors-state-success);color:var(--colors-primary-hover);border-color:var(--colors-accent)}.time-slot-grid__item--booked{background:var(--colors-border);color:var(--colors-text-muted);cursor:not-allowed}.time-slot-grid__item--past{pointer-events:none;opacity:.4}.time-slot-grid__item__time{font-weight:var(--font-weight-md);font-size:.95rem}.time-slot-grid__empty{flex:1 1 100%;padding:var(--spacing-md);text-align:center;color:var(--colors-text-muted);font-size:.9rem;border:1px dashed var(--colors-border);border-radius:var(--radius-md);background:var(--colors-surface)}.court-list{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.court-list__item{flex:1 1 120px;padding:var(--spacing-sm);border-radius:var(--radius-sm);border:1px solid var(--colors-border);background:var(--colors-surface);display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;text-align:center;transition:all .2s ease}@media(max-width:1024px){.court-list__item{display:flex;flex-direction:column;justify-content:center;gap:var(--spacing-sm)}}.court-list__item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.court-list__item--selected{background:var(--colors-state-success);color:var(--colors-primary-hover);border-color:var(--colors-accent)}.court-list__empty{flex:1 1 100%;padding:var(--spacing-md);text-align:center;color:var(--colors-text-muted);border:1px dashed var(--colors-border);border-radius:var(--radius-md);background:var(--colors-surface)}.date-selector{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;margin-bottom:var(--spacing-lg)}.date-selector .date-item{flex:1 1 60px;padding:var(--spacing-sm) 0;border:1px solid var(--colors-border);border-radius:var(--radius-sm);cursor:pointer;text-align:center;background:var(--colors-surface);transition:all .15s ease}.date-selector .date-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000014}.date-selector .date-item.selected{border-color:var(--colors-accent);background-color:var(--colors-state-success);color:var(--colors-primary-hover)}.date-selector .date-item__day{font-size:var(--font-size-sm);font-weight:var(--font-weight-md);margin-bottom:var(--spacing-sm);color:var(--colors-text-secondary)}.date-selector .date-item__date{font-size:var(--font-size-lg);font-weight:var(--font-weight-xl)}.duration-selector{display:flex;flex-wrap:wrap;gap:var(--spacing-md)}.duration-selector__item{flex:1 1 120px;padding:var(--spacing-sm) 0;border-radius:var(--radius-sm);border:1px solid var(--colors-border);background:var(--colors-surface);text-align:center;cursor:pointer;transition:all .2s ease}.duration-selector__item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.duration-selector__item--selected{background:var(--colors-state-success);color:var(--colors-primary-hover);border-color:var(--colors-accent)}.duration-selector__item--disabled{background:var(--colors-border);color:var(--colors-text-muted);cursor:not-allowed}.activity-selector{display:flex;gap:var(--spacing-md);flex-wrap:wrap}.activity-selector__item{flex:1 1 120px;padding:var(--spacing-sm) 0;border-radius:var(--radius-sm);border:1px solid var(--colors-border);background:var(--colors-surface);text-align:center;cursor:pointer;transition:all .2s ease}@media(max-width:1024px){.activity-selector__item{display:flex;flex-direction:column;justify-content:center;gap:var(--spacing-sm)}}.activity-selector__item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.activity-selector__item--selected{background:var(--colors-state-success);color:var(--colors-primary-hover);border-color:var(--colors-accent)}.activity-selector__item--disabled{background:var(--colors-border);color:var(--colors-text-muted);cursor:not-allowed}.activity-selector__icon{margin-right:var(--spacing-md);font-size:var(--font-size-md)}@media(max-width:1024px){.activity-selector__icon{margin-right:0}}.booking-summary{display:flex;flex-direction:column;width:100%;min-width:250px;max-width:300px;height:fit-content;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);border:1px solid var(--colors-border);background:var(--colors-surface);box-shadow:0 4px 12px #00000014;cursor:default;transition:transform .2s ease,box-shadow .2s ease}@media(max-width:1024px){.booking-summary{max-width:100%;width:100%}}.booking-summary:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0000001f}.booking-summary__title{margin:0 0 var(--spacing-sm) 0;font-size:var(--font-size-lg);font-weight:var(--font-weight-lg);color:var(--colors-text);border-bottom:1px solid var(--colors-border);padding-bottom:var(--spacing-md)}.booking-summary__message{font-size:var(--font-size-md);color:var(--colors-text-muted);line-height:1.4;margin:var(--spacing-sm) 0}.booking-summary__detail{list-style-type:none;padding:0;margin:0}.booking-summary__item{display:flex;justify-content:space-between;border-bottom:1px solid var(--colors-border);padding:var(--spacing-md) var(--spacing-sm);gap:var(--spacing-xl);align-items:flex-end}.booking-summary__item .label{color:var(--colors-text-muted);display:flex;align-items:center;gap:var(--spacing-sm)}.booking-summary__item .label .material-icons{font-size:var(--font-size-md)}.booking-summary__item .value{text-align:right;text-transform:capitalize;font-weight:var(--font-weight-md)}.booking-summary__item:last-child{border-bottom:none}.booking-summary__action{width:100%;display:flex;justify-content:center;margin:var(--spacing-lg) auto var(--spacing-sm)}.booking-summary__action .btn{width:100%}.home__main{display:flex;gap:var(--spacing-lg)}@media(max-width:1024px){.home__main{flex-direction:column;padding:var(--spacing-lg)}}.home__container{width:100%}.home__step{background:var(--colors-surface);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);border:none;box-shadow:0 4px 12px #0000000d;transition:transform .2s ease,box-shadow .2s ease}.home__step:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0000001a}.home__step-title{display:flex;align-items:center;gap:var(--spacing-sm);font-weight:var(--font-weight-lg);margin-top:0;margin-bottom:var(--spacing-lg);font-size:var(--font-size-md)}.home__step-icon{font-size:var(--font-size-md);color:var(--colors-primary)}.login__container{margin:auto;max-width:900px;width:100%;display:flex;gap:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);border:1px solid var(--colors-border);background:var(--colors-surface);box-shadow:0 4px 12px #00000014;transition:transform .2s ease,box-shadow .2s ease;height:50vh}@media(max-width:1024px){.login__container{flex-direction:column;width:100%;height:auto}}.auth-login{flex:1;align-content:center;padding:0 var(--spacing-lg)}@media(max-width:1024px){.auth-login{order:1}}.auth-login__link{font-size:var(--font-size-sm);text-align:center}.auth-login .form__actions .btn{width:100%}.animated__bg{flex:1;background:var(--colors-primary);color:var(--colors-text-inverse);display:flex;border-radius:var(--radius-sm);justify-content:center;align-items:center;padding:var(--spacing-md);position:relative;overflow:hidden}.animated__bg canvas{width:100%;height:100%;display:block}.animated__bg-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--colors-text-inverse);text-shadow:0 4px 12px rgba(0,0,0,.4);pointer-events:none;z-index:2;width:80%;display:flex;flex-direction:column;gap:var(--spacing-lg)}.animated__bg-content span.title{font-size:var(--font-size-xxl);font-weight:var(--font-weight-xl)}.animated__bg-content span.desc{font-size:var(--font-size-md)}.checkout__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-lg);display:flex;align-items:center;gap:var(--spacing-md)}.checkout__title .material-icons{font-size:var(--font-size-lg)}.checkout__container{display:flex;background-color:var(--colors-surface);padding:var(--spacing-lg);box-shadow:0 2px 6px #0000000d;border-radius:var(--radius-md);margin:var(--spacing-lg);gap:var(--spacing-xxl)}@media(max-width:1024px){.checkout__container{flex-direction:column}}.checkout__summary{flex:1;background-color:var(--colors-page);box-shadow:0 2px 6px #0000000d;padding:var(--spacing-lg)}.checkout__summary--content .summary-total{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);padding-bottom:var(--spacing-xl);border-bottom:1px solid var(--colors-border)}.checkout__summary--content .summary-total .summary-label{font-size:var(--font-size-sm)}.checkout__summary--content .summary-total .summary-value{font-size:var(--font-size-xxl)}.checkout__summary--content ul.summary-details{list-style-type:none;margin:0 0 var(--spacing-lg);padding:0;border-bottom:1px solid var(--colors-border)}.checkout__summary--content ul.summary-pricing{list-style-type:none;margin:0;padding:0}.checkout__summary--content ul.summary-pricing li:last-child{padding-top:var(--spacing-md);border-top:1px solid var(--colors-border)}.checkout__summary--content ul.summary-pricing li:last-child .label{font-weight:var(--font-weight-xl);color:var(--colors-text-secondary);font-size:var(--font-size-md)}.checkout__summary--content ul.summary-pricing li:last-child .value{color:var(--colors-text-primary);font-size:var(--font-size-md)}.checkout__summary--content li{padding:var(--spacing-sm);display:flex;justify-content:space-between;font-size:var(--font-size-sm)}.checkout__summary--content li .label{color:var(--colors-text-muted)}.checkout__summary--content li .value{font-weight:var(--font-weight-xl)}.checkout__contact{flex:2}@media(max-width:1024px){.checkout__contact{order:1}}.checkout__contact--info{border:1px solid var(--colors-border);border-radius:var(--radius-md);box-shadow:0 2px 4px #0000000d;margin-bottom:var(--spacing-xl)}.checkout__contact--info ul{list-style-type:none;padding:0;margin:0}.checkout__contact--info ul li{border-bottom:1px solid var(--colors-border);padding:var(--spacing-lg);display:flex;justify-content:space-between}.checkout__contact--info ul li:last-child{border-bottom:none}.checkout__contact--info ul li .value{font-weight:var(--font-weight-xl)}.checkout__contact--payment{display:flex;gap:var(--spacing-lg)}.checkout__contact--payment .payment-option{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-sm);border:1px solid var(--colors-border);background-color:var(--colors-page);cursor:pointer;transition:background-color .8s}@media(max-width:1024px){.checkout__contact--payment .payment-option{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}}@media(max-width:399px){.checkout__contact--payment .payment-option{padding:var(--spacing-xs) var(--spacing-xs);font-size:var(--font-size-xs)}}.checkout__contact--payment .payment-option:hover{border:1px solid var(--colors-accent-hover)}.checkout__contact--payment .payment-option.active{background-color:var(--colors-state-success);border:1px solid var(--colors-accent)}.checkout__contact--action{margin-top:var(--spacing-xxl)}.checkout__contact--action .btn{width:100%}.checkout .section-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-md)}.booking-history__empty{color:var(--colors-text-muted);background:var(--colors-surface);border:1px dashed var(--colors-border);border-radius:var(--radius-md);padding:var(--spacing-xl);text-align:center}.booking-history__list{display:flex;flex-direction:column;gap:var(--spacing-lg)}.booking-card{background:var(--colors-card);border:1px solid var(--colors-border);border-radius:var(--radius-md);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-lg);transition:background .15s ease,border-color .15s ease}.booking-card:hover{border-color:var(--colors-accent)}.booking-card__header{display:flex;justify-content:space-between;align-items:center}.booking-card__date{display:flex;gap:var(--spacing-xs);font-size:var(--font-size-sm)}@media(max-width:375px){.booking-card__date{font-size:var(--font-size-xs);flex-direction:column}}.booking-card__date .label{color:var(--colors-text-muted)}.booking-card__date .value{color:var(--colors-text-primary);font-weight:var(--font-weight-md)}.booking-card__body{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-lg)}.booking-card__body .material-icons{color:var(--colors-text-muted);font-size:var(--font-size-md)}.booking-card__body .booking-main{display:flex;flex-direction:column;gap:var(--spacing-sm)}.booking-card__body .booking-title{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-md);font-weight:var(--font-weight-lg);color:var(--colors-text-primary)}.booking-card__body .booking-title .material-icons{font-size:var(--font-size-md);color:var(--colors-text-secondary)}.booking-card__body .booking-date,.booking-card__body .booking-time{display:flex;align-items:center;font-size:var(--font-size-sm);color:var(--colors-text-secondary)}.booking-card__body .booking-date .material-icons,.booking-card__body .booking-time .material-icons{font-size:var(--font-size-sm);margin-right:var(--spacing-sm);color:var(--colors-text-muted)}.booking-card__body .booking-price{font-size:var(--font-size-lg);font-weight:var(--font-weight-lg);color:var(--colors-text-primary);white-space:nowrap}.booking-card__footer{margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px dashed var(--colors-border);display:flex;justify-content:flex-end}.booking-card__footer .btn{min-width:160px}.booking-status{font-size:var(--font-size-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);font-weight:var(--font-weight-lg)}@media(max-width:375px){.booking-status{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs)}}.booking-status--confirmed{background:var(--colors-state-success);color:var(--colors-accent)}.booking-status--completed{background:var(--colors-page);color:var(--colors-text-muted)}.booking-status--cancelled{background:var(--colors-state-error);color:var(--colors-danger)}.payment-page .payment-methods{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.payment-page .payment-methods .payment-option{padding:var(--spacing-sm) var(--spacing-xxl);border:1px solid var(--colors-border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}.payment-page .payment-methods .payment-option.active{background:var(--colors-state-success);color:var(--colors-inverse);border-color:var(--colors-accent-hover)}.payment-page .payment-methods .payment-option:hover{border-color:var(--colors-accent)}.payment-page .payment-form{display:flex;flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.payment-page .payment-form .form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}.payment-page .payment-form button.btn--primary{margin-top:var(--spacing-lg);width:100%}.payment-page .payment-placeholder{margin-top:var(--spacing-lg);text-align:center}.payment-page .payment-placeholder button.btn--primary{margin-top:var(--spacing-md)}.wallet-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.wallet-option{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);border:1px solid var(--colors-border);border-radius:var(--radius-md);cursor:pointer;background:var(--colors-surface);transition:all .2s ease}.wallet-option .wallet-icon{max-width:50px;height:30px;object-fit:contain;width:100%}.wallet-option .wallet-name{font-weight:var(--font-weight-md);color:var(--colors-text-primary)}.wallet-option:hover,.wallet-option.active{border-color:var(--colors-accent);background:var(--colors-state-success)}.wallet-option.active .material-icons{color:var(--colors-accent)}.thank_you-page{display:flex;justify-content:center;align-items:center;min-height:80vh}.thank_you-page .thank-you-card{background:var(--colors-card);border:1px solid var(--colors-border);border-radius:var(--radius-md);padding:var(--spacing-xxl);text-align:center;box-shadow:0 4px 12px #0000000d}.thank_you-page .thank-you-card h1{font-size:var(--font-size-xxl);color:var(--colors-text-primary);margin-bottom:var(--spacing-md)}.thank_you-page .thank-you-card p{color:var(--colors-text-secondary);margin-bottom:var(--spacing-md)}.thank_you-page .thank-you-card .btn{width:100%}