/*
 * Story Subscription — Widget Styles
 *
 * IMPORTANT: every rule is scoped to .ew-sub so that shared class names
 * (.ew-format-btn, .ew-radio-dot, .ew-format-list, .ew-text-input …) do
 * not bleed into the Story Add-to-Cart widget when both are on the same page.
 *
 * Design tokens are set on .ew-atc.ew-sub as CSS custom properties;
 * Elementor's scoped <style> block overrides them per widget instance.
 *
 * Responsive:
 *   Desktop  ≥ 768 px : two-column grid (steps | summary)
 *   Mobile   < 768 px : single-column — !important overrides the
 *                        inline grid-template-columns from PHP
 *
 * @package ElementorWidgets
 */

/* ============================================================
   Design-token fallbacks (scoped to subscription root)
   ============================================================ */
.ew-atc.ew-sub {
	--ew-gold:       #C9A84C;
	--ew-gold-dim:   rgba(201, 168, 76, 0.14);
	--ew-bg:         #0B1535;
	--ew-parchment:  #F0E6D0;
	--ew-muted:      rgba(240, 230, 208, 0.55);
	--ew-card:       rgba(255, 255, 255, 0.04);
	--ew-border:     rgba(255, 255, 255, 0.11);
	--ew-radius:     12px;
	--ew-transition: 0.18s ease;
}

/* ============================================================
   Root container
   ============================================================ */
.ew-atc.ew-sub {
	box-sizing:  border-box;
	font-family: inherit;
	color:       var(--ew-parchment);
	width:       100%;
}

.ew-atc.ew-sub *,
.ew-atc.ew-sub *::before,
.ew-atc.ew-sub *::after {
	box-sizing: border-box;
}

.ew-sub .ew-atc-form {
	width:   100%;
	margin:  0;
	padding: 0;
}

/* ============================================================
   Two-column layout grid
   ============================================================ */
.ew-sub .ew-atc-layout {
	display: grid;
	width:   100%;
}

/* ============================================================
   Left column — step cards
   ============================================================ */
.ew-sub .ew-atc-config {
	display:        flex;
	flex-direction: column;
	min-width:      0;
}

/* ============================================================
   Step cards
   ============================================================ */
.ew-sub .ew-step {
	background:    var(--ew-card);
	border:        1px solid var(--ew-border);
	border-radius: var(--ew-radius);
	padding:       20px 20px 20px 24px;
}

.ew-sub .ew-step__title {
	font-size:      0.72rem;
	font-weight:    700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--ew-muted);
	margin:         0 0 0.75rem;
	padding:        0;
	line-height:    1.2;
}

.ew-sub .ew-step__hint {
	font-size:   0.78rem;
	color:       var(--ew-muted);
	margin:      0.5rem 0 0;
	line-height: 1.45;
}

/* ============================================================
   Format button list (book type)
   ============================================================ */
.ew-sub .ew-format-list {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}

.ew-sub .ew-format-btn {
	display:       flex;
	align-items:   center;
	gap:           0.65rem;
	width:         100%;
	padding:       14px 16px;
	background:    rgba(255, 255, 255, 0.03);
	border:        1px solid var(--ew-border);
	border-radius: 8px;
	cursor:        pointer;
	transition:    border-color var(--ew-transition), background var(--ew-transition);
	min-width:     0;
}

.ew-sub .ew-format-btn:hover {
	border-color: var(--ew-gold);
	background:   var(--ew-gold-dim);
}

.ew-sub .ew-format-btn.is-selected {
	border-color: var(--ew-gold);
	background:   var(--ew-gold-dim);
}

/* ── Radio dot — scoped to subscription only ── */
.ew-sub .ew-radio-dot {
	flex-shrink:   0;
	width:         18px;
	height:        18px;
	border-radius: 50%;
	border:        2px solid var(--ew-border);
	position:      relative;
	transition:    border-color var(--ew-transition),
	               background   var(--ew-transition);
}

.ew-sub .ew-format-btn.is-selected .ew-radio-dot {
	border-color: var(--ew-gold);
	background:   var(--ew-gold);
}

/* Checkmark inside selected dot — matches story-add-to-cart.css */
.ew-sub .ew-format-btn.is-selected .ew-radio-dot::after {
	content:       '';
	position:      absolute;
	top:           3px;
	left:          3px;
	width:         8px;
	height:        5px;
	border-left:   2px solid var(--ew-bg);
	border-bottom: 2px solid var(--ew-bg);
	transform:     rotate(-45deg);
}

.ew-sub .ew-format-btn__body {
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            0.1rem;
	min-width:      0;
}

.ew-sub .ew-format-btn__label {
	font-size:   0.92rem;
	font-weight: 600;
	color:       var(--ew-parchment);
	line-height: 1.2;
}

.ew-sub .ew-format-btn__desc {
	font-size: 0.76rem;
	color:     var(--ew-muted);
}

.ew-sub .ew-format-btn__price {
	font-size:   0.92rem;
	font-weight: 600;
	color:       var(--ew-gold);
	white-space: nowrap;
	margin-left: auto;
	flex-shrink: 0;
}

/* ============================================================
   Language / Age pills
   ============================================================ */
.ew-sub .ew-lang-pills,
.ew-sub .ew-age-pills {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
}

.ew-sub .ew-lang-pill,
.ew-sub .ew-age-pill {
	display:       inline-flex;
	align-items:   center;
	padding:       8px 18px;
	border:        1px solid rgba(201, 168, 76, 0.40);
	border-radius: 9999px;
	cursor:        pointer;
	font-size:     0.86rem;
	color:         var(--ew-parchment);
	transition:    background   var(--ew-transition),
	               color        var(--ew-transition),
	               border-color var(--ew-transition);
	white-space:   nowrap;
}

.ew-sub .ew-lang-pill:hover,
.ew-sub .ew-age-pill:hover {
	border-color: var(--ew-gold);
}

.ew-sub .ew-lang-pill.is-selected,
.ew-sub .ew-age-pill.is-selected {
	background:  var(--ew-gold);
	border-color: var(--ew-gold);
	color:        var(--ew-bg);
	font-weight:  600;
}

/* ============================================================
   Child name + Birthdate row
   ============================================================ */
.ew-sub .ew-name-birthday-row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   16px;
}

.ew-sub .ew-name-birthday-col {
	display:        flex;
	flex-direction: column;
	gap:            4px;
}

/* ============================================================
   Text inputs
   ============================================================ */
.ew-sub .ew-text-input {
	display:            block;
	width:              100%;
	padding:            12px 16px;
	background:         rgba(255, 255, 255, 0.05);
	border:             1px solid var(--ew-border);
	border-radius:      8px;
	color:              var(--ew-parchment);
	font-family:        inherit;
	font-size:          0.92rem;
	line-height:        1.4;
	transition:         border-color var(--ew-transition), box-shadow var(--ew-transition);
	-webkit-appearance: none;
	appearance:         none;
}

.ew-sub .ew-text-input::placeholder {
	color:   var(--ew-muted);
	opacity: 1;
}

.ew-sub .ew-text-input:focus {
	outline:      none;
	border-color: var(--ew-gold);
	box-shadow:   0 0 0 3px rgba(201, 168, 76, 0.20);
}

.ew-sub .ew-text-input[type="date"]::-webkit-calendar-picker-indicator {
	filter:  invert(0.7) sepia(1) saturate(3) hue-rotate(5deg);
	opacity: 0.7;
	cursor:  pointer;
}

/* ============================================================
   Order Summary card (right column)
   ============================================================ */
.ew-sub .ew-atc-summary {
	background:     var(--ew-card);
	border:         1px solid var(--ew-border);
	border-radius:  var(--ew-radius);
	padding:        24px;
	display:        flex;
	flex-direction: column;
	gap:            16px;
	align-self:     start;
}

.ew-sub .ew-sum__heading {
	font-size:      0.72rem;
	font-weight:    700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--ew-gold);
	margin:         0;
}

.ew-sub .ew-sum__product {
	display:     flex;
	align-items: center;
	gap:         12px;
}

.ew-sub .ew-sum__thumb {
	width:         56px;
	height:        56px;
	object-fit:    cover;
	border-radius: 6px;
	flex-shrink:   0;
	border:        1px solid var(--ew-border);
}

.ew-sub .ew-sum__product-info {
	display:        flex;
	flex-direction: column;
	gap:            2px;
	min-width:      0;
}

.ew-sub .ew-sum__product-name {
	font-size:   0.95rem;
	font-weight: 600;
	color:       var(--ew-parchment);
	line-height: 1.3;
}

.ew-sub .ew-sum__product-meta {
	font-size: 0.78rem;
	color:     var(--ew-muted);
}

.ew-sub .ew-sum__rows {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}

.ew-sub .ew-sum__row {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	gap:             8px;
	font-size:       0.86rem;
}

.ew-sub .ew-sum__key {
	color:       var(--ew-muted);
	flex-shrink: 0;
}

.ew-sub .ew-sum__val {
	color:       var(--ew-parchment);
	font-weight: 500;
	text-align:  right;
	word-break:  break-word;
}

.ew-sub .ew-sum__val--muted {
	color: var(--ew-muted);
}

.ew-sub .ew-sum__divider {
	border:     none;
	border-top: 1px solid var(--ew-border);
	margin:     4px 0;
}

.ew-sub .ew-sum__total-row {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
	gap:             8px;
	margin-top:      4px;
}

.ew-sub .ew-sum__total-key {
	font-size:      0.72rem;
	font-weight:    700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--ew-parchment);
}

.ew-sub .ew-sum__total-val {
	font-size:   1.35rem;
	font-weight: 700;
	color:       var(--ew-gold);
}

/* ============================================================
   Subscribe button
   ============================================================ */
.ew-sub .ew-atc-btn,
.ew-sub .ew-sub-btn {
	display:            block;
	width:              100%;
	padding:            14px 20px;
	background:         var(--ew-gold);
	color:              var(--ew-bg);
	border:             none;
	border-radius:      var(--ew-radius);
	font-family:        inherit;
	font-size:          0.88rem;
	font-weight:        700;
	letter-spacing:     0.06em;
	text-align:         center;
	cursor:             pointer;
	transition:         background var(--ew-transition), transform 0.1s ease, opacity var(--ew-transition);
	-webkit-appearance: none;
	appearance:         none;
}

.ew-sub .ew-atc-btn:hover:not(:disabled),
.ew-sub .ew-sub-btn:hover:not(:disabled) {
	background: #b5952c;
	transform:  translateY(-1px);
}

.ew-sub .ew-atc-btn:active:not(:disabled),
.ew-sub .ew-sub-btn:active:not(:disabled) {
	transform: translateY(0);
}

.ew-sub .ew-atc-btn:disabled,
.ew-sub .ew-sub-btn:disabled {
	opacity: 0.45;
	cursor:  not-allowed;
}

.ew-sub .ew-sum__guarantee {
	font-size:   0.76rem;
	color:       var(--ew-muted);
	text-align:  center;
	margin:      0;
	line-height: 1.5;
}

/* ============================================================
   Accessibility — visually hidden inputs inside labels
   (.ew-sr-only is safe to keep global — no visual impact)
   ============================================================ */
.ew-sr-only {
	position:   absolute;
	width:      1px;
	height:     1px;
	padding:    0;
	margin:     -1px;
	overflow:   hidden;
	clip:       rect(0, 0, 0, 0);
	white-space: nowrap;
	border:     0;
}

/* ============================================================
   Responsive — Tablet (< 1024 px)
   ============================================================ */
@media (max-width: 1024px) {
	.ew-sub .ew-atc-summary {
		padding: 20px;
	}

	.ew-sub .ew-step {
		padding: 16px 16px 16px 20px;
	}
}

/* ============================================================
   Responsive — Mobile (< 768 px)
   !important beats the inline grid-template-columns from PHP.
   ============================================================ */
@media (max-width: 767px) {

	.ew-sub .ew-atc-layout {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	.ew-sub .ew-atc-config  { order: 1; }
	.ew-sub .ew-atc-summary { order: 2; }

	.ew-sub .ew-atc-summary {
		position: static !important;
		padding:  20px 16px;
	}

	.ew-sub .ew-step {
		padding: 16px;
	}

	/* Force format buttons vertical regardless of Elementor orientation setting */
	.ew-sub .ew-step--format .ew-format-list {
		flex-direction: column !important;
		align-items:    stretch !important;
	}

	.ew-sub .ew-step--format .ew-format-btn {
		flex:           unset !important;
		flex-direction: row !important;
		align-items:    center !important;
		text-align:     left !important;
		width:          100% !important;
		min-width:      0 !important;
	}

	.ew-sub .ew-step--format .ew-format-btn .ew-radio-dot {
		display: block !important;
	}

	.ew-sub .ew-step--format .ew-format-btn__body {
		align-items: flex-start !important;
	}

	.ew-sub .ew-format-btn {
		padding: 12px;
		gap:     0.5rem;
	}

	.ew-sub .ew-format-btn__label {
		font-size: 0.88rem;
	}

	.ew-sub .ew-format-btn__price {
		font-size: 0.88rem;
	}

	.ew-sub .ew-name-birthday-row {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.ew-sub .ew-lang-pills,
	.ew-sub .ew-age-pills {
		gap: 6px;
	}

	.ew-sub .ew-lang-pill,
	.ew-sub .ew-age-pill {
		padding:   6px 14px;
		font-size: 0.82rem;
	}

	.ew-sub .ew-sum__thumb {
		width:  44px;
		height: 44px;
	}

	.ew-sub .ew-sum__total-val {
		font-size: 1.15rem;
	}

	.ew-sub .ew-atc-btn,
	.ew-sub .ew-sub-btn {
		font-size: 0.9rem;
		padding:   13px 16px;
	}
}

/* ============================================================
   Responsive — Small Mobile (< 400 px)
   ============================================================ */
@media (max-width: 400px) {
	.ew-sub .ew-step {
		padding: 14px 12px;
	}

	.ew-sub .ew-format-btn {
		padding: 10px;
	}
}