/**
 * Välkomsterbjudandet. Dämpad ruta i samma språk som resten av sajten:
 * linne, salvia, nästan raka hörn. Ingen rörelse som inte behövs.
 */

.en-promo{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-6);
  background:rgba(30,32,27,0.42);
  opacity:0;
  transition-property:opacity;
  transition-duration:var(--duration-base);
  transition-timing-function:var(--ease-out);
}
.en-promo[hidden]{display:none;}
.en-promo.is-open{opacity:1;}

.en-promo-card{
  position:relative;
  width:100%;
  max-width:452px;
  background:var(--en-linen-50);
  border:1px solid var(--en-linen-300);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  padding:var(--space-10) var(--space-8) var(--space-8);
  text-align:left;
  translate:0 10px;
  transition-property:translate;
  transition-duration:var(--duration-base);
  transition-timing-function:var(--ease-out);
}
.en-promo.is-open .en-promo-card{translate:0 0;}

/* Tunn salviaram i överkant - samma grepp som bandet i sidhuvudet. */
.en-promo-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--en-sage-500);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
}

.en-promo-close{
  position:absolute;
  top:6px;right:6px;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:0;
  background:none;
  color:var(--en-stone-600);
  cursor:pointer;
  border-radius:var(--radius-sm);
  transition-property:color,background-color,scale;
  transition-duration:var(--duration-fast);
  transition-timing-function:var(--ease-out);
}
.en-promo-close:hover{color:var(--en-charcoal-900);background:var(--en-linen-200);}
.en-promo-close:active{scale:0.96;}
.en-promo-close:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.en-promo-close svg{width:18px;height:18px;display:block;}

.en-promo-eyebrow{
  margin:0 0 var(--space-3);
  font-family:var(--font-sans-body);
  font-size:var(--text-eyebrow);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--en-sage-600);
}

.en-promo-title{
  margin:0 0 var(--space-3);
  font-family:var(--font-serif-display);
  font-size:var(--text-display-sm);
  font-weight:var(--weight-display);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-display);
  color:var(--en-charcoal-900);
}
/* Rubriken tar fokus när rutan öppnas, för skärmläsaren - ingen ram runt den. */
.en-promo-title:focus{outline:none;}
.en-promo-title strong{
  font-weight:var(--weight-display-strong);
  color:var(--en-sage-700);
}

.en-promo-lead{
  margin:0 0 var(--space-6);
  font-family:var(--font-sans-body);
  font-size:var(--text-base);
  line-height:var(--leading-body);
  color:var(--en-charcoal-700);
}

/**
 * Koden. Streckad ram så den läses som något att plocka med sig.
 *
 * Kvittot på en kopiering är två saker samtidigt: fältet tänds, och knappen
 * byter från kopieringsikon till bock. Tändningen går på snabbt och slocknar
 * långsamt - därför två olika tider på samma övergång. Texten byts också, så
 * beskedet finns kvar även för den som inte ser rörelsen.
 */
.en-promo-code{
  display:flex;
  align-items:stretch;
  margin:0 0 var(--space-5);
  border:1px dashed var(--en-sage-300);
  border-radius:var(--radius-sm);
  background:var(--en-sage-50);
  overflow:hidden;
  transition-property:background-color,border-color;
  transition-duration:var(--duration-slow);
  transition-timing-function:var(--ease-out);
}
.en-promo-code.is-copied{
  background:var(--en-sage-100);
  border-color:var(--en-sage-500);
  transition-duration:var(--duration-fast);
}

.en-promo-code-val{
  flex:1;
  display:flex;
  align-items:center;
  padding:var(--space-4) var(--space-4);
  font-family:var(--font-sans-body);
  font-size:var(--text-small);
  font-weight:var(--weight-bold);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--en-sage-800);
  word-break:break-word;
}

.en-promo-copy{
  flex:0 0 auto;
  border:0;
  border-left:1px dashed var(--en-sage-300);
  background:transparent;
  padding:0 var(--space-4);
  color:var(--en-sage-700);
  cursor:pointer;
  transition-property:background-color,color,scale;
  transition-duration:var(--duration-fast);
  transition-timing-function:var(--ease-out);
}
.en-promo-copy:hover{background:var(--en-sage-100);}
.en-promo-copy:active{scale:0.96;}
.en-promo-copy:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.en-promo-copy.is-done{color:var(--en-sage-800);}

/* Båda lägena ligger i samma rutnätscell, så knappen behåller sin bredd. */
.en-promo-copy-stack{display:grid;align-items:center;}
.en-promo-copy-state{
  grid-area:1 / 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  font-family:var(--font-sans-body);
  font-size:var(--text-caption);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-button);
  text-transform:uppercase;
  transition-property:opacity,scale,filter;
  transition-duration:var(--duration-base);
  transition-timing-function:cubic-bezier(0.2,0,0,1);
}
.en-promo-copy-state svg{
  width:14px;height:14px;
  flex:0 0 auto;
  stroke-width:2;   /* samma optiska vikt som texten bredvid (600) */
}
.en-promo-copy-done{opacity:0;scale:0.25;filter:blur(4px);}
.en-promo-copy.is-done .en-promo-copy-idle{opacity:0;scale:0.25;filter:blur(4px);}
.en-promo-copy.is-done .en-promo-copy-done{opacity:1;scale:1;filter:blur(0);}

/* Beskedet till skärmläsaren. Syns inte, läses upp. */
.en-promo-live{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.en-promo-acts{
  display:flex;
  align-items:center;
  gap:var(--space-5);
  margin:0 0 var(--space-5);
  flex-wrap:wrap;
}
.en-promo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-4) var(--space-6);
  background:var(--en-sage-600);
  color:var(--en-linen-50);
  border:0;
  border-radius:var(--radius-sm);
  font-family:var(--font-sans-body);
  font-size:var(--text-small);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-button);
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition-property:background-color,scale;
  transition-duration:var(--duration-fast);
  transition-timing-function:var(--ease-out);
}
.en-promo-btn:hover{background:var(--en-sage-700);color:var(--en-linen-50);}
.en-promo-btn:active{scale:0.96;}
.en-promo-btn:disabled{cursor:default;scale:1;text-transform:none;letter-spacing:0;}
.en-promo-btn:focus-visible{outline:none;box-shadow:var(--focus-ring);}

.en-promo-no{
  border:0;
  background:none;
  /* Text-länk, men med en tumstor yta runt sig. */
  min-height:44px;
  padding:0 var(--space-3);
  font-family:var(--font-sans-body);
  font-size:var(--text-small);
  color:var(--en-stone-600);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  transition-property:color,scale;
  transition-duration:var(--duration-fast);
  transition-timing-function:var(--ease-out);
}
.en-promo-no:hover{color:var(--en-charcoal-900);}
.en-promo-no:active{scale:0.96;}
.en-promo-no:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs);}

/* Allt inne i rutan som döljs med hidden ska vara borta, även där en klass sätter display. */
.en-promo [hidden]{display:none !important;}

/* Anmälan: fält och knapp på en rad, under varandra på mobil. */
.en-promo-label{
  display:block;
  margin:0 0 var(--space-2);
  font-family:var(--font-sans-body);
  font-size:var(--text-small);
  font-weight:var(--weight-semibold);
  color:var(--en-charcoal-800);
}
.en-promo-row{
  display:flex;
  gap:var(--space-3);
  margin:0 0 var(--space-2);
}
.en-promo-input{
  flex:1;
  min-width:0;
  min-height:48px;
  padding:0 var(--space-4);
  border:1px solid var(--en-linen-300);
  border-radius:var(--radius-sm);
  background:#fff;
  font-family:var(--font-sans-body);
  font-size:16px;   /* under 16px zoomar iPhone in fältet */
  color:var(--en-charcoal-900);
  transition-property:border-color,box-shadow;
  transition-duration:var(--duration-fast);
  transition-timing-function:var(--ease-out);
}
.en-promo-input:focus{outline:none;border-color:var(--en-sage-500);box-shadow:var(--focus-ring);}
.en-promo-input[aria-invalid="true"]{border-color:#a5483a;}
.en-promo-row .en-promo-btn{flex:0 0 auto;}
.en-promo-btn:disabled{opacity:0.75;}

.en-promo-msg{
  min-height:1.2em;
  margin:0 0 var(--space-3);
  font-family:var(--font-sans-body);
  font-size:var(--text-caption);
  color:#a5483a;
}
.en-promo-msg:empty{margin-bottom:var(--space-2);}

.en-promo-consent{
  margin:0 0 var(--space-4);
  font-family:var(--font-sans-body);
  font-size:var(--text-caption);
  line-height:var(--leading-tight);
  color:var(--en-stone-600);
}
.en-promo-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px;}

.en-promo-trap{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  opacity:0;
}

.en-promo-form .en-promo-acts{margin:0;}

.en-promo-fine{
  margin:0;
  font-family:var(--font-sans-body);
  font-size:var(--text-caption);
  line-height:var(--leading-tight);
  color:var(--en-stone-500);
}

/* Mobil: lägg den mot nederkanten, där tummen är. */
@media (max-width:600px){
  .en-promo{align-items:flex-end;padding:0;}
  .en-promo-card{
    max-width:none;
    border-radius:var(--radius-md) var(--radius-md) 0 0;
    border-bottom:0;
    padding:var(--space-8) var(--space-6) var(--space-6);
    translate:0 24px;
  }
  .en-promo-acts{gap:var(--space-4);}
  .en-promo-btn{flex:1;}
  .en-promo-row{flex-direction:column;}
  .en-promo-row .en-promo-btn{min-height:48px;}
}

/**
 * Utan rörelse: allt byts direkt. Bocken, texten och det tända fältet finns
 * kvar - det är bara övergången som försvinner.
 */
@media (prefers-reduced-motion:reduce){
  .en-promo,
  .en-promo-card,
  .en-promo-code,
  .en-promo-copy,
  .en-promo-copy-state,
  .en-promo-btn,
  .en-promo-no,
  .en-promo-close{transition:none;}
  .en-promo-card{translate:0 0;}
  .en-promo-copy-state{filter:none;scale:1;}
  .en-promo-copy-done{scale:1;filter:none;}
  .en-promo-copy.is-done .en-promo-copy-idle{scale:1;filter:none;}
}