/*
 * tf-modal.css
 * Include AFTER Bootstrap and your main stylesheet.
 * All rules scoped to #enquiryForm1 / .tf-* to avoid bleeding into your site.
 */

/* ── Tokens ── */
#enquiryForm1 {
  --tf-bg:      #0d0d12;
  --tf-surface: #16161f;
  --tf-border:  rgba(255,255,255,0.09);
  --tf-accent:  #c8f135;
  --tf-text:    #f0ede8;
  --tf-muted:   rgba(240,237,232,0.45);
  --tf-radius:  13px;
  --tf-font-d:  'DM Serif Display', Georgia, serif;
  --tf-font-b:  'DM Sans', system-ui, sans-serif;
}

/* ── Dialog sizing ── */
.tf-modal-dialog {
  max-width: 560px;
}

/* ── Modal content: fixed height, dark, flex column ── */
.tf-modal-content {
  background:     var(--tf-bg) !important;
  border:         1px solid var(--tf-border) !important;
  border-radius:  16px !important;
  color:          var(--tf-text);
  font-family:    var(--tf-font-b);
  /* Fixed height so slides don't resize the dialog */
  height:         min(660px, 88dvh);
  display:        flex !important;
  flex-direction: column !important;
  overflow:       hidden !important;
}

/* ── Header ── */
.tf-modal-header {
  flex-shrink:   0 !important;
  display:       block !important;
  padding:       0 !important;
  background:    var(--tf-surface) !important;
  border-bottom: 1px solid var(--tf-border) !important;
  border-radius: 0 !important;
}

.tf-progress-wrap {
  height:     3px;
  background: rgba(255,255,255,0.07);
  width:      100%;
}
.tf-progress-bar {
  height:     100%;
  background: var(--tf-accent);
  transition: width 0.5s cubic-bezier(.77,0,.18,1);
  box-shadow: 0 0 8px var(--tf-accent);
}

.tf-header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.55rem 1rem;
  gap:             0.75rem;
}
.tf-logo {
  height:      34px !important;
  max-height:  34px !important;
  width:       auto !important;
  max-width:   110px !important;
  object-fit:  contain !important;
  display:     block !important;
  flex-shrink: 0;
}
.tf-step-counter {
  flex:           1;
  text-align:     center;
  font-size:      0.7rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--tf-muted);
}

/* ── Slide viewport: grows to fill remaining modal height ── */
.tf-viewport {
  flex:       1 1 0;
  position:   relative;
  overflow:   hidden;   /* clips absolutely-positioned slides */
  min-height: 0;        /* critical — lets flex shrink below content size */
}

/* ── Individual slides: stacked absolutely, animated in/out ── */
.tf-slide {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         1.5rem;
  opacity:         0;
  pointer-events:  none;
  transform:       translateY(48px);
  transition:      opacity 0.38s ease, transform 0.38s cubic-bezier(.77,0,.18,1);
  overflow-y:      auto;  /* allows content taller than viewport to scroll within a slide */
}
.tf-slide.active {
  opacity:        1;
  pointer-events: all;
  transform:      translateY(0);
}
.tf-slide.exit-up   { opacity: 0; transform: translateY(-48px); }
.tf-slide.exit-down { opacity: 0; transform: translateY(48px);  }

.tf-inner {
  width:     100%;
  max-width: 460px;
}

/* ── Typography ── */
.tf-eyebrow {
  font-size:      0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--tf-muted);
  margin-bottom:  0.9rem;
}
.tf-q {
  font-family: var(--tf-font-d);
  font-size:   clamp(1.35rem, 4vw, 1.9rem);
  line-height: 1.2;
  color:       var(--tf-text);
  margin:      0 0 0.35rem;
}
.tf-hint {
  font-size:     0.83rem;
  color:         var(--tf-muted);
  margin-bottom: 1.1rem;
}
.tf-sub {
  font-size:     0.93rem;
  color:         var(--tf-muted);
  line-height:   1.65;
  margin:        0.6rem 0 1.5rem;
}
.tf-accent {
  color:      var(--tf-accent);
  font-style: italic;
}
.tf-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  font-size:      0.68rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--tf-muted);
  margin-bottom:  1rem;
}
.tf-badge-num {
  background:    var(--tf-accent);
  color:         #000;
  border-radius: 50%;
  width:         19px; height: 19px;
  display:       grid;
  place-items:   center;
  font-size:     0.62rem;
}

/* ── Text inputs ── */
.tf-input {
  width:         100%;
  background:    transparent;
  border:        none;
  border-bottom: 2px solid rgba(255,255,255,0.16);
  color:         var(--tf-text);
  font-size:     1.15rem;
  font-family:   var(--tf-font-b);
  font-weight:   300;
  padding:       0.35rem 0 0.55rem;
  outline:       none;
  transition:    border-color 0.2s;
  caret-color:   var(--tf-accent);
}
.tf-input::placeholder { color: var(--tf-muted); }
.tf-input:focus        { border-color: var(--tf-accent); }
.tf-textarea           { resize: none; line-height: 1.55; font-size: 1rem; }

/* ── Choice cards ── */
.tf-choices {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}
.tf-choice {
  display:     flex;
  align-items: center;
  gap:         0.8rem;
  padding:     0.65rem 0.9rem;
  border:      1.5px solid var(--tf-border);
  border-radius: var(--tf-radius);
  cursor:      pointer;
  transition:  border-color 0.15s, background 0.15s, transform 0.12s;
  user-select: none;
  font-size:   0.9rem;
  background:  rgba(255,255,255,0.015);
}
.tf-choice:hover            { border-color: rgba(200,241,53,0.4); background: rgba(200,241,53,0.04); transform: translateX(3px); }
.tf-choice.selected         { border-color: var(--tf-accent); background: rgba(200,241,53,0.07); }
.tf-key {
  width:         24px; height: 24px;
  border:        1.5px solid var(--tf-muted);
  border-radius: 5px;
  display:       grid; place-items: center;
  font-size:     0.62rem; font-weight: 700;
  color:         var(--tf-muted);
  flex-shrink:   0;
  transition:    border-color 0.15s, color 0.15s;
}
.tf-choice.selected .tf-key { border-color: var(--tf-accent); color: var(--tf-accent); }
.tf-multi-hint               { font-size: 0.73rem; color: var(--tf-muted); margin-top: 0.45rem; }

/* ── Buttons ── */
.tf-actions {
  display:     flex;
  align-items: center;
  gap:         0.8rem;
  margin-top:  1.25rem;
}
.tf-btn-next {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  background:     var(--tf-accent);
  color:          #000;
  font-family:    var(--tf-font-b);
  font-size:      0.85rem;
  font-weight:    600;
  border:         none;
  border-radius:  9px;
  padding:        0.6rem 1.2rem;
  cursor:         pointer;
  letter-spacing: 0.02em;
  transition:     transform 0.13s, box-shadow 0.13s;
}
.tf-btn-next:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(200,241,53,0.3); }
.tf-btn-next:disabled              { opacity: 0.6; cursor: default; }
.tf-btn-submit                     { font-size: 0.92rem; padding: 0.7rem 1.5rem; }
.tf-btn-skip {
  background:  transparent;
  border:      none;
  color:       var(--tf-muted);
  font-size:   0.8rem;
  font-family: var(--tf-font-b);
  cursor:      pointer;
  padding:     0;
  transition:  color 0.15s;
}
.tf-btn-skip:hover { color: var(--tf-text); }
.tf-enter {
  font-size:   0.7rem;
  color:       var(--tf-muted);
  margin-left: auto;
}
.tf-enter kbd {
  background:    var(--tf-surface);
  border:        1px solid var(--tf-border);
  border-radius: 3px;
  padding:       1px 4px;
  font-size:     0.65rem;
  color:         var(--tf-muted);
}

/* ── Errors ── */
.tf-error              { font-size: 0.74rem; color: #ff6b6b; margin-top: 0.35rem; display: none; }
.tf-error.show         { display: block; }

/* ── Review grid ── */
.tf-confirm-grid {
  display:        flex;
  flex-direction: column;
  gap:            0.45rem;
  margin-bottom:  1.25rem;
  max-height:     260px;
  overflow-y:     auto;
}
.tf-confirm-row    { display: flex; gap: 0.7rem; padding: 0.55rem 0.8rem; background: rgba(255,255,255,0.03); border: 1px solid var(--tf-border); border-radius: 8px; }
.tf-confirm-label  { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tf-muted); width: 90px; flex-shrink: 0; padding-top: 1px; }
.tf-confirm-value  { font-size: 0.88rem; color: var(--tf-text); word-break: break-word; }

/* ── Thank you ── */
.tf-check-circle {
  width: 52px; height: 52px;
  border-radius: 50%;
  background:    var(--tf-accent);
  display:       grid; place-items: center;
  margin:        0 auto 1.1rem;
  color:         #000;
}

/* ── Consent ── */
.tf-consent { font-size: 0.7rem; color: var(--tf-muted); margin-top: 0.9rem; line-height: 1.5; }

/* ── Footer ── */
.tf-footer {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  padding:         0.5rem 0.9rem;
  border-top:      1px solid var(--tf-border);
  background:      var(--tf-surface);
  gap:             0.35rem;
}
.tf-nav-arrows { display: flex; gap: 0.3rem; }
.tf-nav-arrow {
  width: 30px; height: 30px;
  border:        1.5px solid var(--tf-border);
  border-radius: 6px;
  background:    transparent;
  color:         var(--tf-text);
  display:       grid; place-items: center;
  cursor:        pointer;
  transition:    border-color 0.15s, color 0.15s;
}
.tf-nav-arrow:hover:not(:disabled) { border-color: var(--tf-accent); color: var(--tf-accent); }
.tf-nav-arrow:disabled              { opacity: 0.2; cursor: default; }

/* ── Mobile: full screen on small phones ── */
@media (max-width: 575.98px) {
  .tf-modal-dialog  { margin: 0; max-width: 100%; }
  .tf-modal-content { height: 100dvh; border-radius: 0 !important; border: none !important; }
  .tf-q             { font-size: 1.25rem; }
  .tf-choice        { padding: 0.6rem 0.8rem; }
  .tf-slide         { padding: 1.1rem; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .tf-modal-dialog  { max-width: 94vw; }
  .tf-modal-content { height: min(640px, 90dvh); }
}