/* ==========================================================================
   Swing Mana — Customer Account Dashboard
   ========================================================================== */

:root {
	--smacct-primary:      #0f2618;
	--smacct-accent:       #3dba6d;
	--smacct-accent-dark:  #2a9d57;
	--smacct-border:       #e2e8f0;
	--smacct-bg:           #ffffff;
	--smacct-surface:      #f8fafc;
	--smacct-text:         #1d2327;
	--smacct-muted:        #64748b;
	--smacct-danger:       #dc2626;
	--smacct-success:      #16a34a;
	--smacct-radius:       10px;
	--smacct-shadow:       0 2px 12px rgba(0,0,0,.08);
}

/* ── Wrapper ───────────────────────────────────────────────────────────────── */

.swingmana-account-wrap {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size:   15px;
	color:       var(--smacct-text);
	margin:      0 auto;
}

/* ── Loading state ─────────────────────────────────────────────────────────── */

.smacct-loading {
	padding:     48px 24px;
	text-align:  center;
	color:       var(--smacct-muted);
}

/* ── Inline login form ──────────────────────────────────────────────────────── */

.smacct-login-wrap {
	max-width:     400px;
	margin:        48px auto;
	padding:       32px;
	background:    var(--smacct-surface);
	border:        1px solid var(--smacct-border);
	border-radius: var(--smacct-radius);
}

.smacct-login-title {
	margin:      0 0 24px;
	font-size:   22px;
	font-weight: 700;
	color:       var(--smacct-primary);
	text-align:  center;
}

.smacct-2fa-hint {
	margin:      0 0 16px;
	font-size:   14px;
	color:       var(--smacct-muted);
	text-align:  center;
}

.smacct-field--checkbox {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-top:  4px;
}

.smacct-field--checkbox input[type="checkbox"] {
	width:       18px;
	height:      18px;
	flex-shrink: 0;
	cursor:      pointer;
}

.smacct-field--checkbox label {
	font-size:  14px;
	color:      var(--smacct-text);
	cursor:     pointer;
	margin:     0;
}

.smacct-spinner {
	display:       inline-block;
	width:         20px;
	height:        20px;
	border:        2px solid var(--smacct-border);
	border-top-color: var(--smacct-accent);
	border-radius: 50%;
	animation:     smacct-spin .7s linear infinite;
	vertical-align: middle;
	margin-right:  8px;
}

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

/* ── Header (avatar + name + logout) ──────────────────────────────────────── */

.smacct-header {
	display:          flex;
	align-items:      center;
	gap:              16px;
	padding:          24px;
	background:       var(--smacct-primary);
	border-radius:    var(--smacct-radius) var(--smacct-radius) 0 0;
	color:            #fff;
}

.smacct-avatar {
	width:            56px;
	height:           56px;
	border-radius:    50%;
	background:       rgba(255,255,255,.15);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	font-size:        22px;
	font-weight:      700;
	flex-shrink:      0;
}

.smacct-header-info {
	flex: 1;
	min-width: 0;
}

.smacct-header-name {
	font-size:   18px;
	font-weight: 700;
	margin:      0 0 2px;
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

.smacct-header-meta {
	font-size:  13px;
	opacity:    .75;
}

.smacct-logout-btn {
	background:    rgba(255,255,255,.12);
	border:        1px solid rgba(255,255,255,.25);
	color:         #fff;
	padding:       8px 16px;
	border-radius: 6px;
	font-size:     13px;
	font-weight:   600;
	cursor:        pointer;
	text-decoration: none;
	white-space:   nowrap;
	transition:    background .15s;
}

.smacct-logout-btn:hover {
	background: rgba(255,255,255,.22);
}

/* ── Tab nav ───────────────────────────────────────────────────────────────── */

.smacct-tabs {
	display:     flex;
	border-bottom: 2px solid var(--smacct-border);
	background:  var(--smacct-bg);
	overflow-x:  auto;
	scrollbar-width: none;
}

.smacct-tabs::-webkit-scrollbar { display: none; }

.smacct-tab {
	padding:        14px 20px;
	font-size:      14px;
	font-weight:    600;
	color:          var(--smacct-muted);
	cursor:         pointer;
	border:         none;
	background:     none;
	border-bottom:  2px solid transparent;
	margin-bottom:  -2px;
	white-space:    nowrap;
	transition:     color .15s, border-color .15s;
}

.smacct-tab:hover {
	color: var(--smacct-text);
}

.smacct-tab.is-active {
	color:        var(--smacct-accent-dark);
	border-bottom-color: var(--smacct-accent);
}

/* ── Tab panels ────────────────────────────────────────────────────────────── */

.smacct-panel {
	display:       none;
	padding:       28px 24px;
	background:    var(--smacct-bg);
	border:        1px solid var(--smacct-border);
	border-top:    none;
	border-radius: 0 0 var(--smacct-radius) var(--smacct-radius);
}

.smacct-panel.is-active {
	display: block;
}

/* ── Forms ─────────────────────────────────────────────────────────────────── */

.smacct-form-row {
	display:   flex;
	gap:       16px;
	flex-wrap: wrap;
}

.smacct-field {
	display:       flex;
	flex-direction: column;
	gap:           6px;
	flex:          1;
	min-width:     200px;
	margin-bottom: 16px;
}

.smacct-field label {
	font-size:   13px;
	font-weight: 600;
	color:       var(--smacct-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.smacct-field input {
	padding:       10px 12px;
	border:        1px solid var(--smacct-border);
	border-radius: 6px;
	font-size:     15px;
	color:         var(--smacct-text);
	background:    var(--smacct-bg);
	width:         100%;
	box-sizing:    border-box;
	transition:    border-color .15s;
}

.smacct-field input:focus {
	outline:      none;
	border-color: var(--smacct-accent);
	box-shadow:   0 0 0 3px rgba(61,186,109,.15);
}

/* Phone field with badge ── */
.smacct-phone-row {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.smacct-phone-row input {
	flex: 1;
}

.smacct-badge {
	display:       inline-flex;
	align-items:   center;
	gap:           4px;
	padding:       4px 10px;
	border-radius: 20px;
	font-size:     12px;
	font-weight:   600;
	white-space:   nowrap;
}

.smacct-badge--verified {
	background: #d1fae5;
	color:      var(--smacct-success);
}

.smacct-badge--unverified {
	background: #fef3c7;
	color:      #92400e;
}

.smacct-verify-link {
	font-size:      13px;
	color:          var(--smacct-accent-dark);
	text-decoration: underline;
	cursor:         pointer;
	border:         none;
	background:     none;
	padding:        0;
	white-space:    nowrap;
}

.smacct-verify-box {
	display:     flex;
	gap:         8px;
	align-items: center;
	flex-wrap:   wrap;
	margin-top:  10px;
	padding:     12px;
	background:  var(--smacct-surface);
	border:      1px solid var(--smacct-border);
	border-radius: 6px;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.smacct-btn {
	padding:       10px 22px;
	border-radius: 6px;
	font-size:     14px;
	font-weight:   700;
	cursor:        pointer;
	border:        none;
	transition:    background .15s, opacity .15s;
}

.smacct-btn--primary {
	background: var(--smacct-accent);
	color:      #fff;
}

.smacct-btn--primary:hover:not(:disabled) {
	background: var(--smacct-accent-dark);
}

.smacct-btn--primary:disabled {
	opacity: .6;
	cursor:  not-allowed;
}

.smacct-btn--danger {
	background: transparent;
	border:     1px solid var(--smacct-danger);
	color:      var(--smacct-danger);
	padding:    6px 14px;
	font-size:  13px;
}

.smacct-btn--danger:hover:not(:disabled) {
	background: var(--smacct-danger);
	color:      #fff;
}

/* ── Status notices ────────────────────────────────────────────────────────── */

.smacct-notice {
	padding:       12px 16px;
	border-radius: 6px;
	font-size:     14px;
	margin-bottom: 16px;
	display:       none;
}

.smacct-notice--success {
	background: #d1fae5;
	color:      var(--smacct-success);
	border:     1px solid #a7f3d0;
}

.smacct-notice--error {
	background: #fee2e2;
	color:      var(--smacct-danger);
	border:     1px solid #fca5a5;
}

/* ── Bookings list ─────────────────────────────────────────────────────────── */

.smacct-bookings-sub-tabs {
	display:       flex;
	gap:           8px;
	margin-bottom: 20px;
}

.smacct-sub-tab {
	padding:       6px 16px;
	border-radius: 20px;
	font-size:     13px;
	font-weight:   600;
	cursor:        pointer;
	border:        1px solid var(--smacct-border);
	background:    var(--smacct-bg);
	color:         var(--smacct-muted);
	transition:    all .15s;
}

.smacct-sub-tab.is-active {
	background:    var(--smacct-primary);
	border-color:  var(--smacct-primary);
	color:         #fff;
}

.smacct-booking-card {
	display:       flex;
	align-items:   flex-start;
	gap:           16px;
	padding:       16px;
	border:        1px solid var(--smacct-border);
	border-radius: 8px;
	margin-bottom: 12px;
	background:    var(--smacct-surface);
}

.smacct-booking-date {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	min-width:       52px;
	background:      var(--smacct-primary);
	color:           #fff;
	border-radius:   6px;
	padding:         8px 6px;
	font-weight:     700;
	line-height:     1.2;
	text-align:      center;
}

.smacct-booking-date .day  { font-size: 22px; }
.smacct-booking-date .mon  { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }

.smacct-booking-info {
	flex: 1;
	min-width: 0;
}

.smacct-booking-title {
	font-weight: 700;
	font-size:   15px;
	margin:      0 0 4px;
}

.smacct-booking-meta {
	font-size:  13px;
	color:      var(--smacct-muted);
	margin:     0;
}

.smacct-booking-status {
	display:       inline-block;
	padding:       3px 10px;
	border-radius: 12px;
	font-size:     12px;
	font-weight:   600;
	margin-top:    6px;
}

.smacct-booking-status--pending   { background:#fef3c7; color:#92400e; }
.smacct-booking-status--confirmed { background:#d1fae5; color:#065f46; }
.smacct-booking-status--completed { background:#e0e7ff; color:#3730a3; }
.smacct-booking-status--cancelled { background:#f1f5f9; color:#475569; }
.smacct-booking-status--no_show   { background:#fee2e2; color:#991b1b; }

.smacct-booking-actions {
	display:        flex;
	flex-direction: column;
	align-items:    flex-end;
	gap:            8px;
	flex-shrink:    0;
}

.smacct-booking-cost {
	font-size:   15px;
	font-weight: 700;
	color:       var(--smacct-text);
}

.smacct-empty {
	padding:    32px 0;
	text-align: center;
	color:      var(--smacct-muted);
	font-size:  14px;
}

/* ── Payment history ───────────────────────────────────────────────────────── */

.smacct-payment-row {
	display:       flex;
	align-items:   center;
	padding:       14px 0;
	border-bottom: 1px solid var(--smacct-border);
	gap:           16px;
}

.smacct-payment-row:last-child { border-bottom: none; }

.smacct-payment-date {
	font-size:  13px;
	color:      var(--smacct-muted);
	min-width:  90px;
}

.smacct-payment-desc {
	flex: 1;
	font-size: 14px;
}

.smacct-payment-amount {
	font-size:   15px;
	font-weight: 700;
}

.smacct-payment-status {
	font-size:     12px;
	font-weight:   600;
	padding:       3px 10px;
	border-radius: 12px;
}

.smacct-payment-status--paid     { background:#d1fae5; color:#065f46; }
.smacct-payment-status--refunded { background:#fef3c7; color:#92400e; }
.smacct-payment-status--voided   { background:#f1f5f9; color:#475569; }
.smacct-payment-status--pending  { background:#fef3c7; color:#92400e; }

/* ── Saved cards ───────────────────────────────────────────────────────────── */

.smacct-card-row {
	display:       flex;
	align-items:   center;
	gap:           12px;
	padding:       12px 16px;
	background:    var(--smacct-surface);
	border:        1px solid var(--smacct-border);
	border-radius: 8px;
	margin-bottom: 10px;
}

.smacct-card-row--default {
	border-color:  #2271b1;
}

.smacct-card-label {
	flex:        1;
	font-size:   14px;
	font-weight: 500;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: .03em;
}

.smacct-card-default-badge {
	font-size:     11px;
	font-weight:   600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color:          #2271b1;
	background:     #dbeafe;
	border-radius:  10px;
	padding:        2px 8px;
}

.smacct-card-actions {
	display:    flex;
	gap:        8px;
	flex-shrink: 0;
}

.smacct-card-action {
	font-size:     12px;
	font-weight:   500;
	padding:       5px 12px;
	border-radius: 5px;
	border:        1px solid var(--smacct-border);
	background:    #fff;
	cursor:        pointer;
	transition:    background .15s;
}

.smacct-card-action:hover { background: #f6f7f7; }

.smacct-card-action--remove {
	color:        #d63638;
	border-color: #d63638;
}

.smacct-card-action--remove:hover {
	background: #fff0f0;
}

/* ── Gift card "Add to Account" button ─────────────────────────────────────── */

.smacct-gc-add-btn {
	font-size:     12px;
	font-weight:   600;
	padding:       5px 12px;
	border-radius: 5px;
	border:        1px solid #2271b1;
	background:    #fff;
	color:         #2271b1;
	cursor:        pointer;
	transition:    background .15s, color .15s;
	white-space:   nowrap;
}

.smacct-gc-add-btn:hover:not(:disabled) {
	background: #2271b1;
	color:      #fff;
}

.smacct-gc-add-btn:disabled {
	opacity: .6;
	cursor:  default;
}

.smacct-no-payment-methods {
	background:    var(--smacct-surface);
	border:        1px solid var(--smacct-border);
	border-radius: 8px;
	padding:       24px;
	text-align:    center;
	color:         var(--smacct-muted);
	font-size:     14px;
	margin-bottom: 20px;
}

/* ── Section heading ───────────────────────────────────────────────────────── */

.smacct-section-title {
	font-size:     16px;
	font-weight:   700;
	margin:        0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--smacct-border);
}

/* ── Account Funds panel ───────────────────────────────────────────────────── */

.smacct-funds-balance-box {
	background:    var(--smacct-primary, #1d4ed8);
	color:         #fff;
	border-radius: 10px;
	padding:       20px 24px;
	margin-bottom: 28px;
	display:       inline-block;
	min-width:     200px;
}

.smacct-funds-balance-label {
	font-size:   12px;
	font-weight: 600;
	opacity:     .8;
	margin:      0 0 4px;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.smacct-funds-balance-amount {
	font-size:   28px;
	font-weight: 700;
	margin:      0;
}

.smacct-funds-gc-section {
	margin-bottom: 32px;
}

.smacct-funds-gc-title {
	font-size:   15px;
	font-weight: 700;
	margin:      0 0 6px;
}

.smacct-funds-gc-note {
	font-size:   13px;
	color:       var(--smacct-muted);
	margin:      0 0 14px;
}

.smacct-funds-gc-row {
	display:   flex;
	gap:       10px;
	flex-wrap: wrap;
	align-items: center;
}

.smacct-funds-gc-input {
	flex:        1 1 200px;
	min-width:   160px;
	max-width:   280px;
	padding:     9px 12px;
	border:      1px solid var(--smacct-border);
	border-radius: 6px;
	font-size:   14px;
}

.smacct-funds-txn-section { }

.smacct-funds-txn-title {
	font-size:     15px;
	font-weight:   700;
	margin:        0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--smacct-border);
}

.smacct-funds-txn-row {
	display:       grid;
	grid-template-columns: 110px 1fr 1fr auto;
	gap:           8px;
	align-items:   center;
	padding:       10px 0;
	border-bottom: 1px solid var(--smacct-border);
	font-size:     14px;
}

.smacct-funds-txn-date   { color: var(--smacct-muted); font-size: 13px; }
.smacct-funds-txn-type   { font-weight: 600; }
.smacct-funds-txn-note   { color: var(--smacct-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.smacct-funds-txn-amount {
	font-weight: 700;
	text-align:  right;
	white-space: nowrap;
}

.smacct-funds-txn-amount--credit { color: #065f46; }
.smacct-funds-txn-amount--debit  { color: #991b1b; }

.smacct-funds-pager {
	display:         flex;
	align-items:     center;
	gap:             12px;
	justify-content: center;
	margin-top:      20px;
}

.smacct-funds-pager-label {
	font-size: 14px;
	color:     var(--smacct-muted);
}

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

@media (max-width: 560px) {
	.smacct-header { padding: 16px; gap: 12px; }
	.smacct-avatar { width: 44px; height: 44px; font-size: 18px; }
	.smacct-panel  { padding: 20px 16px; }
	.smacct-form-row { flex-direction: column; }
	.smacct-field  { min-width: unset; }
	.smacct-booking-card { flex-wrap: wrap; }
	.smacct-booking-actions { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}