/* ==========================================
SYMES SOLUTIONS WHMCS MAIN TEMPLATE CSS
Clean consolidated file for:
/templates/symes/css/custom.css

Purpose:
- Header / navigation / footer
- Main WHMCS client-area wrapper
- Homepage portal sections
- Announcements
- Knowledgebase
- Downloads
- Login / register / password reset
- Contact
- Support / tickets / client area panels

Do NOT place store/cart/product/orderform rules here.
Order form styling belongs in:
/templates/orderforms/standard_cart/css/custom.css
========================================== */

/* ==========================================
DESIGN TOKENS
========================================== */

:root{
--symes-primary:#EC008C;
--symes-primary-hover:#d90078;
--symes-secondary:#050505;
--symes-dark:#171717;
--symes-text:#111827;
--symes-muted:#6B7280;
--symes-bg:#F9FAFB;
--symes-page:#ececec;
--symes-white:#ffffff;
--symes-border:#E5E7EB;
--symes-border-strong:#D1D5DB;
--symes-success:#22C55E;
--symes-warning:#F59E0B;
--symes-danger:#EF4444;
--symes-radius-sm:12px;
--symes-radius-md:18px;
--symes-radius-lg:24px;
--symes-shadow-sm:0 8px 22px rgba(0,0,0,.08);
--symes-shadow-md:0 12px 34px rgba(0,0,0,.10);
--symes-shadow-lg:0 18px 48px rgba(0,0,0,.12);
}

/* ==========================================
GLOBAL BASE / PAGE HEIGHT
========================================== */

html{
min-height:100%!important;
background:#050505!important;
}

body,
body.primary-bg-color,
body.bg-primary{
min-height:100vh!important;
background:#050505!important;
font-family:Arial,Helvetica,sans-serif!important;
color:var(--symes-text)!important;
font-size:14px;
line-height:1.6;
overflow-x:hidden;
display:flex!important;
flex-direction:column!important;
}

body > header#header{
flex:0 0 auto!important;
}

body > section#main-body{
flex:1 0 auto!important;
}

body > footer.footer,
body > footer#footer,
body > .footer,
body > footer{
flex:0 0 auto!important;
}

a{
color:var(--symes-primary);
transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}

a:hover,
a:focus{
color:var(--symes-primary-hover);
text-decoration:none;
}

.container{
max-width:1200px;
}

/* Main body */
section#main-body,
#main-body{
background:var(--symes-bg)!important;
padding:38px 0 50px!important;
min-height:calc(100vh - 310px)!important;
}

.clearfix{
clear:both;
}

/* ==========================================
HEADER / NAVIGATION
========================================== */

header#header{
background:linear-gradient(90deg,#050505,#151515)!important;
border-bottom:2px solid var(--symes-primary)!important;
box-shadow:none!important;
}

header#header .navbar,
header#header .main-navbar-wrapper,
header#header .navbar-main{
background:transparent!important;
border:0!important;
box-shadow:none!important;
}

.logo-img,
header#header img.logo-img,
header#header .logo img{
max-height:72px!important;
width:auto!important;
}

header#header .navbar-nav>li>a,
header#header a.dropdown-toggle,
header#header .navbar-main .navbar-nav>li>a,
header#header .nav-link{
color:#fff!important;
font-weight:700!important;
font-size:13px!important;
letter-spacing:.01em;
}

header#header .navbar-nav>li>a:hover,
header#header .navbar-nav>li>a:focus,
header#header a.dropdown-toggle:hover,
header#header a.dropdown-toggle:focus,
header#header .nav-link:hover,
header#header .nav-link:focus{
color:var(--symes-primary)!important;
}

header#header .dropdown-menu{
border:1px solid var(--symes-border)!important;
border-radius:14px!important;
box-shadow:var(--symes-shadow-md)!important;
overflow:hidden!important;
}

header#header .dropdown-menu>li>a,
header#header .dropdown-menu a,
header#header .dropdown-item{
color:var(--symes-text)!important;
font-weight:600!important;
}

header#header .dropdown-menu>li>a:hover,
header#header .dropdown-menu a:hover,
header#header .dropdown-item:hover{
background:#fff1fa!important;
color:var(--symes-primary)!important;
}

header#header .form-control{
border-radius:4px!important;
border:1px solid var(--symes-border)!important;
box-shadow:none!important;
}

header#header .form-control:focus{
border-color:var(--symes-primary)!important;
box-shadow:0 0 0 .16rem rgba(236,0,140,.14)!important;
}

/* Header cart */
html body header#header a.cart-btn,
html body header#header a[href*="cart.php"].cart-btn{
background:transparent!important;
border:1px solid #fff!important;
color:#fff!important;
}

html body header#header a.cart-btn i,
html body header#header a.cart-btn .fa,
html body header#header a.cart-btn .fas,
html body header#header a[href*="cart.php"].cart-btn i,
html body header#header a[href*="cart.php"].cart-btn .fa,
html body header#header a[href*="cart.php"].cart-btn .fas,
html body header#header a.cart-btn .fa-shopping-cart{
color:#fff!important;
}

html body header#header #cartItemCount,
html body header#header a.cart-btn #cartItemCount,
html body header#header .cart-btn .badge-info,
html body header#header .cart-btn .badge.badge-info{
background:var(--symes-primary)!important;
background-color:var(--symes-primary)!important;
border:1px solid var(--symes-primary)!important;
color:#fff!important;
box-shadow:none!important;
}

html body header#header a.cart-btn:hover,
html body header#header a.cart-btn:focus,
html body header#header a[href*="cart.php"].cart-btn:hover,
html body header#header a[href*="cart.php"].cart-btn:focus{
background:transparent!important;
border-color:var(--symes-primary)!important;
color:var(--symes-primary)!important;
}

html body header#header a.cart-btn:hover i,
html body header#header a.cart-btn:focus i,
html body header#header a.cart-btn:hover .fa,
html body header#header a.cart-btn:focus .fa,
html body header#header a.cart-btn:hover .fas,
html body header#header a.cart-btn:focus .fas{
color:var(--symes-primary)!important;
}

/* Breadcrumb strip */
.master-breadcrumb{
background:#f4f4f4!important;
border-bottom:1px solid #ddd!important;
padding:8px 0!important;
font-size:13px!important;
}

/* ==========================================
MAIN TYPOGRAPHY
========================================== */

section#main-body .primary-content,
.primary-content{
color:var(--symes-text)!important;
}

section#main-body .primary-content h1,
section#main-body .primary-content h2,
section#main-body .primary-content h3,
section#main-body .primary-content h4,
section#main-body .primary-content h5,
section#main-body .primary-content h6,
.primary-content h1,
.primary-content h2,
.primary-content h3,
.primary-content h4,
.primary-content h5,
.primary-content h6,
.header-lined h1,
h1.font-size-36{
color:var(--symes-text)!important;
font-weight:900!important;
letter-spacing:.01em!important;
}

section#main-body .primary-content .text-muted,
.primary-content .text-muted{
color:var(--symes-muted)!important;
}

.header-lined,
.header-lined h1{
border:0!important;
}

/* ==========================================
BUTTONS
========================================== */

.btn-primary,
button.btn-primary,
input.btn-primary,
a.btn-primary,
section#main-body .btn-primary,
section#main-body button.btn-primary,
section#main-body input.btn-primary,
section#main-body a.btn-primary,
.primary-content .btn-primary{
background:var(--symes-primary)!important;
border-color:var(--symes-primary)!important;
color:#fff!important;
border-radius:999px!important;
font-weight:900!important;
padding:10px 24px!important;
box-shadow:none!important;
line-height:1.25!important;
}

.btn-primary:hover,
.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus,
input.btn-primary:hover,
input.btn-primary:focus,
a.btn-primary:hover,
a.btn-primary:focus,
section#main-body .btn-primary:hover,
section#main-body .btn-primary:focus,
.primary-content .btn-primary:hover,
.primary-content .btn-primary:focus{
background:var(--symes-primary-hover)!important;
border-color:var(--symes-primary-hover)!important;
color:#fff!important;
transform:translateY(-2px);
box-shadow:0 8px 22px rgba(236,0,140,.25)!important;
}

.btn-default,
.btn-secondary,
.primary-content .btn-default,
.primary-content .btn-secondary,
section#main-body .btn-default,
section#main-body .btn-secondary{
background:#fff!important;
border:1px solid var(--symes-border)!important;
color:var(--symes-text)!important;
border-radius:999px!important;
font-weight:800!important;
box-shadow:none!important;
}

.btn-default:hover,
.btn-secondary:hover,
.primary-content .btn-default:hover,
.primary-content .btn-secondary:hover,
section#main-body .btn-default:hover,
section#main-body .btn-secondary:hover{
border-color:var(--symes-primary)!important;
color:var(--symes-primary)!important;
background:#fff!important;
}

.btn-outline{
background:transparent!important;
border:2px solid #fff!important;
color:#fff!important;
border-radius:999px!important;
padding:14px 32px!important;
font-weight:800!important;
}

.btn-outline:hover,
.btn-outline:focus{
background:#fff!important;
color:#000!important;
}

/* ==========================================
FORMS
========================================== */

section#main-body .form-control,
section#main-body .custom-select,
section#main-body input[type="text"],
section#main-body input[type="email"],
section#main-body input[type="password"],
section#main-body input[type="tel"],
section#main-body input[type="number"],
section#main-body select,
section#main-body textarea,
.primary-content .form-control,
.primary-content .custom-select,
.primary-content input[type="text"],
.primary-content input[type="email"],
.primary-content input[type="password"],
.primary-content input[type="tel"],
.primary-content input[type="number"],
.primary-content select,
.primary-content textarea{
border:1px solid var(--symes-border)!important;
border-radius:13px!important;
box-shadow:none!important;
color:var(--symes-text)!important;
}

section#main-body .form-control:focus,
section#main-body .custom-select:focus,
section#main-body input:focus,
section#main-body select:focus,
section#main-body textarea:focus,
.primary-content .form-control:focus,
.primary-content .custom-select:focus,
.primary-content input:focus,
.primary-content select:focus,
.primary-content textarea:focus{
border-color:var(--symes-primary)!important;
box-shadow:0 0 0 .18rem rgba(236,0,140,.15)!important;
outline:0!important;
}

.input-group-text,
.input-group-addon{
background:#F3F4F6!important;
border-color:var(--symes-border)!important;
color:var(--symes-muted)!important;
}

/* ==========================================
CARDS / PANELS
========================================== */

section#main-body .primary-content > .card,
section#main-body .primary-content .card,
.primary-content .card{
background:#fff!important;
border:1px solid var(--symes-border)!important;
border-radius:var(--symes-radius-lg)!important;
box-shadow:var(--symes-shadow-md)!important;
overflow:hidden!important;
}

section#main-body .primary-content .card-body,
.primary-content .card-body{
padding:34px!important;
}

section#main-body .primary-content .card-footer,
.primary-content .card-footer{
background:var(--symes-bg)!important;
border-top:1px solid var(--symes-border)!important;
padding:18px 34px!important;
}

.panel,
.card{
border-color:var(--symes-border);
}

/* ==========================================
SIDEBARS
========================================== */

section#main-body .card.card-sidebar,
section#main-body .sidebar .card,
section#main-body .sidebar .panel{
background:#fff!important;
border:0!important;
border-radius:18px!important;
box-shadow:var(--symes-shadow-sm)!important;
overflow:hidden!important;
margin-bottom:22px!important;
}

section#main-body .card.card-sidebar > .card-header,
section#main-body .sidebar .card-header,
section#main-body .sidebar .panel-heading{
background:var(--symes-secondary)!important;
border-bottom:3px solid var(--symes-primary)!important;
color:#fff!important;
text-align:left!important;
padding:14px 18px!important;
}

section#main-body .card.card-sidebar > .card-header h3,
section#main-body .card.card-sidebar > .card-header h3.card-title,
section#main-body .card.card-sidebar > .card-header .card-title,
section#main-body .sidebar .card-header h3,
section#main-body .sidebar .panel-heading h3,
section#main-body .sidebar .panel-title{
color:#fff!important;
opacity:1!important;
font-weight:900!important;
font-size:15px!important;
line-height:1.3!important;
margin:0!important;
}

section#main-body .card.card-sidebar > .card-header i,
section#main-body .sidebar .card-header i,
section#main-body .sidebar .panel-heading i{
color:var(--symes-primary)!important;
opacity:1!important;
}

section#main-body .card.card-sidebar .list-group-item,
section#main-body .sidebar .list-group-item{
border-color:var(--symes-border)!important;
color:var(--symes-text)!important;
font-size:13px!important;
}

section#main-body .card.card-sidebar .list-group-item.active,
section#main-body .card.card-sidebar .list-group-item.active:hover,
section#main-body .sidebar .list-group-item.active,
section#main-body .sidebar .list-group-item.active:hover,
section#main-body .sidebar .list-group-item:active{
background:var(--symes-primary)!important;
border-color:var(--symes-primary)!important;
color:#fff!important;
font-weight:800!important;
}

section#main-body .card.card-sidebar .list-group-item:hover,
section#main-body .sidebar .list-group-item:hover{
background:#fff1fa!important;
color:var(--symes-primary)!important;
}

/* ==========================================
HOMEPAGE / PORTAL SECTIONS
========================================== */

.symes-billing-hero{
background:#000!important;
padding:90px 20px!important;
text-align:center!important;
border-bottom:2px solid var(--symes-primary)!important;
}

html body section#main-body .primary-content .symes-billing-hero h1,
html body section#main-body .primary-content .symes-billing-hero h2,
html body section#main-body .primary-content .symes-billing-hero h3,
html body section#main-body .primary-content .symes-billing-hero p{
color:#fff!important;
opacity:1!important;
}

html body section#main-body .primary-content .symes-billing-hero h1{
font-size:58px!important;
font-weight:900!important;
line-height:1.1!important;
letter-spacing:.02em!important;
margin-bottom:25px!important;
text-shadow:none!important;
}

html body section#main-body .primary-content .symes-billing-hero .symes-portal-label,
html body section#main-body .primary-content .symes-billing-hero h6{
color:var(--symes-primary)!important;
font-size:14px!important;
font-weight:900!important;
letter-spacing:.08em!important;
margin-bottom:20px!important;
text-transform:uppercase!important;
opacity:1!important;
}

html body section#main-body .primary-content .symes-billing-hero p{
font-size:22px!important;
line-height:1.6!important;
max-width:900px!important;
margin:0 auto 40px!important;
}

.symes-billing-hero .btn{
margin:8px!important;
}

.symes-quick-actions{
padding:80px 20px!important;
text-align:center!important;
}

html body section#main-body .primary-content .symes-quick-actions h2{
font-size:58px!important;
font-weight:900!important;
margin-bottom:50px!important;
color:var(--symes-text)!important;
}

.symes-card-grid{
display:grid!important;
grid-template-columns:repeat(4,1fr)!important;
gap:25px!important;
margin-top:40px!important;
}

.symes-card{
background:#000!important;
border:2px solid var(--symes-primary)!important;
border-radius:24px!important;
padding:40px 25px!important;
transition:.3s!important;
box-shadow:0 12px 30px rgba(0,0,0,.18)!important;
}

.symes-card:hover{
transform:translateY(-10px)!important;
box-shadow:0 20px 40px rgba(0,0,0,.3)!important;
}

.symes-card-icon,
.symes-card span{
display:block!important;
font-size:42px!important;
margin-bottom:20px!important;
}

html body section#main-body .primary-content .symes-card h1,
html body section#main-body .primary-content .symes-card h2,
html body section#main-body .primary-content .symes-card h3,
html body section#main-body .primary-content .symes-card p,
html body section#main-body .primary-content .symes-card span{
color:#fff!important;
opacity:1!important;
}

html body section#main-body .primary-content .symes-card h3{
font-size:20px!important;
font-weight:900!important;
margin-bottom:15px!important;
}

html body section#main-body .primary-content .symes-card p{
font-size:15px!important;
font-weight:600!important;
line-height:1.55!important;
margin:0!important;
}

/* Bottom homepage help section */
html body section#main-body .primary-content .symes-portal-note{
background:#050505!important;
border-top:3px solid var(--symes-primary)!important;
border-bottom:3px solid var(--symes-primary)!important;
padding:74px 24px!important;
text-align:center!important;
margin:64px auto 0!important;
box-shadow:0 18px 48px rgba(0,0,0,.14)!important;
}

html body section#main-body .primary-content .symes-portal-note .container{
max-width:960px!important;
margin:0 auto!important;
}

html body section#main-body .primary-content .symes-portal-note h1,
html body section#main-body .primary-content .symes-portal-note h2,
html body section#main-body .primary-content .symes-portal-note h3{
color:#fff!important;
font-weight:900!important;
font-size:44px!important;
line-height:1.15!important;
letter-spacing:.02em!important;
margin:0 0 22px!important;
}

html body section#main-body .primary-content .symes-portal-note p{
color:#fff!important;
font-size:17px!important;
font-weight:600!important;
line-height:1.7!important;
max-width:760px!important;
margin:0 auto 30px!important;
opacity:1!important;
}

html body section#main-body .primary-content .symes-portal-note .btn,
html body section#main-body .primary-content .symes-portal-note .btn-primary{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
background:var(--symes-primary)!important;
border-color:var(--symes-primary)!important;
color:#fff!important;
border-radius:999px!important;
font-weight:900!important;
padding:13px 32px!important;
min-width:150px!important;
box-shadow:none!important;
}

html body section#main-body .primary-content .symes-portal-note .btn:hover,
html body section#main-body .primary-content .symes-portal-note .btn-primary:hover{
background:var(--symes-primary-hover)!important;
border-color:var(--symes-primary-hover)!important;
color:#fff!important;
transform:translateY(-2px)!important;
box-shadow:0 8px 22px rgba(236,0,140,.25)!important;
}

/* ==========================================
LOGIN / REGISTER / PASSWORD RESET
========================================== */

.login-form .card,
form.login-form .card,
section#main-body form[action*="dologin"] .card,
section#main-body form[action*="login"] .card{
max-width:560px!important;
margin:18px auto 36px!important;
border:1px solid var(--symes-border)!important;
border-radius:26px!important;
box-shadow:var(--symes-shadow-lg)!important;
overflow:hidden!important;
background:#fff!important;
}

.login-form .card-body,
form.login-form .card-body{
padding:42px!important;
}

.login-form h6.h3,
form.login-form h6.h3{
font-size:30px!important;
font-weight:900!important;
color:var(--symes-text)!important;
}

.login-form .text-muted,
form.login-form .text-muted{
color:var(--symes-muted)!important;
}

.login-form .input-group-text,
form.login-form .input-group-text{
background:#F3F4F6!important;
border-color:var(--symes-border)!important;
color:var(--symes-muted)!important;
border-radius:13px 0 0 13px!important;
}

.login-form .btn-reveal-pw,
form.login-form .btn-reveal-pw{
border-radius:0 13px 13px 0!important;
}

.login-form .card-footer,
form.login-form .card-footer{
background:var(--symes-bg)!important;
text-align:center!important;
}

/* ==========================================
CONTACT PAGE
========================================== */

body.contactpage section#main-body .primary-content .card,
section#main-body .primary-content form[action="contact.php"],
.primary-content form[action="contact.php"],
form[action="contact.php"]{
max-width:1120px!important;
margin:0 auto!important;
}

section#main-body .primary-content form[action="contact.php"] label,
.primary-content form[action="contact.php"] label,
form[action="contact.php"] label{
font-weight:800!important;
color:var(--symes-text)!important;
}

section#main-body .primary-content form[action="contact.php"] textarea,
.primary-content form[action="contact.php"] textarea,
form[action="contact.php"] textarea{
min-height:210px!important;
}

section#main-body .primary-content form[action="contact.php"] .form-group,
.primary-content form[action="contact.php"] .form-group,
form[action="contact.php"] .form-group{
margin-bottom:20px!important;
}

/* ==========================================
ANNOUNCEMENTS
========================================== */

section#main-body .primary-content .announcements .announcement,
.announcements .announcement{
background:#fff!important;
border:1px solid var(--symes-border)!important;
border-radius:22px!important;
box-shadow:var(--symes-shadow-md)!important;
padding:30px!important;
margin-bottom:26px!important;
overflow:hidden!important;
}

section#main-body .primary-content .announcements .announcement h1,
.announcements .announcement h1{
font-size:30px!important;
line-height:1.25!important;
margin-bottom:12px!important;
}

section#main-body .primary-content .announcements .announcement h1 a,
.announcements .announcement h1 a{
color:var(--symes-text)!important;
font-weight:900!important;
text-decoration:none!important;
}

section#main-body .primary-content .announcements .announcement h1 a:hover,
.announcements .announcement h1 a:hover{
color:var(--symes-primary)!important;
}

section#main-body .primary-content .announcements .announcement article,
.announcements .announcement article{
background:var(--symes-bg)!important;
border-left:5px solid var(--symes-primary)!important;
border-radius:0 16px 16px 0!important;
padding:20px!important;
margin:20px 0!important;
color:var(--symes-text)!important;
}

section#main-body .primary-content .announcements .announcement .list-inline,
section#main-body .primary-content .announcements .announcement .text-muted,
.announcements .announcement .list-inline,
.announcements .announcement .text-muted{
color:var(--symes-muted)!important;
}

/* Branded announcement/article HTML dark cards */
html body section#main-body .primary-content div[style*="background:#050505"] h1,
html body section#main-body .primary-content div[style*="background:#050505"] h2,
html body section#main-body .primary-content div[style*="background:#050505"] h3,
html body section#main-body .primary-content div[style*="background:#050505"] h4,
html body section#main-body .primary-content div[style*="background:#050505"] p,
html body section#main-body .primary-content div[style*="background:#050505"] li,
html body section#main-body .primary-content div[style*="background:#050505"] strong,
html body section#main-body .primary-content div[style*="background: #050505"] h1,
html body section#main-body .primary-content div[style*="background: #050505"] h2,
html body section#main-body .primary-content div[style*="background: #050505"] h3,
html body section#main-body .primary-content div[style*="background: #050505"] h4,
html body section#main-body .primary-content div[style*="background: #050505"] p,
html body section#main-body .primary-content div[style*="background: #050505"] li,
html body section#main-body .primary-content div[style*="background: #050505"] strong{
color:#fff!important;
opacity:1!important;
}

/* ==========================================
KNOWLEDGEBASE / SUPPORT / DOWNLOAD LISTS
========================================== */

.kb-article-item,
.knowledgebase-cat-list,
.knowledgebase-article-list,
.ticket-reply,
.ticket-reply.staff,
.client-home-panels .card,
.downloads .download,
.download-list .download,
.files .file,
section#main-body .primary-content .list-group{
background:#fff!important;
border:1px solid var(--symes-border)!important;
border-radius:18px!important;
box-shadow:var(--symes-shadow-sm)!important;
}

.kb-article-item a,
.knowledgebase-cat-list a,
.knowledgebase-article-list a{
color:var(--symes-text)!important;
font-weight:800!important;
}

.kb-article-item a:hover,
.knowledgebase-cat-list a:hover,
.knowledgebase-article-list a:hover{
color:var(--symes-primary)!important;
}

/* Email setup article */
html body section#main-body .primary-content .symes-kb-email-guide{
max-width:100%!important;
width:100%!important;
overflow:hidden!important;
box-sizing:border-box!important;
}

html body section#main-body .primary-content .symes-kb-email-guide *,
html body section#main-body .primary-content .symes-kb-email-guide *::before,
html body section#main-body .primary-content .symes-kb-email-guide *::after{
box-sizing:border-box!important;
}

html body section#main-body .primary-content .symes-kb-email-guide > div{
max-width:100%!important;
box-sizing:border-box!important;
}

html body section#main-body .primary-content .symes-kb-email-guide img{
display:block!important;
width:100%!important;
max-width:100%!important;
height:auto!important;
object-fit:contain!important;
box-sizing:border-box!important;
border-radius:18px!important;
border:1px solid var(--symes-border)!important;
box-shadow:0 10px 28px rgba(0,0,0,.08)!important;
margin:18px auto 26px!important;
}

html body section#main-body .primary-content .symes-kb-email-guide table{
width:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
}

html body section#main-body .primary-content .symes-kb-email-guide div[style*="background:#050505"],
html body section#main-body .primary-content .symes-kb-email-guide div[style*="background: #050505"]{
background:#050505!important;
}

html body section#main-body .primary-content .symes-kb-email-guide div[style*="background:#050505"] h1,
html body section#main-body .primary-content .symes-kb-email-guide div[style*="background:#050505"] h2,
html body section#main-body .primary-content .symes-kb-email-guide div[style*="background:#050505"] h3,
html body section#main-body .primary-content .symes-kb-email-guide div[style*="background:#050505"] h4,
html body section#main-body .primary-content .symes-kb-email-guide div[style*="background:#050505"] p,
html body section#main-body .primary-content .symes-kb-email-guide div[style*="background:#050505"] li,
html body section#main-body .primary-content .symes-kb-email-guide div[style*="background:#050505"] strong,
html body section#main-body .primary-content .symes-kb-email-guide div[style*="background: #050505"] h1,
html body section#main-body .primary-content .symes-kb-email-guide div[style*="background: #050505"] h2,
html body section#main-body .primary-content .symes-kb-email-guide div[style*="background: #050505"] h3,
html body section#main-body .primary-content .symes-kb-email-guide div[style*="background: #050505"] h4,
html body section#main-body .primary-content .symes-kb-email-guide div[style*="background: #050505"] p,
html body section#main-body .primary-content .symes-kb-email-guide div[style*="background: #050505"] li,
html body section#main-body .primary-content .symes-kb-email-guide div[style*="background: #050505"] strong{
color:#fff!important;
opacity:1!important;
}

html body section#main-body .primary-content .symes-kb-email-guide div[style*="background:#050505"] p:first-child,
html body section#main-body .primary-content .symes-kb-email-guide div[style*="background: #050505"] p:first-child{
color:var(--symes-primary)!important;
}

/* ==========================================
CLIENT AREA / TABLES / STATUS ELEMENTS
========================================== */

.client-home-panels .card,
.tiles .tile,
.tile,
.stat,
.dataTables_wrapper,
.table-container{
border-radius:18px!important;
}

table.table,
.table{
background:#fff!important;
border:1px solid var(--symes-border)!important;
border-radius:16px!important;
overflow:hidden!important;
}

table.table thead th,
.table thead th{
background:#050505!important;
color:#fff!important;
border-bottom:3px solid var(--symes-primary)!important;
font-weight:900!important;
}

table.table tbody td,
.table tbody td{
border-top:1px solid var(--symes-border)!important;
color:var(--symes-text)!important;
}

.label,
.badge,
.status,
.status-label{
border-radius:999px!important;
font-weight:900!important;
}

.badge-primary,
.label-primary,
.status-active,
.label-success{
background:var(--symes-primary)!important;
color:#fff!important;
}

/* ==========================================
ALERTS / PAGINATION
========================================== */

.alert{
border-radius:16px!important;
box-shadow:var(--symes-shadow-sm)!important;
}

.alert-info,
.alert-primary,
section#main-body .alert-info,
section#main-body .alert-primary{
background:#fff1fa!important;
border-color:rgba(236,0,140,.25)!important;
border-left:5px solid var(--symes-primary)!important;
color:var(--symes-text)!important;
}

.alert-success{
background:#ecfdf3!important;
border-color:rgba(34,197,94,.25)!important;
border-left:5px solid var(--symes-success)!important;
color:var(--symes-text)!important;
}

.alert-warning{
background:#fff7ed!important;
border-color:rgba(245,158,11,.25)!important;
border-left:5px solid var(--symes-warning)!important;
color:var(--symes-text)!important;
}

.alert-danger{
background:#fef2f2!important;
border-color:rgba(239,68,68,.25)!important;
border-left:5px solid var(--symes-danger)!important;
color:var(--symes-text)!important;
}

.pagination>.active>a,
.pagination>.active>span,
.page-item.active .page-link{
background:var(--symes-primary)!important;
border-color:var(--symes-primary)!important;
color:#fff!important;
}

.pagination>li>a,
.pagination>li>span,
.page-link{
color:var(--symes-primary)!important;
}

/* ==========================================
FOOTER
========================================== */

footer,
.footer,
#footer,
.main-footer{
background:#050505!important;
border-top:2px solid var(--symes-primary)!important;
color:#fff!important;
}

footer{
padding-top:40px!important;
}

footer,
footer a,
.footer,
.footer a,
#footer,
#footer a{
color:#fff!important;
}

footer a:hover,
.footer a:hover,
#footer a:hover{
color:var(--symes-primary)!important;
text-decoration:none!important;
}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:991px){

section#main-body{
padding:26px 0 38px!important;
}

section#main-body .primary-content .card-body,
.primary-content .card-body,
.login-form .card-body,
form.login-form .card-body{
padding:24px!important;
}

html body section#main-body .primary-content .symes-billing-hero h1{
font-size:42px!important;
}

html body section#main-body .primary-content .symes-billing-hero p{
font-size:18px!important;
}

.symes-card-grid{
grid-template-columns:repeat(2,1fr)!important;
}

}

@media(max-width:767px){

section#main-body{
padding:22px 0 32px!important;
}

.symes-billing-hero{
padding:70px 20px!important;
}

html body section#main-body .primary-content .symes-billing-hero h1{
font-size:34px!important;
}

.symes-card-grid{
grid-template-columns:1fr!important;
}

html body section#main-body .primary-content .symes-quick-actions h2,
html body section#main-body .primary-content .symes-portal-note h2{
font-size:34px!important;
}

html body section#main-body .primary-content .symes-portal-note{
padding:54px 18px!important;
margin-top:44px!important;
}

.btn-primary,
.btn-outline{
display:block;
width:100%;
margin:10px auto;
}

section#main-body .primary-content .announcements .announcement,
.announcements .announcement{
padding:22px!important;
}

html body section#main-body .primary-content .symes-kb-email-guide img{
border-radius:14px!important;
}

html body section#main-body .primary-content .symes-kb-email-guide div[style*="padding:38px"],
html body section#main-body .primary-content .symes-kb-email-guide div[style*="padding: 38px"]{
padding:26px 22px!important;
}

}

/* ==========================================
SYMES GLOBAL BRAND FALLBACK
Main template safety net for WHMCS pages
Applies to client area, login, register, KB, announcements,
downloads, tickets, invoices, domains and general panels.
========================================== */

:root{
--symes-black:#050505;
--symes-dark:#0b0b0d;
--symes-pink:#EC008C;
--symes-pink-soft:#fbe6f4;
--symes-text:#071126;
--symes-muted:#5f6673;
--symes-border:#e7e9ee;
--symes-bg:#f5f6f8;
--symes-white:#ffffff;
--symes-radius:18px;
--symes-shadow:0 18px 46px rgba(0,0,0,.10);
}

html,body{
background:var(--symes-bg)!important;
color:var(--symes-text)!important;
}

a{
color:var(--symes-pink);
}

a:hover,
a:focus{
color:#b9006d;
text-decoration:none;
}

section#main-body{
background:var(--symes-bg)!important;
padding:42px 0 58px!important;
margin:0!important;
min-height:calc(100vh - 320px);
}

section#main-body .container{
max-width:1220px;
}

.primary-content,
.main-content,
.client-home-panels,
.tiles,
.card,
.panel,
.list-group,
.announcement-single,
.announcement,
.knowledgebase-cat,
.kb-article,
.ticket-reply,
.markdown-content,
.logincontainer,
.domain-checker-container,
.domain-pricing,
.clientarea-dashboard .panel,
.clientarea-dashboard .card{
border-radius:var(--symes-radius)!important;
border:1px solid var(--symes-border)!important;
box-shadow:var(--symes-shadow)!important;
background:#fff!important;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
color:var(--symes-text)!important;
font-weight:900!important;
letter-spacing:.04em!important;
}

h1,
.h1{
font-size:clamp(32px,4vw,56px)!important;
line-height:1.05!important;
}

h2,
.h2{
font-size:clamp(26px,3vw,42px)!important;
line-height:1.12!important;
}

p,
li,
td,
th,
label,
.form-control,
.input-group-text,
.dropdown-menu,
.list-group-item{
color:var(--symes-text);
}

.text-muted,
small,
.small{
color:var(--symes-muted)!important;
}

.btn,
button,
input[type="submit"]{
border-radius:999px!important;
font-weight:900!important;
letter-spacing:.02em!important;
}

.btn-primary,
.btn-success,
.btn-info,
.btn-danger,
.btn-warning,
.btn-outline-primary:hover,
button.btn-primary,
input[type="submit"].btn-primary{
background:var(--symes-pink)!important;
border-color:var(--symes-pink)!important;
color:#fff!important;
box-shadow:none!important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover{
background:#c80078!important;
border-color:#c80078!important;
color:#fff!important;
}

.btn-default,
.btn-light,
.btn-outline-primary,
.btn-secondary{
background:#fff!important;
border:1px solid var(--symes-border)!important;
color:var(--symes-text)!important;
}

.btn-default:hover,
.btn-light:hover,
.btn-secondary:hover,
.btn-outline-primary:hover{
background:var(--symes-pink)!important;
border-color:var(--symes-pink)!important;
color:#fff!important;
}

.badge,
.label,
.status,
.status-active,
.status-open,
.status-paid,
.status-unpaid,
.status-pending,
.status-customer-reply,
.status-answered{
border-radius:999px!important;
font-weight:900!important;
padding:.35rem .7rem!important;
}

.badge-primary,
.label-primary,
.status-active,
.status-open,
.status-paid{
background:var(--symes-pink)!important;
color:#fff!important;
}

.alert{
border-radius:var(--symes-radius)!important;
border:1px solid var(--symes-border)!important;
box-shadow:0 10px 28px rgba(0,0,0,.08)!important;
}

.alert-info,
.alert-success{
background:#fff!important;
border-left:5px solid var(--symes-pink)!important;
color:var(--symes-text)!important;
}

.alert-warning{
background:#fff8ed!important;
border-left:5px solid #f0a000!important;
color:var(--symes-text)!important;
}

.alert-danger{
background:#fff1f5!important;
border-left:5px solid var(--symes-pink)!important;
color:var(--symes-text)!important;
}

.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"]{
border-radius:14px!important;
border:1px solid var(--symes-border)!important;
background:#fff!important;
color:var(--symes-text)!important;
box-shadow:none!important;
}

.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input:focus{
border-color:var(--symes-pink)!important;
box-shadow:0 0 0 .18rem rgba(236,0,140,.16)!important;
outline:none!important;
}

.table,
.dataTable,
table.table-list{
background:#fff!important;
border-radius:var(--symes-radius)!important;
overflow:hidden!important;
border:1px solid var(--symes-border)!important;
box-shadow:var(--symes-shadow)!important;
}

.table thead th,
table.table-list thead th,
.dataTable thead th{
background:#050505!important;
color:#fff!important;
border-color:#EC008C!important;
font-weight:900!important;
}

.table td,
.table th,
table.table-list td,
table.table-list th{
border-color:var(--symes-border)!important;
vertical-align:middle!important;
}

.table-striped tbody tr:nth-of-type(odd){
background:#fbfbfc!important;
}

.table-hover tbody tr:hover{
background:var(--symes-pink-soft)!important;
}

.card-header,
.panel-heading,
.modal-header,
.list-group-item.active{
background:#050505!important;
color:#fff!important;
border-bottom:2px solid var(--symes-pink)!important;
}

.card-header *,
.panel-heading *,
.modal-header *,
.list-group-item.active *{
color:#fff!important;
}

.modal-content{
border-radius:var(--symes-radius)!important;
border:1px solid var(--symes-border)!important;
box-shadow:0 25px 70px rgba(0,0,0,.25)!important;
overflow:hidden!important;
}

.sidebar .list-group,
.sidebar .panel,
div.sidebar .list-group,
div.sidebar .panel{
border-radius:var(--symes-radius)!important;
overflow:hidden!important;
box-shadow:var(--symes-shadow)!important;
border:0!important;
}

.sidebar .panel-heading,
.sidebar .card-header,
.sidebar .list-group-item:first-child{
background:#050505!important;
color:#fff!important;
border-bottom:2px solid var(--symes-pink)!important;
font-weight:900!important;
}

.sidebar .list-group-item{
border-color:var(--symes-border)!important;
color:var(--symes-text)!important;
}

.sidebar .list-group-item.active,
.sidebar .list-group-item:hover{
background:var(--symes-pink)!important;
border-color:var(--symes-pink)!important;
color:#fff!important;
}

.sidebar .list-group-item.active *,
.sidebar .list-group-item:hover *{
color:#fff!important;
}

.nav-tabs{
border-bottom:2px solid var(--symes-border)!important;
}

.nav-tabs .nav-link{
border-radius:14px 14px 0 0!important;
color:var(--symes-text)!important;
font-weight:800!important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{
background:#050505!important;
border-color:#050505 #050505 var(--symes-pink)!important;
color:#fff!important;
}

.dropdown-menu{
border-radius:14px!important;
border:1px solid var(--symes-border)!important;
box-shadow:0 16px 40px rgba(0,0,0,.12)!important;
overflow:hidden!important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active{
background:var(--symes-pink)!important;
color:#fff!important;
}

.pagination .page-link{
color:var(--symes-text)!important;
border-color:var(--symes-border)!important;
}

.pagination .page-item.active .page-link,
.pagination .page-link:hover{
background:var(--symes-pink)!important;
border-color:var(--symes-pink)!important;
color:#fff!important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
border-radius:14px!important;
border:1px solid var(--symes-border)!important;
}

.client-home-panels .panel,
.client-home-panels .card,
.tiles .tile,
.home-kb-search,
.logincontainer{
padding:24px!important;
}

.ticket-reply,
.ticket-reply.staff,
.ticket-reply.client{
border-radius:var(--symes-radius)!important;
border:1px solid var(--symes-border)!important;
box-shadow:0 12px 32px rgba(0,0,0,.08)!important;
overflow:hidden!important;
}

.ticket-reply .user,
.ticket-reply .rating,
.ticket-reply .message{
color:var(--symes-text)!important;
}

.invoice-container,
.quote-container{
background:#fff!important;
border-radius:var(--symes-radius)!important;
box-shadow:var(--symes-shadow)!important;
border:1px solid var(--symes-border)!important;
padding:28px!important;
}

.clientareahome .tiles .tile,
.tile{
border-radius:var(--symes-radius)!important;
border:1px solid var(--symes-border)!important;
box-shadow:var(--symes-shadow)!important;
background:#fff!important;
}

.tile:hover{
border-color:var(--symes-pink)!important;
transform:translateY(-2px);
}

.tile .icon{
color:var(--symes-pink)!important;
}

.marketing-email-optin,
.two-factor-auth{
border-radius:var(--symes-radius)!important;
border:1px solid var(--symes-border)!important;
background:#fff!important;
box-shadow:var(--symes-shadow)!important;
padding:24px!important;
}

/* Login/register/password reset fallback */
.logincontainer,
#login,
#registration,
#frmLogin,
#frmCheckout,
#frmDomainChecker{
max-width:100%;
}

.logincontainer .header-lined h1,
.header-lined h1{
color:var(--symes-text)!important;
}

/* Keep embedded/third-party payment widgets readable */
iframe,
.paypal-buttons,
#paymentGatewayInput,
.cc-input-container,
#stripeElements{
max-width:100%!important;
}

/* Footer safety */
footer.footer{
background:#050505!important;
border-top:2px solid var(--symes-pink)!important;
color:#fff!important;
}

footer.footer *,
footer.footer a{
color:#fff!important;
}

/* Mobile fallback */
@media(max-width:991px){
section#main-body{
padding:28px 0 42px!important;
}

section#main-body .container{
max-width:100%!important;
}

.table-responsive,
.dataTables_wrapper{
overflow-x:auto!important;
}

h1,.h1{
font-size:34px!important;
}

h2,.h2{
font-size:28px!important;
}
}

@media(max-width:767px){
.primary-content,
.main-content,
.card,
.panel,
.logincontainer,
.invoice-container,
.quote-container{
border-radius:16px!important;
padding:18px!important;
}

.btn{
width:auto;
max-width:100%;
white-space:normal;
}
}


/* ==========================================
SYMES CLIENT AREA DASHBOARD POLISH
Narrow fix for /clientarea.php only.
Does not touch checkout/orderform or global WHMCS controls.
========================================== */

/* Dashboard main white promo panel */
html body section#main-body .primary-content .client-home-panels,
html body section#main-body .primary-content .clientarea-home,
html body section#main-body .primary-content .client-home-card,
html body section#main-body .primary-content .client-home-card-content{
background:#fff!important;
border-radius:24px!important;
}

/* Make secondary/disabled-looking dashboard buttons visible */
html body section#main-body .primary-content a.btn[href*="submitticket"],
html body section#main-body .primary-content a.btn[href*="supporttickets"],
html body section#main-body .primary-content a.btn:contains("Get Support"){
background:#fff!important;
border:1px solid #EC008C!important;
color:#EC008C!important;
box-shadow:none!important;
opacity:1!important;
}

html body section#main-body .primary-content .btn.btn-default,
html body section#main-body .primary-content .btn.btn-light,
html body section#main-body .primary-content .btn.btn-secondary{
background:#fff!important;
border:1px solid #EC008C!important;
color:#EC008C!important;
opacity:1!important;
}

html body section#main-body .primary-content .btn.btn-default:hover,
html body section#main-body .primary-content .btn.btn-light:hover,
html body section#main-body .primary-content .btn.btn-secondary:hover{
background:#EC008C!important;
border-color:#EC008C!important;
color:#fff!important;
}

/* Sidebar rows should not appear as black disabled bars */
html body section#main-body .sidebar .list-group-item.disabled,
html body section#main-body .sidebar .list-group-item.disabled:hover,
html body section#main-body .sidebar .list-group-item[disabled],
html body section#main-body .sidebar .list-group-item.text-muted,
html body section#main-body .card-sidebar .list-group-item.disabled,
html body section#main-body .card-sidebar .list-group-item.text-muted{
background:#F9FAFB!important;
color:#6B7280!important;
border-color:#E5E7EB!important;
font-weight:700!important;
opacity:1!important;
}

/* But keep active sidebar rows pink */
html body section#main-body .sidebar .list-group-item.active,
html body section#main-body .card-sidebar .list-group-item.active{
background:#EC008C!important;
border-color:#EC008C!important;
color:#fff!important;
}

/* Dashboard mini service cards */
html body section#main-body .primary-content .client-home-panels .card,
html body section#main-body .primary-content .clientarea-home .card,
html body section#main-body .primary-content .tiles .tile{
background:#fff!important;
border:1px solid #E5E7EB!important;
border-radius:18px!important;
box-shadow:0 10px 26px rgba(0,0,0,.07)!important;
}

html body section#main-body .primary-content .client-home-panels .card:hover,
html body section#main-body .primary-content .clientarea-home .card:hover,
html body section#main-body .primary-content .tiles .tile:hover{
border-color:#EC008C!important;
box-shadow:0 14px 34px rgba(236,0,140,.10)!important;
transform:translateY(-2px)!important;
}

/* Dashboard headings and summary text */
html body section#main-body .primary-content .client-home-panels h1,
html body section#main-body .primary-content .clientarea-home h1{
color:#071126!important;
font-weight:900!important;
}

html body section#main-body .primary-content .client-home-panels h2,
html body section#main-body .primary-content .client-home-panels h3,
html body section#main-body .primary-content .clientarea-home h2,
html body section#main-body .primary-content .clientarea-home h3{
color:#071126!important;
font-weight:900!important;
}

/* Keep disabled genuine buttons clearly disabled, not broken-looking */
html body section#main-body .primary-content .btn.disabled,
html body section#main-body .primary-content .btn:disabled{
opacity:.45!important;
cursor:not-allowed!important;
}


/* ==========================================
SYMES CLIENT AREA HERO FIX
Targets the actual custom homepage dashboard classes:
.symes-hero and .symes-buttons
========================================== */

html body section#main-body .primary-content .symes-hero{
background:#050505!important;
border-top:3px solid #EC008C!important;
border-bottom:3px solid #EC008C!important;
border-radius:24px!important;
padding:56px 42px!important;
box-shadow:0 18px 48px rgba(0,0,0,.14)!important;
}

html body section#main-body .primary-content .symes-hero h1,
html body section#main-body .primary-content .symes-hero h2,
html body section#main-body .primary-content .symes-hero h3,
html body section#main-body .primary-content .symes-hero p{
color:#fff!important;
opacity:1!important;
}

html body section#main-body .primary-content .symes-hero h1{
font-size:46px!important;
line-height:1.08!important;
font-weight:900!important;
letter-spacing:.035em!important;
margin:0 0 18px!important;
}

html body section#main-body .primary-content .symes-hero p{
font-size:16px!important;
font-weight:600!important;
line-height:1.6!important;
margin-bottom:26px!important;
}

/* Hero buttons */
html body section#main-body .primary-content .symes-hero .symes-buttons{
display:flex!important;
flex-wrap:wrap!important;
gap:14px!important;
align-items:center!important;
margin:24px 0 34px!important;
}

html body section#main-body .primary-content .symes-hero .symes-buttons .btn,
html body section#main-body .primary-content .symes-hero .symes-buttons a.btn{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:44px!important;
padding:12px 28px!important;
border-radius:999px!important;
font-weight:900!important;
font-size:14px!important;
line-height:1.2!important;
text-decoration:none!important;
opacity:1!important;
visibility:visible!important;
box-shadow:none!important;
}

/* Browse Services */
html body section#main-body .primary-content .symes-hero .symes-buttons .btn-primary,
html body section#main-body .primary-content .symes-hero .symes-buttons a[href="/store"]{
background:#EC008C!important;
border:2px solid #EC008C!important;
color:#fff!important;
}

/* Get Support */
html body section#main-body .primary-content .symes-hero .symes-buttons .btn-outline-light,
html body section#main-body .primary-content .symes-hero .symes-buttons a[href="/submitticket.php"]{
background:transparent!important;
border:2px solid #fff!important;
color:#fff!important;
}

/* Hover */
html body section#main-body .primary-content .symes-hero .symes-buttons .btn-primary:hover,
html body section#main-body .primary-content .symes-hero .symes-buttons a[href="/store"]:hover{
background:#d90078!important;
border-color:#d90078!important;
color:#fff!important;
transform:translateY(-2px)!important;
}

html body section#main-body .primary-content .symes-hero .symes-buttons .btn-outline-light:hover,
html body section#main-body .primary-content .symes-hero .symes-buttons a[href="/submitticket.php"]:hover{
background:#EC008C!important;
border-color:#EC008C!important;
color:#fff!important;
transform:translateY(-2px)!important;
}

/* Inner service cards inside the hero */
html body section#main-body .primary-content .symes-hero .card,
html body section#main-body .primary-content .symes-hero .symes-card,
html body section#main-body .primary-content .symes-hero div[class*="col-"] > div{
background:#fff!important;
border:1px solid #E5E7EB!important;
border-radius:18px!important;
box-shadow:0 10px 26px rgba(0,0,0,.12)!important;
color:#071126!important;
}

html body section#main-body .primary-content .symes-hero .card h1,
html body section#main-body .primary-content .symes-hero .card h2,
html body section#main-body .primary-content .symes-hero .card h3,
html body section#main-body .primary-content .symes-hero .symes-card h1,
html body section#main-body .primary-content .symes-hero .symes-card h2,
html body section#main-body .primary-content .symes-hero .symes-card h3{
color:#071126!important;
}

html body section#main-body .primary-content .symes-hero .card p,
html body section#main-body .primary-content .symes-hero .symes-card p{
color:#071126!important;
}

/* Sidebar inactive/empty rows on client dashboard */
html body section#main-body .sidebar .list-group-item.disabled,
html body section#main-body .sidebar .list-group-item.text-muted,
html body section#main-body .card-sidebar .list-group-item.disabled,
html body section#main-body .card-sidebar .list-group-item.text-muted,
html body section#main-body .sidebar .list-group-item:not(.active):not(:hover){
background:#fff!important;
color:#071126!important;
opacity:1!important;
}

html body section#main-body .sidebar .list-group-item.active,
html body section#main-body .card-sidebar .list-group-item.active{
background:#EC008C!important;
border-color:#EC008C!important;
color:#fff!important;
}

@media(max-width:767px){
html body section#main-body .primary-content .symes-hero{
padding:38px 22px!important;
}

html body section#main-body .primary-content .symes-hero h1{
font-size:32px!important;
}

html body section#main-body .primary-content .symes-hero .symes-buttons{
display:block!important;
}

html body section#main-body .primary-content .symes-hero .symes-buttons .btn{
width:100%!important;
margin:8px 0!important;
}
}


/* ==========================================
SYMES CLIENT AREA HOMEPAGE - MATCH PUBLIC HOME
Refines /clientarea.php custom dashboard to match the public homepage branding.
Scoped to pages containing .symes-hero only.
========================================== */

/* Main client dashboard layout */
html body section#main-body .primary-content:has(.symes-hero){
background:#fff!important;
border-radius:0!important;
box-shadow:none!important;
border:0!important;
padding:0!important;
}

/* Client area hero should feel like the public homepage hero */
html body section#main-body .primary-content .symes-hero{
background:#050505!important;
border-top:3px solid #EC008C!important;
border-bottom:3px solid #EC008C!important;
border-left:0!important;
border-right:0!important;
border-radius:0!important;
padding:72px 54px!important;
margin:0 0 54px!important;
box-shadow:0 22px 54px rgba(0,0,0,.18)!important;
text-align:center!important;
}

html body section#main-body .primary-content .symes-hero h1{
color:#fff!important;
font-size:clamp(38px,4.4vw,62px)!important;
line-height:1.06!important;
font-weight:900!important;
letter-spacing:.045em!important;
max-width:920px!important;
margin:0 auto 20px!important;
text-align:center!important;
}

html body section#main-body .primary-content .symes-hero p{
color:#fff!important;
font-size:18px!important;
font-weight:600!important;
line-height:1.55!important;
max-width:860px!important;
margin:0 auto 30px!important;
text-align:center!important;
opacity:1!important;
}

/* Client area hero buttons */
html body section#main-body .primary-content .symes-hero .symes-buttons{
display:flex!important;
justify-content:center!important;
align-items:center!important;
flex-wrap:wrap!important;
gap:18px!important;
margin:32px auto 0!important;
}

html body section#main-body .primary-content .symes-hero .symes-buttons .btn,
html body section#main-body .primary-content .symes-hero .symes-buttons a.btn{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:48px!important;
padding:13px 34px!important;
border-radius:999px!important;
font-size:15px!important;
font-weight:900!important;
letter-spacing:.03em!important;
text-decoration:none!important;
opacity:1!important;
visibility:visible!important;
}

/* Browse Services */
html body section#main-body .primary-content .symes-hero .symes-buttons a[href="/store"],
html body section#main-body .primary-content .symes-hero .symes-buttons .btn-primary{
background:#EC008C!important;
border:2px solid #EC008C!important;
color:#fff!important;
}

/* Get Support */
html body section#main-body .primary-content .symes-hero .symes-buttons a[href="/submitticket.php"],
html body section#main-body .primary-content .symes-hero .symes-buttons .btn-outline-light{
background:transparent!important;
border:2px solid #fff!important;
color:#fff!important;
}

/* Hover states */
html body section#main-body .primary-content .symes-hero .symes-buttons a[href="/store"]:hover,
html body section#main-body .primary-content .symes-hero .symes-buttons .btn-primary:hover{
background:#d90078!important;
border-color:#d90078!important;
color:#fff!important;
transform:translateY(-2px)!important;
}

html body section#main-body .primary-content .symes-hero .symes-buttons a[href="/submitticket.php"]:hover,
html body section#main-body .primary-content .symes-hero .symes-buttons .btn-outline-light:hover{
background:#EC008C!important;
border-color:#EC008C!important;
color:#fff!important;
transform:translateY(-2px)!important;
}

/* The service cards section immediately after the hero */
html body section#main-body .primary-content .symes-hero + .container{
max-width:100%!important;
padding:0 42px!important;
margin:0 auto!important;
}

html body section#main-body .primary-content .symes-hero + .container .row{
display:flex!important;
justify-content:center!important;
gap:28px!important;
margin:0!important;
}

html body section#main-body .primary-content .symes-hero + .container .row > div{
flex:1 1 0!important;
max-width:300px!important;
padding:0!important;
}

/* Make dashboard cards match the black homepage cards */
html body section#main-body .primary-content .symes-hero + .container .row > div > div,
html body section#main-body .primary-content .symes-hero + .container .card,
html body section#main-body .primary-content .symes-hero + .container .symes-card{
background:#050505!important;
border:2px solid #EC008C!important;
border-radius:18px!important;
box-shadow:0 18px 42px rgba(0,0,0,.18)!important;
min-height:170px!important;
padding:32px 24px!important;
text-align:center!important;
transition:all .18s ease!important;
}

html body section#main-body .primary-content .symes-hero + .container .row > div > div:hover,
html body section#main-body .primary-content .symes-hero + .container .card:hover,
html body section#main-body .primary-content .symes-hero + .container .symes-card:hover{
transform:translateY(-4px)!important;
box-shadow:0 24px 54px rgba(236,0,140,.18)!important;
}

/* Card text */
html body section#main-body .primary-content .symes-hero + .container h2,
html body section#main-body .primary-content .symes-hero + .container h3,
html body section#main-body .primary-content .symes-hero + .container h4{
color:#fff!important;
font-size:24px!important;
line-height:1.15!important;
font-weight:900!important;
letter-spacing:.035em!important;
margin:0 0 12px!important;
text-align:center!important;
}

html body section#main-body .primary-content .symes-hero + .container p{
color:#fff!important;
font-size:14px!important;
font-weight:700!important;
line-height:1.45!important;
text-align:center!important;
opacity:1!important;
}

/* Card buttons */
html body section#main-body .primary-content .symes-hero + .container .btn,
html body section#main-body .primary-content .symes-hero + .container a.btn{
background:#EC008C!important;
border:2px solid #EC008C!important;
color:#fff!important;
border-radius:999px!important;
font-weight:900!important;
padding:10px 26px!important;
margin-top:14px!important;
}

html body section#main-body .primary-content .symes-hero + .container .btn:hover,
html body section#main-body .primary-content .symes-hero + .container a.btn:hover{
background:#d90078!important;
border-color:#d90078!important;
color:#fff!important;
}

/* Why choose row should sit cleanly under the cards */
html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"]{
margin-top:62px!important;
padding:0!important;
text-align:center!important;
}

html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"] h2{
color:#071126!important;
font-size:clamp(30px,3vw,44px)!important;
font-weight:900!important;
letter-spacing:.04em!important;
margin-bottom:26px!important;
}

html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"] p,
html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"] span,
html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"] div{
color:#071126!important;
font-weight:700!important;
}

/* Sidebar tidy-up for client dashboard */
html body section#main-body .sidebar .list-group-item:not(.active),
html body section#main-body .card-sidebar .list-group-item:not(.active){
background:#fff!important;
color:#071126!important;
opacity:1!important;
}

html body section#main-body .sidebar .list-group-item.disabled,
html body section#main-body .sidebar .list-group-item.text-muted,
html body section#main-body .card-sidebar .list-group-item.disabled,
html body section#main-body .card-sidebar .list-group-item.text-muted{
background:#F9FAFB!important;
color:#6B7280!important;
opacity:1!important;
}

html body section#main-body .sidebar .list-group-item.active,
html body section#main-body .card-sidebar .list-group-item.active{
background:#EC008C!important;
border-color:#EC008C!important;
color:#fff!important;
}

/* Mobile */
@media(max-width:991px){
html body section#main-body .primary-content .symes-hero{
padding:54px 28px!important;
}

html body section#main-body .primary-content .symes-hero + .container{
padding:0 20px!important;
}

html body section#main-body .primary-content .symes-hero + .container .row{
display:block!important;
}

html body section#main-body .primary-content .symes-hero + .container .row > div{
max-width:100%!important;
margin:0 0 22px!important;
}
}

@media(max-width:767px){
html body section#main-body .primary-content .symes-hero{
padding:42px 22px!important;
}

html body section#main-body .primary-content .symes-hero h1{
font-size:34px!important;
}

html body section#main-body .primary-content .symes-hero .symes-buttons{
display:block!important;
}

html body section#main-body .primary-content .symes-hero .symes-buttons .btn{
width:100%!important;
margin:8px 0!important;
}
}


/* ==========================================
SYMES CLIENT AREA WHY CHOOSE POLISH
Adds proper padding/surrounds under the client dashboard cards.
========================================== */

html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"]{
background:#fff!important;
border-top:2px solid #EC008C!important;
border-radius:0 0 24px 24px!important;
padding:56px 42px 48px!important;
margin:64px 0 0!important;
box-shadow:0 18px 44px rgba(0,0,0,.08)!important;
text-align:center!important;
}

html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"] h2{
color:#071126!important;
font-size:clamp(30px,3vw,44px)!important;
font-weight:900!important;
letter-spacing:.045em!important;
line-height:1.15!important;
margin:0 0 34px!important;
}

html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"] .row,
html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"] > div{
display:flex!important;
justify-content:center!important;
align-items:center!important;
gap:28px!important;
flex-wrap:wrap!important;
}

html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"] p,
html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"] span,
html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"] div{
color:#071126!important;
font-weight:800!important;
line-height:1.45!important;
}

html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"] p{
background:#F9FAFB!important;
border:1px solid #E5E7EB!important;
border-radius:999px!important;
padding:10px 18px!important;
margin:0!important;
min-width:170px!important;
}

@media(max-width:767px){
html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"]{
padding:38px 22px 34px!important;
margin-top:42px!important;
}

html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"] .row,
html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"] > div{
display:block!important;
}

html body section#main-body .primary-content .symes-hero + .container [style*="margin-top:50px"] p{
display:block!important;
width:100%!important;
margin:10px 0!important;
}
}


/* ==========================================
SYMES FOOTER NAVIGATION ENHANCEMENT
========================================== */

html body .symes-footer{
background:#050505!important;
border-top:3px solid #EC008C!important;
padding:64px 0 34px!important;
color:#fff!important;
}

html body .symes-footer .container{
max-width:1280px!important;
}

html body .symes-footer-grid{
display:grid!important;
grid-template-columns:1.4fr 1fr 1fr 1fr!important;
gap:36px!important;
align-items:start!important;
margin-bottom:42px!important;
}

html body .symes-footer h3,
html body .symes-footer h4{
color:#fff!important;
font-weight:900!important;
letter-spacing:.04em!important;
margin:0 0 16px!important;
line-height:1.15!important;
}

html body .symes-footer h3{
font-size:30px!important;
}

html body .symes-footer h4{
font-size:18px!important;
}

html body .symes-footer p{
color:rgba(255,255,255,.82)!important;
font-size:15px!important;
line-height:1.7!important;
margin:0 0 22px!important;
max-width:430px!important;
}

html body .symes-footer ul{
list-style:none!important;
padding:0!important;
margin:0!important;
}

html body .symes-footer li{
margin:0 0 10px!important;
padding:0!important;
}

html body .symes-footer a{
color:rgba(255,255,255,.82)!important;
text-decoration:none!important;
font-weight:700!important;
transition:color .18s ease, transform .18s ease!important;
}

html body .symes-footer a:hover{
color:#EC008C!important;
text-decoration:none!important;
}

html body .symes-footer-actions{
display:flex!important;
flex-wrap:wrap!important;
gap:12px!important;
}

html body .symes-footer-btn{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:42px!important;
padding:11px 20px!important;
border-radius:999px!important;
font-weight:900!important;
letter-spacing:.03em!important;
}

html body .symes-footer-btn-primary{
background:#EC008C!important;
border:1px solid #EC008C!important;
color:#fff!important;
}

html body .symes-footer-btn-outline{
background:transparent!important;
border:1px solid rgba(255,255,255,.72)!important;
color:#fff!important;
}

html body .symes-footer-btn:hover{
background:#fff!important;
border-color:#fff!important;
color:#050505!important;
}

html body .symes-footer-bottom{
display:grid!important;
grid-template-columns:1fr auto 1fr!important;
gap:24px!important;
align-items:center!important;
padding-top:28px!important;
border-top:1px solid rgba(255,255,255,.12)!important;
}

html body .symes-footer-legal{
display:flex!important;
flex-wrap:wrap!important;
gap:18px!important;
align-items:center!important;
justify-content:flex-start!important;
}

html body .symes-footer .copyright{
color:rgba(255,255,255,.66)!important;
text-align:center!important;
font-size:14px!important;
font-weight:700!important;
white-space:nowrap!important;
}

html body .symes-footer-localisation{
display:flex!important;
justify-content:flex-end!important;
align-items:center!important;
}

html body .symes-footer-localisation .btn{
background:rgba(255,255,255,.08)!important;
border:1px solid rgba(255,255,255,.16)!important;
border-radius:999px!important;
color:#fff!important;
padding:10px 18px!important;
font-weight:900!important;
}

html body .symes-footer-localisation .btn:hover{
background:#EC008C!important;
border-color:#EC008C!important;
color:#fff!important;
}

@media(max-width:991px){
html body .symes-footer-grid{
grid-template-columns:1fr 1fr!important;
gap:30px!important;
}

html body .symes-footer-bottom{
grid-template-columns:1fr!important;
text-align:center!important;
}

html body .symes-footer-legal,
html body .symes-footer-localisation{
justify-content:center!important;
}

html body .symes-footer .copyright{
white-space:normal!important;
}
}

@media(max-width:575px){
html body .symes-footer{
padding:44px 0 28px!important;
}

html body .symes-footer-grid{
grid-template-columns:1fr!important;
}

html body .symes-footer h3{
font-size:24px!important;
}

html body .symes-footer-actions{
display:block!important;
}

html body .symes-footer-btn{
width:100%!important;
margin-bottom:10px!important;
}
}