/* ================================================================
   MASTER UNLOCK CODE - SERVICES V1
   Shared presentation layer for:
   - productsandservices.aspx
   - productdetails.aspx / group / subgroup routes

   Existing search, lazy loading, SEO, service rendering and ordering
   contracts remain unchanged.
   ================================================================ */

:root {
    --muc-services-navy: #17354d;
    --muc-services-navy-2: #20445f;
    --muc-services-blue: #1a6799;
    --muc-services-orange: #ef8514;
    --muc-services-orange-dark: #dc7410;
    --muc-services-text: #173d5c;
    --muc-services-muted: #687f93;
    --muc-services-border: #d5e0e7;
    --muc-services-page: #edf2f5;
    --muc-services-panel: #fff;
}

.muc-services-page,
.muc-product-detail-page {
    background: var(--muc-services-page);
    color: var(--muc-services-text);
}

/* The shared header now owns the page top. */
.muc-services-page .headerbd-2,
.muc-services-page .headerbd-3,
.muc-product-detail-page .headerbd-2,
.muc-product-detail-page .headerbd-3 {
    display: none !important;
}

/* ------------------------------------------------
   Shared mobile breadcrumb
   ------------------------------------------------ */
.muc-services-page .navigation,
.muc-product-detail-page .navigation {
    margin-top: 10px;
    margin-bottom: 8px;
}

.muc-services-page .breadcrumb,
.muc-product-detail-page .breadcrumb {
    margin: 0;
    padding: 6px 9px;
    border: 1px solid #d7e1e7;
    border-radius: 7px;
    background: rgba(255,255,255,.76);
    font-size: 11px;
}

/* ------------------------------------------------
   Products & Services intro
   ------------------------------------------------ */
.muc-services-intro {
    position: relative;
    margin: 14px 0 11px;
    padding: 18px 20px 17px;
    overflow: hidden;
    border: 1px solid var(--muc-services-border);
    border-radius: 12px;
    background:
        linear-gradient(105deg, rgba(239,133,20,.055), transparent 45%),
        #fff;
    box-shadow: 0 7px 22px rgba(23,53,77,.045);
}

.muc-services-intro:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 96px;
    height: 3px;
    background: var(--muc-services-orange);
}

.muc-services-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--muc-services-orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.muc-services-intro h1 {
    margin: 0;
    color: var(--muc-services-text);
    font-size: 23px;
    line-height: 1.2;
    font-weight: 700;
}

.muc-services-intro p {
    max-width: 780px;
    margin: 6px 0 10px;
    color: var(--muc-services-muted);
    font-size: 11px;
    line-height: 1.55;
}

.muc-services-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.muc-services-benefits span {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    border: 1px solid #d8e2e9;
    border-radius: 999px;
    background: #f8fafb;
    color: #315a76;
    font-size: 10px;
    font-weight: 700;
}

.muc-services-benefits span:before {
    content: "\2713";
    margin-right: 5px;
    color: var(--muc-services-orange);
    font-weight: 800;
}

/* ------------------------------------------------
   Search - align with Master Home
   ------------------------------------------------ */
.muc-services-page .service-search-top,
.muc-product-detail-page .service-search-simple {
    margin-bottom: 9px;
}

.muc-services-page .service-search-input-row,
.muc-product-detail-page .service-search-input-row {
    gap: 7px;
}

.muc-services-page .service-search-input-field,
.muc-product-detail-page .service-search-input-field {
    border-color: #82add0 !important;
    border-left-width: 1px !important;
    border-left-color: #82add0 !important;
    border-radius: 8px !important;
    background: #f9fbfc !important;
    box-shadow: 0 4px 13px rgba(31,74,103,.055);
}

.muc-services-page .service-search-input-field:focus-within,
.muc-product-detail-page .service-search-input-field:focus-within {
    border-color: #5f94bd !important;
    box-shadow: 0 0 0 3px rgba(38,104,151,.08) !important;
}

.muc-services-page .service-search-submit,
.muc-product-detail-page .service-search-submit {
    border: 1px solid #1e5885 !important;
    border-bottom: 2px solid var(--muc-services-orange) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #286ca0, #155a8f) !important;
    box-shadow: 0 4px 10px rgba(20,74,112,.12) !important;
}

/* Featured chips / global tabs */
.muc-services-page .service-search-common a,
.muc-services-page .service-search-common button,
.muc-product-detail-page .service-search-common a,
.muc-product-detail-page .service-search-common button,
.muc-services-page .gsm-global-search-tab-v1 {
    border-radius: 999px !important;
}

/* ------------------------------------------------
   Listing / category containers
   ------------------------------------------------ */
.muc-services-page .service-search-main,
.muc-product-detail-page .gsm-service-hub-v200,
.muc-product-detail-page .gsm-ai-category-context-v244,
.muc-product-detail-page .gsm-ai-secondary-discovery-v248 {
    border-radius: 10px;
}

.muc-services-page #divcontent > .divTableR,
.muc-product-detail-page .gsm-service-live-grid-v211 > .divTableR,
.muc-product-detail-page .gsm-service-related-v200 > .divTableR {
    overflow: hidden;
    border: 1px solid var(--muc-services-border) !important;
    border-radius: 10px !important;
    background: #fff;
    box-shadow: 0 5px 15px rgba(23,53,77,.035);
}

.muc-services-page #divcontent > .divTableR > .divHeaderR,
.muc-product-detail-page .gsm-service-live-grid-v211 .divHeaderR,
.muc-product-detail-page .gsm-service-related-v200 .divHeaderR {
    border: 0 !important;
    border-top: 3px solid var(--muc-services-orange) !important;
    background: #f7f9fa !important;
    color: var(--muc-services-text) !important;
}

.muc-services-page .link-group,
.muc-services-page .link-subgroup,
.muc-product-detail-page .link-group,
.muc-product-detail-page .link-subgroup {
    color: var(--muc-services-text) !important;
}

.muc-services-page .table-service .tr-header,
.muc-product-detail-page .table-service .tr-header {
    background: #f6f9fb !important;
    color: #49677d !important;
}

.muc-services-page .table-service .tr-detail-list:hover,
.muc-product-detail-page .table-service .tr-detail-list:hover {
    background: #fff9f2 !important;
}

.muc-services-page .table-service a,
.muc-product-detail-page .table-service a {
    color: #205c87;
}

.muc-services-page .table-service .col-style-2,
.muc-product-detail-page .table-service .col-style-2 {
    color: #174a6c;
    font-weight: 700;
}

/* ------------------------------------------------
   Product Detail hero / conversion area
   ------------------------------------------------ */
.muc-product-detail-page .gsm-service-hero-v200 {
    overflow: hidden;
    border: 1px solid var(--muc-services-border) !important;
    border-top: 3px solid var(--muc-services-orange) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(110deg, rgba(239,133,20,.045), transparent 44%),
        #fff !important;
    box-shadow: 0 8px 24px rgba(23,53,77,.045) !important;
}

.muc-product-detail-page .gsm-service-kicker-v200,
.muc-product-detail-page .gsm-service-section-kicker-v200,
.muc-product-detail-page .gsm-ai-category-kicker-v244,
.muc-product-detail-page .gsm-ai-facts-heading-v244 > span {
    color: var(--muc-services-orange) !important;
}

.muc-product-detail-page .gsm-service-title-v200,
.muc-product-detail-page .gsm-service-overview-v200 h2,
.muc-product-detail-page .gsm-service-info-card-v200 h2,
.muc-product-detail-page .gsm-service-models-v200 h2,
.muc-product-detail-page .gsm-ai-service-facts-v244 h2,
.muc-product-detail-page .gsm-ai-category-context-v244 h2 {
    color: var(--muc-services-text) !important;
}

.muc-product-detail-page #divDelivery.gsm-detail-order-summary {
    border-color: #d3e0e8 !important;
    background: #f8fafb !important;
    box-shadow: none !important;
}

.muc-product-detail-page .gsm-service-price-value-v200 {
    color: var(--muc-services-orange-dark) !important;
}

.muc-product-detail-page .gsm-order-now-primary,
.muc-product-detail-page .gsm-order-now-secondary {
    border-color: #dc7410 !important;
    background: linear-gradient(180deg, #ef9634, #df7b17) !important;
    color: #fff !important;
    box-shadow: 0 4px 11px rgba(207,106,10,.14) !important;
}

.muc-product-detail-page .gsm-order-now-primary:hover,
.muc-product-detail-page .gsm-order-now-secondary:hover,
.muc-product-detail-page .gsm-order-now-primary:focus,
.muc-product-detail-page .gsm-order-now-secondary:focus {
    background: linear-gradient(180deg, #f2a247, #e48625) !important;
    color: #fff !important;
}

.muc-product-detail-page .gsm-service-overview-v200,
.muc-product-detail-page .gsm-service-info-card-v200,
.muc-product-detail-page .gsm-service-models-v200,
.muc-product-detail-page .gsm-service-tags-v200,
.muc-product-detail-page .gsm-ai-service-facts-v244,
.muc-product-detail-page .gsm-ai-category-context-v244,
.muc-product-detail-page .gsm-ai-secondary-discovery-v248 {
    border-color: var(--muc-services-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(23,53,77,.03) !important;
}

/* Important/order callouts use the same brand language. */
.muc-product-detail-page .gsm-service-callout-v200.is-important {
    border-left-color: var(--muc-services-orange) !important;
    background: #fffaf4 !important;
}

.muc-product-detail-page .gsm-service-callout-v200.is-payment {
    border-left-color: #2d789e !important;
    background: #f4f9fc !important;
}

/* ------------------------------------------------
   Desktop spacing
   ------------------------------------------------ */
@media (min-width: 768px) {
    .muc-services-page #service-search-page-row,
    .muc-product-detail-page .gsm-standard-sidebar-row-v89 {
        margin-top: 0;
    }

    .muc-product-detail-page .gsm-detail-shared-sidebar-v89 {
        padding-top: 14px;
    }
}

/* ------------------------------------------------
   Mobile
   ------------------------------------------------ */
@media (max-width: 767px) {
    .muc-services-page .container,
    .muc-product-detail-page .container {
        padding-left: 7px;
        padding-right: 7px;
    }

    .muc-services-intro {
        margin-top: 9px;
        padding: 14px 14px 13px;
        border-radius: 10px;
    }

    .muc-services-intro h1 {
        font-size: 20px;
    }

    .muc-services-intro p {
        margin-top: 5px;
        margin-bottom: 8px;
        font-size: 10px;
    }

    .muc-services-benefits {
        gap: 5px;
    }

    .muc-services-benefits span {
        min-height: 23px;
        padding: 3px 7px;
        font-size: 9px;
    }

    .muc-services-page .service-search-right,
    .muc-product-detail-page .ma768-pdlr0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .muc-services-page .service-search-input-row,
    .muc-product-detail-page .service-search-input-row {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .muc-product-detail-page .gsm-service-hero-v200 {
        border-radius: 10px !important;
    }

    .muc-product-detail-page #divDelivery.gsm-detail-order-summary {
        border-radius: 8px !important;
    }

    .muc-product-detail-page .gsm-service-bottom-actions-shell-v200 {
        margin-bottom: 10px !important;
    }

    /* Keep old service tables usable without creating a page-level scrollbar. */
    .muc-services-page .divContentR,
    .muc-product-detail-page .divContentR {
        max-width: 100%;
    }
}


/* ================================================================
   SERVICES V1.1 POLISH
   ================================================================ */

/* Search accent:
   keep exactly ONE orange marker from the proven search component.
   V1's extra orange border is explicitly neutralized here. */
.muc-services-page #gsm-search-v73-root .service-search-input-field,
.muc-product-detail-page #gsm-search-v73-root .service-search-input-field {
    border-left: 1px solid #82add0 !important;
}

/* Catalog hierarchy: softer table chrome, clearer content. */
.muc-services-page #divcontent .divHeaderR {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

.muc-services-page #divcontent .h-type0,
.muc-services-page #divcontent .h-type1 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    color: var(--muc-services-text) !important;
}

.muc-services-page #divcontent .h-type1 {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

.muc-services-page .gsm-member-price-note-inner-v261 {
    border-left-color: var(--muc-services-orange) !important;
    background: #fbfcfd !important;
    color: #6c8293 !important;
}

.muc-services-page .gsm-member-price-note-inner-v261 strong {
    color: var(--muc-services-text) !important;
}

/* Give order actions a cleaner retail look regardless of the legacy renderer class. */
.muc-services-page .table-service a[href*="-p-"] input[type="button"],
.muc-services-page .table-service a[href*="-p-"] button,
.muc-services-page .table-service .btn,
.muc-services-page .table-service input[type="button"] {
    border-radius: 6px !important;
}

/* Detail: make customer content feel primary; supporting facts secondary. */
.muc-product-detail-page .muc-service-facts-lower {
    margin-top: 12px;
}

.muc-product-detail-page .muc-service-facts-lower .gsm-ai-service-facts-v244 {
    background: #f8fafb !important;
    box-shadow: none !important;
}

.muc-product-detail-page .muc-service-facts-lower .gsm-ai-facts-heading-v244 p {
    color: var(--muc-services-muted) !important;
}

/* Mobile remains compact and avoids a second visual frame around search. */
@media (max-width: 767px) {
    .muc-services-page #gsm-search-v73-root .service-search-input-field,
    .muc-product-detail-page #gsm-search-v73-root .service-search-input-field {
        border-left-width: 1px !important;
    }

    .muc-product-detail-page .muc-service-facts-lower {
        margin-top: 9px;
    }
}


/* ================================================================
   MASTER UNLOCK CODE - SERVICES SIDEBAR TOP ALIGNMENT V1
   On desktop the main Services intro starts 14px below the header,
   while the shared sidebar previously started immediately at the
   orange header line. Match both columns.
   ================================================================ */
@media (min-width:768px) {
    .muc-services-page .service-search-sidebar.gsm-site-sidebar-column-v95 {
        margin-top:14px !important;
    }
}
