/* ===========================================================
   complaints_v2.css — Complaints form enhancement
   Scoped under .comp_form so generic class names (ontwo/onthree/
   onfour/form_field) can't leak onto unrelated forms elsewhere.
   =========================================================== */
.comp_form{
    --cp-navy:#31485a;
    --cp-blue:#3399d1;
    --cp-teal:#16999b;
    --cp-ink:#22323f;
    --cp-muted:#5c6f7e;
    --cp-hairline:#e6edf2;
    --cp-ease:cubic-bezier(.22,1,.36,1);
    font-family:'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,sans-serif;
    max-width:1040px;
    margin:36px auto 0;
    padding:32px clamp(18px,3vw,40px) 36px;
    background:#fff;
    border:1px solid var(--cp-hairline);
    border-radius:22px;
    box-shadow:0 14px 40px rgba(34,50,63,.07);
}

/* ---------- section headers ---------- */
.comp_form .big_group_wrap{
    grid-column:1/-1;
    margin:30px 0 18px;
    padding-bottom:10px;
    border-bottom:2px solid var(--cp-hairline);
}
.comp_form .big_group_wrap:first-child{ margin-top:0; }
.comp_form .big_group{
    font-family:'Montserrat',sans-serif !important;
    font-weight:800 !important;
    font-size:16px !important;
    letter-spacing:.02em;
    color:var(--cp-navy) !important;
    display:flex;
    align-items:center;
    gap:10px;
}
.comp_form .big_group::before{
    content:'';
    display:inline-block;
    width:8px;height:8px;
    border-radius:50%;
    background:var(--cp-blue);
    flex-shrink:0;
}

/* ---------- field grid ---------- */
.comp_form{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:4px 18px;
}
.comp_form .form_field{
    grid-column:span 4;
    margin-bottom:16px;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    float:none !important;
    display:block !important;
}
.comp_form .form_field.ontwo{ grid-column:span 2; }
.comp_form .form_field.onthree{ grid-column:span 2; }
.comp_form .form_field.onfour{ grid-column:span 1; }
.comp_form .input_area{ width:100% !important; }

/* ---------- labels ---------- */
.comp_form .form_field label{
    display:block;
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:12.5px;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--cp-muted);
    margin-bottom:7px;
}
[dir="rtl"] .comp_form .form_field label{ letter-spacing:0; text-transform:none; }

/* ---------- inputs / selects / textareas ---------- */
.comp_form .input_area{ position:relative; }
.comp_form input[type="text"],
.comp_form input[type="number"],
.comp_form input[type="email"],
.comp_form input[type="date"],
.comp_form select,
.comp_form textarea{
    width:100% !important;
    box-sizing:border-box !important;
    font-family:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
    font-size:14.5px;
    color:var(--cp-ink);
    background:#f7f9fb;
    border:1.5px solid var(--cp-hairline);
    border-radius:11px;
    padding:12px 14px;
    transition:border-color .2s var(--cp-ease), background .2s var(--cp-ease), box-shadow .2s var(--cp-ease);
    appearance:none;
    -webkit-appearance:none;
}
.comp_form select{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6f7e' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px;
    padding-inline-end:36px;
}
[dir="rtl"] .comp_form select{
    background-position:left 12px center;
}
.comp_form textarea{
    min-height:120px;
    resize:vertical;
    line-height:1.6;
}
.comp_form input:focus,
.comp_form select:focus,
.comp_form textarea:focus{
    outline:none;
    background:#fff;
    border-color:var(--cp-blue);
    box-shadow:0 0 0 4px rgba(51,153,209,.14);
}
.comp_form input::placeholder,
.comp_form textarea::placeholder{ color:#a8b6c1; }

/* ---------- file upload ---------- */
.comp_form .form_field[data-legion-field-type="file"] .input_area{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border:1.5px dashed var(--cp-hairline);
    border-radius:14px;
    background:#f7f9fb;
    transition:border-color .2s ease, background .2s ease;
}
.comp_form .form_field[data-legion-field-type="file"] .input_area:hover{
    border-color:var(--cp-blue);
    background:#eef7fc;
}
.comp_form .form_field[data-legion-field-type="file"] img.po{
    width:40px;height:40px;object-fit:contain;cursor:pointer;flex-shrink:0;
}
.comp_form .clearFiles{
    color:#c0392b;
    cursor:pointer;
}

/* ---------- submit button ---------- */
.comp_form{ position:relative; }
#grant_btn{
    grid-column:1/-1;
    justify-self:start;
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
    padding:14px 36px !important;
    background:linear-gradient(135deg,var(--cp-blue),var(--cp-navy)) !important;
    color:#fff !important;
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:15px;
    letter-spacing:.02em;
    border-radius:12px !important;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(51,153,209,.28);
    transition:transform .25s var(--cp-ease), box-shadow .25s var(--cp-ease);
}
#grant_btn:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 32px rgba(51,153,209,.36);
}
#grant_btn:active{ transform:translateY(0); }

/* ---------- success message ---------- */
.form_success_message{
    max-width:1040px;
    margin:24px auto 0 !important;
    border-radius:16px !important;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
}

/* ---------- responsive ---------- */
@media (max-width:820px){
    .comp_form{ grid-template-columns:repeat(2,1fr); padding:24px 18px 28px; }
    .comp_form .form_field.onthree,
    .comp_form .form_field.onfour{ grid-column:span 1; }
    .comp_form .form_field.ontwo{ grid-column:span 2; }
}
@media (max-width:560px){
    .comp_form{ grid-template-columns:1fr; }
    .comp_form .form_field,
    .comp_form .form_field.ontwo,
    .comp_form .form_field.onthree,
    .comp_form .form_field.onfour{ grid-column:span 1; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
    .comp_form input, .comp_form select, .comp_form textarea, #grant_btn{ transition:none !important; }
    #grant_btn:hover{ transform:none; }
}