
/* Quazelle Contact Suite – Frontend (v0.4.0) */
.qz-form{max-width:820px}
.qz-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--qzcs-gap)}
.qz-field{min-width:0}
.qz-field--full{grid-column:1 / -1}

.qz-field label{
  display:block;
  margin-bottom:8px;
  font-size:var(--qzcs-label_size);
  font-weight:var(--qzcs-label_weight);
  color:var(--qzcs-text_color);
  line-height:1.25;
}

/* Inputs + Select + Textarea: unified system */
.qz-form input[type="text"],
.qz-form input[type="email"],
.qz-form select,
.qz-form textarea{
  width:100%;
  min-height:var(--qzcs-field_height);
  padding:14px 16px;
  font-size:var(--qzcs-input_size);
  font-weight:var(--qzcs-input_weight);
  line-height:1.4;
  color:var(--qzcs-text_color);
  background-color:var(--qzcs-bg_color);
  border:var(--qzcs-border_width) solid var(--qzcs-border_color);
  border-radius:var(--qzcs-radius);
  box-shadow:none;
  outline:none;
}

.qz-form textarea{
  min-height:var(--qzcs-textarea_height);
  resize:vertical;
}

.qz-form input::placeholder,
.qz-form textarea::placeholder{opacity:var(--qzcs-placeholder_opacity)}

/* Focus */
.qz-form input:focus,
.qz-form select:focus,
.qz-form textarea:focus{
  border-color:var(--qzcs-focus_color);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--qzcs-focus_color) 12%, transparent);
}

/* Select: match input + consistent arrow (LTR/RTL locked) */
.qz-form select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748B 50%),
    linear-gradient(135deg, #64748B 50%, transparent 50%);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  background-position:
    calc(100% - 20px) calc(50% - 3px),
    calc(100% - 14px) calc(50% - 3px);
  padding-right:44px;
}

.qz-form--ar select{
  background-position:
    20px calc(50% - 3px),
    14px calc(50% - 3px);
  padding-right:16px;
  padding-left:44px;
}

/* Icon input wrapper */
.qz-inputwrap{position:relative}
.qz-inputwrap--icon input{padding-right:46px}
.qz-form--ar .qz-inputwrap--icon input{padding-right:16px;padding-left:46px}

.qz-inputicon{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  right:14px;
  width:18px;height:18px;
  opacity:.55;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%231F2937' stroke-width='1.6'%3E%3Cpath d='M7.5 7.5a2.5 2.5 0 1 0 5 0 2.5 2.5 0 0 0-5 0Z'/%3E%3Cpath d='M3.3 15.2A8 8 0 1 1 16.7 15.2'/%3E%3C/svg%3E");
}
.qz-form--ar .qz-inputicon{right:auto;left:14px}

/* Consent */
.qz-consent{margin-top:8px}
.qz-consent__label{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:500;color:var(--qzcs-text_color)}
.qz-consent input[type="checkbox"]{width:18px;height:18px;margin-top:2px}

/* Actions */
.qz-actions{display:flex;align-items:center;gap:14px;justify-content:flex-start}
.qz-form--ar .qz-actions{justify-content:flex-end}

/* Button */
.qz-submit{
  min-height:var(--qzcs-field_height);
  padding:14px 22px;
  font-size:15px;
  font-weight:600;
  border-radius:var(--qzcs-button_radius);
  border:0;
  cursor:pointer;
  color:var(--qzcs-button_text);
  background:var(--qzcs-button_bg);
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.qz-submit:hover{transform:translateY(-1px);filter:brightness(0.98)}
.qz-submit:focus{outline:none;box-shadow:0 0 0 4px color-mix(in srgb, var(--qzcs-button_bg) 18%, transparent)}
.qz-form[aria-busy="true"] .qz-submit{opacity:.65;cursor:not-allowed;transform:none}

/* Loading */
.qz-loading{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--qzcs-text_color)}
.qz-spinner{
  width:16px;height:16px;border-radius:999px;
  border:2px solid color-mix(in srgb, var(--qzcs-text_color) 25%, transparent);
  border-top-color:color-mix(in srgb, var(--qzcs-text_color) 75%, transparent);
  animation:qzspin .9s linear infinite;
}
@keyframes qzspin{to{transform:rotate(360deg)}}

.qz-response{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--qzcs-text_color) 18%, transparent);
  background:color-mix(in srgb, var(--qzcs-text_color) 4%, transparent);
}

/* Hide honeypot */
.qz-hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Mobile */
@media (max-width:680px){
  .qz-form__grid{grid-template-columns:1fr}
}
