/* ==========================================================================
   Home "request a call back" modal
   Themed entirely from the admin colour variables (--site-*).
   ========================================================================== */
.cb-modal .modal-dialog { max-width: 860px; }
.cb-content {
  position: relative; border: 0; overflow: hidden;
  border-radius: calc(var(--site-radius) + 8px);
  box-shadow: 0 30px 80px rgba(15, 23, 42, .35);
  background: var(--site-card-bg);
}
.cb-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .18); color: #fff; font-size: .9rem;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: background .18s;
}
.cb-close:hover { background: rgba(255, 255, 255, .32); }

.cb-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .cb-grid { grid-template-columns: 0.92fr 1.08fr; } }

/* ---- left panel ---- */
.cb-side {
  position: relative; color: #fff; padding: 1.75rem 1.5rem;
  background:
    radial-gradient(520px 320px at -10% -20%, rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(140deg, var(--site-primary-dark), var(--site-primary) 62%,
      color-mix(in srgb, var(--site-primary) 45%, var(--site-secondary)));
}
.cb-side::after {
  content: ""; position: absolute; right: -70px; bottom: -70px;
  width: 210px; height: 210px; border-radius: 50%; background: rgba(255, 255, 255, .09);
}
.cb-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22);
  padding: .32rem .75rem; border-radius: var(--site-radius-pill);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.cb-badge i { color: var(--site-accent); }
.cb-side h2 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.22; margin: .85rem 0 .5rem; position: relative; z-index: 1; }
.cb-side-text { color: rgba(255, 255, 255, .88); font-size: .87rem; margin-bottom: 1.15rem; position: relative; z-index: 1; }

.cb-contact { list-style: none; margin: 0 0 1.1rem; padding: 0; position: relative; z-index: 1; }
.cb-contact li { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.cb-ic {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
  background: rgba(255, 255, 255, .15); display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem; color: #fff;
}
.cb-ic.wa { background: #25d366; }
.cb-contact li > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cb-contact small { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.cb-contact a, .cb-contact strong { color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; word-break: break-word; }
.cb-contact a:hover { color: var(--site-accent); }

.cb-trust { display: flex; flex-wrap: wrap; gap: .45rem .95rem; position: relative; z-index: 1; }
.cb-trust span { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; color: rgba(255, 255, 255, .9); }
.cb-trust i { color: var(--site-accent); }

/* ---- right panel ---- */
.cb-main { padding: 1.75rem 1.5rem; }
.cb-main-head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.15rem; }
.cb-main-ic {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px;
  background: color-mix(in srgb, var(--site-primary) 12%, transparent);
  color: var(--site-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.cb-main-head h3 { font-size: 1.15rem; margin: 0 0 .15rem; color: var(--site-heading); }
.cb-main-head p { margin: 0; font-size: .84rem; color: var(--site-muted); }

.cb-field { margin-bottom: .9rem; }
.cb-field label { display: block; font-size: .78rem; font-weight: 700; color: var(--site-heading); margin-bottom: .35rem; }
.cb-field label .opt { font-weight: 500; color: var(--site-muted); }
.cb-field label .req { color: #dc2626; }
.cb-input {
  display: flex; align-items: center; gap: .55rem; padding: 0 .85rem; min-height: 52px;
  background: var(--site-body-bg); border: 1.5px solid var(--site-border); border-radius: var(--site-radius);
  transition: border-color .18s, box-shadow .18s;
}
.cb-input:focus-within { border-color: var(--site-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-primary) 14%, transparent); }
.cb-input > i { color: var(--site-primary); font-size: 1rem; flex: 0 0 auto; }
.cb-prefix { font-weight: 700; color: var(--site-muted); font-size: .9rem; border-right: 1px solid var(--site-border); padding-right: .55rem; }
.cb-input input {
  flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent;
  font-size: 16px; font-weight: 600; color: var(--site-heading); padding: .55rem 0;
}
.cb-input input::placeholder { color: var(--site-muted); font-weight: 500; }
.cb-field.is-invalid .cb-input { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 53, 69, .12); }
.cb-error { color: #dc2626; font-size: .78rem; margin: .3rem 0 0; font-weight: 500; }

.cb-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
@media (min-width: 480px) { .cb-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cb-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cb-chip span {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .6rem .35rem; border: 1.5px solid var(--site-border); border-radius: var(--site-radius);
  font-size: .76rem; font-weight: 600; color: var(--site-body-text); cursor: pointer;
  transition: all .16s var(--site-ease); text-align: center; min-height: 62px; justify-content: center;
}
.cb-chip span i { font-size: 1.05rem; color: var(--site-primary); }
.cb-chip:hover span { border-color: var(--site-primary); }
.cb-chip input:checked + span { border-color: var(--site-primary); background: color-mix(in srgb, var(--site-primary) 10%, transparent); color: var(--site-primary); }
.cb-chip input:focus-visible + span { outline: 2px solid var(--site-primary); outline-offset: 2px; }

.cb-submit {
  width: 100%; min-height: 52px; border: 0; border-radius: var(--site-radius);
  background: var(--site-btn-bg); color: var(--site-btn-text);
  font-size: .98rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--site-btn-bg) 35%, transparent);
  transition: background .18s, transform .12s;
}
.cb-submit:hover:not(:disabled) { background: var(--site-btn-hover); transform: translateY(-1px); }
.cb-submit:disabled { opacity: .7; cursor: default; transform: none; }
.cb-note { margin: .7rem 0 0; font-size: .74rem; color: var(--site-muted); display: flex; align-items: center; gap: .35rem; justify-content: center; }

/* success state */
.cb-success { text-align: center; padding: 1rem 0 .5rem; }
.cb-tick {
  width: 62px; height: 62px; border-radius: 50%; background: #dcfce7; color: #16a34a;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: .75rem;
}
.cb-success h3 { font-size: 1.2rem; color: var(--site-heading); margin-bottom: .3rem; }
.cb-success p { color: var(--site-muted); font-size: .9rem; margin-bottom: 1rem; }
.cb-success-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

.cb-alt {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem;
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed var(--site-border);
  font-size: .8rem; color: var(--site-muted);
}
.cb-alt a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--site-primary); text-decoration: none; }
.cb-alt a:hover { color: var(--site-link-hover); }

/* phones — keep the sheet inside the screen and the taps comfortable */
@media (max-width: 767.98px) {
  .cb-modal .modal-dialog { margin: .5rem; }
  /* Scroll inside the grid, not the content box, so the close button stays pinned. */
  .cb-grid {
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .cb-close { width: 40px; height: 40px; background: rgba(255, 255, 255, .25); }

  .cb-side { padding: 1.25rem 1.15rem; }
  .cb-side h2 { font-size: 1.2rem; margin-top: .6rem; }
  .cb-side-text { display: none; }
  .cb-contact li:nth-child(n + 4) { display: none; }   /* keep the sheet short */
  .cb-contact li { position: relative; min-height: 46px; }
  .cb-contact a::after { content: ""; position: absolute; inset: 0; }  /* whole row is tappable */
  .cb-trust { display: none; }

  .cb-main { padding: 1.25rem 1.15rem; }

  /* Quick actions become full-size chips instead of 20px text links. */
  .cb-alt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  .cb-alt > span { display: none; }
  .cb-alt a {
    justify-content: center; min-height: 44px; padding: .5rem .35rem; font-size: .78rem;
    border: 1.5px solid var(--site-border); border-radius: var(--site-radius);
    background: var(--site-body-bg);
  }
}

/* Nothing floats above the backdrop while the modal is open. */
body.modal-open .chat-widget,
body.modal-open .float-actions,
body.modal-open .mobile-bar { display: none !important; }

@media print { .cb-modal { display: none !important; } }