/*
 * Story Add to Cart — Widget Styles
 * Dark luxury design matching DearStoryTime brand.
 * Two-column layout: config steps (left) + live order summary (right).
 *
 * @package ElementorWidgets
 */

/* ============================================================
   Design tokens
   ============================================================ */
.ew-atc {
	--ew-bg:          #0B1535;
	--ew-card:        rgba(255, 255, 255, 0.04);
	--ew-card-hover:  rgba(255, 255, 255, 0.07);
	--ew-gold:        #C9A84C;
	--ew-gold-dim:    rgba(201, 168, 76, 0.14);
	--ew-gold-ring:   rgba(201, 168, 76, 0.30);
	--ew-gold-border: rgba(201, 168, 76, 0.40);
	--ew-parchment:   #F0E6D0;
	--ew-muted:       rgba(240, 230, 208, 0.55);
	--ew-border:      rgba(255, 255, 255, 0.11);
	--ew-radius:      12px;
	--ew-radius-sm:   8px;
	--ew-font-d:      'Cormorant Garamond', Georgia, serif;
	--ew-font-b:      'Lora', Georgia, serif;
	--ew-shadow:      0 8px 40px rgba(0, 0, 0, 0.35);
	--ew-t:           0.20s ease;
}

/* ============================================================
   Root wrapper
   ============================================================ */
.ew-atc {
	font-family: var(--ew-font-b);
	color:       var(--ew-parchment);
}

/* ============================================================
   Two-column layout
   ============================================================ */
.ew-atc-layout {
	display:               grid;
	grid-template-columns: 1fr 360px;
	gap:                   24px;
	align-items:           start;
}

@media (max-width: 860px) {
	.ew-atc-layout {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Config column — left
   ============================================================ */
.ew-atc-config {
	display:        flex;
	flex-direction: column;
	gap:            24px;
}

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

.ew-step__title {
	font-family:  var(--ew-font-d);
	font-size:    1.05rem;
	font-weight:  500;
	color:        var(--ew-parchment);
	margin:       0 0 16px;
	line-height:  1.2;
	display:      flex;
	align-items:  baseline;
	gap:          6px;
}

.ew-step__n {
	color:        var(--ew-gold);
	font-family:  var(--ew-font-d);
	font-size:    1.1rem;
	font-weight:  600;
	flex-shrink:  0;
}

.ew-step__hint {
	font-size:   0.82rem;
	color:       var(--ew-muted);
	margin:      0 0 12px;
	line-height: 1.5;
}

/* ============================================================
   Visually-hidden inputs
   ============================================================ */
.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;
}

/* ============================================================
   Radio dot — shared indicator
   ============================================================ */
.ew-radio-dot {
	flex-shrink:   0;
	width:         18px;
	height:        18px;
	border-radius: 50%;
	border:        2px solid var(--ew-border);
	transition:    border-color var(--ew-t), background var(--ew-t), box-shadow var(--ew-t);
	position:      relative;
}

.ew-format-btn.is-selected .ew-radio-dot,
.ew-audio-btn[aria-pressed="true"] .ew-radio-dot {
	border-color: var(--ew-gold);
	background:   var(--ew-gold);
}

/* Checkmark inside selected radio dot */
.ew-format-btn.is-selected .ew-radio-dot::after,
.ew-audio-btn[aria-pressed="true"] .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);
}

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

.ew-format-btn {
	display:       flex;
	align-items:   center;
	gap:           12px;
	padding:       14px 16px;
	background:    rgba(255, 255, 255, 0.03);
	border:        1.5px solid var(--ew-border);
	border-radius: var(--ew-radius-sm);
	cursor:        pointer;
	box-sizing:    border-box;
	transition:    border-color var(--ew-t), background var(--ew-t);
}

.ew-format-btn:hover {
	border-color: var(--ew-gold-border);
	background:   rgba(201, 168, 76, 0.06);
}

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

.ew-format-btn__body {
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            2px;
	min-width:      0;
}

.ew-format-btn__label {
	font-family: var(--ew-font-d);
	font-size:   1rem;
	font-weight: 500;
	color:       var(--ew-parchment);
	line-height: 1.2;
}

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

.ew-format-btn__price {
	font-family: var(--ew-font-d);
	font-size:   1.05rem;
	font-weight: 600;
	color:       var(--ew-gold);
	white-space: nowrap;
	flex-shrink: 0;
}

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

.ew-lang-pill,
.ew-age-pill {
	display:       inline-flex;
	align-items:   center;
	padding:       8px 18px;
	border-radius: 9999px;
	border:        1.5px solid var(--ew-gold-border);
	font-family:   var(--ew-font-d);
	font-size:     0.95rem;
	color:         rgba(240, 230, 208, 0.8);
	cursor:        pointer;
	transition:    background var(--ew-t), color var(--ew-t), border-color var(--ew-t);
}

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

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

/* ============================================================
   Text inputs — name + birthday
   ============================================================ */
.ew-text-input {
	display:       block;
	width:         100%;
	padding:       12px 16px;
	background:    rgba(255, 255, 255, 0.05);
	border:        1.5px solid var(--ew-border);
	border-radius: var(--ew-radius-sm);
	font-family:   var(--ew-font-b);
	font-size:     0.95rem;
	color:         var(--ew-parchment);
	box-sizing:    border-box;
	transition:    border-color var(--ew-t), box-shadow var(--ew-t);
	outline:       none;
	margin-bottom: 14px;
}

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

.ew-text-input:focus {
	border-color: var(--ew-gold);
	box-shadow:   0 0 0 3px var(--ew-gold-ring);
}

input[type="date"].ew-text-input {
	color-scheme: dark;
}

.ew-sublabel {
	display:        block;
	font-family:    var(--ew-font-d);
	font-size:      0.85rem;
	font-weight:    500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color:          var(--ew-gold);
	margin-bottom:  6px;
}

.ew-optional {
	font-weight:    400;
	text-transform: none;
	letter-spacing: 0;
	color:          var(--ew-muted);
	font-size:      0.82rem;
}

/* ============================================================
   Audio add-on toggle
   ============================================================ */
.ew-audio-btn {
	display:       flex;
	align-items:   center;
	gap:           12px;
	padding:       14px 16px;
	background:    rgba(255, 255, 255, 0.03);
	border:        1.5px solid var(--ew-border);
	border-radius: var(--ew-radius-sm);
	cursor:        pointer;
	box-sizing:    border-box;
	transition:    border-color var(--ew-t), background var(--ew-t);
}

.ew-audio-btn:hover        { border-color: var(--ew-gold-border); background: rgba(201,168,76,0.06); }
.ew-audio-btn[aria-pressed="true"] { border-color: var(--ew-gold); background: var(--ew-gold-dim); }

.ew-audio-btn__body        { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ew-audio-btn__label       { font-family: var(--ew-font-d); font-size: 1rem; font-weight: 500; color: var(--ew-parchment); }
.ew-audio-btn__desc        { font-size: 0.78rem; color: var(--ew-muted); }
.ew-audio-btn__price       { font-family: var(--ew-font-d); font-size: 0.95rem; font-weight: 600; color: var(--ew-gold); white-space: nowrap; }

/* ============================================================
   Summary column — right
   ============================================================ */
.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:           20px;
	position:      sticky;
	top:           100px;
}

.ew-sum__heading {
	font-family:  var(--ew-font-d);
	font-size:    1.15rem;
	font-weight:  500;
	color:        var(--ew-gold);
	margin:       0;
	line-height:  1.2;
}

/* Product thumbnail + title */
.ew-sum__product {
	display:    flex;
	gap:        14px;
	align-items: flex-start;
}

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

.ew-sum__product-info {
	flex: 1;
	min-width: 0;
}

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

.ew-sum__product-meta {
	margin-top: 4px;
	font-size:  0.78rem;
	color:      var(--ew-muted);
}

/* Row list */
.ew-sum__rows {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}

.ew-sum__row {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	font-size:       0.85rem;
}

.ew-sum__key  { color: var(--ew-muted); }
.ew-sum__val  { font-family: var(--ew-font-d); color: var(--ew-parchment); font-size: 0.9rem; text-align: right; }
.ew-sum__val--muted { color: var(--ew-muted); }

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

.ew-sum__total-row {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
}

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

.ew-sum__total-val {
	font-family: var(--ew-font-d);
	font-size:   1.75rem;
	font-weight: 600;
	color:       var(--ew-gold);
	line-height: 1;
}

/* ============================================================
   Add to Cart button — only real <button> in this widget
   ============================================================ */
.ew-atc .ew-atc-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:    var(--ew-font-d);
	font-size:      1rem;
	font-weight:    600;
	letter-spacing: 0.03em;
	text-align:     center;
	cursor:         pointer;
	box-sizing:     border-box;
	transition:     background var(--ew-t), transform 0.12s ease, opacity var(--ew-t);
}

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

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

.ew-atc .ew-atc-btn:disabled {
	background: rgba(201, 168, 76, 0.4);
	color:      rgba(11, 21, 53, 0.5);
	cursor:     not-allowed;
}

/* ============================================================
   Guarantee note
   ============================================================ */
.ew-sum__guarantee {
	font-size:  0.76rem;
	color:      var(--ew-muted);
	text-align: center;
	margin:     0;
	line-height: 1.4;
}

/* ============================================================
   Responsive — stack on mobile
   ============================================================ */
@media (max-width: 860px) {
	.ew-atc-summary {
		position: static;
		order:    -1;         /* show summary above config on mobile */
	}

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

@media (max-width: 480px) {
	.ew-step {
		padding: 16px;
	}

	.ew-atc-summary {
		padding: 18px;
	}
}

/* ============================================================
   Subscription widget — name + birthday two-column grid
   ============================================================ */
.ew-name-birthday-row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   20px;
	align-items:           start;
}

.ew-name-birthday-col .ew-step__title {
	font-size:   0.85rem;
	font-weight: 500;
	margin:      0 0 10px;
}

/* No bottom margin on input inside the column (hint takes care of spacing) */
.ew-name-birthday-col .ew-text-input {
	margin-bottom: 8px;
}

.ew-step--name-birthday .ew-step__hint {
	margin: 0;
}

@media (max-width: 540px) {
	.ew-name-birthday-row {
		grid-template-columns: 1fr;
	}
}

/* Subscribe button accent — slightly different glow from add-to-cart */
.ew-sub .ew-atc-btn {
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size:      0.88rem;
}