/* ── Swing Mana Store Widget ─────────────────────────────────────────────────
 * Variables mirror the booking calendar palette so they blend on the same page.
 * ─────────────────────────────────────────────────────────────────────────── */

.swingmana-store-wrap {
	--sms-primary:      #166534;
	--sms-primary-mid:  #15803d;
	--sms-accent:       #16a34a;
	--sms-accent-light: #dcfce7;
	--sms-text:         #1a1a1a;
	--sms-muted:        #6b7280;
	--sms-border:       #e5e7eb;
	--sms-bg:           #ffffff;
	--sms-card-shadow:  0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
	--sms-radius:       12px;
	--sms-radius-sm:    8px;

	font-family:   inherit;
	color:         var(--sms-text);
	line-height:   1.5;
	box-sizing:    border-box;
}
.swingmana-store-wrap *, .swingmana-store-wrap *::before, .swingmana-store-wrap *::after {
	box-sizing: inherit;
}

/* ── Loading / Error ────────────────────────────────────────────────────────── */

.sms-loading, .sms-error {
	text-align: center;
	padding:    48px 24px;
	color:      var(--sms-muted);
}
.sms-spinner {
	display:       inline-block;
	width:         36px;
	height:        36px;
	border:        3px solid var(--sms-border);
	border-top:    3px solid var(--sms-accent);
	border-radius: 50%;
	animation:     sms-spin .7s linear infinite;
	margin-bottom: 12px;
}
@keyframes sms-spin { to { transform: rotate(360deg); } }

/* ── Login notice ──────────────────────────────────────────────────────────── */

.sms-login-notice {
	text-align:    center;
	background:    var(--sms-accent-light);
	border:        1px solid #bbf7d0;
	border-radius: var(--sms-radius);
	padding:       32px 24px;
	margin:        24px 0;
}
.sms-login-notice p { margin: 0 0 16px; }
.sms-login-notice a {
	display:          inline-block;
	background:       var(--sms-accent);
	color:            #fff;
	padding:          10px 24px;
	border-radius:    var(--sms-radius-sm);
	text-decoration:  none;
	font-weight:      600;
}
.sms-login-notice a:hover { background: var(--sms-primary); }

/* ── Browse view ───────────────────────────────────────────────────────────── */

.sms-browse {}

.sms-section { margin-bottom: 48px; }

.sms-section-title {
	font-size:     20px;
	font-weight:   700;
	color:         var(--sms-text);
	margin:        0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--sms-border);
}

.sms-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap:                   20px;
}

/* ── Product card ─────────────────────────────────────────────────────────── */

.sms-card {
	background:    var(--sms-bg);
	border:        1px solid var(--sms-border);
	border-radius: var(--sms-radius);
	padding:       24px;
	cursor:        pointer;
	transition:    transform .15s, box-shadow .15s, border-color .15s;
	position:      relative;
	display:       flex;
	flex-direction: column;
}
.sms-card:hover {
	transform:     translateY(-2px);
	box-shadow:    var(--sms-card-shadow);
	border-color:  var(--sms-accent);
}

.sms-card-icon {
	width:         44px;
	height:        44px;
	border-radius: 10px;
	background:    var(--sms-accent-light);
	display:       flex;
	align-items:   center;
	justify-content: center;
	margin-bottom: 14px;
	font-size:     22px;
}

.sms-card-name {
	font-size:   17px;
	font-weight: 700;
	margin:      0 0 6px;
	color:       var(--sms-text);
}

.sms-card-blurb {
	font-size:  13px;
	color:      var(--sms-muted);
	margin:     0 0 16px;
	flex:       1;
	/* Clamp to 3 lines */
	display:         -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:        hidden;
}

.sms-card-footer {
	display:     flex;
	align-items: center;
	justify-content: space-between;
	margin-top:  auto;
	gap:         8px;
	flex-wrap:   wrap;
}

.sms-card-price {
	font-size:   22px;
	font-weight: 800;
	color:       var(--sms-primary);
	line-height: 1;
}
.sms-card-price-tax {
	font-size:   11px;
	font-weight: 400;
	color:       var(--sms-muted);
	display:     block;
	margin-top:  1px;
	font-style:  italic;
}
.sms-card-price-sub {
	font-size:   12px;
	font-weight: 400;
	color:       var(--sms-muted);
	display:     block;
	margin-top:  2px;
}

.sms-badge {
	display:          inline-block;
	background:       var(--sms-accent);
	color:            #fff;
	font-size:        11px;
	font-weight:      700;
	padding:          3px 8px;
	border-radius:    999px;
	letter-spacing:   .03em;
	text-transform:   uppercase;
	white-space:      nowrap;
}
.sms-badge--bonus { background: #d97706; }

.sms-card-cta {
	display:          inline-flex;
	align-items:      center;
	gap:              4px;
	background:       var(--sms-accent-light);
	color:            var(--sms-accent);
	font-size:        13px;
	font-weight:      600;
	padding:          6px 14px;
	border-radius:    999px;
	border:           none;
	cursor:           pointer;
	transition:       background .15s, color .15s;
	white-space:      nowrap;
}
.sms-card-cta:hover { background: var(--sms-accent); color: #fff; }

/* ── Detail view ───────────────────────────────────────────────────────────── */

.sms-detail {}

.sms-back-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	background:      none;
	border:          none;
	color:           var(--sms-muted);
	font-size:       14px;
	cursor:          pointer;
	padding:         0 0 20px;
	font-family:     inherit;
	transition:      color .15s;
}
.sms-back-btn:hover { color: var(--sms-text); }

.sms-detail-body {
	display:   grid;
	grid-template-columns: 1fr minmax(260px, 340px);
	gap:       32px;
	align-items: start;
}
@media (max-width: 720px) {
	.sms-detail-body { grid-template-columns: 1fr; }
}

.sms-detail-icon {
	width:         56px;
	height:        56px;
	border-radius: 14px;
	background:    var(--sms-accent-light);
	display:       flex;
	align-items:   center;
	justify-content: center;
	font-size:     28px;
	margin-bottom: 16px;
}

.sms-detail-name {
	font-size:   28px;
	font-weight: 800;
	margin:      0 0 8px;
}

.sms-detail-type-tag {
	display:          inline-block;
	background:       var(--sms-border);
	color:            var(--sms-muted);
	font-size:        12px;
	font-weight:      600;
	padding:          3px 10px;
	border-radius:    999px;
	margin-bottom:    20px;
	text-transform:   uppercase;
	letter-spacing:   .05em;
}

.sms-detail-description {
	font-size:  15px;
	color:      var(--sms-muted);
	margin:     0 0 24px;
	line-height: 1.65;
}

.sms-features {
	list-style:  none;
	margin:      0 0 24px;
	padding:     0;
}
.sms-features li {
	display:      flex;
	align-items:  flex-start;
	gap:          10px;
	font-size:    14px;
	color:        var(--sms-text);
	padding:      8px 0;
	border-bottom: 1px solid var(--sms-border);
}
.sms-features li:last-child { border-bottom: none; }
.sms-features li::before {
	content:     '✓';
	color:       var(--sms-accent);
	font-weight: 700;
	flex-shrink: 0;
	margin-top:  1px;
}

/* ── Buy box (right column in detail) ─────────────────────────────────────── */

.sms-buy-box {
	background:    var(--sms-bg);
	border:        2px solid var(--sms-border);
	border-radius: var(--sms-radius);
	padding:       24px;
	position:      sticky;
	top:           24px;
}

.sms-buy-box-price {
	font-size:   32px;
	font-weight: 800;
	color:       var(--sms-primary);
	margin:      0 0 4px;
}
.sms-buy-box-sub {
	font-size:  13px;
	color:      var(--sms-muted);
	margin:     0 0 20px;
}
.sms-buy-box-face {
	font-size:     14px;
	background:    var(--sms-accent-light);
	border-radius: var(--sms-radius-sm);
	padding:       10px 14px;
	margin-bottom: 16px;
	color:         var(--sms-primary);
	font-weight:   600;
}

/* Gift card recipient fields */
.sms-recipient-fields { margin-bottom: 16px; }
.sms-recipient-fields label {
	display:       block;
	font-size:     13px;
	font-weight:   600;
	color:         var(--sms-text);
	margin-bottom: 4px;
}
.sms-recipient-fields input {
	width:         100%;
	padding:       9px 12px;
	border:        1px solid var(--sms-border);
	border-radius: var(--sms-radius-sm);
	font-size:     14px;
	font-family:   inherit;
	outline:       none;
	transition:    border-color .15s;
	margin-bottom: 10px;
}
.sms-recipient-fields input:focus { border-color: var(--sms-accent); }

.sms-buy-btn {
	width:         100%;
	background:    var(--sms-accent);
	color:         #fff;
	border:        none;
	border-radius: var(--sms-radius-sm);
	padding:       14px 0;
	font-size:     16px;
	font-weight:   700;
	cursor:        pointer;
	font-family:   inherit;
	transition:    background .15s;
}
.sms-buy-btn:hover { background: var(--sms-primary); }
.sms-buy-btn:disabled { opacity: .6; cursor: default; }

.sms-buy-note {
	font-size:  12px;
	color:      var(--sms-muted);
	text-align: center;
	margin-top: 10px;
}

/* ── Checkout view ─────────────────────────────────────────────────────────── */

.sms-checkout {}

.sms-checkout-summary {
	background:    var(--sms-accent-light);
	border:        1px solid #bbf7d0;
	border-radius: var(--sms-radius);
	padding:       20px 24px;
	margin-bottom: 24px;
	display:       flex;
	align-items:   center;
	justify-content: space-between;
	gap:           16px;
	flex-wrap:     wrap;
}
.sms-checkout-summary-name { font-size: 16px; font-weight: 700; }
.sms-checkout-summary-price {
	font-size:   24px;
	font-weight: 800;
	color:       var(--sms-primary);
	white-space: nowrap;
}
.sms-checkout-note {
	font-size:  13px;
	color:      var(--sms-muted);
	margin:     -12px 0 20px;
}
.sms-checkout-tax-note {
	font-size:  12px;
	color:      var(--sms-muted);
	margin:     -16px 0 20px;
	font-style: italic;
}

/* ── Account Funds checkout UI ──────────────────────────────────────────── */
.sms-funds-box {
	background:    var(--sms-bg);
	border:        1px solid var(--sms-border);
	border-radius: var(--sms-radius-sm);
	padding:       14px 16px;
	margin-bottom: 18px;
}
.sms-funds-row {
	display:     flex;
	align-items: center;
	gap:         10px;
}
.sms-funds-row input[type="checkbox"] {
	width:  18px;
	height: 18px;
	flex-shrink: 0;
	cursor: pointer;
}
.sms-funds-label {
	font-size:   14px;
	font-weight: 600;
	cursor:      pointer;
}
.sms-funds-note {
	font-size:  12px;
	color:      var(--sms-muted);
	margin:     6px 0 0 28px;
	font-style: italic;
}

.sms-payment-section {
	background:    var(--sms-bg);
	border:        1px solid var(--sms-border);
	border-radius: var(--sms-radius);
	padding:       24px;
}
.sms-payment-section h3 {
	font-size:   16px;
	font-weight: 700;
	margin:      0 0 16px;
}

.sms-pay-btn {
	width:         100%;
	background:    var(--sms-primary);
	color:         #fff;
	border:        none;
	border-radius: var(--sms-radius-sm);
	padding:       15px 0;
	font-size:     16px;
	font-weight:   700;
	cursor:        pointer;
	font-family:   inherit;
	transition:    background .15s;
	margin-top:    16px;
}
.sms-pay-btn:hover { background: var(--sms-accent); }
.sms-pay-btn:disabled { opacity: .6; cursor: default; }

.sms-error-msg {
	background:    #fef2f2;
	border:        1px solid #fecaca;
	border-radius: var(--sms-radius-sm);
	color:         #dc2626;
	padding:       12px 14px;
	font-size:     14px;
	margin-bottom: 16px;
}

/* ── Success view ─────────────────────────────────────────────────────────── */

.sms-success {
	text-align: center;
	padding:    48px 24px;
}
.sms-success-icon {
	width:            72px;
	height:           72px;
	background:       var(--sms-accent);
	border-radius:    50%;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	margin:           0 auto 20px;
	font-size:        32px;
	color:            #fff;
}
.sms-success h2 {
	font-size:   26px;
	font-weight: 800;
	margin:      0 0 10px;
}
.sms-success p {
	color:      var(--sms-muted);
	font-size:  15px;
	margin:     0 0 24px;
}
.sms-gift-code {
	display:          inline-block;
	background:       var(--sms-accent-light);
	border:           2px dashed var(--sms-accent);
	border-radius:    var(--sms-radius-sm);
	padding:          14px 24px;
	font-size:        22px;
	font-weight:      800;
	letter-spacing:   .1em;
	color:            var(--sms-primary);
	margin-bottom:    20px;
	font-family:      monospace;
}
.sms-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.sms-btn-outline {
	display:          inline-block;
	border:           2px solid var(--sms-accent);
	color:            var(--sms-accent);
	background:       none;
	padding:          10px 24px;
	border-radius:    var(--sms-radius-sm);
	font-size:        14px;
	font-weight:      600;
	cursor:           pointer;
	font-family:      inherit;
	text-decoration:  none;
	transition:       background .15s, color .15s;
}
.sms-btn-outline:hover { background: var(--sms-accent); color: #fff; }
.sms-btn-primary {
	display:          inline-block;
	background:       var(--sms-accent);
	color:            #fff;
	padding:          10px 24px;
	border-radius:    var(--sms-radius-sm);
	font-size:        14px;
	font-weight:      600;
	cursor:           pointer;
	font-family:      inherit;
	text-decoration:  none;
	border:           2px solid var(--sms-accent);
	transition:       background .15s;
}
.sms-btn-primary:hover { background: var(--sms-primary); border-color: var(--sms-primary); }

/* ── Already-member notice ───────────────────────────────────────────────── */
.sms-already-member {
	margin: 12px 0;
}
.sms-already-member p {
	margin: 0;
	line-height: 1.5;
}

/* ── Saved card recall ───────────────────────────────────────────────────── */

.sms-saved-cards-section {
	margin-bottom: 16px;
}

.sms-saved-cards-title {
	font-weight:   600;
	font-size:     14px;
	margin:        0 0 8px;
}

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

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

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

.sms-new-card-wrap {
	margin-top:    4px;
}

.sms-new-card-btn {
	background:    none;
	border:        none;
	color:         var(--sms-muted, #666);
	font-size:     12px;
	cursor:        pointer;
	text-decoration: underline;
	padding:       4px 0;
}
.sms-new-card-btn:hover { color: #333; }
.sms-new-card-btn--active { color: var(--sms-accent, #2271b1); font-weight: 600; }