/* ==========================================================================
   Swing Mana — Premium Booking Calendar
   Inspired by AlbaPlay + Skedda
   ========================================================================== */

:root {
	--smcal-primary:        #0f2618;   /* header / dark bg */
	--smcal-primary-mid:    #1a3d2a;   /* slightly lighter header variant */
	--smcal-accent:         #3dba6d;   /* available cells, CTA buttons */
	--smcal-accent-dark:    #2a9d57;   /* hover on accent */
	--smcal-accent-light:   #d1fae5;   /* selected range light fill */
	--smcal-selected:       #22c55e;   /* primary selected cell */
	--smcal-booked-bg:      #f1f5f9;   /* booked cell background */
	--smcal-booked-text:    #94a3b8;   /* booked cell text */
	--smcal-closed-bg:      #f8fafc;   /* outside hours */
	--smcal-past-bg:        #f4f4f5;   /* past cells */
	--smcal-past-text:      #d1d5db;
	--smcal-border:         #e2e8f0;   /* grid lines */
	--smcal-bg:             #ffffff;
	--smcal-time-bg:        #f8fafc;   /* time column background */
	--smcal-time-text:      #64748b;
	--smcal-row-h:          44px;      /* height of each 30-min row */
	--smcal-time-w:         72px;      /* width of time column */
	--smcal-header-h:       64px;
	--smcal-strip-h:        72px;
	--smcal-bay-hdr-h:      80px;
	--smcal-panel-w:        340px;
	--smcal-radius:         8px;
	--smcal-shadow:         0 4px 24px rgba(0,0,0,.12);
}

/* ── Outer wrapper ─────────────────────────────────────────────────────────── */

.swingmana-calendar-wrap {
	font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size:    14px;
	color:        #1d2327;
	background:   var(--smcal-bg);
	border:       1px solid var(--smcal-border);
	border-radius: 0;     /* flat top — rounded header corners look odd */
	overflow:     clip;   /* clips panel bleed-out without blocking sticky positioning */
	position:     relative;
	user-select:  none;
}

/* ── Header bar ────────────────────────────────────────────────────────────── */

.smcal-header {
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	background:       var(--smcal-primary);
	color:            #fff;
	height:           var(--smcal-header-h);
	padding:          0 20px;
	gap:              16px;
}

.smcal-header-left {
	display:     flex;
	align-items: center;
	gap:         10px;
	min-width:   160px;
}

.smcal-header-logo {
	font-size: 22px;
	line-height: 1;
}

.smcal-header-title {
	font-size:   16px;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}

.smcal-header-nav {
	display:     flex;
	align-items: center;
	gap:         12px;
}

.smcal-nav-btn {
	background:    rgba(255,255,255,.12);
	border:        1px solid rgba(255,255,255,.2);
	color:         #fff;
	width:         36px;
	height:        36px;
	border-radius: 50%;
	font-size:     16px;
	cursor:        pointer;
	display:       flex;
	align-items:   center;
	justify-content: center;
	transition:    background .15s;
	padding:       0;
}

.smcal-nav-btn:hover {
	background: rgba(255,255,255,.24);
}

.smcal-header-date {
	font-size:   15px;
	font-weight: 600;
	min-width:   180px;
	text-align:  center;
	color:       rgba(255,255,255,.9);
}

.smcal-header-right {
	display:     flex;
	align-items: center;
	min-width:   160px;
	justify-content: flex-end;
}

.smcal-today-btn {
	background:    var(--smcal-accent);
	border:        none;
	color:         #fff;
	padding:       8px 18px;
	border-radius: 20px;
	font-size:     13px;
	font-weight:   600;
	cursor:        pointer;
	transition:    background .15s;
	white-space:   nowrap;
}

.smcal-today-btn:hover {
	background: var(--smcal-accent-dark);
}

/* ── Date strip ────────────────────────────────────────────────────────────── */

.smcal-date-strip {
	display:       flex;
	align-items:   center;
	background:    var(--smcal-primary-mid);
	border-bottom: 1px solid rgba(255,255,255,.08);
	padding:       8px 12px;
	gap:           0;
}

/* Week-jump flanking buttons */
.smcal-strip-nav {
	background:    rgba(255,255,255,.1);
	border:        1px solid rgba(255,255,255,.18);
	color:         rgba(255,255,255,.8);
	width:         32px;
	height:        32px;
	border-radius: 50%;
	font-size:     18px;
	cursor:        pointer;
	display:       flex;
	align-items:   center;
	justify-content: center;
	flex-shrink:   0;
	transition:    background .15s, color .15s;
	padding:       0;
	line-height:   1;
}

.smcal-strip-nav:hover:not(:disabled) {
	background: rgba(255,255,255,.2);
	color:      #fff;
}

.smcal-strip-nav:disabled {
	opacity: .25;
	cursor:  not-allowed;
}

/* Pills wrapper — fills remaining space, centred */
.smcal-strip-pills {
	flex:            1;
	display:         flex;
	justify-content: center;
	gap:             4px;
	overflow-x:      auto;
	scrollbar-width: none;
}

.smcal-strip-pills::-webkit-scrollbar { display: none; }

.smcal-day-pill {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	padding:         8px 14px;
	border-radius:   var(--smcal-radius);
	cursor:          pointer;
	transition:      background .15s, color .15s;
	color:           rgba(255,255,255,.7);
	min-width:       52px;
	flex-shrink:     0;
}

.smcal-day-pill:hover {
	background: rgba(255,255,255,.1);
	color: rgba(255,255,255,.95);
}

.smcal-day-pill--active {
	background: var(--smcal-accent) !important;
	color: #fff !important;
}

.smcal-day-pill--today .smcal-day-num::after {
	content:   '';
	display:   block;
	width:     4px;
	height:    4px;
	background: var(--smcal-accent);
	border-radius: 50%;
	margin:    2px auto 0;
}

.smcal-day-pill--today.smcal-day-pill--active .smcal-day-num::after {
	background: rgba(255,255,255,.7);
}

.smcal-day-pill--disabled {
	opacity: .35;
	cursor: not-allowed;
}

.smcal-day-name  { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.smcal-day-num   { font-size: 22px; font-weight: 700; line-height: 1.1; }
.smcal-day-month { font-size: 11px; opacity: .75; }

/* ── Grid wrap ─────────────────────────────────────────────────────────────── */

.smcal-grid-wrap {
	position:  relative;
	/* no overflow, no max-height — page scroll handles everything */
}

/* ── Grid ──────────────────────────────────────────────────────────────────── */

.smcal-grid {
	display:   grid;
	position:  relative;
	/* no overflow, no height limit — grows to full content height */
}

/* ── Corner cell ───────────────────────────────────────────────────────────── */

.smcal-corner-cell {
	position:   sticky;
	top:        0;
	left:       0;
	z-index:    30;
	background: var(--smcal-time-bg);
	border-right:  1px solid var(--smcal-border);
	border-bottom: 2px solid var(--smcal-border);
	height:     var(--smcal-bay-hdr-h);
}

/* ── Bay header cells ──────────────────────────────────────────────────────── */

.smcal-bay-header {
	position:      sticky;
	top:           0;
	z-index:       20;
	background:    var(--smcal-bg);
	border-bottom: 2px solid var(--smcal-border);
	border-right:  1px solid var(--smcal-border);
	height:        var(--smcal-bay-hdr-h);
	padding:       0 10px;
	display:       flex;
	align-items:   center;
	border-top:    3px solid transparent; /* colour override per-bay */
}

.smcal-bay-hdr-inner {
	display:     flex;
	align-items: center;
	gap:         10px;
	overflow:    hidden;
}

.smcal-bay-icon {
	width:         40px;
	height:        40px;
	border-radius: 8px;
	object-fit:    cover;
	flex-shrink:   0;
}

.smcal-bay-emoji {
	font-size:     28px;
	line-height:   1;
	flex-shrink:   0;
}

.smcal-bay-hdr-info { overflow: hidden; }

.smcal-bay-hdr-name {
	font-size:     14px;
	font-weight:   700;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.smcal-bay-hdr-meta {
	font-size:  11px;
	color:      #64748b;
	text-transform: capitalize;
	white-space: nowrap;
}

.smcal-bay-hdr-rate {
	font-size:   12px;
	font-weight: 600;
	color:       var(--smcal-accent-dark);
	margin-top:  2px;
}

/* ── Time cells ────────────────────────────────────────────────────────────── */

.smcal-time-cell {
	position:    sticky;
	left:        0;
	z-index:     10;
	background:  var(--smcal-time-bg);
	border-right: 1px solid var(--smcal-border);
	border-bottom: 1px solid var(--smcal-border);
	height:      var(--smcal-row-h);
	display:     flex;
	align-items: flex-start;
	padding-top: 4px;
	padding-right: 8px;
	justify-content: flex-end;
	color:       var(--smcal-time-text);
	font-size:   12px;
	font-weight: 500;
}

.smcal-time-cell--hour {
	font-weight: 700;
	color:       #475569;
	border-bottom: 1px solid #d1d5db;
}

/* ── Grid cells ────────────────────────────────────────────────────────────── */

.smcal-cell {
	height:        var(--smcal-row-h);
	border-right:  1px solid var(--smcal-border);
	border-bottom: 1px solid var(--smcal-border);
	position:      relative;
	display:       flex;
	align-items:   center;
	justify-content: center;
	font-size:     11px;
	transition:    background .12s, transform .08s;
	cursor:        default;
}

/* Available cells */
.smcal-cell--available {
	background: #f0fdf4;
	cursor:     pointer;
}

.smcal-cell--available:hover {
	background:  #bbf7d0;
	z-index:     2;
	box-shadow:  inset 0 0 0 2px var(--smcal-accent);
}

.smcal-cell--available:hover .smcal-cell-rate {
	opacity: 1;
}

.smcal-cell-rate {
	font-size:   10px;
	font-weight: 600;
	color:       var(--smcal-accent-dark);
	opacity:     0;
	transition:  opacity .1s;
	pointer-events: none;
}

/* Booked */
.smcal-cell--booked {
	background: var(--smcal-booked-bg);
}

/* Time-range label shown only on the FIRST cell of a booked block */
.smcal-cell-booked-label {
	font-size:    11px;
	font-weight:  700;
	color:        var(--smcal-booked-text);
	white-space:  nowrap;
	overflow:     hidden;
	text-overflow: ellipsis;
	padding:      0 4px;
	position:     absolute;
	left:         4px;
	right:        4px;
	top:          50%;
	transform:    translateY(-50%);
	pointer-events: none;
}

/* Generic label (used by blocked cells) */
.smcal-cell-label {
	font-size:  10px;
	font-weight: 600;
	color:      var(--smcal-booked-text);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Blocked (admin block) */
.smcal-cell--blocked {
	background: #fee2e2;
}

.smcal-cell--blocked .smcal-cell-label {
	color: #ef4444;
}

/* Closed (outside bay hours) */
.smcal-cell--closed {
	background: var(--smcal-closed-bg);
}

/* Past */
.smcal-cell--past {
	background: var(--smcal-past-bg);
}

.smcal-cell--past .smcal-cell-rate { display: none; }

/* Selected start cell */
.smcal-cell--selected {
	background:  var(--smcal-selected) !important;
	box-shadow:  inset 0 0 0 2px rgba(0,0,0,.15);
	z-index:     3;
}

/* Duration range cells */
.smcal-cell--selected-range {
	background:  var(--smcal-accent-light) !important;
	box-shadow:  inset 0 0 0 1px var(--smcal-accent);
}

/* Current time marker */
.smcal-now-line {
	position:   absolute;
	left:       0;
	right:      0;
	height:     2px;
	background: #ef4444;
	pointer-events: none;
	z-index:    5;
}

.smcal-now-line::before {
	content:          '';
	position:         absolute;
	left:             -4px;
	top:              -4px;
	width:            10px;
	height:           10px;
	background:       #ef4444;
	border-radius:    50%;
}

/* ── Grid placeholder (loading / error) ─────────────────────────────────────── */

.smcal-grid-placeholder {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	padding:         60px 20px;
	gap:             16px;
}

.smcal-placeholder-text {
	color:      #64748b;
	font-size:  14px;
	margin:     0;
}

.smcal-error-text { color: #ef4444; }

/* ── Spinners ────────────────────────────────────────────────────────────────── */

.smcal-spinner-lg {
	width:        40px;
	height:       40px;
	border:       3px solid #e2e8f0;
	border-top-color: var(--smcal-accent);
	border-radius: 50%;
	animation:    smcal-spin .8s linear infinite;
}

.smcal-spinner-sm {
	display:      inline-block;
	width:        16px;
	height:       16px;
	border:       2px solid #e2e8f0;
	border-top-color: var(--smcal-accent);
	border-radius: 50%;
	animation:    smcal-spin .6s linear infinite;
	vertical-align: middle;
	margin-right: 6px;
}

@keyframes smcal-spin { to { transform: rotate(360deg); } }

/* ── Backdrop ────────────────────────────────────────────────────────────────── */

.smcal-backdrop {
	display:    none;
	position:   fixed;
	inset:      0;
	background: rgba(15, 38, 24, .35);
	z-index:    99990;
}

.smcal-backdrop--open { display: block; }

/* ── Booking panel — fixed side-drawer, always viewport-height ───────────────── */

.smcal-panel {
	position:       fixed;
	top:            0;
	right:          0;
	bottom:         0;
	width:          var(--smcal-panel-w);
	max-width:      100vw;
	background:     #fff;
	box-shadow:     -4px 0 32px rgba(0,0,0,.2);
	z-index:        99999;
	display:        flex;
	flex-direction: column;
	transform:      translateX(110%);   /* 110% ensures nothing bleeds at viewport edge */
	/* visibility hidden AFTER the closing transition finishes → no scrollbar while off-screen */
	visibility:     hidden;
	transition:     transform .25s cubic-bezier(.4,0,.2,1),
	                visibility 0s .25s;
}

.smcal-panel--open {
	transform:  translateX(0);
	visibility: visible;
	transition: transform .25s cubic-bezier(.4,0,.2,1);  /* no visibility delay on open */
}

/* Scrollable content area inside the panel */
.smcal-panel-body {
	flex:       1;
	overflow-y: auto;
	padding:    52px 24px 16px;
	display:    flex;
	flex-direction: column;
	gap:        0;
}

/* Sticky footer holds the Book Now button */
.smcal-panel-footer {
	padding:     16px 24px;
	border-top:  1px solid var(--smcal-border);
	background:  #fff;
	flex-shrink: 0;
}

.smcal-panel-close {
	position:    absolute;
	top:         14px;
	right:       16px;
	background:  #f1f5f9;
	border:      none;
	width:       32px;
	height:      32px;
	border-radius: 50%;
	font-size:   18px;
	cursor:      pointer;
	color:       #475569;
	display:     flex;
	align-items: center;
	justify-content: center;
	transition:  background .15s;
	padding:     0;
	line-height: 1;
}

.smcal-panel-close:hover { background: #e2e8f0; }

/* Bay header */
.smcal-panel-bay {
	border-left:  4px solid var(--smcal-accent);
	padding-left: 12px;
	margin-bottom: 16px;
}

.smcal-panel-bay-name {
	font-size:   17px;
	font-weight: 800;
	color:       var(--smcal-primary);
}

.smcal-panel-bay-meta {
	font-size:  13px;
	color:      #64748b;
	text-transform: capitalize;
	margin-top: 2px;
}

/* Date/time row */
.smcal-panel-datetime {
	display:     flex;
	gap:         8px;
	align-items: center;
	font-size:   13px;
	color:       #475569;
	margin-bottom: 20px;
	flex-wrap:   wrap;
}

.smcal-panel-date { font-weight: 600; }

.smcal-panel-start {
	background:    var(--smcal-accent);
	color:         #fff;
	padding:       3px 10px;
	border-radius: 20px;
	font-weight:   700;
	font-size:     12px;
}

/* Panel sections */
.smcal-panel-section {
	margin-bottom: 20px;
}

.smcal-panel-label {
	font-size:     11px;
	font-weight:   700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color:         #94a3b8;
	margin-bottom: 8px;
}

/* End time */
.smcal-panel-endtime {
	font-size:   13px;
	color:       #475569;
	margin-top:  8px;
	font-weight: 600;
}

/* Duration buttons */
.smcal-duration-buttons {
	display:   flex;
	gap:       6px;
	flex-wrap: wrap;
}

.smcal-dur-btn {
	background:    #f1f5f9;
	border:        1px solid var(--smcal-border);
	color:         #475569;
	padding:       7px 14px;
	border-radius: 20px;
	font-size:     13px;
	font-weight:   600;
	cursor:        pointer;
	transition:    background .15s, border-color .15s, color .15s;
	white-space:   nowrap;
}

.smcal-dur-btn:hover {
	background:   #e2e8f0;
	border-color: #94a3b8;
}

.smcal-dur-btn--active {
	background:   var(--smcal-accent) !important;
	border-color: var(--smcal-accent) !important;
	color:        #fff !important;
}

/* Players stepper */
.smcal-players-stepper {
	display:     flex;
	align-items: center;
	gap:         12px;
}

.smcal-stepper-btn {
	background:    #f1f5f9;
	border:        1px solid var(--smcal-border);
	width:         34px;
	height:        34px;
	border-radius: 50%;
	font-size:     18px;
	cursor:        pointer;
	display:       flex;
	align-items:   center;
	justify-content: center;
	transition:    background .12s;
	color:         #475569;
	padding:       0;
	line-height:   1;
}

.smcal-stepper-btn:hover { background: #e2e8f0; }

.smcal-stepper-val {
	font-size:   20px;
	font-weight: 700;
	min-width:   28px;
	text-align:  center;
	color:       var(--smcal-primary);
}

/* Notes */
.smcal-notes {
	width:         100%;
	border:        1px solid var(--smcal-border);
	border-radius: 6px;
	padding:       10px 12px;
	font-family:   inherit;
	font-size:     13px;
	color:         #1d2327;
	resize:        vertical;
	transition:    border-color .15s;
	box-sizing:    border-box;
}

.smcal-notes:focus {
	outline:      none;
	border-color: var(--smcal-accent);
	box-shadow:   0 0 0 2px rgba(61,186,109,.15);
}

/* ── Admin-only fields ────────────────────────────────────────────────────── */

.smcal-admin-customer-wrap {
	position: relative;
}

.smcal-admin-customer-search {
	width:         100%;
	border:        1px solid var(--smcal-border);
	border-radius: 6px;
	padding:       9px 12px;
	font-family:   inherit;
	font-size:     13px;
	color:         #1d2327;
	box-sizing:    border-box;
	transition:    border-color .15s;
}

.smcal-admin-customer-search:focus {
	outline:      none;
	border-color: var(--smcal-accent);
	box-shadow:   0 0 0 2px rgba(61,186,109,.15);
}

.smcal-admin-customer-selected {
	padding:       9px 12px;
	border:        1px solid var(--smcal-accent);
	border-radius: 6px;
	background:    #f0fdf4;
	font-size:     13px;
	font-weight:   600;
	color:         var(--smcal-primary);
	cursor:        pointer;
}

.smcal-admin-customer-selected:hover {
	background: #d1fae5;
}

.smcal-admin-customer-dropdown {
	position:      absolute;
	left:          0;
	right:         0;
	top:           calc(100% + 2px);
	background:    #fff;
	border:        1px solid var(--smcal-border);
	border-radius: 6px;
	box-shadow:    0 4px 16px rgba(0,0,0,.12);
	z-index:       100;
	max-height:    200px;
	overflow-y:    auto;
}

.smcal-admin-customer-opt {
	padding:    10px 14px;
	font-size:  13px;
	cursor:     pointer;
	color:      #1d2327;
	border-bottom: 1px solid #f1f5f9;
}

.smcal-admin-customer-opt:last-child { border-bottom: none; }

.smcal-admin-customer-opt:hover {
	background: #f0fdf4;
	color:      var(--smcal-primary);
}

.smcal-admin-pay-select {
	width:         100%;
	border:        1px solid var(--smcal-border);
	border-radius: 6px;
	padding:       9px 12px;
	font-family:   inherit;
	font-size:     13px;
	color:         #1d2327;
	background:    #fff;
	box-sizing:    border-box;
	cursor:        pointer;
	appearance:    auto;
}

.smcal-admin-pay-select:focus {
	outline:      none;
	border-color: var(--smcal-accent);
}

/* Cost section */
.smcal-cost-section {
	margin-bottom: 20px;
}

.smcal-cost-loading {
	padding:    12px 0;
	color:      #94a3b8;
	font-size:  13px;
}

.smcal-cost-table {
	background:    #f8fafc;
	border:        1px solid var(--smcal-border);
	border-radius: 8px;
	padding:       12px 16px;
}

.smcal-cost-title {
	font-size:     11px;
	font-weight:   700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color:         #94a3b8;
	margin-bottom: 8px;
}

.smcal-cost-row {
	display:         flex;
	justify-content: space-between;
	font-size:       13px;
	padding:         3px 0;
	color:           #475569;
}

.smcal-cost-row--total {
	border-top:  1px solid var(--smcal-border);
	margin-top:  6px;
	padding-top: 8px;
	font-size:   16px;
	font-weight: 800;
	color:       var(--smcal-primary);
}

/* Body scroll lock when panel is open */
body.smcal-body-locked {
	overflow: hidden;
}

/* Book button */
.smcal-book-btn {
	width:         100%;
	background:    var(--smcal-primary);
	color:         #fff;
	border:        none;
	padding:       14px 0;
	border-radius: var(--smcal-radius);
	font-size:     15px;
	font-weight:   700;
	cursor:        pointer;
	transition:    background .15s, transform .1s;
	letter-spacing: .02em;
}

.smcal-book-btn:hover {
	background: var(--smcal-primary-mid);
}

.smcal-book-btn:active { transform: scale(.99); }

.smcal-book-btn:disabled {
	background: #94a3b8;
	cursor:     not-allowed;
	transform:  none;
}

/* Panel error */
.smcal-panel-error {
	color:      #ef4444;
	font-size:  13px;
	margin-top: 8px;
	min-height: 1em;
}

/* Login notice in panel */
.smcal-panel-login {
	background:    #eff6ff;
	border:        1px solid #bfdbfe;
	border-radius: 6px;
	padding:       12px 14px;
	font-size:     13px;
	color:         #1d4ed8;
}

.smcal-panel-login-actions {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-top:  8px;
}

.smcal-login-sep {
	color:       #93c5fd;
	font-size:   12px;
}

.smcal-login-link {
	color:           #1d4ed8;
	font-weight:     700;
	text-decoration: none;
}

.smcal-login-link:hover {
	text-decoration: underline;
}

/* ── Success state ────────────────────────────────────────────────────────────── */

.smcal-panel-success {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	text-align:      center;
	padding:         20px 0 0;
	flex:            1;
}

.smcal-success-icon {
	width:         64px;
	height:        64px;
	background:    var(--smcal-accent);
	color:         #fff;
	border-radius: 50%;
	display:       flex;
	align-items:   center;
	justify-content: center;
	font-size:     32px;
	font-weight:   700;
	margin-bottom: 16px;
	animation:     smcal-pop .35s cubic-bezier(.34,1.56,.64,1);
}

@keyframes smcal-pop {
	from { transform: scale(.4); opacity: 0; }
	to   { transform: scale(1);  opacity: 1; }
}

.smcal-success-title {
	font-size:     20px;
	font-weight:   800;
	color:         var(--smcal-primary);
	margin-bottom: 16px;
}

.smcal-success-details {
	background:    #f8fafc;
	border:        1px solid var(--smcal-border);
	border-radius: var(--smcal-radius);
	padding:       14px 18px;
	width:         100%;
	text-align:    left;
	margin-bottom: 20px;
}

.smcal-success-row {
	font-size:  14px;
	color:      #475569;
	padding:    3px 0;
}

.smcal-success-ref {
	font-size:   12px;
	color:       #94a3b8;
	margin-top:  4px;
}

.smcal-book-another-btn {
	width:         100%;
	background:    transparent;
	border:        2px solid var(--smcal-primary);
	color:         var(--smcal-primary);
	padding:       12px 0;
	border-radius: var(--smcal-radius);
	font-size:     14px;
	font-weight:   700;
	cursor:        pointer;
	transition:    background .15s, color .15s;
	margin-top:    auto;
}

.smcal-book-another-btn:hover {
	background: var(--smcal-primary);
	color:      #fff;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	:root {
		--smcal-panel-w: 100%;
		--smcal-row-h:   38px;
	}

	.smcal-header {
		padding: 0 12px;
	}

	.smcal-header-left,
	.smcal-header-right {
		min-width: auto;
	}

	.smcal-header-title {
		display: none;
	}

	.smcal-panel {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 85vh;
		transform: translateY(100%);
		border-radius: 16px 16px 0 0;
	}

	.smcal-panel--open {
		transform: translateY(0);
	}
}

/* ── Booked block: hide inner borders so block looks unified ──────────────── */

.smcal-cell--booked-inner {
	border-bottom-color: var(--smcal-booked-bg);
}

/* ── Booked cell tooltip ──────────────────────────────────────────────────── */

.smcal-cell-tooltip {
	position:      absolute;
	bottom:        calc(100% + 6px);
	left:          50%;
	transform:     translateX(-50%);
	background:    #1d2327;
	color:         #fff;
	border-radius: 6px;
	padding:       7px 11px;
	font-size:     12px;
	white-space:   nowrap;
	z-index:       50;
	pointer-events: none;
	opacity:       0;
	transition:    opacity .15s;
	display:       flex;
	flex-direction: column;
	gap:           2px;
	box-shadow:    0 2px 8px rgba(0,0,0,.25);
}

/* Arrow pointing down */
.smcal-cell-tooltip::after {
	content:        '';
	position:       absolute;
	top:            100%;
	left:           50%;
	transform:      translateX(-50%);
	border:         5px solid transparent;
	border-top-color: #1d2327;
}

.smcal-cell--booked:hover .smcal-cell-tooltip {
	opacity: 1;
}

.smcal-tooltip-label {
	font-weight: 700;
	font-size:   12px;
}

.smcal-tooltip-time {
	font-size:   11px;
	opacity:     .8;
}

/* ── Own booking (is_mine) cell ───────────────────────────────────────────── */

.smcal-cell--booked-mine,
.smcal-cell--mine {
	background: #dbeafe;   /* light blue */
	cursor: pointer;
}

.smcal-cell--booked-mine .smcal-cell-booked-label,
.smcal-cell--booked-mine .smcal-tooltip-label,
.smcal-cell--mine .smcal-cell-booked-label {
	color: #1e40af;
}

.smcal-cell-mine-label {
	pointer-events: none;
}

/* ── Pending own booking — amber/orange to signal action needed ─────────── */

.smcal-cell--mine-pending {
	background: #fef3c7;   /* amber-100 */
	cursor: pointer;
}

.smcal-cell--mine-pending .smcal-cell-booked-label {
	color: #92400e;        /* amber-800 */
}

/* ── Booking detail panel ─────────────────────────────────────────────── */
.smcal-detail-header {
	display:         flex;
	align-items:     center;
	gap:             10px;
	margin-bottom:   16px;
	padding-bottom:  12px;
	border-bottom:   1px solid var(--smcal-border);
}
.smcal-detail-title {
	font-size:     16px;
	font-weight:   700;
	color:         var(--smcal-text);
}
.smcal-detail-status {
	display:       inline-block;
	font-size:     11px;
	font-weight:   600;
	text-transform: uppercase;
	letter-spacing: .5px;
	padding:       3px 10px;
	border-radius: 12px;
	background:    #e2e8f0;
	color:         #475569;
}
.smcal-detail-status--confirmed { background: #dcfce7; color: #166534; }
.smcal-detail-status--pending   { background: #fef9c3; color: #854d0e; }
.smcal-detail-status--cancelled { background: #fee2e2; color: #991b1b; }
.smcal-detail-status--checked_in { background: #dbeafe; color: #1e40af; }

.smcal-detail-info {
	display:        flex;
	flex-direction: column;
	gap:            8px;
	margin-bottom:  20px;
}
.smcal-detail-row {
	display:     flex;
	align-items: baseline;
	gap:         8px;
}
.smcal-detail-label {
	font-size:   13px;
	font-weight: 600;
	color:       #64748b;
	min-width:   80px;
	flex-shrink: 0;
}
.smcal-detail-value {
	font-size: 14px;
	color:     var(--smcal-text);
}
.smcal-detail-actions {
	display:        flex;
	gap:            8px;
	padding-top:    16px;
	border-top:     1px solid var(--smcal-border);
}
.smcal-detail-btn {
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	padding:       8px 18px;
	font-size:     13px;
	font-weight:   600;
	border-radius: 6px;
	border:        1px solid;
	cursor:        pointer;
	text-decoration: none;
	transition:    background .15s, color .15s;
}
.smcal-detail-btn--primary {
	color:        var(--smcal-primary);
	border-color: var(--smcal-primary);
	background:   transparent;
}
.smcal-detail-btn--primary:hover {
	background: var(--smcal-primary);
	color:      #fff;
}
.smcal-detail-btn--danger {
	color:        #dc2626;
	border-color: #fca5a5;
	background:   transparent;
}
.smcal-detail-btn--danger:hover {
	background: #dc2626;
	color:      #fff;
}

.smcal-cell--booked-inner.smcal-cell--booked-mine {
	border-bottom-color: #dbeafe;
}

/* ── Admin-only section callout ───────────────────────────────────────────── */

.smcal-admin-section {
	background:    #fefce8;
	border:        1px solid #fde047;
	border-radius: 8px;
	padding:       14px 16px;
	margin-bottom: 20px;
}

.smcal-admin-section-title {
	font-size:     11px;
	font-weight:   700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color:         #a16207;
	margin-bottom: 14px;
}

.smcal-admin-section .smcal-panel-section {
	margin-bottom: 14px;
}

.smcal-admin-section .smcal-panel-section:last-child {
	margin-bottom: 0;
}

/* ── Panel footer total price ─────────────────────────────────────────────── */

.smcal-panel-total {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	background:      #f0fdf4;
	border:          1px solid #bbf7d0;
	border-radius:   6px;
	padding:         10px 14px;
	margin-bottom:   10px;
	font-size:       15px;
	font-weight:     700;
	color:           var(--smcal-primary);
}

.smcal-panel-total:empty { display: none; }

.smcal-panel-total-label {
	font-size:   13px;
	font-weight: 600;
	color:       #475569;
}

.smcal-panel-total-val {
	font-size:   17px;
	font-weight: 800;
	color:       var(--smcal-primary);
}

.smcal-panel-total-val--loading {
	opacity:     0.4;
	font-size:   20px;
	letter-spacing: 2px;
}

/* ── Account funds row ───────────────────────────────────────────────────── */

.smcal-funds-row {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	background:      #fffbeb;
	border:          1px solid #fde68a;
	border-radius:   6px;
	padding:         8px 12px;
	margin-bottom:   10px;
	gap:             8px;
}

.smcal-funds-label {
	font-size:   13px;
	font-weight: 600;
	color:       #92400e;
	flex:        1;
}

.smcal-funds-apply-btn {
	background:    #f59e0b;
	color:         #fff;
	border:        none;
	border-radius: 4px;
	padding:       4px 12px;
	font-size:     12px;
	font-weight:   600;
	cursor:        pointer;
	transition:    background .15s;
	white-space:   nowrap;
	flex-shrink:   0;
}

.smcal-funds-apply-btn:hover        { background: #d97706; }
.smcal-funds-apply-btn--active      { background: #16a34a; }
.smcal-funds-apply-btn--active:hover { background: #15803d; }

/* ── Auth modal ──────────────────────────────────────────────────────────── */

.smcal-auth-overlay {
	display:         none;
	position:        fixed;
	inset:           0;
	z-index:         99999;
	background:      rgba(0, 0, 0, .55);
	backdrop-filter: blur(3px);
	align-items:     center;
	justify-content: center;
	padding:         20px;
}

.smcal-auth-overlay.is-open {
	display: flex;
}

.smcal-auth-box {
	position:      relative;
	background:    #fff;
	border-radius: 14px;
	padding:       36px 32px 32px;
	width:         100%;
	max-width:     420px;
	box-shadow:    0 20px 60px rgba(0,0,0,.22);
	animation:     smcal-auth-in .18s ease-out;
}

@keyframes smcal-auth-in {
	from { opacity: 0; transform: scale(.94) translateY(10px); }
	to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

.smcal-auth-close {
	position:   absolute;
	top:        12px;
	right:      14px;
	background: none;
	border:     none;
	cursor:     pointer;
	font-size:  20px;
	line-height: 1;
	color:      #94a3b8;
	padding:    4px 6px;
	border-radius: 6px;
	transition: color .15s, background .15s;
}

.smcal-auth-close:hover {
	color:      #1e293b;
	background: #f1f5f9;
}

.smcal-auth-title {
	font-size:     22px;
	font-weight:   700;
	margin:        0 0 18px;
	color:         #1e293b;
}

.smcal-auth-banner {
	display:       none;
	padding:       10px 14px;
	border-radius: 8px;
	font-size:     13px;
	margin-bottom: 16px;
}

.smcal-auth-banner--error {
	display:    block;
	background: #fef2f2;
	border:     1px solid #fecaca;
	color:      #b91c1c;
}

.smcal-auth-banner--success {
	display:    block;
	background: #f0fdf4;
	border:     1px solid #bbf7d0;
	color:      #15803d;
}

/* Views */
.smcal-auth-view form {
	display:        flex;
	flex-direction: column;
	gap:            14px;
}

/* Field */
.smcal-auth-field {
	display:        flex;
	flex-direction: column;
	gap:            5px;
	flex:           1 1 0;
}

.smcal-auth-field label {
	font-size:   13px;
	font-weight: 600;
	color:       #475569;
}

.smcal-auth-field input {
	border:        1px solid #cbd5e1;
	border-radius: 8px;
	padding:       10px 12px;
	font-size:     14px;
	color:         #1e293b;
	background:    #fff;
	outline:       none;
	transition:    border-color .15s, box-shadow .15s;
	width:         100%;
	box-sizing:    border-box;
}

.smcal-auth-field input:focus {
	border-color: var(--smcal-primary, #166534);
	box-shadow:   0 0 0 3px rgba(22,101,52,.12);
}

/* Name row (first + last side by side) */
.smcal-auth-name-row {
	display: flex;
	gap:     12px;
}

/* Remember me */
.smcal-auth-remember {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   13px;
	color:       #64748b;
}

.smcal-auth-remember input[type="checkbox"] {
	width:  16px;
	height: 16px;
	cursor: pointer;
	accent-color: var(--smcal-primary, #166534);
}

/* Submit button */
.smcal-auth-submit-btn {
	background:    var(--smcal-primary, #166534);
	color:         #fff;
	border:        none;
	border-radius: 8px;
	padding:       12px 0;
	font-size:     15px;
	font-weight:   700;
	cursor:        pointer;
	transition:    background .15s, opacity .15s;
	width:         100%;
}

.smcal-auth-submit-btn:hover:not(:disabled) {
	background: var(--smcal-primary-mid, #14532d);
}

.smcal-auth-submit-btn:disabled {
	opacity: .6;
	cursor:  not-allowed;
}

/* Links row */
.smcal-auth-links {
	display:         flex;
	justify-content: center;
	gap:             18px;
	flex-wrap:       wrap;
}

.smcal-auth-link {
	font-size:       13px;
	color:           var(--smcal-primary, #166534);
	text-decoration: none;
}

.smcal-auth-link:hover {
	text-decoration: underline;
}

/* Mobile */
@media (max-width: 480px) {
	.smcal-auth-box {
		padding: 28px 20px 24px;
	}
	.smcal-auth-name-row {
		flex-direction: column;
		gap:            14px;
	}
}

/* ── Payment step ──────────────────────────────────────────────────────────── */

.smcal-payment-step {
	padding: 24px 20px 8px;
}

.smcal-payment-step-title {
	font-size:     17px;
	font-weight:   700;
	color:         var(--smcal-heading, #1a1a1a);
	margin-bottom: 8px;
}

.smcal-payment-status {
	font-size:   14px;
	color:       var(--smcal-muted, #666);
	line-height: 1.5;
}

.smcal-payment-status--error {
	color: #c0392b;
}

.smcal-payment-ref {
	font-size:  13px;
	color:      var(--smcal-muted, #888);
	margin-top: 6px;
}

/* ── Inline gateway forms ─────────────────────────────────────────────────── */

.smcal-payment-form {
	margin-top: 20px;
}

/* Stripe Payment Element container */
.smcal-stripe-element {
	border:        1px solid #d1d5db;
	border-radius: 6px;
	padding:       12px;
	background:    #fff;
	margin-bottom: 12px;
}

/* Square card container */
.smcal-square-card {
	min-height:    40px;
	margin-bottom: 12px;
}

/* PayPal buttons container */
.smcal-paypal-buttons {
	margin-bottom: 12px;
}

/* Pay / Confirm button */
.smcal-pay-btn {
	display:          block;
	width:            100%;
	padding:          12px 0;
	background:       var(--smcal-primary, #166534);
	color:            #fff;
	font-size:        15px;
	font-weight:      600;
	border:           none;
	border-radius:    6px;
	cursor:           pointer;
	text-align:       center;
	transition:       background 0.15s;
	margin-top:       4px;
}

.smcal-pay-btn:hover:not(:disabled) {
	background: var(--smcal-primary-dark, #14532d);
}

.smcal-pay-btn:disabled {
	opacity: 0.6;
	cursor:  not-allowed;
}

/* Inline error message (Stripe / Square) */
.smcal-payment-error-msg {
	color:         #c0392b;
	font-size:     13px;
	margin-bottom: 8px;
	line-height:   1.4;
}

/* Invoice / Pay Later message */
.smcal-invoice-msg {
	font-size:     14px;
	color:         var(--smcal-muted, #555);
	line-height:   1.5;
	margin-bottom: 16px;
	background:    #f0fdf4;
	border-left:   3px solid var(--smcal-primary, #166534);
	padding:       10px 14px;
	border-radius: 0 4px 4px 0;
}

.smcal-admin-customer-loading,
.smcal-admin-customer-empty,
.smcal-admin-customer-error {
	color:       #888;
	font-style:  italic;
	cursor:      default;
}
.smcal-admin-customer-error {
	color: #c0392b;
}

/* ==========================================================================
   Add-ons section (injected by Swing Mana Pro below the Players field)
   ========================================================================== */

.smcal-addons-section {
	margin-top:    18px;
	padding-top:   16px;
	border-top:    1px solid var(--smcal-border, #e2e8f0);
}

.smcal-addons-heading {
	font-size:     13px;
	font-weight:   600;
	color:         var(--smcal-label, #444);
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.smcal-addon-row {
	display:       flex;
	align-items:   center;
	justify-content: space-between;
	gap:           12px;
	padding:       10px 0;
	border-bottom: 1px solid var(--smcal-border, #e2e8f0);
}

.smcal-addon-row:last-child {
	border-bottom: none;
}

.smcal-addon-info {
	flex:          1;
	min-width:     0;
}

.smcal-addon-name {
	font-size:     14px;
	font-weight:   500;
	color:         var(--smcal-text, #1a1a1a);
	line-height:   1.3;
}

.smcal-addon-price {
	font-size:     13px;
	color:         var(--smcal-primary, #166534);
	font-weight:   600;
	margin-top:    2px;
}

.smcal-addon-desc {
	font-size:     12px;
	color:         var(--smcal-muted, #555);
	margin-top:    3px;
	line-height:   1.4;
}

/* Qty stepper reuses the same pattern as Players stepper */
.smcal-addon-stepper {
	display:       flex;
	align-items:   center;
	gap:           6px;
	flex-shrink:   0;
}

.smcal-addon-stepper button {
	width:         30px;
	height:        30px;
	border:        1px solid var(--smcal-border, #e2e8f0);
	background:    #fff;
	border-radius: 50%;
	font-size:     18px;
	line-height:   1;
	cursor:        pointer;
	color:         var(--smcal-primary, #166534);
	transition:    background .15s, color .15s;
	display:       flex;
	align-items:   center;
	justify-content: center;
}

.smcal-addon-stepper button:hover {
	background:    var(--smcal-primary, #166534);
	color:         #fff;
}

.smcal-addon-stepper button:disabled {
	opacity:       0.35;
	cursor:        default;
	pointer-events: none;
}

.smcal-addon-qty {
	min-width:     24px;
	text-align:    center;
	font-size:     15px;
	font-weight:   600;
	color:         var(--smcal-text, #1a1a1a);
}

/* ── Online booking disabled ───────────────────────────────────────────────── */

.smcal-booking-disabled-banner {
	background:    #fef3c7;
	color:         #92400e;
	text-align:    center;
	padding:       10px 16px;
	font-size:     13px;
	font-weight:   500;
	border-top:    1px solid #fde68a;
}

.smcal-cell--booking-disabled {
	cursor:        not-allowed;
	pointer-events: none;
}

/* ── Helcim Pay overlay — must sit above the booking panel (z-index 99999) ── */
.helcim-pay-iframe-wrapper,
#helcimPayIframe,
div[id*="helcim"] iframe {
	z-index: 2147483647 !important;
}
.helcim-pay-iframe-wrapper {
	position: fixed !important;
	inset: 0 !important;
}

/* ── Saved card recall — card selector step ──────────────────────────────── */

.smcal-saved-cards-sub {
	color:         var(--smcal-muted, #666);
	font-size:     13px;
	margin:        0 0 12px;
}

.smcal-saved-card-row {
	display:       flex;
	align-items:   center;
	justify-content: space-between;
	gap:           12px;
	padding:       10px 14px;
	border:        1px solid var(--smcal-border, #e0e0e0);
	border-radius: 6px;
	margin-bottom: 8px;
	background:    var(--smcal-bg, #fff);
}

.smcal-saved-card-row--default {
	border-color:  var(--smcal-accent, #2271b1);
	background:    #f0f6fc;
}

.smcal-saved-card-label {
	font-size:     14px;
	font-weight:   500;
	flex:          1;
}

.smcal-saved-card-use-btn {
	white-space:   nowrap;
	padding:       6px 14px;
	border-radius: 4px;
	border:        1px solid var(--smcal-accent, #2271b1);
	background:    var(--smcal-accent, #2271b1);
	color:         #fff;
	font-size:     13px;
	font-weight:   600;
	cursor:        pointer;
	transition:    background .15s;
}
.smcal-saved-card-use-btn:hover { background: #1a5d99; border-color: #1a5d99; }

.smcal-new-card-wrap {
	text-align:    center;
	margin-top:    4px;
}

.smcal-new-card-btn {
	background:    none;
	border:        none;
	color:         var(--smcal-accent, #2271b1);
	font-size:     13px;
	cursor:        pointer;
	text-decoration: underline;
	padding:       6px 0;
}
.smcal-new-card-btn:hover { color: #1a5d99; }

.smcal-btn-primary {
	padding:       8px 16px;
	border-radius: 4px;
	border:        1px solid var(--smcal-accent, #2271b1);
	background:    var(--smcal-accent, #2271b1);
	color:         #fff;
	font-size:     13px;
	font-weight:   600;
	cursor:        pointer;
}
.smcal-btn-primary:hover { background: #1a5d99; }

/* ── Cancellation blocked notice ─────────────────────────────────────────── */

.smcal-cancel-blocked {
	font-size:   12px;
	color:       var(--smcal-muted, #888);
	margin:      4px 0 0;
	font-style:  italic;
}