/* Two-color minimalist theme — styling-only changes (preserves HTML & JS) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root{
  /* Monotone primary palette (user requested soft pink) */
  --primary: #F8C8C8; /* base soft pink */
  --primary-rgb: 248 200 200;
  --primary-dark: #E09B9B; /* darker shade for buttons/selected states */
  --page-bg: #F8C8C8; /* page background uses primary pink */
  --card: #FFECEC; /* form container and inputs use a pale pink (no pure white) */
  --muted: rgba(16,24,40,0.45);
  /* Keep readable text color (dark) for accessibility while keeping visual monotone using pink accents */
  --text: #1f2937;
  --border-soft: rgba(248,200,200,0.12);
  --shadow: 0 10px 30px rgba(16,24,40,0.06);
  --focus-ring: 0 0 0 6px rgba(var(--primary-rgb),0.10);
}

*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--page-bg); /* full-page soft pink */
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  width:100%;
  position:relative;
}

/* Card container */
#formContainer{
  max-width:700px;
  margin:36px auto;
  padding:48px;
  background:#F8C8C8;
  border-radius:20px;
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
  border:none;
  position:relative;
  left:0;
  right:0;
}

/* Landing (start) — centered minimalist design */
.landing{
  max-width:820px;
  margin:80px auto;
  padding:60px 40px;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  border:none;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60vh;
}

.landing-content{
  max-width:700px;
}

.landing-text{
  font-size:20px;
  line-height:1.6;
  color:var(--text);
  margin:0 0 12px 0;
}

.landing-text strong{
  font-weight:700;
  color:var(--text);
}

/* Form internals */
.form{display:block}
.form-row{margin-bottom:22px}
.form-row.two-cols .field{display:block}
.field label{display:block;font-weight:600;margin-bottom:12px;color:#374151;font-size:15px}
.field .hint{display:block;font-weight:400;font-size:13px;color:#9CA3AF;margin-top:4px;font-style:italic}

/* Inputs */
input,select,textarea{
  width:100%;
  padding:14px 18px;
  border-radius:12px;
  border:1.5px solid #D1D5DB;
  background:#FFFFFF;
  font-size:15px;
  color:#1f2937;
  transition:box-shadow .16s ease, border-color .12s ease;
  box-shadow:none;
}
input::placeholder,textarea::placeholder{color:#9CA3AF}
textarea{min-height:120px;resize:vertical}

input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:#9CA3AF;
  box-shadow:0 0 0 3px rgba(156,163,175,0.1);
}

/* Split inputs (first/last name) */
.split{display:flex;gap:12px}

/* Icon input styling */
.icon-input{position:relative}
.icon-input .icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:18px;color:#9CA3AF}
.icon-input input{padding-left:48px}
.split input{flex:1}

/* Rating (1-5) - minimal visuals, primary used only for selected state */
.rating{display:flex;gap:8px}
.rating label{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 8px;border-radius:10px;border:1.5px solid #D1D5DB;background:#FFFFFF;cursor:pointer;transition:all .15s ease;font-weight:600;color:#6B7280}
.rating input{position:absolute;opacity:0;pointer-events:none}
.rating input:checked + span{background:#E09B9B;color:#fff;border-radius:8px;padding:6px 10px;box-shadow:0 4px 12px rgba(224,155,155,0.25)}
.rating label:hover{border-color:#9CA3AF;color:#374151}
.rating span{display:inline-block}

/* Radio groups */
.horizontal-radio, .stacked-radio{display:flex;gap:10px;flex-wrap:wrap}
.stacked-radio{flex-direction:column}
.horizontal-radio label, .stacked-radio label{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1.5px solid #D1D5DB;background:#FFFFFF;color:#6B7280;cursor:pointer;transition:all .12s ease}
.horizontal-radio input[type="radio"], .stacked-radio input[type="radio"]{width:14px;height:14px}
.horizontal-radio input[type="radio"]:focus-visible, .stacked-radio input[type="radio"]:focus-visible{outline:0 0 0 3px rgba(224,155,155,0.1)}
.horizontal-radio input[type="radio"]:checked + span, .stacked-radio input[type="radio"]:checked + span{font-weight:600;color:#E09B9B}

/* File drop - white card with soft dashed primary tint */
.file-drop{position:relative;border-radius:12px;border:2px dashed #D1D5DB;padding:24px 18px;text-align:center;background:#FFFFFF;cursor:pointer;transition:border-color .12s ease}
.file-drop:hover{border-color:#9CA3AF}
.file-drop input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.file-drop .drop-text{font-size:14px;color:#6B7280}
.file-drop::before{content:'📎';position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:22px;color:#E09B9B}

/* Actions */
.actions-row{display:flex;align-items:center;gap:18px;justify-content:flex-start;margin-top:12px}
/* Buttons: darker shade of primary for monotone look */
#submitBtn{background:var(--primary-dark);color:#fff;padding:12px 20px;border-radius:10px;border:none;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 8px 20px rgba(var(--primary-rgb),0.10);transition:transform .12s ease,box-shadow .12s ease}
#submitBtn:hover{transform:translateY(-3px);background:#D28B8B;box-shadow:0 14px 30px rgba(16,24,40,0.06)}
#submitBtn:active{transform:translateY(-1px)}

.status{color:var(--muted);font-size:14px}

/* Start button on landing page — dark prominent button */
#startBtn{
  background:#2c2c2c;
  color:#fff;
  padding:16px 48px;
  border-radius:8px;
  border:none;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  margin-top:32px;
}
#startBtn:hover{transform:translateY(-2px);background:#1a1a1a;box-shadow:0 8px 20px rgba(0,0,0,0.20)}
#startBtn:active{transform:translateY(0px)}

.thank-you-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #E09B9B;
  color: white;
  font-size: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.thank-you-container h1 {
  font-size: 2rem;
  margin-bottom: 16px;
  color: #1F2937;
}

.thank-you-container .main-message {
  font-size: 1.2rem;
  color: #374151;
  margin-bottom: 12px;
  font-weight: 500;
}

.thank-you-container .sub-message {
  font-size: 1rem;
  color: #6B7280;
  margin-bottom: 16px;
  line-height: 1.6;
}

.thank-you-container .footer-message {
  font-size: 0.95rem;
  color: #9CA3AF;
  margin-bottom: 32px;
}

.back-home-btn {
  background: var(--primary-dark);
  color: white;
  padding: 12px 32px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.10);
}

.back-home-btn:hover {
  transform: translateY(-3px);
  background: #D28B8B;
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.06);
}

@media(max-width: 768px) {
  .thank-you-container h1 {
    font-size: 1.5rem;
  }
  
  .thank-you-container .main-message {
    font-size: 1rem;
  }
  
  .success-icon {
    width: 60px;
    height: 60px;
    font-size: 36px;
  }
}

@media (max-width:880px){
  .landing{padding:40px 20px;margin:40px auto}
  .landing-text{font-size:18px}
}

/* Responsive adjustments */
@media (max-width:880px){
  #formContainer{margin:18px 14px;padding:20px}
  .split{flex-direction:column}
  .actions-row{flex-direction:column;align-items:stretch}
}

@media (max-width:480px){
  body{font-size:15px}
  .landing h1{font-size:18px}
  .file-drop::before{left:12px}
}

/* subtle dividers between logical groups (primary tint) */
.form-row + .form-row{border-top:1px solid rgba(var(--primary-rgb),0.06);padding-top:18px;margin-top:18px}

/* Utility */
.hidden{display:none}