/* =============================================
   ServerFellows Client Area Theme
   Matches React website design exactly
   Brand: #dc2626 / #b91c1c / #991b1b (Red)
   ============================================= */

/* Global hide helpers — anything marked .hidden or .message-h stays hidden,
   regardless of any later display:flex/block rules elsewhere. */
html body .hidden,
html body .message-h,
html body [hidden] {
    display: none !important;
}

/* Global SVG safety — ensure all inline SVGs render visibly.
   Defaults: fill inherits from parent text color when not set. */
html body svg {
    display: inline-block !important;
    vertical-align: middle;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible;
}
html body svg[fill="none"] {
    fill: none !important;
}
html body svg[fill="currentColor"] {
    fill: currentColor !important;
}
/* When a button has a red/dark background, its SVG inherits white text */
html body .sf-btn-primary svg,
html body .btn-primary svg,
html body a.btn-primary svg,
html body button.btn-primary svg {
    color: #fff;
    stroke: currentColor;
}

/* ---- Design Tokens (mirrors React Tailwind config) ---- */
:root {
    /* Brand palette (matches tailwind.config.js) */
    --sf-brand-50:  #fef2f2;
    --sf-brand-100: #fee2e2;
    --sf-brand-200: #fecaca;
    --sf-brand-300: #fca5a5;
    --sf-brand-400: #f87171;
    --sf-brand-500: #dc2626;
    --sf-brand-600: #b91c1c;
    --sf-brand-700: #991b1b;
    --sf-brand-800: #7f1d1d;
    --sf-brand-900: #7c1515;
    --sf-brand-950: #450a0a;

    /* Slate neutrals (React text & surfaces) */
    --sf-slate-50:  #f8fafc;
    --sf-slate-100: #f1f5f9;
    --sf-slate-200: #e2e8f0;
    --sf-slate-300: #cbd5e1;
    --sf-slate-400: #94a3b8;
    --sf-slate-500: #64748b;
    --sf-slate-600: #475569;
    --sf-slate-700: #334155;
    --sf-slate-800: #1e293b;
    --sf-slate-900: #0f172a;

    /* Semantic */
    --sf-bg:            #ffffff;
    --sf-bg-muted:      #f8fafc;
    --sf-surface:       #ffffff;
    --sf-border:        #e2e8f0;
    --sf-text:          #334155;
    --sf-text-strong:   #0f172a;
    --sf-text-muted:    #64748b;
    --sf-text-inverse:  #ffffff;
    --sf-primary:       #b91c1c;
    --sf-primary-hover: #991b1b;
    --sf-link:          #b91c1c;
    --sf-link-hover:    #991b1b;
    --sf-success:       #16a34a;
    --sf-warning:       #d97706;
    --sf-danger:        #dc2626;
    --sf-info:          #2563eb;

    /* Typography scale (Tailwind parity) */
    --sf-font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sf-text-xs:   0.75rem;   /* 12 */
    --sf-text-sm:   0.875rem;  /* 14 */
    --sf-text-base: 1rem;      /* 16 */
    --sf-text-lg:   1.125rem;  /* 18 */
    --sf-text-xl:   1.25rem;   /* 20 */
    --sf-text-2xl:  1.5rem;    /* 24 */
    --sf-text-3xl:  1.875rem;  /* 30 */
    --sf-text-4xl:  2.25rem;   /* 36 */
    --sf-text-5xl:  3rem;      /* 48 */
    --sf-leading-tight:   1.2;
    --sf-leading-snug:    1.375;
    --sf-leading-normal:  1.5;
    --sf-leading-relaxed: 1.625;

    /* Spacing scale (Tailwind 0.25rem grid) */
    --sf-space-1:  0.25rem;
    --sf-space-2:  0.5rem;
    --sf-space-3:  0.75rem;
    --sf-space-4:  1rem;
    --sf-space-5:  1.25rem;
    --sf-space-6:  1.5rem;
    --sf-space-8:  2rem;
    --sf-space-10: 2.5rem;
    --sf-space-12: 3rem;
    --sf-space-16: 4rem;

    /* Radii (Tailwind parity) */
    --sf-radius-sm:  0.25rem;
    --sf-radius:     0.375rem;
    --sf-radius-md:  0.5rem;
    --sf-radius-lg:  0.75rem;
    --sf-radius-xl:  1rem;
    --sf-radius-2xl: 1.5rem;
    --sf-radius-full: 9999px;

    /* Shadows (Tailwind parity) */
    --sf-shadow-sm:  0 1px 2px 0 rgba(0,0,0,0.05);
    --sf-shadow:     0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.05);
    --sf-shadow-md:  0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);
    --sf-shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
    --sf-shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.05);
    --sf-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.20);

    /* Motion */
    --sf-transition-fast:   0.15s ease;
    --sf-transition:        0.2s ease;
    --sf-transition-slow:   0.3s ease;

    /* Breakpoints reference (for documentation; media queries use literal px) */
    --sf-screen-sm: 640px;
    --sf-screen-md: 768px;
    --sf-screen-lg: 1024px;
    --sf-screen-xl: 1280px;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    font-size: 16px !important; /* Override Bootstrap 3's html { font-size: 10px } so rem units match React/Tailwind */
}
body {
    font-family: var(--sf-font-sans) !important;
    font-size: 16px !important;
    color: var(--sf-text);
    background: var(--sf-bg);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ---- Bootstrap 3 Overrides (match React/Tailwind defaults) ---- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--sf-font-sans) !important;
    margin-top: 0;
    margin-bottom: 0;
    line-height: var(--sf-leading-tight);
    color: var(--sf-text-strong);
}
h1 { font-size: var(--sf-text-4xl); font-weight: 700; }
h2 { font-size: var(--sf-text-3xl); font-weight: 700; }
h3 { font-size: var(--sf-text-2xl); font-weight: 700; }
h4 { font-size: var(--sf-text-xl);  font-weight: 600; }
h5 { font-size: var(--sf-text-lg);  font-weight: 600; }
h6 { font-size: var(--sf-text-base);font-weight: 600; }
p {
    margin-top: 0;
    margin-bottom: 0;
    font-family: var(--sf-font-sans) !important;
}
label {
    font-weight: 600;
    margin-bottom: var(--sf-space-2);
}
input, select, textarea, button {
    font-family: var(--sf-font-sans) !important;
}
/* Scoped container - only for sf-container, not Bootstrap default */
.sf-container { width: 100%; max-width: 80rem; padding-left: var(--sf-space-4); padding-right: var(--sf-space-4); margin: 0 auto; }
/* Scoped to sf- containers only - don't override global Bootstrap */
.sf-main-content .panel { border-radius: var(--sf-radius-lg); border: 1px solid var(--sf-border); box-shadow: var(--sf-shadow-sm); }
.sf-main-content .panel-heading { border-radius: var(--sf-radius-lg) var(--sf-radius-lg) 0 0; background: var(--sf-bg-muted); border-bottom: 1px solid var(--sf-border); }
.btn-primary { background-color: var(--sf-primary); border-color: var(--sf-primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--sf-primary-hover); border-color: var(--sf-primary-hover); }
.table > thead > tr > th { border-bottom: 2px solid var(--sf-border); color: var(--sf-text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.table > tbody > tr > td { border-top: 1px solid var(--sf-border); vertical-align: middle; color: var(--sf-text); }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--sf-bg-muted); }
.breadcrumb { background: transparent; padding: 0; margin: 0; font-size: var(--sf-text-sm); }
.breadcrumb > li + li:before { color: var(--sf-slate-400); }
.alert { border-radius: var(--sf-radius-lg); }
.nav-tabs > li > a { border-radius: var(--sf-radius-md) var(--sf-radius-md) 0 0; color: var(--sf-text); font-weight: 500; }
.nav-tabs > li.active > a { color: var(--sf-primary); border-bottom-color: var(--sf-primary); }
/* ---- End Bootstrap Overrides ---- */

a {
    color: var(--sf-link);
    text-decoration: none;
    transition: color var(--sf-transition);
}
a:hover {
    color: var(--sf-link-hover);
    text-decoration: none;
}
img { max-width: 100%; }

/* ---- Container ---- */
.sf-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    overflow: visible;
}
@media (min-width: 640px) {
    .sf-container { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
    .sf-container { padding: 0 2rem; }
}

/* =============================================
   TOP STRIP
   ============================================= */
.sf-top-strip {
    border-bottom: 1px solid #e5e7eb;
    padding: 0.5rem 0;
    display: none;
}
@media (min-width: 1024px) {
    .sf-top-strip { display: block; }
}
.sf-top-strip-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.875rem;
}
.sf-top-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #4b5563;
    transition: color 0.2s;
}
.sf-top-link:hover {
    color: #1f2937;
}
.sf-currency-form {
    display: inline;
}
.sf-currency-select {
    padding: 0.25rem 0.75rem;
    background: #fff;
    color: #4b5563;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    border: none;
    font-family: inherit;
}

/* =============================================
   HEADER / NAVIGATION
   ============================================= */
.sf-header {
    position: sticky;
    top: 21px;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}
.sf-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
}
@media (min-width: 1024px) {
    .sf-nav-inner { height: 4rem; }
}

/* Logo */
.sf-logo a { display: flex; align-items: center; }
.sf-logo-img {
    height: 1.75rem;
}
@media (min-width: 1024px) {
    .sf-logo-img { height: 2rem; }
}

/* Mobile toggle */
.sf-mobile-toggle {
    display: flex;
    background: none;
    border: none;
    color: #334155;
    cursor: pointer;
    padding: 0.25rem;
}
@media (min-width: 1024px) {
    .sf-mobile-toggle { display: none; }
}
.sf-mobile-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
@media (min-width: 1024px) {
    .sf-mobile-right { display: none; }
}
.sf-mobile-cart {
    color: #334155;
    transition: color 0.2s;
}
.sf-mobile-cart:hover { color: #b91c1c; }

/* Desktop nav */
.sf-desktop-nav {
    display: none;
    align-items: center;
    gap: 0.25rem;
}
@media (min-width: 1024px) {
    .sf-desktop-nav { display: flex; }
}
.sf-nav-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #334155;            /* slate-700 */
    font-weight: 500;          /* font-medium */
    padding: 0.5rem 0.75rem;   /* py-2 px-3 */
    border-radius: 0.5rem;     /* rounded-lg */
    transition: all 0.2s;
    font-size: 1rem;           /* text-base — matches React */
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}
.sf-nav-link:hover {
    color: #b91c1c;            /* brand-600 */
    background: #f8fafc;       /* slate-50 */
}

/* Desktop actions */
.sf-desktop-actions {
    display: none;
    align-items: center;
    gap: 0.75rem;
}
@media (min-width: 1024px) {
    .sf-desktop-actions { display: flex; }
}
.sf-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #b91c1c;       /* brand-600 */
    color: #fff !important;
    padding: 0.625rem 1.5rem;  /* py-2.5 px-6 */
    border-radius: 0.5rem;     /* rounded-lg */
    font-weight: 600;          /* font-semibold */
    font-size: 1rem;           /* text-base */
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-family: inherit;
    text-decoration: none;
}
.sf-btn-primary:hover {
    background: #991b1b;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    color: #fff !important;
    text-decoration: none;
}
.sf-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    color: #b91c1c !important;
    padding: 0.625rem 1.5rem;  /* py-2.5 px-6 */
    border-radius: 0.5rem;
    font-weight: 600;          /* font-semibold */
    font-size: 1rem;           /* text-base */
    border: 2px solid #b91c1c;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-decoration: none;
}
.sf-btn-outline:hover {
    background: #b91c1c;
    color: #fff !important;
    text-decoration: none;
}
.sf-desktop-actions {
    gap: 0.5rem;
}

/* Dropdown */
.sf-dropdown {
    position: relative;
}
.sf-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.sf-dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0.5rem;        /* mt-2 — matches React */
    min-width: 12rem;          /* w-48 */
    background: #ffffff;       /* bg-white — matches React */
    border-radius: 0.375rem;   /* rounded-md */
    /* shadow-lg + ring-1 ring-black ring-opacity-5 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -4px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 50;
    overflow: hidden;
    padding: 0.25rem 0;
}
.sf-dropdown-right {
    left: auto;
    right: 0;
}
.sf-dropdown.open .sf-dropdown-menu,
.sf-dropdown:hover .sf-dropdown-menu,
.sf-dropdown:focus-within .sf-dropdown-menu {
    display: block;
}
.sf-dropdown-item,
.sf-dropdown-item:link,
.sf-dropdown-item:visited {
    display: block;
    padding: 0.5rem 1rem;      /* py-2 px-4 */
    color: #334155 !important; /* slate-700 — matches React */
    font-size: 1rem;           /* text-base */
    text-decoration: none !important;
    transition: all 0.15s;
}
.sf-dropdown-item:hover,
.sf-dropdown-item:focus,
.sf-dropdown-item:active {
    color: #ffffff !important;
    background: #b91c1c;       /* brand-600 hover bg */
    text-decoration: none !important;
}
.sf-dropdown-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 0.25rem 0;
}
.sf-dropdown-logout {
    color: #dc2626;
}
.sf-dropdown-header {
    padding: 0.75rem 1rem;
}
.sf-dropdown-header-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #0f172a;
}
.sf-dropdown-header-company {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
}
.sf-dropdown-item i {
    margin-right: 0.5rem;
    width: 1rem;
    text-align: center;
    opacity: 0.7;
}
.sf-dropdown-item:hover i {
    opacity: 1;
}

/* Mobile menu */
.sf-mobile-menu {
    display: none;
    padding: 1rem 0;
    border-top: 1px solid #e2e8f0;
}
@media (min-width: 1024px) {
    .sf-mobile-menu { display: none !important; }
}
.sf-mobile-menu.open {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.sf-mobile-link {
    color: #334155;
    font-weight: 500;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
}
.sf-mobile-link:hover {
    color: #b91c1c;
    background: #f8fafc;
}
.sf-mobile-link-brand {
    color: #b91c1c;
}
.sf-mobile-link-brand:hover {
    color: #991b1b;
}
.sf-mobile-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 0.5rem 0;
}
.sf-mobile-section-label {
    padding: 0.25rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.sf-mobile-btn-primary {
    display: block;
    background: #b91c1c;
    color: #fff !important;
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s;
}
.sf-mobile-btn-primary:hover {
    background: #991b1b;
    color: #fff !important;
}
.sf-mobile-btn-outline {
    display: block;
    background: transparent;
    color: #b91c1c !important;
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: center;
    border: 2px solid #b91c1c;
    transition: all 0.2s;
}
.sf-mobile-btn-outline:hover {
    background: #b91c1c;
    color: #fff !important;
}

/* =============================================
   ULTRA STARTER OFFER (matches React LimitedOffer)
   ============================================= */
.sf-ultra-offer {
    position: relative;
    padding: 4rem 0;
    background: linear-gradient(135deg, #dc2626, #b91c1c, #991b1b);
    overflow: hidden;
}
.sf-ultra-offer-bg {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djItaDJ2LTJoLTJ6bTAgNHYyaDJ2LTJoLTJ6bTAtOHYyaDJ2LTJoLTJ6Ii8+PC9nPjwvZz48L3N2Zz4=");
}
.sf-ultra-offer-inner {
    position: relative;
    z-index: 10;
}
.sf-ultra-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fbbf24;
    color: #0f172a;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    animation: sf-pulse 2s infinite;
}
@keyframes sf-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}
.sf-ultra-title {
    font-size: 2.25rem;        /* text-4xl */
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;       /* mb-4 */
    line-height: 1.1;          /* matches Tailwind text-4xl/5xl/6xl computed line-heights */
}
@media (min-width: 640px) { .sf-ultra-title { font-size: 3rem; } }      /* sm:text-5xl */
@media (min-width: 1024px) { .sf-ultra-title { font-size: 3.75rem; } }  /* lg:text-6xl */
.sf-ultra-subtitle {
    font-size: 1.25rem;        /* text-xl */
    color: #fee2e2;            /* brand-100 */
    margin-bottom: 1.5rem;     /* mb-6 */
    max-width: 48rem;          /* max-w-3xl */
    margin-left: auto;
    margin-right: auto;
}
.sf-ultra-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #fee2e2;            /* brand-100 */
    flex-wrap: wrap;
}
.sf-ultra-timer-badge {
    padding: 0.25rem 0.75rem;
    background: rgba(255,255,255,0.2);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
}
.sf-ultra-card {
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    overflow: hidden;
}
.sf-ultra-card-grid {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .sf-ultra-card-grid { grid-template-columns: 1fr 1fr; }
}
.sf-ultra-card-left {
    background: linear-gradient(135deg, #f8fafc, #fff);
    padding: 2rem;
}
@media (min-width: 1024px) {
    .sf-ultra-card-left { padding: 2.5rem; }
}
.sf-ultra-price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.sf-ultra-price-amount {
    font-size: 3.75rem;
    font-weight: 700;
    color: #0f172a;
}
.sf-ultra-price-period {
    font-size: 1.25rem;
    color: #64748b;
    font-weight: 600;
}
.sf-ultra-save-badge {
    background: #b91c1c;       /* brand-600 */
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;        /* text-xs */
    font-weight: 700;
}
.sf-ultra-highlight {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #fff;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
}
.sf-ultra-highlight svg {
    flex-shrink: 0;
    margin-top: 0.25rem;
}
.sf-ultra-cta {
    display: flex;
    width: 100% !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #b91c1c;
    color: #fff !important;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1.125rem;
    transition: all 0.2s;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    text-decoration: none;
}
.sf-ultra-cta:hover {
    background: #991b1b;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    transform: scale(1.02);
    color: #fff !important;
    text-decoration: none;
}
.sf-ultra-card-right {
    background: #0f172a;
    padding: 2rem;
}
@media (min-width: 1024px) {
    .sf-ultra-card-right { padding: 2.5rem; }
}
.sf-ultra-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.sf-ultra-feature svg { flex-shrink: 0; margin-top: 0.125rem; }
.sf-ultra-feature span {
    color: #e2e8f0;
    font-size: 0.875rem;
    line-height: 1.5;
}
.sf-ultra-why {
    margin-top: 2rem;
    padding: 1rem;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.2);
}
.sf-ultra-why p {
    color: #fee2e2;            /* brand-100 */
    font-size: 0.875rem;       /* text-sm */
    line-height: 1.625;        /* leading-relaxed */
    margin: 0;
}
.sf-ultra-trust {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    color: #fee2e2;            /* brand-100 */
}
.sf-ultra-trust span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* =============================================
   MAIN CONTENT
   ============================================= */
.sf-main-content {
    min-height: 60vh;
    padding: 0;
    overflow: visible;
}
/* Standard WHMCS pages get padding via their container wrapper */
.sf-main-content > .sf-container {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* =============================================
   FULL-WIDTH BREAKOUT
   Makes any element span 100% viewport width
   even when nested inside a max-width container.
   Uses transform method (most reliable).
   ============================================= */
.sf-fullwidth {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ---- Page Header / Breadcrumb ---- */
.sf-page-header {
    margin-bottom: 2rem;
}
.sf-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.25rem;
}
.sf-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #64748b;
    list-style: none;
    padding: 0;
    margin: 0;
}
.sf-breadcrumb a { color: #b91c1c; }
.sf-breadcrumb a:hover { color: #991b1b; }

/* ---- Alerts ---- */
.sf-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}
.sf-alert-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.sf-alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.sf-alert-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* =============================================
   UTILITY CLASSES
   ============================================= */
.text-muted { color: #64748b !important; }
.text-light { color: #94a3b8 !important; }
.text-heading { color: #0f172a !important; }
.text-brand { color: #b91c1c !important; }
.text-sm { font-size: 0.85rem !important; }
.text-xs { font-size: 0.75rem !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }
.ms-1 { margin-left: 0.5rem !important; }
.me-1 { margin-right: 0.5rem !important; }
.p-3 { padding: 1.5rem !important; }
.p-4 { padding: 2rem !important; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.d-flex { display: flex !important; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-nowrap { white-space: nowrap; }
/* RTL-safe alignment utilities (mirror React Tailwind semantics) */
.sf-text-left   { text-align: left; }
.sf-text-center { text-align: center; }
.sf-text-right  { text-align: right; }
.sf-text-start  { text-align: start; }
.sf-text-end    { text-align: end; }
.sf-text-justify { text-align: justify; }
/* Brand link helper — forces brand-red even inside .text-light / muted wrappers */
body a.sf-link-brand,
body a.sf-link-brand:link,
body a.sf-link-brand:visited {
    color: var(--sf-link) !important;
    font-weight: 600;
    text-decoration: none;
}
body a.sf-link-brand:hover,
body a.sf-link-brand:focus {
    color: var(--sf-link-hover) !important;
    text-decoration: underline;
}
.w-100 { width: 100% !important; }
.border-bottom { border-bottom: 1px solid #e2e8f0; }
.rounded { border-radius: 0.5rem; }
.rounded-lg { border-radius: 0.75rem; }
.bg-subtle { background: #f8fafc; }
.bg-brand-light { background: #fef2f2; }
.uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.section-heading {
    font-weight: 700;
    color: #0f172a;
    margin: 1.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 1rem;
}
.icon-inline { vertical-align: middle; margin-right: 0.5rem; }

/* =============================================
   BOOTSTRAP OVERRIDES (for WHMCS components)
   ============================================= */

/* Buttons - auto-size primary buttons in main content */
.sf-main-content .btn-primary,
.sf-main-content .btn-danger,
.sf-main-content .btn-success {
    padding: 0.625rem 1.5rem;
    font-size: 0.95rem;
}
.btn-primary,
.btn-primary:focus,
.btn-primary:visited,
a.btn-primary,
button.btn-primary,
input.btn-primary {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #fff !important;
    border-radius: 0.5rem;
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    transition: all 0.2s;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    font-size: inherit !important;
    text-indent: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    line-height: 1.4 !important;
}
.btn-primary:hover,
.btn-primary:active {
    background-color: #991b1b !important;
    border-color: #991b1b !important;
    color: #fff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* Ensure button text inside .btn is always visible */
.sf-main-content .btn span,
.sf-main-content .btn {
    color: inherit !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.btn-default,
.btn-default:focus {
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s;
    border-color: #e2e8f0;
    color: #334155;
}
.btn-default:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 0.375rem;
}
/* Remove inline style overrides - handle via CSS */
.sf-main-content button[type="submit"].btn-primary,
.sf-main-content input[type="submit"].btn-primary {
    border-radius: 0.5rem;
    font-weight: 600;
}
.btn-success {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    border-radius: 0.5rem;
    font-weight: 600;
}
.btn-success:hover {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
}
.btn-danger {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    border-radius: 0.5rem;
    font-weight: 600;
}
.btn-danger:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* Panels */
.panel {
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}
.panel-heading {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0.75rem 0.75rem 0 0 !important;
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: #0f172a;
}
.panel-body {
    padding: 1.25rem;
}
.panel-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 0.75rem 0.75rem;
    padding: 1rem 1.25rem;
}

/* Tables */
.table {
    border-collapse: separate;
    border-spacing: 0;
}
.table > thead > tr > th {
    background: #f8fafc;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e2e8f0;
    padding: 0.75rem 1rem;
}
.table > tbody > tr > td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}
.table > tbody > tr:hover > td {
    background: #f8fafc;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background: #fafbfc;
}

/* Forms */
.form-control {
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: #334155;
    transition: all 0.2s;
    font-family: inherit;
}
.form-control:focus {
    border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
    outline: none;
}
.form-group label,
label {
    font-weight: 500;
    color: #0f172a;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
}
.input-group .form-control {
    border-radius: 0.5rem 0 0 0.5rem;
}
.input-group .btn {
    border-radius: 0 0.5rem 0.5rem 0;
}

/* Alerts */
.alert {
    border-radius: 0.75rem;
    border: none;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
}
.alert-success {
    background: #f0fdf4;
    color: #166534;
    border-left: 4px solid #22c55e;
}
.alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}
.alert-warning {
    background: #fffbeb;
    color: #92400e;
    border-left: 4px solid #f59e0b;
}
.alert-info {
    background: #eff6ff;
    color: #1e40af;
    border-left: 4px solid #3b82f6;
}

/* Badges */
.label-primary,
.badge-primary {
    background-color: #b91c1c !important;
}
.label-success,
.badge-success {
    background-color: #22c55e !important;
}
.label-warning,
.badge-warning {
    background-color: #f59e0b !important;
}
.label-danger,
.badge-danger {
    background-color: #dc2626 !important;
}
.label, .badge {
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

/* List Groups */
.list-group-item {
    border-color: #e2e8f0;
    padding: 0.75rem 1rem;
    transition: all 0.2s;
    color: #334155;
}
.list-group-item:first-child { border-radius: 0.75rem 0.75rem 0 0; }
.list-group-item:last-child { border-radius: 0 0 0.75rem 0.75rem; }
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: #b91c1c;
    border-color: #b91c1c;
}
.list-group-item:hover {
    background: #fef2f2;
}

/* Nav Tabs */
.nav-tabs {
    border-bottom: 2px solid #e2e8f0;
}
.nav-tabs > li > a {
    border-radius: 0.5rem 0.5rem 0 0;
    color: #64748b;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    transition: all 0.2s;
    border: none;
    margin-bottom: -2px;
}
.nav-tabs > li > a:hover {
    border-color: transparent;
    color: #b91c1c;
    background: transparent;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border: none;
    border-bottom: 3px solid #b91c1c;
    color: #b91c1c;
    font-weight: 600;
    background: transparent;
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
    color: #b91c1c;
    border-color: #e2e8f0;
    border-radius: 0.375rem;
    margin: 0 0.125rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}
.pagination > .active > a,
.pagination > .active > span {
    background-color: #b91c1c;
    border-color: #b91c1c;
}
.pagination > li > a:hover {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

/* Well */
.well {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: none;
    padding: 1.25rem;
}

/* Modal */
.modal-content {
    border-radius: 1rem;
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.modal-header {
    border-bottom: 1px solid #e2e8f0;
    border-radius: 1rem 1rem 0 0;
    padding: 1.25rem;
}
.modal-footer {
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 1rem 1rem;
    padding: 1rem 1.25rem;
}

/* Progress bar */
.progress {
    height: 0.5rem;
    border-radius: 9999px;
    background: #f1f5f9;
}
.progress-bar {
    background-color: #b91c1c;
    border-radius: 9999px;
}

/* Sidebar */
.sidebar .panel {
    border-radius: 0.75rem;
}
.sidebar .panel-heading {
    background: #f8fafc !important;
    font-weight: 600;
    color: #0f172a;
}

/* =============================================
   FOOTER
   ============================================= */
.sf-footer {
    background: #0f172a;       /* slate-900 */
    color: #cbd5e1;            /* slate-300 — matches React */
    padding: 4rem 0 0;         /* py-16 top */
}
.sf-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;                 /* gap-12 — matches React */
    margin-bottom: 3rem;       /* mb-12 */
}
@media (min-width: 768px) {
    .sf-footer-grid {
        grid-template-columns: 1fr 1fr;     /* md:grid-cols-2 */
    }
}
@media (min-width: 1024px) {
    .sf-footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;     /* lg col-1 spans 2, plus 3 cols */
    }
}
.sf-footer-col-wide {
    /* react: lg:col-span-2 — already handled by 2fr in grid template */
}
.sf-footer-logo {
    margin-bottom: 1rem;       /* mb-4 */
}
.sf-footer-desc {
    color: #94a3b8;            /* slate-400 */
    margin-bottom: 1.5rem;     /* mb-6 */
    line-height: 1.625;        /* leading-relaxed */
    font-size: 1rem;           /* text-base — matches React default */
}
.sf-footer-social {
    display: flex;
    gap: 1rem;                 /* gap-4 */
    margin-bottom: 1.5rem;
}
.sf-social-icon {
    width: 2.5rem;             /* w-10 */
    height: 2.5rem;            /* h-10 */
    background: #1e293b;       /* slate-800 */
    border-radius: 0.5rem;     /* rounded-lg */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;            /* slate-300 (inherits text-slate-300 from footer) */
    transition: all 0.2s;
}
.sf-social-icon:hover {
    background: #dc2626;       /* brand-500 hover */
    color: #fff;
}
.sf-footer-contact {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding-top: 0.5rem;
}
.sf-footer-heading {
    color: #fff;               /* text-white */
    font-size: 1rem;           /* text-base — matches React default */
    font-weight: 600;          /* font-semibold */
    margin-bottom: 1rem;       /* mb-4 */
}
.sf-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sf-footer-links li {
    margin-bottom: 0.75rem;    /* space-y-3 */
}
.sf-footer-links a {
    color: #cbd5e1;            /* slate-300 (inherits) */
    font-size: 1rem;           /* text-base — matches React */
    transition: color 0.2s;
}
.sf-footer-links a:hover {
    color: #f87171;            /* brand-400 */
}
.sf-footer-bottom {
    border-top: 1px solid #1e293b;     /* border-slate-800 */
    padding: 2rem 0 4rem;              /* pt-8 + py-16 footer bottom */
    text-align: center;
}
.sf-footer-bottom p {
    font-size: 0.875rem;       /* text-sm — matches React */
    color: #94a3b8;            /* slate-400 */
    margin: 0;
}

/* =============================================
   CLIENT AREA SPECIFIC PAGES
   ============================================= */

/* Dashboard cards */
.client-home-panels .panel {
    border-radius: 0.75rem;
    transition: all 0.3s;
}
.client-home-panels .panel:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Service/Domain status badges */
.status-active { color: #22c55e; }
.status-pending { color: #f59e0b; }
.status-suspended { color: #dc2626; }

/* Invoice status */
.invoice-paid { color: #22c55e; font-weight: 600; }
.invoice-unpaid { color: #dc2626; font-weight: 600; }

/* Ticket list */
.ticket-open { color: #3b82f6; font-weight: 600; }
.ticket-answered { color: #22c55e; font-weight: 600; }
.ticket-customer-reply { color: #f59e0b; font-weight: 600; }
.ticket-closed { color: #64748b; font-weight: 600; }

/* Login page */
.login-container {
    max-width: 28rem;
    margin: 3rem auto;
}
.login-container .panel {
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.login-container .panel-heading {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 1.5rem;
}
.login-container .panel-body {
    padding: 1.5rem;
}

/* Cart/Order overrides within client area */
.order-summary {
    border-radius: 0.75rem;
    overflow: hidden;
}

/* =============================================
   UTILITY CLASSES
   ============================================= */
.text-brand { color: #b91c1c; }
.bg-brand { background-color: #b91c1c; }
.text-slate-900 { color: #0f172a; }
.text-slate-600 { color: #475569; }
.text-slate-400 { color: #94a3b8; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.shadow-sm { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
    .sf-page-title {
        font-size: 1.25rem;
    }
    .sf-footer-grid {
        gap: 2rem;
    }
}

/* =============================================
   HOMEPAGE SECTIONS (matches React site)
   Container is made full-width via .sf-container-full
   so sections are naturally 100% width.
   ============================================= */

/* ---- Shared Section Layout ---- */
/* Inner content wrappers: match React max-w-7xl = 80rem with proper padding */
.sf-section-inner,
.sf-hero-inner,
.sf-ultra-offer-inner {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .sf-section-inner,
    .sf-hero-inner,
    .sf-ultra-offer-inner { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
    .sf-section-inner,
    .sf-ultra-offer-inner { padding: 0 2rem; }
    .sf-hero-inner { padding: 0 3rem; }
}

.sf-section-header {
    text-align: center;
    margin-bottom: 3rem;
}
.sf-section-title {
    font-size: 2.25rem;        /* text-4xl */
    font-weight: 700;
    color: #0f172a;            /* slate-900 */
    margin-bottom: 1.5rem;     /* mb-6 */
    line-height: 1.2;
}
@media (min-width: 640px) { .sf-section-title { font-size: 3rem; } }   /* sm:text-5xl */
@media (min-width: 1024px) { .sf-section-title { font-size: 3rem; } }
.sf-section-subtitle {
    font-size: 1.25rem;        /* text-xl */
    color: #475569;            /* slate-600 */
    max-width: 48rem;          /* max-w-3xl */
    margin: 0 auto;
    line-height: 1.7;
}
.sf-badge-brand {
    display: inline-block;
    background: #fee2e2;       /* brand-100 */
    color: #991b1b;            /* brand-700 */
    padding: 0.25rem 1rem;     /* py-1 px-4 */
    border-radius: 9999px;
    font-size: 0.875rem;       /* text-sm */
    font-weight: 600;          /* font-semibold */
    margin-bottom: 1rem;       /* mb-4 */
    letter-spacing: 0.05em;
}
.sf-badge-brand-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fef2f2;       /* brand-50 */
    border: 1px solid #fecaca; /* brand-200 */
    color: #991b1b;            /* brand-700 */
    padding: 0.5rem 1rem;      /* py-2 px-4 */
    border-radius: 9999px;
    font-size: 0.875rem;       /* text-sm */
    font-weight: 600;          /* font-semibold */
    margin-bottom: 1rem;       /* mb-4 */
}

/* =============================================
   HERO SECTION
   ============================================= */
.sf-hero {
    position: relative;
    background-image: url('../img/hero-image.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 3rem 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
@media (min-width: 1024px) { .sf-hero { padding: 4rem 0; } }
.sf-hero-box {
    background: rgba(255,255,255,0.7);
    border-radius: var(--sf-radius-2xl);
    box-shadow: var(--sf-shadow-2xl);
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.sf-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .sf-hero-grid { grid-template-columns: 1fr 1fr; } }
.sf-hero-left {
    background: rgba(255,255,255,0.95);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (min-width: 1024px) { .sf-hero-left { padding: 2.5rem; } }
.sf-hero-title {
    font-size: 1.875rem;       /* text-3xl base */
    font-weight: 700;          /* font-bold */
    color: #0f172a;            /* slate-900 */
    margin-bottom: 1rem;       /* mb-4 */
    line-height: 1.25;         /* leading-tight */
    letter-spacing: -0.025em;  /* tracking-tight */
}
@media (min-width: 640px) { .sf-hero-title { font-size: 2.25rem; } }   /* sm:text-4xl */
@media (min-width: 768px) { .sf-hero-title { font-size: 3rem; } }      /* md:text-5xl */
@media (min-width: 1024px) { .sf-hero-title { font-size: 58px !important; } }     /* lg:text-[58px] */
.sf-hero-tagline {
    font-size: 1.25rem;        /* text-xl */
    color: #0f172a;            /* slate-900 */
    margin-bottom: 0.75rem;    /* mb-3 */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sf-hero-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 1.5rem;     /* mb-6 */
}
.sf-hero-price-at {
    font-size: 1.25rem;        /* text-xl */
    color: #0f172a;            /* slate-900 */
}
.sf-hero-price-amount {
    font-size: 3rem;           /* text-5xl */
    font-weight: 700;
    color: #b91c1c;            /* brand-600 */
}
.sf-hero-price-period {
    font-size: 1.25rem;        /* text-xl */
    color: #64748b;            /* slate-500 */
}
.sf-hero-feature-rotator {
    height: 4rem;              /* h-16 — matches React */
    overflow: hidden;
    margin-bottom: 1.5rem;     /* mb-6 */
    position: relative;
}
.sf-hero-feature-text {
    font-size: 1.25rem;        /* text-xl base */
    font-weight: 700;          /* font-bold */
    color: #0f172a;            /* slate-900 */
    line-height: 1.2;          /* default for big headings */
    transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (min-width: 640px) { .sf-hero-feature-text { font-size: 1.5rem; } }     /* sm:text-2xl */
@media (min-width: 768px) { .sf-hero-feature-text { font-size: 1.875rem; } }   /* md:text-3xl */
@media (min-width: 1024px) { .sf-hero-feature-text { font-size: 35px; } }      /* lg:text-[35px] */
.sf-hero-cta-btn {
    display: inline-block;
    background: #b91c1c;
    color: #fff !important;
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    text-decoration: none;
    margin-bottom: 1.5rem;
}
.sf-hero-cta-btn:hover {
    background: #991b1b;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    color: #fff !important;
    text-decoration: none;
}
.sf-hero-guarantee {
    font-size: 1.125rem;       /* text-lg */
    color: #334155;            /* slate-700 */
    line-height: 1.625;        /* leading-relaxed */
}
.sf-hero-right {
    position: relative;
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../img/rounded-right.webp');
    background-size: cover;
    background-position: center;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sf-hero-right > * { position: relative; z-index: 1; }
@media (min-width: 1024px) { .sf-hero-right { padding: 2.5rem; } }
.sf-hero-domain-title-wrap {
    margin-bottom: 1.5rem;
    text-align: center;
}
.sf-hero-domain-title {
    display: inline-block;
    color: #ffffff !important;
    font-size: 25px;           /* text-base */
    font-weight: 500;          /* font-medium */
    padding: 0.75rem 1.5rem;
    background: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 15%, rgba(0,0,0,0.6) 85%, transparent 100%);
    border-radius: 0.5rem;
    letter-spacing: -0.01em;
    text-align: center;
    line-height: 1.625;        /* leading-relaxed */
}
body .sf-main-content .sf-hero-domain-title,
body .sf-main-content h2.sf-hero-domain-title { color: #ffffff !important; }
@media (min-width: 640px)  { .sf-hero-domain-title { font-size: 1.125rem; } }   /* sm:text-lg */
@media (min-width: 1024px) { .sf-hero-domain-title { font-size: 1.25rem; } }    /* lg:text-xl */
.sf-hero-domain-form {
    width: 100%;
}
.sf-hero-domain-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.sf-hero-domain-input-wrap {
    flex: 1;
    position: relative;
}
/* Hide the inline SVG icon — we use a background-image for reliability */
.sf-hero-search-icon {
    display: none !important;
}
.sf-hero-domain-input {
    width: 100%;
    height: 48px;
    padding: 0 1rem 0 2.75rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;           /* text-base — matches React */
    font-family: inherit;
    outline: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    background-position: 1rem center;
    background-size: 20px 20px;
}
.sf-hero-domain-input:focus {
    box-shadow: 0 0 0 3px rgba(185,28,28,0.2);
}
.sf-hero-tld-select {
    width: 120px;
    padding: 0.75rem 0.5rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: #fff;
    outline: none;
}
/* =============================================
   SELECT2 — hero TLD dropdown (matches React react-select look)
   ============================================= */
.sf-hero-domain-row .select2-container { width: 140px !important; flex: 0 0 auto; }
.sf-hero-domain-row .select2-container--default .select2-selection--single {
    height: 48px;
    border: none;
    border-radius: 0.5rem;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    cursor: pointer;
    box-shadow: none;
}
.sf-hero-domain-row .select2-container--default .select2-selection--single:focus,
.sf-hero-domain-row .select2-container--default.select2-container--focus .select2-selection--single {
    outline: none;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.2);
}
.sf-hero-domain-row .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 48px;
    padding-left: 0.75rem;
    padding-right: 2rem;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.875rem;
}
.sf-hero-domain-row .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px;
    right: 0.5rem;
}
.sf-hero-domain-row .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #64748b transparent transparent transparent;
}
.sf-hero-domain-row .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #64748b transparent;
}

/* Dropdown panel */
.sf-tld-dropdown.select2-dropdown {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    min-width: 140px !important;
}
.sf-tld-dropdown .select2-search--dropdown {
    padding: 0.5rem;
}
.sf-tld-dropdown .select2-search--dropdown .select2-search__field {
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    outline: none;
}
.sf-tld-dropdown .select2-search--dropdown .select2-search__field:focus {
    border-color: #b91c1c;
    box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.15);
}
.sf-tld-dropdown .select2-results__option {
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    color: #0f172a;
}
.sf-tld-dropdown .select2-results__option--highlighted[aria-selected] {
    background: #eff6ff;
    color: #0f172a;
}
.sf-tld-dropdown .select2-results__option[aria-selected=true] {
    background: #2563eb;
    color: #fff;
    font-weight: 600;
}

/* Make input + select2 + button align perfectly at 48px */
.sf-hero-domain-row .sf-hero-domain-input {
    height: 48px;
    padding: 0 1rem 0 2.75rem;
}
.sf-hero-domain-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #b91c1c;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    font-family: inherit;
    margin-bottom: 1.5rem;
}
.sf-hero-domain-btn:hover {
    background: #991b1b;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.sf-hero-domain-note {
    text-align: center;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.9);
}
.sf-hero-domain-note strong {
    color: #fca5a5;
}

/* =============================================
   FEATURES SECTION
   ============================================= */
.sf-features {
    padding: 4rem 0;
    background: #fff;
}
.sf-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}
@media (min-width: 768px) { .sf-features-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sf-features-grid { grid-template-columns: 1fr 1fr 1fr; } }
.sf-feature-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 2rem;
    transition: all 0.3s;
}
.sf-feature-card:hover {
    background: #fff;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.sf-feature-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: #b91c1c;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: transform 0.3s;
}
.sf-feature-card:hover .sf-feature-icon {
    transform: scale(1.1);
}
.sf-feature-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.75rem;
}
.sf-feature-desc {
    color: #475569;            /* slate-600 */
    line-height: 1.625;        /* leading-relaxed */
    font-size: 1rem;           /* text-base */
    margin: 0;
}
.sf-apps-banner {
    background: #b91c1c;       /* solid brand-600 — matches design */
    border-radius: 1rem;       /* rounded-2xl */
    padding: 2.5rem;           /* p-10 */
    text-align: center;
    color: #fff;
}
.sf-apps-banner-title {
    font-size: 1.875rem;       /* text-3xl */
    font-weight: 700;
    margin-bottom: 1rem;       /* mb-4 */
    color: #fff;
}
.sf-apps-banner-desc {
    color: #fee2e2;            /* brand-100 */
    font-size: 1.125rem;       /* text-lg */
    margin-bottom: 1.5rem;     /* mb-6 */
    max-width: 42rem;          /* max-w-2xl */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.625;
}
.sf-apps-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}
.sf-app-tag {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}
.sf-app-tag-more {
    background: rgba(255,255,255,0.3);
}

/* =============================================
   PRICING SECTION
   ============================================= */
.sf-pricing {
    padding: 4rem 0;
    background: #f8fafc;
}
.sf-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
@media (min-width: 768px) { .sf-pricing-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sf-pricing-grid { grid-template-columns: repeat(4, 1fr); } }
.sf-pricing-card {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    transition: all 0.3s;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.sf-pricing-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
    transform: translateY(-4px);
    border-color: #fecaca;
}
.sf-pricing-popular {
    border: 2px solid #b91c1c;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    z-index: 1;
}
@media (min-width: 1024px) { .sf-pricing-popular { transform: scale(1.08); } }
.sf-pricing-popular:hover {
    transform: scale(1.08) translateY(-4px);
}
.sf-pricing-popular-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #b91c1c, #dc2626);  /* from-brand-600 to-brand-500 */
    color: #fff;
    padding: 0.25rem 1rem;     /* py-1 px-4 */
    border-radius: 9999px;
    font-size: 0.75rem;        /* text-xs */
    font-weight: 700;          /* font-bold */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}
.sf-pricing-card-inner {
    padding: 1.75rem;
}
.sf-pricing-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.25rem;
}
.sf-pricing-tagline {
    font-size: 0.875rem;       /* text-sm */
    color: #64748b;            /* slate-500 */
    font-weight: 500;          /* font-medium */
    margin-bottom: 1.5rem;     /* mb-6 */
}
.sf-pricing-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}
.sf-pricing-amount {
    font-size: 3rem;
    font-weight: 700;
    color: #0f172a;
}
.sf-pricing-amount::before {
    content: '$';
}
.sf-pricing-period {
    font-size: 1rem;
    color: #475569;
    font-weight: 500;
}
.sf-pricing-billed {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.25rem;
}
.sf-pricing-bonus {
    font-size: 0.75rem;
    color: #b91c1c;
    font-weight: 600;
    margin-bottom: 1rem;
}
.sf-pricing-btn {
    display: flex;
    width: 100% !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #0f172a;       /* slate-900 */
    color: #fff !important;
    padding: 0.875rem 1.5rem;  /* py-3.5 px-6 */
    border-radius: 0.5rem;     /* rounded-lg */
    font-weight: 700;          /* font-bold */
    font-size: 1rem;           /* text-base */
    transition: all 0.2s;
    text-decoration: none;
    margin-bottom: 1.75rem;    /* mb-7 */
}
.sf-pricing-btn:hover {
    background: #1e293b;
    color: #fff !important;
    text-decoration: none;
}
.sf-pricing-btn-brand {
    background: #b91c1c;
    box-shadow: 0 10px 15px -3px rgba(185,28,28,0.25);
}
.sf-pricing-btn-brand:hover {
    background: #991b1b;
}
.sf-pricing-features {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.sf-pricing-feat {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.sf-pricing-feat svg { flex-shrink: 0; margin-top: 0.125rem; }
.sf-pricing-feat span {
    font-size: 0.875rem;       /* text-sm */
    color: #334155;            /* slate-700 */
    line-height: 1.375;        /* leading-snug */
}
.sf-custom-solution {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
}
.sf-custom-solution-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.75rem;
}
.sf-custom-solution-desc {
    color: #475569;
    margin-bottom: 1.5rem;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}
.sf-custom-solution-btn {
    display: inline-block;
    background: #0f172a;
    color: #fff !important;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
    text-decoration: none;
}
.sf-custom-solution-btn:hover {
    background: #1e293b;
    color: #fff !important;
    text-decoration: none;
}

/* =============================================
   EMAIL HOSTING SECTION
   ============================================= */
.sf-email-hosting {
    padding: 4rem 0;
    background: linear-gradient(135deg, #fef2f2, #fff);
}
.sf-email-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-top: 1.5rem;
}
@media (min-width: 768px) { .sf-email-grid { grid-template-columns: repeat(3, 1fr); } }
.sf-email-card {
    position: relative;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    transition: all 0.3s;
}
.sf-email-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
    border-color: #fecaca;
}
.sf-email-featured {
    border-color: #b91c1c;
    transform: scale(1.03);
}
@media (min-width: 768px) { .sf-email-featured { transform: scale(1.05); } }
.sf-email-best-value {
    border-color: #fbbf24;
}
.sf-email-popular-tag {
    position: absolute;
    top: -0.875rem;
    right: 1rem;
    background: #b91c1c;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.sf-email-best-badge {
    position: absolute;
    top: -0.875rem;
    left: 50%;
    transform: translateX(-50%);
    background: #fbbf24;
    color: #0f172a;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}
.sf-email-card-inner {
    padding: 2rem;
    text-align: center;
}
.sf-email-plan-name {
    font-size: 1.875rem;       /* text-3xl */
    font-weight: 700;
    color: #0f172a;            /* slate-900 */
    margin-bottom: 0.5rem;     /* mb-2 */
}
.sf-email-plan-tagline {
    font-size: 0.875rem;       /* text-sm */
    color: #475569;            /* slate-600 */
    margin-bottom: 1.5rem;     /* mb-6 */
}
.sf-email-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    /*margin-bottom: 1.5rem;*/
}
.sf-email-price-amount {
    font-size: 3rem;
    font-weight: 700;
    color: #0f172a;
}
.sf-email-price-amount::before {
    content: '$';
}
.sf-email-price-period {
    font-size: 1.25rem;        /* text-xl */
    color: #475569;            /* slate-600 */
}
.sf-email-order-btn {
    display: flex;
    width: 100% !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #0f172a;       /* slate-900 */
    color: #fff !important;
    padding: 1rem 1.5rem;      /* py-4 px-6 */
    border-radius: 0.75rem;    /* rounded-xl */
    font-weight: 700;          /* font-bold */
    font-size: 1.125rem;       /* text-lg */
    transition: all 0.2s;
    text-decoration: none;
    margin-bottom: 2rem;       /* mb-8 */
}
.sf-email-order-btn:hover {
    background: #1e293b;
    color: #fff !important;
    text-decoration: none;
}
.sf-email-order-brand {
    background: #b91c1c;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.sf-email-order-brand:hover {
    background: #991b1b;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.sf-email-features {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.sf-email-features-label {
    font-weight: 600;          /* font-semibold */
    color: #0f172a;            /* slate-900 */
    font-size: 0.875rem;       /* text-sm */
    text-transform: uppercase;
    letter-spacing: 0.05em;    /* tracking-wide */
    margin-bottom: 1rem;       /* mb-4 */
}
.sf-email-feat {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.sf-email-feat svg { flex-shrink: 0; margin-top: 0.125rem; }
.sf-email-feat span {
    font-size: 0.875rem;       /* text-sm */
    color: #334155;            /* slate-700 */
}
.sf-email-all-include {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem;
    text-align: center;
}
.sf-email-all-include p {
    color: #334155;
    font-size: 0.9rem;
    margin: 0;
}
.sf-email-all-include strong {
    color: #0f172a;
}

/* =============================================
   WHY CHOOSE SECTION (matches WhyChoose.tsx)
   ============================================= */
.sf-whychoose {
    padding: 4rem 0;
    background: linear-gradient(135deg, #fef2f2, #fff);
}
.sf-whychoose-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) { .sf-whychoose-grid { grid-template-columns: 1fr 1fr; } }
.sf-whychoose-left {
    text-align: left;
}
.sf-whychoose-promises {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sf-whychoose-promise {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.sf-whychoose-promise svg {
    flex-shrink: 0;
    margin-top: 0.25rem;
}
.sf-whychoose-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.sf-whychoose-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s;
}
.sf-whychoose-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.sf-whychoose-card-icon {
    width: 3rem;
    height: 3rem;
    background: #b91c1c;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* =============================================
   CPANEL SECTION
   ============================================= */
.sf-cpanel {
    padding: 4rem 0;
    background: #f8fafc;
}
.sf-cpanel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) { .sf-cpanel-grid { grid-template-columns: 1fr 1fr; } }
.sf-cpanel-mockup {
    order: 2;
}
@media (min-width: 1024px) { .sf-cpanel-mockup { order: 1; } }
.sf-cpanel-window {
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.sf-cpanel-titlebar {
    background: linear-gradient(to right, #1e293b, #0f172a);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.sf-cpanel-dots {
    display: flex;
    gap: 0.375rem;
}
.sf-dot-red { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #ef4444; }
.sf-dot-yellow { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #f59e0b; }
.sf-dot-green { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #22c55e; }
.sf-cpanel-titlebar-text {
    flex: 1;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
}
.sf-cpanel-body {
    padding: 1.5rem;
    background: #f8fafc;
}
.sf-cpanel-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
@media (min-width: 480px) { .sf-cpanel-tabs { grid-template-columns: repeat(4, 1fr); } }
.sf-cpanel-tab {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}
.sf-cpanel-tab:hover {
    border-color: #fecaca;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.sf-cpanel-tab span {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: #334155;
    margin-top: 0.375rem;
}
.sf-cpanel-stats {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem;
}
.sf-cpanel-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.sf-cpanel-stats-header h4 {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.9rem;
    margin: 0;
}
.sf-cpanel-stats-header span {
    font-size: 0.7rem;
    color: #64748b;
}
.sf-cpanel-stat-row {
    margin-bottom: 0.5rem;
}
.sf-cpanel-stat-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}
.sf-cpanel-stat-labels span:first-child { color: #475569; }
.sf-cpanel-stat-labels span:last-child { font-weight: 500; color: #0f172a; }
.sf-cpanel-progress {
    height: 0.5rem;
    background: #f1f5f9;
    border-radius: 9999px;
    overflow: hidden;
}
.sf-cpanel-progress-fill {
    height: 100%;
    border-radius: 9999px;
}
.sf-cpanel-footer {
    background: #fff;
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #475569;
}
.sf-cpanel-content {
    order: 1;
}
@media (min-width: 1024px) { .sf-cpanel-content { order: 2; } }
.sf-cpanel-title {
    font-size: 2.25rem;        /* text-4xl */
    font-weight: 700;
    color: #0f172a;            /* slate-900 */
    margin-bottom: 1.5rem;     /* mb-6 */
    line-height: 1.2;
}
@media (min-width: 640px) { .sf-cpanel-title { font-size: 3rem; } }   /* sm:text-5xl */
.sf-cpanel-desc {
    font-size: 1.25rem;        /* text-xl */
    color: #475569;            /* slate-600 */
    margin-bottom: 2rem;       /* mb-8 */
    line-height: 1.625;        /* leading-relaxed */
}
.sf-cpanel-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}
.sf-cpanel-feat-item {
    display: flex;
    gap: 1rem;
}
.sf-cpanel-feat-icon {
    width: 3rem;
    height: 3rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sf-cpanel-feat-item h4 {
    font-size: 1.125rem;       /* text-lg */
    font-weight: 700;
    color: #0f172a;            /* slate-900 */
    margin: 0 0 0.25rem;       /* mb-1 */
}
.sf-cpanel-feat-item p {
    font-size: 1rem;           /* text-base */
    color: #475569;            /* slate-600 */
    margin: 0;
}
.sf-cpanel-why-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;           /* p-6 */
}
.sf-cpanel-why-box p {
    font-size: 0.875rem;       /* text-sm */
    color: #334155;            /* slate-700 */
    line-height: 1.625;        /* leading-relaxed */
    margin: 0;
}
.sf-cpanel-why-box strong {
    color: #0f172a;
}

/* =============================================
   COMPARISON TABLE SECTION
   ============================================= */
.sf-comparison {
    padding: 4rem 0;
    background: #fff;
}
.sf-comparison-table-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}
.sf-comparison-table {
    width: 100%;
    min-width: 700px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    overflow: hidden;
}
.sf-comparison-table thead {
    background: #f8fafc;
}
.sf-comparison-table th {
    padding: 1rem;
    text-align: center;
    vertical-align: bottom;
    border-bottom: 1px solid #e2e8f0;
}
.sf-comp-feature-col {
    text-align: left !important;
    font-size: 0.875rem;       /* text-sm */
    font-weight: 700;          /* font-bold */
    color: #64748b;            /* slate-500 */
    text-transform: uppercase;
    letter-spacing: 0.05em;    /* tracking-wider */
    min-width: 160px;
}
.sf-comp-plan-col {
    min-width: 130px;
}
.sf-comp-plan-name {
    font-size: 1rem;           /* text-base */
    font-weight: 700;
    color: #0f172a;            /* slate-900 */
    margin-bottom: 0.25rem;    /* mb-1 */
}
.sf-comp-plan-price {
    font-size: 1.5rem;         /* text-2xl */
    font-weight: 700;
    color: #b91c1c;            /* brand-600 */
}
.sf-comp-plan-price span {
    font-size: 0.875rem;       /* text-sm */
    color: #475569;            /* slate-600 */
    font-weight: 400;          /* font-normal */
}
.sf-comparison-table td {
    padding: 1rem 1.5rem;      /* py-4 px-6 */
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;       /* text-sm */
    color: #334155;            /* slate-700 */
    font-weight: 500;          /* font-medium */
    text-align: center;
    vertical-align: middle;
}
.sf-comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
}
.sf-comparison-table td svg {
    display: inline-block;
}
.sf-comparison-table tbody tr:hover td {
    background: #f8fafc;
}
.sf-comp-highlight {
    background: rgba(254,242,242,0.5) !important;
}
.sf-comp-category td {
    background: #f1f5f9 !important;        /* slate-100 */
    font-size: 0.875rem !important;        /* text-sm */
    font-weight: 700 !important;
    color: #0f172a !important;             /* slate-900 */
    text-transform: uppercase;
    letter-spacing: 0.05em;                /* tracking-wide */
    text-align: left !important;
    padding: 0.75rem 1.5rem !important;    /* py-3 px-6 */
}
.sf-comparison-note {
    text-align: center;
    font-size: 0.875rem;       /* text-sm */
    color: #475569;            /* slate-600 */
    margin-top: 1rem;          /* mt-4 */
}

/* =============================================
   CTA SECTION
   ============================================= */
.sf-cta {
    position: relative;
    padding: 5rem 0;
    background: linear-gradient(135deg, #0f172a, #1e293b, #0f172a);
    color: #fff;
    overflow: hidden;
}
.sf-cta-bg {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zNiAxOGMzLjMxNCAwIDYgMi42ODYgNiA2cy0yLjY4NiA2LTYgNi02LTIuNjg2LTYtNiAyLjY4Ni02IDYtNnoiIHN0cm9rZT0iIzFmMjkzNyIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9nPjwvc3ZnPg==");
}
.sf-cta-inner {
    position: relative;
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
    text-align: center;
}
.sf-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(220,38,38,0.1);            /* brand-500/10 */
    border: 1px solid rgba(220,38,38,0.3);      /* brand-500/30 */
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;                    /* py-2 px-5 */
    margin-bottom: 2rem;                        /* mb-8 */
    backdrop-filter: blur(4px);
    color: #fca5a5;                             /* brand-300 */
    font-size: 0.875rem;                        /* text-sm */
    font-weight: 600;                           /* font-semibold */
}
.sf-cta-title {
    font-size: 2.25rem;                         /* text-4xl */
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;                      /* mb-6 */
    line-height: 1.25;                          /* leading-tight (Tailwind) */
}
@media (min-width: 640px)  { .sf-cta-title { font-size: 3rem; } }    /* sm:text-5xl */
@media (min-width: 1024px) { .sf-cta-title { font-size: 3.75rem; } } /* lg:text-6xl */
.sf-cta-desc {
    font-size: 1.25rem;                         /* text-xl */
    color: #cbd5e1;                             /* slate-300 */
    margin-bottom: 2.5rem;                      /* mb-10 */
    max-width: 48rem;                           /* max-w-3xl */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.625;                         /* leading-relaxed */
}
.sf-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #b91c1c;
    color: #fff !important;
    padding: 1rem 2.5rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    transition: all 0.2s;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    text-decoration: none;
    margin-bottom: 2.5rem;
}
.sf-cta-btn:hover {
    background: #991b1b;
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(185,28,28,0.3);
    color: #fff !important;
    text-decoration: none;
}
.sf-cta-signals {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;                                  /* gap-8 */
    color: #cbd5e1;                             /* slate-300 */
    margin-bottom: 2rem;                        /* mb-8 */
}
.sf-cta-signals span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;                           /* font-medium */
    font-size: 1rem;                            /* text-base (default) */
}
.sf-cta-login {
    font-size: 0.875rem;                        /* text-sm */
    color: #94a3b8;                             /* slate-400 */
}
.sf-cta-login a {
    color: #f87171;                             /* brand-400 */
    font-weight: 600;                           /* font-semibold */
    text-decoration: underline;
}
.sf-cta-login a:hover {
    color: #fca5a5;                             /* brand-300 */
}

/* =============================================
   TRUST / TESTIMONIALS SECTION
   ============================================= */
.sf-trust {
    padding: 4rem 0;
    background: #fff;
}
.sf-trust-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.sf-trust-stars strong {
    font-size: 1.125rem;                        /* text-lg */
    font-weight: 600;                           /* font-semibold */
    color: #0f172a;                             /* slate-900 */
    margin-left: 0.5rem;
}
.sf-trust-count {
    color: #475569;                             /* slate-600 */
    font-size: 1rem;                            /* text-base */
}
.sf-testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}
@media (min-width: 768px) { .sf-testimonials-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sf-testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
.sf-testimonial-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 0.3s;
}
.sf-testimonial-card:hover {
    border-color: #fecaca;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.sf-testimonial-stars {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}
.sf-quote-icon {
    margin-bottom: 0.75rem;
}
.sf-testimonial-quote {
    color: #334155;                             /* slate-700 */
    line-height: 1.625;                         /* leading-relaxed */
    margin-bottom: 1.25rem;                     /* mb-5 */
    font-size: 1rem;                            /* text-base */
}
.sf-testimonial-author {
    border-top: 1px solid #e2e8f0;              /* border-slate-200 */
    padding-top: 1rem;                          /* pt-4 */
}
.sf-testimonial-author strong {
    display: block;
    font-weight: 700;
    color: #0f172a;                             /* slate-900 */
    font-size: 1rem;                            /* text-base */
}
.sf-testimonial-author span {
    display: block;
    font-size: 0.875rem;                        /* text-sm */
    color: #475569;                             /* slate-600 */
}
.sf-trust-cta-box {
    background: linear-gradient(135deg, #0f172a, #1e293b);  /* from-slate-900 to-slate-800 */
    border-radius: 1rem;                        /* rounded-2xl */
    padding: 3rem;                              /* p-12 */
    text-align: center;
    color: #fff;
}
.sf-trust-cta-box h3 {
    font-size: 1.875rem;                        /* text-3xl */
    font-weight: 700;
    margin-bottom: 1.5rem;                      /* mb-6 */
    color: #fff;
    line-height: 1.3;
    max-width: 56rem;                           /* max-w-4xl */
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 640px) { .sf-trust-cta-box h3 { font-size: 2.25rem; } }  /* sm:text-4xl */
.sf-trust-cta-box p {
    color: #fee2e2;                             /* brand-100 */
    font-size: 1.125rem;                        /* text-lg */
    margin-bottom: 2rem;                        /* mb-8 */
    line-height: 1.625;                         /* leading-relaxed */
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}
.sf-trust-cta-btn {
    display: inline-block;
    background: #b91c1c;                        /* brand-600 */
    color: #fff !important;
    padding: 1rem 2.5rem;                       /* px-10 py-4 */
    border-radius: 0.5rem;                      /* rounded-lg */
    font-weight: 700;
    font-size: 1.125rem;                        /* text-lg */
    transition: all 0.2s;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2);
    text-decoration: none;
}
.sf-trust-cta-btn:hover {
    background: #991b1b;
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    color: #fff !important;
    text-decoration: none;
}

/* =============================================
   INNER PAGE HERO (Hosting Plan Pages)
   Matches React SharedHostingPlans hero pattern
   ============================================= */
.sf-inner-hero {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to right, #dc2626, #b91c1c);
    padding: 2.5rem 0 2.5rem;
}
@media (min-width: 640px) { .sf-inner-hero { padding: 2.5rem 0 4rem; } }
.sf-inner-hero-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 640px) { .sf-inner-hero-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sf-inner-hero-inner { padding: 0 2rem; } }
.sf-inner-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .sf-inner-hero-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.sf-inner-hero-content {
    position: relative;
    z-index: 10;
    color: #fff;
}
.sf-inner-hero-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}
@media (min-width: 640px) { .sf-inner-hero-title { font-size: 2.5rem; } }
@media (min-width: 768px) { .sf-inner-hero-title { font-size: 3rem; } }
@media (min-width: 1024px) { .sf-inner-hero-title { font-size: 3.625rem; } }
.sf-inner-hero-desc {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2rem;
    max-width: 32rem;
    line-height: 1.6;
}
.sf-inner-hero-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.sf-inner-hero-btn {
    display: inline-block;
    background: #fff;
    color: #dc2626;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    transition: all 0.2s;
}
.sf-inner-hero-btn:hover {
    background: #f3f4f6;
    color: #dc2626;
    text-decoration: none;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.sf-inner-hero-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}
.sf-inner-hero-price-from {
    font-size: 1.25rem;
    color: #fff;
}
.sf-inner-hero-price-amount {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
}
.sf-inner-hero-price-period {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.8);
}
/* Image wrapper: relative with explicit height, inner content is absolute */
.sf-inner-hero-image {
    position: relative;
    height: 250px;
}
@media (min-width: 640px) { .sf-inner-hero-image { height: 320px; } }
@media (min-width: 1024px) { .sf-inner-hero-image { height: 420px; } }
/* Inner container fills parent absolutely with rounded corners */
.sf-inner-hero-image-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.sf-inner-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sf-inner-hero-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent, transparent);
}
.sf-inner-hero-circle {
    position: absolute;
    width: 24rem;
    height: 24rem;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}
.sf-inner-hero-circle-tl {
    top: 0;
    left: 0;
    transform: translate(-50%,-50%);
}
.sf-inner-hero-circle-br {
    bottom: 0;
    right: 0;
    transform: translate(50%,50%);
}

/* =============================================
   PLANS SECTION (Generic for all hosting pages)
   Matches React plan section pattern
   ============================================= */
.sf-plans-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, #fef2f2, #fff);
}
.sf-plans-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 640px) { .sf-plans-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sf-plans-inner { padding: 0 2rem; } }
.sf-plans-header {
    text-align: center;
    margin-bottom: 3rem;
}
.sf-plans-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
}
.sf-plans-badge svg {
    flex-shrink: 0;
}
.sf-plans-badge span {
    font-size: 0.8rem;
    font-weight: 600;
    color: #991b1b;
}
.sf-plans-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1rem;
}
@media (min-width: 640px) { .sf-plans-title { font-size: 2.75rem; } }
@media (min-width: 1024px) { .sf-plans-title { font-size: 3rem; } }
.sf-plans-subtitle {
    font-size: 1.125rem;
    color: #475569;
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.6;
}
.sf-plans-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-top: 1.5rem;
}
@media (min-width: 768px) { .sf-plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sf-plans-grid { grid-template-columns: repeat(3, 1fr); } }

/* Plan Card */
.sf-plan-card {
    position: relative;
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    border: 2px solid #e2e8f0;
    transition: all 0.3s;
}
.sf-plan-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
    border-color: #fecaca;
}
.sf-plan-popular {
    border-color: #b91c1c;
    transform: scale(1.03);
}
@media (min-width: 1024px) { .sf-plan-popular { transform: scale(1.05); } }
.sf-plan-popular:hover {
    border-color: #b91c1c;
}
.sf-plan-best-value {
    border-color: #fbbf24;
}
.sf-plan-best-value:hover {
    border-color: #fbbf24;
}
.sf-plan-popular-tag {
    position: absolute;
    top: -0.875rem;
    right: 1rem;
    background: #b91c1c;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.sf-plan-best-tag {
    position: absolute;
    top: -0.875rem;
    left: 50%;
    transform: translateX(-50%);
    background: #fbbf24;
    color: #0f172a;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}
.sf-plan-inner {
    padding: 2rem;
    text-align: center;
}
.sf-plan-best-tag ~ .sf-plan-inner {
    padding-top: 2.5rem;
}
.sf-plan-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.25rem;
}
.sf-plan-tagline {
    font-size: 0.8rem;
    color: #475569;
    margin-bottom: 1.5rem;
}
.sf-plan-specs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.sf-plan-spec {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #f1f5f9;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
}
.sf-plan-price-wrap {
    margin-bottom: 1.5rem;
}
.sf-plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}
.sf-plan-price-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0f172a;
}
.sf-plan-price-period {
    font-size: 1.125rem;
    color: #475569;
}
.sf-plan-price-was {
    font-size: 0.8rem;
    color: #64748b;
    text-decoration: line-through;
    margin-bottom: 0.25rem;
}
.sf-plan-price-save {
    font-size: 0.75rem;
    color: #b91c1c;
    font-weight: 600;
}
/* One-off setup fee, shown under the recurring price. Only rendered for plans
   that actually carry one, so it must not reserve space when absent. */
.sf-plan-price-setup {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}
.sf-plan-order-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 2rem;
}
.sf-plan-order-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}
.sf-plan-order-brand {
    background: #b91c1c;
    color: #fff !important;
    box-shadow: 0 10px 15px -3px rgba(185,28,28,0.25);
}
.sf-plan-order-brand:hover {
    background: #991b1b;
    color: #fff !important;
    box-shadow: 0 20px 25px -5px rgba(185,28,28,0.3);
}
.sf-plan-order-dark {
    background: #0f172a;
    color: #fff !important;
}
.sf-plan-order-dark:hover {
    background: #1e293b;
    color: #fff !important;
}
.sf-plan-features {
    text-align: left;
}
.sf-plan-features-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0f172a;
    margin-bottom: 0.75rem;
}
.sf-plan-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.sf-plan-feature svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}
.sf-plan-feature span {
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.4;
}
.sf-plans-all-include {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
}
.sf-plans-all-include p {
    color: #334155;
    font-size: 0.875rem;
    margin: 0;
}
.sf-plans-all-include strong {
    color: #0f172a;
}

/* =============================================
   WHY CHOOSE SECTION (4-card grid for hosting pages)
   Matches React keyFeatures pattern
   ============================================= */
.sf-why-section {
    padding: 4rem 0;
    background: #fff;
}
.sf-why-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 640px) { .sf-why-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sf-why-inner { padding: 0 2rem; } }
.sf-why-header {
    text-align: center;
    margin-bottom: 3rem;
}
.sf-why-title {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1rem;
}
@media (min-width: 640px) { .sf-why-title { font-size: 2.25rem; } }
.sf-why-subtitle {
    font-size: 1.125rem;
    color: #475569;
    max-width: 40rem;
    margin: 0 auto;
}
.sf-why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) { .sf-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sf-why-grid { grid-template-columns: repeat(4, 1fr); } }
.sf-why-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s;
    align-items: center;
}
.sf-why-card:hover {
    border-color: #fecaca;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.sf-why-card-icon {
    width: 4rem;
    height: 4rem;
    background: #fef2f2;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.sf-why-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}
.sf-why-card-desc {
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

/* =============================================
   SIMPLE CTA SECTION (for hosting pages)
   Matches React CTA pattern at bottom of plans
   ============================================= */
.sf-simple-cta {
    padding: 3.5rem 1rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    text-align: center;
    border-radius: 1rem;
    margin: 2rem auto;
    max-width: 1280px;
    position: relative;
    overflow: hidden;
}
.sf-simple-cta::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 50%;
    height: 200%;
    background: radial-gradient(circle, rgba(185,28,28,0.15) 0%, transparent 70%);
    pointer-events: none;
}
.sf-simple-cta-inner {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 1;
}
.sf-simple-cta-icon {
    display: block;
    margin: 0 auto 1.25rem;
    width: 56px !important;
    height: 56px !important;
    padding: 12px;
    background: rgba(185,28,28,0.15);
    border-radius: 50%;
    color: #fca5a5 !important;
    stroke: #fca5a5 !important;
}
.sf-simple-cta-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 0.875rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
}
.sf-simple-cta-desc {
    font-size: 1rem !important;
    color: #cbd5e1 !important;
    margin: 0 0 1.75rem !important;
    line-height: 1.6 !important;
}
@media (min-width: 768px) {
    .sf-simple-cta-title { font-size: 2.25rem !important; }
    .sf-simple-cta-desc { font-size: 1.125rem !important; }
}
@media (min-width: 1024px) {
    .sf-simple-cta-title { font-size: 2.5rem !important; }
}
.sf-simple-cta-btn {
    display: inline-block;
    background: #b91c1c;
    color: #fff !important;
    padding: 1rem 3rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    box-shadow: 0 10px 15px -3px rgba(185,28,28,0.25);
    transition: all 0.2s;
}
.sf-simple-cta-btn:hover {
    background: #991b1b;
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 20px 25px -5px rgba(185,28,28,0.3);
    transform: scale(1.02);
}

/* =============================================
   DASHBOARD CARDS (logged-in homepage)
   ============================================= */
.sf-dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.sf-dash-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 0.3s;
}
.sf-dash-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.sf-dash-card-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.sf-dash-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sf-dash-card-icon-red { background: #fef2f2; }
.sf-dash-card-icon-blue { background: #eff6ff; }
.sf-dash-card-icon-yellow { background: #fef3c7; }
.sf-dash-card-icon-green { background: #f0fdf4; }
.sf-dash-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}
.sf-dash-card-label {
    font-size: 0.8rem;
    color: #64748b;
}
.sf-dash-card-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: #b91c1c;
}
.sf-dash-card-link:hover {
    color: #991b1b;
}
.sf-dash-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .sf-dash-actions { grid-template-columns: repeat(3, 1fr); }
}
.sf-dash-action {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    transition: all 0.3s;
    text-decoration: none;
}
.sf-dash-action:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    text-decoration: none;
}
.sf-dash-action-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sf-dash-action-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}
.sf-dash-action-desc {
    font-size: 0.8rem;
    color: #64748b;
}

/* =============================================
   RESPONSIVE OVERRIDES FOR NEW SECTIONS
   ============================================= */
@media (max-width: 767px) {
    /* Inner Hero */
    .sf-inner-hero { padding: 2rem 0; }
    .sf-inner-hero-title { font-size: 1.75rem; }
    .sf-inner-hero-desc { font-size: 1rem; }
    .sf-inner-hero-price-amount { font-size: 2.25rem; }
    .sf-inner-hero-image { height: 200px; }
    .sf-inner-hero-actions { gap: 1rem; }

    /* Plans */
    .sf-plans-title { font-size: 1.75rem; }
    .sf-plans-grid { grid-template-columns: 1fr !important; max-width: 28rem; margin-left: auto; margin-right: auto; }
    .sf-plan-popular { transform: none; }
    .sf-plan-popular:hover { transform: none; }
    .sf-plan-price-amount { font-size: 2rem; }

    /* Why Choose */
    .sf-why-title { font-size: 1.5rem; }
    .sf-why-grid { grid-template-columns: 1fr 1fr; }

    /* CTA */
    .sf-simple-cta { padding: 3rem 0; }
    .sf-simple-cta-title { font-size: 1.5rem; }
    .sf-simple-cta-btn { padding: 0.875rem 2rem; font-size: 1rem; }
}

@media (max-width: 480px) {
    .sf-why-grid { grid-template-columns: 1fr; }
    .sf-inner-hero-actions { flex-direction: column; align-items: flex-start; }
    .sf-dash-stats { grid-template-columns: 1fr 1fr; }
}

/* =============================================
   LOGIN / AUTH PAGES
   ============================================= */
.sf-login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem 1rem;
}
.sf-login-container {
    width: 100%;
    max-width: 28rem;
}
.sf-login-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    overflow: hidden;
}
.sf-login-header {
    text-align: center;
    padding: 2rem 2rem 0;
}
.sf-login-logo {
    margin-bottom: 1.5rem;
}
.sf-login-logo img {
    height: 2rem;
}
.sf-login-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.25rem;
}
.sf-login-subtitle {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}
.sf-login-form {
    padding: 1.5rem 2rem 2rem;
}
.sf-login-field {
    margin-bottom: 1.25rem;
}
.sf-login-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.375rem;
}
.sf-login-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}
.sf-login-label-row label {
    margin-bottom: 0;
}
.sf-login-forgot {
    font-size: 0.8rem;
    font-weight: 500;
    color: #b91c1c;
}
.sf-login-forgot:hover {
    color: #991b1b;
}
.sf-login-input-wrap {
    position: relative;
}
.sf-login-input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.sf-login-input-wrap .form-control {
    padding-left: 2.75rem;
    height: auto;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.sf-login-remember {
    margin-bottom: 1.25rem;
}
.sf-login-remember label {
    font-size: 0.875rem;
    font-weight: 400;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sf-login-captcha {
    margin-bottom: 1.25rem;
}
.sf-login-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #b91c1c;
    color: #fff;
    padding: 0.875rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(185,28,28,0.25);
}
.sf-login-btn:hover {
    background: #991b1b;
    box-shadow: 0 10px 15px -3px rgba(185,28,28,0.3);
}
.sf-login-divider {
    text-align: center;
    padding: 0 2rem;
    position: relative;
}
.sf-login-divider::before {
    content: '';
    position: absolute;
    left: 2rem;
    right: 2rem;
    top: 50%;
    height: 1px;
    background: #e2e8f0;
}
.sf-login-divider span {
    position: relative;
    background: #fff;
    padding: 0 0.75rem;
    color: #64748b;
    font-size: 0.8rem;
}
.sf-login-social {
    padding: 1rem 2rem;
}
.sf-login-footer {
    text-align: center;
    padding: 1rem 2rem 1.5rem;
    border-top: 1px solid #e2e8f0;
}
.sf-login-footer p {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}
.sf-login-footer a {
    font-weight: 600;
    color: #b91c1c;
}
.sf-login-page .sf-alert {
    margin: 0 2rem 0;
}

/* =============================================
   WHMCS FORM PAGES (generic styling)
   ============================================= */
.sf-form-page {
    max-width: 40rem;
    margin: 0 auto;
}
.sf-form-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    padding: 2rem;
    margin-bottom: 1.5rem;
}
.sf-form-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1.5rem;
}
.sf-form-card .form-group {
    margin-bottom: 1.25rem;
}

/* =============================================
   REACT-STYLE FORM ENHANCEMENTS
   Makes Bootstrap forms match React app design
   ============================================= */

/* Enhanced button inside login/form cards */
.sf-login-form .btn-primary,
.sf-login-form .btn-primary:focus,
.sf-form-card .btn-primary,
.sf-form-card .btn-primary:focus {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #fff !important;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.875rem 1.5rem;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(185,28,28,0.25);
    letter-spacing: 0.01em;
}
.sf-login-form .btn-primary:hover,
.sf-login-form .btn-primary:active,
.sf-form-card .btn-primary:hover,
.sf-form-card .btn-primary:active {
    background: #991b1b !important;
    border-color: #991b1b !important;
    box-shadow: 0 10px 15px -3px rgba(185,28,28,0.3);
    transform: translateY(-1px);
}

/* Enhanced form controls inside login/form cards */
.sf-login-form .form-control,
.sf-form-card .form-control {
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: #334155;
    transition: all 0.2s;
    height: auto;
    box-shadow: none;
}
.sf-login-form .form-control:focus,
.sf-form-card .form-control:focus {
    border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(185,28,28,0.1);
    outline: none;
}
.sf-login-form .form-control.input-lg,
.sf-form-card .form-control.input-lg {
    padding: 0.875rem 1rem;
    font-size: 1rem;
}

/* Enhanced labels */
.sf-login-form label,
.sf-form-card label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.375rem;
}

/* Enhanced select dropdowns */
.sf-login-form select.form-control,
.sf-form-card select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    padding-right: 2.5rem;
}

/* Checkbox styling */
.sf-login-form .checkbox label,
.sf-form-card .checkbox label {
    font-size: 0.875rem;
    font-weight: 400;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* Help block */
.sf-form-card .help-block {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* Section headers in register form */
.sf-form-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

/* Hidden utility */
.hidden { display: none !important; }

/* reCAPTCHA container centering */
.recaptcha-container {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

/* Two-factor card button styling */
.sf-login-card .btn-default {
    border-radius: 0.5rem;
    font-weight: 500;
    border-color: #e2e8f0;
    color: #334155;
}
.sf-login-card .btn-default:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* =============================================
   LEGAL PAGES (Privacy Policy, Terms of Service)
   Dark background matching React design
   ============================================= */
.sf-legal-page {
    background: linear-gradient(135deg, #0f172a, #1e293b, #0f172a);
    color: #e2e8f0;
    padding: 4rem 0;
    min-height: 60vh;
    position: relative;
    overflow: hidden;
}
.sf-legal-page::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zNiAxOGMzLjMxNCAwIDYgMi42ODYgNiA2cy0yLjY4NiA2LTYgNi02LTIuNjg2LTYtNiAyLjY4Ni02IDYtNnoiIHN0cm9rZT0iIzFmMjkzNyIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9nPjwvc3ZnPg==");
}
.sf-legal-inner {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 640px) { .sf-legal-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sf-legal-inner { padding: 0 2rem; } }
.sf-legal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(185,28,28,0.1);
    border: 1px solid rgba(185,28,28,0.3);
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(4px);
    color: #fca5a5;
    font-size: 0.85rem;
    font-weight: 600;
}
.sf-legal-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2rem;
    text-align: center;
}
@media (min-width: 640px) { .sf-legal-title { font-size: 3rem; } }
@media (min-width: 1024px) { .sf-legal-title { font-size: 3.75rem; } }
.sf-legal-content {
    text-align: justify;
    line-height: 1.8;
    font-size: 0.95rem;
}
.sf-legal-content p {
    margin-bottom: 1rem;
    color: #cbd5e1;
}
.sf-legal-content ol,
.sf-legal-content ul {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    color: #cbd5e1;
}
.sf-legal-content li {
    margin-bottom: 0.5rem;
}
.sf-legal-content strong {
    color: #fff;
}
.sf-legal-content a {
    color: #f87171;
}
.sf-legal-content a:hover {
    color: #fca5a5;
}

/* =============================================
   CLIENT AREA NAVIGATION BAR (logged-in users)
   ============================================= */
.sf-client-nav {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sf-client-nav-inner {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: max-content;
}
.sf-client-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    white-space: nowrap;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    text-decoration: none;
}
.sf-client-nav-link:hover {
    color: #b91c1c;
    background: #fff;
    text-decoration: none;
}
.sf-client-nav-link.active {
    color: #b91c1c;
    border-bottom-color: #b91c1c;
    font-weight: 600;
    background: #fff;
}
.sf-client-nav-link svg {
    opacity: 0.7;
}
.sf-client-nav-link.active svg,
.sf-client-nav-link:hover svg {
    opacity: 1;
}
.sf-client-nav-order {
    margin-left: auto;
    background: #b91c1c;
    color: #fff !important;
    border-radius: 0.5rem;
    margin: 0.5rem 0;
    border-bottom: none !important;
    padding: 0.5rem 1rem;
    font-weight: 600;
}
.sf-client-nav-order:hover {
    background: #991b1b;
    color: #fff !important;
}
@media (max-width: 768px) {
    .sf-client-nav-link { padding: 0.75rem 0.875rem; font-size: 0.8rem; }
    .sf-client-nav-link span.nav-text { display: none; }
}

/* =============================================
   BACK / NEXT NAVIGATION BUTTONS
   ============================================= */
.sf-page-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.sf-page-nav-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    flex: 1;
}
.sf-page-nav-buttons {
    display: flex;
    gap: 0.5rem;
}
.sf-page-nav-buttons a.sf-btn-back,
.sf-page-nav-buttons a.sf-btn-next,
a.sf-btn-back,
a.sf-btn-next {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-indent: 0 !important;
    visibility: visible !important;
}
.sf-page-nav-buttons a.sf-btn-back,
a.sf-btn-back {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
}
.sf-page-nav-buttons a.sf-btn-back:hover,
a.sf-btn-back:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}
.sf-page-nav-buttons a.sf-btn-next,
.sf-main-content a.sf-btn-next,
a.sf-btn-next,
a.sf-btn-next span,
.sf-btn-next {
    background: #b91c1c !important;
    color: #fff !important;
    border: 1px solid #b91c1c !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}
.sf-page-nav-buttons a.sf-btn-next:hover,
.sf-main-content a.sf-btn-next:hover,
a.sf-btn-next:hover {
    background: #991b1b !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
}

/* Force ALL button text to be visible */
.sf-main-content .btn-primary,
.sf-main-content a.btn-primary,
.sf-main-content button.btn-primary,
.sf-main-content input.btn-primary,
.sf-main-content .btn-primary span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}
.sf-main-content .btn-default,
.sf-main-content a.btn-default {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
}
.sf-empty-state .btn-primary {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* =============================================
   IMPROVED CLIENT AREA TABLES
   ============================================= */
.sf-main-content .table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
}
.sf-main-content .table > thead > tr > th {
    background: #f8fafc;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid #e2e8f0;
    padding: 0.875rem 1rem;
}
.sf-main-content .table > tbody > tr > td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
    font-size: 0.9rem;
}
.sf-main-content .table > tbody > tr:last-child > td {
    border-bottom: none;
}
.sf-main-content .table > tbody > tr:hover > td {
    background: #f8fafc;
}

/* Status labels */
.sf-main-content .label {
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    letter-spacing: 0.02em;
}

/* Improved panels for client area */
.sf-main-content .panel {
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.sf-main-content .panel-heading {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem 1.25rem;
}
.sf-main-content .panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}
.sf-main-content .panel-body {
    padding: 1.25rem;
}
.sf-main-content .panel-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 0.875rem 1.25rem;
}
.sf-main-content .list-group-item {
    border-color: #f1f5f9;
    padding: 0.875rem 1.25rem;
    font-size: 0.9rem;
    color: #334155;
    transition: all 0.15s;
}
.sf-main-content .list-group-item:hover {
    background: #f8fafc;
    color: #b91c1c;
}
.sf-main-content .list-group-item.active {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* Empty state */
.sf-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
}
.sf-empty-state svg {
    margin-bottom: 1rem;
    opacity: 0.4;
}
.sf-empty-state p {
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* Pagination */
.sf-main-content .pagination > li > a,
.sf-main-content .pagination > li > span {
    color: #b91c1c;
    border-color: #e2e8f0;
    border-radius: 0.375rem !important;
    margin: 0 0.125rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.85rem;
}
.sf-main-content .pagination > .active > a {
    background: #b91c1c;
    border-color: #b91c1c;
}
.sf-main-content .pagination > li > a:hover {
    background: #fef2f2;
    color: #b91c1c;
}

/* =============================================
   SELECT2 — React-style design system
   Brand red #b91c1c, slate borders #e2e8f0, Roboto
   Padding/sizing matches the React app form-control look
   ============================================= */

/* Single-select container — 38px tall to match other form fields */
.select2-container--default .select2-selection--single {
    height: 38px;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    background: #fff;
    padding: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Multiple-select container — auto-grows */
.select2-container--default .select2-selection--multiple {
    min-height: 38px;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    background: #fff;
    padding: 3px 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Selected value text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #0f172a;
    line-height: 36px;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0 2.25rem 0 0.875rem;
}

/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8;
}

/* Dropdown arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    width: 28px;
    right: 4px;
    top: 1px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #64748b transparent transparent transparent;
    border-width: 6px 5px 0 5px;
    margin-left: -5px;
    margin-top: -3px;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #64748b transparent;
    border-width: 0 5px 6px 5px;
}

/* Focus / open — brand red ring */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12) !important;
}

/* Multi-select chips */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 0.375rem;
    padding: 2px 0.5rem;
    margin-top: 4px;
    margin-right: 4px;
    font-size: 0.85rem;
    font-weight: 500;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #b91c1c;
    margin-right: 0.375rem;
    font-weight: 700;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #7c1515;
}

/* Dropdown panel */
.select2-dropdown {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.12), 0 4px 10px -3px rgba(0,0,0,0.05);
    overflow: hidden;
    margin-top: 4px;
}

/* In-dropdown search */
.select2-container--default .select2-search--dropdown {
    padding: 0.5rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem;
    outline: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 2px rgba(185,28,28,0.1);
}

/* Results list */
.select2-results__options { padding: 0.25rem 0; max-height: 280px; }
.select2-container--default .select2-results__option {
    padding: 0.5rem 0.875rem;
    font-size: 0.9rem;
    color: #334155;
    transition: background-color 0.1s ease;
}

/* Hovered/keyboard-focused option */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background-color: #b91c1c !important;
    color: #fff !important;
}

/* Currently selected option */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fef2f2;
    color: #b91c1c;
    font-weight: 600;
}
.select2-container--default .select2-results__option[aria-selected=true].select2-results__option--highlighted {
    background-color: #b91c1c !important;
    color: #fff !important;
}

/* Disabled / empty / optgroup */
.select2-container--default .select2-results__option--disabled { color: #cbd5e1; }
.select2-container--default .select2-results__option.select2-results__message {
    color: #94a3b8;
    font-style: italic;
    padding: 0.75rem 0.875rem;
}
.select2-container--default .select2-results__group {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid #e2e8f0;
}

/* Disabled state */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background: #f1f5f9;
    cursor: not-allowed;
    opacity: 0.7;
}

/* =============================================
   CUSTOM CHECKBOX (React-style)
   ============================================= */
.sf-checkbox {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    font-weight: 400;
    margin: 0;
    user-select: none;
}
.sf-checkbox input[type="checkbox"] {
    display: none;
}
.sf-checkbox-box {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #cbd5e1;
    border-radius: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    background: #fff;
}
.sf-checkbox input:checked + .sf-checkbox-box {
    background: #b91c1c;
    border-color: #b91c1c;
}
.sf-checkbox input:checked + .sf-checkbox-box::after {
    content: '';
    display: block;
    width: 0.375rem;
    height: 0.625rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}
.sf-checkbox-label {
    font-size: 0.875rem;
    color: #334155;
}
.sf-checkbox:hover .sf-checkbox-box {
    border-color: #b91c1c;
}

/* =============================================
   TICKET REPLY STYLES
   ============================================= */
.ticket-reply-staff {
    border-left: 3px solid #b91c1c;
}
.ticket-reply-client {
    border-left: 3px solid #3b82f6;
}
.ticket-reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.ticket-reply-body {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.9rem;
    line-height: 1.7;
}

/* =============================================
   ADDON ITEM STYLES (Domain Management)
   ============================================= */
.addon-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.addon-item:last-child {
    border-bottom: none;
}
.addon-item-details {
    flex: 1;
}
.addon-item-price {
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    margin-left: 1rem;
}

/* =============================================
   KB CATEGORY CARD STYLES
   ============================================= */
.kb-cat-link {
    display: block;
    text-decoration: none;
    transition: all 0.2s;
    color: inherit;
}
.kb-cat-link:hover {
    text-decoration: none;
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

/* =============================================
   PAYMENT PAGE STYLES
   ============================================= */
.cc-input-container .nav-tabs {
    margin-bottom: 0;
}
.cc-input-container .tab-content {
    padding: 1.25rem;
}
.cc-list .cc-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}
.cc-list .cc-item:hover,
.cc-list .cc-item.active {
    border-color: #b91c1c;
    background: #fef2f2;
}
.cc-list .cc-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.cc-item-checkbox {
    flex-shrink: 0;
}
.cc-item-icon {
    flex-shrink: 0;
    width: 2.5rem;
}
.cc-item-icon img {
    max-width: 100%;
    height: auto;
}
.cc-item-name {
    font-weight: 600;
    color: #0f172a;
}
.cc-item-desc {
    color: #64748b;
    font-size: 0.85rem;
}
.cc-item-desc.empty {
    display: none;
}
.cc-item-status {
    color: #64748b;
    font-size: 0.85rem;
    margin-left: auto;
}
.cc-item-actions {
    margin-left: auto;
}

/* Main content + sidebar layout for payment page */
.main-sidebar {
    margin-top: 1.5rem;
}
@media (min-width: 768px) {
    form.main-content {
        display: flex;
        gap: 2rem;
    }
    form.main-content > .sf-container {
        flex: 1;
    }
    form.main-content > .main-sidebar {
        width: 350px;
        flex-shrink: 0;
        margin-top: 0;
    }
}

/* =============================================
   LAGOM2 CLASS OVERRIDES
   These styles ensure lagom2 templates render
   correctly with the serverfellows design when
   RSThemes fallback is used.
   ============================================= */

/* Lagom2 section structure */
.section { margin-bottom: 1.5rem; }
.section-header { margin-bottom: 1rem; }
.section-title { font-size: 1.125rem; font-weight: 700; color: #0f172a; }
.section-body { }

/* Lagom2 alert-lagom → use our alert styles */
.alert-lagom { border-radius: 0.75rem; border: none; padding: 1rem 1.25rem; font-size: 0.875rem; }
.alert-lagom.alert-primary,
.alert-lagom.alert-info { background: #eff6ff; color: #1e40af; border-left: 4px solid #3b82f6; }
.alert-lagom.alert-success { background: #f0fdf4; color: #166534; border-left: 4px solid #22c55e; }
.alert-lagom.alert-danger { background: #fef2f2; color: #991b1b; border-left: 4px solid #dc2626; }
.alert-lagom.alert-warning { background: #fffbeb; color: #92400e; border-left: 4px solid #f59e0b; }
.alert-lagom .alert-body { font-size: 0.9rem; }

/* Lagom2 list-info (used in invoices, products) */
.list-info { list-style: none; padding: 0; margin: 0; }
.list-info li { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9; }
.list-info li:last-child { border-bottom: none; }
.list-info-text { color: #64748b; font-size: 0.85rem; }
.list-info-title { font-weight: 600; color: #0f172a; }
.list-info-50 li { width: 100%; }

/* Lagom2 price display */
.price { margin-bottom: 0.5rem; }
.price-title { font-size: 0.8rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
.price-amount { font-size: 1.75rem; font-weight: 700; color: #b91c1c; }
.price-sm .price-amount { font-size: 1.25rem; }
.price-total { font-size: 0.9rem; color: #64748b; font-weight: 600; }

/* Lagom2 panel-summary */
.panel-summary { border-color: #b91c1c; border-width: 2px; }
.panel-summary .panel-heading { background: #fef2f2 !important; border-color: #fecaca; }
.panel-summary .panel-footer { background: #fef2f2; border-color: #fecaca; padding: 1.25rem; }

/* Lagom2 panel-sidebar */
.panel-sidebar .panel-heading { background: #f8fafc !important; }
.panel-sidebar .panel-heading h6 { font-size: 0.85rem; }

/* Lagom2 panel-form */
.panel-form .panel-body { padding: 1.25rem; }
.panel-form .panel-footer { text-align: end; }

/* Lagom2 panel-nav (tabs inside panels) */
.panel-nav { border-bottom: 1px solid #e2e8f0; }
.panel-nav .nav-tabs { margin-bottom: 0; border-bottom: none; }
.panel-nav .nav-tabs > li > a { border-radius: 0; border: none; border-bottom: 2px solid transparent; color: #64748b; font-weight: 500; padding: 0.75rem 1.25rem; }
.panel-nav .nav-tabs > li > a.active,
.panel-nav .nav-tabs > li.active > a { color: #b91c1c; border-bottom-color: #b91c1c; background: transparent; }

/* Lagom2 tab */
.tab-boxed { margin-bottom: 1.5rem; }
.tab-boxed .nav-tabs { border-bottom: 2px solid #e2e8f0; }
.tab-boxed .nav-tabs > li > a { border-radius: 0.5rem 0.5rem 0 0; padding: 0.75rem 1.25rem; font-weight: 500; color: #64748b; }
.tab-boxed .nav-tabs > li > a.active,
.tab-boxed .nav-tabs > li.active > a { color: #b91c1c; border-bottom: 2px solid #b91c1c; }
.tab-boxed .tab-content { padding: 1.5rem 0; }

/* Lagom2 form-actions */
.form-actions { margin-top: 1.5rem; padding-top: 1rem; }

/* Lagom2 messages */
.message { text-align: center; padding: 3rem 1rem; }
.message-no-data { color: #64748b; }
.message-image { margin-bottom: 1rem; opacity: 0.4; }
.message-title { font-size: 1rem; font-weight: 600; color: #64748b; }

/* Lagom2 iCheck overrides (make checkboxes/radios work) */
.icheck-control { margin-right: 0.5rem; }
.icheck-label { font-weight: 400; }
.radio-styled, .checkbox-styled { display: inline-block; }

/* Lagom2 icon classes */
.ls, .lm, .fa { margin-right: 0.25rem; }

/* Lagom2 btn-primary-faded */
.btn-primary-faded {
    background-color: rgba(185, 28, 28, 0.1) !important;
    color: #b91c1c !important;
    border-color: rgba(185, 28, 28, 0.2) !important;
    border-radius: 0.5rem;
    font-weight: 600;
}
.btn-primary-faded:hover {
    background-color: #b91c1c !important;
    color: #fff !important;
}

/* Lagom2 summary styles */
.summary-content .summary-list { list-style: none; padding: 0; margin: 0; }
.summary-list .list-item { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9; }
.summary-list .item-name { color: #334155; font-size: 0.9rem; }
.summary-list .item-value { font-weight: 600; }

/* Lagom2 table-list / table-container */
.table-container { margin-bottom: 1.5rem; }
.table-list { margin-bottom: 0; }

/* Lagom2 spacing utilities */
.m-b-0 { margin-bottom: 0 !important; }
.m-b-1x { margin-bottom: 0.5rem !important; }
.m-b-2x { margin-bottom: 1rem !important; }
.m-b-4x { margin-bottom: 2rem !important; }
.m-t-1x { margin-top: 0.5rem !important; }
.m-t-2x { margin-top: 1rem !important; }
.m-t-4x { margin-top: 2rem !important; }
.m-l-1x { margin-left: 0.5rem !important; }
.m-r-1x { margin-right: 0.5rem !important; }
.m-w-xs { max-width: 24rem; }
.p-0 { padding: 0 !important; }
.no-padding { padding: 0 !important; }

/* Lagom2 text utilities */
.text-light { color: #94a3b8 !important; }
.text-lighter { color: #cbd5e1 !important; }
.small-text { font-size: 0.8rem; }

/* Lagom2 display utilities */
.d-flex { display: flex !important; }
.justify-center { justify-content: center; }
.align-center { align-items: center; }
.w-hidden { display: none !important; }

/* Lagom2 status labels */
.status { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; }
.status-active { background: #f0fdf4; color: #166534; }
.status-expired { background: #fef2f2; color: #991b1b; }

/* Lagom2 generate-password button */
.generate-password { margin-top: 0.25rem; }

/* Lagom2 file-input custom file upload */
.file-input { position: relative; overflow: hidden; }
.file-input input[type="file"] { position: absolute; top: 0; right: 0; opacity: 0; cursor: pointer; height: 100%; }
.file-input-button { cursor: pointer; }
.file-input-text { margin-left: 0.5rem; color: #64748b; }

/* Lagom2 invoice-specific */
.invoice .section { margin-bottom: 2rem; }
.invoice .section h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.invoice address { font-style: normal; line-height: 1.8; }
.invoice .sub-total-row td { background: #f8fafc; font-weight: 500; }
.invoice .sub-total-row.first td { border-top: 2px solid #e2e8f0; }
.invoice .total-row td { background: #fef2f2; font-weight: 700; font-size: 1.05rem; color: #b91c1c; }
.invoice-title { font-size: 1.5rem; font-weight: 700; }
.invoice-status { vertical-align: middle; margin-left: 0.5rem; }

/* Lagom2 article styles */
.article .article-details { list-style: none; padding: 0; margin: 0 0 1rem; }
.article .article-details li { display: inline-flex; align-items: center; gap: 0.25rem; color: #64748b; font-size: 0.85rem; margin-right: 1rem; }
.article-content { line-height: 1.8; }
.article-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }
.article-actions { display: flex; gap: 0.5rem; }

/* Lagom2 notes */
.notes { margin-top: 1.5rem; }
.notes-heading { margin-bottom: 0.5rem; }
.notes-body { background: #f8fafc; padding: 1rem; border-radius: 0.5rem; border: 1px solid #e2e8f0; }

/* Lagom2 main-body/container (fallback layout) */
.main-body { padding: 2rem 0; }
.main-body .container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }

/* Lagom2 sidebar-sticky */
.sidebar-sticky { position: sticky; top: 5rem; }

/* =============================================
   REACT APP DESIGN OVERRIDES
   Force lagom2 templates to match React app
   ============================================= */

/* Force single-column layout - no two-column sidebar on main pages */
.sf-main-content .main-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
}
.sf-main-content .main-sidebar {
    width: 100% !important;
    float: none !important;
    margin-top: 1.5rem !important;
}
.sf-main-content .main-sidebar-right {
    float: none !important;
}

/* Override lagom2 container */
.sf-main-content .container {
    max-width: 80rem !important;
    padding: 0 !important;
}

/* Override lagom2 body/grid */
.sf-main-content .main-body {
    padding: 0 !important;
}
.sf-main-content .main-grid {
    display: block !important;
}

/* Force React-style panels */
.sf-main-content .panel {
    border-radius: 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    margin-bottom: 1.5rem !important;
    overflow: hidden !important;
    background: #fff !important;
}
.sf-main-content .panel-heading {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
    padding: 1rem 1.25rem !important;
}
.sf-main-content .panel-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
.sf-main-content .panel-body {
    padding: 1.25rem !important;
}
.sf-main-content .panel-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 0.875rem 1.25rem !important;
}

/* Force React-style form controls */
.sf-main-content .form-control {
    border-radius: 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.875rem !important;
    color: #334155 !important;
    height: auto !important;
    transition: all 0.2s !important;
}
.sf-main-content .form-control:focus {
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(185,28,28,0.1) !important;
    outline: none !important;
}
.sf-main-content .form-group {
    margin-bottom: 1rem !important;
}
.sf-main-content label,
.sf-main-content .control-label {
    font-weight: 500 !important;
    color: #0f172a !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.375rem !important;
    display: block !important;
}
.sf-main-content .radio label,
.sf-main-content .checkbox label {
    display: inline !important;
    font-weight: 400 !important;
}

/* Force React-style buttons */
.sf-main-content .btn {
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
    font-family: 'Roboto', sans-serif !important;
}
.sf-main-content .btn-primary {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    padding: 0.625rem 1.5rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}
.sf-main-content .btn-primary:hover {
    background: #991b1b !important;
    border-color: #991b1b !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}
.sf-main-content .btn-default {
    background: #fff !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
}
.sf-main-content .btn-default:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
.sf-main-content .btn-danger {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.sf-main-content .btn-success {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Force React-style tables */
.sf-main-content .table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    width: 100% !important;
}
.sf-main-content .table > thead > tr > th {
    background: #f8fafc !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 0.875rem 1rem !important;
    border-top: none !important;
}
.sf-main-content .table > tbody > tr > td {
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-top: none !important;
    color: #334155 !important;
    vertical-align: middle !important;
    font-size: 0.9rem !important;
}
.sf-main-content .table > tbody > tr:last-child > td {
    border-bottom: none !important;
}
.sf-main-content .table > tbody > tr:hover > td {
    background: #f8fafc !important;
}

/* Force React-style status labels */
.sf-main-content .label {
    border-radius: 9999px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 0.25rem 0.75rem !important;
    letter-spacing: 0.02em !important;
}

/* Force React-style alerts */
.sf-main-content .alert {
    border-radius: 0.75rem !important;
    border: none !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.875rem !important;
}
.sf-main-content .alert-success {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border-left: 4px solid #22c55e !important;
}
.sf-main-content .alert-danger {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-left: 4px solid #dc2626 !important;
}
.sf-main-content .alert-warning {
    background: #fffbeb !important;
    color: #92400e !important;
    border-left: 4px solid #f59e0b !important;
}
.sf-main-content .alert-info {
    background: #eff6ff !important;
    color: #1e40af !important;
    border-left: 4px solid #3b82f6 !important;
}

/* USER OVERRIDE: Default link color = black */
.sf-main-content a {
    color: #ffffff !important;
    text-decoration: none !important;

}
.sf-main-content a:hover {
    text-decoration: underline;
}
.sf-main-content .btn a,
.sf-main-content a.btn {
    color: inherit !important;
}
.sf-main-content .list-group-item a {
    color: inherit !important;
}
.sf-main-content .table a {
    color: #b91c1c !important;
}

/* Force React-style list groups */
.sf-main-content .list-group-item {
    border-color: #f1f5f9 !important;
    padding: 0.875rem 1.25rem !important;
    font-size: 0.9rem !important;
    color: #334155 !important;
    transition: all 0.15s !important;
}
.sf-main-content .list-group-item:hover {
    background: #f8fafc !important;
    color: #b91c1c !important;
}
.sf-main-content .list-group-item.active {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #fff !important;
}

/* React-style tabs */
.sf-main-content .nav-tabs {
    border-bottom: 2px solid #e2e8f0 !important;
    margin-bottom: 1.5rem !important;
}
.sf-main-content .nav-tabs > li > a {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: #64748b !important;
    font-weight: 500 !important;
    padding: 0.75rem 1.25rem !important;
    margin-bottom: -2px !important;
}
.sf-main-content .nav-tabs > li > a:hover {
    border-color: transparent !important;
    border-bottom-color: #cbd5e1 !important;
    background: transparent !important;
    color: #334155 !important;
}
.sf-main-content .nav-tabs > li.active > a,
.sf-main-content .nav-tabs > li > a.active {
    color: #b91c1c !important;
    border-bottom-color: #b91c1c !important;
    background: transparent !important;
}
.sf-main-content .tab-content {
    padding-top: 0.5rem !important;
}

/* React-style pagination */
.sf-main-content .pagination > li > a,
.sf-main-content .pagination > li > span {
    color: #b91c1c !important;
    border-color: #e2e8f0 !important;
    border-radius: 0.375rem !important;
    margin: 0 0.125rem !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.85rem !important;
}
.sf-main-content .pagination > .active > a {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #fff !important;
}
.sf-main-content .pagination > li > a:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

/* Force React-style well */
.sf-main-content .well {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    box-shadow: none !important;
}

/* Force React-style modals */
.modal-content {
    border-radius: 0.75rem !important;
    border: none !important;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important;
}
.modal-header {
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 1.25rem 1.5rem !important;
}
.modal-body {
    padding: 1.5rem !important;
}
.modal-footer {
    border-top: 1px solid #e2e8f0 !important;
    padding: 1rem 1.5rem !important;
}
.modal-title {
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* Force React-style progress bars */
.sf-main-content .progress {
    height: 8px !important;
    border-radius: 9999px !important;
    background: #e2e8f0 !important;
    overflow: hidden !important;
}
.sf-main-content .progress-bar {
    border-radius: 9999px !important;
}
.sf-main-content .progress-bar-success { background: #22c55e !important; }
.sf-main-content .progress-bar-warning { background: #f59e0b !important; }
.sf-main-content .progress-bar-danger { background: #dc2626 !important; }

/* Select2 styling is consolidated above (see "SELECT2 — React-style design system") */

/* Hide lagom2 loading spinners that reference missing SVGs */
.spinner .rect1, .spinner .rect2, .spinner .rect3, .spinner .rect4, .spinner .rect5 {
    background: #b91c1c !important;
}

/* Override lagom2 icon classes to not break layout */
.ls, .lm { display: inline-block; width: 1em; height: 1em; }
i.ls, i.lm { font-style: normal; }

/* Ensure all text is Roboto */
.sf-main-content, .sf-main-content * {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ...but never the icon fonts.

   The rule above matches EVERY descendant and is !important, so it also wins on
   <i class="fas">. Font Awesome draws its glyphs in ::before, and ::before
   inherits font-family from its own element — so the correct codepoint (e.g.
   \f2f6 for fa-sign-in-alt) ends up being drawn in Roboto, which has nothing at
   that position. The icon is present, sized and visible; it just renders as
   blank space, which is exactly what "the icons aren't showing" looks like.

   Restoring the family here rather than dropping the `*` above keeps the Roboto
   sweep intact for actual text. Weights are left alone: FA's own .fas/.far/.fab
   rules set those and nothing overrides them. Brands live in a separate family,
   so they get their own rule — it comes second with equal specificity, which is
   what makes it win for .fab / .fa-brands. */
.sf-main-content .fa,
.sf-main-content .fas,
.sf-main-content .fa-solid,
.sf-main-content .far,
.sf-main-content .fa-regular,
.sf-main-content .fal,
.sf-main-content .fad,
.sf-main-content [class^="fa-"],
.sf-main-content [class*=" fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "Font Awesome 6 Pro", FontAwesome !important;
}

.sf-main-content .fab,
.sf-main-content .fa-brands {
    font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands" !important;
}

/* React-style section headings inside panels */
.sf-main-content .section h2,
.sf-main-content .section h3,
.sf-main-content .section-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 1rem !important;
}

/* Force breadcrumbs to React style */
.sf-main-content .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 1rem !important;
    font-size: 0.85rem !important;
}
.sf-main-content .breadcrumb > li + li:before {
    color: #94a3b8 !important;
}

/* Override lagom2 pricing display */
.sf-main-content .price-amount {
    color: #b91c1c !important;
    font-weight: 700 !important;
}

/* Ensure consistent spacing */
.sf-main-content .section {
    margin-bottom: 1.5rem !important;
}
.sf-main-content .form-actions {
    margin-top: 1.5rem !important;
    padding-top: 1rem !important;
}


/* =============================================
   GLOBAL POLISH — Final pass
   Ensures every element scrolls, paddings/margins are correct,
   buttons are red, links are red, focus states match React app
   ============================================= */

html { scroll-behavior: smooth; }
body { font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #b91c1c; }

/* ALL Bootstrap button variants → React red primary */
.sf-main-content .btn,
.btn {
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
    padding: 0.5rem 1.25rem !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    cursor: pointer;
}
.sf-main-content .btn-primary,
.btn-primary {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(185,28,28,0.1) !important;
}
.sf-main-content .btn-primary:hover,
.btn-primary:hover,
.sf-main-content .btn-primary:focus,
.btn-primary:focus,
.sf-main-content .btn-primary:active,
.btn-primary:active {
    background: #991b1b !important;
    border-color: #991b1b !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(185,28,28,0.2) !important;
}
.sf-main-content .btn-default,
.btn-default,
.sf-main-content .btn-secondary,
.btn-secondary {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}
.sf-main-content .btn-default:hover,
.btn-default:hover,
.sf-main-content .btn-secondary:hover,
.btn-secondary:hover {
    background: #f8fafc !important;
    border-color: #b91c1c !important;
    color: #b91c1c !important;
}
.sf-main-content .btn-success,
.btn-success { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
.sf-main-content .btn-success:hover,
.btn-success:hover { background: #15803d !important; border-color: #15803d !important; }
.sf-main-content .btn-info,
.btn-info { background: #0ea5e9 !important; border-color: #0ea5e9 !important; color: #fff !important; }
.sf-main-content .btn-info:hover,
.btn-info:hover { background: #0284c7 !important; border-color: #0284c7 !important; }
.sf-main-content .btn-warning,
.btn-warning { background: #f59e0b !important; border-color: #f59e0b !important; color: #fff !important; }
.sf-main-content .btn-warning:hover,
.btn-warning:hover { background: #d97706 !important; border-color: #d97706 !important; }
.sf-main-content .btn-danger,
.btn-danger { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }
.sf-main-content .btn-danger:hover,
.btn-danger:hover { background: #b91c1c !important; border-color: #b91c1c !important; }
.sf-main-content .btn-link,
.btn-link {
    background: transparent !important;
    border: none !important;
    color: #b91c1c !important;
    padding: 0.25rem 0.5rem !important;
    box-shadow: none !important;
}
.sf-main-content .btn-link:hover,
.btn-link:hover { color: #991b1b !important; background: #fef2f2 !important; }
.sf-main-content .btn-lg,
.btn-lg { padding: 0.75rem 1.75rem !important; font-size: 1rem !important; border-radius: 0.5rem !important; }
.sf-main-content .btn-sm,
.btn-sm { padding: 0.375rem 0.875rem !important; font-size: 0.8rem !important; border-radius: 0.375rem !important; }
.sf-main-content .btn-xs,
.btn-xs { padding: 0.25rem 0.625rem !important; font-size: 0.75rem !important; border-radius: 0.375rem !important; }
.sf-main-content .btn-block,
.btn-block { display: block; width: 100%; }
.sf-main-content .btn:disabled,
.btn:disabled,
.sf-main-content .btn.disabled,
.btn.disabled { opacity: 0.55 !important; cursor: not-allowed !important; box-shadow: none !important; }

/* ALL inputs/textareas — react form control */
.sf-main-content input[type=text],
.sf-main-content input[type=email],
.sf-main-content input[type=password],
.sf-main-content input[type=number],
.sf-main-content input[type=tel],
.sf-main-content input[type=url],
.sf-main-content input[type=search],
.sf-main-content input[type=date],
.sf-main-content textarea,
.sf-main-content .form-control {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.9rem !important;
    color: #0f172a !important;
    background: #fff !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    line-height: 1.5 !important;
}
.sf-main-content input[type=text]:focus,
.sf-main-content input[type=email]:focus,
.sf-main-content input[type=password]:focus,
.sf-main-content input[type=number]:focus,
.sf-main-content input[type=tel]:focus,
.sf-main-content input[type=url]:focus,
.sf-main-content input[type=search]:focus,
.sf-main-content textarea:focus,
.sf-main-content .form-control:focus {
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(185,28,28,0.12) !important;
    outline: 0 !important;
}
.sf-main-content .input-lg { padding: 0.75rem 1rem !important; font-size: 1rem !important; border-radius: 0.5rem !important; }

.sf-main-content label { font-weight: 500 !important; color: #0f172a !important; font-size: 0.9rem !important; margin-bottom: 0.375rem !important; }
.sf-main-content .form-group { margin-bottom: 1.25rem !important; }
.sf-main-content .form-control:disabled,
.sf-main-content .form-control[readonly] { background: #f1f5f9 !important; cursor: not-allowed !important; opacity: 0.7 !important; }

/* Tables */
.sf-main-content .table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    width: 100% !important;
    margin-bottom: 1.5rem !important;
}
.sf-main-content .table th {
    background: #f8fafc !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
    text-align: left !important;
}
.sf-main-content .table td {
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    font-size: 0.9rem !important;
    vertical-align: middle !important;
}
.sf-main-content .table tr:last-child td { border-bottom: none !important; }
.sf-main-content .table-hover tbody tr:hover { background: #fef2f2 !important; }
.sf-main-content .table-striped tbody tr:nth-of-type(odd) { background: #fafbfc !important; }

/* Panels */
.sf-main-content .panel {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    margin-bottom: 1.5rem !important;
    background: #fff !important;
    overflow: hidden !important;
}
.sf-main-content .panel-heading {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 1rem 1.25rem !important;
}
.sf-main-content .panel-title,
.sf-main-content .panel-heading h3,
.sf-main-content .panel-heading h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}
.sf-main-content .panel-body { padding: 1.25rem !important; }
.sf-main-content .panel-footer { background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; padding: 0.875rem 1.25rem !important; }

/* =============================================
   DASHBOARD "Register a New Domain" panel card
   (WHMCS auto-generates this panel; style the
   inline domain search form inside it)
   ============================================= */
.sf-main-content .panel .panel-body form {
    margin: 0;
}
.sf-main-content .panel .panel-body .form-inline,
.sf-main-content .panel .panel-body .form-horizontal,
.sf-main-content .panel .panel-body form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}
.sf-main-content .panel .panel-body form > .form-group,
.sf-main-content .panel .panel-body form > .input-group {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.sf-main-content .panel .panel-body form input[type="text"],
.sf-main-content .panel .panel-body form input[type="search"],
.sf-main-content .panel .panel-body form input[name="sld"],
.sf-main-content .panel .panel-body form input[name="domain"],
.sf-main-content .panel .panel-body form input[name="query"],
.sf-main-content .panel .panel-body form .form-control {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0.625rem 0.875rem !important;
    border: 1px solid var(--sf-border) !important;
    border-radius: var(--sf-radius-md) !important;
    background: #fff !important;
    font-size: 0.9375rem !important;
    box-shadow: none !important;
    transition: border-color var(--sf-transition), box-shadow var(--sf-transition);
}
.sf-main-content .panel .panel-body form input[type="text"]:focus,
.sf-main-content .panel .panel-body form input[type="search"]:focus,
.sf-main-content .panel .panel-body form input[name="sld"]:focus,
.sf-main-content .panel .panel-body form input[name="domain"]:focus,
.sf-main-content .panel .panel-body form input[name="query"]:focus,
.sf-main-content .panel .panel-body form .form-control:focus {
    border-color: var(--sf-brand-600) !important;
    box-shadow: 0 0 0 3px rgba(185,28,28,0.12) !important;
    outline: none !important;
}
.sf-main-content .panel .panel-body form select,
.sf-main-content .panel .panel-body form select.form-control {
    min-height: 44px !important;
    padding: 0.625rem 0.75rem !important;
    border: 1px solid var(--sf-border) !important;
    border-radius: var(--sf-radius-md) !important;
    background: #fff !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    min-width: 96px;
    cursor: pointer;
    box-shadow: none !important;
}
.sf-main-content .panel .panel-body form button[type="submit"],
.sf-main-content .panel .panel-body form input[type="submit"],
.sf-main-content .panel .panel-body form .btn-primary {
    min-height: 44px !important;
    padding: 0.625rem 1.25rem !important;
    border: none !important;
    border-radius: var(--sf-radius-md) !important;
    background: var(--sf-brand-600) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--sf-transition), box-shadow var(--sf-transition);
    box-shadow: var(--sf-shadow-sm) !important;
}
.sf-main-content .panel .panel-body form button[type="submit"]:hover,
.sf-main-content .panel .panel-body form input[type="submit"]:hover,
.sf-main-content .panel .panel-body form .btn-primary:hover {
    background: var(--sf-brand-700) !important;
    box-shadow: var(--sf-shadow-md) !important;
}
/* Neutralise Bootstrap 3 .input-group quirks inside the panel */
.sf-main-content .panel .panel-body form .input-group {
    display: flex !important;
    width: 100%;
}
.sf-main-content .panel .panel-body form .input-group > .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.sf-main-content .panel .panel-body form .input-group > .input-group-btn > .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    min-height: 44px !important;
}
/* Stack on narrow screens */
@media (max-width: 480px) {
    .sf-main-content .panel .panel-body form > *,
    .sf-main-content .panel .panel-body form > .form-group,
    .sf-main-content .panel .panel-body form > .input-group { flex: 1 1 100%; }
}

/* Pagination */
.sf-main-content .pagination { display: inline-flex !important; gap: 4px !important; padding: 0 !important; margin: 1rem 0 !important; }
.sf-main-content .pagination > li > a,
.sf-main-content .pagination > li > span {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.375rem !important;
    color: #475569 !important;
    padding: 0.5rem 0.875rem !important;
    background: #fff !important;
}
.sf-main-content .pagination > li.active > a,
.sf-main-content .pagination > li.active > span {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #fff !important;
}
.sf-main-content .pagination > li > a:hover { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #b91c1c !important; }

/* Breadcrumbs */
.sf-main-content .breadcrumb { background: transparent !important; padding: 0.5rem 0 !important; margin-bottom: 1rem !important; font-size: 0.875rem !important; }
.sf-main-content .breadcrumb > li > a { color: #64748b !important; }
.sf-main-content .breadcrumb > .active { color: #0f172a !important; font-weight: 500 !important; }

/* Badges & labels */
.sf-main-content .badge,
.sf-main-content .label {
    display: inline-block !important;
    padding: 0.25rem 0.625rem !important;
    border-radius: 9999px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}
.sf-main-content .badge-primary,
.sf-main-content .label-primary { background: #b91c1c !important; color: #fff !important; }
.sf-main-content .badge-success,
.sf-main-content .label-success { background: #dcfce7 !important; color: #166534 !important; }
.sf-main-content .badge-info,
.sf-main-content .label-info { background: #dbeafe !important; color: #1e40af !important; }
.sf-main-content .badge-warning,
.sf-main-content .label-warning { background: #fef3c7 !important; color: #92400e !important; }
.sf-main-content .badge-danger,
.sf-main-content .label-danger { background: #fee2e2 !important; color: #991b1b !important; }
.sf-main-content .label-default { background: #f1f5f9 !important; color: #475569 !important; }

/* Modal */
.modal-content {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important;
    overflow: hidden !important;
}
.modal-header { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; padding: 1rem 1.25rem !important; }
.modal-title { color: #0f172a !important; font-weight: 600 !important; font-size: 1.1rem !important; }
.modal-body { padding: 1.25rem !important; }
.modal-footer { background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; padding: 0.875rem 1.25rem !important; }

/* Dropdown */
.dropdown-menu {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.12) !important;
    padding: 0.375rem !important;
    margin-top: 4px !important;
}
.dropdown-menu > li > a {
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.875rem !important;
    color: #334155 !important;
    font-size: 0.9rem !important;
    transition: all 0.1s !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { background: #fef2f2 !important; color: #b91c1c !important; }

/* Container max-width */
.sf-main-content .container,
.sf-main-content .container-fluid {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Section spacing */
.sf-main-content .section { margin-bottom: 1.75rem !important; }
.sf-main-content .section-header { margin-bottom: 1rem !important; }
.sf-main-content .section-title { font-size: 1.25rem !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 0 0.25rem !important; }
.sf-main-content .section-desc { color: #64748b !important; font-size: 0.9rem !important; margin: 0 !important; }

/* Progress bars */
.sf-main-content .progress { height: 8px !important; border-radius: 9999px !important; background: #f1f5f9 !important; overflow: hidden !important; margin-bottom: 1rem !important; }
.sf-main-content .progress-bar { background: #b91c1c !important; border-radius: 9999px !important; }

/* Headings */
.sf-main-content h1, .sf-main-content h2, .sf-main-content h3,
.sf-main-content h4, .sf-main-content h5, .sf-main-content h6 {
    color: #0f172a !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
}

/* Help text */
.sf-main-content .help-block,
.sf-main-content .form-text { color: #64748b !important; font-size: 0.825rem !important; margin-top: 0.375rem !important; }

/* Required */
.sf-main-content label .text-danger,
.sf-main-content .required { color: #dc2626 !important; }

/* Checkboxes / radios */
.sf-main-content input[type=checkbox],
.sf-main-content input[type=radio] {
    accent-color: #b91c1c !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

/* Page nav header */
.sf-page-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 1rem;
}
.sf-page-nav-title { font-size: 1.5rem; font-weight: 700; color: #0f172a; }
.sf-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    color: #475569;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.15s;
}
.sf-btn-back:hover { border-color: #b91c1c; color: #b91c1c; background: #fef2f2; }

/* Prevent horizontal scroll */
body { overflow-x: hidden; }

/* Login form */
.loginForm {
    max-width: 420px;
    margin: 2rem auto;
    padding: 2rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08);
}
.login-desc { color: #475569; margin-bottom: 1.5rem; font-size: 0.95rem; text-align: center; }
.login-captcha { margin: 1rem 0; display: flex; justify-content: center; }

/* =============================================
   FIX: Remove unwanted browser default focus borders
   Replace with subtle React-style focus ring
   ============================================= */

/* Kill the ugly browser default outline on every interactive element */
.sf-main-content button:focus,
.sf-main-content .btn:focus,
.sf-main-content a:focus,
.sf-main-content button:active,
.sf-main-content .btn:active,
.sf-main-content a:active,
.sf-main-content .btn.active,
.sf-main-content .btn.focus,
button:focus,
.btn:focus,
button:active,
.btn:active,
.btn.active,
.btn.focus,
a:focus,
a:active {
    outline: none !important;
    outline-offset: 0 !important;
    -webkit-tap-highlight-color: transparent;
}

/* For accessibility — keep focus visible only when keyboard-tabbed (focus-visible) */
.sf-main-content button:focus-visible,
.sf-main-content .btn:focus-visible,
.sf-main-content a:focus-visible,
button:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 2px solid rgba(185,28,28,0.4) !important;
    outline-offset: 2px !important;
}

/* Bootstrap adds box-shadow on .btn:focus — kill it everywhere */
.btn:focus,
.btn.focus,
.sf-main-content .btn:focus,
.sf-main-content .btn.focus {
    box-shadow: 0 1px 2px rgba(185,28,28,0.1) !important;
}
.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 4px 12px rgba(185,28,28,0.2) !important;
}

/* Active/pressed button - no border change */
.btn:active,
.btn.active,
.btn:active:focus,
.btn.active:focus {
    border-color: inherit !important;
    background-image: none !important;
}

/* =============================================
   DASHBOARD - Force button colors inside panels
   ============================================= */

.sf-main-content .panel .btn,
.sf-main-content .panel-body .btn,
.sf-main-content .list-group-item .btn {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #fff !important;
}
.sf-main-content .panel .btn:hover,
.sf-main-content .panel-body .btn:hover,
.sf-main-content .list-group-item .btn:hover {
    background: #991b1b !important;
    border-color: #991b1b !important;
    color: #fff !important;
}
.sf-main-content .panel .btn-default,
.sf-main-content .panel-body .btn-default {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}
.sf-main-content .panel .btn-default:hover {
    background: #f8fafc !important;
    border-color: #b91c1c !important;
    color: #b91c1c !important;
}

/* WHMCS specific dashboard buttons (Pay Now, View, Renew etc.) */
.sf-main-content .btn-warning,
.sf-main-content .btn-danger,
.sf-main-content .btn-success,
.sf-main-content .btn-info {
    color: #fff !important;
    border: none !important;
}

/* Dashboard list-group rows — make whole row clickable look */
.sf-main-content .panel .list-group-item:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    cursor: pointer;
}
.sf-main-content .panel .list-group-item .badge {
    background: #b91c1c !important;
    color: #fff !important;
}

/* Remove ugly outline from form-control on click */
.sf-main-content input:focus,
.sf-main-content textarea:focus,
.sf-main-content select:focus,
.sf-main-content .form-control:focus,
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    outline: none !important;
    outline-offset: 0 !important;
}

/* =============================================
   TEXT COLOR POLISH — React palette across all pages
   Heading slate-900, body slate-700, muted slate-500,
   links brand-red, semantic colors match React tokens
   ============================================= */

/* Body text (default) - apply only to root container so children can inherit
   and elements with colored backgrounds (buttons, badges, dark headers) keep proper text color */
.sf-main-content {
    color: #334155;
}

/* Headings (override anything inherited) */
.sf-main-content h1, .sf-main-content h2, .sf-main-content h3,
.sf-main-content h4, .sf-main-content h5, .sf-main-content h6,
.sf-main-content .h1, .sf-main-content .h2, .sf-main-content .h3,
.sf-main-content .h4, .sf-main-content .h5, .sf-main-content .h6 {
    color: #0f172a !important;
    font-weight: 700;
}
.sf-main-content h1, .sf-main-content .h1 { font-size: 2rem; line-height: 1.2; }
.sf-main-content h2, .sf-main-content .h2 { font-size: 3rem; line-height: 1.25; }
.sf-main-content h3, .sf-main-content .h3 { font-size: 1.375rem; line-height: 1.3; }
.sf-main-content h4, .sf-main-content .h4 { font-size: 1.125rem; line-height: 1.35; }
.sf-main-content h5, .sf-main-content .h5 { font-size: 1rem; line-height: 1.4; }
.sf-main-content h6, .sf-main-content .h6 { font-size: 0.875rem; line-height: 1.45; }

/* Strong / bold / em */
.sf-main-content strong,
.sf-main-content b { color: #0f172a; font-weight: 700; }
.sf-main-content em,
.sf-main-content i { color: inherit; font-style: italic; }
.sf-main-content small { color: #64748b; font-size: 0.825rem; }

/* Bootstrap text-* utility classes — React palette */
.sf-main-content .text-muted { color: #64748b !important; }
.sf-main-content .text-primary { color: #b91c1c !important; }
.sf-main-content .text-success { color: #16a34a !important; }
.sf-main-content .text-info { color: #0284c7 !important; }
.sf-main-content .text-warning { color: #d97706 !important; }
.sf-main-content .text-danger { color: #dc2626 !important; }
.sf-main-content .text-white { color: #fff !important; }
.sf-main-content .text-dark { color: #0f172a !important; }
.sf-main-content .text-light { color: #94a3b8 !important; }

/* Link text - black default per user request */
.sf-main-content a,
.sf-main-content a:visited { color: #000000 !important; text-decoration: none; }
.sf-main-content a:hover { text-decoration: underline; }

/* Lead text (intro paragraphs) */
.sf-main-content .lead {
    color: #475569 !important;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
}

/* Description / subtitle */
.sf-main-content .description,
.sf-main-content .subtitle,
.sf-main-content .text-secondary {
    color: #64748b !important;
}

/* Form elements text */
.sf-main-content label { color: #0f172a; font-weight: 500; }
.sf-main-content .form-text,
.sf-main-content .help-block { color: #64748b !important; font-size: 0.825rem; }
.sf-main-content .text-required,
.sf-main-content .required-indicator,
.sf-main-content label .text-danger { color: #dc2626 !important; }

/* Table text */
.sf-main-content .table th { color: #0f172a !important; }
.sf-main-content .table td { color: #334155 !important; }
.sf-main-content .table .text-muted { color: #94a3b8 !important; }

/* Panel text */
.sf-main-content .panel-title { color: #0f172a !important; font-weight: 600; }
.sf-main-content .panel-body { color: #334155; }
.sf-main-content .panel-footer { color: #64748b; font-size: 0.875rem; }

/* Breadcrumb text */
.sf-main-content .breadcrumb > li > a { color: #64748b; }
.sf-main-content .breadcrumb > .active { color: #0f172a; font-weight: 500; }

/* Pagination text */
.sf-main-content .pagination > li > a,
.sf-main-content .pagination > li > span { color: #475569; }
.sf-main-content .pagination > li.active > a,
.sf-main-content .pagination > li.active > span { color: #fff !important; }

/* Dropdown menu text */
.dropdown-menu > li > a { color: #334155 !important; }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { color: #b91c1c !important; }
.dropdown-header { color: #94a3b8 !important; font-size: 0.7rem !important; text-transform: uppercase; letter-spacing: 0.05em; }

/* Modal text */
.modal-title { color: #0f172a !important; }
.modal-body { color: #334155 !important; }
.modal-body p { color: #334155 !important; }

/* Alert text — already styled, just ensure consistency */
.sf-main-content .alert-success,
.sf-main-content .alert-info,
.sf-main-content .alert-warning,
.sf-main-content .alert-danger { font-weight: 500; }

/* List groups text */
.sf-main-content .list-group-item { color: #334155 !important; }
.sf-main-content .list-group-item:hover { color: #b91c1c !important; }
.sf-main-content .list-group-item.active { color: #fff !important; }
.sf-main-content .list-group-item-heading { color: #0f172a !important; font-weight: 600; }
.sf-main-content .list-group-item-text { color: #64748b !important; font-size: 0.875rem; }

/* Tabs text */
.sf-main-content .nav-tabs > li > a { color: #64748b !important; font-weight: 500; }
.sf-main-content .nav-tabs > li > a:hover { color: #b91c1c !important; }
.sf-main-content .nav-tabs > li.active > a { color: #b91c1c !important; }

/* Select2 text */
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #0f172a !important; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #94a3b8 !important; }

/* Form input placeholder */
.sf-main-content input::placeholder,
.sf-main-content textarea::placeholder,
input::placeholder,
textarea::placeholder { color: #94a3b8 !important; opacity: 1; }

/* Code / pre */
.sf-main-content code {
    background: #f1f5f9;
    color: #b91c1c;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}
.sf-main-content pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
}

/* Blockquote */
.sf-main-content blockquote {
    border-left: 4px solid #b91c1c;
    padding: 0.5rem 1rem;
    color: #475569;
    font-style: italic;
    background: #fef2f2;
    border-radius: 0 0.5rem 0.5rem 0;
}

/* hr */
.sf-main-content hr { border-color: #e2e8f0; margin: 1.5rem 0; }

/* Footer text inside content (not the global footer) */
.sf-main-content .footer,
.sf-main-content footer { color: #64748b; }

/* Tooltip / popover text */
.tooltip-inner { color: #fff !important; background: #0f172a !important; }
.popover { color: #334155 !important; border-color: #e2e8f0 !important; }
.popover-title { color: #0f172a !important; font-weight: 600; }

/* Service status / state text */
.sf-main-content .status-active,
.sf-main-content .label-active { color: #16a34a !important; }
.sf-main-content .status-pending,
.sf-main-content .label-pending { color: #d97706 !important; }
.sf-main-content .status-suspended,
.sf-main-content .status-cancelled,
.sf-main-content .label-suspended,
.sf-main-content .label-cancelled { color: #dc2626 !important; }

/* Price text (always slate-900 prominent) */
.sf-main-content .price,
.sf-main-content .price-amount,
.sf-main-content .price-large {
    color: #0f172a !important;
    font-weight: 700;
}
.sf-main-content .price-suffix,
.sf-main-content .billing-cycle { color: #64748b !important; font-weight: 400; }

/* Tag-like inline labels */
.sf-main-content .tag,
.sf-main-content .badge-soft { color: #b91c1c; background: #fef2f2; }


/* =============================================
   INVOICE / ORDER PAGES — React design
   ============================================= */

.sf-main-content .invoice {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    margin-bottom: 2rem;
}
.sf-main-content .invoice-title {
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.sf-main-content .invoice-status {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.875rem !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
.sf-main-content .list-info {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}
.sf-main-content .list-info > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.sf-main-content .list-info > li:last-child { border-bottom: none; }
.sf-main-content .list-info-text { color: #64748b; font-size: 0.875rem; font-weight: 500; }
.sf-main-content .list-info-title { color: #0f172a; font-weight: 600; font-size: 0.9rem; }

/* Invoice address */
.sf-main-content address {
    color: #475569;
    line-height: 1.7;
    font-style: normal;
    font-size: 0.95rem;
    background: #f8fafc;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    border-left: 3px solid #b91c1c;
    margin-bottom: 1.25rem;
}

/* Invoice line items table */
.sf-main-content .invoice .table { margin-top: 1rem !important; }
.sf-main-content .invoice .table th {
    background: #0f172a !important;
    color: #fff !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    padding: 0.875rem 1rem !important;
}
.sf-main-content .invoice .table td {
    padding: 0.875rem 1rem !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.sf-main-content .invoice .table tfoot td { font-weight: 600; background: #f8fafc; color: #0f172a !important; }
.sf-main-content .invoice .table tfoot tr:last-child td { font-size: 1.125rem; color: #b91c1c !important; font-weight: 700; }

/* Payment method selector */
.sf-main-content .invoice-payment-method-selector {
    margin: 1.5rem 0;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
}
.sf-main-content .invoice-payment-method-selector label {
    color: #0f172a !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

/* Pay now button */
.sf-main-content .btn-checkout,
.sf-main-content #btnPayNow,
.sf-main-content .btn-pay-now {
    background: #b91c1c !important;
    color: #fff !important;
    border: none !important;
    padding: 0.875rem 2rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 12px rgba(185,28,28,0.2) !important;
}
.sf-main-content .btn-checkout:hover,
.sf-main-content #btnPayNow:hover,
.sf-main-content .btn-pay-now:hover {
    background: #991b1b !important;
    box-shadow: 0 6px 16px rgba(185,28,28,0.3) !important;
}

/* Transactions section */
.sf-main-content .invoice-transactions h3,
.sf-main-content .transactions h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0f172a;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

/* Notes */
.sf-main-content .invoice-notes,
.sf-main-content .invoice .notes {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    border-radius: 0.5rem;
    color: #92400e;
    font-size: 0.9rem;
}

/* =============================================
   ICONS — Font Awesome + Lineicons unified
   ============================================= */

.sf-main-content .fa,
.sf-main-content .fas,
.sf-main-content .far,
.sf-main-content .fab,
.sf-main-content .fal,
.fa, .fas, .far, .fab, .fal {
    color: inherit;
    line-height: 1;
    vertical-align: middle;
    /* Override the generic `.sf-main-content i { font-style: italic }` rule above —
       Font Awesome glyphs only exist in the regular weight; italic forces a fallback
       font and the icons render as empty squares. */
    font-style: normal !important;
}
/* Same fix for lagom-icons (lm/ls) — they live inside <i> tags too. */
.sf-main-content .ls,
.sf-main-content .lm,
.sf-main-content [class*=" ls-"],
.sf-main-content [class^="ls-"],
.sf-main-content [class*=" lm-"],
.sf-main-content [class^="lm-"] {
    font-style: normal !important;
}

.sf-main-content .ls,
.sf-main-content .lm,
.ls, .lm {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    color: inherit;
    font-style: normal;
}

.sf-main-content .btn .fa,
.sf-main-content .btn .ls,
.sf-main-content .btn .lm,
.sf-main-content .btn svg {
    margin-right: 0.375rem;
    vertical-align: -2px;
}
.sf-main-content .btn-icon-right .fa,
.sf-main-content .btn-icon-right .ls,
.sf-main-content .btn-icon-right svg {
    margin-right: 0;
    margin-left: 0.375rem;
}

.sf-main-content .icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fef2f2;
    color: #b91c1c;
}
.sf-main-content .icon-circle-lg { width: 56px; height: 56px; }

.sf-main-content .icon-primary { color: #b91c1c !important; }
.sf-main-content .icon-success { color: #16a34a !important; }
.sf-main-content .icon-info { color: #0284c7 !important; }
.sf-main-content .icon-warning { color: #d97706 !important; }
.sf-main-content .icon-danger { color: #dc2626 !important; }

.sf-main-content svg { vertical-align: middle; }
.sf-main-content a svg,
.sf-main-content button svg { color: inherit; }

.sf-main-content .status-icon,
.sf-main-content .status-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
.sf-main-content .status-icon svg,
.sf-main-content .status-icons svg {
    width: 100%;
    height: 100%;
}

.sf-main-content i + span,
.sf-main-content svg + span,
.sf-main-content i + a,
.sf-main-content svg + a { margin-left: 0.5rem; }

.sf-main-content .table .status-icon { margin-right: 0.5rem; }

.dropdown-toggle::after,
.sf-main-content .dropdown-toggle::after {
    color: inherit !important;
    margin-left: 0.5rem;
}

.sf-main-content .panel-sidebar .list-group-item i,
.sf-main-content .panel-sidebar .list-group-item svg {
    margin-right: 0.5rem;
    color: #94a3b8;
}
.sf-main-content .panel-sidebar .list-group-item.active i,
.sf-main-content .panel-sidebar .list-group-item.active svg { color: #fff; }

.sf-main-content .btn-icon-only {
    width: 36px;
    height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sf-main-content .loader-button .spinner,
.sf-main-content .spinner {
    display: inline-block;
    color: #b91c1c;
}

.sf-main-content .promo-box-icon svg path,
.sf-main-content .promo-box-icon svg { fill: currentColor; }

.sf-main-content a > .fa,
.sf-main-content a > .ls,
.sf-main-content a > svg { transition: color 0.15s; }
.sf-main-content a:hover > .fa,
.sf-main-content a:hover > .ls,
.sf-main-content a:hover > svg { color: #991b1b; }

/* =============================================
   LINK COLOR FIX — context-aware
   Default red on white background;
   White on red/dark backgrounds (buttons, active rows, dark headers)
   ============================================= */

/* Default - black per user request */
.sf-main-content a,
.sf-main-content a:visited { color: #000000; text-decoration: none; }
.sf-main-content a:hover { text-decoration: underline; }

/* Inside red buttons - white text */
.sf-main-content .btn-primary,
.sf-main-content .btn-primary a,
.sf-main-content .btn-primary:hover,
.sf-main-content .btn-primary:visited,
.sf-main-content .btn-danger,
.sf-main-content .btn-danger a,
.sf-main-content .btn-success,
.sf-main-content .btn-success a,
.sf-main-content .btn-info,
.sf-main-content .btn-info a,
.sf-main-content .btn-warning,
.sf-main-content .btn-warning a,
.sf-main-content a.btn-primary,
.sf-main-content a.btn-danger,
.sf-main-content a.btn-success,
.sf-main-content a.btn-info,
.sf-main-content a.btn-warning {
    color: #fff !important;
    text-decoration: none !important;
}
.sf-main-content .btn-primary:hover,
.sf-main-content a.btn-primary:hover,
.sf-main-content .btn-danger:hover,
.sf-main-content .btn-success:hover,
.sf-main-content .btn-info:hover,
.sf-main-content .btn-warning:hover {
    color: #fff !important;
    text-decoration: none !important;
}

/* Hosting plan red CTAs */
.sf-main-content a.sf-plan-order-brand,
.sf-main-content a.sf-plan-order-brand:visited,
.sf-main-content a.sf-plan-order-dark,
.sf-main-content a.sf-plan-order-dark:visited,
.sf-main-content a.sf-simple-cta-btn,
.sf-main-content a.sf-simple-cta-btn:visited,
.sf-main-content a.sf-plan-order-brand:hover,
.sf-main-content a.sf-plan-order-dark:hover,
.sf-main-content a.sf-simple-cta-btn:hover {
    color: #fff !important;
    text-decoration: none !important;
}

/* Inner-hero white button has red text (white background) */
.sf-main-content a.sf-inner-hero-btn,
.sf-main-content a.sf-inner-hero-btn:visited,
.sf-main-content a.sf-inner-hero-btn:hover {
    color: #dc2626 !important;
    text-decoration: none !important;
}

/* Active list group items (red bg) - white links */
.sf-main-content .list-group-item.active,
.sf-main-content .list-group-item.active a,
.sf-main-content a.list-group-item.active {
    color: #fff !important;
    text-decoration: none !important;
}

/* Pagination active item (red bg) - white text */
.sf-main-content .pagination > li.active > a,
.sf-main-content .pagination > li.active > span,
.sf-main-content .pagination > li.active > a:hover {
    color: #fff !important;
    text-decoration: none !important;
}

/* Dark-header tables - white text on dark bg */
.sf-main-content .invoice .table th,
.sf-main-content .invoice .table th a,
.sf-main-content .order-summary .panel-heading a,
.sf-main-content .panel-summary .panel-heading a,
.sf-main-content .panel-heading[style*="background"] a,
.sf-main-content [class*="bg-dark"] a,
.sf-main-content [style*="background:#0f172a"] a,
.sf-main-content [style*="background: #0f172a"] a {
    color: #fff !important;
    text-decoration: none !important;
}

/* Sticky bottom action bar (often red bg) */
.sf-main-content .bottom-action-sticky a,
.sf-main-content .bottom-action-sticky .btn,
.sf-main-content .bottom-action-sticky .btn:hover {
    color: #fff !important;
    text-decoration: none !important;
}

/* Badges with colored bg - inherit white */
.sf-main-content .badge-primary,
.sf-main-content .label-primary,
.sf-main-content .badge-primary a,
.sf-main-content .label-primary a {
    color: #fff !important;
}

/* Card link CTAs (sf-dash-card-link etc) - keep red */
.sf-main-content a.sf-dash-card-link,
.sf-main-content a.sf-dash-card-link:visited,
.sf-main-content a.sf-dash-card-link:hover {
    color: #b91c1c !important;
    text-decoration: none !important;
}

/* Footer links (in dark sf-footer) - already styled, ensure white */
.sf-footer a,
.sf-footer a:visited { color: #cbd5e1; text-decoration: none !important; }
/* Specific link hover colors (matches React) */
.sf-footer .sf-footer-links a:hover { color: #f87171 !important; }   /* brand-400 — column links */
.sf-footer .sf-social-icon:hover { color: #cbd5e1 !important; }      /* keep icon color, only bg changes */

/* Top strip links - subtle gray */
.sf-top-strip a,
.sf-top-strip a:visited { color: #4b5563 !important; }    /* gray-600 — matches React */
.sf-top-strip a:hover { color: #1f2937 !important; }      /* gray-800 — matches React */

/* =============================================
   FORCE WHITE TEXT on colored buttons
   Higher specificity than .sf-main-content a inherit rule
   ============================================= */

.sf-main-content a.btn-primary,
.sf-main-content button.btn-primary,
.sf-main-content .btn.btn-primary,
.sf-main-content a.btn-danger,
.sf-main-content a.btn-success,
.sf-main-content a.btn-info,
.sf-main-content a.btn-warning,
.sf-main-content a.sf-plan-order-brand,
.sf-main-content a.sf-plan-order-dark,
.sf-main-content a.sf-simple-cta-btn,
.sf-main-content a.sf-btn-primary,
.sf-main-content a.sf-mobile-btn-primary,
.sf-main-content a.sf-dash-action,
.sf-main-content a.sf-client-nav-link.sf-client-nav-order,
.sf-main-content a.btn-checkout,
.sf-main-content a.btn-pay-now,
.sf-main-content a.list-group-item.active,
.sf-main-content a.btn-primary:hover,
.sf-main-content a.btn-primary:visited,
.sf-main-content a.sf-plan-order-brand:hover,
.sf-main-content a.sf-plan-order-brand:visited,
.sf-main-content a.sf-plan-order-dark:hover,
.sf-main-content a.sf-plan-order-dark:visited,
.sf-main-content a.sf-simple-cta-btn:hover,
.sf-main-content a.sf-simple-cta-btn:visited,
.sf-main-content a.btn-danger:hover,
.sf-main-content a.btn-success:hover,
.sf-main-content a.btn-info:hover,
.sf-main-content a.btn-warning:hover,
.sf-main-content a.btn-checkout:hover,
.sf-main-content a.btn-pay-now:hover {
    color: #ffffff !important;
}

/* Inner-hero white button has RED text on white bg */
.sf-main-content a.sf-inner-hero-btn,
.sf-main-content a.sf-inner-hero-btn:hover,
.sf-main-content a.sf-inner-hero-btn:visited {
    color: #dc2626 !important;
}

/* Active list-group items (red bg) - white */
.sf-main-content a.list-group-item.active,
.sf-main-content .list-group-item.active a {
    color: #ffffff !important;
}

/* Pagination active - white */
.sf-main-content .pagination > li.active > a,
.sf-main-content .pagination > li.active > span {
    color: #ffffff !important;
}

/* Top action sticky bar - white */
.sf-main-content .bottom-action-sticky a,
.sf-main-content .bottom-action-sticky a:hover {
    color: #ffffff !important;
}

/* Dark navy table headers (invoice etc) - white */
.sf-main-content .invoice .table th a,
.sf-main-content .invoice .table th {
    color: #ffffff !important;
}

/* Dashboard quick-action cards link wrappers - inherit dark color */
.sf-main-content a.sf-dash-action,
.sf-main-content a.sf-dash-action:hover {
    color: #0f172a !important;
}
.sf-main-content a.sf-dash-card-link,
.sf-main-content a.sf-dash-card-link:hover {
    color: #b91c1c !important;
}

/* Header nav links - inherit (excluding dropdown items, which manage their own slate-700 → white-on-hover colors) */
.sf-header a.sf-nav-link,
.sf-header a.sf-mobile-link { color: inherit !important; }
.sf-header a.sf-dropdown-item { color: #334155 !important; }
.sf-header a.sf-dropdown-item:hover,
.sf-header a.sf-dropdown-item:focus { color: #ffffff !important; }
.sf-header a.sf-dropdown-item.sf-dropdown-logout { color: #dc2626 !important; }
.sf-header a.sf-dropdown-item.sf-dropdown-logout:hover { color: #ffffff !important; }

/* Login button in header (red bg) - white */
.sf-header a.sf-btn-primary,
.sf-header a.sf-btn-primary:hover { color: #ffffff !important; }

/* Standalone red CTA buttons across all pages */
.sf-main-content .btn-primary,
.btn-primary,
.btn.btn-primary { color: #ffffff !important; }

/* =============================================
   INVOICE SIDEBAR ACTION CARD (Download / Print etc.)
   .panel.panel-sidebar with .list-group of actions
   ============================================= */

.sf-main-content .panel-sidebar {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
    margin-bottom: 1.5rem !important;
}
.sf-main-content .panel-sidebar .panel-heading {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 1rem 1.25rem !important;
}
.sf-main-content .panel-sidebar .panel-heading .panel-title,
.sf-main-content .panel-sidebar .panel-heading h6 {
    color: #0f172a !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
.sf-main-content .panel-sidebar .panel-heading .panel-title i,
.sf-main-content .panel-sidebar .panel-heading h6 i {
    color: #b91c1c !important;
    font-size: 1rem !important;
}
.sf-main-content .panel-sidebar .panel-heading .panel-minimise {
    margin-left: auto !important;
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
}

/* List of actions inside the sidebar card */
.sf-main-content .panel-sidebar .list-group {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}
.sf-main-content .panel-sidebar .list-group-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.875rem 1.25rem !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    background: #fff !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    border-radius: 0 !important;
}
.sf-main-content .panel-sidebar .list-group-item:last-child {
    border-bottom: none !important;
}
.sf-main-content .panel-sidebar .list-group-item:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    padding-left: 1.5rem !important;
}
.sf-main-content .panel-sidebar .list-group-item i,
.sf-main-content .panel-sidebar .list-group-item svg {
    color: #b91c1c !important;
    font-size: 1rem !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    transition: transform 0.15s ease !important;
}
.sf-main-content .panel-sidebar .list-group-item:hover i,
.sf-main-content .panel-sidebar .list-group-item:hover svg {
    transform: translateX(2px) !important;
}

/* Active action state */
.sf-main-content .panel-sidebar .list-group-item.active {
    background: #b91c1c !important;
    color: #fff !important;
    border-color: #b91c1c !important;
}
.sf-main-content .panel-sidebar .list-group-item.active i,
.sf-main-content .panel-sidebar .list-group-item.active svg {
    color: #fff !important;
}

/* Download button styled prominently */
.sf-main-content a[href*="dl.php"] {
    color: #b91c1c !important;
    font-weight: 600 !important;
}
.sf-main-content a[href*="dl.php"]:hover {
    color: #991b1b !important;
}

/* Invoice page two-column layout - sidebar should be tidy width */
.sf-main-content .invoice .col-md-3,
.sf-main-content .invoice .col-md-4 {
    padding-left: 0.5rem !important;
}

/* =============================================
   Headings — context-aware (use inherit so they show
   correct color based on parent: white on dark/red bg,
   slate on white bg). Specific overrides below for dark contexts.
   ============================================= */
.sf-main-content h1, .sf-main-content h2, .sf-main-content h3,
.sf-main-content h4, .sf-main-content h5, .sf-main-content h6,
.sf-main-content .h1, .sf-main-content .h2, .sf-main-content .h3,
.sf-main-content .h4, .sf-main-content .h5, .sf-main-content .h6 {
    color: #0f172a;
    font-weight: 700;
}
/* Headings inside dark/red backgrounds stay white */
.sf-main-content .invoice .table th h1,
.sf-main-content .invoice .table th h2,
.sf-main-content .invoice .table th h3,
.sf-main-content [class*="bg-dark"] h1,
.sf-main-content [class*="bg-dark"] h2,
.sf-main-content [class*="bg-dark"] h3,
.sf-main-content .sf-cta h1,
.sf-main-content .sf-cta h2,
.sf-main-content .sf-cta h3,
.sf-main-content .sf-inner-hero h1,
.sf-main-content .sf-inner-hero h2,
.sf-main-content .sf-inner-hero h3 {
    color: #ffffff;
}

/* =============================================
   ORDER NOW BUTTONS — force white text + white icons
   (handles all variants: hosting plans, email hosting, homepage)
   ============================================= */
.sf-main-content a.sf-plan-order-btn,
.sf-main-content a.sf-plan-order-btn:hover,
.sf-main-content a.sf-plan-order-btn:visited,
.sf-main-content a.sf-plan-order-brand,
.sf-main-content a.sf-plan-order-brand:hover,
.sf-main-content a.sf-plan-order-brand:visited,
.sf-main-content a.sf-plan-order-dark,
.sf-main-content a.sf-plan-order-dark:hover,
.sf-main-content a.sf-plan-order-dark:visited,
.sf-main-content a.sf-email-order-btn,
.sf-main-content a.sf-email-order-btn:hover,
.sf-main-content a.sf-email-order-btn:visited,
.sf-main-content a.sf-email-order-brand,
.sf-main-content a.sf-email-order-brand:hover,
.sf-main-content a.sf-email-order-brand:visited {
    color: #ffffff !important;
}
/* SVG icons inside these buttons inherit white via currentColor */
.sf-main-content a.sf-plan-order-btn svg,
.sf-main-content a.sf-plan-order-brand svg,
.sf-main-content a.sf-plan-order-dark svg,
.sf-main-content a.sf-email-order-btn svg,
.sf-main-content a.sf-email-order-brand svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
/* But headings INSIDE these buttons should NOT be white headings rule —
   override the global h1-h6 white rule for headings in white-bg cards */
.sf-main-content .panel h1,
.sf-main-content .panel h2,
.sf-main-content .panel h3,
.sf-main-content .panel h4,
.sf-main-content .panel h5,
.sf-main-content .panel h6,
.sf-main-content .panel .panel-title,
.sf-main-content .sf-plan-card h3,
.sf-main-content .sf-plan-card .sf-plan-name,
.sf-main-content .sf-why-card h3,
.sf-main-content .sf-why-card-title {
    color: #0f172a !important;
}
/* Headings on dark backgrounds DO stay white */
.sf-main-content .panel-heading[style*="background"] h1,
.sf-main-content .panel-heading[style*="background"] h2,
.sf-main-content .panel-heading[style*="background"] h3,
.sf-main-content .panel-heading[style*="background"] h4,
.sf-main-content .panel-heading[style*="background"] h5,
.sf-main-content .panel-heading[style*="background"] h6,
.sf-main-content .invoice .table th h1,
.sf-main-content .invoice .table th h2,
.sf-main-content .invoice .table th h3 {
    color: #ffffff !important;
}

/* =============================================
   ORDER NOW BUTTON — high-specificity force white
   (covers all variants and overrides global a-rule)
   ============================================= */
.sf-main-content a.sf-plan-order-btn,
.sf-main-content a.sf-plan-order-btn *,
.sf-main-content a.sf-plan-order-btn span,
.sf-main-content a.sf-plan-order-btn svg,
.sf-main-content a.sf-plan-order-brand,
.sf-main-content a.sf-plan-order-brand *,
.sf-main-content a.sf-plan-order-dark,
.sf-main-content a.sf-plan-order-dark *,
.sf-main-content a.sf-email-order-btn,
.sf-main-content a.sf-email-order-btn *,
.sf-main-content a.sf-email-order-brand,
.sf-main-content a.sf-email-order-brand *,
.sf-main-content a[class*="order-btn"],
.sf-main-content a[class*="order-btn"] *,
.sf-main-content a[class*="order-brand"],
.sf-main-content a[class*="order-brand"] *,
.sf-main-content a.btn.btn-primary,
.sf-main-content a.btn.btn-primary *,
.sf-main-content a.btn-primary,
.sf-main-content a.btn-primary *,
.sf-main-content button.btn-primary,
.sf-main-content button.btn-primary *,
.sf-main-content .btn-primary,
.sf-main-content .btn-primary span,
.sf-main-content .btn-primary svg {
    color: #ffffff !important;
    stroke: currentColor !important;
}

/* WHMCS native "Order Now" buttons in cart/store */
.sf-main-content a[href*="cart.php?a=add"],
.sf-main-content a[href*="cart.php?a=add"] * {
    color: #ffffff !important;
}
/* But only if it has button class; plain links keep white default */

/* =============================================
   READABILITY OVERRIDES (white-on-white prevention)
   For containers where white default link is invisible
   ============================================= */

/* Sidebar action card list items (e.g., Download Invoice) */
.sf-main-content .panel-sidebar .list-group-item,
.sf-main-content .panel-sidebar .list-group-item:visited {
    color: #334155 !important;
}
.sf-main-content .panel-sidebar .list-group-item:hover {
    color: #b91c1c !important;
}

/* Dashboard quick-action cards */
.sf-main-content a.sf-dash-action,
.sf-main-content a.sf-dash-action * { color: #0f172a !important; }
.sf-main-content a.sf-dash-card-link,
.sf-main-content a.sf-dash-card-link * { color: #b91c1c !important; }

/* Table cell links (otherwise invisible on white tables) */
.sf-main-content .table td a,
.sf-main-content .table td a:visited { color: #b91c1c !important; }
.sf-main-content .table td a:hover { color: #991b1b !important; }

/* List-group items in white panels */
.sf-main-content .panel .list-group-item,
.sf-main-content .panel .list-group-item:visited { color: #334155 !important; }
.sf-main-content .panel .list-group-item:hover { color: #b91c1c !important; }
.sf-main-content .panel .list-group-item.active,
.sf-main-content .panel .list-group-item.active:hover { color: #ffffff !important; }

/* Breadcrumb links */
.sf-main-content .breadcrumb > li > a,
.sf-main-content .breadcrumb > li > a:visited { color: #64748b !important; }
.sf-main-content .breadcrumb > li > a:hover { color: #b91c1c !important; }

/* Pagination links */
.sf-main-content .pagination > li > a:not(.active),
.sf-main-content .pagination > li > a:not(.active):visited { color: #475569 !important; }
.sf-main-content .pagination > li.active > a,
.sf-main-content .pagination > li.active > span { color: #ffffff !important; }

/* Tabs (nav-tabs links) */
.sf-main-content .nav-tabs > li > a,
.sf-main-content .nav-tabs > li > a:visited { color: #64748b !important; }
.sf-main-content .nav-tabs > li > a:hover { color: #b91c1c !important; }
.sf-main-content .nav-tabs > li.active > a { color: #b91c1c !important; }

/* Dropdown menu items (white bg) */
.sf-main-content .dropdown-menu > li > a,
.sf-main-content .dropdown-menu > li > a:visited { color: #334155 !important; }
.sf-main-content .dropdown-menu > li > a:hover { color: #b91c1c !important; }

/* Footer links inside content */
.sf-main-content footer a,
.sf-main-content .footer a { color: #cbd5e1 !important; }

/* =============================================
   HOSTING PAGES ORDER NOW — MAXIMUM SPECIFICITY
   This rule wins against any other rule in the cascade
   ============================================= */
body .sf-main-content a.sf-plan-order-btn,
body .sf-main-content a.sf-plan-order-btn:link,
body .sf-main-content a.sf-plan-order-btn:visited,
body .sf-main-content a.sf-plan-order-btn:hover,
body .sf-main-content a.sf-plan-order-btn:active,
body .sf-main-content a.sf-plan-order-btn:focus,
body .sf-main-content a.sf-plan-order-brand,
body .sf-main-content a.sf-plan-order-brand:link,
body .sf-main-content a.sf-plan-order-brand:visited,
body .sf-main-content a.sf-plan-order-brand:hover,
body .sf-main-content a.sf-plan-order-brand:active,
body .sf-main-content a.sf-plan-order-brand:focus,
body .sf-main-content a.sf-plan-order-dark,
body .sf-main-content a.sf-plan-order-dark:link,
body .sf-main-content a.sf-plan-order-dark:visited,
body .sf-main-content a.sf-plan-order-dark:hover,
body .sf-main-content a.sf-plan-order-dark:active,
body .sf-main-content a.sf-plan-order-dark:focus,
body .sf-main-content a.sf-email-order-btn,
body .sf-main-content a.sf-email-order-btn:link,
body .sf-main-content a.sf-email-order-btn:visited,
body .sf-main-content a.sf-email-order-btn:hover,
body .sf-main-content a.sf-email-order-btn:active,
body .sf-main-content a.sf-email-order-brand,
body .sf-main-content a.sf-email-order-brand:link,
body .sf-main-content a.sf-email-order-brand:visited,
body .sf-main-content a.sf-email-order-brand:hover,
body .sf-main-content a.sf-email-order-brand:active {
    color: #ffffff !important;
    background: #b91c1c !important;
    border: none !important;
}

/* All children (text spans, SVGs, icons) inside Order Now */
body .sf-main-content a.sf-plan-order-btn *,
body .sf-main-content a.sf-plan-order-brand *,
body .sf-main-content a.sf-plan-order-dark *,
body .sf-main-content a.sf-email-order-btn *,
body .sf-main-content a.sf-email-order-brand * {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Hover states — slightly darker red */
body .sf-main-content a.sf-plan-order-btn:hover,
body .sf-main-content a.sf-plan-order-brand:hover,
body .sf-main-content a.sf-email-order-btn:hover,
body .sf-main-content a.sf-email-order-brand:hover {
    background: #991b1b !important;
    color: #ffffff !important;
}
body .sf-main-content a.sf-plan-order-dark:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

/* Same rules WITHOUT body prefix as fallback — in case page wrapper differs */
.sf-main-content a.sf-plan-order-btn,
.sf-main-content a.sf-plan-order-brand,
.sf-main-content a.sf-plan-order-dark,
.sf-main-content a.sf-email-order-btn,
.sf-main-content a.sf-email-order-brand,
a.sf-plan-order-btn,
a.sf-plan-order-brand,
a.sf-plan-order-dark,
a.sf-email-order-btn,
a.sf-email-order-brand {
    color: #ffffff !important;
}
.sf-main-content a.sf-plan-order-btn *,
.sf-main-content a.sf-plan-order-brand *,
.sf-main-content a.sf-plan-order-dark *,
.sf-main-content a.sf-email-order-btn *,
.sf-main-content a.sf-email-order-brand *,
a.sf-plan-order-btn *,
a.sf-plan-order-brand *,
a.sf-plan-order-dark *,
a.sf-email-order-btn *,
a.sf-email-order-brand * {
    color: #ffffff !important;
}

/* =============================================
   FINAL: BLACK default, WHITE on red backgrounds
   This block sits LAST so it wins the cascade
   ============================================= */

/* Default link color = black (set above) */
/* Now override for elements with RED background → white text */

body .sf-main-content a.btn-primary,
body .sf-main-content a.btn-primary:link,
body .sf-main-content a.btn-primary:visited,
body .sf-main-content a.btn-primary:hover,
body .sf-main-content a.btn-danger,
body .sf-main-content a.btn-danger:hover,
body .sf-main-content a.sf-plan-order-btn,
body .sf-main-content a.sf-plan-order-btn:link,
body .sf-main-content a.sf-plan-order-btn:visited,
body .sf-main-content a.sf-plan-order-btn:hover,
body .sf-main-content a.sf-plan-order-brand,
body .sf-main-content a.sf-plan-order-brand:link,
body .sf-main-content a.sf-plan-order-brand:visited,
body .sf-main-content a.sf-plan-order-brand:hover,
body .sf-main-content a.sf-plan-order-dark,
body .sf-main-content a.sf-plan-order-dark:link,
body .sf-main-content a.sf-plan-order-dark:visited,
body .sf-main-content a.sf-plan-order-dark:hover,
body .sf-main-content a.sf-email-order-btn,
body .sf-main-content a.sf-email-order-btn:hover,
body .sf-main-content a.sf-email-order-brand,
body .sf-main-content a.sf-email-order-brand:hover,
body .sf-main-content a.sf-simple-cta-btn,
body .sf-main-content a.sf-simple-cta-btn:hover,
body .sf-main-content a.btn-checkout,
body .sf-main-content a.btn-pay-now,
body .sf-main-content a.list-group-item.active,
body .sf-main-content .pagination > li.active > a,
body .sf-main-content .bottom-action-sticky a,
body .sf-main-content .bottom-action-sticky a:hover,
body .sf-main-content .invoice .table th a,
body .sf-main-content .panel-sidebar .list-group-item.active {
    color: #ffffff !important;
}

/* Children (text spans + SVGs) inside red-bg buttons */
body .sf-main-content a.btn-primary *,
body .sf-main-content a.btn-danger *,
body .sf-main-content a.sf-plan-order-btn *,
body .sf-main-content a.sf-plan-order-brand *,
body .sf-main-content a.sf-plan-order-dark *,
body .sf-main-content a.sf-email-order-btn *,
body .sf-main-content a.sf-email-order-brand *,
body .sf-main-content a.sf-simple-cta-btn *,
body .sf-main-content a.btn-checkout *,
body .sf-main-content a.btn-pay-now * {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: #ffffff !important;
}

/* Inner-hero btn has WHITE bg with RED text (kept as exception) */
body .sf-main-content a.sf-inner-hero-btn,
body .sf-main-content a.sf-inner-hero-btn:hover {
    color: #dc2626 !important;
}
body .sf-main-content a.sf-inner-hero-btn * {
    color: #dc2626 !important;
}


/* =============================================
   RESPONSIVE SPACING — All pages
   Consistent padding/margins, fluid layouts across viewports
   ============================================= */

*, *::before, *::after { box-sizing: border-box; }

.sf-main-content {
    /* padding-top removed - handled by .sf-container instead */
    padding-bottom: 2.5rem;
    min-height: calc(100vh - 200px);
}
.sf-main-content > .sf-container {
    padding-top: 1rem;
    padding-bottom: 2rem;
}
@media (max-width: 768px) {
    .sf-main-content { padding-bottom: 1.5rem; }
    .sf-main-content > .sf-container { padding-top: 0.75rem; padding-bottom: 1.25rem; }
}

.sf-container,
.sf-main-content .container,
.sf-main-content .container-fluid {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}
@media (min-width: 768px) {
    .sf-container, .sf-main-content .container, .sf-main-content .container-fluid {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}
@media (min-width: 1024px) {
    .sf-container, .sf-main-content .container, .sf-main-content .container-fluid {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

.sf-main-content .section { margin-bottom: 1.5rem !important; }
@media (min-width: 768px) {
    .sf-main-content .section { margin-bottom: 2rem !important; }
}

.sf-main-content .panel { margin-bottom: 1.25rem !important; }
.sf-main-content .panel-body { padding: 1rem !important; }
@media (min-width: 768px) {
    .sf-main-content .panel-body { padding: 1.25rem !important; }
}
@media (min-width: 1024px) {
    .sf-main-content .panel-body { padding: 1.5rem !important; }
}

.sf-main-content .form-group { margin-bottom: 1rem !important; }
@media (min-width: 768px) {
    .sf-main-content .form-group { margin-bottom: 1.25rem !important; }
}

.sf-main-content .row { margin-left: -0.5rem; margin-right: -0.5rem; }
.sf-main-content .row > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .sf-main-content .row { margin-left: -0.75rem; margin-right: -0.75rem; }
    .sf-main-content .row > [class*="col-"] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Tables - horizontal scroll on mobile */
.sf-main-content .table-responsive,
.sf-main-content .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
}
@media (max-width: 640px) {
    .sf-main-content .table th,
    .sf-main-content .table td {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.825rem !important;
    }
}

/* Buttons - touch-friendly mobile */
@media (max-width: 768px) {
    .sf-main-content .btn,
    .btn {
        min-height: 40px;
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
    }
    .sf-main-content .btn-lg,
    .btn-lg {
        min-height: 48px;
        padding: 0.75rem 1.5rem !important;
        font-size: 0.95rem !important;
    }
}

/* Form inputs - mobile (16px prevents iOS zoom) */
@media (max-width: 768px) {
    .sf-main-content input[type=text],
    .sf-main-content input[type=email],
    .sf-main-content input[type=password],
    .sf-main-content input[type=number],
    .sf-main-content input[type=tel],
    .sf-main-content textarea,
    .sf-main-content .form-control {
        font-size: 16px !important;
        min-height: 44px;
    }
}

/* Headings - responsive scale */
@media (max-width: 768px) {
    .sf-main-content h1, .sf-main-content .h1 { font-size: 1.625rem !important; }
    .sf-main-content h2, .sf-main-content .h2 { font-size: 1.375rem !important; }
    .sf-main-content h3, .sf-main-content .h3 { font-size: 1.125rem !important; }
    .sf-main-content h4, .sf-main-content .h4 { font-size: 1rem !important; }
}

/* Hosting plan grid */
.sf-plans-grid {
    display: grid !important;
    gap: 1.25rem !important;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .sf-plans-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem !important; }
}
@media (min-width: 1024px) {
    .sf-plans-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem !important; }
}

/* Dashboard stats */
.sf-dash-stats {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
}
@media (min-width: 640px) { .sf-dash-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sf-dash-stats { grid-template-columns: repeat(4, 1fr); } }

/* Dashboard quick-actions */
.sf-dash-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.75rem !important;
    margin-bottom: 2rem !important;
}
@media (min-width: 640px) { .sf-dash-actions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sf-dash-actions { grid-template-columns: repeat(3, 1fr); } }

/* Invoice page */
@media (max-width: 768px) {
    .sf-main-content .invoice .col-md-7,
    .sf-main-content .invoice .col-md-5,
    .sf-main-content .invoice .col-md-4,
    .sf-main-content .invoice .col-md-8,
    .sf-main-content .invoice .col-md-3,
    .sf-main-content .invoice .col-md-9 {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    .sf-main-content .invoice { padding: 1.25rem !important; }
    .sf-main-content .invoice-title { font-size: 1.5rem !important; }
}

/* Page nav header */
@media (max-width: 640px) {
    .sf-page-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .sf-page-nav-title { font-size: 1.25rem; }
}

/* Cart sidebar */
@media (max-width: 992px) {
    .sf-main-content .order-summary,
    .sf-main-content .panel-summary { margin-top: 1.5rem; }
}

/* Hero */
.sf-inner-hero { padding: 2rem 0; }
@media (min-width: 768px) { .sf-inner-hero { padding: 3rem 0; } }
@media (min-width: 1024px) { .sf-inner-hero { padding: 4rem 0; } }

/* Why-section grid */
.sf-why-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 1.25rem !important;
}
@media (min-width: 640px) { .sf-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sf-why-grid { grid-template-columns: repeat(3, 1fr); } }

/* Sidebar+main split */
@media (max-width: 992px) {
    .sf-main-content .col-md-3 + .col-md-9,
    .sf-main-content .col-md-9 + .col-md-3,
    .sf-main-content .col-md-4 + .col-md-8,
    .sf-main-content .col-md-8 + .col-md-4 { margin-top: 1.5rem; }
}

/* Top strip */
@media (max-width: 480px) {
    .sf-top-strip { padding: 0.5rem 0.75rem; }
    .sf-top-strip-inner { gap: 0.75rem; flex-wrap: wrap; }
}

/* Header */
@media (max-width: 1024px) {
    .sf-header { padding: 0.75rem 1rem; }
    .sf-mobile-menu { padding: 1rem; }
    .sf-mobile-link { padding: 0.75rem 0; }
}

/* Footer */
@media (max-width: 768px) {
    .sf-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .sf-footer { padding: 2rem 1rem; }
    .sf-footer-bottom { padding: 1rem 0 0; text-align: center; }
}

/* Modal */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 1rem !important;
        max-width: calc(100vw - 2rem) !important;
    }
    .modal-body { padding: 1rem !important; }
    .modal-header, .modal-footer { padding: 0.875rem 1rem !important; }
}

/* Pagination */
@media (max-width: 640px) {
    .sf-main-content .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Images */
.sf-main-content img { max-width: 100%; height: auto; }
.sf-main-content > * { max-width: 100%; }

/* Print */
@media print {
    .sf-header, .sf-footer, .sf-top-strip, .sf-client-nav,
    .sf-page-nav, .panel-sidebar, .bottom-action-sticky { display: none !important; }
    .sf-main-content { padding: 0 !important; }
    .sf-main-content .invoice {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}


/* =============================================
   DEDICATED CLASS: .sf-order-now-white
   Use this on any Order Now button to force white text + icons.
   Applied to all hosting pages (shared, wordpress, vps, reseller, email)
   ============================================= */

body .sf-main-content a.sf-order-now-white,
body .sf-main-content a.sf-order-now-white:link,
body .sf-main-content a.sf-order-now-white:visited,
body .sf-main-content a.sf-order-now-white:hover,
body .sf-main-content a.sf-order-now-white:active,
body .sf-main-content a.sf-order-now-white:focus,
body a.sf-order-now-white,
body a.sf-order-now-white:hover,
a.sf-order-now-white,
a.sf-order-now-white:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

body .sf-main-content a.sf-order-now-white *,
body a.sf-order-now-white *,
a.sf-order-now-white * {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: #ffffff !important;
}

body .sf-main-content a.sf-order-now-white svg,
body a.sf-order-now-white svg,
a.sf-order-now-white svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}


/* =============================================
   UTILITY CLASSES — Edit colors HERE in one place
   These are designed to be reusable across all pages.
   Each class uses high-specificity selectors with !important
   so it always wins regardless of context.
   ============================================= */

/* TEXT COLOR utilities */
body .sf-text-white,
body .sf-text-white *,
.sf-text-white,
.sf-text-white * {
    color: #ffffff !important;
    fill: currentColor !important;
}
body .sf-text-white svg,
.sf-text-white svg { stroke: #ffffff !important; }

body .sf-text-red,
body .sf-text-red *,
.sf-text-red,
.sf-text-red * { color: #b91c1c !important; fill: currentColor !important; }
body .sf-text-red svg,
.sf-text-red svg { stroke: #b91c1c !important; }

body .sf-text-dark,
body .sf-text-dark *,
.sf-text-dark,
.sf-text-dark * { color: #0f172a !important; fill: currentColor !important; }
body .sf-text-dark svg,
.sf-text-dark svg { stroke: #0f172a !important; }

body .sf-text-slate,
body .sf-text-slate *,
.sf-text-slate,
.sf-text-slate * { color: #334155 !important; fill: currentColor !important; }

body .sf-text-muted,
body .sf-text-muted *,
.sf-text-muted,
.sf-text-muted * { color: #64748b !important; fill: currentColor !important; }

/* BACKGROUND COLOR utilities */
body .sf-bg-red,
.sf-bg-red { background: #b91c1c !important; }
body .sf-bg-red:hover,
.sf-bg-red:hover { background: #991b1b !important; }

body .sf-bg-dark,
.sf-bg-dark { background: #0f172a !important; }
body .sf-bg-dark:hover,
.sf-bg-dark:hover { background: #1e293b !important; }

body .sf-bg-white,
.sf-bg-white { background: #ffffff !important; }

body .sf-bg-slate-light,
.sf-bg-slate-light { background: #f8fafc !important; }

/* COMPOSED button classes (use these on Order Now etc.) */
/* Red bg + white text combo */
body .sf-btn-red,
body .sf-btn-red *,
.sf-btn-red,
.sf-btn-red * {
    color: #ffffff !important;
    fill: currentColor !important;
}
body .sf-btn-red,
.sf-btn-red {
    background: #b91c1c !important;
    border: none !important;
}
body .sf-btn-red:hover,
.sf-btn-red:hover { background: #991b1b !important; }
body .sf-btn-red svg,
.sf-btn-red svg { stroke: #ffffff !important; }

/* Dark bg + white text */
body .sf-btn-dark,
body .sf-btn-dark *,
.sf-btn-dark,
.sf-btn-dark * { color: #ffffff !important; fill: currentColor !important; }
body .sf-btn-dark,
.sf-btn-dark { background: #0f172a !important; border: none !important; }
body .sf-btn-dark:hover,
.sf-btn-dark:hover { background: #1e293b !important; }
body .sf-btn-dark svg,
.sf-btn-dark svg { stroke: #ffffff !important; }

/* White bg + red text */
body .sf-btn-white,
body .sf-btn-white *,
.sf-btn-white,
.sf-btn-white * { color: #b91c1c !important; fill: currentColor !important; }
body .sf-btn-white,
.sf-btn-white {
    background: #ffffff !important;
    border: 1px solid #fca5a5 !important;
}
body .sf-btn-white:hover,
.sf-btn-white:hover { background: #fef2f2 !important; }
body .sf-btn-white svg,
.sf-btn-white svg { stroke: #b91c1c !important; }

/* =============================================
   sf-order-now-white = alias for sf-btn-red (white text on red bg)
   Kept as legacy + dedicated handle for Order Now buttons
   ============================================= */
body .sf-order-now-white,
body .sf-order-now-white *,
.sf-order-now-white,
.sf-order-now-white *,
body a.sf-order-now-white,
body a.sf-order-now-white *,
a.sf-order-now-white,
a.sf-order-now-white * {
    color: #ffffff !important;
    fill: currentColor !important;
}
body a.sf-order-now-white svg,
a.sf-order-now-white svg { stroke: #ffffff !important; }
body a.sf-order-now-white:hover,
a.sf-order-now-white:hover { color: #ffffff !important; }
body a.sf-order-now-white:hover *,
a.sf-order-now-white:hover * { color: #ffffff !important; }

/* =============================================
   HOW TO CHANGE BUTTON COLOR LATER:
   - To change Order Now buttons: edit .sf-order-now-white above (line ~25 lines down)
   - To change all red buttons: edit .sf-btn-red above
   - To swap a button's color: change its class on the .tpl file
     e.g. <a class="sf-plan-order-btn sf-btn-red"> → <a class="sf-plan-order-btn sf-btn-dark">
   ============================================= */


/* =============================================
   MENU COLORS — Complete system for all menus
   Overrides any conflicts with high specificity
   ============================================= */

/* ===== TOP STRIP (Forgot Password, View Cart, Currency) ===== */
body .sf-top-strip { /*background: #f8fafc; */ color: #64748b; }
body .sf-top-strip a,
body .sf-top-strip a:link,
body .sf-top-strip a:visited {
    color: #64748b !important;
    text-decoration: none !important;
}
body .sf-top-strip a:hover { color: #0f172a !important; }
body .sf-top-strip .sf-currency-select {
    background: #fff !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
}

/* ===== MAIN HEADER NAV (white bar with logo + nav links + login) ===== */
body .sf-header { background: #ffffff; border-bottom: 1px solid #e2e8f0; }

/* Nav links - dark text default, red on hover */
body .sf-header a.sf-nav-link,
body .sf-header a.sf-nav-link:link,
body .sf-header a.sf-nav-link:visited,
body .sf-header .sf-dropdown-toggle {
    color: #334155 !important;
    text-decoration: none !important;
    font-weight: 500;
    background: transparent !important;
}
body .sf-header a.sf-nav-link:hover,
body .sf-header .sf-dropdown-toggle:hover {
    color: #b91c1c !important;
    background: #f8fafc !important;
}

/* Login button (red bg, white text) */
body .sf-header a.sf-btn-primary,
body .sf-header a.sf-btn-primary:link,
body .sf-header a.sf-btn-primary:visited,
body .sf-header a.sf-btn-primary:hover {
    background: #b91c1c !important;
    color: #ffffff !important;
    border: none !important;
    text-decoration: none !important;
}
body .sf-header a.sf-btn-primary:hover { background: #991b1b !important; }

/* ===== DROPDOWN SUBMENUS (Web Hosting, Data Security) ===== */
body .sf-dropdown-menu {
    background: #b91c1c !important;
    border: none !important;
    margin-top: 0 !important;
    border-radius: 0 0 0.5rem 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.15) !important;
}
body .sf-dropdown-item,
body .sf-dropdown-item:link,
body .sf-dropdown-item:visited {
    color: #ffffff !important;
    background: transparent !important;
    text-decoration: none !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
}
body .sf-dropdown-item:hover,
body .sf-dropdown-item:focus,
body .sf-dropdown-item:active {
    color: #ffffff !important;
    background: #991b1b !important;
    text-decoration: none !important;
}

/* ===== MOBILE MENU (slide-out on small screens) ===== */
body .sf-mobile-menu { background: #ffffff; border-top: 1px solid #e2e8f0; }
body .sf-mobile-menu a.sf-mobile-link,
body .sf-mobile-menu a.sf-mobile-link:link,
body .sf-mobile-menu a.sf-mobile-link:visited {
    color: #334155 !important;
    text-decoration: none !important;
    padding: 0.75rem 1rem;
    display: block;
    border-bottom: 1px solid #f1f5f9;
}
body .sf-mobile-menu a.sf-mobile-link:hover {
    color: #b91c1c !important;
    background: #f8fafc !important;
}
body .sf-mobile-menu .sf-mobile-link-brand,
body .sf-mobile-menu .sf-mobile-link-brand:link,
body .sf-mobile-menu .sf-mobile-link-brand:visited {
    color: #b91c1c !important;
    font-weight: 500;
}
body .sf-mobile-menu .sf-mobile-section-label {
    color: #94a3b8 !important;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem 0.25rem;
    margin: 0;
}
body .sf-mobile-menu a.sf-mobile-btn-primary,
body .sf-mobile-menu a.sf-mobile-btn-primary:link,
body .sf-mobile-menu a.sf-mobile-btn-primary:visited,
body .sf-mobile-menu a.sf-mobile-btn-primary:hover {
    background: #b91c1c !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: none !important;
}
body .sf-mobile-menu a.sf-mobile-btn-primary:hover { background: #991b1b !important; }

/* ===== CLIENT AREA NAV BAR (Dashboard, Services, Domains, etc) ===== */
body .sf-client-nav { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
body .sf-client-nav a.sf-client-nav-link,
body .sf-client-nav a.sf-client-nav-link:link,
body .sf-client-nav a.sf-client-nav-link:visited {
    color: #475569 !important;
    text-decoration: none !important;
    font-weight: 500;
    padding: 0.75rem 1rem;
    background: transparent !important;
}
body .sf-client-nav a.sf-client-nav-link:hover {
    color: #b91c1c !important;
    background: #ffffff !important;
}
body .sf-client-nav a.sf-client-nav-link.active,
body .sf-client-nav a.sf-client-nav-link.active:hover {
    color: #b91c1c !important;
    background: #ffffff !important;
    border-bottom: 2px solid #b91c1c;
}
/* "Order" CTA in client nav - red bg + white */
body .sf-client-nav a.sf-client-nav-order,
body .sf-client-nav a.sf-client-nav-order:hover {
    background: #b91c1c !important;
    color: #ffffff !important;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
}

/* CLIENT NAV — force single row, NO horizontal scroll. All 7 items must
   share the available width. Items shrink with flex:1 so they always fit. */
html body .sf-client-nav {
    overflow: hidden !important;
}
html body .sf-client-nav > .sf-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}
html body .sf-client-nav .sf-client-nav-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}
html body .sf-client-nav .sf-client-nav-inner > a.sf-client-nav-link {
    display: inline-flex !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 0.55rem 0.4rem !important;
    gap: 0.3rem !important;
    font-size: 0.8rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body .sf-client-nav .sf-client-nav-inner > a.sf-client-nav-link svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
}
html body .sf-client-nav .sf-client-nav-inner > a.sf-client-nav-order {
    flex: 0 0 auto !important;
    margin-left: 0.4rem !important;
    padding: 0.4rem 0.85rem !important;
}
/* Narrow viewport — drop the SVG icons so text alone has room */
@media (max-width: 900px) {
    html body .sf-client-nav .sf-client-nav-inner > a.sf-client-nav-link svg {
        display: none !important;
    }
    html body .sf-client-nav .sf-client-nav-inner > a.sf-client-nav-link {
        font-size: 0.75rem !important;
        padding: 0.55rem 0.25rem !important;
    }
}

/* ===== SIDEBAR ACTION MENU (Invoice download, Service actions) ===== */
body .sf-main-content .panel-sidebar .panel-heading { background: #f8fafc !important; }
body .sf-main-content .panel-sidebar .panel-title,
body .sf-main-content .panel-sidebar h6 { color: #0f172a !important; }
body .sf-main-content .panel-sidebar .list-group-item,
body .sf-main-content .panel-sidebar .list-group-item:link,
body .sf-main-content .panel-sidebar .list-group-item:visited {
    color: #334155 !important;
    background: #ffffff !important;
    text-decoration: none !important;
}
body .sf-main-content .panel-sidebar .list-group-item:hover {
    color: #b91c1c !important;
    background: #fef2f2 !important;
}
body .sf-main-content .panel-sidebar .list-group-item.active,
body .sf-main-content .panel-sidebar .list-group-item.active:hover {
    color: #ffffff !important;
    background: #b91c1c !important;
}
body .sf-main-content .panel-sidebar .list-group-item i,
body .sf-main-content .panel-sidebar .list-group-item svg { color: #b91c1c !important; }
body .sf-main-content .panel-sidebar .list-group-item.active i,
body .sf-main-content .panel-sidebar .list-group-item.active svg { color: #ffffff !important; }

/* ===== FOOTER NAV LINKS (dark footer) ===== */
body .sf-footer { background: #0f172a; color: #cbd5e1; }
body .sf-footer .sf-footer-heading { color: #ffffff !important; font-weight: 600; }
body .sf-footer a,
body .sf-footer a:link,
body .sf-footer a:visited {
    color: #cbd5e1 !important;
    text-decoration: none !important;
}
body .sf-footer a:hover { color: #ffffff !important; text-decoration: underline; }
body .sf-footer .sf-social-icon,
body .sf-footer .sf-social-icon:hover { color: #cbd5e1 !important; }
body .sf-footer .sf-social-icon:hover { color: #b91c1c !important; }

/* =============================================
   DROPDOWN MENU FIXES — Main nav + Profile dropdown
   Both use .sf-dropdown-menu with red bg
   ============================================= */

/* Profile dropdown header (name + company) - white on red bg */
body .sf-dropdown-menu .sf-dropdown-header {
    background: #991b1b !important;
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}
body .sf-dropdown-menu .sf-dropdown-header-name {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    display: block !important;
}
body .sf-dropdown-menu .sf-dropdown-header-company {
    color: rgba(255,255,255,0.75) !important;
    font-size: 0.8rem !important;
    display: block !important;
    margin-top: 0.125rem !important;
}

/* Dropdown divider - visible on red bg */
body .sf-dropdown-menu .sf-dropdown-divider {
    height: 1px !important;
    background: rgba(255,255,255,0.15) !important;
    margin: 0 !important;
    border: none !important;
}

/* Logout item - distinct treatment */
body .sf-dropdown-menu a.sf-dropdown-item.sf-dropdown-logout,
body .sf-dropdown-menu a.sf-dropdown-item.sf-dropdown-logout:link,
body .sf-dropdown-menu a.sf-dropdown-item.sf-dropdown-logout:visited {
    color: #ffffff !important;
    background: #7c1515 !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
    margin-top: 0.25rem;
    font-weight: 500;
}
body .sf-dropdown-menu a.sf-dropdown-item.sf-dropdown-logout:hover {
    background: #450a0a !important;
    color: #ffffff !important;
}

/* Icons inside dropdown items */
body .sf-dropdown-menu .sf-dropdown-item i,
body .sf-dropdown-menu .sf-dropdown-item svg {
    color: rgba(255,255,255,0.85) !important;
    width: 1rem;
    text-align: center;
    margin-right: 0.5rem;
}
body .sf-dropdown-menu .sf-dropdown-item:hover i,
body .sf-dropdown-menu .sf-dropdown-item:hover svg {
    color: #ffffff !important;
}

/* Profile dropdown toggle button (Account button) - already red, ensure consistency */
body .sf-header .sf-dropdown-toggle.sf-btn-primary,
body .sf-header .sf-dropdown-toggle.sf-btn-primary:hover {
    background: #b91c1c !important;
    color: #ffffff !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
}
body .sf-header .sf-dropdown-toggle.sf-btn-primary:hover { background: #991b1b !important; }
body .sf-header .sf-dropdown-toggle.sf-btn-primary svg { color: #ffffff !important; }

/* Profile dropdown is right-aligned */
body .sf-dropdown-menu.sf-dropdown-right {
    left: auto !important;
    right: 0 !important;
    min-width: 14rem !important;
}

/* Main nav dropdown alignment with parent */
body .sf-dropdown {
    position: relative;
    display: inline-block;
}
body .sf-dropdown-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    border: none !important;
}

/* Smooth open animation */
body .sf-dropdown.open .sf-dropdown-menu {
    animation: sfDropdownFade 0.15s ease-out;
}
@keyframes sfDropdownFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Make dropdown bridge the gap so hover doesn't break */
body .sf-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: transparent;
}


/* =============================================
   RESPONSIVE ELEMENT SIZES — Perfect across all viewports
   Mobile-first with breakpoints at 640 / 768 / 1024 / 1280
   ============================================= */

/* HEADER — fluid height */
body .sf-header {
    /*padding: 0.625rem 1rem;*/
    min-height: 56px;
}
@media (min-width: 768px) {
    body .sf-header { /*padding: 0.75rem 1.5rem;*/ min-height: 64px; }
}
@media (min-width: 1024px) {
    body .sf-header { /*padding: 0.875rem 2rem;*/ min-height: 72px; }
}

/* LOGO */
body .sf-header .sf-logo-img,
body .sf-logo img { height: 28px; width: auto; }
@media (min-width: 768px) { body .sf-header .sf-logo-img { height: 32px; } }
@media (min-width: 1024px) { body .sf-header .sf-logo-img { height: 36px; } }

/* NAV LINK SIZES */
body .sf-header a.sf-nav-link,
body .sf-header .sf-dropdown-toggle {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}
@media (min-width: 1280px) {
    body .sf-header a.sf-nav-link,
    body .sf-header .sf-dropdown-toggle {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* LOGIN/PROFILE BUTTON */
body .sf-header a.sf-btn-primary,
body .sf-header .sf-dropdown-toggle.sf-btn-primary {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
}
@media (min-width: 1024px) {
    body .sf-header a.sf-btn-primary,
    body .sf-header .sf-dropdown-toggle.sf-btn-primary {
        padding: 0.5rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* TOP STRIP */
body .sf-top-strip { padding: 0.375rem 1rem; font-size: 0.8rem; }
@media (min-width: 1024px) {
    body .sf-top-strip { /*padding: 0.5rem 1.5rem;*/ font-size: 0.85rem; }
}
body .sf-top-strip a { padding: 0 0.5rem; }
body .sf-top-strip .sf-currency-select {
    /*padding: 0.25rem 0.5rem;*/
    font-size: 0.8rem;
    border-radius: 0.375rem;
}

/* CLIENT-AREA NAV BAR */
body .sf-client-nav { padding: 0; }
body .sf-client-nav-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body .sf-client-nav a.sf-client-nav-link {
    padding: 0.625rem 0.875rem;
    font-size: 0.825rem;
    white-space: nowrap;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    body .sf-client-nav a.sf-client-nav-link { padding: 0.75rem 1.125rem; font-size: 0.875rem; }
}

/* DROPDOWN MENU SIZE */
body .sf-dropdown-menu { min-width: 11rem; font-size: 0.875rem; }
@media (min-width: 1024px) { body .sf-dropdown-menu { min-width: 12rem; } }
body .sf-dropdown-item { padding: 0.5rem 0.875rem; }
@media (min-width: 1024px) { body .sf-dropdown-item { padding: 0.625rem 1rem; } }

/* CARDS — consistent radius scale */
body .sf-main-content .panel,
body .sf-main-content .sf-card,
body .sf-main-content .sf-dash-card,
body .sf-main-content .sf-plan-card { border-radius: 0.625rem; }
@media (min-width: 768px) {
    body .sf-main-content .panel,
    body .sf-main-content .sf-card,
    body .sf-main-content .sf-dash-card,
    body .sf-main-content .sf-plan-card { border-radius: 0.875rem; }
}

/* DASHBOARD CARDS — robust layout: icon never shrinks, link shows fully at bottom */
body .sf-main-content .sf-dash-card {
    padding: 1.25rem;
    overflow: visible;
    display: flex;
    flex-direction: column;
}
body .sf-main-content .sf-dash-card-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    min-width: 0;
}
body .sf-main-content .sf-dash-card-top > div:last-child { min-width: 0; flex: 1; }
body .sf-main-content .sf-dash-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body .sf-main-content .sf-dash-card-value { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
body .sf-main-content .sf-dash-card-label { font-size: 0.8rem; color: var(--sf-text-muted); }
body .sf-main-content a.sf-dash-card-link {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--sf-border);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sf-brand-600);
    text-decoration: none;
}
body .sf-main-content a.sf-dash-card-link:hover { color: var(--sf-brand-700); }
@media (min-width: 768px) {
    body .sf-main-content .sf-dash-card { padding: 1.5rem; }
    body .sf-main-content .sf-dash-card-icon { width: 44px; height: 44px; }
    body .sf-main-content .sf-dash-card-value { font-size: 1.75rem; }
    body .sf-main-content .sf-dash-card-label { font-size: 0.875rem; }
}

/* DASHBOARD QUICK ACTIONS */
body .sf-main-content .sf-dash-action {
    padding: 1rem 1.125rem;
    gap: 0.875rem;
    border-radius: 0.625rem;
    min-width: 0;
    overflow: visible;
}
body .sf-main-content .sf-dash-action > div:last-child { min-width: 0; flex: 1; }

/* DASHBOARD ACTION CARDS — bulletproof layout override.
   Some inherited rule (likely a global word-break or narrow flex-basis on the
   text wrapper) was making the title text break per-character. These rules
   force horizontal flex with proper text wrapping. */
html body .sf-main-content .sf-dash-actions .sf-dash-action {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
html body .sf-main-content .sf-dash-actions .sf-dash-action > .sf-dash-action-icon {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
}
html body .sf-main-content .sf-dash-actions .sf-dash-action > div:not(.sf-dash-action-icon) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    display: block !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}
html body .sf-main-content .sf-dash-actions .sf-dash-action .sf-dash-action-title,
html body .sf-main-content .sf-dash-actions .sf-dash-action .sf-dash-action-desc {
    display: block !important;
    width: auto !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
}
body .sf-main-content .sf-dash-action-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body .sf-main-content .sf-dash-action-title { font-size: 0.95rem; font-weight: 600; color: var(--sf-text-strong); margin-bottom: 0.125rem; }
body .sf-main-content .sf-dash-action-desc { font-size: 0.8rem; color: var(--sf-text-muted); line-height: 1.35; }

/* HOSTING PLAN CARDS */
body .sf-main-content .sf-plan-card {
    padding: 1.25rem;
    border-radius: 0.875rem;
}
@media (min-width: 1024px) {
    body .sf-main-content .sf-plan-card { padding: 1.75rem; border-radius: 1rem; }
}
body .sf-main-content .sf-plan-name { font-size: 1.125rem; font-weight: 700; }
body .sf-main-content .sf-plan-tagline { font-size: 0.85rem; }
body .sf-main-content .sf-plan-price-amount { font-size: 2.25rem; font-weight: 700; line-height: 1; }
body .sf-main-content .sf-plan-price-period { font-size: 0.875rem; }
body .sf-main-content .sf-plan-feature {
    font-size: 0.875rem;
    padding: 0.375rem 0;
}
body .sf-main-content .sf-plan-order-btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    border-radius: 0.5rem;
    min-height: 44px;
    font-weight: 600;
}

/* ICONS — dashboard icon SVGs */
body .sf-main-content .sf-dash-card-icon svg,
body .sf-main-content .sf-dash-action-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    body .sf-main-content .sf-dash-card-icon svg,
    body .sf-main-content .sf-dash-action-icon svg { width: 22px; height: 22px; }
}

/* INVOICE PAGE */
body .sf-main-content .invoice {
    padding: 1.25rem;
    border-radius: 0.875rem;
}
@media (min-width: 768px) {
    body .sf-main-content .invoice { padding: 1.75rem; border-radius: 1rem; }
}
@media (min-width: 1024px) {
    body .sf-main-content .invoice { padding: 2rem; }
}
body .sf-main-content .invoice-title { font-size: 1.5rem; }
@media (min-width: 768px) {
    body .sf-main-content .invoice-title { font-size: 1.75rem; }
}
@media (min-width: 1024px) {
    body .sf-main-content .invoice-title { font-size: 2rem; }
}

/* TABLES */
body .sf-main-content .table th,
body .sf-main-content .table td { padding: 0.625rem 0.75rem; }
@media (min-width: 768px) {
    body .sf-main-content .table th,
    body .sf-main-content .table td { padding: 0.875rem 1rem; }
}

/* FORM CONTROLS — consistent across sizes */
body .sf-main-content .form-control,
body .sf-main-content input[type=text],
body .sf-main-content input[type=email],
body .sf-main-content input[type=password],
body .sf-main-content input[type=number],
body .sf-main-content input[type=tel],
body .sf-main-content textarea {
    height: auto;
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 0.5rem;
}
@media (min-width: 768px) {
    body .sf-main-content .form-control,
    body .sf-main-content input[type=text],
    body .sf-main-content input[type=email],
    body .sf-main-content input[type=password],
    body .sf-main-content input[type=number],
    body .sf-main-content input[type=tel] {
        min-height: 42px;
        padding: 0.625rem 0.875rem;
    }
}
body .sf-main-content textarea { min-height: 96px; }

/* BUTTONS — consistent heights */
body .sf-main-content .btn,
body .btn { min-height: 38px; }
body .sf-main-content .btn-lg,
body .btn-lg { min-height: 48px; padding: 0.75rem 1.5rem; font-size: 1rem; }
body .sf-main-content .btn-sm,
body .btn-sm { min-height: 32px; padding: 0.375rem 0.875rem; font-size: 0.8rem; }
body .sf-main-content .btn-xs,
body .btn-xs { min-height: 28px; padding: 0.25rem 0.625rem; font-size: 0.75rem; }

/* MODAL SIZES */
body .modal-dialog { width: auto; max-width: 600px; margin: 1rem auto; }
@media (min-width: 768px) { body .modal-dialog { margin: 2rem auto; max-width: 720px; } }
body .modal-lg { max-width: 920px; }
body .modal-sm { max-width: 380px; }

/* SECTION SPACING — consistent */
body .sf-main-content .section,
body .sf-main-content section { margin-bottom: 1.5rem; }
@media (min-width: 768px) {
    body .sf-main-content .section,
    body .sf-main-content section { margin-bottom: 2rem; }
}

/* PAGE TITLES */
body .sf-main-content .sf-page-title { font-size: 1.5rem; font-weight: 700; }
@media (min-width: 768px) { body .sf-main-content .sf-page-title { font-size: 1.75rem; } }
@media (min-width: 1024px) { body .sf-main-content .sf-page-title { font-size: 2rem; } }

/* FOOTER LOGO */
body .sf-footer .sf-footer-logo img { height: 30px; width: auto; }
@media (min-width: 768px) { body .sf-footer .sf-footer-logo img { height: 36px; } }

/* SOCIAL ICONS */
body .sf-footer .sf-social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body .sf-footer .sf-social-icon svg { width: 18px; height: 18px; }

/* IMAGES */
body .sf-main-content img,
body img { max-width: 100%; height: auto; }

/* AVATAR / PROFILE PIC */
body .sf-avatar { width: 40px; height: 40px; border-radius: 50%; }
body .sf-avatar-lg { width: 56px; height: 56px; }
body .sf-avatar-sm { width: 28px; height: 28px; }

/* SVG icons in nav */
body .sf-header svg,
body .sf-mobile-menu svg { width: 18px; height: 18px; }
@media (min-width: 768px) { body .sf-header svg { width: 20px; height: 20px; } }

/* Mobile menu toggle */
body .sf-mobile-toggle {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: #334155;
    cursor: pointer;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body .sf-mobile-toggle:hover { background: #f8fafc; color: #b91c1c; }
body .sf-mobile-toggle svg { width: 22px; height: 22px; }


/* =============================================
   DOMAIN SEARCH ALIGNMENT — input + button perfectly aligned
   ============================================= */

body .domain-search-input,
body .search-box .domain-search-input,
body .search-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
}

/* Search field wrapper - takes remaining space */
body .domain-search-input .search-field,
body .search-group .search-field {
    flex: 1 1 auto !important;
    position: relative !important;
    min-width: 0 !important;
}

/* Input — flush left rounding only */
body .domain-search-input .search-field .form-control,
body .search-group .search-field .form-control,
body .domain-search-input .search-field input,
body .search-group .search-field input {
    width: 100% !important;
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 1rem 0 2.75rem !important;
    border: 1px solid #e2e8f0 !important;
    border-right: none !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
    background: #fff !important;
    font-size: 0.95rem !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Search icon inside input - vertically centered */
body .domain-search-input .search-field-icon,
body .search-group .search-field-icon {
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button wrapper */
body .domain-search-input .search-group-btn,
body .search-group .search-group-btn {
    flex: 0 0 auto !important;
    display: flex !important;
}

/* Button — matches input height, flush right rounding */
body .domain-search-input .search-group-btn .btn,
body .search-group .search-group-btn .btn,
body .search-group-btn > button {
    height: 48px !important;
    line-height: 1 !important;
    padding: 0 1.5rem !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    background: #b91c1c !important;
    border: 1px solid #b91c1c !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    box-shadow: none !important;
}
body .domain-search-input .search-group-btn .btn:hover,
body .search-group .search-group-btn .btn:hover {
    background: #991b1b !important;
    border-color: #991b1b !important;
}

/* Focus ring on input wraps both elements */
body .domain-search-input .search-field input:focus,
body .search-group .search-field input:focus {
    border-color: #b91c1c !important;
    outline: none !important;
    box-shadow: -2px 0 0 #b91c1c, 0 -2px 0 #b91c1c, 0 2px 0 #b91c1c !important;
}

/* Large variant (lg) */
body .search-group-lg .search-field .form-control,
body .domain-search-input.search-group-lg .form-control {
    height: 56px !important;
    line-height: 56px !important;
    font-size: 1rem !important;
}
body .search-group-lg .search-group-btn .btn,
body .domain-search-input.search-group-lg .btn {
    height: 56px !important;
    padding: 0 2rem !important;
    font-size: 1rem !important;
}

/* On mobile — stack vertically */
@media (max-width: 480px) {
    body .domain-search-input,
    body .search-group {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    body .domain-search-input .search-field input,
    body .search-group .search-field input {
        border: 1px solid #e2e8f0 !important;
        border-radius: 0.5rem !important;
    }
    body .domain-search-input .search-group-btn .btn,
    body .search-group .search-group-btn .btn {
        width: 100% !important;
        border-radius: 0.5rem !important;
    }
}

/* =============================================
   UNIFORM INPUT SIZES ACROSS ENTIRE THEME
   Single source of truth for all form fields
   ============================================= */

/* Standard input height: 40px (default), 48px (lg), 32px (sm) */
body input[type=text],
body input[type=email],
body input[type=password],
body input[type=number],
body input[type=tel],
body input[type=url],
body input[type=search],
body input[type=date],
body input[type=time],
body input[type=datetime-local],
body select,
body .form-control {
    height: 40px;
    line-height: 1.5;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.9rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #0f172a !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

/* Textarea — auto height, same padding */
body textarea,
body textarea.form-control {
    min-height: 96px !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.9rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    background: #fff !important;
    color: #0f172a !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    resize: vertical;
}

/* Focus state — uniform */
body input:focus,
body textarea:focus,
body select:focus,
body .form-control:focus {
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(185,28,28,0.12) !important;
    outline: 0 !important;
}

/* Input large variant */
body .input-lg,
body input.input-lg,
body .form-control.input-lg {
    height: 48px !important;
    padding: 0.625rem 1rem !important;
    font-size: 1rem !important;
}

/* Input small variant */
body .input-sm,
body input.input-sm,
body .form-control.input-sm {
    height: 32px !important;
    padding: 0.375rem 0.625rem !important;
    font-size: 0.8rem !important;
}

/* Mobile — 16px font prevents iOS zoom */
@media (max-width: 768px) {
    body input[type=text],
    body input[type=email],
    body input[type=password],
    body input[type=number],
    body input[type=tel],
    body input[type=url],
    body input[type=search],
    body select,
    body .form-control,
    body textarea {
        font-size: 16px !important;
        height: 44px;
    }
    body textarea { height: auto !important; min-height: 100px !important; }
}

/* Disabled / readonly */
body input:disabled,
body input[readonly],
body textarea:disabled,
body select:disabled,
body .form-control:disabled,
body .form-control[readonly] {
    background: #f1f5f9 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
}

/* Placeholder uniformity */
body input::placeholder,
body textarea::placeholder { color: #94a3b8 !important; opacity: 1; }

/* Input groups (Bootstrap input-group) — uniform alignment */
body .input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
}
body .input-group > .form-control {
    flex: 1 1 auto !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
    border-right: none !important;
}
body .input-group > .form-control:last-child {
    border-radius: 0.5rem !important;
    border-right: 1px solid #e2e8f0 !important;
}
body .input-group > .input-group-addon,
body .input-group > .input-group-text {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 0.875rem !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    font-size: 0.9rem !important;
}
body .input-group > .input-group-addon:first-child {
    border-radius: 0.5rem 0 0 0.5rem !important;
    border-right: none !important;
}
body .input-group > .input-group-addon:last-child {
    border-radius: 0 0.5rem 0.5rem 0 !important;
    border-left: none !important;
}
body .input-group > .input-group-btn .btn,
body .input-group .btn {
    height: 40px !important;
    padding: 0 1rem !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    margin: 0 !important;
}

/* Select with select2 enhancement — match height */
body .select2-container--default .select2-selection--single {
    height: 40px !important;
}
body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
}
body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}

/* Native checkbox/radio sizing */
body input[type=checkbox],
body input[type=radio] {
    width: 16px !important;
    height: 16px !important;
    margin-right: 0.5rem !important;
    accent-color: #b91c1c !important;
    cursor: pointer;
    vertical-align: middle;
}

/* =============================================
   FIXES from live screenshot audit
   ============================================= */

/* FIX 1: Page title was white = invisible - force dark */
body .sf-main-content .sf-page-title,
body .sf-main-content h1.sf-page-title {
    color: #0f172a !important;
    font-weight: 700 !important;
    margin: 0 0 0.5rem !important;
}

/* FIX 2: TLD pricing Register buttons - solid red, not faded */
body .sf-main-content .btn-register-domain,
body .sf-main-content .tld-register .btn,
body .sf-main-content a.btn-register-domain,
body .sf-main-content .btn-primary-faded.btn-register-domain {
    background: #b91c1c !important;
    color: #ffffff !important;
    border: 1px solid #b91c1c !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.875rem !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}
body .sf-main-content .btn-register-domain:hover,
body .sf-main-content .tld-register .btn:hover,
body .sf-main-content a.btn-register-domain:hover {
    background: #991b1b !important;
    border-color: #991b1b !important;
    color: #ffffff !important;
}

/* FIX 3: Promo box icons - placeholder fallback when SVG empty */
body .sf-main-content .promo-box-icon {
    width: 48px !important;
    height: 48px !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border-radius: 0.625rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
body .sf-main-content .promo-box-icon:empty::before {
    content: "📦";
    font-size: 1.5rem;
}
body .sf-main-content .promo-box-icon svg {
    width: 24px !important;
    height: 24px !important;
    fill: #b91c1c !important;
    stroke: #b91c1c !important;
}

/* FIX 4: Promo box body alignment */
body .sf-main-content .domain-promo-box {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    padding: 1.25rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    transition: all 0.2s !important;
}
body .sf-main-content .domain-promo-box:hover {
    border-color: #fca5a5 !important;
    box-shadow: 0 8px 20px -5px rgba(0,0,0,0.08) !important;
    transform: translateY(-2px) !important;
}
body .sf-main-content .domain-promo-box .promo-box-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    margin-bottom: 0.75rem !important;
}
body .sf-main-content .domain-promo-box .promo-box-header h5 {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    margin: 0 0 0.25rem !important;
}
body .sf-main-content .domain-promo-box .description,
body .sf-main-content .domain-promo-box .promo-description {
    color: #64748b !important;
    font-size: 0.875rem !important;
    margin: 0 !important;
}
body .sf-main-content .domain-promo-box .btn {
    background: #b91c1c !important;
    color: #ffffff !important;
    margin-top: 0.5rem !important;
}

/* FIX 5: Override the global white headings rule for ALL specific page-title contexts */
body .sf-main-content .panel h1,
body .sf-main-content .panel h2,
body .sf-main-content .panel h3,
body .sf-main-content .panel h4,
body .sf-main-content .panel h5,
body .sf-main-content .panel h6,
body .sf-main-content .panel-title,
body .sf-main-content .section-title,
body .sf-main-content .invoice-title,
body .sf-main-content .sf-plan-name,
body .sf-main-content .sf-why-card-title,
body .sf-main-content .sf-dash-card-value,
body .sf-main-content .sf-page-title,
body .sf-main-content .sf-page-nav-title,
body .sf-main-content > h1,
body .sf-main-content > h2,
body .sf-main-content > h3,
body .sf-main-content > div > h1,
body .sf-main-content > div > h2,
body .sf-main-content > div > h3 {
    color: #0f172a !important;
}

/* But headings inside DARK/RED panels stay white */
body .sf-main-content .invoice .table th h1,
body .sf-main-content .invoice .table th h2,
body .sf-main-content .invoice .table th h3,
body .sf-main-content [class*="bg-dark"] h1,
body .sf-main-content [class*="bg-dark"] h2,
body .sf-main-content [class*="bg-dark"] h3,
body .sf-main-content [class*="bg-red"] h1,
body .sf-main-content [class*="bg-red"] h2,
body .sf-main-content [class*="bg-red"] h3 {
    color: #ffffff !important;
}

/* FIX 6: Invoice totals row - red and bold (was showing "INR177INR" weird) */
body .sf-main-content .invoice .table tfoot tr:last-child td,
body .sf-main-content .invoice tfoot tr:last-child td {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border-top: 2px solid #fecaca !important;
}

/* FIX 7: View Details button in tables - more visible */
body .sf-main-content .table .btn,
body .sf-main-content .table a.btn {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    color: #b91c1c !important;
    font-weight: 600 !important;
}
body .sf-main-content .table .btn:hover,
body .sf-main-content .table a.btn:hover {
    background: #fef2f2 !important;
    border-color: #b91c1c !important;
    color: #b91c1c !important;
}

/* FIX 8: Empty promo icons inside .domain-promo-box (specifically) */
body .sf-main-content .domain-promo-box .promo-box-icon:empty {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
}

/* =============================================
   CRITICAL FIX: Order Now button text invisible
   Maximum-specificity rule with html body chain
   ============================================= */
html body .sf-main-content a.sf-plan-order-btn,
html body .sf-main-content a.sf-plan-order-btn:link,
html body .sf-main-content a.sf-plan-order-btn:visited,
html body .sf-main-content a.sf-plan-order-btn:hover,
html body .sf-main-content a.sf-plan-order-btn:active,
html body a.sf-plan-order-btn,
html body a.sf-plan-order-brand,
html body a.sf-plan-order-dark,
html body a.sf-email-order-btn,
html body a.sf-email-order-brand,
html .sf-plan-order-btn,
html .sf-plan-order-brand,
html .sf-plan-order-dark,
html .sf-email-order-btn,
html .sf-email-order-brand {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Apply to text nodes, spans, and SVGs inside */
html body .sf-main-content a.sf-plan-order-btn *,
html body a.sf-plan-order-btn *,
html body a.sf-plan-order-brand *,
html body a.sf-plan-order-dark *,
html body a.sf-email-order-btn *,
html body a.sf-email-order-brand *,
html .sf-plan-order-btn * {
    color: #ffffff !important;
    fill: currentColor !important;
}

html body a.sf-plan-order-btn svg,
html body a.sf-plan-order-brand svg,
html body a.sf-plan-order-dark svg,
html body a.sf-email-order-btn svg,
html body a.sf-email-order-brand svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Ensure backgrounds are set properly */
html body a.sf-plan-order-brand,
html body a.sf-email-order-brand { background: #b91c1c !important; }
html body a.sf-plan-order-dark { background: #0f172a !important; }

html body a.sf-plan-order-brand:hover,
html body a.sf-email-order-brand:hover { background: #991b1b !important; }
html body a.sf-plan-order-dark:hover { background: #1e293b !important; }

/* =============================================
   FIX: "MOST POPULAR" badge appearing on every plan
   Should only appear on actually-popular plan
   This is a template issue but CSS can hide if needed
   ============================================= */
/* Hide the badge if it's on every card (visual fix until template fixed) */

/* =============================================
   FIX: Service detail page tabs visible
   ============================================= */
html body .sf-main-content .nav-tabs > li > a {
    color: #64748b !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 0.75rem 1.25rem !important;
    font-weight: 500 !important;
    background: transparent !important;
}
html body .sf-main-content .nav-tabs > li > a:hover {
    color: #b91c1c !important;
    background: #fef2f2 !important;
}
html body .sf-main-content .nav-tabs > li.active > a,
html body .sf-main-content .nav-tabs > li.active > a:hover {
    color: #b91c1c !important;
    border-bottom-color: #b91c1c !important;
    background: transparent !important;
}

/* =============================================
   FIX: Service usage circle charts contained
   ============================================= */
html body .sf-main-content .progress-circle,
html body .sf-main-content .usage-chart {
    max-width: 100%;
}

/* =============================================
   SPACING CONSISTENCY — Padding / Margin polish
   Fixes scattered spacing issues across the theme
   ============================================= */

/* Reset base margins on common text elements */
body .sf-main-content p {
    /* margin: 0 0 0.75rem; */
    line-height: 1.6;
}
body .sf-main-content p:last-child { margin-bottom: 0; }
body .sf-main-content ul,
body .sf-main-content ol { margin: 0 0 1rem; padding-left: 1.25rem; }
body .sf-main-content ul li,
body .sf-main-content ol li { margin-bottom: 0.375rem; line-height: 1.6; }
body .sf-main-content ul:last-child,
body .sf-main-content ol:last-child { margin-bottom: 0; }

/* Heading margins */
body .sf-main-content h1 { margin: 0 0 1rem; }
body .sf-main-content h2 { margin: 0 0 0.875rem; }
/*body .sf-main-content h3 { margin: 0 0 0.75rem; }*/
body .sf-main-content h4 { margin: 0 0 0.625rem; }
body .sf-main-content h5,
body .sf-main-content h6 { margin: 0 0 0.5rem; }
body .sf-main-content h1:last-child,
body .sf-main-content h2:last-child,
body .sf-main-content h3:last-child,
body .sf-main-content h4:last-child,
body .sf-main-content h5:last-child,
body .sf-main-content h6:last-child { margin-bottom: 0; }

/* Heading-to-content spacing (h followed by p) */
body .sf-main-content h1 + p,
body .sf-main-content h2 + p,
body .sf-main-content h3 + p { margin-top: -0.25rem; }

/* Section / panel breathing room */
body .sf-main-content .section { padding: 0; margin: 0 0 1.5rem; }
body .sf-main-content .section:last-child { margin-bottom: 0; }
body .sf-main-content .section-header { margin-bottom: 1rem; }
body .sf-main-content .section-body { padding: 0; }

/* Panel internal consistency */
body .sf-main-content .panel { margin-bottom: 1.25rem; }
body .sf-main-content .panel-heading { padding: 0.875rem 1.25rem; }
body .sf-main-content .panel-body { padding: 1.25rem; }
body .sf-main-content .panel-footer { padding: 0.75rem 1.25rem; }
body .sf-main-content .panel-body > *:last-child { margin-bottom: 0; }
body .sf-main-content .panel-body > p:last-child { margin-bottom: 0; }

/* Form field spacing */
body .sf-main-content .form-group { margin-bottom: 1.125rem; }
body .sf-main-content .form-group:last-child { margin-bottom: 0; }
body .sf-main-content .form-group label { margin-bottom: 0.375rem; display: inline-block; }
body .sf-main-content .form-actions { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #f1f5f9; }
body .sf-main-content .form-actions .btn + .btn { margin-left: 0.5rem; }

/* Bootstrap row/col gutters */
body .sf-main-content .row { margin-left: -0.625rem; margin-right: -0.625rem; }
body .sf-main-content .row > [class*="col-"] {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
body .sf-main-content .row + .row { margin-top: 1rem; }

/* Table spacing */
body .sf-main-content .table { margin-bottom: 1.25rem; }
body .sf-main-content .table:last-child { margin-bottom: 0; }
body .sf-main-content .table th,
body .sf-main-content .table td { padding: 0.75rem 1rem; vertical-align: middle; }

/* Alert / message spacing */
body .sf-main-content .alert,
body .sf-main-content .sf-alert { padding: 0.875rem 1.25rem; margin-bottom: 1.25rem; border-radius: 0.5rem; }
body .sf-main-content .alert > *:last-child,
body .sf-main-content .sf-alert > *:last-child { margin-bottom: 0; }

/* Address / contact blocks */
body .sf-main-content address { padding: 1rem 1.25rem; margin-bottom: 1rem; line-height: 1.7; }

/* Button spacing in groups */
body .sf-main-content .btn-group .btn,
body .sf-main-content .btn + .btn { margin-left: 0.375rem; }
body .sf-main-content .btn-group .btn:first-child { margin-left: 0; }

/* List groups */
body .sf-main-content .list-group { margin: 0 0 1.25rem; }
body .sf-main-content .list-group:last-child { margin-bottom: 0; }
body .sf-main-content .list-group-item { padding: 0.75rem 1rem; }

/* Spacing between consecutive sections */
body .sf-main-content > .panel + .panel,
body .sf-main-content > .section + .section,
body .sf-main-content > .row + .row { margin-top: 0; /* already has bottom margin */ }

/* Page title region */
body .sf-page-nav { padding: 1rem 0; margin-bottom: 1rem; border-bottom: 1px solid #e2e8f0; }
body .sf-page-nav-title { margin: 0; }

/* Make sure no element has invisible text due to bad inheritance */
body .sf-main-content * { min-height: auto; }

/* Hosting plan card spacing */
body .sf-plan-card .sf-plan-inner { padding: 1.5rem; }
body .sf-plan-name { margin: 0 0 0.25rem; }
body .sf-plan-tagline { margin: 0 0 1rem; color: #64748b; }
body .sf-plan-price-wrap { margin-bottom: 1rem; }
body .sf-plan-order-btn { margin: 0 0 1rem; }
body .sf-plan-features-label { margin: 0 0 0.625rem; font-weight: 600; color: #475569; font-size: 0.875rem; }
body .sf-plan-feature { padding: 0.375rem 0; gap: 0.5rem; align-items: flex-start; }

/* Domain search promo boxes */
body .domain-promo-box .promo-box-body { gap: 0.75rem; }
body .domain-promo-box .promo-box-content { margin-bottom: 0.5rem; }
body .domain-promo-box .promo-box-content-between { margin-top: auto; }

/* Avoid weird text breaks */
body .sf-main-content,
body .sf-main-content * { word-wrap: break-word; }

/* Remove any accidental overflow hiding text */
body .sf-main-content .panel,
body .sf-main-content .section,
body .sf-main-content .panel-body { overflow: visible; }

/* Reset font-size to normal anywhere it might have been zeroed */
body .sf-main-content { font-size: 0.95rem; line-height: 1.6; }

/* =============================================
   INVOICE DOWNLOAD ACTION CARD — prominent styling
   The "Actions" panel-sidebar with Download link
   ============================================= */

/* The container card */
body .sf-main-content .invoice + .panel-sidebar,
body .sf-main-content .panel-sidebar {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
    margin-bottom: 1.5rem !important;
}

/* "Actions" header bar */
body .sf-main-content .panel-sidebar .panel-heading {
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 1rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
}
body .sf-main-content .panel-sidebar .panel-heading .panel-title,
body .sf-main-content .panel-sidebar .panel-heading h6 {
    color: #0f172a !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
}
body .sf-main-content .panel-sidebar .panel-heading .panel-title i.fa-bookmark,
body .sf-main-content .panel-sidebar .panel-heading h6 i.fa-bookmark {
    color: #b91c1c !important;
    font-size: 1rem !important;
}
body .sf-main-content .panel-sidebar .panel-heading .panel-minimise {
    margin-left: auto !important;
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
}

/* Download list — clean rows */
body .sf-main-content .panel-sidebar .list-group {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    list-style: none !important;
}

/* Each action row — prominent button-like styling */
body .sf-main-content .panel-sidebar .list-group-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.875rem !important;
    padding: 1rem 1.25rem !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border-radius: 0 !important;
    position: relative !important;
}
body .sf-main-content .panel-sidebar .list-group-item:last-child {
    border-bottom: none !important;
}

/* Hover state — red highlight + shift */
body .sf-main-content .panel-sidebar .list-group-item:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    padding-left: 1.5rem !important;
}

/* Right-arrow indicator on hover */
body .sf-main-content .panel-sidebar .list-group-item::after {
    content: "→" !important;
    margin-left: auto !important;
    color: #b91c1c !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    opacity: 0 !important;
    transform: translateX(-4px) !important;
    transition: all 0.2s ease !important;
}
body .sf-main-content .panel-sidebar .list-group-item:hover::after {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Icons in download links */
body .sf-main-content .panel-sidebar .list-group-item i,
body .sf-main-content .panel-sidebar .list-group-item svg,
body .sf-main-content .panel-sidebar .list-group-item .ls,
body .sf-main-content .panel-sidebar .list-group-item .lm {
    color: #b91c1c !important;
    font-size: 1.125rem !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Download icon background pill */
body .sf-main-content .panel-sidebar .list-group-item i.ls-download,
body .sf-main-content .panel-sidebar .list-group-item .ls-download {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
}

/* Specifically for download anchor (dl.php links) */
body .sf-main-content .panel-sidebar a[href*="dl.php"],
body .sf-main-content .panel-sidebar a[href*="dl.php"]:link,
body .sf-main-content .panel-sidebar a[href*="dl.php"]:visited {
    color: #0f172a !important;
    font-weight: 600 !important;
}
body .sf-main-content .panel-sidebar a[href*="dl.php"]:hover {
    color: #b91c1c !important;
}

/* Active state */
body .sf-main-content .panel-sidebar .list-group-item.active,
body .sf-main-content .panel-sidebar .list-group-item.active:hover {
    background: #b91c1c !important;
    color: #ffffff !important;
}
body .sf-main-content .panel-sidebar .list-group-item.active i,
body .sf-main-content .panel-sidebar .list-group-item.active svg {
    color: #ffffff !important;
    background: rgba(255,255,255,0.15) !important;
}

/* Card row layout — when sidebar sits next to invoice */
body .sf-main-content .invoice + .panel-sidebar {
    margin-top: 1.5rem !important;
}
@media (min-width: 992px) {
    /* On desktop, sidebar action card is compact */
    body .sf-main-content .panel-sidebar { max-width: 100%; }
}

/* =============================================
   IOS-STYLE TOGGLE SWITCH (lagom2 .switch markup)
   For "Join our mailing list" and similar opt-ins
   ============================================= */

body .sf-main-content .switch {
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    user-select: none !important;
    position: relative !important;
    gap: 0.625rem !important;
}

/* Hide native checkbox visually, keep accessible */
body .sf-main-content .switch__checkbox {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* Track */
body .sf-main-content .switch__container {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
    background: #cbd5e1 !important;
    border-radius: 9999px !important;
    transition: background 0.2s ease !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

/* Handle (knob) */
body .sf-main-content .switch__handle {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 20px !important;
    height: 20px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    transition: transform 0.2s ease !important;
}

/* Checked state — red track + handle to right */
body .sf-main-content .switch__checkbox:checked + .switch__container {
    background: #b91c1c !important;
}
body .sf-main-content .switch__checkbox:checked + .switch__container .switch__handle {
    transform: translateX(20px) !important;
}

/* Large variant */
body .sf-main-content .switch--lg .switch__container {
    width: 52px !important;
    height: 28px !important;
}
body .sf-main-content .switch--lg .switch__handle {
    width: 24px !important;
    height: 24px !important;
}
body .sf-main-content .switch--lg .switch__checkbox:checked + .switch__container .switch__handle {
    transform: translateX(24px) !important;
}

/* Switch label text - make sure visible */
body .sf-main-content .switch-label,
body .sf-main-content .switch__label {
    color: #0f172a !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    margin-right: 0.5rem !important;
    display: inline-block !important;
}

/* Mailing list section panel polish */
body .sf-main-content .panel.panel-switch {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.625rem !important;
    padding: 0.75rem 1rem !important;
    box-shadow: none !important;
    margin: 1rem 0 0 !important;
}
body .sf-main-content .panel.panel-switch .panel-body {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* iCheck checkbox replacement (lagom2 uses .icheck-control) */
body .sf-main-content input.icheck-control,
body .sf-main-content input.icheck-control[type=checkbox],
body .sf-main-content input.icheck-control[type=radio] {
    width: 18px !important;
    height: 18px !important;
    margin-right: 0.5rem !important;
    accent-color: #b91c1c !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    opacity: 1 !important;
    position: static !important;
}
body .sf-main-content .icheckbox_square,
body .sf-main-content .iradio_square {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 0.5rem !important;
    vertical-align: middle !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 0.25rem !important;
    background: #fff !important;
    cursor: pointer !important;
}
body .sf-main-content .icheckbox_square.checked,
body .sf-main-content .iradio_square.checked {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* Make sure checkbox labels are visible */
body .sf-main-content .checkbox label,
body .sf-main-content .checkbox-label,
body .sf-main-content label.checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: #334155 !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    margin: 0.375rem 0 !important;
}

/* =============================================
   DOMAIN REGISTER (cart) PAGE polish
   ============================================= */

body .sf-main-content .search-box,
body .search-box {
    margin: 1rem 0 1.5rem !important;
    padding: 0 !important;
}
body .sf-main-content .search-box .domain-search-input {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    border-radius: 0.5rem !important;
}

/* Domain search results */
body .sf-main-content .domain-checker-result-headline {
    margin: 1rem 0 1.5rem !important;
}
body .sf-main-content .domain-search-result,
body .sf-main-content .domain-checker-available {
    background: #f0fdf4 !important;
    border: 1px solid #86efac !important;
    border-radius: 0.625rem !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
}
body .sf-main-content .domain-checker-unavailable {
    background: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    border-radius: 0.625rem !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 0.75rem !important;
}

/* Suggested domains list */
body .sf-main-content ul.domain-lookup-result {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
body .sf-main-content .domain-suggestion {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 0.5rem !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}
body .sf-main-content .domain-suggestion:hover {
    border-color: #b91c1c !important;
    box-shadow: 0 2px 8px rgba(185,28,28,0.08) !important;
}
body .sf-main-content .domain-suggestion .content .domain {
    font-weight: 700 !important;
    color: #0f172a !important;
}
body .sf-main-content .domain-suggestion .content .extension {
    color: #b91c1c !important;
    font-weight: 600 !important;
}

/* Section title above TLD pricing */
body .sf-main-content .domain-pricing .section-title,
body .sf-main-content .domain-pricing h2 {
    color: #0f172a !important;
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
}

/* TLD toolbar (filter + search) */
body .sf-main-content .tld-toolbar {
    display: flex !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
    flex-wrap: wrap !important;
}
body .sf-main-content .tld-toolbar .tld-categories,
body .sf-main-content .tld-toolbar .tld-search {
    flex: 1 1 240px !important;
}

/* =============================================
   DOMAIN REGISTER PAGE FIXES (from screenshot audit)
   ============================================= */

/* FIX 1: Register buttons in TLD table — solid red, prominent */
html body .sf-main-content .tld-register a,
html body .sf-main-content .tld-register .btn,
html body .sf-main-content a.btn-register-domain,
html body .sf-main-content .btn-register-domain,
html body .sf-main-content .btn-primary-faded.btn-register-domain,
html body .sf-main-content table .tld-register a {
    background: #b91c1c !important;
    color: #ffffff !important;
    border: 1px solid #b91c1c !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 1rem !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    min-width: 80px !important;
}
html body .sf-main-content .tld-register a:hover,
html body .sf-main-content .tld-register .btn:hover,
html body .sf-main-content a.btn-register-domain:hover,
html body .sf-main-content .btn-register-domain:hover {
    background: #991b1b !important;
    border-color: #991b1b !important;
    color: #ffffff !important;
}

/* FIX 2: All (55) filter pill - proper React-style chip */
html body .sf-main-content #domain-filter,
html body .sf-main-content .tld-categories,
html body .sf-main-content .custom-multiselect {
    min-height: 40px !important;
}
html body .sf-main-content .ms-choice {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    background: #fff !important;
    padding: 0.5rem 0.875rem !important;
    height: 40px !important;
}
/* Selected items shown as pills */
html body .sf-main-content .ms-choice > span,
html body .sf-main-content .ms-choice .ms-tag {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    padding: 0.125rem 0.625rem !important;
    border-radius: 9999px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border: 1px solid #fecaca !important;
}

/* FIX 3: Promo box icons - hide empty placeholder boxes when SVG missing */
html body .sf-main-content .domain-promo-box .promo-box-icon:empty {
    display: none !important;
}
/* Or show a default icon if container has no SVG content */
html body .sf-main-content .domain-promo-box .promo-box-icon:not(:has(svg)):not(:has(i)) {
    display: none !important;
}

/* FIX 4: Promo boxes inline layout when icon missing */
html body .sf-main-content .domain-promo-box .promo-box-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
}
html body .sf-main-content .domain-promo-box .promo-box-header {
    flex: 1 !important;
}
html body .sf-main-content .domain-promo-box .promo-box-header h5 {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    margin: 0 0 0.25rem !important;
}
html body .sf-main-content .domain-promo-box .description {
    color: #64748b !important;
    font-size: 0.875rem !important;
    margin: 0 !important;
}
html body .sf-main-content .domain-promo-box .promo-description {
    color: #475569 !important;
    font-size: 0.875rem !important;
    margin: 0.5rem 0 1rem !important;
    line-height: 1.55 !important;
}
html body .sf-main-content .domain-promo-box .btn,
html body .sf-main-content .domain-promo-box a.btn {
    background: #b91c1c !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    display: inline-block !important;
    text-decoration: none !important;
}
html body .sf-main-content .domain-promo-box .btn:hover {
    background: #991b1b !important;
}

/* FIX 5: Domain search input field — clean, natural sizing */
html body .sf-main-content .search-box .domain-search-input .form-control,
html body .sf-main-content .search-box input[type=text] {
    height: 48px;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    font-size: 0.95rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
}
html body .sf-main-content .search-box .domain-search-input .form-control:focus,
html body .sf-main-content .search-box input[type=text]:focus {
    border-color: var(--sf-brand-600, #b91c1c);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
    outline: none;
}
html body .sf-main-content .search-box .domain-search-input {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    gap: 0.5rem;
}
html body .sf-main-content .search-box .domain-search-input .search-field {
    flex: 1;
    position: relative;
}
html body .sf-main-content .search-box .domain-search-input .search-field-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

/* FIX 6: TLD price text styling */
html body .sf-main-content .domain-pricing .table small,
html body .sf-main-content .tld-table small {
    color: #94a3b8 !important;
    font-size: 0.75rem !important;
    display: block !important;
    margin-top: 0.125rem !important;
}

/* TLD table responsive horizontal scroll */
html body .sf-main-content .tld-table.table-container,
html body .sf-main-content .domain-pricing .table-container {
    overflow-x: auto !important;
    border-radius: 0.5rem !important;
}

/* Show/Search controls above TLD table */
html body .sf-main-content .dataTables_length,
html body .sf-main-content .dataTables_filter {
    margin-bottom: 1rem !important;
    color: #475569 !important;
    font-size: 0.875rem !important;
}
html body .sf-main-content .dataTables_length select,
html body .sf-main-content .dataTables_filter input {
    height: 36px !important;
    padding: 0.375rem 0.625rem !important;
    margin: 0 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.375rem !important;
}

/* DataTable pagination */
html body .sf-main-content .dataTables_paginate .paginate_button {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.75rem !important;
    margin: 0 2px !important;
    color: #475569 !important;
    background: #fff !important;
    cursor: pointer !important;
}
html body .sf-main-content .dataTables_paginate .paginate_button.current,
html body .sf-main-content .dataTables_paginate .paginate_button.current:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}
html body .sf-main-content .dataTables_paginate .paginate_button:hover:not(.current) {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
}
html body .sf-main-content .dataTables_paginate .paginate_button.disabled {
    color: #cbd5e1 !important;
    cursor: not-allowed !important;
}

/* =============================================
   FIX: Hamburger toggle visible on desktop (should be mobile-only)
   ============================================= */

/* Default: visible (mobile) */
html body .sf-mobile-toggle {
    display: inline-flex !important;
}

/* Desktop (≥1024px): HIDDEN */
@media (min-width: 1024px) {
    html body .sf-mobile-toggle,
    html body .sf-header .sf-mobile-toggle,
    html body button.sf-mobile-toggle {
        display: none !important;
    }
}

/* Also hide mobile menu on desktop */
@media (min-width: 1024px) {
    html body .sf-mobile-menu {
        display: none !important;
    }
}

/* Mobile cart icon also hidden on desktop */
@media (min-width: 1024px) {
    html body .sf-mobile-right {
        display: none !important;
    }
}

/* Desktop nav visible only on desktop */
html body .sf-desktop-nav,
html body .sf-desktop-actions {
    display: none !important;
}
@media (min-width: 1024px) {
    html body .sf-desktop-nav {
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }
    html body .sf-desktop-actions {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
}

/* =============================================
   FIX: "Browse extensions by category" section layout
   ============================================= */

html body .sf-main-content .domain-pricing,
html body .sf-main-content .section.domain-pricing {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    padding: 1.5rem !important;
    margin: 1.5rem 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* Section header with title */
html body .sf-main-content .domain-pricing .section-header {
    margin-bottom: 1.25rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
html body .sf-main-content .domain-pricing .section-title,
html body .sf-main-content .domain-pricing h2.section-title {
    color: #0f172a !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
html body .sf-main-content .domain-pricing .section-title::before {
    content: "" !important;
    display: inline-block !important;
    width: 4px !important;
    height: 1.25rem !important;
    background: #b91c1c !important;
    border-radius: 2px !important;
}

/* TLD toolbar (filter + search bar) */
html body .sf-main-content .tld-toolbar {
    display: flex !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
html body .sf-main-content .tld-toolbar .tld-categories {
    flex: 0 0 auto !important;
    min-width: 200px !important;
    max-width: 320px !important;
}
html body .sf-main-content .tld-toolbar .tld-search,
html body .sf-main-content .tld-toolbar .search-group {
    flex: 1 !important;
    min-width: 200px !important;
}

/* The All (55) multi-select filter pill - proper styling */
html body .sf-main-content #domain-filter,
html body .sf-main-content select.custom-multiselect,
html body .sf-main-content .tld-categories select {
    height: 40px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    background: #fff !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    color: #334155 !important;
    width: 100% !important;
}

/* Multiselect dropdown wrapper (if rendered) */
html body .sf-main-content .ms-parent {
    display: block !important;
    width: 100% !important;
    min-height: 40px !important;
}
html body .sf-main-content .ms-choice {
    height: 40px !important;
    line-height: 40px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    background: #fff !important;
    padding: 0 1rem !important;
    color: #334155 !important;
    cursor: pointer !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
html body .sf-main-content .ms-choice > div.icon-caret {
    border-color: #94a3b8 transparent !important;
}
html body .sf-main-content .ms-drop {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.12) !important;
    margin-top: 4px !important;
    background: #fff !important;
    z-index: 100 !important;
}
html body .sf-main-content .ms-drop input[type=checkbox] {
    accent-color: #b91c1c !important;
    margin-right: 0.5rem !important;
}
html body .sf-main-content .ms-drop label {
    padding: 0.5rem 0.875rem !important;
    color: #334155 !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
html body .sf-main-content .ms-drop label:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

/* TLD search input */
html body .sf-main-content .tld-toolbar .search-field input,
html body .sf-main-content #table-search {
    height: 40px !important;
    padding: 0.5rem 0.875rem 0.5rem 2.5rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    background: #fff !important;
    font-size: 0.9rem !important;
    width: 100% !important;
}
html body .sf-main-content .tld-toolbar .search-field input:focus,
html body .sf-main-content #table-search:focus {
    border-color: #b91c1c !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(185,28,28,0.12) !important;
}
html body .sf-main-content .tld-toolbar .search-field-icon {
    position: absolute !important;
    left: 0.875rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
html body .sf-main-content .tld-toolbar .search-field {
    position: relative !important;
}

/* TLD table - cleaner layout */
html body .sf-main-content .domain-pricing .table,
html body .sf-main-content #tableDomainPricing {
    margin: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    width: 100% !important;
}
html body .sf-main-content #tableDomainPricing thead th {
    background: #f8fafc !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html body .sf-main-content #tableDomainPricing tbody td {
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    font-size: 0.875rem !important;
    vertical-align: middle !important;
}
html body .sf-main-content #tableDomainPricing tbody tr:hover {
    background: #f8fafc !important;
}
html body .sf-main-content .tld-name {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 0.95rem !important;
}

/* =============================================
   FIX: Add New Payment Method checkbox spacing
   ============================================= */

html body .sf-main-content input[type=checkbox] + label,
html body .sf-main-content label > input[type=checkbox],
html body .sf-main-content .checkbox label,
html body .sf-main-content .form-group input[type=checkbox] {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

html body .sf-main-content .checkbox,
html body .sf-main-content .checkbox-inline,
html body .sf-main-content .form-check {
    padding-left: 0 !important;
    margin: 0.5rem 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Payment method add new section */
html body .sf-main-content .payment-method-new,
html body .sf-main-content #savePaymentMethod,
html body .sf-main-content .add-new-payment-method {
    padding: 1rem !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    margin-top: 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

/* Generic "Add New Payment Method" checkbox row */
html body .sf-main-content label.checkbox-label,
html body .sf-main-content .checkbox-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    padding: 0.625rem 0.875rem !important;
    cursor: pointer !important;
    margin: 0.5rem 0 !important;
}
html body .sf-main-content label.checkbox-label input[type=checkbox],
html body .sf-main-content .checkbox-row input[type=checkbox] {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* =============================================
   FIX: Weird animation on Order button hover
   Remove transform/translate animations on nav items
   ============================================= */

html body .sf-client-nav a.sf-client-nav-order,
html body .sf-client-nav a.sf-client-nav-order:hover,
html body .sf-main-content .sf-client-nav-order,
html body .sf-main-content .sf-client-nav-order:hover {
    transform: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    animation: none !important;
}

html body .sf-client-nav a.sf-client-nav-link,
html body .sf-client-nav a.sf-client-nav-link:hover {
    transform: none !important;
    animation: none !important;
}

html body .sf-header a.sf-nav-link,
html body .sf-header a.sf-nav-link:hover,
html body .sf-header .sf-dropdown-toggle:hover {
    transform: none !important;
    animation: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

html body .sf-header a.sf-btn-primary,
html body .sf-header a.sf-btn-primary:hover,
html body .sf-header .sf-dropdown-toggle.sf-btn-primary,
html body .sf-header .sf-dropdown-toggle.sf-btn-primary:hover {
    transform: none !important;
    animation: none !important;
    transition: background 0.15s ease !important;
}

/* Specifically kill any scale/translate/rotate on nav items */
html body .sf-client-nav *,
html body .sf-header * {
    animation-play-state: paused !important;
}
html body .sf-client-nav a:hover,
html body .sf-client-nav a:active,
html body .sf-client-nav a:focus,
html body .sf-header a:hover,
html body .sf-header a:active,
html body .sf-header a:focus {
    transform: none !important;
}

/* Re-enable smooth transitions on color/bg only */
html body .sf-client-nav a,
html body .sf-header a {
    animation-play-state: running !important;
}


/* =============================================
   CART VIEW PAGE (cart.php?a=view)
   ============================================= */

/* Empty cart hero */
html body .cart-empty,
html body .empty-cart,
html body .viewcart-empty {
    text-align: center !important;
    padding: 3rem 1rem !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    margin: 1.5rem 0 !important;
}
html body .cart-empty h1,
html body .cart-empty h2,
html body .empty-cart h1,
html body .empty-cart h2 {
    color: #0f172a !important;
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
}
html body .cart-empty a,
html body .empty-cart a {
    background: #b91c1c !important;
    color: #ffffff !important;
    padding: 0.625rem 1.5rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-top: 0.5rem !important;
}

/* Order Summary panel */
html body .order-summary,
html body .panel-summary,
html body .panel.panel-summary {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
}
html body .order-summary .panel-heading,
html body .panel-summary .panel-heading {
    background: #0f172a !important;
    color: #fff !important;
    padding: 1rem 1.25rem !important;
    border-bottom: none !important;
}
html body .order-summary .panel-heading .panel-title,
html body .panel-summary .panel-heading .panel-title,
html body .order-summary .panel-heading h2,
html body .panel-summary .panel-heading h2 {
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
html body .order-summary .panel-body,
html body .panel-summary .panel-body { padding: 1.25rem !important; }

/* Subtotal/total rows */
html body .panel-summary .price-row,
html body .order-summary .price-row,
html body .panel-summary .summary-row {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0.625rem 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 0.9rem !important;
    color: #334155 !important;
}
html body .panel-summary .total-row,
html body .order-summary .total-due {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #b91c1c !important;
    padding: 0.875rem 0 !important;
    border-top: 2px solid #e2e8f0 !important;
}

/* Billing cycle toggle pill group */
html body .billing-cycle,
html body .cycle-tabs,
html body .nav-cycles {
    display: flex !important;
    gap: 0.25rem !important;
    background: #f1f5f9 !important;
    padding: 0.25rem !important;
    border-radius: 0.5rem !important;
    margin: 1rem 0 !important;
    flex-wrap: wrap !important;
}
html body .billing-cycle a,
html body .cycle-tabs a,
html body .nav-cycles a {
    flex: 1 1 auto !important;
    padding: 0.5rem 0.75rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0.375rem !important;
    color: #475569 !important;
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-align: center !important;
}
html body .billing-cycle a.active,
html body .cycle-tabs a.active,
html body .nav-cycles a.active {
    background: #ffffff !important;
    color: #b91c1c !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* TOS checkbox */
html body .order-checkbox {
    margin: 1rem 0 !important;
    padding: 1rem 1.25rem !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
}
html body .order-checkbox .checkbox label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    color: #334155 !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    cursor: pointer !important;
}
html body .order-checkbox .checkbox input[type=checkbox] {
    margin: 0.125rem 0 0 !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: #b91c1c !important;
    flex-shrink: 0 !important;
}
html body .order-checkbox .checkbox a {
    color: #b91c1c !important;
    font-weight: 600 !important;
}
html body .order-checkbox .alert-danger {
    margin-top: 0.5rem !important;
    background: #fef2f2 !important;
    border-left: 3px solid #dc2626 !important;
    color: #991b1b !important;
}

/* Checkout button */
html body .btn-checkout,
html body button.btn-checkout,
html body #checkout {
    background: #b91c1c !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 0.5rem !important;
    width: 100% !important;
    box-shadow: 0 4px 12px rgba(185,28,28,0.25) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}
html body .btn-checkout:hover,
html body #checkout:hover {
    background: #991b1b !important;
    box-shadow: 0 6px 16px rgba(185,28,28,0.3) !important;
}
html body .btn-checkout.disabled,
html body .btn-checkout[disabled],
html body #checkout.disabled,
html body #checkout[disabled] {
    background: #cbd5e1 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Mobile fixed bottom bar */
html body .order-summary-mob.is-fixed,
html body .order-summary-mob {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 0.75rem !important;
    z-index: 50 !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08) !important;
}
@media (min-width: 992px) {
    html body .order-summary-mob.is-fixed,
    html body .order-summary-mob { display: none !important; }
}

/* Promo code */
html body .promo-code,
html body .promo-code-input {
    margin: 1rem 0 !important;
    display: flex !important;
    gap: 0.5rem !important;
}
html body .promo-code input {
    flex: 1 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.875rem !important;
    height: 40px !important;
}
html body .promo-code button {
    background: #b91c1c !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    height: 40px !important;
}

/* Cart items table */
html body .cart-items-table,
html body .table.cart-table {
    background: #fff !important;
    border-radius: 0.625rem !important;
    overflow: hidden !important;
}

/* Estimate taxes link */
html body .estimate-taxes {
    color: #b91c1c !important;
    font-size: 0.825rem !important;
    text-decoration: underline !important;
    margin: 0.5rem 0 !important;
    display: inline-block !important;
}

/* Recommendations */
html body .product-recommendations { margin: 2rem 0 1rem !important; }
html body .product-recommendations h3,
html body .product-recommendations .recommendations-title {
    color: #0f172a !important;
    font-size: 1.125rem !important;
    margin-bottom: 1rem !important;
}

body .sf-main-content .color_white{
    color:#ffffff !important;
}

/* =============================================
   GLOBAL LAYOUT — consistent left/right AND top/bottom padding on every page
   Wraps all content (headers, main, sections, panels) to the same gutters.
   Header + body + footer all align perfectly at the same left/right edges.
   ============================================= */
/* ONE ironclad rule for ALL .sf-container — anywhere on the page.
   Header nav, top strip, client nav, main body, footer grid — identical. */
html body .sf-container,
html body nav.sf-container,
html body .sf-top-strip > .sf-container,
html body .sf-header > .sf-container,
html body .sf-header nav.sf-container,
html body .sf-client-nav > .sf-container,
html body .sf-main-content > .sf-container,
html body .sf-footer > .sf-container {
    width: 100% !important;
    max-width: 80rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
}
@media (min-width: 640px) {
    html body .sf-container,
    html body nav.sf-container,
    html body .sf-top-strip > .sf-container,
    html body .sf-header > .sf-container,
    html body .sf-header nav.sf-container,
    html body .sf-client-nav > .sf-container,
    html body .sf-main-content > .sf-container,
    html body .sf-footer > .sf-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}
@media (min-width: 1024px) {
    html body .sf-container,
    html body nav.sf-container,
    html body .sf-top-strip > .sf-container,
    html body .sf-header > .sf-container,
    html body .sf-header nav.sf-container,
    html body .sf-client-nav > .sf-container,
    html body .sf-main-content > .sf-container,
    html body .sf-footer > .sf-container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}


/* Top/bottom spacing for the main content area — same on every page */
html body .sf-main-content > .sf-container {
    /*padding-top: 1.5rem !important;*/
    padding-bottom: 2rem !important;
}
@media (min-width: 1024px) {
    html body .sf-main-content > .sf-container {
        /*padding-top: 2rem !important;*/
        padding-bottom: 3rem !important;
    }
}
/* Make sure the first/last child inside sf-container has no extra margin-top/bottom
   so the outer container gutters are consistent */
html body .sf-main-content > .sf-container > *:first-child { margin-top: 0 !important; }
html body .sf-main-content > .sf-container > *:last-child { margin-bottom: 0 !important; }

/* Custom full-width pages: first and last section hold the top/bottom rhythm */
html body .sf-main-content > .sf-fullwidth:first-child { margin-top: 0 !important; }
html body .sf-main-content > .sf-fullwidth:last-child { margin-bottom: 0 !important; }


:root {
    --sf-gutter-mobile: 1rem;   /* <640px */
    --sf-gutter-tablet: 1.5rem; /* 640-1023px */
    --sf-gutter-desktop: 2rem;  /* ≥1024px */
}
/* Override both existing .sf-container rules to a single source of truth */
html body .sf-container {
    width: 100% !important;
    max-width: 80rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--sf-gutter-mobile) !important;
    padding-right: var(--sf-gutter-mobile) !important;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    html body .sf-container {
        padding-left: var(--sf-gutter-tablet) !important;
        padding-right: var(--sf-gutter-tablet) !important;
    }
}
@media (min-width: 1024px) {
    html body .sf-container {
        padding-left: var(--sf-gutter-desktop) !important;
        padding-right: var(--sf-gutter-desktop) !important;
    }
}

/* Full-width section wrappers on custom pages — inner content uses the same gutters */
html body .sf-fullwidth .sf-section-inner,
html body .sf-fullwidth .sf-hero-inner,
html body .sf-section-inner,
html body .sf-hero-inner,
html body .sf-ultra-offer-inner {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sf-gutter-mobile);
    padding-right: var(--sf-gutter-mobile);
    box-sizing: border-box;

}
@media (min-width: 640px) {
    html body .sf-section-inner,
    html body .sf-hero-inner,
    html body .sf-ultra-offer-inner {
        padding-left: var(--sf-gutter-tablet);
        padding-right: var(--sf-gutter-tablet);
    }
}
@media (min-width: 1024px) {
    html body .sf-section-inner,
    html body .sf-hero-inner,
    html body .sf-ultra-offer-inner {
        /*padding-left: var(--sf-gutter-desktop);*/
        /*padding-right: var(--sf-gutter-desktop);*/
            padding-left: 2rem !important; 
     padding-right: 2rem !important;
    }
}

/* Header/footer/client-nav inner — same max-width and gutters 
html body .sf-header .sf-container,
html body .sf-top-strip .sf-container,
html body .sf-client-nav .sf-container,
html body .sf-footer .sf-container {
    max-width: 80rem;
    padding-left: var(--sf-gutter-mobile);
    padding-right: var(--sf-gutter-mobile);
}
@media (min-width: 640px) {
    html body .sf-header .sf-container,
    html body .sf-top-strip .sf-container,
    html body .sf-client-nav .sf-container,
    html body .sf-footer .sf-container {
        padding-left: var(--sf-gutter-tablet);
        padding-right: var(--sf-gutter-tablet);
    }
}
@media (min-width: 1024px) {
    html body .sf-header .sf-container,
    html body .sf-top-strip .sf-container,
    html body .sf-client-nav .sf-container,
    html body .sf-footer .sf-container {
        padding-left: var(--sf-gutter-desktop);
        padding-right: var(--sf-gutter-desktop);
    }
}

/* =============================================
   DASHBOARD — Register a New Domain panel (fix button cut-off + icons)
   ============================================= */
/* Ensure dashboard panels don't clip content horizontally */
.sf-main-content .panel,
.sf-main-content .panel .panel-body,
.sf-main-content .panel .panel-heading,
.sf-main-content .panel .panel-footer,
.sf-main-content .col-md-6 > .panel {
    overflow: visible !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* WHMCS Bootstrap-3 input-group on dashboard: converts from table-layout to flex */
.sf-main-content .panel-body .input-group,
.sf-main-content .panel-body form .input-group {
    display: flex !important;
    width: 100% !important;
    table-layout: auto !important;
    position: relative;
}
.sf-main-content .panel-body .input-group .form-control,
.sf-main-content .panel-body form input.form-control {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    height: 42px !important;
    border: 1px solid #cbd5e1 !important;
    border-right: none !important;
    border-radius: 0.375rem 0 0 0.375rem !important;
    padding: 0.5rem 0.875rem !important;
    box-sizing: border-box !important;
    background: #fff !important;
}
.sf-main-content .panel-body .input-group-btn,
.sf-main-content .panel-body .input-group-addon {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    position: static !important;
    white-space: nowrap !important;
}
.sf-main-content .panel-body .input-group-btn .btn,
.sf-main-content .panel-body .input-group-addon .btn,
.sf-main-content .panel-body form button,
.sf-main-content .panel-body form .btn,
.sf-main-content .panel-body form input[type="submit"],
.sf-main-content .panel-body form input[type="button"] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 0.5rem 1rem !important;
    height: 42px !important;
    min-width: auto !important;
    width: auto !important;
    border-radius: 0.375rem !important;
    background: var(--sf-brand-600, #b91c1c) !important;
    color: #fff !important;
    border: 1px solid var(--sf-brand-600, #b91c1c) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Inside an input-group the main button keeps the joined-right radius */
.sf-main-content .panel-body .input-group-btn .btn,
.sf-main-content .panel-body .input-group > .btn:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
/* Hover for all panel-body buttons — darker red, text stays white */
.sf-main-content .panel-body form button:hover,
.sf-main-content .panel-body form .btn:hover,
.sf-main-content .panel-body form input[type="submit"]:hover,
.sf-main-content .panel-body form input[type="button"]:hover {
    background: #991b1b !important;
    border-color: #991b1b !important;
    color: #fff !important;
    text-decoration: none !important;
}
/* Secondary/outline variant (if WHMCS marks Transfer with .btn-default or .btn-secondary) */
.sf-main-content .panel-body form .btn-default,
.sf-main-content .panel-body form .btn-secondary,
.sf-main-content .panel-body form button.btn-default,
.sf-main-content .panel-body form button.btn-secondary {
    background: #fff !important;
    color: var(--sf-brand-600, #b91c1c) !important;
    border: 1px solid var(--sf-brand-600, #b91c1c) !important;
}
.sf-main-content .panel-body form .btn-default:hover,
.sf-main-content .panel-body form .btn-secondary:hover {
    background: var(--sf-brand-600, #b91c1c) !important;
    color: #fff !important;
}
/* Space between adjacent buttons (e.g. Register / Transfer stacked or side-by-side) */
.sf-main-content .panel-body form .btn + .btn,
.sf-main-content .panel-body form button + button {
    margin-left: 0.5rem !important;
}
/* Anchor-style buttons in the dashboard panel ("Transfer" is often a link) */
.sf-main-content .panel-body a.btn {
    background: var(--sf-brand-600, #b91c1c) !important;
    color: #fff !important;
    border: 1px solid var(--sf-brand-600, #b91c1c) !important;
    padding: 0.5rem 1rem !important;
    height: 42px !important;
    border-radius: 0.375rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.sf-main-content .panel-body a.btn:hover {
    background: #991b1b !important;
    border-color: #991b1b !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* If the panel body has a plain form (no input-group), still split horizontally */
.sf-main-content .panel-body form:not(:has(.input-group)),
.sf-main-content .panel-body .form-inline {
    display: flex !important;
    gap: 0 !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

/* Absolute safeguard: anything inside dashboard panel-body should never be wider than container */
.sf-main-content .panel-body > * {
    max-width: 100% !important;
}

/* Font Awesome 4 → 5 compatibility — WHMCS sometimes outputs "fa fa-XX"
   which needs fas (solid) family to render in FA5+ */
.sf-main-content .panel-title .fa,
.sf-main-content .panel-title i.fa,
.sf-main-content .list-group-item .fa,
.sf-main-content i.fa:not(.fab):not(.far):not(.fas):not(.fal) {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important; /* solid style */
    font-style: normal;
    display: inline-block;
    margin-right: 0.375rem;
}
.sf-main-content .panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* =============================================
   INVOICE PAYMENT PAGE (/invoice/X/pay)
   Clean React-style layout: payment method form + order summary sidebar
   ============================================= */
.sf-main-content #frmPayment {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    align-items: flex-start !important;
}
.sf-main-content #frmPayment > .main-content {
    flex: 1 1 500px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
}
.sf-main-content #frmPayment .main-sidebar {
    flex: 0 0 340px !important;
    max-width: 100% !important;
    margin: 0 !important;
}
@media (max-width: 768px) {
    .sf-main-content #frmPayment > .main-content,
    .sf-main-content #frmPayment .main-sidebar {
        flex: 1 1 100% !important;
    }
}

/* Payment method section header */
.sf-main-content #frmPayment .section-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 1rem !important;
}

/* Payment form card (panel-form) */
.sf-main-content .cc-payment-form,
.sf-main-content #frmPayment .panel-form {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    padding: 1.5rem !important;
    margin: 0 !important;
}

/* Credit card items (saved cards radio list) */
.sf-main-content .cc-item {
    padding: 1rem 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.sf-main-content .cc-item:hover { border-color: #cbd5e1; background: #f8fafc; }
.sf-main-content .cc-item.active {
    border-color: var(--sf-brand-600, #b91c1c);
    background: #fef2f2;
    box-shadow: 0 0 0 1px var(--sf-brand-600, #b91c1c);
}

/* Form inputs on payment page */
.sf-main-content #frmPayment .form-control,
.sf-main-content #frmPayment input[type="text"],
.sf-main-content #frmPayment input[type="tel"],
.sf-main-content #frmPayment select {
    height: 42px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.375rem !important;
    padding: 0 0.875rem !important;
    font-size: 0.9375rem !important;
    background: #fff !important;
    box-shadow: none !important;
    width: 100% !important;
}
.sf-main-content #frmPayment .form-control:focus {
    border-color: var(--sf-brand-600, #b91c1c) !important;
    box-shadow: 0 0 0 3px rgba(185,28,28,0.12) !important;
    outline: none !important;
}
.sf-main-content #frmPayment label,
.sf-main-content #frmPayment .control-label {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 0.375rem !important;
    display: block !important;
}

/* SSL / security notice */
.sf-main-content .checkout-security-msg {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #14532d !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    margin: 1rem 0 !important;
}
.sf-main-content .checkout-security-msg .ls,
.sf-main-content .checkout-security-msg .lm { color: #15803d; font-size: 1.1rem; }

/* Submit button — primary pay now */
.sf-main-content #frmPayment #btnSubmit,
.sf-main-content #frmPayment button[type="submit"].btn-primary,
.sf-main-content #frmPayment .btn-primary.checkout-btn {
    width: 100% !important;
    background: var(--sf-brand-600, #b91c1c) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.875rem 1.5rem !important;
    min-height: 50px !important;
    border-radius: 0.5rem !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    box-shadow: 0 4px 12px rgba(185,28,28,0.25) !important;
    cursor: pointer !important;
    margin-top: 1rem !important;
}
.sf-main-content #frmPayment #btnSubmit:hover,
.sf-main-content #frmPayment button[type="submit"].btn-primary:hover {
    background: #991b1b !important;
    box-shadow: 0 6px 18px rgba(185,28,28,0.35) !important;
}

/* Order Summary sidebar card */
.sf-main-content #orderSummary,
.sf-main-content .order-summary {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
    margin: 0 !important;
}
.sf-main-content #orderSummary .panel-heading {
    background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%) !important;
    border-bottom: 1px solid #fecaca !important;
    padding: 1rem 1.25rem !important;
}
.sf-main-content #orderSummary .panel-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
}
.sf-main-content #orderSummary .panel-body {
    padding: 1rem 1.25rem !important;
}
.sf-main-content #orderSummary .summary-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 0.75rem !important;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.75rem !important;
}
.sf-main-content #orderSummary .summary-list:last-child {
    border-bottom: none;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.sf-main-content #orderSummary .summary-list .list-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 0.375rem 0 !important;
    font-size: 0.875rem !important;
}
.sf-main-content #orderSummary .item-name {
    color: #475569 !important;
    flex: 1 1 auto !important;
}
.sf-main-content #orderSummary .item-value {
    color: #0f172a !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}
/* Grand total row */
.sf-main-content #orderSummary .summary-list .list-item.total,
.sf-main-content #orderSummary .summary-total {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    padding-top: 0.75rem !important;
    border-top: 2px solid #e2e8f0 !important;
}
.sf-main-content #orderSummary .summary-total .item-value {
    font-size: 1.25rem !important;
    color: var(--sf-brand-600, #b91c1c) !important;
}

/* =============================================
   VIEW INVOICE — "Total Due" + "Pay Now" sidebar card
   Brand-styled summary card with prominent amount and CTA button
   ============================================= */
.sf-main-content .panel-view-invoice {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
    margin: 0 0 1rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.sf-main-content .panel-view-invoice .panel-body {
    padding: 1.25rem 1.25rem 1rem !important;
    background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%) !important;
    border-bottom: 1px solid #fecaca !important;
    margin: 0 !important;
}
.sf-main-content .panel-view-invoice .price {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sf-main-content .panel-view-invoice .price-title {
    font-size: 0.875rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
.sf-main-content .panel-view-invoice .price-amount {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: #b91c1c !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
}
.sf-main-content .panel-view-invoice .panel-footer {
    padding: 1.25rem 1.75rem 1.5rem !important;
    background: #fff !important;
    border-top: none !important;
}
.sf-main-content .panel-view-invoice .panel-footer label {
    display: block !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 0.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
.sf-main-content .panel-view-invoice .panel-footer .form-group {
    margin-bottom: 1rem !important;
}
.sf-main-content .panel-view-invoice select,
.sf-main-content .panel-view-invoice .form-control {
    height: 42px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.375rem !important;
    padding: 0 0.875rem !important;
    font-size: 0.9375rem !important;
    background: #fff !important;
    width: 100% !important;
    box-shadow: none !important;
}
.sf-main-content .panel-view-invoice .payment-btn-container,
.sf-main-content .panel-view-invoice .payment-form {
    margin-top: 0.5rem !important;
}
.sf-main-content .panel-view-invoice .payment-btn-container .btn,
.sf-main-content .panel-view-invoice .payment-btn-container input[type="submit"],
.sf-main-content .panel-view-invoice .payment-btn-container button[type="submit"],
.sf-main-content .panel-view-invoice .btn-primary,
.sf-main-content .panel-view-invoice .btn.btn-lg {
    width: 100% !important;
    background: var(--sf-brand-600, #b91c1c) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.875rem 1.5rem !important;
    height: auto !important;
    min-height: 48px !important;
    border-radius: 0.5rem !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.25) !important;
    transition: all 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.sf-main-content .panel-view-invoice .payment-btn-container .btn:hover,
.sf-main-content .panel-view-invoice .btn-primary:hover {
    background: #991b1b !important;
    box-shadow: 0 6px 18px rgba(185, 28, 28, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* "Apply Credit" sidebar — matching card style */
.sf-main-content .panel-add-funds {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
}
.sf-main-content .panel-add-funds .panel-heading {
    background: #f8fafc !important;
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.sf-main-content .panel-add-funds .panel-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
}
.sf-main-content .panel-add-funds .panel-body {
    padding: 1.25rem 1.5rem !important;
}
.sf-main-content .panel-add-funds .btn-primary-faded {
    width: 100% !important;
    background: #fef2f2 !important;
    color: var(--sf-brand-600, #b91c1c) !important;
    border: 1px solid #fecaca !important;
    padding: 0.625rem 1rem !important;
    height: auto !important;
    min-height: 42px !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
}
.sf-main-content .panel-add-funds .btn-primary-faded:hover {
    background: var(--sf-brand-600, #b91c1c) !important;
    color: #fff !important;
    border-color: var(--sf-brand-600, #b91c1c) !important;
}

/* =============================================
   STATUS LABELS — for invoice list, service list, ticket status, etc.
   Used as <span class="label label-success">Paid</span> etc.
   ============================================= */
.sf-main-content .label,
.sf-main-content .label-default,
.sf-main-content .label-primary,
.sf-main-content .label-success,
.sf-main-content .label-info,
.sf-main-content .label-warning,
.sf-main-content .label-danger,
.sf-main-content .label-purple,
.sf-main-content .label-lg {
    display: inline-block !important;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    border-radius: 0.375rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: 1px solid transparent !important;
}
.sf-main-content .label-default {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}
.sf-main-content .label-primary {
    background: #eff6ff !important;
    color: #1e40af !important;
    border-color: #bfdbfe !important;
}
.sf-main-content .label-success {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border-color: #bbf7d0 !important;
}
.sf-main-content .label-info {
    background: #f0f9ff !important;
    color: #0c4a6e !important;
    border-color: #bae6fd !important;
}
.sf-main-content .label-warning {
    background: #fffbeb !important;
    color: #b45309 !important;
    border-color: #fed7aa !important;
}
.sf-main-content .label-danger {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #fecaca !important;
}
.sf-main-content .label-purple {
    background: #faf5ff !important;
    color: #7e22ce !important;
    border-color: #e9d5ff !important;
}
.sf-main-content .label-lg {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
}

/* Invoice table status column padding */
.sf-main-content table td .label {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* View Invoice page — .invoice-status label (next to invoice title) */
html body .sf-main-content .invoice-status.label,
html body .sf-main-content .invoice-status.label-lg,
html body .sf-main-content span.invoice-status {
    display: inline-block !important;
    padding: 0.4rem 0.85rem !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border-radius: 0.375rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    vertical-align: middle !important;
    margin-left: 0.75rem !important;
    line-height: 1 !important;
    border: 1px solid transparent !important;
}
html body .sf-main-content .invoice-status.label-success {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border-color: #bbf7d0 !important;
}
html body .sf-main-content .invoice-status.label-danger {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #fecaca !important;
}
html body .sf-main-content .invoice-status.label-warning {
    background: #fffbeb !important;
    color: #b45309 !important;
    border-color: #fed7aa !important;
}
html body .sf-main-content .invoice-status.label-info {
    background: #f0f9ff !important;
    color: #0c4a6e !important;
    border-color: #bae6fd !important;
}
html body .sf-main-content .invoice-status.label-default {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

/* =============================================
   NAMESERVERS TAB — ensure custom NS input fields show when radio selected
   Bootstrap 3 uses .in, BS4+ uses .show — support both. Also support
   lagom2's data-virtual-input / data-input-collapse pattern.
   ============================================= */
/* Show collapsed panel-body when either .in (BS3) or .show (BS4+) is present */
.sf-main-content .panel-collapse.collapse.in,
.sf-main-content .panel-collapse.collapse.show {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
}
/* Lagom2 pattern — when a .panel-check is .checked, show its collapsed body */
.sf-main-content .panel-check.checked > .panel-collapse,
.sf-main-content .panel-check.checked > [data-input-collapse],
.sf-main-content .panel-check.checked [data-input-collapse] {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
}
/* When the radio inside a .panel-check is checked, show the sibling collapse */
.sf-main-content .panel-check:has(input[type="radio"]:checked) > .panel-collapse,
.sf-main-content .panel-check:has(input[type="radio"]:checked) [data-input-collapse] {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
}
/* Style the input rows inside the custom NS form */
.sf-main-content .panel-check .panel-collapse .panel-body {
    padding: 1rem 1.5rem 1.5rem;
}
.sf-main-content .panel-check .form-group + .form-group { margin-top: 0.75rem; }
.sf-main-content input.domnsinputs {
    height: 42px;
    padding: 0.5rem 0.875rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    width: 100%;
    font-size: 0.9375rem;
}
.sf-main-content input.domnsinputs:focus {
    outline: none;
    border-color: var(--sf-brand-600, #b91c1c);
    box-shadow: 0 0 0 3px rgba(185,28,28,0.12);
}

/* =============================================
   LAGOM ICON FALLBACK — replace missing lm/ls font icons with Font Awesome 5
   GLOBAL — applies across the entire theme (header/body/footer/modals)
   ============================================= */
i.lm::before, i.ls::before,
.lm::before, .ls::before,
[class*=" lm-"]::before, [class^="lm-"]::before,
[class*=" ls-"]::before, [class^="ls-"]::before {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    line-height: 1;
}
/* Common icon mappings lm-X / ls-X → FA5 unicode */
.lm-trash::before,   .ls-trash::before    { content: "\f1f8"; } /* trash */
.lm-check::before,   .ls-check::before    { content: "\f00c"; } /* check */
.lm-close::before,   .ls-close::before,
.lm-times::before,   .ls-times::before    { content: "\f00d"; } /* times/close */
.lm-edit::before,    .ls-edit::before     { content: "\f044"; } /* edit */
.lm-search::before,  .ls-search::before   { content: "\f002"; } /* search */
.lm-share::before,   .ls-share::before    { content: "\f14d"; } /* share-square */
.lm-user::before,    .ls-user::before     { content: "\f007"; } /* user */
.lm-shield::before,  .ls-shield::before   { content: "\f3ed"; } /* shield-alt */
.lm-download::before, .ls-download::before{ content: "\f019"; } /* download */
.lm-refresh::before, .ls-refresh::before  { content: "\f2f1"; } /* sync-alt */
.lm-box::before,     .ls-box::before,
.lm-cube::before,    .ls-cube::before     { content: "\f1b2"; } /* cube */
.lm-menu::before,    .ls-menu::before,
.lm-bars::before,    .ls-bars::before     { content: "\f0c9"; } /* bars/menu */
.lm-plus::before,    .ls-plus::before     { content: "\f067"; } /* plus */
.lm-minus::before,   .ls-minus::before    { content: "\f068"; } /* minus */
.lm-info-circle::before, .ls-info-circle::before { content: "\f05a"; }
.lm-exclamation-circle::before, .ls-exclamation-circle::before { content: "\f06a"; }
.lm-envelope::before, .ls-envelope::before { content: "\f0e0"; }
.lm-lock::before,    .ls-lock::before     { content: "\f023"; }
.lm-unlock::before,  .ls-unlock::before   { content: "\f09c"; }
.lm-cog::before,     .ls-cog::before      { content: "\f013"; } /* settings */
.lm-globe::before,   .ls-globe::before    { content: "\f0ac"; }
.lm-calendar::before, .ls-calendar::before { content: "\f073"; }
.lm-arrow-right::before, .ls-arrow-right::before { content: "\f061"; }
.lm-arrow-left::before, .ls-arrow-left::before { content: "\f060"; }
.lm-chevron-down::before, .ls-chevron-down::before { content: "\f078"; }
.lm-chevron-up::before, .ls-chevron-up::before { content: "\f077"; }
.lm-chevron-right::before, .ls-chevron-right::before { content: "\f054"; }
.lm-chevron-left::before, .ls-chevron-left::before { content: "\f053"; }
.lm-eye::before,     .ls-eye::before      { content: "\f06e"; }
.lm-eye-slash::before, .ls-eye-slash::before { content: "\f070"; }
.lm-star::before,    .ls-star::before     { content: "\f005"; }
.lm-heart::before,   .ls-heart::before    { content: "\f004"; }
.lm-copy::before,    .ls-copy::before     { content: "\f0c5"; }
.lm-file::before,    .ls-file::before     { content: "\f15b"; }
.lm-folder::before,  .ls-folder::before   { content: "\f07b"; }
.lm-home::before,    .ls-home::before     { content: "\f015"; }
.lm-credit-card::before, .ls-credit-card::before { content: "\f09d"; }
.lm-ticket::before,  .ls-ticket::before   { content: "\f3ff"; }
.lm-phone::before,   .ls-phone::before    { content: "\f095"; }
.lm-key::before,     .ls-key::before      { content: "\f084"; }
.lm-power::before,   .ls-power::before    { content: "\f011"; }
.lm-logout::before,  .ls-logout::before,
.lm-sign-out::before, .ls-sign-out::before { content: "\f2f5"; }
.lm-bookmark::before, .ls-bookmark::before { content: "\f02e"; }
.lm-bell::before,    .ls-bell::before     { content: "\f0f3"; }
.lm-list::before,    .ls-list::before     { content: "\f03a"; }
.lm-grid::before,    .ls-grid::before,
.lm-th::before,      .ls-th::before       { content: "\f009"; }

/* =============================================
   VIEW INVOICE — Top-right action buttons (Pay Now + Download)
   ============================================= */
.sf-main-content .sf-invoice-top-actions {
    float: right;
    display: inline-flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.sf-main-content .sf-invoice-pay-top,
.sf-main-content .sf-invoice-download-top {
    background: var(--sf-brand-600, #b91c1c) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    box-shadow: 0 2px 6px rgba(185, 28, 28, 0.2) !important;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
}
.sf-main-content .sf-invoice-pay-top:hover,
.sf-main-content .sf-invoice-download-top:hover {
    background: #991b1b !important;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(185, 28, 28, 0.3) !important;
}
/* Both Pay Now and Download use solid red background + white text */
.sf-main-content .sf-invoice-download-top {
    background: var(--sf-brand-600, #b91c1c) !important;
    color: #fff !important;
    border: 1px solid var(--sf-brand-600, #b91c1c) !important;
    box-shadow: 0 2px 6px rgba(185, 28, 28, 0.2) !important;
}
.sf-main-content .sf-invoice-download-top:hover {
    background: #991b1b !important;
    color: #fff !important;
    border-color: #991b1b !important;
    box-shadow: 0 4px 10px rgba(185, 28, 28, 0.3) !important;
}
.sf-main-content .sf-invoice-download-top svg {
    color: #fff !important;
    stroke: #fff !important;
}
.sf-main-content .sf-invoice-pay-top .ls,
.sf-main-content .sf-invoice-download-top .ls { display: none; }

/* =============================================
   SUPPORT TICKET FORM — fix Select2 + toolbar icons + attachments
   ============================================= */
/* Department / Related Service selects — ensure Select2 applies & looks right */
.sf-main-content #inputDepartment + .select2-container,
.sf-main-content #inputRelatedService + .select2-container,
.sf-main-content select[name="deptid"] + .select2-container,
.sf-main-content select[name="relatedservice"] + .select2-container {
    width: 100% !important;
}
.sf-main-content #inputDepartment + .select2-container .select2-selection--single,
.sf-main-content #inputRelatedService + .select2-container .select2-selection--single,
.sf-main-content select[name="deptid"] + .select2-container .select2-selection--single,
.sf-main-content select[name="relatedservice"] + .select2-container .select2-selection--single {
    height: 42px;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    background: #fff;
}
.sf-main-content .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
    padding: 0;
    color: #0f172a;
    font-size: 0.9375rem;
}
.sf-main-content .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

/* Markdown editor toolbar icons — replace missing lagom icons with Font Awesome
   where class names match common SimpleMDE/MDE patterns */
.sf-main-content .editor-toolbar a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 2px;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    color: #64748b !important;
    background: #fff;
    text-decoration: none;
}
.sf-main-content .editor-toolbar a:hover,
.sf-main-content .editor-toolbar a.active {
    background: #f1f5f9;
    color: #0f172a !important;
    border-color: #cbd5e1;
}
.sf-main-content .editor-toolbar a::before {
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 0.875rem;
}
.sf-main-content .editor-toolbar a.fa-bold::before,
.sf-main-content .editor-toolbar a.bold::before { content: "\f032"; }
.sf-main-content .editor-toolbar a.fa-italic::before,
.sf-main-content .editor-toolbar a.italic::before { content: "\f033"; }
.sf-main-content .editor-toolbar a.fa-link::before,
.sf-main-content .editor-toolbar a.link::before { content: "\f0c1"; }
.sf-main-content .editor-toolbar a.fa-image::before,
.sf-main-content .editor-toolbar a.image::before { content: "\f03e"; font-weight: 400; }
.sf-main-content .editor-toolbar a.fa-code::before,
.sf-main-content .editor-toolbar a.code::before { content: "\f121"; }
.sf-main-content .editor-toolbar a.fa-list-ul::before,
.sf-main-content .editor-toolbar a.unordered-list::before { content: "\f0ca"; }
.sf-main-content .editor-toolbar a.fa-list-ol::before,
.sf-main-content .editor-toolbar a.ordered-list::before { content: "\f0cb"; }
.sf-main-content .editor-toolbar a.fa-quote-right::before,
.sf-main-content .editor-toolbar a.quote::before { content: "\f10e"; }
.sf-main-content .editor-toolbar a.fa-eye::before,
.sf-main-content .editor-toolbar a.preview::before { content: "\f06e"; font-weight: 400; }
.sf-main-content .editor-toolbar a.fa-columns::before,
.sf-main-content .editor-toolbar a.side-by-side::before { content: "\f0db"; }
.sf-main-content .editor-toolbar a.fa-arrows-alt::before,
.sf-main-content .editor-toolbar a.fullscreen::before { content: "\f0b2"; }

/* Attachments / file input box */
.sf-main-content .attachments-row,
.sf-main-content .attachments .form-control[type="file"],
.sf-main-content input[type="file"].form-control {
    height: auto !important;
    min-height: 48px;
    padding: 0.75rem 1rem !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 0.5rem !important;
    background: #f8fafc !important;
    cursor: pointer;
    font-size: 0.9rem;
    color: #64748b;
}
.sf-main-content input[type="file"].form-control:hover {
    border-color: var(--sf-brand-600, #b91c1c) !important;
    background: #fff !important;
}
.sf-main-content .btn-add-attachment,
.sf-main-content .btn.add-attachment,
.sf-main-content button.addmore,
.sf-main-content button[name="addmore"] {
    background: var(--sf-brand-600, #b91c1c) !important;
    color: #fff !important;
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    border: none;
}

/* =============================================
   PRODUCT DETAILS PAGE — hide Disk Usage / Bandwidth Usage for now
   + remove redundant borders left behind
   ============================================= */
.sf-main-content #cPanelUsagePanel { display: none !important; }

/* When usage panel is hidden, the right column is empty — let the left column
   grow full width on large screens so there's no awkward empty space */
.sf-main-content #Overview .row > .col-md-6:only-child,
.sf-main-content #Overview .row > .col-md-6:has(#cPanelUsagePanel) { display: none; }
.sf-main-content #Overview .row > .col-md-6:first-child {
    width: 100%;
    float: none;
}

/* Remove the double-border on list-info-bordered — our new per-row border is
   already providing separation. The container border is redundant. */
.sf-main-content .list-info-bordered {
    border: none !important;
    border-radius: 0 !important;
}
.sf-main-content .list-info-bordered > li {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

/* Remove outer panel-default border inside tab panes — tab-pane already has
   its own padding + card look */
.sf-main-content .tab-content .tab-pane > .panel-default,
.sf-main-content #Overview > .panel-default {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Empty <ul> placeholder borders that sometimes show when there's no data */
.sf-main-content ul.list-info:empty {
    display: none;
}

/* =============================================
   PRODUCT DETAILS PAGE — Tab panes (Domain, Configurable Options, etc.)
   Add breathing room so text does not stick to panel borders
   ============================================= */
.sf-main-content #billingInfo,
.sf-main-content #domain,
.sf-main-content #configoptions,
.sf-main-content #metrics,
.sf-main-content #additionalinfo,
.sf-main-content #ssl-info {
    padding: 1.5rem 1.75rem !important;
}
.sf-main-content #domain .list-info,
.sf-main-content #configoptions .list-info,
.sf-main-content #billingInfo .list-info,
.sf-main-content #metrics .list-info,
.sf-main-content #additionalinfo .list-info {
    margin: 0;
    padding: 0;
}
.sf-main-content #domain .list-info > li,
.sf-main-content #configoptions .list-info > li,
.sf-main-content #billingInfo .list-info > li {
    padding: 0.75rem 0;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1px solid #e2e8f0;
}
.sf-main-content #domain .list-info > li:last-child,
.sf-main-content #configoptions .list-info > li:last-child,
.sf-main-content #billingInfo .list-info > li:last-child {
    border-bottom: none;
}
.sf-main-content #domain .list-info-title,
.sf-main-content #configoptions .list-info-title,
.sf-main-content #billingInfo .list-info-title {
    flex: 0 0 200px;
    font-weight: 600;
    color: #475569;
    font-size: 0.9rem;
}
.sf-main-content #domain .list-info-text,
.sf-main-content #configoptions .list-info-text,
.sf-main-content #billingInfo .list-info-text {
    flex: 1;
    color: #0f172a;
    font-size: 0.95rem;
    word-break: break-word;
}

/* SSL Status row — has image + status span as loose children, not in a
   .list-info-text wrapper. Group them into the "value" column. */
.sf-main-content #domain .list-info > li.align-center {
    align-items: center;
}
.sf-main-content #domain .list-info > li > img,
.sf-main-content #domain .list-info > li > #statusDisplayLabel,
.sf-main-content #domain .list-info > li > img + span {
    display: inline-flex;
    align-items: center;
    color: #0f172a;
    font-size: 0.95rem;
}
.sf-main-content #domain .list-info > li > img {
    margin-right: 0.5rem;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
/* SSL status li: title | icon + label grouped on the right */
.sf-main-content #domain .list-info > li.align-center .list-info-title {
    flex: 0 0 200px;
}
.sf-main-content #domain .list-info > li.align-center > *:not(.list-info-title) {
    /* collapse remaining elements so they flow together as the "value" */
    flex: 0 0 auto;
}
.sf-main-content #domain .list-info > li.align-center #statusDisplayLabel {
    flex: 1;
    margin-left: 0;
}
@media (max-width: 640px) {
    .sf-main-content #domain .list-info > li,
    .sf-main-content #configoptions .list-info > li,
    .sf-main-content #billingInfo .list-info > li {
        flex-direction: column;
        gap: 0.25rem;
    }
    .sf-main-content #domain .list-info-title,
    .sf-main-content #configoptions .list-info-title,
    .sf-main-content #billingInfo .list-info-title {
        flex: 0 0 auto;
    }
}

/* =============================================
   ADD PAYMENT METHOD PAGE (account-paymentmethods-manage.tpl)
   Add left space before each radio button
   ============================================= */
.sf-main-content #frmManagePaymentMethod .radio {
    padding-left: 1.25rem;
}
.sf-main-content #frmManagePaymentMethod .radio > label.radio-inline {
    padding-left: 0.25rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.sf-main-content #frmManagePaymentMethod .radio .icheck-control {
    margin-right: 0.5rem;
}

/* =============================================
   USER MANAGEMENT PAGE (account-user-management.tpl)
   - Invite button: push to right with left margin
   - User list: remove default bullet dots
   ============================================= */
.sf-main-content .section-header { gap: 1rem; }
.sf-main-content .invite-users-btn { margin-left: auto; }
.sf-main-content ul.user-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}
.sf-main-content ul.user-list > li.user-list-item { list-style: none !important; }
.sf-main-content ul.user-list > li.user-list-item::before { content: none !important; }

.sf-main-content a svg, .sf-main-content button svg {
    /* color: #ffffff !important; */ /* removed — was hiding SVG icons on white backgrounds */
}

/* =============================================
   HOMEPAGE — Additional sections (Shared features, Launch CTA, Brand pill)
   To match React design (EmailHosting.tsx + PlanComparison.tsx headers)
   ============================================= */

/* Brand pill badge — used by Email Hosting + Compare All Plans headers */
.sf-badge-brand-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.sf-badge-brand-pill svg {
    flex-shrink: 0;
}

/* Why Choose Shared Hosting — 4-column features grid */
.sf-shared-features {
    padding: 4rem 0;
    background: #ffffff;
}
.sf-shared-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) { .sf-shared-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sf-shared-grid { grid-template-columns: repeat(4, 1fr); } }
.sf-shared-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s;
}
.sf-shared-card:hover {
    border-color: #fca5a5;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.sf-shared-icon {
    width: 4rem;
    height: 4rem;
    background: #fee2e2;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.sf-shared-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
}
.sf-shared-desc {
    color: #475569;
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

/* Ready to Launch — centered CTA on slate background */
.sf-launch-cta {
    padding: 4rem 0;
    background: #f8fafc;
}
.sf-launch-inner {
    text-align: center;
}
.sf-launch-star {
    display: block;
    margin: 0 auto 1.5rem;
}
.sf-launch-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1rem;
    line-height: 1.2;
}
.sf-launch-desc {
    font-size: 1.25rem;        /* text-xl */
    color: #475569;            /* slate-600 */
    margin: 0 auto 2rem;       /* mb-8 */
    max-width: 36rem;          /* max-w-2xl */
}
.sf-launch-btn {
    display: inline-block;
    background: #b91c1c;
    color: #fff !important;
    padding: 1rem 3rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 10px 15px -3px rgba(185,28,28,0.25);
}
.sf-launch-btn:hover {
    background: #991b1b;
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 20px 25px -5px rgba(185,28,28,0.3);
}

/* =============================================
   SECTION-SPECIFIC TYPOGRAPHY OVERRIDES
   Keeps generic .sf-section-* defaults but matches React's per-section sizes
   ============================================= */

/* Email Hosting Plans uses h1 with text-5xl sm:text-6xl (bigger than generic) */
.sf-email-hosting .sf-section-title {
    font-size: 3rem;           /* text-5xl */
    margin-bottom: 1.5rem;     /* mb-6 */
}
@media (min-width: 640px) {
    .sf-email-hosting .sf-section-title { font-size: 3.75rem; }   /* sm:text-6xl */
}
@media (min-width: 1024px) {
    .sf-email-hosting .sf-section-title { font-size: 3.75rem !important; }
}

/* Why Choose Shared Hosting + Compare All Plans use mb-4 (not mb-6) */
.sf-shared-features .sf-section-title,
.sf-comparison .sf-section-title {
    margin-bottom: 1rem;       /* mb-4 */
}

/* Trust / Testimonials subtitle is text-lg (1.125rem) not text-xl */
.sf-trust .sf-section-subtitle {
    font-size: 1.125rem;       /* text-lg */
    max-width: 42rem;          /* max-w-2xl */
}
.sf-trust .sf-section-title {
    margin-bottom: 1.5rem;     /* mb-6 */
}

/* Why Choose Shared subtitle: max-w-2xl */
.sf-shared-features .sf-section-subtitle {
    max-width: 42rem;          /* max-w-2xl */
}
/* Compare All Plans subtitle: max-w-2xl */
.sf-comparison .sf-section-subtitle {
    max-width: 42rem;          /* max-w-2xl */
}

/* Section header inside trust uses mb-16 (4rem) */
.sf-trust .sf-section-header,
.sf-comparison .sf-section-header,
.sf-pricing .sf-section-header {
    margin-bottom: 3rem;
}

.text_algin_center{
    text-align: center;        font-size: 2.25rem !important;
}

.panel-choose-domain .panel-body.panel-domain-search .dropdown-menu .dropdown-menu-item a {
    color: #0f172a !important;
}
.small_btn{
    width: 31%;
}
.domain-promo-box{
    width: 100%;
}

.d-flex {
    display: flex !important;
    justify-content: space-between;
}

.panel-primary>.panel-heading{
    color: #000000 !important;
}


/*added for top clasic strip*/
.sf-top-strip-classic{
    background-color: #b91c1c;
    color: #ffffff;
        position: sticky;
    top: 0px;
    z-index: 50;

}
.sf-top-strip-classic .sf-top-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 14px;
}

.sf-top-strip-classic .sf-old-version-link {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.sf-top-strip-classic .sf-old-version-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/*end here*/


.margin_both_side{
        margin-left: 2rem !important;
    margin-right: 2rem !important;
}

/* ============================================================================
   RESPONSIVE SAFETY LAYER  —  added 2026-05-22
   Keeps the homepage, hosting pages and every header/footer-linked page free of
   horizontal overflow on phones and tablets. Rules are universally safe or
   scoped to max-width media queries, so the desktop layout is unchanged.
   ============================================================================ */

/* Media never overflows its container */
img { max-width: 100%; height: auto; }

/* Tablet and below */
@media (max-width: 768px) {
    /* Wide tables (invoices, comparison grids, knowledgebase, etc.) scroll
       horizontally instead of stretching the page wider than the viewport. */
    .sf-main-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Homepage hero domain search: the TLD picker drops below the text input
       so neither element is squeezed on a narrow screen. */
    .sf-hero-domain-row { flex-wrap: wrap; }
    .sf-hero-domain-row .select2-container { width: 100% !important; flex: 1 1 100%; }
    .sf-hero-tld-select { width: 100%; }

    /* Long centred subtitles must wrap rather than force horizontal scroll. */
    .sf-section-subtitle { white-space: normal !important; }

    /* The margin_both_side wrapper (contact / privacy / terms pages) keeps a
       smaller gutter on small screens. */
    .margin_both_side { margin-left: 1rem !important; margin-right: 1rem !important; }

    /* ---- Homepage hero banner ---- */
    .sf-hero {
        /* 'fixed' background attachment is janky / unsupported on mobile
           browsers (notably iOS Safari) — switch to normal scrolling. */
        background-attachment: scroll;
        /* Don't force the banner to a full viewport height; let it size to
           its stacked content so there is no awkward empty space. */
        min-height: auto;
        padding: 2rem 0;
    }
    /* The two stacked panels share a comfortable, even inner padding. */
    .sf-hero-left,
    .sf-hero-right { padding: 1.75rem 1.5rem; }

    /* "Choose Plan" hero button: the .small_btn class pins it to width:31%,
       which leaves a tiny button on the stacked mobile banner. Force it to
       span the full panel width. The double-class selector outranks
       `.small_btn` so the width override always wins. */
    .sf-hero-cta-btn,
    .sf-hero-cta-btn.small_btn {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}

/* Phone */
@media (max-width: 480px) {
    /* Top strips wrap their links instead of clipping them. */
    .sf-top-strip-classic .sf-top-strip-inner { white-space: normal; text-align: center; }
    .sf-top-strip .sf-top-strip-inner { flex-wrap: wrap; justify-content: center; }

    /* ---- Homepage hero banner — tighten for small phones ---- */
    .sf-hero { padding: 1.5rem 0; }
    .sf-hero-left,
    .sf-hero-right { padding: 1.5rem 1.25rem; }
    /* Headline and price scale down so they never crowd a 320px screen. */
    .sf-hero-title { font-size: 1.6rem; }
    .sf-hero-price-amount { font-size: 2.25rem; }
    .sf-hero-tagline { font-size: 1.05rem; }
    .sf-hero-guarantee { font-size: 1rem; }
    /* The domain panel title carries an inline 25px size — override it so the
       heading fits without overflowing its pill background. */
    .sf-hero-domain-title { font-size: 1.05rem !important; padding: 0.6rem 1rem; }
}

/* =====================================================================
   Checkout (order form) — social sign-in alignment + a compact pass.

   The order form emits .social-signin-btns and .login-divider, and this
   theme had rules for NEITHER — only .sf-login-divider, which nothing on
   this page uses. That is why the Google button sat hard against the left
   edge and "Or" rendered as two bare characters in the corner rather than
   as a divider.
   ===================================================================== */

/* ----- social sign-in ----- */

.social-login .social-signin-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 10px 0;
}

/* The provider markup is WHMCS's, so this styles whatever it renders rather
   than assuming a class of our own. A comfortable minimum keeps a lone
   Google button from looking like a stray chip. */
.social-login .social-signin-btns > * {
    min-width: 260px;
    max-width: 100%;
}

.social-login .social-signin-btns a,
.social-login .social-signin-btns button {
    width: 100%;
    justify-content: center;
}

/* A real rule: line, word, line. It was inheriting nothing at all. */
.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    color: #9ca3af;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.login-divider span:first-child,
.login-divider span:last-child {
    flex: 1 1 auto;
    height: 1px;
    background: #e5e7eb;
}

.login-divider span:nth-child(2) { flex: 0 0 auto; }

/* The "save time by signing up…" line sat as far from its button as the
   button did from the heading. It belongs to the button. */
.social-login p.small { margin: 0 0 8px; }

/* ----- compact pass -----
   The form ran to roughly three screens, most of it air. Nothing is hidden
   or removed here; the padding between things is simply smaller, which is
   what a checkout with fifteen fields needs to stay readable. */

.main-content .section { margin-bottom: 18px; }

.main-content .section-header { padding-bottom: 6px; margin-bottom: 10px; }

.main-content .section-title {
    font-size: 1.05rem;
    margin: 0;
}

.main-content .form-group { margin-bottom: 12px; }

.main-content .control-label {
    margin-bottom: 3px;
    font-size: 0.84rem;
}

/* Payment methods were two tall cards for two words of text. */
.main-content .panel-check .panel-heading { padding: 9px 12px; }
.main-content .panel-group-condensed .panel { margin-bottom: 8px; }

/* The marketing-opt-in and secure-environment notices are one line each and
   were boxed like sections. */
.main-content .section-body > .alert,
.main-content .alert-notice { padding: 9px 12px; margin-bottom: 10px; }

@media (min-width: 992px) {
    /* Two columns hold the whole billing form above the fold on a laptop,
       which is the screen this is actually bought on. */
    .main-content .section-body { padding: 12px 14px; }
}

/* ----- order form: stop the address grid stranding fields -----
   These rows are Bootstrap 3 floats. A floated column only clears the one
   above it, so the moment two columns differ in height — City and Country
   carry selects, Address carries a plain input — the next pair snags and
   wraps early. That is why Country sat alone on a row with an empty half
   beside it, and where most of the page's dead space came from.

   Flex lets them pack: same markup, no floats, no snagging. Scoped to the
   signup block so the cart's own panels are left alone. */
#containerNewUserSignup .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

#containerNewUserSignup .row > [class*="col-"] { float: none; }

/* ----- and tighten what is left ----- */
#containerNewUserSignup .form-group { margin-bottom: 10px; }

#containerNewUserSignup .control-label,
#containerNewUserSignup label {
    margin-bottom: 2px;
    font-size: 0.84rem;
}

#containerNewUserSignup .form-control { height: auto; padding: 6px 10px; }

/* The section headings carried a two-line top margin each. */
#containerNewUserSignup h6 {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

#containerNewUserSignup h6:first-child { margin-top: 0; }

/* The phone hint reserved a line whether or not it had anything to say. */
#inputPhoneHint:empty { display: none; }

/* =====================================================================
   Card form — inline field errors.

   The markup already carries a <span class="field-error-msg"> under each
   field, and WHMCS's script reveals it with
       .parents('.form-group').addClass('has-error')
       .find('.field-error-msg').show()
   ...but this theme never defined the class, so every message rendered as
   permanent grey helper text. That is why "The card number you entered does
   not appear to be valid" sat under an empty, untouched field.

   Hidden by default is the whole fix: .show() writes an inline display, which
   beats this rule, so the message appears exactly when the script says a field
   is wrong and not before.
   ===================================================================== */

.field-error-msg { display: none; }

.has-error .field-error-msg {
    color: #dc3545;
    font-size: 0.84rem;
    line-height: 1.35;
    margin-top: 4px;
}

/* The field itself should say so too — a red line under a box the customer has
   to find is less use than a red box. */
.has-error .form-control,
.has-error .form-control:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.10);
}

.has-error .control-label { color: #dc3545; }

/* The CVV row put its "Where do I find this?" button between the input and its
   error, which read as though the button were what was wrong. */
#cvvWhereLink { padding-left: 0; }

/* ----- card form: line the fields up with their heading -----
   "Enter New Card Information Below" is an <h5> sitting directly in
   .panel-body, while every field lives inside .tab-content, which carries its
   own padding. So the heading started at one edge and the whole form at
   another, about 20px to its right — including "Billing Address" and the CVV
   block. Dropping that padding puts them on one line. */
.panel-body > .tab-content,
.panel-body > .tab-content > .tab-pane,
#newCardInfoTab > .fieldgroup-creditcard {
    padding-left: 0;
    padding-right: 0;
}

/* Bootstrap's own gutter, restated in case a reset removed it — without the
   negative margin the first column is indented by its own padding and the
   alignment above is undone. */
#newCardInfoTab .row {
    margin-left: -15px;
    margin-right: -15px;
}

/* "Where do I find this?" sat flush against the CVV box, reading as part of
   it. It now follows the error message, so it needs to stand clear of both. */
#cvvWhereLink {
    display: inline-block;
    margin-top: 10px;
    padding-left: 0;
}

/* ----- checkout: payment methods as a row of cards -----
   They were full-width stacked panels, one per gateway, each a tall box for
   two words — the same shape the account chooser had before it became cards.
   This makes them read as one set of options rather than a list of sections,
   and gets the whole choice onto one line.

   Grid with auto-fit so it works for two gateways or six without counting. */
#paymentGatewaysDetails .panel-group-condensed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

#paymentGatewaysDetails .panel-group-condensed > .panel {
    margin: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#paymentGatewaysDetails .panel-group-condensed > .panel:hover {
    border-color: #cbd5e1;
}

/* The chosen one, marked the way the account cards are. */
#paymentGatewaysDetails .panel-group-condensed > .panel.checked {
    border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.10);
}

#paymentGatewaysDetails .panel-group-condensed > .panel .panel-heading {
    padding: 0.85rem 1rem;
}

/* The label filled only part of the box, so clicking the rest of the card did
   nothing — it looked selectable and was not. */
#paymentGatewaysDetails .panel-group-condensed > .panel label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    cursor: pointer;
}

@media (max-width: 575px) {
    #paymentGatewaysDetails .panel-group-condensed { grid-template-columns: 1fr; }
}

/* The emailed-password notice, gone for good.
   #passwdFeedback is where WHMCS writes "a secure password will be emailed to
   you once your order is placed". No password is emailed any more, so the
   sentence is simply untrue and has to go.

   Hidden outright, not just when empty. :empty relied on the script having
   already cleared it, which lost to WHMCS re-filling it on its own schedule —
   so the notice kept coming back above the password fields. A stylesheet
   !important cannot be undone by whatever writes into the element.

   The trade: if WHMCS ever puts a genuine message here it will not be seen.
   Password strength and mismatch are reported by their own controls beside the
   fields, so this box has nothing else to say. */
#passwdFeedback { display: none !important; }

/* ----- keep both password fields on screen -----
   WHMCS hides #containerNewUserSecurity / #containerPassword with jQuery
   .hide(), which writes an inline display:none. A script fighting that has to
   win a timing race it loses every time the form is re-evaluated — switching
   account tabs hid them again. A stylesheet !important beats a non-important
   inline style outright, so this settles it without racing anything.

   Safe to force: both live inside the "create a new account" panel, and that
   panel's own show/hide is what decides whether a customer sees this section at
   all. These rules only stop WHMCS suppressing the fields WITHIN it.

   The id beats Bootstrap's .hidden (0,1,0) on specificity, so a class added at
   runtime cannot re-hide them either. */
#containerNewUserSecurity,
#containerPassword {
    display: block !important;
}

#containerPassword .form-group,
#containerPassword .password-content {
    display: block !important;
}

#inputNewPassword1,
#inputNewPassword2 {
    display: block !important;
    width: 100%;
}

/* ---- a reseller's customer: clearance under the sticky header ----------
 * Their Dashboard / My Services / Invoices / Support links live in the main
 * nav, so the sf-client-nav strip is suppressed for them (header.tpl). That
 * strip was also the only thing between the sticky header and the first line
 * of the page, so without this the "Welcome back" heading sits against it.
 * Scoped to the class header.tpl adds only for that visitor — every other
 * user still gets the strip, and this rule never applies to them.
 */
.sf-container.sfr-client-page { padding-top: 1.75rem; }
@media (max-width: 640px) {
    .sf-container.sfr-client-page { padding-top: 1.25rem; }
}

/* ---- account dropdown: reach the bottom of the menu --------------------
 * .sf-dropdown-menu is `overflow: hidden` with no height limit. That is fine
 * for a short menu — it clips the item hover backgrounds to the rounded
 * corners — but the account menu grows with whatever WHMCS puts in
 * secondaryNavbar, and Logout is the LAST item in it. Once the menu is taller
 * than the viewport that last item cannot be reached at all: the menu itself
 * cannot scroll, and the page cannot scroll it into view either, because it is
 * absolutely positioned inside a position:sticky header.
 *
 * A height cap plus vertical scrolling fixes it. overflow-x stays hidden so the
 * corner clipping this rule replaced is preserved; only the vertical axis
 * changes, and only once the menu is actually too tall — a short menu is
 * unaffected, so nothing moves for anyone whose menu already fitted.
 */
.sf-dropdown-menu {
    max-height: calc(100vh - 8rem);
    overflow-x: hidden;
    overflow-y: auto;
    /* Don't hand the scroll to the page behind once the menu hits its end. */
    overscroll-behavior: contain;
}