/* Sports Booking — standalone public booking website (mobile-first). */

.pub-booking { min-height: 100vh; background: #f7fbfb; color: var(--hanapo-navy,#0d1b2a); }
.pub-venues { max-width: 1180px; padding-top: 3.2rem; padding-bottom: 4.5rem; scroll-margin-top: 76px; }

/* Header / footer */
.pub-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hanapo-border,#d9eae9); }
.pub-header nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .85rem; }
.pub-brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; color: var(--hanapo-navy,#0d1b2a); text-decoration: none; }
.pub-brand img { flex: 0 0 auto; border-radius: 10px; object-fit: contain; }
.pub-brand span { font-size: 1.05rem; letter-spacing: -.02em; }
.pub-nav { display: flex; align-items: center; gap: .9rem; }
.pub-nav > a:not(.btn) { color: #405662; font-size: .88rem; font-weight: 700; text-decoration: none; }
.pub-nav > a:not(.btn):hover { color: var(--hanapo-teal-dark,#087f7c); }
.pub-footer { background: var(--hanapo-navy,#0d1b2a); color: #cfe3e2; padding: 2.2rem 0 2.6rem; margin-top: 2rem; }
.pub-footer a { color: #fff; text-decoration: none; margin-right: 1.2rem; font-weight: 600; }
.pub-footer small { display: block; margin-top: 1rem; color: #8fa8ad; }
.pub-footer__brand { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; color: #fff; }
.pub-footer__brand img { max-width: 190px; object-fit: contain; object-position: left center; }
.pub-footer__brand p { flex-basis: 100%; margin: -.2rem 0 .25rem; color: #a9c0c3; font-size: .9rem; }

/* Hero */
.pub-hero { overflow: hidden; background: radial-gradient(circle at 82% 28%, rgba(0,178,169,.18), transparent 30%), linear-gradient(145deg,#fff 52%,#e9f8f6); padding: 4rem 0 3.6rem; border-bottom: 1px solid var(--hanapo-border,#d9eae9); }
.pub-hero__inner { display: grid; align-items: center; gap: 2.3rem; padding-right: 1rem; padding-left: 1rem; }
.pub-hero__copy { position: relative; z-index: 2; }
.pub-hero h1 { margin-bottom: 0; font-size: clamp(2.45rem, 8vw, 4.6rem); line-height: 1.02; letter-spacing: -.055em; }
.pub-hero h1 span { color: var(--hanapo-teal-dark,#087f7c); }
.pub-hero__lead { color: #354957; max-width: 600px; margin: 1.15rem 0 0; font-size: clamp(1rem,2vw,1.15rem); }
.pub-hero__tagline { margin: .55rem 0 0; color: #607681; font-size: .9rem; font-weight: 600; }
.pub-hero__cta { margin-top: 1.4rem; padding: .75rem 1.15rem; }
.pub-hero__visual { display: none; justify-content: center; }
.pub-hero__court { position: relative; width: min(100%,390px); aspect-ratio: 4/3; border: 10px solid #fff; border-radius: 28px; background: linear-gradient(145deg,#0c918d,#066966); box-shadow: 0 30px 70px rgba(4,76,76,.2); transform: rotate(2deg); }
.pub-hero__court:before,.pub-hero__court:after,.pub-hero__court span:before,.pub-hero__court span:after { content:""; position:absolute; background:rgba(255,255,255,.8); }
.pub-hero__court:before { left:50%; top:0; bottom:0; width:3px; transform:translateX(-50%); }
.pub-hero__court:after { top:50%; left:0; right:0; height:3px; transform:translateY(-50%); }
.pub-hero__court span:before { width:80px; height:80px; border:3px solid rgba(255,255,255,.8); border-radius:50%; background:transparent; left:50%; top:50%; transform:translate(-50%,-50%); }
.pub-hero__court span:after { inset:12% 9%; border:3px solid rgba(255,255,255,.8); background:transparent; }
.pub-hero__court i { position:absolute; right:12%; top:13%; color:var(--brand-accent,#ffc857); font-size:3.4rem; filter:drop-shadow(0 8px 8px rgba(0,0,0,.16)); transform:rotate(-10deg); }
.pub-hero--venue { padding: 2rem 0 1.6rem; }
.pub-hero--venue h1 { font-size: clamp(1.9rem,4.5vw,2.9rem); letter-spacing: -.035em; }
.pub-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: var(--hanapo-muted,#667783); margin-bottom: .8rem; }
.pub-crumbs a { color: var(--hanapo-teal-dark,#087f7c); text-decoration: none; font-weight: 700; }
@media (min-width: 800px) { .pub-hero__inner { grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); } .pub-hero__visual { display:flex; } }

/* Venue / resource cards */
.pub-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 640px) { .pub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pub-grid { grid-template-columns: repeat(3, 1fr); } }
.pub-section-head { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; margin-bottom:1.5rem; }
.pub-section-head h2 { margin:.2rem 0 0; font-size:clamp(1.65rem,3vw,2.2rem); letter-spacing:-.035em; }
.pub-section-head p { max-width:520px; margin:0; color:var(--hanapo-muted,#667783); }
.pub-kicker { color:var(--hanapo-teal-dark,#087f7c); font-size:.76rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.pub-card { background: #fff; border: 1px solid var(--hanapo-border,#d9eae9); border-radius: var(--radius,16px); box-shadow: var(--shadow-sm,0 6px 20px rgba(13,27,42,.06)); overflow: hidden; display: flex; flex-direction: column; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.pub-card--venue:hover,.pub-card--resource:hover { transform:translateY(-3px); border-color:#b9dcda; box-shadow:0 16px 36px rgba(7,72,75,.11); }
.pub-card__media { display: block; aspect-ratio: 16/9; background: #eaf4f3; }
.pub-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-card__body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.pub-card__body h3 a { color: var(--hanapo-navy,#0d1b2a); text-decoration: none; }
.pub-card__body h3 a:hover { color: var(--hanapo-teal-dark,#087f7c); }
.pub-meta { color: var(--hanapo-muted,#667783); font-size: .86rem; }
.pub-desc { color: #38505e; font-size: .92rem; }
.pub-card__foot { margin-top: auto; padding-top: .7rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.pub-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--hanapo-aqua-soft,rgba(8,127,124,.055)); color: var(--hanapo-teal-dark,#087f7c); font-weight: 700; font-size: .8rem; padding: .3rem .65rem; border-radius: 99px; }
.pub-price strong { font-size: 1.05rem; letter-spacing: -.02em; }
.pub-price small { color: var(--hanapo-muted,#667783); margin-left: .25rem; }
.pub-empty { text-align: center; padding: 3rem 1.5rem; }
.pub-empty i { font-size: 2.2rem; color: var(--hanapo-teal,#087f7c); }
@media (max-width: 639px) { .pub-brand span { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pub-nav > a:not(.btn) { display:none; } .pub-nav { gap:.45rem; } .pub-section-head { align-items:flex-start; flex-direction:column; gap:.55rem; } }

/* Booking layout */
.pub-booking__head { margin: .4rem 0 1.2rem; }
.pub-booking__grid { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .pub-booking__grid { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.pub-panel { background: #fff; border: 1px solid var(--hanapo-border,#d9eae9); border-radius: var(--radius,16px); box-shadow: var(--shadow-sm,0 6px 20px rgba(13,27,42,.06)); padding: 1.3rem; }
.pub-panel__title { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.pub-step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--hanapo-aqua,rgba(8,127,124,.12)); color: var(--hanapo-teal-dark,#087f7c); font-size: .8rem; font-weight: 800; flex: 0 0 auto; }
.pub-panel--summary { position: static; }
@media (min-width: 900px) { .pub-panel--summary { position: sticky; top: 74px; } }

/* Slots */
.pub-slots { display: flex; flex-wrap: wrap; gap: .55rem; min-height: 44px; }
.pub-slots__placeholder { width: 100%; font-size: .92rem; }
.pub-slot { border: 1.5px solid var(--hanapo-border,#d9eae9); background: #fff; border-radius: 12px; padding: .5rem .8rem; font-weight: 700; font-size: .88rem; color: var(--hanapo-navy,#0d1b2a); cursor: pointer; transition: all .15s ease; }
.pub-slot:hover:not(:disabled) { border-color: var(--hanapo-teal,#087f7c); }
.pub-slot[aria-pressed="true"] { background: var(--hanapo-teal-dark,#087f7c); border-color: var(--hanapo-teal-dark,#087f7c); color: #fff; box-shadow: 0 6px 16px rgba(7,138,135,.2); }
.pub-slot:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; font-weight: 600; }
.pub-slot--empty { padding: 1rem; border: 1.5px dashed var(--hanapo-border,#d9eae9); border-radius: 12px; color: var(--hanapo-muted,#667783); font-size: .92rem; width: 100%; text-align: center; }

/* Hours stepper */
.pub-hours { display: inline-flex; align-items: center; gap: 1rem; border: 1.5px solid var(--hanapo-border,#d9eae9); border-radius: 14px; padding: .45rem .6rem; }
.pub-hours__btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--hanapo-border,#d9eae9); background: #fff; font-size: 1.25rem; font-weight: 800; color: var(--hanapo-teal-dark,#087f7c); cursor: pointer; line-height: 1; }
.pub-hours__btn:disabled { opacity: .35; cursor: not-allowed; }
.pub-hours__value { display: flex; align-items: baseline; gap: .4rem; min-width: 84px; justify-content: center; }
.pub-hours__value strong { font-size: 1.5rem; letter-spacing: -.03em; }
.pub-hours__value small { color: var(--hanapo-muted,#667783); font-weight: 700; }

/* Summary */
.pub-review { margin: 0 0 1rem; }
.pub-review > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--hanapo-border,#d9eae9); }
.pub-review dt { color: var(--hanapo-muted,#667783); font-weight: 600; }
.pub-review dd { margin: 0; font-weight: 700; text-align: right; }
.pub-total { display: flex; justify-content: space-between; align-items: center; background: var(--hanapo-aqua-soft,rgba(8,127,124,.055)); border-radius: 12px; padding: .85rem 1rem; }
.pub-total__calc { color: var(--hanapo-muted,#667783); font-size: .9rem; }
.pub-total strong { font-size: 1.35rem; letter-spacing: -.03em; color: var(--hanapo-teal-dark,#087f7c); }
.pub-total__note { color: var(--hanapo-muted,#667783); font-size: .78rem; margin: .5rem 0 0; }

/* Confirmation */
.pub-confirm { max-width: 640px; margin: 2.2rem auto 3.5rem; background: #fff; border: 1px solid var(--hanapo-border,#d9eae9); border-radius: var(--radius-lg,24px); box-shadow: var(--shadow-sm,0 6px 20px rgba(13,27,42,.06)); padding: 1.6rem; }
@media (min-width: 640px) { .pub-confirm { padding: 2.2rem; } }
.pub-confirm__state { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 14px; }
.pub-confirm__state i { font-size: 1.5rem; line-height: 1; }
.pub-confirm__state small { display: block; color: inherit; opacity: .8; }
.pub-confirm__state--success { background: rgba(22,122,91,.1); color: var(--hanapo-success,#167a5b); }
.pub-confirm__state--pending { background: rgba(255,200,87,.16); color: #8a6410; }
.pub-confirm__state--danger { background: rgba(180,35,58,.1); color: var(--hanapo-danger,#b4233a); }
.pub-ref { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 2px dashed var(--hanapo-border,#d9eae9); border-radius: 12px; padding: .8rem 1rem; margin: 1.2rem 0; flex-wrap: wrap; }
.pub-ref span { color: var(--hanapo-muted,#667783); font-size: .85rem; font-weight: 700; }
.pub-ref strong { font-size: 1.15rem; letter-spacing: .04em; }
.pub-summary { margin: 0; }
.pub-summary > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--hanapo-border,#d9eae9); }
.pub-summary dt { color: var(--hanapo-muted,#667783); font-weight: 600; }
.pub-summary dd { margin: 0; font-weight: 700; text-align: right; }
.pub-badge { display: inline-block; padding: .22rem .65rem; border-radius: 99px; font-size: .78rem; font-weight: 800; }
.pub-badge--success { background: rgba(22,122,91,.12); color: var(--hanapo-success,#167a5b); }
.pub-badge--pending { background: rgba(255,200,87,.2); color: #8a6410; }
.pub-badge--danger { background: rgba(180,35,58,.12); color: var(--hanapo-danger,#b4233a); }

/* Payment */
.pub-pay { margin-top: 1.4rem; }
.pub-pay__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1.5px solid var(--hanapo-border,#d9eae9); border-radius: 14px; padding: .9rem 1.1rem; margin-bottom: .7rem; }
.pub-pay__info strong { display: block; }
.pub-pay__info small { color: var(--hanapo-muted,#667783); }
.pub-gcash { margin-top: 1.2rem; border: 1.5px solid var(--hanapo-border,#d9eae9); border-radius: 14px; padding: 1.1rem 1.2rem; background: #fbfeff; }
.pub-gcash__meta { margin: 0 0 .8rem; }
.pub-gcash__meta > div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.pub-gcash__meta dt { color: var(--hanapo-muted,#667783); }
.pub-gcash__meta dd { margin: 0; font-weight: 800; }
.pub-gcash__qr { display: block; margin: .4rem auto; border-radius: 10px; border: 1px solid var(--hanapo-border,#d9eae9); }
.pub-gcash__note { color: #38505e; font-size: .9rem; }
.pub-gcash__submit { margin-top: .6rem; }

/* Alerts */
.pub-alert { display: flex; gap: .6rem; align-items: flex-start; border-radius: 12px; padding: .8rem 1rem; font-weight: 600; font-size: .92rem; margin-bottom: 1rem; }
.pub-alert--error { background: rgba(180,35,58,.1); color: var(--hanapo-danger,#b4233a); }
.pub-alert--success { background: rgba(22,122,91,.12); color: var(--hanapo-success,#167a5b); }
.pub-alert--info { background: rgba(8,127,124,.08); color: var(--hanapo-teal-dark,#087f7c); }