/* Mobile-friendly styles for template/default/html/index.html */
:root { --brand: #2563eb; --brand-2: #7c3aed; }

/* Header and navigation */
.header { display:flex; justify-content:space-between; align-items:center; padding:16px 16px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.06); position:sticky; top:0; z-index:10; }
.brand { font-weight:600; color:#111827; }
.nav { display:flex; gap:12px; }
.nav a { color:#4b5563; text-decoration:none; padding:8px 10px; border-radius:8px; }
.nav a:hover { background:#f3f4f6; }

/* Hero */
.hero { text-align:center; padding:32px 12px 16px;padding: 100px; }
.hero h1 { font-weight:700; margin:0 0 8px; color:#ffffff; font-size: clamp(24px, 6vw, 40px); }
.hero .hint { color:#ffffff; }

/* Search box */
.search { display:flex; justify-content:center; margin-top:18px; }
.search-box { display:flex; gap:12px; align-items:center; background:#fff; padding:10px; border-radius:999px; box-shadow:0 16px 32px rgba(37,99,235,.12); width: min(720px, 92%); }
.search-input { flex:1; border:0; outline:none; padding:12px 14px; border-radius:999px; font-size:16px; min-height:44px; }
.search-button { border:0; border-radius:999px; padding:12px 18px; background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff; font-weight:600; font-size:15px; min-height:44px; cursor:pointer; }
.search-button:active { transform: scale(.98); }

/* Ensure input has white background */
.search-input { background:#fff; border: 0; }

/* Desktop: remove gray frame/shadow and oval background around container */
@media (min-width: 641px) {
  .search-box { box-shadow: none; background: transparent; border-radius: 0; }
  .search-input { border: 0; box-shadow: none; }
}

/* Step 2 form: unified alignment and inputs */
#infoForm fieldset { border: none; }
#infoForm .row { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
#infoForm label { min-width: 96px; color: #374151; }
#infoForm input[type="text"],
#infoForm input[type="email"],
#infoForm input[type="tel"],
#infoForm select {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 12px;
  height: 44px;
  background: #fff;
  box-sizing: border-box;
}
#infoForm input:focus,
#infoForm select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
  outline: none;
}
#infoForm .btns { margin-top: 8px; }
#btnSubmitInfo {
  border:0; border-radius:12px; padding:12px 18px; min-height:44px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff; font-weight:600; cursor:pointer;
}
#btnSubmitInfo:active { transform: scale(.98); }
#infoForm .phone-hint { color:#6b7280; font-size:12px; margin-left: 96px; }
#infoForm #telError { color:#d33; font-size:12px; margin-left: 96px; }

/* Form and status */
.container { max-width:980px; margin:24px auto; padding:0 16px; }
.status { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.06); }

/* Phone row */
.phone-row { display: flex; align-items: center; gap: 8px; }
.phone-row label { min-width: 70px; }
.phone-select { width: 120px; padding: 6px; }
.phone-input { width: 220px; padding: 6px; }
.phone-hint { color: #888; font-size: 12px; margin-left: 78px; }

/* Footer */
.footer { text-align:center; color:#6b7280; padding:24px; }

/* Mobile tweaks */
@media (max-width: 640px) {
  .hero { text-align:center; padding: 24px 16px; }
  .hero .hint { display:flex; align-items:center; justify-content:center; gap:6px; margin:8px auto; max-width:92%; font-size:14px; line-height:1.5; }
  .header { padding:12px 10px; flex-wrap:wrap; gap:8px; }
  .nav { width:100%; justify-content:center; flex-wrap:wrap; }
  .nav a { padding:8px 12px; }
  .search-box { width: 96%; padding:8px; gap:8px; flex-direction: column; align-items: stretch; box-shadow: none; background: transparent; border-radius: 0; }
  .search-input { width: 100%; background:#fff; border:1px solid #e5e7eb; border-radius:12px; }
  .search-button { padding:12px 14px; font-size:14px; width:100%; margin-top:8px; border-radius:12px; box-shadow:none; }
  .phone-row { flex-direction: column; align-items: stretch; gap:8px; }
  .phone-row label { min-width: 0; }
  #infoForm .phone-row label { min-width: 0 !important; }
  .phone-select { width: 100%; max-width: 220px; }
  .phone-input { width: 100%; max-width: 320px; }
  .phone-hint { margin-left: 0; }
  .cc-picker { width:100%; }
  .cc-input { width: 100%; }
  .cc-list { width: 100%; }
  #infoForm .row { flex-wrap: wrap; }
  #infoForm label { display:block; min-width: 0; margin-bottom:6px; font-weight:600; color:#374151; }
  #infoForm input[type="text"],
  #infoForm input[type="email"],
  #infoForm input[type="tel"],
  #infoForm select { width: 100% !important; height:36px; padding:6px 10px; border:1px solid #e5e7eb; border-radius:12px; }
  #btnSubmitInfo { width: 100%; }
}
/* Small tablet tweaks (641px–768px) */
@media (max-width: 768px) and (min-width: 641px) {
  .hero { padding: 32px 20px; }
  .hero .hint { display:flex; align-items:center; justify-content:center; gap:6px; margin:10px auto; max-width:92%; }
  .search-box { width: 92%; }
}
/* Custom country code picker */
.cc-picker { position: relative; }
.cc-input { width: 96px; height: 36px; padding: 6px 28px 6px 10px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.cc-toggle { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:16px; height:16px; padding:0; border:none; background:none; cursor:pointer; color:#6b7280; box-shadow:none; border-radius:0; appearance:none; -webkit-appearance:none; -moz-appearance:none; }
.cc-toggle:focus { outline:none; }
.cc-toggle::after { content:""; display:block; width:0; height:0; margin:auto; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid #6b7280; }
.cc-list { position:absolute; top:42px; left:0; width:180px; max-height:240px; overflow:auto; padding:6px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.12); display:none; z-index:20; }
.cc-list li { list-style:none; padding:6px 8px; border-radius:8px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.cc-list li:hover { background:#f3f4f6; }
.cc-code { font-weight:600; color:#111827; }
.cc-name { color:#6b7280; }