/* ===============================
   The Sims Catalog HESK Styling
   Clean customer-side override
   =============================== */

:root {
    --tsc-navy: #141623;
    --tsc-pink: #d83f91;
    --tsc-purple: #8f63df;
    --tsc-text: #24304a;
    --tsc-muted: #6f7280;
    --tsc-border: #ece7f2;
    --tsc-bg: #ffffff;
    --tsc-soft-bg: #faf8fc;
    --tsc-shadow: 0 8px 24px rgba(40, 30, 65, 0.10);
    --tsc-radius: 18px;
}

/* Prevent previous layout breakage */
html,
body,
.wrapper,
.main {
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    background: #ffffff !important;
}

/* Main page background - removes HESK light blue */
.main__content {
    background: linear-gradient(90deg, #f4f0fb 0%, #ffffff 52%, #fdf0f5 100%) !important;
    padding: 38px 0 64px !important;
}

/* Main content width */
.contr {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Header bar */
.header {
    background: var(--tsc-navy) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.header__inner {
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
}

.header__logo {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Breadcrumb area */
.breadcrumbs {
    background: #ffffff !important;
    border-bottom: 1px solid #f0edf4 !important;
}

.breadcrumbs__inner {
    padding: 14px 0 !important;
    color: var(--tsc-muted) !important;
}

.breadcrumbs a,
.breadcrumbs .last {
    color: var(--tsc-text) !important;
    font-size: 13px !important;
}

.breadcrumbs a:hover {
    color: var(--tsc-pink) !important;
}

/* Hero title */
.search__title {
    color: var(--tsc-text) !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin: 0 0 30px !important;
}

/* Top action cards */
.nav {
    display: flex !important;
    justify-content: center !important;
    gap: 24px !important;
    margin-bottom: 56px !important;
}

.navlink {
    width: 360px !important;
    min-height: 86px !important;
    background: #ffffff !important;
    border: 1px solid var(--tsc-border) !important;
    border-radius: var(--tsc-radius) !important;
    box-shadow: var(--tsc-shadow) !important;
    padding: 20px 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.navlink:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(40, 30, 65, 0.14) !important;
}

.navlink__title {
    color: var(--tsc-text) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;
}

.navlink__descr {
    color: var(--tsc-muted) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

/* Icons */
.icon-in-circle {
    background: linear-gradient(135deg, var(--tsc-purple), var(--tsc-pink)) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(216, 63, 145, 0.22) !important;
}

/* Knowledgebase card */
.article {
    background: #ffffff !important;
    border: 1px solid var(--tsc-border) !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 34px rgba(40, 30, 65, 0.10) !important;
    overflow: hidden !important;
    margin: 0 auto 32px !important;
    max-width: 980px !important;
}

/* Knowledgebase heading */
.article__heading {
    padding: 28px 30px 18px !important;
    margin: 0 !important;
    text-align: center !important;
}

.article__heading a {
    color: var(--tsc-text) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}

/* Tabs */
.tabbed__head {
    border-bottom: 1px solid var(--tsc-border) !important;
    background: #ffffff !important;
}

.tabbed__head_tabs {
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tabbed__head_tabs li {
    background: #ffffff !important;
    color: var(--tsc-text) !important;
    border: 1px solid var(--tsc-border) !important;
    border-bottom: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 13px 34px !important;
    font-weight: 700 !important;
}

.tabbed__head_tabs li.current {
    color: var(--tsc-pink) !important;
}

/* Article preview */
.preview {
    background: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid var(--tsc-border) !important;
    padding: 28px 34px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 18px !important;
    text-decoration: none !important;
}

.preview:hover {
    background: #fffafd !important;
}

.preview__title {
    color: var(--tsc-text) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
}

.preview p {
    color: var(--tsc-muted) !important;
}

.lightgrey {
    color: #9a9ca6 !important;
}

/* Footer area inside article */
.article__footer {
    text-align: center !important;
    padding: 26px 20px !important;
}

/* Main CTA button */
.btn,
.btn--blue-border {
    background: linear-gradient(135deg, var(--tsc-purple), var(--tsc-pink)) !important;
    border: none !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 14px 28px !important;
    box-shadow: 0 8px 20px rgba(216, 63, 145, 0.24) !important;
    text-decoration: none !important;
}

.btn:hover,
.btn--blue-border:hover {
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Standard links */
.link,
a.link {
    color: var(--tsc-text) !important;
    text-decoration: underline !important;
}

.link:hover,
a.link:hover {
    color: var(--tsc-pink) !important;
}

/* Footer */
.footer {
    background: #ffffff !important;
    border-top: 1px solid #f0edf4 !important;
    color: var(--tsc-muted) !important;
    padding: 28px 0 !important;
}

.footer a {
    color: var(--tsc-pink) !important;
}

/* Responsive */
@media (max-width: 800px) {
    .nav {
        flex-direction: column !important;
        align-items: center !important;
    }

    .navlink {
        width: 100% !important;
        max-width: 420px !important;
    }

    .search__title {
        font-size: 26px !important;
    }

    .main__content {
        padding-top: 28px !important;
    }
}

/* ===============================
   Submit Ticket Form Styling
   =============================== */

html.page-create-ticket .main__content {
    background: linear-gradient(90deg, #f4f0fb 0%, #ffffff 52%, #fdf0f5 100%) !important;
    padding: 46px 0 70px !important;
}

/* Page title */
html.page-create-ticket .article__heading--form {
    max-width: 860px !important;
    margin: 0 auto 4px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: var(--tsc-text) !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

html.page-create-ticket .article-heading-tip {
    text-align: center !important;
    margin-bottom: 28px !important;
    color: var(--tsc-muted) !important;
    font-size: 14px !important;
}

/* Main form card */
html.page-create-ticket .form-submit-ticket {
    max-width: 820px !important;
    margin: 0 auto !important;
    padding: 34px 38px 40px !important;
    background: #ffffff !important;
    border: 1px solid var(--tsc-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 34px rgba(40, 30, 65, 0.10) !important;
}

/* Form groups */
html.page-create-ticket .form-group,
html.page-create-ticket .param {
    margin-bottom: 24px !important;
}

html.page-create-ticket .label,
html.page-create-ticket label {
    color: var(--tsc-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

html.page-create-ticket .required::after {
    color: var(--tsc-pink) !important;
}

/* Inputs */
html.page-create-ticket .form-control,
html.page-create-ticket input[type="text"],
html.page-create-ticket input[type="email"],
html.page-create-ticket textarea,
html.page-create-ticket select {
    width: 100% !important;
    max-width: 100% !important;
    background: #fbf9fd !important;
    border: 1px solid #e5ddec !important;
    border-radius: 14px !important;
    color: var(--tsc-text) !important;
    font-size: 15px !important;
    padding: 13px 15px !important;
    box-shadow: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

html.page-create-ticket textarea.form-control {
    min-height: 210px !important;
    resize: vertical !important;
}

html.page-create-ticket .form-control:focus,
html.page-create-ticket input:focus,
html.page-create-ticket textarea:focus,
html.page-create-ticket select:focus {
    background: #ffffff !important;
    border-color: var(--tsc-pink) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(216, 63, 145, 0.12) !important;
}

/* Priority dropdown */
html.page-create-ticket .param {
    display: block !important;
}

html.page-create-ticket .dropdown-select {
    width: 180px !important;
    max-width: 100% !important;
}

html.page-create-ticket .dropdown-select > .label {
    height: auto !important;
    min-height: 44px !important;
    background: #fbf9fd !important;
    border: 1px solid #e5ddec !important;
    border-radius: 14px !important;
    padding: 11px 14px !important;
    color: var(--tsc-text) !important;
    box-shadow: none !important;
}

html.page-create-ticket .dropdown-select .dropdown-list {
    border: 1px solid var(--tsc-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--tsc-shadow) !important;
    overflow: hidden !important;
}

html.page-create-ticket .dropdown-select .dropdown-list li {
    padding: 12px 14px !important;
    color: var(--tsc-text) !important;
}

html.page-create-ticket .dropdown-select .dropdown-list li:hover,
html.page-create-ticket .dropdown-select .dropdown-list li.selected {
    background: #fff4fa !important;
    color: var(--tsc-pink) !important;
}

/* Divider */
html.page-create-ticket .divider {
    border-top: 1px solid var(--tsc-border) !important;
    margin: 30px 0 !important;
}

/* Knowledgebase suggestions */
html.page-create-ticket .kb-suggestions {
    margin-top: 18px !important;
    padding: 18px !important;
    background: #fbf9fd !important;
    border: 1px solid var(--tsc-border) !important;
    border-radius: 18px !important;
}

html.page-create-ticket .kb-suggestions h2 {
    color: var(--tsc-text) !important;
    font-size: 17px !important;
    margin: 0 0 12px !important;
}

/* Captcha block */
html.page-create-ticket .captcha-block {
    max-width: 460px !important;
    margin: 10px auto 0 !important;
    padding: 24px !important;
    background: #fbf9fd !important;
    border: 1px solid var(--tsc-border) !important;
    border-radius: 20px !important;
    text-align: center !important;
}

html.page-create-ticket .captcha-block h2 {
    color: var(--tsc-text) !important;
    font-size: 17px !important;
    margin: 0 0 14px !important;
}

html.page-create-ticket .captcha-block .form-group {
    margin-bottom: 0 !important;
}

html.page-create-ticket .captcha-block img {
    display: inline-block !important;
    margin: 0 8px 14px 0 !important;
    border-radius: 8px !important;
    vertical-align: middle !important;
}

/* Fix refresh button being oversized */
html.page-create-ticket .btn-refresh {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    vertical-align: middle !important;
}

html.page-create-ticket .btn-refresh svg {
    width: 16px !important;
    height: 16px !important;
}

html.page-create-ticket .captcha-block label {
    text-align: center !important;
    font-weight: 600 !important;
    color: var(--tsc-muted) !important;
    margin: 6px 0 10px !important;
}

html.page-create-ticket #mysecnum {
    max-width: 280px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Form footer */
html.page-create-ticket .form-footer {
    text-align: center !important;
    padding-top: 6px !important;
}

html.page-create-ticket .btn-full {
    width: auto !important;
    min-width: 240px !important;
    border-radius: 999px !important;
    padding: 15px 36px !important;
    font-size: 15px !important;
}

/* Loading overlay */
html.page-create-ticket .loading-message {
    border-radius: 20px !important;
    border: 1px solid var(--tsc-border) !important;
    box-shadow: var(--tsc-shadow) !important;
}

/* Mobile */
@media (max-width: 800px) {
    html.page-create-ticket .form-submit-ticket {
        padding: 26px 20px 30px !important;
        border-radius: 20px !important;
    }

    html.page-create-ticket .article__heading--form {
        font-size: 24px !important;
        flex-direction: column !important;
    }

    html.page-create-ticket .captcha-block {
        padding: 20px !important;
    }
}

/* Fix submit page title + required note overlap */
html.page-create-ticket .article__heading--form {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 auto 8px !important;
    line-height: 1.2 !important;
}

html.page-create-ticket .article-heading-tip {
    position: static !important;
    transform: none !important;
    clear: both !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 auto 34px !important;
    padding: 0 !important;
    color: var(--tsc-muted) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

/* Make the required star in the intro sit inline */
html.page-create-ticket .article-heading-tip .label.required {
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.page-create-ticket .article-heading-tip .label.required::after {
    content: "*" !important;
    position: static !important;
    display: inline !important;
    margin-left: 2px !important;
    color: var(--tsc-pink) !important;
    font-weight: 700 !important;
}

/* ===============================
   View Existing Ticket Page
   =============================== */

html.page-form .main__content {
    background: linear-gradient(90deg, #f4f0fb 0%, #ffffff 52%, #fdf0f5 100%) !important;
    padding: 54px 0 76px !important;
}

/* Page title */
html.page-form .article__heading--form {
    max-width: 720px !important;
    margin: 0 auto 28px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: var(--tsc-text) !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

html.page-form .article__heading--form .ml-1 {
    margin-left: 0 !important;
}

/* Main card */
html.page-form .form-submit-ticket {
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 34px 38px 38px !important;
    background: #ffffff !important;
    border: 1px solid var(--tsc-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 34px rgba(40, 30, 65, 0.10) !important;
}

/* Stop HESK from making this unnecessarily wide */
html.page-form .form-groups.centered {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Form fields */
html.page-form .form-group {
    margin-bottom: 24px !important;
}

html.page-form .label,
html.page-form label {
    color: var(--tsc-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Required stars beside labels */
html.page-form .form-group.required > .label::after,
html.page-form .form-group.required > label::after {
    content: "*" !important;
    position: static !important;
    display: inline !important;
    margin-left: 2px !important;
    color: var(--tsc-pink) !important;
    font-weight: 700 !important;
}

/* Inputs */
html.page-form .form-control,
html.page-form input[type="text"],
html.page-form input[type="email"] {
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    background: #fbf9fd !important;
    border: 1px solid #e5ddec !important;
    border-radius: 14px !important;
    color: var(--tsc-text) !important;
    font-size: 15px !important;
    padding: 12px 15px !important;
    box-shadow: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

html.page-form .form-control:focus,
html.page-form input:focus {
    background: #ffffff !important;
    border-color: var(--tsc-pink) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(216, 63, 145, 0.12) !important;
}

/* Error text */
html.page-form .form-control__error {
    margin-top: 7px !important;
    color: var(--tsc-pink) !important;
    font-size: 13px !important;
}

/* Checkbox */
html.page-form .checkbox-custom {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

html.page-form .checkbox-custom input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--tsc-pink) !important;
}

html.page-form .checkbox-custom label {
    margin: 0 !important;
    color: var(--tsc-muted) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Button area */
html.page-form .form-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 22px !important;
    padding-top: 6px !important;
    text-align: center !important;
}

html.page-form .btn-full {
    width: auto !important;
    min-width: 240px !important;
    border-radius: 999px !important;
    padding: 15px 36px !important;
    font-size: 15px !important;
}

html.page-form .form-footer .link {
    color: var(--tsc-text) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

html.page-form .form-footer .link:hover {
    color: var(--tsc-pink) !important;
}

/* Forgot tracking ID modal */
html.page-form .modal {
    border-radius: 24px !important;
    border: 1px solid var(--tsc-border) !important;
    box-shadow: 0 18px 50px rgba(40, 30, 65, 0.18) !important;
    padding: 30px !important;
    max-width: 540px !important;
}

html.page-form .modal b {
    color: var(--tsc-text) !important;
}

html.page-form .modal .form {
    margin-top: 22px !important;
}

html.page-form .modal .form-control {
    height: 48px !important;
    background: #fbf9fd !important;
    border: 1px solid #e5ddec !important;
    border-radius: 14px !important;
}

/* Radio buttons in modal */
html.page-form .radio-custom {
    margin-bottom: 12px !important;
}

html.page-form .radio-custom input[type="radio"] {
    accent-color: var(--tsc-pink) !important;
}

html.page-form .radio-custom label {
    color: var(--tsc-muted) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Captcha inside forgot modal */
html.page-form .captcha-remind {
    margin: 20px 0 !important;
    padding: 20px !important;
    background: #fbf9fd !important;
    border: 1px solid var(--tsc-border) !important;
    border-radius: 18px !important;
    text-align: center !important;
}

html.page-form .captcha-remind img {
    display: inline-block !important;
    margin: 0 8px 14px 0 !important;
    border-radius: 8px !important;
    vertical-align: middle !important;
}

html.page-form .captcha-remind label {
    text-align: center !important;
    color: var(--tsc-muted) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 8px 0 10px !important;
}

html.page-form .captcha-remind #mysecnum {
    max-width: 260px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Refresh button in modal captcha */
html.page-form .btn-refresh {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    vertical-align: middle !important;
}

html.page-form .btn-refresh svg {
    width: 16px !important;
    height: 16px !important;
}

/* Mobile */
@media (max-width: 800px) {
    html.page-form .main__content {
        padding: 36px 0 56px !important;
    }

    html.page-form .article__heading--form {
        font-size: 24px !important;
        flex-direction: column !important;
        margin-bottom: 22px !important;
    }

    html.page-form .form-submit-ticket {
        padding: 26px 20px 30px !important;
        border-radius: 20px !important;
    }

    html.page-form .btn-full {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ===============================
   Individual Ticket Page
   =============================== */

html.page-view-ticket .main__content {
    background: linear-gradient(90deg, #f4f0fb 0%, #ffffff 52%, #fdf0f5 100%) !important;
    padding: 46px 0 70px !important;
}

/* Main ticket layout */
html.page-view-ticket .ticket {
    max-width: 1180px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 28px !important;
    align-items: start !important;
}

/* Left column */
html.page-view-ticket .ticket__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

/* Message cards */
html.page-view-ticket .ticket__body_block {
    background: #ffffff !important;
    border: 1px solid var(--tsc-border) !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 34px rgba(40, 30, 65, 0.10) !important;
    padding: 28px 32px !important;
    overflow: hidden !important;
}

/* Original message */
html.page-view-ticket .ticket__body_block.original-message {
    border-left: 5px solid var(--tsc-purple) !important;
}

/* Staff response */
html.page-view-ticket .ticket__body_block.response {
    background: #fbfffd !important;
    border-left: 5px solid #67c58c !important;
}

/* Ticket title */
html.page-view-ticket .ticket__body_block h1 {
    color: var(--tsc-text) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 0 22px !important;
}

/* Message header */
html.page-view-ticket .block--head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
    color: var(--tsc-muted) !important;
    font-size: 14px !important;
}

html.page-view-ticket .contact,
html.page-view-ticket .requester,
html.page-view-ticket .requester-header {
    color: var(--tsc-muted) !important;
}

html.page-view-ticket .contact b {
    color: var(--tsc-text) !important;
}

/* Customer dropdown */
html.page-view-ticket .dropdown.customer label {
    background: #fbf9fd !important;
    border: 1px solid var(--tsc-border) !important;
    border-radius: 999px !important;
    padding: 6px 10px !important;
    color: var(--tsc-text) !important;
}

/* Main text */
html.page-view-ticket .block--description {
    color: var(--tsc-text) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

html.page-view-ticket .block--description p {
    margin-bottom: 0 !important;
}

/* Custom field line */
html.page-view-ticket .custom-field-title {
    color: var(--tsc-muted) !important;
    font-weight: 700 !important;
}

/* Links */
html.page-view-ticket a {
    color: var(--tsc-pink) !important;
}

html.page-view-ticket a:hover {
    color: var(--tsc-purple) !important;
}

/* Print/action buttons */
html.page-view-ticket .btn-action {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--tsc-purple), var(--tsc-pink)) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(216, 63, 145, 0.22) !important;
}

html.page-view-ticket .btn-action svg {
    width: 17px !important;
    height: 17px !important;
}

/* Helpful rating footer */
html.page-view-ticket .ticket__block-footer {
    margin-top: 22px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--tsc-border) !important;
    color: var(--tsc-muted) !important;
    text-align: right !important;
}

/* Reply form heading */
html.page-view-ticket .text-bold {
    color: var(--tsc-text) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* Reply form */
html.page-view-ticket .form--reply .form-group {
    margin-bottom: 24px !important;
}

html.page-view-ticket .form--reply label,
html.page-view-ticket .form--reply .label {
    color: var(--tsc-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Required star beside label */
html.page-view-ticket .form--reply .form-group.required > .label::after,
html.page-view-ticket .form--reply .form-group.required > label::after {
    content: "*" !important;
    position: static !important;
    display: inline !important;
    margin-left: 2px !important;
    color: var(--tsc-pink) !important;
    font-weight: 700 !important;
}

/* Reply textarea */
html.page-view-ticket .form--reply textarea.form-control {
    width: 100% !important;
    min-height: 210px !important;
    background: #fbf9fd !important;
    border: 1px solid #e5ddec !important;
    border-radius: 16px !important;
    color: var(--tsc-text) !important;
    font-size: 15px !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
    resize: vertical !important;
}

html.page-view-ticket .form--reply textarea.form-control:focus {
    background: #ffffff !important;
    border-color: var(--tsc-pink) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(216, 63, 145, 0.12) !important;
}

/* Reply submit area */
html.page-view-ticket .form__submit {
    text-align: center !important;
}

html.page-view-ticket .btn-full {
    width: auto !important;
    min-width: 220px !important;
    border-radius: 999px !important;
    padding: 15px 36px !important;
    font-size: 15px !important;
}

/* Right ticket details card */
html.page-view-ticket .ticket__params {
    position: sticky !important;
    top: 20px !important;
}

html.page-view-ticket .params--block {
    background: #ffffff !important;
    border: 1px solid var(--tsc-border) !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 34px rgba(40, 30, 65, 0.10) !important;
    padding: 22px !important;
    overflow: hidden !important;
}

/* Ticket details heading */
html.page-view-ticket .accordion-title {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
    color: var(--tsc-text) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

html.page-view-ticket .accordion-title > span {
    color: var(--tsc-text) !important;
}

/* Refresh button */
html.page-view-ticket .accordion-title .btn.link {
    background: linear-gradient(135deg, var(--tsc-purple), var(--tsc-pink)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 9px 15px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(216, 63, 145, 0.22) !important;
}

html.page-view-ticket .accordion-title .btn.link svg {
    width: 14px !important;
    height: 14px !important;
}

/* Hide desktop accordion toggle if not needed */
html.page-view-ticket .btn-toggler {
    display: none !important;
}

/* Details rows */
html.page-view-ticket .ticket__params .row {
    display: grid !important;
    grid-template-columns: 105px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid var(--tsc-border) !important;
    margin: 0 !important;
}

html.page-view-ticket .ticket__params .row:last-child {
    border-bottom: none !important;
}

html.page-view-ticket .ticket__params .title {
    color: var(--tsc-muted) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

html.page-view-ticket .ticket__params .value {
    color: var(--tsc-text) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

/* Status / priority */
html.page-view-ticket .replied {
    color: var(--tsc-purple) !important;
    font-weight: 700 !important;
}

html.page-view-ticket .priority {
    display: flex !important;
    align-items: center !important;
}

/* Loading overlay */
html.page-view-ticket .loading-message {
    border-radius: 20px !important;
    border: 1px solid var(--tsc-border) !important;
    box-shadow: var(--tsc-shadow) !important;
}

/* Mobile */
@media (max-width: 900px) {
    html.page-view-ticket .ticket {
        display: flex !important;
        flex-direction: column !important;
    }

    html.page-view-ticket .ticket__params {
        position: static !important;
        width: 100% !important;
        order: -1 !important;
    }

    html.page-view-ticket .ticket__body_block,
    html.page-view-ticket .params--block {
        border-radius: 20px !important;
        padding: 24px 20px !important;
    }

    html.page-view-ticket .block--head {
        align-items: flex-start !important;
    }

    html.page-view-ticket .ticket__params .row {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    html.page-view-ticket .btn-full {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ===============================
   Ticket page fixes
   =============================== */

/* 1) Header title back to white */
html.page-view-ticket .header__logo {
    color: #ffffff !important;
}

/* Optional: keep breadcrumbs normal instead of pink */
html.page-view-ticket .breadcrumbs a,
html.page-view-ticket .breadcrumbs .last {
    color: var(--tsc-text) !important;
}

html.page-view-ticket .breadcrumbs a:hover {
    color: var(--tsc-pink) !important;
}

/* 2) Print button icon clearer */
html.page-view-ticket .btn-action,
html.page-view-ticket .btn-action svg,
html.page-view-ticket .btn-action .icon {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}

/* 3) Refresh button no longer overlaps ticket details */
html.page-view-ticket .accordion-title {
    display: block !important;
    margin-bottom: 18px !important;
}

html.page-view-ticket .accordion-title > span {
    display: block !important;
    margin-bottom: 14px !important;
}

html.page-view-ticket .accordion-title .btn.link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 8px !important;
    position: relative !important;
    z-index: 2 !important;
}

html.page-view-ticket .accordion-body {
    clear: both !important;
}

html.page-view-ticket .ticket__params .row:first-child {
    padding-top: 8px !important;
}

.ticket__params .params--block .accordion-body {
    padding-top: 30px;
}