/* ===== Consult popup + side button (all classes prefixed "cp-", nothing existing is touched) ===== */

/* ---------- Right-side "Consult Now" tab ---------- */
.cp-tab {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 1040;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  padding: 1rem .7rem;
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: #fff;
  background: #eaa73a;
  border: 0;
  border-radius: 0 .5rem .5rem 0; /* shows on the left after rotation */
  box-shadow: 0 8px 24px rgba(15, 22, 40, .3);
  cursor: pointer;
  transition: background .3s ease, padding .3s ease, opacity .3s ease;
}
.cp-tab:hover,
.cp-tab:focus-visible { background: #d99a30; padding-inline: .9rem; }
.cp-tab:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
html.cp-lock .cp-tab { opacity: 0; pointer-events: none; }

/* ---------- Overlay ---------- */
.cp-modal {
  /* values the existing .field / .lead-form styles expect */
  --on-dark: #fff;
  --on-dark-soft: rgba(255, 255, 255, .75);
  --brass: #eaa73a;
  --radius-doc: .25rem;

  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 16, 28, .72);
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease, visibility .3s ease;
}
.cp-modal.is-open { visibility: visible; opacity: 1; }

/* ---------- Card ---------- */
.cp-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 2rem 1.75rem 1.75rem;
  color: #fff;
  background: #22354e;
  border-radius: 1rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  transform: translateY(24px);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.cp-modal.is-open .cp-card { transform: none; }

.cp-title {
  margin: 0 2rem .4rem 0;
  font-family: 'Jost', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
}
.cp-sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .7);
}
.cp-card .lead-form { margin-top: 1.25rem; }

.cp-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s ease;
}
.cp-close:hover { background: rgba(255, 255, 255, .22); }
.cp-close:focus-visible { outline: 2px solid #eaa73a; outline-offset: 2px; }

/* ---------- Scroll lock while open ---------- */
html.cp-lock { overflow: hidden; }

/* ---------- Mobile ---------- */
@media (max-width: 575.98px) {
  .cp-card { padding: 1.5rem 1.15rem 1.25rem; }
  .cp-title { font-size: 1.35rem; }
  .cp-card .form-row { grid-template-columns: 1fr; }
  .cp-tab { padding: .8rem .55rem; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-modal, .cp-card, .cp-tab, .cp-close { transition: none; }
}


/* ---------- Popup form fields (self-contained, scoped to .cp-card) ---------- */
.cp-card .lead-form { display: flex; flex-direction: column; gap: 14px; margin-top: 1.25rem; }
.cp-card .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cp-card .field { display: block; min-width: 0; }
.cp-card .field label {
  display: block;
  margin-bottom: 6px;
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .8);
}
.cp-card .field input,
.cp-card .field select,
.cp-card .field textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 11px 13px;
  font-family: inherit;
  font-size: .95rem;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: .25rem;
  outline: 0;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.cp-card .field input::placeholder,
.cp-card .field textarea::placeholder { color: rgba(255, 255, 255, .45); }
.cp-card .field input:focus,
.cp-card .field select:focus,
.cp-card .field textarea:focus {
  border-color: #eaa73a;
  box-shadow: 0 0 0 3px rgba(234, 167, 58, .25);
}
.cp-card .field textarea { min-height: 90px; resize: vertical; }
.cp-card .field select {
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23eaa73a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.cp-card .field select option { background: #22354e; color: #fff; }
.cp-card .consent {
  margin: 0;
  font-size: .75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .65);
}
@media (max-width: 575.98px) {
  .cp-card .form-row { grid-template-columns: 1fr; }
}