/* =========================================================
   ForGrowth Academy — popup.css
   ISOLATED. Every selector is scoped to the enquiry popup (.pop-*).
   Loaded after styles.css, so it overrides the previous panel styling
   without that file being edited.

   The left half was solid black, which read as heavy against an ivory site.
   It is now a warm cream panel with a rust accent — same palette as the rest
   of the page, so the popup feels part of the site rather than an overlay
   borrowed from somewhere else.
   ========================================================= */

/* ---------- shell ---------- */
.pop-backdrop {
  background: rgba(28, 24, 22, 0.44);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 24px;
}

.pop {
  width: min(880px, 100%);
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 2px 6px rgba(28, 24, 22, 0.06),
    0 40px 90px -30px rgba(28, 24, 22, 0.45);
  grid-template-columns: 0.92fr 1.08fr;
}

/* A single rust hairline across the top ties it to the brand without weight. */
.pop::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent, #D9400B), var(--accent-bright, #F0561F));
  z-index: 3;
}

/* ---------- left panel: warm cream, not black ---------- */
.pop-aside {
  position: relative;
  padding: clamp(30px, 4vw, 44px) clamp(26px, 3.4vw, 38px);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(217, 64, 11, 0.09), transparent 58%),
    linear-gradient(160deg, #F7F3EC 0%, #F1EBE0 100%);
  color: var(--ink, #1C1C1E);
  border-right: 1px solid rgba(28, 28, 30, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.pop-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #D9400B);
  margin-bottom: 18px;
}
.pop-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent, #D9400B);
}

.pop-aside .pop-logo {
  height: clamp(38px, 4vw, 46px);
  width: auto;
  max-width: 78%;
  object-fit: contain;
  display: block;
  margin-bottom: 24px;
}

.pop-aside h2 {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--black, #121214);
  margin: 0 0 12px;
  max-width: 18ch;
}

.pop-aside > p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--grey, #6B6B6E);
  margin: 0 0 22px;
  max-width: 34ch;
}

.pop-aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.pop-aside li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.8px;
  line-height: 1.5;
  color: var(--ink, #1C1C1E);
  margin-bottom: 12px;
}
.pop-aside li:last-child { margin-bottom: 0; }

/* Tick sits in a soft rust disc rather than floating loose. */
.pop-tick {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(217, 64, 11, 0.12);
  color: var(--accent, #D9400B);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pop-tick svg { width: 11px; height: 11px; display: block; }

/* Soft warmth in the lower corner — replaces the old ghost logo watermark. */
.pop-aside-glow {
  position: absolute;
  right: -30%;
  bottom: -34%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 64, 11, 0.13), transparent 68%);
  pointer-events: none;
}

/* ---------- right panel: the form ---------- */
.pop-body {
  padding: clamp(30px, 4vw, 44px) clamp(26px, 3.4vw, 38px);
  background: #fff;
}

.pop-body h3 {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(19px, 2.1vw, 23px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black, #121214);
  margin: 0 0 5px;
}
.pop-body > p {
  font-size: 13.5px;
  color: var(--grey-light, #9A9A9D);
  margin: 0 0 24px;
}

.pop-field label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--grey, #6B6B6E);
  margin-bottom: 8px;
}

.pop-field input,
.pop-field select {
  background: #FBF9F5;
  border: 1px solid var(--line, #E2DED3);
  border-radius: 4px;
  padding: 13px 15px;
  font-size: 15px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.pop-field input:focus,
.pop-field select:focus {
  background: #fff;
  border-color: var(--accent, #D9400B);
  box-shadow: 0 0 0 3px rgba(217, 64, 11, 0.12);
}
.pop-field input::placeholder { color: #B9B4AC; }

.pop-body .btn {
  border-radius: 4px;
  padding: 15px 24px;
  font-size: 15px;
}

.pop-note {
  font-size: 12px;
  color: var(--grey-light, #9A9A9D);
  margin-top: 14px;
}

.pop-alt {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line, #E2DED3);
  font-size: 13px;
}
.pop-alt a { font-weight: 600; }

/* ---------- close ---------- */
.pop-close {
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line, #E2DED3);
  color: var(--grey, #6B6B6E);
  backdrop-filter: blur(4px);
}
.pop-close:hover {
  background: var(--accent, #D9400B);
  border-color: var(--accent, #D9400B);
  color: #fff;
}

/* ---------- success ---------- */
.pop-success { padding: clamp(38px, 5vw, 56px) 30px; }
.pop-success-mark {
  background: rgba(217, 64, 11, 0.12);
  color: var(--accent, #D9400B);
}

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .pop {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }

  /* Compact header: logo and one line. The bullets and paragraph go, because
     on a phone they push the fields below the fold and the form is what the
     visitor opened this for. */
  .pop-aside {
    border-right: 0;
    border-bottom: 1px solid rgba(28, 28, 30, 0.08);
    padding: 22px 20px 20px;
    text-align: center;
  }
  .pop-aside ul,
  .pop-aside > p,
  .pop-aside-glow { display: none; }

  .pop-eyebrow { justify-content: center; margin-bottom: 14px; }
  .pop-aside .pop-logo {
    height: 34px;
    max-width: 62%;
    margin: 0 auto 12px;
  }
  .pop-aside h2 {
    font-size: 18.5px;
    max-width: 26ch;
    margin: 0 auto;
  }

  .pop-body { padding: 22px 20px 24px; }
  .pop-body h3 { font-size: 19px; }
  .pop-body > p { margin-bottom: 18px; }
  .pop-two { grid-template-columns: 1fr; }
}

/* Landscape phones: no room for a header block at all. */
@media (max-height: 560px) and (max-width: 900px) {
  .pop-aside h2,
  .pop-eyebrow { display: none; }
  .pop-aside { padding: 14px 20px 12px; }
  .pop-aside .pop-logo { height: 28px; margin-bottom: 0; }
}

@media (max-height: 640px) {
  .pop-aside ul { display: none; }
  .pop-aside { padding-top: 24px; padding-bottom: 22px; }
}


/* =========================================
   CHATBOT MOBILE CLOSE BUTTON FIX
   ========================================= */

@media (max-width: 768px) {

  /* Chat window */
  .chatbot-window,
  .chat-window,
  .chatbot-panel {
    position: fixed !important;
    top: 75px !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(100vw, 500px) !important;
    max-width: 100vw !important;
    height: calc(100dvh - 75px) !important;
    max-height: calc(100dvh - 75px) !important;
    overflow-y: auto !important;
    z-index: 999999 !important;
  }

  /* Close button */
  .chatbot-close,
  .chat-close,
  .close-chat,
  .chatbot-panel .close,
  .chat-window .close {
    position: fixed !important;
    top: 82px !important;
    right: 16px !important;

    width: 48px !important;
    height: 48px !important;

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

    z-index: 1000001 !important;
    cursor: pointer !important;
  }
}