/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

:root {
  /* Swiss Style Color Palette */
  --accent-color: #EB585A;
  --black: #000000;
  --dark-grey: #111111;
  --medium-grey: #888888;
  --light-grey: #e6e6e6;
  /* Very subtle for inactive borders */
  --white: #FFFFFF;
  --error-color: #EB585A;
  /* Using accent for error to maintain palette strictness or could be standard red, but prompt implies limited palette */

  /* Spacing System */
  --space-unit: 8px;
  --space-sm: 16px;
  /* 2 units */
  --space-md: 32px;
  /* 4 units */
  --space-lg: 64px;
  /* 8 units */

  /* Typography */
  --font-base: 'Lato', sans-serif;
  --text-size-body: 16px;
  --text-size-label: 12px;
  --text-size-title: 32px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-base);
  background-color: var(--white);
  color: var(--black);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Layout */
.container {
  width: 100%;
  max-width: 100%;
  /* Mobile first, full width */
  padding: var(--space-md);
  /* 32px outer margin */
  margin: 0 auto;
}

/* Tablet & Desktop Optimization */
@media (min-width: 768px) {
  :root {
    --text-size-title: 48px;
    --text-size-body: 18px;
    --text-size-label: 14px;
    --space-md: 48px;
  }

  .container {
    max-width: 700px;
    /* iPad Air optimal width */
    margin-left: 12vw;
    /* Asymmetrical balance */
    margin-right: auto;
    padding: var(--space-md);
  }
}

@media (min-width: 1024px) {
  :root {
    --text-size-title: 56px;
    --text-size-body: 20px;
    --space-md: 64px;
  }

  .container {
    max-width: 840px;
    /* iPad Pro / Desktop optimal width */
    margin-left: 15vw;
  }

  .header h1 {
    font-size: var(--text-size-title);
  }
}

/* Structural Reset (Removing Card Look) */
.card {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* Typography Hierarchy */
.header {
  text-align: left;
  /* Strict left alignment */
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--black);
  /* Structural separator */
}

.logo {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--black);
  margin-bottom: var(--space-md);
  display: block;
  opacity: 0.8;
}

.header h1 {
  font-family: var(--font-base);
  font-weight: 900;
  /* Black weight */
  font-size: var(--text-size-title);
  color: var(--black);
  line-height: 1.1;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.5px;
}

.header p {
  font-size: var(--text-size-body);
  color: var(--medium-grey);
  max-width: 80%;
}

/* Form Elements */
.form-group {
  margin-bottom: var(--space-md);
  position: relative;
}

/* Swiss Style Rating Group */
.rating-options {
  display: flex;
  gap: var(--space-sm);
  margin-top: 8px;
}

.rating-radio {
  cursor: pointer;
  position: relative;
}

.rating-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.rating-radio span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--black);
  background: transparent;
  color: var(--black);
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 18px;
  transition: all 0.2s ease;
}

.rating-radio input:checked~span {
  background-color: var(--accent-color);
  color: var(--white);
  border-color: var(--accent-color);
}

.rating-radio:hover span {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.rating-radio input:checked:hover~span {
  color: var(--white);
  /* Keep white text when hovered if selected */
}


label {
  display: block;
  font-family: var(--font-base);
  font-weight: 700;
  /* Bold */
  font-size: var(--text-size-label);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--black);
  margin-bottom: 12px;
  transition: color 0.2s ease;
}

.required {
  color: var(--accent-color);
}

/* Swiss Style Inputs */
input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--black);
  /* High contrast underline */
  background: transparent;
  padding: 8px 0;
  /* No side padding to align text strictly with label */
  border-radius: 0;
  font-family: var(--font-base);
  font-size: var(--text-size-body);
  color: var(--black);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  appearance: none;
  -webkit-appearance: none;
  /* Remove system styling */
}

textarea {
  min-height: 80px;
  resize: vertical;
  border: 1px solid var(--black);
  /* Full box for textareas */
  padding: 12px;
}

/* Focus States */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: none;
  /* No glow, just sharp color change */
}

input:focus+label,
/* Note: This selector won't work unless label is after input, so we use :focus-within on group if possible or just rely on field style */
.form-group:focus-within label {
  color: var(--accent-color);
}

/* Buttons */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px;
  background-color: var(--accent-color);
  color: var(--white);
  border: none;
  border-radius: 0;
  /* Sharp corners */
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-top: var(--space-md);
}

.btn:hover {
  background-color: #d04042;
  /* Slightly darker shade */
  transform: none;
  /* No movement */
  box-shadow: none;
}

.btn:disabled {
  background-color: var(--light-grey);
  color: var(--medium-grey);
}

.btn-secondary {
  background-color: transparent;
  color: var(--black);
  border: 1px solid var(--black);
  margin-top: var(--space-sm);
}

.btn-secondary:hover {
  background-color: var(--black);
  color: var(--white);
}

/* Success Page/Components */
.review-box {
  border-left: 4px solid var(--accent-color);
  background: #fafafa;
  padding: var(--space-md);
  margin: var(--space-md) 0;
}

.review-content {
  font-family: var(--font-base);
  font-size: 18px;
  /* Slightly larger for emphasis */
  color: var(--black);
  font-style: italic;
  line-height: 1.6;
}

.steps-list {
  list-style: none;
  /* Remove default bullets */
  counter-reset: step-counter;
  margin: var(--space-md) 0;
  padding: 0;
}

.steps-list li {
  position: relative;
  padding-left: 40px;
  margin-bottom: var(--space-sm);
  color: var(--black);
  font-size: 15px;
}

.steps-list li::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  color: var(--accent-color);
  font-size: 18px;
}

.copy-btn {
  background: transparent;
  border: 1px solid var(--black);
  color: var(--black);
  padding: 12px 24px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  border-radius: 0;
  cursor: pointer;
  margin-top: var(--space-sm);
  transition: all 0.2s;
}

.copy-btn:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

/* Responsive Grid/Layout adjustments */
@media (min-width: 768px) {
  body {
    justify-content: center;
    /* Center vertically on desktop */
  }
}

/* Utilities */
.error-message {
  color: var(--accent-color);
  font-size: 12px;
  font-weight: 700;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Spinner - Minimalist */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 12px;
  display: none;
}