/*
 * Story Add to Cart — Widget Styles
 *
 * Format and audio options use <label> elements — no theme button
 * CSS interference. Only the submit .ew-atc-btn is a real <button>.
 *
 * @package ElementorWidgets
 */

/* ============================================================
   Custom Properties (Design Tokens)
   ============================================================ */
.ew-atc-card {
	--ew-bg:         #ece4d0;
	--ew-paper:      #f7f3ea;
	--ew-ink:        #181210;
	--ew-ember:      #ba3e22;
	--ew-ember-soft: rgba(186, 62, 34, 0.07);
	--ew-ember-ring: rgba(186, 62, 34, 0.22);
	--ew-muted:      #6b5e54;
	--ew-border:     rgba(25, 18, 14, 0.12);
	--ew-radius:     8px;
	--ew-font-d:     'DM Serif Display', Georgia, serif;
	--ew-font-b:     'Fira Sans', system-ui, sans-serif;
	--ew-shadow:     0 4px 24px rgba(25, 18, 14, 0.12);
	--ew-transition: 0.18s ease;
}

/* ============================================================
   Card container
   ============================================================ */
.ew-atc-card {
	background:    var(--ew-bg);
	border-radius: var(--ew-radius);
	padding:       1.25rem;
	font-family:   var(--ew-font-b);
	color:         var(--ew-ink);
	max-width:     420px;
	box-shadow:    var(--ew-shadow);
}

/* ============================================================
   Heading
   ============================================================ */
.ew-atc-heading {
	font-family: var(--ew-font-d);
	font-size:   1.35rem;
	font-weight: 400;
	color:       var(--ew-ink);
	margin:      0 0 1.25rem;
	line-height: 1.2;
}

/* ============================================================
   Section wrapper + labels
   ============================================================ */
.ew-section {
	margin-bottom: 1.1rem;
}

.ew-section-label {
	font-size:      0.72rem;
	font-weight:    600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--ew-muted);
	margin-bottom:  0.5rem;
	display:        flex;
	align-items:    center;
	gap:            0.35rem;
}

.ew-section-icon {
	font-style: normal;
}

.ew-section-hint {
	font-size:   0.78rem;
	color:       var(--ew-muted);
	margin:      0.4rem 0 0;
	line-height: 1.45;
}

/* ============================================================
   Visually-hidden inputs inside labels (radio + checkbox)
   ============================================================ */
.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;
}

/* ============================================================
   Language select
   ============================================================ */
.ew-language-select {
	display:          block;
	width:            100%;
	padding:          0.55rem 2.2rem 0.55rem 0.8rem;
	background:       var(--ew-paper);
	border:           1.5px solid var(--ew-border);
	border-radius:    var(--ew-radius);
	font-family:      var(--ew-font-b);
	font-size:        0.92rem;
	color:            var(--ew-ink);
	appearance:       none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b5e54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 0.75rem center;
	cursor:           pointer;
	transition:       border-color var(--ew-transition), box-shadow var(--ew-transition);
}

.ew-language-select:hover,
.ew-language-select:focus {
	border-color: var(--ew-ember);
	outline:      none;
	box-shadow:   0 0 0 3px var(--ew-ember-ring);
}

/* ============================================================
   Radio dot — shared indicator for format + audio labels
   ============================================================ */
.ew-radio-dot {
	flex-shrink:   0;
	width:         16px;
	height:        16px;
	border-radius: 50%;
	border:        2px solid var(--ew-border);
	transition:    border-color var(--ew-transition), background var(--ew-transition), box-shadow var(--ew-transition);
}

.ew-format-btn.is-selected .ew-radio-dot,
.ew-audio-btn[aria-pressed="true"] .ew-radio-dot {
	border-color: var(--ew-ember);
	background:   var(--ew-ember);
	box-shadow:   inset 0 0 0 3px var(--ew-paper);
}

/* ============================================================
   Format option labels — radio · icon · body · price
   <label> elements: no browser button styles apply here.
   ============================================================ */
.ew-format-list {
	display:        flex;
	flex-direction: column;
	gap:            0.45rem;
}

.ew-format-btn {
	display:       flex;
	align-items:   center;
	gap:           0.65rem;
	width:         100%;
	padding:       0.65rem 0.9rem;
	background:    var(--ew-paper);
	border:        1.5px solid var(--ew-border);
	border-radius: var(--ew-radius);
	cursor:        pointer;
	box-sizing:    border-box;
	transition:    border-color var(--ew-transition), background var(--ew-transition);
}

.ew-format-btn:hover {
	border-color: var(--ew-ember-ring);
}

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

.ew-format-btn__icon {
	flex-shrink: 0;
	color:       var(--ew-muted);
	display:     flex;
	align-items: center;
}

.ew-format-btn.is-selected .ew-format-btn__icon {
	color: var(--ew-ember);
}

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

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

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

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

/* ============================================================
   Audio toggle label — same layout as format labels
   ============================================================ */
.ew-audio-btn {
	display:       flex;
	align-items:   center;
	gap:           0.65rem;
	width:         100%;
	padding:       0.65rem 0.9rem;
	background:    var(--ew-paper);
	border:        1.5px solid var(--ew-border);
	border-radius: var(--ew-radius);
	cursor:        pointer;
	box-sizing:    border-box;
	transition:    border-color var(--ew-transition), background var(--ew-transition);
}

.ew-audio-btn:hover {
	border-color: var(--ew-ember-ring);
}

.ew-audio-btn[aria-pressed="true"] {
	border-color: var(--ew-ember);
	background:   var(--ew-ember-soft);
}

.ew-audio-btn__icon {
	flex-shrink: 0;
	font-size:   1.1rem;
	display:     flex;
	align-items: center;
	color:       var(--ew-muted);
}

.ew-audio-btn[aria-pressed="true"] .ew-audio-btn__icon {
	color: var(--ew-ember);
}

.ew-audio-btn__body {
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            0.1rem;
}

.ew-audio-btn__label {
	font-size:   0.92rem;
	font-weight: 500;
	line-height: 1.2;
	color:       var(--ew-ink);
}

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

.ew-audio-btn__price {
	font-size:   0.92rem;
	font-weight: 600;
	color:       var(--ew-ember);
	white-space: nowrap;
	margin-left: auto;
}

/* ============================================================
   Order summary — borderless, separator only
   ============================================================ */
.ew-section.ew-summary {
	border-top:    1.5px solid var(--ew-border);
	padding-top:   1rem;
	margin-top:    0.25rem;
	margin-bottom: 0;
}

.ew-summary__lines {
	display:        flex;
	flex-direction: column;
	gap:            0.45rem;
	margin-bottom:  0.65rem;
}

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

.ew-summary__line-label {
	display:     flex;
	align-items: center;
	gap:         0.35rem;
	color:       var(--ew-muted);
}

.ew-summary__line-price {
	font-weight: 500;
	color:       var(--ew-ink);
}

.ew-summary__divider {
	border:     none;
	border-top: 1px solid var(--ew-border);
	margin:     0.25rem 0;
}

.ew-summary__total {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
	margin-top:      0.5rem;
}

.ew-summary__total-label {
	font-family:    var(--ew-font-d);
	font-size:      0.95rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color:          var(--ew-ink);
}

.ew-summary__total-price {
	font-family: var(--ew-font-d);
	font-size:   1.35rem;
	font-weight: 700;
	color:       var(--ew-ember);
}

.ew-summary__line--shipping {
	display: none;
}

/* ============================================================
   Add to Cart — the only real <button> in this widget.
   Scoped to beat theme's [type=submit] (0,1,0) with (0,2,0).
   ============================================================ */
.ew-atc-card .ew-atc-btn {
	display:        block;
	width:          100%;
	margin-top:     1rem;
	padding:        0.8rem 1.5rem;
	background:     var(--ew-ember);
	color:          var(--ew-paper);
	border:         none;
	border-radius:  var(--ew-radius);
	font-family:    var(--ew-font-b);
	font-size:      0.95rem;
	font-weight:    600;
	letter-spacing: 0.02em;
	text-align:     center;
	cursor:         pointer;
	box-sizing:     border-box;
	transition:     background var(--ew-transition), transform 0.1s ease;
}

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

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

.ew-atc-card .ew-atc-btn:disabled {
	background: var(--ew-muted);
	opacity:    0.6;
	cursor:     not-allowed;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 400px) {
	.ew-atc-card {
		padding: 1rem;
	}

	.ew-format-btn__price,
	.ew-audio-btn__price {
		font-size: 0.82rem;
	}
}