/* =========================================================
   القرية — Alqariah  |  complaints.css  (complaints.html only)
   Complaints & suggestions form.
   Loaded after base.css.
   ========================================================= */

/* =========================================================
   Complaints & Suggestions form
   ========================================================= */
.complaints{max-width:820px;margin:0 auto;padding:120px 24px 90px}
.cform{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-soft);padding:40px 36px;position:relative;overflow:hidden}
/* same colored top strip as the product cards */
.cform::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:7px;
  background:linear-gradient(90deg,var(--blue),var(--teal),var(--green))}
.cform__group{margin-bottom:22px}
.cform__label{display:block;font-weight:800;color:var(--navy);margin-bottom:8px}

/* radio pills — same look as the nav links */
.cform__radios{display:flex;gap:12px;flex-wrap:wrap}
.cform__radio{position:relative;cursor:pointer}
/* keep the input invisible but real, so `required` validation and keyboard
   focus still work (display:none would kill both) */
.cform__radio input{position:absolute;opacity:0;width:100%;height:100%;inset:0;cursor:pointer}
.cform__radio span{display:inline-flex;align-items:center;padding:.55em 1.6em;border-radius:999px;
  border:2px solid var(--line);background:var(--sky);color:var(--blue-dark);font-weight:800;
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.cform__radio input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 12px 24px -12px var(--blue)}
.cform__radio input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}

.cform__input,.cform__textarea{width:100%;font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:2px solid var(--line);border-radius:var(--radius-sm);
  padding:.75em 1.1em;transition:border-color .25s,background .25s,box-shadow .25s}
.cform__input:focus,.cform__textarea:focus{outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 12px 26px -18px var(--blue)}
.cform__textarea{min-height:150px;resize:vertical}

.cform__submit{width:100%;margin-top:6px}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:none}

.cform__alert{margin-top:18px;padding:.85em 1.2em;border-radius:var(--radius-sm);
  font-weight:700;text-align:center}
.cform__alert--ok{background:var(--mint);color:var(--green-dark);border:1px solid #cdeeda}
.cform__alert--err{background:#fdeeee;color:#c0392b;border:1px solid #f6d4d4}

@media(max-width:640px){
  .complaints{padding:100px 14px 70px}
  .cform{padding:28px 20px}
}