/* =====================================================
   SENJA SURVEY
   ===================================================== */

:root {
  --bg: #12110f;
  --panel: #1b1916;
  --panel2: #23201b;

  --cream: #f2eadc;
  --muted: #bcb09f;

  --gold: #b99a62;
  --line: #3a342c;

  --white: #ffffff;
  --danger: #e49a8f;
  --success: #b7c7a3;
}


/* =====================================================
   RESET
   ===================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;

  background: var(--bg);
  color: var(--cream);

  font-family: "DM Sans", sans-serif;

  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button,
label,
select,
input[type="checkbox"],
input[type="radio"] {
  -webkit-tap-highlight-color: transparent;
}


/* =====================================================
   SCREENS
   ===================================================== */

.screen {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
}

.screen.active {
  display: block;
}


/* =====================================================
   LANGUAGE + THANK YOU BACKGROUND
   ===================================================== */

.language-screen.active,
.thank-screen.active {

  display: grid;
  place-items: center;

  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));

  background:
    radial-gradient(
      circle at 50% 20%,
      #2b261f 0,
      #171512 42%,
      #0e0d0b 100%
    );
}


/* =====================================================
   SENJA BRAND TEXT
   ===================================================== */

.eyebrow {

  letter-spacing: .38em;

  color: var(--gold);

  font-size: 12px;
  font-weight: 700;

  margin: 0 0 16px;
}

.brand-name {
  text-align: center;
}


/* =====================================================
   LANGUAGE SCREEN
   ===================================================== */

.language-card,
.thank-card {

  width: min(680px, 100%);

  text-align: center;

  padding: 48px 28px;
}


.language-card h1,
.survey-header h1,
.thank-card h1 {

  font-family: "Playfair Display", serif;

  font-weight: 600;

  letter-spacing: -.02em;
}


.language-card h1 {

  font-size: clamp(42px, 9vw, 78px);

  line-height: .96;

  margin: 18px 0 28px;
}


.language-card h1 span {
  color: var(--gold);
}


.language-prompt {

  font-size: 18px;

  color: var(--cream);

  line-height: 1.6;
}


.language-prompt small {
  color: var(--muted);
}


.language-buttons {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;

  margin-top: 30px;
}


.lang-btn {

  appearance: none;

  border:
    1px solid var(--line);

  background:
    var(--panel);

  color:
    var(--cream);

  min-height: 72px;

  padding:
    16px 12px;

  border-radius:
    12px;

  font: inherit;

  cursor: pointer;

  transition:
    transform .2s,
    border-color .2s,
    background .2s;
}


.lang-btn:hover {

  transform:
    translateY(-2px);

  border-color:
    var(--gold);
}


.lang-btn:active {

  transform:
    scale(.98);

  background:
    var(--panel2);
}


.lang-btn span {

  display: block;

  color:
    var(--gold);

  font-weight:
    700;

  font-size:
    12px;

  letter-spacing:
    .12em;

  margin-bottom:
    4px;
}


/* =====================================================
   SURVEY HEADER
   ===================================================== */

.survey-header {

  text-align:
    center;

  padding:
    52px 24px 42px;

  background:
    linear-gradient(
      180deg,
      #171512,
      #12110f
    );

  position:
    relative;

  border-bottom:
    1px solid #26221d;
}


.language-switch {

  position:
    absolute;

  right:
    24px;

  top:
    24px;

  border:
    1px solid var(--line);

  border-radius:
    999px;

  background:
    transparent;

  color:
    var(--muted);

  min-height:
    42px;

  padding:
    9px 14px;

  cursor:
    pointer;
}


.survey-header h1 {

  font-size:
    clamp(38px, 7vw, 64px);

  margin:
    12px 0;
}


.hero-lead {

  max-width:
    700px;

  margin:
    auto;

  color:
    var(--muted);

  font-size:
    18px;

  line-height:
    1.7;
}


/* =====================================================
   MAIN CONTENT
   ===================================================== */

.content-wrap {

  width:
    min(
      900px,
      calc(100% - 32px)
    );

  margin:
    0 auto;

  padding:
    34px 0 70px;
}


/* =====================================================
   CARDS
   ===================================================== */

.intro-card,
.form-card {

  background:
    var(--panel);

  border:
    1px solid var(--line);

  border-radius:
    18px;

  padding:
    clamp(22px, 5vw, 42px);

  margin-bottom:
    22px;
}


.intro-card > p {

  line-height:
    1.75;

  color:
    #d8cdbc;
}


.intro-card h2,
.form-card h2 {

  font-family:
    "Playfair Display", serif;

  font-size:
    28px;

  margin-top:
    28px;
}


/* =====================================================
   DISH TYPES
   ===================================================== */

.dish-types {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    12px;

  margin:
    22px 0;
}


.dish-types article {

  background:
    var(--panel2);

  border:
    1px solid var(--line);

  border-radius:
    14px;

  padding:
    22px 18px;

  text-align:
    center;
}


.dish-icon {

  font-size:
    34px;
}


.dish-types h3 {

  font-size:
    13px;

  letter-spacing:
    .08em;

  color:
    var(--gold);

  margin:
    12px 0 6px;
}


.dish-types p {

  color:
    var(--muted);

  font-size:
    14px;

  margin:
    0;
}


.highlight-copy {

  border-left:
    2px solid var(--gold);

  padding-left:
    16px;
}


/* =====================================================
   PRIZE
   ===================================================== */

.prize-card {

  display:
    flex;

  gap:
    20px;

  align-items:
    center;

  background:
    #2a241b;

  border:
    1px solid #5a4930;

  border-radius:
    18px;

  padding:
    26px 30px;

  margin-bottom:
    22px;
}


.prize-icon {

  flex:
    0 0 auto;

  font-size:
    42px;
}


.prize-card h2 {

  font-family:
    "Playfair Display", serif;

  margin:
    0 0 6px;

  color:
    #e0c38c;
}


.prize-card p {

  margin:
    0;

  color:
    #d9cbb7;

  line-height:
    1.6;
}


/* =====================================================
   FORM
   ===================================================== */

.form-card h2 {

  margin:
    0 0 8px;
}


.form-subtitle {

  color:
    var(--muted);

  margin:
    0 0 28px;
}


.field-grid {

  display:
    grid;

  gap:
    16px;
}


.field-grid.two {

  grid-template-columns:
    1fr 1fr;
}


.field {

  display:
    block;

  margin-bottom:
    20px;
}


.field > span,
.field legend {

  display:
    block;

  font-weight:
    600;

  margin-bottom:
    9px;

  color:
    #eee3d2;
}


/* =====================================================
   INPUTS
   ===================================================== */

.field input[type="text"],
.field select,
.field textarea {

  width:
    100%;

  background:
    #141310;

  border:
    1px solid var(--line);

  border-radius:
    10px;

  color:
    var(--cream);

  font-size:
    16px;

  padding:
    14px 15px;

  outline:
    none;

  transition:
    border-color .2s,
    box-shadow .2s;
}


.field input[type="text"],
.field select {

  min-height:
    50px;
}


.field textarea {

  min-height:
    130px;

  resize:
    vertical;

  line-height:
    1.5;
}


.field input:focus,
.field select:focus,
.field textarea:focus {

  border-color:
    var(--gold);

  box-shadow:
    0 0 0 3px
    rgba(185,154,98,.12);
}


.field small {

  display:
    block;

  color:
    var(--muted);

  margin-top:
    7px;

  line-height:
    1.45;
}


/* =====================================================
   CATEGORY
   ===================================================== */

.category-field {

  border:
    0;

  padding:
    0;

  margin:
    4px 0 24px;
}


.category-options {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    10px;
}


.category-options label {

  cursor:
    pointer;
}


.category-options input {

  position:
    absolute;

  opacity:
    0;

  pointer-events:
    none;
}


.category-options span {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    112px;

  border:
    1px solid var(--line);

  border-radius:
    12px;

  background:
    #151411;

  transition:
    border-color .2s,
    background .2s,
    transform .15s;
}


.category-options label:active span {

  transform:
    scale(.98);
}


.category-options b {

  font-size:
    30px;

  margin-bottom:
    7px;
}


.category-options strong {

  font-size:
    13px;

  text-align:
    center;
}


.category-options input:checked + span {

  border-color:
    var(--gold);

  background:
    #292319;

  box-shadow:
    0 0 0 2px
    rgba(185,154,98,.13);
}


/* =====================================================
   PHOTO
   ===================================================== */

.upload-field {

  border:
    1px dashed #51483c;

  border-radius:
    12px;

  padding:
    18px;
}


.upload-field input {

  display:
    block;

  width:
    100%;

  margin-top:
    14px;

  color:
    var(--muted);

  font-size:
    14px;
}


.photo-name {

  font-size:
    13px;

  color:
    var(--gold);

  margin-top:
    8px;

  overflow-wrap:
    anywhere;
}


/* =====================================================
   CONSENT
   ===================================================== */

.consent-row {

  display:
    flex;

  gap:
    12px;

  align-items:
    flex-start;

  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    1.5;

  margin:
    8px 0 20px;

  cursor:
    pointer;
}


.consent-row input {

  flex:
    0 0 auto;

  width:
    19px;

  height:
    19px;

  margin:
    1px 0 0;

  accent-color:
    var(--gold);
}


/* =====================================================
   SUBMIT
   ===================================================== */

.submit-btn {

  width:
    100%;

  min-height:
    54px;

  border:
    0;

  border-radius:
    12px;

  background:
    var(--gold);

  color:
    #17130e;

  padding:
    17px 20px;

  font:
    700 15px "DM Sans",
    sans-serif;

  letter-spacing:
    .04em;

  cursor:
    pointer;

  transition:
    transform .15s,
    opacity .2s;
}


.submit-btn:active {

  transform:
    scale(.985);
}


.submit-btn:disabled {

  opacity:
    .55;

  cursor:
    wait;
}


.submit-note {

  text-align:
    center;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.5;

  margin:
    10px 0 0;
}


/* =====================================================
   ERROR
   ===================================================== */

.form-message {

  display:
    none;

  padding:
    12px 14px;

  border-radius:
    9px;

  margin-bottom:
    15px;

  font-size:
    14px;
}


.form-message.error {

  background:
    #3a201d;

  color:
    #f2bbb3;
}


.form-message.show {

  display:
    block;
}


/* =====================================================
   THANK YOU
   ===================================================== */

.thank-card h1 {

  font-size:
    clamp(34px, 7vw, 58px);

  margin:
    18px 0 8px;
}


.thank-card h2 {

  font-family:
    "Playfair Display", serif;

  color:
    var(--gold);

  font-size:
    24px;

  margin:
    0 0 22px;
}


.thank-card p {

  color:
    var(--muted);

  line-height:
    1.75;

  max-width:
    600px;

  margin:
    12px auto;
}


.thank-icon {

  font-size:
    48px;

  margin-top:
    24px;
}


.thanks-prize {

  color:
    #e2c58e !important;

  font-weight:
    600;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 700px) {

  .content-wrap {

    width:
      min(
        100% - 24px,
        900px
      );

    padding:
      20px 0 50px;
  }


  .survey-header {

    padding:
      68px 18px 30px;
  }


  .language-switch {

    right:
      14px;

    top:
      14px;

    min-height:
      40px;

    font-size:
      12px;
  }


  .survey-header .eyebrow {

    margin-bottom:
      10px;
  }


  .survey-header h1 {

    font-size:
      clamp(34px, 10vw, 48px);

    line-height:
      1.02;

    margin:
      8px 0 12px;
  }


  .hero-lead {

    font-size:
      16px;

    line-height:
      1.55;

    max-width:
      520px;
  }


  .intro-card,
  .form-card {

    border-radius:
      14px;

    padding:
      24px 20px;
  }


  .intro-card h2,
  .form-card h2 {

    font-size:
      25px;
  }


  .dish-types {

    grid-template-columns:
      1fr;

    gap:
      9px;
  }


  .dish-types article {

    display:
      flex;

    align-items:
      center;

    gap:
      14px;

    text-align:
      left;

    padding:
      14px 16px;
  }


  .dish-icon {

    flex:
      0 0 42px;

    font-size:
      30px;

    text-align:
      center;
  }


  .dish-types h3 {

    margin:
      0 0 3px;
  }


  .dish-types p {

    line-height:
      1.4;
  }


  .prize-card {

    align-items:
      flex-start;

    padding:
      21px 20px;

    gap:
      15px;
  }


  .prize-icon {

    font-size:
      34px;
  }


  .prize-card h2 {

    font-size:
      21px;
  }


  .field-grid.two {

    grid-template-columns:
      1fr;

    gap:
      0;
  }


  .category-options {

    grid-template-columns:
      1fr;

    gap:
      9px;
  }


  .category-options span {

    min-height:
      66px;

    flex-direction:
      row;

    justify-content:
      flex-start;

    padding:
      10px 18px;

    gap:
      14px;
  }


  .category-options b {

    width:
      34px;

    text-align:
      center;

    margin:
      0;

    font-size:
      27px;
  }


  .category-options strong {

    font-size:
      14px;

    text-align:
      left;
  }


  .upload-field {

    padding:
      16px;
  }


  .submit-btn {

    min-height:
      58px;

    font-size:
      15px;
  }

}


/* =====================================================
   SMALL PHONES
   ===================================================== */

@media (max-width: 480px) {

  .language-screen.active,
  .thank-screen.active {

    padding:
      18px;
  }


  .language-card {

    padding:
      24px 4px;
  }


  .brand-name {

    font-size:
      11px;

    margin-bottom:
      14px;
  }


  .language-card h1 {

    font-size:
      clamp(42px, 14vw, 58px);

    margin:
      12px 0 24px;
  }


  .language-prompt {

    font-size:
      16px;

    margin-bottom:
      20px;
  }


  .language-prompt small {

    display:
      inline-block;

    margin-top:
      4px;

    font-size:
      12px;
  }


  /*
     On mobile the language buttons stay next
     to each other so language selection is
     immediate and does not require scrolling.
  */

  .language-buttons {

    grid-template-columns:
      repeat(3, 1fr);

    gap:
      7px;

    margin-top:
      22px;
  }


  .lang-btn {

    min-height:
      68px;

    padding:
      12px 5px;

    font-size:
      13px;

    border-radius:
      10px;
  }


  .lang-btn span {

    font-size:
      11px;
  }


  .content-wrap {

    width:
      calc(100% - 20px);

    padding-top:
      14px;
  }


  .survey-header {

    padding:
      64px 16px 26px;
  }


  .survey-header h1 {

    font-size:
      36px;
  }


  .hero-lead {

    font-size:
      15px;
  }


  .intro-card,
  .form-card {

    padding:
      21px 17px;

    margin-bottom:
      14px;
  }


  .intro-card > p {

    line-height:
      1.6;
  }


  .intro-card h2 {

    margin-top:
      24px;

    font-size:
      23px;
  }


  .highlight-copy {

    padding-left:
      13px;
  }


  .prize-card {

    border-radius:
      14px;

    margin-bottom:
      14px;
  }


  .field {

    margin-bottom:
      18px;
  }


  .field > span,
  .field legend {

    font-size:
      14px;

    line-height:
      1.4;
  }


  /*
     16px input text prevents iPhones
     from automatically zooming into fields.
  */

  .field input[type="text"],
  .field select,
  .field textarea {

    font-size:
      16px;

    border-radius:
      9px;
  }


  .field input[type="text"],
  .field select {

    min-height:
      52px;
  }


  .field textarea {

    min-height:
      125px;
  }


  .category-options span {

    min-height:
      62px;
  }


  .consent-row {

    font-size:
      12px;

    gap:
      11px;
  }


  .consent-row input {

    width:
      20px;

    height:
      20px;
  }


  .submit-btn {

    min-height:
      60px;

    border-radius:
      11px;

    font-size:
      14px;
  }


  .thank-card {

    padding:
      30px 6px;
  }


  .thank-icon {

    font-size:
      44px;

    margin-top:
      18px;
  }


  .thank-card h1 {

    font-size:
      38px;
  }


  .thank-card h2 {

    font-size:
      21px;
  }


  .thank-card p {

    line-height:
      1.6;
  }

}


/* =====================================================
   VERY SMALL PHONES
   ===================================================== */

@media (max-width: 360px) {

  .language-buttons {

    gap:
      5px;
  }


  .lang-btn {

    padding:
      10px 3px;

    font-size:
      12px;
  }


  .survey-header h1 {

    font-size:
      32px;
  }


  .content-wrap {

    width:
      calc(100% - 16px);
  }


  .intro-card,
  .form-card {

    padding:
      19px 15px;
  }

}