/* WEBHOST SOLUTIONS — Contact Us V1.3
   Presentation layer for WHMCS contact.tpl. Native contact submission,
   validation, CAPTCHA and language strings remain WHMCS-controlled. */

html.whs-contact-page,
html.whs-contact-page body,
body.whs-contact-page,
body.whs-contact-page #main-body,
body.whs-contact-page #main-body > .container,
body.whs-contact-page #main-body > .container-fluid,
body.whs-contact-page .main-content,
body.whs-contact-page .primary-content {
    background:#07111f !important;
    color:#dfe5f6;
}

body.whs-contact-page #main-body { padding-top:18px; padding-bottom:6px; }
body.whs-contact-page #main-body,
body.whs-contact-page #main-body > .container,
body.whs-contact-page #main-body > .container-fluid,
body.whs-contact-page #main-body > .container > .row,
body.whs-contact-page #main-body > .container-fluid > .row,
body.whs-contact-page #main-body .main-content,
body.whs-contact-page #main-body .primary-content {
    min-height:0 !important;
    height:auto !important;
    margin-bottom:0 !important;
}
body.whs-contact-page #footer { margin-top:0 !important; }

/* Contact Us uses the global WEBHOST navigation, not a second Six sidebar. */
html.whs-contact-page body #main-body .sidebar,
body.whs-contact-page #main-body .sidebar,
body.whs-contact-page #main-body .sidebar-primary,
body.whs-contact-page #main-body .sidebar-secondary {
    display:none !important;
}
body.whs-contact-page #main-body .primary-content,
body.whs-contact-page #main-body .primary-content[class*="col-"] {
    width:100% !important;
    max-width:100% !important;
    float:none !important;
}

/* Storefront hero — same language as Account, Support and Payments pages. */
body.whs-contact-page .header-lined {
    position:relative;
    overflow:hidden;
    margin:0 0 18px !important;
    padding:19px 26px 18px !important;
    border:1px solid rgba(142,154,212,.17) !important;
    border-radius:20px !important;
    background:radial-gradient(circle at 94% 6%,rgba(134,82,226,.18),transparent 38%),linear-gradient(145deg,#11192f,#0c1427) !important;
    box-shadow:0 16px 38px rgba(0,0,0,.12) !important;
}
body.whs-contact-page .header-lined::before {
    content:"SUPPORT";
    position:relative;
    z-index:1;
    display:block;
    margin-bottom:6px;
    color:#aeb7ff;
    font-size:11px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.22em;
}
body.whs-contact-page .header-lined::after {
    content:"Get in touch with our team and we will help with your question.";
    position:relative;
    z-index:1;
    display:block;
    margin-top:8px;
    color:#98a5c2;
    font-size:14px;
    line-height:1.55;
}
body.whs-contact-page .header-lined h1 {
    position:relative;
    z-index:1;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    color:#f7f9ff !important;
    font-size:34px !important;
    line-height:1.14 !important;
    font-weight:800 !important;
    letter-spacing:-.025em;
}
body.whs-contact-page .header-lined h1 small,
body.whs-contact-page .header-lined .breadcrumb,
body.whs-contact-page .header-lined ol.breadcrumb { display:none !important; }

body.whs-contact-page .whs-contact-us { width:100%; color:#dfe5f6; }
body.whs-contact-page .whs-contact-alert-wrap .alert,
body.whs-contact-page .alert {
    margin-bottom:16px;
    border-radius:14px;
}

body.whs-contact-page .whs-contact-card,
body.whs-contact-page .whs-contact-state-card {
    overflow:hidden;
    margin:0 0 14px;
    border:1px solid rgba(142,154,212,.17);
    border-radius:20px;
    background:radial-gradient(circle at 100% 0,rgba(129,81,218,.10),transparent 38%),linear-gradient(145deg,#11192f,#0c1427);
    box-shadow:0 16px 36px rgba(0,0,0,.12);
}

body.whs-contact-page .whs-contact-card-heading {
    display:flex;
    align-items:center;
    gap:13px;
    padding:20px 22px 17px;
    border-bottom:1px solid rgba(142,154,212,.11);
}
body.whs-contact-page .whs-contact-card-icon,
body.whs-contact-page .whs-contact-captcha-icon,
body.whs-contact-page .whs-contact-state-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
    width:42px;
    height:42px;
    border:1px solid rgba(169,145,255,.25);
    border-radius:12px;
    color:#c5b5ff;
    background:linear-gradient(145deg,rgba(117,91,225,.26),rgba(142,82,205,.18));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
    font-size:16px;
}
body.whs-contact-page .whs-contact-card-heading h2 {
    margin:0;
    color:#f5f7ff;
    font-size:18px;
    line-height:1.3;
    font-weight:800;
}
body.whs-contact-page .whs-contact-card-heading p {
    margin:4px 0 0;
    color:#929fbd;
    font-size:13px;
    line-height:1.5;
}
body.whs-contact-page .whs-contact-card-body { padding:20px 22px 22px; }
body.whs-contact-page .whs-contact-form { margin:0; }
body.whs-contact-page .whs-contact-grid {
    display:grid;
    gap:17px 18px;
}
body.whs-contact-page .whs-contact-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
body.whs-contact-page .whs-contact-span-two { grid-column:1 / -1; }
body.whs-contact-page .form-group { min-width:0; margin:0 !important; }
body.whs-contact-page .form-group > label,
body.whs-contact-page label.control-label {
    display:block;
    margin:0 0 8px !important;
    padding:0 !important;
    color:#e6eaf7 !important;
    font-size:14px;
    line-height:1.35;
    font-weight:700;
    text-align:left !important;
}

body.whs-contact-page .whs-contact-form .form-control,
body.whs-contact-page .whs-contact-form input[type="text"],
body.whs-contact-page .whs-contact-form input[type="email"],
body.whs-contact-page .whs-contact-form textarea {
    width:100%;
    min-height:50px;
    padding:11px 14px;
    border:1px solid rgba(142,154,212,.25) !important;
    border-radius:12px !important;
    color:#f3f6ff !important;
    -webkit-text-fill-color:#f3f6ff;
    background:#081225 !important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.08) !important;
    font-size:15px;
    line-height:1.5;
}
body.whs-contact-page .whs-contact-form textarea {
    min-height:128px;
    resize:vertical;
}
body.whs-contact-page .whs-contact-form .form-control:focus,
body.whs-contact-page .whs-contact-form input:focus,
body.whs-contact-page .whs-contact-form textarea:focus {
    border-color:#9a84e8 !important;
    outline:0 !important;
    box-shadow:0 0 0 3px rgba(136,105,229,.16) !important;
}
body.whs-contact-page .whs-contact-form input:-webkit-autofill,
body.whs-contact-page .whs-contact-form input:-webkit-autofill:hover,
body.whs-contact-page .whs-contact-form input:-webkit-autofill:focus {
    -webkit-text-fill-color:#f3f6ff !important;
    -webkit-box-shadow:0 0 0 1000px #081225 inset !important;
    transition:background-color 9999s ease-out 0s;
}

body.whs-contact-page .whs-contact-captcha {
    margin-top:18px;
    overflow:hidden;
    border:1px solid rgba(142,154,212,.15);
    border-radius:15px;
    background:#0c162a;
}
body.whs-contact-page .whs-contact-captcha-heading {
    display:flex;
    align-items:center;
    gap:11px;
    padding:12px 14px;
    min-height:58px;
    border-bottom:1px solid rgba(142,154,212,.10);
}
body.whs-contact-page .whs-contact-captcha-icon {
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 34px !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:9px !important;
    line-height:0 !important;
}
body.whs-contact-page .whs-contact-captcha-shield {
    position:static !important;
    display:block !important;
    flex:0 0 auto !important;
    width:20px !important;
    height:22px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    color:#c8bbff !important;
}
body.whs-contact-page .whs-contact-captcha-heading strong,
body.whs-contact-page .whs-contact-captcha-heading span {
    display:block;
}
body.whs-contact-page .whs-contact-captcha-heading > div { min-width:0; }
body.whs-contact-page .whs-contact-captcha-heading strong {
    color:#eef2ff;
    font-size:13px;
}
body.whs-contact-page .whs-contact-captcha-heading span {
    margin-top:2px;
    color:#8794b2;
    font-size:12px;
}
body.whs-contact-page .whs-contact-captcha-body {
    padding:14px 14px 12px;
    text-align:center;
}
body.whs-contact-page .captcha-container,
body.whs-contact-page .captchaimage,
body.whs-contact-page .g-recaptcha,
body.whs-contact-page .h-captcha {
    max-width:100%;
    margin-left:auto !important;
    margin-right:auto !important;
}

body.whs-contact-page .whs-contact-actions {
    display:flex;
    justify-content:flex-end;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid rgba(142,154,212,.11);
}
body.whs-contact-page .whs-contact-submit,
body.whs-contact-page .whs-contact-submit.btn-primary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-width:170px;
    min-height:46px;
    padding:11px 18px !important;
    border:1px solid rgba(173,151,255,.30) !important;
    border-radius:12px !important;
    color:#fff !important;
    background:linear-gradient(135deg,#6759df,#8c58df) !important;
    box-shadow:0 10px 24px rgba(101,78,217,.18) !important;
    font-size:14px;
    font-weight:800;
}
body.whs-contact-page .whs-contact-submit:hover,
body.whs-contact-page .whs-contact-submit:focus {
    color:#fff !important;
    background:linear-gradient(135deg,#7465ea,#9864e7) !important;
    border-color:rgba(188,170,255,.42) !important;
}

body.whs-contact-page .whs-contact-state-card {
    display:flex;
    align-items:center;
    gap:16px;
    padding:22px;
}
body.whs-contact-page .whs-contact-success-card {
    border-color:rgba(91,213,145,.20);
    background:radial-gradient(circle at 100% 0,rgba(54,196,125,.11),transparent 38%),linear-gradient(145deg,#101c2d,#0b1625);
}
body.whs-contact-page .whs-contact-success-card .whs-contact-state-icon {
    color:#7ee4ad;
    border-color:rgba(91,213,145,.25);
    background:rgba(54,196,125,.10);
}
body.whs-contact-page .whs-contact-state-kicker {
    display:block;
    margin-bottom:5px;
    color:#79dda8;
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
}
body.whs-contact-page .whs-contact-state-copy h2 {
    margin:0;
    color:#f4f7ff;
    font-size:18px;
    line-height:1.45;
    font-weight:800;
}

body.whs-contact-page .whs-contact-us { margin-bottom:0; }
body.whs-contact-page .main-content > p:last-child,
body.whs-contact-page .primary-content > p:last-child {
    margin:10px 0 12px !important;
    color:#90a0c0;
    font-size:13px;
    line-height:1.5;
    text-align:center;
}
body.whs-contact-page .main-content > p:last-child a,
body.whs-contact-page .primary-content > p:last-child a {
    color:#5aa9ff !important;
}
body.whs-contact-page #footer { padding-top:4px; }

@media (max-width:767px) {
    body.whs-contact-page #main-body { padding-top:14px; padding-bottom:4px; }
    body.whs-contact-page #main-body > .container,
    body.whs-contact-page #main-body > .container-fluid {
        padding-left:14px !important;
        padding-right:14px !important;
    }
    body.whs-contact-page .header-lined {
        margin-bottom:14px !important;
        padding:17px 18px 16px !important;
        border-radius:17px !important;
    }
    body.whs-contact-page .header-lined h1 { font-size:27px !important; }
    body.whs-contact-page .header-lined::after { font-size:13px; }
    body.whs-contact-page .whs-contact-card { border-radius:17px; }
    body.whs-contact-page .whs-contact-card-heading {
        align-items:flex-start;
        padding:17px 16px 15px;
    }
    body.whs-contact-page .whs-contact-card-body { padding:16px; }
    body.whs-contact-page .whs-contact-grid-two { grid-template-columns:1fr; }
    body.whs-contact-page .whs-contact-span-two { grid-column:auto; }
    body.whs-contact-page .whs-contact-form textarea { min-height:112px; }
    body.whs-contact-page .whs-contact-actions { display:block; }
    body.whs-contact-page .whs-contact-submit { width:100%; }
    body.whs-contact-page .whs-contact-state-card {
        align-items:flex-start;
        padding:18px 16px;
        border-radius:17px;
    }
}

@media (max-width:420px) {
    body.whs-contact-page .header-lined h1 { font-size:25px !important; }
    body.whs-contact-page .whs-contact-card-heading h2 { font-size:17px; }
    body.whs-contact-page .whs-contact-captcha-body { padding:10px 8px; }
}

@media (prefers-reduced-motion:reduce) {
    body.whs-contact-page .btn,
    body.whs-contact-page .form-control { transition:none !important; }
}