/* ============================================================
   MAISON PHILIPA — email capture popup
   Loaded on every page. Like cart-ui.css, colours/fonts read the
   site tokens with hard fallbacks so this also works on
   index.html, which keeps its own inline styles.
   ============================================================ */

/* ---------- overlay ---------- */
.mp-pop-overlay{
  position:fixed;inset:0;z-index:1600;
  background:rgba(13,29,46,.38);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;
  transition:opacity .55s ease;
}
.mp-pop-overlay.open{opacity:1;pointer-events:auto;}

/* ---------- centering wrap + card ---------- */
.mp-pop-wrap{
  position:fixed;inset:0;z-index:1610;
  display:grid;place-items:center;
  padding:18px;
  visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .6s;
}
.mp-pop-wrap.open{visibility:visible;transition:none;}
.mp-pop-card{
  position:relative;overflow:hidden;
  width:min(470px,100%);
  max-height:calc(100vh - 36px);
  overflow-y:auto;overscroll-behavior:contain;
  pointer-events:auto;
  background:linear-gradient(170deg,#fff 0%, var(--surface,#fbf8f3) 58%, var(--ivory,#f6f0e7) 100%);
  border:1px solid rgba(43,38,34,.07);
  border-radius:calc(var(--radius,28px) + 8px);
  padding:clamp(34px,5vh,50px) clamp(26px,5vw,48px) clamp(30px,4.5vh,42px);
  box-shadow:0 60px 120px -50px rgba(17,50,81,.55);
  text-align:center;
  opacity:0;transform:translateY(26px) scale(.975);
  transition:opacity .55s ease, transform .8s cubic-bezier(.19,1,.22,1);
}
.mp-pop-wrap.open .mp-pop-card{opacity:1;transform:none;}
.mp-pop-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(28rem 18rem at 112% -12%, #f6e3d3 0%, rgba(246,227,211,0) 62%);
}
.mp-pop-card > *{position:relative;z-index:1;}
.mp-pop-card:focus{outline:none;}
html.mp-pop-lock, html.mp-pop-lock body{overflow:hidden;}

/* ---------- close ---------- */
.mp-pop-close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:38px;height:38px;border-radius:50%;flex:none;
  background:none;border:none;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--hairline,rgba(43,38,34,.12));
  transition:box-shadow .35s ease, transform .5s cubic-bezier(.19,1,.22,1);
}
.mp-pop-close:hover{box-shadow:inset 0 0 0 1px var(--ink,#2b2622);transform:rotate(90deg);}
.mp-pop-close span::before,
.mp-pop-close span::after{
  content:"";position:absolute;left:50%;top:50%;width:14px;height:1px;
  background:var(--ink,#2b2622);
}
.mp-pop-close span::before{transform:translate(-50%,-50%) rotate(45deg);}
.mp-pop-close span::after{transform:translate(-50%,-50%) rotate(-45deg);}

/* ---------- copy ---------- */
.mp-pop-mark{width:44px;height:auto;margin:0 auto 18px;display:block;}
.mp-pop-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-body,"Inter",-apple-system,sans-serif);
  font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold,#b08d57);
  margin-bottom:16px;
}
.mp-pop-eyebrow::before,
.mp-pop-eyebrow::after{content:"";width:26px;height:1px;background:var(--gold,#b08d57);opacity:.6;}
.mp-pop-title{
  font-family:var(--font-display,"Jost",system-ui,sans-serif);
  font-weight:380;
  font-size:clamp(1.9rem,5.6vw,2.5rem);
  line-height:1.06;letter-spacing:-.018em;
  color:var(--ink,#2b2622);
}
.mp-pop-title em{font-style:italic;color:var(--navy,#113251);font-weight:340;}
.mp-pop-title .full-stop{color:var(--gold,#b08d57);font-style:normal;}
.mp-pop-sub{
  margin:14px auto 0;max-width:26em;
  font-family:var(--font-body,"Inter",-apple-system,sans-serif);
  font-size:.94rem;line-height:1.7;color:var(--ink-soft,#6d6459);
}

/* ---------- form ---------- */
.mp-pop-form{margin-top:clamp(22px,3.4vh,30px);text-align:left;}
.mp-pop-label{
  display:block;margin:0 0 8px 4px;
  font-family:var(--font-body,"Inter",-apple-system,sans-serif);
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft,#6d6459);
}
.mp-pop-input{
  width:100%;display:block;
  padding:15px 22px;border-radius:100px;border:none;
  background:rgba(255,255,255,.85);
  box-shadow:inset 0 0 0 1px var(--hairline,rgba(43,38,34,.12));
  font-family:var(--font-body,"Inter",-apple-system,sans-serif);
  font-size:.95rem;color:var(--ink,#2b2622);
  transition:box-shadow .35s ease, background .35s ease;
}
.mp-pop-input::placeholder{color:rgba(109,100,89,.55);}
.mp-pop-input:focus{
  outline:none;background:#fff;
  box-shadow:inset 0 0 0 1px var(--accent-deep,#31496b);
}
.mp-pop-input[aria-invalid="true"]{box-shadow:inset 0 0 0 1px rgba(156,74,51,.65);}
.mp-pop-err{
  min-height:1.2em;margin:8px 4px 0;
  font-family:var(--font-body,"Inter",-apple-system,sans-serif);
  font-size:.8rem;line-height:1.5;color:#9c4a33;
  opacity:0;transform:translateY(-2px);
  transition:opacity .4s ease, transform .4s ease;
}
.mp-pop-err.show{opacity:1;transform:none;}
.mp-pop-btn{
  margin-top:14px;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border-radius:100px;border:none;cursor:pointer;
  background:var(--navy,#113251);color:#fff;text-decoration:none;
  font-family:var(--font-body,"Inter",-apple-system,sans-serif);
  font-size:.9rem;font-weight:600;letter-spacing:.04em;
  box-shadow:0 22px 44px -20px rgba(17,50,81,.5);
  transition:background .5s ease, opacity .3s ease;
}
.mp-pop-btn:hover{background:var(--accent-deep,#31496b);}
.mp-pop-btn .mp-pop-arrow{transition:transform .35s cubic-bezier(.19,1,.22,1);}
.mp-pop-btn:hover .mp-pop-arrow{transform:translateX(4px);}
.mp-pop-btn[disabled]{opacity:.6;cursor:default;pointer-events:none;}
.mp-pop-fine{
  margin-top:14px;text-align:center;
  font-family:var(--font-body,"Inter",-apple-system,sans-serif);
  font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft,#6d6459);
}

/* ---------- success state ---------- */
.mp-pop-success{margin-top:clamp(20px,3vh,28px);}
.mp-pop-success:focus{outline:none;}
.mp-pop-welcome{
  font-family:var(--font-display,"Jost",system-ui,sans-serif);
  font-style:italic;font-weight:360;
  font-size:1.35rem;color:var(--navy,#113251);
}
.mp-pop-success-s{
  margin:10px auto 0;max-width:24em;
  font-family:var(--font-body,"Inter",-apple-system,sans-serif);
  font-size:.94rem;line-height:1.7;color:var(--ink-soft,#6d6459);
}
.mp-pop-code{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  margin:20px auto 0;padding:14px 34px;
  border:1px dashed rgba(176,141,87,.65);border-radius:18px;
  background:rgba(243,236,223,.55);cursor:pointer;
  transition:border-color .35s ease, background .35s ease;
}
.mp-pop-code:hover{border-color:var(--gold,#b08d57);background:rgba(243,236,223,.9);}
.mp-pop-code b{
  font-family:var(--font-display,"Jost",system-ui,sans-serif);
  font-weight:400;font-size:1.4rem;letter-spacing:.18em;
  color:var(--navy,#113251);
}
.mp-pop-code span{
  font-family:var(--font-body,"Inter",-apple-system,sans-serif);
  font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold,#b08d57);
}
.mp-pop-success .mp-pop-btn{margin-top:20px;}

/* ---------- small screens ---------- */
@media(max-width:420px){
  .mp-pop-wrap{padding:12px;}
  .mp-pop-card{border-radius:26px;}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .mp-pop-overlay,.mp-pop-wrap,.mp-pop-card,.mp-pop-close,
  .mp-pop-err,.mp-pop-input,.mp-pop-btn,.mp-pop-btn .mp-pop-arrow,.mp-pop-code{transition:none;}
}