/* =====================================================================
   GCE Celebrity Match Quiz – styles
   Colors, type, buttons, fields and details are taken from
   globalcelebrityexperiences.com (Elementor kit + "Let's Talk" #contact
   section, its event-form, option tiles, gold lines and glows).
   Mobile-first: base = phone, then 768px (tablet) and 1025px (desktop),
   matching the site's Elementor breakpoints.
   ===================================================================== */

:root {
  /* Elementor global colors */
  --gce-primary: #0A1828;
  --gce-secondary: #050D17;
  --gce-text: #152A42;
  --gce-accent: #C9A961;
  --gce-gold-light: #E2C078;
  --gce-gold-dark: #8E7437;
  --gce-cream: #F5EFE3;
  --gce-ivory: #FBF8F2;

  /* #contact section + event-form */
  --gce-section-from: #050E19;
  --gce-section-to: #141F2A;
  --gce-card: #202830;
  --gce-card-border: rgba(198, 165, 93, .3);
  --gce-label: #C6A55D;
  --gce-input: #2B343D;
  --gce-input-border: #46515D;
  --gce-white-75: #FFFFFFBF;
  --gce-white-40: #FFFFFF6B;

  /* Error text: soft coral from the site's gold shimmer palette (readable on dark) */
  --gce-error: #F0A88C;

  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--gce-section-from) 0%, var(--gce-section-to) 100%);
  background-attachment: fixed;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

button, input { font: inherit; }

/* ---------- Section ---------- */
.gce-quiz {
  min-height: 100vh;
  padding: 50px 16px 60px;
}

.gce-quiz__inner {
  max-width: 1140px;
  margin: 0 auto;
}

.screen.is-entering { animation: fadeInUp .6s ease both; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Intro (hero) ---------- */
.screen--intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding-top: 20px;
}

.gold-glow {
  position: absolute;
  z-index: -1;
  top: 35%;
  left: 50%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--gce-gold-light);
  filter: blur(90px);
  opacity: .15;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gce-accent);
}

.hero-title {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}

.gold2 {
  display: inline;
  font-style: italic;
  color: var(--gce-gold-light);
}

.hero-subhead {
  max-width: 680px;
  margin: 0 0 34px;
  font-size: 17px;
  font-weight: 300;
  line-height: 30px;
  color: var(--gce-white-75);
}

.trust-line {
  margin: 22px 0 0;
  font-size: 12.5px;
  color: var(--gce-white-40);
}

/* ---------- Buttons ---------- */
.btn-icon {
  flex: none;
  transition: transform .3s ease;
}

/* Site hero button (.hero-btn) */
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 34px;
  border: 2px solid #98917E;
  border-radius: 30px;
  background: linear-gradient(135deg, #877753 0%, #625942 100%);
  box-shadow: 0 10px 14px 3px rgba(201, 169, 97, .35);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s ease;
}

.btn-hero:hover {
  background: linear-gradient(135deg, #B29963 0%, #87774E 100%);
  border-color: var(--gce-gold-light);
  box-shadow: 0 12px 22px 8px rgba(201, 169, 97, .35);
}

.btn-hero:hover .btn-icon,
.btn-submit:hover .btn-icon { transform: translateX(5px); }

/* Site event-form submit button */
.btn-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--gce-gold-light);
  border-radius: 999px;
  background: linear-gradient(180deg, #9b8d68 0%, #8f815f 45%, #7b6d4f 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 14px 35px rgba(182, 155, 88, .28);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: all .35s ease;
}

.btn-submit::after {
  content: "";
  flex: none;
  width: 22px;
  height: 10px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='10' viewBox='0 0 22 10'%3E%3Cpath d='M1 5H18' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M14 1L18 5L14 9' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  transition: transform .3s ease;
}

.btn-submit::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(199, 170, 97, .22), transparent 70%);
  pointer-events: none;
}

.btn-submit:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #b19e72 0%, #9b8b64 50%, #867553 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 18px 40px rgba(199, 170, 97, .42);
}

.btn-submit:hover::after { transform: translateX(5px); }

/* Site secondary button (.steps-btn) */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border: 2px solid #6D7985;
  border-radius: 30px;
  background: linear-gradient(138deg, #35424F 0%, #556273 100%);
  box-shadow: 0 10px 14px 3px rgba(109, 121, 133, .24);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s ease;
}

.btn-back:hover {
  background: linear-gradient(135deg, #1C2A3A 0%, #334558 100%);
  box-shadow: 0 12px 22px 8px rgba(109, 121, 133, .35);
}

.btn-back:hover .btn-icon { transform: translateX(-5px); }

/* Keyboard focus */
.btn-hero:focus-visible,
.btn-submit:focus-visible,
.btn-back:focus-visible,
.option-tile:focus-visible {
  outline: 2px solid var(--gce-gold-light);
  outline-offset: 3px;
}

.step-title:focus,
.hero-title:focus,
.response-output:focus { outline: none; }

/* ---------- Card (site .event-form) ---------- */
.event-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid var(--gce-card-border);
  border-radius: 18px;
  background: var(--gce-card);
  color: #fff;
}

.form-step {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.step-badge {
  flex: none;
  padding: 5px 14px;
  border: 1px solid rgba(198, 165, 93, .26);
  border-radius: 999px;
  background: rgba(201, 169, 97, .06);
  color: var(--gce-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.step-title {
  flex: 1 1 100%;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

/* Progress: site's gold top-line gradient */
.progress {
  position: relative;
  height: 4px;
  margin-bottom: 26px;
  border-radius: 50px;
  background: rgba(198, 165, 93, .35);
  overflow: hidden;
}

.progress__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 50px;
  background: linear-gradient(90deg, #B68A2C, #D9B96B, #B68A2C);
  transition: width .45s ease;
}

/* ---------- Answer tiles (site dark tiles) ---------- */
.option-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.option-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 16px 18px;
  border: 1px solid #E2C07824;
  border-radius: 16px;
  background: linear-gradient(135deg, #C9A96100 0%, #C9A96114 100%);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: all .3s ease;
}

.option-tile:hover {
  border-color: var(--gce-gold-light);
  background: linear-gradient(135deg, #161E27 0%, #23272B 100%);
}

.option-tile[aria-pressed="true"] {
  border-color: var(--gce-gold-light);
  background: #E2C0780F;
  box-shadow: 0 0 10px rgba(226, 192, 120, .29);
}

.option-mark {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--gce-label);
  border-radius: 50%;
}

.option-tile[aria-pressed="true"] .option-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--gce-gold-light);
}

.quiz-nav {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(198, 165, 93, .35);
}

/* ---------- Form fields (site event-form) ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.form-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--gce-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.form-field input {
  width: 100%;
  height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--gce-input-border);
  border-radius: 10px;
  background: var(--gce-input);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px; /* 16px stops iOS zooming into the field */
  font-weight: 500;
  letter-spacing: 1px;
  outline: none;
  transition: .25s;
}

.form-field input:focus {
  border-color: var(--gce-gold-light);
  background-color: #E2C0780F;
  box-shadow: 0 0 10px 0 rgba(226, 192, 120, .29);
}

.form-field input[aria-invalid="true"] { border-color: var(--gce-error); }

.field-error {
  margin: 8px 0 0;
  color: var(--gce-error);
  font-size: 13px;
  line-height: 1.4;
}

.form-submit {
  position: relative;
  z-index: 0; /* keeps the button glow above the card background */
  margin-top: 30px;
  text-align: center;
}

/* ---------- Result ---------- */
.match-list {
  display: grid;
  gap: 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.match-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border: 1px solid #E2C07824;
  border-radius: 16px;
  background: linear-gradient(135deg, #C9A96100 0%, #C9A96114 100%);
  transition: all .3s ease;
}

.match-card:hover {
  border-color: var(--gce-gold-light);
  background: linear-gradient(135deg, #161E27 0%, #23272B 100%);
}

/* Site .industry-number circle */
.match-number {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #D8B25A;
  border-radius: 50%;
  background: rgba(41, 47, 59, .85);
  color: #D8B25A;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
}

.match-content { min-width: 0; }

.match-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gce-gold-light);
}

/* Site .gold-line accent */
.gold-line {
  display: block;
  width: 50px;
  height: 2px;
  margin: 12px 0;
  background: var(--gce-accent);
}

.match-desc {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--gce-white-75);
}

.match-desc::first-letter { text-transform: uppercase; }

/* Site footer gradient divider */
.divider {
  width: 60%;
  height: 1px;
  margin: 32px auto 26px;
  background: linear-gradient(to right,
    rgba(198, 165, 93, 0) 0%,
    rgba(198, 165, 93, .08) 15%,
    rgba(198, 165, 93, .20) 30%,
    rgba(198, 165, 93, .35) 50%,
    rgba(198, 165, 93, .20) 70%,
    rgba(198, 165, 93, .08) 85%,
    rgba(198, 165, 93, 0) 100%);
}

.upsell {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: #fff;
}

.date-note {
  margin: 0 0 24px;
  font-size: 15px;
  font-weight: 300;
  color: var(--gce-white-75);
}

/* Site CF7 response box */
.response-output {
  margin: 8px 0 0;
  padding: 20px;
  border: 1px solid var(--gce-text);
  border-radius: 24px;
  background: var(--gce-secondary);
  color: var(--gce-gold-light);
  text-align: center;
}

/* ---------- Tablet (768px+) ---------- */
@media (min-width: 768px) {
  .gce-quiz { padding: 70px 24px 80px; }

  .eyebrow { font-size: 14px; }

  .hero-title { font-size: 40px; }

  .hero-subhead { font-size: 20px; }

  .event-form {
    padding: 30px;
    border-radius: 24px;
  }

  .form-step {
    gap: 18px;
    margin-bottom: 22px;
  }

  .step-badge {
    font-size: 12px;
    letter-spacing: 2px;
    padding: 6px 16px;
  }

  .step-title { font-size: 26px; }

  .option-grid,
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .form-field.full { grid-column: 1 / -1; }

  .form-field input {
    padding: 14px 18px;
    font-size: 14px;
  }

  .form-field label { letter-spacing: 2px; }

  .btn-submit {
    width: auto;
    min-width: 300px;
    max-width: 100%;
    padding: 18px 34px;
    font-size: 18px;
  }

  .match-card { padding: 24px; gap: 20px; }

  .match-number {
    width: 52px;
    height: 52px;
  }

  .match-name { font-size: 25px; }

  .match-desc { font-size: 16px; }

  .upsell { font-size: 18px; }

  .phone-form {
    max-width: 420px;
    margin: 0 auto;
  }
}

/* ---------- Desktop (1025px+) ---------- */
@media (min-width: 1025px) {
  .gce-quiz { padding: 90px 24px 100px; }

  .hero-title {
    font-size: 64px;
    line-height: 80px;
  }

  .event-form { padding: 40px; }

  .step-title { font-size: 30px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .btn-submit:hover { transform: none; }
}