/* ==========================================================================
   HostRomeo colour theme — brings every page in line with the home banner
   and menus: deep space purple + pink -> purple -> blue accents.
   Loaded after all other stylesheets. White content sections stay white.
   To fine-tune, change the variables in :root below.
   ========================================================================== */

:root {
    --hrt-pink: var(--brand-pink, #FF2E93);
    --hrt-purple: var(--brand-purple, #8A3FFC);
    --hrt-blue: var(--brand-blue, #0EA5E9);
    --hrt-grad: linear-gradient(135deg, var(--hrt-pink) 0%, var(--hrt-purple) 50%, var(--hrt-blue) 100%);
    --hrt-grad-pp: linear-gradient(135deg, var(--hrt-pink) 0%, var(--hrt-purple) 100%);

    --hrt-accent-text: #6b2bd9;        /* purple that stays readable as small text on white (AA) */
    --hrt-accent-soft: #f3edff;        /* light lavender tint for chips / icon circles */
    --hrt-space-1: #1b0d40;            /* deep space purple (banner tone) */
    --hrt-space-2: #2a1660;
    --hrt-space-3: #0e0726;
    --hrt-space-grad: linear-gradient(135deg, #2a1660 0%, #1b0d40 55%, #0e0726 100%);
    --hrt-on-dark-accent: #ff8cc6;     /* light pink for highlights on dark backgrounds */
}

/* ---------- 1. Accent text: links, prices, kickers ---------- */
.blue-text, .text-blue, .text-primary, .color-primary,
a.popover-host-features, .small-title-header-span,
.coodiv-text-11.font-weight-bold.mt-8.d-flex, .coodiv-text-11.font-weight-bold.mt-8.d-flex i,
.widget-icon.circle-sm-2 i, span.number, .num,
.elementor-heading-title[style*="6ec1e4"] {
    color: var(--hrt-accent-text) !important;
}
/* plan prices */
span.blue-text.fw-bold, .py-5.blue-text, .py-2.blue-text { color: var(--hrt-purple) !important; }

/* small coloured kicker titles above section headings */
.pre-title.text-green, .pre-title.text-red, h4.pre-title { color: var(--hrt-pink) !important; }

/* "not included" feature lines */
li.disabled[style*="red"], .full-plan-disc li.disabled, li.disabled.coodiv-text-11 { color: #d6246e !important; }

/* decorative icon colours (Bootstrap utility classes) */
.icon-box.text-primary, .icon-box.text-primary i { color: var(--hrt-purple) !important; }
.icon-box.text-success, .icon-box.text-success i,
.icon-box.text-secondary, .icon-box.text-secondary i { color: var(--hrt-accent-text) !important; }
.icon-box.text-warning, .icon-box.text-warning i,
.icon-box.text-danger, .icon-box.text-danger i { color: var(--hrt-pink) !important; }
.icon-box.text-info, .icon-box.text-info i { color: var(--hrt-blue) !important; }
.right-side-plan-slider .feather, .video-play-icon .text-green, .video-trigger .text-green,
.mb-2 > .fas.text-primary, .mb-2 > .fas.text-info, .mb-2 > .fas.text-danger { color: var(--hrt-purple) !important; }

/* ---------- 2. Badges, pills and small labels ---------- */
.badge-primary, .badge.coodiv-badge.badge-primary, span.plan-badge,
.payment-type-m, .cpanel-plan-recommend, .badge-plan.color1, .badge-plan.color2, .badge-plan.color3,
body:not(.hr-page-whatsapp-contact-form) .badge-success,
.badge-warning, .badge-info {
    background: var(--hrt-grad-pp) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.badge-plan.color2 { background: linear-gradient(135deg, var(--hrt-purple), var(--hrt-blue)) !important; }
.badge-info { background: linear-gradient(135deg, var(--hrt-purple), var(--hrt-blue)) !important; }

/* "Starts from …" strip in the server comparison rows (was green) */
p.comp-sub-title { background: var(--hrt-grad-pp) !important; color: #fff !important; }

/* ---------- 3. Buttons ---------- */
.btn-outline-primary { color: var(--hrt-accent-text) !important; border-color: var(--hrt-purple) !important; }
.btn-outline-primary:hover, .btn-outline-primary.active, .btn-outline-primary:active {
    background: var(--hrt-grad-pp) !important; color: #fff !important; border-color: transparent !important;
}
a.button[style], a.button { background-color: var(--hrt-purple); }
.bg-primary { background: var(--hrt-grad-pp) !important; }

/* ---------- 4. Icon circles & feature boxes ---------- */
.icon-circle-box.bg-success, .icon-circle-box.bg-warning, .icon-circle-box.bg-info, .icon-circle-box.bg-blue,
.media-icon.bg-success, .media-icon.bg-warning, .media-icon.bg-info, .media-icon.bg-blue, .media-icon.bg-primary,
.icon-circle-box.bg-primary, .circle-sm.bg-primary,
.first-style-widget .circle-sm.bg-blue, .first-style-widget .circle-sm.bg-warning,
.first-style-widget .circle-sm.bg-info, .first-style-widget .circle-sm.bg-success,
.features-box-icon.coodiv-bg-green-opacity-1, .features-box-icon.coodiv-bg-red-opacity-1,
.promo-icon.bg-blue-opacity-visible {
    background: var(--hrt-accent-soft) !important;
    color: var(--hrt-accent-text) !important;
}
.icon-circle-box.bg-success i, .icon-circle-box.bg-warning i, .icon-circle-box.bg-info i,
.media-icon i, .first-style-widget .circle-sm i, .features-box-icon i { color: var(--hrt-accent-text) !important; }

/* coloured feather icon tiles (help / topics boxes) */
i.feather.icon01, i.feather.icon02, i.feather.icon03, i.feather.icon04, i.feather.icon-server[style], i.feather.icon-server.bg-info {
    background: var(--hrt-accent-soft) !important; color: var(--hrt-accent-text) !important;
}
i.feather.icon01 { background: #ffe4f1 !important; color: #c8166b !important; }
i.feather.icon04 { background: #e0f2fe !important; color: #0369a1 !important; }

/* check marks & underline accents drawn with pseudo-elements */
.chacked::before, .title.mb-2::after, .block-title::after, .title.one::after, .title.two::after { background-color: var(--hrt-purple) !important; }
.block-title::after, .title.mb-2::after { background: var(--hrt-grad-pp) !important; }
.services-box-tab::after { background-color: #c9b2ff !important; }

/* ---------- 5. Server comparison bars ---------- */
.comparison-box.side-bg-1::before { background: var(--hrt-pink) !important; }
.comparison-box.side-bg-2::before { background: var(--hrt-purple) !important; }
.comparison-box.side-bg-3::before { background: var(--hrt-space-2) !important; }
.comparison-box-left-side { background: var(--hrt-purple) !important; }

/* ---------- 6. Coloured blocks -> brand gradient / deep space purple ---------- */
/* "HostRomeo has been rated as most reliable…" banner (was orange-teal) */
.banner-widget-sidebar.gradient-animated-bg {
    background: linear-gradient(-45deg, #FF2E93, #8A3FFC, #0EA5E9, #6b2bd9) !important;
    background-size: 400% 400% !important;
}

/* "Think Global, Host Local" & other dark-blue sections */
.bg-dark-blue, .our-servers-place-section, .what-we-do-section {
    background-color: var(--hrt-space-1) !important;
    background-image: var(--hrt-space-grad) !important;
}
.our-servers-place-section::before { opacity: .35; }
.aboutus_services_item { background-color: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .1); }
.aboutus_services_title { color: var(--hrt-on-dark-accent) !important; }

/* world-map location pins */
.network-country.nav-link, .badge-plan.color2 { background-color: var(--hrt-purple) !important; }
.network-country.nav-link::before { background-color: #d9c7ff !important; }
.network-country.nav-link::after, .network-country-bottom-border, .network-country-bottom-border::before,
.network-country-bottom-border::after { background-color: var(--hrt-pink) !important; }

/* video / support card */
.video-support-coodiv { background: linear-gradient(225deg, #4e1098 0, #2a1660 45%, #0e0726 100%) !important; }

/* ---------- 7. Footer ---------- */
.footer-gradient-default {
    background: linear-gradient(90deg, #22104f 0, #1b0d40 40%, #0e0726 100%) !important;
}
#footer-gradient stop:first-child { stop-color: #22104f !important; }
#footer-gradient stop:last-child { stop-color: #0e0726 !important; }

/* ---------- 8. Page-specific heroes ---------- */
/* Business Email */
.biz-email-hero { background: var(--hrt-space-grad) !important; }
[style*="linear-gradient(145deg, #0f172a"] { background: var(--hrt-space-grad) !important; }
[style*="color: #00f2fe"], [style*="color:#00f2fe"], [style*="color: #38bdf8"] { color: var(--hrt-on-dark-accent) !important; }
[style*="color: #2563eb"] { color: var(--hrt-accent-text) !important; }
[style*="#eff6ff"] { background: linear-gradient(135deg, #faf7ff 0%, var(--hrt-accent-soft) 100%) !important; }
[style*="border-color: #2563eb"], [style*="border: 2px solid #2563eb"] { border-color: var(--hrt-purple) !important; }

/* WhatsApp page: hero matches the site; WhatsApp-green stays on WhatsApp-specific pieces */
.wa-hero { background: var(--hrt-space-grad) !important; }
.wa-icon-box.icon-blue { background: linear-gradient(135deg, var(--hrt-purple), var(--hrt-blue)) !important; }

/* ---------- 9. Leftovers found in visual review ---------- */
/* red planet artwork behind the FAQ -> brand-coloured copy of the same image */
.with-planet-bg::after { background-image: url(../themes/emyui/image/header/planet-3-brand.webp) !important; }

/* footer wave (gradient defined inside the SVG) */
#footer-gradient stop { stop-color: #1b0d40 !important; }
#footer-gradient stop:first-child { stop-color: #22104f !important; }
#footer-gradient stop:last-child { stop-color: #0e0726 !important; }

/* services carousel icon circles (were cyan / teal) */
.services-box-tab i.feather { background-color: #dccbff !important; }
.services-box-tab.slick-center i.feather, .services-box-tab.slick-current i.feather { background: var(--hrt-grad-pp) !important; }

/* page-builder (Elementor) default palette: was cyan #6EC1E4 / green #61CE70 */
.elementor-kit-7 { --e-global-color-primary: #6b2bd9; --e-global-color-accent: #FF2E93; }

/* WhatsApp page feature & step icons (WhatsApp green kept on WhatsApp-specific items) */
.wa-icon-box.icon-pink { background: var(--hrt-grad-pp) !important; }
.wa-icon-box.icon-amber { background: linear-gradient(135deg, var(--hrt-pink) 0%, #ff7ac0 100%) !important; }
.step-number.step-1 { background: linear-gradient(135deg, var(--hrt-purple) 0%, var(--hrt-blue) 100%) !important; }
.step-number.step-2 { background: var(--hrt-grad-pp) !important; }

/* dark "how it works" bands (e.g. WordPress transfer steps) */
.bg-blackish-blue { background: var(--hrt-space-grad) !important; }

/* info pages (Domain, SSL, Backups, Uptime, Comparison, Migration) use their own accent variable */
html:root { --hr-blue: #6b2bd9; --hr-pale: #f6f3ff; }
.cta a.button { background: var(--hrt-grad-pp) !important; }
.num { background: var(--hrt-accent-soft) !important; color: var(--hrt-accent-text) !important; }

/* ---------- 10. Green ticks & labels (WhatsApp page keeps its WhatsApp green) ---------- */
body:not(.hr-page-whatsapp-contact-form) .text-success:not(.badge) { color: var(--hrt-accent-text) !important; }
.coodiv-text-10.mb-2 > i.feather { color: var(--hrt-purple) !important; }      /* plan card ticks */
.text-title h3 span { color: var(--hrt-pink) !important; }                      /* "Life-time" labels */
body:not(.hr-page-whatsapp-contact-form) .bg-success-opacity { background-color: var(--hrt-accent-soft) !important; }
body:not(.hr-page-whatsapp-contact-form) .text-success:not(.badge) i { color: var(--hrt-accent-text) !important; }