﻿/*
 * GSMUnlockUSA CANONICAL SITE SIDEBAR LAYOUT V95
 * -----------------------------------------------
 * One containment contract for every ordinary synchronous page.
 *
 * Desktop DOM contract:
 *   .gsm-site-sidebar-layout-v95
 *     -> .gsm-site-sidebar-column-v95
 *          -> #unlockSidebarV58   (direct child from clsSiteSidebar.Build)
 *     -> .gsm-site-sidebar-main-v95
 *
 * The direct full-height chain gives #unlockServiceSidebarSticky real travel
 * room. V94 JavaScript then adapts the internal Browse Services viewport on
 * short pages; long pages retain normal viewport-aware height.
 *
 * This CSS owns layout containment only. mnbulk.js remains authoritative for
 * service-group down()/up().
 */

@media (min-width: 768px) {
    .gsm-site-sidebar-layout-v95 {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: stretch !important;
        align-items: stretch !important;
    }

    .gsm-site-sidebar-layout-v95 > .gsm-site-sidebar-column-v95,
    .gsm-site-sidebar-layout-v95 > .gsm-site-sidebar-main-v95 {
        float: none !important;
        min-width: 0;
    }

    .gsm-site-sidebar-layout-v95 > .gsm-site-sidebar-column-v95 {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-self: stretch !important;
        align-self: stretch !important;
        min-height: 0;
    }

    /* Products & Services has its own service-search flex rules. Canonical
       sidebar containment wins only for the sidebar column itself. */
    .service-search-page-row.gsm-site-sidebar-layout-v95
        > .service-search-sidebar.gsm-site-sidebar-column-v95 {
        -webkit-align-self: stretch !important;
        align-self: stretch !important;
    }

    .gsm-site-sidebar-layout-v95
        > .gsm-site-sidebar-column-v95
        > #unlockSidebarV58 {
        width: 100% !important;
        min-width: 0;
        min-height: 0;
        display: -webkit-flex;
        display: flex;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        -webkit-flex-direction: column;
        flex-direction: column;
        box-sizing: border-box;
    }
}

/* Products & Services intentionally shows Browse Services on mobile after
 * Search/Results while hiding Support/Secure in that mobile slot. The visual
 * rules below are preserved from the accepted V89 behavior, but now target
 * the direct canonical clsSiteSidebar root (no host/stack wrappers). */
@media (max-width: 767px) {
    .gsm-products-sidebar-mobile-v95 #unlockSidebarV58 {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .gsm-products-sidebar-mobile-v95 #unlockSidebarV58 > * {
        display: none !important;
    }

    .gsm-products-sidebar-mobile-v95 #unlockSidebarV58 > #unlockServiceSidebarSticky {
        display: block !important;
    }

    .gsm-products-sidebar-mobile-v95 #unlockServiceSidebarSticky {
        position: static !important;
        width: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .gsm-products-sidebar-mobile-v95 #unlockSidebarSecurityV57 {
        display: none !important;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget.gsm-service-browser-v57 {
        width: 100% !important;
        margin: 6px 0 10px 0 !important;
        border: 1px solid #d8e3ec !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        box-shadow: 0 1px 3px rgba(35, 64, 88, .05) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-service-browser-header-v57 {
        min-height: 39px;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        gap: 8px;
        padding: 0 7px 0 11px;
        border-bottom: 1px solid #dfe8ef;
        background: #f8fbfd;
        box-sizing: border-box;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-service-browser-title-v57 {
        min-width: 0;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        gap: 7px;
        color: #24445f;
        font-family: Arial, sans-serif;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.2;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-service-browser-toggle-v57 {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        padding: 0;
        border: 0;
        border-radius: 5px;
        background: transparent;
        color: #688095;
        line-height: 28px;
        text-align: center;
        cursor: pointer;
        outline: none;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-service-browser-toggle-v57:hover,
    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-service-browser-toggle-v57:focus {
        background: #edf4f9;
        color: #245f91;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-service-browser-body-v57 {
        background: #ffffff;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-service-browser-search-v57 {
        position: relative;
        padding: 8px;
        border-bottom: 1px solid #e4ebf1;
        background: #ffffff;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget #unlockSidebarSearchV57 {
        width: 100% !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 31px 0 31px !important;
        border: 1px solid #d3dfe8 !important;
        border-radius: 6px !important;
        background: #fbfdff !important;
        color: #30485c !important;
        font-family: Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 32px !important;
        box-shadow: none !important;
        outline: none !important;
        box-sizing: border-box !important;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget #unlockSidebarSearchV57:focus {
        border-color: #94bad7 !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 2px rgba(71, 139, 190, .10) !important;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-service-browser-search-icon-v57 {
        position: absolute;
        z-index: 2;
        left: 17px;
        top: 19px;
        color: #7891a5;
        font-size: 11px;
        pointer-events: none;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-service-browser-clear-v57 {
        position: absolute;
        z-index: 2;
        top: 13px;
        right: 12px;
        width: 23px;
        height: 23px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #74899b;
        font-family: Arial, sans-serif;
        font-size: 17px;
        line-height: 21px;
        text-align: center;
        cursor: pointer;
        outline: none;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-service-browser-tree-shell-v57 {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: #ffffff !important;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget #unlockFastServiceTree,
    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-service-browser-results-v57 {
        width: 100% !important;
        max-height: 420px !important;
        min-height: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: #ffffff !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    /* Prevent the server-default open state flashing before the shared helper
       prepares the legacy tree. JS removes this class after initialization. */
    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTree.gsm-sidebar-compact-init-v57 tr.type-detail {
        display: none !important;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTree.gsm-sidebar-compact-init-v57 span[id^="up"] {
        display: none !important;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTree.gsm-sidebar-compact-init-v57 span[id^="down"] {
        display: block !important;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-sidebar-search-summary-v57 {
        padding: 7px 10px 6px;
        color: #7a8d9c;
        font-family: Arial, sans-serif;
        font-size: 10.5px;
        line-height: 1.35;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-sidebar-search-result-v57 {
        width: 100%;
        display: block;
        padding: 9px 10px 9px 12px;
        border: 0;
        border-left: 2px solid transparent;
        border-bottom: 1px solid #eff3f6;
        background: #ffffff;
        color: #2d475c;
        font-family: Arial, sans-serif;
        text-align: left;
        cursor: pointer;
        outline: none;
        box-sizing: border-box;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-sidebar-search-result-v57:hover,
    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-sidebar-search-result-v57:focus {
        border-left-color: #71a9d0;
        background: #f3f8fc;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-sidebar-search-result-title-v57 {
        display: block;
        color: #214f75;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.35;
    }

    .gsm-products-sidebar-mobile-v95 #unlockFastServiceTreeWidget .gsm-sidebar-search-result-meta-v57 {
        display: block;
        margin-top: 2px;
        color: #8293a1;
        font-size: 10px;
        line-height: 1.3;
    }
}
