/* ============================================================
   PREMIUM FORMS — drrpsharma.com unified tool-form design system
   Candlelit Editorial: parchment #f8f1e2 · burgundy #8b2138 · gold #bf8c34
   Loaded AFTER page styles on every /tools/ page — wins the cascade.
   Scope: form controls only (select, date/text/number inputs, checkboxes,
   primary buttons). Nav/footer have no form controls on these pages.
   ============================================================ */

/* ---------- Text / date / number inputs ---------- */
.pf-scope input[type="text"],
.pf-scope input[type="date"],
.pf-scope input[type="number"],
body input[type="text"][id],
body input[type="date"][id],
body input[type="number"][id]{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px !important;
  border:1.5px solid #d8c9ab !important;
  border-radius:11px !important;
  font-family:'Spectral',Georgia,serif !important;
  font-size:16px !important;
  color:#3a2a1a;
  background:#fffef9 !important;
  box-shadow:0 1px 4px rgba(76,42,16,.06), inset 0 1px 0 rgba(255,255,255,.7) !important;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
  -webkit-appearance:none;
  appearance:none;
}

body input[type="text"][id]:hover,
body input[type="date"][id]:hover,
body input[type="number"][id]:hover{
  border-color:#c8ab74 !important;
}

body input[type="text"][id]:focus,
body input[type="date"][id]:focus,
body input[type="number"][id]:focus{
  outline:none !important;
  border-color:#8b2138 !important;
  background:#fffdf6 !important;
  box-shadow:0 0 0 3px rgba(139,33,56,.12), 0 3px 10px rgba(139,33,56,.10) !important;
}

/* Placeholder */
body input[id]::placeholder{
  color:#a8927a;
  opacity:1;
  font-size:15px;
}

/* ---------- Selects (custom gold chevron) ---------- */
body select[id]{
  box-sizing:border-box;
  padding:11px 34px 11px 13px !important;
  border:1.5px solid #d8c9ab !important;
  border-radius:11px !important;
  font-family:'Spectral',Georgia,serif !important;
  font-size:16px !important;
  font-weight:600;
  color:#3a2a1a !important;
  background-color:#fffef9 !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23bf8c34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  box-shadow:0 1px 4px rgba(76,42,16,.06), inset 0 1px 0 rgba(255,255,255,.7) !important;
  transition:border-color .18s ease, box-shadow .18s ease !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  cursor:pointer;
}

body select[id]:hover{ border-color:#c8ab74 !important; }

body select[id]:focus{
  outline:none !important;
  border-color:#8b2138 !important;
  box-shadow:0 0 0 3px rgba(139,33,56,.12) !important;
}

/* Time-of-birth triple selects (Hour : Min AM/PM) — generous touch targets */
body select[id$="Hour"], body select[id$="Min"]{
  min-width:86px !important;
  max-width:none !important;
  text-align:center;
  text-align-last:center;
}
body select[id$="AmPm"]{
  min-width:84px !important;
  max-width:none !important;
  text-align:center;
  text-align-last:center;
}

/* ---------- Checkboxes ("I don't know my birth time") ---------- */
body input[type="checkbox"][id]{
  width:19px !important;
  height:19px !important;
  accent-color:#8b2138;
  border-radius:5px;
  cursor:pointer;
  vertical-align:middle;
  margin-right:7px;
}

/* ---------- Labels inside tool forms ---------- */
/* (labels are inline-styled per page; we only smooth the weight/color) */

/* ---------- Primary CTA buttons ---------- */
body .btn.btn-primary,
body button.btn-primary{
  display:inline-block;
  padding:14px 26px !important;
  background:linear-gradient(150deg,#9a2540,#8b2138 55%,#701a2d) !important;
  color:#fff !important;
  border:none !important;
  border-radius:12px !important;
  font-family:'Spectral',Georgia,serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  letter-spacing:.4px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(139,33,56,.28), inset 0 1px 0 rgba(255,255,255,.14) !important;
  transition:transform .16s ease, box-shadow .16s ease !important;
}
body .btn.btn-primary:hover,
body button.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 7px 18px rgba(139,33,56,.36), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
body .btn.btn-primary:active,
body button.btn-primary:active{ transform:translateY(0); }

/* ---------- City-suggestion result rows (gn-results pattern) ---------- */
body .gn-results{
  margin-top:6px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(76,42,16,.16);
  border:1px solid rgba(191,140,52,.30);
  background:#fffef9;
}
body .gn-results:empty{ display:none; }
body .gn-row{
  display:block;
  width:100%;
  text-align:left;
  padding:13px 16px;
  background:#fffef9;
  border:none;
  border-bottom:1px solid rgba(191,140,52,.16);
  cursor:pointer;
  font-family:'Spectral',Georgia,serif;
  font-size:15px;
  font-weight:500;
  color:#4a3a2a;
  transition:background .14s ease, padding-left .14s ease;
  user-select:none;
  touch-action:manipulation;
}
body .gn-row:last-child{ border-bottom:none; }
body .gn-row:hover, body .gn-row:focus, body .gn-row:active{
  background:#f6ecd8;
  padding-left:20px;
  outline:none;
}

/* CityPicker floating suggestion box (js/city-picker.js) */
body .cp-box{
  background:linear-gradient(180deg,#fffdf6,#faf3e5) !important;
  border-radius:12px !important;
  box-shadow:0 8px 22px rgba(76,42,16,.18) !important;
  border:1px solid rgba(191,140,52,.30) !important;
}
body .cp-row{
  color:#3a2a1a;
  cursor:pointer;
  border-bottom:1px solid rgba(191,140,52,.16);
  padding:12px 15px !important;
  font-family:'Spectral',Georgia,serif !important;
  font-size:15px !important;
}
body .cp-row:hover{ background:#f6ecd8 !important; color:#8b2138; }

/* ---------- Date input calendar icon tint (webkit) ---------- */
body input[type="date"][id]::-webkit-calendar-picker-indicator{
  opacity:.55;
  cursor:pointer;
  filter:sepia(1) saturate(2.4) hue-rotate(-18deg);
}
body input[type="date"][id]:hover::-webkit-calendar-picker-indicator{ opacity:.85; }

/* ---------- Small screens ---------- */
@media (max-width:420px){
  body select[id$="Hour"], body select[id$="Min"]{ min-width:76px !important; }
  body select[id$="AmPm"]{ min-width:74px !important; }
  body input[type="text"][id],
  body input[type="date"][id]{ font-size:16px !important; } /* prevents iOS zoom */
}