/* ================================
   Clixlogix Zoho Form (Card UI)
   Paste into Elementor HTML widget
==================================*/
.clx-zoho-wrap{ padding:18px; background:transparent; }

.clx-zoho-card{
    width: 100%;
  background: linear-gradient(145deg, rgba(25,42,58,0.92), rgba(20,37,51,0.96));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius:34px;
  padding: 2em;
  box-shadow: 0 22px 60px rgba(0,0,0,.25),
              inset 0 1px 0 rgba(255,255,255,0.12);
  color:#fff;
  font-family:inherit;
  position: relative;
  overflow: hidden;
}
/* Animated sheen sweep across top-right */
.clx-zoho-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.06) 40%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.06) 60%,
    transparent 80%
  );
  pointer-events: none;
  animation: clx-sheen 6s ease-in-out infinite;
}
@keyframes clx-sheen {
  0%   { left: -150%; opacity: 0; }
  10%  { opacity: 1; }
  50%  { left: 150%; opacity: 1; }
  60%  { opacity: 0; }
  100% { left: 150%; opacity: 0; }
}

.clx-zoho-head .form-title{
  margin:0 0 6px;
  font-size:2rem;
  font-weight: normal;
  line-height:1.2;
  letter-spacing:-0.2px;
  color:#fff;
}
.clx-zoho-head .form-subtitle{
    font-weight: normal;
  margin-bottom: 2vw;
  font-size: 1rem;
  color:rgba(255,255,255,.65);
}

.clx-zoho-form{ margin:0; }

/* fields */
.clx-field{ margin-top:14px; }
.clx-label{
  display:block;
  font-size:11px;
  color:rgba(255,255,255,.55);
  margin-bottom:8px;
}

/* underline row */
.clx-line{
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.35);
}
.clx-line:focus-within{ border-bottom-color: rgba(255,255,255,.75); }

/* inputs */
.clx-zoho-card input[type="text"],
.clx-zoho-card input[type="email"],
.clx-zoho-card input[type="tel"],
.clx-zoho-card textarea{
  width:100%;
  background:transparent;
  border: none !important;
  outline:none;
  color:#fff !important;
  font-size:14px;
  padding:2px 0;
  font-family:inherit;
}

.clx-zoho-card textarea{ min-height:72px; resize:none; }

.clx-zoho-card input::placeholder,
.clx-zoho-card textarea::placeholder{
  color:rgba(255,255,255,.35);
  opacity:1;
}

/* Full name looks like single row */
.clx-name .clx-line{ gap:14px; }
.clx-name input{ min-width:0; }

/* Country code dropdown */
.clx-cc-select{
  border:0;
  outline:none;
  color:rgba(255,255,255,.9);
  font:inherit;
  padding:0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 90px;
}
.clx-cc-select option{ color:#000; }

/* hidden but still present for submit/validation */
.clx-sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* helper under textarea label */
.clx-help{
  display:block;
  margin-top:4px;
  font-size:10.5px;
  color:rgba(255,255,255,.45);
}


/* actions */
.clx-actions{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
}
.clx-secure{
  display:flex;
  align-items:center;
  gap:10px;
}
.clx-secure img{
  width:6em;
  height:auto;
  display:block;
}

.clx-submit{
  border:0;
  outline:none;
  background:#ff5a14;
  color:#fff;
  font-weight:700;
  font-size:12px;
  padding:12px 18px;
  min-width:170px;
  border-radius:12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 14px 30px rgba(255,90,20,.25);
}
.clx-submit:hover{ filter:brightness(1.03); }
.clx-submit:active{ transform:translateY(1px); }
.clx-arrow{ display:inline-block; font-size:14px; transform:translateY(-1px); }

/* footer notes */
.clx-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top: 2vw;
  padding: 0 2em;
}

.erp-meta-item{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:2px;
      white-space:nowrap;
    }

    .erp-meta-icon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size: 20px;
    }

    .erp-icon-lightning::before{
      content:"⚡";
      color:#FFC94A;   /* yellow-ish like the design */
    }

    .erp-icon-lock::before{
      content:"🔒";
      color:#F5D48A;   /* soft gold lock */
    }

    .erp-meta-divider{
      width:2px;
      height:16px;
      background:rgba(255,255,255,.3);
    }
    
    .erp-meta-text-before {
        font-weight: normal;
  font-size: 12px;
  color:rgba(255,255,255,.65);
    }
    
    .erp-meta-text {
        font-weight: 600;
        color: #ffffff;
        font-size: 15px;
    }

/* mobile */
@media (max-width:420px){
  .clx-zoho-card{ padding:1.5em; border-radius:28px; }
  .clx-submit{ min-width:150px; }
  .clx-cc-select{ width:150px; flex-basis:150px; }
  .erp-meta-icon {
      display: none;
  }
  .erp-meta-item {
      gap: 0px;
  }
  .clx-footer {
      padding:0;
  }
  .erp-meta-text-before {
      font-size: 9px;
  }
  .erp-meta-text {
      font-size: 12px;
  }
}

/* ===== FIX: Custom Consent Checkbox (works in Elementor) ===== */
.clx-zoho-card .clx-consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:16px;
}

/* Hide native checkbox but keep it accessible */
.clx-zoho-card .clx-consent input[type="checkbox"]{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
}

/* IMPORTANT: label must NOT be inline */
.clx-zoho-card .clx-consent label{
  display:inline-block;              /* <-- this is the missing piece */
  position:relative;
  padding-left:22px;
  cursor:pointer;
  user-select:none;
  font-size:10.5px;
  line-height:1.35;
  color:rgba(255,255,255,.55);
}

/* Box outline */
.clx-zoho-card .clx-consent label::before{
  content:"";
  display:block;                     /* ensures width/height apply */
  width:14px;
  height:14px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:3px;
  background:transparent;            /* never fill */
  position:absolute;
  left:0;
  top:2px;
}

/* Orange tick (no background change) */
.clx-zoho-card .clx-consent label::after{
  content:"";
  display:block;                     /* ensures width/height apply */
  width:10px;
  height:10px;
  position:absolute;
  left:2px;
  top:4px;
  background:#ff6a1c;
  clip-path: polygon(14% 44%, 0 65%, 45% 100%, 100% 16%, 79% 0, 43% 62%);
  transform:scale(0);
  transform-origin:center;
  transition:transform .12s ease-in-out;
}

/* This selector requires label to be immediately after input (yours is ✅) */
.clx-zoho-card .clx-consent input[type="checkbox"]:checked + label::after{
  transform:scale(1);
}

/* Focus ring */
.clx-zoho-card .clx-consent input[type="checkbox"]:focus-visible + label::before{
  outline:2px solid rgba(255,255,255,.45);
  outline-offset:3px;
}

/* Mic button inside textarea field */
.clx-zoho-card .clx-field-msg { position: relative; }
.clx-zoho-card .clx-mic {
  position: absolute;
  bottom: 12px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: rgba(255,255,255,0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.clx-zoho-card .clx-mic:hover { color: #ff5a14; }
.clx-zoho-card .clx-mic svg { pointer-events: none; }

/* Attach file row */
.clx-zoho-card .clx-attach-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.clx-zoho-card .clx-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: color 0.2s;
}
.clx-zoho-card .clx-attach:hover { color: #ff5a14; }
.clx-zoho-card .clx-attach-icon { font-size: 16px; }
.clx-zoho-card .clx-attach-note {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

/* Submit button hover — arrow slides right */
.clx-zoho-card .clx-submit {
  transition: background 0.2s, transform 0.1s;
}
.clx-zoho-card .clx-submit:hover {
  background: #e04e0e !important;
}
.clx-zoho-card .clx-submit .clx-arrow {
  display: inline-block;
  transition: transform 0.2s;
}
.clx-zoho-card .clx-submit:hover .clx-arrow {
  transform: translateX(5px);
}

/* Responsive — tablet */
@media (max-width: 1024px) {
  .clx-zoho-card { padding: 2em !important; }
}
/* Responsive — mobile */
@media (max-width: 768px) {
  .clx-zoho-wrap { padding: 8px !important; }
  .clx-zoho-card { padding: 1.5em !important; border-radius: 24px; }
  .clx-zoho-card .form-title { font-size: 1.3rem !important; }
  .clx-zoho-card .form-subtitle { font-size: 0.85rem !important; }
  .clx-field { margin-top: 10px !important; }
  .clx-zoho-card textarea { min-height: 56px !important; }
  .clx-submit { padding: 12px !important; font-size: 14px !important; }
  .clx-footer { gap: 8px !important; }
}


/* ------------------------------------------------------------------
   intl-tel-input — make the injected .iti wrapper fill the form line
   and match the form's input chrome. iti wraps the phone <input> in
   a .iti container that is inline-width by default.
   ------------------------------------------------------------------ */
.clx-zoho-form .iti { width: 100%; display: block; }
.clx-zoho-form .iti input.clx-phone,
.clx-zoho-form .iti input[type="tel"] { width: 100%; }
/* The legacy fixed-list dropdown is hidden by clx-lead-form.js; this is
   a no-JS fallback so it never flashes before the script runs. */
.clx-zoho-form .clx-cc-select { display: none; }
/* iti country-list dropdown above other form chrome */
.clx-zoho-form .iti__dropdown-content { z-index: 1000; }