/* * GSMUnlockUSA Products & Services V108 * Classic Header - Refined * * IMPORTANT: * - The upgraded V106/V105 service GRID is intentionally untouched. * - This file changes only: * 1) Service Name weight 500 -> 600 * 2) Subgroup title presentation * 3) Service table column-header presentation * * Goal: * Keep the cleaner upgraded rows/geometry, but bring back the clearer legacy * header hierarchy: white header, title-case labels, lock/cart icons and the * thin yellow divider. */ .gsm-products-service-list-v1 .service-search-main .table-service .tr-detail-list .col-style-1 > a:first-child, .gsm-products-service-list-v1 .service-search-main .table-service .tr-detail-list .col-style-1 > a:first-child strong, .gsm-products-service-list-v1 .service-search-main .table-service .tr-detail-list .col-style-1 > a:first-of-type, .gsm-products-service-list-v1 .service-search-main .table-service .tr-detail-list .col-style-1 > a:first-of-type strong { font-weight: 600 !important; } /* ======================================================================= * SUBGROUP TITLE * ======================================================================= */ .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td[colspan="6"] { padding: 11px 10px 8px 10px !important; border-top: 0 !important; border-bottom: 1px solid #d8df00 !important; background: #fff !important; color: #164f9e !important; text-align: left !important; text-transform: none !important; letter-spacing: 0 !important; } .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td[colspan="6"] .h-type0, .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td[colspan="6"] .h-type1 { margin: 0 !important; color: #164f9e !important; font-size: 13px !important; font-weight: 600 !important; line-height: 18px !important; text-align: left !important; text-transform: none !important; letter-spacing: 0 !important; } /* ======================================================================= * REAL SIX-COLUMN HEADER * ======================================================================= */ .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header:not(:has(td[colspan="6"])) { height: 42px !important; background: #fff !important; color: #29485d !important; font-size: 11.5px !important; font-weight: 600 !important; line-height: 16px !important; text-transform: none !important; letter-spacing: 0 !important; } /* * Keep this selector too for legacy browsers that do not support :has(). * The colspan rule above has higher practical specificity for subgroup rows. */ .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td:not([colspan]) { padding: 8px 6px !important; border-top: 0 !important; border-bottom: 1px solid #d8df00 !important; background: #fff !important; color: #29485d !important; font-size: 11.5px !important; font-weight: 600 !important; line-height: 16px !important; vertical-align: middle !important; text-transform: none !important; letter-spacing: 0 !important; } .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td:not([colspan]) strong { color: #29485d !important; font-size: inherit !important; font-weight: 600 !important; line-height: inherit !important; text-transform: none !important; letter-spacing: 0 !important; } /* Restore the legacy lock/cart header icons. */ .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td:first-child:not([colspan]) img, .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td:last-child:not([colspan]) img { display: inline-block !important; opacity: .72 !important; transform: scale(.90) !important; vertical-align: middle !important; } /* Remove the modern pseudo ORDER label; the original cart header icon returns. */ .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td:last-child:not([colspan]):after { content: none !important; display: none !important; } /* Keep the header labels aligned with the existing upgraded grid geometry. */ .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td:nth-child(2):not([colspan]) { padding-left: 8px !important; text-align: left !important; } .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td:nth-child(3):not([colspan]), .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td:nth-child(4):not([colspan]), .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td:nth-child(5):not([colspan]), .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td:nth-child(6):not([colspan]) { text-align: center !important; } /* ======================================================================= * MOBILE * Keep the SAME upgraded grid. Only make the header slightly more compact. * ======================================================================= */ @media (max-width: 767px) { .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td[colspan="6"] { padding: 10px 7px 7px 7px !important; } .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td[colspan="6"] .h-type0, .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td[colspan="6"] .h-type1 { font-size: 12.5px !important; line-height: 17px !important; } .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td:not([colspan]) { padding-top: 7px !important; padding-bottom: 7px !important; font-size: 11px !important; line-height: 15px !important; } .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td:first-child:not([colspan]) img, .gsm-products-service-list-v1 .service-search-main .table-service > tbody > .tr-header > td:last-child:not([colspan]) img { transform: scale(.86) !important; opacity: .72 !important; } } /* ======================================================================== * V109 - Header alignment + mobile full-bleed service panel * ------------------------------------------------------------------------ * Keep the CURRENT upgraded grid exactly as-is. * * Changes only: * 1) Desktop subgroup title starts near the panel edge, matching mobile. * 2) Mobile service result panel expands to ~4px from each viewport edge. * * Search box / keyword chips remain inset. * ======================================================================== */ /* ------------------------------------------------------------------------ * DESKTOP: subgroup title alignment * ------------------------------------------------------------------------ * V105 previously aligned subgroup text to the Service column by using: * padding-left: calc(6% + 8px) * * The desired V109 look matches mobile instead: subgroup is a section title * for the whole table, so it starts 14px from the panel edge. * * Match V105's .gsm-service-table-v105 specificity so this rule truly wins. * ------------------------------------------------------------------------ */ @media (min-width: 768px) { .gsm-products-service-list-v1 .service-search-main .table-service.gsm-service-table-v105 > tbody > .tr-header > td[colspan="6"] { padding-left: 14px !important; padding-right: 10px !important; } .gsm-products-service-list-v1 .service-search-main .table-service.gsm-service-table-v105 > tbody > .tr-header > td[colspan="6"] .link-subgroup, .gsm-products-service-list-v1 .service-search-main .table-service.gsm-service-table-v105 > tbody > .tr-header > td[colspan="6"] .h-type0, .gsm-products-service-list-v1 .service-search-main .table-service.gsm-service-table-v105 > tbody > .tr-header > td[colspan="6"] .h-type1 { margin-left: 0 !important; padding-left: 0 !important; } } /* ------------------------------------------------------------------------ * MOBILE: expand ONLY the service result/group area. * ------------------------------------------------------------------------ * Current page content/search stays comfortably inset. * The blue Group header + white service panel use almost all viewport width: * * width = viewport - 8px * left edge ~= 4px * right edge ~= 4px * * No negative width, no width > viewport, so the page should not gain a * horizontal scrollbar. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { .gsm-products-service-list-v1 .service-search-main { overflow: visible !important; } .gsm-products-service-list-v1 #divcontent.gsm-products-mobile-first-subgroup-v718, .gsm-products-service-list-v1 #service-search-live-results.service-search-live-results { position: relative !important; width: calc(100vw - 8px) !important; max-width: none !important; margin-left: calc(50% - 50vw + 4px) !important; margin-right: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; } /* Group wrapper and table consume the new wider panel completely. */ .gsm-products-service-list-v1 #divcontent.gsm-products-mobile-first-subgroup-v718 > .divTableR, .gsm-products-service-list-v1 #service-search-live-results.service-search-live-results .divTableR, .gsm-products-service-list-v1 #divcontent.gsm-products-mobile-first-subgroup-v718 .divContentR, .gsm-products-service-list-v1 #service-search-live-results.service-search-live-results .divContentR, .gsm-products-service-list-v1 #divcontent.gsm-products-mobile-first-subgroup-v718 .table-service, .gsm-products-service-list-v1 #service-search-live-results.service-search-live-results .table-service { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* * Keep the current upgraded grid's internal spacing/columns. * Only the OUTER panel becomes wider. */ .gsm-products-service-list-v1 #divcontent.gsm-products-mobile-first-subgroup-v718 > .divTableR, .gsm-products-service-list-v1 #service-search-live-results.service-search-live-results .divTableR { margin-left: 0 !important; margin-right: 0 !important; } /* Match desktop: subgroup is 14px from the wider panel's left edge. */ .gsm-products-service-list-v1 .service-search-main .table-service.gsm-service-table-v105 > tbody > .tr-header > td[colspan="6"] { padding-left: 14px !important; padding-right: 8px !important; } .gsm-products-service-list-v1 .service-search-main .table-service.gsm-service-table-v105 > tbody > .tr-header > td[colspan="6"] .link-subgroup, .gsm-products-service-list-v1 .service-search-main .table-service.gsm-service-table-v105 > tbody > .tr-header > td[colspan="6"] .h-type0, .gsm-products-service-list-v1 .service-search-main .table-service.gsm-service-table-v105 > tbody > .tr-header > td[colspan="6"] .h-type1 { margin-left: 0 !important; padding-left: 0 !important; } }