/* ============================================================
   DIGITAL FRACTURE — Hesk Customer Portal Theme (Light)
   Matches main site light theme
   Overrides Hesk 3.7.5 CSS variables + modern_light theme
   ============================================================ */

/* --- Override Hesk theme variables -------------------------- */
:root {
    --primary: #1a1a2e !important;
    --secondary: #555570 !important;
    --tertiary: #6c5ce7 !important;
    --surface: #ffffff !important;
    --foreground: #1a1a2e !important;
    --main-background: #f5f5f7 !important;

    --font__pri-clr: #1a1a2e !important;
    --font__sec-clr: #555570 !important;

    --white-1: #ffffff !important;
    --white-2: #f5f5f7 !important;
    --white-3: #f0f0f4 !important;
    --white-4: #e6e6ec !important;
    --white-5: #e6e6ec !important;
    --white-6: #f0f0f4 !important;
    --white-7: rgba(0, 0, 0, 0.08) !important;
    --white-8: rgba(0, 0, 0, 0.12) !important;
    --white-9: #555570 !important;
    --gray-1: #8888a0 !important;
    --gray-2: rgba(0, 0, 0, 0.06) !important;
    --gray-3: #8888a0 !important;
    --gray-4: #555570 !important;
    --gray-5: #1a1a2e !important;
    --gray-6: #1a1a2e !important;
    --gray-7: #1a1a2e !important;

    --header__bg: #ffffff !important;
    --header_logo__clr: #1a1a2e !important;
    --header_nav__clr: #6c5ce7 !important;
    --header_nav__hover_clr: #5b4cdb !important;
    --header_border__clr: rgba(0, 0, 0, 0.08) !important;

    --icon_circle__clr: #ffffff !important;
    --icon_circle__bg: #6c5ce7 !important;

    --navlink__bg: #ffffff !important;
    --navlink__clr: #555570 !important;
    --navlink__hover-bg: #f0f0f4 !important;
    --navlink__title-clr: #6c5ce7 !important;

    --notification__clr: #1a1a2e !important;

    --input-bg: #f5f5f7 !important;
    --input-clr: #1a1a2e !important;

    --radio__bg: #ffffff !important;
    --radio__fill-clr: #5b4cdb !important;
    --radio__hover-bg: rgba(91, 76, 219, 0.08) !important;
    --checkbox__bg: #ffffff !important;
    --checkbox__hover-bg: rgba(91, 76, 219, 0.08) !important;

    --link__pri-clr: #6c5ce7 !important;
    --link__pri-hover-clr: #5b4cdb !important;
    --link__sec-clr: #6c5ce7 !important;
    --link__sec-hover-clr: #5b4cdb !important;
    --footer__link-clr: #555570 !important;

    --ticket_body__bg: #ffffff !important;
    --ticket_response__bg: #f5f5f7 !important;

    --preview__clr: #555570 !important;
    --preview__bg: #ffffff !important;
    --preview__border-clr: rgba(0, 0, 0, 0.08) !important;
    --preview__hover-bg: #f0f0f4 !important;
    --preview__title-clr: #5b4cdb !important;

    --table_row__bg: #f5f5f7 !important;
    --table_row__bg-even: #ffffff !important;
    --table_row__bg-hover: rgba(91, 76, 219, 0.05) !important;

    --breadcrumbs__a-clr: #6c5ce7 !important;
    --breadcrumbs__a-hover-clr: #5b4cdb !important;

    --search__clr: #1a1a2e !important;
    --search__bg: #f0f0f4 !important;
    --search__title-clr: #1a1a2e !important;
    --search__input-placeholder-clr: #8888a0 !important;
    --search__icon-fill: #6c5ce7 !important;
    --search__input-bg: #ffffff !important;

    --modal_body__bg: #ffffff !important;

    --btn__bg-clr-pri: #6c5ce7 !important;
    --btn__clr-pri: #ffffff !important;
    --btn__border-clr-pri: #6c5ce7 !important;
    --btn_full_bg: #6c5ce7 !important;
    --btn_full_clr: #ffffff !important;
    --btn__disabled-bg-clr: #e6e6ec !important;
    --btn__disabled-clr: #8888a0 !important;
    --btn_full__hover_bg: #5b4cdb !important;

    /* Dropdowns - all subtle, no purple backgrounds */
    --dropdown__bg: #ffffff !important;
    --dropdown__clr: #1a1a2e !important;
    --dropdown__border-clr: transparent !important;
    --dropdown__hover-bg: transparent !important;
    --dropdown__hover-clr: #1a1a2e !important;
    --dropdown__hover-border-clr: transparent !important;
    --dropdown_input__border-clr: rgba(0, 0, 0, 0.12) !important;
    --dropdown_input__hover-border-clr: rgba(0, 0, 0, 0.12) !important;
    --dropdown_input__hover-bg-clr: #ffffff !important;
    --dropdown_input__hover-clr: #1a1a2e !important;
    --dropdown_input__active-border--clr: rgba(0, 0, 0, 0.12) !important;
    --dropdown_input__full-bg-clr: #ffffff !important;
    --dropdown_label__clr: #1a1a2e !important;
    --dropdown_label__border-clr: transparent !important;
    --dropdown_list__bg: #ffffff !important;
    --dropdown_list__border-clr: rgba(0, 0, 0, 0.08) !important;
    --dropdown_list_item__clr: #1a1a2e !important;
    --dropdown_list_item__hover_bg: #f0f0f4 !important;
    --dropdown_list_item__hover_clr: #1a1a2e !important;
    --dropdown_option__clr: #1a1a2e !important;
    --dropdown_option__active-bg: #f0f0f4 !important;
    --dropdown_option__active-clr: #1a1a2e !important;

    --datepicker_btn__bg: #6c5ce7 !important;
    --datepicker_btn__clr: #ffffff !important;
    --datepicker__bg: #ffffff !important;
    --datepicker__clr: #1a1a2e !important;

    --success: #009b7d !important;
    --success-2: rgba(0, 155, 125, 0.08) !important;
    --error: #d35f45 !important;
    --error-2: rgba(211, 95, 69, 0.08) !important;
    --error-3: #d35f45 !important;
    --warning: #e5a100 !important;
    --warning-2: rgba(229, 161, 0, 0.08) !important;
    --info: #5b4cdb !important;
    --info-2: rgba(91, 76, 219, 0.08) !important;

    --dark-text: #1a1a2e !important;
}

/* --- Base --------------------------------------------------- */
html { background: #f5f5f7 !important; }

body.cust-help {
    font-family: 'Sora', sans-serif !important;
    background: #f5f5f7 !important;
    color: #1a1a2e !important;
    -webkit-font-smoothing: antialiased;
}

/* --- Font everywhere ---------------------------------------- */
h1, h2, h3, h4, h5, h6,
label, .label, .btn, button, input, textarea, select,
.header__logo, .breadcrumbs, .footer, p, a, span, div {
    font-family: 'Sora', sans-serif !important;
}

/* --- Wrapper & main ----------------------------------------- */
.wrapper { background: #f5f5f7 !important; }
.main { background: #f5f5f7 !important; }

/* --- Header ------------------------------------------------- */
.header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.header__logo { color: #1a1a2e !important; font-weight: 700 !important; letter-spacing: -0.5px !important; }
.header__nav a { color: #6c5ce7 !important; font-weight: 500 !important; }
.header__nav a:hover { color: #5b4cdb !important; }

/* --- Breadcrumbs -------------------------------------------- */
.breadcrumbs { background: #f5f5f7 !important; }
.breadcrumbs__inner .last { color: #1a1a2e !important; }
.breadcrumbs__inner a { color: #6c5ce7 !important; }
.breadcrumbs__inner svg { fill: #8888a0 !important; }

/* --- Main content ------------------------------------------- */
.main__content { background: #ffffff !important; color: #1a1a2e !important; }
.main__content .contr { background: transparent !important; border: none !important; border-radius: 0 !important; }
.main__content.notice-flash { background: transparent !important; border: none !important; border-radius: 0 !important; }

/* --- Notifications ------------------------------------------ */
.notification.orange {
    background: rgba(91, 76, 219, 0.06) !important;
    border: none !important;
    border-left: 4px solid #6c5ce7 !important;
    border-radius: 10px !important;
    color: #1a1a2e !important;
}
.notification.orange b, .notification.orange p { color: #1a1a2e !important; }
.notification.green { background: rgba(0, 155, 125, 0.06) !important; border: none !important; border-left: 4px solid #009b7d !important; border-radius: 10px !important; }
.notification.red { background: rgba(211, 95, 69, 0.06) !important; border: none !important; border-left: 4px solid #d35f45 !important; border-radius: 10px !important; }

/* --- Headings ----------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: #1a1a2e !important; font-weight: 600 !important; }
.article__heading, .article__heading span, .article__heading .ml-1 { color: #1a1a2e !important; }

/* --- Icon circle -------------------------------------------- */
.icon-in-circle { background: #6c5ce7 !important; }
.icon-in-circle svg { fill: #ffffff !important; }

/* --- Form inputs -------------------------------------------- */
.form input.form-control,
.form textarea.form-control,
.form select.form-control,
.form .form-control,
input.form-control,
textarea.form-control {
    background: #f5f5f7 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 10px !important;
    color: #1a1a2e !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 0.95rem !important;
}
.form input.form-control:focus,
.form textarea.form-control:focus,
.form .form-control:focus {
    border-color: #6c5ce7 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.12) !important;
    background: #ffffff !important;
}
.form input.form-control::placeholder,
.form textarea.form-control::placeholder { color: #8888a0 !important; }

/* --- Labels ------------------------------------------------- */
.form .label, .form label, label.label, label.required { color: #1a1a2e !important; font-weight: 500 !important; }
.form-control__error { color: #d35f45 !important; }

/* --- Radio buttons ------------------------------------------ */
.radio-custom label { color: #555570 !important; }
.radio-custom input[type="radio"]:checked + label { color: #1a1a2e !important; }

/* --- Captcha ------------------------------------------------ */
.captcha-block h3 { color: #5b4cdb !important; }
.captcha-block label { color: #555570 !important; }

/* --- Buttons ------------------------------------------------ */
.form-footer .btn.btn-full, .btn.btn-full, button.btn.btn-full {
    background: #6c5ce7 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}
.form-footer .btn.btn-full:hover, .btn.btn-full:hover {
    background: #5b4cdb !important;
    transform: none !important;
}

a.btn.btn-refresh {
    background: rgba(91, 76, 219, 0.08) !important;
    padding: 0.4rem 0.5rem !important;
    border-radius: 6px !important;
}
a.btn.btn-refresh:hover { background: rgba(91, 76, 219, 0.15) !important; transform: none !important; }
a.btn.btn-refresh .icon { fill: #6c5ce7 !important; }

/* --- Profile menu logout button ------------------------------ */
.profile--logout a {
    color: #ffffff !important;
}

.profile--logout a span {
    color: #ffffff !important;
}

.profile--logout .icon {
    fill: #ffffff !important;
}

.profile--logout:hover a,
.profile--logout:hover a span {
    color: #ffffff !important;
}

.profile--logout:hover .icon {
    fill: #ffffff !important;
}

/* --- Hide selectize, show native select instead ------------- */
.selectize-control { display: none !important; }
select.selectized { display: block !important; }

/* --- All dropdowns - transparent, no effects ---------------- */
.dropdown, .dropdown-select,
.dropdown:hover, .dropdown-select:hover,
.dropdown:focus, .dropdown-select:focus,
.dropdown:active, .dropdown-select:active,
.dropdown:not(.right):hover, .dropdown-select:not(.right):hover {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

.dropdown .label, .dropdown-select .label,
.dropdown:hover .label, .dropdown-select:hover .label {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #1a1a2e !important;
}

/* --- Native select styling ---------------------------------- */
select, select.selectized {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    background: #f5f5f7 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 8px !important;
    color: #1a1a2e !important;
    padding: 8px 12px !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    height: 40px !important;
}

select:focus, select.selectized:focus {
    border-color: #6c5ce7 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.12) !important;
}

/* --- Links -------------------------------------------------- */
a, a.link { color: #6c5ce7 !important; }
a:hover, a.link:hover { color: #5b4cdb !important; }
.form-footer .link { color: #6c5ce7 !important; }
.form-footer .link:hover { color: #5b4cdb !important; }

/* --- Divider - simple thin line ----------------------------- */
.divider {
    background: rgba(0, 0, 0, 0.06) !important;
    border: none !important;
    height: 1px !important;
}

/* --- Modal -------------------------------------------------- */
.modal, #forgot-modal {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 18px !important;
    color: #1a1a2e !important;
}
.modal b, .modal p, .modal label { color: #1a1a2e !important; }
.jquery-modal.blocker { background: rgba(26, 26, 46, 0.5) !important; }

/* --- Footer ------------------------------------------------- */
.footer { background: transparent !important; visibility: hidden; }

/* --- Search bar --------------------------------------------- */
.search__form {
    display: none !important;
}
.search__form .form-group input {
    background: #ffffff !important;
    color: #1a1a2e !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
}
.search__form .form-group input:focus {
    border-color: #6c5ce7 !important;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.12) !important;
}
.search__form .form-group input::placeholder { color: #8888a0 !important; }
.search__submit svg, .search__form .icon { fill: #6c5ce7 !important; }

/* --- Tables ------------------------------------------------- */
.table-wrap {
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    background: #ffffff !important;
}
.table-wrap .table thead { background: #f0f0f4 !important; color: #1a1a2e !important; }
.table-wrap .table thead th { background: #f0f0f4 !important; color: #555570 !important; border-color: rgba(0, 0, 0, 0.06) !important; font-weight: 600 !important; }
.table-wrap .table tbody tr { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.06) !important; }
.table-wrap .table tbody tr:nth-child(even) { background: #f5f5f7 !important; }
.table-wrap .table tbody tr:hover { background: rgba(91, 76, 219, 0.04) !important; }
.table-wrap .table tbody td { color: #1a1a2e !important; border-color: rgba(0, 0, 0, 0.06) !important; }
.table-wrap .table tbody td a { color: #6c5ce7 !important; }
.table-wrap .table tbody td a:hover { color: #5b4cdb !important; }

/* --- Ticket pages ------------------------------------------- */
.ticket__body { background: #ffffff !important; border-radius: 10px !important; }

/* --- Knowledgebase ------------------------------------------ */
.preview { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 10px !important; }
.preview:hover { border-color: rgba(0, 0, 0, 0.16) !important; background: #f0f0f4 !important; }

/* --- Step bar ----------------------------------------------- */
.step-bar .is-active { color: #6c5ce7 !important; }

/* --- Skip link ---------------------------------------------- */
a.skiplink { position: absolute; left: -9999px; top: -9999px; z-index: 9999; }
a.skiplink:focus { left: 10px; top: 10px; background: #ffffff; color: #1a1a2e; padding: 8px 16px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }

/* --- Scrollbar ---------------------------------------------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f5f5f7; }
::-webkit-scrollbar-thumb { background: #e6e6ec; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #6c5ce7; }

::selection { background: rgba(108, 92, 231, 0.2); color: #1a1a2e; }