/* ==========================================================================
   MOLDTEK — "Request a quote" Contact Form 7 form (standalone CSS)
   Works on its own: does not need mk-home.css, #mkHome or any page JS.
   Add in: Appearance → Customize → Additional CSS  (or your child theme).
   Requires the shortcode to carry  html_class="mk-form" , e.g.
   [contact-form-7 id="abc1234" title="Request a quote" html_class="mk-form"]
   ========================================================================== */

/* ---------- 1. Make sure the wrapper is never left hidden ----------
   .mk-beamwrap has data-reveal (starts at opacity:0 until JS adds .is-in).
   If the reveal script misses it, the form stays invisible — force it on. */
.mk-beamwrap,
.mk-beamwrap[data-reveal]{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  display:block !important;
}
.mk-beamwrap .wpcf7{display:block !important;margin:0;padding:0}

/* ---------- 2. Glass card + animated border beam ---------- */
@property --mkq-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes mkqBeam{to{--mkq-a:360deg}}

.mk-beamwrap{
  position:relative;
  isolation:isolate;
  width:100%;
  padding:1px;
  border-radius:20px;
  background:none;
  box-shadow:rgba(0,0,0,.35) 0 5px 15px,rgba(255,255,255,.4) 0 0 40px 4px,rgba(255,255,255,.18) 0 0 90px 12px;
}
/* moving light along the edge */
.mk-beamwrap::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--mkq-a),transparent 0 72%,rgba(255,122,46,0) 72%,#FF9A5C 86%,#fff 90%,transparent 92%),rgba(255,255,255,.7);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:mkqBeam 6s linear infinite;
}
/* soft orange / blue glow behind the glass */
.mk-beamwrap::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(42% 38% at 88% 8%,rgba(255,122,46,.95),rgba(255,122,46,0) 70%),
    radial-gradient(45% 40% at 6% 92%,rgba(27,108,183,.95),rgba(27,108,183,0) 70%),
    radial-gradient(35% 30% at 12% 18%,rgba(143,198,245,.8),rgba(143,198,245,0) 70%),
    radial-gradient(38% 32% at 92% 70%,rgba(255,178,127,.75),rgba(255,178,127,0) 70%);
}

/* ---------- 3. Form layout ---------- */
form.wpcf7-form.mk-form{
  position:relative;
  box-sizing:border-box;
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:0;
  padding:clamp(28px,3.5vw,48px);
  border-radius:19px;
  color:#4A5560;
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    linear-gradient(115deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%),
    linear-gradient(140deg,rgba(255,255,255,.84) 0%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.64) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.35);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  form.wpcf7-form.mk-form{background:rgba(255,255,255,.96)}
}
form.wpcf7-form.mk-form *,
form.wpcf7-form.mk-form *::before,
form.wpcf7-form.mk-form *::after{box-sizing:border-box}

/* CF7 extras: hidden fields, auto <p>/<br>, spinner */
form.wpcf7-form.mk-form .hidden-fields-container,
form.wpcf7-form.mk-form > div[style*="display: none"]{display:none !important}
form.wpcf7-form.mk-form > p,
form.wpcf7-form.mk-form .mk-field > p{display:contents;margin:0}
form.wpcf7-form.mk-form br{display:none}
form.wpcf7-form.mk-form .wpcf7-spinner{display:none}

/* header */
form.wpcf7-form.mk-form .mk-form__head{
  grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;
  margin:0 0 4px;padding:0 0 16px;border-bottom:1px solid rgba(11,44,77,.1);
}
form.wpcf7-form.mk-form .mk-form__head b{
  font:600 18px/1.3 "Manrope",system-ui,sans-serif;color:#0B2C4D;letter-spacing:-.01em;
}

/* ---------- 4. Fields ---------- */
form.wpcf7-form.mk-form .mk-field{position:relative;display:grid;gap:7px;min-width:0;margin:0}
form.wpcf7-form.mk-form .mk-field--full{grid-column:1 / -1}
form.wpcf7-form.mk-form .mk-field label{
  display:block;margin:0;padding:0;
  font:600 13px/1.3 "Manrope",system-ui,sans-serif;color:#0B2C4D;transition:color .3s;
}
form.wpcf7-form.mk-form .mk-field:focus-within label{color:#1B6CB7}
form.wpcf7-form.mk-form .mk-field label i{font-style:normal;color:#FF7A2E}
form.wpcf7-form.mk-form .wpcf7-form-control-wrap{display:block;position:relative;width:100%}

form.wpcf7-form.mk-form .mk-field input,
form.wpcf7-form.mk-form .mk-field select,
form.wpcf7-form.mk-form .mk-field textarea{
  display:block;width:100%;max-width:100%;height:auto;margin:0;
  padding:13px 15px;
  font:400 15px/1.4 "Manrope",system-ui,sans-serif;color:#0B2C4D;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(11,44,77,.12);border-radius:10px;
  box-shadow:inset 0 1px 2px rgba(11,44,77,.04);
  transition:border-color .25s,background .25s,box-shadow .25s;
}
form.wpcf7-form.mk-form .mk-field select{cursor:pointer}
form.wpcf7-form.mk-form .mk-field textarea{height:120px;min-height:120px;resize:vertical}
form.wpcf7-form.mk-form .mk-field input:focus,
form.wpcf7-form.mk-form .mk-field select:focus,
form.wpcf7-form.mk-form .mk-field textarea:focus{
  outline:none;background:#fff;border-color:#1B6CB7;box-shadow:0 0 0 3px rgba(27,108,183,.14);
}

/* file upload */
form.wpcf7-form.mk-form .mk-field input[type=file]{
  padding:9px;font-size:13.5px;background:rgba(255,255,255,.45);
  border-style:dashed;border-color:rgba(11,44,77,.2);cursor:pointer;
}
form.wpcf7-form.mk-form .mk-field input[type=file]::file-selector-button{
  margin-right:12px;padding:8px 14px;border:0;border-radius:7px;
  background:#0B2C4D;color:#fff;font:600 13px "Manrope",system-ui,sans-serif;cursor:pointer;transition:background .3s;
}
form.wpcf7-form.mk-form .mk-field input[type=file]:hover::file-selector-button{background:#FF7A2E}

/* validation */
form.wpcf7-form.mk-form .wpcf7-not-valid{border-color:#D93025 !important;box-shadow:0 0 0 3px rgba(217,48,37,.12) !important}
form.wpcf7-form.mk-form .wpcf7-not-valid-tip{
  display:block;margin-top:6px;font:500 12.5px/1.3 "Manrope",system-ui,sans-serif;color:#D93025;
}

/* ---------- 5. Submit button ---------- */
form.wpcf7-form.mk-form .mk-btn,
form.wpcf7-form.mk-form .wpcf7-submit{
  grid-column:1 / -1;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;margin:0;padding:18px;
  font:600 15px/1 "Manrope",system-ui,sans-serif;color:#fff;
  background:linear-gradient(140deg,#FF7A2E 0%,#E25600 60%);
  border:0;border-radius:12px;cursor:pointer;
  box-shadow:0 14px 28px -12px rgba(255,106,26,.85);
  transition:filter .3s,transform .3s,box-shadow .3s;
}
form.wpcf7-form.mk-form .mk-btn:hover,
form.wpcf7-form.mk-form .wpcf7-submit:hover{color:#fff;filter:brightness(1.07);transform:translateY(-1px)}
form.wpcf7-form.mk-form .mk-btn:focus-visible{outline:2px solid #0B2C4D;outline-offset:3px}
form.wpcf7-form.mk-form .mk-btn .mk-ico{width:16px;height:16px;fill:currentColor;transition:transform .3s}
form.wpcf7-form.mk-form .mk-btn:hover .mk-ico{transform:translateX(3px)}
form.wpcf7-form.mk-form .wpcf7-submit:disabled{opacity:.65;cursor:progress}

/* ---------- 6. Response message ---------- */
form.wpcf7-form.mk-form .wpcf7-response-output{
  grid-column:1 / -1;margin:0 !important;padding:12px 14px !important;
  border:1px solid transparent !important;border-radius:10px;
  font:500 13.5px/1.45 "Manrope",system-ui,sans-serif;color:#0B2C4D;background:rgba(255,255,255,.7);
}
form.wpcf7-form.mk-form .wpcf7-response-output:empty{display:none}
form.wpcf7-form.mk-form.sent .wpcf7-response-output{border-color:rgba(26,127,55,.35) !important;background:#EAF6EE;color:#1A7F37}
form.wpcf7-form.mk-form.invalid .wpcf7-response-output,
form.wpcf7-form.mk-form.unaccepted .wpcf7-response-output{border-color:rgba(226,86,0,.35) !important;background:#FFF1E8;color:#B54500}
form.wpcf7-form.mk-form.failed .wpcf7-response-output,
form.wpcf7-form.mk-form.aborted .wpcf7-response-output,
form.wpcf7-form.mk-form.spam .wpcf7-response-output{border-color:rgba(217,48,37,.35) !important;background:#FDECEA;color:#B3261E}

/* ---------- 7. Mobile ---------- */
@media (max-width:575px){
  form.wpcf7-form.mk-form{grid-template-columns:1fr;gap:16px;padding:24px 20px}
  form.wpcf7-form.mk-form .mk-field{grid-column:1 / -1}
  form.wpcf7-form.mk-form .mk-field input,
  form.wpcf7-form.mk-form .mk-field select,
  form.wpcf7-form.mk-form .mk-field textarea{font-size:16px} /* stops iOS zoom on focus */
}
@media (prefers-reduced-motion:reduce){
  .mk-beamwrap::before{animation:none}
  form.wpcf7-form.mk-form .mk-btn,form.wpcf7-form.mk-form .mk-btn .mk-ico{transition:none}
}