/* ============================================================
     DESIGN SYSTEM — generated via UI UX Pro Max methodology
     Product:  Education / Study-abroad event registration
     Pattern:  Trust & Authority + sectioned single-column form
     Style:    Soft UI Evolution + Swiss Minimalism (Bento cards)
     Colors:   TCSA brand (red #c23b3c / navy #1a2540) on warm neutral
     Type:     Kanit (display) + Sarabun (body)
     Effects:  Soft layered shadows · 150–300ms transitions · gentle hover
     Avoid:    AI purple/pink gradients · harsh motion · emoji-as-icons
     ============================================================ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --red: #c23b3c; --red-dark: #a82f30; --red-light: #fdf2f2;
    --navy: #1a2540; --navy-mid: #243054;
    --grey-bg: #f4f4f3; --grey-border: #e2e5ea; --grey-text: #5f6775;
    --text: #1f2937; --white: #ffffff; --green: #2b8a3e;
    --radius: 14px; --radius-sm: 9px;
    /* Soft UI layered shadows */
    --shadow-sm: 0 1px 2px rgba(26,37,64,0.04), 0 1px 3px rgba(26,37,64,0.06);
    --shadow: 0 4px 6px -1px rgba(26,37,64,0.05), 0 10px 24px -8px rgba(26,37,64,0.10);
    --shadow-lg: 0 12px 24px -8px rgba(26,37,64,0.14), 0 24px 48px -16px rgba(26,37,64,0.12);
    --shadow-red: 0 8px 22px -6px rgba(194,59,60,0.42);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 150ms var(--ease); --t-mid: 240ms var(--ease);
    --ring: 0 0 0 3px rgba(194,59,60,0.15);
  }
  body { font-family: 'Sarabun','Tahoma',sans-serif; background: var(--grey-bg); color: var(--text); min-height: 100vh; padding: 0; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }

  /* Accessibility: visible keyboard focus everywhere */
  :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
  input:focus-visible, select:focus-visible, .search-input:focus-visible { outline: none; }

  /* Respect reduced-motion preference */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }
  .page-header { background: var(--white); border-bottom: 3px solid var(--red); padding: 20px 24px 16px; display: flex; align-items: center; gap: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
  .page-header a { display: flex; align-items: center; }
  .page-header img { height: 42px; object-fit: contain; }
  .header-divider { width: 2px; height: 36px; background: var(--grey-border); }
  .header-text { font-family: 'Kanit',sans-serif; font-size: 17px; color: var(--grey-text); font-weight: 500; }
  .hero { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, #c23b3c22 100%); color: white; padding: 40px 24px 36px; text-align: center; position: relative; overflow: hidden; }
  .hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
  .hero-badge { display:inline-block; background:var(--red); color:white; font-size:11px; font-weight:600; letter-spacing:1.5px; padding:4px 14px; border-radius:20px; margin-bottom:14px; text-transform:uppercase; font-family:'Kanit',sans-serif; }
  .hero h1 { font-family:'Kanit',sans-serif; font-size:clamp(22px,5vw,32px); font-weight:700; line-height:1.3; margin-bottom:20px; }
  .hero-meta { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; }
  .hero-meta-item { display:flex; align-items:center; gap:8px; font-size:14px; opacity:0.9; }
  .hero-meta-item svg { opacity:0.7; flex-shrink:0; }
  .main { max-width:720px; margin:0 auto; padding:32px 16px 40px; width:100%; }
  .card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:32px; margin-bottom:20px; border:1px solid rgba(226,229,234,0.7); transition:box-shadow var(--t-mid), transform var(--t-mid); opacity:0; transform:translateY(16px); animation:cardIn 0.5s var(--ease) forwards; }
  .card:hover { box-shadow:var(--shadow-lg); }
  .card.dropdown-active { position:relative; z-index:60; }
  .card.anim-done { transform:none; opacity:1; animation:none; }
  .card:nth-of-type(1){ animation-delay:0.05s; }
  .card:nth-of-type(2){ animation-delay:0.13s; }
  .card:nth-of-type(3){ animation-delay:0.21s; }
  .card:nth-of-type(4){ animation-delay:0.29s; }
  @keyframes cardIn { to { opacity:1; transform:translateY(0); } }
  .card-title { font-family:'Kanit',sans-serif; font-size:17px; font-weight:600; color:var(--red); margin-bottom:22px; padding-bottom:12px; border-bottom:2px solid var(--red-light); display:flex; align-items:center; gap:10px; }
  .card-title-icon { width:30px; height:30px; background:linear-gradient(145deg, var(--red), var(--red-dark)); border-radius:8px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-red); flex-shrink:0; }
  .form-group { margin-bottom:18px; }
  .form-row { display:grid; gap:16px; }
  .form-row.cols-2 { grid-template-columns:1fr 1fr; }
  .form-row.cols-3 { grid-template-columns:auto 1fr 1fr; }
  label { display:block; font-weight:600; font-size:14px; color:#374151; margin-bottom:6px; }
  label .req { color:var(--red); margin-left:3px; }
  label .hint { font-weight:400; color:var(--grey-text); font-size:12px; margin-left:4px; }
  input[type="text"], input[type="date"], input[type="email"], input[type="tel"], select, .search-input {
    width:100%; padding:10px 12px; border:1.5px solid var(--grey-border); border-radius:8px; font-size:14px;
    font-family:'Sarabun','Tahoma',sans-serif; color:var(--text); background:var(--white);
    transition:border-color var(--t-fast), box-shadow var(--t-fast); appearance:none;
  }
  input:focus, select:focus, .search-input:focus { outline:none; border-color:var(--red); box-shadow:var(--ring); }
  input:hover:not(:focus), select:hover:not(:focus), .search-input:hover:not(:focus) { border-color:#c8cdd6; }
  select { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6775' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
  .search-dropdown { position:relative; }
  .dropdown-list { position:absolute; top:calc(100% + 6px); left:0; right:0; background:white; border:1px solid var(--grey-border); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); max-height:240px; overflow-y:auto; z-index:100; display:none; overscroll-behavior:contain; }
  .dropdown-list.open { display:block; animation:ddIn 0.16s var(--ease); }
  @keyframes ddIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
  .dropdown-item { padding:10px 14px; font-size:13px; cursor:pointer; color:var(--text); transition:background var(--t-fast), color var(--t-fast); border-bottom:1px solid #f3f4f6; }
  .dropdown-item:last-child { border-bottom:none; }
  .dropdown-item:hover, .dropdown-item.active { background:var(--red-light); color:var(--red); }
  .dropdown-item em { font-style:normal; font-weight:700; color:var(--red); }
  .dropdown-item .cn { font-family:'Noto Sans SC',sans-serif; }
  .dropdown-item .sub { color:var(--grey-text); font-size:11px; margin-left:4px; }
  .dropdown-item:hover .sub, .dropdown-item.active .sub { color:var(--red); }
  .dropdown-group-label { padding:6px 14px; font-size:11px; font-weight:700; color:var(--grey-text); background:#f9fafb; letter-spacing:0.5px; position:sticky; top:0; }
  .dropdown-empty, .dropdown-loading { padding:12px 14px; font-size:13px; color:var(--grey-text); text-align:center; }
  .field-hidden { display:none !important; }
  .province-display { padding:10px 12px; border:1.5px solid var(--grey-border); border-radius:8px; background:#f9fafb; font-size:14px; color:var(--grey-text); min-height:42px; display:flex; align-items:center; transition:background var(--t-fast), color var(--t-fast); }
  .province-display.filled { color:var(--text); background:white; border-color:#c8cdd6; font-weight:600; }
  .radio-group { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
  .radio-pill { display:flex; align-items:center; gap:7px; padding:8px 15px; border:1.5px solid var(--grey-border); border-radius:22px; cursor:pointer; font-size:13px; transition:border-color var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); user-select:none; font-family:'Sarabun','Tahoma',sans-serif; background:var(--white); }
  .radio-pill input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
  .radio-pill:hover { border-color:var(--red); color:var(--red); }
  .radio-pill.selected { border-color:var(--red); background:var(--red-light); color:var(--red); font-weight:600; box-shadow:0 2px 8px -2px rgba(194,59,60,0.3); }
  .radio-pill:focus-within { box-shadow:var(--ring); }
  .pdpa-box { border:1px solid var(--grey-border); border-radius:var(--radius-sm); padding:16px; background:#fafafa; font-size:13px; line-height:1.7; color:#4b5563; max-height:160px; overflow-y:auto; margin-bottom:14px; overscroll-behavior:contain; }
  .pdpa-check-row { display:flex; align-items:flex-start; gap:12px; cursor:pointer; padding:4px; border-radius:8px; transition:background var(--t-fast); }
  .pdpa-check-row:hover { background:var(--red-light); }
  .pdpa-check-row input[type="checkbox"] { width:18px; height:18px; border:2px solid var(--grey-border); border-radius:4px; cursor:pointer; flex-shrink:0; accent-color:var(--red); margin-top:2px; }
  .pdpa-label { font-size:13px; color:var(--text); line-height:1.6; }
  .pdpa-label strong { color:var(--red); }
  .submit-btn { width:100%; padding:16px; background:linear-gradient(145deg, var(--red), var(--red-dark)); color:white; border:none; border-radius:12px; font-size:16px; font-weight:700; font-family:'Kanit',sans-serif; cursor:pointer; transition:transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast); display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; letter-spacing:0.5px; box-shadow:var(--shadow-red); }
  .submit-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(194,59,60,0.55); }
  .submit-btn:active:not(:disabled) { transform:translateY(0); }
  .submit-btn:disabled { background:#9ca3af; cursor:not-allowed; transform:none; box-shadow:none; }
  .spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,0.4); border-top-color:white; border-radius:50%; animation:spin 0.6s linear infinite; display:none; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .page-footer { background:var(--navy); color:rgba(255,255,255,0.72); text-align:center; padding:24px; font-size:12px; margin-top:auto; }
  .page-footer img { height:28px; opacity:0.75; margin-bottom:10px; display:block; margin-inline:auto; }
  .modal-overlay { position:fixed; inset:0; background:rgba(15,20,35,0.55); z-index:1000; display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px); }
  .modal-overlay.open { display:flex; animation:fadeIn 0.2s var(--ease); }
  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  .modal { background:white; border-radius:18px; padding:40px 32px; max-width:420px; width:100%; text-align:center; animation:modalIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; box-shadow:var(--shadow-lg); }
  @keyframes modalIn { from { opacity:0; transform:scale(0.9) translateY(16px); } to { opacity:1; transform:scale(1) translateY(0); } }
  .modal-icon { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
  .modal-icon svg { width:34px; height:34px; }
  .modal-icon.success { background:#dcfce7; color:#15803d; }
  .modal-icon.error { background:#fee2e2; color:#b91c1c; }
  .modal h2 { font-family:'Kanit',sans-serif; font-size:22px; color:var(--text); margin-bottom:10px; }
  .modal p { font-size:14px; color:#4b5563; line-height:1.7; margin-bottom:24px; }
  .modal-btn { padding:12px 32px; background:var(--red); color:white; border:none; border-radius:9px; font-size:15px; font-weight:600; font-family:'Kanit',sans-serif; cursor:pointer; transition:background var(--t-fast), transform var(--t-fast); }
  .modal-btn:hover { background:var(--red-dark); transform:translateY(-1px); }
  .field-msg { font-size:12px; color:var(--red); margin-top:5px; display:none; }
  .field-msg.show { display:block; }
  /* ─────────── Responsive ─────────── */

  /* Tablet */
  @media (max-width:768px) {
    .main { padding:24px 14px 0; }
    .card { padding:26px 22px; }
    .hero { padding:34px 20px 30px; }
    .page-header { padding:16px 18px 14px; gap:12px; }
  }

  /* Mobile */
  @media (max-width:540px) {
    body { padding-bottom:0; }
    .page-header { padding:14px 16px 12px; gap:10px; }
    .page-header img { height:34px; }
    .header-divider { height:28px; }
    .header-text { font-size:14px; }
    .hero { padding:28px 18px 26px; }
    .hero-badge { font-size:10px; padding:4px 12px; margin-bottom:10px; }
    .hero h1 { margin-bottom:16px; }
    .hero-meta { flex-direction:column; align-items:center; gap:10px; }
    .hero-meta-item { font-size:13px; justify-content:center; }
    .main { padding:18px 12px 0; }
    .card { padding:20px 16px; margin-bottom:16px; border-radius:8px; }
    .card-title { font-size:16px; margin-bottom:18px; }
    .form-group { margin-bottom:16px; }
    /* Stack name row: prefix on its own line, names side by side */
    .form-row.cols-3 { grid-template-columns:1fr 1fr; }
    .form-row.cols-3 > :first-child { grid-column:1 / -1; }
    .form-row.cols-2 { grid-template-columns:1fr; gap:0; }
    .form-row.cols-2 .form-group { margin-bottom:16px; }
    /* 16px inputs prevent iOS focus-zoom; larger tap targets */
    input[type="text"], input[type="date"], input[type="email"], input[type="tel"], select, .search-input { font-size:16px; padding:12px; }
    .radio-group { gap:8px; }
    .radio-pill { padding:9px 14px; font-size:13px; }
    .dropdown-list { max-height:200px; }
    .dropdown-item { padding:11px 14px; }
    .submit-btn { padding:14px; font-size:15px; }
    .page-footer { padding:20px 16px; font-size:11px; line-height:1.8; }
    .modal { padding:32px 22px; border-radius:14px; }
    .modal h2 { font-size:20px; }
    .modal-icon { width:64px; height:64px; font-size:32px; }
  }

  /* Small phones */
  @media (max-width:380px) {
    .header-text { display:none; }
    .header-divider { display:none; }
    .hero h1 { font-size:21px; }
    .card { padding:18px 14px; }
    .form-row.cols-3 { grid-template-columns:1fr; }
    .radio-pill { padding:9px 12px; font-size:12.5px; }
    .pdpa-box { max-height:140px; font-size:12.5px; }
  }

  /* Landscape phones / short viewports */
  @media (max-height:560px) and (max-width:768px) {
    .hero { padding:22px 18px; }
    .modal { padding:24px 20px; }
    .pdpa-box { max-height:120px; }
  }