/* Phase 10 — unified customer/member experience.
   Presentation-only layer shared by public booking, Open Play, membership, events and player account. */
.public-site,
.staff-login-page{
    background:var(--brand-page-bg,#f5f7fb);
    color:var(--brand-text,#111827);
}
.public-nav.navbar{
    position:sticky;
    top:0;
    z-index:40;
    min-height:72px;
    padding:7px clamp(14px,3vw,34px);
    border-bottom:1px solid color-mix(in srgb,var(--brand-text,#111827) 9%,transparent);
    background:color-mix(in srgb,var(--brand-surface,#fff) 95%,transparent);
    box-shadow:0 4px 18px rgba(15,23,42,.035);
    backdrop-filter:blur(16px);
}
.public-nav .navbar-nav{gap:3px}
.public-nav nav a,
.public-nav .navbar-nav .public-nav-signout button{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 11px!important;
    border-radius:9px;
    color:var(--brand-muted,#667085);
    font-size:11px;
    font-weight:750;
}
.public-nav nav a.active,
.public-nav nav a:hover,
.public-nav .navbar-nav .public-nav-signout button:hover,
.public-nav .navbar-nav .public-nav-signout button:focus{
    background:rgba(var(--brand-accent-rgb),.08)!important;
    color:var(--brand-accent-dark)!important;
}
.public-nav .navbar-toggler{
    border-color:color-mix(in srgb,var(--brand-text,#111827) 13%,transparent);
    border-radius:9px;
    background:var(--brand-surface,#fff);
}

.public-container{
    width:min(100% - 28px,1180px);
    padding-top:38px;
    padding-bottom:64px;
}
.public-container.narrow{width:min(100% - 28px,820px)}
.public-container.narrow-wide{width:min(100% - 28px,1050px)}
.public-hero{
    margin-bottom:22px;
    padding:clamp(18px,3vw,28px);
    border:1px solid color-mix(in srgb,var(--brand-text,#111827) 9%,transparent);
    border-radius:20px;
    background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 6%,var(--brand-surface,#fff)),var(--brand-surface,#fff) 58%);
    box-shadow:0 12px 34px rgba(15,23,42,.05);
}
.public-hero h1{
    color:var(--brand-text,#111827);
    font-weight:820;
    letter-spacing:-.045em;
}
.public-hero p{color:var(--brand-muted,#667085);line-height:1.65}
.public-kicker{color:var(--brand-accent-dark)!important;font-weight:850!important}
.public-hero-card,
.public-site .panel{
    border-color:color-mix(in srgb,var(--brand-text,#111827) 9%,transparent);
    background:var(--brand-surface,#fff);
}
.public-hero-card{border-radius:14px;box-shadow:0 8px 22px rgba(15,23,42,.045)}

.public-site .button{
    min-height:39px;
    border-radius:var(--brand-button-radius,10px);
}
.public-site .button.primary{
    background:var(--brand-accent)!important;
    border-color:var(--brand-accent)!important;
    color:var(--brand-on-accent,#fff)!important;
    box-shadow:0 7px 18px rgba(var(--brand-accent-rgb),.14);
}
.public-site .button.primary:hover{
    background:var(--brand-accent-dark)!important;
    border-color:var(--brand-accent-dark)!important;
}
.public-site .button.ghost{
    border-color:color-mix(in srgb,var(--brand-text,#111827) 13%,transparent)!important;
    background:var(--brand-surface,#fff)!important;
    color:var(--brand-text,#111827)!important;
}
.public-site input,
.public-site select,
.public-site textarea,
.staff-login-page input,
.staff-login-page select,
.staff-login-page textarea{
    min-height:42px;
    border-color:color-mix(in srgb,var(--brand-text,#111827) 14%,transparent);
    border-radius:10px;
    background:var(--brand-surface,#fff);
    color:var(--brand-text,#111827);
}
.public-site input:focus,
.public-site select:focus,
.public-site textarea:focus,
.staff-login-page input:focus,
.staff-login-page select:focus,
.staff-login-page textarea:focus{
    border-color:var(--brand-accent);
    box-shadow:0 0 0 3px rgba(var(--brand-accent-rgb),.11);
}

/* Player account */
.member-web-app{background:var(--brand-page-bg,#f5f7fb)!important}
.member-web-shell{width:min(100% - 28px,1240px);padding-top:24px}
.member-web-hero{padding:6px 2px}
.member-web-greeting h1{font-size:36px!important}
.member-web-greeting p:not(.public-kicker){font-size:12px!important;line-height:1.55}
.member-web-tabs{
    border-color:color-mix(in srgb,var(--brand-text,#111827) 10%,transparent)!important;
    background:color-mix(in srgb,var(--brand-surface,#fff) 95%,transparent)!important;
    box-shadow:0 8px 24px rgba(15,23,42,.055)!important;
}
.member-web-tabs a{font-size:11px!important}
.member-web-tabs a:hover,
.member-web-tabs a.active{
    background:var(--brand-accent)!important;
    color:var(--brand-on-accent,#fff)!important;
}
.member-player-stats{
    background:linear-gradient(135deg,var(--nav),var(--nav-2))!important;
    box-shadow:0 18px 44px rgba(15,23,42,.13);
}
.member-player-stats:before,
.member-player-stats:after{display:none!important;content:none!important}
.member-player-stats-grid small{font-size:9px!important}
.member-player-stats-grid strong{font-size:25px!important}
.member-web-quick-actions a,
.member-reward-wallet,
.member-web-section,
.member-profile-panel,
.member-membership-panel{
    border-color:color-mix(in srgb,var(--brand-text,#111827) 9%,transparent)!important;
    background:var(--brand-surface,#fff)!important;
}
.member-web-quick-actions a:hover{border-color:var(--brand-accent)!important}
.member-web-quick-actions b{font-size:13px!important}
.member-web-quick-actions small{font-size:10px!important;line-height:1.4}
.member-section-title h2{font-size:20px!important}
.member-activity-title-row h3{font-size:14px!important}
.member-activity-copy>p{font-size:10px!important;line-height:1.5}
.member-activity-meta span,.member-addon-lines span{font-size:9px!important}
.member-empty-card span{font-size:10px!important}

/* Membership */
.membership-plan-grid{gap:14px}
.membership-plan-card{
    border-radius:16px!important;
    box-shadow:0 8px 24px rgba(15,23,42,.04);
}
.membership-plan-card h2{font-size:20px!important}
.membership-price{color:var(--brand-accent-dark);font-variant-numeric:tabular-nums}
.membership-plan-card li{font-size:11px!important;line-height:1.5}

/* Public Open Play discovery */
.openplay-discovery-page{background:var(--brand-page-bg,#f5f7fb)!important;color:var(--brand-text,#111827)!important}
.openplay-shell{width:min(100% - 28px,1160px);padding-top:22px}
.openplay-search{
    height:44px;
    border-color:color-mix(in srgb,var(--brand-text,#111827) 12%,transparent);
    border-radius:11px;
    background:var(--brand-surface,#fff);
}
.openplay-search input{font-size:12px!important}
.openplay-location-pill,.openplay-filter-btn{
    min-height:44px;
    border-radius:10px;
    border-color:color-mix(in srgb,var(--brand-text,#111827) 12%,transparent);
    background:var(--brand-surface,#fff);
    font-size:10px;
}
.openplay-day-chip{
    min-height:54px;
    border-radius:10px;
    border-color:color-mix(in srgb,var(--brand-text,#111827) 10%,transparent);
    background:var(--brand-surface,#fff);
}
.openplay-day-chip strong{font-size:9px!important}
.openplay-day-chip span{font-size:12px!important}
.openplay-day-chip.active{
    background:var(--brand-accent)!important;
    border-color:var(--brand-accent)!important;
    color:var(--brand-on-accent,#fff)!important;
}
.openplay-section-head h2{font-size:18px!important;font-weight:800}
.openplay-section-head span{font-size:9px!important}
.openplay-card-grid{gap:14px}
.openplay-session-card{
    border-color:color-mix(in srgb,var(--brand-text,#111827) 10%,transparent);
    border-radius:13px;
    background:var(--brand-surface,#fff);
    box-shadow:0 8px 24px rgba(15,23,42,.045);
    transition:transform .15s,border-color .15s,box-shadow .15s;
}
.openplay-session-card:hover{
    transform:translateY(-2px);
    border-color:rgba(var(--brand-accent-rgb),.32);
    box-shadow:0 14px 30px rgba(15,23,42,.075);
}
.openplay-card-top{
    min-height:82px;
    padding:13px 14px;
    background:linear-gradient(135deg,var(--brand),var(--brand-dark))!important;
}
.openplay-level-pill{font-size:7px!important}
.openplay-card-top h3{font-size:13px!important;line-height:1.3;text-transform:none!important}
.openplay-price strong{font-size:17px!important}
.openplay-price span{font-size:7px!important}
.openplay-card-body{padding:13px 14px;gap:11px}
.openplay-meta-line{grid-template-columns:28px 1fr;gap:9px}
.openplay-meta-icon{
    width:28px;height:28px;
    border-radius:8px;
    background:rgba(var(--brand-accent-rgb),.08);
    color:var(--brand-accent-dark);
}
.openplay-meta-line strong{font-size:10px!important}
.openplay-meta-line small{font-size:9px!important;line-height:1.4}
.openplay-player-strip{padding:8px 9px;border-color:color-mix(in srgb,var(--brand-text,#111827) 8%,transparent);background:color-mix(in srgb,var(--brand-text,#111827) 2%,var(--brand-surface,#fff))}
.openplay-player-strip small{font-size:9px!important}
.openplay-court-tags>span{font-size:7px!important}
.openplay-court-tags b{font-size:8px!important;padding:4px 6px;border-radius:6px}
.openplay-card-actions{grid-template-columns:1fr 40px;padding:0 14px 14px}
.openplay-join-btn,.openplay-share-btn{height:38px!important;border-radius:9px!important;font-size:10px!important}

/* Public Open Play modal */
.openplay-modal-dialog{border-radius:16px;box-shadow:0 30px 90px rgba(15,23,42,.28)}
.openplay-modal-header{padding:18px 20px 14px}
.openplay-modal-step{font-size:8px!important}
.openplay-modal-header h2{font-size:19px!important}
.openplay-modal-header p{font-size:9px!important}
.openplay-modal-body{padding:15px 20px 20px}
.openplay-summary-card,.openplay-player-card,.openplay-total-card,.openplay-payment-card,.openplay-gcash-panel,.openplay-confirm-row,.openplay-privacy-note{border-radius:10px}
.openplay-summary-title{font-size:8px!important}
.openplay-summary-card dt,.openplay-summary-card dd,.openplay-summary-split{font-size:9px!important}
.openplay-card-heading strong{font-size:10px!important}
.openplay-primary-player span{font-size:9px!important}
.openplay-primary-player strong{font-size:11px!important}
.openplay-primary-player small{font-size:9px!important}
.openplay-guest-fields label,.openplay-additional-row label,.openplay-proof-field{font-size:9px!important}
.openplay-guest-fields input,.openplay-additional-row input,.openplay-proof-field input{font-size:11px!important;min-height:39px}
.openplay-panel-copy{font-size:9px!important;line-height:1.5}
.openplay-add-player{height:38px!important;font-size:10px!important;border-radius:8px!important}
.openplay-total-card>div{font-size:10px!important}
.openplay-total-card .total strong:last-child{font-size:17px!important}
.openplay-payment-option{padding:11px;border-radius:9px}
.openplay-payment-option strong{font-size:10px!important}
.openplay-payment-option small{font-size:9px!important}
.openplay-gcash-panel>small{font-size:8px!important}
.openplay-payment-warning,.openplay-confirm-row,.openplay-privacy-note{font-size:9px!important}
.openplay-modal-footer{padding:12px 20px}
.openplay-modal-footer button{height:42px!important;border-radius:9px!important;font-size:10px!important}

/* Authentication */
.staff-login-page{min-height:100vh}
.staff-login-center{padding:24px}
.staff-login-card{
    border:1px solid color-mix(in srgb,var(--brand-text,#111827) 9%,transparent)!important;
    border-radius:20px!important;
    background:var(--brand-surface,#fff)!important;
    box-shadow:0 28px 75px rgba(15,23,42,.12)!important;
}
.staff-login-heading h2{font-size:25px!important}
.staff-login-heading .muted{font-size:11px!important}
.staff-login-options,.login-account-links,.login-role-switch{font-size:10px}

@media(max-width:991px){
    .public-nav.navbar{padding:8px 14px}
    .public-nav .navbar-collapse{padding-top:8px}
    .public-nav nav a,.public-nav .navbar-nav .public-nav-signout button{justify-content:flex-start;width:100%}
}
@media(max-width:700px){
    .public-container{width:min(100% - 20px,1180px);padding-top:22px;padding-bottom:48px}
    .public-hero{padding:18px;border-radius:16px}
    .member-web-shell{width:min(100% - 20px,1240px);padding-top:18px}
    .member-web-greeting h1{font-size:30px!important}
    .member-web-tabs{top:72px!important}
    .openplay-shell{width:min(100% - 20px,1160px)}
}

/* PUBLIC ACCESSIBILITY POLISH */
.public-site :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible,
.staff-login-page :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
    outline:3px solid color-mix(in srgb,var(--brand-accent) 55%,#fff);
    outline-offset:2px;
}
.public-site button,
.public-site .button,
.public-site summary,
.staff-login-page button,
.staff-login-page .button{touch-action:manipulation}
.public-site [aria-disabled="true"],
.public-site button:disabled{cursor:not-allowed}
@media(prefers-reduced-motion:reduce){
    .public-site *,
    .public-site *::before,
    .public-site *::after,
    .staff-login-page *,
    .staff-login-page *::before,
    .staff-login-page *::after{
        scroll-behavior:auto!important;
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        transition-duration:.001ms!important;
    }
}
.public-confirm-dialog{
    width:min(440px,calc(100vw - 24px));
    padding:0;
    border:0;
    border-radius:18px;
    background:transparent;
    color:var(--brand-text,#111827);
}
.public-confirm-dialog::backdrop{background:rgba(15,23,42,.5);backdrop-filter:blur(3px)}
.public-confirm-card{
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    gap:14px;
    padding:21px;
    border:1px solid color-mix(in srgb,var(--brand-text,#111827) 10%,transparent);
    border-radius:18px;
    background:var(--brand-surface,#fff);
    box-shadow:0 30px 85px rgba(15,23,42,.28);
}
.public-confirm-icon{
    width:46px;height:46px;display:grid;place-items:center;
    border-radius:13px;
    background:rgba(var(--brand-accent-rgb),.10);
    color:var(--brand-accent-dark);
    font-size:20px;font-weight:900;
}
.public-confirm-card h2{margin:3px 0 7px;font-size:19px}
.public-confirm-card p:not(.public-kicker){margin:0;color:var(--brand-muted,#667085);font-size:12px;line-height:1.55}
.public-confirm-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;padding-top:3px}
@media(max-width:480px){.public-confirm-card{grid-template-columns:40px minmax(0,1fr);padding:17px}.public-confirm-icon{width:40px;height:40px}.public-confirm-actions{display:grid;grid-template-columns:1fr 1fr}.public-confirm-actions .button{width:100%}}
/* STANDARD PUBLIC TITLE SIZE 2026-10-03 */
.public-site .public-sport-hero h1,
.public-site .public-hero h1,
.public-site .event-banner h1{
    font-size:45px!important;
    line-height:1.06!important;
    letter-spacing:-.035em!important;
}
@media(max-width:720px){
    .public-site .public-sport-hero h1,
    .public-site .public-hero h1,
    .public-site .event-banner h1{
        font-size:32px!important;
        line-height:1.08!important;
    }
}