/* Etienne Atelier — modul comenzi (frontend) */
.ea-catalog, .ea-wizard, .ea-tracking, .ea-service-hero, .ea-ba-section, .ea-related {
	--ea-ink: #1d1a16;
	--ea-muted: #6f675c;
	--ea-cream: #faf7f1;
	--ea-line: #e7e0d4;
	--ea-accent: #8d1d24;
	--ea-accent-dark: #6e151b;
	--ea-gold: #c9a75f;
	--ea-radius: 12px;
	color: var(--ea-ink);
	font-size: 16px;
	line-height: 1.55;
}

/* ---------- Butoane ---------- */
.ea-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	border: 1px solid transparent;
	transition: all .18s ease;
	text-decoration: none;
	line-height: 1.2;
}
.ea-btn-primary { background: var(--ea-accent); color: #fff !important; }
.ea-btn-primary:hover { background: var(--ea-accent-dark); color: #fff; transform: translateY(-1px); }
.ea-btn-primary:disabled { background: #c9c2b6; cursor: not-allowed; transform: none; }
.ea-btn-ghost { background: transparent; color: var(--ea-ink) !important; border-color: var(--ea-ink); }
.ea-btn-ghost:hover { background: var(--ea-ink); color: #fff !important; }
.ea-link { color: var(--ea-accent); font-weight: 600; text-decoration: none; }
.ea-link:hover { text-decoration: underline; }
.ea-muted { color: var(--ea-muted); }
.ea-small { font-size: 13px; }
.ea-eyebrow { color: var(--ea-gold); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 700; margin-bottom: 6px; }

/* ---------- Catalog ---------- */
.ea-catalog-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.ea-tab {
	padding: 12px 20px; border: 1px solid var(--ea-line); background: #fff; border-radius: 10px;
	font-weight: 600; font-size: 15px; cursor: pointer; transition: all .15s ease; color: var(--ea-ink);
}
.ea-tab:hover { border-color: var(--ea-accent); }
.ea-tab.is-active { background: var(--ea-accent); border-color: var(--ea-accent); color: #fff; }
.ea-catalog-cat { display: none; }
.ea-catalog-cat.is-active { display: block; }
.ea-cat-title { margin: 34px 0 6px; }
.ea-group { margin: 0 0 34px; }
.ea-group-title {
	font-size: 15px; text-transform: uppercase; letter-spacing: .12em; color: var(--ea-accent);
	border-bottom: 1px solid var(--ea-line); padding-bottom: 8px; margin: 26px 0 18px;
}
.ea-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.ea-cards-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ea-card {
	background: #fff; border: 1px solid var(--ea-line); border-radius: var(--ea-radius);
	overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease;
}
.ea-card:hover { box-shadow: 0 10px 30px rgba(29,26,22,.10); transform: translateY(-2px); }
.ea-card-media { position: relative; display: block; aspect-ratio: 4/3; background: #efeae0; }
.ea-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ea-card-media-empty { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #f1ece2, #f1ece2 12px, #ece6da 12px, #ece6da 24px); }
.ea-badge {
	position: absolute; top: 10px; padding: 4px 10px; font-size: 11px; font-weight: 700;
	letter-spacing: .06em; border-radius: 999px; text-transform: uppercase;
}
.ea-badge-photos { right: 10px; background: var(--ea-ink); color: #fff; }
.ea-badge-duration { left: 10px; background: rgba(255,255,255,.92); color: var(--ea-ink); }
.ea-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ea-card-title { margin: 0; font-size: 17px; line-height: 1.35; }
.ea-card-title a { color: var(--ea-ink); text-decoration: none; }
.ea-card-title a:hover { color: var(--ea-accent); }
.ea-card-subtitle { margin: 0; font-size: 13px; color: var(--ea-muted); }
.ea-card-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; }
.ea-price { font-size: 19px; font-weight: 700; font-variant-numeric: lining-nums; }
.ea-catalog-cta { text-align: center; background: var(--ea-cream); border: 1px solid var(--ea-line); border-radius: var(--ea-radius); padding: 30px 20px; margin-top: 20px; }
.ea-catalog-cta p { margin: 0 0 14px; font-size: 17px; }
.ea-catalog-cta .ea-btn { margin: 4px 6px; }

/* ---------- Pagina de serviciu ---------- */
.ea-service-hero { background: var(--ea-cream); border: 1px solid var(--ea-line); border-radius: var(--ea-radius); padding: 26px 28px; margin: 0 0 30px; }
.ea-service-zone { margin: 0 0 4px; font-size: 13px; color: var(--ea-muted); }
.ea-service-subtitle { margin: 0 0 10px; color: var(--ea-muted); }
.ea-service-price-row { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 14px; }
.ea-service-price { font-size: 40px; font-weight: 700; line-height: 1; }
.ea-service-duration { color: var(--ea-muted); }
.ea-service-benefits { list-style: none; margin: 0 0 18px; padding: 0; }
.ea-service-benefits li { padding: 5px 0 5px 30px; position: relative; }
.ea-service-benefits li::before {
	content: "✓"; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%;
	background: var(--ea-accent); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.ea-service-cta { margin: 0; }

/* ---------- Before / After ---------- */
.ea-ba-section { margin: 40px 0; }
.ea-ba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.ea-ba { position: relative; border-radius: var(--ea-radius); overflow: hidden; aspect-ratio: 4/3; background: #eee; user-select: none; }
.ea-ba img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ea-ba-after { position: absolute; inset: 0; }
.ea-ba-before { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.ea-ba-before img { width: auto; height: 100%; max-width: none; }
.ea-ba-label { position: absolute; top: 10px; padding: 3px 10px; font-size: 11px; font-weight: 700; border-radius: 999px; background: rgba(0,0,0,.65); color: #fff; letter-spacing: .08em; }
.ea-ba-label-before { left: 10px; }
.ea-ba-label-after { right: 10px; }
.ea-ba-handle {
	position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none;
}
.ea-ba-handle span {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px;
	background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-size: 16px; color: var(--ea-ink); box-shadow: 0 2px 8px rgba(0,0,0,.3); letter-spacing: 1px;
}
.ea-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

/* ---------- Wizard ---------- */
.ea-wizard { max-width: 860px; margin: 0 auto; }
.ea-steps { display: flex; list-style: none; margin: 0 0 30px; padding: 0; gap: 4px; counter-reset: none; }
.ea-step {
	flex: 1; display: flex; align-items: center; gap: 8px; padding: 12px 8px; font-size: 13px; font-weight: 600;
	color: var(--ea-muted); text-transform: uppercase; letter-spacing: .05em; border-bottom: 3px solid var(--ea-line);
}
.ea-step-num {
	width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: var(--ea-line); color: var(--ea-muted);
	display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.ea-step.is-active { color: var(--ea-ink); border-bottom-color: var(--ea-accent); }
.ea-step.is-active .ea-step-num { background: var(--ea-accent); color: #fff; }
.ea-step.is-done { color: var(--ea-ink); border-bottom-color: var(--ea-gold); }
.ea-step.is-done .ea-step-num { background: var(--ea-gold); color: #fff; }
.ea-panel { display: none; }
.ea-panel.is-active { display: block; animation: ea-fade .25s ease; }
@keyframes ea-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ea-wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; gap: 12px; }

.ea-item-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin: 20px 0; }
.ea-item-type {
	border: 1px solid var(--ea-line); border-radius: var(--ea-radius); background: #fff; padding: 20px 14px;
	text-align: center; cursor: pointer; font-weight: 600; transition: all .15s ease;
}
.ea-item-type:hover { border-color: var(--ea-accent); }
.ea-item-type.is-selected { border-color: var(--ea-accent); background: #fdf6f6; box-shadow: 0 0 0 2px var(--ea-accent) inset; }
.ea-item-type-icon { font-size: 30px; display: block; margin-bottom: 8px; }

.ea-cat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.ea-chip {
	padding: 8px 16px; border-radius: 999px; border: 1px solid var(--ea-line); background: #fff;
	font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s ease; color: var(--ea-ink);
}
.ea-chip.is-active { background: var(--ea-ink); border-color: var(--ea-ink); color: #fff; }
.ea-service-group-title { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--ea-accent); margin: 22px 0 10px; }
.ea-srv {
	display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--ea-line); background: #fff;
	border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; transition: all .15s ease;
}
.ea-srv:hover { border-color: var(--ea-accent); }
.ea-srv.is-selected { border-color: var(--ea-accent); background: #fdf6f6; box-shadow: 0 0 0 1px var(--ea-accent) inset; }
.ea-srv input { margin-top: 4px; accent-color: var(--ea-accent); width: 17px; height: 17px; flex: 0 0 17px; }
.ea-srv-main { flex: 1; }
.ea-srv-title { font-weight: 600; }
.ea-srv-sub { font-size: 13px; color: var(--ea-muted); }
.ea-srv-meta { text-align: right; white-space: nowrap; }
.ea-srv-price { font-weight: 700; font-size: 16px; }
.ea-srv-duration { font-size: 12px; color: var(--ea-muted); }
.ea-srv-badge { display: inline-block; font-size: 10px; font-weight: 700; border: 1px solid var(--ea-ink); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 2px; }
.ea-selected-count { background: var(--ea-cream); border: 1px solid var(--ea-gold); border-radius: 8px; padding: 8px 14px; font-size: 13px; margin-bottom: 8px; }

/* Selector variantă / culoare material */
.ea-variant-box { border: 1px solid var(--ea-gold); border-top: 0; border-radius: 0 0 10px 10px; background: #fffdf7; padding: 14px 16px; margin: -12px 0 12px; }
.ea-variant-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ea-accent); margin: 8px 0 10px; }
.ea-variant-title:first-child { margin-top: 0; }
.ea-variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }
.ea-variant {
	position: relative; border: 2px solid var(--ea-line); border-radius: 10px; background: #fff; padding: 6px;
	cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: all .13s ease;
}
.ea-variant:hover { border-color: var(--ea-accent); transform: translateY(-1px); }
.ea-variant.is-selected { border-color: var(--ea-accent); box-shadow: 0 0 0 2px rgba(141,29,36,.18); background: #fdf6f6; }
.ea-variant img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
.ea-variant-noimg { width: 100%; aspect-ratio: 1; border-radius: 6px; background: repeating-linear-gradient(45deg, #f1ece2, #f1ece2 8px, #ece6da 8px, #ece6da 16px); }
.ea-variant-label { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; }
.ea-variant-check {
	position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%;
	background: var(--ea-accent); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center;
}

.ea-upload { border: 2px dashed var(--ea-line); border-radius: var(--ea-radius); padding: 30px 20px; text-align: center; background: var(--ea-cream); transition: border-color .15s ease; }
.ea-upload.is-drag { border-color: var(--ea-accent); }
.ea-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin: 18px 0; }
.ea-photo { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #eee; }
.ea-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ea-photo.is-loading::after {
	content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.6) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="%238d1d24" stroke-width="3" fill="none" stroke-dasharray="46" stroke-dashoffset="18"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="0.9s" repeatCount="indefinite"/></circle></svg>') center no-repeat;
}
.ea-photo-remove {
	position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0;
	background: rgba(0,0,0,.65); color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
}
.ea-photo-remove:hover { background: var(--ea-accent); }

.ea-field { margin-bottom: 16px; }
.ea-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ea-field label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; color: var(--ea-muted); }
.ea-wizard input[type=text], .ea-wizard input[type=tel], .ea-wizard input[type=email], .ea-wizard select, .ea-wizard textarea,
.ea-tracking input[type=text], .ea-tracking input[type=email] {
	width: 100%; padding: 12px 14px; border: 1px solid var(--ea-line); border-radius: 8px; background: #fff;
	font: inherit; color: var(--ea-ink); box-sizing: border-box;
}
.ea-wizard input:focus, .ea-wizard select:focus, .ea-wizard textarea:focus, .ea-tracking input:focus {
	outline: none; border-color: var(--ea-accent); box-shadow: 0 0 0 3px rgba(141,29,36,.12);
}
.ea-wizard input[aria-invalid=true] { border-color: var(--ea-accent); background: #fdf3f3; }
.ea-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.ea-summary { border: 1px solid var(--ea-line); border-radius: var(--ea-radius); background: #fff; overflow: hidden; margin-bottom: 14px; }
.ea-sum-item { border-bottom: 1px solid var(--ea-line); }
.ea-sum-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--ea-cream); font-weight: 700; }
.ea-sum-head .ea-sum-num {
	width: 24px; height: 24px; border-radius: 50%; background: var(--ea-accent); color: #fff; font-size: 13px;
	display: flex; align-items: center; justify-content: center; flex: 0 0 24px;
}
.ea-sum-head .ea-sum-total { margin-left: auto; }
.ea-sum-actions { display: flex; gap: 10px; }
.ea-sum-actions button { background: none; border: 0; cursor: pointer; font-size: 13px; font-weight: 600; padding: 0; }
.ea-sum-edit { color: var(--ea-accent); }
.ea-sum-delete { color: var(--ea-muted); }
.ea-sum-line { display: flex; justify-content: space-between; gap: 10px; padding: 9px 16px; font-size: 14px; }
.ea-sum-line + .ea-sum-line { border-top: 1px dashed var(--ea-line); }
.ea-sum-photos { padding: 4px 16px 12px; font-size: 12px; color: var(--ea-muted); }
.ea-sum-totals { padding: 12px 16px; }
.ea-sum-totals .ea-sum-line { padding: 5px 0; }
.ea-sum-grand { font-size: 19px; font-weight: 700; border-top: 2px solid var(--ea-ink); margin-top: 6px; padding-top: 10px !important; }
.ea-confirm-box { border: 1px solid var(--ea-gold); background: #fffdf7; border-radius: var(--ea-radius); padding: 18px 20px; margin: 22px 0; }
.ea-confirm-box h3 { margin: 0 0 6px; font-size: 17px; }
.ea-check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; font-size: 14px; cursor: pointer; }
.ea-check input { margin-top: 3px; accent-color: var(--ea-accent); width: 17px; height: 17px; flex: 0 0 17px; }

.ea-wizard-error { background: #fdf0f0; border: 1px solid var(--ea-accent); color: var(--ea-accent-dark); border-radius: 8px; padding: 12px 16px; margin-top: 16px; font-weight: 600; }
.ea-success { text-align: center; padding: 30px 10px; }
.ea-success-icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: #e8f5ec; color: #1e7c3c; font-size: 30px; display: flex; align-items: center; justify-content: center; }
.ea-success h2 { margin: 0 0 8px; }
.ea-success .ea-order-number { font-size: 22px; font-weight: 700; color: var(--ea-accent); margin: 10px 0; }

/* ---------- Tracking ---------- */
.ea-tracking { max-width: 720px; margin: 0 auto; }
.ea-tracking-form { background: var(--ea-cream); border: 1px solid var(--ea-line); border-radius: var(--ea-radius); padding: 22px; margin-bottom: 26px; }
.ea-timeline { list-style: none; margin: 24px 0; padding: 0; position: relative; }
.ea-timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--ea-line); }
.ea-timeline li { position: relative; padding: 0 0 22px 46px; }
.ea-timeline li:last-child { padding-bottom: 0; }
.ea-tl-dot {
	position: absolute; left: 6px; top: 2px; width: 20px; height: 20px; border-radius: 50%;
	background: #fff; border: 2px solid var(--ea-line); box-sizing: border-box;
}
.ea-timeline li.is-done .ea-tl-dot { background: var(--ea-gold); border-color: var(--ea-gold); }
.ea-timeline li.is-current .ea-tl-dot { background: var(--ea-accent); border-color: var(--ea-accent); box-shadow: 0 0 0 4px rgba(141,29,36,.15); }
.ea-tl-label { font-weight: 700; }
.ea-timeline li.is-future { color: var(--ea-muted); }
.ea-tl-time { font-size: 12px; color: var(--ea-muted); }
.ea-tl-note { font-size: 13px; background: var(--ea-cream); border-left: 3px solid var(--ea-gold); padding: 6px 10px; margin-top: 6px; border-radius: 0 6px 6px 0; }
.ea-track-summary { border: 1px solid var(--ea-line); border-radius: var(--ea-radius); padding: 16px 20px; background: #fff; }

@media (max-width: 640px) {
	.ea-field-row { grid-template-columns: 1fr; }
	.ea-step { font-size: 0; gap: 0; justify-content: center; }
	.ea-step .ea-step-num { font-size: 13px; }
	.ea-service-price { font-size: 32px; }
	.ea-wizard-nav { flex-direction: column-reverse; }
	.ea-wizard-nav .ea-btn { width: 100%; text-align: center; }
}