/* ==========================================================================
   MyOmiai® Group Brand Styles for osTicket
   Final Responsive Support Center Theme
   ========================================================================== */


/* ==========================================================================
   1. GLOBAL PAGE
   ========================================================================== */

html {
    min-height: 100%;
    background-color: #1f2933;
}

body {
    min-height: 100vh;
    margin: 0;

    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #2d2d2d;

    background-color: #1f2933;
    background-image: url('../assets/images/custom/backdrop-desktop.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    background-attachment: fixed;
}

body::before,
body::after {
    display: none !important;
    content: none !important;
}


/* ==========================================================================
   2. REMOVE DEFAULT osTicket PAGE SHELL
   ========================================================================== */

#container {
    width: 1120px;
    max-width: calc(100% - 48px);

    margin: 0 auto;

    position: relative;
    left: 0;

    background: transparent !important;

    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}


/* ==========================================================================
   3. HEADER
   ========================================================================== */

#header {
    height: 66px;

    padding: 0 12px;

    position: relative;

    background: transparent !important;

    border-bottom: none !important;
}

#logo img {
    display: none !important;
}


/* Sign In */

#header .pull-right p {
    font-size: 0;
}

#header .pull-right p a {
    font-size: 14px;

    background-color: #bd8563;

    color: #ffffff !important;

    padding: 7px 15px;

    border-radius: 6px;

    text-decoration: none;

    font-weight: 500;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);

    transition:
            background-color 0.25s ease,
            box-shadow 0.25s ease,
            transform 0.20s ease;
}

#header .pull-right p a:hover {
    background-color: #9f6f53;

    text-decoration: none;

    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}


/* ==========================================================================
   4. HIDE UNUSED osTicket ELEMENTS
   ========================================================================== */

#footer,
#nav {
    display: none !important;
}


/* Hide osTicket's automatic Featured Questions / Other Resources sidebar.
   Navigation is handled explicitly by our branded action buttons. */

.sidebar .content {
    display: none !important;
}


/* ==========================================================================
   5. MAIN CONTENT
   ========================================================================== */

#content {
    min-height: 0 !important;

    margin: 8px 0 0 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}


/* ==========================================================================
   6. LANDING PAGE MASTER LAYOUT
   ========================================================================== */

#landing_page {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 16px;

    background: transparent !important;
}


/* ==========================================================================
   7. MAIN CONTENT AREA
   ========================================================================== */

#landing_page .main-content {
    order: 1;

    float: none !important;

    width: 82vw !important;

    max-width: 950px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    background: transparent !important;
}

#landing_page .thread-body {
    width: 100%;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;
}


/* ==========================================================================
   8. MAIN FROSTED GLASS PANEL
   ========================================================================== */

#landing_page .thread-body > div {
    width: 100%;

    box-sizing: border-box;

    padding: 22px 44px 26px 44px;

    background: rgba(255, 250, 246, 0.82);

    -webkit-backdrop-filter: blur(15px) saturate(115%);
    backdrop-filter: blur(15px) saturate(115%);

    border: 1px solid rgba(255, 255, 255, 0.72);

    border-radius: 18px;

    box-shadow:
            0 14px 40px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.62);
}


/* ==========================================================================
   9. LOGO
   ========================================================================== */

#landing_page .thread-body > div > div:nth-child(1) {
    text-align: center;

    margin: 0 0 8px 0;

    padding: 0;
}

#landing_page .thread-body > div > div:nth-child(1) img {
    display: inline-block;

    width: 108px;

    max-width: 108px;

    height: auto;

    margin: 0 auto;

    mix-blend-mode: normal;
}


/* ==========================================================================
   10. HERO TITLE & SUBTITLE
   ========================================================================== */

#landing_page .thread-body > div > div:nth-child(2) {
    text-align: center;
}

#landing_page .thread-body > div > div:nth-child(2) h1 {
    margin: 0;

    padding: 0;

    font-family:
            Georgia,
            'Times New Roman',
            serif;

    font-size: 31px;

    line-height: 1.22;

    font-weight: 700;

    color: #292929;
}

#landing_page .thread-body > div > div:nth-child(2) p {
    margin: 10px 0 0 0;

    padding: 0;

    font-family:
            'Helvetica Neue',
            Helvetica,
            Arial,
            sans-serif;

    font-size: 16px;

    line-height: 1.5;

    color: #606060;
}


/* ==========================================================================
   11. DECORATIVE DIVIDER
   ========================================================================== */

#landing_page .thread-body > div > div:nth-child(3) {
    position: relative;

    width: 100%;

    height: 1px;

    margin: 20px 0 22px 0;

    padding: 0;

    background:
            linear-gradient(
                    to right,
                    rgba(189, 133, 99, 0),
                    rgba(189, 133, 99, 0.55) 22%,
                    rgba(189, 133, 99, 0.55) 78%,
                    rgba(189, 133, 99, 0)
            );
}

#landing_page .thread-body > div > div:nth-child(3)::before,
#landing_page .thread-body > div > div:nth-child(3)::after {
    display: none !important;
    content: none !important;
}


/* ==========================================================================
   12. TWO-COLUMN INFORMATION AREA
   ========================================================================== */

#landing_page .thread-body > div > div:nth-child(4) {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    gap: 46px;

    padding: 0 24px;
}

#landing_page
.thread-body
> div
> div:nth-child(4)
> div {
    position: relative;

    padding: 0 18px 0 54px;
}

#landing_page
.thread-body
> div
> div:nth-child(4)
> div:nth-child(2) {
    border-left: 1px solid rgba(189, 133, 99, 0.28);

    padding-left: 70px;
}


/* ==========================================================================
   13. INFORMATION HEADINGS
   ========================================================================== */

#landing_page
.thread-body
> div
> div:nth-child(4)
h2 {
    margin: 0 0 8px 0;

    padding: 0;

    font-family:
            Georgia,
            'Times New Roman',
            serif;

    font-size: 20px;

    line-height: 1.25;

    font-weight: 700;

    color: #2c2c2c;

    white-space: nowrap;
}


/* ==========================================================================
   14. INFORMATION TEXT
   ========================================================================== */

#landing_page
.thread-body
> div
> div:nth-child(4)
p {
    margin: 0 0 12px 0;

    padding: 0;

    font-family:
            'Helvetica Neue',
            Helvetica,
            Arial,
            sans-serif;

    font-size: 14px;

    line-height: 1.55;

    color: #3f3f3f;
}

#landing_page
.thread-body
> div
> div:nth-child(4)
p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   15. FEATURE SVG ICONS
   ========================================================================== */

#landing_page
.thread-body
> div
> div:nth-child(4)
> div:nth-child(1)::before {
    content: "";

    position: absolute;

    left: 0;

    top: -4px;

    width: 42px;

    height: 42px;

    background-image:
            url('../assets/images/custom/support-chat.svg');

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;
}

#landing_page
.thread-body
> div
> div:nth-child(4)
> div:nth-child(2)::before {
    content: "";

    position: absolute;

    left: 18px;

    top: -4px;

    width: 42px;

    height: 42px;

    background-image:
            url('../assets/images/custom/support-ticket.svg');

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;
}


/* ==========================================================================
   16. ACTION BAR
   ========================================================================== */

#landing_page .sidebar {
    order: 2;

    float: none !important;

    width: auto !important;

    margin: 0 auto !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}

#landing_page .sidebar .front-page-button {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 14px;

    margin: 0 !important;

    padding: 0 !important;
}

#landing_page .sidebar .front-page-button p {
    margin: 0 !important;

    padding: 0 !important;
}


/* ==========================================================================
   17. SUPPORT ACTION BUTTONS
   ========================================================================== */

#landing_page .sidebar a.button {
    display: flex !important;

    align-items: center;

    justify-content: center;

    width: 250px !important;

    min-height: 56px;

    box-sizing: border-box;

    padding: 14px 20px !important;

    background:
            linear-gradient(
                    180deg,
                    #c98f6b 0%,
                    #b97d5d 100%
            ) !important;

    color: #ffffff !important;

    border:
            1px solid rgba(255, 255, 255, 0.22) !important;

    border-radius: 10px !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    line-height: 1 !important;

    white-space: nowrap;

    text-align: center !important;

    text-shadow: none !important;

    text-decoration: none !important;

    box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;

    transition:
            background 0.25s ease,
            transform 0.20s ease,
            box-shadow 0.20s ease;
}

#landing_page .sidebar a.button:hover {
    background:
            linear-gradient(
                    180deg,
                    #b97d5d 0%,
                    #9f6f53 100%
            ) !important;

    transform: translateY(-2px);

    box-shadow:
            0 11px 26px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;

    text-decoration: none !important;
}


/* ==========================================================================
   18. SVG BUTTON ICONS
   ========================================================================== */


/* Open a New Ticket */

#landing_page
.sidebar
.front-page-button
p:nth-child(1)
a::before {
    content: "";

    display: inline-block;

    width: 23px;

    height: 23px;

    margin-right: 10px;

    flex: 0 0 23px;

    background-image:
            url('../assets/images/custom/button-ticket.svg');

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;
}


/* Check Ticket Status */

#landing_page
.sidebar
.front-page-button
p:nth-child(2)
a::before {
    content: "";

    display: inline-block;

    width: 23px;

    height: 23px;

    margin-right: 10px;

    flex: 0 0 23px;

    background-image:
            url('../assets/images/custom/button-status.svg');

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;
}


/* View Knowledge Base */

#landing_page
.sidebar
.front-page-button
p:nth-child(3)
a::before {
    content: "";

    display: inline-block;

    width: 23px;

    height: 23px;

    margin-right: 10px;

    flex: 0 0 23px;

    background-image:
            url('../assets/images/custom/button-kb.svg');

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;
}


/* ==========================================================================
   19. KNOWLEDGE BASE / CUSTOM CONTENT PAGES
   ========================================================================== */

/*
 * Standard osTicket custom pages do not use #landing_page.
 * Give them the same branded frosted-glass treatment.
 */

#content:not(:has(#landing_page)) {
    width: 760px;

    max-width: calc(100vw - 48px);

    box-sizing: border-box;

    margin: 60px auto 0 auto !important;

    padding: 42px 48px !important;

    background: rgba(255, 250, 246, 0.86) !important;

    -webkit-backdrop-filter: blur(15px) saturate(115%);
    backdrop-filter: blur(15px) saturate(115%);

    border: 1px solid rgba(255, 255, 255, 0.72) !important;

    border-radius: 18px;

    box-shadow:
            0 14px 40px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;

    text-align: center;
}

#content:not(:has(#landing_page)) h1 {
    margin: 0 0 22px 0;

    font-family:
            Georgia,
            'Times New Roman',
            serif;

    font-size: 30px;

    line-height: 1.25;

    color: #292929;
}

#content:not(:has(#landing_page)) p {
    max-width: 620px;

    margin: 0 auto 18px auto;

    font-size: 16px;

    line-height: 1.65;

    color: #3f3f3f;
}


/* ==========================================================================
   20. GENERAL osTicket BUTTONS
   ========================================================================== */

a.button,
input.button,
button.button,
input[type=submit],
input[type=reset],
input[type=button] {
    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    background-color: #bd8563 !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 7px !important;

    font-weight: 500 !important;

    text-shadow: none !important;

    padding: 12px 20px !important;

    font-size: 16px !important;
}


/* ==========================================================================
   21. LINKS
   ========================================================================== */

a {
    color: #a67c52;
}

a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   22. TABLET
   ========================================================================== */

@media (max-width: 900px) {

    #container {
        width: 94%;

        max-width: 94%;
    }

    #landing_page .main-content {
        width: 94% !important;

        max-width: 94% !important;
    }

    #landing_page .thread-body > div {
        padding:
                24px
                28px
                28px
                28px;
    }

    #landing_page
    .thread-body
    > div
    > div:nth-child(4) {
        gap: 26px;

        padding: 0 8px;
    }

    #landing_page
    .thread-body
    > div
    > div:nth-child(4)
    > div {
        padding-left: 50px;
    }

    #landing_page
    .thread-body
    > div
    > div:nth-child(4)
    > div:nth-child(2) {
        padding-left: 62px;
    }

    #landing_page .sidebar .front-page-button {
        gap: 10px;
    }

    #landing_page .sidebar a.button {
        width: 225px !important;

        font-size: 14px !important;

        padding-left: 16px !important;

        padding-right: 16px !important;
    }
}


/* ==========================================================================
   23. MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    body {
        background-image:
                url('../assets/images/custom/backdrop-mobile.jpg');

        background-repeat: no-repeat;

        background-position: center top;

        background-size: cover;

        background-attachment: scroll;
    }

    #container {
        width: 94%;

        max-width: 94%;
    }

    #header {
        min-height: 56px;

        height: auto;
    }

    #header a#logo,
    #header .pull-right {
        float: none;

        text-align: center;

        width: 100%;

        margin-bottom: 10px;
    }

    #header .pull-right {
        padding-right: 0;
    }

    #landing_page .main-content {
        width: 100% !important;

        max-width: 100% !important;
    }

    #landing_page .thread-body > div {
        padding:
                24px
                22px
                28px
                22px;

        border-radius: 14px;
    }

    #landing_page
    .thread-body
    > div
    > div:nth-child(1)
    img {
        width: 84px;

        max-width: 84px;
    }

    #landing_page
    .thread-body
    > div
    > div:nth-child(2)
    h1 {
        font-size: 24px;
    }

    #landing_page
    .thread-body
    > div
    > div:nth-child(2)
    p {
        font-size: 15px;
    }

    #landing_page
    .thread-body
    > div
    > div:nth-child(4) {
        grid-template-columns: 1fr;

        gap: 26px;

        padding: 0;
    }

    #landing_page
    .thread-body
    > div
    > div:nth-child(4)
    > div {
        padding:
                0
                0
                0
                52px;
    }

    #landing_page
    .thread-body
    > div
    > div:nth-child(4)
    > div:nth-child(2) {
        border-left: none;

        border-top:
                1px solid rgba(189, 133, 99, 0.28);

        padding:
                25px
                0
                0
                52px;
    }

    #landing_page
    .thread-body
    > div
    > div:nth-child(4)
    > div:nth-child(2)::before {
        left: 0;

        top: 20px;
    }

    #landing_page
    .thread-body
    > div
    > div:nth-child(4)
    h2 {
        white-space: normal;
    }

    #landing_page .sidebar {
        width: 100% !important;
    }

    #landing_page
    .sidebar
    .front-page-button {
        width: 100%;

        flex-direction: column;

        gap: 12px;
    }

    #landing_page
    .sidebar
    a.button {
        width: 300px !important;

        max-width: 90vw;

        min-height: 58px;

        white-space: nowrap;
    }


    /* Custom pages on mobile */

    #content:not(:has(#landing_page)) {
        width: 94%;

        max-width: 94%;

        margin-top: 20px !important;

        padding: 30px 24px !important;
    }

    #content:not(:has(#landing_page)) h1 {
        font-size: 25px;
    }

    #content:not(:has(#landing_page)) p {
        font-size: 15px;
    }


    /* Responsive forms */

    #content form table,
    #content form tr,
    #content form td {
        text-align: left;
    }

    #content form table[width="800"] {
        width: 100% !important;
    }

    #content form input[type="text"],
    #content form input[type="email"],
    #content form input[type="tel"],
    #content form select,
    #content form textarea {
        width: 100% !important;

        box-sizing: border-box;
    }

    #content form p.buttons {
        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        gap: 10px;
    }
}


/* ==========================================================================
   24. SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

    #container {
        width: 96%;

        max-width: 96%;
    }

    #landing_page .thread-body > div {
        padding:
                20px
                17px
                24px
                17px;
    }

    #landing_page
    .thread-body
    > div
    > div:nth-child(2)
    h1 {
        font-size: 21px;
    }

    #landing_page
    .thread-body
    > div
    > div:nth-child(4)
    h2 {
        font-size: 19px;
    }

    #landing_page
    .thread-body
    > div
    > div:nth-child(4)
    p {
        font-size: 14px;
    }

    #landing_page
    .sidebar
    a.button {
        width: 90vw !important;

        max-width: 320px;

        padding-left: 20px !important;

        padding-right: 20px !important;
    }
}