/* GSMUnlockUSA Service Search V7.5 SEARCH/PASSKEY STABILITY FINAL
   Dedicated cache-safe search component shared by:
   - Products & Services (live filter)
   - Service Detail (entry point)
   - Submit Order / unlockcode (entry point)
   - Home page / index (entry point)

   IMPORTANT: this is a new physical asset filename.  It is intentionally
   loaded after legacy style.css so browsers holding an older style.css in
   cache still receive the current search UI.
*/

/* ============================================================
   GSMUnlockUSA Service Search V6.8 FINAL
   One Search Center / Simple Live Filter V6.8
   - Stable two-column desktop layout (no CSS Grid row drift)
   - Search -> Results -> Group on mobile
   - Light blue search background restored from V6.2
   ============================================================ */
.service-search-page-row {
    width:100%;
    box-sizing:border-box;
}
.service-search-right,
.service-search-sidebar,
.service-search-top,
.service-search-main {
    box-sizing:border-box;
    min-width:0;
}
.service-search-simple {
    width:100%;
    box-sizing:border-box;
    margin:0 0 9px 0;
    padding:0;
    position:relative;
    z-index:2;
}
.service-search-main,
#divcontent {
    overflow-anchor:none;
}
.service-search-input-row {
    width:100%;
    display:flex;
    align-items:stretch;
    position:relative;
    border-radius:4px;
    box-shadow:0 2px 8px rgba(20,69,148,.14);
    transition:box-shadow .2s ease;
    animation:serviceSearchWelcomeGlow 1.55s ease-out .18s 1;
}
.service-search-input-field {
    position:relative;
    flex:1 1 auto;
    min-width:0;
}
.service-search-input-icon {
    position:absolute;
    left:11px;
    top:11px;
    z-index:2;
    color:#f47b20;
    pointer-events:none;
    font-size:14px;
    text-shadow:0 1px 0 rgba(255,255,255,.85);
    transition:color .18s ease, transform .18s ease;
}
.gsm-search-v73-input {
    width:100%;
    height:38px;
    box-sizing:border-box;
    margin:0;
    padding:7px 38px 7px 34px;
    border:1px solid #78a4cd;
    border-radius:4px;
    background-color:#eaf4ff;
    background-image:linear-gradient(to right, rgba(255,139,31,.11) 0, rgba(255,139,31,.045) 28px, rgba(255,139,31,0) 52px);
    color:#111;
    outline:none;
    font-family:Arial;
    font-size:13px;
    line-height:22px;
    box-shadow:inset 4px 0 0 #ff8a1f, inset 0 1px 2px rgba(0,0,0,.05);
    transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.gsm-search-v73-input:focus {
    border-color:#417db6;
    background-color:#e2f0ff;
    background-image:linear-gradient(to right, rgba(255,120,12,.15) 0, rgba(255,120,12,.055) 30px, rgba(255,120,12,0) 54px);
    box-shadow:inset 4px 0 0 #ff6f00, inset 0 1px 2px rgba(0,0,0,.035);
}
.service-search-input-row:focus-within {
    animation:none;
    box-shadow:0 0 0 2px rgba(20,69,148,.13), 0 4px 13px rgba(20,69,148,.18), 0 3px 10px rgba(255,126,24,.12);
}
.service-search-input-field:focus-within .service-search-input-icon {
    color:#ff6f00;
    transform:scale(1.08);
}
@keyframes serviceSearchWelcomeGlow {
    0% {
        box-shadow:0 2px 8px rgba(20,69,148,.14), 0 0 0 0 rgba(255,126,24,0);
    }
    34% {
        box-shadow:0 3px 11px rgba(20,69,148,.18), 0 0 0 3px rgba(255,126,24,.18);
    }
    68% {
        box-shadow:0 3px 10px rgba(20,69,148,.16), 0 0 0 2px rgba(255,126,24,.10);
    }
    100% {
        box-shadow:0 2px 8px rgba(20,69,148,.14), 0 0 0 0 rgba(255,126,24,0);
    }
}
.gsm-search-v73-input::-ms-clear {display:none}
.service-search-reset {
    position:absolute;
    right:6px;
    top:6px;
    width:26px;
    height:26px;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:#777;
    font-family:Arial;
    font-size:21px;
    line-height:24px;
    text-align:center;
    cursor:pointer;
    z-index:4;
}
.service-search-reset:hover,
.service-search-reset:focus {
    color:#d9534f;
    outline:none;
}
.service-search-submit {
    width:39px;
    min-width:39px;
    height:32px;
    align-self:center;
    margin:3px 0 3px 5px;
    padding:0;
    border:1px solid #0f3d79;
    border-radius:6px;
    background:#1b559c;
    background:linear-gradient(to bottom, #2b6ab2 0%, #174b8d 100%);
    color:#fff;
    box-sizing:border-box;
    cursor:pointer;
    font-size:12px;
    text-align:center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 1px 4px rgba(20,69,148,.20);
    transition:background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .10s ease;
}
.service-search-submit .glyphicon {
    display:inline-block;
    transition:transform .12s ease;
}
.service-search-submit:hover,
.service-search-submit:focus {
    border-color:#0b3266;
    background:#124984;
    background:linear-gradient(to bottom, #2461a7 0%, #103f79 100%);
    color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(20,69,148,.27);
    outline:none;
}
.service-search-submit:hover .glyphicon,
.service-search-submit:focus .glyphicon {
    transform:scale(1.07);
}
.service-search-submit:active {
    transform:translateY(1px);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.16), 0 1px 2px rgba(20,69,148,.16);
}
.service-search-submit:active .glyphicon {
    transform:scale(.95);
}
.service-search-common {
    width:100%;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
    min-height:24px;
    margin:6px 0 0 0;
    font-family:Arial;
}
.service-search-common-link {
    margin:0;
    padding:4px 10px;
    border:1px solid #b8d2e8;
    border-radius:13px;
    background:#edf5fc;
    color:#1d4f84;
    box-shadow:0 1px 3px rgba(20,69,148,.07);
    font-family:Arial;
    font-size:11px;
    line-height:16px;
    cursor:pointer;
    white-space:nowrap;
    transition:background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.service-search-common-link:nth-child(even) {
    background:#f4f8fd;
    border-color:#c4d8ea;
}
.service-search-common-link:hover,
.service-search-common-link:focus {
    background:#dceefb;
    border-color:#7eb3dc;
    color:#103f75;
    box-shadow:0 2px 6px rgba(20,69,148,.13);
    text-decoration:none;
    outline:none;
    transform:translateY(-1px);
}
.service-search-common-link:active {
    transform:translateY(0);
    box-shadow:0 1px 2px rgba(20,69,148,.08);
}

/* Detail-page navigation lives in the same chip row as featured searches. */
.service-search-common-link.service-search-back-chip {
    background:#144594;
    border-color:#144594;
    color:#fff !important;
    font-weight:bold;
    text-decoration:none;
}
.service-search-common-link.service-search-back-chip:hover,
.service-search-common-link.service-search-back-chip:focus {
    background:#0e376f;
    border-color:#0e376f;
    color:#fff !important;
}
.service-search-detail-common {
    margin-top:5px;
}
.service-search-live-results {
    width:100%;
    box-sizing:border-box;
    margin:5px 0 10px 0;
    clear:both;
    opacity:1;
    overflow-anchor:none;
    overflow-x:hidden;
    transition:opacity .22s ease;
    will-change:opacity;
}
.service-search-live-results.service-search-results-switching {
    opacity:.66;
}
.service-search-live-results.service-search-results-enter {
    opacity:.76;
}
.service-search-live-results .divTableR {
    width:100%;
    box-sizing:border-box;
    margin-bottom:10px;
}
.service-search-live-results .divContentR {
    box-sizing:border-box;
}
.service-search-live-results .table-service {
    width:100%;
}

@keyframes serviceSearchLivePulse {
    0% {background-color:#d8f1ff; box-shadow:inset 0 1px 0 #7cc6e8, inset 0 -1px 0 #7cc6e8;}
    48% {background-color:#e5f6ff; box-shadow:inset 0 1px 0 #a9dbef, inset 0 -1px 0 #a9dbef;}
    72% {background-color:#eef9ff; box-shadow:inset 0 1px 0 #c8e8f5, inset 0 -1px 0 #c8e8f5;}
    100% {background-color:transparent; box-shadow:none;}
}
.service-search-live-pulse td {
    animation:serviceSearchLivePulse 1.95s ease-out;
}
.service-search-loading,
.service-search-error,
.service-search-empty {
    width:100%;
    box-sizing:border-box;
    padding:15px 10px;
    margin:0 0 10px 0;
    border:1px solid #d8d8d8;
    background:#fff;
    color:#555;
    font-family:Arial;
    font-size:12px;
    line-height:18px;
    text-align:center;
}
.service-search-error {color:#b94a48}
.service-search-return-focus td {
    background:#fff7ce !important;
    transition:background-color .5s ease;
}
.service-search-back-box {
    width:100%;
    box-sizing:border-box;
    margin:0 0 7px 0;
    padding:7px 9px;
    border:1px solid #7fd7f7;
    background:#e5f6fd;
    font-family:Arial;
}
.service-search-back-link {
    color:#144594 !important;
    font-size:11px;
    line-height:16px;
    font-weight:bold;
}
.service-search-back-link:hover {text-decoration:underline}
.service-search-detail {
    margin-bottom:7px;
}
.service-search-detail .gsm-search-v73-input {
    height:34px;
    padding-top:5px;
    padding-bottom:5px;
    font-size:12px;
}
.service-search-detail .service-search-input-icon {
    top:9px;
}
.service-search-detail .service-search-submit {
    height:34px;
}
.service-search-detail .service-search-reset {
    top:4px;
}

/* Desktop/tablet: two real sibling columns.  The sidebar never participates
   in the vertical sizing of the result column, so a tall Select Group can no
   longer push filtered results below the viewport. */
@media (min-width:768px) {
    .service-search-page-row {
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:flex-start !important;
    }
    .service-search-page-row .service-search-sidebar {
        order:1;
        flex:0 0 25%;
        width:25% !important;
        max-width:25%;
        float:none !important;
        margin-left:0 !important;
        align-self:flex-start;
    }
    .service-search-page-row .service-search-right {
        order:2;
        flex:0 0 75%;
        width:75% !important;
        max-width:75%;
        float:none !important;
        margin-left:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }
    .service-search-page-row .service-search-top,
    .service-search-page-row .service-search-main {
        width:100% !important;
        max-width:100%;
        float:none !important;
        margin-left:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }
}

/* Mobile: right wrapper is first in DOM, therefore the natural flow is
   Search -> live results (when active) -> Select Group. */
@media (max-width:767px) {
    .service-search-page-row {
        display:flex !important;
        flex-direction:column !important;
        flex-wrap:nowrap !important;
        width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }
    .service-search-page-row .service-search-right {
        order:1;
        flex:0 0 auto;
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
        float:none !important;
    }
    .service-search-page-row .service-search-sidebar {
        order:2;
        flex:0 0 auto;
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
        float:none !important;
    }
    .service-search-page-row .service-search-top,
    .service-search-page-row .service-search-main {
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
        float:none !important;
    }
    /*
     * Mobile: let the search controls use the same visual gutter as the
     * breadcrumb/menu/account line instead of inheriting the narrower content
     * column. Results remain in the normal Products & Services grid width.
     */
    .service-search-page-row .service-search-top {
        width:calc(100% + 16px) !important;
        max-width:none !important;
        margin-left:-8px !important;
        margin-right:-8px !important;
    }
    .service-search-page-row .service-search-sidebar .fix-group {
        margin-top:0 !important;
    }
    .service-search-simple {
        margin-bottom:7px;
    }
    .gsm-search-v73-input {
        height:38px;
        padding-left:33px;
        padding-right:37px;
        font-size:13px;
    }
    .service-search-input-icon {
        left:10px;
        top:11px;
    }
    .service-search-submit {
        width:39px;
        min-width:39px;
        height:32px;
        margin:3px 0 3px 5px;
    }
    .service-search-common {
        gap:5px;
        margin-top:5px;
        min-height:23px;
    }
    .service-search-common-link {
        padding:4px 9px;
        border-radius:12px;
        font-size:11px;
        line-height:16px;
    }
    .service-search-live-results {
        width:100% !important;
        max-width:100% !important;
        margin:4px 0 10px 0;
    }
    .service-search-live-results .divContentR {
        padding:5px;
    }
    .service-search-live-results .table-service .tr-detail-list {
        height:76px;
    }
    .service-search-live-results .table-service .tr-detail-list .col-style-0 {
        width:11%;
    }
    .service-search-live-results .table-service .tr-detail-list .col-style-1 {
        width:57%;
    }
    .service-search-live-results .table-service .tr-detail-list .col-style-2 {
        width:10%;
    }
    .service-search-live-results .table-service .tr-detail-list .col-style-3 {
        width:5%;
    }
    .service-search-live-results .table-service .tr-detail-list .col-style-4 {
        width:12%;
    }
    .service-search-live-results .img-unlservice {
        max-width:45px !important;
    }
    .service-search-back-box {
        margin-bottom:6px;
        padding:6px 7px;
    }
    .service-search-back-link {
        font-size:11px;
        white-space:normal;
    }
    .service-search-detail {
        width:calc(100% + 16px) !important;
        max-width:none !important;
        margin-left:-8px !important;
        margin-right:-8px !important;
    }
    .service-search-detail .gsm-search-v73-input {
        height:36px;
        font-size:12px;
    }
    .service-search-detail .service-search-input-icon {
        top:10px;
    }
    .service-search-detail .service-search-submit {
        height:30px;
        margin-top:3px;
        margin-bottom:3px;
    }
    .service-search-detail .service-search-reset {
        top:5px;
    }
}

@media (max-width:480px) {
    .service-search-common {
        display:flex;
        gap:4px;
    }
    .service-search-common-link {
        margin:0;
        padding:3px 7px;
    }
    .service-search-live-results .table-service {
        table-layout:fixed;
    }
    .service-search-live-results .table-service .tr-detail-list .col-style-0 {
        width:12%;
    }
    .service-search-live-results .table-service .tr-detail-list .col-style-1 {
        width:51%;
        word-wrap:break-word;
        overflow-wrap:break-word;
    }
    .service-search-live-results .table-service .tr-detail-list .col-style-2 {
        width:12%;
    }
    .service-search-live-results .table-service .tr-detail-list .col-style-3 {
        width:6%;
    }
    .service-search-live-results .table-service .tr-detail-list .col-style-4 {
        width:13%;
        word-wrap:break-word;
        overflow-wrap:break-word;
    }
    .service-search-live-results .img-unlservice {
        max-width:38px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-search-input-row {
        animation:none;
    }
    .service-search-live-pulse td {
        animation:none;
        background:#edf9ff;
    }
    .service-search-common-link,
    .service-search-live-results,
    .service-search-submit,
    .service-search-submit .glyphicon {
        transition:none;
    }
}
/* ============================================================
   Service Search V6.9.2 - Detail / Submit Order button alignment
   Keep the compact main-list button unchanged. Detail and Order
   use a true 38px square aligned exactly with the 38px input.
   ============================================================ */
.service-search-detail .service-search-input-row {
    align-items:center;
}
.service-search-detail .service-search-submit {
    flex:0 0 38px;
    width:38px;
    min-width:38px;
    height:38px;
    align-self:auto;
    margin:0 0 0 6px;
    padding:0;
    border-radius:6px;
}
@media (max-width:767px) {
    .service-search-detail .service-search-submit {
        flex-basis:38px;
        width:38px;
        min-width:38px;
        height:38px;
        margin-left:6px;
    }
}



/* ============================================================
   V7 unified visual skin
   Bright warm cue on the left + compact GSM blue action button.
   Same geometry on all 3 pages; only page behavior differs in JS.
   ============================================================ */
#gsm-search-v73-root.gsm-service-search .service-search-input-row {
    align-items:center;
    min-height:40px;
    border-radius:7px;
    box-shadow:0 2px 7px rgba(20,69,148,.14);
    animation:gsmSearchV7Welcome 1.45s ease-out .20s 1;
}

#gsm-search-v73-root.gsm-service-search .service-search-input-field {
    min-height:40px;
    border-radius:7px;
}

#gsm-search-v73-root.gsm-service-search .gsm-search-v73-input {
    height:40px !important;
    margin:0 !important;
    padding:8px 39px 8px 36px !important;
    border:1px solid #78a4cd !important;
    border-radius:7px !important;
    background-color:#edf6ff !important;
    background-image:linear-gradient(to right, rgba(255,122,24,.13) 0, rgba(255,122,24,.055) 31px, rgba(255,122,24,0) 58px) !important;
    box-shadow:inset 4px 0 0 #ff7a18, inset 0 1px 2px rgba(0,0,0,.045) !important;
    color:#111 !important;
    font:13px/22px Arial !important;
    transition:border-color .17s ease, box-shadow .17s ease, background-color .17s ease !important;
}

#gsm-search-v73-root.gsm-service-search .gsm-search-v73-input:focus {
    border-color:#4e84b8 !important;
    background-color:#e5f2ff !important;
    background-image:linear-gradient(to right, rgba(255,101,0,.16) 0, rgba(255,101,0,.06) 32px, rgba(255,101,0,0) 60px) !important;
    box-shadow:inset 4px 0 0 #ff6500, inset 0 1px 2px rgba(0,0,0,.03) !important;
}

#gsm-search-v73-root.gsm-service-search .service-search-input-icon {
    left:12px !important;
    top:12px !important;
    color:#ff7a18 !important;
    font-size:15px !important;
    transition:color .16s ease, transform .16s ease !important;
}

#gsm-search-v73-root.gsm-service-search .service-search-input-field:focus-within .service-search-input-icon {
    color:#ff6500 !important;
    transform:scale(1.08);
}

#gsm-search-v73-root.gsm-service-search .service-search-input-row:focus-within {
    animation:none;
    box-shadow:0 0 0 2px rgba(20,69,148,.12), 0 4px 12px rgba(20,69,148,.18), 0 2px 8px rgba(255,122,24,.10);
}

#gsm-search-v73-root.gsm-service-search .service-search-reset {
    top:7px !important;
    right:7px !important;
    width:26px !important;
    height:26px !important;
}

#gsm-search-v73-root.gsm-service-search .service-search-submit {
    position:relative;
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    height:34px !important;
    align-self:center !important;
    margin:3px 0 3px 6px !important;
    padding:0 !important;
    overflow:hidden;
    border:1px solid #0e3b75 !important;
    border-radius:8px !important;
    background:linear-gradient(145deg, #3378bd 0%, #1e5b9e 52%, #144594 100%) !important;
    color:#fff !important;
    box-shadow:inset 0 -2px 0 rgba(255,122,24,.92), inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px rgba(20,69,148,.22) !important;
    transition:transform .10s ease, box-shadow .14s ease, filter .14s ease !important;
}

#gsm-search-v73-root.gsm-service-search .service-search-submit:before {
    content:"";
    position:absolute;
    left:9px;
    right:9px;
    bottom:0;
    height:2px;
    border-radius:2px 2px 0 0;
    background:#ff8a1f;
    opacity:.95;
}

#gsm-search-v73-root.gsm-service-search .service-search-submit .glyphicon {
    position:relative;
    z-index:1;
    font-size:14px;
}

#gsm-search-v73-root.gsm-service-search .service-search-submit:hover,
#gsm-search-v73-root.gsm-service-search .service-search-submit:focus {
    filter:brightness(1.07);
    transform:translateY(-1px);
    box-shadow:inset 0 -2px 0 #ff8a1f, inset 0 1px 0 rgba(255,255,255,.24), 0 4px 9px rgba(20,69,148,.28) !important;
}

#gsm-search-v73-root.gsm-service-search .service-search-submit:active {
    filter:none;
    transform:translateY(1px);
    box-shadow:inset 0 -2px 0 #f47b20, inset 0 1px 2px rgba(0,0,0,.17), 0 1px 3px rgba(20,69,148,.18) !important;
}

#gsm-search-v73-root.gsm-service-search .service-search-common {
    margin-top:6px;
}

#gsm-search-v73-root.gsm-service-search .service-search-common-link {
    border-color:#b5d0e7;
    background:#edf5fc;
    color:#1d4f84;
}

#gsm-search-v73-root.gsm-service-search .service-search-common-link:hover,
#gsm-search-v73-root.gsm-service-search .service-search-common-link:focus {
    border-color:#78add8;
    background:#ddecfa;
}

#gsm-search-v73-root.gsm-service-search .service-search-common-link.service-search-back-chip {
    background:#144594;
    border-color:#144594;
    color:#fff !important;
    box-shadow:inset 0 -2px 0 rgba(255,122,24,.86), 0 1px 3px rgba(20,69,148,.16);
}

@keyframes gsmSearchV7Welcome {
    0% { box-shadow:0 2px 7px rgba(20,69,148,.14), 0 0 0 0 rgba(255,122,24,0); }
    40% { box-shadow:0 3px 10px rgba(20,69,148,.18), 0 0 0 3px rgba(255,122,24,.15); }
    100% { box-shadow:0 2px 7px rgba(20,69,148,.14), 0 0 0 0 rgba(255,122,24,0); }
}

/* V7: detail and order deliberately use the same 40px search bar as listing. */
#gsm-search-v73-root.gsm-service-search.service-search-detail .gsm-search-v73-input {
    height:40px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
    font-size:13px !important;
}
#gsm-search-v73-root.gsm-service-search.service-search-detail .service-search-input-icon {
    top:12px !important;
}
#gsm-search-v73-root.gsm-service-search.service-search-detail .service-search-submit {
    flex-basis:42px !important;
    width:42px !important;
    min-width:42px !important;
    height:34px !important;
    margin:3px 0 3px 6px !important;
}
#gsm-search-v73-root.gsm-service-search.service-search-detail .service-search-reset {
    top:7px !important;
}

@media (max-width:767px) {
    #gsm-search-v73-root.gsm-service-search .gsm-search-v73-input,
    #gsm-search-v73-root.gsm-service-search.service-search-detail .gsm-search-v73-input {
        height:40px !important;
        padding-left:36px !important;
        padding-right:38px !important;
        font-size:13px !important;
    }
    #gsm-search-v73-root.gsm-service-search .service-search-submit,
    #gsm-search-v73-root.gsm-service-search.service-search-detail .service-search-submit {
        flex-basis:40px !important;
        width:40px !important;
        min-width:40px !important;
        height:34px !important;
        margin:3px 0 3px 5px !important;
        border-radius:7px !important;
    }
}

@media (prefers-reduced-motion:reduce) {
    #gsm-search-v73-root.gsm-service-search .service-search-input-row { animation:none !important; }
}


/* ============================================================
   V7.3 legacy-cache isolation
   These selectors intentionally use unique V7.3 IDs/classes so the original
   cached style.css (#input-allservice, #allservice-option-detail, etc.) cannot
   style the new component.
   ============================================================ */
.gsm-search-v73 .gsm-search-v73-input {
    width:100%;
    box-sizing:border-box;
}
.gsm-search-v73 #gsm-search-v73-submit {
    flex:0 0 auto;
}
.gsm-search-v73 #gsm-search-v73-common {
    box-sizing:border-box;
}

/* ============================================================
   V7.3.2 FINAL - Exact mobile alignment across all 3 pages

   The three pages use different legacy parent/container geometry.  A plain
   margin on the Search root therefore does NOT produce the same visible left
   edge.  This CSS supplies a safe no-JS fallback; the V7.3.2 JS then measures
   the actual rendered root and aligns it to an exact 10px viewport gutter.
   ============================================================ */
@media (max-width:767px) {
    /* Stop the legacy listing wrapper from expanding outside its natural box.
       The Search root itself is responsible for the final mobile alignment. */
    .service-search-page-row .service-search-top {
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    /* Safe fallback before JS runs.  The JS replaces these values with exact
       viewport-relative pixel geometry, independent of the parent page. */
    #gsm-search-v73-root.gsm-search-v73 {
        position:relative !important;
        left:0;
        width:calc(100% - 20px) !important;
        max-width:calc(100% - 20px) !important;
        margin-left:10px !important;
        margin-right:10px !important;
        box-sizing:border-box !important;
    }

    #gsm-search-v73-root.gsm-search-v73 .service-search-input-row,
    #gsm-search-v73-root.gsm-search-v73 .service-search-common {
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }
}


/* ============================================================
   V7.5 - Font-independent Search icons
   No dependency on Bootstrap Glyphicons or icon-font cache.
   ============================================================ */
#gsm-search-v73-root.gsm-service-search .gsm-search-v75-field-icon {
    position:absolute !important;
    left:12px !important;
    top:11px !important;
    z-index:3 !important;
    display:block !important;
    width:15px !important;
    height:15px !important;
    box-sizing:border-box !important;
    border:3px solid #ff7a18 !important;
    border-radius:50% !important;
    background:transparent !important;
    color:transparent !important;
    font-size:0 !important;
    line-height:0 !important;
    pointer-events:none !important;
    transform:none !important;
    transition:border-color .16s ease, transform .16s ease !important;
}
#gsm-search-v73-root.gsm-service-search .gsm-search-v75-field-icon:after {
    content:"" !important;
    position:absolute !important;
    width:7px !important;
    height:3px !important;
    right:-6px !important;
    bottom:-3px !important;
    border-radius:2px !important;
    background:#ff7a18 !important;
    transform:rotate(45deg) !important;
    transform-origin:center !important;
}
#gsm-search-v73-root.gsm-service-search .service-search-input-field:focus-within .gsm-search-v75-field-icon {
    border-color:#ff6500 !important;
    transform:scale(1.06) !important;
}
#gsm-search-v73-root.gsm-service-search .service-search-input-field:focus-within .gsm-search-v75-field-icon:after {
    background:#ff6500 !important;
}

#gsm-search-v73-root.gsm-service-search .gsm-search-v75-submit-icon {
    position:relative !important;
    z-index:2 !important;
    display:inline-block !important;
    width:14px !important;
    height:14px !important;
    box-sizing:border-box !important;
    margin:0 0 1px 0 !important;
    border:3px solid #fff !important;
    border-radius:50% !important;
    background:transparent !important;
    color:transparent !important;
    font-size:0 !important;
    line-height:0 !important;
    vertical-align:middle !important;
    transform:none !important;
    transition:transform .12s ease !important;
}
#gsm-search-v73-root.gsm-service-search .gsm-search-v75-submit-icon:after {
    content:"" !important;
    position:absolute !important;
    width:6px !important;
    height:3px !important;
    right:-6px !important;
    bottom:-3px !important;
    border-radius:2px !important;
    background:#fff !important;
    transform:rotate(45deg) !important;
    transform-origin:center !important;
}
#gsm-search-v73-root.gsm-service-search .service-search-submit:hover .gsm-search-v75-submit-icon,
#gsm-search-v73-root.gsm-service-search .service-search-submit:focus .gsm-search-v75-submit-icon {
    transform:scale(1.07) !important;
}
#gsm-search-v73-root.gsm-service-search .service-search-submit:active .gsm-search-v75-submit-icon {
    transform:scale(.95) !important;
}

/* ============================================================
   V7.5 - Search result mobile grid parity with Home
   Reuse the proven legacy Home proportions instead of Search-only
   fixed-layout overrides.
   ============================================================ */
@media (max-width:767px) {
    .service-search-live-results {
        overflow-x:visible !important;
    }
    .service-search-live-results .table-service {
        width:100% !important;
        table-layout:auto !important;
    }
    .service-search-live-results .table-service .tr-detail-list .col-style-0 {
        width:5% !important;
    }
    .service-search-live-results .table-service .tr-detail-list .col-style-1 {
        width:65% !important;
        min-width:0 !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
    }
    .service-search-live-results .table-service .tr-detail-list .col-style-2 {
        width:5% !important;
    }
    .service-search-live-results .table-service .tr-detail-list .col-style-3 {
        width:5% !important;
    }
    .service-search-live-results .table-service .tr-detail-list .col-style-4 {
        width:15% !important;
    }
    .service-search-live-results .img-unlservice {
        max-width:50px !important;
        width:auto !important;
        height:auto !important;
    }
}