/* Moylan IcePlex plugin styling.
 * Colors/fonts pull from --mip-* custom properties (set in Settings ->
 * Branding) so these pages match the rest of moylaniceplex.com. Base
 * typography intentionally uses `inherit` so headings/body copy fall back
 * to whatever the active theme already defines, rather than fighting it. */

.mip-app, .mip-tv-app {
	font-family: var(--mip-font, inherit);
	color: var(--mip-text, inherit);
}

.mip-app { max-width: 820px; margin: 0 auto; line-height: 1.5; }
.mip-app *, .mip-tv-app * { box-sizing: border-box; }

.mip-app h2, .mip-app h3 { font-family: inherit; color: var(--mip-accent); }

.mip-app label { display: block; margin: 14px 0 5px; font-weight: 600; }
.mip-app input[type=text], .mip-app input[type=email], .mip-app input[type=tel],
.mip-app input[type=number], .mip-app input[type=date] {
	width: 100%; max-width: 320px; padding: 9px 12px; border: 1px solid #d0d5dd;
	border-radius: var(--mip-radius, 6px); font-size: 15px; font-family: inherit;
}
.mip-app input:focus { outline: none; border-color: var(--mip-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mip-primary) 20%, transparent); }

/* Card menu - the front door to the 4 booking types */
.mip-menu {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
	margin: 8px 0 28px;
}
@media (max-width: 560px) { .mip-menu { grid-template-columns: 1fr; } }

.mip-menu-card {
	position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 6px; text-align: center;
	background: #fff; border: 1px solid #e6e9ee; border-radius: 22px;
	padding: 24px 18px; cursor: pointer; font-family: inherit;
	box-shadow: 0 1px 2px rgba(16,24,40,.04);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mip-menu-card::before {
	content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 2px;
	background: linear-gradient(135deg, var(--mip-primary), var(--mip-accent));
	opacity: 0; transition: opacity .18s ease;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.mip-menu-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(16,24,40,.12); }
.mip-menu-card:hover::before { opacity: 1; }
.mip-menu-card:active { transform: translateY(-1px); }

.mip-menu-icon { font-size: 42px; line-height: 1; margin-bottom: 4px; }
.mip-menu-title { font-size: 18px; font-weight: 700; color: var(--mip-accent); }
.mip-menu-desc { font-size: 13.5px; color: #667085; max-width: 22ch; }
.mip-menu-lock { position: absolute; top: 14px; right: 16px; font-size: 15px; opacity: .55; }

.mip-panel-wrap { display: none; }
.mip-panel-wrap.is-open { display: block; animation: mip-fade-in .25s ease; }
.mip-back-btn {
	background: none; border: none; cursor: pointer; font-family: inherit;
	font-size: 14px; font-weight: 600; color: var(--mip-primary); padding: 0 0 18px;
	display: inline-flex; align-items: center; gap: 6px;
}
.mip-back-btn:hover { text-decoration: underline; }
.mip-panel { display: none; }
.mip-panel.is-active { display: block; }
.mip-panel h2 { margin-top: 0; font-size: 24px; }

@keyframes mip-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Login gate */
.mip-login-gate {
	background: var(--mip-accent); color: #fff; border-radius: 14px; padding: 36px 32px;
	text-align: center;
}
.mip-login-gate .mip-lock-icon { font-size: 34px; margin-bottom: 10px; display: block; }
.mip-login-gate h3 { color: #fff; margin: 0 0 8px; font-size: 22px; }
.mip-login-gate p { color: rgba(255,255,255,.8); margin: 0 0 20px; max-width: 460px; margin-left: auto; margin-right: auto; }
.mip-login-gate .mip-btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.mip-notice { background: #fff7e6; border: 1px solid #f0c36d; padding: 12px 16px; border-radius: var(--mip-radius, 6px); }

.mip-test-banner {
	background: #fff4e5; border: 1px solid #f0b429; color: #7a4a00; font-weight: 600;
	padding: 12px 16px; border-radius: var(--mip-radius, 6px); margin-bottom: 20px; font-size: 14px;
}
.mip-test-note {
	background: #fff4e5; border: 1px dashed #f0b429; color: #7a4a00; padding: 10px 14px;
	border-radius: var(--mip-radius, 6px); font-size: 13.5px; font-weight: 600; margin: 8px 0 0;
}

/* Slots */
.mip-slots { margin: 18px 0; }
.mip-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.mip-slot-btn {
	padding: 10px; border: 1px solid #cbd5e1; border-radius: var(--mip-radius, 6px); background: #fff;
	cursor: pointer; font-size: 14px; font-family: inherit;
}
.mip-slot-btn.is-selected { background: var(--mip-primary); color: #fff; border-color: var(--mip-primary); }
.mip-slot-btn[disabled] { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

.mip-submit-booking, #mip-signup-btn, #mip-buy-hours-btn {
	margin-top: 20px; background: var(--mip-primary); color: #fff; border: none;
	padding: 13px 26px; border-radius: var(--mip-radius, 6px); font-size: 16px; cursor: pointer;
	font-family: inherit; font-weight: 600;
}
.mip-submit-booking[disabled] { background: #94a3b8; cursor: not-allowed; }
.mip-result { margin-top: 18px; }
.mip-result .success { background: #ecfdf3; border: 1px solid #6ee7b7; padding: 15px; border-radius: var(--mip-radius, 6px); }
.mip-result .error { background: #fef2f2; border: 1px solid #fca5a5; padding: 15px; border-radius: var(--mip-radius, 6px); color: #991b1b; }
.mip-result img { max-width: 220px; display: block; margin-top: 12px; }

/* Membership */
.mip-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 26px; margin-bottom: 22px; }
.mip-level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 18px 0; }
.mip-level-option input { position: absolute; opacity: 0; }
.mip-level-card { border: 2px solid #cbd5e1; border-radius: var(--mip-radius, 6px); padding: 18px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.mip-level-option input:checked + .mip-level-card { border-color: var(--mip-primary); background: color-mix(in srgb, var(--mip-primary) 8%, #fff); }
.mip-price { font-size: 24px; font-weight: 700; margin: 6px 0; color: var(--mip-accent); }
.mip-overage { color: #666; font-size: 13px; }
.mip-credit-balance { display: flex; gap: 24px; flex-wrap: wrap; margin: 18px 0; }
.mip-credit-balance .stat { background: #fff; border-radius: var(--mip-radius, 6px); padding: 16px 22px; border: 1px solid #e2e8f0; }
.mip-credit-balance .stat .num { font-size: 28px; font-weight: 700; color: var(--mip-primary); }

/* Member Skating credit-hours summary + party package tier cards */
.mip-credit-summary { margin: 10px 0 16px; }
.mip-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 10px 0 18px; }
.mip-tier-option input { position: absolute; opacity: 0; }
.mip-tier-card {
	border: 2px solid #cbd5e1; border-radius: var(--mip-radius, 6px); padding: 16px;
	cursor: pointer; text-align: center; transition: border-color .15s, background .15s;
}
.mip-tier-option input:checked + .mip-tier-card { border-color: var(--mip-primary); background: color-mix(in srgb, var(--mip-primary) 8%, #fff); }
.mip-tier-card h3 { margin: 0 0 4px; font-size: 17px; }
.mip-tier-desc { font-size: 12.5px; color: #667085; margin-top: 8px; line-height: 1.4; }
.mip-fine-print { font-size: 12.5px; color: #667085; margin: -8px 0 12px; }
.mip-loading { color: #94a3b8; font-size: 14px; }
.mip-equipment-notice {
	background: #fff4e5; border: 1px solid #f0b429; color: #7a4a00; font-weight: 600;
	padding: 12px 16px; border-radius: var(--mip-radius, 6px); margin-bottom: 18px; font-size: 14px;
}

/* Live price preview - "pricing visible during the process" */
.mip-price-box {
	background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--mip-radius, 6px);
	padding: 14px 16px; margin: 4px 0 18px;
}
.mip-price-line { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; color: #444; }
.mip-price-total { border-top: 1px solid #d0d5dd; margin-top: 6px; padding-top: 8px; font-weight: 700; font-size: 16px; color: var(--mip-accent); }
.mip-price-deposit { color: var(--mip-primary); font-weight: 600; }

/* Public Skate's session picker + duration follow-up */
.mip-sessions { margin: 16px 0; }
.mip-session-duration { margin: 12px 0; }

/* Custom date picker - greys out/disables days with no availability at all */
.mip-date-picker { position: relative; max-width: 320px; margin-bottom: 4px; }
.mip-date-display {
	width: 100%; text-align: left; padding: 9px 12px; border: 1px solid #d0d5dd;
	border-radius: var(--mip-radius, 6px); font-size: 15px; font-family: inherit;
	background: #fff; cursor: pointer; color: var(--mip-text, inherit);
}
.mip-date-display:hover { border-color: var(--mip-primary); }
.mip-date-calendar {
	position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
	background: #fff; border: 1px solid #d0d5dd; border-radius: 10px;
	box-shadow: 0 8px 24px rgba(16,24,40,.15); padding: 12px; width: 280px;
}
.mip-cal-header { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; color: var(--mip-accent); margin-bottom: 8px; }
.mip-cal-nav { background: none; border: none; font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px; color: var(--mip-primary); }
.mip-cal-nav:hover { background: #f1f5f9; }
.mip-cal-nav[disabled] { opacity: .3; cursor: not-allowed; }
.mip-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: #94a3b8; margin-bottom: 4px; }
.mip-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mip-cal-day {
	aspect-ratio: 1; border: none; background: none; border-radius: 6px; font-size: 13px;
	font-family: inherit; display: flex; align-items: center; justify-content: center;
}
.mip-cal-day.is-empty { visibility: hidden; }
.mip-cal-day.is-closed { color: #cbd5e1; text-decoration: line-through; cursor: not-allowed; background: #f8fafc; }
.mip-cal-day.is-open { color: var(--mip-text, #1a1a1a); cursor: pointer; font-weight: 600; }
.mip-cal-day.is-open:hover { background: var(--mip-primary); color: #fff; }
.mip-ledger-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.mip-ledger-table th, .mip-ledger-table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid #e2e8f0; }
.mip-btn {
	display: inline-block; background: var(--mip-primary); color: #fff; padding: 11px 20px;
	border-radius: var(--mip-radius, 6px); text-decoration: none; font-weight: 600;
}
.mip-btn-secondary { background: transparent; border: 2px solid #fff; }
.mip-btn-danger { background: #dc2626; color: #fff; border: none; padding: 11px 20px; border-radius: var(--mip-radius, 6px); cursor: pointer; font-family: inherit; }
.mip-notice-box { background: var(--mip-accent); color: #fff; border-radius: 14px; padding: 32px; text-align: center; }
.mip-notice-box h2 { color: #fff; }

/* TV Display */
.mip-tv-app { background: var(--mip-accent); color: #fff; min-height: 100vh; padding: 24px 32px; }
.mip-tv-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.mip-tv-header h1 { margin: 0; font-size: 32px; color: #fff; }
.mip-tv-logo { max-height: 48px; }
.mip-tv-clock { font-size: 28px; font-variant-numeric: tabular-nums; }
.mip-tv-section { margin-bottom: 26px; }
.mip-tv-section h2 { font-size: 20px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.mip-tv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.mip-tv-resource { background: rgba(255,255,255,.06); border-radius: 12px; padding: 16px; border-left: 6px solid var(--mip-primary); }
.mip-tv-resource.is-occupied { border-left-color: #f59e0b; }
.mip-tv-resource h3 { margin: 0 0 6px; font-size: 18px; color: #fff; }
.mip-tv-resource .who { font-size: 15px; color: rgba(255,255,255,.8); }
.mip-tv-resource .time { font-size: 13px; color: rgba(255,255,255,.5); }
.mip-tv-capacity-bar { background: rgba(255,255,255,.12); border-radius: 6px; height: 8px; overflow: hidden; margin: 8px 0 6px; }
.mip-tv-capacity-fill { background: #2dd4bf; height: 100%; transition: width .3s ease; }
.mip-tv-resource.is-occupied .mip-tv-capacity-fill { background: #f59e0b; }
.mip-tv-locker-rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.mip-tv-room { background: rgba(255,255,255,.06); border-radius: 12px; padding: 14px; }
.mip-tv-room h3 { margin: 0 0 8px; font-size: 16px; color: #fff; }
.mip-tv-locker-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mip-tv-locker { background: rgba(255,255,255,.12); border-radius: 6px; text-align: center; padding: 6px 2px; font-size: 12px; }
.mip-tv-locker.is-occupied { background: #f59e0b; color: #1a1a1a; font-weight: 700; }
.mip-tv-footer { text-align: center; color: rgba(255,255,255,.4); font-size: 13px; margin-top: 20px; }

.mip-tv-error {
	background: #7f1d1d; border: 1px solid #f87171; color: #fecaca; font-weight: 600;
	padding: 14px 18px; border-radius: 10px; margin-bottom: 22px; font-size: 15px; line-height: 1.5;
}

/* Checked-in guest cards */
.mip-tv-empty { color: rgba(255,255,255,.45); font-size: 14px; margin: 0; }
.mip-tv-checkedin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mip-tv-checkin-card {
	background: linear-gradient(160deg, rgba(45,212,191,.16), rgba(255,255,255,.05));
	border: 1px solid rgba(45,212,191,.35); border-radius: 14px; padding: 16px 18px;
	animation: mip-card-in .3s ease;
}
.mip-tv-card-name { font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.mip-tv-card-row { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.mip-tv-card-label { color: rgba(255,255,255,.55); }
.mip-tv-card-value { color: #2dd4bf; font-weight: 700; }
.mip-tv-card-time { margin-top: 8px; font-size: 12.5px; color: rgba(255,255,255,.45); border-top: 1px solid rgba(255,255,255,.1); padding-top: 6px; }

@keyframes mip-card-in {
	from { opacity: 0; transform: scale(.96); }
	to { opacity: 1; transform: scale(1); }
}