/**
 * ============================================================
 * Gizmeon — contact page CSS
 *
 * Loaded only on page-contact.php via functions.php enqueue.
 * Tokens (--cyan, --pink, --black*, --bl*, --ff-*, --g-gradient)
 * come from style.css and are globally available.
 * Chrome CSS (nav, footer, buttons, CTA, page-head) lives in shell.css.
 * ============================================================
 */

/* Design tokens */

/* ============================================================
   CONTACT PAGE — two-column layout
   ============================================================ */
.ct-wrap{
  display:grid;grid-template-columns:1fr 1.2fr;
  gap:32px;
  max-width:1400px;margin:0 auto;
  padding:32px 52px 60px;
  align-items:start;
  min-height:calc(100vh - 240px);
  border-bottom:1px solid var(--bl);
}

/* ── LEFT: info panel ── */
.ct-left{
  padding:36px 32px;
  background:var(--black);
  border:1px solid var(--bl);
  border-radius:14px;
  display:flex;flex-direction:column;gap:0;
  position:sticky;top:88px;
}
.ct-lbl{
  font-size:10px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:14px;
}
.ct-h{
  font-family:var(--ff-d);font-size:clamp(34px,4vw,54px);
  letter-spacing:1.2px;color:var(--white);line-height:0.9;
  margin-bottom:16px;
}
.ct-h .cy{color:var(--cyan)}
.ct-h .pk{color:var(--pink)}
.ct-h em{
  font-family:var(--ff-s);font-style:italic;font-weight:400;
  letter-spacing:-0.01em;
  background:var(--g-gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ct-sub{
  font-size:14px;font-weight:300;color:rgba(245,245,248,0.55);
  line-height:1.7;margin-bottom:26px;
}
.ct-sub strong{color:var(--white);font-weight:500}

.ct-details{
  display:flex;flex-direction:column;gap:1px;
  background:var(--bl);border:1px solid var(--bl);border-radius:6px;overflow:hidden;
  margin-bottom:18px;
}
.ct-detail{
  background:var(--black2);
  padding:14px 16px;
  display:flex;align-items:flex-start;gap:12px;
  transition:background 0.18s;text-decoration:none;
}
.ct-detail:hover{background:rgba(255,255,255,0.03)}
.ct-detail-icon{
  width:32px;height:32px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ct-detail-label{
  font-size:9.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(245,245,248,0.4);margin-bottom:3px;
}
.ct-detail-val{
  font-size:13.5px;font-weight:500;color:rgba(245,245,248,0.85);
  text-decoration:none;display:block;
}
.ct-detail:hover .ct-detail-val{color:var(--cyan)}

.ct-address{
  padding:14px 16px;background:var(--black2);
  border:1px solid var(--bl);border-radius:6px;
  margin-bottom:22px;
}
.ct-address-label{
  font-size:9.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(245,245,248,0.4);margin-bottom:6px;
}
.ct-address-txt{
  font-size:12.5px;font-weight:300;color:rgba(245,245,248,0.6);
  line-height:1.6;font-style:normal;
}

.ct-socials{
  display:flex;gap:10px;
  padding-top:20px;border-top:1px solid var(--bl);
  margin-top:auto;
}
.ct-social{
  width:34px;height:34px;border-radius:6px;
  border:1px solid var(--bl2);
  display:flex;align-items:center;justify-content:center;
  transition:border-color 0.18s,background 0.18s;text-decoration:none;
}
.ct-social:hover{border-color:rgba(38,214,255,0.4);background:rgba(38,214,255,0.06)}

/* ── RIGHT: form ── */
.ct-right{
  background:var(--black2);
  padding:36px 36px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
}
.ct-form-h{
  font-family:var(--ff-d);font-size:clamp(24px,3vw,36px);letter-spacing:1px;
  color:var(--white);margin-bottom:6px;line-height:1;
}
.ct-form-h em{
  font-family:var(--ff-s);font-style:italic;font-weight:400;
  letter-spacing:-0.01em;
  background:var(--g-gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ct-form-sub{
  font-size:13.5px;font-weight:300;color:rgba(245,245,248,0.55);
  margin-bottom:26px;line-height:1.65;
}

/* Form fields — style CF7's output using the same class hooks */
.wpcf7 form.wpcf7-form,
.ct-form{display:flex;flex-direction:column;gap:14px}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ct-field{display:flex;flex-direction:column;gap:6px}
.ct-field label,
.wpcf7-form label{
  font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(245,245,248,0.78);
  display:block;margin-bottom:6px;
}
.ct-field label .gz-optional,
.wpcf7-form label .gz-optional{
  font-weight:400;letter-spacing:0.02em;text-transform:none;
  color:rgba(245,245,248,0.4);margin-left:6px;font-size:10.5px;
}

.ct-field input,
.ct-field select,
.ct-field textarea,
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-select,
.wpcf7-form-control.wpcf7-textarea{
  background:rgba(255,255,255,0.04);
  border:1.5px solid rgba(255,255,255,0.18);
  border-radius:6px;
  padding:12px 14px;
  font-family:var(--ff-b);font-size:14px;font-weight:400;
  color:var(--white);
  outline:none;
  transition:border-color 0.18s,background 0.18s,box-shadow 0.18s;
  width:100%;
  -webkit-appearance:none;
}
.ct-field input::placeholder,
.ct-field textarea::placeholder,
.wpcf7-form-control.wpcf7-text::placeholder,
.wpcf7-form-control.wpcf7-email::placeholder,
.wpcf7-form-control.wpcf7-tel::placeholder,
.wpcf7-form-control.wpcf7-textarea::placeholder{
  color:rgba(245,245,248,0.4);
}
.ct-field input:hover,
.ct-field select:hover,
.ct-field textarea:hover,
.wpcf7-form-control.wpcf7-text:hover,
.wpcf7-form-control.wpcf7-email:hover,
.wpcf7-form-control.wpcf7-tel:hover,
.wpcf7-form-control.wpcf7-select:hover,
.wpcf7-form-control.wpcf7-textarea:hover{
  border-color:rgba(255,255,255,0.28);background:rgba(255,255,255,0.06);
}
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus,
.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus,
.wpcf7-form-control.wpcf7-select:focus,
.wpcf7-form-control.wpcf7-textarea:focus{
  border-color:var(--cyan);
  background:rgba(38,214,255,0.04);
  box-shadow:0 0 0 3px rgba(38,214,255,0.12);
}
.ct-field textarea,
.wpcf7-form-control.wpcf7-textarea{
  resize:vertical;min-height:110px;line-height:1.55;
}
.ct-field select,
.wpcf7-form-control.wpcf7-select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'><path d='M1 1L6 6L11 1' stroke='%2326D6FF' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:36px;
}

/* Submit button */
.ct-submit,
.wpcf7-submit,
.wpcf7-form input[type="submit"]{
  background:var(--cyan);color:var(--black);border:none;
  padding:14px 28px;border-radius:6px;
  font-family:var(--ff-b);font-size:13px;font-weight:700;letter-spacing:0.04em;
  cursor:pointer;transition:opacity 0.18s,transform 0.18s;
  align-self:flex-start;margin-top:8px;
  -webkit-appearance:none;
}
.ct-submit:hover,
.wpcf7-submit:hover,
.wpcf7-form input[type="submit"]:hover{opacity:0.9;transform:translateY(-1px)}
.ct-submit:disabled,
.wpcf7-submit:disabled{opacity:0.6;cursor:not-allowed;transform:none}

/* Fine print */
.ct-fineprint{
  font-size:11.5px;font-weight:300;color:rgba(245,245,248,0.4);
  line-height:1.6;margin-top:6px;
}
.ct-fineprint a{color:rgba(245,245,248,0.65);text-decoration:underline;text-underline-offset:2px}

/* Honeypot (invisible) */
.gz-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* CF7 status messages */
.wpcf7-response-output{
  border-radius:6px;padding:14px 16px;font-size:13.5px;
  margin-top:16px;line-height:1.55;
}
.wpcf7 form.sent .wpcf7-response-output{
  border:1px solid rgba(38,214,255,0.4);
  background:rgba(38,214,255,0.06);
  color:var(--cyan);
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{
  border:1px solid rgba(255,91,209,0.4);
  background:rgba(255,91,209,0.06);
  color:var(--pink);
}
.wpcf7-not-valid-tip{
  font-size:11.5px;color:var(--pink);margin-top:6px;font-weight:400;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:1080px){
  .ct-wrap{grid-template-columns:1fr;gap:20px}
  .ct-left{position:relative;top:0;padding:28px 28px}
  }
@media (max-width:680px){
  .ct-wrap{padding:20px 22px 48px}
  .ct-left{padding:24px 22px}
  .ct-right{padding:26px 22px}
  .ct-row{grid-template-columns:1fr}
  }

/* ============================================================
   BOOTSTRAP-STYLE CF7 COMPATIBILITY
   The existing CF7 form uses Bootstrap grid classes (row, col-lg-6,
   col-12) and utility classes (bg-gray-1, form-control, pix-my-5,
   shadow-0). These overrides ensure the form looks correct on the
   dark theme regardless of which template is used.
   ============================================================ */
body.gz-contact-active .wpcf7 .row{
  display:flex !important;flex-wrap:wrap !important;
  margin:0 -8px !important;gap:0 !important;
}
body.gz-contact-active .wpcf7 .col-lg-6{
  flex:0 0 50% !important;max-width:50% !important;
  padding:0 8px !important;margin-bottom:14px !important;
  box-sizing:border-box !important;
}
body.gz-contact-active .wpcf7 .col-12{
  flex:0 0 100% !important;max-width:100% !important;
  padding:0 8px !important;margin-bottom:14px !important;
  box-sizing:border-box !important;
}
body.gz-contact-active .wpcf7 label.w-100{
  display:block !important;width:100% !important;
  font-size:11px !important;font-weight:600 !important;
  letter-spacing:0.08em !important;text-transform:uppercase !important;
  color:rgba(245,245,248,0.78) !important;
  margin-bottom:6px !important;
}
body.gz-contact-active .wpcf7 .form-control,
body.gz-contact-active .wpcf7 input.form-control,
body.gz-contact-active .wpcf7 textarea.form-control{
  background:rgba(255,255,255,0.04) !important;
  border:1.5px solid rgba(255,255,255,0.18) !important;
  border-radius:6px !important;
  padding:12px 14px !important;
  font-family:var(--ff-b) !important;font-size:14px !important;font-weight:400 !important;
  color:var(--white) !important;
  outline:none !important;
  transition:border-color 0.18s,background 0.18s,box-shadow 0.18s !important;
  width:100% !important;
  -webkit-appearance:none !important;
  box-shadow:none !important;
}
body.gz-contact-active .wpcf7 .form-control::placeholder,
body.gz-contact-active .wpcf7 input.form-control::placeholder,
body.gz-contact-active .wpcf7 textarea.form-control::placeholder{
  color:rgba(245,245,248,0.4) !important;
}
body.gz-contact-active .wpcf7 .form-control:focus,
body.gz-contact-active .wpcf7 input.form-control:focus,
body.gz-contact-active .wpcf7 textarea.form-control:focus{
  border-color:var(--cyan) !important;
  background:rgba(38,214,255,0.04) !important;
  box-shadow:0 0 0 3px rgba(38,214,255,0.12) !important;
}
body.gz-contact-active .wpcf7 textarea.form-control{
  resize:vertical !important;min-height:110px !important;line-height:1.55 !important;
}
/* Override bg-gray-1 background */
body.gz-contact-active .wpcf7 .bg-gray-1,
body.gz-contact-active .wpcf7 input.bg-gray-1,
body.gz-contact-active .wpcf7 textarea.bg-gray-1{
  background:rgba(255,255,255,0.04) !important;
}
/* Override shadow-0 */
body.gz-contact-active .wpcf7 .shadow-0{
  box-shadow:none !important;
}
/* Override pix-my-5 spacing */
body.gz-contact-active .wpcf7 .pix-my-5{
  margin-top:4px !important;margin-bottom:4px !important;
}
/* Submit button — force dark theme styling on Bootstrap btn classes */
body.gz-contact-active .wpcf7 input[type="submit"],
body.gz-contact-active .wpcf7 .btn,
body.gz-contact-active .wpcf7 .btn-green{
  background:var(--cyan) !important;
  color:var(--black) !important;
  border:none !important;
  padding:14px 28px !important;
  border-radius:6px !important;
  font-family:var(--ff-b) !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:-0.005em !important;
  cursor:pointer !important;
  transition:opacity 0.18s,transform 0.18s !important;
  -webkit-appearance:none !important;
  box-shadow:none !important;
  width:auto !important;
  display:inline-flex !important;
}
body.gz-contact-active .wpcf7 input[type="submit"]:hover,
body.gz-contact-active .wpcf7 .btn:hover,
body.gz-contact-active .wpcf7 .btn-green:hover{
  opacity:0.9 !important;
  transform:translateY(-1px) !important;
  color:var(--black) !important;
  background:var(--cyan) !important;
}
/* CAPTCHA styling for dark theme */
body.gz-contact-active .wpcf7 .captchac{
  margin:14px 0 !important;
}
body.gz-contact-active .wpcf7 .captchac img{
  border-radius:4px !important;
  border:1px solid var(--bl2) !important;
}
body.gz-contact-active .wpcf7 .captchar input{
  background:rgba(255,255,255,0.04) !important;
  border:1.5px solid rgba(255,255,255,0.18) !important;
  border-radius:6px !important;
  padding:10px 14px !important;
  color:var(--white) !important;
  font-family:var(--ff-b) !important;
  font-size:14px !important;
}
body.gz-contact-active .wpcf7 .captchar input:focus{
  border-color:var(--cyan) !important;
  box-shadow:0 0 0 3px rgba(38,214,255,0.12) !important;
}
/* Mobile: stack columns */
@media (max-width:680px){
  body.gz-contact-active .wpcf7 .col-lg-6{
    flex:0 0 100% !important;max-width:100% !important;
  }
}