/* ══════════════════════════════════════════════════════════════════
   Green Edge Technologies — Start Project Modal
   Sitewide modal triggered from "Start Project" / "Start Your Project"
   buttons. Reuses the theme's existing CSS variables (--green, --surface,
   --border, etc. from main.css) so it automatically follows light/dark
   mode with zero extra work.
   ══════════════════════════════════════════════════════════════════ */

.spm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 8, 15, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s var(--ease, ease);
}
body.light .spm-overlay { background: rgba(20, 24, 34, .45); }

.spm-overlay.is-open {
  display: flex;
  opacity: 1;
}

.spm-modal {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: min(88vh, 880px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 22px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
  overflow: hidden;
  transform: translateY(18px) scale(.97);
  opacity: 0;
  transition: transform .3s var(--ease, ease), opacity .3s var(--ease, ease);
}
.spm-overlay.is-open .spm-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.spm-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  padding: 10px 10px 0;
  background: var(--surface);
}

.spm-close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #ffffff;
  cursor: pointer;
  visibility: visible !important;
  opacity: 1 !important;
  transition: background .2s, transform .2s;
}
body.light .spm-close {
  background: rgba(0, 0, 0, .06);
  border-color: rgba(0, 0, 0, .14);
  color: #0A0F1C;
}
.spm-close:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: rotate(90deg); }
.spm-close svg { width: 16px; height: 16px; display: block; pointer-events: none; }

/* Tabs (mirrors the dedicated Contact page tab styling) */
.spm-tabs {
  display: flex;
  flex-shrink: 0;
  position: relative;
  z-index: 1 !important;
}
.spm-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 16px;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-muted);
  background: var(--surface-2);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .2s, color .2s;
  position: relative;
  z-index: 1 !important;
}
.spm-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.spm-tab.active {
  background: var(--surface);
  color: var(--green);
  border-bottom: 2px solid var(--green);
}
.spm-tab:first-child.active { color: #fff; background: var(--grad-btn); border-bottom-color: transparent; }
.spm-tab-short { display: none; }

.spm-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 28px 28px 24px;
}
.spm-body::-webkit-scrollbar { width: 8px; }
.spm-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

.spm-panel { display: none; }
.spm-panel.active { display: block; animation: spmFadeIn .25s var(--ease, ease); }
@keyframes spmFadeIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }

.spm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.spm-field { display: flex; flex-direction: column; gap: 7px; }
.spm-field.full { grid-column: 1 / -1; }

.spm-label {
  font-family: var(--font-d);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.spm-label .req { color: var(--green); margin-left: 2px; }

.spm-input-wrap { position: relative; }
.spm-input-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-faint);
  pointer-events: none;
}

.spm-input,
.spm-select,
.spm-textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-b);
  font-size: 14px;
  padding: 13px 14px 13px 40px;
  transition: border-color .2s, box-shadow .2s;
}
.spm-select { padding-left: 40px; appearance: none; cursor: pointer; }
.spm-textarea { padding-left: 14px; resize: vertical; min-height: 110px; }
.spm-input:focus, .spm-select:focus, .spm-textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-subtle);
}
.spm-input::placeholder, .spm-textarea::placeholder { color: var(--text-faint); }

.spm-select-wrap { position: relative; }
.spm-select-wrap svg.chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-faint);
  pointer-events: none;
}

.spm-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}
.spm-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--green);
  flex-shrink: 0;
}
.spm-checkbox-row label {
  font-size: 13px;
  color: var(--text-muted);
}

.spm-error {
  font-size: 12.5px;
  color: var(--orange);
  display: none;
}
.spm-field.has-error .spm-input,
.spm-field.has-error .spm-select,
.spm-field.has-error .spm-textarea { border-color: var(--orange); }
.spm-field.has-error .spm-error { display: block; }

.spm-footer {
  flex-shrink: 0;
  padding: 18px 28px 26px;
  border-top: 1px solid var(--border);
}
.spm-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 20px;
  border-radius: 10px;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: var(--grad-btn);
  cursor: pointer;
  transition: filter .2s, transform .15s;
}
.spm-submit:hover { filter: brightness(1.08); }
.spm-submit:active { transform: scale(.98); }
.spm-submit:disabled { opacity: .6; cursor: not-allowed; }
.spm-submit svg { width: 18px; height: 18px; }
.spm-submit.is-loading svg.send { display: none; }
.spm-submit .spm-spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spmSpin .7s linear infinite;
}
.spm-submit.is-loading .spm-spinner { display: inline-block; }
@keyframes spmSpin { to { transform: rotate(360deg); } }

.spm-message {
  margin-top: 12px;
  font-size: 13px;
  text-align: center;
  display: none;
}

.spm-success {
  display: none;
  text-align: center;
  padding: 30px 10px;
}
.spm-success.show { display: block; }
.spm-success .spm-success-icon {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--green-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
}
.spm-success .spm-success-icon svg { width: 28px; height: 28px; }
.spm-success h3 { font-family: var(--font-d); font-size: 19px; margin-bottom: 8px; }
.spm-success p { color: var(--text-muted); font-size: 14px; line-height: 1.6; }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 760px) {
  .spm-modal { max-width: 92vw; }
  .spm-body { padding: 24px 22px 20px; }
  .spm-footer { padding: 16px 22px 22px; }
}

/* Mobile: full-height bottom sheet for comfortable thumb reach */
@media (max-width: 560px) {
  .spm-overlay { padding: 0; align-items: flex-end; }
  .spm-modal {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  .spm-overlay.is-open .spm-modal { transform: translateY(0); }
  .spm-grid { grid-template-columns: 1fr; gap: 14px; }
  .spm-tab { font-size: 12.5px; padding: 16px 10px; gap: 6px; }
  .spm-tab span.spm-tab-long { display: none; }
  .spm-tab span.spm-tab-short { display: inline; }
}

@media (max-width: 360px) {
  .spm-body { padding: 20px 16px 16px; }
  .spm-footer { padding: 14px 16px 18px; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .spm-overlay, .spm-modal, .spm-panel { transition: none; animation: none; }
}

/* Lock page scroll while modal is open (class applied to <body>) */
body.spm-lock { overflow: hidden; }