GNU nano 6.2                                                         /var/www/clients/client1/web1/web/client/templates/migra/css/migrahosting.overrides.css                                                                   
  GNU nano 6.2                                                         /var/www/clients/client1/web1/web/client/templates/migra/css/migrahosting.overrides.css
/* MIGRAHOSTING — minimal overrides (buttons + cards + overlay kill) */

/* Brand gradient buttons */
.btn,button,input[type="submit"],a.btn{
  background:linear-gradient(135deg,#6C3BFF 0%,#A23CFF 45%,#FF5D8F 100%)!important;
  border:none!important;color:#fff!important;font-weight:600!important;border-radius:8px!important;transition:opacity .2s}
.btn:hover,button:hover,input[type="submit"]:hover,a.btn:hover{opacity:.9;color:#fff!important}

/* Cards/tiles — your purple */
.card,.service-box,.panel,.package,.pricing-table,.order-box{
  background:#6d21b3!important;color:#fff!important;border:none!important;border-radius:12px!important;
  box-shadow:0 8px 20px rgba(0,0,0,.25)!important}
.card h1,.card h2,.card h3,.card h4,.card p,
.service-box h3,.service-box p,.order-box h3,.order-box p{color:#fff!important}

/* Buttons */
.btn,button,input[type="submit"],a.btn{
  background:linear-gradient(135deg,#6C3BFF 0%,#A23CFF 45%,#FF5D8F 100%)!important;
  border:none!important;color:#fff!important;border-radius:8px!important;font-weight:600!important;
}

/* Cards */
.card,.service-box,.panel,.package,.pricing-table,.order-box{
  background:linear-gradient(145deg,#23124A 0%,#2F1760 55%,#411B7E 100%)!important;
  color:#fff!important;border:none!important;border-radius:12px!important;
}

/* ===== MIGRAHOSTING — LIGHTER NAVY CARDS ===== */
.card, .service-box, .panel, .package, .pricing-table, .order-box {
  background: linear-gradient(
    145deg,
    #3A2A70 0%,   /* lighter navy purple */
    #4A3388 50%,  /* mid-tone purple */
    #5A3FA3 100%  /* lighter purple */
  ) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.2) !important;
}

/* ===== MIGRAHOSTING — FIXED HEADER CLEAN ===== */
/* ===== MIGRAHOSTING — LIGHTER CARD BACKGROUNDS ===== */
.card, .service-box, .panel, .package, .pricing-table, .order-box {
  background: linear-gradient(
    145deg,
    #4A3C80 0%,    /* lighter purple navy */
    #5A4AA0 50%,   /* mid-tone */
    #6C3BFF 100%   /* tie into header gradient */
  ) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.2) !important;
}
/* kill background overlays/textures */
.navbar::before, .navbar::after,
.site-header::before, .site-header::after, {
  content: none !important;
  background: none !important;
  display: none !important;
  box-shadow: none !important;
}

/* remove sticky/blur classes if theme adds them */
.navbar.is-sticky, .site-header.is-sticky, #header.is-sticky {
  backdrop-filter: none !important;
  position: fixed !important;
  top: 0 !important;
}

/* ===== MIGRAHOSTING — LIGHTER NAVY CARDS ===== */
.card, .service-box, .panel, .package, .pricing-table, .order-box {
  background: linear-gradient(
    145deg,
    #3A2A70 0%,   /* lighter navy purple */
    #4A3388 50%,  /* mid-tone purple */
    #5A3FA3 100%  /* lighter purple */
  ) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.2) !important;
}
/* ===== MIGRAHOSTING — FIXED HEADER CLEAN ===== */

/* fix header position */
 .site-header, #header {
  background:
              url("/client/templates/migra/img/header-bg.jpg") no-repeat center center !important;
  background-size: cover !important;
}

/* Force equal height cards in the products row */
.clientHomePanelsSec .row.home {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.clientHomePanelsSec .row.home > div {
  display: flex;
}

.clientHomePanelsSec .product-column {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Equal heights across the row */
.clientHomePanelsSec .row.home { display:flex; flex-wrap:wrap; align-items:stretch; }
.clientHomePanelsSec .row.home > [class*="col-"] { display:flex; }
.clientHomePanelsSec .product-column { display:flex; flex-direction:column; flex:1 1 auto; border-radius:16px; }

/* Lighter purple-navy card background (overrides theme.min) */
.clientHomePanelsSec .product-column,
.clientHomePanelsSec .service-column,
.clientHomePanelsSec .product-column .card-body {
  background: linear-gradient(145deg, #3A2A70 0%, #4A3388 50%, #5A3FA3 100%) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.2) !important;
  border-radius:16px !important;
}

/* Keep buttons branded and readable inside panels */
.clientHomePanelsSec .primary__btn {
  background: linear-gradient(135deg, #6C3BFF 0%, #A23CFF 45%, #FF5D8F 100%) !important;
  color:#fff !important; border:0 !important; font-weight:600;
  border-radius:8px !important;
}
/* Remove double nested shadow/panel on domain cards */
.clientHomePanelsSec .service-column {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Make the 3 columns and their cards stretch equally */
.clientHomePanelsSec .row.home { display:flex; flex-wrap:wrap; align-items:stretch; }
.clientHomePanelsSec .row.home > [class*="col-"] { display:flex; }

/* Card fills the column; inner body fills the card */
.clientHomePanelsSec .product-column { 
  display:flex; flex-direction:column; flex:1 1 auto; 
  min-height: 360px;              /* <- tweak this number if you want taller/shorter */
}
clientHomePanelsSec p {
  max-width: 280px; /* keeps text from stretching too wide */
  margin: 0 auto 1.25rem; /* centers nicely */
}

.clientHomePanelsSec .product-column:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: all .3s ease;
}
.clientHomePanelsSec .product-column:hover h3,
.clientHomePanelsSec .product-column:hover svg {
  color: #fff;
}
.clientHomePanelsSec .product-column svg {
  font-size: 36px;
  margin-bottom: 12px;
}
.clientHomePanelsSec .product-column svg {
  font-size: 36px;
  margin-bottom: 12px;
}
/* Lighten service shortcut cards */
.clientHomePanelsSec .product-column {
  background: linear-gradient(135deg, #6C3BFF 0%, #A23CFF 60%, #FF5D8F 100%) !important;
  border-radius: 14px;
  color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

/* Hover effect for interactivity */
.clientHomePanelsSec .product-column:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

/* Icon + text alignment and clarity */
.clientHomePanelsSec .product-column svg,
.clientHomePanelsSec .product-column i {
  font-size: 34px;
  margin-bottom: 12px;
  color: #fff;
}

.clientHomePanelsSec .product-column h3 {
  font-weight: 600;
  color: #fff;
}

/* === Lighten the quick-action tiles on the home page === */
/* Base tile */
.action-icon-btns a{
  /* lighter on-brand gradient */
  background: linear-gradient(135deg, #4F3BA0 0%, #6C3BFF 45%, #A23CFF 80%) !important;
  border: 0 !important;
  border-radius: 16px !important;
  color: #fff !important;

  /* size/spacing/centering */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  min-height: 200px;               /* adjust to taste */
  padding: 28px 20px !important;
  text-align: center;

  /* subtle elevation */
  box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* Icon & label */
.action-icon-btns a i,
.action-icon-btns a svg{
  color: #fff !important;
  font-size: 38px !important;      /* keep icon size consistent */
  margin-bottom: 12px !important;
  opacity: 0.95;
}
.action-icon-btns a .card-title,
.action-icon-btns a h3,
.action-icon-btns a span{
  color:#fff !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
}

/* Hover */
.action-icon-btns a:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0,0,0,.28) !important;
  filter: brightness(1.03);
}

/* Remove any dark overlays the theme might add */
.action-icon-btns a::before,
.action-icon-btns a::after{
  content: none !important;
  display: none !important;
  background: none !important;
}
/* Uniform solid background for quick action tiles */
.action-icon-btns a {
  background: #6C3BFF !important;   /* brand purple */
  color: #fff !important;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Hover effect */
.action-icon-btns a:hover {
  background: #834dff !important;   /* slightly lighter/darker shade for feedback */
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* Make icons + text centered */
.action-icon-btns a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  min-height: 150px;
}
:root {
  /* Colors */
  --mh-purple:   #6C3BFF;   /* primary brand */
  --mh-purple-2: #7B4DFF;   /* lighter hover/alt */
  --mh-accent:   #A23CFF;   /* secondary accent */
  --mh-pink:     #FF5D8F;   /* CTA edge */
  --mh-bg:       #ffffff;   /* page background */
  --mh-text:     #0E1025;   /* headings/body */
  --mh-muted:    #6B7280;   /* muted copy */

  /* Gradients */
  --mh-grad-cta: linear-gradient(135deg, var(--mh-purple) 0%, var(--mh-accent) 45%, var(--mh-pink) 100%);

  /* Radii / Shadows / Motion */
  --mh-radius:   16px;
  --mh-btn-radius: 10px;
  --mh-shadow-1: 0 4px 12px rgba(0,0,0,.15);
  --mh-shadow-2: 0 10px 24px rgba(0,0,0,.18);
  --mh-shadow-3: 0 14px 32px rgba(0,0,0,.28);
  --mh-ease:     cubic-bezier(.2,.65,.2,1);
}
body { color: var(--mh-text); background: var(--mh-bg); }
h1,h2,h3 { letter-spacing:.2px; }
section, .clientHomePanelsSec { margin-block: 40px; }
.navbar, .site-header, #header{
  position: sticky; top:0; z-index:2000;
  background: var(--mh-grad-cta) !important;
  box-shadow: var(--mh-shadow-1);
}
.primary__btn, .btn-primary, a.btn.primary__btn {
  background: var(--mh-grad-cta) !important;
  color:#fff !important;
  border:0 !important;
  border-radius: var(--mh-btn-radius) !important;
  padding:.7rem 1.1rem;
  box-shadow: var(--mh-shadow-1);
  transition: transform .18s var(--mh-ease), box-shadow .18s var(--mh-ease), filter .18s;
}
.primary__btn:hover, .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--mh-shadow-2);
  filter: brightness(1.02);
}
.primary__btn:focus-visible { outline: 3px solid #E9D5FF; outline-offset: 2px; }
/* Container becomes flex (or grid if you prefer 5-up) */
.action-icon-btns{ display:flex; flex-wrap:wrap; gap:24px; justify-content:center; }

.action-icon-btns > *{ flex:0 1 220px; max-width:240px; }

/* Tile itself */
.action-icon-btns a{
  background: var(--mh-purple) !important;
  color:#fff !important;
  border-radius: var(--mh-radius);
  min-height:150px;
  padding:20px;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  box-shadow: var(--mh-shadow-2);
  transition: transform .2s var(--mh-ease), box-shadow .2s var(--mh-ease), filter .2s;
}
.action-icon-btns a:hover{
  background: var(--mh-purple-2) !important;
  transform: translateY(-4px);
  box-shadow: var(--mh-shadow-3);
}
.action-icon-btns a i, .action-icon-btns a svg{ font-size:34px; margin-bottom:10px; color:#fff; }
/* Text trims for nice bounds */
.clientHomePanelsSec .card-title { margin-bottom:.5rem; }
.clientHomePanelsSec p { max-width: 320px; margin: 0 auto 1.1rem; color: var(--mh-muted); }
/* If the wrapper has a class; otherwise the rules below still hit the anchors */
.your-account-panels{ display:flex; flex-wrap:wrap; gap:24px; justify-content:center; }

.your-account-panels a{
  background: var(--mh-purple) !important;
  color:#fff !important;
  border-radius: var(--mh-radius);
  min-height:150px;
  padding:20px;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  box-shadow: var(--mh-shadow-2);
  transition: transform .2s var(--mh-ease), box-shadow .2s var(--mh-ease);
}
.your-account-panels a:hover{ background: var(--mh-purple-2) !important; transform: translateY(-4px); box-shadow: var(--mh-shadow-3); }
.your-account-panels a i, .your-account-panels a svg{ font-size:34px; margin-bottom:10px; color:#fff; }
.card, .panel, .product-column, .service-column{
  border:0 !important;
  border-radius: var(--mh-radius) !important;
  box-shadow: var(--mh-shadow-1);
}
.form-control{
  border-radius: 10px;
  border:1px solid #E6E6F0;
  box-shadow:none !important;
}
.form-control:focus{
  border-color:#C8B6FF;
  box-shadow:0 0 0 3px rgba(124,77,255,.15) !important;
}
@media (max-width: 991.98px){
  .action-icon-btns > *, .your-account-panels > *{ flex:0 1 45%; max-width:320px; }
}
@media (max-width: 575.98px){
  .action-icon-btns > *, .your-account-panels > *{ flex:0 1 100%; max-width:100%; }
}

/* ==== HERO TUNING (height ↓, content ↑, text size/line-height fix) ==== */

/* Catch common hero wrappers used by Migra theme */
.hero, .home-hero, .hero-banner, .rts-hero, section[id*="hero"], section[class*="hero"]{
  /* reduce overall height and vertical padding */
  min-height: 560px !important;     /* was quite tall; tweak 520–600 to taste */
  padding-top: 48px !important;     /* bring content up */
  padding-bottom: 48px !important;  /* trim space below */
  display: flex;
  align-items: center;               /* keep vertical centering */
}

/* If the theme uses a grid/row inside hero, ensure the content column starts higher */
.hero .container, .home-hero .container, .hero-banner .container, .rts-hero .container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Headline sizing/line-height (smaller & tighter but still bold) */
.hero h1, .home-hero h1, .hero-banner h1, .rts-hero h1,
.hero .display-1, .hero .display-2{
  font-size: clamp(36px, 6.0vw, 64px) !important; /* down from super large */
  line-height: 1.06 !important;
  margin-bottom: 14px !important;
}

/* Secondary line (if split into two lines) */
.hero h2, .home-hero h2, .hero-banner h2, .rts-hero h2{
  font-size: clamp(28px, 4.5vw, 44px) !important;
  line-height: 1.08 !important;
  margin-bottom: 12px !important;
}

/* Body copy under headline */
.hero p, .home-hero p, .hero-banner p, .rts-hero p{
  font-size: 16px !important;
  line-height: 1.55 !important;
  margin-bottom: 16px !important;
}

/* Promo pill at top (keep on one line & compact) */
.hero .promo, .home-hero .promo, .hero-banner .promo, .rts-hero__top-badge,
.hero .badge, .hero-banner .badge{
  white-space: nowrap !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
}

/* Buttons spacing */
.hero .btn, .home-hero .btn, .hero-banner .btn, .rts-hero .btn{
  margin-right: 10px !important;
  margin-bottom: 10px !important;
}

/* Illustration: scale down a bit and nudge so it doesn't push height */
.hero img, .hero .hero-img, .home-hero img, .hero-banner img, .rts-hero img,
.hero svg,  .hero .hero-graphic{
  max-width: 86% !important;         /* slightly smaller */
  max-height: 520px !important;      /* cap height so banner can shrink */
  object-fit: contain !important;
  transform: translateY(6px);        /* optional gentle nudge */
}

/* On smaller screens: tighten a bit more */
@media (max-width: 991.98px){
  .hero, .home-hero, .hero-banner, .rts-hero{ min-height: 520px !important; }
  .hero h1, .home-hero h1, .hero-banner h1, .rts-hero h1{
    font-size: clamp(32px, 7vw, 52px) !important;
  }
  .hero img, .home-hero img, .hero-banner img, .rts-hero img{
    max-height: 420px !important;
  }
}
@media (max-width: 575.98px){
  .hero, .home-hero, .hero-banner, .rts-hero{ min-height: 480px !important; }
  .hero h1, .home-hero h1, .hero-banner h1, .rts-hero h1{
    font-size: clamp(28px, 8vw, 44px) !important;
  }
}

/* ============= NAVBAR — CALM MODE ============= */

/* 0) Optional: hide the skinny top support bar */
.header-top, .topbar, .navbar-top, .support-bar { display:none !important; }

/* 1) Make header a single, subtle strip (solid or *very* soft gradient) */
.navbar, .site-header, #header {
  background: #6C3BFF !important;                 /* try solid first */
  /* background: linear-gradient(90deg,#6C3BFF 0%, #A23CFF 70%) !important; */ /* alt */
  box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
  border-bottom: 0 !important;
}

/* 2) Remove extra inner bands/frames some themes add */
.navbar::before, .navbar::after,
.site-header::before, .site-header::after,
#header::before, #header::after,
.navbar-bg, .header-bottom, .header-shadow {
  display:none !important;
}

/* 3) Compact height (and even more compact when scrolled) */
.navbar, .site-header, #header { padding: 10px 0 !important; }
@media (min-width: 992px){
  .navbar .navbar-nav .nav-link { padding: 10px 14px !important; }
}
html.scrolled .navbar, html.scrolled .site-header, html.scrolled #header { padding: 6px 0 !important; }

/* 4) Nav links — no pills, no boxes. Just clean text. */
.navbar .nav-link, .site-header .nav-link {
  background: transparent !important;
  color: #fff !important;
  font-weight: 500;
  border-radius: 8px !important;
  transition: color .2s ease, background .2s ease, opacity .2s ease;
}
/* active/current page link slim underline */
.navbar .nav-link.active, .navbar .nav-link[aria-current="page"],
.site-header .nav-link.active {
  background: transparent !important;
  position: relative;
}
.navbar .nav-link.active::after, .site-header .nav-link.active::after {
  content:"";
  position:absolute; left:10px; right:10px; bottom:-6px;
  height:2px; background: rgba(255,255,255,.9);
  border-radius:2px;
}
/* subtle hover */
.navbar .nav-link:hover { background: rgba(255,255,255,.08) !important; }

/* 5) Dropdowns — flat, minimal, readable */
.navbar .dropdown-menu, .site-header .dropdown-menu {
  background:#fff !important;
  color:#0e1025 !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.12) !important;
  overflow:hidden;
}
.navbar .dropdown-item {
  padding: .55rem .9rem !important;
  color:#0e1025 !important;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background: #F3ECFF !important;           /* soft brand tint */
  color:#6C3BFF !important;
}

/* 6) Brand/logo spacing */
.navbar-brand { padding: 0 !important; margin-right: 18px !important; }
.navbar-brand img, .navbar-brand svg { max-height: 36px; }

/* 7) Cart & account — tone it down, make it inline */
#Primary_Navbar-Cart, .navbar .cart, .navbar .cart-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
#Primary_Navbar-Cart .nav-link,
.navbar .cart .nav-link {
  display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.1) !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
}
#Primary_Navbar-Cart .badge, .navbar .cart .badge {
  background:#fff !important; color:#6C3BFF !important;
  font-weight:700; border-radius: 999px !important;
}

/* 8) Remove any deep-pink button/pill under the active menu item */
.navbar .nav-item .nav-link.active,
.navbar .nav-item .nav-link.show {
  background: transparent !important;
}

/* 9) Mobile menu — flat background, wider touch area */
.navbar .navbar-toggler { border:0 !important; }
.navbar .navbar-toggler:focus { outline: 2px solid #E9D5FF; outline-offset: 2px; }
.navbar .navbar-collapse { background: #6C3BFF !important; padding: 8px 0; }

.hero-subline {
  max-width: 640px;          /* keep line length readable */
  margin-top: 1rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
}
.hero-subline strong {
  color: #fff;
  font-weight: 600;
}

/* Hero Title Adjustments */
.hero-title h1, .hero-title {
  font-size: 2.5rem !important;   /* smaller text */
  line-height: 1.2 !important;
  margin-bottom: 1rem;
}
.hero-subline {
  max-width: 600px;
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,.9);
  white-space: normal;      /* allow wrapping properly */
  word-break: normal;       /* don’t break words oddly */
}
.mh-hero { min-height: 560px !important; padding: 48px 0 !important; display:flex; align-items:center; }
.mh-hero__title { font-size: clamp(34px, 5vw, 56px) !important; line-height:1.15 !important; margin-bottom: 16px !important; }
.mh-hero__sub   { max-width:640px; font-size:1.05rem; line-height:1.6; color:rgba(255,255,255,.92); }
.mh-hero__badge { margin-top:22px !important; }
/* Footer logo: cap the size and keep it in flow */
footer :is(.footer-logo, .footer-brand, .logo, .brand) {
  max-width: 220px !important;   /* pick your size */
  margin-bottom: 16px !important;
  position: relative !important;
  transform: none !important;    /* stop any large transforms */
}

footer :is(.footer-logo, .footer-brand, .logo, .brand) img,
footer :is(.footer-logo, .footer-brand, .logo, .brand) svg {
  width: 100% !important;
  height: auto !important;
}

/* If the logo text is being printed as text instead of an image/SVG */
footer :is(.footer-logo, .footer-brand, .logo, .brand) * {
  font-size: inherit !important;
  line-height: 1.1 !important;
  white-space: normal !important;
}

/* ===== MIGRA — PRICING CARDS (scoped) ===== */

.mh-plans { margin-top: 40px; }
.mh-plans__title { font-size: clamp(28px, 4vw, 42px); font-weight: 800; margin-bottom: 6px; }
.mh-plans__sub { color: #6f7a8a; margin-bottom: 22px; }

.mh-plans__grid { row-gap: 24px; }

.mh-plan {
  background: linear-gradient(180deg, rgba(13,18,36,0.88) 0%, rgba(13,18,36,0.72) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 22px 18px;
  color: #fff;
  box-shadow: 0 10px 26px rgba(6,10,25,0.25);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.mh-plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(6,10,25,0.35);
}
.mh-plan--popular { outline: 2px solid rgba(163, 60, 255, .45); }

.mh-plan__badge {
  display: inline-block;
  font-size: 12px; letter-spacing: .4px; text-transform: uppercase;
  background: linear-gradient(135deg, #6C3BFF, #FF5D8F);
  color: #fff; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px;
}

.mh-plan__name { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.mh-plan__price { margin: 6px 0 2px; }
.mh-plan__price span { font-size: 34px; font-weight: 800; }
.mh-plan__price small { opacity: .85; margin-left: 2px; }
.mh-plan__note { color: rgba(255,255,255,.85); font-size: 14px; }

.mh-plan__features {
  list-style: none; padding: 0; margin: 14px 0 18px;
}
.mh-plan__features li {
  position: relative; padding-left: 26px; margin: 8px 0; line-height: 1.35;
}
.mh-plan__features li::before {
  content: "✓"; position: absolute; left: 0; top: 0; 
  color: #8cf2b6; font-weight: 700;
}

.mh-plan__btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
}
.mh-plan__fine {
  margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.75);
  text-align: center;
}

/* spacing consistency in Bootstrap rows */
@media (min-width: 992px) {
  .mh-plans__grid .col-lg-3 { padding-left: 12px; padding-right: 12px; }
}

/* ===== MIGRAHOSTING — STANDARD_CART PRODUCT GRID POLISH ===== */

/* Grid: 2-up desktop, 1-up on mobile */
#order-standard_cart .products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

@media (max-width: 900px) {
  #order-standard_cart .products {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Card base */
#order-standard_cart .products .product {
  background: linear-gradient(180deg, #0E1222 0%, #0B0F1C 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
  padding: 26px 28px !important;

  display: flex;
  flex-direction: column;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

#order-standard_cart .products .product:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,0.10);
}

/* Headings & text */
#order-standard_cart .products .product .header h3,
#order-standard_cart .products .product .header .price {
  color: #ffffff !important;
}

#order-standard_cart .products .product .header h3 {
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 8px;
}

#order-standard_cart .products .product .header .price {
  font-size: 28px;
  font-weight: 800;
  color: #ffd76b !important; /* readable highlight */
}

/* Feature list */
#order-standard_cart .products .product .content,
#order-standard_cart .products .product .content ul,
#order-standard_cart .products .product .content li {
  color: rgba(255,255,255,.86) !important;
}

#order-standard_cart .products .product .content ul {
  margin: 12px 0 0 0;
}

/* Space out footer CTA at the bottom */
#order-standard_cart .products .product .footer {
  margin-top: auto;           /* pushes buttons down so all cards equal height */
  padding-top: 16px;
}

/* Gradient primary buttons (Order Now) */
#order-standard_cart .products .product .footer .btn,
#order-standard_cart .products .product .footer .btn.btn-success,
#order-standard_cart .products .product .footer .btn.btn-primary {
  background: linear-gradient(90deg, #6C3BFF 0%, #FF5D8F 100%) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease;
}

#order-standard_cart .products .product .footer .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(117, 86, 255, .32);
}

/* Make small setup-fee label less loud */
#order-standard_cart .products .product .header .price + .price-label,
#order-standard_cart .products .product .header .price + small {
  color: rgba(255,255,255,.65) !important;
}

/* Optional: smaller card title in the header if it feels too big */
#order-standard_cart .products .product .header h3 {
  font-size: 18px;
}

/* Optional: tighten the section title and subline */
#order-standard_cart h1,
#order-standard_cart h2 {
  margin-bottom: 10px;
}
#order-standard_cart .domain-pricing or .product-selector { /* keep default unless needed */ }
/* ===== MIGRAHOSTING — PRODUCT CARDS POLISH V2 ===== */

/* Card base */
#order-standard_cart .products .product {
  background: linear-gradient(180deg, #15192b 0%, #0f1322 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  padding: 28px 26px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}

#order-standard_cart .products .product:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(0,0,0,.4);
}

/* Headings (plan name) */
#order-standard_cart .products .product .header h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 10px !important;
}

/* Price */
#order-standard_cart .products .product .header .price {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #FFD76B !important;
  margin-bottom: 5px;
}

#order-standard_cart .products .product .header .price small,
#order-standard_cart .products .product .header .price-label {
  font-size: 14px !important;
  color: rgba(255,255,255,0.6) !important;
}

/* Features list */
#order-standard_cart .products .product .content {
  flex-grow: 1;
  margin: 15px 0;
  font-size: 15px;
  color: rgba(255,255,255,0.85) !important;
}

#order-standard_cart .products .product .content ul {
  margin: 0;
  padding-left: 18px;
}
#order-standard_cart .products .product .content li {
  margin: 6px 0;
}

/* Footer (Order button pinned bottom) */
#order-standard_cart .products .product .footer {
  margin-top: auto;
  text-align: center;
}

/* Buttons */
#order-standard_cart .products .product .footer .btn {
  background: linear-gradient(90deg,#6C3BFF 0%,#FF5D8F 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  transition: transform .2s ease, box-shadow .2s ease;
}

#order-standard_cart .products .product .footer .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(108,59,255,.35);
}

/* Setup fee label (make subtle) */
#order-standard_cart .products .product .footer small,
#order-standard_cart .products .product .footer .price-label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.55) !important;
}