/* TR Membership — Frontend Styles
   Appledill Framework v1.0
   Mobile-first · WCAG 2.1 AA · Dark-mode ready
   ============================================== */

:root {
	--trm-primary:       #e76f51;
	--trm-primary-dk:    #c95f43;
	--trm-secondary:     #2d3748;
	--trm-green:         #27ae60;
	--trm-red:           #e74c3c;
	--trm-border:        #e2e8f0;
	--trm-bg:            #f7f8fa;
	--trm-white:         #ffffff;
	--trm-text:          #1a202c;
	--trm-text-muted:    #718096;
	--trm-radius:        10px;
	--trm-radius-sm:     6px;
	--trm-shadow:        0 2px 12px rgba(0, 0, 0, .08);
	--trm-shadow-lg:     0 8px 32px rgba(0, 0, 0, .12);
	--trm-transition:    all .2s ease;
	--trm-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Reset wrapper ──────────────────────────────────── */
#tr-main-contentainer {
	font-family:  var(--trm-font);
	color:        var(--trm-text);
	line-height:  1.6;
	box-sizing:   border-box;
}

#tr-main-contentainer *,
#tr-main-contentainer *::before,
#tr-main-contentainer *::after {
	box-sizing: inherit;
}

.tr-membership-wrapper {
	max-width:  1200px;
	margin:     0 auto;
	padding:    24px 16px;
}

/* ── Registration steps ─────────────────────────────── */
.tr-membership-steps {
	margin-bottom: 40px;
}

.tr-steps-list {
	display:         flex;
	flex-wrap:       wrap;
	list-style:      none;
	margin:          0;
	padding:         0;
	gap:             0;
	counter-reset:   step;
}

.tr-step {
	flex:           1 1 0;
	min-width:      80px;
	position:       relative;
	text-align:     center;
	padding:        16px 8px;
	color:          var(--trm-text-muted);
	border-bottom:  3px solid var(--trm-border);
	transition:     var(--trm-transition);
}

.tr-step--active {
	color:          var(--trm-primary);
	border-bottom-color: var(--trm-primary);
	font-weight:    600;
}

.tr-step__number {
	display:        block;
	width:          32px;
	height:         32px;
	border-radius:  50%;
	background:     var(--trm-border);
	color:          var(--trm-text-muted);
	line-height:    32px;
	font-size:      14px;
	font-weight:    700;
	margin:         0 auto 6px;
	transition:     var(--trm-transition);
}

.tr-step--active .tr-step__number {
	background: var(--trm-primary);
	color:      var(--trm-white);
}

.tr-step__label {
	display:   block;
	font-size: 13px;
}

@media (max-width: 480px) {
	.tr-steps-list {
		flex-direction: column;
	}
	.tr-step {
		border-bottom:  none;
		border-left:    3px solid var(--trm-border);
		text-align:     left;
		display:        flex;
		align-items:    center;
		gap:            12px;
	}
	.tr-step--active {
		border-left-color: var(--trm-primary);
	}
	.tr-step__number { margin: 0; flex-shrink: 0; }
}

/* ── Membership plan cards ──────────────────────────── */
.tr-membership-plans {
	display:        grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap:            24px;
	margin-bottom:  40px;
}

.tr-membership-plan {
	background:     var(--trm-white);
	border:         2px solid var(--trm-border);
	border-radius:  var(--trm-radius);
	padding:        28px 24px;
	display:        flex;
	flex-direction: column;
	box-shadow:     var(--trm-shadow);
	transition:     var(--trm-transition);
}

.tr-membership-plan:hover,
.tr-membership-plan--featured {
	border-color:   var(--trm-primary);
	box-shadow:     var(--trm-shadow-lg);
	transform:      translateY(-2px);
}

.tr-membership-plan--featured {
	position: relative;
}

.tr-membership-plan--featured::before {
	content:        attr(data-badge);
	position:       absolute;
	top:            -14px;
	left:           50%;
	transform:      translateX(-50%);
	background:     var(--trm-primary);
	color:          var(--trm-white);
	font-size:      12px;
	font-weight:    700;
	padding:        4px 14px;
	border-radius:  20px;
	white-space:    nowrap;
}

.tr-plan-title {
	font-size:   1.3rem;
	font-weight: 700;
	color:       var(--trm-secondary);
	margin:      0 0 8px;
}

.tr-plan-price {
	font-size:   2.4rem;
	font-weight: 800;
	color:       var(--trm-primary);
	line-height: 1;
	margin:      12px 0 4px;
}

.tr-plan-price sup {
	font-size:      1rem;
	vertical-align: top;
	margin-top:     6px;
}

.tr-plan-price-interval {
	font-size:   0.875rem;
	color:       var(--trm-text-muted);
	margin:      0 0 16px;
}

.tr-plan-description {
	font-size:   0.9375rem;
	color:       var(--trm-text-muted);
	margin:      0 0 16px;
	flex:        1;
}

.tr-plan-features {
	list-style:  none;
	margin:      0 0 24px;
	padding:     0;
}

.tr-plan-features li {
	padding:     6px 0;
	border-bottom: 1px solid var(--trm-border);
	font-size:   0.9375rem;
	display:     flex;
	align-items: center;
	gap:         8px;
}

.tr-plan-features li::before {
	content:      "✓";
	color:        var(--trm-green);
	font-weight:  700;
	flex-shrink:  0;
}

/* ── Subscribe / CTA button ─────────────────────────── */
.tr-membership-subscribe-wrapper {
	margin-top: auto;
}

.tr-membership-subscribe-btn,
.tr-membership-cta {
	display:       block;
	width:         100%;
	padding:       14px 20px;
	background:    var(--trm-primary);
	color:         var(--trm-white);
	border:        none;
	border-radius: var(--trm-radius-sm);
	font-size:     1rem;
	font-weight:   700;
	cursor:        pointer;
	text-align:    center;
	text-decoration: none;
	transition:    var(--trm-transition);
}

.tr-membership-subscribe-btn:hover,
.tr-membership-cta:hover {
	background: var(--trm-primary-dk);
	color:      var(--trm-white);
}

.tr-membership-your-plan {
	background:    var(--trm-green);
	color:         var(--trm-white);
	text-align:    center;
	padding:       12px;
	border-radius: var(--trm-radius-sm);
	font-size:     0.9375rem;
	font-weight:   600;
}

/* ── Registration / Payment form ────────────────────── */
.tr-membership-form {
	background:    var(--trm-white);
	border:        1px solid var(--trm-border);
	border-radius: var(--trm-radius);
	padding:       32px;
	max-width:     640px;
	margin:        0 auto;
	box-shadow:    var(--trm-shadow);
}

.tr-membership-form h2 {
	font-size:     1.5rem;
	font-weight:   700;
	margin:        0 0 24px;
	color:         var(--trm-secondary);
}

.tr-form-row {
	display:       grid;
	grid-template-columns: 1fr;
	gap:           8px;
	margin-bottom: 20px;
}

@media (min-width: 600px) {
	.tr-form-row--2col {
		grid-template-columns: 1fr 1fr;
	}
}

.tr-form-row label {
	font-size:   0.9375rem;
	font-weight: 600;
	color:       var(--trm-text);
}

.tr-form-row label .required {
	color: var(--trm-red);
}

.tr-form-row input[type="text"],
.tr-form-row input[type="email"],
.tr-form-row input[type="password"],
.tr-form-row input[type="tel"],
.tr-form-row input[type="url"],
.tr-form-row select,
.tr-form-row textarea {
	width:         100%;
	padding:       11px 14px;
	border:        2px solid var(--trm-border);
	border-radius: var(--trm-radius-sm);
	font-size:     1rem;
	color:         var(--trm-text);
	background:    var(--trm-white);
	transition:    border-color .15s ease;
	outline:       none;
}

.tr-form-row input:focus,
.tr-form-row select:focus,
.tr-form-row textarea:focus {
	border-color: var(--trm-primary);
	box-shadow:   0 0 0 3px rgba(231, 111, 81, .15);
}

.tr-form-row textarea {
	min-height: 100px;
	resize:     vertical;
}

.tr-field-description {
	font-size: 0.8125rem;
	color:     var(--trm-text-muted);
	margin:    4px 0 0;
}

/* Email verification row */
.tr-verify-row {
	display:     flex;
	gap:         8px;
	align-items: flex-end;
}

.tr-verify-row input {
	flex: 1;
}

.tr-send-code-btn {
	white-space:   nowrap;
	padding:       11px 16px;
	background:    var(--trm-secondary);
	color:         var(--trm-white);
	border:        none;
	border-radius: var(--trm-radius-sm);
	font-size:     0.9375rem;
	cursor:        pointer;
	transition:    var(--trm-transition);
}

.tr-send-code-btn:hover { opacity: .88; }

/* ── Payment method selector ────────────────────────── */
.tr-payment-methods {
	display:   flex;
	flex-wrap: wrap;
	gap:       12px;
	margin:    0 0 24px;
}

.tr-payment-method {
	flex:          1 1 160px;
	border:        2px solid var(--trm-border);
	border-radius: var(--trm-radius-sm);
	padding:       16px;
	cursor:        pointer;
	transition:    var(--trm-transition);
	display:       flex;
	align-items:   center;
	gap:           10px;
}

.tr-payment-method:has(input:checked),
.tr-payment-method.is-selected {
	border-color: var(--trm-primary);
	background:   rgba(231, 111, 81, .06);
}

.tr-payment-method input[type="radio"] {
	accent-color: var(--trm-primary);
	width:        18px;
	height:       18px;
	flex-shrink:  0;
}

.tr-payment-method-label {
	font-weight: 600;
	font-size:   0.9375rem;
}

/* ── Stripe Payment Element container ───────────────── */
.tr-stripe-element-container {
	border:        2px solid var(--trm-border);
	border-radius: var(--trm-radius-sm);
	padding:       16px;
	margin-bottom: 20px;
	min-height:    80px;
}

/* ── Form submit ────────────────────────────────────── */
.tr-submit-wrapper {
	margin-top: 28px;
}

.tr-submit-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           8px;
	padding:       14px 32px;
	background:    var(--trm-primary);
	color:         var(--trm-white);
	border:        none;
	border-radius: var(--trm-radius-sm);
	font-size:     1rem;
	font-weight:   700;
	cursor:        pointer;
	transition:    var(--trm-transition);
	min-width:     140px;
	justify-content: center;
}

.tr-submit-btn:hover   { background: var(--trm-primary-dk); }
.tr-submit-btn:disabled {
	opacity:        0.6;
	cursor:         not-allowed;
	pointer-events: none;
}

.tr-submit-btn .tr-spinner {
	display:       none;
	width:         18px;
	height:        18px;
	border:        2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation:     tr-spin .7s linear infinite;
}

.tr-submit-btn.is-loading .tr-spinner { display: block; }
.tr-submit-btn.is-loading .tr-btn-text { display: none; }

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

/* ── Notices ────────────────────────────────────────── */
.tr-notice {
	padding:       14px 18px;
	border-radius: var(--trm-radius-sm);
	margin-bottom: 20px;
	font-size:     0.9375rem;
	border-left:   4px solid transparent;
}

.tr-notice--error {
	background:  #fff5f5;
	border-color: var(--trm-red);
	color:       #c53030;
}

.tr-notice--success {
	background:  #f0fff4;
	border-color: var(--trm-green);
	color:       #276749;
}

.tr-notice--warning {
	background:  #fffbeb;
	border-color: #f6ad55;
	color:       #744210;
}

.tr-notice--info {
	background:  #ebf8ff;
	border-color: #63b3ed;
	color:       #2b6cb0;
}

/* ── Thank you page ─────────────────────────────────── */
.tr-thankyou {
	text-align: center;
	padding:    48px 24px;
}

.tr-thankyou__icon {
	font-size:    4rem;
	margin-bottom: 16px;
}

.tr-thankyou__title {
	font-size:    2rem;
	font-weight:  800;
	color:        var(--trm-secondary);
	margin:       0 0 12px;
}

.tr-thankyou__message {
	font-size:  1.0625rem;
	color:      var(--trm-text-muted);
	max-width:  480px;
	margin:     0 auto 28px;
}

/* ── Membership block (non-eligible) ────────────────── */
.tr-membership-block {
	text-align:  center;
	padding:     48px 24px;
	background:  var(--trm-bg);
	border-radius: var(--trm-radius);
}

/* ── Upgrade notice ─────────────────────────────────── */
.tr-upgrade-membership-notice {
	background:    var(--trm-bg);
	border:        1px solid var(--trm-border);
	border-radius: var(--trm-radius-sm);
	padding:       16px 20px;
	display:       flex;
	align-items:   center;
	flex-wrap:     wrap;
	gap:           12px;
}

/* ── Dark mode ──────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	:root {
		--trm-bg:         #1a202c;
		--trm-white:      #2d3748;
		--trm-text:       #e2e8f0;
		--trm-text-muted: #a0aec0;
		--trm-border:     #4a5568;
		--trm-secondary:  #e2e8f0;
	}

	.tr-form-row input,
	.tr-form-row select,
	.tr-form-row textarea {
		background: #2d3748;
		color:      #e2e8f0;
	}

	.tr-notice--error   { background: #2d1515; }
	.tr-notice--success { background: #1a2d1a; }
	.tr-notice--warning { background: #2d2a1a; }
	.tr-notice--info    { background: #1a2332; }
}

/* ── Stripe card element ────────────────────────────── */
#tr-stripe-card-element {
	background:    var(--trm-white);
	border:        2px solid var(--trm-border);
	border-radius: var(--trm-radius-sm);
	padding:       14px 16px;
	transition:    border-color .2s ease;
	min-height:    48px;
}

#tr-stripe-card-element.StripeElement--focus {
	border-color:  var(--trm-primary);
	box-shadow:    0 0 0 3px rgba(231, 111, 81, .15);
	outline:       none;
}

#tr-stripe-card-element.StripeElement--invalid {
	border-color:  var(--trm-red);
}

#tr-stripe-card-errors {
	color:       var(--trm-red);
	font-size:   .85rem;
	margin-top:  6px;
	display:     none;
}

/* ── PayPal button container ────────────────────────── */
#tr-paypal-button-container {
	margin-top: 12px;
	max-width:  400px;
}

/* ── Payment details panels ─────────────────────────── */
.tr-payment-details {
	display:       none;
	padding:       20px;
	border:        1px solid var(--trm-border);
	border-radius: var(--trm-radius-sm);
	margin-top:    12px;
	background:    var(--trm-bg);
}

/* ── Slug status inline ──────────────────────────────── */
.tr-slug-ok   { color: var(--trm-green); font-size: .85rem; margin-left: 8px; }
.tr-slug-taken { color: var(--trm-red);  font-size: .85rem; margin-left: 8px; }

/* ── Notice info variant ────────────────────────────── */
.tr-notice--info {
	background:    #ebf8ff;
	color:         #2b6cb0;
	border-left:   4px solid #4299e1;
}

/* ── Print ──────────────────────────────────────────── */
@media print {
	.tr-membership-steps,
	.tr-membership-subscribe-wrapper,
	.tr-submit-wrapper { display: none; }
}