/*
 * SNetworks brand overlay for the FOSSBilling Huraga theme
 *
 * Author : Hasif Ahmed <xmart@live.com>
 * Site   : https://www.hasif.info
 *
 * Loaded after the compiled huraga-bundle.css so the cascade overrides the
 * Bootstrap 5.3 defaults without requiring an Encore rebuild. The palette and
 * type ramp mirror snetworksclassifieds.com (Geist + Tailwind red-600).
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

:root,
[data-bs-theme="light"] {
    /* Brand palette pulled from snetworksclassifieds.com */
    --snc-red-50:  #fef2f2;
    --snc-red-100: #fee2e2;
    --snc-red-500: #ef4444;
    --snc-red-600: #dc2626; /* primary */
    --snc-red-700: #b91c1c; /* hover / active */
    --snc-red-800: #991b1b;
    --snc-amber:   #f59e0b; /* logo accent */

    /* Emerald palette for friendly affirmative cues (price chips, success
       confirmations) – red-600 is the brand colour and must stay reserved
       for CTAs / brand surfaces. Greens borrow Tailwind's emerald scale so
       they sit alongside the red without colour-clash. */
    --snc-emerald-50:  #ecfdf5;
    --snc-emerald-100: #d1fae5;
    --snc-emerald-200: #a7f3d0;
    --snc-emerald-700: #047857;
    --snc-emerald-800: #065f46;

    --snc-gray-50:  #f9fafb;
    --snc-gray-100: #f3f4f6;
    --snc-gray-200: #e5e7eb;
    --snc-gray-300: #d1d5db;
    --snc-gray-500: #6b7280;
    --snc-gray-600: #4b5563;
    --snc-gray-700: #374151;
    --snc-gray-900: #111827;

    /* Bootstrap variable overrides */
    --bs-primary:        var(--snc-red-600);
    --bs-primary-rgb:    220, 38, 38;
    --bs-link-color:     var(--snc-red-600);
    --bs-link-color-rgb: 220, 38, 38;
    --bs-link-hover-color:     var(--snc-red-700);
    --bs-link-hover-color-rgb: 185, 28, 28;
    --bs-body-bg:        #ffffff;
    --bs-body-color:     var(--snc-gray-700);
    --bs-body-font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-size: 0.95rem;
    --bs-body-font-weight: 400;
    --bs-border-color:   var(--snc-gray-200);
    --bs-secondary-color: var(--snc-gray-500);
    --bs-tertiary-bg:    var(--snc-gray-50);
}

html,
body {
    background-color: var(--snc-gray-50);
}

body {
    font-family: var(--bs-body-font-family);
    color: var(--snc-gray-700);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bs-body-font-family);
    color: var(--snc-gray-900);
    font-weight: 700;
    letter-spacing: -0.02em;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

code, pre, kbd, samp {
    font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* Top navigation – mirrors snetworksclassifieds.com: white sticky bar,
   slim border, larger logo, light nav links, brand-red filled CTA. */
.container > header,
header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

.container > header > .navbar,
header .navbar {
    background-color: transparent;
    border-bottom: 1px solid var(--snc-gray-200);
    margin-bottom: 1.5rem;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

header .navbar .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

header .navbar .navbar-brand img {
    max-height: 50px;
    width: auto;
    transition: opacity 0.15s ease;
    /* Taps pass straight through the image to the <a>, so the logo always
       navigates home; mobile browsers no longer show the image callout
       ("open/save image") when the logo is tapped. */
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

header .navbar .navbar-brand:hover img {
    opacity: 0.85;
}

header .navbar .nav-link {
    color: var(--snc-gray-700);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: -0.005em;
    padding: 0.45rem 0.95rem;
    border-radius: 0.5rem;
    transition: color 0.15s ease, background 0.15s ease;
}

header .navbar .nav-link:hover {
    color: var(--snc-red-600);
    background-color: var(--snc-gray-50);
}

header .navbar .dropdown-toggle.btn {
    color: var(--snc-gray-700);
    background: transparent;
    border: 0;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.45rem 0.85rem;
}

/* Top-right "Register" button is rendered as btn-outline-primary by the
   theme. The brand site uses a filled red CTA for the equivalent action,
   so we promote it inside the navbar only. */
header .navbar .btn-outline-primary {
    background-color: var(--snc-red-600);
    border-color: var(--snc-red-600);
    color: #ffffff;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.18);
}

header .navbar .btn-outline-primary:hover,
header .navbar .btn-outline-primary:focus {
    background-color: var(--snc-red-700);
    border-color: var(--snc-red-700);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
    transform: translateY(-1px);
}

/* Vertically centre everything in the right-hand nav cluster so the
   language pill, text links and account menu sit on one line. */
header .navbar .navbar-nav {
    align-items: center;
}

/* Language selector – sits in the footer. TomSelect renders the <select>
   as a full-width bordered form control by default; slim it into a quiet,
   compact flag pill that shrinks to its own content. */
#footer .ts-wrapper {
    display: inline-block;
    width: auto;
    min-width: 0;
    margin: 0;
}

#footer .ts-wrapper .ts-control,
#footer .ts-wrapper.single .ts-control {
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0.35rem 1.4rem 0.35rem 0.55rem;
    border: 1px solid var(--snc-gray-200);
    border-radius: 0.5rem;
    background-color: #ffffff;
    box-shadow: none;
    font-size: 0.8rem;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#footer .ts-wrapper:hover .ts-control,
#footer .ts-wrapper.focus .ts-control,
#footer .ts-wrapper.dropdown-active .ts-control {
    background-color: var(--snc-gray-50);
    border-color: var(--snc-gray-300);
}

#footer .ts-control .item {
    color: var(--snc-gray-700);
    font-weight: 600;
    letter-spacing: 0.02em;
}

#footer .ts-control .fi {
    margin-right: 0.4rem;
    border-radius: 2px;
}

/* TomSelect single-select caret. */
#footer .ts-wrapper.single .ts-control::after {
    border-color: var(--snc-gray-500) transparent transparent;
    border-width: 4px 4px 0;
    right: 0.55rem;
}

#footer .ts-wrapper.single.dropdown-active .ts-control::after {
    border-color: transparent transparent var(--snc-gray-500);
    border-width: 0 4px 4px;
}

/* Language list opens upward – the selector sits at the bottom of the page. */
#footer .ts-dropdown {
    width: auto;
    min-width: 100%;
    top: auto;
    bottom: 100%;
    margin: 0 0 0.35rem;
    border: 1px solid var(--snc-gray-200);
    border-radius: 0.5rem;
    box-shadow: 0 -8px 24px rgba(17, 24, 39, 0.12);
    font-size: 0.8rem;
}

#footer .ts-dropdown .dropdown-item {
    padding: 0.4rem 0.7rem;
    font-weight: 600;
    color: var(--snc-gray-700);
}

#footer .ts-dropdown .dropdown-item .fi {
    margin-right: 0.4rem;
}

#footer .ts-dropdown .dropdown-item.active,
#footer .ts-dropdown .dropdown-item.active.create {
    background-color: var(--snc-red-50);
    color: var(--snc-red-700);
}

/* Slim language selector inside the nav so it matches link weight */
header .navbar .ts-wrapper .ts-control,
header .navbar .form-select {
    font-size: 0.85rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    border-color: var(--snc-gray-200);
    background-color: var(--snc-gray-50);
}

/* Buttons – brand red primary, white outline secondary */
.btn {
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.55rem 1.1rem;
    transition: all 0.15s ease;
}

.btn-primary {
    background-color: var(--snc-red-600);
    border-color: var(--snc-red-600);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--snc-red-700);
    border-color: var(--snc-red-700);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
    transform: translateY(-1px);
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--snc-red-800) !important;
    border-color: var(--snc-red-800) !important;
    transform: translateY(0);
}

.btn-outline-primary {
    color: var(--snc-red-600);
    border-color: var(--snc-red-600);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--snc-red-600);
    border-color: var(--snc-red-600);
    color: #ffffff;
}

.btn-link {
    color: var(--snc-red-600);
}

.btn-link:hover {
    color: var(--snc-red-700);
}

/* Cards – soft, modern shells */
.card {
    border: 1px solid var(--snc-gray-200);
    border-radius: 0.75rem;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04);
}

.card-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--snc-gray-200);
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--snc-gray-900);
}

.card-header h1,
.card-header h2,
.card-header h3 {
    margin-bottom: 0;
}

.card-body {
    padding: 1.25rem;
}

/* Forms – cleaner inputs with red focus ring */
.form-control,
.form-select {
    border-radius: 0.5rem;
    border-color: var(--snc-gray-300);
    padding: 0.55rem 0.85rem;
    color: var(--snc-gray-900);
    background-color: #ffffff;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--snc-red-500);
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.15);
}

.form-label {
    font-weight: 500;
    color: var(--snc-gray-700);
    margin-bottom: 0.4rem;
}

/* Sidebar / left menu */
.list-group-item {
    border-color: var(--snc-gray-200);
    color: var(--snc-gray-700);
}

.list-group-item.active,
.list-group-item:active {
    background-color: var(--snc-red-600);
    border-color: var(--snc-red-600);
    color: #ffffff;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--snc-red-50);
    color: var(--snc-red-700);
}

/* Tables */
table.table > thead > tr > th {
    color: var(--snc-gray-500);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--snc-gray-200);
}

table.table > tbody > tr > td {
    border-bottom: 1px solid var(--snc-gray-100);
    color: var(--snc-gray-700);
    vertical-align: middle;
}

table.table > tbody > tr:hover {
    background-color: var(--snc-gray-50);
}

/* Badges & pills */
.badge {
    font-weight: 600;
    border-radius: 0.375rem;
    padding: 0.35em 0.6em;
}

.badge.bg-primary,
.bg-primary {
    background-color: var(--snc-red-600) !important;
}

.text-primary {
    color: var(--snc-red-600) !important;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.breadcrumb-item a {
    color: var(--snc-gray-500);
}

.breadcrumb-item a:hover {
    color: var(--snc-red-600);
}

.breadcrumb-item.active {
    color: var(--snc-gray-900);
    font-weight: 500;
}

/* Alerts */
.alert {
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font-weight: 500;
}

.alert-primary {
    background-color: var(--snc-red-50);
    border-color: var(--snc-red-100);
    color: var(--snc-red-800);
}

/* Footer */
#footer,
footer {
    color: var(--snc-gray-500);
    padding-top: 1.5rem;
    border-top: 1px solid var(--snc-gray-200);
    margin-top: 2.5rem !important;
}

#footer a {
    color: var(--snc-gray-600);
}

#footer a:hover {
    color: var(--snc-red-600);
}

/* Login / signup / password-reset card polish */
.page-login .card,
.page-signup .card,
.page-password-reset .card {
    max-width: 460px;
    margin: 4rem auto;
    border-radius: 1rem;
    border: 1px solid var(--snc-gray-200);
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
}

.page-login .card .card-header,
.page-signup .card .card-header,
.page-password-reset .card .card-header {
    border-bottom: 0;
    text-align: center;
    background: transparent;
    padding-top: 2rem;
}

.page-login .card .card-header h1,
.page-signup .card .card-header h1,
.page-password-reset .card .card-header h1 {
    font-size: 1.5rem;
    color: var(--snc-gray-900);
}

.page-login .card .card-body,
.page-signup .card .card-body,
.page-password-reset .card .card-body {
    padding: 1.5rem 2rem 2rem;
}

/* Public auth layout – brand-tinted backdrop */
body.page-login,
body.page-signup,
body.page-password-reset {
    background: linear-gradient(180deg, var(--snc-gray-50) 0%, #ffffff 100%);
    min-height: 100vh;
}

/* Dropdowns */
.dropdown-menu {
    border-radius: 0.5rem;
    border: 1px solid var(--snc-gray-200);
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
    padding: 0.35rem;
}

.dropdown-item {
    border-radius: 0.375rem;
    color: var(--snc-gray-700);
    padding: 0.45rem 0.65rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--snc-red-50);
    color: var(--snc-red-700);
}

/* Pagination */
.pagination .page-link {
    color: var(--snc-red-600);
    border-color: var(--snc-gray-200);
}

.pagination .page-item.active .page-link {
    background-color: var(--snc-red-600);
    border-color: var(--snc-red-600);
}

/* Spinner / loaders use brand red */
.spinner-border {
    color: var(--snc-red-600);
}

/* Accordion */
.accordion-button:not(.collapsed) {
    color: var(--snc-red-700);
    background-color: var(--snc-red-50);
    box-shadow: inset 0 -1px 0 var(--snc-red-100);
}

.accordion-button:focus {
    border-color: var(--snc-red-500);
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.15);
}

/* Top scroll-to-top button */
.btn-primary.position-fixed {
    border-radius: 999px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Order configurator (/order, /order?product=N)
   The default Huraga markup is a flat striped-table accordion that signals
   "spreadsheet" instead of "purchase". The rules below operate on the
   stock module markup and lift it into a conversion-oriented sales surface.
   ========================================================================== */

/* Accordion shell – each step gets card-like elevation and brand-red active state */
#orderManager.accordion {
    --bs-accordion-border-color:        var(--snc-gray-200);
    --bs-accordion-border-radius:       0.75rem;
    --bs-accordion-inner-border-radius: 0.65rem;
    --bs-accordion-active-color:        var(--snc-red-700);
    --bs-accordion-active-bg:           #ffffff;
    --bs-accordion-btn-focus-border-color: var(--snc-red-500);
    --bs-accordion-btn-focus-box-shadow:  0 0 0 0.2rem rgba(220, 38, 38, 0.15);
    gap: 0.85rem;
    display: flex;
    flex-direction: column;
}

#orderManager .accordion-item {
    border: 1px solid var(--snc-gray-200);
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    overflow: hidden;
}

#orderManager .accordion-header {
    margin: 0;
}

#orderManager .accordion-button {
    background-color: #ffffff;
    color: var(--snc-gray-900);
    font-weight: 600;
    font-size: 1rem;
    padding: 1rem 1.25rem;
    box-shadow: none;
    border-radius: 0.75rem;
    transition: background 0.15s ease, color 0.15s ease;
}

#orderManager .accordion-button:not(.collapsed) {
    background-color: var(--snc-red-50);
    color: var(--snc-red-700);
    box-shadow: inset 0 -1px 0 var(--snc-red-100);
}

#orderManager .accordion-button:hover {
    background-color: var(--snc-gray-50);
}

#orderManager .accordion-button:not(.collapsed):hover {
    background-color: var(--snc-red-50);
}

#orderManager .accordion-button .svg-icon {
    color: var(--snc-red-600);
    transition: transform 0.2s ease;
}

#orderManager .accordion-button:not(.collapsed) .svg-icon {
    transform: rotate(8deg) scale(1.05);
}

#orderManager .accordion-body {
    padding: 1.5rem 1.5rem 1.75rem;
}

/* Item count badges next to "Select Product" / "Cart" – brand-tinted */
#orderManager .accordion-button .badge.bg-info,
#orderManager .accordion-button .badge.bg-success {
    background-color: var(--snc-red-100) !important;
    color: var(--snc-red-700) !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.25em 0.7em;
    margin-left: 0.4rem;
}

/* Product description / markdown blocks – constrained reading width */
#orderManager .accordion-body .well > h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

#orderManager .accordion-body .well > p,
#orderManager .accordion-body .well > ul,
#orderManager .accordion-body .well > ol {
    max-width: 70ch;
    color: var(--snc-gray-600);
    line-height: 1.6;
}

/* Billing block – pricing and cycle selector pop.
   Price chips read as "good news / accept this", so use emerald instead of
   the brand red (which is reserved for CTAs and reads as danger here). */
#orderManager .accordion-body .well .badge.bg-success {
    background-color: var(--snc-emerald-50) !important;
    color: var(--snc-emerald-700) !important;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.5em 0.9em;
    border-radius: 0.5rem;
    border: 1px solid var(--snc-emerald-100);
}

#orderManager .accordion-body h5 {
    font-size: 1rem;
    color: var(--snc-gray-900);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--snc-gray-200);
}

#orderManager .accordion-body h5:first-of-type {
    border-top: 0;
    padding-top: 0;
}

/* Addons table – kill the spreadsheet vibe */
#orderManager table.table-striped {
    --bs-table-striped-bg: transparent;
    border: 0;
    margin-top: 0.5rem;
}

#orderManager table.table-striped > tbody > tr {
    transition: background 0.15s ease;
}

#orderManager table.table-striped > tbody > tr > td {
    border-top: 1px solid var(--snc-gray-100);
    border-bottom: 0;
    padding: 1rem 0.75rem;
    vertical-align: middle;
}

#orderManager table.table-striped > tbody > tr:first-child > td {
    border-top: 0;
}

#orderManager table.table-striped > tbody > tr:hover {
    background: var(--snc-gray-50);
}

#orderManager table.table-striped h6 {
    color: var(--snc-gray-900);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

#orderManager table.table-striped p {
    color: var(--snc-gray-500);
    font-size: 0.875rem;
    line-height: 1.55;
    margin-bottom: 0;
    max-width: 60ch;
}

/* Right column = price + action pill, single row pinned to the right edge.
   The upstream <td> stacks <label class="currency"> over <div class="float-end">.
   - Force the description cell to consume all remaining width so the action
     cell shrink-wraps its content and naturally sits at the row's far right.
   - Make the action cell a flex container so the price chip and the action
     pill line up as a single right-justified row, vertically centred. */
#orderManager table.table-striped > tbody > tr > td:nth-child(2) {
    width: 100%;
}

#orderManager table.table-striped > tbody > tr > td:last-child {
    width: auto !important;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
    padding-left: 1.5rem;
    padding-right: 0;
}

#orderManager table.table-striped > tbody > tr > td:last-child > .currency,
#orderManager table.table-striped > tbody > tr > td:last-child > .float-end {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    float: none !important;
    margin: 0;
}

#orderManager table.table-striped > tbody > tr > td:last-child > .currency {
    margin-right: 0.85rem;
}

/* Addon price pill – emerald reads as "easy to accept" instead of the
   alarm-bell red the brand colour gives off when applied to currency. */
#orderManager table.table-striped .currency .badge.bg-success {
    background: var(--snc-emerald-50) !important;
    color: var(--snc-emerald-700) !important;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.45em 0.75em;
    border-radius: 0.5rem;
    border: 1px solid var(--snc-emerald-100);
    display: inline-block;
    margin-bottom: 0;
    line-height: 1.2;
}

/* Addon select (recurring period) – cleaner */
#orderManager table.table-striped .currency .form-select {
    border-color: var(--snc-gray-300);
    background-color: #ffffff;
    margin-bottom: 0;
    max-width: 220px;
    height: 2.4rem;
}

/* Add / Remove toggle – single visual switch
   The stock template renders two radio buttons (accept + decline) side by
   side. That reads as "checkmark vs cross" which is confusing. We turn it
   into one wide pill that toggles between "+ Add to cart" (gray outline)
   and "✓ In cart" (brand-red filled), with a small "×" remove affordance
   that only appears once an addon is selected. */
#orderManager table.table-striped .float-end {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    min-width: 170px;
    justify-content: flex-end;
}

#orderManager table.table-striped .btn-check + .btn {
    border-radius: 0.5rem;
    height: 2.4rem;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-weight: 600;
    font-size: 0.9rem;
}

/* The "Add" button: hide the SVG, use ::after for label text */
#orderManager table.table-striped .btn-outline-success {
    color: var(--snc-gray-700);
    border: 1px solid var(--snc-gray-300);
    background: #ffffff;
    min-width: 130px;
}

#orderManager table.table-striped .btn-outline-success > svg {
    display: none;
}

#orderManager table.table-striped .btn-outline-success::before {
    content: "+";
    font-size: 1.15rem;
    line-height: 1;
    margin-right: 0.45rem;
    font-weight: 700;
}

#orderManager table.table-striped .btn-outline-success::after {
    content: "Add to cart";
}

#orderManager table.table-striped .btn-outline-success:hover {
    border-color: var(--snc-red-600);
    color: var(--snc-red-700);
    background: var(--snc-red-50);
}

#orderManager table.table-striped .btn-check:checked + .btn-outline-success {
    background-color: var(--snc-red-600);
    border-color: var(--snc-red-600);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.22);
}

#orderManager table.table-striped .btn-check:checked + .btn-outline-success::before {
    content: "✓";
    font-size: 0.95rem;
    margin-right: 0.4rem;
}

#orderManager table.table-striped .btn-check:checked + .btn-outline-success::after {
    content: "In cart";
}

/* The "Remove" button: hide entirely until a positive selection exists,
   then surface as a tiny tertiary "×" button to the right of "In cart". */
#orderManager table.table-striped .btn-outline-danger {
    color: var(--snc-gray-400);
    border: 1px solid var(--snc-gray-200);
    background: transparent;
    width: 2.4rem;
    min-width: 0;
    padding: 0;
    border-radius: 0.5rem;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#orderManager table.table-striped .btn-outline-danger > svg {
    width: 0.85em;
    height: 0.85em;
}

/* Reveal the remove button only after the addon was added to the cart */
#orderManager table.table-striped > tbody > tr:has(.btn-check[value="1"]:checked) .btn-outline-danger {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

#orderManager table.table-striped > tbody > tr:has(.btn-check[value="1"]:checked) .btn-outline-danger:hover {
    color: var(--snc-red-600);
    border-color: var(--snc-red-300, var(--snc-red-500));
    background: var(--snc-red-50);
}

#orderManager table.table-striped .btn-check:checked + .btn-outline-danger {
    color: var(--snc-gray-500);
    border-color: var(--snc-gray-300);
    background: transparent;
}

/* Highlight the whole row when the addon is selected */
#orderManager table.table-striped > tbody > tr:has(.btn-check[value="1"]:checked) {
    background: var(--snc-red-50);
    box-shadow: inset 3px 0 0 var(--snc-red-600);
}

/* ------- Form input layout (formbuilder horizontal forms) -------
   The upstream template hard-codes col-sm-2 / col-sm-10 for label + input.
   That makes long labels like "License Holder Name*" wrap to 3 lines in a
   narrow content column. Re-balance to a cleaner 4 / 8 split with proper
   vertical alignment, and stack on small screens. */
#orderManager .card-body fieldset .row {
    align-items: center;
    margin-bottom: 1rem;
}

#orderManager .card-body fieldset .col-form-label {
    color: var(--snc-gray-700);
    font-weight: 500;
    padding-right: 1rem;
    line-height: 1.3;
}

@media (min-width: 576px) {
    #orderManager .card-body fieldset .col-form-label.col-sm-2 {
        flex: 0 0 33%;
        max-width: 33%;
    }
    #orderManager .card-body fieldset .col-sm-10 {
        flex: 0 0 67%;
        max-width: 67%;
    }
}

@media (min-width: 992px) {
    #orderManager .card-body fieldset .col-form-label.col-sm-2 {
        flex: 0 0 28%;
        max-width: 28%;
    }
    #orderManager .card-body fieldset .col-sm-10 {
        flex: 0 0 72%;
        max-width: 72%;
    }
}

#orderManager .card-body fieldset .form-check {
    margin-bottom: 0.35rem;
    padding-left: 1.75rem;
}

#orderManager .card-body fieldset .form-check:last-child {
    margin-bottom: 0;
}

#orderManager .card-body fieldset .form-text {
    color: var(--snc-gray-500);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Standalone billing block (One-time payment | $79.95) – bigger and
   horizontally aligned so the price sits next to the label, not below. */
#orderManager .accordion-body .well > .row {
    align-items: center;
}

/* Form inputs inside configurator – breathing room */
#orderManager form .form-select,
#orderManager form .form-control,
#orderManager form input[type="text"],
#orderManager form input[type="email"],
#orderManager form input[type="password"],
#orderManager form input[type="url"],
#orderManager form input[type="number"] {
    border-radius: 0.5rem;
    border: 1px solid var(--snc-gray-300);
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

#orderManager form label {
    color: var(--snc-gray-700);
    font-weight: 500;
}

/* Primary "Next" button under product configuration – give it weight */
#orderManager #order .btn-primary,
#orderManager #checkout .btn-primary {
    padding: 0.7rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
}

#orderManager #order .btn-primary:hover,
#orderManager #checkout .btn-primary:hover {
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.32);
}

/* Cart summary table – cleaner */
#orderManager #checkout-inner table {
    border: 1px solid var(--snc-gray-200);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

#orderManager #checkout-inner table th {
    background: var(--snc-gray-50);
    color: var(--snc-gray-500);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--snc-gray-200);
}

#orderManager #checkout-inner table td {
    padding: 0.75rem 0.85rem;
    border-color: var(--snc-gray-100);
    vertical-align: middle;
}

/* Product chooser list-group – brand-tinted hover */
#orderManager .list-group .list-group-item {
    border-radius: 0.5rem;
    margin-bottom: 0.4rem;
    border: 1px solid var(--snc-gray-200);
    color: var(--snc-gray-900);
    font-weight: 500;
    padding: 0.85rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.15s ease;
}

#orderManager .list-group .list-group-item:hover {
    border-color: var(--snc-red-300, var(--snc-red-500));
    background: var(--snc-red-50);
    color: var(--snc-red-700);
    transform: translateX(2px);
}

#orderManager .list-group .list-group-item .svg-icon {
    color: var(--snc-red-600);
}

/* Login/Register tabs inside the cart accordion – read as one block */
#orderManager .register-login {
    margin-bottom: 1rem;
}

/* Hide the noisy "Powered by FOSSBilling" footnote a little lower visual weight */
#orderbutton .text-muted a[href*="fossbilling"] {
    color: var(--snc-gray-400);
}

/* ==========================================================================
   Pricing tables (partial_pricing.html.twig) – give them retail polish
   ========================================================================== */
.pricing-table .card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pricing-table .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(17, 24, 39, 0.1);
    border-color: var(--snc-red-100);
}

/* ==========================================================================
   Addon descriptions – 2-line clamp with "View more" expand
   ========================================================================== */
.addon-desc-wrapper {
    max-width: 60ch;
}

.addon-desc {
    color: var(--snc-gray-500);
    font-size: 0.875rem;
    line-height: 1.55;
    /* Two lines of body text: 0.875rem * 1.55 * 2 ≈ 2.71rem. */
    max-height: calc(0.875rem * 1.55 * 2);
    overflow: hidden;
    position: relative;
    transition: max-height 0.18s ease;
}

/* Soft fade hint that there is more text below the clamp. */
.addon-desc:not(.is-expanded)::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 1.2em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 90%);
    pointer-events: none;
}

#orderManager table.table-striped > tbody > tr:hover .addon-desc:not(.is-expanded)::after {
    background: linear-gradient(to bottom, rgba(249, 250, 251, 0), var(--snc-gray-50) 90%);
}

.addon-desc.is-expanded {
    max-height: none;
}

.addon-desc p:last-child,
.addon-desc ul:last-child,
.addon-desc ol:last-child {
    margin-bottom: 0;
}

.addon-desc-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--snc-red-600);
    cursor: pointer;
    line-height: 1.2;
}

.addon-desc-toggle:hover,
.addon-desc-toggle:focus-visible {
    color: var(--snc-red-700);
    text-decoration: underline;
    outline: none;
}

.addon-desc-toggle[hidden] {
    display: none !important;
}

/* ==========================================================================
   Cart / checkout step – the original template uses Bootstrap-3 grid classes
   (.row-fluid / .span6) that are no-ops in Bootstrap 5 and the totals were
   rendered as a bordered table. The replacement markup uses .cart-* classes
   so we can style it as a clean two-column summary with a calm remove button
   and proper card-style payment options.
   ========================================================================== */

/* Item table - borderless, hairline separators only between rows */
#orderManager .cart-items-table {
    margin-bottom: 1rem;
    --bs-table-striped-bg: transparent;
}

#orderManager .cart-items-table > thead > tr > th {
    border-bottom: 1px solid var(--snc-gray-200);
    color: var(--snc-gray-500);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.85rem 0.75rem;
    background: var(--snc-gray-50);
}

#orderManager .cart-items-table > tbody > tr > td {
    border-top: 1px solid var(--snc-gray-100);
    border-bottom: 0;
    padding: 1rem 0.75rem;
    vertical-align: middle;
    color: var(--snc-gray-700);
}

#orderManager .cart-items-table > tbody > tr:first-child > td {
    border-top: 0;
}

#orderManager .cart-items-table .cart-items-table-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Quiet remove button - ghost icon that goes red on hover instead of a slab
   of black sitting beside the price. */
.cart-remove-btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--snc-gray-500);
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    cursor: pointer;
    padding: 0;
}

.cart-remove-btn:hover,
.cart-remove-btn:focus-visible {
    background: var(--snc-red-50);
    color: var(--snc-red-600);
    border-color: var(--snc-red-100);
    outline: none;
}

.cart-remove-btn:active {
    background: var(--snc-red-100);
}

/* Coupon link - flat red text reads as a stray sentence; give it an icon, a
   chevron and a hover affordance so it looks tappable. */
.cart-coupon-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0.4rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--snc-red-600);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.cart-coupon-toggle:hover,
.cart-coupon-toggle:focus-visible {
    color: var(--snc-red-700);
    text-decoration: underline;
    outline: none;
}

.cart-coupon-toggle-chevron {
    transition: transform 0.15s ease;
    opacity: 0.7;
}

.cart-coupon-toggle:hover .cart-coupon-toggle-chevron {
    transform: translateY(1px);
}

.cart-coupon-form {
    margin-top: 0.6rem;
    max-width: 360px;
}

.cart-coupon-form .input-group .form-control {
    border-color: var(--snc-gray-200);
}

.cart-coupon-form .input-group .form-control:focus {
    border-color: var(--snc-red-500);
    box-shadow: 0 0 0 3px var(--snc-red-50);
}

/* Totals block - replaces the broken table-bordered nested table. */
.cart-totals {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    border-radius: 0.6rem;
    border: 1px solid var(--snc-gray-200);
    background: var(--snc-gray-50);
}

.cart-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.3rem 0;
    color: var(--snc-gray-700);
    font-size: 0.9rem;
}

.cart-totals-row > dt {
    margin: 0;
    font-weight: 500;
    color: var(--snc-gray-600);
}

.cart-totals-row > dd {
    margin: 0;
    font-weight: 600;
    color: var(--snc-gray-900);
    font-variant-numeric: tabular-nums;
}

.cart-totals-row--discount > dd {
    color: var(--snc-emerald-700);
}

.cart-totals-row--grand {
    margin-top: 0.4rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--snc-gray-200);
}

.cart-totals-row--grand > dt {
    font-size: 1rem;
    font-weight: 700;
    color: var(--snc-gray-900);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cart-totals-row--grand > dd {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--snc-emerald-700);
}

/* Payment options - convert raw radios to tap-friendly cards. */
.payment-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.65rem;
    margin: 0 0 1rem;
}

.payment-option {
    display: block;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.payment-option-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.payment-option-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--snc-gray-200);
    border-radius: 0.6rem;
    background: #ffffff;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    min-height: 56px;
}

.payment-option:hover .payment-option-card {
    border-color: var(--snc-gray-300);
    background: var(--snc-gray-50);
}

.payment-option-input:focus-visible + .payment-option-card {
    box-shadow: 0 0 0 3px var(--snc-red-50);
    border-color: var(--snc-red-500);
}

.payment-option-input:checked + .payment-option-card {
    border-color: var(--snc-red-600);
    background: var(--snc-red-50);
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.12);
}

.payment-option-logo {
    flex: 0 0 auto;
    width: 40px;
    height: 28px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.payment-option-title {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--snc-gray-900);
    font-size: 0.9rem;
    line-height: 1.25;
}

.payment-option-radio {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--snc-gray-300);
    background: #ffffff;
    position: relative;
    transition: border-color 0.12s ease;
}

.payment-option:hover .payment-option-radio {
    border-color: var(--snc-gray-500);
}

.payment-option-input:checked + .payment-option-card .payment-option-radio {
    border-color: var(--snc-red-600);
}

.payment-option-input:checked + .payment-option-card .payment-option-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--snc-red-600);
}

/* Big primary action so the eye lands on it after the totals */
.cart-checkout-btn {
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
}

@media (max-width: 767.98px) {
    .cart-summary-row {
        --bs-gutter-y: 1.25rem;
    }
    .payment-options {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Mobile header - keep the SNetworks logo visible on phones
   ========================================================================== */
header .navbar .navbar-brand img {
    max-height: 50px;
    width: auto;
    max-width: 60vw;
}

@media (max-width: 575.98px) {
    header .navbar {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
    header .navbar .navbar-brand img {
        max-height: 38px;
    }
}

/* ==========================================================================
   Select Product step – hero (Script Purchase) vs secondary categories
   ==========================================================================
   The /order page lists every product category at equal weight, which buries
   the primary revenue path (script license purchase) under addons, hosting
   and services. The choose_product template now wraps each category in a
   `.category-block` with `--hero` for the first entry and `--secondary` for
   the rest, so we can sell the script purchase loud and quiet the rest into
   a "more options" tray underneath.
   ========================================================================== */

/* Hero category – the first one (Script Purchase) gets a real sales card
   feel: branded heading, larger product tiles, prominent arrow CTA. */
#orderManager .accordion-body .category-block--hero {
    position: relative;
    margin: 0.5rem 0 1.75rem 0;
    padding: 1.25rem 1.25rem 1.5rem 1.25rem;
    background: linear-gradient(180deg, var(--snc-red-50) 0%, #ffffff 70%);
    border: 1px solid var(--snc-red-100);
    border-radius: 0.85rem;
    box-shadow: 0 8px 28px rgba(220, 38, 38, 0.06);
}

#orderManager .accordion-body .category-block--hero::before {
    content: 'Start here';
    position: absolute;
    top: -0.65rem;
    left: 1.1rem;
    background: var(--snc-red-600);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.25);
}

#orderManager .accordion-body .category-block--hero > h5 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--snc-gray-900);
    text-transform: none;
    letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
}

#orderManager .accordion-body .category-block--hero > span {
    display: block;
    color: var(--snc-gray-600);
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 1rem;
    max-width: 56ch;
}

#orderManager .accordion-body .category-block--hero .list-group {
    gap: 0.65rem;
    background: transparent;
}

#orderManager .accordion-body .category-block--hero .list-group-item {
    background: #ffffff;
    border: 1px solid var(--snc-gray-200);
    border-radius: 0.75rem !important;
    padding: 1.05rem 1.2rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--snc-gray-900);
    box-shadow: 0 2px 6px rgba(17, 24, 39, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

#orderManager .accordion-body .category-block--hero .list-group-item:hover,
#orderManager .accordion-body .category-block--hero .list-group-item:focus-visible {
    transform: translateY(-2px);
    border-color: var(--snc-red-500);
    box-shadow: 0 12px 28px rgba(220, 38, 38, 0.18);
    color: var(--snc-red-700);
    outline: none;
}

#orderManager .accordion-body .category-block--hero .list-group-item .svg-icon {
    fill: var(--snc-red-600);
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.15s ease;
}

#orderManager .accordion-body .category-block--hero .list-group-item:hover .svg-icon {
    transform: translateX(4px);
}

/* Secondary categories – addons, hosting, services, SEO, databases. Visually
   demoted into a single subtle group so they read as "additional options"
   instead of competing for attention with the script purchase. */
#orderManager .accordion-body .category-block--secondary {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: var(--snc-gray-50);
    border: 1px solid var(--snc-gray-200);
    border-radius: 0.6rem;
}

#orderManager .accordion-body .category-block--secondary > h5 {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--snc-gray-700);
    margin-bottom: 0.2rem;
    margin-top: 0;
}

#orderManager .accordion-body .category-block--secondary > span {
    display: block;
    color: var(--snc-gray-500);
    font-size: 0.825rem;
    line-height: 1.5;
    margin-bottom: 0.65rem;
}

#orderManager .accordion-body .category-block--secondary .list-group {
    gap: 0;
}

#orderManager .accordion-body .category-block--secondary .list-group-item {
    background: #ffffff;
    border: 1px solid var(--snc-gray-200);
    border-radius: 0 !important;
    margin: 0;
    padding: 0.7rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--snc-gray-700);
    box-shadow: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

#orderManager .accordion-body .category-block--secondary .list-group-item:first-child {
    border-radius: 0.45rem 0.45rem 0 0 !important;
}

#orderManager .accordion-body .category-block--secondary .list-group-item:last-child {
    border-radius: 0 0 0.45rem 0.45rem !important;
}

#orderManager .accordion-body .category-block--secondary .list-group-item:only-child {
    border-radius: 0.45rem !important;
}

#orderManager .accordion-body .category-block--secondary .list-group-item + .list-group-item {
    border-top: 0;
}

#orderManager .accordion-body .category-block--secondary .list-group-item:hover,
#orderManager .accordion-body .category-block--secondary .list-group-item:focus-visible {
    background: var(--snc-red-50);
    color: var(--snc-red-700);
    outline: none;
}

#orderManager .accordion-body .category-block--secondary .list-group-item .svg-icon {
    fill: var(--snc-gray-500);
    width: 1rem;
    height: 1rem;
    transition: fill 0.12s ease;
}

#orderManager .accordion-body .category-block--secondary .list-group-item:hover .svg-icon {
    fill: var(--snc-red-600);
}

/* Mobile tweaks for the hero / secondary categories */
@media (max-width: 575.98px) {
    #orderManager .accordion-body .category-block--hero {
        padding: 1rem 0.85rem 1.2rem 0.85rem;
    }
    #orderManager .accordion-body .category-block--hero > h5 {
        font-size: 1.15rem;
    }
    #orderManager .accordion-body .category-block--hero .list-group-item {
        font-size: 0.95rem;
        padding: 0.85rem 1rem;
    }
}

/* ==========================================================================
   Mobile pass – tighten layout for phones (<= 767px)
   ==========================================================================
   The Huraga base is responsive thanks to Bootstrap, but the brand overlay
   widens type, padding and table cells aggressively for desktop sales feel.
   These rules walk that back on small viewports so nothing horizontally
   scrolls and the order configurator stays thumb-friendly.
   ========================================================================== */

/* ---- Phones (extra-small + small, < 768px) ----------------------------- */
@media (max-width: 767.98px) {
    /* Sticky header – tighter padding and smaller logo so the toggler,
       language dropdown and brand mark all fit a 360px viewport. */
    .container > header,
    header {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }
    .container > header .navbar,
    header .navbar {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    .navbar-brand img {
        height: 36px !important;
        width: auto;
    }
    /* The language <select> rendered in the navbar would otherwise fight
       the toggler for space – cap it to its content. */
    .navbar .js-language-selector {
        max-width: 130px;
    }

    /* Cards / accordion – reduce internal padding so the readable area
       isn't crowded by the brand-thick borders on a 360px screen. */
    #orderManager .accordion-button,
    #orderManager .accordion-body,
    #orderManager .card-body {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }
    #orderManager .accordion-button {
        font-size: 0.95rem;
    }
    #orderManager h3 {
        font-size: 1.25rem;
    }

    /* Addon table – stop forcing a desktop-style three-column layout.
       Each row collapses to a vertical stack: title+description on top,
       then price + action pill flush against the right edge. The icon
       column shrinks to 32px so it no longer eats horizontal space. */
    #orderManager table.table-striped {
        display: block;
        width: 100% !important;
    }
    #orderManager table.table-striped > tbody {
        display: block;
        width: 100%;
    }
    #orderManager table.table-striped > tbody > tr {
        display: grid;
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto auto;
        column-gap: 0.6rem;
        row-gap: 0.4rem;
        padding: 0.65rem 0.75rem !important;
        align-items: start;
    }
    #orderManager table.table-striped > tbody > tr > td {
        display: block;
        width: auto !important;
        padding: 0 !important;
        border: 0;
        background: transparent;
    }
    /* Icon cell (col 1, row 1) */
    #orderManager table.table-striped > tbody > tr > td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }
    #orderManager table.table-striped > tbody > tr > td:nth-child(1) img {
        width: 32px !important;
        height: auto;
    }
    /* Description cell (col 2, row 1) */
    #orderManager table.table-striped > tbody > tr > td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }
    #orderManager table.table-striped > tbody > tr > td:nth-child(2) h6 {
        font-size: 0.95rem;
        margin-bottom: 0.25rem;
    }
    /* When there's no icon (td:first-child is hidden) the description
       expands to span both columns. */
    #orderManager table.table-striped > tbody > tr > td:nth-child(1)[style*="display: none"] + td {
        grid-column: 1 / -1;
    }
    /* Price + action cell – span the full row underneath, right-aligned. */
    #orderManager table.table-striped > tbody > tr > td:last-child {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: right;
        white-space: nowrap;
        padding-top: 0.25rem !important;
    }
    #orderManager table.table-striped > tbody > tr > td:last-child > .currency,
    #orderManager table.table-striped > tbody > tr > td:last-child > .float-end {
        display: inline-flex !important;
        vertical-align: middle;
        margin: 0;
    }
    /* Larger touch target for the add/remove pill on mobile. */
    #orderManager table.table-striped .btn-outline-success,
    #orderManager table.table-striped .btn-outline-danger {
        padding: 0.5rem 0.85rem !important;
        font-size: 0.875rem !important;
        min-height: 40px;
    }
    /* The clamp's max-width was 60ch; on a 360px screen that overshoots
       so let it flex with the cell. */
    .addon-desc-wrapper {
        max-width: none;
    }

    /* Cart summary table – clip overflow so long product names don't
       blow out the viewport, and let amounts wrap onto a new line. */
    #orderManager .table-responsive,
    #orderManager .cart-summary {
        font-size: 0.85rem;
    }

    /* Sticky CTAs – the "Next" / "Checkout" buttons stay full-width
       on phones so they're easy to tap without precision. */
    #orderManager .accordion-body .text-end > .btn-primary,
    #orderManager .accordion-body .text-end > .btn-success {
        width: 100%;
        margin-top: 0.5rem;
    }

    /* Floating "Top" button – bring it inboard so it doesn't sit on
       top of the viewport's bottom-right corner where the iOS Safari
       toolbar lives. */
    .position-fixed.btn.bottom-0.end-0 {
        bottom: 1rem !important;
        right: 1rem !important;
    }

    /* Form labels stack above inputs on phones (Bootstrap default for
       col-sm-*) – give them a bit more emphasis so they don't read
       like body copy. */
    #orderManager .card-body fieldset .col-form-label {
        font-weight: 600;
        margin-bottom: 0.15rem;
    }
}

/* ---- Extra-small phones only (< 576px) -------------------------------- */
@media (max-width: 575.98px) {
    /* Body type ramp slightly smaller so the accordion + tables read
       comfortably without horizontal scroll on 320–375px devices. */
    body {
        font-size: 0.9rem;
    }
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.25rem; }
    h3, .h3 { font-size: 1.15rem; }
    /* Breadcrumb – hide separators on phones, the `Home / Order` chain
       is short enough that the visual noise outweighs the value. */
    .breadcrumb {
        font-size: 0.8rem;
    }
    /* Footer – stack the link list with smaller spacing. */
    #footer {
        text-align: center;
        font-size: 0.75rem;
    }
}

/* ======================================================================
   Dashboard – compact KPI summary
   Replaces the four full-height stat cards (Profile / Invoices / Orders /
   Tickets) on the client dashboard with a slim identity bar, a wrapping
   strip of KPI tiles, and a quick-action row. Class names are namespaced
   with `snc-` to avoid collisions with Bootstrap / huraga base styles.
   ====================================================================== */

/* ---- Identity bar ----------------------------------------------------- */
.snc-id-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    background-color: #fff;
    border: 1px solid var(--snc-gray-200);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
}

.snc-id-bar__info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--snc-gray-600);
}

.snc-id-bar__name {
    font-weight: 600;
    color: var(--snc-gray-900);
}

/* Thin vertical divider between identity fields. */
.snc-id-bar__sep {
    width: 1px;
    height: 0.85rem;
    background-color: var(--snc-gray-300);
}

.snc-id-bar__link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--snc-red-600);
    text-decoration: none;
    white-space: nowrap;
}

.snc-id-bar__link:hover {
    color: var(--snc-red-700);
}

/* ---- KPI tile strip --------------------------------------------------- */
/* auto-fit + minmax lets the row wrap on its own – no media queries. */
.snc-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.snc-kpi {
    display: block;
    background-color: #fff;
    border: 1px solid var(--snc-gray-200);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.snc-kpi:hover {
    border-color: var(--snc-gray-300);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
    transform: translateY(-2px);
}

.snc-kpi__ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background-color: var(--snc-gray-100);
    color: var(--snc-gray-600);
    font-size: 0.8rem;
    margin-bottom: 0.55rem;
}

.snc-kpi__num {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--snc-gray-900);
}

.snc-kpi__lbl {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--snc-gray-500);
}

.snc-kpi__sub {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--snc-gray-500);
}

/* Attention state – tile carries a metric that needs the client's action. */
.snc-kpi--warn {
    border-color: var(--snc-amber);
    background-color: #fffbeb;
}

.snc-kpi--warn .snc-kpi__ic {
    background-color: #fde68a;
    color: #92400e;
}

.snc-kpi--warn .snc-kpi__num {
    color: #b45309;
}

/* ---- Quick actions ---------------------------------------------------- */
.snc-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* ======================================================================
   Client sidebar navigation - modern restyle
   The base huraga bundle renders the sidebar as full-width rows split by
   1px dividers (`.offcanvas-item` borders) - a dated, table-like look.
   This restyles it into a compact card-style nav: rounded items, soft
   hover, and a branded active state. Scoped to `#sidebarMenu` so it wins
   over the compiled bundle without `!important`.
   ====================================================================== */

#sidebarMenu .offcanvas-body {
    padding: 0.5rem 0.35rem;
}

#sidebarMenu .nav.flex-column {
    gap: 2px;
}

/* Drop the base theme's row dividers, hover fill and grey link colour. */
#sidebarMenu .offcanvas-item,
#sidebarMenu .offcanvas-item:first-child {
    border: 0;
}

#sidebarMenu .offcanvas-item:hover {
    background: transparent;
}

#sidebarMenu .offcanvas-item > a {
    color: var(--snc-gray-700);
}

#sidebarMenu .nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.7rem;
    border-radius: 9px;
    font-weight: 500;
    color: var(--snc-gray-700);
    transition: background-color 0.15s ease, color 0.15s ease;
}

#sidebarMenu .nav-link .svg-icon {
    color: var(--snc-gray-500);
    transition: color 0.15s ease;
}

#sidebarMenu .nav-link:hover {
    background-color: var(--snc-gray-100);
    color: var(--snc-gray-900);
}

#sidebarMenu .nav-link:hover .svg-icon {
    color: var(--snc-gray-700);
}

/* Active page - branded soft-tint pill with a left accent bar. */
#sidebarMenu .nav-link.active {
    background-color: var(--snc-red-50);
    color: var(--snc-red-700);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--snc-red-600);
}

#sidebarMenu .nav-link.active .svg-icon {
    color: var(--snc-red-600);
}

/* Account balance - a compact card instead of bare stacked text. */
#sidebarMenu .sidebar-balance {
    margin-top: 0.8rem;
    padding: 0.85rem 0.9rem;
    background-color: #fff;
    border: 1px solid var(--snc-gray-200);
    border-radius: 12px;
}

#sidebarMenu .sidebar-card__label {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--snc-gray-500);
}

#sidebarMenu .sidebar-balance__value {
    margin: 0.15rem 0 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--snc-gray-900);
}

#sidebarMenu .sidebar-note {
    margin-top: 0.8rem;
    padding: 0 0.7rem;
}

#sidebarMenu .sidebar-note span {
    font-size: 0.85rem;
    color: var(--snc-gray-600);
}

/* ======================================================================
   Logged-out home page - product showcase
   Leads the guest landing page with the first product category rendered
   as marketing cards. Each card links into the order flow with that
   product pre-selected.
   ====================================================================== */

.snc-promo {
    margin-bottom: 2rem;
}

.snc-promo__head {
    max-width: 640px;
    margin: 0.5rem auto 1.5rem;
    text-align: center;
}

.snc-promo__title {
    margin-bottom: 0.4rem;
    font-weight: 700;
    color: var(--snc-gray-900);
}

.snc-promo__sub {
    margin: 0;
    color: var(--snc-gray-500);
}

.snc-promo-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem 1.35rem;
    background-color: #fff;
    border: 1px solid var(--snc-gray-200);
    border-radius: 14px;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.snc-promo-card:hover {
    border-color: var(--snc-gray-300);
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.1);
    transform: translateY(-3px);
}

.snc-promo-card--featured {
    border-color: var(--snc-red-600);
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.12);
}

.snc-promo-card__badge {
    align-self: flex-start;
    margin-bottom: 0.6rem;
    padding: 0.2rem 0.6rem;
    background-color: var(--snc-red-600);
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
}

.snc-promo-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--snc-gray-900);
}

.snc-promo-card__desc {
    margin-bottom: 1rem;
    color: var(--snc-gray-600);
    font-size: 0.88rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.snc-promo-card__price {
    margin: 0 0 1.1rem;
}

.snc-promo-card__price-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--snc-gray-500);
}

.snc-promo-card__price-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--snc-emerald-700);
}

.snc-promo-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    color: var(--snc-red-600);
    font-weight: 600;
    font-size: 0.9rem;
}

.snc-promo-card__cta .svg-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.15s ease;
}

.snc-promo-card:hover .snc-promo-card__cta {
    color: var(--snc-red-700);
}

.snc-promo-card:hover .snc-promo-card__cta .svg-icon {
    transform: translateX(3px);
}

.snc-promo-secondary {
    margin-top: 0.5rem;
}

/* ======================================================================
   Order pages on phones
   The configurator nests an outer card, an inner card and an accordion;
   their stacked horizontal padding (card-body 1rem + accordion-body
   1.5rem + ...) squeezes the content into a narrow strip on small
   screens. Tighten the inner horizontal padding so it uses the width.
   ====================================================================== */
@media (max-width: 767.98px) {
    body.order-index .card-body,
    body.order-index .card-header,
    body.order-product .card-body,
    body.order-product .card-header {
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    #orderManager .accordion-body {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    #orderManager .accordion-button {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
}

/* ======================================================================
   Pending-invoices table on phones
   A 4-column table is too cramped at phone width - the cells squeeze and
   text collides. Below 576px each invoice stacks into a labelled card.
   ====================================================================== */
@media (max-width: 575.98px) {
    .snc-invoice-table thead {
        display: none;
    }

    .snc-invoice-table,
    .snc-invoice-table tbody,
    .snc-invoice-table tr,
    .snc-invoice-table td {
        display: block;
        width: 100%;
    }

    .snc-invoice-table tr {
        margin-bottom: 0.6rem;
        padding: 0.1rem 0.6rem;
        background-color: #fff;
        border: 1px solid var(--snc-gray-200);
        border-radius: 8px;
    }

    .snc-invoice-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem 0;
        border: 0;
        border-bottom: 1px solid var(--snc-gray-100);
        text-align: left !important;
    }

    .snc-invoice-table tr td:last-child {
        border-bottom: 0;
    }

    /* Field label, pulled from the td's data-label attribute. */
    .snc-invoice-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--snc-gray-500);
    }

    .snc-invoice-table td .btn {
        white-space: nowrap;
    }
}

/* Guest homepage: support banner. Brand-accented strip above the secondary
   cards that surfaces /support/contact-us (guest contact form). */
.snc-support-banner {
    margin-top: 1.25rem;
    margin-bottom: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff 0%, var(--snc-red-50, #fff5f5) 100%);
    border: 1px solid var(--snc-red-100, #fed7d7);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.snc-support-banner__body {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
}
.snc-support-banner__ic {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: var(--snc-red-600, #e53e3e);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.snc-support-banner__ic .svg-icon { width: 24px; height: 24px; }
.snc-support-banner__text { min-width: 0; }
.snc-support-banner__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--snc-gray-900, #1a202c);
    margin: 0 0 0.15rem 0;
    line-height: 1.25;
}
.snc-support-banner__sub {
    margin: 0;
    font-size: 0.875rem;
    color: var(--snc-gray-600, #4a5568);
    line-height: 1.4;
}
.snc-support-banner__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.snc-support-banner__actions .btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.snc-support-banner__actions .btn .svg-icon { width: 16px; height: 16px; }

@media (max-width: 575.98px) {
    .snc-support-banner {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
    }
    .snc-support-banner__body { flex-direction: row; align-items: flex-start; }
    .snc-support-banner__actions { width: 100%; }
    .snc-support-banner__actions .btn { flex: 1 1 auto; justify-content: center; }
}