/* =============================================================================
   EngravingPreview v3.0 – engraving.css
   "The Fifth Design" aesthetic — crème, script, minimaliste
   Compatible PrestaShop 8.2 Classic / Hummingbird
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Alex+Brush&family=Pinyon+Script&family=Tangerine:wght@400;700&family=Dancing+Script:wght@400;700&family=Josefin+Sans:wght@300;400;600&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --eng-cream:         #f5f2ed;
  --eng-cream-dk:      #ede9e2;
  --eng-border:        #d9d3c8;
  --eng-gold:          #a8956a;
  --eng-gold-lt:       #c9b48a;
  --eng-text:          #2a2520;
  --eng-muted:         #8a7e6e;
  --eng-black:         #1a1714;
  --eng-stage-bg:      #ffffff;
  --eng-error:         #c0392b;
  --eng-success:       #2d7a3a;
  --eng-preview-font:  'Great Vibes', cursive;
  --eng-preview-color: #1a1714;
  --eng-preview-sz:    clamp(2rem, 5vw, 3.4rem);
  --eng-radius:        4px;
  --eng-radius-lg:     8px;
  --eng-ease:          cubic-bezier(.4,0,.2,1);
  --eng-dur:           240ms;
}

/* ── widget wrapper ─────────────────────────────────────────────────────── */
.engraving-widget {
  margin-top: 1rem;
  font-family: 'Josefin Sans', sans-serif;
}

/* Masquer les champs de personnalisation natifs si le widget est présent */
.product-customization .product-customization-item {
  display: none !important;
}
.product-customization form .clearfix:has(button[name="submitCustomizedData"]) {
  display: none !important;
}

/* ── trigger button ─────────────────────────────────────────────────────── */
.engraving-trigger {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .85rem 1.1rem;
  background: var(--eng-black);
  color: #fff;
  border: none;
  border-radius: var(--eng-radius);
  cursor: pointer;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background var(--eng-dur) var(--eng-ease);
}
.engraving-trigger:hover,
.engraving-trigger:focus-visible   { background: #2e2a26; }
.engraving-trigger:focus-visible   { outline: 2px solid var(--eng-gold); outline-offset: 2px; }
.engraving-trigger.is-active       { background: var(--eng-gold); }
.engraving-trigger__icon           { flex-shrink: 0; opacity: .85; display: flex; }
.engraving-trigger__text           { flex: 1; }
.engraving-trigger__chevron        {
  flex-shrink: 0; display: flex;
  transition: transform var(--eng-dur) var(--eng-ease);
}
.engraving-trigger[aria-expanded="true"] .engraving-trigger__chevron,
.engraving-trigger.is-active .engraving-trigger__chevron { transform: rotate(180deg); }

/* ── badge récapitulatif ────────────────────────────────────────────────── */
.engraving-badge {
  display: none;
  align-items: center;
  gap: .5rem;
  margin-top: .45rem;
  padding: .45rem .75rem;
  background: var(--eng-cream);
  border: 1px solid var(--eng-border);
  border-radius: var(--eng-radius);
  font-size: .8rem;
  color: var(--eng-muted);
}
.engraving-badge.is-visible   { display: flex; }
.engraving-badge svg          { flex-shrink: 0; color: var(--eng-success); }
.engraving-badge__text        { flex: 1; font-style: italic; color: var(--eng-text); }
.engraving-badge__remove {
  background: none; border: none; cursor: pointer;
  font-size: .7rem; color: var(--eng-muted); padding: 0 .2rem;
  transition: color var(--eng-dur);
}
.engraving-badge__remove:hover { color: var(--eng-error); }

/* ── panel ──────────────────────────────────────────────────────────────── */
.engraving-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--eng-dur) var(--eng-ease);
  overflow: hidden;
}
.engraving-panel.is-open {
  grid-template-rows: 1fr;
}
/* Fallback pour navigateurs sans grid animation */
@supports not (grid-template-rows: 0fr) {
  .engraving-panel             { display: none; }
  .engraving-panel.is-open     { display: block; }
}

.engraving-panel__body {
  min-height: 0; /* requis pour grid 0fr */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--eng-cream);
  border: 1px solid var(--eng-border);
  border-top: none;
  border-radius: 0 0 var(--eng-radius-lg) var(--eng-radius-lg);
  overflow: hidden;
}

/* ── preview left column ────────────────────────────────────────────────── */
.engraving-preview-col {
  padding: 1.25rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  border-right: 1px solid var(--eng-border);
  background: var(--eng-stage-bg);
}

.engraving-col-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--eng-muted);
  margin: 0;
}

/* Stage */
.engraving-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem .5rem;
  border: 1px dashed var(--eng-border);
  border-radius: var(--eng-radius);
  background: var(--eng-stage-bg);
  min-height: 110px;
}

.engraving-stage__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  width: 100%;
}

.engraving-stage__line1 {
  display: block;
  font-family: var(--eng-preview-font);
  font-size: var(--eng-preview-sz);
  color: var(--eng-preview-color);
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
  transition: font-family var(--eng-dur), font-size var(--eng-dur), color var(--eng-dur);
}

.engraving-stage__line2 {
  display: block;
  font-family: var(--eng-preview-font);
  font-size: calc(var(--eng-preview-sz) * .55);
  color: var(--eng-preview-color);
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  transition: font-family var(--eng-dur), font-size var(--eng-dur);
}

/* Placeholder état */
.engraving-stage__line1.is-ph,
.engraving-stage__line2.is-ph { color: #cec6ba; }

/* Tailles dynamiques (data-size) */
.engraving-stage[data-size="small"]  { --eng-preview-sz: clamp(1.4rem, 3.5vw, 2.4rem); }
.engraving-stage[data-size="medium"] { --eng-preview-sz: clamp(2rem, 5vw, 3.4rem); }
.engraving-stage[data-size="large"]  { --eng-preview-sz: clamp(2.6rem, 6.5vw, 4.4rem); }

.engraving-stage__note {
  font-size: .68rem;
  color: var(--eng-muted);
  text-align: center;
  margin: 0;
}

/* ── controls right column ──────────────────────────────────────────────── */
.engraving-controls-col {
  padding: 1.25rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

/* ── field ──────────────────────────────────────────────────────────────── */
.engraving-field          { display: flex; flex-direction: column; gap: .35rem; }
.engraving-field__lbl {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--eng-text);
  display: flex;
  align-items: baseline;
  gap: .3rem;
}
.ep-req { color: var(--eng-error); font-weight: 400; }
.ep-opt { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .7rem; color: var(--eng-muted); }

/* ── text input ─────────────────────────────────────────────────────────── */
.engraving-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.engraving-input {
  flex: 1;
  padding: .55rem .6rem;
  padding-right: 3.2rem;
  background: #fff;
  border: 1px solid var(--eng-border);
  border-radius: var(--eng-radius);
  font-size: .92rem;
  color: var(--eng-text);
  font-family: 'Josefin Sans', sans-serif;
  transition: border-color var(--eng-dur) var(--eng-ease),
              box-shadow var(--eng-dur) var(--eng-ease);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.engraving-input:focus {
  border-color: var(--eng-gold);
  box-shadow: 0 0 0 2px rgba(168,149,106,.15);
}
.engraving-input.is-error {
  border-color: var(--eng-error);
  box-shadow: 0 0 0 2px rgba(192,57,43,.12);
}

/* Shake */
@keyframes eng-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-5px); }
  40%     { transform: translateX(5px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(3px); }
}
.engraving-shake { animation: eng-shake 0.38s var(--eng-ease); }

/* Compteur */
.engraving-count {
  position: absolute;
  right: .55rem;
  font-size: .66rem;
  color: var(--eng-muted);
  pointer-events: none;
  white-space: nowrap;
}
.engraving-count.warn { color: #b8860b; }
.engraving-count.max  { color: var(--eng-error); font-weight: 700; }

/* Error message */
.ep-field-error {
  font-size: .72rem;
  color: var(--eng-error);
  min-height: 1em;
}

/* ── select police ──────────────────────────────────────────────────────── */
.engraving-select-wrap {
  position: relative;
}

.engraving-select {
  width: 100%;
  padding: .55rem 2rem .55rem .6rem;
  background: #fff;
  border: 1px solid var(--eng-border);
  border-radius: var(--eng-radius);
  font-size: .88rem;
  color: var(--eng-text);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
  font-family: 'Josefin Sans', sans-serif;
  transition: border-color var(--eng-dur) var(--eng-ease);
  box-sizing: border-box;
}
.engraving-select:focus { border-color: var(--eng-gold); }

.engraving-select-arr {
  position: absolute;
  right: .65rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--eng-muted);
  display: flex;
}

/* ── size control ── AAA ─────────────────────────────────────────────────── */
.engraving-size-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  background: #fff;
  border: 1px solid var(--eng-border);
  border-radius: var(--eng-radius);
  width: fit-content;
}

.engraving-size-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--eng-border);
  border-radius: var(--eng-radius);
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--eng-text);
  transition: background var(--eng-dur), border-color var(--eng-dur);
  line-height: 1;
  padding: 0;
}
.engraving-size-btn:hover { background: var(--eng-cream); border-color: var(--eng-gold); }
.engraving-size-btn:focus-visible { outline: 2px solid var(--eng-gold); }

.engraving-size-aaa {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  padding: 0 .4rem;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--eng-muted);
  letter-spacing: 0;
}
.aaa-s { font-size: .72rem; }
.aaa-m { font-size: 1rem; }
.aaa-l { font-size: 1.35rem; }
.aaa-active { color: var(--eng-text); font-weight: 600; }

/* ── confirm button ─────────────────────────────────────────────────────── */
.engraving-confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .75rem 1rem;
  background: var(--eng-black);
  color: #fff;
  border: none;
  border-radius: var(--eng-radius);
  cursor: pointer;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background var(--eng-dur) var(--eng-ease);
  margin-top: auto;
}
.engraving-confirm-btn:hover      { background: #2e2a26; }
.engraving-confirm-btn:focus-visible { outline: 2px solid var(--eng-gold); outline-offset: 2px; }
.engraving-confirm-btn.is-saved   {
  background: var(--eng-success);
  pointer-events: none;
}
.engraving-confirm-btn.is-saved::before { content: '✓ '; }

.engraving-confirm-note {
  font-size: .68rem;
  color: var(--eng-muted);
  text-align: center;
  margin: 0;
}

/* ── Responsive mobile ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .engraving-panel__body {
    grid-template-columns: 1fr;
  }
  .engraving-preview-col {
    border-right: none;
    border-bottom: 1px solid var(--eng-border);
  }
  .engraving-stage { min-height: 90px; }
  .engraving-input { font-size: 1rem; } /* prevent iOS zoom */
  .engraving-select { font-size: 1rem; }
  .engraving-size-btn { width: 40px; height: 40px; }
}

/* ── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .engraving-panel,
  .engraving-trigger,
  .engraving-trigger__chevron,
  .engraving-stage__line1,
  .engraving-stage__line2,
  .engraving-input,
  .engraving-confirm-btn { transition: none !important; animation: none !important; }
}