/* ===== SAFE LINK CARE DESIGN SYSTEM ===== */

:root{
  --primary:#6C63FF;
  --primary-soft:#EEF0FF;
  --accent:#FFB84D;
  --bg:#F7F8FC;
  --card:#FFFFFF;
  --text:#1F2937;
  --muted:#6B7280;
  --border:#E6E8F0;
}

/* Reset */
*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:"Iowan Old Style","Palatino","Times New Roman",serif;
  background:
    radial-gradient(circle at top, #f5efe6, #efe4d6 55%, #e6d7c2);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

body::before{ content:none; }


/* ===== MAIN WRAPPER ===== */

.container{
  min-height:calc(100vh - 90px);

  display:flex;
  align-items:center;
  justify-content:center;

  padding:40px 20px;
}


/* ===== BRAND ===== */

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

/* Logo smaller than you think = premium */
.logo{
  height:78px;
  width:auto;
  border-radius:10px;

  box-shadow:
    0 6px 18px rgba(0,0,0,.35);
}


/* Stack name + subline */
.brand-text{
  display:flex;
  flex-direction:column;
}

/* THIS is your brand anchor */
.brand-name{
  font-size:38px;
  font-weight:700;
  letter-spacing:-0.2px;
  color:#111827;
  text-shadow:none;
}


/* Subline should whisper — not shout */
.brand-subline{
  font-size:18px;
  color:#6b7280;
  margin-top:2px;
  letter-spacing:.6px;
  text-transform:uppercase;
}


/* ===== CARD ===== */

.card{
  width:100%;
  max-width:1200px;
  position: relative;
  background:linear-gradient(180deg,#fbf7f1 0%, #f6efe6 100%);
  padding:56px 52px 60px;
  border-radius:26px;
  border:1px solid rgba(201,168,78,.35);
  box-shadow:
    0 20px 60px rgba(16,24,40,.12),
    inset 0 1px 0 rgba(255,255,255,.6);
}

.card::before { content:none; }

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

.lang-switch{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
  margin-bottom:26px;
}

.lang-switch button{
  border:none;
  padding:18px 16px;
  border-radius:12px;
  background:var(--primary-soft);
  cursor:pointer;
  font-weight:700;
  font-size:18px;
  transition:.2s;
}

.lang-switch button:hover{
  background:var(--primary);
  color:white;
}

/* ===== TITLES ===== */

h2{
  margin-top:10px;
  font-size:34px;
}

h3{
  margin-top:36px;
  margin-bottom:14px;
  font-size:24px;
}

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

input, select, textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  padding:24px;
  border-radius:16px;
  border:1px solid #e5e0d8;
  margin-bottom:14px;
  font-size:22px;
  font-family:inherit;
  background:#fbfaf8;
  transition:.15s;
}

input:hover, select:hover, textarea:hover{
  border-color:#d7cbb8;
}

input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:#c9a84e;
  box-shadow:0 0 0 3px rgba(201,168,78,.2);
}

/* Prevent Chinese cutoff */
input, textarea{
  line-height:1.4;
}

input[type="date"]{
  min-width:0;
}

input[type="date"]::-webkit-datetime-edit{
  padding:0;
}

/* ===== BUTTON ===== */

form button{
  width:100%;
  margin-top:18px;
  border:none;
  padding:24px;
  border-radius:16px;

  background:linear-gradient(180deg,#2b2b2b,#111);

  color:white;
  font-size:20px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  cursor:pointer;

  transition:.25s;
}

form button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,.2);
}

/* ===== MULTI SELECT ===== */

.multi-select{
  position: relative;
  margin-bottom: 14px;
}

.field-label{
  font-size: 20px;
  font-weight: 700;
  color: #3f3a32;
  margin: 6px 2px 8px;
}

.field-help{
  font-size: 15px;
  color: #6b6357;
  margin: -2px 2px 10px;
}

.multi-trigger{
  width:100%;
  text-align:left;
  padding:12px 40px 12px 16px;
  border-radius:14px;
  border:1px solid #e5e0d8;
  background:#fbfaf8;
  font-size:22px;
  cursor:pointer;
  transition:.15s;
  display:flex;
  align-items:flex-start;
  gap:6px;
  flex-wrap:wrap;
  min-height:110px;
  position:relative;
}

.multi-trigger::after{
  content:"▾";
  font-size:18px;
  color:#8b7e6b;
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
}

.multi-select.open .multi-trigger{
  border-color:#c9a84e;
  box-shadow:0 0 0 3px rgba(201,168,78,.2);
}

.multi-trigger:hover{
  border-color:#D0D5DD;
}

.multi-trigger:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft);
}

.multi-panel{
  position: relative;
  margin-top:8px;
  padding:12px;
  border-radius:14px;
  border:1px solid #e5e0d8;
  background:#fff;
  box-shadow:0 12px 24px rgba(16,24,40,.08);
}

.multi-panel[hidden]{
  display:none;
}

.multi-controls{
  display:flex;
  gap:10px;
  align-items:center;
}

.multi-controls .multi-search{
  flex:1;
  margin-bottom:0;
}

.multi-clear{
  border:none;
  padding:10px 12px;
  border-radius:10px;
  background:#f1f3f9;
  color:#374151;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  width:auto;
  margin-top:0;
  box-shadow:none;
}

.multi-clear:hover{
  background:#e6e9f2;
  transform:none;
  box-shadow:none;
}

.multi-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.multi-chips{
  --chip-row-height: 40px;
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-template-rows: repeat(2, var(--chip-row-height));
  column-gap:10px;
  row-gap:10px;
  margin:2px 0 0;
  align-content:start;
  height: calc(var(--chip-row-height) * 2 + 10px);
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:2px;
  scrollbar-width: auto;
  scrollbar-gutter: stable;
}

.multi-chip{
  border:none;
  border-radius:999px;
  padding:8px 12px;
  background:#EEF0FF;
  color:#2b2b2b;
  font-size:18px;
  cursor:pointer;
  transition:.15s;
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:none;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  height:auto;
  line-height:1.2;
}


.phone-field{
  margin-bottom:14px;
}

.phone-prefix{
  padding:14px 12px;
  border-radius:12px;
  background:#f4efe7;
  border:1px solid #e5e0d8;
  font-weight:700;
  font-size:18px;
  color:#111827;
}

/* International phone input styling */
.iti {
  width: 100%;
}

.iti__country-container {
  background: #f4efe7;
  border: 1px solid #e5e0d8;
  border-radius: 12px 0 0 12px;
}

.iti__selected-country {
  padding: 14px 12px;
}

.iti__flag {
  background-image: url('https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/img/flags.png');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url('https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/img/flags@2x.png');
  }
}

.iti__selected-dial-code {
  font-weight: 700;
  font-size: 18px;
  color: #111827;
}

.iti__country-list {
  background: white;
  border: 1px solid #e5e0d8;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-height: 200px;
}

.iti__country {
  padding: 8px 12px;
}

.iti__country:hover {
  background: #f4efe7;
}

.iti__tel-input {
  padding: 14px 12px;
  border: 1px solid #e5e0d8;
  border-radius: 0 12px 12px 0;
  border-left: none;
  font-size: 16px;
  width: 100%;
}

.iti__tel-input:focus {
  outline: none;
  border-color: #6C63FF;
  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.1);
}

.phone-input{
  flex:1;
}

.multi-chip:hover{
  background:#dfe3ff;
}

.multi-search{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid #E5E7EB;
  margin-bottom:10px;
  font-size:18px;
  color:#111827;
  background:#fff;
  caret-color:#111827;
  -webkit-text-fill-color:#111827;
}

.multi-search::placeholder{
  color:#9CA3AF;
}

.multi-options{
  max-height:220px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-right:6px;
}

.multi-option{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  line-height:1.2;
}

.multi-option input{
  width:16px;
  height:16px;
  margin:0;
}

.multi-label{
  color:#111827;
}

.chip-remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  border-radius:999px;
  background:#d9dcff;
  font-weight:700;
  line-height:1;
}

.multi-chips::-webkit-scrollbar{
  height:8px;
}
.multi-chips::-webkit-scrollbar-thumb{
  background:#D6DAE3;
  border-radius:999px;
}
.multi-chips::-webkit-scrollbar-track{
  background:transparent;
}

.multi-placeholder{
  color:#6B7280;
  font-weight:500;
  margin-top:2px;
  margin-right:6px;
}


/* ===== SELECT PROFILE ===== */

#type{
  margin-top:8px;
}

/* ===== MOBILE ===== */

@media(max-width:600px){

  body{
    background-attachment:scroll;
  }

  .card{
    padding:22px;
    border-radius:18px;
  }

  h2{
    font-size:26px;
  }

  h3{
    font-size:20px;
    margin-top:24px;
    margin-bottom:10px;
  }

  input, select, textarea{
    padding:14px;
    border-radius:12px;
    font-size:16px;
  }

  input[type="date"]{
    font-size:14px;
    padding:14px 12px;
  }

  input[type="date"]::-webkit-datetime-edit{
    font-size:14px;
  }

  .accessories-birth-date,
  .profile-birth-date{
    width:100%;
    max-width:93%;
    min-width:0;
    display:block;
    font-size:13px;
    padding:12px 10px;
    overflow:hidden;
  }

  .accessories-birth-date::-webkit-datetime-edit,
  .profile-birth-date::-webkit-datetime-edit{
    font-size:13px;
    padding:0;
  }

  .accessories-birth-date::-webkit-calendar-picker-indicator,
  .profile-birth-date::-webkit-calendar-picker-indicator{
    margin-left:4px;
  }

  .profile-birth-date::-webkit-calendar-picker-indicator{
    margin-left:4px;
  }

  form button{
    padding:14px;
    border-radius:12px;
    font-size:16px;
  }

  .field-label{
    font-size:16px;
  }

  .multi-trigger{
    padding:10px 34px 10px 12px;
    border-radius:12px;
    font-size:16px;
    min-height:72px;
  }

  .multi-trigger::after{
    right:10px;
  }

  .multi-panel{
    padding:10px;
  }

  .multi-search{
    padding:10px;
    font-size:14px;
  }

  .multi-option{
    font-size:14px;
  }

  .multi-chip{
    padding:6px 10px;
    font-size:14px;
  }

  .phone-prefix{
    padding:10px;
    font-size:14px;
  }

  .header{
    padding:12px 18px;
  }

  .brand{
    gap:10px;
  }

  .logo{
    height:52px;
  }

  .brand-name{
    font-size:26px;
  }

  .brand-subline{
    font-size:12px;
    letter-spacing:.4px;
  }

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

  .hero-sub{
    font-size:13px;
  }

  .lang-switch{
    gap:8px;
    margin-bottom:18px;
  }

  .lang-switch button{
    padding:10px 8px;
    border-radius:10px;
    font-size:13px;
  }
}

.header{
  position:sticky;
  top:0;
  z-index:999;

  background:rgba(249,243,234,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,168,78,.25);

  padding:18px 28px;
}

.hero{
  margin:26px 0 6px;
}

.hero-title{
  font-size:30px;
  font-weight:700;
  letter-spacing:-0.2px;
  color:#1f2937;
}

.hero-sub{
  color:#667085;
  margin-top:6px;
  font-size:15px;
}

.card:focus-within{
  box-shadow:
    0 0 0 4px rgba(201,168,78,.15),
    0 12px 32px rgba(16,24,40,.08);
}

/* ===== NFC MODAL ===== */

.nfc-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.nfc-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
}

.nfc-box {
  position: relative;
  max-width: 420px;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 25px 60px rgba(0,0,0,.25);
  text-align: center;
}

.nfc-box h3 {
  margin: 0 0 12px;
  font-size: 40px;
}

.nfc-desc {
  font-size: 28px;
  color: #6B7280;
  margin-bottom: 28px;
}

.nfc-link-wrap {
  display: flex;
  gap: 8px;
}

.nfc-link-wrap input {
  flex: 1;
  padding: 22px;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  font-size: 22px;
  background: #F9FAFB;
}

.nfc-link-wrap button {
  padding: 22px 26px;
  border-radius: 10px;
  border: none;
  background: #6C63FF;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  cursor: pointer;
}

.nfc-link-wrap button:hover {
  background: #574EEA;
}

.nfc-actions {
  margin-top: 28px;
}

.nfc-actions button {
  background: transparent;
  border: none;
  font-size: 20px;
  color: #6B7280;
  cursor: pointer;
}

.nfc-actions button:hover {
  color: #111827;
}

/* Mobile safety */
@media (max-width:480px){
  .nfc-box{
    width: calc(100% - 32px);
  }
}

/* ===============================
   SECTION TITLES (BIGGER & CLEAR)
================================== */

form h3 {
  font-size: 28px;
  margin-top: 30px;
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:#3f3a32;
  border-left: 3px solid #c9a84e;
  padding-left: 10px;
}

/* ===============================
   UPLOAD SECTION
================================== */

.upload-section {
  margin-bottom: 30px;
}

.upload-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #444;
}

/* Upload box container */
.upload-box {
  display: block;
  border: 2px dashed #cfcfcf;
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  background: #fafafa;
  position: relative;
}

.upload-box:hover {
  border-color: #6C63FF;
  background: #f4f3ff;
}

/* Upload content */
.upload-success {
  border-color: #22c55e !important;
  background: #f0fff4 !important;
  animation: uploadPulse 0.4s ease;
  opacity: 0.4;
}
@keyframes uploadPulse {
  0% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

.upload-error {
  border-color: #ef4444 !important;
  background: #fff1f1 !important;
}
.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.4;
}

.upload-icon {
  font-size: 28px;
}

.upload-text {
  font-weight: 600;
}

.upload-sub {
  font-size: 13px;
  color: #777;
}

/* Image preview */
.photo-preview {
  width: 90px;
  height: 90px;
  margin: 18px auto 0;
  border-radius: 50%;
  background: #eee;
  display: none;
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

/* Status text */
.photo-status {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
}