html {
font-size: 14px;
}
body {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
main[role="main"] {
flex: 1 0 auto !important;
}
.arena-footer {
width: 100%;
flex-shrink: 0;
padding: 25px 20px;
background-color: #073653;
color: #fff;
box-sizing: border-box;
}
.footer-wrap {
width: 100%;
box-sizing: border-box;
}
.arena-footer-content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* =========================================================
ARENA PADDLE GROUNDS - HOME PAGE
========================================================= */
:root {
--arena-navy: #001f38;
--arena-navy-light: #0d3b63;
--arena-card: #123f68;
--arena-gold: #e5ad37;
--arena-tan: #e1bf73;
--arena-white: #ffffff;
--arena-muted: #a9c8e8;
--arena-border: rgba(113, 174, 224, 0.25);
}
/* HOME HERO */
.arena-hero {
min-height: calc(100vh - 150px);
background: var(--arena-navy);
display: grid;
grid-template-columns: 1.4fr 0.6fr;
align-items: center;
gap: 70px;
padding: 90px max(7vw, 40px);
position: relative;
overflow: hidden;
}
/* Decorative background */
.arena-hero::before {
content: "";
position: absolute;
width: 520px;
height: 520px;
border: 1px solid rgba(229, 173, 55, 0.12);
border-radius: 50%;
right: -180px;
top: -180px;
}
.arena-hero::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: var(--arena-gold);
}
/* LEFT SIDE */
.arena-hero-content {
position: relative;
z-index: 2;
max-width: 900px;
}
.arena-eyebrow {
color: var(--arena-gold);
font-size: 14px;
font-weight: 800;
letter-spacing: 5px;
margin: 0 0 24px;
}
.arena-hero h1 {
color: var(--arena-white);
font-size: clamp(58px, 7vw, 105px);
line-height: 0.88;
font-weight: 900;
letter-spacing: -5px;
margin: 0 0 35px;
}
.arena-tagline {
color: #d8e7f5;
font-size: clamp(18px, 1.5vw, 24px);
line-height: 1.55;
margin-bottom: 38px;
}
/* BOOK → PLAY → PAY */
.arena-flow {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 13px;
color: var(--arena-white);
margin-bottom: 42px;
}
.arena-flow span {
font-size: 13px;
font-weight: 800;
letter-spacing: 2px;
}
.arena-flow b {
color: var(--arena-gold);
font-size: 17px;
}
/* BUTTONS */
.arena-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.arena-btn {
min-height: 54px;
padding: 0 27px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 12px;
font-weight: 900;
letter-spacing: 2px;
border-radius: 5px;
transition: 0.25s ease;
}
.arena-btn-gold {
background: var(--arena-gold);
color: #001b31;
border: 1px solid var(--arena-gold);
}
.arena-btn-gold:hover {
background: #f0bd4c;
color: #001b31;
transform: translateY(-2px);
}
.arena-btn-outline {
background: transparent;
color: var(--arena-white);
border: 1px solid rgba(255,255,255,0.35);
}
.arena-btn-outline:hover {
border-color: var(--arena-gold);
color: var(--arena-gold);
transform: translateY(-2px);
}
/* RIGHT FEATURE CARD */
.arena-hero-card {
background: linear-gradient( 145deg, rgba(20, 67, 107, 0.96), rgba(8, 46, 78, 0.96) );
border: 1px solid var(--arena-border);
border-radius: 14px;
padding: 45px;
min-height: 440px;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
z-index: 2;
box-shadow: 0 25px 60px rgba(0,0,0,0.2);
}
.arena-card-number {
position: absolute;
top: 30px;
right: 35px;
color: var(--arena-gold);
font-size: 58px;
font-weight: 900;
}
.arena-hero-card > p:first-of-type {
color: var(--arena-gold);
font-size: 11px;
font-weight: 800;
letter-spacing: 3px;
}
.arena-hero-card h2 {
color: var(--arena-white);
font-size: clamp(35px, 3vw, 52px);
line-height: 1.05;
font-weight: 900;
margin: 15px 0 25px;
}
.arena-card-line {
width: 65px;
height: 4px;
background: var(--arena-gold);
margin-bottom: 22px;
}
.arena-card-small {
color: var(--arena-muted);
font-size: 13px;
letter-spacing: 1px;
}
/* TABLET */
@media (max-width: 1000px) {
.arena-hero {
grid-template-columns: 1fr;
padding-top: 70px;
}
.arena-hero-card {
max-width: 650px;
min-height: 340px;
}
}
/* MOBILE */
@media (max-width: 600px) {
.arena-hero {
padding: 55px 22px 70px;
gap: 45px;
}
.arena-eyebrow {
font-size: 11px;
letter-spacing: 3px;
}
.arena-hero h1 {
font-size: clamp(48px, 15vw, 70px);
letter-spacing: -3px;
}
.arena-tagline {
font-size: 17px;
}
.arena-flow {
gap: 8px;
}
.arena-flow span {
font-size: 10px;
letter-spacing: 1px;
}
.arena-hero-actions {
flex-direction: column;
}
.arena-btn {
width: 100%;
}
.arena-hero-card {
min-height: 320px;
padding: 30px;
}
.arena-card-number {
font-size: 42px;
right: 25px;
top: 20px;
}
}
/* REMOVE DEFAULT ASP.NET PAGE WIDTH */
.container {
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
main {
width: 100%;
}
body {
margin: 0;
background: #001f38;
}
/* =========================================================
VISUAL COURT AVAILABILITY
========================================================= */
.court-availability-section {
background: #001f38;
padding: 90px max(7vw, 40px) 110px;
color: #ffffff;
}
.availability-container {
max-width: 1250px;
margin: 0 auto;
}
/* HEADING */
.availability-heading {
margin-bottom: 42px;
}
.availability-heading > span {
display: block;
color: #e5ad37;
font-size: 12px;
font-weight: 900;
letter-spacing: 4px;
margin-bottom: 14px;
}
.availability-heading h2 {
color: #ffffff;
font-size: 38px;
font-weight: 900;
line-height: 1.1;
/* =========================================================
SHARED FOOTER
Centralized footer styling used by both public and admin layouts
========================================================= */
.arena-footer {
margin-top: 40px;
padding: 30px 0 26px;
color: #afc0cb;
background: linear-gradient(180deg, #041f33, #031827);
border-top: 1px solid rgba(255,255,255,0.04);
}
.arena-footer-content {
display: grid;
grid-template-columns: 1.25fr 1fr .75fr;
align-items: start;
gap: 28px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.arena-footer strong {
color: #d5a258;
font-size: 12px;
letter-spacing: 1.5px;
}
.arena-footer p {
margin: 7px 0 0;
color: #b8c7d1;
font-size: 13px;
}
.arena-footer-links {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.arena-footer-links a {
color: #c4d0d8;
font-size: 13px;
text-decoration: none;
transition: color .15s ease;
}
.arena-footer-links a:hover {
color: #d5a258;
}
.arena-footer-copy {
color: #8195a3;
font-size: 12px;
text-align: right;
}
@media (max-width: 850px) {
.arena-footer-content {
grid-template-columns: 1fr;
gap: 18px;
}
.arena-footer-copy {
text-align: left;
}
}
margin: 0 0 14px;
}
.availability-heading p {
color: #a9c8e8;
font-size: 15px;
margin: 0;
}
/* MAIN CARD */
.availability-card {
background: #0d3b63;
border: 1px solid rgba(113, 174, 224, 0.28);
border-radius: 14px;
overflow: hidden;
}
/* CARD HEADER */
.availability-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 30px 35px;
border-bottom: 1px solid rgba(113, 174, 224, 0.25);
}
.availability-card-header > div:first-child > span {
display: block;
color: #e5ad37;
font-size: 10px;
font-weight: 900;
letter-spacing: 3px;
margin-bottom: 7px;
}
.availability-card-header h3 {
color: #ffffff;
font-size: 21px;
font-weight: 800;
margin: 0;
}
/* DATE */
.availability-date {
display: flex;
flex-direction: column;
gap: 6px;
}
.availability-date label {
color: #9dbbd7;
font-size: 9px;
font-weight: 900;
letter-spacing: 2px;
}
.availability-date input {
min-width: 180px;
height: 42px;
padding: 0 12px;
background: #001f3d;
color: #ffffff;
border: 1px solid #456786;
border-radius: 5px;
outline: none;
}
.availability-date input:focus {
border-color: #e5ad37;
}
/* TABLE */
.availability-table-wrapper {
overflow-x: auto;
padding: 30px 35px 35px;
}
.availability-grid {
display: grid;
grid-template-columns: 80px repeat(var(--court-count), minmax(145px, 175px));
gap: 6px;
width: max-content;
min-width: 100%;
justify-content: center;
}
/* COURT HEADINGS */
.availability-empty {
min-height: 55px;
}
.court-column-heading {
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
color: #ffffff;
border-bottom: 1px solid rgba(113, 174, 224, 0.22);
}
.court-column-heading span {
color: #e5ad37;
font-size: 10px;
font-weight: 900;
}
.court-column-heading strong {
font-size: 14px;
font-weight: 700;
}
/* TIME */
.court-time {
min-height: 76px;
display: flex;
flex-direction: column;
justify-content: center;
border-right: 1px solid rgba(113, 174, 224, 0.22);
}
.court-time strong {
color: #ffffff;
font-size: 16px;
}
.court-time span {
color: #7fa6c8;
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
}
/* COURT SLOTS */
.court-slot {
min-height: 76px;
border: none;
border-radius: 10px;
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: 0.2s ease;
}
.court-slot span {
font-size: 13px;
font-weight: 700;
letter-spacing: .3px;
}
.court-slot small {
margin-top: 3px;
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
}
/* GREEN AVAILABLE */
.court-slot.available {
background: linear-gradient(180deg, #46b37c 0%, #369764 100%);
color: #fff;
border: 1px solid rgba(255,255,255,.08);
cursor: pointer;
box-shadow: 0 4px 12px rgba(38, 126, 84, .18);
}
.court-slot.available:hover {
transform: translateY(-2px);
filter: brightness(1.04);
box-shadow: 0 10px 24px rgba(38,126,84,.28);
transition: .25s ease;
}
/* RED BOOKED */
.court-slot.booked {
background: #b84b50;
color: #ffffff;
cursor: default;
opacity: 0.9;
}
/* GOLD EVENT */
.court-slot.event {
background: #d5a13a;
color: #001f38;
cursor: default;
}
/* OPEN PLAY */
.court-slot.open-play {
background: #d5a13a;
color: #001f38;
cursor: pointer;
text-decoration: none;
border: 1px solid rgba(255,255,255,.08);
}
.court-slot.open-play:hover {
transform: translateY(-2px);
filter: brightness(1.05);
box-shadow: 0 10px 24px rgba(213,161,58,.25);
transition: .25s ease;
}
s
/* LEGEND */
.availability-legend {
min-height: 70px;
padding: 16px 30px;
background: #082f52;
border-top: 1px solid rgba(113, 174, 224, 0.25);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 50px;
flex-wrap: nowrap;
}
.availability-legend > div {
display: grid;
grid-template-columns: 12px auto;
column-gap: 9px;
align-items: center;
min-width: 150px;
}
.legend-color {
width: 10px;
height: 10px;
border-radius: 50%;
grid-row: 1 / span 2;
}
.legend-green {
background: #3c9b6d;
}
.legend-red {
background: #b84b50;
}
.legend-gold {
background: #d5a13a;
}
.availability-legend strong {
color: #ffffff;
font-size: 9px;
letter-spacing: 1px;
}
.availability-legend small {
color: #85a9c8;
font-size: 9px;
}
/* =========================================================
QUICK BOOKING MODAL
========================================================= */
.court-booking-modal {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 12, 27, 0.84);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: 0.2s ease;
}
.court-booking-modal.show {
opacity: 1;
visibility: visible;
}
.court-booking-modal-card {
width: 100%;
max-width: 500px;
background: #0d3b63;
border: 1px solid #456786;
border-radius: 12px;
padding: 35px;
position: relative;
transform: translateY(15px);
transition: 0.2s ease;
}
.court-booking-modal.show .court-booking-modal-card {
transform: translateY(0);
}
/* CLOSE */
.court-modal-close {
position: absolute;
right: 18px;
top: 14px;
border: none;
background: transparent;
color: #91aec8;
font-size: 27px;
cursor: pointer;
}
.court-modal-close:hover {
color: #ffffff;
}
/* MODAL TEXT */
.court-modal-label {
display: block;
color: #e5ad37;
font-size: 10px;
font-weight: 900;
letter-spacing: 3px;
margin-bottom: 12px;
}
.court-booking-modal-card h2 {
color: #ffffff;
font-size: 25px;
font-weight: 900;
margin: 0 0 8px;
}
.court-booking-modal-card > p {
color: #9dbbd7;
font-size: 13px;
margin-bottom: 25px;
}
/* SUMMARY */
.court-booking-summary {
background: #001f3d;
border: 1px solid #365c7d;
border-radius: 7px;
margin-bottom: 22px;
overflow: hidden;
}
.court-booking-summary > div {
min-height: 55px;
padding: 0 17px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-bottom: 1px solid #294e6e;
}
.court-booking-summary > div:last-child {
border-bottom: none;
}
.court-booking-summary span {
color: #81a6c7;
font-size: 9px;
font-weight: 900;
letter-spacing: 2px;
}
.court-booking-summary strong {
color: #ffffff;
font-size: 13px;
}
/* CONTINUE */
.court-modal-continue {
width: 100%;
min-height: 52px;
border: none;
border-radius: 5px;
background: #e5ad37;
color: #001f38;
font-size: 11px;
font-weight: 900;
letter-spacing: 2px;
cursor: pointer;
transition: 0.2s ease;
}
.court-modal-continue:hover {
background: #f0bd4c;
transform: translateY(-1px);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 768px) {
.court-availability-section {
padding: 65px 20px 80px;
}
.availability-heading h2 {
font-size: 30px;
}
.availability-card-header {
flex-direction: column;
align-items: flex-start;
padding: 25px;
}
.availability-date {
width: 100%;
}
.availability-date input {
width: 100%;
}
.availability-table-wrapper {
padding: 20px;
}
.availability-legend {
padding: 22px 25px;
gap: 20px;
flex-direction: column;
align-items: flex-start;
}
.court-booking-modal-card {
padding: 28px 22px;
}
}
/* ========================================
RESERVATION FORM FIX
======================================== */
body {
background-color: #002b49;
color: #ffffff;
}
/* Reservation headings */
h1,
h2,
h3,
h4 {
color: #ffffff;
}
/* Form labels */
.form-group label,
.control-label,
label {
color: #ffffff !important;
font-weight: 600;
margin-bottom: 7px;
}
/* Input fields */
.form-control {
background-color: #ffffff !important;
color: #0b2942 !important;
border: 2px solid #d9ad55;
border-radius: 8px;
padding: 10px 14px;
}
/* Placeholder */
.form-control::placeholder {
color: #777777;
}
/* Validation errors */
.text-danger,
.field-validation-error {
color: #ff6b6b !important;
font-weight: 600;
}
/* Create page container */
.row {
color: #ffffff;
}
/* Links */
a {
color: #e8b43a;
}
a:hover {
color: #ffd56a;
}
/* =========================================
BOOKING PAGE - ACTION BUTTON FIX
========================================= */
/* =========================================
BOOK A COURT
========================================= */
.booking-page {
width: 100%;
max-width: 1250px;
margin: 0 auto;
min-height: 100vh;
padding: 60px 30px 100px;
}
/* PAGE HEADER */
.booking-header {
margin-bottom: 35px;
}
.booking-header .booking-eyebrow {
color: #f2b632;
font-size: 12px;
font-weight: 800;
letter-spacing: 3px;
margin-bottom: 10px;
}
.booking-header h1 {
color: #ffffff;
font-size: 48px;
font-weight: 900;
margin: 0 0 10px;
}
.booking-header > p:last-child {
color: #9bbbd3;
margin: 0;
}
/* FORM CARD */
.booking-card {
position: relative;
background: #0d416a;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
padding: 35px;
}
/* SECTION TITLE */
.booking-section-title {
color: #f2b632;
font-size: 12px;
font-weight: 900;
letter-spacing: 2px;
margin: 10px 0 20px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.booking-section-title:not(:first-child) {
margin-top: 35px;
}
/* FORM GRID */
.booking-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.booking-card .form-group {
min-width: 0;
}
.booking-card label {
display: block;
color: #ffffff;
font-size: 12px;
font-weight: 700;
margin-bottom: 7px;
}
/* INPUTS */
.booking-card .form-control {
width: 100%;
min-height: 50px;
padding: 11px 14px;
background: #ffffff;
color: #082c48;
border: 2px solid transparent;
border-radius: 6px;
font-size: 14px;
}
.booking-card .form-control:focus {
border-color: #f2b632;
box-shadow: 0 0 0 3px rgba(242, 182, 50, 0.15);
outline: none;
}
/* BOOKING SUMMARY */
.booking-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 35px;
background: #062e4d;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
overflow: hidden;
}
.booking-summary > div {
padding: 22px;
border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.booking-summary > div:last-child {
border-right: none;
}
.booking-summary > div > span {
display: block;
color: #88aac5;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 6px;
}
.booking-summary strong {
color: #ffffff;
font-size: 20px;
}
.booking-total {
background: rgba(242, 182, 50, 0.08);
}
.booking-total strong {
color: #f2b632;
font-size: 25px;
}
/* ACTIONS */
.booking-actions {
position: relative;
z-index: 10;
display: flex;
align-items: center;
gap: 16px;
margin-top: 30px;
}
/* CONFIRM BOOKING */
.booking-submit {
position: relative;
z-index: 11;
border: none;
border-radius: 5px;
background: #f2b632;
color: #002b45;
padding: 16px 28px;
font-size: 12px;
font-weight: 900;
letter-spacing: 1px;
cursor: pointer;
transition: 0.2s ease;
}
.booking-submit:hover {
background: #ffc84c;
transform: translateY(-2px);
}
/* VIEW RESERVATIONS */
.booking-back {
position: relative;
z-index: 11;
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 0 22px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 5px;
color: #ffffff;
text-decoration: none;
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
transition: 0.2s ease;
}
.booking-back:hover {
color: #f2b632;
border-color: #f2b632;
}
/* VALIDATION */
.booking-card .text-danger {
display: block;
margin-top: 5px;
font-size: 12px;
}
/* MOBILE */
@media (max-width: 768px) {
.booking-page {
padding: 40px 18px 70px;
}
.booking-header h1 {
font-size: 36px;
}
.booking-card {
padding: 22px;
}
.booking-grid {
grid-template-columns: 1fr;
}
.booking-summary {
grid-template-columns: 1fr;
}
.booking-summary > div {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.booking-actions {
flex-direction: column;
align-items: stretch;
}
.booking-submit,
.booking-back {
width: 100%;
justify-content: center;
}
}
/* Prevent footer from covering booking controls */
footer,
.footer {
position: relative;
z-index: 1;
}
.legend-orange {
background: #f4b942;
}
/* =========================================
BOOKING CONFIRMATION PAGE
========================================= */
.confirmation-page {
min-height: 100vh;
background: #002b45;
padding: 70px 30px 100px;
display: flex;
justify-content: center;
align-items: flex-start;
}
.confirmation-card {
width: 100%;
max-width: 1000px;
background: #124b73;
border: 1px solid #28678f;
border-radius: 16px;
padding: 55px;
}
.confirmation-icon {
width: 70px;
height: 70px;
border-radius: 50%;
background: #3da370;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
font-weight: 900;
margin-bottom: 25px;
}
.confirmation-eyebrow {
color: #f2b632;
font-size: 14px;
font-weight: 900;
letter-spacing: 3px;
margin-bottom: 12px;
}
.confirmation-card h1 {
color: white;
font-size: 48px;
font-weight: 900;
margin-bottom: 10px;
}
.confirmation-message {
color: #a9cce3;
font-size: 18px;
margin-bottom: 40px;
}
.confirmation-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: #28678f;
border: 1px solid #28678f;
margin-bottom: 40px;
}
.confirmation-details > div {
background: #0d3f63;
padding: 22px 25px;
display: flex;
flex-direction: column;
gap: 7px;
}
.confirmation-details span {
color: #f2b632;
font-size: 11px;
font-weight: 900;
letter-spacing: 2px;
}
.confirmation-details strong {
color: white;
font-size: 17px;
}
.confirmation-actions {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.confirmation-primary,
.confirmation-secondary {
padding: 16px 24px;
font-weight: 900;
letter-spacing: 1px;
text-decoration: none;
display: inline-block;
}
.confirmation-primary {
background: #f2b632;
color: #002b45;
}
.confirmation-secondary {
border: 1px solid #5c88a5;
color: white;
}
.confirmation-primary:hover {
opacity: 0.9;
color: #002b45;
}
.confirmation-secondary:hover {
background: #0d3f63;
color: white;
}
/* MOBILE */
@media (max-width: 700px) {
.confirmation-page {
padding: 40px 15px 80px;
}
.confirmation-card {
padding: 30px 20px;
}
.confirmation-card h1 {
font-size: 34px;
}
.confirmation-details {
grid-template-columns: 1fr;
}
.confirmation-actions {
flex-direction: column;
}
.confirmation-primary,
.confirmation-secondary {
text-align: center;
}
}
/* =========================================================
MY RESERVATIONS PAGE
========================================================= */
.my-reservations-page {
min-height: 100vh;
background: #002b45;
padding: 70px 30px 100px;
color: #ffffff;
}
.my-reservations-container {
width: 100%;
max-width: 1250px;
margin: 0 auto;
}
/* PAGE HEADER */
.reservations-page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
margin-bottom: 45px;
}
.reservations-eyebrow {
display: block;
color: #f2b632;
font-size: 11px;
font-weight: 900;
letter-spacing: 3px;
margin-bottom: 10px;
}
.reservations-page-header h1 {
color: #ffffff;
font-size: 48px;
font-weight: 900;
margin: 0 0 10px;
letter-spacing: -1px;
}
.reservations-page-header p {
color: #9bbbd3;
margin: 0;
font-size: 15px;
}
/* BOOK BUTTON */
.reservations-book-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 24px;
background: #f2b632;
color: #002b45;
border-radius: 5px;
text-decoration: none;
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
transition: 0.2s ease;
}
.reservations-book-btn:hover {
background: #ffc84c;
color: #002b45;
transform: translateY(-2px);
}
/* RESERVATIONS LIST */
.reservations-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
/* RESERVATION CARD */
.reservation-card {
background: #0d416a;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
transition: 0.2s ease;
}
.reservation-card:hover {
transform: translateY(-3px);
border-color: rgba(242, 182, 50, 0.45);
}
/* CARD TOP */
.reservation-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
padding: 25px 27px;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.reservation-id {
display: block;
color: #8eb2cc;
font-size: 9px;
font-weight: 900;
letter-spacing: 2px;
margin-bottom: 7px;
}
.reservation-card-top h2 {
color: #ffffff;
font-size: 27px;
font-weight: 900;
margin: 0;
}
/* STATUS BADGES */
.reservation-status {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border-radius: 50px;
font-size: 9px;
font-weight: 900;
letter-spacing: 1px;
white-space: nowrap;
}
.status-confirmed {
background: rgba(61, 163, 112, 0.18);
color: #70dfa7;
border: 1px solid rgba(112, 223, 167, 0.35);
}
.status-submitted {
background: rgba(70, 150, 210, 0.18);
color: #8acaff;
border: 1px solid rgba(138, 202, 255, 0.35);
}
.status-rejected {
background: rgba(214, 75, 75, 0.18);
color: #ff9696;
border: 1px solid rgba(255, 150, 150, 0.35);
}
.status-pending {
background: rgba(242, 182, 50, 0.16);
color: #ffd66e;
border: 1px solid rgba(255, 214, 110, 0.35);
}
.status-cancelled {
background: rgba(160, 170, 180, 0.15);
color: #bac7d1;
border: 1px solid rgba(186, 199, 209, 0.30);
}
/* INFORMATION GRID */
.reservation-info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: #082f50;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.reservation-info {
padding: 20px 18px;
border-right: 1px solid rgba(255, 255, 255, 0.09);
}
.reservation-info:last-child {
border-right: none;
}
.reservation-info span {
display: block;
color: #7fa6c3;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.5px;
margin-bottom: 7px;
}
.reservation-info strong {
display: block;
color: #ffffff;
font-size: 13px;
font-weight: 800;
}
/* CUSTOMER + TOTAL */
.reservation-card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
padding: 22px 27px;
}
.reservation-customer span,
.reservation-total span {
display: block;
color: #7fa6c3;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.5px;
margin-bottom: 5px;
}
.reservation-customer strong {
display: block;
color: #ffffff;
font-size: 13px;
}
.reservation-customer small {
display: block;
color: #9bbbd3;
margin-top: 3px;
font-size: 11px;
}
.reservation-total {
text-align: right;
}
.reservation-total strong {
color: #f2b632;
font-size: 22px;
font-weight: 900;
}
/* ACTION BUTTONS */
.reservation-actions {
display: flex;
align-items: center;
gap: 10px;
padding: 0 27px 25px;
}
.reservation-details-btn,
.reservation-payment-btn {
min-height: 42px;
padding: 0 17px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
text-decoration: none;
font-size: 9px;
font-weight: 900;
letter-spacing: 1px;
transition: 0.2s ease;
}
/* DETAILS */
.reservation-details-btn {
border: 1px solid #557b98;
color: #ffffff;
}
.reservation-details-btn:hover {
border-color: #f2b632;
color: #f2b632;
}
/* PAYMENT */
.reservation-payment-btn {
background: #f2b632;
border: 1px solid #f2b632;
color: #002b45;
}
.reservation-payment-btn:hover {
background: #ffc84c;
color: #002b45;
transform: translateY(-1px);
}
/* EMPTY STATE */
.reservations-empty {
padding: 70px 30px;
text-align: center;
background: #0d416a;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
}
.reservations-empty h3 {
color: #ffffff;
font-size: 25px;
margin-bottom: 10px;
}
.reservations-empty p {
color: #9bbbd3;
margin-bottom: 25px;
}
/* =========================================================
MY RESERVATIONS RESPONSIVE
========================================================= */
@media (max-width: 1000px) {
.reservations-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.my-reservations-page {
padding: 45px 18px 80px;
}
.reservations-page-header {
flex-direction: column;
align-items: flex-start;
}
.reservations-page-header h1 {
font-size: 36px;
}
.reservations-book-btn {
width: 100%;
}
.reservation-info-grid {
grid-template-columns: repeat(2, 1fr);
}
.reservation-info {
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.reservation-card-bottom {
align-items: flex-start;
flex-direction: column;
}
.reservation-total {
text-align: left;
}
.reservation-actions {
flex-direction: column;
align-items: stretch;
}
.reservation-details-btn,
.reservation-payment-btn {
width: 100%;
}
}
/* =========================================================
RESERVATION DETAILS PAGE
========================================================= */
.reservation-details-page {
min-height: 100vh;
background: #002b45;
padding: 60px 30px 100px;
color: #ffffff;
}
.reservation-details-container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* BACK BUTTON */
.details-back {
margin-bottom: 30px;
}
.details-back a {
color: #f2b632;
text-decoration: none;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.5px;
}
.details-back a:hover {
color: #ffc84c;
}
/* HEADER */
.details-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
margin-bottom: 35px;
}
.details-eyebrow {
display: block;
color: #f2b632;
font-size: 10px;
font-weight: 900;
letter-spacing: 2.5px;
margin-bottom: 8px;
}
.details-header h1 {
color: #ffffff;
font-size: 46px;
font-weight: 900;
margin: 0 0 8px;
}
.details-header p {
color: #9bbbd3;
margin: 0;
font-size: 14px;
}
/* MAIN CARD */
.details-card {
background: #0d416a;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
/* SECTIONS */
.details-section {
padding: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.details-section h3 {
color: #f2b632;
font-size: 10px;
font-weight: 900;
letter-spacing: 2px;
margin: 0 0 22px;
}
/* INFORMATION GRID */
.details-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
overflow: hidden;
}
.details-item {
background: #083758;
padding: 20px;
min-height: 90px;
}
.details-item span {
display: block;
color: #7fa6c3;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.5px;
margin-bottom: 9px;
}
.details-item strong {
display: block;
color: #ffffff;
font-size: 13px;
font-weight: 800;
word-break: break-word;
}
/* TOTAL */
.details-item.details-total {
background: #123f5c;
}
.details-item.details-total strong {
color: #f2b632;
font-size: 20px;
font-weight: 900;
}
/* PAYMENT ACTION */
.details-action-section {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 25px 30px;
background: rgba(242, 182, 50, 0.08);
}
.details-action-section strong {
color: #ffffff;
font-size: 14px;
}
.details-action-section p {
color: #9bbbd3;
font-size: 12px;
margin: 5px 0 0;
}
.details-payment-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 20px;
background: #f2b632;
color: #002b45;
border-radius: 4px;
text-decoration: none;
font-size: 9px;
font-weight: 900;
letter-spacing: 1px;
white-space: nowrap;
transition: 0.2s ease;
}
.details-payment-btn:hover {
background: #ffc84c;
color: #002b45;
transform: translateY(-1px);
}
/* REJECTED */
.details-rejected {
background: rgba(214, 75, 75, 0.10);
}
/* STATUS MESSAGES */
.details-message {
padding: 24px 30px;
}
.details-message strong {
display: block;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.5px;
margin-bottom: 6px;
}
.details-message p {
margin: 0;
font-size: 12px;
}
.details-message-submitted {
background: rgba(70, 150, 210, 0.13);
color: #a8d8ff;
}
.details-message-confirmed {
background: rgba(61, 163, 112, 0.13);
color: #8ce3b5;
}
/* =========================================================
RESERVATION DETAILS RESPONSIVE
========================================================= */
@media (max-width: 900px) {
.details-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.reservation-details-page {
padding: 40px 18px 80px;
}
.details-header {
flex-direction: column;
align-items: flex-start;
}
.details-header h1 {
font-size: 36px;
}
.details-grid {
grid-template-columns: 1fr;
}
.details-section {
padding: 22px 18px;
}
.details-action-section {
flex-direction: column;
align-items: stretch;
padding: 22px 18px;
}
.details-payment-btn {
width: 100%;
}
.details-message {
padding: 22px 18px;
}
}
/* PAYMENT VERIFICATION EMPTY STATE */
.verification-empty {
margin-top: 45px;
padding: 65px 30px;
background: #124d78;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
text-align: center;
}
.verification-empty-icon {
width: 70px;
height: 70px;
margin: 0 auto 22px;
border-radius: 50%;
background: rgba(45, 211, 145, 0.12);
border: 1px solid rgba(45, 211, 145, 0.45);
display: flex;
align-items: center;
justify-content: center;
color: #55e3a7;
font-size: 32px;
font-weight: 800;
}
.verification-empty h2 {
margin: 0 0 10px;
color: #ffffff;
font-size: 30px;
font-weight: 800;
}
.verification-empty p {
margin: 0;
color: #9cc4df;
font-size: 16px;
}
/* =========================================
PAYMENT VERIFICATION PAGE
========================================= */
.payment-verification-page {
min-height: 100vh;
padding: 40px 20px 70px;
}
.payment-verification-container {
width: 100%;
max-width: 1340px;
margin: 0 auto;
}
.payment-verification-header {
margin-bottom: 45px;
}
.payment-verification-eyebrow {
display: block;
margin-bottom: 14px;
color: #f5b52e;
font-size: 13px;
font-weight: 800;
letter-spacing: 3px;
}
.payment-verification-header h1 {
margin: 0 0 10px;
color: #ffffff;
font-size: 48px;
font-weight: 900;
letter-spacing: 1px;
}
.payment-verification-header p {
margin: 0;
color: #9cc4df;
font-size: 16px;
}
/* =========================================
PAYMENT VERIFICATION PAGE
========================================= */
.payment-verification-page {
min-height: 100vh;
padding: 55px 20px 80px;
}
.payment-verification-container {
width: 100%;
max-width: 1340px;
margin: 0 auto;
}
/* PAGE HEADER */
.payment-verification-header {
margin-bottom: 45px;
}
.payment-verification-eyebrow {
display: block;
margin-bottom: 14px;
color: #f5b52e;
font-size: 13px;
font-weight: 800;
letter-spacing: 3px;
}
.payment-verification-header h1 {
margin: 0 0 10px;
color: #ffffff;
font-size: 48px;
font-weight: 900;
letter-spacing: 1px;
}
.payment-verification-header p {
margin: 0;
color: #9cc4df;
font-size: 16px;
}
/* =========================================
EMPTY STATE
========================================= */
.verification-empty {
padding: 65px 30px;
background: #124d78;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
text-align: center;
}
.verification-empty-icon {
width: 70px;
height: 70px;
margin: 0 auto 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(45, 211, 145, 0.12);
border: 1px solid rgba(45, 211, 145, 0.45);
color: #55e3a7;
font-size: 32px;
font-weight: 800;
}
.verification-empty h2 {
margin: 0 0 10px;
color: #ffffff;
font-size: 30px;
font-weight: 800;
}
.verification-empty p {
margin: 0;
color: #9cc4df;
font-size: 16px;
}
/* =========================================
VERIFICATION LIST
========================================= */
.verification-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 25px;
}
/* =========================================
VERIFICATION CARD
========================================= */
.verification-card {
overflow: hidden;
background: #124d78;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
}
/* CARD HEADER */
.verification-card-header {
padding: 27px 30px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
background: #15527e;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.verification-id {
display: block;
margin-bottom: 9px;
color: #8fc4e5;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
}
.verification-card-header h2 {
margin: 0;
color: #ffffff;
font-size: 29px;
font-weight: 900;
}
/* STATUS */
.verification-status {
padding: 9px 15px;
border-radius: 999px;
background: rgba(245, 181, 46, 0.13);
border: 1px solid rgba(245, 181, 46, 0.45);
color: #ffc13d;
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
white-space: nowrap;
}
/* =========================================
CUSTOMER
========================================= */
.verification-customer {
padding: 24px 30px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.verification-customer-details {
display: flex;
flex-direction: column;
}
.verification-label {
display: block;
margin-bottom: 8px;
color: #8fc4e5;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.verification-customer strong {
display: block;
color: #ffffff;
font-size: 16px;
font-weight: 800;
}
.verification-customer small {
display: block;
margin-top: 4px;
color: #a8cce3;
font-size: 13px;
}
/* AMOUNT */
.verification-amount {
text-align: right;
}
.verification-amount strong {
display: block;
color: #f5b52e;
font-size: 26px;
font-weight: 900;
}
/* =========================================
RESERVATION INFO
========================================= */
.verification-info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: #0d3f66;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.verification-info {
padding: 22px 20px;
border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.verification-info:last-child {
border-right: none;
}
.verification-info span {
display: block;
margin-bottom: 8px;
color: #8fc4e5;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
}
.verification-info strong {
color: #ffffff;
font-size: 14px;
font-weight: 800;
}
/* =========================================
ACTION AREA
========================================= */
.verification-actions {
padding: 25px 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
/* VIEW RECEIPT */
.verification-receipt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 5px;
color: #ffffff;
text-decoration: none;
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
transition: 0.2s ease;
}
.verification-receipt-btn:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
/* NO RECEIPT */
.verification-no-receipt {
color: #9cc4df;
font-size: 13px;
}
/* BUTTON GROUP */
.verification-decision-buttons {
display: flex;
align-items: center;
gap: 10px;
}
.verification-decision-buttons form {
margin: 0;
}
/* APPROVE */
.verification-approve-btn {
padding: 12px 17px;
border: 1px solid #41c98b;
border-radius: 5px;
background: #1b9a62;
color: #ffffff;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.8px;
cursor: pointer;
transition: 0.2s ease;
}
.verification-approve-btn:hover {
filter: brightness(1.08);
}
/* REJECT */
.verification-reject-btn {
padding: 12px 17px;
border: 1px solid rgba(255, 106, 120, 0.65);
border-radius: 5px;
background: rgba(214, 61, 78, 0.18);
color: #ff8490;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.8px;
cursor: pointer;
transition: 0.2s ease;
}
.verification-reject-btn:hover {
background: rgba(214, 61, 78, 0.30);
}
/* =========================================
RESPONSIVE
========================================= */
@media (max-width: 1000px) {
.verification-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.payment-verification-page {
padding: 35px 15px 60px;
}
.payment-verification-header h1 {
font-size: 34px;
}
.verification-card-header,
.verification-customer,
.verification-actions {
padding-left: 20px;
padding-right: 20px;
}
.verification-info-grid {
grid-template-columns: repeat(2, 1fr);
}
.verification-info:nth-child(2) {
border-right: none;
}
.verification-customer {
align-items: flex-start;
flex-direction: column;
}
.verification-amount {
text-align: left;
}
.verification-actions {
align-items: stretch;
flex-direction: column;
}
.verification-decision-buttons {
flex-direction: column;
align-items: stretch;
}
.verification-decision-buttons form {
width: 100%;
}
.verification-approve-btn,
.verification-reject-btn,
.verification-receipt-btn {
width: 100%;
}
}
/* =========================================
COURT CLOSURE
========================================= */
.court-slot.closed {
background: rgba(245, 181, 46, 0.12);
border: 1px solid rgba(245, 181, 46, 0.45);
cursor: not-allowed;
}
.court-slot.closed span {
color: #f5b52e;
font-weight: 900;
}
.court-slot.closed small {
color: #d9b96d;
}
/* =========================================
COURT CLOSURES PAGE
========================================= */
.court-closures-page {
min-height: 100vh;
padding: 70px 5%;
}
.court-closures-container {
max-width: 1400px;
margin: 0 auto;
}
.court-closures-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
margin-bottom: 45px;
}
.court-closures-eyebrow {
display: block;
color: #f5b52e;
font-weight: 800;
letter-spacing: 4px;
margin-bottom: 15px;
}
.court-closures-header h1 {
margin: 0 0 10px;
font-size: 52px;
font-weight: 900;
}
.court-closures-header p {
margin: 0;
opacity: 0.75;
}
.court-closures-add-btn {
padding: 17px 24px;
background: #f5b52e;
color: #062f49;
text-decoration: none;
font-weight: 900;
letter-spacing: 1px;
border-radius: 5px;
}
.court-closure-success {
padding: 18px 22px;
margin-bottom: 25px;
border: 1px solid rgba(62, 220, 150, 0.4);
border-radius: 8px;
background: rgba(62, 220, 150, 0.1);
}
.court-closures-list {
display: grid;
gap: 16px;
}
.court-closure-card {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
gap: 30px;
padding: 28px 32px;
background: #174f77;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
}
.court-closure-card span {
display: block;
margin-bottom: 8px;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
opacity: 0.7;
}
.court-closure-card strong {
font-size: 18px;
}
.court-closure-court strong {
color: #f5b52e;
}
.court-closures-empty {
padding: 70px 30px;
text-align: center;
background: #174f77;
border-radius: 10px;
}
.court-closures-empty h2 {
margin-bottom: 8px;
}
/* =========================================
CUSTOMER COURT CLOSURE NOTICE
========================================= */
.closure-announcement {
margin: 25px 0 30px;
padding: 24px 28px;
background: rgba(245, 181, 46, 0.10);
border: 1px solid rgba(245, 181, 46, 0.55);
border-left: 5px solid #f5b52e;
border-radius: 8px;
}
.closure-announcement-label {
color: #f5b52e;
font-size: 13px;
font-weight: 900;
letter-spacing: 2px;
margin-bottom: 15px;
}
.closure-announcement-item strong {
display: block;
font-size: 22px;
font-weight: 900;
margin-bottom: 4px;
}
.closure-announcement-item span {
color: #f5b52e;
font-weight: 700;
}
.closure-announcement-item p {
margin: 7px 0 0;
}
.closure-announcement-item + .closure-announcement-item {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
/* =========================================
BOOKING ADVISORY
========================================= */
.booking-advisory {
display: flex;
align-items: flex-start;
gap: 18px;
margin: 0 38px 35px;
padding: 22px 25px;
background: rgba(245, 181, 46, 0.08);
border: 1px solid rgba(245, 181, 46, 0.35);
border-left: 4px solid #f5b52e;
border-radius: 8px;
}
.booking-advisory-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: #f5b52e;
color: #062f49;
font-size: 20px;
font-weight: 900;
}
/* =========================================
RESERVATION CANCELLATION NOTICE
========================================= */
.reservation-cancellation-notice {
display: flex;
align-items: center;
gap: 16px;
margin: 20px 28px;
padding: 18px 20px;
background: rgba(220, 70, 80, 0.12);
border: 1px solid rgba(255, 110, 120, 0.35);
border-left: 4px solid #ff6670;
border-radius: 8px;
}
.cancellation-notice-icon {
width: 38px;
height: 38px;
min-width: 38px;
display: flex;
align-items: center;
justify-content: center;
background: #ff6670;
color: #ffffff;
border-radius: 50%;
font-size: 20px;
font-weight: 900;
}
.cancellation-notice-content {
flex: 1;
}
.cancellation-notice-content strong {
display: block;
margin-bottom: 5px;
color: #ff8c94;
font-size: 13px;
font-weight: 900;
letter-spacing: 1.5px;
}
.cancellation-notice-content p {
margin: 0 0 7px;
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
line-height: 1.5;
}
.cancellation-notice-content span {
display: block;
color: #f5b52e;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.5px;
}
/* =========================================================
COURT SETTINGS
========================================================= */
.court-settings-page {
min-height: 100vh;
padding: 70px 24px 100px;
background: #00132f;
}
.court-settings-container {
width: min(1100px, 100%);
margin: 0 auto;
}
.court-settings-header {
margin-bottom: 35px;
}
.court-settings-header > span {
display: block;
margin-bottom: 10px;
color: #c99a45;
font-size: 12px;
font-weight: 900;
letter-spacing: 3px;
}
.court-settings-header h1 {
margin: 0;
color: #f7f7f5;
font-size: clamp(38px, 5vw, 60px);
font-weight: 900;
line-height: 1;
letter-spacing: -1px;
}
.court-settings-header p {
margin: 15px 0 0;
color: rgba(247, 247, 245, 0.72);
font-size: 16px;
}
.court-settings-success {
margin-bottom: 24px;
padding: 17px 20px;
border: 1px solid rgba(64, 180, 130, 0.45);
border-radius: 8px;
background: rgba(64, 180, 130, 0.10);
color: #8ce0b9;
font-weight: 700;
}
.court-settings-card {
overflow: hidden;
border: 1px solid rgba(216, 217, 220, 0.15);
border-radius: 12px;
background: #0b2948;
}
.court-settings-title {
padding: 30px 35px;
border-bottom: 1px solid rgba(216, 217, 220, 0.12);
}
.court-settings-title > span {
display: block;
margin-bottom: 8px;
color: #c99a45;
font-size: 11px;
font-weight: 900;
letter-spacing: 2px;
}
.court-settings-title h2 {
margin: 0;
color: #f7f7f5;
font-size: 28px;
font-weight: 800;
}
.court-settings-title p {
margin: 8px 0 0;
color: rgba(247, 247, 245, 0.65);
}
.court-setting-24hours {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 30px 35px;
border-bottom: 1px solid rgba(216, 217, 220, 0.12);
}
.court-setting-24hours strong {
display: block;
color: #f7f7f5;
font-size: 15px;
font-weight: 900;
letter-spacing: 1px;
}
.court-setting-24hours p {
margin: 6px 0 0;
color: rgba(247, 247, 245, 0.65);
}
/* TOGGLE */
.court-setting-switch {
position: relative;
display: inline-block;
flex-shrink: 0;
width: 58px;
height: 32px;
}
.court-setting-switch input {
width: 0;
height: 0;
opacity: 0;
}
.court-setting-slider {
position: absolute;
inset: 0;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 30px;
background: #183754;
transition: 0.25s ease;
}
.court-setting-slider::before {
position: absolute;
bottom: 4px;
left: 4px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #f7f7f5;
content: "";
transition: 0.25s ease;
}
.court-setting-switch input:checked + .court-setting-slider {
border-color: #c99a45;
background: #c99a45;
}
.court-setting-switch input:checked + .court-setting-slider::before {
transform: translateX(26px);
}
/* CUSTOM HOURS */
.court-custom-hours {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
padding: 30px 35px;
border-bottom: 1px solid rgba(216, 217, 220, 0.12);
}
.court-time-field {
display: flex;
flex-direction: column;
gap: 9px;
}
.court-time-field label {
color: #c99a45;
font-size: 11px;
font-weight: 900;
letter-spacing: 1.5px;
}
.court-time-field input {
width: 100%;
padding: 14px 16px;
border: 1px solid rgba(216, 217, 220, 0.22);
border-radius: 6px;
outline: none;
background: #001b38;
color: #f7f7f5;
font-size: 16px;
}
.court-time-field input:focus {
border-color: #c99a45;
}
/* SAVE */
.court-settings-actions {
display: flex;
justify-content: flex-end;
padding: 25px 35px;
}
.court-settings-save {
padding: 15px 28px;
border: 1px solid #c99a45;
border-radius: 5px;
background: #c99a45;
color: #00132f;
cursor: pointer;
font-size: 13px;
font-weight: 900;
letter-spacing: 1px;
transition: 0.2s ease;
}
.court-settings-save:hover {
background: #ddb86b;
border-color: #ddb86b;
transform: translateY(-1px);
}
@media (max-width: 700px) {
.court-settings-page {
padding: 45px 18px 70px;
}
.court-settings-title,
.court-setting-24hours,
.court-custom-hours,
.court-settings-actions {
padding-left: 22px;
padding-right: 22px;
}
.court-custom-hours {
grid-template-columns: 1fr;
}
.court-settings-save {
width: 100%;
}
}
/* =========================================================
DATE & TIME PICKER VISIBILITY
========================================================= */
/* Make native calendar / clock icons visible on dark inputs */
input[type="date"],
input[type="time"] {
color-scheme: light;
}
/* Chrome / Edge calendar and clock picker icon */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
cursor: pointer;
filter: invert(1);
opacity: 0.85;
width: 20px;
height: 20px;
transition: opacity 0.2s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
/* COURT SETTINGS TIME PICKER */
.court-time-field input[type="time"] {
cursor: pointer;
}
.court-time-field input[type="time"]:hover {
border-color: rgba(201, 154, 69, 0.65);
background: #062442;
}
.court-time-field input[type="time"]:focus {
border-color: #c99a45;
box-shadow: 0 0 0 3px rgba(201, 154, 69, 0.12);
}
/* =========================
NAVBAR LOGO
========================= */
.arena-brand {
display: flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
}
.arena-logo {
width: 170px;
height: 75px;
object-fit: contain;
display: block;
}
.arena-navbar {
min-height: 90px;
}
.arena-navbar .container {
display: flex;
align-items: center;
}
/* =========================================================
ARENA MAIN NAVBAR
========================================================= */
.site-header {
position: relative;
z-index: 1000;
background: #073653;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.arena-navbar {
min-height: 96px;
padding: 0;
background: #073653;
}
/* Override the global .container reset for navbar only */
.arena-navbar > .container {
width: 100% !important;
max-width: 1500px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 38px !important;
padding-right: 38px !important;
display: flex;
align-items: center;
}
/* BRAND / LOGO */
.arena-brand {
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
}
.arena-logo {
display: block;
width: 150px;
height: 82px;
object-fit: contain;
}
/* COLLAPSE AREA */
#arenaNavigation {
flex-grow: 1;
display: flex;
justify-content: flex-end;
}
/* NAVIGATION LIST */
.arena-navbar .navbar-nav {
display: flex;
align-items: center;
gap: 24px;
margin-left: auto;
flex-wrap: nowrap;
}
/* NORMAL LINKS */
.arena-nav-link {
position: relative;
display: inline-flex;
align-items: center;
padding: 12px 0;
color: #ffffff;
text-decoration: none;
font-size: 12px;
font-weight: 800;
letter-spacing: 1.2px;
white-space: nowrap;
transition: color 0.2s ease;
}
.arena-nav-link:hover {
color: #e5ad37;
}
/* GOLD HOVER LINE */
.arena-nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: 5px;
width: 0;
height: 2px;
background: #e5ad37;
transition: width 0.2s ease;
}
.arena-nav-link:hover::after {
width: 100%;
}
@media (min-width: 992px) {
.arena-navbar .nav-item {
white-space: nowrap;
}
.arena-book-btn {
white-space: nowrap;
}
}
/* BOOK A COURT CTA */
.arena-book-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 22px;
background: #e5ad37;
border: 1px solid #e5ad37;
border-radius: 4px;
color: #001f38;
text-decoration: none;
font-size: 11px;
font-weight: 900;
letter-spacing: 1.2px;
white-space: nowrap;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.arena-book-btn:hover {
background: #f3bd4a;
border-color: #f3bd4a;
color: #001f38;
transform: translateY(-1px);
}
/* MOBILE TOGGLER */
.arena-toggler {
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: none !important;
}
.arena-toggler .navbar-toggler-icon {
filter: invert(1);
}
/* =========================================================
NAVBAR RESPONSIVE
========================================================= */
@media (max-width: 1199px) {
.arena-navbar .navbar-nav {
gap: 20px;
}
.arena-nav-link {
font-size: 10px;
letter-spacing: 0.8px;
}
.arena-book-btn {
padding: 0 16px;
font-size: 10px;
}
.arena-logo {
width: 135px;
}
}
@media (max-width: 991.98px) {
.arena-navbar {
min-height: 82px;
}
.arena-navbar > .container {
padding-left: 22px !important;
padding-right: 22px !important;
}
.arena-logo {
width: 125px;
height: 72px;
}
#arenaNavigation {
padding: 15px 0 25px;
}
.arena-navbar .navbar-nav {
align-items: stretch !important;
gap: 4px;
}
.arena-nav-link {
width: 100%;
padding: 13px 0;
font-size: 11px;
}
.arena-nav-link::after {
display: none;
}
.arena-book-btn {
width: 100%;
margin-top: 10px;
min-height: 48px;
}
.arena-navbar .nav-item.ms-lg-3 {
margin-left: 0 !important;
}
/* Fix mobile collapsed menu alignment: override ms-auto so menu items span from left
instead of being pushed to the right column when the container is constrained. */
.arena-navbar .navbar-collapse .navbar-nav {
margin-left: 0 !important;
justify-content: flex-start !important;
width: 100%;
}
/* Ensure collapsed navigation background matches header and does not fill the
entire page height unexpectedly. */
.arena-navbar .navbar-collapse {
background: transparent;
padding-bottom: 0;
max-height: none;
/* By default allow Bootstrap JS to control visibility via .collapse and .show */
}
/* Ensure collapsed menu is hidden when not active and visible when toggled */
.arena-navbar .navbar-collapse.collapse {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
.arena-navbar .navbar-collapse.collapse.show {
display: block !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
position: relative;
}
/* Make the collapsed menu visually overlay the page without shifting layout */
.arena-navbar .navbar-collapse {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 1050;
/* Match header background so collapsed menu appears unified with the header */
background: #073653; /* same as .site-header */
border-top: 1px solid rgba(255,255,255,0.03);
padding: 18px 16px 28px;
}
}
@media (max-width: 575px) {
.arena-navbar > .container {
padding-left: 16px !important;
padding-right: 16px !important;
}
.arena-logo {
width: 115px;
height: 68px;
}
}
/* =========================================================
COMPACT COURT AVAILABILITY
========================================================= */
/* Less empty space above the page */
.court-availability-section {
padding-top: 55px;
padding-bottom: 70px;
}
/* Slightly tighter heading */
.availability-heading {
margin-bottom: 30px;
}
/* More compact schedule header */
.availability-card-header {
padding: 22px 35px;
}
/* Reduce space around the schedule */
.availability-table-wrapper {
height: 720px;
overflow-y: auto;
overflow-x: auto;
padding: 22px 35px 25px;
scrollbar-width: thin;
}
/* Smaller court heading row */
.availability-empty,
.court-column-heading {
position: sticky;
top: 0;
z-index: 20;
background: #173f67;
min-height: 58px;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,.08);
font-size: 17px;
font-weight: 700;
letter-spacing: .8px;
color: white;
}
/* Smaller hourly rows */
.court-time,
.court-slot {
min-height: 64px;
border: none;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 12px;
transition: .25s ease;
box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
/* Compact time labels */
.court-time strong {
font-size: 13px;
}
.court-time span {
font-size: 8px;
}
/* Slightly smaller gaps between slots */
.availability-grid {
gap: 6px;
}
/* Compact legend */
.availability-legend {
min-height: 68px;
padding: 14px 35px;
}
/* =========================================================
COURT AVAILABILITY - EXTRA COMPACT
========================================================= */
.court-slot,
.court-time {
min-height: 46px;
}
.court-slot {
padding: 4px 8px;
}
.availability-grid {
gap: 4px 6px;
}
.availability-empty,
.court-column-heading {
min-height: 36px;
}
.availability-table-wrapper {
padding-top: 16px;
padding-bottom: 20px;
}
.availability-card-header {
padding-top: 18px;
padding-bottom: 18px;
}
.court-slot span {
font-size: 16px;
font-weight: 800;
letter-spacing: .7px;
}
.court-slot small {
margin-top: 4px;
font-size: 11px;
opacity: .9;
letter-spacing: .5px;
}
.court-time strong {
font-size: 12px;
}
.court-time span {
font-size: 7px;
}
/* =========================================================
COURT MANAGEMENT
========================================================= */
.court-management-page {
min-height: 100vh;
padding: 70px 30px 100px;
background: #002b45;
}
.court-management-container {
max-width: 1250px;
margin: 0 auto;
}
.court-management-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 30px;
margin-bottom: 45px;
}
.court-management-eyebrow {
display: block;
color: #f2b632;
font-size: 11px;
font-weight: 900;
letter-spacing: 3px;
margin-bottom: 10px;
}
.court-management-header h1 {
color: #fff;
font-size: 48px;
font-weight: 900;
margin: 0 0 10px;
}
.court-management-header p {
color: #9bbbd3;
margin: 0;
}
.court-management-add {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 24px;
background: #f2b632;
color: #002b45;
border-radius: 6px;
text-decoration: none;
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
transition: .25s;
}
.court-management-add:hover {
background: #ffc84c;
color: #002b45;
transform: translateY(-2px);
}
.court-management-list {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
gap: 24px;
}
.court-management-card {
background: linear-gradient(180deg,#124b73,#0d3f63);
border: 1px solid rgba(255,255,255,.12);
border-radius: 16px;
padding: 18px;
transition: .25s ease;
box-shadow: 0 12px 30px rgba(0,0,0,.18);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 175px;
}
.court-management-card:hover {
transform: translateY(-6px);
border-color: rgba(242,182,50,.45);
box-shadow: 0 22px 45px rgba(0,0,0,.28);
}
.court-management-title span {
display: block;
color: #f2b632;
font-size: 10px;
font-weight: 900;
letter-spacing: 2px;
margin-bottom: 8px;
}
.court-management-title h2 {
margin: 0;
color: #fff;
font-size: 20px;
font-weight: 700;
letter-spacing: .1px;
text-transform: uppercase;
}
.court-status-active,
.court-status-inactive {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
font-size: 10px;
font-weight: 900;
letter-spacing: 1px;
}
.court-status-active {
background: rgba(61,163,112,.18);
color: #74e0a8;
border: 1px solid rgba(116,224,168,.35);
}
.court-status-inactive {
background: rgba(180,180,180,.15);
color: #d4d4d4;
border: 1px solid rgba(212,212,212,.25);
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
.court-toggle-btn {
width: 100%;
height: 42px;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: .4px;
}
.court-toggle-btn:hover {
background: #12486d;
transform: translateY(-2px);
}
.court-activate-btn {
background: #2d9b63;
}
.court-activate-btn:hover {
background: #39b876;
}
.court-edit-btn {
display: block;
text-align: center;
margin-bottom: 10px;
padding: 12px;
border-radius: 10px;
background: #ffffff12;
color: #fff;
text-decoration: none;
font-weight: 700;
transition: .25s;
}
.court-edit-btn:hover {
background: #ffffff22;
color: #fff;
}
.court-management-card {
background: linear-gradient(180deg,#124b73,#0d3f63);
border: 1px solid rgba(255,255,255,.12);
border-radius: 16px;
padding: 22px;
transition: .25s ease;
box-shadow: 0 12px 30px rgba(0,0,0,.18);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 200px;
}
.court-management-card:hover {
transform: translateY(-6px);
border-color: rgba(242,182,50,.45);
box-shadow: 0 22px 45px rgba(0,0,0,.28);
}
.court-management-title span {
display: block;
color: #f2b632;
font-size: 10px;
font-weight: 900;
letter-spacing: 2px;
margin-bottom: 8px;
}
.court-management-title h2 {
margin: 0;
color: #fff;
font-size: 22px;
font-weight: 800;
letter-spacing: .5px;
text-transform: uppercase;
}
.court-status-active,
.court-status-inactive {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
font-size: 10px;
font-weight: 900;
letter-spacing: 1px;
}
.court-status-active {
background: rgba(61,163,112,.18);
color: #74e0a8;
border: 1px solid rgba(116,224,168,.35);
}
.court-status-inactive {
background: rgba(180,180,180,.15);
color: #d4d4d4;
border: 1px solid rgba(212,212,212,.25);
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
.court-toggle-btn {
width: 100%;
height: 42px;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: .4px;
}
.court-toggle-btn:hover {
background: #12486d;
transform: translateY(-2px);
}
.court-activate-btn {
background: #2d9b63;
}
.court-activate-btn:hover {
background: #39b876;
}
.court-edit-btn {
display: block;
text-align: center;
margin-bottom: 10px;
padding: 12px;
border-radius: 10px;
background: #ffffff12;
color: #fff;
text-decoration: none;
font-weight: 700;
transition: .25s;
}
.court-edit-btn:hover {
background: #ffffff22;
color: #fff;
}
/* =========================================
AVAILABILITY LEGEND - HORIZONTAL
========================================= */
.availability-legend {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 50px !important;
flex-wrap: nowrap !important;
}
.availability-legend > div {
display: grid !important;
grid-template-columns: 12px auto !important;
column-gap: 9px !important;
align-items: center !important;
flex: 0 0 auto !important;
}
/* =========================================================
PUBLIC NAVIGATION — ACTIVE PAGE
========================================================= */
.arena-nav-link {
position: relative;
}
.arena-nav-link.active {
color: #ffffff !important;
}
.arena-nav-link.active::after {
content: "";
position: absolute;
left: 50%;
bottom: -14px;
width: 56px;
height: 3px;
background: #f5b51b;
border-radius: 999px;
transform: translateX(-50%);
}
.arena-nav-link:not(.arena-user-name):hover {
color: #f5b51b !important;
}
/* User name is informational, not clickable */
.arena-user-name {
cursor: default;
}
/* MOBILE NAV */
@media (max-width: 991.98px) {
.arena-nav-link.active::after {
left: 0;
bottom: 2px;
width: 30px;
transform: none;
}
}
/* =========================================
FEATURED VIDEO MEDIA
========================================= */
.apg-update-media {
height: 320px;
overflow: hidden;
border-radius: 18px;
}
.apg-update-media video,
.apg-media-cover {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
background: #000;
}
}
/* =========================================================
FINAL MOBILE RESPONSIVE SYSTEM
DESKTOP SAFE
========================================================= */
@media(max-width:600px) {
html {
font-size: 14px;
}
body {
overflow-x: hidden;
}
/* GLOBAL TYPOGRAPHY */
h1 {
font-size: 28px !important;
line-height: 1.15 !important;
letter-spacing: -0.3px !important;
}
h2 {
font-size: 21px !important;
}
h3 {
font-size: 16px !important;
}
p {
font-size: 13px !important;
line-height: 1.45 !important;
}
/* NAVBAR */
.arena-navbar {
min-height: 70px !important;
}
.arena-navbar > .container {
padding-left: 16px !important;
padding-right: 16px !important;
}
.arena-logo {
width: 105px !important;
height: 60px !important;
}
/* HOME */
.arena-hero {
padding: 35px 18px 45px !important;
gap: 25px !important;
}
.arena-hero h1 {
font-size: 42px !important;
line-height: .95 !important;
}
.arena-tagline {
font-size: 15px !important;
}
/* AUTH LOGIN REGISTER */
.login-container,
.register-container,
.auth-container {
width: 100% !important;
padding: 20px 16px !important;
}
.login-card,
.register-card,
.auth-card {
width: 100% !important;
padding: 24px 18px !important;
border-radius: 14px !important;
}
.login-card h1,
.register-card h1,
.auth-card h1 {
font-size: 26px !important;
}
.login-card p,
.register-card p {
font-size: 13px !important;
}
/* HIDE DESKTOP INTRO PANEL */
.login-left,
.register-left,
.auth-left {
display: none !important;
}
/* INPUTS */
input,
select,
textarea,
.form-control {
min-height: 44px !important;
font-size: 14px !important;
}
label {
font-size: 12px !important;
}
/* BUTTONS */
button,
.btn,
.arena-btn,
.booking-submit {
min-height: 46px !important;
font-size: 12px !important;
}
/* CARDS */
.premium-card,
.reservation-card,
.details-card,
.availability-card,
.booking-card {
border-radius: 12px !important;
}
.premium-card-body,
.details-section,
.booking-card {
padding: 16px !important;
}
/* BOOKING */
.booking-page {
padding: 35px 16px 60px !important;
}
.booking-header h1 {
font-size: 28px !important;
}
/* RESERVATIONS */
.my-reservations-page,
.reservation-details-page {
padding: 35px 16px 60px !important;
}
.reservations-page-header h1,
.details-header h1 {
font-size: 28px !important;
}
/* AVAILABILITY */
.court-availability-section {
padding: 40px 16px 60px !important;
}
.availability-heading h2 {
font-size: 24px !important;
}
}
/* =========================================================
AUTH MOBILE - FINAL
LOGIN + REGISTER
========================================================= */
@media (max-width: 650px) {
/* =====================================================
LOGIN
===================================================== */
.login-card {
display: block !important;
min-height: auto !important;
margin-top: 10px !important;
}
.login-intro {
display: none !important;
}
.login-form-panel {
padding: 28px 18px 24px !important;
}
.login-form-header {
margin-bottom: 25px !important;
gap: 15px !important;
}
.login-lock {
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
}
.login-lock svg {
width: 22px !important;
height: 22px !important;
}
.login-form-header h2 {
font-size: 24px !important;
line-height: 1.2 !important;
}
.login-form-header p {
font-size: 12px !important;
}
.login-field {
margin-bottom: 16px !important;
}
.login-field label {
font-size: 12px !important;
}
.login-input {
height: 48px !important;
min-height: 48px !important;
font-size: 13px !important;
}
.login-options {
margin-bottom: 22px !important;
}
.login-remember,
.login-forgot {
font-size: 12px !important;
}
.login-submit,
.login-create {
height: 48px !important;
min-height: 48px !important;
font-size: 12px !important;
}
.login-security {
margin-top: 18px !important;
font-size: 11px !important;
}
/* =====================================================
REGISTER
MOBILE = FORM ONLY
===================================================== */
.arena-register-page {
min-height: auto !important;
padding: 14px 12px 28px !important;
align-items: flex-start !important;
}
.arena-register-shell {
width: 100% !important;
max-width: 430px !important;
margin: 0 auto !important;
grid-template-columns: 1fr !important;
border-radius: 15px !important;
}
/* HIDE JOIN THE ARENA */
.register-brand-panel {
display: none !important;
}
/* REGISTER FORM */
.register-form-panel {
width: 100% !important;
min-height: 0 !important;
padding: 22px 20px 24px !important;
justify-content: flex-start !important;
}
.register-form-heading {
gap: 12px !important;
margin-bottom: 18px !important;
}
.register-heading-icon {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
}
.register-heading-icon svg {
width: 21px !important;
height: 21px !important;
}
.register-form-title {
margin: 0 0 3px !important;
font-size: 22px !important;
line-height: 1.1 !important;
}
.register-form-subtitle {
margin: 0 !important;
font-size: 11px !important;
line-height: 1.35 !important;
}
/* FORM FIELDS */
.register-form-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.register-field {
width: 100% !important;
min-width: 0 !important;
}
.register-label {
margin-bottom: 5px !important;
font-size: 10px !important;
line-height: 1.2 !important;
}
.register-input-wrap {
width: 100% !important;
}
.register-input {
width: 100% !important;
height: 46px !important;
min-height: 46px !important;
font-size: 12px !important;
}
/* REMOVE EMPTY VALIDATION SPACE */
.register-validation {
min-height: 0 !important;
margin-top: 3px !important;
font-size: 9px !important;
line-height: 1.2 !important;
}
.register-validation:empty {
display: none !important;
margin: 0 !important;
}
.register-validation-summary {
margin: 0 0 10px !important;
font-size: 10px !important;
}
.register-validation-summary:empty {
display: none !important;
margin: 0 !important;
}
/* BUTTONS */
.register-actions {
margin-top: 14px !important;
}
.register-submit {
height: 46px !important;
min-height: 46px !important;
font-size: 11px !important;
}
.register-login-wrapper {
margin-top: 16px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
font-size: 11px;
}
.register-login-wrapper span {
color: #b9cad7 !important;
font-weight: 600;
}
.register-login-link {
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
color: #f5b51b !important;
font-size: 12px !important;
font-weight: 900 !important;
letter-spacing: 1px;
}
.register-login-link:hover {
color: #ffd56a !important;
}
/* SECURITY */
.register-secure {
margin-top: 13px !important;
gap: 6px !important;
font-size: 10px !important;
}
.register-secure svg {
width: 14px !important;
height: 14px !important;
}
}
/* =========================================================
COURT AVAILABILITY - FINAL MOBILE
DESKTOP SAFE
========================================================= */
@media (max-width:650px) {
/* SECTION */
.apg-live-section {
padding: 20px 0 35px !important;
}
.apg-live-heading {
margin-bottom: 15px !important;
}
.apg-live-heading h2 {
font-size: 26px !important;
line-height: 1.15 !important;
}
.apg-live-heading > p {
font-size: 12px !important;
line-height: 1.5 !important;
}
/* SCHEDULE CARD */
.apg-schedule-card {
border-radius: 12px !important;
overflow: hidden !important;
}
.apg-schedule-header {
padding: 18px 15px !important;
gap: 15px !important;
align-items: flex-start !important;
flex-direction: column !important;
}
.apg-schedule-header h3 {
font-size: 20px !important;
line-height: 1.15 !important;
}
.apg-schedule-location {
font-size: 8px !important;
}
/* DATE */
.apg-date-picker,
.apg-date-picker input {
width: 100% !important;
}
.apg-date-picker label {
font-size: 8px !important;
}
.apg-date-picker input {
min-width: 0 !important;
min-height: 42px !important;
font-size: 12px !important;
}
/* HORIZONTAL COURT SCHEDULE */
.apg-schedule-scroll {
width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 0 8px !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.apg-schedule-grid {
width: max-content !important;
min-width: 790px !important;
grid-template-columns: 70px repeat(var(--court-count), 120px) !important;
}
/* COURT HEADERS */
.apg-grid-corner,
.apg-court-heading {
min-height: 48px !important;
}
.apg-court-heading strong {
font-size: 9px !important;
}
/* TIME */
.apg-time-cell {
min-height: 64px !important;
}
.apg-time-cell strong {
font-size: 11px !important;
}
.apg-time-cell span {
font-size: 7px !important;
}
/* SLOTS */
.apg-slot {
min-height: 64px !important;
padding: 5px !important;
gap: 3px !important;
}
.apg-slot span {
font-size: 9px !important;
line-height: 1.1 !important;
}
.apg-slot small {
max-width: 105px !important;
font-size: 7px !important;
line-height: 1.2 !important;
}
.apg-openplay-button {
min-height: 64px !important;
}
/* LEGEND */
.apg-schedule-legend {
padding: 12px !important;
gap: 12px !important;
}
.apg-legend-copy strong {
font-size: 8px !important;
}
.apg-legend-copy small {
font-size: 7px !important;
}
/* ADVISORY */
.apg-booking-advisory {
width: calc(100% - 20px) !important;
margin: 18px auto !important;
padding: 14px !important;
gap: 10px !important;
}
.apg-booking-advisory-icon {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
}
.apg-booking-advisory strong {
font-size: 11px !important;
}
.apg-booking-advisory p {
font-size: 10px !important;
line-height: 1.45 !important;
}
}
/* =========================================
REGISTER LOGIN LINK - DESKTOP POLISH
========================================= */
.register-login-wrapper {
margin-top: 22px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 8px !important;
}
/* LOGIN REGISTER LINK FINAL */
.login-register-wrapper {
margin-top: 18px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
text-align: center !important;
}
.login-register-wrapper span {
color: #b9cde0 !important;
font-size: 11px !important;
font-weight: 600 !important;
}
.login-create {
display: block !important;
width: auto !important;
height: auto !important;
margin-top: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
color: #fdbb30 !important;
font-size: 12px !important;
font-weight: 900 !important;
letter-spacing: 1px;
}
.login-create:hover {
color: #ffd36b !important;
background: transparent !important;
}