/* ===========================================================================
   Dove — Buy Beauty Products & Win a MINI Cooper
   Colours, borders and radii are taken from "Dove MINI Cooper Screens AW.psd".
   Sofia Pro / Unilever Shilling are licensed fonts, so the headline and offer
   lockups ship as images and Poppins carries the interface text.
   =========================================================================== */

:root{
  --navy:#1F2253;
  --navy-ink:#202354;
  --navy-soft:#5B5D81;
  --gold:#B38933;
  --red:#ED2024;
  --bg:#F4F7F8;
  --card:#FFFFFF;
  --line:#C9CEDC;
  --radius-card:28px;
  --radius-field:9px;
  --frame:460px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--navy);
  font:400 16px/1.5 Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}

.frame{
  max-width:var(--frame);
  margin:0 auto;
  padding:0 18px env(safe-area-inset-bottom);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ------------------------------------------------------------------ head -- */
.head{padding:26px 0 0;text-align:center}
.head__logo{width:46%;max-width:210px;margin:0 auto}
.head__claim{width:82%;max-width:360px;margin:6px auto 0}

/* ------------------------------------------------------------------ main -- */
.main{margin:22px 0 0}

.card{
  background:var(--card);
  border:2px solid var(--navy);
  border-radius:var(--radius-card);
  padding:24px 20px 26px;
  box-shadow:0 10px 26px rgba(31,34,83,.07);
}

/* ------------------------------------------------------------------ form -- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 14px}
.field{min-width:0}
.field--full{grid-column:1 / -1}

.label{
  display:block;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  margin:0 0 6px;
}
.req{color:var(--red);font-weight:700}

.input{
  width:100%;
  height:46px;
  padding:0 12px;
  font:400 15px/1 Poppins,system-ui,sans-serif;
  color:var(--navy);
  background:#fff;
  border:1.5px solid var(--navy);
  border-radius:var(--radius-field);
  transition:box-shadow .15s ease,border-color .15s ease;
  appearance:none;
}
.input:focus{
  outline:none;
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(31,34,83,.16);
}
.input::placeholder{color:#9AA0B8}

select.input{
  padding-right:34px;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%231F2253' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
}

.field--error .input{border-color:var(--red)}
.err{margin:6px 0 0;font-size:12.5px;line-height:1.4;color:var(--red)}
.hint{margin:6px 0 0;font-size:12px;color:var(--navy-soft)}

.alert{
  margin:0 0 16px;
  padding:11px 14px;
  border-radius:10px;
  background:#FDECEE;
  border:1px solid #F3B9BC;
  color:#8C1C24;
  font-size:13.5px;
}

/* ---------------------------------------------------------------- upload -- */
.upload{
  display:flex;
  align-items:center;
  gap:8px;
  height:46px;
  padding:0 4px 0 12px;
  border:1.5px solid var(--navy);
  border-radius:var(--radius-field);
  background:#fff;
}
.upload__name{
  flex:1 1 auto;
  min-width:0;
  font-size:14px;
  color:#9AA0B8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.upload__name.is-set{color:var(--navy)}
.upload__btn{
  flex:0 0 auto;
  padding:9px 16px;
  background:var(--navy);
  color:#fff;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
.upload__btn:hover{background:#2A2E69}
.upload__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.upload:focus-within .upload__btn{box-shadow:0 0 0 3px rgba(31,34,83,.25)}
.field--error .upload{border-color:var(--red)}

/* -------------------------------------------------------------- checkbox -- */
.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding-top:2px}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check__box{
  flex:0 0 auto;
  width:20px;height:20px;
  margin-top:1px;
  border:1.8px solid var(--navy);
  border-radius:4px;
  background:#fff;
  position:relative;
}
.check input:checked + .check__box::after{
  content:"";
  position:absolute;
  left:5.5px;top:1.5px;
  width:5px;height:10px;
  border:solid var(--navy);
  border-width:0 2.4px 2.4px 0;
  transform:rotate(45deg);
}
.check input:focus-visible + .check__box{box-shadow:0 0 0 3px rgba(31,34,83,.25)}
.check__text{font-size:14px;font-weight:600;line-height:1.35}
.check__text a{font-weight:700;text-decoration:underline}

/* ---------------------------------------------------------------- submit -- */
.submit{
  display:block;
  width:100%;
  margin:22px 0 0;
  padding:15px;
  background:var(--navy);
  color:#fff;
  border:0;
  border-radius:999px;
  font:600 16px/1 Poppins,system-ui,sans-serif;
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .12s ease,opacity .15s ease;
}
.submit:hover{opacity:.92}
.submit:active{transform:translateY(1px)}
.submit[disabled]{opacity:.55;cursor:progress}

/* honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------- thanks / states -- */
.card--thanks{
  border-width:3px;
  border-radius:38px;
  padding:44px 26px 38px;
  text-align:center;
}
.thanks__art{width:86%;max-width:330px;margin:0 auto}
.thanks__ref{
  margin:26px 0 0;
  font-size:13px;
  font-weight:500;
  color:var(--navy-soft);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.thanks__ref strong{
  font-size:22px;
  font-weight:700;
  letter-spacing:.09em;
  color:var(--navy);
}
.thanks__note{margin:14px 0 0;font-size:13px;color:var(--navy-soft)}
.again{margin:16px 0 0;text-align:center;font-size:14px;font-weight:600}

.card--message{text-align:center;padding:44px 26px}
.message__title{margin:0;font-size:22px;font-weight:700;line-height:1.3}
.message__body{margin:12px 0 0;font-size:14.5px;color:var(--navy-soft)}

/* ----------------------------------------------------------------- terms -- */
.card--terms{text-align:left;padding:30px 22px}
.card--terms h1{margin:0 0 18px;font-size:23px}
.card--terms h2{margin:24px 0 6px;font-size:15px}
.card--terms p{margin:0 0 10px;font-size:14px;line-height:1.6;color:#3A3E63}
.card--terms ol{margin:0 0 10px;padding-left:24px;font-size:14px;line-height:1.6;color:#3A3E63}
.card--terms li{margin:0 0 8px}
.card--terms ol ol{margin:6px 0 0;padding-left:20px}
.card--terms ol ol li{margin:0 0 2px}
.card--terms .back{margin-top:26px;font-weight:600}

/* ------------------------------------------------------------------ foot -- */
.foot{margin-top:26px;text-align:center}
.foot__offer{width:88%;max-width:400px;margin:0 auto}
.foot__art{width:100%;margin:6px auto 0}
.foot__legal{
  margin:2px 0 22px;
  font-size:9.5px;
  line-height:1.5;
  color:var(--navy-soft);
  text-align:center;
}

/* --------------------------------------------------------------- small -- */
/* 375px (iPhone SE / mini) still holds the two-column layout from the comp;
   below that the columns would be too narrow to type in, so they stack. */
@media (max-width:420px){
  .frame{padding-left:14px;padding-right:14px}
  .card{padding:20px 15px 22px;border-radius:24px}
  .grid{gap:13px 11px}
  .label{font-size:12.5px}
  .check__text{font-size:13px}
}
@media (max-width:359px){
  .grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}