/* WEBHOST SOLUTIONS — Open Ticket / Submit Ticket
   Dark client-area presentation for the native WHMCS support-ticket flow.
   Native department/service/priority selectors, Markdown editor, KB suggestions,
   attachments, custom fields, CAPTCHA and ticket submission remain WHMCS-controlled. */

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

body.whs-open-ticket-page #main-body {
    padding-top:18px;
    padding-bottom:16px;
}

body.whs-open-ticket-page #main-body,
body.whs-open-ticket-page #main-body > .container,
body.whs-open-ticket-page #main-body > .container-fluid,
body.whs-open-ticket-page #main-body > .container > .row,
body.whs-open-ticket-page #main-body > .container-fluid > .row,
body.whs-open-ticket-page #main-body .main-content,
body.whs-open-ticket-page #main-body .primary-content {
    min-height:0 !important;
    height:auto !important;
    margin-bottom:0 !important;
}

body.whs-open-ticket-page #footer { margin-top:0 !important; }

/* Open Ticket has no section sidebar in the live WHMCS flow. Keep it that way. */
html.whs-open-ticket-page body #main-body .sidebar,
body.whs-open-ticket-page #main-body .sidebar,
body.whs-open-ticket-page #main-body .sidebar-primary,
body.whs-open-ticket-page #main-body .sidebar-secondary {
    display:none !important;
}

body.whs-open-ticket-page #main-body .primary-content,
body.whs-open-ticket-page #main-body .primary-content[class*="col-"] {
    width:100% !important;
    max-width:100% !important;
    float:none !important;
}

/* Hero */
body.whs-open-ticket-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-open-ticket-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-open-ticket-page .header-lined::after {
    content:"Tell us what you need help with and our support team will get back to you.";
    position:relative;
    z-index:1;
    display:block;
    margin-top:8px;
    color:#98a5c2;
    font-size:14px;
    line-height:1.55;
}
body.whs-open-ticket-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-open-ticket-page .header-lined h1 small,
body.whs-open-ticket-page .header-lined .breadcrumb,
body.whs-open-ticket-page .header-lined ol.breadcrumb {
    display:none !important;
}

body.whs-open-ticket-page .whs-open-ticket { width:100%; color:#dfe5f6; }
body.whs-open-ticket-page .whs-open-ticket-form { margin:0; }

body.whs-open-ticket-page .alert {
    margin-bottom:16px;
    border-radius:14px;
}

/* Cards */
body.whs-open-ticket-page .whs-ticket-form-card,
body.whs-open-ticket-page .whs-ticket-captcha-card,
body.whs-open-ticket-page .whs-ticket-confirm-card {
    overflow:hidden;
    margin:0 0 18px;
    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-open-ticket-page .whs-ticket-form-heading {
    display:flex;
    align-items:center;
    gap:13px;
    padding:20px 22px 17px;
    border-bottom:1px solid rgba(142,154,212,.11);
}

body.whs-open-ticket-page .whs-ticket-form-icon,
body.whs-open-ticket-page .whs-ticket-captcha-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));
    font-size:16px;
}

body.whs-open-ticket-page .whs-ticket-form-heading h2 {
    margin:0;
    color:#f5f7ff;
    font-size:18px;
    line-height:1.3;
    font-weight:800;
}
body.whs-open-ticket-page .whs-ticket-form-heading p {
    margin:4px 0 0;
    color:#929fbd;
    font-size:13px;
    line-height:1.5;
}
body.whs-open-ticket-page .whs-ticket-form-body { padding:20px 22px 22px; }

body.whs-open-ticket-page .whs-ticket-grid { display:grid; gap:17px 18px; }
body.whs-open-ticket-page .whs-ticket-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
body.whs-open-ticket-page .whs-ticket-span-two { grid-column:1 / -1; }
body.whs-open-ticket-page .form-group { min-width:0; margin:0 !important; }
body.whs-open-ticket-page .form-group > label,
body.whs-open-ticket-page label.control-label {
    display:block;
    margin:0 0 8px !important;
    color:#e6eaf7 !important;
    font-size:14px;
    line-height:1.35;
    font-weight:700;
}

/* Fields */
body.whs-open-ticket-page .whs-open-ticket .form-control,
body.whs-open-ticket-page .whs-open-ticket input[type="text"],
body.whs-open-ticket-page .whs-open-ticket input[type="email"],
body.whs-open-ticket-page .whs-open-ticket input[type="tel"],
body.whs-open-ticket-page .whs-open-ticket input[type="number"],
body.whs-open-ticket-page .whs-open-ticket input[type="password"],
body.whs-open-ticket-page .whs-open-ticket select,
body.whs-open-ticket-page .whs-open-ticket textarea,
body.whs-open-ticket-page #customFieldsContainer .form-control,
body.whs-open-ticket-page #customFieldsContainer input,
body.whs-open-ticket-page #customFieldsContainer select,
body.whs-open-ticket-page #customFieldsContainer 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-open-ticket-page .whs-open-ticket select,
body.whs-open-ticket-page #customFieldsContainer select {
    height:50px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    padding-right:38px !important;
    line-height:50px !important;
    -webkit-text-fill-color:currentColor;
}
body.whs-open-ticket-page .whs-open-ticket textarea,
body.whs-open-ticket-page #customFieldsContainer textarea {
    min-height:150px;
    resize:vertical;
}
body.whs-open-ticket-page .whs-open-ticket .form-control::placeholder,
body.whs-open-ticket-page .whs-open-ticket input::placeholder,
body.whs-open-ticket-page .whs-open-ticket textarea::placeholder {
    color:#74809c !important;
    -webkit-text-fill-color:#74809c;
    opacity:1;
}
body.whs-open-ticket-page .whs-open-ticket .form-control:focus,
body.whs-open-ticket-page .whs-open-ticket input:focus,
body.whs-open-ticket-page .whs-open-ticket select:focus,
body.whs-open-ticket-page .whs-open-ticket textarea:focus {
    border-color:#9a84e8 !important;
    outline:0 !important;
    box-shadow:0 0 0 3px rgba(136,105,229,.16) !important;
}
body.whs-open-ticket-page .whs-open-ticket input:disabled,
body.whs-open-ticket-page .whs-open-ticket .form-control.disabled {
    opacity:1 !important;
    color:#b7c1d9 !important;
    -webkit-text-fill-color:#b7c1d9 !important;
    background:#0b1528 !important;
    cursor:default;
}
body.whs-open-ticket-page .whs-open-ticket select option,
body.whs-open-ticket-page #customFieldsContainer select option {
    color:#111827;
    background:#fff;
}

/* Bootstrap Markdown editor */
body.whs-open-ticket-page .md-editor,
body.whs-open-ticket-page .markdown-editor-wrapper {
    overflow:hidden;
    border:1px solid rgba(142,154,212,.24) !important;
    border-radius:14px !important;
    background:#081225 !important;
    box-shadow:none !important;
}
body.whs-open-ticket-page .md-editor > .md-header,
body.whs-open-ticket-page .md-editor .md-header,
body.whs-open-ticket-page .markdown-editor-wrapper .toolbar {
    min-height:50px;
    padding:8px !important;
    border:0 !important;
    border-bottom:1px solid rgba(142,154,212,.14) !important;
    background:#0d1830 !important;
}
body.whs-open-ticket-page .md-editor .btn,
body.whs-open-ticket-page .md-editor .btn-default,
body.whs-open-ticket-page .markdown-editor-wrapper .btn {
    min-width:38px;
    min-height:34px;
    margin:0 3px 3px 0;
    border:1px solid rgba(142,154,212,.18) !important;
    border-radius:8px !important;
    color:#dce3f5 !important;
    background:#121e36 !important;
    box-shadow:none !important;
}
body.whs-open-ticket-page .md-editor .btn:hover,
body.whs-open-ticket-page .md-editor .btn:focus {
    color:#fff !important;
    border-color:rgba(169,145,255,.45) !important;
    background:#1a2743 !important;
}
body.whs-open-ticket-page .md-editor textarea,
body.whs-open-ticket-page .md-editor .md-input {
    min-height:260px !important;
    border:0 !important;
    border-radius:0 !important;
    background:#081225 !important;
    box-shadow:none !important;
}
body.whs-open-ticket-page .md-editor .md-footer,
body.whs-open-ticket-page .md-editor .md-controls {
    border:0 !important;
    border-top:1px solid rgba(142,154,212,.12) !important;
    color:#7f8dab !important;
    background:#0a1428 !important;
}
body.whs-open-ticket-page .md-editor .md-preview {
    color:#dfe5f6 !important;
    background:#081225 !important;
}

/* Attachments */
body.whs-open-ticket-page .whs-attachment-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    align-items:start;
}
body.whs-open-ticket-page .whs-file-input-wrap { min-width:0; }
body.whs-open-ticket-page input[type="file"] {
    height:auto !important;
    min-height:50px !important;
    padding:7px 9px !important;
    color:#aab5cf !important;
    -webkit-text-fill-color:#aab5cf !important;
}
body.whs-open-ticket-page input[type="file"]::file-selector-button {
    margin:-1px 10px -1px -1px;
    padding:9px 13px;
    border:1px solid rgba(169,145,255,.30);
    border-radius:9px;
    color:#fff;
    background:linear-gradient(135deg,#6756e9,#a34bd8);
    font-weight:700;
}
body.whs-open-ticket-page .whs-add-attachment {
    min-height:50px;
    padding:11px 15px;
    border:1px solid rgba(142,154,212,.23) !important;
    border-radius:12px !important;
    color:#e7ebf7 !important;
    background:#111c33 !important;
    font-weight:700;
}
body.whs-open-ticket-page .ticket-attachments-message {
    margin-top:9px;
    color:#8492b0 !important;
    font-size:12px;
    line-height:1.5;
}
body.whs-open-ticket-page #fileUploadsContainer .form-control { margin-top:10px; }

/* Custom fields are dynamically replaced when the department changes. */
body.whs-open-ticket-page .whs-custom-fields-card { margin-top:0; }
body.whs-open-ticket-page .help-block {
    margin:7px 0 0;
    color:#8996b3 !important;
    font-size:12px;
    line-height:1.5;
}

/* KB auto suggestions */
body.whs-open-ticket-page #autoAnswerSuggestions.well:not(.hidden) {
    display:block;
    margin:0 0 18px !important;
    padding:0 !important;
    border:1px solid rgba(142,154,212,.17) !important;
    border-radius:20px !important;
    color:#dfe5f6;
    background:linear-gradient(145deg,#11192f,#0c1427) !important;
    box-shadow:0 16px 36px rgba(0,0,0,.12) !important;
}
body.whs-open-ticket-page .whs-kb-suggestions { overflow:hidden; }
body.whs-open-ticket-page .whs-kb-suggestions-heading {
    display:flex;
    gap:13px;
    align-items:center;
    padding:18px 20px;
    border-bottom:1px solid rgba(142,154,212,.11);
}
body.whs-open-ticket-page .whs-kb-suggestions-heading h3 {
    margin:0;
    color:#f5f7ff;
    font-size:17px;
    font-weight:800;
}
body.whs-open-ticket-page .whs-kb-suggestions-heading p {
    margin:3px 0 0;
    color:#929fbd;
    font-size:13px;
}
body.whs-open-ticket-page .whs-kb-articles { display:grid; gap:9px; padding:16px 18px 18px; }
body.whs-open-ticket-page .whs-kb-article {
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:12px 13px;
    border:1px solid rgba(142,154,212,.13);
    border-radius:12px;
    color:#dfe5f6 !important;
    background:#0b1528;
    text-decoration:none !important;
}
body.whs-open-ticket-page .whs-kb-article-icon { color:#b9aaff; }
body.whs-open-ticket-page .whs-kb-article-copy { display:flex; flex-direction:column; min-width:0; }
body.whs-open-ticket-page .whs-kb-article-copy strong { color:#f0f3fc; font-size:14px; }
body.whs-open-ticket-page .whs-kb-article-copy span { margin-top:3px; color:#8f9db9; font-size:12px; line-height:1.45; }
body.whs-open-ticket-page .whs-kb-article-arrow { color:#73819f; font-size:11px; }

/* CAPTCHA: preserve provider iframe/widget itself. */
body.whs-open-ticket-page .whs-ticket-captcha-card { padding:18px 20px 20px; }
body.whs-open-ticket-page .whs-ticket-captcha-copy {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}
body.whs-open-ticket-page .whs-ticket-captcha-copy strong {
    display:block;
    color:#f5f7ff;
    font-size:16px;
}
body.whs-open-ticket-page .whs-ticket-captcha-copy span:not(.whs-ticket-captcha-icon) {
    display:block;
    margin-top:3px;
    color:#929fbd;
    font-size:13px;
    line-height:1.45;
}
body.whs-open-ticket-page .whs-ticket-captcha {
    overflow-x:auto;
    text-align:center;
    -webkit-overflow-scrolling:touch;
}
body.whs-open-ticket-page .whs-ticket-captcha > * { margin-left:auto !important; margin-right:auto !important; }

/* Actions */
body.whs-open-ticket-page .whs-ticket-actions {
    display:grid;
    grid-template-columns:minmax(0,1fr) 140px;
    gap:10px;
    margin:0 0 18px;
}
body.whs-open-ticket-page .whs-ticket-actions .btn,
body.whs-open-ticket-page .whs-ticket-actions input.btn {
    width:100%;
    min-height:50px;
    padding:12px 18px;
    border-radius:12px !important;
    font-size:15px;
    line-height:1.4;
    font-weight:800;
    box-shadow:none !important;
}
body.whs-open-ticket-page .whs-ticket-actions .btn-primary,
body.whs-open-ticket-page .whs-ticket-continue {
    border:1px solid rgba(175,145,255,.42) !important;
    color:#fff !important;
    background:linear-gradient(135deg,#6756e9 0%,#a54bd8 100%) !important;
    box-shadow:0 10px 24px rgba(112,75,222,.18) !important;
}
body.whs-open-ticket-page .whs-ticket-actions .btn-default {
    border:1px solid rgba(142,154,212,.24) !important;
    color:#e1e6f4 !important;
    background:#111c33 !important;
}

/* Department selection fallback page */
body.whs-open-ticket-page .whs-department-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
body.whs-open-ticket-page .whs-department-card {
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    gap:11px;
    align-items:center;
    padding:15px;
    border:1px solid rgba(142,154,212,.15);
    border-radius:13px;
    color:#dfe5f6 !important;
    background:#0b1528;
    text-decoration:none !important;
}
body.whs-open-ticket-page .whs-department-card:hover { border-color:rgba(169,145,255,.35); background:#101b31; }
body.whs-open-ticket-page .whs-department-icon { color:#bcaeff; font-size:17px; text-align:center; }
body.whs-open-ticket-page .whs-department-copy { display:flex; flex-direction:column; min-width:0; }
body.whs-open-ticket-page .whs-department-copy strong { color:#f2f4fc; font-size:15px; }
body.whs-open-ticket-page .whs-department-copy span { margin-top:4px; color:#8f9db9; font-size:12px; line-height:1.45; }
body.whs-open-ticket-page .whs-department-card > .fa-chevron-right { color:#677591; font-size:10px; }
body.whs-open-ticket-page .whs-department-empty { grid-column:1/-1; }

/* Confirmation */
body.whs-open-ticket-page .whs-ticket-confirm-card {
    padding:40px 28px;
    text-align:center;
}
body.whs-open-ticket-page .whs-ticket-confirm-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:70px;
    height:70px;
    margin:0 auto 18px;
    border:1px solid rgba(130,225,172,.30);
    border-radius:22px;
    color:#9af0bf;
    background:rgba(42,154,94,.12);
    font-size:27px;
}
body.whs-open-ticket-page .whs-ticket-confirm-eyebrow {
    display:block;
    color:#aeb7ff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.18em;
}
body.whs-open-ticket-page .whs-ticket-confirm-card h2 {
    margin:8px 0 4px;
    color:#f7f9ff;
    font-size:24px;
    font-weight:800;
}
body.whs-open-ticket-page .whs-ticket-number {
    display:inline-flex;
    margin:8px 0 12px;
    padding:7px 12px;
    border:1px solid rgba(169,145,255,.24);
    border-radius:999px;
    color:#d4c9ff !important;
    background:#141d39;
    font-weight:800;
    text-decoration:none !important;
}
body.whs-open-ticket-page .whs-ticket-confirm-card p {
    max-width:620px;
    margin:0 auto 22px;
    color:#9ba8c3;
    font-size:14px;
    line-height:1.65;
}
body.whs-open-ticket-page .whs-ticket-continue {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-width:190px;
    min-height:50px;
    padding:12px 20px;
    border-radius:12px !important;
    font-weight:800;
}

@media (max-width:767px) {
    body.whs-open-ticket-page #main-body { padding-top:14px; }
    body.whs-open-ticket-page .header-lined {
        padding:18px 20px 17px !important;
        border-radius:18px !important;
    }
    body.whs-open-ticket-page .header-lined h1 { font-size:29px !important; }
    body.whs-open-ticket-page .whs-ticket-form-card,
    body.whs-open-ticket-page .whs-ticket-captcha-card,
    body.whs-open-ticket-page .whs-ticket-confirm-card { border-radius:18px; }
    body.whs-open-ticket-page .whs-ticket-form-heading { padding:18px 18px 15px; }
    body.whs-open-ticket-page .whs-ticket-form-body { padding:18px; }
    body.whs-open-ticket-page .whs-ticket-grid-two { grid-template-columns:1fr; }
    body.whs-open-ticket-page .whs-ticket-span-two { grid-column:auto; }
    body.whs-open-ticket-page .whs-attachment-row { grid-template-columns:1fr; }
    body.whs-open-ticket-page .whs-add-attachment { width:100%; }
    body.whs-open-ticket-page .md-editor textarea,
    body.whs-open-ticket-page .md-editor .md-input { min-height:230px !important; }
    body.whs-open-ticket-page .whs-department-grid { grid-template-columns:1fr; }
}

@media (max-width:480px) {
    body.whs-open-ticket-page .header-lined { padding-left:18px !important; padding-right:18px !important; }
    body.whs-open-ticket-page .header-lined h1 { font-size:27px !important; }
    body.whs-open-ticket-page .whs-ticket-form-heading { align-items:flex-start; }
    body.whs-open-ticket-page .whs-ticket-form-heading h2 { font-size:17px; }
    body.whs-open-ticket-page .whs-ticket-actions { grid-template-columns:minmax(0,1fr) 118px; }
    body.whs-open-ticket-page .whs-ticket-actions .btn,
    body.whs-open-ticket-page .whs-ticket-actions input.btn { padding-left:12px; padding-right:12px; }
    body.whs-open-ticket-page .whs-ticket-captcha-card { padding:17px 16px 18px; }
    body.whs-open-ticket-page .whs-ticket-confirm-card { padding:34px 20px; }
}