@charset "utf-8";
/* =========================================================================================
 * Project: HurkTech.io
 * File: contactus_styles.css
 * Component: Contact Support
 *
 * Purpose:
 * Defines the presentation for public and authenticated support-contact pages.
 *
 * Responsibilities:
 * - Styles the contact form and confirmation states
 * - Provides consistent field, button, and message treatments
 * - Supports responsive layouts and accessible focus states
 *
 * Created: Not documented
 * Last Updated: Not documented
 * ========================================================================================= */

:root {
    color-scheme:light;
    --page:#eef4f8;
    --panel:#ffffff;
    --line:#d5e0e9;
    --text:#10213d;
    --muted:#62738d;
    --blue:#0878dc;
    --blue-soft:#eaf5ff;
    --red:#b4232d
}

* {
    box-sizing:border-box
}

body {
    min-height:100vh;
    margin:0;
    padding:18px;
    background:
        linear-gradient(rgba(8,120,220,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(8,120,220,.055) 1px,transparent 1px),
        radial-gradient(circle at 88% 6%,rgba(151,120,231,.13),transparent 30rem),
        var(--page);
    background-size:64px 64px,64px 64px,auto,auto;
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif
}

.contact-container {
    width:min(100%,520px);
    margin:auto;
    padding:25px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,.97);
    box-shadow:0 14px 34px rgba(30,58,88,.09)
}

.contact-icon {
    display:grid;
    width:42px;
    height:42px;
    margin:0 auto 10px;
    place-items:center;
    border:1px solid #8fc9fb;
    border-radius:50%;
    background:var(--blue-soft);
    color:var(--blue);
    font-size:18px
}

h2 {
    margin:0;
    text-align:center;
    font-size:24px;
    letter-spacing:-.35px
}

.subtext {
    margin:7px 0 21px;
    color:var(--muted);
    font-size:13px;
    line-height:1.45;
    text-align:center
}

.form-group {
    margin-bottom:14px
}

label {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:6px;
    color:var(--text);
    font-size:12px;
    font-weight:700
}

.label-help {
    color:var(--muted);
    font-size:10px;
    font-weight:600
}

input,select,textarea {
    display:block;
    width:100%;
    margin:0;
    border:1px solid #b8c8d8;
    border-radius:8px;
    background:#fff;
    color:var(--text);
    font:500 13px inherit;
    transition:border-color .18s,box-shadow .18s,background .18s
}

input,select {
    height:42px;
    padding:0 12px
}

textarea {
    min-height:128px;
    padding:11px 12px;
    line-height:1.5;
    resize:vertical
}

select {
    padding-right:34px;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2362738d' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 11px center
}

input:focus,select:focus,textarea:focus {
    outline:none;
    border-color:var(--blue);
    background:#fff;
    box-shadow:0 0 0 3px rgba(8,120,220,.12)
}

.character-count {
    margin-top:5px;
    color:var(--muted);
    font-size:10px;
    text-align:right
}

.form-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:5px
}

.submit-button,.cancel-button {
    height:42px;
    border:1px solid;
    border-radius:8px;
    background:transparent;
    font:700 12px inherit;
    cursor:pointer;
    transition:background .18s,transform .18s
}

.submit-button {
    border-color:var(--blue);
    background:var(--blue);
    color:#fff
}

.cancel-button {
    border-color:#c5d2df;
    background:#fff;
    color:var(--red)
}

.submit-button:hover,.cancel-button:hover {
    transform:translateY(-1px)
}

.submit-button:hover {
    border-color:#0666bd;
    background:#0666bd
}

.cancel-button:hover {
    border-color:#d7a7ab;
    background:#fff5f5
}

.footer-note {
    margin:16px 0 0;
    color:var(--muted);
    font-size:10px;
    line-height:1.45;
    text-align:center
}

@media(max-width:480px) {
    body {
        padding:0
    }

    .contact-container {
        min-height:100vh;
        border-radius:0;
        padding:21px 18px
    }

    .form-actions {
        grid-template-columns:1fr
    }

}