@import url('//ugyfel.teamunity.hu/templates/hostiko/layouts/wp-86/https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');


:root{
    /* Same in all */
    --global--color-primary:#333333;
    --global--color-accent:#050505;
    --global--color-black:#000000;
    --global--color-white:#ffffff;
    --global--color-very-light-gray:#e5e5e5;
    --global--color-grayish-blue:#b7bcc4;
    --global--color-strong-cyan:#08bba4;
    --global--color-strong-red: #c0392b;
    --global--color-vivid-yellow: #f1c40f;
    --global--color-dark-grayish-cyan:#7f8c8d;
    --global--color-moderate-lime-green: #5cb85c;
    --global--color-very-dark-desaturated-blue: #2c3e50;
    --global--color-very-light-gray-mostly-white:#f9f9f9;
    --global--color-very-dark-black-blue:#0c2a3f;
    --global--color-very-light-gray-bg: #f1f1f1;
    /* Change */
    --global--color-very-light-white:#f6f6f6;
    --global--color-dark-gray:#271d1d;
    --global--color-dark-mostly-black-blue: #151921;
    --global--color-light-grayish-blue:#e7f6fd;
    --global--color-very-dark-gray-mostly-black: #1C2B36;    
    --global--color-bright-orange:#ff7800;
    --global--color-text:#7c7c7c;
    --global--color-copyright-border:#e5e5e5;
    --global--color-breadcrumb-border: #353433;
    --global--button-border-radius: 30px;
    --global--box-border-radius: 30px;
    --global--social-icon-border-radius: 100px;
    --global--dropdown-border-radius: 20px;
    --global--border-all-side: 1px solid rgba(255,255,255,0.25);

    /* =========================================================================
       Hostiko Design System Tokens (Phase 1 — 2026)
       -------------------------------------------------------------------------
       Használati útmutató:
       - Shadow:  .hostiko-card { box-shadow: var(--hostiko-shadow-sm); }
       - Radius:  .hostiko-panel { border-radius: var(--hostiko-radius-md); }
       - Motion:  transition: transform var(--hostiko-duration-fast) var(--hostiko-ease-out);
       - Spacing: padding: var(--hostiko-gap-md) var(--hostiko-gap-lg);
       - Focus:   :focus-visible { box-shadow: var(--hostiko-shadow-focus); }
       Új értékek helyett MINDIG tokenből dolgozz — ha nincs megfelelő token,
       bővítsd a skálát itt, ne írj literált a komponensbe.
       ========================================================================= */

    /* Shadow skála — emelkedő elevation-rend */
    --hostiko-shadow-xs: 0 1px 2px rgba(20, 22, 26, 0.04);
    --hostiko-shadow-sm: 0 2px 8px rgba(20, 22, 26, 0.06), 0 1px 2px rgba(20, 22, 26, 0.04);
    --hostiko-shadow-md: 0 8px 24px rgba(20, 22, 26, 0.08), 0 2px 6px rgba(20, 22, 26, 0.04);
    --hostiko-shadow-lg: 0 16px 48px rgba(20, 22, 26, 0.12), 0 4px 12px rgba(20, 22, 26, 0.06);
    --hostiko-shadow-focus: 0 0 0 3px rgba(255, 120, 0, 0.35);

    /* Radius skála — konzisztens sarok-lépcső */
    --hostiko-radius-xs: 6px;    /* chips, badges, tags */
    --hostiko-radius-sm: 12px;   /* inputs, small controls */
    --hostiko-radius-md: 16px;   /* panels, table-wrapper */
    --hostiko-radius-lg: 20px;   /* cards, feature blocks */
    --hostiko-radius-xl: 30px;   /* CTA pills, hero buttons (= --global--button-border-radius) */

    /* Motion tokenek — easing + duration */
    --hostiko-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --hostiko-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --hostiko-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --hostiko-duration-fast: 150ms;
    --hostiko-duration-base: 250ms;
    --hostiko-duration-slow: 400ms;

    /* Spacing skála — 4/8/16/24/32 px stack */
    --hostiko-gap-xs: 4px;
    --hostiko-gap-sm: 8px;
    --hostiko-gap-md: 16px;
    --hostiko-gap-lg: 24px;
    --hostiko-gap-xl: 32px;
}

/* =============================================================================
   Hostiko shared utility components (Phase 1)
   ============================================================================= */

/* Card shell — alap card-tartalom, radius + shadow + hover-emelés */
.hostiko-card {
    background: var(--global--color-white);
    border-radius: var(--hostiko-radius-lg);
    box-shadow: var(--hostiko-shadow-sm);
    padding: var(--hostiko-gap-lg);
    transition: transform var(--hostiko-duration-fast) var(--hostiko-ease-out),
                box-shadow var(--hostiko-duration-base) var(--hostiko-ease-out);
}
.hostiko-card:hover {
    box-shadow: var(--hostiko-shadow-md);
    transform: translateY(-2px);
}

/* Chip — pills/badges a UI-ban */
.hostiko-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--hostiko-gap-xs);
    padding: 4px 10px;
    border-radius: var(--hostiko-radius-xs);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    background: var(--global--color-very-light-gray-bg);
    color: var(--global--color-text);
}
.hostiko-chip--primary { background: rgba(255, 120, 0, 0.12); color: var(--global--color-bright-orange); }
.hostiko-chip--success { background: rgba(92, 184, 92, 0.12); color: var(--global--color-moderate-lime-green); }
.hostiko-chip--danger  { background: rgba(192, 57, 43, 0.12); color: var(--global--color-strong-red); }
.hostiko-chip--warning { background: rgba(241, 196, 15, 0.16); color: #c8a010; }

/* Skeleton loader — shimmer animáció (Phase 3/5-ben aktiválódik markup-pal) */
@keyframes hostiko-skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.hostiko-skeleton {
    display: block;
    background: linear-gradient(
        90deg,
        rgba(231, 231, 231, 0.6) 0%,
        rgba(245, 245, 245, 0.9) 50%,
        rgba(231, 231, 231, 0.6) 100%
    );
    background-size: 200% 100%;
    animation: hostiko-skeleton-shimmer 1.6s var(--hostiko-ease-in-out) infinite;
    border-radius: var(--hostiko-radius-sm);
    min-height: 1em;
}
.hostiko-skeleton--text { height: 1em; margin: 6px 0; width: 100%; }
.hostiko-skeleton--text.is-short { width: 60%; }
.hostiko-skeleton--text.is-tiny  { width: 30%; }
.hostiko-skeleton--card { min-height: 120px; border-radius: var(--hostiko-radius-lg); }
.hostiko-skeleton--avatar { width: 48px; height: 48px; border-radius: 50%; }

/* Focus-ring mixin — Phase 6-ban globálisan alkalmazva */
.hostiko-focus-ring:focus-visible {
    outline: none;
    box-shadow: var(--hostiko-shadow-focus);
}

/* Empty state component (Phase 3) — egységes "Még nincs semmi" élmény
   Használat:
   <div class="hostiko-empty">
       <div class="hostiko-empty-icon"><i class="fas fa-globe"></i></div>
       <h4 class="hostiko-empty-title">Még nincs domainje</h4>
       <p class="hostiko-empty-desc">Regisztráljon egy új domaint vagy hozzon át meglévőt.</p>
       <a href="..." class="btn btn-primary hostiko-empty-cta">Domain keresése</a>
   </div>
*/
.hostiko-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--hostiko-gap-xl) var(--hostiko-gap-lg);
    max-width: 440px;
    margin: var(--hostiko-gap-lg) auto;
    background: var(--global--color-white);
    border-radius: var(--hostiko-radius-lg);
    box-shadow: var(--hostiko-shadow-sm);
}
.hostiko-empty-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 120, 0, 0.12);
    color: var(--global--color-bright-orange);
    font-size: 32px;
    margin-bottom: var(--hostiko-gap-md);
}
.hostiko-empty-icon .fas,
.hostiko-empty-icon .fal,
.hostiko-empty-icon .far {
    font-size: 32px;
    line-height: 1;
}
.hostiko-empty-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--global--color-very-dark-black-blue);
    margin: 0 0 var(--hostiko-gap-sm) 0;
    line-height: 1.3;
}
.hostiko-empty-desc {
    color: var(--global--color-text);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0 0 var(--hostiko-gap-lg) 0;
    max-width: 360px;
}
.hostiko-empty-cta {
    border-radius: var(--hostiko-radius-xl);
    padding: 10px 24px;
    font-weight: 600;
    transition: transform var(--hostiko-duration-fast) var(--hostiko-ease-out),
                box-shadow var(--hostiko-duration-base) var(--hostiko-ease-out);
}
.hostiko-empty-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--hostiko-shadow-md);
}
.hostiko-empty--compact {
    padding: var(--hostiko-gap-lg);
    margin: var(--hostiko-gap-md) auto;
    box-shadow: none;
    background: transparent;
}
.hostiko-empty--compact .hostiko-empty-icon {
    width: 56px;
    height: 56px;
    font-size: 22px;
}
.hostiko-empty--compact .hostiko-empty-icon .fas,
.hostiko-empty--compact .hostiko-empty-icon .fal,
.hostiko-empty--compact .hostiko-empty-icon .far {
    font-size: 22px;
}
.hostiko-empty--compact .hostiko-empty-title {
    font-size: 1.0625rem;
}
@media (max-width: 575.98px) {
    .hostiko-empty {
        padding: var(--hostiko-gap-lg) var(--hostiko-gap-md);
    }
    .hostiko-empty-icon {
        width: 64px;
        height: 64px;
        font-size: 26px;
    }
    .hostiko-empty-title {
        font-size: 1.125rem;
    }
}

body{font-family: 'Inter', sans-serif;}
h1{
    font-size: 38px;
    line-height: 42px;
    font-weight: 700;
}
h3{
    font-size: 36px;
    line-height: 42px;
    font-weight: 700;
}
h4{
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
}
.text-size-14{
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
}
.text-size-18{
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
}
.btn {
    border-radius: var(--global--button-border-radius);
}
.top-bar-section {background: var(--global--color-black); border-bottom: 1px solid var(--global--color-breadcrumb-border);}
.top-bar-section .top-bar{display: flex; justify-content: space-between; align-items: center;}
.top-bar-section .top-bar ul{padding-left: 0; margin: 5px 0px 10px 0px; }
.top-bar-section .top-bar ul li{
    list-style: none; display: inline-block;  
}
.top-bar-section .top-bar ul .dropdown-item a{ 
    color: var(--global--color-dark-gray); 
}
.top-bar-section .top-bar ul li a{ 
    border-right: var(--global--border-all-side); 
}

.top-bar-section .top-bar ul li a{
    color: var(--global--color-white);
    padding: 0 10px;
    font-size: 12px;
    font-weight: 400;
}
.top-bar-section .top-bar ul li a:hover{
    text-decoration: none;
}
.topbar-search .btn:hover {
    background-color: transparent !important;
    border-bottom: var(--global--border-all-side) !important; 
}
.top-bar-section .top-bar ul li:last-child a{padding-right: 0; border-right: none;}
/* .top-bar-section .top-bar ul li :last-child{border-right: none;} */
.top-bar-section .top-bar ul li:first-child a{padding-left: 0;}
.top-bar-section .btn:focus{
    background-color: transparent !important;
    border-bottom: var(--global--border-all-side) !important;
}
.top-bar-section .form-control{border-radius: 0; background: transparent !important; border: none; border-bottom: var(--global--border-all-side) !important; color: var(--global--color-white); font-size: 12px;}
.top-bar-section .btn-default{border-radius: 0; background: transparent !important; border: none; border-bottom: var(--global--border-all-side) !important; color: var(--global--color-white); font-size: 12px; padding: 6px 4px;}
.top-bar-section .top-bar-right-content i{font-size: 16px; }
.top-bar-section .nav-item .cart-btn .badge-info{position: absolute; top: -5px; right: 3px; font-size: 8px;}
.top-bar-section ::placeholder {color: var(--global--color-white); opacity: 0.8; }
.top-bar-section ::-ms-input-placeholder { color: var(--global--color-white); opacity: 0.8; }

.top-bar-section .nav-item .cart-btn {
    display: inline-block;
    position: relative;
    overflow: visible;
    border-radius: 0;
    background: transparent !important;
    border: none;
    border-right: var(--global--border-all-side);
}
.top-bar-section .nav-item .cart-btn:focus{
    border: none !important;
    border-right: var(--global--border-all-side) !important;
}

.topbar .form-control{background: transparent !important; border: none !important; border-bottom: var(--global--border-all-side) !important; color: var(--global--color-white); font-size: 12px !important;}
#header.header .search {border: none !important; width: auto;}
#header.header .btn {font-size: 12px;}
#header.header .search .form-control {
    padding: 6px !important;
}
.topbar .btn-default{background: transparent !important; border: none !important; border-bottom: var(--global--border-all-side) !important; color: var(--global--color-white); font-size: 12px !important; padding: 6px 4px;}
.topbar .top-bar-right-content i{font-size: 16px; width: 20px; height: 32px; line-height: 32px; }
.topbar .nav-item .cart-btn {display: inline-block; position: relative; }
.topbar .nav-item .cart-btn .badge-info{position: absolute; top: -6px; right: 2px; font-size: 8px;}
.topbar ::placeholder {color: var(--global--color-white); opacity: 0.8; }
.topbar ::-ms-input-placeholder { color: var(--global--color-white); opacity: 0.8; }

.sign-in-topbar-right{list-style: none; display: inline-block; margin-bottom: 0;}
.sign-in-topbar-right li{list-style: none; display: inline-block;}
.sign-in-topbar-right li:last-child{border: none;}


#header .navbar.navbar-light {
    background-color: transparent;
    /* box-shadow: 1px 2px 61px 0px rgba(0, 0, 0, 0.10); */
    padding: 20px 0;
    margin-bottom: -85px;
    position: relative;
    z-index: 10;
}
#header.header form .btn {font-size: 16px; color: var(--global--color-dark-gray) !important;}
/* #header.header .search{border-bottom: 1px solid var(--global--color-very-light-gray); border-radius: 22.5px;} */
#header.header .form-control{background-color: transparent; padding: 22px 11px;  font-size: 14px; border-radius: 0;}
#header.header .btn-default{background-color: transparent;}
#header.header .toolbar .nav-link{border-radius: 0; background:var(--global--color-bright-orange); color: var(--global--color-white); border-radius: 100%;  height: 48px; width: 48px; padding: 0; font-size: 16px; line-height: 48px; border: none; overflow: visible;}
#header.header .toolbar .nav-link i{color:var(--global--color-white);}
#header.header .toolbar .nav-link:focus {
    color: var(--global--color-white);
    background:var(--global--color-bright-orange) !important;
}

.navbar-default {background-color:var(--global--color-white)}
.navbar-default .navbar-nav>li>a {color:var(--global--color-black)}
.padding_top_70{padding-top:70px;}
.padding_bottom_70{padding-bottom:70px;}
.font-18{font-size:18px;}
.main-header ul li a{font-size:14px;padding:20px!important;font-weight:500;}
.main-header ul li a:hover{background-color:var( --global--color-black);color:var(--global--color-voilet)}
.main-header .dropdown-menu{background-color:var(--global--color-orange);box-shadow:0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);border:none}
.main-header .dropdown-menu a{color:var(--global--color-nav);padding:15px 20px!important;line-height:14px;}
#header .navbar-collapse a{font-size: 14px; font-weight: 500; display:block !important; text-transform: uppercase; color:var(--global--color-white); padding:12px 20px !important;}
#header .navbar-collapse li#Primary_Navbar-Home:first-child a{padding-left: 0 !important;}
#header #mainNavbar .navbar-nav #Primary_Navbar-Contact_Us a{color: var(--global--color-white) !important; background-color: var(--global--color-bright-orange) !important; border: 1px solid var(--global--color-bright-orange); border-radius: var(--global--button-border-radius); padding: 10px 17px !important; font-size: 14px; text-transform: uppercase; font-family: 'Inter', sans-serif; font-weight: 500;  margin-left: 25px;}
#header .navbar-collapse li#Secondary_Navbar-Account:first-child a{padding-right: 0 !important;}
#header .navbar-collapse ul li a:hover{background-color:transparent ;text-decoration:none; color: var(--global--color-bright-orange);}
#header.header .toolbar .nav-link .badge{top: -2px; right: 0px; opacity: 1;}
#header.header .toolbar .nav-link .badge.badge-info{background-color: var(--global--color-white); color: var(--global--color-black);box-shadow: 0px 0px 1px rgba(0,0,0,0.2);}
#header .dropdown-menu{border-radius: 12px;}
#header #mainNavbar .navbar-nav #Primary_Navbar-Contact_Us a:hover{
    background-color: transparent !important;
    border: 1px solid var(--global--color-white);
    color: var(--global--color-white) !important;
}
/* Logged In Top Bar */
#header.header .topbar{background: var(--global--color-black); border-bottom: 1px solid var(--global--color-breadcrumb-border); padding: 5px 0 10px 0; border-radius: 0;}
#header.header .topbar .btn{color: var(--global--color-white) !important; border-radius: 0; background: transparent !important;}
#header.header .topbar .btn:focus{
    border-bottom: var(--global--border-all-side) !important;
}
#header.header .topbar #accountNotifications{border: none !important;}
#header.header .topbar .active-client { line-height: 1.5; }
#header.header .topbar .active-client li a{font-size: 12px; color: var(--global--color-white);}
#header.header .topbar .active-client li .dropdown-menu li a{color: var(--global--color-primary);}

#header.header .topbar .active-client .input-group-text{color: var(--global--color-white);}
#header.header .topbar .active-client .btn{color: var(--global--color-white); padding: 0 10px; font-weight: 400; border: none;  border-right: var(--global--border-all-side); border-radius: 0; overflow: visible;}
#header.header .topbar .active-client .btn:focus{
    border: none !important;
    border-right: var(--global--border-all-side) !important;
}
.main-header .dropdown-menu a:hover{background-color: var(--global--color-black);}

#header .navbar-brand{color:var(--global--color-white)}

#Secondary_Navbar-Account{display: inline-block !important;}

#header .navbar-collapse{padding:0!important}

#header .main-navbar-wrapper .dropdown-menu a{font-size:14px;color:var(--global--color-dark-gray)!important;padding:0!important;text-decoration:none;padding:0 15px!important;line-height:36px;}



#header .main-navbar-wrapper .dropdown-menu li{padding:0}
#header .main-navbar-wrapper .dropdown-menu a:hover{background-color:var(--global--color-very-light-gray)!important;}


/* Banner Section */

.hostiko-banner-whmcs{
    background: url(https://teamunity.hu/whmcs-sync/?ccce=js&ajax=1&js=templates/hostiko/layouts/wp-86/./assets/images/banner-backgroundimage86.png);
    /* background-color: var(--global--color-light-grayish-blue); */
    background-position: center;
    background-size: cover;
    padding: 238px 0 182px;
}
.hostiko-banner-whmcs .master-breadcrumb, .hostiko-banner-whmcs .breadcrumb{background: transparent; text-align: center;}
.hostiko-banner-whmcs .breadcrumb{justify-content: center;}

/* Domain Search Section */
.hostiko-domain-search .home-domain-search .container{max-width: 1000px;}
.hostiko-domain-search .home-domain-search {background-color: var(--global--color-white) !important; padding: 70px 0px;}
.hostiko-domain-search .home-domain-search .input-group{align-items: center;}
.hostiko-domain-search .home-domain-search .btn-primary,#main-body .btn-outline-primary{border-color: var(--global--color-white); background-color: #131329;}
.hostiko-domain-search .home-domain-search h2,#default-captcha-domainchecker, .home-domain-search .btn-link,#main-body .btn-outline-primary{font-size: 20px; font-weight: 600; text-transform: capitalize; color:var(--global--color-primary); color: var(--global--color-black);}
/* .hostiko-domain-search .home-domain-search .tld-logos {color: var(--global--color-bright-orange);} */
.hostiko-domain-search .home-domain-search .input-group-wrapper{border: none; font-size: 14px; font-weight: 400; font-family: 'Inter', sans-serif; background: var(--global--color-white); border-radius: var(--global--button-border-radius); padding: 11px 10px 11px 20px; box-shadow: 1px 2px 60px 0px rgba(0,0,0,0.1);}
.hostiko-domain-search .home-domain-search .btn-primary, #main-body .btn-outline-primary{background-color: var(--global--color-bright-orange); border: 1px solid var(--global--color-bright-orange); color:var(--global--color-white); padding: 12px 25px; border-radius: var(--global--button-border-radius) !important; font-size: 14px; font-family: 'Inter', sans-serif; font-weight: 600;text-transform: uppercase;}
.hostiko-domain-search .home-domain-search .btn-success{background-color: var(--global--color-primary); border: 1px solid var(--global--color-primary); color: var(--global--color-white); padding: 12px 25px; border-radius: var(--global--button-border-radius) !important; font-size: 14px; font-family: 'Inter', sans-serif; font-weight: 600; text-transform: uppercase; display: inline-block;}
.hostiko-domain-search .home-domain-search .btn-link{display:inline-block; box-shadow:none; color: var(--global--color-primary); font-size: 14px; padding: 10px !important; border: none !important;}
.hostiko-domain-search .home-domain-search .btn-link:focus {
    color: var(--global--color-very-dark-gray-mostly-black) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.home-domain-search .tld-logos img {
    width: auto !important;
    display: block;
    margin-bottom: 8px;
}
.hostiko-domain-search .home-domain-search .tld-logos li {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    padding: 0 35px 0 30px;
    color: var(--global--color-primary);
    border-right: 2px solid var(--global--color-very-light-white);
}
.hostiko-domain-search .home-domain-search .tld-logos li:first-child {
    padding-left: 0;
}
.hostiko-domain-search .home-domain-search .tld-logos li:last-child {
    border: none;
    padding-right: 0;
}
.hostiko-domain-search .home-domain-search .btn-link:focus-visible{
    outline: none;
}
.home-domain-search .input-group-wrapper {
    margin: 35px 0;
}
.hostiko-domain-search .home-domain-search h2{
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 55px;
    text-transform: capitalize;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: var(--global--color-primary);
}
.input-group .input-group-append .btn{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.hostiko-domain-search .home-domain-search .btn-primary{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-bright-orange) !important;
    border: 1px solid var(--global--color-bright-orange) !important;
}
.hostiko-domain-search .home-domain-search .btn-primary:hover{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary) !important;
    border: 1px solid var(--global--color-primary) !important;
}
.hostiko-domain-search .home-domain-search .btn-success:hover {
    color: var(--global--color-white) !important;
    background: var(--global--color-bright-orange) !important;
    border: 1px solid var(--global--color-bright-orange) !important;
}
.list-group-item.active{background-color:var(--global--color-bright-orange); border-color: var(--global--color-bright-orange);}
/* .btn-success{background-color:var(--global--color-orange);border-color:var(--global--color-orange);color:var(--global--color-blue)} */
.btn-order-now {
    padding: 10px;
}
.btn-success {
    padding: 13px;
    background-color: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    color: var(--global--color-white);
    display: block;
}
.btn-success:hover{color:var(--global--color-white) !important;background-color:var(--global--color-primary);border-color:var(--global--color-primary)}
.card-header{background-color:var(--global--color-accent);color:var(--global--color-white)}
.card-header h4{margin-bottom:0;}

#main-body {background: var(--global--color-white);}
#main-body h2{font-family: 'Inter', sans-serif; font-size:42px; font-weight: 700; color: var(--global--color-primary);}
/* =================================== Banner ====================================== */

.primary-content .home .card{min-height:250px; background: var(--global--color-white); box-shadow: 1px 2px 61px 0px rgba(0, 0, 0, 0.13); border-radius:20px}
.primary-content .home .card:hover{ border-top: 1px solid var(--global--color-bright-orange);}
.sidebar .list-group-item.active, .sidebar .list-group-item.active:focus, .sidebar .list-group-item.active:hover{background-color:var(--global--color-bright-orange);border-color:var(--global--color-bright-orange)}
.btn-block{
color: var(--global--color-white) !important;
}
.input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child), .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* =================================== Footer ====================================== */
/* .footer-heading{color:var(--global--color-black);}
footer.footer{background-color:var(--global--color-white);}
footer.footer .btn{background-color:var(--global--color-blue);}
footer.footer .copyright{color:var(--global--color-black)}
.home-domain-search .btn-success:hover{background-color:var(--global--color-black) !important;border-color:var(--global--color-black) !important;color:var(--global--color-voilet) !important}
footer.footer .nav-link{color:var(--global--color-white);background-color:#087FFF;border-radius:4px;}
.footer_logo_box .copyright{font-size:14px;color:var(--global--color-dark-gray);line-height:22px;}
.footer_logo_box .copyright span a{color:var(--global--color-orange);}
.footer-box{background:#fff;border:solid 1px #ddd}
#hostiko-footer ul li a{font-weight:300;letter-spacing:1px;transition:all ease-in-out .6s;color:#ababab}
.footer-box ul li a{font-size:14px;font-weight:300;color:var(--global--color-dark-gray);line-height:2px;}
.footer-box h5{margin-bottom:15px;font-weight:600;}
.footer_info a,.footer-box ul li a:hover{color:var(--global--color-orange)!important}
.footer_info li, .footer_info li span{color:var(--global--color-dark-gray);font-size:14px;}
.footer_info li{padding-bottom:10px;}
.footer_social_links li{display:inline-block;margin-right:5px} */
section#main-body {
    margin: 0;
    padding: 90px 0 130px;
    min-height: 350px;
    overflow: hidden;
}
.requestor-type-owner {
    background-color: var(--global--color-primary);
}
.text-success {
    color: var(--global--color-strong-red) !important;
}
/* Footer */

.footer-section{
    background: var(--global--color-very-light-gray-mostly-white);
    position: relative;
}
.footer-section .contact-section{
    margin-top: -88px;
    padding: 50px 42px 54px 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--global--box-border-radius);
    background: var(--global--color-bright-orange);
}
.footer-section .contact-section .content h3{
    font-size: 40px;
    line-height: 46px;
    margin-bottom: 17px;
    color: var(--global--color-white);
}
.footer-section .contact-section .content p{
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
    color: var(--global--color-white);
}
.footer-section .contact-section .button .get_started{
    font-size: 14px;
    line-height: 14px;
    font-weight: 600;
    padding: 18px 35px;
    text-transform: uppercase;
    color: var(--global--color-primary);
    background-color: var(--global--color-white);
    border: 1px solid var(--global--color-white);
    border-radius: var(--global--button-border-radius);
    transition: all 0.3s ease-in-out;
}
.footer-section .contact-section .button .get_started:hover{
    color: var(--global--color-white);
    background-color: transparent;
    border: 1px solid var(--global--color-white);
}
.footer-section .footer-logo{
    margin-bottom: 20px;
    position: relative;
}
.footer-section .middle-portion{
    padding: 90px 0px 0px;
}
.footer-section .middle-portion .logo-content{
    padding-top: 2px;
}
.footer-section .middle-portion p{
    margin-bottom: 17px;
    color: var(--global--color-text);
}
.footer-section .middle-portion .social-icons .circle{
    display: inline-block;
}
.footer-section .middle-portion .social-icons li{
    margin: 0 4px;
    transition: all 0.3s ease-in-out;
}
.footer-section .middle-portion .social-icons i{
    font-size: 16px;
    height: 38px;
    width: 38px;
    line-height: 38px;
    text-align: center;
    color: var(--global--color-primary);
    background: var(--global--color-white);
    border-radius: var(--global--social-icon-border-radius);
    transition: all 0.3s ease-in-out;
}
.footer-section .middle-portion .social-icons i:hover{
    transform: translateY(-5px);
    color: var(--global--color-white);
    background: var(--global--color-bright-orange);
}
.footer-section .middle-portion .social-icons li:first-child{
    margin-left: 0;
}
.footer-section .middle-portion .social-icons li:last-child{
    margin-right: 0;
}
.footer-section .middle-portion h4{
    margin-bottom: 18px;
    color: var(--global--color-primary);
}
.footer-section .middle-portion .links{
    padding-left: 15px;
}
.footer-section .middle-portion .use-link{
    padding-left: 5px;
}
.footer-section .middle-portion .links li{
    margin-bottom: 6px;
}
.footer-section .middle-portion .links li a{
    margin-left: 12px;
    color: var(--global--color-text);
    transition: all 0.3s ease-in-out;
}
.footer-section .middle-portion .links li i {
    font-size: 10px;
    position: relative;
    top: -1px;
    color: var(--global--color-primary);
    transition: all 0.3s ease-in-out;
}
.footer-section .middle-portion .links li:hover a{
    color: var(--global--color-bright-orange);
}
.footer-section .middle-portion .links li:hover i{
    color: var(--global--color-bright-orange);
}
.footer-section .middle-portion .icon{
    padding-left: 38px;
}
.footer-section .middle-portion .icon .text{
    position: relative;
    margin-bottom: 14px;
    padding-left: 30px;
}
.footer-section .middle-portion .icon .location {
    top: 14px;
}
.footer-section .middle-portion .icon i{
    position: absolute;
    font-size: 14px;
    line-height: 14px;
    left: 0;
    top: 7px;
    color: var(--global--color-bright-orange);
    transition: all 0.3s ease-in-out;
}
.footer-section .middle-portion .icon p{
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: var(--global--color-text);
    transition: all 0.3s ease-in-out;
}
.footer-section .middle-portion .icon a{
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: var(--global--color-text);
    transition: all 0.3s ease-in-out;
}
.footer-section .middle-portion .icon li:hover a{
    color: var(--global--color-bright-orange);
}
.footer-section .middle-portion .icon li:hover p{
    color: var(--global--color-bright-orange);
}
.footer-section .middle-portion .icon li:hover i{
    color: var(--global--color-bright-orange);
}

/* Copyright */

footer.footer {
    margin: 0;
    padding: 18px 0;
    border-top: 1px solid var(--global--color-copyright-border);
    background-color: var(--global--color-very-light-gray-mostly-white);
}
footer.footer .btn {
    font-size: 12px;
    line-height: 18px;
    padding: 10px;
    margin-right: 8px;
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange);
    border: 1px solid var(--global--color-bright-orange);
    border-radius: var(--global--button-border-radius);
    box-shadow: none;
}
footer.footer .nav-link {
    font-size: 12px;
    line-height: 18px;
    padding: 11px 26px;
    text-transform: uppercase;
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange);
    border: 1px solid var(--global--color-bright-orange);
    border-radius: var(--global--button-border-radius);
    transition: all 0.3s ease-in-out;
}
footer.footer .btn:hover {
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border: 1px solid var(--global--color-primary);
}
footer.footer .nav-link:hover {
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border: 1px solid var(--global--color-primary);
}
footer.footer ul{
    float: none !important;
    text-align: left !important;
    padding: 0;
    margin: 0 !important;
    display: inline-block;
}
footer.footer .nav{
    display: inline-block;
}
footer.footer .copyright {
    padding-top: 12px;
    font-size: 12px;
    line-height: 18px;
    margin: 0;
    float: right;
    display: inline-block;
    color: var(--global--color-text);
}
/* Boxes */

#main-body h2 {
    font-size: 40px;
    line-height: 44px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--global--color-primary);
}
#main-body .primary-content .card-columns.home {
    display: none;
}
#main-body .primary-content h2:first-child {
    display: none;
}
.action-icon-btns a:hover .ico-container {
    font-size: inherit;
}
.action-icon-btns .card-accent-teal:hover {
    border-top: 2px solid var(--global--color-bright-orange);
}
.action-icon-btns .card-accent-pomegranate:hover {
    border-top: 2px solid var(--global--color-dark-grayish-cyan);
}
.action-icon-btns .card-accent-sun-flower:hover {
    border-top: 2px solid var(--global--color-primary);
}
.action-icon-btns .card-accent-asbestos:hover {
    border-top: 2px solid var(--global--color-dark-grayish-cyan);
}
.action-icon-btns .card-accent-green:hover {
    border-top: 2px solid var(--global--color-bright-orange);
}
.action-icon-btns a {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    padding: 30px 10px 40px;
    color: var(--global--color-primary);
    background: var(--global--color-white);
    box-shadow: 1px 2px 61px 0px rgba(0, 0, 0, 10%);
    border-radius: var(--global--box-border-radius);
    border-top: 2px solid var(--global--color-white);
    transition: all 0.3s ease-in-out;
}
.action-icon-btns a .ico-container i {
    font-size: 28px;
    width: 75px;
    height: 75px;
    line-height: 75px;
    border-radius: var(--global--social-icon-border-radius);
    color: var(--global--color-white);
    background-color: var(--global--color-very-dark-desaturated-blue);
}
.primary-content .card-accent-teal i{
    background-color: var(--global--color-bright-orange) !important;
}
.primary-content .card-accent-pomegranate i{
    background-color: var(--global--color-dark-grayish-cyan) !important;
}
.primary-content .card-accent-sun-flower i{
    background-color: var(--global--color-primary) !important;
}
.primary-content .card-accent-asbestos i{
    background-color: var(--global--color-dark-grayish-cyan) !important;
}
.primary-content .card-accent-green i{
    background-color: var(--global--color-bright-orange) !important;
}
.primary-content .action-icon-btns .card-accent-midnight-blue:hover {
    border-top: 2px solid var(--global--color-very-dark-desaturated-blue);
}

/* Pricing */

.pricing-carousel {
    padding: 100px 0 160px;
    background-color: var(--global--color-very-light-gray-bg);
}
.pricing-carousel h2{
    font-size: 40px;
    line-height: 40px;
    text-transform: capitalize;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: var(--global--color-primary);
}
.pricing-carousel .nav-tabs {
    text-align: center;
    padding-bottom: 30px; 
    display: inline-block;
    border: solid 0px var(--global--color-primary);
    width: 100%;
    position: relative;
}
.pricing-carousel .nav-tabs:after {
    content: "";
    width: 68%;
    background-color: var(--global--color-very-light-gray);
    height: 2px;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0 auto;
    bottom: 29px;
}
.pricing-carousel .nav-tabs .nav-link {
    list-style: none;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    padding: 20px 20px 28px 20px;
    color: var(--global--color-primary);
    margin: 0 !important;
    position: relative;
    border: none;
}
.pricing-carousel .nav-tabs .nav-item {
    display: inline-block;
}
.pricing-carousel .nav-tabs .nav-link.active {
    color: var(--global--color-bright-orange);
    background-color: transparent;
    border-bottom: 2px solid var(--global--color-bright-orange);
    position: relative;
    z-index: 2;
}
.pricing-carousel .nav-tabs .nav-item.active::after {
    content: "";
    width: 200px;
    background-color: var(--global--color-strong-cyan);
    height: 2px;
    position: absolute;
    bottom: -15px;
    left: 0;
    z-index: 1;
    text-align: center;
    margin: 0 auto;
    display: inline-block;
}
/* --- Pricing carousel card — premium_comparison design tokens --- */
.pricing-carousel .tab-content .item {
    float: left;
    width: 95% !important;
    padding: 0;
    margin: 30px 6px 12px;
    border-radius: 24px;
    background-color: var(--global--color-white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-carousel .tab-content .item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(255, 120, 0, 0.18);
}
/* Dark header (product name + optional qty) */
.pricing-carousel .tab-content .item > header {
    background: linear-gradient(135deg, #0c2a3f 0%, #151921 100%);
    padding: 32px 24px 18px;
    text-align: center;
    color: var(--global--color-white);
}
.pricing-carousel .tab-content .item > header span {
    display: block;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 0;
    color: var(--global--color-white);
    letter-spacing: 0.3px;
}
.pricing-carousel .tab-content .item > header span.qty {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 12px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--global--color-bright-orange);
    background: rgba(255, 120, 0, 0.12);
    border-radius: 100px;
}
/* Dark pricing strip (continues the header gradient) */
.pricing-carousel .tab-content .item .product-pricing {
    background: linear-gradient(135deg, #0c2a3f 0%, #151921 100%);
    padding: 0 24px 30px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0;
}
.pricing-carousel .tab-content .item .price {
    display: block;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 800;
    margin: 0 0 6px !important;
    color: var(--global--color-white);
    letter-spacing: -0.3px;
}
.pricing-carousel .tab-content .item .product-pricing small {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
}
.pricing-carousel .tab-content .item .product-pricing br {
    display: none;
}
/* White body — description + feature list */
.pricing-carousel .tab-content .item .product-desc {
    background: var(--global--color-white);
    padding: 24px 24px 8px;
    flex: 1 1 auto;
    text-align: left;
}
.pricing-carousel .tab-content .item .product-desc p {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    color: #5a6673;
    margin: 0 0 16px;
    text-align: center;
}
.pricing-carousel .tab-content .item .product-desc > strong {
    font-size: 14px;
    line-height: 22px;
    color: var(--global--color-primary);
}
.pricing-carousel .tab-content .item .product-desc ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
}
.pricing-carousel .tab-content .item .product-desc li {
    position: relative;
    padding: 11px 0 11px 28px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    color: #333;
    margin-bottom: 0;
    border-bottom: 1px solid #eef0f2;
}
.pricing-carousel .tab-content .item .product-desc li:last-child {
    border-bottom: none;
}
.pricing-carousel .tab-content .item .product-desc li::marker {
    content: "";
    display: none;
}
.pricing-carousel .tab-content .item .product-desc li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 12px;
    font-size: 13px;
    color: var(--global--color-bright-orange);
    line-height: 1.4;
}
.pricing-carousel .tab-content .item .feature-value {
    display: inline;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    margin: 0 4px 0 0;
    color: #0c2a3f;
}
.pricing-carousel .tab-content .item br {
    display: none;
}
/* Footer — CTA button */
.pricing-carousel .tab-content .item > footer {
    padding: 8px 24px 28px;
    background: var(--global--color-white);
    text-align: center;
}
.pricing-carousel .tab-content .item > footer .btn-success,
.pricing-carousel .btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 22px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--global--color-white) !important;
    background-color: var(--global--color-bright-orange) !important;
    border: 2px solid var(--global--color-bright-orange) !important;
    border-radius: 100px;
    box-shadow: 0 6px 18px rgba(255, 120, 0, 0.25);
    transition: all 0.3s ease;
}
.pricing-carousel .tab-content .item > footer .btn-success i,
.pricing-carousel .btn-success i {
    margin-right: 8px;
    font-size: 13px;
}
.pricing-carousel .tab-content .item > footer .btn-success:hover,
.pricing-carousel .btn-success:hover {
    color: var(--global--color-bright-orange) !important;
    background-color: transparent !important;
    border-color: var(--global--color-bright-orange) !important;
    box-shadow: 0 4px 12px rgba(255, 120, 0, 0.12);
}
.pricing-carousel .tab-content .item > footer .btn-success:focus-visible,
.pricing-carousel .btn-success:focus-visible {
    outline: 3px solid rgba(255, 120, 0, 0.35);
    outline-offset: 3px;
}
/* Owl item shadow safety — let card shadow breathe (override owl's overflow:hidden) */
.pricing-carousel .tab-content .owl-carousel .owl-stage-outer {
    padding: 12px 4px 28px;
    overflow: visible;
}
.pricing-carousel .tab-content .owl-carousel {
    overflow: hidden;
}
.pricing-carousel .tab-content .owl-carousel.owl-drag .owl-item{
    margin-bottom: 12px;
}
.pricing-carousel .tab-content .owl-carousel .owl-item img {
    display: inline-block;
    width: 57px;
}
.pricing-carousel .tab-content .owl-carousel .owl-dots {
    position: absolute;
    display: block !important;
    margin-top: 15px !important;
    line-height: 0;
    left: 0;
    right: 0;
    text-align: center;
}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot span {
    background: var(--global--color-grayish-blue);
    width: 12px;
    height: 12px;
    margin: 0 4px;
    transition: all 0.3s ease-in-out;
    display: block;
    border-radius: 100px;
}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot:hover span {
    background: var(--global--color-bright-orange);
}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot.active span {
    background:var(--global--color-bright-orange);
    width: 16px;
    height: 16px;
}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot:focus {
    outline: none;
}
.hostiko-banner-whmcs .title-heading {
    font-size: 56px;
    line-height: 60px;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--global--color-white);
}
.hostiko-banner-whmcs .title-text {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    padding: 0 300px;
    margin-bottom: 25px;
    color: var(--global--color-white);
}
.breadcrumb-item.active {
    color: var(--global--color-white);
}
.hostiko-banner-whmcs .breadcrumb {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    padding: 14px 35px;
    text-transform: uppercase;
    color: var(--global--color-white);
    background: transparent;
    border: 2px solid var(--global--color-breadcrumb-border);
    border-radius: var(--global--button-border-radius);
    display: -webkit-inline-box;
}
.hostiko-banner-whmcs .breadcrumb .breadcrumb-item a{
    color: var(--global--color-white);
}
.breadcrumb-item+.breadcrumb-item::before {
    color: var(--global--color-white);
}
.dropdown-divider {
    border-top: 1px solid var(--global--color-very-light-gray);
}
.primary-content .card .announcements h1 a{
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    text-decoration: none !important;
    color: var(--global--color-primary);
}
.primary-content .card .announcements a i{
    margin-left: 5px;
}
.card .card-body h1{
    margin-bottom: 20px;
}
.btn-default {
    color: var(--global--color-white) !important;
    background-color: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
}
.btn-default:hover {
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.primary-content .announcements .btn-sm {
    padding: 6px 10px;
}
.dropdown-item.active, .dropdown-item:active {
    color: var(--global--color-white) !important;
    text-decoration: none;
    background-color: var(--global--color-bright-orange);
}
header.header .dropdown-item.active, header.header .dropdown-item:active {
    background-color: var(--global--color-bright-orange);
}
.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle {
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.btn.focus, .btn:focus {
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary) !important;
    border-color: var(--global--color-primary) !important;
    box-shadow: none !important;
}
#order-standard_cart .products .product footer {
    padding: 0 15px;
}
.top-bar .input-group .btn i{
    color: var(--global--color-white);
}
.domain-promo-box .btn-warning{
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
}
.domain-promo-box .btn-warning:hover{
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.domain-promo-box .btn-primary{
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.domain-promo-box .btn-primary:hover{
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
}
.card .badge-info {
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange);
    border-radius: var(--global--button-border-radius);
}
.card .badge {
    padding: 6px 8px;
}
.card .list-inline-item{
    padding: 0 !important;
}
.card .badge-pill{
    padding: 15px 0 0;
    line-height: 18px;
    margin-bottom: 18px;
    text-align: left;
    text-wrap: wrap;
    color: var(--global--color-primary);
    background-color: transparent;
}
.card-body .btn-secondary {
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.card-body .btn-secondary:hover {
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
}
.md-header .btn-group .btn-sm{
    border-radius: 0 !important;
}
.extra-padding .btn-primary{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
}
.extra-padding .btn-primary:hover{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary) !important;
    border-color: var(--global--color-primary) !important;
}
.ticket-actions .btn-danger{
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
}
.ticket-actions .btn-danger:hover{
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.panel-heading .panel-minimise{
    position: relative;
    top: 10px;
}
.table-striped tr td .btn{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
    opacity: 1 !important;
    margin-bottom: 6px;
}
.table-striped tr td .btn:hover{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary) !important;
    border-color: var(--global--color-primary) !important;
}
.btn-info {
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.btn-info:hover {
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
}
.primary-content .alert-info {
    color: var(--global--color-white);
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.secondary-cart-body .view-cart-items-header {
    background-color: var(--global--color-very-dark-black-blue);
}
.summary-container .btn-success {
    color: var(--global--color-white);
    background-color: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
}
#order-standard_cart .order-summary{
    background-color: var(--global--color-black) !important;
    border-bottom: 3px solid var(--global--color-black) !important;
}
.form-group .generate-password{
    font-size: 14px;
    line-height: 20px;
    padding: 6px 12px;
}
.card-accent-emerald .btn-success {
    padding: 5px 10px;
}
.card-sidebar .card-minimise{
    position: relative;
    top: 10px;
}
.card-accent-gold .card-title{
    color: var(--global--color-black);
}
.card-accent-red .card-title{
    color: var(--global--color-black);
}
.card-accent-blue .card-title{
    color: var(--global--color-black);
}
.card-accent-emerald .card-title{
    color: var(--global--color-black);
}
.card-accent-asbestos .card-title{
    color: var(--global--color-black);
}
.card-accent-emerald .card-body .btn-success{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
}
.card-accent-emerald .card-body .btn-success:hover{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary) !important;
    border-color: var(--global--color-primary) !important;
}
.card-accent-emerald .card-body .btn:hover{
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary) !important;
    border-color: var(--global--color-primary) !important;
}
.client-home-cards .card-accent-asbestos i {
    background-color: transparent !important;
}
.btn-primary {
    color: var(--global--color-white) !important;
    background-color: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
}
.btn-primary:hover {
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
}
.btn-primary:disabled {
    color: var(--global--color-white) !important;
    background-color: var(--global--color-primary);
    border-color: var(--global--color-primary);
    opacity: 1;
}
#order-standard_cart .font-size-36 {
    text-align: center;
    margin-bottom: 15px;
}
#order-standard_cart .view-cart-items-header {
    background-color: var(--global--color-black) !important;
}
#order-standard_cart .view-cart-items {
    border-bottom: 2px solid var(--global--color-black) !important;
}
#order-standard_cart .empty-cart .btn {
    background-color: var(--global--color-black) !important;
}
#order-standard_cart .empty-cart .btn:hover {
    background-color: var(--global--color-primary) !important;
}
.client-home-cards .card-header .btn {
    padding: 4px 10px;
}
.sidebar .list-group-item .badge {
    font-size: 11px;
    line-height: 11px;
}
.primary-content .alert .btn-xs {
    padding: 2px 8px;
}
.domain-renewals .domain-renewal .label {
    border-radius: 15px;
    padding: 4px 10px;
}
.domain-renewals .domain-renewal .label-info {
    background-color: var(--global--color-black);
}
.table-striped .label-info {
    background-color: var(--global--color-primary);
}
.primary-content .card-title{
    font-size: 28px;
    line-height: 34px;
}
.primary-content .client-home-cards .card-title{
    font-size: 16px;
    line-height: 20px;
}
.primary-content .card .h5 {
    color: var(--global--color-primary);
}
.primary-content .card .list-group-flush a {
    color: var(--global--color-primary);
}
.primary-content .card .list-group-flush .list-group-item i{
    position: absolute;
    left: 14px;
    top: 16px;
}
.primary-content .card .list-group-flush .list-group-item {
    padding: 12px 20px 12px 40px;
}
.kb-article-item small {
    padding-left: 0;
    color: var(--global--color-text);
}
@media screen and (min-width:1200px){
.container {max-width: 1170px; margin: auto;}
.top-bar-section .container {max-width: 1320px; margin: auto;}
.topbar .container {max-width: 1320px; margin: auto;}
header .navbar .container {max-width: 1320px; margin: auto;}
}
@media screen and (max-width:1440px){
#header .navbar-collapse ul li a:hover{background-color:transparent!important;}
.primary-content .card-title {font-size: 26px; line-height: 32px;}
.primary-content .client-home-cards .card-title{font-size: 16px; line-height: 20px;}
#header .navbar.navbar-light {margin-bottom: -85px;}
/* Search */
.hostiko-domain-search .home-domain-search {padding: 60px 0px;}
/* Pricing Carousel */
.pricing-carousel {padding: 75px 0 135px;}
.pricing-carousel .tab-content .item > header {padding: 28px 22px 16px;}
.pricing-carousel .tab-content .item > header span {font-size: 20px;}
.pricing-carousel .tab-content .item .product-pricing {padding: 0 22px 26px;}
.pricing-carousel .tab-content .item .price {font-size: 32px;}
.pricing-carousel .tab-content .item .product-desc {padding: 22px 22px 8px;}
.pricing-carousel .tab-content .item > footer {padding: 8px 22px 26px;}
/* Footer */
.footer-section .contact-section {margin-top: -74px; padding: 40px 30px 40px 32px}
.footer-section .contact-section .content h3 {font-size: 36px; line-height: 38px;}
.footer-section .contact-section .button .get_started {padding: 16px 30px;}
.footer-section .middle-portion {padding: 85px 0 70px;}
.footer-section .middle-portion .logo-content {padding-top: 0;}
.footer-section .middle-portion h4 {font-size: 18px; line-height: 18px;}
.footer-section .middle-portion .links {padding-left: 85px;}
.footer-section .middle-portion .use-link {padding-left: 25px;}
.footer-section .middle-portion .links .list1 {margin-right: 62px;}
.footer-section .middle-portion .icon {padding-left: 0;}
.footer-section .middle-portion .icon .text2 {margin-bottom: 16px;}
}
@media screen and (max-width:1199px){
#main-body h2 {
    font-size: 36px;
    line-height: 36px;
}
section#main-body {padding: 80px 0 120px;}
/* Header */
.hostiko-banner-whmcs .title-heading {font-size: 48px !important; line-height: 52px !important; margin-bottom: 12px;}
.hostiko-banner-whmcs .title-text {padding: 0 155px; margin-bottom: 20px;}
#header .navbar.navbar-light {padding: 15px 0; margin-bottom: -78px;}
header#header.header .main-navbar-wrapper {position: absolute; top: 78px; right: 16px; width: auto; background: var(--global--color-white); z-index: 4; border-radius: 0 0 20px 20px; padding: 25px 20px!important; box-shadow: 1px 2px 60px 0px rgba(0,0,0,0.1); display: none;}
header#header.header .main-navbar-wrapper:has(.navbar-collapse.collapse.show) {display: block !important;}
#header.header .search {border: 1px solid var(--global--color-very-light-gray) !important; border-radius: var(--global--button-border-radius);}
#header .navbar-collapse a {padding: 10px 0px !important; border-bottom: 1px solid var(--global--color-very-light-gray); color: var(--global--color-primary);}
#header #mainNavbar .navbar-nav #Primary_Navbar-Contact_Us a {display: block !important; color: var(--global--color-primary) !important; padding: 10px 0px 0 !important; background-color: transparent !important; border-radius: 0; border: none; font-size: 14px; font-weight: 500; margin: 0;}
#header .dropdown-menu {position: relative; top: -3px; border-radius: 0; border: none; background: var(--global--color-very-light-gray-mostly-white);}
#header .main-navbar-wrapper .dropdown-menu a {font-size: 12px; border: none; padding: 0 40px!important; line-height: 30px; position: relative;}
#header .main-navbar-wrapper .dropdown-menu a::before {content: "\f054"; position: absolute; left: 22px; top: 10px; font-size: 10px; line-height: 10px; color: var(--global--color-dark-gray); font-family: "Font Awesome 5 Pro";}
.hostiko-banner-whmcs {padding: 160px 0 130px;}
#header #mainNavbar .navbar-nav #Primary_Navbar-Contact_Us a:hover {background-color: transparent !important; border: none; color: var(--global--color-bright-orange) !important;}
/* Search */
.hostiko-domain-search .home-domain-search {padding: 50px 0px;}
.hostiko-domain-search .home-domain-search h2 {font-size: 36px; line-height: 36px;}
.home-domain-search .input-group-wrapper {margin: 22px 0;}
.hostiko-domain-search .home-domain-search .tld-logos li {font-size: 18px; line-height: 24px; padding: 0 30px;}
/* Pricing Carousel */
.pricing-carousel {padding: 70px 0 132px;}
.pricing-carousel h2 {font-size: 36px; line-height: 36px;}
.pricing-carousel .nav-tabs {padding-bottom: 25px;}
.pricing-carousel .nav-tabs:after {width: 78%; bottom: 24px;}
.pricing-carousel .nav-tabs .nav-link {padding: 22px 16px;}
.pricing-carousel .tab-content .item {padding: 0; margin: 25px 6px 12px;}
.pricing-carousel .tab-content .item > header {padding: 26px 20px 16px;}
.pricing-carousel .tab-content .item > header span {font-size: 19px;}
.pricing-carousel .tab-content .item .product-pricing {padding: 0 20px 24px; margin-bottom: 0;}
.pricing-carousel .tab-content .item .price {font-size: 30px;}
.pricing-carousel .tab-content .item .product-desc {padding: 20px 20px 6px;}
.pricing-carousel .tab-content .item .product-desc p {margin-bottom: 12px;}
.pricing-carousel .tab-content .item .product-desc ul {margin-bottom: 0;}
.pricing-carousel .tab-content .item .product-desc li {padding: 10px 0 10px 26px; font-size: 13px;}
.pricing-carousel .tab-content .item > footer {padding: 8px 20px 24px;}
.pricing-carousel .tab-content .item > footer .btn-success,
.pricing-carousel .btn-success {padding: 12px 18px; font-size: 12px;}
/* Boxes */
.action-icon-btns a {font-size: 16px; line-height: 22px; padding: 25px 10px 35px}
/* Footer */
h3 {font-size: 32px; line-height: 38px;}
.footer-section .contact-section {margin-top: -74px; padding: 45px 25px;}
.footer-section .contact-section .content h3 {font-size: 32px; line-height: 36px; margin-bottom: 10px;}
.footer-section .contact-section .button .get_started {padding: 15px 24px;}
.footer-section .middle-portion {padding: 80px 0 70px;}
.footer-section .footer-logo {margin-bottom: 20px;}
.footer-section .footer-logo img{width: 150px;}
.footer-section .middle-portion h4 {margin-bottom: 16px;}
.footer-section .middle-portion p {margin-bottom: 6px;}
.footer-section .middle-portion .links {padding-left: 45px;}
.footer-section .middle-portion .use-link {padding-left: 10px;}
.footer-section .middle-portion .links .list1 {margin-right: 45px;}
.footer-section .middle-portion .links li {margin-bottom: 4px;}
.footer-section .middle-portion .links li a {margin-left: 10px;}
.footer-section .middle-portion .icon {padding-left: 0;}
.footer-section .middle-portion .icon .text {margin-bottom: 10px;}
.footer-section .middle-portion .icon .text2 {margin-bottom: 18px;}
.footer-section .copyright {padding: 16px 0px;}
/* Copyright */
footer.footer .btn {padding: 9px 11px; margin-right: 6px;}
footer.footer .nav-link {padding: 10px 22px;}
footer.footer .copyright {padding-top: 10px;}
}
@media screen and (max-width:991px){
#main-body h2 {
    font-size: 32px;
    line-height: 32px;
}
h1{
    font-size: 34px !important;
    line-height: 38px !important;
}
/* h1 a{
    font-size: 34px !important;
    line-height: 38px !important;
} */
section#main-body {padding: 60px 0 90px;}
.main-header{padding-top:10px;padding-bottom:10px;}
.main-header .navbar-toggler{padding:.25rem .5rem;background-color:var(--global--color-orange);}
.main-header .navbar-toggler:focus{outline:none;}
.main-header .navbar-toggler-icon{background:url(https://teamunity.hu/whmcs-sync/?ccce=js&ajax=1&js=templates/hostiko/layouts/wp-86/assets/images/mobile_toogle_button.svg);}  
.main-header .navbar-collapse{position:absolute;right:0;top:100%;background-color:var(--global--color-blue);width: 30%;padding: 10px 0; z-index:9}
.main-header ul li a{padding:10px 20px!important;color:var(--global--color-white)}
.primary-content a{margin-bottom: 10px;}
/* Header */
.hostiko-banner-whmcs .title-heading {font-size: 40px !important; line-height: 46px !important; margin-bottom: 10px;}
.hostiko-banner-whmcs .title-text {padding: 0 60px; margin-bottom: 16px;}
.hostiko-banner-whmcs {padding: 140px 0 100px;}
.hostiko-banner-whmcs .breadcrumb {font-size: 14px; line-height: 20px; padding: 12px 30px; display: inline-flex;}
#header .navbar.navbar-light {padding: 12px 0; margin-bottom: -72px;}
#header .navbar-brand img{width: 150px;}
header#header.header .main-navbar-wrapper {top: 72px; right: 38px;}
#header .navbar-collapse a {font-size: 14px; padding: 8px 0px !important;}
#header #mainNavbar .navbar-nav #Primary_Navbar-Contact_Us a {padding: 8px 0px 0 !important; font-size: 14px;}
#header .dropdown-menu {padding: 10px 0;}
#header .main-navbar-wrapper .dropdown-menu a {padding: 0 45px!important; line-height: 28px; position: relative;}
#header .main-navbar-wrapper .dropdown-menu a::before {top: 9px; left: 26px;}
.dropdown-divider {margin: 6px 0;}
/* Search */
.hostiko-domain-search .home-domain-search {padding: 15px 0px 20px;}
.hostiko-domain-search .home-domain-search h2 {font-size: 32px; line-height: 32px; margin-bottom: 52px;}
.hostiko-domain-search .home-domain-search .btn-primary{padding: 10px 24px;}
.hostiko-domain-search .home-domain-search .btn-success {padding: 10px 20px;}
.hostiko-domain-search .home-domain-search .input-group-wrapper {padding: 9px 10px 9px 20px;}
.hostiko-domain-search .home-domain-search .tld-logos li {font-size: 16px; line-height: 22px; padding: 0 20px;}
/* Pricing Carousel */
.pricing-carousel {padding: 40px 0 100px;}
.pricing-carousel h2 {font-size: 32px; line-height: 32px;}
.pricing-carousel .nav-tabs:after {width: 95%;}
.pricing-carousel .nav-tabs .nav-link {padding: 18px 8px;}
.pricing-carousel .tab-content .item {padding: 0; margin: 15px 10px 12px;}
.pricing-carousel .tab-content .item > header {padding: 24px 20px 14px;}
.pricing-carousel .tab-content .item > header span {font-size: 18px; margin-bottom: 0;}
.pricing-carousel .tab-content .item .product-pricing {padding: 0 20px 22px; font-size: 12px; margin-bottom: 0;}
.pricing-carousel .tab-content .item .price {font-size: 28px; line-height: 1.1;}
.pricing-carousel .tab-content .item .product-desc {padding: 20px 20px 6px;}
.pricing-carousel .tab-content .item .product-desc p {margin-bottom: 10px;}
.pricing-carousel .tab-content .item .product-desc li {padding: 9px 0 9px 24px; font-size: 13px; margin-bottom: 0;}
.pricing-carousel .tab-content .item > footer {padding: 8px 20px 22px;}
.pricing-carousel .tab-content .item > footer .btn-success,
.pricing-carousel .btn-success {padding: 12px 16px; font-size: 12px;}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot span {width: 10px; height: 10px;}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot.active span {width: 14px; height: 14px;}
/* Boxes */
.action-icon-btns a {padding: 20px 10px 30px; margin-bottom: 30px;}
.action-icon-btns a .ico-container i {font-size: 26px; width: 70px; height: 70px; line-height: 70px;}
/* Footer */
h3 {font-size: 30px; line-height: 36px;}
.text-size-18 {font-size: 16px; line-height: 24px;}
.footer-section .contact-section {display: block; margin-top: -85px; padding: 55px 25px 70px;}
.footer-section .contact-section .content{text-align: center;}
.footer-section .contact-section .content h3 {margin-bottom: 10px;}
.footer-section .contact-section .content p {margin-bottom: 30px !important;}
.footer-section .contact-section .button{text-align: center;}
.footer-section .contact-section .button .get_started {padding: 13px 20px;}
.footer-section .footer-logo {margin-bottom: 15px;}
.footer-section .footer-logo img {width: 140px;}
.footer-section .middle-portion {padding: 70px 0;}
.footer-section .middle-portion h4 {margin-bottom: 14px;}
.footer-section .middle-portion p {margin-bottom: 12px;}
.footer-section .middle-portion .social-icons li {margin: 0 2px;}
.footer-section .middle-portion .social-icons i {font-size: 14px; height: 36px; width: 36px; line-height: 36px;}
.footer-section .middle-portion .links {padding-left: 30px;}
.footer-section .middle-portion .use-link {padding-left: 0;}
.footer-section .middle-portion .links li a {margin-left: 8px;}
.footer-section .middle-portion .icon p {font-size: 14px; line-height: 22px;}
.footer-section .middle-portion .icon a {font-size: 14px; line-height: 22px;}
.footer-section .middle-portion .icon .text {margin-bottom: 8px; padding-left: 24px;}
/* Copyright */
footer.footer {padding: 16px 0;}
footer.footer .btn {padding: 8px 12px; margin-right: 5px;}
footer.footer .nav-link {padding: 9px 20px;}
footer.footer .copyright {padding-top: 9px;}
.btn-success {font-size: 12px; padding: 8px;}
#order-standard_cart .sidebar-collapsed {padding: 0 !important;}
.featured-tlds-container .col-sm-2{display: none;}
.primary-content .card-body .disable-on-click{position: relative; top: -5px;}
.card .badge-pill {padding: 6px 0 0;}
}
@media screen and (max-width:767px){
#main-body h2 {
    font-size: 26px;
    line-height: 34px;
}
h1 {
    font-size: 30px !important;
    line-height: 34px !important;
}
/* h1 a {
    font-size: 30px !important;
    line-height: 34px !important;
} */
section#main-body {padding: 40px 0 80px;}
.footer-box .container{max-width:100%}
.padding_bottom_70{padding-bottom:40px;}
.padding_top_70{padding-top:50px;}
.main-header .navbar-toggler{padding:.25rem .3rem}
.dataTables_wrapper .dataTables_info {padding: 9px 10px 20px;}
.primary-content .card-title {font-size: 20px; line-height: 26px;}
.primary-content .client-home-cards .card-title{font-size: 16px; line-height: 20px;}
.primary-content .card .announcements h1 a {font-size: 30px; line-height: 36px;}
/* Header */
.hostiko-banner-whmcs .title-heading {font-size: 32px !important; line-height: 40px !important; margin-bottom: 8px;}
.hostiko-banner-whmcs .title-text {font-size: 14px; line-height: 22px; padding: 0 40px; margin-bottom: 14px;}
.hostiko-banner-whmcs {padding: 125px 0 85px;}
.hostiko-banner-whmcs .breadcrumb {padding: 10px 25px; font-size: 12px; line-height: 18px;}
#header .navbar-brand img{width: 135px;}
header#header.header .main-navbar-wrapper {right: 32px;}
#header.header form .btn {font-size: 14px;}
#header.header .search .form-control {padding: 3px !important;}
#header .dropdown-menu {padding: 8px 0;}
#header .main-navbar-wrapper .dropdown-menu a {padding: 0 40px!important; line-height: 26px;}
#header .main-navbar-wrapper .dropdown-menu a::before {left: 22px; top: 8px; font-size: 9px; line-height: 9px;}
.home-domain-search .tld-logos li {padding: 0 25px 0 0;}
.home-domain-search .tld-logos img {width: 45px;}
.hostiko-domain-search .home-domain-search .btn-link {padding: 16px 10px 10px!important;}
.primary-content .card .h5 {font-size: 18px; line-height: 18px;}
/* Search */
.hostiko-domain-search .home-domain-search {padding: 5px 0px 10px;}
.hostiko-domain-search .home-domain-search .container .clearfix{padding: 20px !important;}
.hostiko-domain-search .home-domain-search h2 {font-size: 26px; line-height: 34px; margin-bottom: 46px;}
.hostiko-domain-search .home-domain-search .btn-primary {font-size: 12px; padding: 9px 22px;}
.hostiko-domain-search .home-domain-search .btn-success {font-size: 12px; padding: 9px 18px;}
.hostiko-domain-search .home-domain-search .input-group-wrapper {padding: 8px 10px 8px 12px;}
.home-domain-search .input-group-wrapper {margin: 18px 0;}
.hostiko-domain-search .home-domain-search .tld-logos li {font-size: 14px; line-height: 20px; padding: 0 18px;}
/* Pricing Carousel */
.pricing-carousel {padding: 30px 0 90px;}
.pricing-carousel h2 {font-size: 26px; line-height: 34px;}
.pricing-carousel .nav-tabs .nav-link {font-size: 12px; padding: 14px 6px;}
.pricing-carousel .tab-content .item {padding: 0; margin: 10px 12px 12px;}
.pricing-carousel .tab-content .item > header {padding: 22px 18px 14px;}
.pricing-carousel .tab-content .item > header span {font-size: 17px; margin-bottom: 0;}
.pricing-carousel .tab-content .item .product-pricing {padding: 0 18px 20px; font-size: 12px;}
.pricing-carousel .tab-content .item .price {font-size: 26px; line-height: 1.1;}
.pricing-carousel .tab-content .item .product-desc {padding: 18px 18px 6px;}
.pricing-carousel .tab-content .item .product-desc p {font-size: 13px; line-height: 20px;}
.pricing-carousel .tab-content .item .product-desc > strong {font-size: 13px; line-height: 20px;}
.pricing-carousel .tab-content .item .product-desc ul {padding-left: 0; margin-bottom: 0;}
.pricing-carousel .tab-content .item .product-desc li {padding: 8px 0 8px 22px; font-size: 12px;}
.pricing-carousel .tab-content .item > footer {padding: 8px 18px 20px;}
.pricing-carousel .tab-content .item > footer .btn-success,
.pricing-carousel .btn-success {font-size: 12px; line-height: 1.2; padding: 11px 14px;}
/* Footer */
h3 {font-size: 28px; line-height: 32px;}
h4 {font-size: 22px; line-height: 26px;}
.footer-section .contact-section {padding: 45px 20px 58px;}
.footer-section .contact-section .content h3 {font-size: 26px; line-height: 32px; margin-bottom: 8px;}
.footer-section .contact-section .content p {font-size: 14px; line-height: 20px; margin-bottom: 25px !important;}
.footer-section .contact-section .button .get_started {font-size: 12px; line-height: 12px; padding: 11px 18px;}
.footer-section .middle-portion {padding: 58px 0 48px;}
.footer-section .middle-portion .logo-content {text-align: center; padding-left: 0; margin-bottom: 30px;}
.footer-section .footer-logo {margin-bottom: 14px;}
.footer-section .middle-portion p {margin-bottom: 14px;}
.footer-section .middle-portion h4 {margin-bottom: 12px;}
.footer-section .middle-portion .links {padding-left: 0; margin-bottom: 25px;}
.footer-section .middle-portion .icon {padding-left: 0;}
.footer-section .middle-portion .icon i {font-size: 14px; line-height: 14px; top: 6px;}
.footer-section .middle-portion .icon .location {top: 6px;}
.footer-section .middle-portion .icon a {font-size: 14px; line-height: 20px;}
.footer-section .middle-portion .icon .text {margin-bottom: 6px;}
/* Copyright */
footer.footer {padding: 14px 0;}
footer.footer .btn {padding: 6px; margin-right: 3px;}
footer.footer .nav-link {padding: 7px 10px;}
footer.footer .copyright {padding-top: 7px;}
/* Boxes */
.action-icon-btns a {padding: 16px 10px 24px;}
.action-icon-btns a .ico-container i {font-size: 24px; width: 65px; height: 65px; line-height: 65px;}
/* All responsive */
.primary-content .card-body .announcements .announcement {margin-bottom: 40px;}
.sidebar.sidebar-secondary {padding: 20px 0;}
.primary-content .card .card-body .col-form-label {text-align: left !important; font-size: 14px !important; line-height: 20px !important;}
.primary-content .card-body .table-striped .table td, .table th {padding: 8px;}
#order-standard_cart .domains-row {position: relative; left: -30px; width: 120%;}
#order-standard_cart .domain-selection-options .clearfix .btn-block{width: 150%;}
.btn-lg {padding: 4px 16px;}
.input-group-lg>.form-control{font-size: 16px;}
.input-group-lg>.input-group-append>.btn {padding: 4px 16px;}
.primary-content .card-body a{font-size: 14px; line-height: 14px; padding: 6px 10px;}
.primary-content .card-body .disable-on-click{font-size: 14px; line-height: 14px; padding: 6px 10px;}
}
@media screen and (max-width:575px){
/* #main-body h2 {
    font-size: 28px;
    line-height: 34px;
} */
h1 {
    font-size: 24px !important;
    line-height: 32px !important;
}
/* h1 a {
    font-size: 24px !important;
    line-height: 32px !important;
} */
.h3, h3 {
    font-size: 26px;
    line-height: 30px;
}
h4 {
    font-size: 16px;
    line-height: 22px;
}
.btn-sm {
    font-size: 12px;
    line-height: 20px;
}
.input-group .input-group-append .btn {
    font-size: 12px;
    line-height: 20px;
}
.primary-content .card-body .disable-on-click {top: -3px;}
#order-standard_cart .domains-row {left: 0 !important; width: 100% !important;}
#order-standard_cart .domain-selection-options .clearfix .btn-block{width: 100% !important;}
footer.footer{padding-bottom:50px;}
.footer_logo_box{text-align:center;}
.footer_logo_box img{width:30%}
.footer_box{display:none;}
.primary-content .home .card{min-height:auto}
.home-domain-search .p-5{padding:0!important}
.home-domain-search{padding-top:40px;padding-bottom:40px;}
.h2, h2{font-size:1.5rem;}
#default-captcha-domainchecker{font-size:14px;}
.main-header .navbar-collapse{width:50%;}
.tab-content .tab-pane .btn-group-sm{width: 100%;}
/* Header */
.hostiko-banner-whmcs {padding: 115px 0 80px; background-position: center;}
.hostiko-banner-whmcs .title-heading {margin-bottom: 6px;}
.hostiko-banner-whmcs .title-text {padding: 0 15px;}
.hostiko-banner-whmcs .breadcrumb {padding: 8px 20px;}
header#header.header .main-navbar-wrapper {right: 14px;}
.primary-content .card .h5 {font-size: 16px; line-height: 16px;}
#header .navbar-brand img {width: 125px;}
/* Search */
.hostiko-domain-search .home-domain-search .container .clearfix {padding: 0 !important;}
.hostiko-domain-search .home-domain-search {padding: 55px 0px 50px;}
.hostiko-domain-search .home-domain-search h2 {margin-bottom: 36px;}
.hostiko-domain-search .home-domain-search .input-group-wrapper {padding: 5px 10px;}
.home-domain-search .input-group-wrapper {margin: 20px 0;}
.hostiko-domain-search .home-domain-search .btn-primary {padding: 7px 15px; margin-bottom: 20px;}
.hostiko-domain-search .home-domain-search .btn-success {padding: 7px 15px; margin-bottom: 20px;}
.hostiko-domain-search .home-domain-search .tld-logos {display: flex; margin-bottom: 10px;}
.home-domain-search .tld-logos li {float: none; padding: 18px 0px;}
.hostiko-domain-search .home-domain-search .btn-link {font-size: 12px; padding: 6px 5px!important;}
.hostiko-domain-search .home-domain-search .tld-logos li {font-size: 12px; line-height: 20px; padding: 0 10px;}
/* Pricing Carousel */
/* .pricing-carousel h2 {font-size: 28px;} */
.pricing-carousel .nav-tabs .nav-link {padding: 6px;}
.pricing-carousel .nav-tabs:after {display: none;}
.pricing-carousel .tab-content .item {padding: 0; margin: 10px 8px 12px;}
.pricing-carousel .tab-content .item > header {padding: 20px 16px 12px;}
.pricing-carousel .tab-content .item > header span {font-size: 16px;}
.pricing-carousel .tab-content .item .product-pricing {padding: 0 16px 18px; font-size: 12px;}
.pricing-carousel .tab-content .item .price {font-size: 24px;}
.pricing-carousel .tab-content .item .product-desc {padding: 16px 16px 4px;}
.pricing-carousel .tab-content .item .product-desc li {padding: 8px 0 8px 22px; font-size: 12px; line-height: 1.45;}
.pricing-carousel .tab-content .item > footer {padding: 6px 16px 18px;}
.pricing-carousel .tab-content .item > footer .btn-success,
.pricing-carousel .btn-success {padding: 10px 14px;}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot span {width: 8px; height: 8px;}
.pricing-carousel .tab-content .owl-carousel .owl-dots .owl-dot.active span {width: 12px; height: 12px;}
.pricing-carousel .tab-content .owl-carousel button.owl-dot {margin: 0 -1px;}
/* Footer */
h3 {font-size: 24px; line-height: 30px;}
.text-size-18 {font-size: 14px; line-height: 20px;}
.footer-section .contact-section .content h3 {margin-bottom: 8px;}
.footer-section .contact-section .button .get_started {padding: 10px 14px;}
.footer-section .middle-portion .logo-content {margin-bottom: 25px;}
.footer-section .middle-portion {padding: 58px 0 50px;}
.footer-section .middle-portion .links .list1 {margin-right: 80px;}
/* Copyright */
footer.footer {padding: 15px 0; text-align: center;}
footer.footer .btn {font-size: 10px; line-height: 16px; padding: 5px 8px; margin-right: 2px;}
footer.footer .nav-link {font-size: 10px; line-height: 16px; padding: 5px 10px;}
footer.footer .copyright {padding-top: 15px; float: none;}
.table-container .dataTables_wrapper {width: 100%; overflow-x: auto; padding-bottom: 20px;}
.primary-content .card {margin-bottom: 35px;}
.primary-content .card-body a{margin-bottom: 6px;}
.primary-content .card-title {font-size: 18px; line-height: 24px;}
.primary-content .card .announcements h1 a {font-size: 24px; line-height: 30px;}
.md-editor .btn-toolbar .btn-group {margin-right: 0;}
.table-striped tr td .btn {font-size: 10px; line-height: 10px};
.sidebar .card{margin-bottom: 15px;}
}









/* =====================================================================
   Domain Search 86 – layout override (match reference image)
   ===================================================================== */

.hostiko-domain-search.domain-search86 .home-domain-search{
    padding: 55px 0;
    background-color: transparent !important;
}

.hostiko-domain-search.domain-search86 .home-domain-search .container{
    max-width: 1200px;
}

.hostiko-domain-search.domain-search86 .domain-search86__box{
    background: var(--global--color-white);
    border-radius: 30px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.08);
    overflow: hidden;
    display: grid;
    grid-template-columns: 360px 1fr;
    align-items: stretch;
}

.hostiko-domain-search.domain-search86 .domain-search86__left{
    position: relative;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hostiko-domain-search.domain-search86 .domain-search86__left::before{
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.06;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("//ugyfel.teamunity.hu/templates/hostiko/layouts/wp-86/data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='100' cy='100' r='90'/%3E%3Cellipse cx='100' cy='100' rx='42' ry='90'/%3E%3Cellipse cx='100' cy='100' rx='90' ry='42'/%3E%3Cpath d='M10 100h180'/%3E%3Cpath d='M100 10v180'/%3E%3C/g%3E%3C/svg%3E");
}

.hostiko-domain-search.domain-search86 .domain-search86__kicker{
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: var(--global--color-text);
    margin-bottom: 12px;
}

.hostiko-domain-search.domain-search86 .domain-search86__title{
    margin: 0;
    font-size: 44px;
    line-height: 48px;
    font-weight: 800;
    color: var(--global--color-black);
}

.hostiko-domain-search.domain-search86 .domain-search86__right{
    padding: 40px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hostiko-domain-search.domain-search86 .domain-search86__desc{
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--global--color-black);
    margin-bottom: 18px;
    max-width: 680px;
}

.hostiko-domain-search.domain-search86 .domain-search86__input-group{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-radius: 999px;
    background: #f3f4f6;
}

.hostiko-domain-search.domain-search86 .domain-search86__input{
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 14px 16px;
    font-size: 16px;
    line-height: 20px;
    color: var(--global--color-black);
    min-width: 0;
}

.hostiko-domain-search.domain-search86 .domain-search86__input::placeholder{
    color: rgba(0,0,0,0.45);
}

.hostiko-domain-search.domain-search86 .domain-search86__actions{
    display: flex;
    gap: 14px;
    margin-left: auto;
}

.hostiko-domain-search.domain-search86 .domain-search86__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    border-radius: 999px !important;
    padding: 12px 22px !important;
    min-height: 46px;
    font-size: 14px !important;
    line-height: 18px;
    font-weight: 700;
    text-transform: none !important;
    box-shadow: none !important;
}

.hostiko-domain-search.domain-search86 .domain-search86__btn i{
    font-size: 14px;
    line-height: 14px;
}

/* Keresés (filled) */
.hostiko-domain-search.domain-search86 .domain-search86__btn--search,
.hostiko-domain-search.domain-search86 .domain-search86__btn--search.btn-primary{
    background-color: var(--global--color-bright-orange) !important;
    border: 2px solid var(--global--color-bright-orange) !important;
    color: var(--global--color-white) !important;
}

.hostiko-domain-search.domain-search86 .domain-search86__btn--search:hover{
    background-color: var(--global--color-primary) !important;
    border-color: var(--global--color-primary) !important;
}

/* Átregisztráció (outline) */
.hostiko-domain-search.domain-search86 .domain-search86__btn--transfer,
.hostiko-domain-search.domain-search86 .domain-search86__btn--transfer.btn-success{
    background-color: var(--global--color-white) !important;
    border: 2px solid var(--global--color-bright-orange) !important;
    color: var(--global--color-bright-orange) !important;
}

.hostiko-domain-search.domain-search86 .domain-search86__btn--transfer:hover{
    background-color: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
    color: var(--global--color-white) !important;
}

.hostiko-domain-search.domain-search86 .domain-search86__actions-mobile{
    margin-top: 14px;
}

.hostiko-domain-search.domain-search86 .domain-search86__actions-mobile .col-6{
    padding-right: 8px;
    padding-left: 8px;
}

.hostiko-domain-search.domain-search86 .domain-search86__tlds{
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.hostiko-domain-search.domain-search86 .domain-search86__tlds li{
    flex: 1;
    text-align: center;
    padding: 0 18px;
    position: relative;
}

.hostiko-domain-search.domain-search86 .domain-search86__tlds li:not(:last-child)::after{
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 46px;
    background: #e5e7eb;
}

.hostiko-domain-search.domain-search86 .domain-search86__tld{
    display: block;
    font-size: 14px;
    line-height: 18px;
    font-weight: 800;
    color: var(--global--color-bright-orange);
    margin-bottom: 6px;
}

.hostiko-domain-search.domain-search86 .domain-search86__price{
    display: block;
    font-size: 18px;
    line-height: 22px;
    font-weight: 800;
    color: var(--global--color-black);
}

/* Responsive */
@media (max-width: 991px){
    .hostiko-domain-search.domain-search86 .domain-search86__box{
        grid-template-columns: 1fr;
    }

    .hostiko-domain-search.domain-search86 .domain-search86__left{
        padding: 34px 28px 10px;
    }

    .hostiko-domain-search.domain-search86 .domain-search86__left::before{
        left: 20px;
        width: 360px;
        height: 360px;
        opacity: 0.05;
    }

    .hostiko-domain-search.domain-search86 .domain-search86__right{
        padding: 22px 28px 34px;
    }

    .hostiko-domain-search.domain-search86 .domain-search86__title{
        font-size: 38px;
        line-height: 42px;
    }
}

@media (max-width: 575px){
    .hostiko-domain-search.domain-search86 .domain-search86__input-group{
        border-radius: 24px;
    }

    .hostiko-domain-search.domain-search86 .domain-search86__tlds{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px 10px;
        margin-top: 18px;
    }

    .hostiko-domain-search.domain-search86 .domain-search86__tlds li{
        padding: 0;
    }

    .hostiko-domain-search.domain-search86 .domain-search86__tlds li::after{
        display: none;
    }

    .hostiko-domain-search.domain-search86 .domain-search86__price{
        font-size: 16px;
        line-height: 20px;
    }
}








.footer-partner-logos, .mt-5, .my-5 {
margin-top: 0px !important;
}






/* Footer CTA – gomb igazítás/javítás (Kérdésed van blokk) */
.footer-section .contact-section{
  gap: 28px;
  flex-wrap: nowrap;
}

.footer-section .contact-section .content{
  flex: 1 1 auto;
  min-width: 0; /* ettől tud a szöveg törni, és nem tolja le a gombot */
}

.footer-section .contact-section .button{
  flex: 0 0 auto;
  margin-left: auto; /* gomb a jobb szélre */
}

.footer-section .contact-section .button .get_started{
  display: inline-flex;            /* valódi “gomb” viselkedés */
  align-items: center;
  justify-content: center;
  white-space: nowrap;             /* ne törje a feliratot */
}




#header .navbar.navbar-light {
margin-bottom : -100px !important;
}

/* =====================================================================
   Phase 9A — Hostiko markup-hook-ok stylingja wp-86 layout al\u00e1
   ---------------------------------------------------------------------
   A Phase 8.2/8.2b cherry-picked TPL-ekbe injekt\u00e1lt .hostiko-* oszt\u00e1lyok
   most wp-86 layout alatt is Hostiko-narancs/dark dizájn szerint rendereldnek.
   ===================================================================== */

/* -- 9A.1 Welcome-box a clientareahome.tpl tetej\u00e9n ------------------- */
body .hostiko-welcome-box {
    background: var(--global--color-white);
    border: 1px solid var(--global--color-very-light-gray);
    border-left: 4px solid var(--global--color-bright-orange);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
body .hostiko-welcome-box .hostiko-welcome-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}
body .hostiko-welcome-box .hostiko-welcome-title {
    margin: 0 0 0.25rem 0;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 1.625rem;
    color: var(--global--color-very-dark-black-blue);
    line-height: 1.25;
}
body .hostiko-welcome-box .hostiko-welcome-name {
    color: var(--global--color-bright-orange);
}
body .hostiko-welcome-box .hostiko-welcome-subtitle {
    color: var(--global--color-text);
    font-size: 0.9375rem;
    font-family: "Inter", sans-serif;
}
body .hostiko-welcome-box .hostiko-welcome-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
body .hostiko-welcome-box .hostiko-welcome-actions .btn {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    border-radius: var(--global--button-border-radius);
    padding: 0.5rem 1.25rem;
}
body .hostiko-welcome-box .hostiko-welcome-actions .btn-primary {
    background: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    color: #fff;
}
body .hostiko-welcome-box .hostiko-welcome-actions .btn-primary:hover,
body .hostiko-welcome-box .hostiko-welcome-actions .btn-primary:focus {
    background: #e56b00;
    border-color: #e56b00;
}
body .hostiko-welcome-box .hostiko-welcome-actions .btn-outline-secondary {
    color: var(--global--color-very-dark-black-blue);
    border-color: var(--global--color-very-light-gray);
    background: transparent;
}
body .hostiko-welcome-box .hostiko-welcome-actions .btn-outline-secondary:hover {
    background: var(--global--color-very-light-gray-mostly-white);
    border-color: var(--global--color-bright-orange);
    color: var(--global--color-bright-orange);
}
@media (max-width: 575.98px) {
    body .hostiko-welcome-box .hostiko-welcome-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    body .hostiko-welcome-box .hostiko-welcome-title {
        font-size: 1.25rem;
    }
}

/* -- 9A.2 Generic stats-bar (tickets/services/domains/invoices) ------- */
body .hostiko-stats-bar {
    background: var(--global--color-white);
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: var(--hostiko-radius-md); /* Phase 1: tokenized, = 16px */
    padding: 0.375rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body .hostiko-stats-bar .hostiko-stats-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
}
body .hostiko-stats-bar .hostiko-stats-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    border-right: 1px solid var(--global--color-very-light-gray);
    min-width: 0;
}
body .hostiko-stats-bar .hostiko-stats-item:last-child {
    border-right: none;
}
body .hostiko-stats-bar .hostiko-stats-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 120, 0, 0.12);
    color: var(--global--color-bright-orange);
    flex-shrink: 0;
}
body .hostiko-stats-bar .hostiko-stats-icon .fas {
    font-size: 1.05rem;
}
body .hostiko-stats-bar .hostiko-stats-body {
    min-width: 0;
}
body .hostiko-stats-bar .hostiko-stats-num {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--global--color-very-dark-black-blue);
    line-height: 1.1;
}
body .hostiko-stats-bar .hostiko-stats-label {
    font-size: 0.8125rem;
    color: var(--global--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

/* Per-status sz\u00edn-variet\u00e1sok a stat-ikonra (wp-86) */
body .hostiko-stats-bar .hostiko-stats-total .hostiko-stats-icon {
    background: rgba(255, 120, 0, 0.12);
    color: var(--global--color-bright-orange);
}
body .hostiko-stats-bar .hostiko-stats-active .hostiko-stats-icon {
    background: rgba(92, 184, 92, 0.14);
    color: var(--global--color-moderate-lime-green);
}
body .hostiko-stats-bar .hostiko-stats-awaiting .hostiko-stats-icon,
body .hostiko-stats-bar .hostiko-stats-pending .hostiko-stats-icon,
body .hostiko-stats-bar .hostiko-stats-expiring .hostiko-stats-icon,
body .hostiko-stats-bar .hostiko-stats-unpaid .hostiko-stats-icon {
    background: rgba(241, 196, 15, 0.14);
    color: #b8900a;
}
body .hostiko-stats-bar .hostiko-stats-answered .hostiko-stats-icon {
    background: rgba(8, 187, 164, 0.14);
    color: var(--global--color-strong-cyan);
}
body .hostiko-stats-bar .hostiko-stats-inprogress .hostiko-stats-icon {
    background: rgba(111, 66, 193, 0.14);
    color: #6f42c1;
}
body .hostiko-stats-bar .hostiko-stats-onhold .hostiko-stats-icon,
body .hostiko-stats-bar .hostiko-stats-terminated .hostiko-stats-icon,
body .hostiko-stats-bar .hostiko-stats-cancelled .hostiko-stats-icon,
body .hostiko-stats-bar .hostiko-stats-draft .hostiko-stats-icon {
    background: rgba(127, 140, 141, 0.14);
    color: var(--global--color-dark-grayish-cyan);
}
body .hostiko-stats-bar .hostiko-stats-closed .hostiko-stats-icon,
body .hostiko-stats-bar .hostiko-stats-paid .hostiko-stats-icon {
    background: rgba(92, 184, 92, 0.14);
    color: var(--global--color-moderate-lime-green);
}
body .hostiko-stats-bar .hostiko-stats-suspended .hostiko-stats-icon,
body .hostiko-stats-bar .hostiko-stats-expired .hostiko-stats-icon,
body .hostiko-stats-bar .hostiko-stats-overdue .hostiko-stats-icon {
    background: rgba(192, 57, 43, 0.14);
    color: var(--global--color-strong-red);
}
body .hostiko-stats-bar .hostiko-stats-refunded .hostiko-stats-icon {
    background: rgba(183, 188, 196, 0.18);
    color: var(--global--color-grayish-blue);
}

/* Invoice oldal: 4 oszlop (a 6-elemes default helyett — a refunded/cancelled */
/* itemek ki lettek véve a clientareainvoices.tpl-ből).                       */
body .hostiko-invoice-stats.hostiko-stats-bar .hostiko-stats-row {
    grid-template-columns: repeat(4, 1fr);
}

/* Services oldal: 5 oszlop (a cancelled item ki lett véve a                   */
/* clientareaproducts.tpl-ből, így 5 elem maradt).                            */
body .hostiko-service-stats.hostiko-stats-bar .hostiko-stats-row {
    grid-template-columns: repeat(5, 1fr);
}

/* Responsive: 6 -> 3 -> 2 */
@media (max-width: 991.98px) {
    body .hostiko-stats-bar .hostiko-stats-row {
        grid-template-columns: repeat(3, 1fr);
    }
    body .hostiko-stats-bar .hostiko-stats-item:nth-child(3n) {
        border-right: none;
    }
    body .hostiko-stats-bar .hostiko-stats-item:not(:nth-last-child(-n+3)) {
        border-bottom: 1px solid var(--global--color-very-light-gray);
    }
    /* Invoice-specifikus override: 2 oszlop (4 itemhez illeszkedve)         */
    body .hostiko-invoice-stats.hostiko-stats-bar .hostiko-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    body .hostiko-invoice-stats.hostiko-stats-bar .hostiko-stats-item {
        border-right: 1px solid var(--global--color-very-light-gray);
        border-bottom: none;
    }
    body .hostiko-invoice-stats.hostiko-stats-bar .hostiko-stats-item:nth-child(2n) {
        border-right: none;
    }
    body .hostiko-invoice-stats.hostiko-stats-bar .hostiko-stats-item:not(:nth-last-child(-n+2)) {
        border-bottom: 1px solid var(--global--color-very-light-gray);
    }
    /* Services-specifikus override: 5 elem 3-oszlopos rácsban (3 + 2)       */
    body .hostiko-service-stats.hostiko-stats-bar .hostiko-stats-item {
        border-right: 1px solid var(--global--color-very-light-gray);
        border-bottom: none;
    }
    body .hostiko-service-stats.hostiko-stats-bar .hostiko-stats-item:nth-child(3n) {
        border-right: none;
    }
    body .hostiko-service-stats.hostiko-stats-bar .hostiko-stats-item:nth-child(-n+3) {
        border-bottom: 1px solid var(--global--color-very-light-gray);
    }
    /* Az 5. (utolsó) item a 2. sorban árván áll: a 3n-utáni szabály miatt   */
    /* visszamarad a jobb oldali border — kivesszük.                          */
    body .hostiko-service-stats.hostiko-stats-bar .hostiko-stats-item:last-child {
        border-right: none;
    }
}
@media (max-width: 575.98px) {
    body .hostiko-stats-bar .hostiko-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    body .hostiko-stats-bar .hostiko-stats-item {
        border-right: 1px solid var(--global--color-very-light-gray);
        padding: var(--hostiko-gap-sm) var(--hostiko-gap-md); /* Phase 2: tighter padding */
        gap: var(--hostiko-gap-sm);
    }
    body .hostiko-stats-bar .hostiko-stats-item:nth-child(2n) {
        border-right: none;
    }
    body .hostiko-stats-bar .hostiko-stats-item:nth-last-child(-n+2) {
        border-bottom: none;
    }
    body .hostiko-stats-bar .hostiko-stats-item:not(:nth-last-child(-n+2)) {
        border-bottom: 1px solid var(--global--color-very-light-gray);
    }
    body .hostiko-stats-bar .hostiko-stats-icon {
        width: 32px;
        height: 32px;
    }
    body .hostiko-stats-bar .hostiko-stats-icon .fas {
        font-size: 0.875rem;
    }
    body .hostiko-stats-bar .hostiko-stats-num {
        font-size: clamp(1.05rem, 4vw, 1.35rem); /* Phase 2: responsive clamp */
    }
    body .hostiko-stats-bar .hostiko-stats-label {
        font-size: 0.6875rem;
        letter-spacing: 0.03em;
    }
}

/* -- 9A.2b Table horizontal-scroll wrapper (Phase 2 — Mobile UX) -------
   Cel: mobilon (<=767px) a wide tablak ne tullogjanak a viewport-on,
   hanem a wrapper scrolljon. Hasznalat ketfele:
   1) Opt-in:  <div class="hostiko-table-scroll"><table>...</table></div>
   2) Safety-net: .table-container (meglevo) is kap overflow-x-et <=767px-en.
   A DataTables-es tablak sajat .dataTables_wrapper-uk mar kezeli, ez csak
   a pre-init allapotra es a nem-DT tablakra ved. */
body .hostiko-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--hostiko-radius-md);
    position: relative;
}
body .hostiko-table-scroll > table {
    margin-bottom: 0;
    min-width: 480px;
}
body .hostiko-table-scroll::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(255,255,255,0.95), rgba(255,255,255,0));
    opacity: 0;
    transition: opacity var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-table-scroll.is-scrollable::after {
    opacity: 1;
}

/* Safety-net: .table-container overflow-x mobilon */
@media (max-width: 767.98px) {
    body .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body .table-container > table {
        min-width: 480px;
    }
}

/* -- 9A.3 Services-, Domains- \u00e9s Invoices-list wrapper (wp-86) ------- */
body .hostiko-services-list .table-container,
body .hostiko-domains-list .table-container,
body .hostiko-invoices-list .table-container {
    background: var(--global--color-white);
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 16px;
    padding: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body .hostiko-services-list #tableServicesList thead th,
body .hostiko-domains-list #tableDomainsList thead th,
body .hostiko-invoices-list #tableInvoicesList thead th {
    background: var(--global--color-very-light-gray-bg);
    color: var(--global--color-very-dark-black-blue);
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--global--color-very-light-gray);
}
body .hostiko-services-list #tableServicesList tbody tr,
body .hostiko-domains-list #tableDomainsList tbody tr,
body .hostiko-invoices-list #tableInvoicesList tbody tr {
    transition: background-color 0.15s ease;
}
body .hostiko-services-list #tableServicesList tbody tr:hover,
body .hostiko-domains-list #tableDomainsList tbody tr:hover,
body .hostiko-invoices-list #tableInvoicesList tbody tr:hover {
    background: rgba(255, 120, 0, 0.04) !important;
    cursor: pointer;
}
body .hostiko-services-list #tableServicesList tbody strong,
body .hostiko-invoices-list #tableInvoicesList tbody strong {
    color: var(--global--color-very-dark-black-blue);
}
body .hostiko-invoices-list .szamlazz-docs a.szamlazz-btn {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    border-radius: 12px;
}
body .hostiko-domains-list .btn-group .btn {
    border-color: var(--global--color-very-light-gray);
    color: var(--global--color-very-dark-black-blue);
    background: var(--global--color-white);
    border-radius: var(--global--button-border-radius);
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
}
body .hostiko-domains-list .btn-group .btn:hover {
    background: rgba(255, 120, 0, 0.08);
    border-color: var(--global--color-bright-orange);
    color: var(--global--color-bright-orange);
}
body .hostiko-domains-list .dropdown-menu {
    border-color: var(--global--color-very-light-gray);
    border-radius: var(--global--dropdown-border-radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
body .hostiko-domains-list .dropdown-item:hover,
body .hostiko-domains-list .dropdown-item:focus {
    background: rgba(255, 120, 0, 0.08);
    color: var(--global--color-bright-orange);
}

/* -- 9A.4 Ticket-view wrapper (wp-86) ---------------------------------- */
body .hostiko-ticket-view .card.view-ticket {
    border: 1px solid var(--global--color-very-light-gray);
    border-top: 3px solid var(--global--color-bright-orange);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
body .hostiko-ticket-view .card.view-ticket .card-title {
    font-family: "Inter", sans-serif;
    color: var(--global--color-very-dark-black-blue);
    font-weight: 700;
}
body .hostiko-ticket-view .ticket-reply {
    border-left: 3px solid var(--global--color-strong-cyan);
    background: var(--global--color-white);
    margin-bottom: 0.75rem;
    border-radius: 0 12px 12px 0;
}
body .hostiko-ticket-view .ticket-reply.staff {
    border-left-color: var(--global--color-bright-orange);
    background: rgba(255, 120, 0, 0.04);
}
body .hostiko-ticket-view .ticket-reply .posted-by {
    background: var(--global--color-very-light-gray-bg);
    border-bottom: 1px solid var(--global--color-very-light-gray);
    padding: 0.75rem 1.125rem;
    font-size: 0.875rem;
    font-family: "Inter", sans-serif;
}
body .hostiko-ticket-view .ticket-reply.staff .posted-by {
    background: rgba(255, 120, 0, 0.08);
}
body .hostiko-ticket-view .ticket-reply .posted-by-name {
    color: var(--global--color-very-dark-black-blue);
    font-weight: 700;
}
body .hostiko-ticket-view .ticket-reply .requestor-badge {
    background: var(--global--color-very-dark-black-blue);
    color: #fff;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body .hostiko-ticket-view .ticket-reply .requestor-type-staff {
    background: var(--global--color-bright-orange);
}
body .hostiko-ticket-view .ticket-reply .requestor-type-client {
    background: var(--global--color-strong-cyan);
}
body .hostiko-ticket-view .ticket-reply .message {
    line-height: 1.6;
    font-family: "Inter", sans-serif;
}
body .hostiko-ticket-view .attachment-list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 0 0;
}
body .hostiko-ticket-view .attachment-list li a,
body .hostiko-ticket-view .attachment-list li span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--global--color-white);
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 12px;
    padding: 0.4rem 0.75rem;
    color: var(--global--color-very-dark-black-blue);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: all 0.15s ease;
}
body .hostiko-ticket-view .attachment-list li a:hover {
    background: rgba(255, 120, 0, 0.06);
    border-color: var(--global--color-bright-orange);
    color: var(--global--color-bright-orange);
}
body .hostiko-ticket-view #ticketReplyContainer {
    border: 1px solid var(--global--color-very-light-gray);
    border-top: 3px solid var(--global--color-bright-orange);
    border-radius: 16px;
    margin-top: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body .hostiko-ticket-view #ticketReplyContainer .card-title {
    font-family: "Inter", sans-serif;
    color: var(--global--color-very-dark-black-blue);
    font-weight: 700;
}
body .hostiko-ticket-view #ticketReplyContainer .form-control:focus {
    border-color: var(--global--color-bright-orange);
    box-shadow: 0 0 0 0.2rem rgba(255, 120, 0, 0.15);
}
body .hostiko-ticket-view #ticketReplyContainer .btn-primary {
    background: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    border-radius: var(--global--button-border-radius);
    font-family: "Inter", sans-serif;
    font-weight: 600;
}
body .hostiko-ticket-view #ticketReplyContainer .btn-primary:hover {
    background: #e56b00;
    border-color: #e56b00;
}
body .hostiko-ticket-view .ticket-actions .btn-default,
body .hostiko-ticket-view #ticketReplyContainer .btn-default {
    border-color: var(--global--color-very-light-gray);
    color: var(--global--color-very-dark-black-blue);
    background: var(--global--color-white);
    border-radius: var(--global--button-border-radius);
}
body .hostiko-ticket-view .ticket-actions .btn-default:hover,
body .hostiko-ticket-view #ticketReplyContainer .btn-default:hover {
    background: rgba(255, 120, 0, 0.06);
    border-color: var(--global--color-bright-orange);
    color: var(--global--color-bright-orange);
}
body .hostiko-ticket-view .rating .star,
body .hostiko-ticket-view .rating-done .star {
    color: var(--global--color-very-light-gray);
}
body .hostiko-ticket-view .rating-done .star.active {
    color: var(--global--color-vivid-yellow);
}

/* -- 9A.5 Product- \u00e9s Domain-detail wrapper (wp-86) ---------------- */
body .hostiko-product-detail > h1.page-title,
body .hostiko-product-detail > .page-title,
body .hostiko-domain-detail > h1.page-title,
body .hostiko-domain-detail > .page-title {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    color: var(--global--color-very-dark-black-blue);
    border-bottom: 1px solid var(--global--color-very-light-gray);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
body .hostiko-product-detail .nav-tabs,
body .hostiko-domain-detail .nav-tabs {
    border-bottom-color: var(--global--color-very-light-gray);
}
body .hostiko-product-detail .nav-tabs .nav-link.active,
body .hostiko-domain-detail .nav-tabs .nav-link.active {
    color: var(--global--color-bright-orange);
    border-color: transparent transparent var(--global--color-bright-orange);
    font-weight: 600;
}
body .hostiko-product-detail .tab-content,
body .hostiko-domain-detail .tab-content {
    background: var(--global--color-white);
    border: 1px solid var(--global--color-very-light-gray);
    border-top: none;
    padding: 1.5rem;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* -- 9A.6 Auth-card Hostiko logo-slot (login.tpl + clientregister.tpl) - */
body .card.hostiko-auth-card {
    border-radius: 16px;
    border: 1px solid var(--global--color-very-light-gray);
    border-top: 3px solid var(--global--color-bright-orange);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
body .card.hostiko-auth-card .hostiko-auth-logo {
    border-bottom: 1px solid var(--global--color-very-light-gray);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
body .card.hostiko-auth-card .hostiko-auth-logo img {
    display: inline-block;
    height: auto;
}
body .card.hostiko-auth-card .btn-primary {
    background: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    border-radius: var(--global--button-border-radius);
    font-family: "Inter", sans-serif;
    font-weight: 600;
}
body .card.hostiko-auth-card .btn-primary:hover {
    background: #e56b00;
    border-color: #e56b00;
}
body .hostiko-register > .hostiko-auth-logo {
    border-bottom: 1px solid var(--global--color-very-light-gray);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
body .hostiko-register .card {
    border-radius: 16px;
    border: 1px solid var(--global--color-very-light-gray);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body .hostiko-register .card-title {
    font-family: "Inter", sans-serif;
    color: var(--global--color-very-dark-black-blue);
    font-weight: 700;
}

/* -- 9A.7 "Action Required" dashboard widget (wp-86) ------------------- */
body .hostiko-action-required {
    background: var(--global--color-white);
    border: 1px solid var(--global--color-very-light-gray);
    border-left: 4px solid #b8900a;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
body .hostiko-action-required-header {
    padding: 0.875rem 1.5rem;
    background: rgba(241, 196, 15, 0.14);
    color: #b8900a;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border-bottom: 1px solid var(--global--color-very-light-gray);
    text-transform: uppercase;
}
body .hostiko-action-required-header .fas {
    color: #b8900a;
    font-size: 1.05rem;
}
body .hostiko-action-required-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
body .hostiko-action-required-grid .hostiko-action-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
    color: var(--global--color-very-dark-black-blue);
    text-decoration: none;
    border-right: 1px solid var(--global--color-very-light-gray);
    transition: background-color 0.2s ease;
    min-width: 0;
}
body .hostiko-action-required-grid .hostiko-action-card:last-child {
    border-right: none;
}
body .hostiko-action-required-grid .hostiko-action-card:hover,
body .hostiko-action-required-grid .hostiko-action-card:focus {
    background: rgba(255, 120, 0, 0.05);
    text-decoration: none;
    color: var(--global--color-very-dark-black-blue);
}
body .hostiko-action-required-grid .hostiko-action-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 1.05rem;
}
body .hostiko-action-required-grid .hostiko-action-body {
    flex: 1;
    min-width: 0;
}
body .hostiko-action-required-grid .hostiko-action-num {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.1;
    color: var(--global--color-very-dark-black-blue);
}
body .hostiko-action-required-grid .hostiko-action-label {
    font-size: 0.8125rem;
    color: var(--global--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body .hostiko-action-required-grid .hostiko-action-arrow {
    color: var(--global--color-grayish-blue);
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}
body .hostiko-action-required-grid .hostiko-action-card:hover .hostiko-action-arrow {
    color: var(--global--color-bright-orange);
    transform: translateX(4px);
}

/* Per-action color accents (wp-86) */
body .hostiko-action-required-grid .hostiko-action-overdue .hostiko-action-icon {
    background: rgba(192, 57, 43, 0.14);
    color: var(--global--color-strong-red);
}
body .hostiko-action-required-grid .hostiko-action-expiring .hostiko-action-icon {
    background: rgba(241, 196, 15, 0.14);
    color: #b8900a;
}
body .hostiko-action-required-grid .hostiko-action-tickets .hostiko-action-icon {
    background: rgba(8, 187, 164, 0.14);
    color: var(--global--color-strong-cyan);
}
body .hostiko-action-required-grid .hostiko-action-suspended .hostiko-action-icon {
    background: rgba(111, 66, 193, 0.14);
    color: #6f42c1;
}

@media (max-width: 991.98px) {
    body .hostiko-action-required-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    body .hostiko-action-required-grid .hostiko-action-card:nth-child(2n) {
        border-right: none;
    }
    body .hostiko-action-required-grid .hostiko-action-card:not(:nth-last-child(-n+2)) {
        border-bottom: 1px solid var(--global--color-very-light-gray);
    }
}
@media (max-width: 575.98px) {
    body .hostiko-action-required-grid {
        grid-template-columns: 1fr;
    }
    body .hostiko-action-required-grid .hostiko-action-card {
        border-right: none;
        border-bottom: 1px solid var(--global--color-very-light-gray);
    }
    body .hostiko-action-required-grid .hostiko-action-card:last-child {
        border-bottom: none;
    }
    body .hostiko-action-required-grid .hostiko-action-num {
        font-size: 1.375rem;
    }
}

/* ======================================================================== */
/*   Phase 9A.8 — Announcements (Hírek) Hostiko-narancs finomítás          */
/* ======================================================================== */
/* Cherry-picked: announcements.tpl (Phase 11A)                            */
/* Wrapper: .hostiko-announcements                                         */

body .hostiko-announcements > .card {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(12, 42, 63, 0.06);
    margin-bottom: 24px;
    overflow: hidden;
}
body .hostiko-announcements > .card > .card-body {
    padding: 28px 32px;
}
body .hostiko-announcements > .card > .card-body > h3.card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--global--color-very-dark-black-blue);
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--global--color-very-light-gray);
    letter-spacing: -0.4px;
}
body .hostiko-announcements .announcements {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
body .hostiko-announcements .announcement {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--global--color-very-light-gray);
}
body .hostiko-announcements .announcement:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
body .hostiko-announcements .announcement h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}
body .hostiko-announcements .announcement h1 a {
    color: var(--global--color-very-dark-black-blue);
    text-decoration: none;
    transition: color .18s ease;
}
body .hostiko-announcements .announcement h1 a:hover {
    color: var(--global--color-bright-orange);
    text-decoration: none;
}
body .hostiko-announcements .announcement .show-on-hover {
    font-size: 13px;
    padding: 5px 14px;
    opacity: 0;
    transition: opacity .15s ease;
    vertical-align: middle;
    border-radius: 30px;
}
body .hostiko-announcements .announcement:hover .show-on-hover {
    opacity: 1;
}
body .hostiko-announcements .announcement .list-inline {
    margin-bottom: 16px;
}
body .hostiko-announcements .announcement .list-inline-item.text-muted {
    color: #7a8a96 !important;
    font-size: 13px;
}
body .hostiko-announcements .announcement .list-inline-item.text-muted i {
    color: var(--global--color-bright-orange);
    opacity: .8;
    margin-right: 5px;
}
body .hostiko-announcements .announcement article {
    color: #3b4a55;
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 16px;
}
body .hostiko-announcements .announcement article p {
    margin-bottom: 12px;
}
body .hostiko-announcements .announcement article p:last-child {
    margin-bottom: 0;
}
body .hostiko-announcements .announcement > a.btn-default {
    background: var(--global--color-bright-orange);
    border: 1px solid var(--global--color-bright-orange);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 20px;
    border-radius: 30px;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
    letter-spacing: 0.1px;
}
body .hostiko-announcements .announcement > a.btn-default:hover {
    background: #e66a00;
    border-color: #e66a00;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(255, 120, 0, 0.26);
    transform: translateY(-1px);
}
body .hostiko-announcements .announcement > a.btn-default i {
    margin-left: 5px;
    font-size: 11px;
}

/* Pagination (Hostiko narancs) */
body .hostiko-announcements + nav .pagination {
    margin-top: 0;
    margin-bottom: 28px;
    gap: 4px;
}
body .hostiko-announcements + nav .pagination .page-item .page-link {
    color: var(--global--color-very-dark-black-blue);
    border: 1px solid var(--global--color-very-light-gray);
    background: #fff;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body .hostiko-announcements + nav .pagination .page-item .page-link:hover {
    background: rgba(255, 120, 0, 0.08);
    color: var(--global--color-bright-orange);
    border-color: rgba(255, 120, 0, 0.3);
}
body .hostiko-announcements + nav .pagination .page-item.active .page-link {
    background: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    color: #fff;
}
body .hostiko-announcements + nav .pagination .page-item.disabled .page-link {
    color: #aeb9c1;
    background: #f6f8fa;
}

/* ======================================================================== */
/*   Phase 9A.9 — Knowledgebase Hostiko-narancs finomítás                  */
/* ======================================================================== */
/* Cherry-picked: knowledgebase.tpl, knowledgebasecat.tpl,                 */
/*                knowledgebasearticle.tpl (Phase 11A)                     */
/* Wrapper: .hostiko-kb + .hostiko-kb-{home,cat,article}                   */

/* --- Kb search form --- */
body .hostiko-kb form[action*="knowledgebase-search"] {
    margin-bottom: 32px;
}
body .hostiko-kb .kb-search {
    box-shadow: 0 4px 16px rgba(12, 42, 63, 0.07);
    border-radius: 12px;
    overflow: hidden;
}
body .hostiko-kb .kb-search .form-control {
    border: 1px solid var(--global--color-very-light-gray);
    border-right: none;
    padding: 16px 20px;
    font-size: 15px;
    background: #fff;
    color: var(--global--color-very-dark-black-blue);
    transition: border-color .18s ease, box-shadow .18s ease;
}
body .hostiko-kb .kb-search .form-control:focus {
    border-color: var(--global--color-bright-orange);
    box-shadow: 0 0 0 3px rgba(255, 120, 0, 0.12);
    outline: none;
}
body .hostiko-kb .kb-search .form-control::placeholder {
    color: #8a98a3;
    font-weight: 400;
}
body .hostiko-kb .kb-search .btn.btn-primary {
    background: var(--global--color-bright-orange);
    border: 1px solid var(--global--color-bright-orange);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 0 32px;
    border-radius: 0;
    letter-spacing: 0.1px;
    transition: background .18s ease;
}
body .hostiko-kb .kb-search .btn.btn-primary:hover,
body .hostiko-kb .kb-search .btn.btn-primary:focus {
    background: #e66a00;
    border-color: #e66a00;
    box-shadow: none;
    color: #fff;
}

/* --- Kb-category cards --- */
body .hostiko-kb .card.kb-category {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 16px;
    box-shadow: 0 3px 12px rgba(12, 42, 63, 0.05);
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    position: relative;
}
body .hostiko-kb .card.kb-category::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--global--color-bright-orange);
    opacity: 0;
    transition: opacity .2s ease;
}
body .hostiko-kb .card.kb-category:hover {
    box-shadow: 0 10px 28px rgba(255, 120, 0, 0.14);
    transform: translateY(-3px);
    border-color: rgba(255, 120, 0, 0.35);
}
body .hostiko-kb .card.kb-category:hover::before {
    opacity: 1;
}
body .hostiko-kb .card.kb-category > a.card-body {
    display: block;
    padding: 22px 26px;
    color: inherit;
    text-decoration: none;
}
body .hostiko-kb .card.kb-category > a.card-body:hover {
    text-decoration: none;
}
body .hostiko-kb .card.kb-category .h5 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--global--color-very-dark-black-blue);
    display: block;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}
body .hostiko-kb .card.kb-category .h5 > i.fa-folder {
    color: var(--global--color-bright-orange);
    opacity: .9;
    margin-right: 7px;
}
body .hostiko-kb .card.kb-category .badge.badge-info {
    background: rgba(255, 120, 0, 0.1);
    color: var(--global--color-bright-orange);
    font-weight: 600;
    font-size: 11px;
    padding: 5px 11px;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
body .hostiko-kb .card.kb-category p.text-muted {
    color: #7a8a96 !important;
    font-size: 13.5px;
    line-height: 1.6;
    margin-top: 8px;
}
body .hostiko-kb .card.kb-category .show-on-card-hover {
    opacity: 0;
    transition: opacity .15s ease;
    margin-left: 6px;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 30px;
}
body .hostiko-kb .card.kb-category:hover .show-on-card-hover {
    opacity: 1;
}

/* --- Kb articles list card (popular / list / related) --- */
body .hostiko-kb > .card:not(.kb-category) {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(12, 42, 63, 0.05);
    margin-bottom: 24px;
    overflow: hidden;
}
body .hostiko-kb > .card:not(.kb-category) > .card-body {
    padding: 22px 28px;
}
body .hostiko-kb > .card:not(.kb-category) > .card-body h3.card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--global--color-very-dark-black-blue);
    margin: 0;
    letter-spacing: -0.3px;
}
body .hostiko-kb > .card:not(.kb-category) > .card-body h3.card-title i {
    color: var(--global--color-bright-orange);
    opacity: .9;
    margin-right: 7px;
}
body .hostiko-kb > .card:not(.kb-category) .list-group-flush {
    border-top: 1px solid var(--global--color-very-light-gray);
}
body .hostiko-kb .list-group-item.kb-article-item {
    border: none;
    border-bottom: 1px solid var(--global--color-very-light-gray);
    padding: 16px 28px;
    color: var(--global--color-very-dark-black-blue);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, padding-left .15s ease, color .15s ease;
    display: block;
}
body .hostiko-kb .list-group-item.kb-article-item:last-child {
    border-bottom: none;
}
body .hostiko-kb .list-group-item.kb-article-item:hover {
    background: rgba(255, 120, 0, 0.05);
    padding-left: 34px;
    text-decoration: none;
    color: var(--global--color-bright-orange);
}
body .hostiko-kb .list-group-item.kb-article-item > i.fa-file-alt {
    color: var(--global--color-bright-orange);
    opacity: .55;
    margin-right: 9px;
    transition: opacity .15s ease;
}
body .hostiko-kb .list-group-item.kb-article-item:hover > i.fa-file-alt {
    opacity: 1;
}
body .hostiko-kb .list-group-item.kb-article-item small {
    display: block;
    color: #7a8a96;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.6;
    margin-top: 4px;
    padding-left: 24px;
}
body .hostiko-kb .list-group-item.kb-article-item .show-on-card-hover {
    opacity: 0;
    transition: opacity .15s ease;
    float: right;
    margin-left: 6px;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 30px;
}
body .hostiko-kb .list-group-item.kb-article-item:hover .show-on-card-hover {
    opacity: 1;
}
body .hostiko-kb .list-group-item:not(.kb-article-item) {
    color: #7a8a96;
    font-size: 13.5px;
    padding: 22px 28px;
    font-style: italic;
    border: none;
    background: #fafbfc;
}

/* --- Kb article view (kb-article) --- */
body .hostiko-kb-article > .card {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(12, 42, 63, 0.06);
    margin-bottom: 24px;
    overflow: hidden;
}
body .hostiko-kb-article > .card > .card-body {
    padding: 32px 36px;
}
body .hostiko-kb-article > .card > .card-body h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.3;
    color: var(--global--color-very-dark-black-blue);
    margin: 0 0 18px;
    letter-spacing: -0.6px;
}
body .hostiko-kb-article > .card > .card-body h1 .btn {
    font-size: 12px;
    padding: 5px 14px;
    font-weight: 600;
    border-radius: 30px;
    border: 1px solid var(--global--color-very-light-gray);
    color: var(--global--color-very-dark-black-blue);
    background: #fff;
}
body .hostiko-kb-article > .card > .card-body h1 .btn:hover {
    background: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    color: #fff;
}
body .hostiko-kb-article > .card > .card-body h1 .btn i {
    margin-right: 4px;
}
body .hostiko-kb-article .list-inline {
    margin-bottom: 0;
}
body .hostiko-kb-article .list-inline .badge.badge-pill.badge-info {
    background: rgba(255, 120, 0, 0.1);
    color: var(--global--color-bright-orange);
    font-weight: 600;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 30px;
}
body .hostiko-kb-article .list-inline .badge.badge-pill.badge-info i {
    color: var(--global--color-bright-orange);
}
body .hostiko-kb-article .list-inline-item.text-muted {
    color: #7a8a96 !important;
    font-size: 13px;
}
body .hostiko-kb-article .list-inline-item.text-muted i {
    color: var(--global--color-bright-orange);
    opacity: .75;
}
body .hostiko-kb-article > .card hr {
    border: 0;
    border-top: 1px solid var(--global--color-very-light-gray);
    margin: 22px 0;
}
body .hostiko-kb-article article {
    font-size: 15.5px;
    line-height: 1.8;
    color: #2b3a45;
}
body .hostiko-kb-article article h2,
body .hostiko-kb-article article h3,
body .hostiko-kb-article article h4 {
    font-family: 'Inter', sans-serif;
    color: var(--global--color-very-dark-black-blue);
    font-weight: 700;
    margin-top: 28px;
    margin-bottom: 14px;
    letter-spacing: -0.3px;
}
body .hostiko-kb-article article p {
    margin-bottom: 16px;
}
body .hostiko-kb-article article a {
    color: var(--global--color-bright-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}
body .hostiko-kb-article article a:hover {
    color: #e66a00;
}
body .hostiko-kb-article article code {
    background: #fdf3e9;
    color: #c7254e;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 13px;
}
body .hostiko-kb-article article pre {
    background: var(--global--color-very-dark-black-blue);
    color: #dde8f0;
    padding: 18px 20px;
    border-radius: 10px;
    font-size: 13px;
    overflow-x: auto;
}
body .hostiko-kb-article article pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}
body .hostiko-kb-article article ul,
body .hostiko-kb-article article ol {
    margin-bottom: 16px;
    padding-left: 26px;
}
body .hostiko-kb-article article li {
    margin-bottom: 7px;
}
body .hostiko-kb-article article blockquote {
    border-left: 3px solid var(--global--color-bright-orange);
    padding: 6px 18px;
    color: #55656f;
    background: rgba(255, 120, 0, 0.05);
    border-radius: 0 6px 6px 0;
    margin: 0 0 16px;
}
body .hostiko-kb-article article table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
}
body .hostiko-kb-article article table th,
body .hostiko-kb-article article table td {
    border: 1px solid var(--global--color-very-light-gray);
    padding: 10px 14px;
}
body .hostiko-kb-article article table th {
    background: rgba(255, 120, 0, 0.06);
    color: var(--global--color-very-dark-black-blue);
    font-weight: 700;
}

/* "Was this article helpful?" vote form */
body .hostiko-kb-article h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--global--color-very-dark-black-blue);
    margin-bottom: 14px;
    letter-spacing: -0.3px;
}
body .hostiko-kb-article form[method="post"] {
    margin-top: 10px;
}
body .hostiko-kb-article form[method="post"] .btn.btn-secondary {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    color: var(--global--color-very-dark-black-blue);
    font-weight: 600;
    font-size: 13px;
    padding: 7px 20px;
    border-radius: 30px;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
    margin-right: 6px;
}
body .hostiko-kb-article form[method="post"] .btn.btn-secondary[value="yes"]:hover {
    background: var(--global--color-strong-cyan);
    border-color: var(--global--color-strong-cyan);
    color: #fff;
    box-shadow: 0 6px 16px rgba(8, 187, 164, 0.22);
}
body .hostiko-kb-article form[method="post"] .btn.btn-secondary[value="no"]:hover {
    background: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
    box-shadow: 0 6px 16px rgba(231, 76, 60, 0.22);
}
body .hostiko-kb-article form[method="post"] .btn.btn-secondary i {
    margin-right: 6px;
}

/* Vote thank-you alert */
body .hostiko-kb-article .alert.alert-success.alert-bordered-left {
    background: rgba(8, 187, 164, 0.08);
    border: 1px solid rgba(8, 187, 164, 0.25);
    border-left: 4px solid var(--global--color-strong-cyan);
    color: #067a6b;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-weight: 500;
}

/* --- Back button + edit button (közös) --- */
body .hostiko-announcements + a.btn-default,
body .hostiko-kb > a.btn-default,
body .hostiko-kb > a.btn-default.float-right {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    color: var(--global--color-very-dark-black-blue);
    font-weight: 600;
    font-size: 13.5px;
    padding: 8px 22px;
    border-radius: 30px;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
    letter-spacing: 0.1px;
}
body .hostiko-announcements + a.btn-default:hover,
body .hostiko-kb > a.btn-default:hover,
body .hostiko-kb > a.btn-default.float-right:hover {
    background: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(255, 120, 0, 0.22);
    transform: translateY(-1px);
}
body .hostiko-kb > a.btn-default i {
    margin-right: 6px;
}

/* Alert (knowledgebase empty-state) */
body .hostiko-kb .alert.alert-info {
    background: rgba(255, 120, 0, 0.06);
    border: 1px solid rgba(255, 120, 0, 0.2);
    border-left: 3px solid var(--global--color-bright-orange);
    color: var(--global--color-very-dark-black-blue);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 14.5px;
}

/* Responsive — Kb cards stack on mobile */
@media (max-width: 767.98px) {
    body .hostiko-kb .card.kb-category {
        margin-bottom: 16px;
    }
    body .hostiko-kb .card.kb-category > a.card-body {
        padding: 18px 20px;
    }
    body .hostiko-kb-article > .card > .card-body {
        padding: 24px 22px;
    }
    body .hostiko-kb-article > .card > .card-body h1 {
        font-size: 23px;
    }
    body .hostiko-kb > .card:not(.kb-category) > .card-body {
        padding: 18px 20px;
    }
    body .hostiko-kb .list-group-item.kb-article-item {
        padding: 14px 20px;
    }
    body .hostiko-announcements > .card > .card-body {
        padding: 22px 22px;
    }
    body .hostiko-announcements .announcement h1 {
        font-size: 20px;
    }
    body .hostiko-announcements > .card > .card-body > h3.card-title {
        font-size: 19px;
    }
}

/* ======================================================================== */
/*   Phase 12A — View-cart (standard_cart) Hostiko-narancs modernizáció    */
/* ======================================================================== */
/* Scope: #order-standard_cart (WHMCS core view-cart wrapper)              */
/* Érintett oldalak: /cart?a=view, ?a=checkout, ?a=confdomains,       */
/* ?a=products, ?a=complete                                               */
/* Minta: Phase 7 (override6.css) Six-navy → itt Hostiko-narancs palettával*/
/* Cél: feature-parity a Six layout cart-modernizációjával                 */

/* --- Cart root typography --- */
body #order-standard_cart {
    font-family: 'Inter', sans-serif;
    color: var(--global--color-very-dark-black-blue);
    line-height: 1.65;
}
body #order-standard_cart h1,
body #order-standard_cart h2,
body #order-standard_cart h3,
body #order-standard_cart h4,
body #order-standard_cart h5,
body #order-standard_cart h6 {
    font-family: 'Inter', sans-serif;
    color: var(--global--color-very-dark-black-blue);
    font-weight: 700;
    letter-spacing: -0.3px;
}
body #order-standard_cart .font-size-36 {
    font-family: 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: var(--global--color-very-dark-black-blue);
    letter-spacing: -0.6px;
    text-align: center;
    margin-bottom: 24px;
}

/* --- Order summary (sticky sidebar panel) --- */
body #order-standard_cart .order-summary {
    background: #fff !important;
    border: 1px solid var(--global--color-very-light-gray) !important;
    border-top: 3px solid var(--global--color-bright-orange) !important;
    border-bottom: none !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(12, 42, 63, 0.08) !important;
    padding: 22px 24px !important;
    margin-bottom: 24px !important;
}
body #order-standard_cart .order-summary h2,
body #order-standard_cart .order-summary h3,
body #order-standard_cart .order-summary h4 {
    color: var(--global--color-very-dark-black-blue) !important;
    font-weight: 700;
    margin-bottom: 12px;
}
body #order-standard_cart .order-summary .total-due-today,
body #order-standard_cart .order-summary .total {
    font-size: 22px;
    font-weight: 800;
    color: var(--global--color-bright-orange);
    letter-spacing: -0.3px;
}
body #order-standard_cart .order-summary hr {
    border: 0;
    border-top: 1px solid var(--global--color-very-light-gray);
    margin: 14px 0;
}

/* --- View-cart items header --- */
body #order-standard_cart .view-cart-items-header {
    background: #fff !important;
    border: 1px solid var(--global--color-very-light-gray) !important;
    border-bottom: none !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 18px 24px !important;
    color: var(--global--color-very-dark-black-blue);
}
body #order-standard_cart .view-cart-items-header h2,
body #order-standard_cart .view-cart-items-header h3,
body #order-standard_cart .view-cart-items-header span {
    color: var(--global--color-very-dark-black-blue) !important;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* --- View-cart items list --- */
body #order-standard_cart .view-cart-items {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray) !important;
    border-radius: 0 0 16px 16px !important;
    padding: 0;
    margin-bottom: 24px;
}
body #order-standard_cart .view-cart-items .item {
    padding: 18px 24px;
    border-bottom: 1px solid var(--global--color-very-light-gray);
    transition: background .18s ease;
}
body #order-standard_cart .view-cart-items .item:last-child {
    border-bottom: none;
}
body #order-standard_cart .view-cart-items .item:hover {
    background: #fafbfc;
}
body #order-standard_cart .view-cart-items .item-title,
body #order-standard_cart .view-cart-items .item h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--global--color-very-dark-black-blue);
    margin: 0 0 6px;
}
body #order-standard_cart .view-cart-items .item-price {
    color: var(--global--color-bright-orange);
    font-weight: 700;
    font-size: 16px;
}
body #order-standard_cart .view-cart-items .item .item-description {
    color: #7a8a96;
    font-size: 13px;
    line-height: 1.6;
}

/* --- Empty cart state --- */
body #order-standard_cart .empty-cart {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 16px;
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 24px;
}
body #order-standard_cart .empty-cart .btn {
    background: var(--global--color-bright-orange) !important;
    border: 1px solid var(--global--color-bright-orange) !important;
    color: #fff !important;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 30px;
    letter-spacing: 0.3px;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
body #order-standard_cart .empty-cart .btn:hover,
body #order-standard_cart .empty-cart .btn:focus {
    background: #e66a00 !important;
    border-color: #e66a00 !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(255, 120, 0, 0.3);
    transform: translateY(-1px);
}

/* --- Primary CTAs (continue / checkout / update / primary) --- */
body #order-standard_cart .btn-primary,
body #order-standard_cart .btn-continue,
body #order-standard_cart .btn-checkout,
body #order-standard_cart .btn-update {
    background: var(--global--color-bright-orange) !important;
    border: 1px solid var(--global--color-bright-orange) !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 26px;
    border-radius: 30px;
    letter-spacing: 0.3px;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    text-shadow: none;
    box-shadow: 0 2px 6px rgba(255, 120, 0, 0.15);
}
body #order-standard_cart .btn-primary:hover,
body #order-standard_cart .btn-continue:hover,
body #order-standard_cart .btn-checkout:hover,
body #order-standard_cart .btn-update:hover,
body #order-standard_cart .btn-primary:focus,
body #order-standard_cart .btn-continue:focus,
body #order-standard_cart .btn-checkout:focus,
body #order-standard_cart .btn-update:focus {
    background: #e66a00 !important;
    border-color: #e66a00 !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(255, 120, 0, 0.32);
    transform: translateY(-1px);
}

/* --- Secondary btn (back, cancel, less prominent) --- */
body #order-standard_cart .btn-secondary,
body #order-standard_cart .btn-default {
    background: #fff !important;
    border: 1px solid var(--global--color-very-light-gray) !important;
    color: var(--global--color-very-dark-black-blue) !important;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 24px;
    border-radius: 30px;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
body #order-standard_cart .btn-secondary:hover,
body #order-standard_cart .btn-default:hover {
    background: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(255, 120, 0, 0.22);
}

/* --- Danger btn (remove item, cancel order) --- */
body #order-standard_cart .btn-danger {
    background: #fff !important;
    border: 1px solid rgba(231, 76, 60, 0.25) !important;
    color: #c0392b !important;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 30px;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
body #order-standard_cart .btn-danger:hover {
    background: #c0392b !important;
    border-color: #c0392b !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(192, 57, 43, 0.25);
}

/* --- Form controls (cart-checkout inputs) --- */
body #order-standard_cart .form-control,
body #order-standard_cart input[type="text"],
body #order-standard_cart input[type="email"],
body #order-standard_cart input[type="password"],
body #order-standard_cart input[type="tel"],
body #order-standard_cart select,
body #order-standard_cart textarea {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14.5px;
    color: var(--global--color-very-dark-black-blue);
    transition: border-color .18s ease, box-shadow .18s ease;
    box-shadow: none;
}
body #order-standard_cart .form-control:focus,
body #order-standard_cart input:focus,
body #order-standard_cart select:focus,
body #order-standard_cart textarea:focus {
    border-color: var(--global--color-bright-orange);
    box-shadow: 0 0 0 3px rgba(255, 120, 0, 0.12);
    outline: none;
}
body #order-standard_cart label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--global--color-very-dark-black-blue);
    margin-bottom: 6px;
    letter-spacing: 0.1px;
}

/* --- Panels / cards (checkout step containers) --- */
body #order-standard_cart .panel,
body #order-standard_cart .card {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(12, 42, 63, 0.05);
    margin-bottom: 24px;
    overflow: hidden;
}
body #order-standard_cart .panel-heading,
body #order-standard_cart .card-header {
    background: #fff !important;
    border-bottom: 1px solid var(--global--color-very-light-gray) !important;
    padding: 16px 22px !important;
    color: var(--global--color-very-dark-black-blue);
    font-weight: 700;
    font-size: 16px;
}
body #order-standard_cart .panel-body,
body #order-standard_cart .card-body {
    padding: 22px 24px;
}

/* --- Domain promo / sidebar-collapsed (cart sidebars) --- */
body #order-standard_cart .domain-promo-box {
    background: rgba(255, 120, 0, 0.06);
    border: 1px solid rgba(255, 120, 0, 0.2);
    border-left: 3px solid var(--global--color-bright-orange);
    border-radius: 10px;
    padding: 16px 20px;
}
body #order-standard_cart .domain-promo-box .btn-warning,
body #order-standard_cart .domain-promo-box .btn-primary {
    background: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
    color: #fff !important;
    border-radius: 30px;
    font-weight: 600;
    padding: 8px 22px;
}
body #order-standard_cart .domain-promo-box .btn-warning:hover,
body #order-standard_cart .domain-promo-box .btn-primary:hover {
    background: #e66a00 !important;
    border-color: #e66a00 !important;
}

/* --- Sidebar list-group (cart-sidebar, .sidebar, step navigation) --- */
body #order-standard_cart .cart-sidebar,
body #order-standard_cart .sidebar,
body #order-standard_cart .sidebar.sidebar-secondary {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 4px 16px rgba(12, 42, 63, 0.05);
}
body #order-standard_cart .sidebar-collapsed {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body #order-standard_cart .sidebar .list-group-item,
body #order-standard_cart .cart-sidebar .list-group-item {
    border: none;
    background: transparent;
    padding: 10px 16px;
    border-radius: 10px;
    color: var(--global--color-very-dark-black-blue);
    font-weight: 500;
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}
body #order-standard_cart .sidebar .list-group-item:hover,
body #order-standard_cart .cart-sidebar .list-group-item:hover {
    background: rgba(255, 120, 0, 0.07);
    color: var(--global--color-bright-orange);
}
body #order-standard_cart .sidebar .list-group-item.active,
body #order-standard_cart .cart-sidebar .list-group-item.active {
    background: var(--global--color-bright-orange);
    color: #fff;
    font-weight: 600;
}
body #order-standard_cart .sidebar .list-group-item .badge {
    background: rgba(255, 120, 0, 0.1);
    color: var(--global--color-bright-orange);
    font-weight: 600;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 30px;
}
body #order-standard_cart .sidebar .list-group-item.active .badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* --- Alerts (cart messages) --- */
body #order-standard_cart .alert {
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}
body #order-standard_cart .alert-info {
    background: rgba(255, 120, 0, 0.06);
    border: 1px solid rgba(255, 120, 0, 0.2);
    border-left: 3px solid var(--global--color-bright-orange);
    color: var(--global--color-very-dark-black-blue);
}
body #order-standard_cart .alert-success {
    background: rgba(8, 187, 164, 0.08);
    border: 1px solid rgba(8, 187, 164, 0.22);
    border-left: 3px solid var(--global--color-strong-cyan);
    color: #067a6b;
}
body #order-standard_cart .alert-warning {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-left: 3px solid #f0ad4e;
    color: #856404;
}
body #order-standard_cart .alert-danger {
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.22);
    border-left: 3px solid #e74c3c;
    color: #c0392b;
}

/* --- Quantity input (cart-item qty) --- */
body #order-standard_cart .input-quantity,
body #order-standard_cart input[type="number"] {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--global--color-very-dark-black-blue);
    width: 72px;
    padding: 10px 6px;
}

/* --- Tables (cart summary tables, invoice breakdown) --- */
body #order-standard_cart table,
body #order-standard_cart .table {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 24px;
}
body #order-standard_cart table thead th,
body #order-standard_cart .table thead th {
    background: rgba(255, 120, 0, 0.06);
    color: var(--global--color-very-dark-black-blue);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--global--color-very-light-gray);
}
body #order-standard_cart table tbody td,
body #order-standard_cart .table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--global--color-very-light-gray);
    color: var(--global--color-very-dark-black-blue);
    font-size: 14px;
}
body #order-standard_cart table tfoot td,
body #order-standard_cart .table tfoot td {
    background: #fafbfc;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 16px;
}

/* --- Card accent colors (cart upsell/recommended panels) --- */
body #order-standard_cart .card-accent-emerald {
    border-top: 3px solid var(--global--color-strong-cyan) !important;
}
body #order-standard_cart .card-accent-emerald .card-title {
    color: var(--global--color-very-dark-black-blue) !important;
}
body #order-standard_cart .card-accent-emerald .btn-success {
    background: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
    color: #fff !important;
    border-radius: 30px;
    font-weight: 600;
    padding: 8px 22px;
}
body #order-standard_cart .card-accent-emerald .btn-success:hover {
    background: #e66a00 !important;
    border-color: #e66a00 !important;
    box-shadow: 0 8px 18px rgba(255, 120, 0, 0.28);
}
body #order-standard_cart .card-accent-gold {
    border-top: 3px solid #f0ad4e !important;
}
body #order-standard_cart .card-accent-red {
    border-top: 3px solid #e74c3c !important;
}
body #order-standard_cart .card-accent-blue {
    border-top: 3px solid var(--global--color-bright-orange) !important;
}
body #order-standard_cart .card-accent-asbestos {
    border-top: 3px solid var(--global--color-very-light-gray) !important;
}

/* --- Focus-visible (accessibility) --- */
body #order-standard_cart a:focus-visible,
body #order-standard_cart button:focus-visible {
    outline: 2px solid var(--global--color-bright-orange);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Products grid (if cart shows product-list on ?a=add) --- */
body #order-standard_cart .products .product {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 16px;
    box-shadow: 0 3px 12px rgba(12, 42, 63, 0.05);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    overflow: hidden;
    margin-bottom: 24px;
}
body #order-standard_cart .products .product:hover {
    box-shadow: 0 12px 28px rgba(255, 120, 0, 0.14);
    transform: translateY(-4px);
    border-color: rgba(255, 120, 0, 0.3);
}
body #order-standard_cart .products .product footer {
    padding: 16px 20px;
    border-top: 1px solid var(--global--color-very-light-gray);
    background: #fafbfc;
}

/* --- Domain selection row (?a=confdomains) --- */
body #order-standard_cart .domains-row {
    position: relative;
    left: 0 !important;
    width: 100% !important;
}
body #order-standard_cart .domain-selection-options .clearfix .btn-block {
    width: 100% !important;
    border-radius: 30px;
}

/* --- Responsive (mobile cart) --- */
@media (max-width: 991.98px) {
    body #order-standard_cart .order-summary {
        padding: 18px 20px !important;
    }
    body #order-standard_cart .view-cart-items .item {
        padding: 14px 18px;
    }
    body #order-standard_cart .panel-body,
    body #order-standard_cart .card-body {
        padding: 18px 18px;
    }
}
@media (max-width: 767.98px) {
    body #order-standard_cart .font-size-36 {
        font-size: 24px;
    }
    body #order-standard_cart .order-summary .total-due-today,
    body #order-standard_cart .order-summary .total {
        font-size: 20px;
    }
    body #order-standard_cart .btn-primary,
    body #order-standard_cart .btn-continue,
    body #order-standard_cart .btn-checkout,
    body #order-standard_cart .btn-update {
        padding: 9px 22px;
        font-size: 13.5px;
    }
    body #order-standard_cart .view-cart-items-header {
        padding: 14px 18px !important;
    }
    body #order-standard_cart .view-cart-items-header h2,
    body #order-standard_cart .view-cart-items-header h3,
    body #order-standard_cart .view-cart-items-header span {
        font-size: 14px;
    }
}

/* ======================================================================== */
/*   Phase 12B — Cart polish (közös, Hostiko-narancs palettával)            */
/* ======================================================================== */
/* Cél: Phase 12A tetejére finomítások — sticky sidebar, promo-code box,   */
/* qty stepper, empty-cart icon, payment-method cards, micro-transitions    */

/* --- Sticky cart-summary sidebar (desktop) --- */
@media (min-width: 992px) {
    body #order-standard_cart .order-summary,
    body #order-standard_cart .cart-sidebar,
    body #order-standard_cart .secondary-cart-body {
        position: sticky;
        top: 24px;
        z-index: 5;
        align-self: flex-start;
    }
}

/* --- Promo-code box (input-group modern design) --- */
body #order-standard_cart .promo-code-box,
body #order-standard_cart form[action*="applypromo"],
body #order-standard_cart .promotion-code {
    background: rgba(255, 120, 0, 0.05);
    border: 1px dashed rgba(255, 120, 0, 0.4);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 16px 0;
}
body #order-standard_cart .promo-code-box::before,
body #order-standard_cart .promotion-code::before {
    content: "\f02b";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    color: var(--global--color-bright-orange);
    margin-right: 10px;
    opacity: .8;
    font-size: 15px;
}
body #order-standard_cart input[name="promocode"],
body #order-standard_cart input[name="promotioncode"],
body #order-standard_cart input#promocode {
    border-radius: 30px 0 0 30px !important;
    border-right: none !important;
    padding: 11px 18px !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
body #order-standard_cart input[name="promocode"]::placeholder,
body #order-standard_cart input[name="promotioncode"]::placeholder {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
body #order-standard_cart .input-group-append .btn-apply-promo,
body #order-standard_cart button[name="validatepromo"] {
    border-radius: 0 30px 30px 0 !important;
    padding: 11px 24px !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: var(--global--color-bright-orange) !important;
    border: 1px solid var(--global--color-bright-orange) !important;
    color: #fff !important;
}
body #order-standard_cart .input-group-append .btn-apply-promo:hover,
body #order-standard_cart button[name="validatepromo"]:hover {
    background: #e66a00 !important;
    border-color: #e66a00 !important;
}

/* --- Quantity stepper (redesigned) --- */
body #order-standard_cart .input-quantity,
body #order-standard_cart input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
    border-radius: 10px !important;
    background: #fff;
    font-weight: 700;
    color: var(--global--color-very-dark-black-blue);
    transition: border-color .18s ease, box-shadow .18s ease;
}
body #order-standard_cart input[type="number"]::-webkit-inner-spin-button,
body #order-standard_cart input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    height: 32px;
    cursor: pointer;
}
body #order-standard_cart .qty-stepper,
body #order-standard_cart .quantity-selector {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(12, 42, 63, 0.05);
}
body #order-standard_cart .qty-stepper .btn,
body #order-standard_cart .quantity-selector .btn {
    background: transparent;
    border: none;
    color: var(--global--color-very-dark-black-blue);
    width: 40px;
    height: 40px;
    padding: 0;
    font-weight: 700;
    font-size: 18px;
    transition: background .15s ease, color .15s ease;
}
body #order-standard_cart .qty-stepper .btn:hover,
body #order-standard_cart .quantity-selector .btn:hover {
    background: rgba(255, 120, 0, 0.1);
    color: var(--global--color-bright-orange);
}

/* --- Empty-cart illustration (CSS-only pseudo-icon) --- */
body #order-standard_cart .empty-cart {
    position: relative;
    padding-top: 92px !important;
}
body #order-standard_cart .empty-cart::before {
    content: "\f07a";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", sans-serif;
    font-weight: 300;
    font-size: 64px;
    color: var(--global--color-bright-orange);
    opacity: .22;
    display: block;
    text-align: center;
    margin-bottom: 10px;
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;
    line-height: 1;
}
body #order-standard_cart .empty-cart > *:not(::before) {
    position: relative;
    z-index: 1;
}
body #order-standard_cart .empty-cart h2,
body #order-standard_cart .empty-cart h3 {
    color: var(--global--color-very-dark-black-blue);
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
}
body #order-standard_cart .empty-cart p {
    color: #7a8a96;
    margin-bottom: 22px;
    font-size: 14.5px;
}

/* --- Payment method select (radio → card) --- */
body #order-standard_cart .payment-methods,
body #order-standard_cart #paymentMethodSelection,
body #order-standard_cart .form-group.payment-method-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
body #order-standard_cart .payment-method-item,
body #order-standard_cart .custom-control.payment-method {
    flex: 1 1 calc(50% - 12px);
    min-width: 200px;
    position: relative;
}
body #order-standard_cart .payment-method-item input[type="radio"],
body #order-standard_cart .custom-control.payment-method input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
body #order-standard_cart .payment-method-item label,
body #order-standard_cart .custom-control.payment-method label {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 12px;
    padding: 16px 18px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--global--color-very-dark-black-blue);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
    margin: 0;
    width: 100%;
}
body #order-standard_cart .payment-method-item label:hover,
body #order-standard_cart .custom-control.payment-method label:hover {
    border-color: rgba(255, 120, 0, 0.4);
    background: rgba(255, 120, 0, 0.04);
    transform: translateY(-1px);
}
body #order-standard_cart .payment-method-item input[type="radio"]:checked + label,
body #order-standard_cart .custom-control.payment-method input[type="radio"]:checked ~ label {
    border-color: var(--global--color-bright-orange);
    background: rgba(255, 120, 0, 0.06);
    box-shadow: 0 0 0 3px rgba(255, 120, 0, 0.15);
}
body #order-standard_cart .payment-method-item input[type="radio"]:checked + label::after,
body #order-standard_cart .custom-control.payment-method input[type="radio"]:checked ~ label::after {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    color: var(--global--color-bright-orange);
    margin-left: auto;
    font-size: 14px;
}
body #order-standard_cart .payment-method-item img,
body #order-standard_cart .custom-control.payment-method img {
    max-height: 26px;
    width: auto;
}

/* --- Total-due-today emphasis (pill background) --- */
body #order-standard_cart .order-summary .total-due-today-value,
body #order-standard_cart .order-summary .total-due-today strong {
    display: inline-block;
    color: var(--global--color-bright-orange);
    font-weight: 800;
}
body #order-standard_cart .order-summary .total-row-total {
    background: rgba(255, 120, 0, 0.06);
    border-top: 2px solid var(--global--color-bright-orange);
    padding: 14px 16px;
    margin: 12px -16px -14px;
    border-radius: 0 0 16px 16px;
}

/* --- Domain search result rows (?a=confdomains results) --- */
body #order-standard_cart .domain-search-result,
body #order-standard_cart .domain-checker-result,
body #order-standard_cart .search-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 10px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
body #order-standard_cart .domain-search-result:hover,
body #order-standard_cart .domain-checker-result:hover,
body #order-standard_cart .search-result-row:hover {
    border-color: rgba(255, 120, 0, 0.35);
    background: rgba(255, 120, 0, 0.03);
    box-shadow: 0 4px 12px rgba(255, 120, 0, 0.1);
    transform: translateY(-1px);
}
body #order-standard_cart .domain-search-result.available,
body #order-standard_cart .domain-checker-result.available {
    border-left: 3px solid var(--global--color-strong-cyan);
}
body #order-standard_cart .domain-search-result.unavailable,
body #order-standard_cart .domain-checker-result.unavailable {
    border-left: 3px solid #e74c3c;
    opacity: .7;
}
body #order-standard_cart .domain-search-result .domain-name,
body #order-standard_cart .domain-checker-result .domain-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--global--color-very-dark-black-blue);
}
body #order-standard_cart .domain-search-result .price,
body #order-standard_cart .domain-checker-result .price {
    font-weight: 800;
    color: var(--global--color-bright-orange);
    font-size: 15px;
}

/* --- Item-row remove button (micro-interaction) --- */
body #order-standard_cart .view-cart-items .item .btn-remove,
body #order-standard_cart .view-cart-items .item a[href*="remove"],
body #order-standard_cart .view-cart-items .item a[href*="delete"] {
    opacity: .5;
    transition: opacity .18s ease, color .18s ease, transform .18s ease;
    color: #7a8a96;
}
body #order-standard_cart .view-cart-items .item:hover .btn-remove,
body #order-standard_cart .view-cart-items .item:hover a[href*="remove"],
body #order-standard_cart .view-cart-items .item:hover a[href*="delete"] {
    opacity: 1;
    color: #e74c3c;
}
body #order-standard_cart .view-cart-items .item .btn-remove:hover,
body #order-standard_cart .view-cart-items .item a[href*="remove"]:hover,
body #order-standard_cart .view-cart-items .item a[href*="delete"]:hover {
    transform: scale(1.15) rotate(5deg);
    color: #c0392b;
}

/* --- Checkout progress indicator --- */
body #order-standard_cart .checkout-progress,
body #order-standard_cart .nav-tabs.checkout-steps,
body #order-standard_cart .progress-indicator {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    background: transparent;
    border: none;
    counter-reset: step;
}
body #order-standard_cart .checkout-progress > li,
body #order-standard_cart .nav-tabs.checkout-steps > li,
body #order-standard_cart .progress-indicator > li {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    position: relative;
    color: #9aa8b0;
    font-weight: 500;
    font-size: 13px;
    counter-increment: step;
}
body #order-standard_cart .checkout-progress > li::before,
body #order-standard_cart .nav-tabs.checkout-steps > li::before,
body #order-standard_cart .progress-indicator > li::before {
    content: counter(step);
    display: block;
    width: 38px;
    height: 38px;
    line-height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--global--color-very-light-gray);
    color: #9aa8b0;
    font-weight: 700;
    font-size: 14px;
    margin: 0 auto 8px;
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
body #order-standard_cart .checkout-progress > li:not(:last-child)::after,
body #order-standard_cart .nav-tabs.checkout-steps > li:not(:last-child)::after,
body #order-standard_cart .progress-indicator > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 31px;
    left: 50%;
    right: -50%;
    height: 2px;
    background: var(--global--color-very-light-gray);
    z-index: -1;
}
body #order-standard_cart .checkout-progress > li.active,
body #order-standard_cart .nav-tabs.checkout-steps > li.active,
body #order-standard_cart .progress-indicator > li.active {
    color: var(--global--color-very-dark-black-blue);
    font-weight: 700;
}
body #order-standard_cart .checkout-progress > li.active::before,
body #order-standard_cart .nav-tabs.checkout-steps > li.active::before,
body #order-standard_cart .progress-indicator > li.active::before {
    background: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 120, 0, 0.3);
}
body #order-standard_cart .checkout-progress > li.completed::before,
body #order-standard_cart .nav-tabs.checkout-steps > li.completed::before,
body #order-standard_cart .progress-indicator > li.completed::before {
    background: var(--global--color-strong-cyan);
    border-color: var(--global--color-strong-cyan);
    color: #fff;
    content: "\f00c";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 13px;
}
body #order-standard_cart .checkout-progress > li.completed::after,
body #order-standard_cart .nav-tabs.checkout-steps > li.completed::after,
body #order-standard_cart .progress-indicator > li.completed::after {
    background: var(--global--color-strong-cyan);
}

/* --- Generate-password button (credential step) --- */
body #order-standard_cart .form-group .generate-password {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    color: var(--global--color-very-dark-black-blue);
    border-radius: 30px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
body #order-standard_cart .form-group .generate-password:hover {
    background: var(--global--color-bright-orange);
    color: #fff;
    border-color: var(--global--color-bright-orange);
}

/* --- Cart loading state (skeleton) --- */
body #order-standard_cart .cart-loading,
body #order-standard_cart [data-cart-loading="true"] {
    position: relative;
    pointer-events: none;
    opacity: .6;
}
body #order-standard_cart .cart-loading::after,
body #order-standard_cart [data-cart-loading="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid var(--global--color-very-light-gray);
    border-top-color: var(--global--color-bright-orange);
    border-radius: 50%;
    animation: hostiko-cart-spin 0.7s linear infinite;
}
@keyframes hostiko-cart-spin {
    to { transform: rotate(360deg); }
}

/* --- Trust-signals bar (under cart-summary on checkout) --- */
body #order-standard_cart .order-summary::after {
    content: "SSL titkosított fizetés  \f023  \00a0\00a0\00a0  30 napos pénzvisszafizetési garancia  \f058";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "Inter", sans-serif;
    font-weight: 500;
    font-size: 11.5px;
    color: #7a8a96;
    display: block;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--global--color-very-light-gray);
    text-align: center;
    line-height: 1.6;
}

/* --- Responsive polish --- */
@media (max-width: 767.98px) {
    body #order-standard_cart .payment-method-item,
    body #order-standard_cart .custom-control.payment-method {
        flex: 1 1 100%;
        min-width: 0;
    }
    body #order-standard_cart .checkout-progress > li,
    body #order-standard_cart .nav-tabs.checkout-steps > li,
    body #order-standard_cart .progress-indicator > li {
        font-size: 11px;
        padding: 10px 4px;
    }
    body #order-standard_cart .checkout-progress > li::before,
    body #order-standard_cart .nav-tabs.checkout-steps > li::before,
    body #order-standard_cart .progress-indicator > li::before {
        width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 12px;
    }
    body #order-standard_cart .empty-cart::before {
        font-size: 48px;
    }
    body #order-standard_cart .empty-cart {
        padding-top: 74px !important;
    }
    body #order-standard_cart .domain-search-result,
    body #order-standard_cart .domain-checker-result,
    body #order-standard_cart .search-result-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    body #order-standard_cart .order-summary::after {
        font-size: 10.5px;
    }
}

/* ======================================================================== */
/*   Phase 12C — Cart fixes (screenshot-alapú finomítás, Hostiko-narancs)   */
/* ======================================================================== */
/* Javítások a Phase 12A/B után, valós cart?a=view üres-állapot:        */
/*  1. .font-size-36 total-due-today arányosítás (kisebb, balanszírozott)  */
/*  2. disabled/[disabled] .btn-checkout szürke state                       */
/*  3. Promo-code gomb compact (ne full-width narancs pill)                */
/*  4. Empty-cart illustration td[colspan] targetálással                    */
/*  5. Promo-tab header balanszírozás                                       */

/* --- 1. Total-due-today .font-size-36 polish --- */
/* A WHMCS .font-size-36 egy utility-class a total-due számra.             */
/* Eddig a Phase 12A 30px-et adott neki, de a legacy rule felülírta →      */
/* !important + kontrollált max-width + line-height + spacing.              */
body #order-standard_cart .font-size-36,
body #order-standard_cart .order-summary .font-size-36,
body #order-standard_cart .order-summary h1,
body #order-standard_cart .order-summary .total-due-today-value {
    font-family: 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: var(--global--color-bright-orange) !important;
    letter-spacing: -0.8px !important;
    text-align: center !important;
    margin: 10px 0 8px !important;
    padding: 0 !important;
    word-break: break-word;
}
body #order-standard_cart .order-summary .total-due-today-label,
body #order-standard_cart .order-summary .total-due-today-description {
    display: block;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--global--color-very-dark-black-blue);
    margin: 4px 0 18px;
    line-height: 1.4;
    letter-spacing: -0.1px;
}
/* Részösszeg / ÁFA / Végösszeg rows spacing + line dividers */
body #order-standard_cart .order-summary .subtotal-line,
body #order-standard_cart .order-summary .tax-line,
body #order-standard_cart .order-summary .total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--global--color-very-dark-black-blue);
}
body #order-standard_cart .order-summary .subtotal-line + .tax-line,
body #order-standard_cart .order-summary .tax-line + .total-line {
    border-top: 1px solid var(--global--color-very-light-gray);
}

/* --- 2. Disabled/[disabled] button states (üres kosár → Fizetés halvány) --- */
body #order-standard_cart .btn-primary:disabled,
body #order-standard_cart .btn-primary[disabled],
body #order-standard_cart .btn-continue:disabled,
body #order-standard_cart .btn-continue[disabled],
body #order-standard_cart .btn-checkout:disabled,
body #order-standard_cart .btn-checkout[disabled],
body #order-standard_cart .btn-update:disabled,
body #order-standard_cart .btn-update[disabled] {
    background: #d9dfe4 !important;
    border-color: #d9dfe4 !important;
    color: #8a98a3 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    transform: none !important;
    text-shadow: none !important;
    pointer-events: none;
}
body #order-standard_cart .btn-primary:disabled:hover,
body #order-standard_cart .btn-primary[disabled]:hover,
body #order-standard_cart .btn-continue:disabled:hover,
body #order-standard_cart .btn-continue[disabled]:hover,
body #order-standard_cart .btn-checkout:disabled:hover,
body #order-standard_cart .btn-checkout[disabled]:hover,
body #order-standard_cart .btn-update:disabled:hover,
body #order-standard_cart .btn-update[disabled]:hover {
    background: #d9dfe4 !important;
    border-color: #d9dfe4 !important;
    color: #8a98a3 !important;
    box-shadow: none !important;
    transform: none !important;
}
/* Halvány-narancs (50% transparency) button — ez valszeg egy Hostiko addon   */
/* override, ahol az üres-kosár gomb 0.5 opacity narancs. Feljebb írjuk át:  */
body #order-standard_cart .order-summary .btn[style*="opacity"],
body #order-standard_cart .order-summary .btn.btn-faded,
body #order-standard_cart .order-summary .btn-checkout.disabled-look {
    background: #d9dfe4 !important;
    border-color: #d9dfe4 !important;
    color: #8a98a3 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* --- 3. Promo-code gomb compact (ne full-width narancs pill) --- */
/* A WHMCS "Kód ellenőrzése" .btn.btn-block-ot használ → ezt felülírjuk     */
/* kompakt, center-aligned pill-re, 280px max-width.                       */
body #order-standard_cart .promo-code-box .btn,
body #order-standard_cart .promo-code-box .btn-block,
body #order-standard_cart form[action*="applypromo"] .btn,
body #order-standard_cart form[action*="applypromo"] .btn-block,
body #order-standard_cart form[action*="validatepromo"] .btn,
body #order-standard_cart .promotion-code .btn,
body #order-standard_cart .promotion-code .btn-block,
body #order-standard_cart .tab-content form .btn.btn-block[type="submit"] {
    width: auto !important;
    max-width: 320px;
    display: block;
    margin: 14px auto 4px !important;
    padding: 11px 28px !important;
    border-radius: 30px !important;
    background: var(--global--color-bright-orange) !important;
    border: 1px solid var(--global--color-bright-orange) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(255, 120, 0, 0.2);
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
body #order-standard_cart .promo-code-box .btn:hover,
body #order-standard_cart .promo-code-box .btn-block:hover,
body #order-standard_cart form[action*="applypromo"] .btn:hover,
body #order-standard_cart form[action*="applypromo"] .btn-block:hover,
body #order-standard_cart form[action*="validatepromo"] .btn:hover,
body #order-standard_cart .promotion-code .btn:hover,
body #order-standard_cart .promotion-code .btn-block:hover,
body #order-standard_cart .tab-content form .btn.btn-block[type="submit"]:hover {
    background: #e66a00 !important;
    border-color: #e66a00 !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(255, 120, 0, 0.3);
    transform: translateY(-1px);
}
/* Promo-code input (teljes-szélességű, kompakt radius) */
body #order-standard_cart .promo-code-box input[type="text"],
body #order-standard_cart form[action*="applypromo"] input[type="text"],
body #order-standard_cart .promotion-code input[type="text"],
body #order-standard_cart .tab-content form input[name="promocode"],
body #order-standard_cart .tab-content form input[name="promotioncode"] {
    width: 100% !important;
    border-radius: 12px !important;
    border: 1px solid var(--global--color-very-light-gray) !important;
    padding: 12px 18px !important;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.2px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
body #order-standard_cart .promo-code-box input[type="text"]:focus,
body #order-standard_cart form[action*="applypromo"] input[type="text"]:focus,
body #order-standard_cart .promotion-code input[type="text"]:focus,
body #order-standard_cart .tab-content form input[name="promocode"]:focus {
    border-color: var(--global--color-bright-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, 0.12) !important;
    outline: none !important;
}

/* --- 4. Empty-cart illustration (td[colspan] targetálás) --- */
/* A "A kosár üres" egy <td colspan="X"> elemben van — reagáljunk rá.      */
body #order-standard_cart .view-cart-items table tbody tr td[colspan],
body #order-standard_cart .view-cart-items tbody tr td[colspan],
body #order-standard_cart table.view-cart-items tbody tr td[colspan] {
    padding: 52px 24px !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #7a8a96;
    background: #fff;
    position: relative;
    border: none;
}
body #order-standard_cart .view-cart-items table tbody tr td[colspan]::before,
body #order-standard_cart .view-cart-items tbody tr td[colspan]::before,
body #order-standard_cart table.view-cart-items tbody tr td[colspan]::before {
    content: "\f07a";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 300;
    font-size: 60px;
    color: var(--global--color-bright-orange);
    opacity: .25;
    display: block;
    line-height: 1;
    margin: 0 auto 18px;
    text-align: center;
}
body #order-standard_cart .view-cart-items table tbody tr td[colspan]::after,
body #order-standard_cart .view-cart-items tbody tr td[colspan]::after,
body #order-standard_cart table.view-cart-items tbody tr td[colspan]::after {
    content: "Nyugodtan böngéssz a termékeink között!";
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: #aeb9c1;
    margin-top: 10px;
    font-style: italic;
}

/* --- 5. Promo-tab header balanszírozás --- */
/* A "Promóciós kód alkalmazása" nav-tabs 1-elemű → elrejtjük a nav-t       */
/* és helyette az első tab-content-ben saját heading-et mutatunk.           */
body #order-standard_cart .nav-tabs {
    border-bottom: 1px solid var(--global--color-very-light-gray);
    padding: 0;
    margin-bottom: 0;
    background: transparent;
}
body #order-standard_cart .nav-tabs .nav-item,
body #order-standard_cart .nav-tabs > li {
    margin: 0;
}
body #order-standard_cart .nav-tabs .nav-link,
body #order-standard_cart .nav-tabs > li > a {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 20px !important;
    color: #7a8a96;
    font-weight: 600;
    font-size: 13.5px;
    position: relative;
    border-bottom: 2px solid transparent !important;
    transition: color .18s ease, border-color .18s ease;
}
body #order-standard_cart .nav-tabs .nav-link:hover,
body #order-standard_cart .nav-tabs > li > a:hover {
    color: var(--global--color-bright-orange) !important;
    border-bottom-color: rgba(255, 120, 0, 0.25) !important;
}
body #order-standard_cart .nav-tabs .nav-link.active,
body #order-standard_cart .nav-tabs > li.active > a,
body #order-standard_cart .nav-tabs > li > a.active {
    color: var(--global--color-bright-orange) !important;
    border-bottom-color: var(--global--color-bright-orange) !important;
    font-weight: 700 !important;
    background: transparent !important;
}
/* Tab-content wrapper (promo-code form container) */
body #order-standard_cart .tab-content {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 20px 22px;
    margin-bottom: 24px;
}
body #order-standard_cart .tab-content > .tab-pane {
    padding: 0;
}

/* Teljes .nav-tabs + .tab-content együtt card-os look (ahol csak a promo  */
/* tab van; radius a bal-felső sarkon is bejön, mert csak 1 item)          */
body #order-standard_cart .nav-tabs + .tab-content {
    border-radius: 0 12px 12px 12px;
}

/* --- 6. Vásárlás folytatása link polish --- */
body #order-standard_cart .order-summary a[href*="https://teamunity.hu/whmcs-sync/?ccce=cart"],
body #order-standard_cart .order-summary .continue-shopping {
    display: block;
    text-align: center;
    margin-top: 10px;
    color: #7a8a96;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s ease;
}
body #order-standard_cart .order-summary a[href*="https://teamunity.hu/whmcs-sync/?ccce=cart"]:hover,
body #order-standard_cart .order-summary .continue-shopping:hover {
    color: var(--global--color-bright-orange);
    text-decoration: underline;
}

/* --- 7. Trust-bar újratervezés (Unicode icon, ne FA unicode ::after) --- */
/* Az eredeti Phase 12B ::after FA unicode-ot használt, ami nem mindig      */
/* renderelődik jól. Most egyszerű szöveges dekoráció + proper bullet.     */
body #order-standard_cart .order-summary::after {
    content: "SSL titkosított fizetés  \00a0 \00b7 \00a0  30 napos pénzvisszafizetési garancia";
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 11.5px !important;
    color: #8a98a3 !important;
    display: block !important;
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px dashed var(--global--color-very-light-gray) !important;
    text-align: center !important;
    line-height: 1.7 !important;
    letter-spacing: 0.1px;
}

/* ============================================================ */
/*  PHASE 14 — User feedback finomítások (cart?a=view)      */
/* ============================================================ */
/* 1. Végösszeg (.font-size-36 / .total-due-today-value) kisebb */
/* 2. .order-summary padding override (ne legyen 22px 0)        */
/* 3. Promo-code input placeholder ne lógjon az ikonba          */

/* --- 14.1. Végösszeg / Total-due-today arány ---              */
/* Phase 12C-ben 32px volt, de a user-nek ez még mindig túl     */
/* nagy. Kisebb, mégis hangsúlyos (22px).                        */
body #order-standard_cart .font-size-36,
body #order-standard_cart .order-summary .font-size-36,
body #order-standard_cart .order-summary h1.font-size-36,
body #order-standard_cart .order-summary h1,
body #order-standard_cart .order-summary .total-due-today-value,
body #order-standard_cart .order-summary .total-due-today strong,
body #order-standard_cart .order-summary .total-row-total,
body #order-standard_cart .order-summary .total-due-today {
    font-family: 'Inter', sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: var(--global--color-bright-orange) !important;
    letter-spacing: -0.4px !important;
    text-align: center !important;
    margin: 6px 0 6px !important;
    padding: 0 !important;
    word-break: break-word;
}
/* A "Végösszeg" felirat és a pénzügyi leírás alatta — harmonikus méretek */
body #order-standard_cart .order-summary .total-due-today-label,
body #order-standard_cart .order-summary .total-due-today-description {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 2px 0 10px !important;
}

/* --- 14.2. .order-summary padding hard-lock --- */
/* A user jelzi, hogy valahonnan 22px 0px padding érkezik        */
/* (feltehetően BS4 .container vagy egy legacy rule cascadje).   */
/* Explicit 4-oldalú lock magasabb specificity-vel.              */
body #order-standard_cart .order-summary,
body #order-standard_cart .order-summary.container,
body #order-standard_cart .order-summary.container-fluid,
body #order-standard_cart .col-md-4 .order-summary,
body #order-standard_cart .col-lg-4 .order-summary,
body #order-standard_cart aside .order-summary {
    padding-top: 22px !important;
    padding-right: 24px !important;
    padding-bottom: 22px !important;
    padding-left: 24px !important;
}

/* --- 14.3. Promo-code input left-padding (ikon ne lógjon bele) --- */
/* A placeholder "Amennyiben van kupon kódja, itt adhatja meg"      */
/* túl közel van az ikonhoz → jobbra toljuk 48px-el.                */
body #order-standard_cart .promo-code-box,
body #order-standard_cart .promotion-code,
body #order-standard_cart form[action*="applypromo"] {
    position: relative;  /* abszolút pozíciós ikon referencia */
}
/* A ::before ikont abszolút pozícionáljuk az input elé, NEM inline */
body #order-standard_cart .promo-code-box::before,
body #order-standard_cart .promotion-code::before {
    position: absolute !important;
    left: 36px !important;       /* a box padding-je + kis offset */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-right: 0 !important;
    z-index: 2;
    pointer-events: none;
    font-size: 14px !important;
    line-height: 1;
}
/* Input left-padding 48px → a placeholder szöveg szépen mellé kerül */
body #order-standard_cart .promo-code-box input[type="text"],
body #order-standard_cart form[action*="applypromo"] input[type="text"],
body #order-standard_cart .promotion-code input[type="text"],
body #order-standard_cart .tab-content form input[name="promocode"],
body #order-standard_cart .tab-content form input[name="promotioncode"],
body #order-standard_cart input[name="promocode"],
body #order-standard_cart input[name="promotioncode"],
body #order-standard_cart input#promocode {
    padding-top: 12px !important;
    padding-right: 18px !important;
    padding-bottom: 12px !important;
    padding-left: 48px !important;
}
/* Placeholder finomítás: ne nagybetűs, megfelelő méret, színárnyalat */
body #order-standard_cart .promo-code-box input[type="text"]::placeholder,
body #order-standard_cart form[action*="applypromo"] input[type="text"]::placeholder,
body #order-standard_cart .promotion-code input[type="text"]::placeholder,
body #order-standard_cart input[name="promocode"]::placeholder,
body #order-standard_cart input[name="promotioncode"]::placeholder {
    text-transform: none !important;
    letter-spacing: 0.1px !important;
    font-weight: 400 !important;
    font-size: 13.5px !important;
    color: #8a98a3 !important;
    opacity: 1;
}

/* ====================================================================== */
/*   PHASE 15 — Clientarea dashboard (Hostiko-narancs)                 */
/* ---------------------------------------------------------------------- */
/*   Cél: a clientareahome.tpl két fő blokkját (.tiles stats-grid + a      */
/*   .client-home-cards panel-grid) Hostiko-narancs + Inter / Very-dark-  */
/*   blue tipográfiával renderelni. Eddig csak wp-6-ban volt erre CSS —   */
/*   most a wp-86 is ugyanolyan teljes, csak más palettával.               */
/*                                                                        */
/*   Scope: csak layout=86 alatt tölt (head.tpl), a wp-6 érintetlen.      */
/*   Target-ek:                                                            */
/*     .tiles .tile        — services / domains / tickets / invoices KPI  */
/*     .client-home-cards .card — dashboard-panel-ek                      */
/*     .card-accent-*      — színvariáns top-border (6 variáns)            */
/*     .list-group-item    — panel-ek menüsor elemei                       */
/*     .tile .highlight    — alsó színes csík (bg-color-{blue|green|red|gold}) */
/* ====================================================================== */

/* -- 15.1 Page title + heading hierarchy ---------------------------- */
/* A clientarea-oldalak .page-header blokkal nyitnak. Hostiko-look:     */
body.clientareahome .main-content h1,
body.clientareahome .primary-content h1,
body .main-content h2.page-title,
body .primary-content h2.page-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--global--color-very-dark-black-blue);
    letter-spacing: -0.4px;
    margin-bottom: 18px;
}

/* -- 15.2 Dashboard .tiles stats-grid ------------------------------- */
/* 4 nagy KPI-kártya a dashboard tetején (services/domains/tickets/    */
/* invoices). Twenty-one default: bg-color-blue/green/red/gold csíkok. */
/* Hostiko-look: Inter font, dark-blue stat-szám, narancs gyors hover. */
.tiles {
    margin-bottom: 24px;
}
.tiles .tile {
    background: var(--global--color-white);
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(12, 42, 63, 0.04);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    overflow: hidden;
    position: relative;
    padding: 22px 20px 20px;
    font-family: 'Inter', sans-serif;
    color: var(--global--color-very-dark-black-blue);
    min-height: 130px;
    display: block;
}
.tiles .tile:hover,
.tiles .tile:focus {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(255, 120, 0, 0.12);
    border-color: rgba(255, 120, 0, 0.45);
    text-decoration: none;
    color: var(--global--color-very-dark-black-blue);
}
.tiles .tile i {
    font-size: 26px;
    color: var(--global--color-bright-orange);
    margin-bottom: 8px;
    display: inline-block;
    transition: transform .2s ease;
}
.tiles .tile:hover i {
    transform: scale(1.08);
}
.tiles .tile .stat {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.6px;
    color: var(--global--color-very-dark-black-blue);
    line-height: 1.1;
    margin: 4px 0 2px;
}
.tiles .tile .title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.5px;
    color: #6a7a85;
    text-transform: uppercase;
    margin-top: 2px;
}
/* Highlight alsó csík — WHMCS 4 szemantikus szín, Hostiko-paletta ------ */
.tiles .tile .highlight {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
}
.tiles .tile .highlight.bg-color-blue {
    background: var(--global--color-strong-cyan) !important;
}
.tiles .tile .highlight.bg-color-green {
    background: var(--global--color-moderate-lime-green) !important;
}
.tiles .tile .highlight.bg-color-red {
    background: var(--global--color-strong-red) !important;
}
.tiles .tile .highlight.bg-color-gold {
    background: var(--global--color-bright-orange) !important;
}
/* Mobile stats-tile polish (2×2 grid → nagyobb padding + kisebb stat) */
@media (max-width: 575.98px) {
    .tiles .tile {
        padding: 18px 14px 16px;
        min-height: 110px;
    }
    .tiles .tile .stat {
        font-size: 24px;
    }
    .tiles .tile i {
        font-size: 22px;
    }
}

/* -- 15.3 .client-home-cards .card panel-rendszer ------------------- */
/* Dashboard másik fő blokkja: a WHMCS "panel"-ek (pl. My Services,      */
/* Latest Announcements, Support Tickets, Domain Status). Card-rendszer. */
.client-home-cards {
    margin-top: 8px;
}
.client-home-cards .card,
.client-home-cards .mc-promo-manage,
.client-home-cards .mc-promo-login {
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(12, 42, 63, 0.04);
    margin-bottom: 22px;
    background: var(--global--color-white);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.client-home-cards .card:hover {
    box-shadow: 0 6px 18px rgba(12, 42, 63, 0.07);
}
.client-home-cards .card .card-header {
    background: var(--global--color-very-light-gray-mostly-white);
    border-bottom: 1px solid var(--global--color-very-light-gray);
    padding: 14px 20px;
}
.client-home-cards .card .card-header .card-title,
.client-home-cards .card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15.5px;
    color: var(--global--color-very-dark-black-blue);
    letter-spacing: -0.2px;
    margin: 0;
    line-height: 1.4;
}
.client-home-cards .card .card-header .card-title i,
.client-home-cards .card-title i {
    color: var(--global--color-bright-orange);
    margin-right: 8px;
}
.client-home-cards .card .card-header .btn {
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    padding: 5px 14px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    color: #fff;
}
.client-home-cards .card .card-header .btn:hover {
    background: #e56b00;
    border-color: #e56b00;
    color: #fff;
}
.client-home-cards .card .card-body {
    padding: 18px 20px;
    color: var(--global--color-very-dark-black-blue);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
}
.client-home-cards .card .card-body p {
    margin-bottom: 0.75rem;
}
.client-home-cards .card .card-body p:last-child {
    margin-bottom: 0;
}
.client-home-cards .card .card-footer {
    background: var(--global--color-white);
    border-top: 1px solid var(--global--color-very-light-gray);
    padding: 10px 20px;
    font-size: 13px;
    color: #6a7a85;
    font-family: 'Inter', sans-serif;
}

/* -- 15.4 Card-accent-* színvariánsok (top-border) ------------------ */
/* A twenty-one 6 accent-variánst használ (blue, green, red, gold,     */
/* emerald, asbestos). Hostiko-look: color-coded top-border 3px, a     */
/* card-title mindig dark-blue marad (olvashatóság).                    */
.client-home-cards .card-accent-blue,
.client-home-cards .card-accent-green,
.client-home-cards .card-accent-red,
.client-home-cards .card-accent-gold,
.client-home-cards .card-accent-emerald,
.client-home-cards .card-accent-asbestos {
    border-top: 3px solid var(--global--color-bright-orange);
}
.client-home-cards .card-accent-blue {
    border-top-color: var(--global--color-strong-cyan);
}
.client-home-cards .card-accent-green,
.client-home-cards .card-accent-emerald {
    border-top-color: var(--global--color-moderate-lime-green);
}
.client-home-cards .card-accent-red {
    border-top-color: var(--global--color-strong-red);
}
.client-home-cards .card-accent-gold {
    border-top-color: var(--global--color-bright-orange);
}
.client-home-cards .card-accent-asbestos {
    border-top-color: var(--global--color-dark-grayish-cyan);
}
/* A card-title mindig dark-blue — felülírja a twenty-one színét ------ */
.client-home-cards .card .card-title,
.client-home-cards [class*="card-accent-"] .card-title {
    color: var(--global--color-very-dark-black-blue) !important;
}

/* -- 15.5 List-group-item-ek (panel-ek menüsor) ---------------------- */
/* A dashboard card-okban lévő link-listák (pl. "Manage Product" quick- */
/* links, service-action-ok). Hostiko-narancs hover + ikon-poz.        */
.client-home-cards .list-group {
    border-radius: 0;
}
.client-home-cards .list-group-flush .list-group-item,
.client-home-cards .list-group .list-group-item {
    border: none;
    border-bottom: 1px solid var(--global--color-very-light-gray);
    padding: 12px 20px 12px 44px;
    color: var(--global--color-very-dark-black-blue);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    background: var(--global--color-white);
    position: relative;
    transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.client-home-cards .list-group-flush .list-group-item:last-child,
.client-home-cards .list-group .list-group-item:last-child {
    border-bottom: none;
}
.client-home-cards .list-group-flush .list-group-item i,
.client-home-cards .list-group .list-group-item i {
    color: var(--global--color-bright-orange);
    position: absolute;
    left: 18px;
    top: 14px;
    font-size: 14px;
    transition: transform .18s ease;
}
.client-home-cards .list-group-flush .list-group-item:hover,
.client-home-cards .list-group .list-group-item:hover {
    background: rgba(255, 120, 0, 0.06);
    color: var(--global--color-bright-orange);
    padding-left: 48px;
    text-decoration: none;
}
.client-home-cards .list-group-flush .list-group-item:hover i,
.client-home-cards .list-group .list-group-item:hover i {
    transform: translateX(2px);
}
.client-home-cards .list-group .list-group-item.active {
    background: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
    color: #fff !important;
}
.client-home-cards .list-group .list-group-item.active i {
    color: #fff !important;
}
.client-home-cards .card .list-group-flush .list-group-item .badge,
.client-home-cards .list-group .list-group-item .badge {
    background: rgba(255, 120, 0, 0.12);
    color: var(--global--color-bright-orange);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 12px;
    letter-spacing: 0.3px;
    float: right;
    margin-top: 2px;
}
.client-home-cards .list-group .list-group-item.active .badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* -- 15.6 Dashboard üres-állapot (addon_html panel-ek nélkül) -------- */
/* Ha egy card-body üres, ne hagyjunk csúnya kétoszlopos rácsot.        */
.client-home-cards .card .card-body:empty,
.client-home-cards .card .card-footer:empty {
    display: none;
}

/* -- 15.7 Page-wrapper spacing a dashboard-on ----------------------- */
/* A clientareahome.tpl több vertikális szekciót rak egymás alá —      */
/* egyenletes spacing a Hostiko-welcome ↔ action-required ↔ tiles ↔    */
/* addons ↔ client-home-cards között.                                   */
body.clientareahome .hostiko-welcome-box + .hostiko-action-required,
body .hostiko-welcome-box + .hostiko-action-required {
    margin-top: 0;
}
body.clientareahome .hostiko-action-required + .tiles,
body .hostiko-action-required + .tiles {
    margin-top: 6px;
}
body.clientareahome .hostiko-welcome-box + .tiles,
body .hostiko-welcome-box + .tiles {
    margin-top: 6px;
}

/* -- 15.8 Responsive szövegméretek (mobilon kisebb heading-ek) ------ */
@media (max-width: 767.98px) {
    .client-home-cards .card .card-header {
        padding: 12px 16px;
    }
    .client-home-cards .card .card-header .card-title,
    .client-home-cards .card-title {
        font-size: 14.5px;
    }
    .client-home-cards .card .card-body {
        padding: 14px 16px;
        font-size: 13.5px;
    }
    .client-home-cards .list-group-flush .list-group-item,
    .client-home-cards .list-group .list-group-item {
        padding: 11px 16px 11px 40px;
        font-size: 13.5px;
    }
    .client-home-cards .list-group-flush .list-group-item i,
    .client-home-cards .list-group .list-group-item i {
        left: 14px;
        top: 13px;
    }
}

/* ====================================================================== */
/*   PHASE 16 — Clientarea list-oldalak polish (Hostiko-narancs)           */
/* ---------------------------------------------------------------------- */
/*   Cél: services/domains/invoices/tickets listák konzisztens Hostiko-    */
/*   look-ot kapnak: status-badge rendszer, DataTables chrome (search /    */
/*   length / pagination / info), empty state, loading spinner, bulk       */
/*   action toolbar a domain-listán.                                        */
/*                                                                        */
/*   Érintett oldalak:                                                     */
/*     clientarea?action=services     (.hostiko-services-list)         */
/*     clientarea?action=domains      (.hostiko-domains-list)         */
/*     clientarea?action=invoices     (.hostiko-invoices-list)        */
/*     supporttickets                 (.hostiko-tickets-list)         */
/* ====================================================================== */

/* -- 16.1 Status-badge rendszer (WHMCS .label.status.status-*) ------- */
/* Twenty-one default pill badges → Hostiko-harmonizált paletta +      */
/* egységes méret / typography. A .label.status wrapper adja a pill-t, */
/* a .status-{slug} határozza meg a színt.                              */
body .label.status,
body .main-content .label.status,
body .primary-content .label.status,
body span.label.status {
    display: inline-block;
    padding: 5px 11px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    border-radius: 20px;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    border: none;
    vertical-align: middle;
}
/* Sikeres / aktív — zöld */
body .label.status.status-active,
body .label.status.status-open,
body .label.status.status-completed,
body .label.status.status-paid,
body .label.status.status-refunded,
body span.label.status-active,
body span.label.status-paid {
    background: var(--global--color-moderate-lime-green);
    color: #fff;
}
/* Figyelem / folyamatban — narancs (Hostiko-brand) */
body .label.status.status-customer-reply,
body .label.status.status-pending-registration,
body .label.status.status-pending-transfer,
body .label.status.status-redemption,
body .label.status.status-grace,
body .label.status.status-inprogress,
body span.label.status-pending-registration {
    background: var(--global--color-bright-orange);
    color: #fff;
}
/* Amber warning — függő / felfüggesztett */
body .label.status.status-pending,
body .label.status.status-suspended,
body .label.status.status-onhold,
body span.label.status-pending,
body span.label.status-suspended {
    background: #f0ad4e;
    color: #fff;
}
/* Hiba / késedelem — vörös */
body .label.status.status-unpaid,
body .label.status.status-overdue,
body .label.status.status-failed,
body span.label.status-unpaid,
body span.label.status-overdue {
    background: var(--global--color-strong-red);
    color: #fff;
}
/* Lejárt — sötét-navy (vizuálisan weighty, de nem negatív) */
body .label.status.status-expired,
body .label.status.status-transferred-away,
body .label.status.status-collections,
body span.label.status-expired {
    background: var(--global--color-very-dark-black-blue);
    color: #fff;
}
/* Lezárt — neutrális szürke */
body .label.status.status-terminated,
body .label.status.status-cancelled,
body .label.status.status-closed,
body .label.status.status-fraud {
    background: #87939f;
    color: #fff;
}
/* Válaszolt — ibolya (support-ticket) */
body .label.status.status-answered {
    background: #7b4f9d;
    color: #fff;
}
/* Tábla-sorban középre igazítás */
body .main-content .table td .label.status,
body .primary-content .table td .label.status,
body .table-container .table td .label.status {
    margin: 2px 0;
}

/* -- 16.2 DataTables wrapper chrome --------------------------------- */
/* A WHMCS DataTables-et használ: search input + length dropdown + info */
/* text + pagination. Default BS4-pill-look → Hostiko pill + narancs    */
/* focus ring.                                                          */
body .hostiko-services-list .dataTables_wrapper,
body .hostiko-domains-list .dataTables_wrapper,
body .hostiko-invoices-list .dataTables_wrapper,
body .hostiko-tickets-list .dataTables_wrapper,
body .table-container .dataTables_wrapper {
    font-family: 'Inter', sans-serif;
    color: var(--global--color-very-dark-black-blue);
}
/* Search input (a DataTables "listtable" wrappere) */
body .dataTables_wrapper .dataTables_filter {
    text-align: right;
    margin-bottom: 12px;
}
body .dataTables_wrapper .dataTables_filter label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #6a7a85;
    margin-bottom: 0;
}
body .dataTables_wrapper .dataTables_filter input[type="search"] {
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 20px;
    padding: 7px 14px 7px 34px;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
    background: var(--global--color-white) url("//ugyfel.teamunity.hu/templates/hostiko/layouts/wp-86/data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a7a85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.35-4.35'/></svg>") no-repeat 11px center;
    background-size: 14px 14px;
    min-width: 220px;
    margin-left: 8px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
body .dataTables_wrapper .dataTables_filter input[type="search"]:focus {
    outline: none;
    border-color: var(--global--color-bright-orange);
    box-shadow: 0 0 0 3px rgba(255, 120, 0, 0.12);
}
/* Length dropdown ("Show N entries") */
body .dataTables_wrapper .dataTables_length label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #6a7a85;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 12px;
    padding: 5px 28px 5px 12px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    background: var(--global--color-white) url("//ugyfel.teamunity.hu/templates/hostiko/layouts/wp-86/data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236a7a85' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center;
    background-size: 10px 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    color: var(--global--color-very-dark-black-blue);
    font-weight: 600;
}
body .dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--global--color-bright-orange);
}
/* Info text ("Showing 1 to 10 of 42 entries") */
body .dataTables_wrapper .dataTables_info {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: #8a98a3;
    padding: 14px 4px 8px;
}
/* Pagination pills */
body .dataTables_wrapper .dataTables_paginate {
    padding-top: 8px;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--global--color-very-light-gray) !important;
    background: var(--global--color-white) !important;
    color: var(--global--color-very-dark-black-blue) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    border-radius: 10px !important;
    padding: 6px 12px !important;
    margin: 0 3px !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 120, 0, 0.08) !important;
    border-color: var(--global--color-bright-orange) !important;
    color: var(--global--color-bright-orange) !important;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(255, 120, 0, 0.25);
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: var(--global--color-white) !important;
    border-color: var(--global--color-very-light-gray) !important;
    color: #c1c8ce !important;
    cursor: not-allowed;
    box-shadow: none;
}

/* -- 16.3 Empty state (norecordsfound) polish ------------------------ */
/* Üres tábla: "Nincs megfelelő rekord" sor. Finomabb megjelenítés FA  */
/* ikonnal + központosított szöveggel.                                  */
body .dataTables_wrapper .dataTables_empty,
body table.dataTable tbody td.dataTables_empty {
    text-align: center;
    padding: 48px 20px !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #8a98a3;
    background: var(--global--color-white);
}
body table.dataTable tbody td.dataTables_empty::before {
    content: "\f07b";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 300;
    display: block;
    font-size: 36px;
    color: rgba(255, 120, 0, 0.35);
    margin-bottom: 10px;
}

/* -- 16.4 Loading spinner (#tableLoading) ---------------------------- */
/* DataTables load előtti pár pillanat: "Loading..." + spin-ikon.      */
body #tableLoading,
body .table-container #tableLoading {
    padding: 40px 20px;
    text-align: center;
    color: #8a98a3;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
}
body #tableLoading .fa-spinner,
body #tableLoading .fas.fa-spinner {
    color: var(--global--color-bright-orange);
    font-size: 20px;
    margin-right: 8px;
    vertical-align: middle;
}

/* -- 16.5 Domain bulk-action toolbar (clientareadomains.tpl) --------- */
/* A táblázat fölötti "Manage NS / Contact info / Mass renew / More..."  */
/* btn-group-ot Hostiko-pillek-kel finomítjuk + dropdown.                */
body .hostiko-domains-list .btn-group.btn-group-sm .btn,
body .hostiko-domains-list .btn-group-sm .btn.setBulkAction {
    border-radius: 20px !important;
    padding: 7px 16px !important;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    margin-right: 6px;
    border: 1px solid var(--global--color-very-light-gray);
    background: var(--global--color-white);
    color: var(--global--color-very-dark-black-blue);
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
body .hostiko-domains-list .btn-group.btn-group-sm .btn i,
body .hostiko-domains-list .btn-group-sm .btn.setBulkAction i {
    margin-right: 5px;
    color: var(--global--color-bright-orange);
    transition: color .18s ease;
}
body .hostiko-domains-list .btn-group.btn-group-sm .btn:hover,
body .hostiko-domains-list .btn-group-sm .btn.setBulkAction:hover {
    background: rgba(255, 120, 0, 0.08);
    border-color: var(--global--color-bright-orange);
    color: var(--global--color-bright-orange);
    box-shadow: 0 3px 8px rgba(255, 120, 0, 0.12);
}
body .hostiko-domains-list .btn-group.btn-group-sm .dropdown-toggle::after {
    margin-left: 6px;
    vertical-align: 2px;
    border-top-color: currentColor;
}
body .hostiko-domains-list .btn-group-sm .dropdown-menu {
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(12, 42, 63, 0.08);
    padding: 6px;
    margin-top: 6px;
}
body .hostiko-domains-list .btn-group-sm .dropdown-item {
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    color: var(--global--color-very-dark-black-blue);
}
body .hostiko-domains-list .btn-group-sm .dropdown-item i {
    margin-right: 8px;
    color: var(--global--color-bright-orange);
    width: 14px;
    text-align: center;
}
body .hostiko-domains-list .btn-group-sm .dropdown-item:hover,
body .hostiko-domains-list .btn-group-sm .dropdown-item:focus {
    background: rgba(255, 120, 0, 0.08);
    color: var(--global--color-bright-orange);
}

/* -- 16.6 Services/Domains/Invoices tábla tipográfia + row-hover ----- */
/* A Phase 9A.3 alapján van bg, border, radius — most szín/ikon finom. */
body .hostiko-services-list .table,
body .hostiko-domains-list .table,
body .hostiko-invoices-list .table {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--global--color-very-dark-black-blue);
    margin-bottom: 0;
}
body .hostiko-services-list .table tbody td,
body .hostiko-domains-list .table tbody td,
body .hostiko-invoices-list .table tbody td {
    padding: 13px 14px;
    vertical-align: middle;
    border-top: 1px solid var(--global--color-very-light-gray);
}
body .hostiko-services-list .table tbody a,
body .hostiko-domains-list .table tbody a,
body .hostiko-invoices-list .table tbody a {
    color: var(--global--color-very-dark-black-blue);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}
body .hostiko-services-list .table tbody tr:hover a,
body .hostiko-domains-list .table tbody tr:hover a,
body .hostiko-invoices-list .table tbody tr:hover a {
    color: var(--global--color-bright-orange);
}
body .hostiko-services-list .table tbody .text-muted,
body .hostiko-domains-list .table tbody small {
    font-size: 12.5px;
    color: #6a7a85;
    font-weight: 400;
}
/* Autorenew check/times icon polish */
body .hostiko-domains-list .table tbody small .text-success {
    color: var(--global--color-moderate-lime-green) !important;
}
body .hostiko-domains-list .table tbody small .text-danger {
    color: var(--global--color-strong-red) !important;
}

/* -- 16.7 Tickets-list wrapper (supporttickets) ----------------- */
/* A supportticketslist.tpl-t már Phase 8.2-ben a .hostiko-tickets-list */
/* wrapper kapja — ugyanazt a table-stílust alkalmazzuk mint máshol.   */
body .hostiko-tickets-list .table-container,
body .hostiko-tickets-list {
    background: var(--global--color-white);
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 2px 10px rgba(12, 42, 63, 0.04);
}
body .hostiko-tickets-list #tableTicketsList thead th {
    background: var(--global--color-very-light-gray-bg);
    color: var(--global--color-very-dark-black-blue);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--global--color-very-light-gray);
    padding: 12px 14px;
}
body .hostiko-tickets-list #tableTicketsList tbody tr {
    transition: background-color .15s ease;
    cursor: pointer;
}
body .hostiko-tickets-list #tableTicketsList tbody tr:hover {
    background: rgba(255, 120, 0, 0.04) !important;
}
body .hostiko-tickets-list #tableTicketsList tbody td {
    padding: 13px 14px;
    vertical-align: middle;
    border-top: 1px solid var(--global--color-very-light-gray);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--global--color-very-dark-black-blue);
}
body .hostiko-tickets-list #tableTicketsList tbody a {
    color: var(--global--color-very-dark-black-blue);
    font-weight: 600;
    text-decoration: none;
}
body .hostiko-tickets-list #tableTicketsList tbody tr:hover a {
    color: var(--global--color-bright-orange);
}

/* -- 16.8 Responsive cleanup (mobil toolbar + search) --------------- */
@media (max-width: 767.98px) {
    body .dataTables_wrapper .dataTables_filter {
        text-align: left;
        margin-bottom: 10px;
    }
    body .dataTables_wrapper .dataTables_filter input[type="search"] {
        min-width: 100%;
        margin-left: 0;
        margin-top: 4px;
    }
    body .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 5px 10px !important;
        font-size: 12px;
        margin: 0 2px !important;
    }
    body .hostiko-domains-list .btn-group.btn-group-sm {
        flex-wrap: wrap;
        gap: 6px;
    }
    body .hostiko-domains-list .btn-group.btn-group-sm .btn {
        margin-right: 0;
    }
    body .label.status,
    body span.label.status {
        padding: 4px 9px;
        font-size: 10.5px;
    }
}

/* ====================================================================== */
/*   PHASE 17 — User feedback (welcome-box, fehér ikonok, cart-finalize)   */
/* ---------------------------------------------------------------------- */
/*   1. clientareahomeorders / welcome-box layout robusztusabb rendering  */
/*   2. .fa-arrow-right + .fa-plus ikonok fehérre a gombokon              */
/*   3. cart .featured-tlds-container teljes elrejtés                  */
/*   4. Végösszeg .amt 1.3em (user exact spec), parent reset hogy értelmes*/
/*   5. Cart form-control padding 5px 5px (user exact spec)                */
/* ====================================================================== */

/* --- 17.1. Welcome-box (clientareahomeorders) layout fix --------------- */
/* A user jelzi, hogy a welcome-box clientareahomeorders (subtitle)        */
/* rész nem jól jelenik meg. A Phase 9A.1 rule #7c7c7c-t használt          */
/* (--global--color-text) — túl halvány kontraszt. Javítás: sötétebb       */
/* szín, max-width, és robusztusabb flex-reset a mobile-friendly layoutra. */
body .hostiko-welcome-box .hostiko-welcome-inner {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
body .hostiko-welcome-box .hostiko-welcome-text {
    flex: 1 1 320px;
    min-width: 0;
}
body .hostiko-welcome-box .hostiko-welcome-actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
body .hostiko-welcome-box .hostiko-welcome-title {
    margin: 0 0 6px !important;
    line-height: 1.25;
    word-break: break-word;
}
body .hostiko-welcome-box .hostiko-welcome-subtitle {
    color: #5a6773 !important;     /* olvashatóbb, mint #7c7c7c */
    font-size: 14px !important;
    line-height: 1.55 !important;
    max-width: 640px;
    margin: 0 !important;
    word-break: break-word;
}
/* Mobile: action-gombok a szöveg alá kerüljenek szépen */
@media (max-width: 575.98px) {
    body .hostiko-welcome-box .hostiko-welcome-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    body .hostiko-welcome-box .hostiko-welcome-actions {
        width: 100%;
    }
    body .hostiko-welcome-box .hostiko-welcome-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* --- 17.2. Fehér fa-arrow-right + fa-plus ikonok gombokon --------------- */
/* A user panaszkodik, hogy a Phase 9A.8 announcements narancs btn-default  */
/* gombokon a fa-arrow-right nem fehér (vagy legalább nem vizuálisan az).  */
/* Explicit inherit → white, minden FA5 variansra + magasabb specificity.  */
body .btn i.fa-arrow-right,
body .btn i.fas.fa-arrow-right,
body .btn i.far.fa-arrow-right,
body .btn i.fal.fa-arrow-right,
body .btn i.fab.fa-arrow-right,
body .btn i.fa-plus,
body .btn i.fas.fa-plus,
body .btn i.far.fa-plus,
body .btn i.fal.fa-plus,
body a.btn i.fa-arrow-right,
body a.btn i.fa-plus,
body button.btn i.fa-arrow-right,
body button.btn i.fa-plus,
body .btn-default i.fa-arrow-right,
body .btn-default i.fa-plus,
body .btn-primary i.fa-arrow-right,
body .btn-primary i.fa-plus,
body .btn-success i.fa-arrow-right,
body .btn-success i.fa-plus,
body .btn-info i.fa-arrow-right,
body .btn-info i.fa-plus {
    color: #fff !important;
}
/* Hover-on is megőrzi a fehéret */
body .btn:hover i.fa-arrow-right,
body .btn:hover i.fa-plus,
body .btn:focus i.fa-arrow-right,
body .btn:focus i.fa-plus,
body .btn:active i.fa-arrow-right,
body .btn:active i.fa-plus {
    color: #fff !important;
}

/* --- 17.3. Cart: featured-tlds-container teljes elrejtés ---------------- */
/* Eddig csak a .col-sm-2-t rejtettük (line 1473), most a teljes container-t*/
/* levesszük, mert a user szerint nem kell semmilyen formában.             */
body .featured-tlds-container,
body #order-standard_cart .featured-tlds-container,
#order-standard_cart .featured-tlds-container,
.cart-featured-tlds,
#order-standard_cart .cart-featured-tlds,
body .featured-tlds,
#order-standard_cart .featured-tlds {
    display: none !important;
}

/* --- 17.4. Végösszeg .amt 1.3em (user exact spec) ---------------------- */
/* User explicit szabály:                                                  */
/*   #order-standard_cart .order-summary .total-due-today .amt {          */
/*       font-size: 1.3em;                                                 */
/*   }                                                                      */
/* Gond: a Phase 14-ben a .total-due-today 22px !important-t kapott, így  */
/* az .amt 1.3em = 28.6px lenne. Ezért a parent .total-due-today-t         */
/* visszaállítjuk normál 16px-re, és az .amt kapja az 1.3em-t (≈20.8px).   */
body #order-standard_cart .order-summary .total-due-today,
body #order-standard_cart .order-summary .total-due-today-value,
body #order-standard_cart .order-summary .total-due-today strong,
body #order-standard_cart .order-summary .total-row-total {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--global--color-very-dark-black-blue) !important;
    margin: 6px 0 !important;
}
body #order-standard_cart .order-summary .total-due-today .amt,
#order-standard_cart .order-summary .total-due-today .amt {
    font-size: 1.3em !important;
    font-weight: 800 !important;
    color: var(--global--color-bright-orange) !important;
    letter-spacing: -0.2px !important;
    line-height: 1.2 !important;
}

/* --- 17.5. Cart form-control padding 5px 5px (user exact spec) ---------- */
/* User explicit szabály:                                                  */
/*   body #order-standard_cart .form-control,                              */
/*   body #order-standard_cart input[type="text|email|password|tel"],     */
/*   body #order-standard_cart select,                                     */
/*   body #order-standard_cart textarea {                                  */
/*       padding: 5px 5px;                                                 */
/*   }                                                                      */
body #order-standard_cart .form-control,
body #order-standard_cart input[type="text"],
body #order-standard_cart input[type="email"],
body #order-standard_cart input[type="password"],
body #order-standard_cart input[type="tel"],
body #order-standard_cart input[type="number"],
body #order-standard_cart input[type="search"],
body #order-standard_cart select,
body #order-standard_cart textarea {
    padding: 5px 5px !important;
}
/* A Phase 14.3-ban beállított promo-code ::before ikon 36px-re van       */
/* abszolút pozícionálva + input padding-left: 48px — az új 5px 5px        */
/* spec összefér VAGY az ikont rejteni kell, hogy ne essen át a textnek. */
/* Vissza állítjuk az ikont inline + üres placeholder-cserével.            */
body #order-standard_cart .promo-code-box::before,
body #order-standard_cart .promotion-code::before,
body #order-standard_cart form[action*="applypromo"]::before {
    display: none !important;
}
/* Promo input padding-left override (Phase 14 48px → 5px spec)           */
body #order-standard_cart .promo-code-box input[type="text"],
body #order-standard_cart form[action*="applypromo"] input[type="text"],
body #order-standard_cart .promotion-code input[type="text"],
body #order-standard_cart input[name="promocode"],
body #order-standard_cart input[name="promotioncode"],
body #order-standard_cart input#promocode {
    padding-top: 5px !important;
    padding-right: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 5px !important;
}

/* ====================================================================== */
/*   PHASE 18 — Affiliates oldal teljes redesign (Hostiko-narancs)        */
/* ---------------------------------------------------------------------- */
/*   Cél: affiliates + affiliates?signup teljes vizuális megújítás*/
/*   Eddig twenty-one parent-inherit — most hostiko-narancs, Inter, modern*/
/*   Struktúra:                                                            */
/*     18.1  Signup (onboarding) hero kártya                               */
/*     18.2  Dashboard container + hero-balance kártya                     */
/*     18.3  Stats (clicks, signups, conversion) 3-oszlopos grid           */
/*     18.4  Referral-link másolható input + copy-button                   */
/*     18.5  Commissions 3-kártyás breakdown                               */
/*     18.6  Card-wrapper (referrals + link-code)                          */
/*     18.7  Responsive breakpoints                                        */
/* ====================================================================== */

/* --- 18.1. Signup hero kártya ------------------------------------------ */
body .hostiko-affiliate-signup {
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
}
body .hostiko-affiliate-signup-hero {
    background: linear-gradient(135deg, var(--global--color-bright-orange) 0%, #ff7a2b 100%);
    color: #fff;
    text-align: center;
    padding: 48px 32px 40px;
    border-radius: 20px 20px 0 0;
    position: relative;
    overflow: hidden;
}
body .hostiko-affiliate-signup-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}
body .hostiko-affiliate-signup-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -40px;
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
body .hostiko-affiliate-signup-icon {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}
body .hostiko-affiliate-signup-icon i {
    font-size: 34px;
    color: #fff;
}
body .hostiko-affiliate-signup-title {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.15;
    position: relative;
    z-index: 1;
}
body .hostiko-affiliate-signup-intro {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}
body .hostiko-affiliate-signup-benefits {
    background: #fff;
    padding: 32px 40px;
    border-left: 1px solid #eef1f4;
    border-right: 1px solid #eef1f4;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
body .hostiko-affiliate-signup-benefit {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f5f7;
}
body .hostiko-affiliate-signup-benefit:last-child {
    border-bottom: none;
}
body .hostiko-affiliate-signup-benefit-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 106, 0, 0.12);
    color: var(--global--color-bright-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
body .hostiko-affiliate-signup-benefit-text {
    flex: 1 1 auto;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--global--color-very-dark-black-blue);
    padding-top: 5px;
}
body .hostiko-affiliate-signup-cta {
    background: #fff;
    padding: 28px 40px 40px;
    border: 1px solid #eef1f4;
    border-top: none;
    border-radius: 0 0 20px 20px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(12, 42, 63, 0.06);
}
body .hostiko-affiliate-signup-btn {
    background: var(--global--color-bright-orange) !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    padding: 16px 44px !important;
    border-radius: 999px !important;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
    box-shadow: 0 8px 22px rgba(255, 106, 0, 0.28);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
body .hostiko-affiliate-signup-btn i {
    font-size: 18px;
    color: #fff !important;
}
body .hostiko-affiliate-signup-btn:hover,
body .hostiko-affiliate-signup-btn:focus {
    background: #e55a00 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(255, 106, 0, 0.38);
}
body .hostiko-affiliate-signup-btn:active {
    transform: translateY(0);
}

/* --- 18.2. Dashboard hero (balance highlight) -------------------------- */
body .hostiko-affiliates {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
body .hostiko-affiliate-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    padding: 14px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    border: none;
    background: rgba(92, 184, 92, 0.12);
    color: #1e6a1e;
}
body .hostiko-affiliate-alert i {
    font-size: 18px;
    color: var(--global--color-moderate-lime-green);
}
body .hostiko-affiliate-hero {
    background: linear-gradient(135deg, #0c2a3f 0%, #14425f 60%, #1a5275 100%);
    color: #fff;
    border-radius: 20px;
    padding: 32px 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(12, 42, 63, 0.18);
}
body .hostiko-affiliate-hero::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255, 106, 0, 0.22) 0%, rgba(255, 106, 0, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}
body .hostiko-affiliate-hero-left {
    flex: 1 1 300px;
    min-width: 0;
    position: relative;
    z-index: 1;
}
body .hostiko-affiliate-hero-right {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    text-align: right;
}
body .hostiko-affiliate-hero-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
body .hostiko-affiliate-hero-eyebrow i {
    color: var(--global--color-bright-orange);
    font-size: 15px;
}
body .hostiko-affiliate-hero-amount {
    font-family: 'Inter', sans-serif;
    font-size: 44px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1.2px;
    line-height: 1.05;
    margin-bottom: 14px;
    word-break: break-word;
}
body .hostiko-affiliate-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.78);
}
body .hostiko-affiliate-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
body .hostiko-affiliate-hero-meta-item i {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}
body .hostiko-affiliate-hero-meta-item strong {
    color: #fff;
    font-weight: 700;
    margin-left: 3px;
}
body .hostiko-affiliate-withdraw-form {
    margin: 0;
}
body .hostiko-affiliate-withdraw-btn {
    background: var(--global--color-bright-orange) !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 14px 28px !important;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 24px rgba(255, 106, 0, 0.35);
    transition: all 0.2s ease;
    white-space: nowrap;
}
body .hostiko-affiliate-withdraw-btn i {
    color: #fff !important;
    font-size: 16px;
}
body .hostiko-affiliate-withdraw-btn:hover,
body .hostiko-affiliate-withdraw-btn:focus {
    background: #e55a00 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(255, 106, 0, 0.45);
}
body .hostiko-affiliate-withdraw-btn.disabled,
body .hostiko-affiliate-withdraw-btn:disabled {
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.55) !important;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}
body .hostiko-affiliate-withdraw-btn.disabled i,
body .hostiko-affiliate-withdraw-btn:disabled i {
    color: rgba(255, 255, 255, 0.55) !important;
}
body .hostiko-affiliate-withdraw-hint {
    margin: 10px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.62);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
body .hostiko-affiliate-withdraw-hint i {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

/* --- 18.3. Stats (clicks, signups, conversion) ------------------------- */
body .hostiko-affiliate-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
body .hostiko-affiliate-stat {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
body .hostiko-affiliate-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--global--color-bright-orange);
    opacity: 0.8;
}
body .hostiko-affiliate-stat:hover {
    border-color: rgba(255, 106, 0, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(12, 42, 63, 0.08);
}
body .hostiko-affiliate-stat-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 106, 0, 0.1);
    color: var(--global--color-bright-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
body .hostiko-affiliate-stat-clicks .hostiko-affiliate-stat-icon {
    background: rgba(8, 187, 164, 0.12);
    color: var(--global--color-strong-cyan);
}
body .hostiko-affiliate-stat-clicks::before {
    background: var(--global--color-strong-cyan);
}
body .hostiko-affiliate-stat-signups .hostiko-affiliate-stat-icon {
    background: rgba(92, 184, 92, 0.12);
    color: var(--global--color-moderate-lime-green);
}
body .hostiko-affiliate-stat-signups::before {
    background: var(--global--color-moderate-lime-green);
}
body .hostiko-affiliate-stat-body {
    flex: 1 1 auto;
    min-width: 0;
}
body .hostiko-affiliate-stat-num {
    font-family: 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: var(--global--color-very-dark-black-blue);
    line-height: 1.05;
    letter-spacing: -0.6px;
}
body .hostiko-affiliate-stat-unit {
    font-size: 18px;
    font-weight: 700;
    margin-left: 2px;
    color: var(--global--color-bright-orange);
}
body .hostiko-affiliate-stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #7c7c7c;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 4px;
}

/* --- 18.4. Referral link copy-input ------------------------------------ */
body .hostiko-affiliate-card {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(12, 42, 63, 0.04);
    overflow: hidden;
}
body .hostiko-affiliate-card-header {
    padding: 18px 24px;
    border-bottom: 1px solid #f3f5f7;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fafbfc;
}
body .hostiko-affiliate-card-header i {
    font-size: 16px;
    color: var(--global--color-bright-orange);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 106, 0, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body .hostiko-affiliate-card-header h3 {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--global--color-very-dark-black-blue);
    letter-spacing: -0.2px;
}
body .hostiko-affiliate-card-body {
    padding: 22px 24px;
}
body .hostiko-affiliate-reflink-wrap {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
body .hostiko-affiliate-reflink-input {
    flex: 1 1 auto;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace !important;
    font-size: 13.5px !important;
    padding: 12px 16px !important;
    border: 1.5px solid #dce1e6 !important;
    border-radius: 10px !important;
    background: #f8fafb !important;
    color: var(--global--color-very-dark-black-blue) !important;
    height: auto !important;
}
body .hostiko-affiliate-reflink-input:focus {
    border-color: var(--global--color-bright-orange) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.12) !important;
    outline: none;
}
body .hostiko-affiliate-reflink-copy {
    flex: 0 0 auto;
    background: var(--global--color-bright-orange) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(255, 106, 0, 0.22);
}
body .hostiko-affiliate-reflink-copy i {
    color: #fff !important;
    font-size: 13px;
}
body .hostiko-affiliate-reflink-copy:hover,
body .hostiko-affiliate-reflink-copy:focus {
    background: #e55a00 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 106, 0, 0.32);
}
body .hostiko-affiliate-reflink-copy.is-copied {
    background: var(--global--color-moderate-lime-green) !important;
    box-shadow: 0 4px 12px rgba(92, 184, 92, 0.28);
}

/* --- 18.5. Commissions 3-card breakdown -------------------------------- */
body .hostiko-affiliate-commissions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
body .hostiko-affiliate-commission {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
body .hostiko-affiliate-commission:hover {
    border-color: rgba(255, 106, 0, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(12, 42, 63, 0.08);
}
body .hostiko-affiliate-commission-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
body .hostiko-affiliate-commission-pending .hostiko-affiliate-commission-icon {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
}
body .hostiko-affiliate-commission-available .hostiko-affiliate-commission-icon {
    background: rgba(255, 106, 0, 0.12);
    color: var(--global--color-bright-orange);
}
body .hostiko-affiliate-commission-withdrawn .hostiko-affiliate-commission-icon {
    background: rgba(8, 187, 164, 0.12);
    color: var(--global--color-strong-cyan);
}
body .hostiko-affiliate-commission-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7c7c7c;
    margin-bottom: 10px;
}
body .hostiko-affiliate-commission-amount {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--global--color-very-dark-black-blue);
    letter-spacing: -0.5px;
    word-break: break-word;
}
body .hostiko-affiliate-commission-available .hostiko-affiliate-commission-amount {
    color: var(--global--color-bright-orange);
}

/* --- 18.6. Card-wrapped referrals table + link-code ------------------- */
body .hostiko-affiliate-referrals .hostiko-affiliate-card-body,
body .hostiko-affiliate-linkcode .hostiko-affiliate-card-body {
    padding: 18px 20px 20px;
}
body .hostiko-affiliate-referrals .table-container {
    margin-top: 0;
}
body .hostiko-affiliate-referrals #tableAffiliatesList {
    margin-bottom: 0;
}
body .hostiko-affiliate-referrals #tableAffiliatesList thead th {
    background: #fafbfc;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #7c7c7c;
    border-bottom: 2px solid #eef1f4;
    padding: 12px 14px;
}
body .hostiko-affiliate-referrals #tableAffiliatesList tbody td {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: var(--global--color-very-dark-black-blue);
    padding: 14px;
    border-top: 1px solid #f3f5f7;
    vertical-align: middle;
}
body .hostiko-affiliate-referrals #tableAffiliatesList tbody td strong {
    color: var(--global--color-bright-orange);
    font-weight: 700;
}
body .hostiko-affiliate-linkcode-preview {
    background: #f8fafb;
    border: 1.5px solid #eef1f4;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--global--color-very-dark-black-blue);
    word-break: break-word;
}
body .hostiko-affiliate-linkcode-preview img,
body .hostiko-affiliate-linkcode-preview a {
    max-width: 100%;
    height: auto;
}

/* --- 18.7. Responsive breakpoints -------------------------------------- */
@media (max-width: 991.98px) {
    body .hostiko-affiliate-hero {
        padding: 28px 24px;
    }
    body .hostiko-affiliate-hero-amount {
        font-size: 36px;
    }
    body .hostiko-affiliate-hero-right {
        text-align: left;
        flex: 1 1 100%;
    }
    body .hostiko-affiliate-withdraw-hint {
        justify-content: flex-start;
    }
    body .hostiko-affiliate-stats,
    body .hostiko-affiliate-commissions {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575.98px) {
    body .hostiko-affiliate-signup-hero {
        padding: 36px 22px 30px;
    }
    body .hostiko-affiliate-signup-title {
        font-size: 24px;
    }
    body .hostiko-affiliate-signup-benefits,
    body .hostiko-affiliate-signup-cta {
        padding: 22px 22px;
    }
    body .hostiko-affiliate-hero {
        padding: 24px 20px;
        border-radius: 16px;
    }
    body .hostiko-affiliate-hero-amount {
        font-size: 30px;
    }
    body .hostiko-affiliate-hero-meta {
        flex-direction: column;
        gap: 8px;
    }
    body .hostiko-affiliate-withdraw-btn {
        width: 100%;
        justify-content: center;
    }
    body .hostiko-affiliate-stats,
    body .hostiko-affiliate-commissions {
        grid-template-columns: 1fr;
    }
    body .hostiko-affiliate-stat {
        padding: 18px 20px;
    }
    body .hostiko-affiliate-stat-num {
        font-size: 26px;
    }
    body .hostiko-affiliate-reflink-wrap {
        flex-direction: column;
    }
    body .hostiko-affiliate-reflink-copy {
        justify-content: center;
    }
    body .hostiko-affiliate-card-header {
        padding: 14px 16px;
    }
    body .hostiko-affiliate-card-body {
        padding: 16px;
    }
    body .hostiko-affiliate-commission {
        padding: 20px 16px;
    }
    body .hostiko-affiliate-commission-amount {
        font-size: 20px;
    }
}

/* ====================================================================== */
/*   PHASE 19 — Submitticket teljes redesign (Hostiko-narancs)            */
/* ---------------------------------------------------------------------- */
/*   Fájlok:                                                               */
/*     - supportticketsubmit-stepone.tpl  (department picker)              */
/*     - supportticketsubmit-steptwo.tpl  (full form)                      */
/*     - supportticketsubmit-confirm.tpl  (success)                        */
/*     - supportticketsubmit-kbsuggestions.tpl (KB cards)                  */
/*                                                                          */
/*   Struktúra:                                                            */
/*     19.1  Konténer + stepper (3-fázisú progress)                        */
/*     19.2  Hero (ikon + címsor minden oldalon)                            */
/*     19.3  Department-cards (stepone)                                    */
/*     19.4  Form-sections (sorszámozott kártyák steptwo-ban)               */
/*     19.5  Form-control / input-icon / select / textarea styling          */
/*     19.6  Attachments (custom-file + add-more gomb)                      */
/*     19.7  Submit-bar + primary/secondary gombok                          */
/*     19.8  Confirm-page (siker-animáció, nagy ticket-ID)                  */
/*     19.9  KB-suggestions inline (steptwo alatti ajánlás)                 */
/*     19.10 Responsive breakpoints                                         */
/* ====================================================================== */

/* --- 19.1. Konténer + stepper (3-fázisú progress) --------------------- */
body .hostiko-ticket-submit {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
body .hostiko-ticket-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 8px;
    padding: 0 8px;
}
body .hostiko-ticket-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    position: relative;
    min-width: 0;
}
body .hostiko-ticket-step-num {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e5e9ed;
    color: #a0a9b3;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}
body .hostiko-ticket-step-num i {
    font-size: 14px;
}
body .hostiko-ticket-step-label {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #a0a9b3;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: color 0.25s ease;
}
body .hostiko-ticket-step-active .hostiko-ticket-step-num {
    background: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    color: #fff;
    box-shadow: 0 0 0 6px rgba(255, 106, 0, 0.15);
}
body .hostiko-ticket-step-active .hostiko-ticket-step-label {
    color: var(--global--color-bright-orange);
}
body .hostiko-ticket-step-done .hostiko-ticket-step-num {
    background: var(--global--color-moderate-lime-green);
    border-color: var(--global--color-moderate-lime-green);
    color: #fff;
}
body .hostiko-ticket-step-done .hostiko-ticket-step-num i {
    color: #fff !important;
}
body .hostiko-ticket-step-done .hostiko-ticket-step-label {
    color: var(--global--color-moderate-lime-green);
}
body .hostiko-ticket-step-divider {
    flex: 1 1 auto;
    height: 2px;
    background: #e5e9ed;
    margin: 0 10px;
    margin-bottom: 26px;
    min-width: 20px;
    max-width: 120px;
    border-radius: 2px;
    transition: background 0.25s ease;
}
body .hostiko-ticket-step-divider-done {
    background: var(--global--color-moderate-lime-green);
}

/* --- 19.2. Hero (ikon + címsor) --------------------------------------- */
body .hostiko-ticket-hero {
    background: linear-gradient(135deg, #0c2a3f 0%, #14425f 100%);
    color: #fff;
    border-radius: 20px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(12, 42, 63, 0.15);
}
body .hostiko-ticket-hero::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 106, 0, 0.22) 0%, rgba(255, 106, 0, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}
body .hostiko-ticket-hero-icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255, 106, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
body .hostiko-ticket-hero-icon i {
    font-size: 28px;
    color: var(--global--color-bright-orange);
}
body .hostiko-ticket-hero-text {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
}
body .hostiko-ticket-hero-title {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
    margin: 0 0 6px;
    line-height: 1.2;
}
body .hostiko-ticket-hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    line-height: 1.5;
}

/* --- 19.3. Department-cards (stepone) --------------------------------- */
body .hostiko-ticket-departments {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
body .hostiko-ticket-dept-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: #fff;
    border: 1.5px solid #eef1f4;
    border-radius: 14px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    color: inherit;
    box-shadow: 0 2px 8px rgba(12, 42, 63, 0.03);
}
body .hostiko-ticket-dept-card:hover,
body .hostiko-ticket-dept-card:focus {
    border-color: var(--global--color-bright-orange);
    box-shadow: 0 8px 24px rgba(255, 106, 0, 0.12);
    transform: translateY(-2px);
    text-decoration: none !important;
    color: inherit;
}
body .hostiko-ticket-dept-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 106, 0, 0.1);
    color: var(--global--color-bright-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.2s ease;
}
body .hostiko-ticket-dept-card:hover .hostiko-ticket-dept-icon {
    background: var(--global--color-bright-orange);
    color: #fff;
}
body .hostiko-ticket-dept-body {
    flex: 1 1 auto;
    min-width: 0;
}
body .hostiko-ticket-dept-name {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--global--color-very-dark-black-blue);
    line-height: 1.3;
    margin-bottom: 3px;
}
body .hostiko-ticket-dept-desc {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: #7c7c7c;
    line-height: 1.5;
}
body .hostiko-ticket-dept-arrow {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f5f7f9;
    color: #a0a9b3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.2s ease;
}
body .hostiko-ticket-dept-card:hover .hostiko-ticket-dept-arrow {
    background: var(--global--color-bright-orange);
    color: #fff;
    transform: translateX(3px);
}
body .hostiko-ticket-dept-arrow i {
    transition: color 0.2s ease;
}
body .hostiko-ticket-dept-card:hover .hostiko-ticket-dept-arrow i {
    color: #fff !important;
}

/* --- 19.4. Form-sections (sorszámozott kártyák) ----------------------- */
body .hostiko-ticket-form {
    display: block;
}
body .hostiko-ticket-section {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(12, 42, 63, 0.04);
    overflow: hidden;
}
body .hostiko-ticket-section-header {
    padding: 18px 24px;
    border-bottom: 1px solid #f3f5f7;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fafbfc;
}
body .hostiko-ticket-section-num {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--global--color-bright-orange);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(255, 106, 0, 0.25);
}
body .hostiko-ticket-section-titles {
    flex: 1 1 auto;
    min-width: 0;
}
body .hostiko-ticket-section-title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--global--color-very-dark-black-blue);
    letter-spacing: -0.2px;
    line-height: 1.3;
}
body .hostiko-ticket-section-hint {
    margin: 2px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: #7c7c7c;
    line-height: 1.4;
}
body .hostiko-ticket-section-body {
    padding: 22px 24px;
}
body .hostiko-ticket-section-body .form-group {
    margin-bottom: 16px;
}
body .hostiko-ticket-section-body .form-group:last-child {
    margin-bottom: 0;
}
body .hostiko-ticket-section-body label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--global--color-very-dark-black-blue);
    margin-bottom: 6px;
    display: block;
    letter-spacing: 0.1px;
}

/* --- 19.5. Form-control / input-icon / select / textarea -------------- */
body .hostiko-ticket-input-wrap {
    position: relative;
}
body .hostiko-ticket-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #a0a9b3;
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
    transition: color 0.2s ease;
}
body .hostiko-ticket-input-wrap:focus-within .hostiko-ticket-input-icon {
    color: var(--global--color-bright-orange);
}
body .hostiko-ticket-input,
body .hostiko-ticket-select,
body .hostiko-ticket-textarea,
body .hostiko-ticket-form .form-control {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    padding: 11px 14px !important;
    border: 1.5px solid #dce1e6 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--global--color-very-dark-black-blue) !important;
    height: auto !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
body .hostiko-ticket-input-wrap .hostiko-ticket-input {
    padding-left: 42px !important;
}
body .hostiko-ticket-input:focus,
body .hostiko-ticket-select:focus,
body .hostiko-ticket-textarea:focus,
body .hostiko-ticket-form .form-control:focus {
    border-color: var(--global--color-bright-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.12) !important;
    outline: none !important;
}
body .hostiko-ticket-input.is-locked,
body .hostiko-ticket-input:disabled {
    background: #f5f7f9 !important;
    color: #7c7c7c !important;
    cursor: not-allowed;
    border-color: #e5e9ed !important;
}
body .hostiko-ticket-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("//ugyfel.teamunity.hu/templates/hostiko/layouts/wp-86/data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237c7c7c' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px 7px !important;
    padding-right: 36px !important;
}
body .hostiko-ticket-priority option[value="High"] {
    color: var(--global--color-strong-red);
    font-weight: 600;
}
body .hostiko-ticket-priority option[value="Low"] {
    color: var(--global--color-moderate-lime-green);
    font-weight: 500;
}
body .hostiko-ticket-textarea {
    resize: vertical;
    min-height: 220px;
    line-height: 1.55 !important;
}
/* Markdown editor integráció (WHMCS inline toolbar) */
body .hostiko-ticket-form .markdown-editor-wrapper {
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid #dce1e6;
    transition: all 0.2s ease;
}
body .hostiko-ticket-form .markdown-editor-wrapper:focus-within {
    border-color: var(--global--color-bright-orange);
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.12);
}
body .hostiko-ticket-form .markdown-editor-wrapper .hostiko-ticket-textarea,
body .hostiko-ticket-form .markdown-editor-wrapper .form-control {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body .hostiko-ticket-form .markdown-editor-wrapper:focus-within .hostiko-ticket-textarea,
body .hostiko-ticket-form .markdown-editor-wrapper:focus-within .form-control {
    box-shadow: none !important;
}

/* Custom fields (from included template) — match section body styling */
body .hostiko-ticket-section-body #customFieldsContainer .form-group {
    margin-top: 16px;
}
body .hostiko-ticket-section-body #customFieldsContainer .form-text {
    font-size: 12.5px;
    color: #7c7c7c;
    margin-top: 5px;
}

/* --- 19.6. Attachments ------------------------------------------------ */
body .hostiko-ticket-attachments {
    margin-top: 18px;
}
body .hostiko-ticket-attach-row {
    margin-bottom: 8px;
}
body .hostiko-ticket-attach-row .custom-file {
    flex: 1 1 auto;
    height: auto;
}
body .hostiko-ticket-attach-row .custom-file-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #7c7c7c;
    background: #f8fafb;
    border: 1.5px dashed #dce1e6;
    border-radius: 10px 0 0 10px;
    padding: 11px 16px;
    height: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
}
body .hostiko-ticket-attach-row .custom-file-label i {
    color: var(--global--color-bright-orange);
    font-size: 14px;
}
body .hostiko-ticket-attach-row .custom-file-label::after {
    display: none;
}
body .hostiko-ticket-attach-row .custom-file:hover .custom-file-label {
    background: rgba(255, 106, 0, 0.05);
    border-color: var(--global--color-bright-orange);
    color: var(--global--color-very-dark-black-blue);
}
body .hostiko-ticket-attach-addmore {
    background: #fff !important;
    color: var(--global--color-very-dark-black-blue) !important;
    border: 1.5px solid #dce1e6 !important;
    border-left: none !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 11px 18px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
body .hostiko-ticket-attach-addmore i {
    color: var(--global--color-bright-orange) !important;
    font-size: 12px;
}
body .hostiko-ticket-attach-addmore:hover,
body .hostiko-ticket-attach-addmore:focus {
    background: var(--global--color-bright-orange) !important;
    color: #fff !important;
    border-color: var(--global--color-bright-orange) !important;
}
body .hostiko-ticket-attach-addmore:hover i,
body .hostiko-ticket-attach-addmore:focus i {
    color: #fff !important;
}
body .hostiko-ticket-attach-hint {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: #7c7c7c;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.5;
}
body .hostiko-ticket-attach-hint i {
    color: #a0a9b3;
    font-size: 12px;
}

/* --- 19.7. Submit-bar + gombok ---------------------------------------- */
body .hostiko-ticket-submit-bar {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 4px 14px rgba(12, 42, 63, 0.04);
}
body .hostiko-ticket-captcha {
    flex: 1 1 auto;
    min-width: 0;
}
body .hostiko-ticket-captcha .g-recaptcha,
body .hostiko-ticket-captcha > div {
    display: inline-block;
}
body .hostiko-ticket-submit-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
body .hostiko-ticket-cancel-btn {
    background: #fff !important;
    color: #7c7c7c !important;
    border: 1.5px solid #dce1e6 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 11px 22px !important;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    text-decoration: none !important;
}
body .hostiko-ticket-cancel-btn i {
    color: #a0a9b3 !important;
    font-size: 13px;
}
body .hostiko-ticket-cancel-btn:hover,
body .hostiko-ticket-cancel-btn:focus {
    background: #f5f7f9 !important;
    color: var(--global--color-very-dark-black-blue) !important;
    border-color: #a0a9b3 !important;
    text-decoration: none !important;
}
body .hostiko-ticket-submit-btn {
    background: var(--global--color-bright-orange) !important;
    color: #fff !important;
    border: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 22px rgba(255, 106, 0, 0.28);
    transition: all 0.2s ease;
    letter-spacing: 0.2px;
}
body .hostiko-ticket-submit-btn i {
    color: #fff !important;
    font-size: 14px;
}
body .hostiko-ticket-submit-btn:hover,
body .hostiko-ticket-submit-btn:focus {
    background: #e55a00 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(255, 106, 0, 0.38);
}
body .hostiko-ticket-submit-btn:active {
    transform: translateY(0);
}

/* --- 19.8. Confirm-page (siker) --------------------------------------- */
body .hostiko-ticket-confirm {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 20px;
    padding: 48px 32px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(12, 42, 63, 0.06);
    position: relative;
    overflow: hidden;
}
body .hostiko-ticket-confirm::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 8px;
    background: linear-gradient(90deg, var(--global--color-moderate-lime-green) 0%, var(--global--color-bright-orange) 100%);
}
body .hostiko-ticket-confirm-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--global--color-moderate-lime-green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 14px 32px rgba(92, 184, 92, 0.32);
    animation: hostikoTicketConfirmPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body .hostiko-ticket-confirm-icon i {
    font-size: 44px;
    color: #fff !important;
}
@keyframes hostikoTicketConfirmPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
body .hostiko-ticket-confirm-title {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--global--color-very-dark-black-blue);
    margin: 0 0 14px;
    letter-spacing: -0.5px;
    line-height: 1.25;
}
body .hostiko-ticket-confirm-number {
    display: inline-flex;
    align-items: baseline;
    background: rgba(255, 106, 0, 0.08);
    border: 2px solid rgba(255, 106, 0, 0.2);
    border-radius: 14px;
    padding: 14px 28px;
    margin-bottom: 22px;
    font-family: 'Inter', sans-serif;
}
body .hostiko-ticket-confirm-number-hash {
    font-size: 22px;
    font-weight: 700;
    color: var(--global--color-bright-orange);
    margin-right: 2px;
}
body .hostiko-ticket-confirm-number-id {
    font-size: 36px;
    font-weight: 800;
    color: var(--global--color-bright-orange);
    letter-spacing: -1px;
    line-height: 1;
}
body .hostiko-ticket-confirm-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    color: #7c7c7c;
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto 28px;
}
body .hostiko-ticket-confirm-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
body .hostiko-ticket-confirm-btn-primary {
    background: var(--global--color-bright-orange) !important;
    color: #fff !important;
    border: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 13px 30px !important;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 22px rgba(255, 106, 0, 0.28);
    transition: all 0.2s ease;
    text-decoration: none !important;
}
body .hostiko-ticket-confirm-btn-primary i {
    color: #fff !important;
    font-size: 14px;
}
body .hostiko-ticket-confirm-btn-primary:hover,
body .hostiko-ticket-confirm-btn-primary:focus {
    background: #e55a00 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(255, 106, 0, 0.38);
    text-decoration: none !important;
}
body .hostiko-ticket-confirm-btn-primary:hover .hostiko-ticket-confirm-btn-arrow {
    transform: translateX(3px);
}
body .hostiko-ticket-confirm-btn-arrow {
    transition: transform 0.2s ease;
}
body .hostiko-ticket-confirm-btn-secondary {
    background: #fff !important;
    color: var(--global--color-very-dark-black-blue) !important;
    border: 1.5px solid #dce1e6 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 11px 22px !important;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    text-decoration: none !important;
}
body .hostiko-ticket-confirm-btn-secondary i {
    color: var(--global--color-bright-orange) !important;
    font-size: 13px;
}
body .hostiko-ticket-confirm-btn-secondary:hover,
body .hostiko-ticket-confirm-btn-secondary:focus {
    background: #f8fafb !important;
    border-color: var(--global--color-bright-orange) !important;
    color: var(--global--color-very-dark-black-blue) !important;
    text-decoration: none !important;
}

/* --- 19.9. KB-suggestions (inline) ------------------------------------ */
body .hostiko-ticket-kb-wrap {
    margin: 18px 0 0;
}
body .hostiko-ticket-kbsuggest {
    background: rgba(255, 106, 0, 0.04);
    border: 1px solid rgba(255, 106, 0, 0.18);
    border-radius: 14px;
    padding: 20px 22px;
}
body .hostiko-ticket-kbsuggest-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
body .hostiko-ticket-kbsuggest-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--global--color-bright-orange);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 6px 14px rgba(255, 106, 0, 0.25);
}
body .hostiko-ticket-kbsuggest-icon i {
    color: #fff !important;
}
body .hostiko-ticket-kbsuggest-titles {
    flex: 1 1 auto;
    min-width: 0;
}
body .hostiko-ticket-kbsuggest-title {
    margin: 0 0 3px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--global--color-very-dark-black-blue);
    letter-spacing: -0.2px;
}
body .hostiko-ticket-kbsuggest-hint {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: #7c7c7c;
    line-height: 1.5;
}
body .hostiko-ticket-kb-articles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body .hostiko-ticket-kb-article {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 10px;
    text-decoration: none !important;
    color: inherit;
    transition: all 0.2s ease;
}
body .hostiko-ticket-kb-article:hover,
body .hostiko-ticket-kb-article:focus {
    border-color: var(--global--color-bright-orange);
    background: rgba(255, 106, 0, 0.03);
    text-decoration: none !important;
    color: inherit;
    transform: translateX(2px);
}
body .hostiko-ticket-kb-article-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 106, 0, 0.1);
    color: var(--global--color-bright-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-top: 2px;
}
body .hostiko-ticket-kb-article-body {
    flex: 1 1 auto;
    min-width: 0;
}
body .hostiko-ticket-kb-article-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--global--color-very-dark-black-blue);
    line-height: 1.3;
    margin-bottom: 2px;
}
body .hostiko-ticket-kb-article-excerpt {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: #7c7c7c;
    line-height: 1.5;
}
body .hostiko-ticket-kb-article-arrow {
    flex: 0 0 auto;
    color: #a0a9b3;
    font-size: 12px;
    margin-top: 8px;
    transition: color 0.2s ease;
}
body .hostiko-ticket-kb-article:hover .hostiko-ticket-kb-article-arrow {
    color: var(--global--color-bright-orange);
}

/* --- 19.10. Responsive breakpoints ------------------------------------ */
@media (max-width: 767.98px) {
    body .hostiko-ticket-submit {
        gap: 16px;
    }
    body .hostiko-ticket-stepper {
        padding: 0;
    }
    body .hostiko-ticket-step-label {
        font-size: 11px;
    }
    body .hostiko-ticket-step-num {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    body .hostiko-ticket-step-divider {
        margin-bottom: 24px;
    }
    body .hostiko-ticket-hero {
        padding: 22px 20px;
        border-radius: 16px;
    }
    body .hostiko-ticket-hero-title {
        font-size: 20px;
    }
    body .hostiko-ticket-hero-icon {
        width: 52px;
        height: 52px;
    }
    body .hostiko-ticket-hero-icon i {
        font-size: 22px;
    }
    body .hostiko-ticket-section-header {
        padding: 14px 16px;
    }
    body .hostiko-ticket-section-body {
        padding: 18px 16px;
    }
    body .hostiko-ticket-submit-bar {
        padding: 18px 16px;
        flex-direction: column;
        align-items: stretch;
    }
    body .hostiko-ticket-captcha {
        text-align: center;
    }
    body .hostiko-ticket-submit-actions {
        width: 100%;
        justify-content: stretch;
    }
    body .hostiko-ticket-submit-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    body .hostiko-ticket-dept-card {
        padding: 14px 16px;
        gap: 14px;
    }
    body .hostiko-ticket-dept-icon {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }
    body .hostiko-ticket-dept-name {
        font-size: 15px;
    }
    body .hostiko-ticket-dept-arrow {
        width: 28px;
        height: 28px;
    }
    body .hostiko-ticket-confirm {
        padding: 36px 20px;
    }
    body .hostiko-ticket-confirm-icon {
        width: 78px;
        height: 78px;
    }
    body .hostiko-ticket-confirm-icon i {
        font-size: 34px;
    }
    body .hostiko-ticket-confirm-title {
        font-size: 20px;
    }
    body .hostiko-ticket-confirm-number {
        padding: 10px 20px;
    }
    body .hostiko-ticket-confirm-number-id {
        font-size: 28px;
    }
    body .hostiko-ticket-confirm-actions {
        flex-direction: column;
        align-items: stretch;
    }
    body .hostiko-ticket-confirm-actions .btn {
        justify-content: center;
    }
    body .hostiko-ticket-attach-row {
        flex-wrap: wrap;
    }
    body .hostiko-ticket-attach-row .custom-file {
        flex: 1 1 100%;
    }
    body .hostiko-ticket-attach-row .custom-file-label {
        border-radius: 10px 10px 0 0;
    }
    body .hostiko-ticket-attach-addmore {
        flex: 1 1 100%;
        border-left: 1.5px solid #dce1e6 !important;
        border-top: none !important;
        border-radius: 0 0 10px 10px !important;
        justify-content: center;
    }
}
@media (max-width: 480px) {
    body .hostiko-ticket-step-label {
        display: none;
    }
    body .hostiko-ticket-step-divider {
        margin-bottom: 0;
    }
}

/* ====================================================================== */
/*   PHASE 20 — Clientarea dashboard további fejlesztés                    */
/* ---------------------------------------------------------------------- */
/*   Új komponensek a clientareahome.tpl-ben:                              */
/*     - Napszak-tudatos köszöntés eyebrow (Jó reggelt/napot/estét)        */
/*     - Quick Actions Toolbar (4 nagy shortcut-kártya)                    */
/*     - Account Summary Bar (credit + unpaid + email + profile-link)      */
/*                                                                         */
/*   Struktúra:                                                            */
/*     20.1  Welcome-box eyebrow (time-of-day greeting)                    */
/*     20.2  Quick Actions Toolbar (gradiens-ikonos kártyák)               */
/*     20.3  Account Summary Bar (kompakt 4-oszlopos info)                 */
/*     20.4  Tile mikro-finomítás (badge a KPI-n ha > 0)                   */
/*     20.5  Action-required widget hover-stílus                           */
/*     20.6  Responsive breakpoints                                        */
/* ====================================================================== */

/* --- 20.1. Welcome-box eyebrow (time-of-day greeting) ------------------ */
body .hostiko-welcome-box .hostiko-welcome-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 106, 0, 0.1);
    color: var(--global--color-bright-orange);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 10px;
}
body .hostiko-welcome-box .hostiko-welcome-eyebrow i {
    font-size: 13px;
    color: var(--global--color-bright-orange);
}

/* --- 20.2. Quick Actions Toolbar --------------------------------------- */
body .hostiko-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
body .hostiko-quick-action {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1.5px solid #eef1f4;
    border-radius: 14px;
    text-decoration: none !important;
    color: inherit;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(12, 42, 63, 0.03);
}
body .hostiko-quick-action::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--global--color-bright-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
body .hostiko-quick-action:hover,
body .hostiko-quick-action:focus {
    border-color: var(--global--color-bright-orange);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(255, 106, 0, 0.14);
    text-decoration: none !important;
    color: inherit;
}
body .hostiko-quick-action:hover::before {
    transform: scaleX(1);
}
body .hostiko-quick-action-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.25s ease;
}
body .hostiko-qa-new-service .hostiko-quick-action-icon {
    background: linear-gradient(135deg, rgba(255, 106, 0, 0.12), rgba(255, 106, 0, 0.22));
    color: var(--global--color-bright-orange);
}
body .hostiko-qa-domain .hostiko-quick-action-icon {
    background: linear-gradient(135deg, rgba(8, 187, 164, 0.12), rgba(8, 187, 164, 0.22));
    color: var(--global--color-strong-cyan);
}
body .hostiko-qa-invoice .hostiko-quick-action-icon {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.12), rgba(243, 156, 18, 0.22));
    color: #f39c12;
}
body .hostiko-qa-ticket .hostiko-quick-action-icon {
    background: linear-gradient(135deg, rgba(92, 184, 92, 0.12), rgba(92, 184, 92, 0.22));
    color: var(--global--color-moderate-lime-green);
}
body .hostiko-quick-action:hover .hostiko-quick-action-icon {
    transform: scale(1.08) rotate(-4deg);
}
body .hostiko-quick-action-label {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body .hostiko-quick-action-title {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--global--color-very-dark-black-blue);
    letter-spacing: -0.2px;
    line-height: 1.25;
}
body .hostiko-quick-action-sub {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #7c7c7c;
    line-height: 1.3;
    letter-spacing: 0.1px;
}

/* --- 20.3. Account Summary Bar ----------------------------------------- */
body .hostiko-account-summary {
    display: grid;
    grid-template-columns: 1.1fr 1.6fr auto;
    gap: 0;
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border: 1.5px solid #eef1f4;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(12, 42, 63, 0.04);
}
body .hostiko-account-summary-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-right: 1px solid #eef1f4;
    min-width: 0;
}
body .hostiko-account-summary-item:last-child {
    border-right: none;
}
body .hostiko-account-summary-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 106, 0, 0.12);
    color: var(--global--color-bright-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
body .hostiko-account-summary-icon-warn {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
}
body .hostiko-account-summary-icon-info {
    background: rgba(8, 187, 164, 0.12);
    color: var(--global--color-strong-cyan);
}
body .hostiko-account-summary-body {
    flex: 1 1 auto;
    min-width: 0;
}
body .hostiko-account-summary-label {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: #7c7c7c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}
body .hostiko-account-summary-value {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--global--color-very-dark-black-blue);
    letter-spacing: -0.2px;
    line-height: 1.2;
    word-break: break-word;
}
body .hostiko-account-summary-email {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}
body .hostiko-account-summary-edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--global--color-bright-orange);
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    box-shadow: 0 6px 14px rgba(255, 106, 0, 0.25);
    white-space: nowrap;
    margin: 8px 4px;
}
body .hostiko-account-summary-edit i {
    color: #fff !important;
    font-size: 12px;
}
body .hostiko-account-summary-edit:hover,
body .hostiko-account-summary-edit:focus {
    background: #e55a00;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(255, 106, 0, 0.35);
    text-decoration: none !important;
}

/* --- 20.4. Tile badge (ha count > 0 fontos) --------------------------- */
/* A tiles már stylozott Phase 15-ben — itt csak mikro-polish:           */
/* enyhe "új értesítés" pulse a red-tagelt tile-on (tickets)               */
body .tiles .tile:hover .highlight {
    height: 4px;
}
body .tiles .tile .stat {
    position: relative;
    display: inline-block;
}

/* --- 20.5. Action-required widget mikro-finomítás --------------------- */
/* A hostiko-action-required már stylozott egy korábbi phase-ben —      */
/* itt csak kártya-hover-átmenet finomítása.                             */
body .hostiko-action-required .hostiko-action-card {
    transition: all 0.25s ease;
}
body .hostiko-action-required .hostiko-action-card:hover {
    transform: translateY(-2px);
}
body .hostiko-action-required .hostiko-action-card:hover .hostiko-action-arrow {
    transform: translateX(4px);
}

/* --- 20.6. Responsive breakpoints -------------------------------------- */
@media (max-width: 1199.98px) {
    body .hostiko-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
    body .hostiko-account-summary {
        grid-template-columns: 1fr 1fr;
    }
    body .hostiko-account-summary-item {
        border-right: 1px solid #eef1f4;
        border-bottom: 1px solid #eef1f4;
    }
    body .hostiko-account-summary-item:nth-child(2n) {
        border-right: none;
    }
    body .hostiko-account-summary-item:nth-last-child(-n+2) {
        border-bottom: none;
    }
}
@media (max-width: 767.98px) {
    body .hostiko-welcome-box .hostiko-welcome-eyebrow {
        font-size: 11px;
        padding: 5px 12px;
    }
    body .hostiko-quick-action {
        padding: 14px 16px;
        gap: 12px;
    }
    body .hostiko-quick-action-icon {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }
    body .hostiko-quick-action-title {
        font-size: 13.5px;
    }
    body .hostiko-quick-action-sub {
        font-size: 11.5px;
    }
    body .hostiko-account-summary-item {
        padding: 14px 16px;
    }
    body .hostiko-account-summary-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    body .hostiko-account-summary-value {
        font-size: 15px;
    }
}
@media (max-width: 575.98px) {
    body .hostiko-quick-actions {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    body .hostiko-account-summary {
        grid-template-columns: 1fr;
    }
    body .hostiko-account-summary-item {
        border-right: none !important;
        border-bottom: 1px solid #eef1f4;
    }
    body .hostiko-account-summary-item:last-child {
        border-bottom: none;
        justify-content: center;
    }
    body .hostiko-account-summary-edit {
        width: 100%;
        justify-content: center;
        margin: 0;
    }
}

/* ====================================================================== */
/* Phase 21 — Invoice detail + payment flow (viewinvoice.tpl, invoice-payment.tpl)
 *
 * Érintett oldalak:
 *   - /viewinvoice?id=X         → hostiko/viewinvoice.tpl (standalone page)
 *   - /viewinvoice POST pay     → hostiko/invoice-payment.tpl (included partial)
 *
 * Cél: Hostiko-narancs branded számla-look, status-aware hero, kártyázott
 *      address-blokk, modern items/ledger táblák, large-pay CTA.
 * Print-safe: a .d-print-none + .hostiko-invoice-actions minden interaktív
 *      elemet kiszűr nyomtatásnál. Az invoice.min.css-t parent tölti, itt
 *      csak Hostiko-additive stílus megy — nincs !important a core-re.
 * ====================================================================== */

body.hostiko-invoice-body {
    font-family: 'Inter', sans-serif;
    background: #f5f7fa;
    color: #0c2a3f;
    margin: 0;
    padding: 30px 0;
}
body .hostiko-invoice {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    background: transparent;
}

/* ---- HERO ---- */
body .hostiko-invoice-hero {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 28px;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 18px;
    padding: 28px 32px;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(12, 42, 63, 0.06);
}
body .hostiko-invoice-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff7800 0%, #ff9544 100%);
}
body .hostiko-invoice-hero-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
body .hostiko-invoice-hero-brand img {
    max-width: 220px;
    max-height: 90px;
    height: auto;
    width: auto;
    object-fit: contain;
}
body .hostiko-invoice-hero-company {
    font-size: 24px;
    font-weight: 800;
    color: #0c2a3f;
    margin: 0;
}
body .hostiko-invoice-hero-main {
    text-align: right;
}
body .hostiko-invoice-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ff7800;
    margin-bottom: 6px;
}
body .hostiko-invoice-hero-eyebrow i {
    font-size: 13px;
}
body .hostiko-invoice-hero-title {
    font-size: 28px;
    font-weight: 800;
    color: #0c2a3f;
    margin: 0 0 14px;
    line-height: 1.2;
}
body .hostiko-invoice-hero-statusrow {
    margin-bottom: 10px;
}
body .hostiko-invoice-hero-due {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #546778;
    margin: 6px 0 12px;
}
body .hostiko-invoice-hero-due i {
    color: #ff7800;
}
body .hostiko-invoice-hero-due strong {
    color: #0c2a3f;
    font-weight: 700;
}
body .hostiko-invoice-hero-paybtn {
    margin-top: 10px;
    text-align: right;
}
body .hostiko-invoice-hero-paybtn .btn,
body .hostiko-invoice-hero-paybtn button,
body .hostiko-invoice-hero-paybtn input[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
    border: none;
    padding: 14px 34px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 30px;
    box-shadow: 0 8px 20px rgba(255, 120, 0, 0.3);
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}
body .hostiko-invoice-hero-paybtn .btn:hover,
body .hostiko-invoice-hero-paybtn button:hover,
body .hostiko-invoice-hero-paybtn input[type="submit"]:hover {
    background: linear-gradient(135deg, #e56a00 0%, #ff7800 100%);
    box-shadow: 0 12px 28px rgba(255, 120, 0, 0.4);
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
}

/* ---- STATUS BADGE ---- */
body .hostiko-invoice-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: #eef1f4;
    color: #546778;
    border: 1px solid transparent;
}
body .hostiko-invoice-status-badge i {
    font-size: 14px;
}
body .hostiko-invoice-status-badge.status-unpaid {
    background: rgba(255, 120, 0, 0.12);
    color: #d66700;
    border-color: rgba(255, 120, 0, 0.25);
}
body .hostiko-invoice-status-badge.status-draft {
    background: rgba(127, 140, 141, 0.12);
    color: #546778;
    border-color: rgba(127, 140, 141, 0.25);
}
body .hostiko-invoice-status-badge.status-paid {
    background: rgba(92, 184, 92, 0.12);
    color: #3f8a3f;
    border-color: rgba(92, 184, 92, 0.3);
}
body .hostiko-invoice-status-badge.status-refunded {
    background: rgba(8, 187, 164, 0.12);
    color: #067b6c;
    border-color: rgba(8, 187, 164, 0.25);
}
body .hostiko-invoice-status-badge.status-cancelled {
    background: rgba(192, 57, 43, 0.1);
    color: #a13020;
    border-color: rgba(192, 57, 43, 0.25);
}
body .hostiko-invoice-status-badge.status-collections {
    background: rgba(192, 57, 43, 0.14);
    color: #8a2818;
    border-color: rgba(192, 57, 43, 0.35);
}
body .hostiko-invoice-status-badge.status-pending {
    background: rgba(241, 196, 15, 0.14);
    color: #a88a00;
    border-color: rgba(241, 196, 15, 0.3);
}

/* hero-variants: vékony accent-color bar a státusz szerint (top border replace) */
body .hostiko-invoice-hero-paid::before { background: linear-gradient(90deg, #5cb85c 0%, #7bc97b 100%); }
body .hostiko-invoice-hero-draft::before { background: linear-gradient(90deg, #7f8c8d 0%, #a5b0b0 100%); }
body .hostiko-invoice-hero-refunded::before { background: linear-gradient(90deg, #08bba4 0%, #3dd3be 100%); }
body .hostiko-invoice-hero-cancelled::before { background: linear-gradient(90deg, #c0392b 0%, #d95a4b 100%); }
body .hostiko-invoice-hero-collections::before { background: linear-gradient(90deg, #8a2818 0%, #c0392b 100%); }
body .hostiko-invoice-hero-pending::before { background: linear-gradient(90deg, #f1c40f 0%, #f5d650 100%); }
/* hero-unpaid marad a default orange gradient-tel */

/* ---- ADDRESS CARDS ---- */
body .hostiko-invoice-addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
body .hostiko-invoice-address-card {
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 2px 8px rgba(12, 42, 63, 0.04);
}
body .hostiko-invoice-address-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #ff7800;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef1f4;
}
body .hostiko-invoice-address-head i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 120, 0, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
body .hostiko-invoice-address-body {
    font-size: 14px;
    line-height: 1.65;
    color: #0c2a3f;
    font-style: normal;
    margin: 0;
}
body .hostiko-invoice-address-body strong {
    color: #0c2a3f;
    font-weight: 700;
}
body .hostiko-invoice-address-cf {
    font-size: 13px;
    color: #546778;
}

/* ---- META ROW ---- */
body .hostiko-invoice-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}
body .hostiko-invoice-meta-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(12, 42, 63, 0.04);
}
body .hostiko-invoice-meta-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
body .hostiko-invoice-meta-body {
    flex: 1;
    min-width: 0;
}
body .hostiko-invoice-meta-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #7d8ca0;
    margin-bottom: 2px;
}
body .hostiko-invoice-meta-value {
    font-size: 15px;
    font-weight: 600;
    color: #0c2a3f;
}
body .hostiko-invoice-gateway-form {
    margin: 0;
}
body .hostiko-invoice-gateway-select {
    border: 1px solid #d7dde3;
    border-radius: 8px;
    padding: 6px 28px 6px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #0c2a3f;
    background-color: #ffffff;
    min-width: 160px;
}
body .hostiko-invoice-gateway-select:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, 0.12);
    outline: none;
}

/* ---- GENERIC CARD ---- */
body .hostiko-invoice-card {
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 14px;
    margin-bottom: 18px;
    box-shadow: 0 2px 10px rgba(12, 42, 63, 0.05);
    overflow: hidden;
}
body .hostiko-invoice-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
}
body .hostiko-invoice-card-header i {
    font-size: 18px;
}
body .hostiko-invoice-card-header h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
    letter-spacing: 0.3px;
}
body .hostiko-invoice-card-header-info {
    background: linear-gradient(135deg, #08bba4 0%, #3dd3be 100%);
}
body .hostiko-invoice-card-header-alt {
    background: linear-gradient(135deg, #0c2a3f 0%, #1e4965 100%);
}
body .hostiko-invoice-card-header-success {
    background: linear-gradient(135deg, #5cb85c 0%, #7bc97b 100%);
}
body .hostiko-invoice-card-body {
    padding: 20px 22px;
    color: #0c2a3f;
}
body .hostiko-invoice-card-body.p-0 {
    padding: 0;
}

/* ---- NOTES BODY ---- */
body .hostiko-invoice-notes-body {
    font-size: 14px;
    line-height: 1.6;
    color: #314a5d;
}

/* ---- CREDIT APPLY ---- */
body .hostiko-invoice-creditapply-desc {
    font-size: 14px;
    color: #546778;
    margin: 0 0 14px;
}
body .hostiko-invoice-creditapply-desc strong {
    color: #5cb85c;
    font-weight: 700;
}
body .hostiko-invoice-creditapply-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 480px;
}
body .hostiko-invoice-creditapply-label {
    font-size: 13px;
    font-weight: 600;
    color: #0c2a3f;
    margin: 0;
}
body .hostiko-invoice-creditapply-input {
    border: 1px solid #d7dde3;
    border-radius: 8px 0 0 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    height: 42px;
}
body .hostiko-invoice-creditapply-input:focus {
    border-color: #5cb85c;
    box-shadow: 0 0 0 3px rgba(92, 184, 92, 0.15);
    outline: none;
}
body .hostiko-invoice-creditapply-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #5cb85c 0%, #7bc97b 100%);
    color: #ffffff;
    border: none;
    padding: 0 18px;
    height: 42px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0 8px 8px 0;
    transition: all 0.2s ease;
}
body .hostiko-invoice-creditapply-btn:hover {
    background: linear-gradient(135deg, #4a9d4a 0%, #5cb85c 100%);
    color: #ffffff;
}

/* ---- ITEMS TABLE ---- */
body .hostiko-invoice-items-table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}
body .hostiko-invoice-items-table thead th {
    background: #fff8f0;
    color: #0c2a3f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 14px 22px;
    border-bottom: 2px solid #ffd9b0;
    border-top: none;
}
body .hostiko-invoice-items-table tbody td {
    padding: 14px 22px;
    font-size: 14px;
    color: #0c2a3f;
    vertical-align: middle;
    border-top: 1px solid #eef1f4;
}
body .hostiko-invoice-items-table tbody tr:first-child td {
    border-top: none;
}
body .hostiko-invoice-items-table tbody tr:hover {
    background: #fafbfc;
}
body .hostiko-invoice-taxed {
    color: #ff7800;
    font-weight: 700;
    margin-left: 2px;
}
body .hostiko-invoice-subtotal-row td,
body .hostiko-invoice-tax-row td {
    background: #fafbfc;
    color: #546778;
    font-size: 14px;
    border-top: 1px solid #eef1f4 !important;
}
body .hostiko-invoice-subtotal-row:hover td,
body .hostiko-invoice-tax-row:hover td {
    background: #fafbfc;
}
body .hostiko-invoice-total-row td {
    background: linear-gradient(135deg, #fff8f0 0%, #ffe5cc 100%);
    color: #0c2a3f;
    font-size: 17px;
    padding: 18px 22px;
    border-top: 2px solid #ffd9b0 !important;
}
body .hostiko-invoice-total-row td strong {
    font-size: 18px;
    color: #d66700;
    font-weight: 800;
}
body .hostiko-invoice-total-row:hover td {
    background: linear-gradient(135deg, #fff8f0 0%, #ffe5cc 100%);
}
body .hostiko-invoice-taxhint {
    font-size: 13px;
    color: #7d8ca0;
    margin: 4px 2px 18px;
    font-style: italic;
}

/* ---- LEDGER TABLE ---- */
body .hostiko-invoice-ledger-table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}
body .hostiko-invoice-ledger-table thead th {
    background: #f5f7fa;
    color: #0c2a3f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 12px 18px;
    border-bottom: 2px solid #e6ecf1;
    border-top: none;
}
body .hostiko-invoice-ledger-table tbody td {
    padding: 12px 18px;
    font-size: 13px;
    color: #314a5d;
    vertical-align: middle;
    border-top: 1px solid #eef1f4;
}
body .hostiko-invoice-ledger-table tbody tr:first-child td {
    border-top: none;
}
body .hostiko-invoice-ledger-table tbody tr:hover {
    background: #fafbfc;
}
body .hostiko-invoice-ledger-gw {
    font-weight: 600;
    color: #0c2a3f;
}
body .hostiko-invoice-ledger-table a {
    color: #ff7800;
    font-weight: 600;
    text-decoration: none;
}
body .hostiko-invoice-ledger-table a:hover {
    color: #d66700;
    text-decoration: underline;
}
body .hostiko-invoice-ledger-empty {
    color: #7d8ca0;
    font-style: italic;
    padding: 28px !important;
}
body .hostiko-invoice-ledger-empty i {
    font-size: 22px;
    margin-right: 8px;
    color: #b7bcc4;
    display: block;
    margin-bottom: 6px;
}
body .hostiko-invoice-balance-row td {
    background: #f5f7fa;
    color: #0c2a3f;
    font-size: 16px;
    padding: 16px 18px !important;
    border-top: 2px solid #e6ecf1 !important;
}
body .hostiko-invoice-balance-row td strong {
    font-size: 16px;
    color: #0c2a3f;
    font-weight: 800;
}
body .hostiko-invoice-balance-row:hover td {
    background: #f5f7fa;
}

/* ---- QR ---- */
body .hostiko-invoice-qr {
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 18px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(12, 42, 63, 0.05);
}
body .hostiko-invoice-qr-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #ff7800;
    margin-bottom: 12px;
}
body .hostiko-invoice-qr-code {
    display: flex;
    justify-content: center;
    align-items: center;
}
body .hostiko-invoice-qr-code img,
body .hostiko-invoice-qr-code svg {
    max-width: 200px;
    height: auto;
}

/* ---- ACTIONS ---- */
body .hostiko-invoice-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 0 0;
    margin-bottom: 20px;
}
body .hostiko-invoice-actions-right {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
body .hostiko-invoice-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
    border: 1px solid #d7dde3;
    background: #ffffff;
    color: #314a5d;
    text-decoration: none;
    transition: all 0.2s ease;
}
body .hostiko-invoice-action:hover {
    border-color: #ff7800;
    color: #ff7800;
    background: #fff8f0;
    text-decoration: none;
    transform: translateY(-1px);
}
body .hostiko-invoice-action-back:hover {
    background: #f5f7fa;
    border-color: #b7bcc4;
    color: #0c2a3f;
}
body .hostiko-invoice-action-print {
    background: #f5f7fa;
}

/* ---- PAYMENT PAGE (hostiko-pay-*) ---- */
body .hostiko-pay {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}
body .hostiko-pay-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 16px;
    padding: 22px 28px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(12, 42, 63, 0.06);
}
body .hostiko-pay-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff7800 0%, #ff9544 100%);
}
body .hostiko-pay-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(255, 120, 0, 0.25);
}
body .hostiko-pay-hero-title {
    font-size: 22px;
    font-weight: 800;
    color: #0c2a3f;
    margin: 0 0 4px;
}
body .hostiko-pay-hero-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #7d8ca0;
    margin: 0;
}
body .hostiko-pay-hero-subtitle i {
    color: #ff7800;
}
body .hostiko-pay-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    align-items: start;
}
body .hostiko-pay-main { min-width: 0; }
body .hostiko-pay-side { min-width: 0; }
body .hostiko-pay-card {
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(12, 42, 63, 0.05);
}
body .hostiko-pay-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    background: linear-gradient(135deg, #0c2a3f 0%, #1e4965 100%);
    color: #ffffff;
}
body .hostiko-pay-card-header i {
    font-size: 18px;
    color: #ff9544;
}
body .hostiko-pay-card-header h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}
body .hostiko-pay-card-body {
    padding: 22px;
}
body .hostiko-pay-gateway-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eef1f4;
}
body .hostiko-pay-gateway-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #0c2a3f;
    letter-spacing: 0.3px;
    margin: 0;
}
body .hostiko-pay-gateway-label i {
    color: #ff7800;
}
body .hostiko-pay-gateway-select-wrap select,
body .hostiko-pay-gateway-select-wrap .custom-select,
body .hostiko-pay-gateway-select-wrap .form-control {
    border: 1px solid #d7dde3;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    height: auto;
    width: 100%;
}
body .hostiko-pay-gateway-select-wrap select:focus,
body .hostiko-pay-gateway-select-wrap .custom-select:focus,
body .hostiko-pay-gateway-select-wrap .form-control:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, 0.12);
    outline: none;
}
body .hostiko-pay-inputs .form-group {
    margin-bottom: 14px;
}
body .hostiko-pay-inputs label {
    font-size: 13px;
    font-weight: 600;
    color: #0c2a3f;
    margin-bottom: 6px;
}
body .hostiko-pay-inputs .form-control {
    border: 1px solid #d7dde3;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    height: auto;
}
body .hostiko-pay-inputs .form-control:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, 0.12);
    outline: none;
}
body .hostiko-pay-submit-wrap {
    text-align: center;
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid #eef1f4;
}
body .hostiko-pay-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 260px;
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
    border: none;
    border-radius: 30px;
    box-shadow: 0 8px 20px rgba(255, 120, 0, 0.3);
    transition: all 0.2s ease;
    cursor: pointer;
}
body .hostiko-pay-submit-btn:hover {
    background: linear-gradient(135deg, #e56a00 0%, #ff7800 100%);
    box-shadow: 0 12px 28px rgba(255, 120, 0, 0.4);
    transform: translateY(-1px);
    color: #ffffff;
}
body .hostiko-pay-submit-btn:disabled,
body .hostiko-pay-submit-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
body .hostiko-pay-submit-btn .pay-text,
body .hostiko-pay-submit-btn .click-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body .hostiko-pay-security {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #eaf8f0 0%, #f3fbf6 100%);
    border: 1px solid #c7e7d2;
    border-radius: 12px;
    padding: 12px 18px;
    margin-top: 14px;
    color: #3f8a3f;
    font-size: 13px;
}
body .hostiko-pay-security i {
    font-size: 18px;
    color: #5cb85c;
}
body .hostiko-pay-gw-errors {
    border-radius: 12px;
    margin-bottom: 14px;
}
body .hostiko-pay-side .card,
body .hostiko-pay-side .panel {
    border: 1px solid #e6ecf1;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(12, 42, 63, 0.05);
    overflow: hidden;
}
body .hostiko-pay-side .card-header,
body .hostiko-pay-side .panel-heading {
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
    border: none;
    padding: 14px 20px;
    font-weight: 700;
}
body .hostiko-pay-side .card-header h3,
body .hostiko-pay-side .panel-heading h3 {
    color: #ffffff;
    margin: 0;
    font-size: 15px;
}
body .hostiko-pay-remote {
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(12, 42, 63, 0.05);
}
body .hostiko-pay-auth3d {
    border: 1px solid #eef1f4;
    border-radius: 10px;
    background: #fafbfc;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 860px) {
    body .hostiko-invoice-hero {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px 22px;
    }
    body .hostiko-invoice-hero-brand {
        justify-content: center;
    }
    body .hostiko-invoice-hero-main {
        text-align: center;
    }
    body .hostiko-invoice-hero-paybtn,
    body .hostiko-invoice-hero-due {
        text-align: center;
        justify-content: center;
    }
    body .hostiko-invoice-addresses,
    body .hostiko-invoice-meta {
        grid-template-columns: 1fr;
    }
    body .hostiko-pay-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 575.98px) {
    body.hostiko-invoice-body {
        padding: 14px 0;
    }
    body .hostiko-invoice {
        padding: 0 12px;
    }
    body .hostiko-invoice-hero {
        padding: 18px 16px;
    }
    body .hostiko-invoice-hero-title {
        font-size: 22px;
    }
    body .hostiko-invoice-address-card,
    body .hostiko-invoice-meta-card {
        padding: 16px 14px;
    }
    body .hostiko-invoice-card-header {
        padding: 14px 16px;
    }
    body .hostiko-invoice-card-header h3 {
        font-size: 15px;
    }
    body .hostiko-invoice-items-table thead th,
    body .hostiko-invoice-items-table tbody td,
    body .hostiko-invoice-ledger-table thead th,
    body .hostiko-invoice-ledger-table tbody td {
        padding: 10px 12px;
        font-size: 13px;
    }
    body .hostiko-invoice-total-row td strong {
        font-size: 16px;
    }
    body .hostiko-invoice-actions {
        flex-direction: column;
        align-items: stretch;
    }
    body .hostiko-invoice-actions-right {
        justify-content: center;
    }
    body .hostiko-invoice-action {
        justify-content: center;
    }
    body .hostiko-pay-hero {
        flex-direction: column;
        text-align: center;
        padding: 18px 16px;
    }
    body .hostiko-pay-submit-btn {
        min-width: 0;
        width: 100%;
    }
}

/* ---- PRINT ---- */
@media print {
    body.hostiko-invoice-body {
        background: #ffffff;
        padding: 0;
    }
    body .hostiko-invoice {
        max-width: none;
        padding: 0;
    }
    body .hostiko-invoice-hero,
    body .hostiko-invoice-address-card,
    body .hostiko-invoice-meta-card,
    body .hostiko-invoice-card,
    body .hostiko-invoice-qr {
        box-shadow: none;
        border: 1px solid #d7dde3;
        page-break-inside: avoid;
    }
    body .hostiko-invoice-hero::before,
    body .hostiko-pay-hero::before {
        display: none;
    }
    body .hostiko-invoice-card-header {
        background: #f5f7fa !important;
        color: #0c2a3f !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    body .hostiko-invoice-card-header h3,
    body .hostiko-invoice-card-header i {
        color: #0c2a3f !important;
    }
    body .hostiko-invoice-total-row td {
        background: #fff8f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    body .hostiko-invoice-status-badge {
        border: 1px solid #7d8ca0 !important;
        color: #0c2a3f !important;
        background: #ffffff !important;
    }
    body .hostiko-invoice-actions,
    body .hostiko-invoice-hero-paybtn {
        display: none !important;
    }
}

/* ====================================================================== */
/* Phase 22 — Account security + password-reset flow
 *
 * Érintett TPL-ek:
 *   - clientareasecurity.tpl           → SSO toggle + hero
 *   - password-reset-container.tpl     → centered auth-card wrapper
 *   - password-reset-email-prompt.tpl  → step 1 (email)
 *   - password-reset-security-prompt.tpl → step 2 (security Q)
 *   - password-reset-change-prompt.tpl → step 3 (new password)
 *
 * URL-ek: /clientarea?action=security, /pwreset (3 step)
 * Design-strat: Hostiko-narancs hero + kártyás layout a security oldalon;
 *               a pwreset-ek 3 lépéses stepper-rel, center-card auth-stílus.
 * Print-neutral: ezek nem nyomtatandók, nincsen külön print-query.
 * ====================================================================== */

/* ---- SECURITY PAGE ---- */
body .hostiko-security {
    max-width: 880px;
    margin: 0 auto;
}
body .hostiko-security-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(12, 42, 63, 0.06);
}
body .hostiko-security-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff7800 0%, #ff9544 100%);
}
body .hostiko-security-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(255, 120, 0, 0.25);
}
body .hostiko-security-hero-title {
    font-size: 22px;
    font-weight: 800;
    color: #0c2a3f;
    margin: 0 0 4px;
}
body .hostiko-security-hero-subtitle {
    font-size: 14px;
    color: #7d8ca0;
    margin: 0;
}

body .hostiko-security-card {
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(12, 42, 63, 0.05);
}
body .hostiko-security-card-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef1f4;
}
body .hostiko-security-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #08bba4 0%, #3dd3be 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(8, 187, 164, 0.25);
}
body .hostiko-security-card-titles {
    flex: 1;
    min-width: 0;
}
body .hostiko-security-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #0c2a3f;
    margin: 0 0 4px;
}
body .hostiko-security-card-subtitle {
    font-size: 13px;
    color: #7d8ca0;
    margin: 0;
    line-height: 1.5;
}
body .hostiko-security-card-action {
    flex-shrink: 0;
}
body .hostiko-security-toggle-form {
    margin: 0;
}

/* Toggle switch (matches WHMCS core `.toggle-switch-success` behaviour) */
body .hostiko-toggle-switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 30px;
    margin: 0;
    cursor: pointer;
}
body .hostiko-toggle-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
body .hostiko-toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #d7dde3;
    border-radius: 34px;
    transition: all 0.25s ease;
    box-shadow: inset 0 1px 2px rgba(12, 42, 63, 0.08);
}
body .hostiko-toggle-slider::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 4px;
    top: 4px;
    background: #ffffff;
    border-radius: 50%;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(12, 42, 63, 0.2);
}
body .hostiko-toggle-switch input:checked + .hostiko-toggle-slider {
    background: linear-gradient(135deg, #5cb85c 0%, #7bc97b 100%);
}
body .hostiko-toggle-switch input:checked + .hostiko-toggle-slider::before {
    transform: translateX(26px);
}
body .hostiko-toggle-switch input:focus + .hostiko-toggle-slider {
    box-shadow: 0 0 0 3px rgba(255, 120, 0, 0.2);
}

body .hostiko-security-card-body {
    padding: 0;
}
body .hostiko-security-status {
    margin-bottom: 14px;
}
body .hostiko-security-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid transparent;
}
body .hostiko-security-status-pill.is-enabled {
    background: rgba(92, 184, 92, 0.12);
    color: #3f8a3f;
    border-color: rgba(92, 184, 92, 0.3);
}
body .hostiko-security-status-pill.is-disabled {
    background: rgba(192, 57, 43, 0.1);
    color: #a13020;
    border-color: rgba(192, 57, 43, 0.25);
}
body .hostiko-security-status-pill i {
    font-size: 14px;
}
body .hostiko-security-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f5f7fa;
    border-left: 3px solid #ff7800;
    border-radius: 0 10px 10px 0;
    padding: 12px 14px;
    font-size: 13px;
    color: #546778;
    line-height: 1.55;
    margin: 0;
}
body .hostiko-security-note i {
    color: #ff7800;
    font-size: 15px;
    margin-top: 2px;
}

/* ---- PASSWORD RESET ---- */
body .hostiko-pwreset-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 10px 40px;
}
body .hostiko-pwreset-card {
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 20px;
    max-width: 560px;
    width: 100%;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 14px 50px rgba(12, 42, 63, 0.1);
    position: relative;
}
body .hostiko-pwreset-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, #ff7800 0%, #ff9544 100%);
}

body .hostiko-pwreset-brand {
    text-align: center;
    padding: 38px 30px 22px;
    background: linear-gradient(180deg, #fff8f0 0%, #ffffff 100%);
    border-bottom: 1px solid #f4e3cf;
}
body .hostiko-pwreset-brand-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 14px;
    box-shadow: 0 10px 26px rgba(255, 120, 0, 0.3);
}
body .hostiko-pwreset-brand-title {
    font-size: 24px;
    font-weight: 800;
    color: #0c2a3f;
    margin: 0 0 4px;
    letter-spacing: -0.3px;
}
body .hostiko-pwreset-brand-subtitle {
    font-size: 13px;
    color: #7d8ca0;
    margin: 0;
    font-weight: 500;
}

body .hostiko-pwreset-body {
    padding: 28px 30px;
}
body .hostiko-pwreset-footer {
    padding: 14px 30px 20px;
    border-top: 1px solid #eef1f4;
    text-align: center;
}
body .hostiko-pwreset-backlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #7d8ca0;
    text-decoration: none;
    transition: color 0.15s ease;
}
body .hostiko-pwreset-backlink:hover {
    color: #ff7800;
    text-decoration: none;
}

/* stepper */
body .hostiko-pwreset-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 0 4px;
}
body .hostiko-pwreset-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    max-width: 110px;
    text-align: center;
}
body .hostiko-pwreset-step-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eef1f4;
    color: #7d8ca0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    border: 2px solid #eef1f4;
    transition: all 0.2s ease;
}
body .hostiko-pwreset-step-item.is-active .hostiko-pwreset-step-num {
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
    border-color: #ff7800;
    box-shadow: 0 4px 12px rgba(255, 120, 0, 0.3);
}
body .hostiko-pwreset-step-item.is-done .hostiko-pwreset-step-num {
    background: #5cb85c;
    color: #ffffff;
    border-color: #5cb85c;
}
body .hostiko-pwreset-step-label {
    font-size: 11px;
    font-weight: 600;
    color: #7d8ca0;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.3;
}
body .hostiko-pwreset-step-item.is-active .hostiko-pwreset-step-label {
    color: #ff7800;
}
body .hostiko-pwreset-step-item.is-done .hostiko-pwreset-step-label {
    color: #3f8a3f;
}
body .hostiko-pwreset-step-divider {
    flex: 1;
    max-width: 40px;
    height: 2px;
    background: #eef1f4;
    border-radius: 2px;
    margin-top: -22px;
}
body .hostiko-pwreset-step-divider.is-done {
    background: #5cb85c;
}

/* intro */
body .hostiko-pwreset-intro {
    text-align: center;
    margin-bottom: 22px;
}
body .hostiko-pwreset-intro-title {
    font-size: 18px;
    font-weight: 700;
    color: #0c2a3f;
    margin: 0 0 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}
body .hostiko-pwreset-intro-title i {
    color: #ff7800;
    font-size: 16px;
}
body .hostiko-pwreset-intro-text {
    font-size: 14px;
    color: #546778;
    margin: 0;
    line-height: 1.55;
}

/* form */
body .hostiko-pwreset-form {
    margin: 0;
}
body .hostiko-pwreset-field {
    margin-bottom: 16px;
}
body .hostiko-pwreset-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #0c2a3f;
    margin-bottom: 6px;
}
body .hostiko-pwreset-question {
    font-size: 15px;
    color: #0c2a3f;
    font-weight: 700;
    background: #fff8f0;
    border-left: 3px solid #ff7800;
    border-radius: 0 10px 10px 0;
    padding: 12px 14px;
    margin-bottom: 10px;
    line-height: 1.45;
}
body .hostiko-pwreset-input-wrap {
    position: relative;
}
body .hostiko-pwreset-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #b7bcc4;
    font-size: 14px;
    pointer-events: none;
    transition: color 0.2s ease;
}
body .hostiko-pwreset-input {
    width: 100%;
    border: 1px solid #d7dde3;
    border-radius: 12px;
    padding: 12px 14px 12px 42px;
    font-size: 14px;
    font-weight: 500;
    color: #0c2a3f;
    background: #ffffff;
    height: auto;
    line-height: 1.4;
    transition: all 0.2s ease;
}
body .hostiko-pwreset-input:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, 0.12);
    outline: none;
}
body .hostiko-pwreset-input:focus + .hostiko-pwreset-input-icon,
body .hostiko-pwreset-input-wrap:focus-within .hostiko-pwreset-input-icon {
    color: #ff7800;
}
body .hostiko-pwreset-input.is-invalid {
    border-color: #c0392b;
}
body .hostiko-pwreset-input.is-valid {
    border-color: #5cb85c;
}
body .hostiko-pwreset-input.is-warning {
    border-color: #f1c40f;
}
body .hostiko-pwreset-match-msg p {
    font-size: 12px;
    color: #c0392b !important;
    margin: 4px 0 0;
    padding: 0 4px;
}

/* pwstrength bar polish */
body .hostiko-pwreset-strength #passwordStrengthBar {
    height: 6px;
    border-radius: 10px;
    background: #eef1f4;
    overflow: hidden;
    margin: 6px 0 8px;
}
body .hostiko-pwreset-strength #passwordStrengthBar .progress-bar {
    transition: all 0.3s ease;
    border-radius: 10px;
}
body .hostiko-pwreset-strength .alert {
    font-size: 12px;
    padding: 8px 12px;
    background: #f5f7fa;
    border: 1px solid #e6ecf1;
    border-radius: 10px;
    color: #546778;
    margin: 8px 0 0;
}

/* captcha */
body .hostiko-pwreset-captcha {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

/* actions */
body .hostiko-pwreset-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 22px;
    flex-wrap: wrap;
}
body .hostiko-pwreset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 30px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1.2;
}
body .hostiko-pwreset-btn-primary {
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(255, 120, 0, 0.3);
    border-color: transparent;
}
body .hostiko-pwreset-btn-primary:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(135deg, #e56a00 0%, #ff7800 100%);
    box-shadow: 0 12px 28px rgba(255, 120, 0, 0.4);
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
}
body .hostiko-pwreset-btn-primary:disabled,
body .hostiko-pwreset-btn-primary.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
body .hostiko-pwreset-btn-secondary {
    background: #f5f7fa;
    color: #314a5d;
    border-color: #d7dde3;
}
body .hostiko-pwreset-btn-secondary:hover {
    background: #eef1f4;
    color: #0c2a3f;
    border-color: #b7bcc4;
    text-decoration: none;
}

/* alerts inside pwreset */
body .hostiko-pwreset-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 18px;
}
body .hostiko-pwreset-alert.is-error {
    background: rgba(192, 57, 43, 0.08);
    color: #8a2818;
    border: 1px solid rgba(192, 57, 43, 0.25);
}
body .hostiko-pwreset-alert.is-success {
    background: rgba(92, 184, 92, 0.1);
    color: #3f8a3f;
    border: 1px solid rgba(92, 184, 92, 0.25);
}
body .hostiko-pwreset-alert i {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* success state */
body .hostiko-pwreset-success {
    text-align: center;
    padding: 20px 10px;
}
body .hostiko-pwreset-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5cb85c 0%, #7bc97b 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    margin: 0 auto 16px;
    box-shadow: 0 10px 30px rgba(92, 184, 92, 0.3);
    animation: hostikoPwSuccessPop 0.45s ease-out;
}
@keyframes hostikoPwSuccessPop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
body .hostiko-pwreset-success-title {
    font-size: 20px;
    font-weight: 800;
    color: #0c2a3f;
    margin: 0 0 10px;
}
body .hostiko-pwreset-success-text {
    font-size: 14px;
    color: #546778;
    margin: 0 0 22px;
    line-height: 1.55;
}

/* responsive */
@media (max-width: 575.98px) {
    body .hostiko-security-hero {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        padding: 20px;
    }
    body .hostiko-security-card {
        padding: 18px 18px;
    }
    body .hostiko-security-card-head {
        flex-wrap: wrap;
        gap: 12px;
    }
    body .hostiko-security-card-action {
        margin-left: auto;
    }
    body .hostiko-pwreset-card {
        border-radius: 16px;
    }
    body .hostiko-pwreset-brand {
        padding: 28px 20px 18px;
    }
    body .hostiko-pwreset-body {
        padding: 22px 20px;
    }
    body .hostiko-pwreset-footer {
        padding: 12px 20px 18px;
    }
    body .hostiko-pwreset-step-label {
        font-size: 10px;
    }
    body .hostiko-pwreset-step-divider {
        max-width: 20px;
    }
    body .hostiko-pwreset-actions {
        flex-direction: column-reverse;
    }
    body .hostiko-pwreset-btn {
        width: 100%;
    }
}

/* ====================================================================== */
/* Phase 23 — Contact form + Email history
 *
 * Érintett TPL-ek:
 *   - contact.tpl              → public contact form
 *   - clientareaemails.tpl     → account email-ledger
 *
 * Design: Phase 19 (ticket) + Phase 21 (invoice) mintájára — hero, cards,
 *         ikonos input-ek. Az emails-lista DataTable-rendered, így a
 *         table-list.tpl-ből érkező markup-hoz kell illeszkedni.
 * ====================================================================== */

/* ---- CONTACT FORM ---- */
body .hostiko-contact {
    max-width: 1100px;
    margin: 0 auto;
}
body .hostiko-contact-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 16px;
    padding: 22px 28px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(12, 42, 63, 0.06);
}
body .hostiko-contact-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff7800 0%, #ff9544 100%);
}
body .hostiko-contact-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(255, 120, 0, 0.25);
}
body .hostiko-contact-hero-title {
    font-size: 22px;
    font-weight: 800;
    color: #0c2a3f;
    margin: 0 0 4px;
}
body .hostiko-contact-hero-subtitle {
    font-size: 14px;
    color: #7d8ca0;
    margin: 0;
}

body .hostiko-contact-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid rgba(192, 57, 43, 0.25);
    color: #8a2818;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.55;
}
body .hostiko-contact-alert i {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}
body .hostiko-contact-alert-body {
    flex: 1;
    min-width: 0;
}
body .hostiko-contact-alert-body ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

body .hostiko-contact-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 20px;
    align-items: start;
}
body .hostiko-contact-main {
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 16px;
    padding: 26px 28px;
    box-shadow: 0 2px 10px rgba(12, 42, 63, 0.05);
}

body .hostiko-contact-form {
    margin: 0;
}
body .hostiko-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
body .hostiko-contact-field {
    margin-bottom: 16px;
}
body .hostiko-contact-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #0c2a3f;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}
body .hostiko-contact-input-wrap {
    position: relative;
}
body .hostiko-contact-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #b7bcc4;
    font-size: 14px;
    pointer-events: none;
    transition: color 0.2s ease;
}
body .hostiko-contact-input {
    width: 100%;
    border: 1px solid #d7dde3;
    border-radius: 12px;
    padding: 12px 14px 12px 42px;
    font-size: 14px;
    font-weight: 500;
    color: #0c2a3f;
    background: #ffffff;
    height: auto;
    line-height: 1.4;
    transition: all 0.2s ease;
}
body .hostiko-contact-input:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, 0.12);
    outline: none;
}
body .hostiko-contact-input-wrap:focus-within .hostiko-contact-input-icon {
    color: #ff7800;
}
body .hostiko-contact-textarea {
    width: 100%;
    border: 1px solid #d7dde3;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.55;
    color: #0c2a3f;
    background: #ffffff;
    min-height: 180px;
    resize: vertical;
    transition: all 0.2s ease;
}
body .hostiko-contact-textarea:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, 0.12);
    outline: none;
}
body .hostiko-contact-captcha {
    display: flex;
    justify-content: center;
    margin: 18px 0;
}
body .hostiko-contact-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eef1f4;
}
body .hostiko-contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    justify-content: center;
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
    border: none;
    padding: 13px 32px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 30px;
    box-shadow: 0 8px 20px rgba(255, 120, 0, 0.3);
    transition: all 0.2s ease;
    cursor: pointer;
}
body .hostiko-contact-submit:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(135deg, #e56a00 0%, #ff7800 100%);
    box-shadow: 0 12px 28px rgba(255, 120, 0, 0.4);
    transform: translateY(-1px);
    color: #ffffff;
}
body .hostiko-contact-submit:disabled,
body .hostiko-contact-submit.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Side info */
body .hostiko-contact-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
body .hostiko-contact-info-card {
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 2px 10px rgba(12, 42, 63, 0.05);
}
body .hostiko-contact-info-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #eef1f4;
}
body .hostiko-contact-info-head i {
    color: #ff7800;
    font-size: 18px;
}
body .hostiko-contact-info-head h3 {
    font-size: 16px;
    font-weight: 700;
    color: #0c2a3f;
    margin: 0;
}
body .hostiko-contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
body .hostiko-contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed #eef1f4;
}
body .hostiko-contact-info-list li:last-child {
    border-bottom: none;
}
body .hostiko-contact-info-list li > i {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 120, 0, 0.1);
    color: #ff7800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
body .hostiko-contact-info-list li > div {
    flex: 1;
    min-width: 0;
}
body .hostiko-contact-info-list li strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0c2a3f;
    margin-bottom: 2px;
}
body .hostiko-contact-info-list li span {
    font-size: 13px;
    color: #7d8ca0;
    line-height: 1.5;
}

body .hostiko-contact-support-card {
    background: linear-gradient(135deg, #0c2a3f 0%, #1e4965 100%);
    border-radius: 16px;
    padding: 22px 24px;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 6px 22px rgba(12, 42, 63, 0.18);
}
body .hostiko-contact-support-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 12px;
    box-shadow: 0 6px 16px rgba(255, 120, 0, 0.35);
}
body .hostiko-contact-support-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
}
body .hostiko-contact-support-card p {
    font-size: 13px;
    color: #c7d4de;
    margin: 0 0 14px;
    line-height: 1.55;
}
body .hostiko-contact-support-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
}
body .hostiko-contact-support-link:hover {
    background: #ff7800;
    border-color: #ff7800;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Success state */
body .hostiko-contact-success {
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 6px 22px rgba(12, 42, 63, 0.06);
}
body .hostiko-contact-success-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5cb85c 0%, #7bc97b 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    margin: 0 auto 18px;
    box-shadow: 0 10px 30px rgba(92, 184, 92, 0.3);
    animation: hostikoContactPop 0.45s ease-out;
}
@keyframes hostikoContactPop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
body .hostiko-contact-success-title {
    font-size: 22px;
    font-weight: 800;
    color: #0c2a3f;
    margin: 0 0 10px;
}
body .hostiko-contact-success-text {
    font-size: 14px;
    color: #546778;
    margin: 0 auto 24px;
    max-width: 520px;
    line-height: 1.55;
}
body .hostiko-contact-success-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 30px;
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 8px 20px rgba(255, 120, 0, 0.3);
    text-decoration: none;
    transition: all 0.2s ease;
}
body .hostiko-contact-success-btn:hover {
    background: linear-gradient(135deg, #e56a00 0%, #ff7800 100%);
    box-shadow: 0 12px 28px rgba(255, 120, 0, 0.4);
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
}

/* ---- EMAIL HISTORY ---- */
body .hostiko-emails {
    max-width: 1200px;
    margin: 0 auto;
}
body .hostiko-emails-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 16px;
    padding: 22px 28px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(12, 42, 63, 0.06);
}
body .hostiko-emails-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff7800 0%, #ff9544 100%);
}
body .hostiko-emails-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(255, 120, 0, 0.25);
}
body .hostiko-emails-hero-text {
    flex: 1;
    min-width: 0;
}
body .hostiko-emails-hero-title {
    font-size: 22px;
    font-weight: 800;
    color: #0c2a3f;
    margin: 0 0 4px;
}
body .hostiko-emails-hero-subtitle {
    font-size: 14px;
    color: #7d8ca0;
    margin: 0;
}
body .hostiko-emails-hero-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #fff8f0 0%, #ffe5cc 100%);
    border: 1px solid #f4d5b0;
    border-radius: 14px;
    min-width: 90px;
}
body .hostiko-emails-hero-count-num {
    font-size: 26px;
    font-weight: 800;
    color: #d66700;
    line-height: 1;
}
body .hostiko-emails-hero-count-label {
    font-size: 11px;
    font-weight: 700;
    color: #a55500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* table polish */
body .hostiko-emails-table-wrap {
    background: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(12, 42, 63, 0.05);
    padding: 0;
}
body .hostiko-emails-table {
    margin: 0 !important;
    border: none;
    width: 100%;
}
body .hostiko-emails-table thead th {
    background: #f5f7fa;
    color: #0c2a3f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 14px 22px;
    border-bottom: 2px solid #e6ecf1;
    border-top: none;
}
body .hostiko-emails-table tbody td {
    padding: 14px 22px;
    font-size: 14px;
    color: #0c2a3f;
    vertical-align: middle;
    border-top: 1px solid #eef1f4;
    background: #ffffff;
}
body .hostiko-emails-table tbody tr.hostiko-emails-row {
    cursor: pointer;
    transition: all 0.15s ease;
}
body .hostiko-emails-table tbody tr.hostiko-emails-row:hover td {
    background: #fff8f0;
}
body .hostiko-emails-date-cell {
    white-space: nowrap;
    width: 1%;
}
body .hostiko-emails-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #546778;
    font-weight: 500;
}
body .hostiko-emails-date i {
    color: #b7bcc4;
    font-size: 13px;
}
body .hostiko-emails-subject-cell {
    min-width: 0;
}
body .hostiko-emails-subject-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
body .hostiko-emails-subject-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 120, 0, 0.1);
    color: #ff7800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
body .hostiko-emails-subject {
    font-weight: 600;
    color: #0c2a3f;
    flex: 1;
    min-width: 120px;
    word-break: break-word;
}
body .hostiko-emails-attach-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(8, 187, 164, 0.14);
    color: #067b6c;
    border-radius: 12px;
    border: 1px solid rgba(8, 187, 164, 0.25);
    flex-shrink: 0;
}
body .hostiko-emails-attach-pill i {
    font-size: 11px;
}
body .hostiko-emails-action-cell {
    white-space: nowrap;
    width: 1%;
}
body .hostiko-emails-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    background: #ffffff;
    color: #ff7800;
    border: 1px solid #f4d5b0;
    transition: all 0.15s ease;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}
body .hostiko-emails-view-btn:hover {
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(255, 120, 0, 0.25);
    text-decoration: none;
    transform: translateY(-1px);
}
body .hostiko-emails-view-btn i {
    font-size: 12px;
}

/* empty state */
body .hostiko-emails-empty {
    text-align: center;
    padding: 50px 20px !important;
    background: #fafbfc !important;
}
body .hostiko-emails-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #eef1f4;
    color: #b7bcc4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 14px;
}
body .hostiko-emails-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: #0c2a3f;
    margin-bottom: 4px;
}
body .hostiko-emails-empty-text {
    font-size: 13px;
    color: #7d8ca0;
    line-height: 1.55;
    max-width: 360px;
    margin: 0 auto;
}

/* loading */
body .hostiko-emails-loading {
    padding: 40px 20px;
    color: #7d8ca0;
    font-size: 14px;
}
body .hostiko-emails-loading i {
    color: #ff7800;
    margin-right: 6px;
}

/* DataTables chrome harmony */
body .hostiko-emails .dataTables_wrapper .dataTables_length select,
body .hostiko-emails .dataTables_wrapper .dataTables_filter input {
    border: 1px solid #d7dde3;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 13px;
}
body .hostiko-emails .dataTables_wrapper .dataTables_filter input:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, 0.12);
    outline: none;
}
body .hostiko-emails .dataTables_wrapper .paginate_button.current,
body .hostiko-emails .dataTables_wrapper .paginate_button.current:hover {
    background: linear-gradient(135deg, #ff7800 0%, #ff9544 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    border-radius: 8px;
}
body .hostiko-emails .dataTables_wrapper .paginate_button:hover {
    background: #fff8f0 !important;
    color: #ff7800 !important;
    border-color: #f4d5b0 !important;
    border-radius: 8px;
}

/* responsive */
@media (max-width: 860px) {
    body .hostiko-contact-grid {
        grid-template-columns: 1fr;
    }
    body .hostiko-contact-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    body .hostiko-emails-hero {
        flex-wrap: wrap;
    }
    body .hostiko-emails-hero-count {
        margin-left: auto;
    }
}
@media (max-width: 575.98px) {
    body .hostiko-contact-hero,
    body .hostiko-emails-hero {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    body .hostiko-emails-hero-count {
        margin: 0;
    }
    body .hostiko-contact-main {
        padding: 20px 18px;
    }
    body .hostiko-contact-actions {
        flex-direction: column;
    }
    body .hostiko-contact-submit {
        width: 100%;
    }
    body .hostiko-emails-table thead th,
    body .hostiko-emails-table tbody td {
        padding: 12px 14px;
        font-size: 13px;
    }
    body .hostiko-emails-subject-icon {
        display: none;
    }
    body .hostiko-emails-view-btn span {
        display: none;
    }
}

/* ============================================================
   PHASE 24 — Upgrade / Downgrade / Cancel flow
   Scope: upgrade.tpl, upgrade-configure.tpl, upgradesummary.tpl,
          clientareacancelrequest.tpl
   ============================================================ */

/* ---------- Shared hero + alert primitives (Phase 24) ---------- */
body .hostiko-upgrade,
body .hostiko-upgradecfg,
body .hostiko-upgsum,
body .hostiko-cancel {
    max-width: 1100px;
    margin: 0 auto 32px;
    padding: 0 4px;
    color: var(--global--color-very-dark-black-blue, #0c2a3f);
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

body .hostiko-upgrade-hero,
body .hostiko-upgradecfg-hero,
body .hostiko-upgsum-hero,
body .hostiko-cancel-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #ff7800 0%, #ff9a40 100%);
    border-radius: 14px;
    box-shadow: 0 10px 30px -12px rgba(255, 120, 0, .45);
    color: #fff;
    position: relative;
    overflow: hidden;
}
body .hostiko-upgrade-hero::after,
body .hostiko-upgradecfg-hero::after,
body .hostiko-upgsum-hero::after,
body .hostiko-cancel-hero::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}
body .hostiko-cancel-hero.is-error {
    background: linear-gradient(135deg, #c6362b 0%, #e05646 100%);
    box-shadow: 0 10px 30px -12px rgba(198, 54, 43, .45);
}
body .hostiko-upgrade-hero-icon,
body .hostiko-upgradecfg-hero-icon,
body .hostiko-upgsum-hero-icon,
body .hostiko-cancel-hero-icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    z-index: 1;
}
body .hostiko-upgrade-hero-text,
body .hostiko-upgradecfg-hero-text,
body .hostiko-upgsum-hero-text,
body .hostiko-cancel-hero-text {
    z-index: 1;
    flex: 1 1 auto;
}
body .hostiko-upgrade-hero-title,
body .hostiko-upgradecfg-hero-title,
body .hostiko-upgsum-hero-title,
body .hostiko-cancel-hero-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
body .hostiko-upgrade-hero-subtitle,
body .hostiko-upgradecfg-hero-subtitle,
body .hostiko-upgsum-hero-subtitle,
body .hostiko-cancel-hero-subtitle {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.45;
}

body .hostiko-upgrade-alert,
body .hostiko-upgradecfg-alert,
body .hostiko-upgsum-alert,
body .hostiko-cancel-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid transparent;
}
body .hostiko-upgrade-alert.is-warning,
body .hostiko-upgradecfg-alert.is-warning,
body .hostiko-upgsum-alert.is-warning,
body .hostiko-cancel-alert.is-warning {
    background: #fff7ec;
    border-color: #ffd9a8;
    color: #8a4b00;
}
body .hostiko-upgrade-alert.is-error,
body .hostiko-upgradecfg-alert.is-error,
body .hostiko-upgsum-alert.is-error,
body .hostiko-cancel-alert.is-error {
    background: #fdecec;
    border-color: #f4b5b0;
    color: #912019;
}
body .hostiko-upgsum-alert.is-info {
    background: #eaf5fd;
    border-color: #b8daf0;
    color: #0f4f76;
}
body .hostiko-upgrade-alert i,
body .hostiko-upgradecfg-alert i,
body .hostiko-upgsum-alert i,
body .hostiko-cancel-alert i {
    font-size: 18px;
    line-height: 1.4;
    flex: 0 0 auto;
}
body .hostiko-upgrade-alert span,
body .hostiko-upgradecfg-alert-body,
body .hostiko-upgsum-alert-body,
body .hostiko-cancel-alert-body {
    flex: 1 1 auto;
}

/* ---------- Current service banner (shared) ---------- */
body .hostiko-upgrade-current,
body .hostiko-upgradecfg-current,
body .hostiko-upgsum-current,
body .hostiko-cancel-current {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-left: 4px solid #ff7800;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(12, 42, 63, .04);
}
body .hostiko-upgradecfg-current {
    flex-wrap: wrap;
}
body .hostiko-upgradecfg-current-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 1 1 100%;
    flex-wrap: wrap;
}
body .hostiko-upgrade-current-label,
body .hostiko-upgradecfg-current-label,
body .hostiko-upgsum-current-label,
body .hostiko-cancel-current-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5a6876;
    flex: 0 0 auto;
}
body .hostiko-upgrade-current-label i,
body .hostiko-upgradecfg-current-label i,
body .hostiko-upgsum-current-label i,
body .hostiko-cancel-current-label i {
    color: #ff7800;
    font-size: 14px;
}
body .hostiko-upgrade-current-value,
body .hostiko-upgradecfg-current-value,
body .hostiko-upgsum-current-value,
body .hostiko-cancel-current-value {
    flex: 1 1 auto;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body .hostiko-upgrade-current-value strong,
body .hostiko-upgradecfg-current-value strong,
body .hostiko-upgsum-current-value strong,
body .hostiko-cancel-current-value strong {
    color: #0c2a3f;
    font-weight: 700;
}
body .hostiko-upgrade-current-domain,
body .hostiko-upgradecfg-current-domain,
body .hostiko-upgsum-current-domain,
body .hostiko-cancel-current-domain {
    font-size: 13px;
    color: #5a6876;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body .hostiko-upgradecfg-current-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #dbe1e7;
    color: #0c2a3f;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .18s ease;
}
body .hostiko-upgradecfg-current-btn:hover {
    background: #ff7800;
    color: #fff;
    border-color: #ff7800;
    text-decoration: none;
}

/* ---------- Section title (shared) ---------- */
body .hostiko-upgrade-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 18px;
    font-size: 18px;
    font-weight: 700;
    color: #0c2a3f;
}
body .hostiko-upgrade-section-title i {
    color: #ff7800;
    font-size: 18px;
}

/* ---------- Buttons (shared) ---------- */
body .hostiko-upgrade-btn,
body .hostiko-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all .18s ease;
    line-height: 1.2;
}
body .hostiko-upgrade-btn-primary,
body .hostiko-cancel-btn-primary {
    background: #ff7800;
    color: #fff;
    border-color: #ff7800;
    box-shadow: 0 8px 20px -8px rgba(255, 120, 0, .55);
}
body .hostiko-upgrade-btn-primary:hover,
body .hostiko-cancel-btn-primary:hover {
    background: #e66a00;
    border-color: #e66a00;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
body .hostiko-upgrade-btn-secondary,
body .hostiko-cancel-btn-secondary {
    background: #fff;
    color: #0c2a3f;
    border-color: #dbe1e7;
}
body .hostiko-upgrade-btn-secondary:hover,
body .hostiko-cancel-btn-secondary:hover {
    background: #f5f7fa;
    color: #0c2a3f;
    text-decoration: none;
}
body .hostiko-upgrade-btn-alt,
body .hostiko-cancel-btn-alt {
    background: #0c2a3f;
    color: #fff;
    border-color: #0c2a3f;
}
body .hostiko-upgrade-btn-alt:hover,
body .hostiko-cancel-btn-alt:hover {
    background: #153650;
    border-color: #153650;
    color: #fff;
    text-decoration: none;
}
body .hostiko-cancel-btn-danger {
    background: #c6362b;
    color: #fff;
    border-color: #c6362b;
    box-shadow: 0 8px 20px -8px rgba(198, 54, 43, .55);
}
body .hostiko-cancel-btn-danger:hover {
    background: #aa2c22;
    border-color: #aa2c22;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

body .hostiko-upgrade-backactions,
body .hostiko-cancel-backactions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------- upgrade.tpl — packages grid ---------- */
body .hostiko-upgrade-packages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}
body .hostiko-upgrade-package {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 2px 10px rgba(12, 42, 63, .04);
    transition: all .2s ease;
}
body .hostiko-upgrade-package:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -10px rgba(12, 42, 63, .14);
    border-color: #ffd9a8;
}
body .hostiko-upgrade-package-head {
    border-bottom: 1px dashed #eef0f3;
    padding-bottom: 14px;
}
body .hostiko-upgrade-package-group {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ff7800;
    margin-bottom: 4px;
}
body .hostiko-upgrade-package-name {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #0c2a3f;
}
body .hostiko-upgrade-package-desc {
    font-size: 13px;
    color: #5a6876;
    line-height: 1.45;
}
body .hostiko-upgrade-package-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}
body .hostiko-upgrade-package-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body .hostiko-upgrade-package-price-amount {
    font-size: 22px;
    font-weight: 700;
    color: #0c2a3f;
}
body .hostiko-upgrade-package-price-label {
    font-size: 12px;
    color: #5a6876;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
body .hostiko-upgrade-package-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dbe1e7;
    border-radius: 9px;
    font-size: 14px;
    background: #fff;
    color: #0c2a3f;
    height: auto;
}
body .hostiko-upgrade-package-select:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, .15);
    outline: none;
}
body .hostiko-upgrade-package-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    background: #ff7800;
    color: #fff;
    border: 1px solid #ff7800;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
    margin-top: 4px;
}
body .hostiko-upgrade-package-btn:hover {
    background: #e66a00;
    border-color: #e66a00;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(255, 120, 0, .55);
}

/* ---------- upgrade.tpl — configoptions table ---------- */
body .hostiko-upgrade-configform {
    margin: 0;
}
body .hostiko-upgrade-configtable-wrap {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 8px;
    overflow-x: auto;
    box-shadow: 0 2px 10px rgba(12, 42, 63, .04);
}
body .hostiko-upgrade-configtable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    min-width: 640px;
}
body .hostiko-upgrade-configtable thead th {
    background: #f5f7fa;
    color: #5a6876;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #eef0f3;
}
body .hostiko-upgrade-configtable tbody tr {
    transition: background .15s ease;
}
body .hostiko-upgrade-configtable tbody tr:hover {
    background: #fafbfc;
}
body .hostiko-upgrade-configtable tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #eef0f3;
    vertical-align: middle;
}
body .hostiko-upgrade-configtable tbody tr:last-child td {
    border-bottom: none;
}
body .hostiko-upgrade-configtable-name {
    font-weight: 600;
    color: #0c2a3f;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 170px;
}
body .hostiko-upgrade-configtable-name i {
    color: #ff7800;
    font-size: 14px;
}
body .hostiko-upgrade-configtable-current {
    color: #5a6876;
    font-size: 13px;
}
body .hostiko-upgrade-configtable-arrow {
    width: 40px;
    text-align: center;
    color: #b0bac3;
    font-size: 16px;
}
body .hostiko-upgrade-configtable-new {
    min-width: 200px;
}
body .hostiko-upgrade-configtable-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dbe1e7;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    color: #0c2a3f;
    height: auto;
}
body .hostiko-upgrade-configtable-select:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, .15);
    outline: none;
}
body .hostiko-upgrade-configtable-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #0c2a3f;
    margin: 0;
}
body .hostiko-upgrade-configtable-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #ff7800;
    cursor: pointer;
    margin: 0;
}
body .hostiko-upgrade-configtable-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}
body .hostiko-upgrade-configtable-qty input[type="text"] {
    width: 80px;
    padding: 8px 10px;
    border: 1px solid #dbe1e7;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    color: #0c2a3f;
}
body .hostiko-upgrade-configtable-qty input[type="text"]:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, .15);
    outline: none;
}
body .hostiko-upgrade-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* ---------- upgrade-configure.tpl — product cards ---------- */
body .hostiko-upgradecfg-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 8px;
}
body .hostiko-upgradecfg-products[data-count="2"] {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
body .hostiko-upgradecfg-product {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(12, 42, 63, .04);
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
}
body .hostiko-upgradecfg-product:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px -12px rgba(12, 42, 63, .16);
}
body .hostiko-upgradecfg-product.is-recommended {
    border-color: #ff7800;
    box-shadow: 0 10px 32px -12px rgba(255, 120, 0, .35);
}
body .hostiko-upgradecfg-product.is-current {
    border-color: #08bba4;
    background: linear-gradient(180deg, #ffffff 0%, #f5fcfb 100%);
}
body .hostiko-upgradecfg-product-ribbon {
    position: absolute;
    top: 14px;
    right: -42px;
    transform: rotate(38deg);
    background: linear-gradient(135deg, #ff7800 0%, #ff9a40 100%);
    color: #fff;
    padding: 6px 46px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 10px -4px rgba(255, 120, 0, .5);
    z-index: 2;
}
body .hostiko-upgradecfg-product-ribbon i {
    margin-right: 4px;
}
body .hostiko-upgradecfg-product-head {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed #eef0f3;
}
body .hostiko-upgradecfg-product-name {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: #0c2a3f;
}
body .hostiko-upgradecfg-product-desc {
    font-size: 13px;
    color: #5a6876;
    line-height: 1.5;
    margin: 0;
}
body .hostiko-upgradecfg-product-current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 12px;
    background: #e1f7f3;
    color: #087a6c;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
body .hostiko-upgradecfg-product-current i {
    font-size: 12px;
}
body .hostiko-upgradecfg-product-features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    flex: 1 1 auto;
}
body .hostiko-upgradecfg-product-features li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px dashed #f2f4f7;
    font-size: 13px;
    gap: 12px;
}
body .hostiko-upgradecfg-product-features li:last-child {
    border-bottom: none;
}
body .hostiko-upgradecfg-feature-label {
    color: #5a6876;
}
body .hostiko-upgradecfg-feature-value {
    color: #0c2a3f;
    font-weight: 600;
    text-align: right;
}
body .hostiko-upgradecfg-feature-yes {
    color: #5cb85c;
    font-size: 14px;
}
body .hostiko-upgradecfg-feature-no {
    color: #c6362b;
    font-size: 14px;
}
body .hostiko-upgradecfg-product-foot {
    margin-top: auto;
}
body .hostiko-upgradecfg-product-form {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
body .hostiko-upgradecfg-product-qty,
body .hostiko-upgradecfg-product-cycle {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body .hostiko-upgradecfg-product-qty label,
body .hostiko-upgradecfg-product-cycle label {
    font-size: 12px;
    font-weight: 600;
    color: #5a6876;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
body .hostiko-upgradecfg-product-qty label i,
body .hostiko-upgradecfg-product-cycle label i {
    color: #ff7800;
}
body .hostiko-upgradecfg-product-qty-input,
body .hostiko-upgradecfg-product-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dbe1e7;
    border-radius: 9px;
    font-size: 14px;
    background: #fff;
    color: #0c2a3f;
    height: auto;
}
body .hostiko-upgradecfg-product-qty-input:focus,
body .hostiko-upgradecfg-product-select:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, .15);
    outline: none;
}
body .hostiko-upgradecfg-product-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: #ff7800;
    color: #fff;
    border: 1px solid #ff7800;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
    margin-top: 4px;
}
body .hostiko-upgradecfg-product-btn:hover:not([disabled]) {
    background: #e66a00;
    border-color: #e66a00;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(255, 120, 0, .55);
}
body .hostiko-upgradecfg-product-btn[disabled] {
    background: #e6eaef;
    border-color: #e6eaef;
    color: #9aa5b1;
    cursor: not-allowed;
    box-shadow: none;
}
body .hostiko-upgradecfg-product.is-recommended .hostiko-upgradecfg-product-btn:not([disabled]) {
    background: linear-gradient(135deg, #ff7800 0%, #ff9a40 100%);
    border-color: #ff7800;
}

/* ---------- upgradesummary.tpl — cards + table + promo/pay ---------- */
body .hostiko-upgsum-card {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    margin-bottom: 18px;
    box-shadow: 0 2px 10px rgba(12, 42, 63, .04);
    overflow: hidden;
}
body .hostiko-upgsum-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #f5f7fa;
    border-bottom: 1px solid #eef0f3;
}
body .hostiko-upgsum-card-head i {
    color: #ff7800;
    font-size: 15px;
}
body .hostiko-upgsum-card-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0c2a3f;
}
body .hostiko-upgsum-card-body {
    padding: 18px 20px;
}
body .hostiko-upgsum-tablewrap {
    overflow-x: auto;
}
body .hostiko-upgsum-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    min-width: 520px;
}
body .hostiko-upgsum-table thead th {
    background: #fafbfc;
    color: #5a6876;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 20px;
    text-align: left;
    border-bottom: 1px solid #eef0f3;
}
body .hostiko-upgsum-table-pricecol {
    text-align: right;
    width: 30%;
}
body .hostiko-upgsum-table tbody td {
    padding: 14px 20px;
    border-bottom: 1px solid #f2f4f7;
    vertical-align: middle;
}
body .hostiko-upgsum-table-price {
    text-align: right;
    font-weight: 600;
    color: #0c2a3f;
    white-space: nowrap;
}
body .hostiko-upgsum-upgrade {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
body .hostiko-upgsum-upgrade-config {
    color: #5a6876;
    font-weight: 600;
}
body .hostiko-upgsum-upgrade-old {
    color: #5a6876;
    text-decoration: line-through;
}
body .hostiko-upgsum-upgrade-arrow {
    color: #ff7800;
    font-size: 14px;
}
body .hostiko-upgsum-upgrade-new {
    color: #0c2a3f;
    font-weight: 700;
}
body .hostiko-upgsum-subrow td {
    background: #fafbfc;
    font-size: 13px;
}
body .hostiko-upgsum-subrow.is-promo td {
    background: #fff7ec;
    color: #8a4b00;
}
body .hostiko-upgsum-subrow.is-promo .hostiko-upgsum-sublabel i {
    color: #ff7800;
    margin-right: 4px;
}
body .hostiko-upgsum-sublabel {
    text-align: right;
    font-weight: 600;
    color: #5a6876;
}
body .hostiko-upgsum-totalrow td {
    background: #0c2a3f;
    color: #fff;
    font-size: 15px;
    padding: 16px 20px;
    border-bottom: none;
}
body .hostiko-upgsum-totallabel {
    text-align: right;
    font-weight: 700;
    color: #fff;
}
body .hostiko-upgsum-totalprice {
    color: #ff9a40 !important;
    font-size: 17px !important;
    font-weight: 700;
}
body .hostiko-upgsum-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
body .hostiko-upgsum-col {
    display: flex;
    flex-direction: column;
}
body .hostiko-upgsum-promo-form {
    margin: 0;
}
body .hostiko-upgsum-promo-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}
body .hostiko-upgsum-promo-input-wrap {
    position: relative;
    flex: 1 1 180px;
    min-width: 0;
}
body .hostiko-upgsum-promo-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff7800;
    font-size: 14px;
    pointer-events: none;
}
body .hostiko-upgsum-promo-input {
    width: 100%;
    padding: 11px 14px 11px 38px;
    border: 1px solid #dbe1e7;
    border-radius: 9px;
    font-size: 14px;
    background: #fff;
    color: #0c2a3f;
    height: auto;
}
body .hostiko-upgsum-promo-input:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, .15);
    outline: none;
}
body .hostiko-upgsum-promo-input:disabled {
    background: #f5f7fa;
    color: #5a6876;
}
body .hostiko-upgsum-promo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
}
body .hostiko-upgsum-promo-btn.is-apply {
    background: #5cb85c;
    border-color: #5cb85c;
    color: #fff;
}
body .hostiko-upgsum-promo-btn.is-apply:hover {
    background: #4cae4c;
    border-color: #4cae4c;
    color: #fff;
}
body .hostiko-upgsum-promo-btn.is-remove {
    background: #c6362b;
    border-color: #c6362b;
    color: #fff;
}
body .hostiko-upgsum-promo-btn.is-remove:hover {
    background: #aa2c22;
    border-color: #aa2c22;
    color: #fff;
}
body .hostiko-upgsum-gateway-wrap {
    position: relative;
}
body .hostiko-upgsum-gateway-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff7800;
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}
body .hostiko-upgsum-gateway {
    width: 100%;
    padding: 11px 14px 11px 38px;
    border: 1px solid #dbe1e7;
    border-radius: 9px;
    font-size: 14px;
    background: #fff;
    color: #0c2a3f;
    height: auto;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("//ugyfel.teamunity.hu/templates/hostiko/layouts/wp-86/data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235a6876'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    padding-right: 36px;
}
body .hostiko-upgsum-gateway:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, .15);
    outline: none;
}
body .hostiko-upgsum-payment-form {
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
body .hostiko-upgsum-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 8px;
}
body .hostiko-upgsum-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    background: #ff7800;
    color: #fff;
    border: 1px solid #ff7800;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
    box-shadow: 0 8px 20px -8px rgba(255, 120, 0, .55);
}
body .hostiko-upgsum-submit:hover {
    background: #e66a00;
    border-color: #e66a00;
    transform: translateY(-1px);
    color: #fff;
}

/* ---------- clientareacancelrequest.tpl ---------- */
body .hostiko-cancel-success {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    padding: 44px 30px;
    text-align: center;
    box-shadow: 0 2px 14px rgba(12, 42, 63, .05);
    max-width: 560px;
    margin: 0 auto 20px;
}
body .hostiko-cancel-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5cb85c 0%, #7dcb7d 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px -8px rgba(92, 184, 92, .55);
    animation: hostikoCancelPop .45s cubic-bezier(.2,.9,.3,1.25);
}
@keyframes hostikoCancelPop {
    0% { transform: scale(.4); opacity: 0; }
    70% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}
body .hostiko-cancel-success-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: #0c2a3f;
}
body .hostiko-cancel-success-text {
    margin: 0 0 22px;
    font-size: 14px;
    color: #5a6876;
    line-height: 1.55;
}
body .hostiko-cancel-success-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    background: #ff7800;
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .18s ease;
    box-shadow: 0 8px 20px -8px rgba(255, 120, 0, .5);
}
body .hostiko-cancel-success-btn:hover {
    background: #e66a00;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
body .hostiko-cancel-form {
    margin: 0;
}
body .hostiko-cancel-card {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    margin-bottom: 18px;
    box-shadow: 0 2px 10px rgba(12, 42, 63, .04);
    overflow: hidden;
}
body .hostiko-cancel-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #f5f7fa;
    border-bottom: 1px solid #eef0f3;
}
body .hostiko-cancel-card-head i {
    color: #ff7800;
    font-size: 15px;
}
body .hostiko-cancel-card-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0c2a3f;
}
body .hostiko-cancel-card-body {
    padding: 18px 20px;
}
body .hostiko-cancel-label {
    font-size: 12px;
    font-weight: 600;
    color: #5a6876;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    display: block;
}
body .hostiko-cancel-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #dbe1e7;
    border-radius: 9px;
    font-size: 14px;
    background: #fff;
    color: #0c2a3f;
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}
body .hostiko-cancel-textarea:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, .15);
    outline: none;
}
body .hostiko-cancel-domain {
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #ff7800;
}
body .hostiko-cancel-domain .hostiko-cancel-alert-body strong {
    display: block;
    margin-bottom: 4px;
    color: #0c2a3f;
}
body .hostiko-cancel-domain .hostiko-cancel-alert-body p {
    margin: 0 0 8px;
    line-height: 1.5;
}
body .hostiko-cancel-domain-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
    color: #0c2a3f;
}
body .hostiko-cancel-domain-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #ff7800;
    cursor: pointer;
    margin: 0;
}
body .hostiko-cancel-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
body .hostiko-cancel-type-option {
    margin: 0;
    cursor: pointer;
    position: relative;
}
body .hostiko-cancel-type-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
body .hostiko-cancel-type-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 18px;
    border: 2px solid #eef0f3;
    border-radius: 12px;
    background: #fff;
    transition: all .18s ease;
    height: 100%;
}
body .hostiko-cancel-type-option:hover .hostiko-cancel-type-box {
    border-color: #ffd9a8;
    background: #fffbf5;
}
body .hostiko-cancel-type-radio:checked + .hostiko-cancel-type-box {
    border-color: #ff7800;
    background: #fff7ec;
    box-shadow: 0 6px 18px -10px rgba(255, 120, 0, .45);
}
body .hostiko-cancel-type-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #fff7ec;
    color: #ff7800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 2px;
}
body .hostiko-cancel-type-radio:checked + .hostiko-cancel-type-box .hostiko-cancel-type-icon {
    background: #ff7800;
    color: #fff;
}
body .hostiko-cancel-type-title {
    font-size: 14px;
    font-weight: 700;
    color: #0c2a3f;
}
body .hostiko-cancel-type-desc {
    font-size: 12px;
    color: #5a6876;
    line-height: 1.45;
}
body .hostiko-cancel-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* ---------- Phase 24 responsive ---------- */
@media (max-width: 900px) {
    body .hostiko-upgsum-grid {
        grid-template-columns: 1fr;
    }
    body .hostiko-upgradecfg-current-main {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 680px) {
    body .hostiko-upgrade-hero,
    body .hostiko-upgradecfg-hero,
    body .hostiko-upgsum-hero,
    body .hostiko-cancel-hero {
        padding: 20px 18px;
        gap: 14px;
    }
    body .hostiko-upgrade-hero-icon,
    body .hostiko-upgradecfg-hero-icon,
    body .hostiko-upgsum-hero-icon,
    body .hostiko-cancel-hero-icon {
        width: 52px;
        height: 52px;
        font-size: 22px;
        border-radius: 12px;
    }
    body .hostiko-upgrade-hero-title,
    body .hostiko-upgradecfg-hero-title,
    body .hostiko-upgsum-hero-title,
    body .hostiko-cancel-hero-title {
        font-size: 18px;
    }
    body .hostiko-upgrade-hero-subtitle,
    body .hostiko-upgradecfg-hero-subtitle,
    body .hostiko-upgsum-hero-subtitle,
    body .hostiko-cancel-hero-subtitle {
        font-size: 13px;
    }
    body .hostiko-upgrade-current,
    body .hostiko-upgradecfg-current,
    body .hostiko-upgsum-current,
    body .hostiko-cancel-current {
        flex-wrap: wrap;
        padding: 14px 16px;
    }
    body .hostiko-upgrade-packages {
        grid-template-columns: 1fr;
    }
    body .hostiko-upgradecfg-products {
        grid-template-columns: 1fr;
    }
    body .hostiko-upgradecfg-product-ribbon {
        right: -48px;
        padding: 5px 44px;
        font-size: 10px;
    }
    body .hostiko-upgrade-actions,
    body .hostiko-cancel-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    body .hostiko-upgrade-btn,
    body .hostiko-cancel-btn {
        justify-content: center;
        width: 100%;
    }
    body .hostiko-upgsum-promo-row {
        flex-direction: column;
    }
    body .hostiko-upgsum-promo-btn {
        justify-content: center;
        width: 100%;
    }
    body .hostiko-upgsum-submit {
        width: 100%;
        justify-content: center;
    }
    body .hostiko-cancel-success {
        padding: 32px 20px;
    }
    body .hostiko-cancel-success-icon {
        width: 66px;
        height: 66px;
        font-size: 30px;
    }
    body .hostiko-cancel-type-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PHASE 25 — Account management (bulk)
   Scope: user-profile.tpl, user-password.tpl, user-security.tpl,
          account-contacts-{manage,new}.tpl,
          account-paymentmethods{,-manage}.tpl
   Shared namespace: .hostiko-account (+ per-page modifiers)
   ============================================================ */

body .hostiko-account {
    max-width: 1100px;
    margin: 0 auto 32px;
    padding: 0 4px;
    color: var(--global--color-very-dark-black-blue, #0c2a3f);
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

/* ---------- Shared hero ---------- */
body .hostiko-account-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #ff7800 0%, #ff9a40 100%);
    border-radius: 14px;
    box-shadow: 0 10px 30px -12px rgba(255, 120, 0, .45);
    color: #fff;
    position: relative;
    overflow: hidden;
}
body .hostiko-account-hero::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}
body .hostiko-account-hero-icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    z-index: 1;
}
body .hostiko-account-hero-text {
    z-index: 1;
    flex: 1 1 auto;
}
body .hostiko-account-hero-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
body .hostiko-account-hero-subtitle {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.45;
}

/* ---------- Shared alerts ---------- */
body .hostiko-account-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid transparent;
}
body .hostiko-account-alert.is-error {
    background: #fdecec;
    border-color: #f4b5b0;
    color: #912019;
}
body .hostiko-account-alert.is-warning {
    background: #fff7ec;
    border-color: #ffd9a8;
    color: #8a4b00;
}
body .hostiko-account-alert.is-success {
    background: #e1f7f3;
    border-color: #8fd8c9;
    color: #087a6c;
}
body .hostiko-account-alert.is-info {
    background: #eaf5fd;
    border-color: #b8daf0;
    color: #0f4f76;
}
body .hostiko-account-alert i {
    font-size: 18px;
    flex: 0 0 auto;
    line-height: 1.4;
}
body .hostiko-account-alert-body {
    flex: 1 1 auto;
}

/* ---------- Shared card ---------- */
body .hostiko-account-card {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    margin-bottom: 18px;
    box-shadow: 0 2px 10px rgba(12, 42, 63, .04);
    overflow: hidden;
}
body .hostiko-account-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #f5f7fa;
    border-bottom: 1px solid #eef0f3;
}
body .hostiko-account-card-head i {
    color: #ff7800;
    font-size: 15px;
}
body .hostiko-account-card-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0c2a3f;
    flex: 1 1 auto;
}
body .hostiko-account-card-headright {
    display: flex;
    align-items: center;
    gap: 8px;
}
body .hostiko-account-card-body {
    padding: 18px 20px;
}

/* ---------- Shared badges ---------- */
body .hostiko-account-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}
body .hostiko-account-badge i {
    font-size: 11px;
}
body .hostiko-account-badge.is-success,
body .hostiko-account-badge.is-enabled {
    background: #e1f7f3;
    color: #087a6c;
}
body .hostiko-account-badge.is-warning {
    background: #fff7ec;
    color: #8a4b00;
}
body .hostiko-account-badge.is-disabled {
    background: #fdecec;
    color: #912019;
}

/* ---------- Shared form (field + input + select + label) ---------- */
body .hostiko-account-form {
    padding: 18px 20px;
    margin: 0;
}
body .hostiko-account-card .hostiko-account-form {
    padding-top: 18px;
    padding-bottom: 18px;
}
body .hostiko-account-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    padding: 18px 20px;
}
body .hostiko-account-card > .hostiko-account-form-grid {
    padding-top: 18px;
    padding-bottom: 18px;
}
body .hostiko-account-fieldcol {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
body .hostiko-account-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0;
}
body .hostiko-account-form > .hostiko-account-field,
body .hostiko-account-card > .hostiko-account-form > .hostiko-account-field {
    margin-bottom: 14px;
}
body .hostiko-account-label {
    font-size: 12px;
    font-weight: 600;
    color: #5a6876;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body .hostiko-account-label i {
    color: #ff7800;
    font-size: 12px;
}
body .hostiko-account-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
body .hostiko-account-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff7800;
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}
body .hostiko-account-input {
    width: 100%;
    padding: 11px 14px 11px 38px;
    border: 1px solid #dbe1e7;
    border-radius: 9px;
    font-size: 14px;
    background: #fff;
    color: #0c2a3f;
    height: auto;
    line-height: 1.4;
    font-family: inherit;
}
body .hostiko-account-input:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, .15);
    outline: none;
}
body .hostiko-account-input:disabled,
body .hostiko-account-input[disabled] {
    background: #f5f7fa;
    color: #5a6876;
    cursor: not-allowed;
}
body .hostiko-account-input-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9aa5b1;
    font-weight: 600;
    pointer-events: none;
}
body .hostiko-account-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
body .hostiko-account-select-wrap .hostiko-account-input-icon {
    z-index: 2;
}
body .hostiko-account-select,
body .hostiko-account-select-wrap select.form-control {
    width: 100%;
    padding: 11px 38px 11px 38px;
    border: 1px solid #dbe1e7;
    border-radius: 9px;
    font-size: 14px;
    background-color: #fff;
    color: #0c2a3f;
    height: auto;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("//ugyfel.teamunity.hu/templates/hostiko/layouts/wp-86/data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235a6876'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
}
body .hostiko-account-select:focus,
body .hostiko-account-select-wrap select.form-control:focus {
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, .15);
    outline: none;
}
body .hostiko-account-field-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #5a6876;
    margin-top: 2px;
}
body .hostiko-account-field-hint i {
    color: #ff7800;
}

/* ---------- Shared buttons ---------- */
body .hostiko-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all .18s ease;
    line-height: 1.2;
    font-family: inherit;
    justify-content: center;
}
body .hostiko-account-btn-sm {
    padding: 7px 14px;
    font-size: 12.5px;
    border-radius: 8px;
}
body .hostiko-account-btn-primary {
    background: #ff7800;
    color: #fff;
    border-color: #ff7800;
    box-shadow: 0 8px 20px -8px rgba(255, 120, 0, .55);
}
body .hostiko-account-btn-primary:hover {
    background: #e66a00;
    border-color: #e66a00;
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}
body .hostiko-account-btn-secondary {
    background: #fff;
    color: #0c2a3f;
    border-color: #dbe1e7;
}
body .hostiko-account-btn-secondary:hover {
    background: #f5f7fa;
    color: #0c2a3f;
    text-decoration: none;
}
body .hostiko-account-btn-danger {
    background: #c6362b;
    color: #fff;
    border-color: #c6362b;
    box-shadow: 0 8px 20px -8px rgba(198, 54, 43, .55);
}
body .hostiko-account-btn-danger:hover {
    background: #aa2c22;
    border-color: #aa2c22;
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}
body .hostiko-account-btn-success {
    background: #5cb85c;
    color: #fff;
    border-color: #5cb85c;
    box-shadow: 0 8px 20px -8px rgba(92, 184, 92, .55);
}
body .hostiko-account-btn-success:hover {
    background: #4cae4c;
    border-color: #4cae4c;
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}
body .hostiko-account-btn.is-disabled,
body .hostiko-account-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* ---------- Shared actions ---------- */
body .hostiko-account-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 20px;
    background: #fafbfc;
    border-top: 1px solid #eef0f3;
    flex-wrap: wrap;
}
body .hostiko-account-card > .hostiko-account-form > .hostiko-account-actions,
body .hostiko-account-form > .hostiko-account-actions {
    padding: 16px 0 4px;
    background: none;
    border-top: none;
}
body .hostiko-account-actions-split {
    justify-content: space-between;
    margin-top: 8px;
}
body .hostiko-account-actions-right {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------- user-password.tpl extras ---------- */
body .hostiko-account-pw-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: stretch;
}
body .hostiko-account-pw-generate {
    white-space: nowrap;
}
body .hostiko-account-pw-strength {
    margin-top: 8px;
}
body .hostiko-account-pw-strength .progress,
body .hostiko-account-pw-strength [data-strength-meter] {
    height: 8px;
    border-radius: 999px;
    margin-bottom: 6px;
    background: #eef0f3;
    overflow: hidden;
}
body .hostiko-account-pw-strength .progress-bar {
    border-radius: 999px;
    transition: width .25s ease, background-color .25s ease;
}
body .hostiko-account-pw-strength small {
    color: #5a6876;
    font-size: 12px;
}
body .hostiko-account-pw-match {
    font-size: 12px;
    margin-top: 4px;
    font-weight: 600;
    min-height: 18px;
}

/* ---------- user-security.tpl extras ---------- */
body .hostiko-account-sec-divider {
    height: 1px;
    background: #eef0f3;
    margin: 16px 0;
}
body .hostiko-account-sec-twofa-info {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}
body .hostiko-account-sec-twofa-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #fff7ec;
    color: #ff7800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
body .hostiko-account-sec-twofa-text {
    flex: 1 1 auto;
}
body .hostiko-account-sec-twofa-text .hostiko-account-alert {
    margin-bottom: 0;
}
body .hostiko-account-sec-twofa-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
body .hostiko-account-sec-twofa-actions a.w-hidden {
    display: none !important;
}

/* ---------- account-contacts-* extras ---------- */
body .hostiko-account-contact-switcher {
    background: #eaf5fd;
    border: 1px solid #b8daf0;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
}
body .hostiko-account-contact-switcher-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #0f4f76;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
body .hostiko-account-contact-switcher-head i {
    color: #0f4f76;
}
body .hostiko-account-contact-switcher-head label {
    margin: 0;
    cursor: default;
}
body .hostiko-account-contact-switcher-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: stretch;
}
body .hostiko-account-contact-prefs {
    padding: 18px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
body .hostiko-account-contact-pref {
    margin: 0;
    cursor: pointer;
    position: relative;
}
body .hostiko-account-contact-pref input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
body .hostiko-account-contact-pref-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: #fff;
    border: 1.5px solid #eef0f3;
    border-radius: 10px;
    transition: all .18s ease;
}
body .hostiko-account-contact-pref:hover .hostiko-account-contact-pref-box {
    border-color: #ffd9a8;
    background: #fffbf5;
}
body .hostiko-account-contact-pref-check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1.5px solid #dbe1e7;
    border-radius: 6px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 11px;
    transition: all .18s ease;
}
body .hostiko-account-contact-pref input[type="checkbox"]:checked + .hostiko-account-contact-pref-box {
    border-color: #ff7800;
    background: #fff7ec;
}
body .hostiko-account-contact-pref input[type="checkbox"]:checked + .hostiko-account-contact-pref-box .hostiko-account-contact-pref-check {
    background: #ff7800;
    border-color: #ff7800;
    color: #fff;
}
body .hostiko-account-contact-pref-label {
    font-size: 13px;
    color: #0c2a3f;
    font-weight: 600;
}

/* ---------- account-paymentmethods.tpl (list) ---------- */
body .hostiko-account-pm-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
body .hostiko-account-pm-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body .hostiko-account-pm-item {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    box-shadow: 0 2px 10px rgba(12, 42, 63, .04);
    transition: all .2s ease;
}
body .hostiko-account-pm-item:hover {
    border-color: #ffd9a8;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -10px rgba(12, 42, 63, .12);
}
body .hostiko-account-pm-item.is-default {
    border-color: #ff7800;
    background: linear-gradient(180deg, #ffffff 0%, #fffbf5 100%);
}
body .hostiko-account-pm-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #fff7ec;
    color: #ff7800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex: 0 0 auto;
}
body .hostiko-account-pm-item-main {
    min-width: 0;
}
body .hostiko-account-pm-item-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #0c2a3f;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
body .hostiko-account-pm-item-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body .hostiko-account-pm-item-badge.is-default {
    background: linear-gradient(135deg, #ff7800 0%, #ff9a40 100%);
    color: #fff;
}
body .hostiko-account-pm-item-badge i {
    font-size: 10px;
}
body .hostiko-account-pm-item-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12.5px;
    color: #5a6876;
    flex-wrap: wrap;
}
body .hostiko-account-pm-item-desc i,
body .hostiko-account-pm-item-status i {
    margin-right: 4px;
    color: #ff7800;
    font-size: 10px;
}
body .hostiko-account-pm-item-status i {
    color: #5cb85c;
}
body .hostiko-account-pm-item-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
body .hostiko-account-pm-empty {
    padding: 44px 20px;
    text-align: center;
    background: #fff;
    border: 1px dashed #dbe1e7;
    border-radius: 14px;
}
body .hostiko-account-pm-empty-icon {
    font-size: 42px;
    color: #b0bac3;
    margin-bottom: 12px;
}
body .hostiko-account-pm-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: #0c2a3f;
    margin-bottom: 4px;
}
body .hostiko-account-pm-empty-text {
    font-size: 13px;
    color: #5a6876;
}

/* ---------- account-paymentmethods-manage.tpl ---------- */
body .hostiko-account-pm-manage .hostiko-account-card {
    padding: 0;
}
body .hostiko-account-pm-manage form.frm-credit-card-input {
    padding: 22px 24px 8px;
}
body .hostiko-account-pm-typepicker {
    margin-bottom: 16px;
}
body .hostiko-account-pm-typepicker-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}
body .hostiko-account-pm-type {
    margin: 0;
    cursor: pointer;
    position: relative;
    flex: 1 1 180px;
    min-width: 160px;
}
body .hostiko-account-pm-type input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
body .hostiko-account-pm-type-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1.5px solid #eef0f3;
    border-radius: 10px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: #0c2a3f;
    transition: all .18s ease;
    text-align: center;
}
body .hostiko-account-pm-type-label i {
    color: #ff7800;
    font-size: 15px;
}
body .hostiko-account-pm-type:hover .hostiko-account-pm-type-label {
    border-color: #ffd9a8;
    background: #fffbf5;
}
body .hostiko-account-pm-type input[type="radio"]:checked + .hostiko-account-pm-type-label {
    border-color: #ff7800;
    background: #fff7ec;
    color: #0c2a3f;
    box-shadow: 0 6px 18px -10px rgba(255, 120, 0, .45);
}
body .hostiko-account-pm-type input[type="radio"]:checked + .hostiko-account-pm-type-label i {
    color: #ff7800;
}
body .hostiko-account-pm-type input[type="radio"]:disabled + .hostiko-account-pm-type-label {
    opacity: .55;
    cursor: not-allowed;
}
body .hostiko-account-pm-loading {
    padding: 20px;
    text-align: center;
    color: #5a6876;
    font-size: 14px;
    background: #fafbfc;
    border-radius: 10px;
    margin: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
body .hostiko-account-pm-loading i {
    color: #ff7800;
    font-size: 18px;
}
body .hostiko-account-pm-cc {
    padding: 16px;
    background: #fafbfc;
    border-radius: 10px;
    margin-bottom: 16px;
}
body .hostiko-account-pm-cc-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 14px;
}
body .hostiko-account-pm-cc .hostiko-account-field {
    margin-bottom: 0;
}
body .hostiko-account-input-wrap-cvc {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}
body .hostiko-account-input-wrap-cvc .hostiko-account-input-icon {
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}
body .hostiko-account-input-wrap-cvc .hostiko-account-input {
    grid-column: 1 / 2;
}
body .hostiko-account-pm-cvvhint {
    grid-column: 2 / 3;
    background: transparent;
    border: 1px solid #dbe1e7;
    border-radius: 9px;
    padding: 8px 12px;
    color: #5a6876;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
body .hostiko-account-pm-cvvhint:hover {
    color: #ff7800;
    border-color: #ff7800;
}
body .hostiko-account-pm-billingwrap {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    padding: 10px;
    min-height: 60px;
}
body .hostiko-account-pm-addbillwrap {
    margin-top: 10px;
}
body .hostiko-account-pm-remoteinput {
    padding: 16px 24px 24px;
}
body .hostiko-account-pm-iframe {
    border: 1px solid #dbe1e7;
    border-radius: 10px;
    background: #fff;
    margin-top: 12px;
}
body .hostiko-account-pm-manage .fieldgroup-auxfields .submit-container {
    padding: 18px 0 4px;
    background: none;
    border-top: 1px dashed #eef0f3;
    margin-top: 8px;
}

/* WHMCS-compat — when JS toggles .has-error, ensure proper look */
body .hostiko-account-pm-manage .form-group.has-error .hostiko-account-input {
    border-color: #c6362b;
    box-shadow: 0 0 0 3px rgba(198, 54, 43, .12);
}
body .hostiko-account-pm-manage .field-error-msg {
    display: none;
    color: #912019;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 600;
}
body .hostiko-account-pm-manage .form-group.has-error .field-error-msg {
    display: block;
}
body .hostiko-account-pm-manage .w-hidden {
    display: none !important;
}

/* ---------- Shared modal ---------- */
body .hostiko-account-modal .modal-content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px -20px rgba(12, 42, 63, .45);
}
body .hostiko-account-modal .modal-header {
    background: linear-gradient(135deg, #ff7800 0%, #ff9a40 100%);
    color: #fff;
    border: none;
    padding: 16px 22px;
    display: flex;
    align-items: center;
}
body .hostiko-account-modal .modal-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex: 1 1 auto;
}
body .hostiko-account-modal .modal-title i {
    font-size: 16px;
}
body .hostiko-account-modal .modal-header .close {
    opacity: 1;
    color: #fff;
    text-shadow: none;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}
body .hostiko-account-modal .modal-header .close:hover {
    opacity: .75;
}
body .hostiko-account-modal .modal-body {
    padding: 22px;
    font-size: 14px;
    color: #0c2a3f;
    line-height: 1.55;
}
body .hostiko-account-modal .modal-body .hostiko-account-form-grid {
    padding: 0;
}
body .hostiko-account-modal .modal-footer {
    background: #fafbfc;
    border-top: 1px solid #eef0f3;
    padding: 14px 22px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ---------- Phase 25 responsive ---------- */
@media (max-width: 900px) {
    body .hostiko-account-form-grid {
        grid-template-columns: 1fr;
    }
    body .hostiko-account-pm-item {
        grid-template-columns: auto 1fr;
    }
    body .hostiko-account-pm-item-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}
@media (max-width: 680px) {
    body .hostiko-account-hero {
        padding: 20px 18px;
        gap: 14px;
    }
    body .hostiko-account-hero-icon {
        width: 52px;
        height: 52px;
        font-size: 22px;
        border-radius: 12px;
    }
    body .hostiko-account-hero-title {
        font-size: 18px;
    }
    body .hostiko-account-hero-subtitle {
        font-size: 13px;
    }
    body .hostiko-account-card-head {
        flex-wrap: wrap;
    }
    body .hostiko-account-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    body .hostiko-account-actions-split {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    body .hostiko-account-actions-right {
        flex-direction: column-reverse;
    }
    body .hostiko-account-btn {
        width: 100%;
    }
    body .hostiko-account-pw-row {
        grid-template-columns: 1fr;
    }
    body .hostiko-account-contact-switcher-row {
        grid-template-columns: 1fr;
    }
    body .hostiko-account-pm-item {
        grid-template-columns: 1fr;
        text-align: center;
    }
    body .hostiko-account-pm-item-icon {
        margin: 0 auto;
    }
    body .hostiko-account-pm-item-meta {
        justify-content: center;
    }
    body .hostiko-account-pm-item-actions {
        justify-content: center;
    }
    body .hostiko-account-pm-typepicker-options {
        flex-direction: column;
    }
    body .hostiko-account-pm-type {
        flex: 1 1 auto;
    }
    body .hostiko-account-input-wrap-cvc {
        grid-template-columns: 1fr;
    }
    body .hostiko-account-pm-cvvhint {
        grid-column: 1 / 2;
        justify-content: center;
    }
    body .hostiko-account-sec-twofa-info {
        flex-direction: column;
    }
    body .hostiko-account-sec-twofa-actions {
        flex-direction: column;
    }
    body .hostiko-account-sec-twofa-actions a {
        width: 100%;
    }
}

/* ==========================================================================
   Phase 26 — Error pages family (shared look)
   Scope:  404 / 429 / 403 / banned / unknown-routepath
   Files:  error/page-not-found.tpl, error/rate-limit-exceeded.tpl,
           error/unknown-routepath.tpl, access-denied.tpl, banned.tpl
   (internal-error.tpl is STANDALONE w/ inline styles — see that file.)
   ========================================================================== */
body .hostiko-errpage {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px -20px rgba(12, 42, 63, .22);
    padding: 48px 42px;
    max-width: 720px;
    width: 100%;
    margin: 40px auto;
    text-align: center;
}
body .hostiko-errpage-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 22px;
}
body .hostiko-errpage-icon {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    background: linear-gradient(135deg, #ff7800 0%, #ff9a40 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 14px 36px -10px rgba(255, 120, 0, .55);
    margin-bottom: 14px;
}
body .hostiko-errpage-visual.is-danger .hostiko-errpage-icon {
    background: linear-gradient(135deg, #c6362b 0%, #e04a3e 100%);
    box-shadow: 0 14px 36px -10px rgba(198, 54, 43, .55);
}
body .hostiko-errpage-visual.is-danger .hostiko-errpage-code {
    color: #c6362b;
}
body .hostiko-errpage-code {
    font-size: 72px;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    color: #ff7800;
    opacity: .18;
    margin-top: -4px;
}
body .hostiko-errpage-title {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 700;
    color: #0c2a3f;
    line-height: 1.2;
}
body .hostiko-errpage-subtitle {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 500;
    color: #5a6876;
    line-height: 1.5;
}
body .hostiko-errpage-text {
    margin: 0 0 12px;
    color: #5a6876;
    font-size: 14px;
    line-height: 1.6;
}
body .hostiko-errpage-ip {
    display: inline-block;
    padding: 2px 10px;
    background: #fff0e0;
    border: 1px solid #ffd5a8;
    border-radius: 8px;
    font-family: "Courier New", Courier, monospace;
    font-size: .9em;
    color: #ff7800;
    font-weight: 600;
    margin: 0 4px;
}

/* Action buttons */
body .hostiko-errpage-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 26px 0 0;
    flex-wrap: wrap;
}
body .hostiko-errpage-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .18s ease;
    border: 1px solid transparent;
    cursor: pointer;
}
body .hostiko-errpage-btn-primary {
    background: #ff7800;
    color: #fff;
    border-color: #ff7800;
    box-shadow: 0 10px 26px -10px rgba(255, 120, 0, .55);
}
body .hostiko-errpage-btn-primary:hover,
body .hostiko-errpage-btn-primary:focus {
    background: #e66a00;
    border-color: #e66a00;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
body .hostiko-errpage-btn-secondary {
    background: #fff;
    color: #0c2a3f;
    border-color: #dbe1e7;
}
body .hostiko-errpage-btn-secondary:hover,
body .hostiko-errpage-btn-secondary:focus {
    background: #f5f7fa;
    color: #0c2a3f;
    text-decoration: none;
    border-color: #c7cfd8;
}

/* 403 — access-denied permissions card */
body .hostiko-errpage-permcard {
    background: #f7f9fc;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    padding: 22px 24px;
    margin: 22px 0;
    text-align: left;
}
body .hostiko-errpage-permcard-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
body .hostiko-errpage-permcard-head i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff7800 0%, #ff9a40 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
body .hostiko-errpage-permcard-head h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #0c2a3f;
}
body .hostiko-errpage-permlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 16px;
}
body .hostiko-errpage-permlist li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0c2a3f;
    font-size: 13.5px;
    padding: 6px 0;
}
body .hostiko-errpage-permlist li i {
    color: #5cb85c;
    font-size: 14px;
    flex-shrink: 0;
}

/* Banned — IP ban detail card */
body .hostiko-errpage-bancard {
    background: #fff7f6;
    border: 1px solid #f3c9c4;
    border-radius: 14px;
    padding: 6px 22px;
    margin: 22px 0 18px;
    text-align: left;
}
body .hostiko-errpage-bancard-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px dashed #f3c9c4;
}
body .hostiko-errpage-bancard-row:last-child {
    border-bottom: 0;
}
body .hostiko-errpage-bancard-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
    color: #5a6876;
    font-size: 13.5px;
    font-weight: 500;
}
body .hostiko-errpage-bancard-label i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #f3c9c4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #c6362b;
}
body .hostiko-errpage-bancard-value {
    flex: 1;
    color: #0c2a3f;
    font-size: 14px;
    word-break: break-word;
}
body .hostiko-errpage-bancard-value code {
    padding: 3px 10px;
    background: #fff;
    border: 1px solid #f3c9c4;
    border-radius: 6px;
    font-family: "Courier New", Courier, monospace;
    font-size: .92em;
    color: #c6362b;
}

/* Unknown-routepath — referrer alert card (below 404 include) */
body .hostiko-errpage-referrer {
    max-width: 720px;
    width: 100%;
    margin: -10px auto 40px;
    background: #fff;
    border: 1px solid #ffd5a8;
    border-left: 4px solid #ff7800;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 10px 30px -18px rgba(12, 42, 63, .18);
}
body .hostiko-errpage-referrer-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff0e0;
    color: #ff7800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
body .hostiko-errpage-referrer-body {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    color: #5a6876;
    line-height: 1.55;
}
body .hostiko-errpage-referrer-body strong {
    display: block;
    margin-bottom: 2px;
    color: #0c2a3f;
    font-size: 14px;
    font-weight: 600;
}
body .hostiko-errpage-referrer-link {
    color: #ff7800;
    font-weight: 500;
    text-decoration: none;
    word-break: break-all;
}
body .hostiko-errpage-referrer-link:hover,
body .hostiko-errpage-referrer-link:focus {
    color: #e66a00;
    text-decoration: underline;
}

/* Rate-limit — hint note */
body .hostiko-errpage-hint {
    margin-top: 20px;
    padding: 12px 18px;
    background: #eaf5fd;
    border: 1px solid #b8daf0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #0f4f76;
}
body .hostiko-errpage-hint i {
    color: #08bba4;
    font-size: 15px;
}

/* Responsive — Phase 26 */
@media (max-width: 680px) {
    body .hostiko-errpage {
        padding: 32px 22px;
        margin: 20px auto;
    }
    body .hostiko-errpage-icon {
        width: 76px;
        height: 76px;
        font-size: 32px;
        border-radius: 20px;
    }
    body .hostiko-errpage-code {
        font-size: 56px;
    }
    body .hostiko-errpage-title {
        font-size: 24px;
    }
    body .hostiko-errpage-subtitle {
        font-size: 15px;
    }
    body .hostiko-errpage-actions {
        flex-direction: column;
    }
    body .hostiko-errpage-btn {
        width: 100%;
        justify-content: center;
    }
    body .hostiko-errpage-bancard-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    body .hostiko-errpage-bancard-label {
        min-width: 0;
    }
    body .hostiko-errpage-permlist {
        grid-template-columns: 1fr;
    }
    body .hostiko-errpage-referrer {
        margin: -4px auto 24px;
    }
}

/* ==========================================================================
   Phase 27 — Two-Factor Auth flow
   Scope:  login 2FA challenge, backup-code display, OAuth 2FA
   Files:  two-factor-challenge.tpl, two-factor-new-backup-code.tpl,
           oauth/login-twofactorauth.tpl
   ========================================================================== */
body .hostiko-twofa {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
body .hostiko-twofa-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px -20px rgba(12, 42, 63, .22);
    padding: 44px 42px 36px;
    max-width: 520px;
    width: 100%;
    text-align: center;
}
body .hostiko-twofa-visual {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}
body .hostiko-twofa-icon {
    width: 84px;
    height: 84px;
    border-radius: 22px;
    background: linear-gradient(135deg, #ff7800 0%, #ff9a40 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    box-shadow: 0 14px 36px -10px rgba(255, 120, 0, .55);
    position: relative;
}
body .hostiko-twofa-icon.is-success {
    background: linear-gradient(135deg, #08bba4 0%, #5cb85c 100%);
    box-shadow: 0 14px 36px -10px rgba(8, 187, 164, .55);
}
body .hostiko-twofa-title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    color: #0c2a3f;
    line-height: 1.2;
}
body .hostiko-twofa-subtitle {
    margin: 0 0 22px;
    color: #5a6876;
    font-size: 14px;
    line-height: 1.55;
}

/* Alerts — inline banners for error/warning/success states */
body .hostiko-twofa-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    text-align: left;
    margin: 0 0 18px;
}
body .hostiko-twofa-alert i {
    font-size: 16px;
    line-height: 1.4;
    flex-shrink: 0;
    margin-top: 1px;
}
body .hostiko-twofa-alert.is-error {
    background: #fff0f0;
    border: 1px solid #f3c9c4;
    color: #a1241b;
}
body .hostiko-twofa-alert.is-error i {
    color: #c6362b;
}
body .hostiko-twofa-alert.is-warning {
    background: #fff7e6;
    border: 1px solid #f5d99a;
    color: #8a5a00;
}
body .hostiko-twofa-alert.is-warning i {
    color: #e69500;
}
body .hostiko-twofa-alert.is-success {
    background: #e8f8f1;
    border: 1px solid #a8d8c5;
    color: #1e6a4a;
}
body .hostiko-twofa-alert.is-success i {
    color: #08bba4;
}

/* 2FA challenge code input wrap — wraps WHMCS-rendered $challenge block */
body .hostiko-twofa-code-wrap {
    margin: 0 0 6px;
}
body .hostiko-twofa-code-wrap > * {
    margin-bottom: 14px;
}
body .hostiko-twofa-code-wrap > *:last-child {
    margin-bottom: 0;
}
body .hostiko-twofa-code-wrap input[type="text"],
body .hostiko-twofa-code-wrap input[type="password"],
body .hostiko-twofa-code-wrap input[type="number"] {
    width: 100%;
    display: block;
    padding: 14px 18px;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    letter-spacing: .25em;
    background: #f7f9fc;
    border: 1px solid #dbe1e7;
    border-radius: 12px;
    color: #0c2a3f;
    transition: border-color .18s ease, box-shadow .18s ease;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body .hostiko-twofa-code-wrap input[type="text"]:focus,
body .hostiko-twofa-code-wrap input[type="password"]:focus,
body .hostiko-twofa-code-wrap input[type="number"]:focus {
    outline: 0;
    border-color: #ff7800;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, .15);
}
body .hostiko-twofa-code-wrap button,
body .hostiko-twofa-code-wrap .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: #ff7800;
    color: #fff;
    border: 1px solid #ff7800;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .18s ease;
    cursor: pointer;
    box-shadow: 0 10px 26px -10px rgba(255, 120, 0, .55);
}
body .hostiko-twofa-code-wrap button:hover,
body .hostiko-twofa-code-wrap .btn:hover,
body .hostiko-twofa-code-wrap button:focus,
body .hostiko-twofa-code-wrap .btn:focus {
    background: #e66a00;
    border-color: #e66a00;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Backup-code form */
body .hostiko-twofa-backup {
    text-align: left;
}
body .hostiko-twofa-backup-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #0c2a3f;
}
body .hostiko-twofa-backup-label i {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: linear-gradient(135deg, #ff7800 0%, #ff9a40 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
body .hostiko-twofa-backup-input {
    width: 100%;
    display: block;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    letter-spacing: .1em;
    background: #f7f9fc;
    border: 1px solid #dbe1e7;
    border-radius: 12px;
    color: #0c2a3f;
    margin-bottom: 14px;
    font-family: "Courier New", Courier, monospace;
    transition: border-color .18s ease, box-shadow .18s ease;
}
body .hostiko-twofa-backup-input:focus {
    outline: 0;
    border-color: #ff7800;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, .15);
}

/* Buttons */
body .hostiko-twofa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .18s ease;
    cursor: pointer;
    border: 1px solid transparent;
    margin-bottom: 10px;
}
body .hostiko-twofa-btn:last-child {
    margin-bottom: 0;
}
body .hostiko-twofa-btn-primary {
    background: #ff7800;
    color: #fff;
    border-color: #ff7800;
    box-shadow: 0 10px 26px -10px rgba(255, 120, 0, .55);
}
body .hostiko-twofa-btn-primary:hover,
body .hostiko-twofa-btn-primary:focus {
    background: #e66a00;
    border-color: #e66a00;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
body .hostiko-twofa-btn-ghost {
    background: transparent;
    color: #5a6876;
    border-color: transparent;
}
body .hostiko-twofa-btn-ghost:hover,
body .hostiko-twofa-btn-ghost:focus {
    background: #f5f7fa;
    color: #0c2a3f;
    text-decoration: none;
}

/* Footer link row (challenge) */
body .hostiko-twofa-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eef1f4;
    font-size: 13px;
    color: #5a6876;
    line-height: 1.5;
    flex-wrap: wrap;
}
body .hostiko-twofa-footer i {
    color: #ff7800;
    font-size: 14px;
}
body .hostiko-twofa-footer-link {
    color: #ff7800;
    font-weight: 600;
    text-decoration: none;
    margin-left: 3px;
}
body .hostiko-twofa-footer-link:hover,
body .hostiko-twofa-footer-link:focus {
    color: #e66a00;
    text-decoration: underline;
}

/* New backup-code display */
body .hostiko-twofa-newcode-wrap {
    background: #f7f9fc;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    padding: 22px 20px;
    margin: 0 0 18px;
}
body .hostiko-twofa-newcode-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #5a6876;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
body .hostiko-twofa-newcode-label i {
    color: #ff7800;
}
body .hostiko-twofa-newcode-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
body .hostiko-twofa-newcode-value code {
    font-family: "Courier New", Courier, monospace;
    font-size: 22px;
    font-weight: 700;
    color: #0c2a3f;
    background: #fff;
    border: 1px dashed #ffc78a;
    border-radius: 10px;
    padding: 10px 18px;
    letter-spacing: .08em;
    word-break: break-all;
}
body .hostiko-twofa-newcode-copy {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #dbe1e7;
    color: #5a6876;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .18s ease;
}
body .hostiko-twofa-newcode-copy:hover,
body .hostiko-twofa-newcode-copy:focus {
    background: #fff0e0;
    border-color: #ffc78a;
    color: #ff7800;
    outline: 0;
}
body .hostiko-twofa-newcode-copy.is-copied {
    background: #e8f8f1;
    border-color: #a8d8c5;
    color: #08bba4;
}

/* Actions row (generic) */
body .hostiko-twofa-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 6px;
}
body .hostiko-twofa-actions-split {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eef1f4;
}
body .hostiko-twofa-footer-inline {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: #5a6876;
    line-height: 1.5;
    text-align: left;
}
body .hostiko-twofa-footer-inline i {
    color: #ff7800;
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}
body .hostiko-twofa-actions-split .hostiko-twofa-btn {
    width: auto;
    margin-bottom: 0;
    flex-shrink: 0;
}

/* OAuth variant — centered stand-alone page */
body .hostiko-twofa-oauth {
    min-height: 60vh;
}
body .hostiko-twofa-oauth .hostiko-twofa-form {
    margin: 0;
}

/* Responsive — Phase 27 */
@media (max-width: 560px) {
    body .hostiko-twofa {
        padding: 20px 14px;
    }
    body .hostiko-twofa-card {
        padding: 34px 22px 28px;
        border-radius: 14px;
    }
    body .hostiko-twofa-icon {
        width: 72px;
        height: 72px;
        font-size: 30px;
        border-radius: 18px;
    }
    body .hostiko-twofa-title {
        font-size: 22px;
    }
    body .hostiko-twofa-newcode-value code {
        font-size: 18px;
        padding: 8px 12px;
    }
    body .hostiko-twofa-actions-split {
        flex-direction: column;
        align-items: stretch;
    }
    body .hostiko-twofa-actions-split .hostiko-twofa-btn {
        width: 100%;
    }
    body .hostiko-twofa-footer-inline {
        text-align: center;
        justify-content: center;
    }
}

/* ============================================================
   Phase 28 — Add Funds + Quotes list + Quote detail
   ============================================================ */

/* ---------- Add Funds (clientareaaddfunds.tpl) ---------- */
body .hostiko-addfunds {
    margin: 0 0 40px;
}
body .hostiko-addfunds-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 28px 32px;
    background: linear-gradient(120deg, #ff7800 0%, #ff9a3d 100%);
    border-radius: 18px;
    color: #fff;
    margin-bottom: 28px;
    box-shadow: 0 14px 34px rgba(255, 120, 0, 0.22);
}
body .hostiko-addfunds-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    flex-shrink: 0;
}
body .hostiko-addfunds-hero-text {
    flex: 1;
    min-width: 0;
}
body .hostiko-addfunds-hero-title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.2px;
}
body .hostiko-addfunds-hero-subtitle {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
}
body .hostiko-addfunds-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.5;
}
body .hostiko-addfunds-alert.is-error {
    background: #fff1ee;
    border: 1px solid #f5c7bd;
    color: #9a2a1e;
}
body .hostiko-addfunds-alert i {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}
body .hostiko-addfunds-limits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}
body .hostiko-addfunds-limit {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(12, 42, 63, 0.04);
}
body .hostiko-addfunds-limit-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff4ea;
    color: #ff7800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
body .hostiko-addfunds-limit-body {
    min-width: 0;
}
body .hostiko-addfunds-limit-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7a8c;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 3px;
}
body .hostiko-addfunds-limit-value {
    font-size: 17px;
    font-weight: 700;
    color: #0c2a3f;
    word-break: break-word;
}
body .hostiko-addfunds-card {
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(12, 42, 63, 0.05);
    overflow: hidden;
}
body .hostiko-addfunds-form {
    padding: 28px;
}
body .hostiko-addfunds-field {
    margin-bottom: 18px;
}
body .hostiko-addfunds-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0c2a3f;
    margin-bottom: 8px;
}
body .hostiko-addfunds-label i {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #fff4ea;
    color: #ff7800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
body .hostiko-addfunds-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid #d9dfe8;
    border-radius: 10px;
    background: #fff;
    color: #0c2a3f;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body .hostiko-addfunds-select {
    width: 100%;
    padding: 12px 36px 12px 14px;
    font-size: 15px;
    border: 1px solid #d9dfe8;
    border-radius: 10px;
    background-color: #fff;
    color: #0c2a3f;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body .hostiko-addfunds-input:focus,
body .hostiko-addfunds-select:focus {
    outline: none;
    border-color: #ff7800;
    box-shadow: 0 0 0 3px rgba(255, 120, 0, 0.15);
}
body .hostiko-addfunds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    text-decoration: none;
    width: 100%;
}
body .hostiko-addfunds-btn-primary {
    background: linear-gradient(135deg, #ff7800 0%, #ff9a3d 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(255, 120, 0, 0.28);
}
body .hostiko-addfunds-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(255, 120, 0, 0.34);
    color: #fff;
    text-decoration: none;
}
body .hostiko-addfunds-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #f7f9fc;
    border-top: 1px solid #e7ecf3;
    font-size: 13px;
    color: #6b7a8c;
}
body .hostiko-addfunds-footer i {
    color: #ff7800;
    font-size: 14px;
    flex-shrink: 0;
}

/* ---------- Quotes list (clientareaquotes.tpl) ---------- */
body .hostiko-quotes {
    margin: 0 0 40px;
}
body .hostiko-quotes-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 26px 32px;
    background: linear-gradient(120deg, #ff7800 0%, #ff9a3d 100%);
    border-radius: 18px;
    color: #fff;
    margin-bottom: 24px;
    box-shadow: 0 14px 34px rgba(255, 120, 0, 0.22);
}
body .hostiko-quotes-hero-icon {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    flex-shrink: 0;
}
body .hostiko-quotes-hero-text {
    flex: 1;
    min-width: 0;
}
body .hostiko-quotes-hero-title {
    margin: 0 0 5px;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.2px;
}
body .hostiko-quotes-hero-subtitle {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
}
body .hostiko-quotes-hero-count {
    text-align: center;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    flex-shrink: 0;
}
body .hostiko-quotes-hero-count-num {
    display: block;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}
body .hostiko-quotes-hero-count-label {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.88);
}
body .hostiko-quotes-table-wrap {
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(12, 42, 63, 0.05);
    padding: 8px;
    overflow: hidden;
}
body .hostiko-quotes-table {
    margin: 0;
}
body .hostiko-quotes-table thead th {
    background: #f7f9fc;
    color: #6b7a8c;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 0;
    padding: 14px 16px;
}
body .hostiko-quotes-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}
body .hostiko-quotes-table tbody tr:hover {
    background: #fff8f1;
}
body .hostiko-quotes-table tbody td {
    padding: 16px;
    vertical-align: middle;
    border-top: 1px solid #eef2f7;
    font-size: 14px;
    color: #0c2a3f;
}
body .hostiko-quotes-id {
    font-weight: 700;
    color: #ff7800;
}
body .hostiko-quotes-subject {
    font-weight: 600;
    color: #0c2a3f;
}
body .hostiko-quotes-stage {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #fff;
}
/* Quote-stage colors (both lowercase & PascalCase variants for WHMCS safety) */
body .hostiko-quotes-stage-delivered,
body .hostiko-quotes-stage-Delivered,
body .label.status.status-delivered,
body .label.status.status-Delivered {
    background: #ff7800;
    color: #fff;
}
body .hostiko-quotes-stage-accepted,
body .hostiko-quotes-stage-Accepted,
body .label.status.status-accepted,
body .label.status.status-Accepted {
    background: #16a388;
    color: #fff;
}
body .hostiko-quotes-stage-onhold,
body .hostiko-quotes-stage-OnHold,
body .hostiko-quotes-stage-on-hold,
body .label.status.status-onhold,
body .label.status.status-OnHold,
body .label.status.status-on-hold {
    background: #d4901a;
    color: #fff;
}
body .hostiko-quotes-stage-lost,
body .hostiko-quotes-stage-Lost,
body .label.status.status-lost,
body .label.status.status-Lost {
    background: #87939f;
    color: #fff;
}
body .hostiko-quotes-stage-dead,
body .hostiko-quotes-stage-Dead,
body .label.status.status-dead,
body .label.status.status-Dead {
    background: #6b2118;
    color: #fff;
}
body .hostiko-quotes-stage-draft,
body .hostiko-quotes-stage-Draft,
body .label.status.status-draft,
body .label.status.status-Draft {
    background: #b8bfc9;
    color: #fff;
}
body .hostiko-quotes-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #ff7800;
    background: #fff4ea;
    border: 1px solid #ffd6b0;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
body .hostiko-quotes-download:hover {
    background: #ff7800;
    color: #fff;
    border-color: #ff7800;
}

/* ---------- Quote detail (viewquote.tpl standalone page) ---------- */
body.hostiko-quote-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f4f6fa;
    color: #0c2a3f;
    margin: 0;
    padding: 0;
}
body.hostiko-quote-body .hostiko-quote {
    max-width: 1080px;
    margin: 0 auto;
    padding: 36px 24px 20px;
}
body.hostiko-quote-body .hostiko-quote-error {
    background: #fff;
    border: 1px solid #f5c7bd;
    border-radius: 16px;
    padding: 48px 28px;
    text-align: center;
    box-shadow: 0 6px 22px rgba(12, 42, 63, 0.05);
}
body.hostiko-quote-body .hostiko-quote-error-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: #ffeae5;
    color: #c6362b;
    font-size: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
body.hostiko-quote-body .hostiko-quote-error-title {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 700;
    color: #9a2a1e;
}
body.hostiko-quote-body .hostiko-quote-error-text {
    margin: 0;
    font-size: 15px;
    color: #6b7a8c;
}

/* Hero */
body.hostiko-quote-body .hostiko-quote-hero {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 34px 36px;
    border-radius: 20px;
    color: #fff;
    margin-bottom: 28px;
    box-shadow: 0 18px 40px rgba(12, 42, 63, 0.12);
}
body.hostiko-quote-body .hostiko-quote-hero-delivered {
    background: linear-gradient(120deg, #ff7800 0%, #ff9a3d 100%);
}
body.hostiko-quote-body .hostiko-quote-hero-accepted {
    background: linear-gradient(120deg, #16a388 0%, #22c3a5 100%);
}
body.hostiko-quote-body .hostiko-quote-hero-onhold {
    background: linear-gradient(120deg, #d4901a 0%, #edb04a 100%);
}
body.hostiko-quote-body .hostiko-quote-hero-lost {
    background: linear-gradient(120deg, #6b7a8c 0%, #94a3b5 100%);
}
body.hostiko-quote-body .hostiko-quote-hero-dead {
    background: linear-gradient(120deg, #6b2118 0%, #9a3328 100%);
}
body.hostiko-quote-body .hostiko-quote-hero-brand {
    flex-shrink: 0;
}
body.hostiko-quote-body .hostiko-quote-hero-brand img {
    max-height: 70px;
    max-width: 220px;
}
body.hostiko-quote-body .hostiko-quote-hero-company {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
}
body.hostiko-quote-body .hostiko-quote-hero-main {
    flex: 1;
    min-width: 0;
}
body.hostiko-quote-body .hostiko-quote-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    margin-bottom: 10px;
}
body.hostiko-quote-body .hostiko-quote-hero-title {
    margin: 0 0 14px;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.4px;
    line-height: 1.15;
}
body.hostiko-quote-body .hostiko-quote-hero-statusrow {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
body.hostiko-quote-body .hostiko-quote-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
body.hostiko-quote-body .hostiko-quote-accept-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    background: #fff;
    color: #16a388;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s, box-shadow 0.15s;
}
body.hostiko-quote-body .hostiko-quote-accept-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}

/* Alert */
body.hostiko-quote-body .hostiko-quote-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.5;
}
body.hostiko-quote-body .hostiko-quote-alert.is-error {
    background: #fff1ee;
    border: 1px solid #f5c7bd;
    color: #9a2a1e;
}
body.hostiko-quote-body .hostiko-quote-alert i {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Parties */
body.hostiko-quote-body .hostiko-quote-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
body.hostiko-quote-body .hostiko-quote-party {
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 4px 14px rgba(12, 42, 63, 0.04);
}
body.hostiko-quote-body .hostiko-quote-party.is-payto {
    text-align: right;
}
body.hostiko-quote-body .hostiko-quote-party-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #6b7a8c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
body.hostiko-quote-body .hostiko-quote-party.is-payto .hostiko-quote-party-label {
    justify-content: flex-end;
}
body.hostiko-quote-body .hostiko-quote-party-label i {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #fff4ea;
    color: #ff7800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
body.hostiko-quote-body .hostiko-quote-party-body {
    font-size: 14px;
    line-height: 1.6;
    color: #0c2a3f;
    margin: 0;
    font-style: normal;
}
body.hostiko-quote-body .hostiko-quote-customfield {
    color: #6b7a8c;
    font-size: 13px;
}
body.hostiko-quote-body .hostiko-quote-customfield strong {
    color: #0c2a3f;
}

/* Dates */
body.hostiko-quote-body .hostiko-quote-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 22px;
}
body.hostiko-quote-body .hostiko-quote-date {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(12, 42, 63, 0.04);
}
body.hostiko-quote-body .hostiko-quote-date-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff4ea;
    color: #ff7800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
body.hostiko-quote-body .hostiko-quote-date-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7a8c;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 3px;
}
body.hostiko-quote-body .hostiko-quote-date-value {
    font-size: 16px;
    font-weight: 700;
    color: #0c2a3f;
}

/* Proposal */
body.hostiko-quote-body .hostiko-quote-proposal {
    background: #fff;
    border: 1px solid #ffd6b0;
    border-left: 4px solid #ff7800;
    border-radius: 14px;
    margin-bottom: 22px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(255, 120, 0, 0.08);
}
body.hostiko-quote-body .hostiko-quote-proposal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: #fff4ea;
    color: #ff7800;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #ffd6b0;
}
body.hostiko-quote-body .hostiko-quote-proposal-body {
    padding: 20px 22px;
    font-size: 14px;
    line-height: 1.6;
    color: #0c2a3f;
}

/* Line items */
body.hostiko-quote-body .hostiko-quote-items {
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 16px;
    margin-bottom: 22px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(12, 42, 63, 0.05);
}
body.hostiko-quote-body .hostiko-quote-items-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    background: #f7f9fc;
    border-bottom: 1px solid #e7ecf3;
    font-size: 14px;
    font-weight: 700;
    color: #0c2a3f;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
body.hostiko-quote-body .hostiko-quote-items-header i {
    color: #ff7800;
}
body.hostiko-quote-body .hostiko-quote-items-body {
    padding: 4px;
}
body.hostiko-quote-body .hostiko-quote-items-table {
    margin: 0;
    width: 100%;
}
body.hostiko-quote-body .hostiko-quote-items-table thead th {
    background: transparent;
    color: #6b7a8c;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid #eef2f7;
}
body.hostiko-quote-body .hostiko-quote-items-table tbody td {
    padding: 14px 16px;
    font-size: 14px;
    color: #0c2a3f;
    border-top: 1px solid #eef2f7;
    vertical-align: middle;
}
body.hostiko-quote-body .hostiko-quote-items-subtotal td,
body.hostiko-quote-body .hostiko-quote-items-tax td {
    background: #f7f9fc;
    color: #6b7a8c;
    font-size: 13px;
}
body.hostiko-quote-body .hostiko-quote-items-total td {
    background: #fff4ea;
    color: #ff7800;
    font-size: 16px;
    font-weight: 700;
}

/* Notes */
body.hostiko-quote-body .hostiko-quote-notes {
    background: #fff;
    border: 1px solid #b8dcf4;
    border-left: 4px solid #2f8fd0;
    border-radius: 14px;
    margin-bottom: 22px;
    overflow: hidden;
}
body.hostiko-quote-body .hostiko-quote-notes-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: #eef6fc;
    color: #2f8fd0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #b8dcf4;
}
body.hostiko-quote-body .hostiko-quote-notes-body {
    padding: 18px 22px;
    font-size: 14px;
    line-height: 1.6;
    color: #0c2a3f;
}
body.hostiko-quote-body .hostiko-quote-taxhint {
    font-size: 12px;
    color: #6b7a8c;
    text-align: right;
    margin: -10px 4px 20px;
}

/* Actions */
body.hostiko-quote-body .hostiko-quote-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
body.hostiko-quote-body .hostiko-quote-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #0c2a3f;
    background: #fff;
    border: 1px solid #d9dfe8;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
body.hostiko-quote-body .hostiko-quote-action-btn:hover {
    background: #ff7800;
    color: #fff;
    border-color: #ff7800;
    text-decoration: none;
}
body.hostiko-quote-body .hostiko-quote-backlink {
    margin-top: 12px;
    font-size: 14px;
}
body.hostiko-quote-body .hostiko-quote-backlink a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ff7800;
    text-decoration: none;
    font-weight: 600;
}
body.hostiko-quote-body .hostiko-quote-backlink a:hover {
    color: #e56a00;
    text-decoration: underline;
}

/* Accept Modal */
body.hostiko-quote-body .hostiko-quote-modal {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(12, 42, 63, 0.25);
}
body.hostiko-quote-body .hostiko-quote-modal-header {
    background: linear-gradient(120deg, #16a388 0%, #22c3a5 100%);
    color: #fff;
    border: 0;
    padding: 18px 24px;
}
body.hostiko-quote-body .hostiko-quote-modal-header .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
body.hostiko-quote-body .hostiko-quote-modal-header .close {
    color: #fff;
    opacity: 0.85;
    text-shadow: none;
}
body.hostiko-quote-body .hostiko-quote-modal-body {
    padding: 24px;
    font-size: 14px;
    line-height: 1.6;
}
body.hostiko-quote-body .hostiko-quote-tos {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #f7f9fc;
    border: 1px solid #e7ecf3;
    border-radius: 10px;
    margin: 8px 0;
}
body.hostiko-quote-body .hostiko-quote-tos a {
    color: #ff7800;
    font-weight: 600;
    text-decoration: none;
}
body.hostiko-quote-body .hostiko-quote-tos a:hover {
    text-decoration: underline;
}
body.hostiko-quote-body .hostiko-quote-modal-warn {
    display: block;
    margin-top: 12px;
    padding: 10px 14px;
    background: #fff9ed;
    border: 1px solid #f0d795;
    border-radius: 8px;
    color: #8a5a00;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}
body.hostiko-quote-body .hostiko-quote-modal-footer {
    padding: 16px 24px;
    background: #f7f9fc;
    border-top: 1px solid #e7ecf3;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
body.hostiko-quote-body .hostiko-quote-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    text-decoration: none;
}
body.hostiko-quote-body .hostiko-quote-btn-ghost {
    background: #fff;
    color: #0c2a3f;
    border: 1px solid #d9dfe8;
}
body.hostiko-quote-body .hostiko-quote-btn-ghost:hover {
    background: #f7f9fc;
}
body.hostiko-quote-body .hostiko-quote-btn-primary {
    background: linear-gradient(135deg, #16a388 0%, #22c3a5 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(22, 163, 136, 0.28);
}
body.hostiko-quote-body .hostiko-quote-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(22, 163, 136, 0.34);
    color: #fff;
    text-decoration: none;
}

/* Responsive — Phase 28 */
@media (max-width: 900px) {
    body .hostiko-addfunds-limits {
        grid-template-columns: 1fr;
    }
    body.hostiko-quote-body .hostiko-quote-parties,
    body.hostiko-quote-body .hostiko-quote-dates {
        grid-template-columns: 1fr;
    }
    body.hostiko-quote-body .hostiko-quote-party.is-payto {
        text-align: left;
    }
    body.hostiko-quote-body .hostiko-quote-party.is-payto .hostiko-quote-party-label {
        justify-content: flex-start;
    }
}
@media (max-width: 640px) {
    body .hostiko-addfunds-hero,
    body .hostiko-quotes-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 22px;
    }
    body .hostiko-addfunds-hero-title {
        font-size: 22px;
    }
    body .hostiko-quotes-hero-title {
        font-size: 20px;
    }
    body .hostiko-addfunds-form {
        padding: 22px;
    }
    body .hostiko-addfunds-footer {
        padding: 12px 22px;
    }
    body .hostiko-quotes-hero-count {
        align-self: stretch;
        text-align: center;
    }
    body.hostiko-quote-body .hostiko-quote {
        padding: 20px 14px;
    }
    body.hostiko-quote-body .hostiko-quote-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }
    body.hostiko-quote-body .hostiko-quote-hero-title {
        font-size: 24px;
    }
    body.hostiko-quote-body .hostiko-quote-hero-statusrow {
        flex-direction: column;
        align-items: stretch;
    }
    body.hostiko-quote-body .hostiko-quote-accept-btn {
        width: 100%;
        justify-content: center;
    }
    body.hostiko-quote-body .hostiko-quote-actions {
        justify-content: stretch;
    }
    body.hostiko-quote-body .hostiko-quote-action-btn {
        flex: 1;
        justify-content: center;
    }
}

/* =============================================================================
   Phase 6 — Accessibility + micro-interactions polish
   -------------------------------------------------------------------------
   WCAG 2.1 AA minimum. Globálisan alkalmazott :focus-visible, skip-link,
   prefers-reduced-motion, color-contrast fix, tokenizált hover transitions.
   ============================================================================= */

/* ---- 1) Globális :focus-visible (narancs glow) -------------------------- */
/* Csak keyboard-navigation-kor látszik, mouse-click-re nem. A bootstrap
   default outline-t override-oljuk, a Hostiko-narancs glow-val váltjuk fel. */
body a:focus,
body button:focus,
body input:focus,
body select:focus,
body textarea:focus,
body [tabindex]:focus {
    outline: none;
}
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body [tabindex]:focus-visible,
body .btn:focus-visible,
body .nav-link:focus-visible {
    outline: none;
    box-shadow: var(--hostiko-shadow-focus);
    border-radius: var(--hostiko-radius-sm);
}
/* Inputs megtartják a meglévő radius-t, csak a shadow jön ráadásul */
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body .form-control:focus-visible {
    border-radius: inherit;
}

/* ---- 2) Skip-to-content link -------------------------------------------- */
body .hostiko-skip-link {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 100000;
    background: var(--global--color-bright-orange);
    color: var(--global--color-white);
    padding: 10px 20px;
    border-radius: var(--hostiko-radius-sm);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--hostiko-shadow-lg);
    transition: top var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-skip-link:focus,
body .hostiko-skip-link:focus-visible {
    top: 12px;
    outline: none;
    color: var(--global--color-white);
    text-decoration: none;
}

/* ---- 3) prefers-reduced-motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- 4) Color-contrast fix (narancs gomb fehér szövegen) ---------------- */
/* #ff7800 on white = 2.6:1 (WCAG FAIL for AA). Fix: bold + text-shadow +
   sötétebb variáns hover-re. Megtartja a branding-et, növeli kontrasztot. */
body .btn-primary,
body .hostiko-empty-cta.btn-primary {
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
body .btn-primary:hover,
body .btn-primary:focus-visible,
body .hostiko-empty-cta.btn-primary:hover {
    background-color: #e56b00; /* darker orange, 3.2:1 on white — AA for large text */
    border-color: #e56b00;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

/* ---- 5) Tokenizált hover/active micro-interactions ---------------------- */
/* Finoman emelkedő/süllyedő, token-alapú, minden interaktív kártyára */
body .hostiko-card,
body .client-home-cards > .card,
body .hostiko-welcome-box,
body .hostiko-quick-action,
body .hostiko-account-summary-item {
    transition: transform var(--hostiko-duration-fast) var(--hostiko-ease-out),
                box-shadow var(--hostiko-duration-base) var(--hostiko-ease-out);
}
body .btn,
body .hostiko-empty-cta {
    transition: transform var(--hostiko-duration-fast) var(--hostiko-ease-out),
                box-shadow var(--hostiko-duration-base) var(--hostiko-ease-out),
                background-color var(--hostiko-duration-fast) var(--hostiko-ease-out),
                border-color var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .btn:active {
    transform: translateY(1px);
}

/* ---- 6b) Hostiko breadcrumb (Phase 4) ----------------------------------- */
body .hostiko-breadcrumb {
    margin: 0 0 var(--hostiko-gap-md) 0;
    font-size: 0.875rem;
}
body .hostiko-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hostiko-gap-xs);
}
body .hostiko-breadcrumb li {
    display: inline-flex;
    align-items: center;
    color: var(--global--color-text);
}
body .hostiko-breadcrumb li + li::before {
    content: "›";
    margin: 0 var(--hostiko-gap-xs);
    color: var(--global--color-grayish-blue);
    font-weight: 700;
}
body .hostiko-breadcrumb a {
    color: var(--global--color-text);
    text-decoration: none;
    transition: color var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-breadcrumb a:hover,
body .hostiko-breadcrumb a:focus-visible {
    color: var(--global--color-bright-orange);
}
body .hostiko-breadcrumb a i {
    margin-right: 4px;
}
body .hostiko-breadcrumb [aria-current="page"] {
    color: var(--global--color-very-dark-black-blue);
    font-weight: 600;
}
@media (max-width: 575.98px) {
    body .hostiko-breadcrumb {
        font-size: 0.8125rem;
    }
    body .hostiko-breadcrumb a i {
        display: none;
    }
}

/* ---- 6) ARIA-related visual affordances --------------------------------- */
/* .sr-only utility (screen-reader-only) — Bootstrap 4 default, de biztos ami biztos */
body .hostiko-sr-only,
body .sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================================================
   PHASE 5 — Dashboard Recent Activity feed + Ctrl+K global search
   ============================================================================ */

/* ---- 5a) Recent Activity feed ------------------------------------------- */
body .hostiko-activity-feed {
    background: #fff;
    border: 1px solid var(--global--color-border);
    border-radius: var(--hostiko-radius-lg);
    box-shadow: var(--hostiko-shadow-sm);
    overflow: hidden;
}
body .hostiko-activity-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--hostiko-gap-md) var(--hostiko-gap-lg);
    border-bottom: 1px solid var(--global--color-border);
    background: linear-gradient(135deg, #fff 0%, #fdf5ef 100%);
}
body .hostiko-activity-feed-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--global--color-very-dark-black-blue);
    display: inline-flex;
    align-items: center;
    gap: var(--hostiko-gap-sm);
}
body .hostiko-activity-feed-title .fas {
    color: var(--global--color-bright-orange);
    font-size: 0.9375rem;
}
body .hostiko-activity-feed-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--global--color-bright-orange);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--hostiko-duration-fast) var(--hostiko-ease-out),
                transform var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-activity-feed-link:hover,
body .hostiko-activity-feed-link:focus-visible {
    color: #e56b00;
    transform: translateX(2px);
}
body .hostiko-activity-feed-link .fas {
    font-size: 0.6875rem;
}
body .hostiko-activity-feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
body .hostiko-activity-item {
    border-bottom: 1px solid var(--global--color-border);
}
body .hostiko-activity-item:last-child {
    border-bottom: 0;
}
body .hostiko-activity-link {
    display: flex;
    align-items: center;
    gap: var(--hostiko-gap-md);
    padding: var(--hostiko-gap-md) var(--hostiko-gap-lg);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-activity-link:hover,
body .hostiko-activity-link:focus-visible {
    background-color: #fafbfc;
    text-decoration: none;
}
body .hostiko-activity-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    background: var(--global--color-bright-orange);
}
body .hostiko-activity-ticket .hostiko-activity-icon {
    background: #6f42c1; /* purple */
}
body .hostiko-activity-invoice .hostiko-activity-icon {
    background: #17a2b8; /* teal */
}
body .hostiko-activity-service .hostiko-activity-icon {
    background: var(--global--color-bright-orange); /* brand orange */
}
body .hostiko-activity-domain .hostiko-activity-icon {
    background: #28a745; /* green */
}
body .hostiko-activity-body {
    flex: 1 1 auto;
    min-width: 0;
}
body .hostiko-activity-title {
    font-weight: 600;
    color: var(--global--color-very-dark-black-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}
body .hostiko-activity-meta {
    font-size: 0.8125rem;
    color: var(--global--color-text);
    opacity: 0.8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body .hostiko-activity-time {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    color: var(--global--color-text);
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 575.98px) {
    body .hostiko-activity-feed-header {
        padding: var(--hostiko-gap-sm) var(--hostiko-gap-md);
    }
    body .hostiko-activity-link {
        padding: var(--hostiko-gap-sm) var(--hostiko-gap-md);
        gap: var(--hostiko-gap-sm);
    }
    body .hostiko-activity-icon {
        width: 34px;
        height: 34px;
        font-size: 0.875rem;
    }
    body .hostiko-activity-meta {
        font-size: 0.75rem;
    }
    body .hostiko-activity-time {
        font-size: 0.75rem;
        flex-basis: auto;
    }
}

/* ---- 5b) Global quick-search (Ctrl+K) modal ----------------------------- */
body .hostiko-quicksearch-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 22, 26, 0.55);
    z-index: 2000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(48px, 12vh, 120px);
    opacity: 0;
    transition: opacity var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-quicksearch-backdrop.is-open {
    display: flex;
    opacity: 1;
}
body .hostiko-quicksearch {
    width: min(600px, calc(100vw - 32px));
    max-height: calc(100vh - 160px);
    background: #fff;
    border-radius: var(--hostiko-radius-lg);
    box-shadow: var(--hostiko-shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(-8px);
    transition: transform var(--hostiko-duration-base) var(--hostiko-ease-spring);
}
body .hostiko-quicksearch-backdrop.is-open .hostiko-quicksearch {
    transform: translateY(0);
}
body .hostiko-quicksearch-inputwrap {
    display: flex;
    align-items: center;
    gap: var(--hostiko-gap-sm);
    padding: var(--hostiko-gap-md) var(--hostiko-gap-lg);
    border-bottom: 1px solid var(--global--color-border);
}
body .hostiko-quicksearch-inputwrap .fa-search {
    color: var(--global--color-bright-orange);
    font-size: 1.125rem;
}
body .hostiko-quicksearch-input {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 6px 0;
    font-size: 1rem;
    color: var(--global--color-very-dark-black-blue);
}
body .hostiko-quicksearch-input::placeholder {
    color: var(--global--color-grayish-blue);
}
body .hostiko-quicksearch-kbd {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
    background: #f1f3f5;
    color: #6c757d;
    font-family: inherit;
    border: 1px solid #dee2e6;
}
body .hostiko-quicksearch-results {
    overflow-y: auto;
    max-height: 60vh;
    padding: var(--hostiko-gap-sm) 0;
}
body .hostiko-quicksearch-group {
    padding: var(--hostiko-gap-sm) var(--hostiko-gap-lg) 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--global--color-text);
    opacity: 0.55;
}
body .hostiko-quicksearch-item {
    display: flex;
    align-items: center;
    gap: var(--hostiko-gap-md);
    padding: 10px var(--hostiko-gap-lg);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: background-color var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-quicksearch-item:hover,
body .hostiko-quicksearch-item.is-active,
body .hostiko-quicksearch-item:focus-visible {
    background-color: #fdf5ef;
    color: var(--global--color-bright-orange);
    outline: 0;
    text-decoration: none;
}
body .hostiko-quicksearch-item-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fdf5ef;
    color: var(--global--color-bright-orange);
}
body .hostiko-quicksearch-item.is-active .hostiko-quicksearch-item-icon,
body .hostiko-quicksearch-item:hover .hostiko-quicksearch-item-icon {
    background: var(--global--color-bright-orange);
    color: #fff;
}
body .hostiko-quicksearch-item-body {
    flex: 1 1 auto;
    min-width: 0;
}
body .hostiko-quicksearch-item-title {
    font-weight: 600;
    color: var(--global--color-very-dark-black-blue);
    line-height: 1.3;
}
body .hostiko-quicksearch-item.is-active .hostiko-quicksearch-item-title,
body .hostiko-quicksearch-item:hover .hostiko-quicksearch-item-title {
    color: var(--global--color-bright-orange);
}
body .hostiko-quicksearch-item-desc {
    font-size: 0.8125rem;
    color: var(--global--color-text);
    opacity: 0.75;
    line-height: 1.3;
}
body .hostiko-quicksearch-empty {
    padding: var(--hostiko-gap-lg);
    text-align: center;
    color: var(--global--color-text);
    opacity: 0.65;
    font-size: 0.875rem;
}
body .hostiko-quicksearch-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hostiko-gap-sm);
    padding: var(--hostiko-gap-sm) var(--hostiko-gap-lg);
    border-top: 1px solid var(--global--color-border);
    background: #fafbfc;
    font-size: 0.75rem;
    color: var(--global--color-text);
    opacity: 0.75;
}
body .hostiko-quicksearch-footer-hints {
    display: inline-flex;
    gap: var(--hostiko-gap-md);
    flex-wrap: wrap;
}
body .hostiko-quicksearch-footer-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
body .hostiko-quicksearch-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--hostiko-gap-sm);
    padding: 6px 12px;
    border-radius: var(--hostiko-radius-xs);
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color var(--hostiko-duration-fast) var(--hostiko-ease-out),
                border-color var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-quicksearch-trigger:hover,
body .hostiko-quicksearch-trigger:focus-visible {
    background: rgba(255, 120, 0, 0.08);
    border-color: rgba(255, 120, 0, 0.25);
    outline: 0;
}
body .hostiko-quicksearch-trigger .fa-search {
    color: var(--global--color-bright-orange);
}
body .hostiko-quicksearch-trigger-kbd {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f1f3f5;
    color: #6c757d;
    border: 1px solid #dee2e6;
    font-family: inherit;
}
@media (max-width: 575.98px) {
    body .hostiko-quicksearch-backdrop {
        padding-top: 24px;
    }
    body .hostiko-quicksearch {
        width: calc(100vw - 16px);
    }
    body .hostiko-quicksearch-inputwrap {
        padding: var(--hostiko-gap-sm) var(--hostiko-gap-md);
    }
    body .hostiko-quicksearch-item {
        padding: 10px var(--hostiko-gap-md);
    }
    body .hostiko-quicksearch-footer {
        padding: var(--hostiko-gap-xs) var(--hostiko-gap-md);
    }
}
@media (prefers-reduced-motion: reduce) {
    body .hostiko-quicksearch {
        transform: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   Phase 22 — Footer tuning (P1+P2+P3)
   ---------------------------------------------------------------------
   - Partner-logók: egységes méret + grayscale→color hover
   - Back-to-top floating gomb + smooth-scroll
   - Link hover micro-interaction (translate-X 2px)
   - CTA gomb shine-effect hover-re
   - Bottom copyright-bar styling
   - Social-icon focus-visible ring
   ===================================================================== */

/* -- 22.1 Partner logók egységes méret + grayscale hover ------------ */
body .hostiko-partner-logos {
    padding-top: var(--hostiko-gap-lg, 24px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
body .hostiko-partner-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 100%;
    max-width: 180px;
    padding: 4px 8px;
    border-radius: var(--hostiko-radius-sm, 12px);
    transition:
        transform var(--hostiko-duration-fast, 150ms) var(--hostiko-ease-out, ease-out),
        filter var(--hostiko-duration-base, 250ms) var(--hostiko-ease-out, ease-out),
        opacity var(--hostiko-duration-base, 250ms) var(--hostiko-ease-out, ease-out);
}
body .hostiko-partner-logo img {
    max-height: 48px;
    max-width: 100%;
    width: auto;
    height: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: inherit;
}
body .hostiko-partner-logo:hover img,
body .hostiko-partner-logo:focus-visible img {
    filter: grayscale(0%);
    opacity: 1;
}
body .hostiko-partner-logo:hover {
    transform: translateY(-2px);
}
body .hostiko-partner-logo:focus-visible {
    outline: none;
    box-shadow: var(--hostiko-shadow-focus, 0 0 0 3px rgba(255, 120, 0, 0.35));
}

/* -- 22.2 Link hover micro-interaction (translate-X) ---------------- */
body .footer-section .middle-portion .links li {
    transition: transform var(--hostiko-duration-fast, 150ms) var(--hostiko-ease-out, ease-out);
}
body .footer-section .middle-portion .links li:hover {
    transform: translateX(3px);
}
body .footer-section .middle-portion .links li a,
body .footer-section .middle-portion .links li i {
    transition:
        color var(--hostiko-duration-fast, 150ms) var(--hostiko-ease-out, ease-out);
}

/* -- 22.3 CTA gomb shine-effect (ÍRJ NEKÜNK!) ----------------------- */
body .footer-section .contact-section .button .get_started {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
body .footer-section .contact-section .button .get_started::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    transition: left var(--hostiko-duration-slow, 400ms) var(--hostiko-ease-out, ease-out);
    pointer-events: none;
    z-index: -1;
}
body .footer-section .contact-section .button .get_started:hover::after,
body .footer-section .contact-section .button .get_started:focus-visible::after {
    left: 125%;
}

/* -- 22.4 Social-icon focus-visible ring ---------------------------- */
body .footer-section .middle-portion .social-icons a:focus-visible {
    outline: none;
}
body .footer-section .middle-portion .social-icons a:focus-visible i {
    box-shadow: var(--hostiko-shadow-focus, 0 0 0 3px rgba(255, 120, 0, 0.35));
    transform: translateY(-3px);
    color: var(--global--color-white);
    background: var(--global--color-bright-orange);
}

/* -- 22.5 Bottom copyright-bar -------------------------------------- */
body .hostiko-footer-bottom {
    background: var(--global--color-primary, #1a1a1a);
    color: rgba(255, 255, 255, 0.72);
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    line-height: 1.6;
}
body .hostiko-footer-bottom .hostiko-footer-copyright {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    margin: 0;
}
body .hostiko-footer-bottom .hostiko-footer-copyright strong {
    color: var(--global--color-white, #fff);
    font-weight: 600;
}
body .hostiko-footer-bottom .hostiko-footer-finelinks {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-end;
    align-items: center;
}
body .hostiko-footer-bottom .hostiko-footer-finelinks li {
    position: relative;
    padding: 0 14px;
}
body .hostiko-footer-bottom .hostiko-footer-finelinks li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.18);
}
body .hostiko-footer-bottom .hostiko-footer-finelinks li:last-child {
    padding-right: 0;
}
body .hostiko-footer-bottom .hostiko-footer-finelinks a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 13px;
    transition: color var(--hostiko-duration-fast, 150ms) var(--hostiko-ease-out, ease-out);
}
body .hostiko-footer-bottom .hostiko-footer-finelinks a:hover,
body .hostiko-footer-bottom .hostiko-footer-finelinks a:focus-visible {
    color: var(--global--color-bright-orange, #ff7800);
    outline: none;
}
@media (max-width: 767.98px) {
    body .hostiko-footer-bottom {
        text-align: center;
    }
    body .hostiko-footer-bottom .hostiko-footer-finelinks {
        justify-content: center;
        margin-top: 10px;
    }
    body .hostiko-footer-bottom .hostiko-footer-finelinks li {
        padding: 0 10px;
    }
    body .hostiko-footer-bottom .hostiko-footer-locale-btn {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 8px;
    }
}

/* -- 22.5b Nyelv/currency-választó gomb copyright-barban ----------- */
body .hostiko-footer-bottom .hostiko-footer-locale-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-right: 14px;
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--hostiko-radius-xs, 6px);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition:
        background-color var(--hostiko-duration-fast, 150ms) var(--hostiko-ease-out, ease-out),
        border-color var(--hostiko-duration-fast, 150ms) var(--hostiko-ease-out, ease-out),
        color var(--hostiko-duration-fast, 150ms) var(--hostiko-ease-out, ease-out);
}
body .hostiko-footer-bottom .hostiko-footer-locale-btn:hover,
body .hostiko-footer-bottom .hostiko-footer-locale-btn:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--global--color-white, #fff);
    outline: none;
}
body .hostiko-footer-bottom .hostiko-footer-locale-btn:focus-visible {
    box-shadow: var(--hostiko-shadow-focus, 0 0 0 3px rgba(255, 120, 0, 0.35));
}
body .hostiko-footer-bottom .hostiko-footer-locale-btn .iti-flag {
    flex-shrink: 0;
}
body .hostiko-footer-bottom .hostiko-footer-locale-btn .fa-chevron-down {
    font-size: 10px;
    opacity: 0.7;
}

/* -- 22.6 Back-to-top floating gomb --------------------------------- */
body .hostiko-back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--global--color-bright-orange, #ff7800);
    color: var(--global--color-white, #fff);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition:
        opacity var(--hostiko-duration-base, 250ms) var(--hostiko-ease-out, ease-out),
        visibility 0s linear var(--hostiko-duration-base, 250ms),
        transform var(--hostiko-duration-base, 250ms) var(--hostiko-ease-out, ease-out),
        box-shadow var(--hostiko-duration-base, 250ms) var(--hostiko-ease-out, ease-out),
        background-color var(--hostiko-duration-base, 250ms) var(--hostiko-ease-out, ease-out);
    box-shadow: var(--hostiko-shadow-md, 0 4px 14px rgba(0, 0, 0, 0.18));
    z-index: 1040;
}
body .hostiko-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}
body .hostiko-back-to-top:hover {
    transform: translateY(-3px);
    background: #e06a00;
    box-shadow: var(--hostiko-shadow-lg, 0 8px 22px rgba(0, 0, 0, 0.24));
}
body .hostiko-back-to-top:focus-visible {
    outline: none;
    box-shadow:
        var(--hostiko-shadow-focus, 0 0 0 3px rgba(255, 120, 0, 0.35)),
        var(--hostiko-shadow-md, 0 4px 14px rgba(0, 0, 0, 0.18));
}
body .hostiko-back-to-top:active {
    transform: translateY(0);
}
@media (max-width: 575.98px) {
    body .hostiko-back-to-top {
        right: 14px;
        bottom: 14px;
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* -- 22.7 Reduced-motion kompatibilitás ----------------------------- */
@media (prefers-reduced-motion: reduce) {
    body .hostiko-partner-logo,
    body .hostiko-partner-logo img,
    body .footer-section .middle-portion .links li,
    body .footer-section .contact-section .button .get_started::after,
    body .hostiko-back-to-top {
        transition: none !important;
        transform: none !important;
    }
    body .footer-section .contact-section .button .get_started:hover::after {
        left: -75%;
    }
}

/* =============================================================================
   23) EasyMDE / Markdown editor — Hostiko-narancs brandinghez igazítás
   -----------------------------------------------------------------------------
   Érintett helyek: viewticket.tpl reply-form, supportticketsubmit-steptwo.tpl
   (mindkettőn <textarea class="markdown-editor"> van, amit a WHMCS
   automatikusan EasyMDE-vé alakít).
   Cel: toolbar narancs accent, CodeMirror fold + radius + shadow, aktív gomb
   és preview konzisztens a többi Hostiko-komponenssel.
   ============================================================================= */

/* -- 23.1 Container shell (radius + shadow a teljes editor köré) --------- */
body .EasyMDEContainer {
    border-radius: var(--hostiko-radius-md);
    box-shadow: var(--hostiko-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--hostiko-duration-base) var(--hostiko-ease-out);
}
body .EasyMDEContainer:focus-within {
    box-shadow: var(--hostiko-shadow-md), var(--hostiko-shadow-focus);
}

/* -- 23.2 Toolbar (felső gombsor) --------------------------------------- */
body .EasyMDEContainer .editor-toolbar {
    border: 1px solid var(--global--color-very-light-gray);
    border-top-left-radius: var(--hostiko-radius-md);
    border-top-right-radius: var(--hostiko-radius-md);
    background: #fafafa;
    padding: 6px;
    opacity: 1;
}
body .EasyMDEContainer .editor-toolbar button {
    color: var(--global--color-text);
    border: 1px solid transparent;
    border-radius: var(--hostiko-radius-xs);
    margin: 0 1px;
    transition: background var(--hostiko-duration-fast) var(--hostiko-ease-out),
                color var(--hostiko-duration-fast) var(--hostiko-ease-out),
                border-color var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .EasyMDEContainer .editor-toolbar button:hover,
body .EasyMDEContainer .editor-toolbar button:focus-visible {
    background: rgba(255, 120, 0, 0.12);
    color: var(--global--color-bright-orange);
    border-color: rgba(255, 120, 0, 0.25);
    outline: none;
}
body .EasyMDEContainer .editor-toolbar button.active {
    background: var(--global--color-bright-orange);
    color: var(--global--color-white);
    border-color: var(--global--color-bright-orange);
}
body .EasyMDEContainer .editor-toolbar button.active:hover {
    background: #e06a00;
    color: var(--global--color-white);
}
body .EasyMDEContainer .editor-toolbar i.separator {
    border-left: 1px solid var(--global--color-very-light-gray);
    border-right: none;
    margin: 0 6px;
}

/* -- 23.3 CodeMirror (tényleges textarea terület) ----------------------- */
body .EasyMDEContainer .CodeMirror {
    border: 1px solid var(--global--color-very-light-gray);
    border-top: none;
    border-bottom-left-radius: var(--hostiko-radius-md);
    border-bottom-right-radius: var(--hostiko-radius-md);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--global--color-very-dark-black-blue);
    padding: 4px 8px;
}
body .EasyMDEContainer .CodeMirror-cursor {
    border-left-color: var(--global--color-bright-orange);
    border-left-width: 2px;
}
body .EasyMDEContainer .CodeMirror-selected {
    background: rgba(255, 120, 0, 0.12) !important;
}

/* -- 23.4 Statusbar (alsó info-sor) ------------------------------------- */
body .EasyMDEContainer .editor-statusbar {
    color: var(--global--color-text);
    font-size: 12px;
    padding: 6px 10px;
    border: 1px solid var(--global--color-very-light-gray);
    border-top: none;
    border-bottom-left-radius: var(--hostiko-radius-md);
    border-bottom-right-radius: var(--hostiko-radius-md);
    background: #fafafa;
}
body .EasyMDEContainer .editor-statusbar .lines::before { content: "Sorok: "; }
body .EasyMDEContainer .editor-statusbar .words::before { content: "Szavak: "; }

/* -- 23.5 Preview (él előnézet) ----------------------------------------- */
body .EasyMDEContainer .editor-preview,
body .EasyMDEContainer .editor-preview-side {
    background: var(--global--color-white);
    padding: var(--hostiko-gap-md);
    font-family: 'Inter', sans-serif;
    line-height: 1.65;
    color: var(--global--color-very-dark-black-blue);
}
body .EasyMDEContainer .editor-preview a,
body .EasyMDEContainer .editor-preview-side a {
    color: var(--global--color-bright-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}
body .EasyMDEContainer .editor-preview blockquote,
body .EasyMDEContainer .editor-preview-side blockquote {
    border-left: 3px solid var(--global--color-bright-orange);
    background: rgba(255, 120, 0, 0.06);
    padding: 8px 14px;
    border-radius: var(--hostiko-radius-xs);
    margin: 10px 0;
    color: var(--global--color-text);
}
body .EasyMDEContainer .editor-preview code,
body .EasyMDEContainer .editor-preview-side code {
    background: rgba(20, 22, 26, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.9em;
}
body .EasyMDEContainer .editor-preview pre,
body .EasyMDEContainer .editor-preview-side pre {
    background: #1C2B36;
    color: #e7f6fd;
    padding: 12px 16px;
    border-radius: var(--hostiko-radius-sm);
    overflow-x: auto;
}

/* -- 23.6 Fullscreen mód (stay on-brand) -------------------------------- */
body .EasyMDEContainer .editor-toolbar.fullscreen,
body .EasyMDEContainer .CodeMirror-fullscreen {
    z-index: 1050;
}
body .EasyMDEContainer .editor-toolbar.fullscreen {
    background: #ffffff;
    border-bottom: 1px solid var(--global--color-very-light-gray);
}

/* -- 23.7 Mobil (<=575px) polish ---------------------------------------- */
@media (max-width: 575.98px) {
    body .EasyMDEContainer .editor-toolbar {
        padding: 4px;
        flex-wrap: wrap;
    }
    body .EasyMDEContainer .editor-toolbar button {
        padding: 0 6px;
        min-width: 28px;
    }
    body .EasyMDEContainer .CodeMirror {
        font-size: 14px;
    }
}

/* -- 23.8 Reduced-motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body .EasyMDEContainer,
    body .EasyMDEContainer .editor-toolbar button {
        transition: none !important;
    }
}

/* =============================================================================
   24) Domain details — sidebar-nav tabok (Phase 4)
   -----------------------------------------------------------------------------
   Érintett: clientareadomaindetails.tpl
   - Default (<992px): horizontal scroll tabs tetején — pilulákkal, narancs
     accent hover/active-on
   - Desktop (>=992px): 240px sidebar bal oldalon, tab-content jobbra
   A Bootstrap 4 data-toggle="tab" a .nav .nav-link.active class-t auto-
   matikusan toggle-eli — nem kell saját JS.
   ============================================================================= */

/* -- 24.1 Wrapper layout ------------------------------------------------- */
body .hostiko-domain-detail .hostiko-domain-layout {
    display: block;
    margin-top: var(--hostiko-gap-md);
}

/* -- 24.2 Tab-nav alap (mobile-first: top horizontal pills) ------------- */
body .hostiko-domain-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-bottom: var(--hostiko-gap-lg);
    padding: 6px;
    background: rgba(255, 120, 0, 0.05);
    border-radius: var(--hostiko-radius-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 120, 0, 0.4) transparent;
}
body .hostiko-domain-tabs::-webkit-scrollbar {
    height: 4px;
}
body .hostiko-domain-tabs::-webkit-scrollbar-thumb {
    background: rgba(255, 120, 0, 0.4);
    border-radius: 2px;
}

body .hostiko-domain-tabs .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--hostiko-radius-sm);
    color: var(--global--color-very-dark-black-blue);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: background var(--hostiko-duration-fast) var(--hostiko-ease-out),
                color var(--hostiko-duration-fast) var(--hostiko-ease-out),
                border-color var(--hostiko-duration-fast) var(--hostiko-ease-out),
                box-shadow var(--hostiko-duration-base) var(--hostiko-ease-out);
    flex-shrink: 0;
}
body .hostiko-domain-tabs .nav-link i {
    font-size: 14px;
    width: 16px;
    text-align: center;
    color: var(--global--color-text);
    transition: color var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-domain-tabs .nav-link:hover,
body .hostiko-domain-tabs .nav-link:focus-visible {
    background: rgba(255, 120, 0, 0.12);
    color: var(--global--color-bright-orange);
    border-color: rgba(255, 120, 0, 0.25);
    text-decoration: none;
    outline: none;
}
body .hostiko-domain-tabs .nav-link:hover i,
body .hostiko-domain-tabs .nav-link:focus-visible i {
    color: var(--global--color-bright-orange);
}
body .hostiko-domain-tabs .nav-link.active {
    background: var(--global--color-bright-orange);
    color: var(--global--color-white);
    border-color: var(--global--color-bright-orange);
    box-shadow: var(--hostiko-shadow-sm);
}
body .hostiko-domain-tabs .nav-link.active i {
    color: var(--global--color-white);
}
body .hostiko-domain-tabs .nav-link.active:hover,
body .hostiko-domain-tabs .nav-link.active:focus-visible {
    background: #e06a00;
    border-color: #e06a00;
    color: var(--global--color-white);
}

/* -- 24.3 Desktop layout (>=992px) — sidebar grid ----------------------- */
@media (min-width: 992px) {
    body .hostiko-domain-detail .hostiko-domain-layout {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: var(--hostiko-gap-lg);
        align-items: start;
    }
    body .hostiko-domain-tabs {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        padding: var(--hostiko-gap-sm);
        margin-bottom: 0;
        background: var(--global--color-white);
        box-shadow: var(--hostiko-shadow-sm);
        border-radius: var(--hostiko-radius-md);
        overflow: visible;
        position: sticky;
        top: var(--hostiko-gap-lg);
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
    body .hostiko-domain-tabs .nav-link {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 14px 12px 18px;
        border-radius: var(--hostiko-radius-sm);
    }
    /* Left accent-border 3px az aktív tab-on */
    body .hostiko-domain-tabs .nav-link::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 3px;
        background: transparent;
        border-radius: 0 3px 3px 0;
        transition: background var(--hostiko-duration-fast) var(--hostiko-ease-out);
    }
    body .hostiko-domain-tabs .nav-link.active::before {
        background: var(--global--color-bright-orange);
    }
    /* Desktop aktív NEM narancs-teli pill, hanem halvány-narancs háttér + kékes szöveg */
    body .hostiko-domain-tabs .nav-link.active {
        background: rgba(255, 120, 0, 0.12);
        color: var(--global--color-bright-orange);
        border-color: transparent;
        box-shadow: none;
    }
    body .hostiko-domain-tabs .nav-link.active i {
        color: var(--global--color-bright-orange);
    }
    body .hostiko-domain-tabs .nav-link.active:hover {
        background: rgba(255, 120, 0, 0.18);
        color: var(--global--color-bright-orange);
    }
    body .hostiko-domain-content {
        min-width: 0; /* grid overflow fix */
    }
}

/* -- 24.4 Large tablet portrait polish (768-991px) ---------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    body .hostiko-domain-tabs .nav-link span {
        font-size: 13px;
    }
}

/* -- 24.5 Mobile compact (<576px) --------------------------------------- */
@media (max-width: 575.98px) {
    body .hostiko-domain-tabs {
        padding: 4px;
        gap: 2px;
    }
    body .hostiko-domain-tabs .nav-link {
        padding: 8px 12px;
        font-size: 13px;
    }
    body .hostiko-domain-tabs .nav-link i {
        font-size: 13px;
    }
}

/* -- 24.6 Reduced-motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    body .hostiko-domain-tabs .nav-link,
    body .hostiko-domain-tabs .nav-link i,
    body .hostiko-domain-tabs .nav-link::before {
        transition: none !important;
    }
}

/* =============================================================================
   25. Hostiko — Phase 29 utility components (2026-04)
   -----------------------------------------------------------------------------
   Új, template-widáns komponensek:
     25.1  Copy-to-clipboard buttons (.hostiko-copyable / .hostiko-copy-btn)
     25.2  Cookie consent banner    (.hostiko-cookie-consent)
     25.3  Toast notifications      (.hostiko-toast-container / .hostiko-toast)
     25.5  Upcoming renewals widget (.hostiko-renewals)
   ============================================================================= */

/* -- 25.1 Copy-to-clipboard button -------------------------------------- */
body .hostiko-copyable {
    display: inline-flex;
    align-items: center;
    gap: var(--hostiko-gap-sm);
    padding: 4px 6px 4px 10px;
    margin: 2px 0;
    background: rgba(255, 120, 0, 0.04);
    border: 1px dashed rgba(255, 120, 0, 0.22);
    border-radius: var(--hostiko-radius-sm);
    transition: background var(--hostiko-duration-fast) var(--hostiko-ease-out),
                border-color var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-copyable:hover {
    background: rgba(255, 120, 0, 0.08);
    border-color: rgba(255, 120, 0, 0.4);
    border-style: solid;
}
body .hostiko-copyable-value {
    font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13.5px;
    color: var(--global--color-dark-mostly-black-blue);
    word-break: break-all;
    line-height: 1.4;
}
body .hostiko-copyable-value small {
    font-family: inherit;
    font-size: 12px;
    opacity: 0.7;
}
body .hostiko-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    flex-shrink: 0;
    background: var(--global--color-white);
    color: var(--global--color-dark-grayish-cyan);
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: var(--hostiko-radius-xs);
    cursor: pointer;
    font-size: 12px;
    transition: all var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-copy-btn:hover,
body .hostiko-copy-btn:focus-visible {
    background: var(--global--color-bright-orange);
    color: var(--global--color-white);
    border-color: var(--global--color-bright-orange);
    transform: scale(1.06);
    outline: none;
}
body .hostiko-copy-btn:focus-visible {
    box-shadow: var(--hostiko-shadow-focus);
}
body .hostiko-copy-btn.is-copied {
    background: var(--global--color-moderate-lime-green);
    color: var(--global--color-white);
    border-color: var(--global--color-moderate-lime-green);
    transform: scale(1.1);
}

/* -- 25.2 Cookie consent banner ----------------------------------------- */
body .hostiko-cookie-consent {
    position: fixed;
    left: var(--hostiko-gap-md);
    right: var(--hostiko-gap-md);
    bottom: var(--hostiko-gap-md);
    z-index: 9000;
    max-width: 960px;
    margin: 0 auto;
    background: var(--global--color-white);
    border-radius: var(--hostiko-radius-lg);
    box-shadow: var(--hostiko-shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transform: translateY(120%);
    opacity: 0;
    transition: transform var(--hostiko-duration-base) var(--hostiko-ease-out),
                opacity var(--hostiko-duration-base) var(--hostiko-ease-out);
}
body .hostiko-cookie-consent.is-visible {
    transform: translateY(0);
    opacity: 1;
}
body .hostiko-cookie-consent-inner {
    display: flex;
    align-items: center;
    gap: var(--hostiko-gap-lg);
    padding: var(--hostiko-gap-lg);
    flex-wrap: wrap;
}
body .hostiko-cookie-consent-body {
    display: flex;
    align-items: flex-start;
    gap: var(--hostiko-gap-md);
    flex: 1 1 320px;
    min-width: 0;
}
body .hostiko-cookie-consent-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 120, 0, 0.12);
    color: var(--global--color-bright-orange);
    border-radius: 50%;
    font-size: 20px;
}
body .hostiko-cookie-consent-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--global--color-dark-mostly-black-blue);
    margin-bottom: 4px;
}
body .hostiko-cookie-consent-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--global--color-dark-grayish-cyan);
}
body .hostiko-cookie-consent-desc a {
    color: var(--global--color-bright-orange);
    text-decoration: underline;
    font-weight: 500;
}
body .hostiko-cookie-consent-actions {
    display: flex;
    gap: var(--hostiko-gap-sm);
    flex-wrap: wrap;
}
body .hostiko-cookie-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--hostiko-radius-xl);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-cookie-btn-primary {
    background: var(--global--color-bright-orange);
    color: var(--global--color-white);
}
body .hostiko-cookie-btn-primary:hover,
body .hostiko-cookie-btn-primary:focus-visible {
    background: #e06a00;
    outline: none;
    transform: translateY(-1px);
    box-shadow: var(--hostiko-shadow-sm);
}
body .hostiko-cookie-btn-secondary {
    background: var(--global--color-white);
    color: var(--global--color-dark-grayish-cyan);
    border-color: var(--global--color-very-light-gray);
}
body .hostiko-cookie-btn-secondary:hover,
body .hostiko-cookie-btn-secondary:focus-visible {
    background: var(--global--color-very-light-gray-mostly-white);
    color: var(--global--color-dark-mostly-black-blue);
    border-color: var(--global--color-dark-grayish-cyan);
    outline: none;
}
body .hostiko-cookie-btn:focus-visible {
    box-shadow: var(--hostiko-shadow-focus);
}
@media (max-width: 640px) {
    body .hostiko-cookie-consent-inner {
        padding: var(--hostiko-gap-md);
        gap: var(--hostiko-gap-md);
    }
    body .hostiko-cookie-consent-actions {
        width: 100%;
    }
    body .hostiko-cookie-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* -- 25.3 Toast notifications ------------------------------------------- */
body .hostiko-toast-container {
    position: fixed;
    top: var(--hostiko-gap-lg);
    right: var(--hostiko-gap-lg);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--hostiko-gap-sm);
    pointer-events: none;
    max-width: 380px;
}
body .hostiko-toast {
    display: flex;
    align-items: center;
    gap: var(--hostiko-gap-sm);
    padding: 12px 14px 12px 16px;
    background: var(--global--color-white);
    border-radius: var(--hostiko-radius-md);
    box-shadow: var(--hostiko-shadow-md);
    border-left: 4px solid var(--global--color-dark-grayish-cyan);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity var(--hostiko-duration-base) var(--hostiko-ease-out),
                transform var(--hostiko-duration-base) var(--hostiko-ease-out);
    min-width: 260px;
}
body .hostiko-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}
body .hostiko-toast.is-leaving {
    opacity: 0;
    transform: translateX(16px);
}
body .hostiko-toast-icon {
    flex-shrink: 0;
    font-size: 16px;
    width: 22px;
    display: inline-flex;
    justify-content: center;
}
body .hostiko-toast-msg {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.4;
    color: var(--global--color-dark-mostly-black-blue);
}
body .hostiko-toast-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    color: var(--global--color-dark-grayish-cyan);
    border: none;
    border-radius: var(--hostiko-radius-xs);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--hostiko-duration-fast) var(--hostiko-ease-out),
                background var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-toast-close:hover {
    opacity: 1;
    background: var(--global--color-very-light-gray-mostly-white);
}
body .hostiko-toast-success { border-left-color: var(--global--color-moderate-lime-green); }
body .hostiko-toast-success .hostiko-toast-icon { color: var(--global--color-moderate-lime-green); }
body .hostiko-toast-error   { border-left-color: var(--global--color-strong-red); }
body .hostiko-toast-error .hostiko-toast-icon   { color: var(--global--color-strong-red); }
body .hostiko-toast-warning { border-left-color: var(--global--color-vivid-yellow); }
body .hostiko-toast-warning .hostiko-toast-icon { color: var(--global--color-vivid-yellow); }
body .hostiko-toast-info    { border-left-color: var(--global--color-bright-orange); }
body .hostiko-toast-info .hostiko-toast-icon    { color: var(--global--color-bright-orange); }
@media (max-width: 576px) {
    body .hostiko-toast-container {
        top: var(--hostiko-gap-md);
        right: var(--hostiko-gap-md);
        left: var(--hostiko-gap-md);
        max-width: none;
    }
    body .hostiko-toast {
        min-width: 0;
    }
}

/* -- 25.5 Upcoming renewals widget -------------------------------------- */
body .hostiko-renewals {
    background: var(--global--color-white);
    border-radius: var(--hostiko-radius-lg);
    box-shadow: var(--hostiko-shadow-sm);
    overflow: hidden;
}
body .hostiko-renewals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--global--color-very-light-gray-mostly-white);
    background: linear-gradient(135deg, #fff5ea 0%, #ffffff 100%);
}
body .hostiko-renewals-title {
    display: flex;
    align-items: center;
    gap: var(--hostiko-gap-sm);
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--global--color-dark-mostly-black-blue);
}
body .hostiko-renewals-title i {
    color: var(--global--color-bright-orange);
}
body .hostiko-renewals-subtitle {
    font-size: 12px;
    color: var(--global--color-dark-grayish-cyan);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
body .hostiko-renewals-list {
    display: flex;
    flex-direction: column;
}
body .hostiko-renewal-item {
    display: flex;
    align-items: center;
    gap: var(--hostiko-gap-md);
    padding: 14px 22px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--global--color-very-light-gray-mostly-white);
    transition: background var(--hostiko-duration-fast) var(--hostiko-ease-out),
                transform var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-renewal-item:last-child {
    border-bottom: none;
}
body .hostiko-renewal-item:hover {
    background: var(--global--color-very-light-gray-mostly-white);
    text-decoration: none;
    color: inherit;
}
body .hostiko-renewal-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 120, 0, 0.1);
    color: var(--global--color-bright-orange);
    border-radius: 50%;
    font-size: 15px;
}
body .hostiko-renewal-body {
    flex: 1 1 auto;
    min-width: 0;
}
body .hostiko-renewal-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--global--color-dark-mostly-black-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body .hostiko-renewal-meta {
    font-size: 12.5px;
    color: var(--global--color-dark-grayish-cyan);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body .hostiko-renewal-due {
    flex-shrink: 0;
    text-align: right;
}
body .hostiko-renewal-date {
    font-size: 12.5px;
    color: var(--global--color-dark-grayish-cyan);
    margin-bottom: 3px;
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
}
body .hostiko-renewal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--hostiko-radius-xs);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
body .hostiko-renewal-badge-overdue {
    background: rgba(192, 57, 43, 0.12);
    color: var(--global--color-strong-red);
}
body .hostiko-renewal-badge-urgent {
    background: rgba(255, 120, 0, 0.14);
    color: #c95f00;
}
body .hostiko-renewal-badge-soon {
    background: rgba(241, 196, 15, 0.18);
    color: #b07b05;
}
body .hostiko-renewal-badge-upcoming {
    background: var(--global--color-very-light-gray-mostly-white);
    color: var(--global--color-dark-grayish-cyan);
}
/* Severity-accent a teljes sor bal oldalán (4px-es színcsík) */
body .hostiko-renewal-overdue  { box-shadow: inset 4px 0 0 0 var(--global--color-strong-red); }
body .hostiko-renewal-urgent   { box-shadow: inset 4px 0 0 0 var(--global--color-bright-orange); }
body .hostiko-renewal-soon     { box-shadow: inset 4px 0 0 0 var(--global--color-vivid-yellow); }
body .hostiko-renewal-upcoming { box-shadow: inset 4px 0 0 0 transparent; }

@media (max-width: 540px) {
    body .hostiko-renewal-item {
        padding: 12px 16px;
        gap: 10px;
    }
    body .hostiko-renewal-icon {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
    body .hostiko-renewal-title {
        font-size: 13px;
    }
    body .hostiko-renewal-meta {
        font-size: 11.5px;
    }
    body .hostiko-renewal-badge {
        font-size: 11px;
        padding: 2px 8px;
    }
}

/* -- 25.6 Reduced-motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    body .hostiko-cookie-consent,
    body .hostiko-toast,
    body .hostiko-copy-btn,
    body .hostiko-copyable,
    body .hostiko-renewal-item {
        transition: none !important;
    }
}

/* =============================================================================
   26. Hostiko — Phase 30 security posture, service health, login history (2026-04)
   -----------------------------------------------------------------------------
   A wp-86 (Hostiko-narancs) layout új komponensei, melyek a teamunity.hu
   ügyfélkapu bizonsági és üzemeltetési láthatóságát javítják:
     26.1  Dashboard 2FA nudge           (.hostiko-security-nudge)
     26.2  Service health badge          (.hostiko-health-badge)
     26.3  Login history panel           (.hostiko-login-history)
     26.4  Reduced-motion overrides      (@media prefers-reduced-motion)
   Minden érték a meglévő design-token rendszerből (--hostiko-shadow-*, -radius-*,
   -gap-*, -duration-*, -ease-*) származik a vizuális konzisztencia érdekében.
   ============================================================================= */

/* -- 26.1 Security nudge (dashboard 2FA prompt) ------------------------- */
body .hostiko-security-nudge {
    display: flex;
    align-items: flex-start;
    gap: var(--hostiko-gap-md);
    padding: 18px 22px;
    background: linear-gradient(135deg, #fff5ea 0%, #ffe9d2 100%);
    border: 1px solid rgba(255, 120, 0, 0.22);
    border-left: 4px solid var(--global--color-bright-orange);
    border-radius: var(--hostiko-radius-md);
    box-shadow: var(--hostiko-shadow-sm);
    transition: opacity var(--hostiko-duration-base) var(--hostiko-ease-out),
                transform var(--hostiko-duration-base) var(--hostiko-ease-out);
}
body .hostiko-security-nudge-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--global--color-bright-orange);
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(255, 120, 0, 0.28);
}
body .hostiko-security-nudge-body {
    flex: 1 1 auto;
    min-width: 0;
}
body .hostiko-security-nudge-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--global--color-dark-mostly-black-blue);
    margin-bottom: 4px;
}
body .hostiko-security-nudge-text {
    margin: 0;
    color: var(--global--color-dark-grayish-cyan);
    font-size: 13.5px;
    line-height: 1.5;
}
body .hostiko-security-nudge-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--hostiko-gap-sm);
}
body .hostiko-security-nudge-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: var(--global--color-bright-orange);
    color: #fff !important;
    border: none;
    border-radius: var(--hostiko-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background var(--hostiko-duration-fast) var(--hostiko-ease-out),
                transform var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-security-nudge-btn:hover,
body .hostiko-security-nudge-btn:focus {
    background: #e86a00;
    color: #fff !important;
    transform: translateY(-1px);
}
body .hostiko-security-nudge-dismiss {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--global--color-dark-grayish-cyan);
    border-radius: var(--hostiko-radius-xs);
    cursor: pointer;
    font-size: 14px;
    transition: background var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-security-nudge-dismiss:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--global--color-dark-mostly-black-blue);
}

@media (max-width: 640px) {
    body .hostiko-security-nudge {
        flex-wrap: wrap;
    }
    body .hostiko-security-nudge-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* -- 26.2 Service health badge ------------------------------------------ */
body .hostiko-health-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    vertical-align: middle;
    background: var(--global--color-very-light-gray-mostly-white);
    color: var(--global--color-dark-grayish-cyan);
    border: 1px solid var(--global--color-very-light-gray);
    transition: background var(--hostiko-duration-fast) var(--hostiko-ease-out),
                color var(--hostiko-duration-fast) var(--hostiko-ease-out),
                border-color var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-health-badge i {
    font-size: 9px;
    line-height: 1;
}
body .hostiko-health-badge .hostiko-health-label {
    line-height: 1;
}
/* Checking: halvány animált szürke (alapállapot) */
body .hostiko-health-checking {
    background: #f4f6f9;
    color: #6c7a89;
    border-color: #e5e9ef;
}
body .hostiko-health-checking i {
    font-size: 10px;
}
/* OK — zöld pötty */
body .hostiko-health-ok {
    background: #e8f7ee;
    color: #1d7a3c;
    border-color: #c3ecd0;
}
body .hostiko-health-ok i {
    color: #22a150;
}
/* Down — piros */
body .hostiko-health-down {
    background: #fdecec;
    color: #a62424;
    border-color: #f5c6c6;
}
body .hostiko-health-down i {
    color: #d9362d;
}
/* Inactive — szürke */
body .hostiko-health-inactive {
    background: #eef1f5;
    color: #6b7380;
    border-color: #dde2e9;
}
body .hostiko-health-inactive i {
    color: #8a94a4;
}
/* Unknown — sárgás */
body .hostiko-health-unknown {
    background: #fdf6e3;
    color: #8a6d1d;
    border-color: #efe2b4;
}
body .hostiko-health-unknown i {
    color: #c49b26;
}

/* -- 26.3 Login history panel (user-profile.tpl) ------------------------ */
body .hostiko-login-history-count {
    font-size: 12px;
    color: var(--global--color-dark-grayish-cyan);
    font-weight: 500;
}
body .hostiko-login-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
body .hostiko-login-history-item {
    display: flex;
    align-items: center;
    gap: var(--hostiko-gap-md);
    padding: 14px 4px;
    border-bottom: 1px solid var(--global--color-very-light-gray-mostly-white);
}
body .hostiko-login-history-item:last-child {
    border-bottom: none;
}
body .hostiko-login-history-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
}
body .hostiko-login-history-item.is-success .hostiko-login-history-icon {
    background: #e8f7ee;
    color: #22a150;
}
body .hostiko-login-history-item.is-failed .hostiko-login-history-icon {
    background: #fdecec;
    color: #d9362d;
}
body .hostiko-login-history-main {
    flex: 1 1 auto;
    min-width: 0;
}
body .hostiko-login-history-primary {
    font-weight: 600;
    color: var(--global--color-dark-mostly-black-blue);
    font-size: 14px;
    margin-bottom: 3px;
}
body .hostiko-login-history-item.is-failed .hostiko-login-history-primary {
    color: #a62424;
}
body .hostiko-login-history-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hostiko-gap-md);
    font-size: 12.5px;
    color: var(--global--color-dark-grayish-cyan);
}
body .hostiko-login-history-secondary > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
body .hostiko-login-history-secondary i {
    opacity: 0.75;
    font-size: 11px;
}
body .hostiko-login-history-ago {
    color: #9ca6b4;
    font-style: italic;
    margin-left: 2px;
}
body .hostiko-login-history-ip code {
    padding: 1px 6px;
    background: var(--global--color-very-light-gray-mostly-white);
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 4px;
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--global--color-dark-mostly-black-blue);
}
body .hostiko-login-history-footer {
    margin-top: 14px;
    padding: 12px 14px;
    background: #fff8ef;
    border: 1px solid rgba(255, 120, 0, 0.18);
    border-radius: var(--hostiko-radius-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--hostiko-gap-sm);
    color: var(--global--color-dark-grayish-cyan);
    font-size: 12.5px;
    line-height: 1.5;
}
body .hostiko-login-history-footer i {
    color: var(--global--color-bright-orange);
    flex: 0 0 auto;
    margin-top: 2px;
}
body .hostiko-login-history-footer a {
    color: var(--global--color-bright-orange);
    font-weight: 600;
}

/* -- 26.4 Reduced-motion overrides -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body .hostiko-security-nudge,
    body .hostiko-security-nudge-btn,
    body .hostiko-health-badge {
        transition: none !important;
    }
}

/* =============================================================================
   27. Hostiko — Server status (Phase 31, 2026-04)
   -----------------------------------------------------------------------------
   A serverstatus.tpl modern, card-alapú újratervezése. Minden érték a meglévő
   design-token rendszerből (--hostiko-shadow-*, -radius-*, -gap-*, -duration-*,
   -ease-*) származik a vizuális konzisztencia érdekében.
     27.1  Status alert banner      (.hostiko-ss-alert)
     27.2  Live badge (header)      (.hostiko-ss-live)
     27.3  Server státusz-tábla     (.hostiko-ss-table, port-cell, phpinfo)
     27.4  Hálózati esemény kártya  (.hostiko-ss-issue)
     27.5  Üres állapot + lapozó    (.hostiko-ss-noissues, .hostiko-ss-pager)
     27.6  Responsive + motion      (@media)
   ============================================================================= */

/* -- 27.0 Stats-bar override (3-oszlopos variáns) ------------------------ */
body .hostiko-ss-stats .hostiko-stats-row {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 575.98px) {
    body .hostiko-ss-stats .hostiko-stats-row {
        grid-template-columns: 1fr;
    }
    body .hostiko-ss-stats .hostiko-stats-item {
        border-right: none !important;
        border-bottom: 1px solid var(--global--color-very-light-gray);
    }
    body .hostiko-ss-stats .hostiko-stats-item:last-child {
        border-bottom: none;
    }
}

/* -- 27.1 Status alert banner ------------------------------------------- */
body .hostiko-ss-alert {
    display: flex;
    align-items: center;
    gap: var(--hostiko-gap-md);
    padding: 14px 20px;
    border-radius: var(--hostiko-radius-md);
    box-shadow: var(--hostiko-shadow-sm);
    margin-bottom: var(--hostiko-gap-lg);
    border-left: 4px solid transparent;
}
body .hostiko-ss-alert-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
}
body .hostiko-ss-alert-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body .hostiko-ss-alert-body strong {
    font-size: 15px;
    color: var(--global--color-dark-mostly-black-blue);
    font-weight: 700;
}
body .hostiko-ss-alert-body span {
    font-size: 13px;
    color: var(--global--color-dark-grayish-cyan);
    line-height: 1.45;
}
body .hostiko-ss-alert-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--hostiko-radius-sm);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.6);
    color: var(--global--color-dark-mostly-black-blue) !important;
    text-decoration: none !important;
    transition: background var(--hostiko-duration-fast) var(--hostiko-ease-out),
                transform var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-ss-alert-link:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(2px);
}
body .hostiko-ss-alert.is-success {
    background: linear-gradient(135deg, #eefaf2 0%, #dff6e7 100%);
    border-left-color: #22a150;
}
body .hostiko-ss-alert.is-success .hostiko-ss-alert-icon {
    background: rgba(34, 161, 80, 0.16);
    color: #1d7a3c;
}
body .hostiko-ss-alert.is-info {
    background: linear-gradient(135deg, #eef5ff 0%, #e0ebff 100%);
    border-left-color: #3a70d6;
}
body .hostiko-ss-alert.is-info .hostiko-ss-alert-icon {
    background: rgba(58, 112, 214, 0.14);
    color: #2b5ab8;
}

/* -- 27.2 Live badge ---------------------------------------------------- */
body .hostiko-ss-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--global--color-dark-grayish-cyan);
    background: #f4f6f9;
    border: 1px solid #e5e9ef;
    border-radius: 999px;
}
body .hostiko-ss-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22a150;
    box-shadow: 0 0 0 0 rgba(34, 161, 80, 0.55);
    animation: hostiko-ss-pulse 1.8s var(--hostiko-ease-out) infinite;
}
@keyframes hostiko-ss-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 161, 80, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 161, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 161, 80, 0); }
}

/* -- 27.3 Szerver státusz-tábla ----------------------------------------- */
body .hostiko-ss-servers .hostiko-account-card-body {
    padding-top: var(--hostiko-gap-md);
}
body .hostiko-ss-table-wrap {
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: var(--hostiko-radius-sm);
    overflow: hidden;
}
body .hostiko-ss-table {
    margin: 0;
    width: 100%;
    background: var(--global--color-white);
}
body .hostiko-ss-table thead th {
    background: var(--global--color-very-light-gray-mostly-white);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--global--color-dark-grayish-cyan);
    padding: 12px 14px;
    border-bottom: 1px solid var(--global--color-very-light-gray);
    white-space: nowrap;
}
body .hostiko-ss-table tbody td {
    padding: 14px;
    vertical-align: middle;
    border-top: 1px solid var(--global--color-very-light-gray-mostly-white);
    font-size: 13.5px;
    color: var(--global--color-dark-mostly-black-blue);
}
body .hostiko-ss-table tbody tr:first-child td {
    border-top: none;
}
body .hostiko-ss-table tbody tr:hover td {
    background: #fbfbfc;
}

body .hostiko-ss-server {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
body .hostiko-ss-server-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 120, 0, 0.12);
    color: var(--global--color-bright-orange);
    font-size: 14px;
}
body .hostiko-ss-server strong {
    font-weight: 600;
    font-size: 14px;
    color: var(--global--color-dark-mostly-black-blue);
    word-break: break-all;
}

/* Port-cellák — WHMCS core JS HTML-t injektál ide (check/times ikon).
   Egységes méretezést és színkódolást adunk a befogadott ikonokhoz. */
body .hostiko-ss-cell-port {
    font-size: 15px;
    line-height: 1;
}
body .hostiko-ss-cell-port i.fas,
body .hostiko-ss-cell-port i.fa {
    font-size: 14px;
    vertical-align: middle;
}
body .hostiko-ss-cell-port .fa-check,
body .hostiko-ss-cell-port i.text-success,
body .hostiko-ss-cell-port .success {
    color: #22a150 !important;
}
body .hostiko-ss-cell-port .fa-times,
body .hostiko-ss-cell-port i.text-danger,
body .hostiko-ss-cell-port .error {
    color: #d9362d !important;
}

body .hostiko-ss-cell-load,
body .hostiko-ss-cell-uptime {
    font-variant-numeric: tabular-nums;
    color: var(--global--color-dark-grayish-cyan);
    font-size: 13px;
}

body .hostiko-ss-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--global--color-bright-orange);
    opacity: 0.8;
    font-size: 13px;
}

body .hostiko-ss-phpinfo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--hostiko-radius-xs);
    background: var(--global--color-very-light-gray-mostly-white);
    color: var(--global--color-dark-mostly-black-blue) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    border: 1px solid var(--global--color-very-light-gray);
    transition: background var(--hostiko-duration-fast) var(--hostiko-ease-out),
                border-color var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-ss-phpinfo:hover {
    background: #fff4e8;
    border-color: rgba(255, 120, 0, 0.35);
    color: var(--global--color-bright-orange) !important;
}
body .hostiko-ss-phpinfo i {
    font-size: 13px;
}

body .hostiko-ss-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px;
    color: var(--global--color-dark-grayish-cyan);
    font-size: 13.5px;
}
body .hostiko-ss-empty i {
    font-size: 26px;
    opacity: 0.5;
}

body .hostiko-ss-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hostiko-gap-md);
    padding: 12px 4px 2px;
    font-size: 12px;
    color: var(--global--color-dark-grayish-cyan);
}
body .hostiko-ss-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* -- 27.4 Hálózati események (issue kártyák) --------------------------- */
body .hostiko-ss-issues {
    margin-top: var(--hostiko-gap-lg);
}
body .hostiko-ss-issues-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hostiko-gap-md);
    margin-bottom: var(--hostiko-gap-md);
    padding: 0 2px;
}
body .hostiko-ss-issues-head h3 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--global--color-dark-mostly-black-blue);
}
body .hostiko-ss-issues-head h3 i {
    color: var(--global--color-bright-orange);
    font-size: 15px;
}
body .hostiko-ss-issues-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--global--color-bright-orange) !important;
    text-decoration: none !important;
}
body .hostiko-ss-issues-switch:hover {
    text-decoration: underline !important;
}

body .hostiko-ss-issue {
    border-left: 4px solid var(--global--color-very-light-gray);
    margin-bottom: var(--hostiko-gap-md);
}
body .hostiko-ss-issue.hostiko-ss-pri-critical { border-left-color: #d9362d; }
body .hostiko-ss-issue.hostiko-ss-pri-high     { border-left-color: var(--global--color-bright-orange); }
body .hostiko-ss-issue.hostiko-ss-pri-medium   { border-left-color: #c49b26; }
body .hostiko-ss-issue.hostiko-ss-pri-low      { border-left-color: #22a150; }
body .hostiko-ss-issue.is-affecting-you {
    box-shadow: var(--hostiko-shadow-md), 0 0 0 1px rgba(255, 120, 0, 0.15);
}

body .hostiko-ss-issue-head {
    flex-wrap: wrap;
    gap: var(--hostiko-gap-sm);
}
body .hostiko-ss-issue-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
body .hostiko-ss-issue-title h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--global--color-dark-mostly-black-blue);
    margin: 0;
    line-height: 1.35;
}
body .hostiko-ss-issue-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body .hostiko-ss-issue-status,
body .hostiko-ss-issue-priority {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    background: var(--global--color-very-light-gray-mostly-white);
    color: var(--global--color-dark-grayish-cyan);
    border: 1px solid var(--global--color-very-light-gray);
}
body .hostiko-ss-issue-status i {
    font-size: 7px;
    color: #8a94a4;
}
body .hostiko-ss-issue-priority i {
    font-size: 10px;
}
body .hostiko-ss-issue.hostiko-ss-pri-critical .hostiko-ss-issue-priority {
    background: #fdecec; color: #a62424; border-color: #f5c6c6;
}
body .hostiko-ss-issue.hostiko-ss-pri-critical .hostiko-ss-issue-priority i { color: #d9362d; }
body .hostiko-ss-issue.hostiko-ss-pri-high .hostiko-ss-issue-priority {
    background: #fff1e2; color: #a15511; border-color: rgba(255, 120, 0, 0.3);
}
body .hostiko-ss-issue.hostiko-ss-pri-high .hostiko-ss-issue-priority i { color: var(--global--color-bright-orange); }
body .hostiko-ss-issue.hostiko-ss-pri-medium .hostiko-ss-issue-priority {
    background: #fdf6e3; color: #8a6d1d; border-color: #efe2b4;
}
body .hostiko-ss-issue.hostiko-ss-pri-medium .hostiko-ss-issue-priority i { color: #c49b26; }
body .hostiko-ss-issue.hostiko-ss-pri-low .hostiko-ss-issue-priority {
    background: #e8f7ee; color: #1d7a3c; border-color: #c3ecd0;
}
body .hostiko-ss-issue.hostiko-ss-pri-low .hostiko-ss-issue-priority i { color: #22a150; }

body .hostiko-ss-issue-affect {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--global--color-very-light-gray-mostly-white);
    border-radius: var(--hostiko-radius-sm);
    font-size: 13.5px;
}
body .hostiko-ss-issue-affect-label {
    color: var(--global--color-dark-grayish-cyan);
    font-weight: 500;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body .hostiko-ss-issue-affect strong {
    color: var(--global--color-dark-mostly-black-blue);
    font-weight: 600;
}

body .hostiko-ss-issue-youaffected {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #fff8ef;
    border: 1px solid rgba(255, 120, 0, 0.22);
    border-radius: var(--hostiko-radius-sm);
    color: #8a5316;
    font-size: 13px;
    font-weight: 500;
}
body .hostiko-ss-issue-youaffected i {
    color: var(--global--color-bright-orange);
    font-size: 15px;
}

body .hostiko-ss-issue-desc {
    margin: 0 0 14px;
    color: var(--global--color-dark-mostly-black-blue);
    font-size: 13.5px;
    line-height: 1.6;
}
body .hostiko-ss-issue-desc p:last-child { margin-bottom: 0; }

body .hostiko-ss-issue-footer {
    list-style: none;
    margin: 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--global--color-very-light-gray-mostly-white);
    display: flex;
    flex-wrap: wrap;
    gap: var(--hostiko-gap-lg);
    font-size: 12.5px;
    color: var(--global--color-dark-grayish-cyan);
}
body .hostiko-ss-issue-footer li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body .hostiko-ss-issue-footer i { opacity: 0.75; font-size: 12px; }

/* -- 27.5 Üres állapot + lapozó ---------------------------------------- */
body .hostiko-ss-noissues {
    display: flex;
    align-items: center;
    gap: var(--hostiko-gap-md);
    padding: 22px 24px;
    background: var(--global--color-white);
    border: 1px dashed var(--global--color-very-light-gray);
    border-radius: var(--hostiko-radius-md);
    color: var(--global--color-dark-grayish-cyan);
}
body .hostiko-ss-noissues-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(34, 161, 80, 0.14);
    color: #1d7a3c;
    font-size: 20px;
}
body .hostiko-ss-noissues-body h4 {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 700;
    color: var(--global--color-dark-mostly-black-blue);
}
body .hostiko-ss-noissues-body p {
    margin: 0;
    font-size: 13px;
    color: var(--global--color-dark-grayish-cyan);
}

body .hostiko-ss-pager {
    display: flex;
    justify-content: center;
    gap: var(--hostiko-gap-sm);
    margin-top: var(--hostiko-gap-lg);
}
body .hostiko-ss-pager-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--global--color-white);
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: var(--hostiko-radius-sm);
    color: var(--global--color-dark-mostly-black-blue) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: var(--hostiko-shadow-xs);
    transition: background var(--hostiko-duration-fast) var(--hostiko-ease-out),
                border-color var(--hostiko-duration-fast) var(--hostiko-ease-out),
                color var(--hostiko-duration-fast) var(--hostiko-ease-out),
                transform var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-ss-pager-btn:hover:not(.is-disabled) {
    background: #fff4e8;
    border-color: rgba(255, 120, 0, 0.35);
    color: var(--global--color-bright-orange) !important;
    transform: translateY(-1px);
}
body .hostiko-ss-pager-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* -- 27.6 Responsive + motion ------------------------------------------ */
@media (max-width: 767.98px) {
    body .hostiko-ss-alert {
        flex-wrap: wrap;
    }
    body .hostiko-ss-alert-link {
        width: 100%;
        justify-content: center;
    }
    body .hostiko-ss-table thead {
        display: none;
    }
    body .hostiko-ss-table,
    body .hostiko-ss-table tbody,
    body .hostiko-ss-table tr,
    body .hostiko-ss-table td {
        display: block;
        width: 100%;
    }
    body .hostiko-ss-table tbody tr {
        border: 1px solid var(--global--color-very-light-gray);
        border-radius: var(--hostiko-radius-sm);
        margin-bottom: var(--hostiko-gap-sm);
        padding: 6px 10px;
    }
    body .hostiko-ss-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 10px 4px;
        border-top: 1px solid var(--global--color-very-light-gray-mostly-white);
    }
    body .hostiko-ss-table tbody td:first-child {
        border-top: none;
    }
    body .hostiko-ss-table tbody td[data-label]::before {
        content: attr(data-label);
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--global--color-dark-grayish-cyan);
        font-weight: 600;
        margin-right: var(--hostiko-gap-md);
    }
    /* A name-cellán felesleges a "Szerver" címke — rejtsük el */
    body .hostiko-ss-cell-name { text-align: left; }
    body .hostiko-ss-cell-name::before { display: none; }
    body .hostiko-ss-cell-name .hostiko-ss-server { flex: 1 1 auto; }

    body .hostiko-ss-issue-footer {
        gap: var(--hostiko-gap-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    body .hostiko-ss-live-dot {
        animation: none !important;
    }
    body .hostiko-ss-alert-link,
    body .hostiko-ss-phpinfo,
    body .hostiko-ss-pager-btn {
        transition: none !important;
    }
}

/* =============================================================================
   28. Hostiko — Invoices list redesign (Phase 32, 2026-04)
   -----------------------------------------------------------------------------
   A clientareainvoices.tpl modern, card-alapú újratervezése. A korábbi inline
   Számlázz.hu gombok tokenizált, hover-interaktív változatban, +tartozás-banner,
   státusz-chipszek (status-{class} szűrés — nyelvfüggetlen).
     28.1  Tartozás-banner           (.hostiko-inv-due)
     28.2  Státusz-szűrő chipszek    (.hostiko-inv-filters)
     28.3  Tábla-wrapper kártya      (.hostiko-inv-card, .hostiko-inv-table)
     28.4  Cella formázások + docs   (.hostiko-inv-cell-*, .hostiko-inv-docbtn-*)
     28.5  Responsive + motion       (@media)
   ============================================================================= */

/* -- 28.1 Tartozás-banner ----------------------------------------------- */
body .hostiko-inv-due {
    display: flex;
    align-items: center;
    gap: var(--hostiko-gap-md);
    padding: 16px 22px;
    margin-bottom: var(--hostiko-gap-lg);
    background: linear-gradient(135deg, #fff5ea 0%, #ffe9d2 100%);
    border: 1px solid rgba(255, 120, 0, 0.22);
    border-left: 4px solid var(--global--color-bright-orange);
    border-radius: var(--hostiko-radius-md);
    box-shadow: var(--hostiko-shadow-sm);
}
body .hostiko-inv-due.is-overdue {
    background: linear-gradient(135deg, #fef0ef 0%, #fddcdb 100%);
    border-color: rgba(217, 54, 45, 0.25);
    border-left-color: #d9362d;
}
body .hostiko-inv-due-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--global--color-bright-orange);
    color: #fff;
    font-size: 19px;
    box-shadow: 0 4px 12px rgba(255, 120, 0, 0.28);
}
body .hostiko-inv-due.is-overdue .hostiko-inv-due-icon {
    background: #d9362d;
    box-shadow: 0 4px 12px rgba(217, 54, 45, 0.28);
}
body .hostiko-inv-due-body {
    flex: 1 1 auto;
    min-width: 0;
}
body .hostiko-inv-due-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--global--color-dark-mostly-black-blue);
    margin-bottom: 3px;
    letter-spacing: -0.01em;
}
body .hostiko-inv-due-meta {
    font-size: 13px;
    color: var(--global--color-dark-grayish-cyan);
    line-height: 1.5;
}
body .hostiko-inv-due-count strong {
    color: var(--global--color-dark-mostly-black-blue);
    font-weight: 700;
}
body .hostiko-inv-due-overdue-count {
    color: #d9362d !important;
}
body .hostiko-inv-due-amount-wrap {
    flex: 0 0 auto;
    text-align: right;
    padding-left: var(--hostiko-gap-md);
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body .hostiko-inv-due-amount-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--global--color-dark-grayish-cyan);
    margin-bottom: 2px;
    font-weight: 600;
}
body .hostiko-inv-due-amount {
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--global--color-bright-orange);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
body .hostiko-inv-due.is-overdue .hostiko-inv-due-amount {
    color: #d9362d;
}
body .hostiko-inv-due-amount strong {
    font-weight: 800;
}
body .hostiko-inv-due-currency {
    font-size: 13px;
    font-weight: 600;
    color: var(--global--color-dark-grayish-cyan);
    margin-left: 3px;
}

/* -- 28.2 Státusz-szűrő chipszek ---------------------------------------- */
body .hostiko-inv-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hostiko-gap-sm);
    margin-bottom: var(--hostiko-gap-md);
    padding: 2px;
}
body .hostiko-inv-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--global--color-white);
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--global--color-dark-grayish-cyan);
    cursor: pointer;
    transition: background var(--hostiko-duration-fast) var(--hostiko-ease-out),
                border-color var(--hostiko-duration-fast) var(--hostiko-ease-out),
                color var(--hostiko-duration-fast) var(--hostiko-ease-out),
                transform var(--hostiko-duration-fast) var(--hostiko-ease-out);
    box-shadow: var(--hostiko-shadow-xs);
}
body .hostiko-inv-filter-btn:hover {
    background: #fff8f2;
    border-color: rgba(255, 120, 0, 0.35);
    color: var(--global--color-dark-mostly-black-blue);
    transform: translateY(-1px);
}
body .hostiko-inv-filter-btn:focus-visible {
    outline: none;
    box-shadow: var(--hostiko-shadow-focus);
}
body .hostiko-inv-filter-btn i {
    font-size: 12px;
    opacity: 0.8;
}
body .hostiko-inv-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 700;
    background: var(--global--color-very-light-gray-mostly-white);
    color: var(--global--color-dark-grayish-cyan);
    border-radius: 999px;
}
body .hostiko-inv-filter-btn.is-active {
    background: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 120, 0, 0.28);
}
body .hostiko-inv-filter-btn.is-active i {
    opacity: 1;
    color: #fff;
}
body .hostiko-inv-filter-btn.is-active .hostiko-inv-filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
/* Per-variant hover-szín (overdue/unpaid/paid) ha nem active */
body .hostiko-inv-filter-btn.is-overdue:not(.is-active):hover {
    background: #fdf0ef;
    border-color: rgba(217, 54, 45, 0.3);
    color: #a62424;
}
body .hostiko-inv-filter-btn.is-unpaid:not(.is-active):hover {
    background: #fff8e3;
    border-color: rgba(241, 196, 15, 0.5);
    color: #8a6d1d;
}
body .hostiko-inv-filter-btn.is-paid:not(.is-active):hover {
    background: #e8f7ee;
    border-color: rgba(34, 161, 80, 0.3);
    color: #1d7a3c;
}

/* -- 28.3 Tábla-wrapper + tábla alapszín -------------------------------- */
body .hostiko-inv-card {
    padding: 0;
}
body .hostiko-inv-card > .hostiko-account-card-head {
    padding: 14px 20px;
}
body .hostiko-inv-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--global--color-dark-grayish-cyan);
    font-weight: 500;
}
body .hostiko-inv-hint i {
    opacity: 0.7;
    font-size: 11px;
}
body .hostiko-inv-card-body {
    padding: 0;
}

body .hostiko-inv-table-wrap {
    padding: 8px 10px 12px;
}
body .hostiko-inv-table {
    margin: 0;
    width: 100%;
    background: var(--global--color-white);
}
body .hostiko-inv-table thead th {
    background: var(--global--color-very-light-gray-mostly-white);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--global--color-dark-grayish-cyan);
    padding: 12px 14px;
    border-bottom: 1px solid var(--global--color-very-light-gray);
    border-top: none;
    white-space: nowrap;
}
body .hostiko-inv-table tbody td {
    padding: 14px;
    vertical-align: middle;
    border-top: 1px solid var(--global--color-very-light-gray-mostly-white);
    font-size: 13.5px;
    color: var(--global--color-dark-mostly-black-blue);
}
body .hostiko-inv-table tbody tr { cursor: pointer; }
body .hostiko-inv-table tbody tr:hover td {
    background: #fffaf4;
}

/* -- 28.4 Cella formázások ---------------------------------------------
   Fontos: a <td>-n NINCS display:flex, mert az megtöri a table-layout
   oszlop-kalkulációt (a td-nek table-cell-nek kell maradnia). A flex-es
   elrendezést inline-flex-szel ékeljük a cellán belülre. */
body .hostiko-inv-cell-num {
    white-space: nowrap;
}
body .hostiko-inv-numicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    border-radius: 8px;
    background: rgba(255, 120, 0, 0.12);
    color: var(--global--color-bright-orange);
    font-size: 12px;
}
body .hostiko-inv-cell-num strong {
    vertical-align: middle;
    font-weight: 600;
    color: var(--global--color-dark-mostly-black-blue);
    font-size: 13.5px;
    word-break: break-all;
}

body .hostiko-inv-cell-date,
body .hostiko-inv-cell-due {
    white-space: nowrap;
    color: var(--global--color-dark-grayish-cyan);
    font-size: 13px;
}
body .hostiko-inv-cell-date i,
body .hostiko-inv-cell-due i {
    opacity: 0.65;
    margin-right: 5px;
    font-size: 12px;
}

body .hostiko-inv-cell-total {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body .hostiko-inv-cell-total strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--global--color-dark-mostly-black-blue);
}

body .hostiko-inv-cell-status {
    white-space: nowrap;
}

/* Számlázz.hu bizonylat-gombok — egymás alatt (oszlop-orientáció), mert
   egymás mellett túl szélesre tolta a táblázatot. A td NEM flex-container
   (maradjon table-cell), a gombok block-szintű flex elemek, margin-bottommal
   stackelődnek. */
body .hostiko-inv-docs {
    white-space: normal;
    line-height: 1;
}
body .hostiko-inv-docbtn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 4px 10px;
    margin: 0 0 4px 0;
    width: fit-content;
    min-width: 96px;
    border-radius: var(--hostiko-radius-xs);
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none !important;
    color: #fff !important;
    line-height: 1.4;
    white-space: nowrap;
    transition: opacity var(--hostiko-duration-fast) var(--hostiko-ease-out),
                transform var(--hostiko-duration-fast) var(--hostiko-ease-out);
}
body .hostiko-inv-docbtn:last-child {
    margin-bottom: 0;
}
body .hostiko-inv-docbtn:hover {
    opacity: 0.88;
    transform: translateX(2px);
}
body .hostiko-inv-docbtn i {
    font-size: 11px;
    width: 12px;
    text-align: center;
}
body .hostiko-inv-docbtn-invoice  { background-color: var(--global--color-moderate-lime-green); }
body .hostiko-inv-docbtn-proforma { background-color: var(--global--color-strong-cyan); }
body .hostiko-inv-docbtn-storno   { background-color: var(--global--color-strong-red); }

body .hostiko-inv-docs-empty {
    color: var(--global--color-grayish-blue);
    font-weight: 500;
}

/* -- 28.5 Responsive + motion ------------------------------------------ */
@media (max-width: 767.98px) {
    body .hostiko-inv-due {
        flex-wrap: wrap;
    }
    body .hostiko-inv-due-amount-wrap {
        width: 100%;
        text-align: left;
        padding-left: 0;
        padding-top: 10px;
        margin-top: 10px;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    body .hostiko-inv-filters {
        gap: 6px;
    }
    body .hostiko-inv-filter-btn {
        padding: 7px 12px;
        font-size: 12.5px;
    }
    body .hostiko-inv-filter-btn span:not(.hostiko-inv-filter-count) {
        display: none;
    }
    body .hostiko-inv-filter-btn {
        min-width: 44px;
        justify-content: center;
    }

    /* Tábla -> card per row mobilon */
    body .hostiko-inv-table thead { display: none; }
    body .hostiko-inv-table,
    body .hostiko-inv-table tbody,
    body .hostiko-inv-table tr,
    body .hostiko-inv-table td {
        display: block;
        width: 100%;
    }
    body .hostiko-inv-table tbody tr {
        border: 1px solid var(--global--color-very-light-gray);
        border-radius: var(--hostiko-radius-sm);
        margin-bottom: var(--hostiko-gap-sm);
        padding: 6px 10px;
        background: var(--global--color-white);
    }
    body .hostiko-inv-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 10px 4px;
        border-top: 1px solid var(--global--color-very-light-gray-mostly-white);
    }
    body .hostiko-inv-table tbody td:first-child { border-top: none; }
    body .hostiko-inv-table tbody td[data-label]::before {
        content: attr(data-label);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--global--color-dark-grayish-cyan);
        font-weight: 600;
        margin-right: var(--hostiko-gap-md);
    }
    /* Number cell: ikont balra, számot jobbra */
    body .hostiko-inv-cell-num {
        justify-content: space-between;
    }
    body .hostiko-inv-cell-num::before {
        order: -1;
    }
    body .hostiko-inv-cell-num .hostiko-inv-numicon {
        display: none; /* mobilon a data-label elég */
    }
    body .hostiko-inv-cell-num strong { text-align: right; }

    /* Mobil: a letöltés-gombok oszlopa a data-label mellett — jobbra igazítva.
       A td már nem flex, ezért az egyes (block-flex) gombokat margin-left:auto-val igazítjuk jobbra. */
    body .hostiko-inv-docs {
        text-align: right;
    }
    body .hostiko-inv-docs .hostiko-inv-docbtn {
        margin-left: auto;
        margin-right: 0;
    }
}

@media (max-width: 575.98px) {
    body .hostiko-inv-due-amount { font-size: 20px; }
    body .hostiko-inv-due-icon { width: 40px; height: 40px; font-size: 17px; }
    body .hostiko-inv-due-title { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    body .hostiko-inv-filter-btn,
    body .hostiko-inv-docbtn {
        transition: none !important;
    }
}

/* ==========================================================================
   Section 29 — Phase 33: Support tickets list redesign
   Hozzáadja a CTA-gombot a hero-hoz, vár-olvasásra banner-t, státusz-csoport
   chipszeket, kártyába csomagolt táblázatot olvasatlan-kiemeléssel.
   ========================================================================== */

/* 29.0  Hero CTA — "Új hibajegy" gomb
   --------------------------------------------------------------------- */
body .hostiko-account-hero-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    z-index: 1;
}
body .hostiko-tix-newbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body .hostiko-tix-newbtn:hover,
body .hostiko-tix-newbtn:focus {
    background: #fff;
    color: var(--global--color-vivid-orange, #ff7800);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .28);
}
body .hostiko-tix-newbtn i { font-size: 12px; }

/* 29.1  "Új válasz érkezett" banner — csak ha unread > 0
   --------------------------------------------------------------------- */
body .hostiko-tix-awaits {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff5e6 0%, #ffe6c7 100%);
    border-left: 4px solid var(--global--color-vivid-orange, #ff7800);
    box-shadow: 0 6px 20px -12px rgba(255, 120, 0, .35);
}
body .hostiko-tix-awaits-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255, 120, 0, .18);
    color: var(--global--color-vivid-orange, #ff7800);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
body .hostiko-tix-awaits-body { flex: 1 1 auto; }
body .hostiko-tix-awaits-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--global--color-dark-mostly-black-blue, #1b1f3b);
    line-height: 1.2;
    margin-bottom: 2px;
}
body .hostiko-tix-awaits-meta {
    font-size: 13px;
    color: var(--global--color-dark-grayish-cyan, #6b7280);
}
body .hostiko-tix-awaits-meta strong {
    color: var(--global--color-vivid-orange, #ff7800);
    font-size: 14px;
}

/* 29.2  Státusz chip szűrő-sáv (invoices mintára, saját színekkel)
   --------------------------------------------------------------------- */
body .hostiko-tix-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
body .hostiko-tix-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #e3e6ef;
    border-radius: 999px;
    background: #fff;
    color: var(--global--color-dark-grayish-cyan, #6b7280);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body .hostiko-tix-filter-btn:hover {
    color: var(--global--color-dark-mostly-black-blue, #1b1f3b);
    border-color: #c9ceda;
    transform: translateY(-1px);
}
body .hostiko-tix-filter-btn i { font-size: 12px; opacity: .85; }
body .hostiko-tix-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f1f3f8;
    color: var(--global--color-dark-grayish-cyan, #6b7280);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}
body .hostiko-tix-filter-btn.is-active {
    background: var(--global--color-dark-mostly-black-blue, #1b1f3b);
    border-color: var(--global--color-dark-mostly-black-blue, #1b1f3b);
    color: #fff;
    box-shadow: 0 8px 22px -10px rgba(27, 31, 59, .45);
}
body .hostiko-tix-filter-btn.is-active i { opacity: 1; }
body .hostiko-tix-filter-btn.is-active .hostiko-tix-filter-count {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
/* Status-variant ékezetek (is-awaiting/answered/inprogress/onhold/closed) —
   a hover-színek és az aktív állapot eltérő tónusban jelennek meg. */
body .hostiko-tix-filter-btn.is-awaiting:hover { border-color: #f59e0b; color: #b45309; }
body .hostiko-tix-filter-btn.is-awaiting.is-active {
    background: #f59e0b; border-color: #f59e0b;
    box-shadow: 0 8px 22px -10px rgba(245, 158, 11, .55);
}
body .hostiko-tix-filter-btn.is-answered:hover { border-color: #2563eb; color: #1e40af; }
body .hostiko-tix-filter-btn.is-answered.is-active {
    background: #2563eb; border-color: #2563eb;
    box-shadow: 0 8px 22px -10px rgba(37, 99, 235, .55);
}
body .hostiko-tix-filter-btn.is-inprogress:hover { border-color: #7c3aed; color: #5b21b6; }
body .hostiko-tix-filter-btn.is-inprogress.is-active {
    background: #7c3aed; border-color: #7c3aed;
    box-shadow: 0 8px 22px -10px rgba(124, 58, 237, .55);
}
body .hostiko-tix-filter-btn.is-onhold:hover { border-color: #6b7280; color: #374151; }
body .hostiko-tix-filter-btn.is-onhold.is-active {
    background: #6b7280; border-color: #6b7280;
    box-shadow: 0 8px 22px -10px rgba(107, 114, 128, .55);
}
body .hostiko-tix-filter-btn.is-closed:hover { border-color: #22a150; color: #166534; }
body .hostiko-tix-filter-btn.is-closed.is-active {
    background: #22a150; border-color: #22a150;
    box-shadow: 0 8px 22px -10px rgba(34, 161, 80, .55);
}

/* 29.3  Card fej jobb-oldali hint
   --------------------------------------------------------------------- */
body .hostiko-tix-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--global--color-dark-grayish-cyan, #6b7280);
    white-space: nowrap;
}
body .hostiko-tix-hint i { font-size: 11px; opacity: .7; }

/* 29.4  Táblázat alap (cell stílusok + hover + unread highlight)
   --------------------------------------------------------------------- */
body .hostiko-tix-card-body { padding: 0; }
body .hostiko-tix-table-wrap {
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}
body .hostiko-tix-table {
    margin: 0;
    width: 100%;
}
body .hostiko-tix-table thead th {
    background: #f8f9fc;
    color: var(--global--color-dark-grayish-cyan, #6b7280);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 12px 14px;
    border-bottom: 1px solid #e9ecf3;
}
body .hostiko-tix-table tbody td {
    padding: 14px;
    vertical-align: middle;
    border-top: 1px solid #eef0f6;
    font-size: 13px;
}
body .hostiko-tix-table tbody tr {
    cursor: pointer;
    transition: background-color .14s ease, box-shadow .14s ease;
}
body .hostiko-tix-table tbody tr:hover {
    background: #f8f9fc;
}
/* Unread sorok halvány narancs balszegélye — egyértelmű jelzés figyelmet kér. */
body .hostiko-tix-table tbody tr[data-unread="1"] {
    background: #fff9f0;
    box-shadow: inset 3px 0 0 0 var(--global--color-vivid-orange, #ff7800);
}
body .hostiko-tix-table tbody tr[data-unread="1"]:hover {
    background: #fff3e0;
}

/* 29.5  Részleg cella
   --------------------------------------------------------------------- */
body .hostiko-tix-dept {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--global--color-dark-mostly-black-blue, #1b1f3b);
    font-weight: 600;
}
body .hostiko-tix-dept i {
    color: var(--global--color-vivid-orange, #ff7800);
    font-size: 13px;
    opacity: .85;
}

/* 29.6  Tárgy cella — #tid "kód" + téma + unread badge
   --------------------------------------------------------------------- */
body .hostiko-tix-cell-subject {
    min-width: 0; /* engedjük ellipsziselni */
}
body .hostiko-tix-subjectlink {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
body .hostiko-tix-subjectlink:hover,
body .hostiko-tix-subjectlink:focus {
    text-decoration: none;
}
body .hostiko-tix-subjectlink:hover .hostiko-tix-subject {
    color: var(--global--color-vivid-orange, #ff7800);
}
body .hostiko-tix-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #f1f3f8;
    color: var(--global--color-dark-grayish-cyan, #6b7280);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
body .hostiko-tix-subject {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--global--color-dark-mostly-black-blue, #1b1f3b);
    transition: color .14s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 540px;
}
body .hostiko-tix-subjectlink.is-unread .hostiko-tix-subject {
    font-weight: 700;
    color: var(--global--color-dark-mostly-black-blue, #1b1f3b);
}
body .hostiko-tix-subjectlink.is-unread .hostiko-tix-id {
    background: rgba(255, 120, 0, .15);
    color: var(--global--color-vivid-orange, #ff7800);
}
body .hostiko-tix-unreadbadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--global--color-vivid-orange, #ff7800);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    vertical-align: middle;
}
body .hostiko-tix-unreadbadge i {
    font-size: 6px;
    animation: hostiko-tix-pulse 1.6s ease-in-out infinite;
}
@keyframes hostiko-tix-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

/* 29.7  Státusz + dátum cellák
   --------------------------------------------------------------------- */
body .hostiko-tix-cell-status { white-space: nowrap; }
body .hostiko-tix-cell-date {
    white-space: nowrap;
    color: var(--global--color-dark-grayish-cyan, #6b7280);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
body .hostiko-tix-cell-date i {
    margin-right: 6px;
    opacity: .7;
}

/* 29.8  Mobil: data-label alapú kártya-per-sor layout
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body .hostiko-tix-table thead { display: none; }
    body .hostiko-tix-table tbody tr {
        display: block;
        padding: 12px 14px;
        border-top: 1px solid #eef0f6;
    }
    body .hostiko-tix-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 0;
        border: 0;
        font-size: 13px;
    }
    body .hostiko-tix-table tbody td[data-label]::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        color: var(--global--color-dark-grayish-cyan, #6b7280);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-right: 12px;
        flex: 0 0 auto;
    }
    body .hostiko-tix-cell-subject {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    body .hostiko-tix-cell-subject::before { margin-bottom: 2px; }
    body .hostiko-tix-subjectlink {
        width: 100%;
        gap: 8px;
    }
    body .hostiko-tix-subject {
        white-space: normal;
        max-width: 100%;
    }
    body .hostiko-tix-unreadbadge {
        margin-left: 0;
        align-self: flex-start;
    }
    /* Hero actions — mobilon a gomb új sorba kerül, jobbra igazítva. */
    body .hostiko-account-hero {
        flex-wrap: wrap;
    }
    body .hostiko-account-hero-actions {
        width: 100%;
        margin-top: 4px;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    body .hostiko-tix-awaits { padding: 12px 14px; gap: 10px; }
    body .hostiko-tix-awaits-icon { width: 38px; height: 38px; font-size: 16px; }
    body .hostiko-tix-awaits-title { font-size: 14px; }
    body .hostiko-tix-subject { font-size: 13px; }
    body .hostiko-tix-id { min-width: 48px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    body .hostiko-tix-filter-btn,
    body .hostiko-tix-newbtn,
    body .hostiko-tix-table tbody tr {
        transition: none !important;
    }
    body .hostiko-tix-unreadbadge i { animation: none !important; }
}

/* ==========================================================================
   Section 30 — Phase 34: Domains list redesign
   Hero CTA, "hamarosan lejár" banner, státusz-chip szűrés, modern bulk-toolbar,
   kártyába csomagolt táblázat SSL + autorenew + expiringSoon vizuális elemekkel.
   ========================================================================== */

/* 30.0  Hero CTA — "Új domain keresése"
   --------------------------------------------------------------------- */
body .hostiko-dom-newbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body .hostiko-dom-newbtn:hover,
body .hostiko-dom-newbtn:focus {
    background: #fff;
    color: var(--global--color-vivid-orange, #ff7800);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .28);
}
body .hostiko-dom-newbtn i { font-size: 12px; }

/* 30.1  "Hamarosan lejár" banner (narancs), is-expired (piros)
   --------------------------------------------------------------------- */
body .hostiko-dom-due {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff5e6 0%, #ffe6c7 100%);
    border-left: 4px solid var(--global--color-vivid-orange, #ff7800);
    box-shadow: 0 6px 20px -12px rgba(255, 120, 0, .35);
}
body .hostiko-dom-due.is-expired {
    background: linear-gradient(135deg, #fee4e2 0%, #fbcfc9 100%);
    border-left-color: #d9362d;
    box-shadow: 0 6px 20px -12px rgba(217, 54, 45, .45);
}
body .hostiko-dom-due-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255, 120, 0, .18);
    color: var(--global--color-vivid-orange, #ff7800);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
body .hostiko-dom-due.is-expired .hostiko-dom-due-icon {
    background: rgba(217, 54, 45, .18);
    color: #d9362d;
}
body .hostiko-dom-due-body { flex: 1 1 auto; }
body .hostiko-dom-due-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--global--color-dark-mostly-black-blue, #1b1f3b);
    line-height: 1.2;
    margin-bottom: 2px;
}
body .hostiko-dom-due-meta {
    font-size: 13px;
    color: var(--global--color-dark-grayish-cyan, #6b7280);
}
body .hostiko-dom-due-meta strong {
    color: var(--global--color-vivid-orange, #ff7800);
    font-size: 14px;
}
body .hostiko-dom-due.is-expired .hostiko-dom-due-meta strong.hostiko-dom-due-exp { color: #d9362d; }

/* 30.2  Státusz chip szűrő-sáv
   .is-active-btn = kiválasztott chip (ütközés-elkerülés miatt nem 'is-active',
   mert az egy státusz-variáns modifier). A többi modifier (is-active/expiring/
   expired/pending/cancelled) csak színkódol.
   --------------------------------------------------------------------- */
body .hostiko-dom-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
body .hostiko-dom-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #e3e6ef;
    border-radius: 999px;
    background: #fff;
    color: var(--global--color-dark-grayish-cyan, #6b7280);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body .hostiko-dom-filter-btn:hover {
    color: var(--global--color-dark-mostly-black-blue, #1b1f3b);
    border-color: #c9ceda;
    transform: translateY(-1px);
}
body .hostiko-dom-filter-btn i { font-size: 12px; opacity: .85; }
body .hostiko-dom-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f1f3f8;
    color: var(--global--color-dark-grayish-cyan, #6b7280);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}
body .hostiko-dom-filter-btn.is-active-btn {
    background: var(--global--color-dark-mostly-black-blue, #1b1f3b);
    border-color: var(--global--color-dark-mostly-black-blue, #1b1f3b);
    color: #fff;
    box-shadow: 0 8px 22px -10px rgba(27, 31, 59, .45);
}
body .hostiko-dom-filter-btn.is-active-btn i { opacity: 1; }
body .hostiko-dom-filter-btn.is-active-btn .hostiko-dom-filter-count {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
/* Státusz-variáns árnyalatok (hover + selected) */
body .hostiko-dom-filter-btn.is-active:hover { border-color: #22a150; color: #166534; }
body .hostiko-dom-filter-btn.is-active.is-active-btn {
    background: #22a150; border-color: #22a150;
    box-shadow: 0 8px 22px -10px rgba(34, 161, 80, .55);
}
body .hostiko-dom-filter-btn.is-expiring:hover { border-color: #f59e0b; color: #b45309; }
body .hostiko-dom-filter-btn.is-expiring.is-active-btn {
    background: #f59e0b; border-color: #f59e0b;
    box-shadow: 0 8px 22px -10px rgba(245, 158, 11, .55);
}
body .hostiko-dom-filter-btn.is-expired:hover { border-color: #d9362d; color: #991b1b; }
body .hostiko-dom-filter-btn.is-expired.is-active-btn {
    background: #d9362d; border-color: #d9362d;
    box-shadow: 0 8px 22px -10px rgba(217, 54, 45, .55);
}
body .hostiko-dom-filter-btn.is-pending:hover { border-color: #2563eb; color: #1e40af; }
body .hostiko-dom-filter-btn.is-pending.is-active-btn {
    background: #2563eb; border-color: #2563eb;
    box-shadow: 0 8px 22px -10px rgba(37, 99, 235, .55);
}
body .hostiko-dom-filter-btn.is-cancelled:hover { border-color: #6b7280; color: #374151; }
body .hostiko-dom-filter-btn.is-cancelled.is-active-btn {
    background: #6b7280; border-color: #6b7280;
    box-shadow: 0 8px 22px -10px rgba(107, 114, 128, .55);
}

/* 30.3  Bulk-action toolbar (a WHMCS core bulk-JS-t megtartja)
   --------------------------------------------------------------------- */
body .hostiko-dom-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid #e9ecf3;
    border-radius: 12px;
    box-shadow: 0 4px 12px -8px rgba(27, 31, 59, .12);
}
body .hostiko-dom-toolbar-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--global--color-dark-grayish-cyan, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-right: 14px;
    border-right: 1px solid #eef0f6;
}
body .hostiko-dom-toolbar-label i {
    color: var(--global--color-vivid-orange, #ff7800);
    font-size: 14px;
}
body .hostiko-dom-toolbar-btns {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 !important;
}
/* Toolbar gombok — WHMCS .btn + egyedi override-ok */
body .hostiko-dom-bulkbtn.btn,
body .hostiko-dom-bulkbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid #e3e6ef;
    background: #fff;
    color: var(--global--color-dark-mostly-black-blue, #1b1f3b);
    font-size: 13px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
body .hostiko-dom-bulkbtn.btn:hover,
body .hostiko-dom-bulkbtn:hover {
    background: #f8f9fc;
    border-color: #c9ceda;
    color: var(--global--color-vivid-orange, #ff7800);
    transform: translateY(-1px);
}
body .hostiko-dom-bulkbtn.is-primary.btn,
body .hostiko-dom-bulkbtn.is-primary {
    background: var(--global--color-vivid-orange, #ff7800);
    border-color: var(--global--color-vivid-orange, #ff7800);
    color: #fff;
}
body .hostiko-dom-bulkbtn.is-primary.btn:hover,
body .hostiko-dom-bulkbtn.is-primary:hover {
    background: #e66d00;
    border-color: #e66d00;
    color: #fff;
}
body .hostiko-dom-bulkbtn i { font-size: 11px; opacity: .9; }
body .hostiko-dom-bulkmore .dropdown-menu {
    border: 1px solid #e9ecf3;
    border-radius: 10px;
    box-shadow: 0 10px 30px -12px rgba(27, 31, 59, .25);
    padding: 6px;
    min-width: 210px;
}
body .hostiko-dom-bulkmore .dropdown-menu .dropdown-item {
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--global--color-dark-mostly-black-blue, #1b1f3b);
}
body .hostiko-dom-bulkmore .dropdown-menu .dropdown-item:hover {
    background: #fff5e6;
    color: var(--global--color-vivid-orange, #ff7800);
}
body .hostiko-dom-bulkmore .dropdown-menu .dropdown-item i {
    color: var(--global--color-vivid-orange, #ff7800);
    font-size: 12px;
}

/* 30.4  Card-head hint (a kattintási tipphez)
   --------------------------------------------------------------------- */
body .hostiko-dom-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--global--color-dark-grayish-cyan, #6b7280);
    white-space: nowrap;
}
body .hostiko-dom-hint i { font-size: 11px; opacity: .7; }

/* 30.5  Táblázat alap + fix oszlop-szélesség (checkbox + SSL)
   --------------------------------------------------------------------- */
body .hostiko-dom-card-body { padding: 0; }
body .hostiko-dom-table-wrap {
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}
body .hostiko-dom-table {
    margin: 0;
    width: 100%;
}
body .hostiko-dom-table thead th {
    background: #f8f9fc;
    color: var(--global--color-dark-grayish-cyan, #6b7280);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 12px 14px;
    border-bottom: 1px solid #e9ecf3;
}
body .hostiko-dom-table .hostiko-dom-th-check { width: 38px; padding-right: 0; }
body .hostiko-dom-table .hostiko-dom-th-ssl   { width: 44px; padding-left: 8px; padding-right: 0; }
body .hostiko-dom-table tbody td {
    padding: 14px;
    vertical-align: middle;
    border-top: 1px solid #eef0f6;
    font-size: 13px;
}
body .hostiko-dom-table tbody tr {
    cursor: pointer;
    transition: background-color .14s ease, box-shadow .14s ease;
}
body .hostiko-dom-table tbody tr:hover { background: #f8f9fc; }
body .hostiko-dom-table tbody tr[data-expiring="1"] {
    background: #fff9f0;
    box-shadow: inset 3px 0 0 0 var(--global--color-vivid-orange, #ff7800);
}
body .hostiko-dom-table tbody tr[data-expiring="1"]:hover { background: #fff3e0; }

/* 30.6  Checkbox + SSL cellák
   --------------------------------------------------------------------- */
body .hostiko-dom-cell-check { width: 38px; padding-right: 0 !important; }
body .hostiko-dom-cell-check input[type="checkbox"] {
    cursor: pointer;
    transform: scale(1.1);
    accent-color: var(--global--color-vivid-orange, #ff7800);
}
body .hostiko-dom-cell-ssl {
    width: 44px;
    padding-left: 8px !important;
    padding-right: 0 !important;
}
body .hostiko-dom-cell-ssl img { display: inline-block; }

/* 30.7  Domain cella: link + autorenew pill
   --------------------------------------------------------------------- */
body .hostiko-dom-cell-domain { min-width: 0; }
body .hostiko-dom-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--global--color-dark-mostly-black-blue, #1b1f3b);
    text-decoration: none;
    font-size: 14px;
    transition: color .15s ease;
}
body .hostiko-dom-link strong {
    font-weight: 700;
    font-size: 14px;
    word-break: break-all;
}
body .hostiko-dom-link > i:first-child {
    color: var(--global--color-vivid-orange, #ff7800);
    font-size: 13px;
    opacity: .85;
}
body .hostiko-dom-link:hover,
body .hostiko-dom-link:focus {
    color: var(--global--color-vivid-orange, #ff7800);
    text-decoration: none;
}
body .hostiko-dom-link-ext {
    font-size: 10px !important;
    opacity: 0;
    transition: opacity .15s ease;
}
body .hostiko-dom-link:hover .hostiko-dom-link-ext { opacity: .7; }
body .hostiko-dom-autorenew {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
body .hostiko-dom-autorenew i { font-size: 9px; }
body .hostiko-dom-autorenew.is-on {
    background: rgba(34, 161, 80, .12);
    color: #166534;
}
body .hostiko-dom-autorenew.is-off {
    background: #f1f3f8;
    color: var(--global--color-dark-grayish-cyan, #6b7280);
}

/* 30.8  Dátum cellák + "Hamarosan" jelző
   --------------------------------------------------------------------- */
body .hostiko-dom-cell-date,
body .hostiko-dom-cell-due {
    white-space: nowrap;
    color: var(--global--color-dark-grayish-cyan, #6b7280);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
body .hostiko-dom-cell-date i,
body .hostiko-dom-cell-due > i {
    margin-right: 6px;
    opacity: .7;
}
body .hostiko-dom-cell-due.is-expiring {
    color: var(--global--color-dark-mostly-black-blue, #1b1f3b);
    font-weight: 600;
}
body .hostiko-dom-expsoon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(245, 158, 11, .15);
    color: #b45309;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
body .hostiko-dom-expsoon i { font-size: 9px; opacity: 1; }

/* 30.9  Státusz cella
   --------------------------------------------------------------------- */
body .hostiko-dom-cell-status { white-space: nowrap; }

/* 30.10  Mobil: data-label + toolbar wrap + checkbox oszlop elrejtése
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body .hostiko-dom-table thead { display: none; }
    body .hostiko-dom-table tbody tr {
        display: block;
        padding: 12px 14px;
        border-top: 1px solid #eef0f6;
    }
    body .hostiko-dom-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 0;
        border: 0;
        font-size: 13px;
    }
    body .hostiko-dom-table tbody td[data-label]::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        color: var(--global--color-dark-grayish-cyan, #6b7280);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-right: 12px;
        flex: 0 0 auto;
    }
    /* Checkbox cella (data-label="") — önálló sor balra igazítva, címke nélkül. */
    body .hostiko-dom-cell-check {
        width: auto !important;
        justify-content: flex-start;
    }
    body .hostiko-dom-cell-check::before { display: none; }
    /* Domain cella: link + autorenew pill függőleges elrendezés. */
    body .hostiko-dom-cell-domain {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    body .hostiko-dom-link strong { word-break: break-all; white-space: normal; }
    /* Hero CTA mobilon új sorba. */
    body .hostiko-account-hero { flex-wrap: wrap; }
    body .hostiko-account-hero-actions {
        width: 100%;
        margin-top: 4px;
        justify-content: flex-start;
    }
    /* Bulk toolbar: label a felső sorba, gombok alá. */
    body .hostiko-dom-toolbar-label {
        padding-right: 0;
        padding-bottom: 8px;
        border-right: 0;
        border-bottom: 1px solid #eef0f6;
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    body .hostiko-dom-due { padding: 12px 14px; gap: 10px; }
    body .hostiko-dom-due-icon { width: 38px; height: 38px; font-size: 16px; }
    body .hostiko-dom-due-title { font-size: 14px; }
    body .hostiko-dom-bulkbtn span:not(.hostiko-dom-filter-count) { display: none; }
    body .hostiko-dom-bulkbtn i { font-size: 14px; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body .hostiko-dom-filter-btn,
    body .hostiko-dom-newbtn,
    body .hostiko-dom-bulkbtn,
    body .hostiko-dom-table tbody tr {
        transition: none !important;
    }
}

/* ======================================================================== */
/*   Phase 9A.10 — Knowledgebase 2-col redesign (wp-86 / Hostiko narancs)  */
/* ======================================================================== */
/* Aktív: knowledgebase.tpl + knowledgebasecat.tpl                         */
/* A header.tpl-ben a WHMCS auto-sidebar le van tiltva KB oldalakon         */
/* ($isKbPage flag), így a teljes szélességet a .hostiko-kb saját           */
/* 2-col grid-je használja. A globális banner86.tpl adja az oldal címét.   */

/* --- Toolbar: kategória oldal felső sávja (vissza + szerkesztés) --- */
body .hostiko-kb .kb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}
body .hostiko-kb .kb-back-link,
body .hostiko-kb .kb-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--global--color-very-dark-black-blue);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
body .hostiko-kb .kb-back-link:hover {
    background: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    color: #fff;
    text-decoration: none;
    transform: translateX(-2px);
}
body .hostiko-kb .kb-edit-link {
    font-size: 13px;
    padding: 7px 14px;
    color: #7a8a96;
}
body .hostiko-kb .kb-edit-link:hover {
    background: var(--global--color-very-light-gray-mostly-white);
    color: var(--global--color-very-dark-black-blue);
    text-decoration: none;
}
body .hostiko-kb .kb-back-link i,
body .hostiko-kb .kb-edit-link i {
    font-size: 12px;
    transition: transform .18s ease;
}

/* --- Toolbar search: a search form margó eltávolítása (override globális) --- */
/* A meglévő `body .hostiko-kb form[action*="knowledgebase-search"]` 32px-et */
/* adott; itt a gridhez közelebb hozzuk.                                     */
body .hostiko-kb .kb-toolbar-search {
    margin-bottom: 24px;
}
body .hostiko-kb .kb-toolbar-search.kb-toolbar-search {
    /* increased specificity — felülírja a globális 32px margó-t */
    margin-bottom: 24px;
}

/* --- Kategória leírás (cat oldal) --- */
body .hostiko-kb .kb-cat-description {
    font-family: 'Inter', sans-serif;
    color: #7a8a96;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 24px;
    padding: 14px 18px;
    background: #fff;
    border-left: 3px solid var(--global--color-bright-orange);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(12, 42, 63, 0.04);
}

/* --- KB grid --- */
body .hostiko-kb .kb-grid {
    margin-top: 0;
}

/* --- Section head --- */
body .hostiko-kb .kb-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--global--color-very-light-gray);
    flex-wrap: wrap;
    gap: 8px;
}
body .hostiko-kb h2.kb-section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--global--color-very-dark-black-blue);
    margin: 0;
    letter-spacing: -0.4px;
}
body .hostiko-kb h2.kb-section-title i {
    color: var(--global--color-bright-orange);
    opacity: .9;
    margin-right: 8px;
    font-size: 19px;
}
body .hostiko-kb .kb-section-count {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #7a8a96;
    font-weight: 500;
    background: var(--global--color-very-light-gray-mostly-white);
    padding: 4px 12px;
    border-radius: 20px;
}

/* --- Empty state --- */
body .hostiko-kb .kb-empty {
    text-align: center;
    padding: 64px 24px;
    background: #fff;
    border: 2px dashed var(--global--color-very-light-gray);
    border-radius: 16px;
}
body .hostiko-kb .kb-empty-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(255, 120, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--global--color-bright-orange);
    font-size: 40px;
}
body .hostiko-kb .kb-empty h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--global--color-very-dark-black-blue);
    margin: 0 0 10px;
    letter-spacing: -0.3px;
}
body .hostiko-kb .kb-empty p {
    color: #7a8a96;
    font-size: 14.5px;
    margin: 0 0 20px;
    line-height: 1.6;
}
body .hostiko-kb .kb-empty .btn-primary {
    background: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    color: #fff;
    padding: 11px 26px;
    border-radius: 30px;
    font-weight: 600;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
body .hostiko-kb .kb-empty .btn-primary i {
    margin-right: 7px;
}
body .hostiko-kb .kb-empty .btn-primary:hover {
    background: #e66a00;
    border-color: #e66a00;
    color: #fff;
    transform: translateY(-2px);
}
body .hostiko-kb .kb-empty-inline {
    color: #7a8a96 !important;
    font-style: italic;
}
body .hostiko-kb .kb-empty-inline i {
    margin-right: 8px;
    color: var(--global--color-bright-orange);
    opacity: .7;
}

/* --- Cat oldal: cikklista kártya (a régi `.hostiko-kb > .card` szabály   */
/*     nem fogja meg, mert a kártya .kb-main-en belül van) ---             */
body .hostiko-kb .card.kb-articles-card {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(12, 42, 63, 0.05);
    margin-bottom: 24px;
    overflow: hidden;
}
body .hostiko-kb .card.kb-articles-card > .card-body {
    padding: 20px 28px;
    background: var(--global--color-very-light-gray-mostly-white);
    border-bottom: 1px solid var(--global--color-very-light-gray);
}
body .hostiko-kb .card.kb-articles-card > .card-body h3.card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--global--color-very-dark-black-blue);
    margin: 0;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 10px;
}
body .hostiko-kb .card.kb-articles-card > .card-body h3.card-title i {
    color: var(--global--color-bright-orange);
    opacity: .9;
    font-size: 16px;
}
body .hostiko-kb .card.kb-articles-card .kb-article-count {
    background: rgba(255, 120, 0, 0.12);
    color: var(--global--color-bright-orange);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 11px;
    border-radius: 30px;
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* --- KB sidebar (közös) --- */
body .hostiko-kb .kb-side {
    position: sticky;
    top: 90px;
    align-self: flex-start;
}
body .hostiko-kb .kb-side-card {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(12, 42, 63, 0.05);
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}
body .hostiko-kb .kb-side-card:hover {
    box-shadow: 0 8px 24px rgba(12, 42, 63, 0.08);
}
body .hostiko-kb .kb-side-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: var(--global--color-very-light-gray-mostly-white);
    border-bottom: 1px solid var(--global--color-very-light-gray);
}
body .hostiko-kb .kb-side-head i {
    color: var(--global--color-bright-orange);
    font-size: 16px;
    opacity: .95;
}
body .hostiko-kb .kb-side-head h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--global--color-very-dark-black-blue);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
body .hostiko-kb .kb-side-card .list-group {
    border-radius: 0;
}
body .hostiko-kb .kb-side-card .list-group-item {
    border: none !important;
    border-bottom: 1px solid var(--global--color-very-light-gray) !important;
    padding: 14px 20px;
    color: var(--global--color-very-dark-black-blue);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
    background: #fff !important;
    transition: background .15s ease, padding-left .15s ease, color .15s ease;
    line-height: 1.45;
}
body .hostiko-kb .kb-side-card .list-group-item:last-child {
    border-bottom: none !important;
}
body .hostiko-kb .kb-side-card .list-group-item:hover {
    background: rgba(255, 120, 0, 0.06) !important;
    color: var(--global--color-bright-orange);
    padding-left: 26px;
    text-decoration: none;
}

/* --- Sidebar: népszerű cikkek (numbered ranking) --- */
body .hostiko-kb .kb-side-article {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
}
body .hostiko-kb .kb-side-article-rank {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 120, 0, 0.12);
    color: var(--global--color-bright-orange);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
body .hostiko-kb .kb-side-article:hover .kb-side-article-rank {
    background: var(--global--color-bright-orange);
    color: #fff;
    transform: scale(1.05);
}
body .hostiko-kb .kb-side-article-title {
    flex: 1;
    line-height: 1.45;
    font-size: 13.5px;
}

/* --- Sidebar: kategóriák gyorsnav --- */
body .hostiko-kb .kb-side-cat-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
}
body .hostiko-kb .kb-side-cat-item > i.fa-folder {
    color: var(--global--color-bright-orange);
    opacity: .7;
    font-size: 14px;
    flex-shrink: 0;
    transition: opacity .15s ease;
}
body .hostiko-kb .kb-side-cat-item:hover > i.fa-folder {
    opacity: 1;
}
body .hostiko-kb .kb-side-cat-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
}
body .hostiko-kb .kb-side-cat-count {
    flex-shrink: 0;
    background: rgba(255, 120, 0, 0.1);
    color: var(--global--color-bright-orange);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    min-width: 26px;
    text-align: center;
}
body .hostiko-kb .kb-side-cat-item:hover .kb-side-cat-count {
    background: var(--global--color-bright-orange);
    color: #fff;
}

/* --- Sidebar: support CTA --- */
body .hostiko-kb .kb-side-cta {
    background: linear-gradient(135deg, var(--global--color-very-dark-black-blue) 0%, var(--global--color-very-dark-desaturated-blue) 100%);
    border: 1px solid var(--global--color-very-dark-black-blue);
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(12, 42, 63, 0.18);
    padding: 28px 22px;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    color: #fff;
}
body .hostiko-kb .kb-side-cta::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 120, 0, 0.18) 0%, transparent 70%);
    pointer-events: none;
}
body .hostiko-kb .kb-side-cta-icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 120, 0, 0.18);
    color: var(--global--color-bright-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 26px;
    border: 2px solid rgba(255, 120, 0, 0.3);
}
body .hostiko-kb .kb-side-cta h4 {
    position: relative;
    z-index: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.2px;
}
body .hostiko-kb .kb-side-cta p {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 18px;
}
body .hostiko-kb .kb-side-cta .btn {
    position: relative;
    z-index: 1;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 30px;
    margin-bottom: 8px;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
body .hostiko-kb .kb-side-cta .btn:last-child {
    margin-bottom: 0;
}
body .hostiko-kb .kb-side-cta .btn i {
    margin-right: 7px;
    font-size: 12px;
}
body .hostiko-kb .kb-side-cta .btn.btn-primary {
    background: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    color: #fff;
}
body .hostiko-kb .kb-side-cta .btn.btn-primary:hover,
body .hostiko-kb .kb-side-cta .btn.btn-primary:focus {
    background: #e66a00;
    border-color: #e66a00;
    color: #fff;
    transform: translateY(-2px);
}
body .hostiko-kb .kb-side-cta .btn.btn-outline-primary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}
body .hostiko-kb .kb-side-cta .btn.btn-outline-primary:hover,
body .hostiko-kb .kb-side-cta .btn.btn-outline-primary:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}

/* --- Responsive: tablet & mobile --- */
@media (max-width: 991.98px) {
    body .hostiko-kb .kb-side {
        position: static;
        margin-top: 32px;
    }
    body .hostiko-kb h2.kb-section-title {
        font-size: 20px;
    }
}

@media (max-width: 767.98px) {
    body .hostiko-kb .kb-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    body .hostiko-kb .kb-back-link,
    body .hostiko-kb .kb-edit-link {
        justify-content: center;
    }
    body .hostiko-kb .kb-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    body .hostiko-kb h2.kb-section-title {
        font-size: 18px;
    }
    body .hostiko-kb .kb-empty {
        padding: 48px 20px;
    }
    body .hostiko-kb .kb-empty-icon {
        width: 72px;
        height: 72px;
        font-size: 30px;
    }
    body .hostiko-kb .kb-side-cta {
        padding: 22px 18px;
    }
    body .hostiko-kb .card.kb-articles-card > .card-body {
        padding: 16px 20px;
    }
}

/* ======================================================================== */
/*   Phase 9A.11 — Clientarea finomítás (activity toggle + sidebar polish)  */
/* ======================================================================== */

/* --- Activity feed: 3 visible + toggle to 8 --- */
body .hostiko-activity-extra {
    display: none;
}
body .hostiko-activity-feed.is-expanded .hostiko-activity-extra {
    display: block;
}
body .hostiko-activity-toggle-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    padding-top: 4px;
}
body .hostiko-activity-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--global--color-very-dark-black-blue);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 1px 3px rgba(12, 42, 63, 0.04);
}
body .hostiko-activity-toggle:hover,
body .hostiko-activity-toggle:focus-visible {
    background: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 120, 0, 0.25);
}
body .hostiko-activity-toggle i {
    font-size: 11px;
    transition: transform .18s ease;
}
body .hostiko-activity-toggle .hostiko-activity-toggle-collapsed,
body .hostiko-activity-toggle .hostiko-activity-toggle-expanded {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body .hostiko-activity-toggle .hostiko-activity-toggle-expanded {
    display: none;
}
body .hostiko-activity-feed.is-expanded .hostiko-activity-toggle .hostiko-activity-toggle-collapsed {
    display: none;
}
body .hostiko-activity-feed.is-expanded .hostiko-activity-toggle .hostiko-activity-toggle-expanded {
    display: inline-flex;
}

/* --- Sidebar redesign (clientarea: Saját adatok, Fiókok, Gyorsmenü) --- */
/* A WHMCS auto-gen sidebar.tpl-t nem írjuk át; stílussal hozzuk az új      */
/* designhoz. Hatás: minden col-lg-4/col-xl-3 sidebar a hostiko sablonban. */

body .sidebar .card.card-sidebar {
    background: #fff;
    border: 1px solid var(--global--color-very-light-gray);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(12, 42, 63, 0.05);
    margin-bottom: 18px;
    overflow: hidden;
    transition: box-shadow .25s ease;
}
body .sidebar .card.card-sidebar:hover {
    box-shadow: 0 8px 24px rgba(12, 42, 63, 0.08);
}
body .sidebar .card.card-sidebar .card-header {
    background: var(--global--color-very-light-gray-mostly-white);
    border-bottom: 1px solid var(--global--color-very-light-gray);
    padding: 16px 20px;
}
/* h3 lehet .card-title (clientarea) vagy .panel-title (store) — */
/*  általános h3 szelektor mindkettőt fogja.                       */
body .sidebar .card.card-sidebar .card-header h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--global--color-very-dark-black-blue);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.3;
}
body .sidebar .card.card-sidebar .card-header h3 > i:first-child {
    color: var(--global--color-bright-orange);
    font-size: 15px;
    opacity: .95;
    margin: 0;
}
/* Mindig nyitva: a chevron-up rejtése + body force-show               */
/* (a twenty-one scripts.js 21663 sora <=720px-en becsukja, valamint   */
/*  user-click is becsukhatja — ezt felülírjuk). A store oldalon a     */
/*  chevron-on .card-minimise és .panel-minimise is van — bármelyikre  */
/*  illeszkedik.                                                        */
body .sidebar .card.card-sidebar .card-header h3 .card-minimise,
body .sidebar .card.card-sidebar .card-header h3 .panel-minimise {
    display: none !important;
}
body .sidebar .card.card-sidebar .collapsable-card-body {
    display: block !important;
}
body .sidebar .card.card-sidebar .card-body {
    padding: 16px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--global--color-very-dark-black-blue);
}
body .sidebar .card.card-sidebar .card-body strong {
    font-weight: 700;
    color: var(--global--color-very-dark-black-blue);
}
body .sidebar .card.card-sidebar .card-body em {
    font-style: normal;
    color: #7a8a96;
    font-size: 12.5px;
}

/* List items in sidebar (Fiókok, Gyorsmenü) */
body .sidebar .card.card-sidebar .list-group {
    border-radius: 0;
}
body .sidebar .card.card-sidebar .list-group-item {
    border: none;
    border-bottom: 1px solid var(--global--color-very-light-gray);
    padding: 12px 20px;
    background: #fff;
    color: var(--global--color-very-dark-black-blue);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    transition: background .15s ease, padding-left .15s ease, color .15s ease;
}
body .sidebar .card.card-sidebar .list-group-item:last-child {
    border-bottom: none;
}
body .sidebar .card.card-sidebar .list-group-item:hover,
body .sidebar .card.card-sidebar .list-group-item:focus {
    background: rgba(255, 120, 0, 0.06);
    color: var(--global--color-bright-orange);
    padding-left: 26px;
    text-decoration: none;
}
body .sidebar .card.card-sidebar .list-group-item.active,
body .sidebar .card.card-sidebar .list-group-item.active:focus,
body .sidebar .card.card-sidebar .list-group-item.active:hover {
    background-color: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
    color: #fff !important;
}
body .sidebar .card.card-sidebar .sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
body .sidebar .card.card-sidebar .sidebar-menu-item-icon-wrapper {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 120, 0, 0.1);
    color: var(--global--color-bright-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background .15s ease, color .15s ease;
}
body .sidebar .card.card-sidebar .list-group-item:hover .sidebar-menu-item-icon-wrapper {
    background: var(--global--color-bright-orange);
    color: #fff;
}
body .sidebar .card.card-sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
body .sidebar .card.card-sidebar .sidebar-menu-item-icon {
    font-size: 12px;
}
body .sidebar .card.card-sidebar .sidebar-menu-item-label {
    flex: 1;
    line-height: 1.4;
}
body .sidebar .card.card-sidebar .sidebar-menu-item-badge .badge {
    background: rgba(255, 120, 0, 0.12);
    color: var(--global--color-bright-orange);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 20px;
}
body .sidebar .card.card-sidebar .list-group-item:hover .sidebar-menu-item-badge .badge,
body .sidebar .card.card-sidebar .list-group-item.active .sidebar-menu-item-badge .badge {
    background: var(--global--color-bright-orange);
    color: #fff;
}

/* Card footer (Módosítás / Új fiók... gombok) */
body .sidebar .card.card-sidebar .card-footer {
    background: #fff;
    border-top: 1px solid var(--global--color-very-light-gray);
    padding: 14px 20px;
}
body .sidebar .card.card-sidebar .card-footer .btn {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 30px;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
body .sidebar .card.card-sidebar .card-footer .btn i {
    margin-right: 6px;
    font-size: 11px;
}
body .sidebar .card.card-sidebar .card-footer .btn-success,
body .sidebar .card.card-sidebar .card-footer .btn-default {
    background: var(--global--color-bright-orange) !important;
    border-color: var(--global--color-bright-orange) !important;
    color: #fff !important;
}
body .sidebar .card.card-sidebar .card-footer .btn-success:hover,
body .sidebar .card.card-sidebar .card-footer .btn-default:hover,
body .sidebar .card.card-sidebar .card-footer .btn-success:focus,
body .sidebar .card.card-sidebar .card-footer .btn-default:focus {
    background: #e66a00 !important;
    border-color: #e66a00 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 120, 0, 0.25);
}

/* ======================================================================== */
/*   Phase 9A.12 — Homepage modern redesign (index → homepage.tpl)     */
/* ======================================================================== */
/* Aktív: includes/homepage.tpl — termékek + akció-csempék + fiók-csempék  */

/* --- Section szakaszok + címek --- */
body .primary-content .hostiko-home-products,
body .primary-content .hostiko-home-actions,
body .primary-content .hostiko-home-account {
    margin: 56px 0;
}
body .primary-content .hostiko-home-products:first-child {
    margin-top: 24px;
}
body .primary-content .hostiko-home-section-head {
    text-align: center;
    margin-bottom: 36px;
}
body .primary-content .hostiko-home-section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.2;
    color: var(--global--color-very-dark-black-blue);
    margin: 0 0 10px;
    letter-spacing: -0.6px;
}
body .primary-content .hostiko-home-section-sub {
    font-family: 'Inter', sans-serif;
    font-size: 15.5px;
    color: #7c7c7c;
    margin: 0;
    line-height: 1.55;
}

/* --- Termékkártya rács --- */
body .primary-content .hostiko-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
}
body .primary-content .hostiko-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 16px;
    padding: 30px 28px 26px;
    text-decoration: none !important;
    color: inherit;
    transition: transform .28s cubic-bezier(.2,.7,.3,1.1), box-shadow .28s ease, border-color .28s ease;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(12, 42, 63, 0.04);
    height: 100%;
}
body .primary-content .hostiko-product-card .hostiko-product-card-stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--global--color-bright-orange) 0%, #ff9d10 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
body .primary-content .hostiko-product-card:hover,
body .primary-content .hostiko-product-card:focus {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(12, 42, 63, 0.12);
    border-color: rgba(255, 120, 0, 0.3);
    text-decoration: none;
    color: inherit;
}
body .primary-content .hostiko-product-card:hover .hostiko-product-card-stripe,
body .primary-content .hostiko-product-card:focus .hostiko-product-card-stripe {
    transform: scaleX(1);
}
body .primary-content .hostiko-product-card .hostiko-product-card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--global--color-very-dark-black-blue);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
    line-height: 1.3;
}
body .primary-content .hostiko-product-card .hostiko-product-card-sub {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: #7c7c7c;
    line-height: 1.55;
    margin: 0 0 24px;
    flex: 1;
}
body .primary-content .hostiko-product-card .hostiko-product-card-cta {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--global--color-bright-orange);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    transition: gap .22s ease, color .18s ease;
}
body .primary-content .hostiko-product-card .hostiko-product-card-cta i {
    font-size: 12px;
    transition: transform .22s ease;
}
body .primary-content .hostiko-product-card:hover .hostiko-product-card-cta {
    gap: 12px;
    color: #e66a00;
}
body .primary-content .hostiko-product-card:hover .hostiko-product-card-cta i {
    transform: translateX(3px);
}

/* Domain kártyák: lágy gradient háttér + ikon */
body .primary-content .hostiko-product-card-domain {
    background: linear-gradient(135deg, #fafbfc 0%, #fff 100%);
    border-color: #e7eaee;
}
body .primary-content .hostiko-product-card-domain .hostiko-product-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: rgba(255, 120, 0, 0.1);
    color: var(--global--color-bright-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 0 18px;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}
body .primary-content .hostiko-product-card-domain:hover .hostiko-product-card-icon {
    background: var(--global--color-bright-orange);
    color: #fff;
    transform: rotate(-6deg) scale(1.05);
}

/* --- Action / fiók csempék --- */
body .primary-content .hostiko-action-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    align-items: stretch;
}
body .primary-content .hostiko-action-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px 18px;
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 16px;
    text-decoration: none !important;
    color: var(--global--color-very-dark-black-blue);
    transition: transform .25s cubic-bezier(.2,.7,.3,1.1), box-shadow .25s ease, border-color .25s ease;
    text-align: center;
    box-shadow: 0 2px 6px rgba(12, 42, 63, 0.03);
    height: 100%;
}
body .primary-content .hostiko-action-tile:hover,
body .primary-content .hostiko-action-tile:focus {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(12, 42, 63, 0.1);
    text-decoration: none;
    color: var(--global--color-very-dark-black-blue);
}
body .primary-content .hostiko-action-tile .hostiko-action-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: transform .25s cubic-bezier(.2,.7,.3,1.1), box-shadow .25s ease;
}
body .primary-content .hostiko-action-tile:hover .hostiko-action-icon {
    transform: scale(1.1) rotate(-4deg);
}
body .primary-content .hostiko-action-tile .hostiko-action-label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: -0.1px;
    /* 2 sort foglal el akkor is, ha a felirat 1 soros — így minden csempe   */
    /* azonos magas lesz a sorban (Szolgáltatások kezelése wrap-elhet).      */
    min-height: 2.7em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Action color variants (Miben segíthetünk) */
body .primary-content .hostiko-action-news .hostiko-action-icon {
    background: rgba(8, 187, 164, 0.12);
    color: var(--global--color-strong-cyan);
}
body .primary-content .hostiko-action-news:hover {
    border-color: rgba(8, 187, 164, 0.35);
}
body .primary-content .hostiko-action-news:hover .hostiko-action-icon {
    box-shadow: 0 6px 16px rgba(8, 187, 164, 0.25);
}
body .primary-content .hostiko-action-status .hostiko-action-icon {
    background: rgba(192, 57, 43, 0.12);
    color: var(--global--color-strong-red);
}
body .primary-content .hostiko-action-status:hover {
    border-color: rgba(192, 57, 43, 0.35);
}
body .primary-content .hostiko-action-status:hover .hostiko-action-icon {
    box-shadow: 0 6px 16px rgba(192, 57, 43, 0.22);
}
body .primary-content .hostiko-action-kb .hostiko-action-icon {
    background: rgba(241, 196, 15, 0.16);
    color: #d49a07;
}
body .primary-content .hostiko-action-kb:hover {
    border-color: rgba(241, 196, 15, 0.45);
}
body .primary-content .hostiko-action-kb:hover .hostiko-action-icon {
    box-shadow: 0 6px 16px rgba(241, 196, 15, 0.28);
}
body .primary-content .hostiko-action-download .hostiko-action-icon {
    background: rgba(127, 140, 141, 0.16);
    color: var(--global--color-dark-grayish-cyan);
}
body .primary-content .hostiko-action-download:hover {
    border-color: rgba(127, 140, 141, 0.4);
}
body .primary-content .hostiko-action-download:hover .hostiko-action-icon {
    box-shadow: 0 6px 16px rgba(127, 140, 141, 0.25);
}
body .primary-content .hostiko-action-ticket .hostiko-action-icon {
    background: rgba(92, 184, 92, 0.16);
    color: var(--global--color-moderate-lime-green);
}
body .primary-content .hostiko-action-ticket:hover {
    border-color: rgba(92, 184, 92, 0.4);
}
body .primary-content .hostiko-action-ticket:hover .hostiko-action-icon {
    box-shadow: 0 6px 16px rgba(92, 184, 92, 0.25);
}

/* Fiók grid: egységes navy témával */
body .primary-content .hostiko-action-grid-account .hostiko-action-tile .hostiko-action-icon {
    background: rgba(12, 42, 63, 0.08);
    color: var(--global--color-very-dark-black-blue);
}
body .primary-content .hostiko-action-grid-account .hostiko-action-tile:hover {
    border-color: rgba(12, 42, 63, 0.28);
}
body .primary-content .hostiko-action-grid-account .hostiko-action-tile:hover .hostiko-action-icon {
    background: var(--global--color-very-dark-black-blue);
    color: #fff;
    box-shadow: 0 6px 16px rgba(12, 42, 63, 0.22);
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    body .primary-content .hostiko-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    body .primary-content .hostiko-action-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
    body .primary-content .hostiko-home-section-title {
        font-size: 26px;
    }
    body .primary-content .hostiko-home-products,
    body .primary-content .hostiko-home-actions,
    body .primary-content .hostiko-home-account {
        margin: 44px 0;
    }
}
@media (max-width: 575.98px) {
    body .primary-content .hostiko-product-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    body .primary-content .hostiko-action-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    body .primary-content .hostiko-home-section-title {
        font-size: 22px;
    }
    body .primary-content .hostiko-home-section-sub {
        font-size: 14px;
    }
    body .primary-content .hostiko-product-card {
        padding: 24px 22px 22px;
    }
    body .primary-content .hostiko-product-card .hostiko-product-card-title {
        font-size: 17px;
    }
    body .primary-content .hostiko-action-tile {
        padding: 22px 12px;
        gap: 10px;
    }
    body .primary-content .hostiko-action-tile .hostiko-action-icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }
    body .primary-content .hostiko-action-tile .hostiko-action-label {
        font-size: 13px;
    }
    body .primary-content .hostiko-home-products,
    body .primary-content .hostiko-home-actions,
    body .primary-content .hostiko-home-account {
        margin: 32px 0;
    }
}

/* ======================================================================== */
/*   Phase 9A.13 — Homepage hero slider (banner helyett a főoldalon)        */
/* ======================================================================== */
/* Aktív: includes/homepage-slider.tpl — header.tpl-ben homepage check.    */

body .hostiko-hero-slider {
    position: relative;
    width: 100%;
    height: clamp(480px, 50vw, 620px);
    overflow: hidden;
    background: url(https://teamunity.hu/whmcs-sync/?ccce=js&ajax=1&js=templates/hostiko/layouts/wp-86/./assets/images/banner-backgroundimage86.png) center/cover no-repeat;
    margin-bottom: 0;
    /* A navbar `margin-bottom: -85px`-rel a slider tetejére lóg —          */
    /*  extra padding-top biztonsági pufferként.                            */
    padding-top: 60px;
}
body .hostiko-hero-track {
    position: relative;
    width: 100%;
    height: 100%;
}
body .hostiko-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility .8s ease;
    display: flex;
    align-items: center;
    pointer-events: none;
}
body .hostiko-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}
body .hostiko-hero-slide > .container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    width: 100%;
}
/* Slide-specifikus dekoratív körök (nem teljes háttér) — a bannerkép  */
/* marad fix, csak az orb-ok színe variálódik a slide típusától.        */
body .hostiko-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
body .hostiko-hero-bg::before,
body .hostiko-hero-bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
    opacity: .45;
}

body .hostiko-hero-slide-wp .hostiko-hero-bg::before {
    width: 480px; height: 480px;
    top: -140px; right: -80px;
    background: radial-gradient(circle, rgba(255, 120, 0, 0.65) 0%, transparent 70%);
}
body .hostiko-hero-slide-wp .hostiko-hero-bg::after {
    width: 360px; height: 360px;
    bottom: -120px; left: 8%;
    background: radial-gradient(circle, rgba(8, 187, 164, 0.4) 0%, transparent 70%);
}

body .hostiko-hero-slide-vps .hostiko-hero-bg::before {
    width: 460px; height: 460px;
    top: -120px; right: 5%;
    background: radial-gradient(circle, rgba(8, 187, 164, 0.6) 0%, transparent 70%);
}
body .hostiko-hero-slide-vps .hostiko-hero-bg::after {
    width: 420px; height: 420px;
    bottom: -160px; left: -80px;
    background: radial-gradient(circle, rgba(255, 120, 0, 0.4) 0%, transparent 70%);
}

body .hostiko-hero-slide-domain .hostiko-hero-bg::before {
    width: 480px; height: 480px;
    top: -140px; right: -60px;
    background: radial-gradient(circle, rgba(241, 196, 15, 0.5) 0%, transparent 70%);
}
body .hostiko-hero-slide-domain .hostiko-hero-bg::after {
    width: 360px; height: 360px;
    bottom: -120px; left: 5%;
    background: radial-gradient(circle, rgba(255, 120, 0, 0.45) 0%, transparent 70%);
}

/* Tartalom */
body .hostiko-hero-content {
    color: #fff;
    transform: translateY(20px);
    opacity: 0;
    transition: transform .8s cubic-bezier(.2,.7,.3,1.1) .15s, opacity .8s ease .15s;
}
body .hostiko-hero-slide.is-active .hostiko-hero-content {
    transform: translateY(0);
    opacity: 1;
}
body .hostiko-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 7px 16px;
    border-radius: 99px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
body .hostiko-hero-badge i {
    font-size: 11px;
    color: var(--global--color-bright-orange);
}
body .hostiko-hero-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.1;
    color: #fff;
    margin: 0 0 16px;
    letter-spacing: -1px;
}
body .hostiko-hero-title span {
    background: linear-gradient(90deg, var(--global--color-bright-orange) 0%, #ffb14a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}
body .hostiko-hero-sub {
    font-family: 'Inter', sans-serif;
    font-size: clamp(14px, 1.15vw, 16.5px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 28px;
    max-width: 560px;
}
body .hostiko-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
body .hostiko-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    border-radius: 99px;
    text-decoration: none !important;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease, gap .22s ease;
    border: 2px solid transparent;
    letter-spacing: 0.1px;
}
body .hostiko-hero-btn-primary {
    background: var(--global--color-bright-orange);
    color: #fff;
    box-shadow: 0 8px 24px rgba(255, 120, 0, 0.4);
}
body .hostiko-hero-btn-primary:hover,
body .hostiko-hero-btn-primary:focus {
    background: #fff;
    color: var(--global--color-very-dark-black-blue);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    gap: 14px;
}
body .hostiko-hero-btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body .hostiko-hero-btn-ghost:hover,
body .hostiko-hero-btn-ghost:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
    transform: translateY(-2px);
}
body .hostiko-hero-btn i {
    font-size: 13px;
    transition: transform .22s ease;
}
body .hostiko-hero-btn-primary:hover i {
    transform: translateX(3px);
}

/* Vizuális dekor — körök + nagy ikon */
body .hostiko-hero-visual {
    position: relative;
    height: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(40px) scale(.92);
    opacity: 0;
    transition: transform .9s cubic-bezier(.2,.7,.3,1.1) .25s, opacity .9s ease .25s;
}
body .hostiko-hero-slide.is-active .hostiko-hero-visual {
    transform: translateX(0) scale(1);
    opacity: 1;
}
body .hostiko-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
body .hostiko-hero-orb-1 {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), transparent 60%);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
body .hostiko-hero-orb-2 {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle at 70% 30%, rgba(255, 120, 0, 0.18), transparent 60%);
    border: 1px solid rgba(255, 120, 0, 0.28);
    transform: translate(60px, 50px);
}
body .hostiko-hero-icon {
    position: relative;
    z-index: 1;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 88px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
}

/* Nyíl gombok */
body .hostiko-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
body .hostiko-hero-arrow:hover,
body .hostiko-hero-arrow:focus-visible {
    background: var(--global--color-bright-orange);
    border-color: var(--global--color-bright-orange);
    outline: none;
}
body .hostiko-hero-prev { left: 24px; }
body .hostiko-hero-next { right: 24px; }
body .hostiko-hero-prev:hover { transform: translateY(-50%) translateX(-3px); }
body .hostiko-hero-next:hover { transform: translateY(-50%) translateX(3px); }

/* Pöttyök */
body .hostiko-hero-dots {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 10px;
}
body .hostiko-hero-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, width .25s ease;
}
body .hostiko-hero-dot:hover,
body .hostiko-hero-dot:focus-visible {
    background: rgba(255, 255, 255, 0.65);
    outline: none;
}
body .hostiko-hero-dot.is-active {
    background: var(--global--color-bright-orange);
    width: 28px;
    border-radius: 99px;
}

/* Progress bar (autoplay vizuális visszajelzés) */
body .hostiko-hero-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    z-index: 5;
}
body .hostiko-hero-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--global--color-bright-orange) 0%, #ffb14a 100%);
}

/* Responsive */
@media (max-width: 991.98px) {
    body .hostiko-hero-slider {
        height: clamp(440px, 60vw, 540px);
    }
    body .hostiko-hero-slide > .container {
        grid-template-columns: 1fr;
        gap: 0;
    }
    body .hostiko-hero-visual {
        display: none;
    }
    body .hostiko-hero-content {
        max-width: 640px;
    }
    body .hostiko-hero-arrow {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    body .hostiko-hero-prev { left: 14px; }
    body .hostiko-hero-next { right: 14px; }
}

@media (max-width: 575.98px) {
    body .hostiko-hero-slider {
        height: clamp(420px, 70vw, 500px);
    }
    body .hostiko-hero-badge {
        font-size: 11px;
        padding: 5px 12px;
        margin-bottom: 14px;
    }
    body .hostiko-hero-title {
        font-size: 24px;
        margin-bottom: 12px;
    }
    body .hostiko-hero-sub {
        font-size: 13.5px;
        margin-bottom: 22px;
    }
    body .hostiko-hero-btn {
        padding: 11px 20px;
        font-size: 13.5px;
    }
    body .hostiko-hero-actions {
        gap: 10px;
    }
    body .hostiko-hero-arrow {
        display: none;
    }
    body .hostiko-hero-dots {
        bottom: 18px;
    }
}

/* Prefers-reduced-motion: animációk nélkül */
@media (prefers-reduced-motion: reduce) {
    body .hostiko-hero-slide {
        transition: opacity .2s ease;
    }
    body .hostiko-hero-content,
    body .hostiko-hero-visual {
        transition: none;
        transform: none;
        opacity: 1;
    }
    body .hostiko-hero-progress-bar {
        display: none;
    }
}