/* ============================================================
   Hostamir client area theme
   Loaded automatically by twenty-one via {assetExists file="custom.css"}.
   Brand tokens are identical to the marketing site (hostamir.com).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --hm-navy: #1E3A8A;
  --hm-navy-deep: #162C6B;
  --hm-sky: #38BDF8;
  --hm-sky-soft: #DFF4FD;
  --hm-ink: #0F1A2A;
  --hm-mist: #F5F7FA;
  --hm-line: #E3E8EF;
  --hm-muted: #5B6B7F;
  --hm-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hm-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hm-radius: 14px;
  --hm-radius-sm: 9px;
}

/* ---------- typography ---------- */
body, .btn, input, select, textarea, .form-control {
  font-family: var(--hm-body);
}
body { color: var(--hm-ink); background: #fff; }
h1, h2, h3, h4, h5,
.header-lined h1, .panel-title, .card-title {
  font-family: var(--hm-display);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--hm-ink);
}

/* ---------- links ---------- */
a { color: var(--hm-navy); }
a:hover, a:focus { color: var(--hm-navy-deep); }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--hm-display);
  font-weight: 600;
  border-radius: var(--hm-radius-sm);
  border-width: 1.5px;
}
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--hm-navy);
  border-color: var(--hm-navy);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--hm-navy-deep);
  border-color: var(--hm-navy-deep);
}
.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 3px var(--hm-sky-soft);
}
.btn-outline-primary { color: var(--hm-navy); border-color: var(--hm-navy); }
.btn-outline-primary:hover { background-color: var(--hm-navy); border-color: var(--hm-navy); }
/* the green "Transfer" / success buttons become the sky accent */
.btn-success,
.btn-success:not(:disabled):not(.disabled) {
  background-color: var(--hm-sky);
  border-color: var(--hm-sky);
  color: var(--hm-ink);
}
.btn-success:hover, .btn-success:focus { background-color: #5CCBFA; border-color: #5CCBFA; color: var(--hm-ink); }

/* ---------- header / navbar ---------- */
.navbar { font-family: var(--hm-display); }
#header, .navbar-brand img.logo-img { }
.logo-img { max-height: 40px; width: auto; }
.navbar-nav .nav-link { font-weight: 600; color: var(--hm-muted); }
.navbar-nav .nav-link:hover,
.navbar-nav .active > .nav-link { color: var(--hm-ink); }
.navbar-light .navbar-nav .nav-link { color: var(--hm-muted); }
.navbar-light .navbar-nav .nav-link:hover { color: var(--hm-ink); }

/* ---------- the domain-search hero on the portal home ---------- */
#main-body > .container > .row > .col-lg-12 > h1,
.domain-checker-container,
#searchDomainBtn { }
.domain-checker-container {
  background: var(--hm-navy);
  border-radius: var(--hm-radius);
  color: #fff;
}
.domain-checker-container h1,
.domain-checker-container h2 { color: #fff; }

/* ---------- cards / panels ---------- */
.card, .panel {
  border: 1.5px solid var(--hm-line);
  border-radius: var(--hm-radius);
  box-shadow: none;
}
.card-header, .panel-heading {
  background: var(--hm-mist);
  border-bottom: 1px solid var(--hm-line);
  font-family: var(--hm-display);
  font-weight: 600;
}
.panel-mc > .panel-heading { background: var(--hm-navy); border-color: var(--hm-navy); }

/* ---------- forms ---------- */
.form-control {
  border: 1.5px solid var(--hm-line);
  border-radius: var(--hm-radius-sm);
  color: var(--hm-ink);
}
.form-control:focus {
  border-color: var(--hm-navy);
  box-shadow: 0 0 0 3px var(--hm-sky-soft);
}

/* ---------- badges, alerts, misc accents ---------- */
.badge-primary, .bg-primary { background-color: var(--hm-navy) !important; }
.text-primary { color: var(--hm-navy) !important; }
.alert-info {
  background: var(--hm-sky-soft);
  border-color: var(--hm-sky);
  color: var(--hm-ink);
}

/* ---------- tables ---------- */
.table thead th {
  font-family: var(--hm-display);
  font-weight: 600;
  background: var(--hm-mist);
  border-bottom: 1px solid var(--hm-line);
  color: var(--hm-muted);
}

/* ---------- footer ---------- */
#footer, .footer {
  background: var(--hm-ink);
  color: rgba(255,255,255,.7);
}
#footer a, .footer a { color: rgba(255,255,255,.85); }
#footer a:hover, .footer a:hover { color: #fff; }

/* ---------- focus visibility (accessibility) ---------- */
a:focus-visible, .btn:focus-visible, .form-control:focus-visible {
  outline: 3px solid var(--hm-sky);
  outline-offset: 2px;
}

/* ---------- order form: Premium Comparison template ----------
   Classes from templates/orderforms/premium_comparison/products.tpl.
   IMPORTANT: scope every colour rule INSIDE .price-table. `.primary-bg-color`
   is also used by the section head-area, and styling it globally turned the
   "Pick the plan that fits" headline white-on-white. */
#order-premium_comparison .price-table {
  border: 1.5px solid var(--hm-line);
  border-radius: var(--hm-radius);
  overflow: hidden;
  box-shadow: none;
}
#order-premium_comparison .price-table .top-head,
#order-premium_comparison .price-table .top-area,
#order-premium_comparison .price-table .primary-bg-color {
  background: var(--hm-navy) !important;
  background-image: none !important;
  border-color: var(--hm-navy) !important;
  color: #fff !important;
  font-family: var(--hm-display);
  font-weight: 600;
}
#order-premium_comparison .price-table .price-area {
  background: var(--hm-navy-deep) !important;
  background-image: none !important;
  color: #fff !important;
}
#order-premium_comparison .price-table .price,
#order-premium_comparison .price-table .font-size-24 {
  font-family: var(--hm-display);
  font-weight: 600;
  color: #fff !important;
}
/* .order-button IS the <a> element, not a wrapper */
#order-premium_comparison a.order-button {
  display: inline-block;
  background: var(--hm-sky) !important;
  background-image: none !important;
  border: 1.5px solid var(--hm-sky) !important;
  color: var(--hm-ink) !important;
  font-family: var(--hm-display);
  font-weight: 600;
  border-radius: var(--hm-radius-sm);
  text-shadow: none;
}
#order-premium_comparison a.order-button:hover {
  background: #5CCBFA !important;
  border-color: #5CCBFA !important;
  color: var(--hm-ink) !important;
}
#order-premium_comparison .order-button.unavailable {
  background: var(--hm-line) !important;
  border-color: var(--hm-line) !important;
  color: var(--hm-muted) !important;
}
#order-premium_comparison .price-table .list-features,
#order-premium_comparison .price-table .includes-features {
  font-family: var(--hm-body);
  color: var(--hm-muted);
  line-height: 1.6;
}

/* ---------- Register a Domain page: hide extensions we don't sell ----------
   The "Browse extensions by category" table lists EVERY row of Domain
   Pricing, printing N/A / N/A / N/A for the ones with no price. That covers
   the stock TLDs we never priced plus every .bd extension the
   hostamir_bd_domains hook learns (those exist only so customers can bring
   an existing domain). A priced cell is "৳x<br><small>1 Year</small>"; an
   N/A cell is just "<small>N/A</small>" — so a row with no <br> anywhere
   has no price in any column. Scoped to the standard_cart order form.
   !important because the category-filter JS sets style="display:block" inline. */
#order-standard_cart .tld-row:not(:has(br)) { display: none !important; }
/* the category pills count the hidden rows too ("Other (6)" → empty table);
   with five sellable TLDs the filter adds nothing, so hide it */
#order-standard_cart .tld-filters { display: none !important; }

/* ---------- client-area menu alignment ----------
   theme.min.css: header.header .main-navbar-wrapper .navbar-collapse
   { padding: .5rem 1rem } — the 1rem is what pushes "Home" and "Hello,
   Saiful!" in from the logo / content edge. Same selector (so it wins on
   specificity), horizontal padding removed. Scoped to the client-area main
   menu only; the logo row and mobile collapse are untouched. */
header.header .main-navbar-wrapper .navbar-collapse { padding: .5rem 0; }

/* ---------- product details page: Control Panel Access form ----------
   Scoped to .module-client-area (the control-panel-login block rendered only
   on clientareaproductdetails.tpl). Its form.form-inline is display:flex in
   theme.min.css with only hidden inputs + one button inside, so the button
   hugs the left edge with no vertical spacing. Keep flex (safer than
   display:block) and centre with justify-content; 10px above and below. */
.module-client-area .panel-body form.form-inline {
  justify-content: center;
  padding: 10px 0;
}

/* ---------- product details page: reading order ----------
   Customers come here to log in to their hosting, so: Control Panel Access,
   then Hosting Information, then the product card. Structure in
   clientareaproductdetails.tpl:
     #tabOverview > .card (product tile)             ...sibling A
     #tabOverview > .nav-tabs + .tab-content         ...sibling B
       #domain pane > rows, Visit Website, .module-client-area (Control Panel)
   A and B are siblings -> flex + order swaps them. The Control Panel block
   is INSIDE B's pane, so it is moved to the top of that pane (CSS can't lift
   a child above its parent).
   Scoped to .hm-product-overview (added in our clientareaproductdetails.tpl)
   AND .active: the domain page has a #tabOverview too, and a display rule
   without .active keeps a pane visible after another tab is chosen (the big
   blank space on domain pages, fixed 2026-11-06). */
.hm-product-overview.active { display: flex; flex-direction: column; }
.hm-product-overview > .card { order: 30; }
.hm-product-overview > .nav-tabs { order: 10; }
.hm-product-overview > .responsive-tabs-sm-connector { order: 11; }
.hm-product-overview > .tab-content { order: 12; margin-bottom: 24px; }
.hm-product-overview > .row, .hm-product-overview > .card ~ .card { order: 40; }

/* Browsers that cached the old custom.css (stock head.tpl links it with a
   10-year Cache-Control and no ?v=, SRV-020-era note above) still have the old
   "#tabOverview { display:flex }". Beat it explicitly (id + class > id). */
#tabOverview:not(.active) { display: none; }
#tabOverview.active:not(.hm-product-overview) { display: block; }
#tabOverview #domain:not(.active) { display: none; }

/* inside the Hosting Information pane: Control Panel Access first */
.hm-product-overview #domain.active { display: flex; flex-direction: column; }
.hm-product-overview #domain > * { order: 20; }
.hm-product-overview #domain > .module-client-area { order: 10; margin-bottom: 16px; }
/* flex on #domain collapses the <br> before Visit Website; restore the gap */
.hm-product-overview #domain > p { margin-top: 16px; }

/* ---------- product details page: billing card ----------
   Stock layout is a centred stack of <h4> labels with bare text values.
   Make it a two-column label/value list (bare text runs become grid items). */
.hm-product-overview .product-details .col-md-6.text-center {
  display: grid; grid-template-columns: max-content 1fr; column-gap: 24px; row-gap: 10px; align-items: baseline;
  align-content: start; text-align: left !important; padding-top: 6px;   /* .text-center is !important in Bootstrap */
}
.hm-product-overview .product-details .col-md-6.text-center h4 {
  margin: 0; font-family: var(--hm-body); font-size: 14px; font-weight: 600; color: var(--hm-muted);
}
.hm-product-overview .product-details .product-status .product-icon { padding: 22px 0 14px; }
.hm-product-overview .product-details .product-status .product-icon .fa-stack { font-size: 28px; }   /* theme: 60px x fa-lg */
.hm-product-overview .product-details .product-status .product-icon h3 { font-size: 22px; margin: 10px 0 2px; }
.hm-product-overview .product-details .product-status .product-icon h4 { font-size: 15px; color: var(--hm-muted); }

/* ---------- VPS service page (hostamir_vps module, SRV-072/075) ---------- */
.module-client-area:has(.hm-vps) { text-align: left; }
.hm-vps { text-align: left; }
.hm-vps-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.hm-vps-title { font-family: var(--hm-display); font-size: 20px; font-weight: 600; color: var(--hm-ink); line-height: 1.2; word-break: break-all; }
.hm-vps-sub { color: var(--hm-muted); font-size: 14px; margin-top: 2px; }
.hm-vps-state { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.hm-vps-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hm-vps-state-on { background: #E6F6EC; color: #15803D; }
.hm-vps-state-off { background: var(--hm-mist); color: var(--hm-muted); }
.hm-vps-state-busy { background: var(--hm-sky-soft); color: var(--hm-navy); }
.hm-vps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 767px) { .hm-vps-grid { grid-template-columns: 1fr; } }
.hm-vps-panel { border: 1px solid var(--hm-line); border-radius: var(--hm-radius-sm); padding: 14px 16px; background: #fff; }
.hm-vps-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hm-muted); margin-bottom: 10px; }
.hm-vps-facts { display: grid; grid-template-columns: max-content 1fr; column-gap: 16px; row-gap: 8px; margin: 0; font-size: 14px; }
.hm-vps-facts dt { font-weight: 500; color: var(--hm-muted); }
.hm-vps-facts dd { margin: 0; color: var(--hm-ink); min-width: 0; word-break: break-word; }
.hm-vps-facts code { color: var(--hm-ink); background: var(--hm-mist); border-radius: 6px; padding: 2px 6px; font-size: 13px; }
.hm-copy { border: 1px solid var(--hm-line); background: #fff; color: var(--hm-navy); border-radius: 6px; font-size: 12px; padding: 1px 8px; margin-left: 4px; cursor: pointer; }
.hm-copy:hover { background: var(--hm-mist); }
.hm-meter { margin-bottom: 12px; font-size: 14px; }
.hm-meter-top { display: flex; justify-content: space-between; color: var(--hm-muted); margin-bottom: 5px; }
.hm-meter-top span:first-child { font-weight: 500; }
.hm-meter-top span:last-child { color: var(--hm-ink); }
.hm-meter-bar { height: 8px; background: var(--hm-mist); border-radius: 999px; overflow: hidden; }
.hm-meter-bar span { display: block; height: 100%; min-width: 3px; background: var(--hm-navy); border-radius: 999px; }
.hm-vps-power { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-vps-power form { margin: 0; }
.hm-vps-sections { margin-top: 20px; border: 1px solid var(--hm-line); border-radius: var(--hm-radius-sm); overflow: hidden; }
.hm-section + .hm-section { border-top: 1px solid var(--hm-line); }
.hm-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none; font-weight: 600; color: var(--hm-ink); }
.hm-section > summary::-webkit-details-marker { display: none; }
.hm-section > summary::after { content: ""; width: 8px; height: 8px; margin: 0 2px 4px 4px; border-right: 2px solid var(--hm-muted); border-bottom: 2px solid var(--hm-muted); transform: rotate(45deg); transition: transform .15s; flex: none; }
.hm-section[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
.hm-section > summary span { flex: 1; }
.hm-section > summary small { color: var(--hm-muted); font-weight: 400; font-size: 13px; }
.hm-section > summary:hover { background: var(--hm-mist); }
.hm-section-body { padding: 4px 16px 16px; }
.hm-section-danger > summary { color: #B91C1C; }
.hm-section-danger[open] { background: #FFFBFB; }
.hm-hint { color: var(--hm-muted); font-size: 13px; margin: 0 0 12px; }
.hm-optional { color: var(--hm-muted); font-weight: 400; font-size: 12px; margin-left: 4px; }


/* ---------- SRV-077: client area and order form tidy-up ---------- */
/* Short pages left a grey strip under the footer: let the main area grow instead. */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > #main-body { flex: 1 0 auto; }
body > #footer, body > footer.footer { flex-shrink: 0; }

/* Footer links and contact line */
.hm-footer-links .nav-link { padding: .25rem .75rem; }
.hm-footer-contact { text-align: center; color: rgba(255,255,255,.65); font-size: 14px; }
@media (min-width: 992px) { .hm-footer-contact { text-align: left; padding-left: .75rem; } }
.hm-footer-contact a { color: #fff; }

/* VPS configure step: NS1/NS2 prefixes mean nothing for our servers (they are never used). */
#order-standard_cart .row:has(> .col-sm-6 > .form-group > #inputNs1prefix) { display: none; }   /* direct children only: a bare :has() matched the page layout rows and hid the whole page */

/* Cart and checkout in brand colours (stock: teal/grey headers, green button). "body" prefix: the
   order form's own CSS loads after custom.css, so equal specificity loses. */
body #order-standard_cart .view-cart-items-header { background-color: var(--hm-navy); }
body #order-standard_cart .view-cart-items { border-bottom-color: var(--hm-navy); }
body #order-standard_cart .order-summary { background-color: var(--hm-navy); border-bottom-color: var(--hm-navy); border-radius: var(--hm-radius-sm); overflow: hidden; }
body #order-standard_cart .order-summary h2 { background-color: transparent; }
body #order-standard_cart .btn-checkout, body #order-standard_cart #btnCompleteOrder {
  background-color: var(--hm-navy); border-color: var(--hm-navy); color: #fff;
}
body #order-standard_cart .btn-checkout:hover, body #order-standard_cart #btnCompleteOrder:hover { background-color: var(--hm-navy-deep); border-color: var(--hm-navy-deep); }
body #order-standard_cart .btn-checkout.disabled, body #order-standard_cart .btn-checkout:disabled { background-color: #94A3B8; border-color: #94A3B8; }

/* ---------- SRV-078: portal home (homepage.tpl) ---------- */
.hm-home { padding: 8px 0 24px; }
.hm-desk {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: center;
  background: var(--hm-navy); color: #fff; border-radius: var(--hm-radius); padding: 40px 44px;
}
.hm-desk h1 { font-family: var(--hm-display); font-size: 36px; font-weight: 600; letter-spacing: -.02em; color: #fff; margin: 0 0 12px; }
.hm-desk-summary { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.86); max-width: 52ch; margin: 0 0 24px; }
.hm-desk-summary strong { color: #fff; font-weight: 700; }
.hm-desk-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hm-btn-light { background: #fff; color: var(--hm-navy); border: 1px solid #fff; font-weight: 700; }
.hm-btn-light:hover, .hm-btn-light:focus { background: var(--hm-sky-soft); color: var(--hm-navy-deep); }
.hm-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); font-weight: 600; }
.hm-btn-ghost:hover, .hm-btn-ghost:focus { background: rgba(255,255,255,.1); color: #fff; }
.hm-desk .btn:focus-visible { outline: 3px solid var(--hm-sky); outline-offset: 2px; }
.hm-desk-list { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; overflow: hidden; }
.hm-desk-list-head { display: flex; justify-content: space-between; padding: 12px 16px; font-size: 14px; color: rgba(255,255,255,.75); }
.hm-desk-list-head a { color: #fff; font-weight: 600; }
.hm-desk-list ul { list-style: none; margin: 0; padding: 0; }
.hm-desk-list li a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.12); color: #fff; text-decoration: none;
}
.hm-desk-list li a:hover, .hm-desk-list li a:focus { background: rgba(255,255,255,.08); }
.hm-desk-item { display: flex; flex-direction: column; min-width: 0; }
.hm-desk-item-name { font-weight: 600; }
.hm-desk-item-domain { font-size: 13px; color: rgba(255,255,255,.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; color: rgba(255,255,255,.85); }
.hm-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #86EFAC; }
.hm-dot-suspended::before { background: #FCD34D; }
.hm-dot-pending::before { background: var(--hm-sky); }

.hm-home-section { margin-top: 40px; }
.hm-home-section > h2 { font-family: var(--hm-display); font-size: 22px; font-weight: 600; color: var(--hm-ink); margin: 0 0 14px; }
.hm-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); }
.hm-offer { padding: 26px 28px; display: flex; flex-direction: column; }
.hm-offer + .hm-offer { border-left: 1px solid var(--hm-line); }
.hm-offer h3 { font-family: var(--hm-display); font-size: 19px; font-weight: 600; color: var(--hm-ink); margin: 0 0 4px; }
.hm-offer-price { color: var(--hm-muted); margin: 0 0 12px; font-size: 15px; }
.hm-offer-price strong { color: var(--hm-ink); font-size: 20px; font-weight: 700; }
.hm-offer p { color: var(--hm-muted); font-size: 15px; line-height: 1.55; }
.hm-offer-link { margin-top: auto; font-weight: 700; color: var(--hm-navy); text-underline-offset: 3px; }
.hm-domain-form { display: flex; gap: 8px; margin: 2px 0 12px; }
.hm-domain-form .form-control { min-width: 0; flex: 1 1 auto; width: auto; }   /* width:100% from Bootstrap pushed the Search button out of the card */
.hm-domain-form .btn { flex: 0 0 auto; white-space: nowrap; padding-left: 16px; padding-right: 16px; }
.hm-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; } /* 4 items since WEB-019 */
.hm-help-item { display: flex; gap: 14px; align-items: flex-start; padding: 6px 0; color: var(--hm-muted); text-decoration: none; font-size: 15px; line-height: 1.5; }
.hm-help-item i { font-size: 24px; color: var(--hm-navy); width: 28px; flex: none; margin-top: 2px; text-align: center; }
.hm-help-item strong { display: block; color: var(--hm-ink); font-weight: 700; }
.hm-help-item:hover strong, .hm-help-item:focus strong { color: var(--hm-navy); text-decoration: underline; text-underline-offset: 3px; }
.hm-help-note { margin: 16px 0 0; color: var(--hm-muted); }
@media (max-width: 991px) {
  .hm-desk { grid-template-columns: 1fr; padding: 28px 24px; gap: 24px; }
  .hm-desk h1 { font-size: 28px; }
  .hm-offers, .hm-help { grid-template-columns: minmax(0, 1fr); }   /* plain 1fr let the domain form set a wider minimum */
  .hm-offer + .hm-offer { border-left: 0; border-top: 1px solid var(--hm-line); }
}

/* ---------- SRV-078: VPS plan table (orderforms/hostamir_cart/products.tpl) ---------- */
.hm-plans-intro h1 { font-family: var(--hm-display); font-size: 32px; font-weight: 600; letter-spacing: -.02em; color: var(--hm-ink); margin: 0 0 8px; }
.hm-plans-intro p { color: var(--hm-muted); font-size: 16px; line-height: 1.6; max-width: 64ch; margin: 0 0 22px; }
.hm-cycle { display: inline-flex; border: 1px solid var(--hm-line); border-radius: 999px; background: #fff; padding: 3px; margin-bottom: 14px; }
.hm-cycle-btn { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font-weight: 600; color: var(--hm-muted); cursor: pointer; }
.hm-cycle-btn span { font-weight: 500; font-size: 12px; color: #15803D; margin-left: 4px; }
.hm-cycle-btn.is-on { background: var(--hm-navy); color: #fff; }
.hm-cycle-btn.is-on span { color: #BBF7D0; }
.hm-cycle-btn:focus-visible { outline: 3px solid var(--hm-sky); outline-offset: 2px; }
.hm-plans[data-cycle="monthly"] .hm-when-annually, .hm-plans[data-cycle="annually"] .hm-when-monthly { display: none; }
.hm-plan-table { background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); overflow: hidden; }
.hm-plan-row {
  display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, .6fr)) minmax(0, 1.25fr) 132px;   /* minmax(0,…): every row is its own grid, so content must not size the columns */
  gap: 12px; align-items: center; padding: 16px 20px; font-size: 15px; color: var(--hm-ink);
}
.hm-plan-row + .hm-plan-row { border-top: 1px solid var(--hm-line); }
.hm-plan-head { background: var(--hm-mist); padding-top: 11px; padding-bottom: 11px; font-size: 13px; font-weight: 600; color: var(--hm-muted); }
.hm-plan-row.is-featured { background: #F4F7FE; box-shadow: inset 3px 0 0 var(--hm-navy); }
.hm-plan-name strong { display: block; font-family: var(--hm-display); font-size: 18px; font-weight: 600; }
.hm-plan-name small { display: block; color: var(--hm-muted); font-size: 13px; line-height: 1.45; margin-top: 2px; }
.hm-plan-flag { display: inline-block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--hm-navy); background: var(--hm-sky-soft); border-radius: 999px; padding: 1px 9px; margin: 3px 0 2px; }
.hm-plan-price strong { font-size: 18px; font-weight: 700; }
.hm-plan-price small { display: block; color: #15803D; font-size: 12px; font-weight: 600; }
.hm-plan-price { color: var(--hm-muted); font-size: 14px; }
.hm-plan-cta .btn { white-space: nowrap; font-weight: 700; }
.hm-plans-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; }
.hm-plans-notes h2 { font-family: var(--hm-display); font-size: 17px; font-weight: 600; color: var(--hm-ink); margin: 0 0 10px; }
.hm-plans-notes ul { list-style: none; padding: 0; margin: 0; font-size: 15px; line-height: 1.55; }
.hm-plans-notes li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.hm-list-check li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 11px; height: 6px; border-left: 2px solid var(--hm-navy); border-bottom: 2px solid var(--hm-navy); transform: rotate(-45deg); }
.hm-list-plain { color: var(--hm-muted); }
.hm-list-plain li::before { content: ""; position: absolute; left: 6px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: #94A3B8; }
.hm-plans-more { margin-top: 22px; color: var(--hm-muted); }
@media (max-width: 767px) {
  .hm-plan-head { display: none; }
  .hm-plan-row { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 18px 16px; }
  .hm-plan-name, .hm-plan-price, .hm-plan-cta { grid-column: 1 / -1; }
  .hm-plan-row [data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--hm-muted); }
  .hm-plan-cta .btn { width: 100%; }
  .hm-plans-notes { grid-template-columns: 1fr; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) { .hm-section > summary::after { transition: none; } }
.hm-desk:not(:has(.hm-desk-list)) { grid-template-columns: 1fr; }

/* ---------- SRV-079: Register a Domain (orderforms/hostamir_cart/domainregister.tpl) ----------
   Stock rules are unscoped (.domain-checker-container …) but load after this file, so everything
   here is prefixed "body .hm-domains" to win on specificity. */
body .hm-domains .domain-checker-container { background: var(--hm-navy); border-radius: var(--hm-radius); margin: 0 0 20px; }
body .hm-domains .domain-checker-bg { background-image: none; padding: 32px 0; }
body .hm-domains .domain-checker-container .input-group-box { background: #fff; border-radius: var(--hm-radius-sm); padding: 6px; }
body .hm-domains #inputDomain { border: 0; box-shadow: none; font-size: 18px; height: 50px; }
body .hm-domains #inputDomain:focus { box-shadow: none; }
body .hm-domains .domain-checker-container .input-group-box:focus-within { outline: 3px solid var(--hm-sky); outline-offset: 2px; }
body .hm-domains #btnCheckAvailability { width: auto; min-width: 120px; height: 50px; padding: 0 26px; font-weight: 700; border-radius: var(--hm-radius-sm) !important; }
body .hm-domains #DomainSearchResults .primary-domain-header { display: none !important; }   /* "Exact match": the only kind of result we have */
body #order-standard_cart.hm-domains .domain-checker-result-headline { margin: 0 0 22px; padding: 22px 20px; background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); font-size: 22px; }
body .hm-domains .domain-checker-result-headline p { margin-bottom: 8px; }
body .hm-domains .domain-checker-available { color: #15803D; }
body .hm-domains .domain-checker-unavailable, body .hm-domains .domain-checker-invalid { color: #B91C1C; }
body .hm-domains .domain-checker-result-headline .domain-price { margin: 6px 0 0; }
body .hm-domains .domain-checker-result-headline .domain-price .price { font-weight: 700; color: var(--hm-ink); margin-right: 10px; }
body .hm-domains .domain-checker-result-headline .btn-add-to-cart { font-weight: 700; padding: 9px 22px; }
.hm-domains-sub { font-family: var(--hm-display); font-size: 17px; font-weight: 600; color: var(--hm-ink); margin: 0 0 10px; }
body .hm-domains .spotlight-tlds { background: transparent; padding: 0; margin: 0 0 26px; }
body .hm-domains .spotlight-tld { height: auto; min-height: 108px; padding: 14px 8px; border: 1px solid var(--hm-line); border-radius: var(--hm-radius-sm); color: var(--hm-ink); font-family: var(--hm-display); font-size: 18px; }
body .hm-domains .spotlight-tld span { font-family: var(--hm-body, inherit); font-size: 14px; color: var(--hm-muted); }
body .hm-domains .spotlight-tld .price { color: var(--hm-ink); font-weight: 600; }
body .hm-domains .spotlight-tld .btn:not(.domain-contact-support) { background: var(--hm-navy); border-color: var(--hm-navy); border-radius: 6px; font-size: 13px; font-weight: 600; padding: 4px 10px; }
body .hm-domains .spotlight-tld .btn:not(.domain-contact-support) span { color: #fff; }
body .hm-domains .spotlight-tld .btn.invalid, body .hm-domains .spotlight-tld .btn.unavailable { margin: 6px 0 0; opacity: 1; font-weight: 600; font-size: 13px; background: var(--hm-mist); border-color: var(--hm-line); color: var(--hm-muted) !important; }
/* SRV-080: suggestions (popular low-priced endings from Dynadot) */
body .hm-domains .suggested-domains { margin: 0 0 26px; background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); overflow: hidden; }
body .hm-domains .suggested-domains .panel-heading { background: var(--hm-mist); border-bottom: 1px solid var(--hm-line); font-family: var(--hm-display); font-weight: 600; font-size: 16px; color: var(--hm-ink); padding: 12px 20px; }
body .hm-domains .suggested-domains .card-body { color: var(--hm-muted); padding: 16px 20px; }
body .hm-domains .domain-suggestion { display: flex; align-items: center; gap: 0; padding: 11px 20px; border: 0; border-top: 1px solid var(--hm-line); font-size: 16px; color: var(--hm-ink); }
body .hm-domains .domain-suggestion:first-child + .domain-suggestion { border-top: 0; }
body .hm-domains .domain-suggestion .extension { font-weight: 700; }
body .hm-domains .domain-suggestion .actions { margin-left: auto; padding-left: 12px; display: flex; align-items: center; gap: 14px; float: none; }
body .hm-domains .domain-suggestion .price { font-weight: 600; color: var(--hm-ink); }
body .hm-domains .domain-suggestion .btn-add-to-cart { background: var(--hm-navy); border-color: var(--hm-navy); color: #fff; font-weight: 600; font-size: 14px; padding: 6px 16px; border-radius: 8px; }
body .hm-domains .domain-suggestion .btn-add-to-cart:hover { background: var(--hm-navy-deep); }
body .hm-domains .domain-suggestion .promo { font-size: 11px; font-weight: 700; color: #92400E; background: #FEF3C7; border-radius: 999px; padding: 1px 8px; }
body .hm-domains .more-suggestions { background: #fff; border-top: 1px solid var(--hm-line); padding: 12px; }
body .hm-domains .more-suggestions a { font-weight: 700; color: var(--hm-navy); }
body .hm-domains .domain-suggestions-warning p { font-size: 13px; color: var(--hm-muted); margin: 10px 0 12px; }
.hm-domains-sub span { font-family: var(--hm-body); font-size: 13px; font-weight: 500; color: var(--hm-muted); margin-left: 8px; }
.hm-tld-table:not(.is-all) .hm-tld-more { display: none; }
.hm-tld-row[hidden] { display: none !important; }
.hm-tld-none span { color: var(--hm-muted); }
.hm-tld-tools { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.hm-tld-tools .btn { font-weight: 600; border: 1px solid var(--hm-line); background: #fff; color: var(--hm-navy); border-radius: var(--hm-radius-sm); padding: 8px 16px; }
.hm-tld-filter { margin: 0; width: min(320px, 100%); }
@media (max-width: 767px) {
  body .hm-domains .domain-suggestion { flex-wrap: wrap; padding: 12px 16px; }
  body .hm-domains .domain-suggestion .actions { width: 100%; justify-content: space-between; margin-left: 0; }
}
.hm-tld-prices { margin: 8px 0 0; }
.hm-tld-table { background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); overflow: hidden; }
.hm-tld-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1.2fr)); gap: 12px; align-items: center; padding: 12px 20px; font-size: 15px; color: var(--hm-ink); }
.hm-tld-row + .hm-tld-row { border-top: 1px solid var(--hm-line); }
.hm-tld-head { background: var(--hm-mist); padding-top: 10px; padding-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--hm-muted); }
.hm-tld-name { font-family: var(--hm-display); font-size: 17px; font-weight: 600; }
.hm-tld-row .hm-muted { color: var(--hm-muted); }
@media (max-width: 767px) {
  body .hm-domains .domain-checker-bg { padding: 18px 0; }
  .hm-tld-head { display: none; }
  .hm-tld-row { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 16px; }
  .hm-tld-name { grid-column: 1 / -1; }
  .hm-tld-row [data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--hm-muted); }
}

/* ---------- SRV-080: buttons and lists on narrow screens ----------
   The services, domains, invoices and tickets lists made the whole page scroll sideways on a phone
   (the DataTables table is wider than the screen). Scroll the table inside its box instead. */
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.btn.setBulkAction { white-space: normal; }
.btn-group:has(> .setBulkAction) { flex-wrap: wrap; row-gap: 6px; }   /* direct child only (see SRV-077: a bare :has() hid a whole page) */

/* ---------- SRV-081: web hosting plan cards (orderforms/hostamir_cart/products-hosting.tpl) ---------- */
.hm-host-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hm-host { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); padding: 22px 22px 20px; }
.hm-host.is-featured { border-color: var(--hm-navy); box-shadow: inset 0 3px 0 var(--hm-navy); }
.hm-host header h2 { font-family: var(--hm-display); font-size: 22px; font-weight: 600; color: var(--hm-ink); margin: 0; }
.hm-host header p { color: var(--hm-muted); font-size: 14px; margin: 4px 0 0; }
.hm-host-price { margin: 14px 0 16px; color: var(--hm-muted); font-size: 15px; }
.hm-host-price strong { color: var(--hm-ink); font-size: 30px; font-weight: 700; letter-spacing: -.01em; margin-right: 2px; }
.hm-host-price small { display: block; color: #15803D; font-size: 13px; font-weight: 600; margin-top: 2px; }
.hm-host .hm-order { width: 100%; font-weight: 700; padding: 11px 16px; }
.hm-host .hm-list-check { list-style: none; padding: 0; margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: var(--hm-ink); }
.hm-host .hm-list-check li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.hm-hosting[data-cycle="monthly"] .hm-when-annually, .hm-hosting[data-cycle="annually"] .hm-when-monthly { display: none; }
@media (max-width: 991.98px) { .hm-host-grid { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 767px) {
  .hm-host { padding: 18px 16px 16px; }
  .hm-host-price { margin: 8px 0 12px; }
  .hm-host-price strong { font-size: 26px; }
  .hm-host .hm-list-check { margin-top: 14px; font-size: 14px; }
}

/* ---------- SRV-081: phones ----------
   Order form: the "Categories" and "Actions" cards (each one dropdown, ~200 px before any plan)
   become one compact row of two labelled dropdowns. */
@media (max-width: 1199.98px) {
  body #order-standard_cart .sidebar-collapsed { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; padding: 0; }
  body #order-standard_cart .sidebar-collapsed > .panel { margin: 0; border: 0; background: transparent; box-shadow: none; }
  body #order-standard_cart .sidebar-collapsed .panel-heading { background: transparent; border: 0; padding: 0 0 4px; }
  body #order-standard_cart .sidebar-collapsed .panel-heading .panel-title { font-size: 12px; font-weight: 600; color: var(--hm-muted); }
  body #order-standard_cart .sidebar-collapsed .panel-heading i { display: none; }
  body #order-standard_cart .sidebar-collapsed .panel-body { padding: 0; }
  body #order-standard_cart .sidebar-collapsed select { height: 42px; font-size: 14px; border-radius: var(--hm-radius-sm); }
  body #order-standard_cart .sidebar-collapsed > .float-right { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
  /* Dashboard: the address card ("Your Info") filled the first screen; it stays on the Account page. */
  .card-sidebar[menuItemName="Client Details"], .panel[menuItemName="Client Details"] { display: none; }
  .hm-plans-intro h1 { font-size: 26px; }
  .hm-plans-intro p { font-size: 15px; margin-bottom: 16px; }
}
/* Dashboard tiles: one brand colour instead of blue/green/red/orange bars */
.tiles .tile .highlight { background-color: var(--hm-navy) !important; height: 3px; }
.tiles .tile i { color: #CBD5E1; }
.tiles .tile .stat { color: var(--hm-ink); font-family: var(--hm-display); font-weight: 600; }
@media (max-width: 767px) {
  .tiles .tile { padding: 14px 16px; }
  .tiles .tile .stat { font-size: 30px; margin-top: 0; }
  .tiles .tile i { font-size: 32px; top: 14px; right: 14px; }
  /* list pages: the "Show 10 entries" picker and paging sit on one line */
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_paginate { font-size: 13px; }
  .btn, .form-control { min-height: 42px; }   /* thumb-sized controls */
  .btn-sm, .btn-xs, .input-group-sm .form-control, .btn-group-sm > .btn { min-height: 0; }
}
@media (min-width: 360px) and (max-width: 767px) { .hm-host .hm-list-check { columns: 2; column-gap: 14px; } .hm-host .hm-list-check li { break-inside: avoid; } }
@media (max-width: 767px) {
  /* the main button of each order step fills the width, where the thumb is */
  body #order-standard_cart #btnCompleteProductConfig,
  body #order-standard_cart .btn-checkout,
  body #order-standard_cart #btnCompleteOrder,
  body #order-standard_cart .domain-selection-options + * .btn-primary { display: block; width: 100%; }
  body #order-standard_cart .order-summary .text-right, body #order-standard_cart .order-summary .text-center { text-align: center !important; }
  body #order-standard_cart #continueShopping { display: inline-block; font-size: 14px; padding: 10px 0; }
  body #order-standard_cart .order-summary .btn-checkout { margin-top: 8px; }
}
@media (max-width: 767px) {
  .card-header .btn-xs, .card-header .label, .panel-heading .btn-xs { padding: 6px 10px; font-size: 13px; }   /* "My Services" / "Open New Ticket" pills: thumb-sized */
}

/* ---------- SRV-082: easier order and sign-up (includes/hooks/hostamir_order_easy.php) "hm-easy" ---------- */
.hm-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 22px; counter-reset: none; }
.hm-steps li { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--hm-radius-sm); background: #fff; border: 1px solid var(--hm-line); color: var(--hm-muted); font-size: 13px; font-weight: 600; }
.hm-steps .hm-step-n { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--hm-mist); color: var(--hm-muted); font-size: 12px; }
.hm-steps .hm-step-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-steps li.is-now { border-color: var(--hm-navy); color: var(--hm-ink); box-shadow: inset 0 -3px 0 var(--hm-navy); }
.hm-steps li.is-now .hm-step-n { background: var(--hm-navy); color: #fff; }
.hm-steps li.is-done { color: var(--hm-ink); }
.hm-steps li.is-done .hm-step-n { background: #DCFCE7; color: #15803D; }
@media (max-width: 767px) {
  .hm-steps { gap: 4px; margin-bottom: 16px; }
  .hm-steps li { flex-direction: column; gap: 3px; padding: 7px 4px; font-size: 11px; text-align: center; }
  .hm-steps .hm-step-t { white-space: normal; line-height: 1.2; }
}
/* labels above fields (WHMCS only had placeholders) */
.hm-field-label { display: block; font-size: 14px; font-weight: 600; color: var(--hm-ink); margin: 0 0 5px; }
.hm-has-label { position: relative; }
.hm-has-label .field-icon { display: none !important; }
.hm-has-label.prepend-icon .field, .hm-has-label .field { padding-left: 12px !important; }
.hm-field-hint { display: block; color: var(--hm-muted); font-size: 12.5px; margin-top: 4px; }
.hm-link-btn { border: 0; background: none; padding: 4px 0; color: var(--hm-navy); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hm-link-btn:focus-visible, .hm-pw-show:focus-visible { outline: 3px solid var(--hm-sky); outline-offset: 2px; }
.hm-notes-btn { margin: 6px 0 16px; }
.hm-pw-wrap { position: relative; }
.hm-pw-show { position: absolute; right: 8px; bottom: 7px; border: 0; background: var(--hm-mist); color: var(--hm-navy); font-weight: 600; font-size: 13px; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.hm-pw-wrap .field { padding-right: 68px !important; }
.hm-one-gateway > p.small.text-muted { display: none; }
.hm-pay-note { margin: 0 0 8px; font-weight: 600; color: var(--hm-ink); }
/* checkout section headings: plain, left-aligned (stock: centred grey rule with a coloured pill) */
body #order-standard_cart .sub-heading { border-top: 0; height: auto; margin: 26px 0 12px; text-align: left; }
body #order-standard_cart .sub-heading span { position: static; display: block; padding: 0; background: transparent !important; color: var(--hm-ink); font-family: var(--hm-display); font-size: 18px; font-weight: 600; }
@media (max-width: 1199.98px) { body.hm-step-later #order-standard_cart .sidebar-collapsed { display: none; } }
@media (max-width: 575.98px) {
  /* header: logo, cart and menu on one line (they wrapped at 390 px) */
  header.header .navbar-light > .container { flex-wrap: nowrap; }
  header.header .navbar-light .navbar-brand { margin-right: 8px !important; min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .logo-img { max-height: 30px; max-width: 100%; }
  header.header .navbar-light .toolbar { flex-direction: row; flex-shrink: 0; }
  header.header .navbar-light .toolbar .nav-item { margin-left: 8px !important; }
}

/* ---------- SRV-084: hosting order domain step, "Do you already have a domain?" (hm-dstep) ---------- */
.hm-bn { display: block; font-family: 'Hind Siliguri', 'Noto Sans Bengali', 'Nirmala UI', var(--hm-body); font-weight: 500; color: var(--hm-muted); font-size: .72em; letter-spacing: 0; margin-top: 2px; }
.hm-dq h1 { font-family: var(--hm-display); font-size: 32px; font-weight: 600; letter-spacing: -.02em; color: var(--hm-ink); margin: 0 0 8px; }
.hm-dq h1 .hm-bn { font-size: 18px; margin-top: 4px; }
.hm-dq-intro { color: var(--hm-muted); font-size: 16px; margin: 0 0 22px; }
.hm-dq-intro .hm-bn { font-size: 14px; }
.hm-dq-q { font-family: var(--hm-display); font-size: 19px; font-weight: 600; color: var(--hm-ink); margin: 0 0 12px; }
.hm-dq-q .hm-bn { font-size: 15px; }
.hm-dq-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; }
.hm-dq-choice { position: relative; text-align: left; background: #fff; border: 1.5px solid var(--hm-line); border-radius: var(--hm-radius); padding: 16px 18px 16px 52px; cursor: pointer; color: var(--hm-ink); transition: border-color .15s, box-shadow .15s; }
.hm-dq-choice::before { content: ""; position: absolute; left: 18px; top: 18px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #CBD5E1; background: #fff; }
.hm-dq-choice.is-on { border-color: var(--hm-navy); box-shadow: 0 0 0 3px var(--hm-sky-soft); }
.hm-dq-choice.is-on::before { border-color: var(--hm-navy); background: radial-gradient(circle, var(--hm-navy) 45%, #fff 50%); }
.hm-dq-choice:hover { border-color: #94A3B8; }
.hm-dq-choice:focus-visible { outline: 3px solid var(--hm-sky); outline-offset: 2px; }
.hm-dq-choice strong { display: block; font-family: var(--hm-display); font-size: 17px; font-weight: 600; }
.hm-dq-choice .hm-bn { font-size: 15px; color: var(--hm-ink); margin: 1px 0 4px; }
.hm-dq-choice small { display: block; color: var(--hm-muted); font-size: 13.5px; line-height: 1.4; }
.hm-dq-have { background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); padding: 18px 20px; margin: 0 0 18px; }
.hm-dq-label { font-weight: 600; color: var(--hm-ink); margin: 0 0 8px; }
.hm-dq-label .hm-bn { display: inline; margin-left: 6px; font-size: 14px; }
.hm-dq-mine { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.hm-dq-pick { border: 1.5px solid var(--hm-navy); background: #F4F7FE; color: var(--hm-navy); font-weight: 700; border-radius: 999px; padding: 8px 16px; cursor: pointer; font-size: 15px; }
.hm-dq-pick small { font-weight: 500; color: var(--hm-muted); margin-left: 4px; }
.hm-dq-pick:hover { background: var(--hm-navy); color: #fff; }
.hm-dq-pick:hover small { color: #DBEAFE; }
.hm-dq-pick.is-busy, #hmUseOwnDomain.is-busy { opacity: .6; cursor: progress; }
.hm-dq-type { display: flex; gap: 8px; }
.hm-dq-type .form-control { flex: 1 1 auto; min-width: 0; height: 48px; font-size: 17px; }
.hm-dq-type .btn { flex: 0 0 auto; height: 48px; padding: 0 20px; font-weight: 700; white-space: nowrap; }
.hm-dq-error { color: #B91C1C; font-weight: 600; margin: 8px 0 0; }
.hm-dq-error .hm-bn { color: #B91C1C; }
.hm-dq-note { color: var(--hm-muted); font-size: 14px; margin: 14px 0 0; }
.hm-dq-note .hm-bn { font-size: 13.5px; }
/* the stock options stay for scripts.js: radio rows hidden, only the chosen search box shown */
body .hm-dstep .domain-selection-options { display: none; margin: 0 0 18px; }
body .hm-dstep .domain-selection-options.hm-open { display: block; }
body .hm-dstep .domain-selection-options .option { background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); padding: 18px 20px; margin: 0; }
body .hm-dstep .domain-selection-options .option > label { display: none; }
body .hm-dstep .domain-selection-options .domain-input-group { display: block !important; margin: 0; }
body .hm-dstep .domain-selection-options .domain-input-group > .row { margin: 0; align-items: stretch; }
body .hm-dstep .domain-selection-options .domain-input-group > .row > [class*="col-"] { flex: 1 1 auto; max-width: none; margin-left: 0; padding: 0; }
body .hm-dstep .domain-selection-options .domain-input-group > .row > .col-sm-2 { flex: 0 0 auto; padding-left: 8px; }
body .hm-dstep .domain-selection-options .domains-row { margin: 0; }
body .hm-dstep .domain-selection-options .form-control, body .hm-dstep .domain-selection-options .input-group-text, body .hm-dstep .domain-selection-options .btn { height: 48px; font-size: 16px; }
body .hm-dstep .domain-selection-options .btn { font-weight: 700; padding: 0 22px; }
/* results: same look as the Register Domain page */
body .hm-dstep #DomainSearchResults .primary-domain-header { display: none !important; }
body .hm-dstep #searchDomainInfo { background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); padding: 20px; margin: 0 0 22px; text-align: center; }
body .hm-dstep .domain-lookup-primary-results .headline { font-size: 21px; margin: 0 0 6px; }
body .hm-dstep .domain-checker-available { color: #15803D; }
body .hm-dstep .domain-checker-unavailable { color: #B91C1C; }
body .hm-dstep .domain-price { font-size: 17px; color: var(--hm-muted); margin: 0 0 4px; }
body .hm-dstep .domain-price .price { font-weight: 700; color: var(--hm-ink); font-size: 20px; }
body .hm-dstep #btnDomainContinue { margin-top: 12px; font-weight: 700; padding: 12px 26px; }
body .hm-dstep #btnDomainContinue .hm-bn { display: inline; color: #DBEAFE; font-size: 14px; margin-left: 6px; }
body .hm-dstep #spotlightTlds { margin-top: 4px; }
body .hm-dstep .spotlight-tld .price { font-family: var(--hm-body); }
body .hm-dstep .domain-suggestion .actions { flex-direction: row-reverse; }
@media (max-width: 767px) {
  .hm-dq h1 { font-size: 25px; }
  .hm-dq-choices { grid-template-columns: 1fr; gap: 10px; }
  .hm-dq-choice { padding: 14px 14px 14px 48px; }
  .hm-dq-choice::before { left: 16px; top: 16px; }
  .hm-dq-have { padding: 16px; }
  .hm-dq-type { flex-direction: column; }
  .hm-dq-type .btn { width: 100%; }
  body .hm-dstep .domain-selection-options .domain-input-group > .row { flex-direction: column; gap: 8px; }
  body .hm-dstep .domain-selection-options .domain-input-group > .row > .col-sm-2 { padding-left: 0; }
  body .hm-dstep .domain-selection-options .btn { width: 100%; }
  body .hm-dstep #btnDomainContinue { width: 100%; }
}
@media (min-width: 768px) {
  body .hm-dstep .domain-selection-options .domain-input-group > .row { flex-wrap: nowrap; }
  body .hm-dstep .domain-selection-options .domain-input-group > .row > [class*="col-"]:first-child { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 768px) {
  body .hm-dstep .domain-selection-options .domain-input-group > .row > .col-sm-2 { width: auto; }
  body .hm-dstep .domain-selection-options .domain-input-group > .row > .col-sm-2 .btn-block { width: auto; white-space: nowrap; }
}

/* ---------- SRV-084: domain settings step (orderforms/hostamir_cart/configuredomains.tpl) "hm-cd" ---------- */
.hm-plans-intro h1 .hm-bn { font-size: 17px; margin-top: 4px; }
.hm-plans-intro p .hm-bn { font-size: 14px; }
.hm-cd-domain { background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); padding: 18px 20px; margin: 0 0 14px; }
.hm-cd-domain header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.hm-cd-domain h2 { font-family: var(--hm-display); font-size: 20px; font-weight: 600; color: var(--hm-ink); margin: 0; word-break: break-all; }
.hm-cd-period { color: var(--hm-muted); font-size: 14px; white-space: nowrap; }
.hm-cd-addons { display: grid; gap: 8px; margin: 0 0 12px; }
.hm-cd-addon { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 14px; border: 1px solid var(--hm-line); border-radius: var(--hm-radius-sm); cursor: pointer; font-weight: 400; }
.hm-cd-addon input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--hm-navy); flex: 0 0 auto; }
.hm-cd-addon strong { color: var(--hm-ink); font-weight: 600; }
.hm-cd-addon em { font-style: normal; font-weight: 600; color: var(--hm-navy); margin-left: 6px; font-size: 14px; }
.hm-cd-addon.is-free em { color: #15803D; }
.hm-cd-addon small { display: block; color: var(--hm-muted); font-size: 13px; line-height: 1.45; margin-top: 2px; }
.hm-cd-hosting { color: var(--hm-muted); font-size: 14px; margin: 0; }
.hm-cd-hosting .hm-bn { display: inline; font-size: 13.5px; }
.hm-cd-hosting a { font-weight: 600; }
.hm-ok { color: #15803D; font-weight: 600; }
.hm-cd-ns { background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); padding: 14px 20px; margin: 0 0 14px; }
.hm-cd-ns summary { cursor: pointer; font-weight: 600; color: var(--hm-navy); }
.hm-cd-ns summary small { display: block; font-weight: 400; color: var(--hm-muted); margin-top: 2px; }
.hm-cd-ns[open] summary { margin-bottom: 10px; }
.hm-cd-next { text-align: right; margin-top: 8px; }
.hm-cd-next .btn { font-weight: 700; padding: 12px 28px; }
.hm-cd-next .hm-bn { display: inline; color: #DBEAFE; font-size: 14px; margin-left: 4px; }
@media (max-width: 767px) {
  .hm-cd-domain { padding: 16px; }
  .hm-cd-next .btn { width: 100%; }
}
@media (max-width: 767px) {
  body .hm-dstep .domains-row > .col-9 { flex: 0 0 60%; max-width: 60%; }
  body .hm-dstep .domains-row > .col-3 { flex: 0 0 40%; max-width: 40%; padding-left: 6px; }
  body .hm-dstep .domain-selection-options .domain-input-group > .row > .col-sm-2 { width: 100%; }
  body .hm-dstep .domain-selection-options .domain-input-group > .row > .col-sm-2 .btn { width: 100%; }
}
@media (max-width: 767px) { body #order-standard_cart.hm-dstep .domain-selection-options .btn { width: 100%; } }

/* ---------- SRV-085: one domain box; configure step "hm-cfg"; hosting offer ---------- */
body .hm-dstep .hm-one-box .domains-row > .col-3 { display: none; }
body .hm-dstep .hm-one-box .domains-row > .col-9 { flex: 0 0 100%; max-width: 100%; }
body .hm-dstep .hm-one-box .input-group-prepend { display: none; }
body .hm-dstep .hm-one-box .input-group > .form-control { border-radius: var(--hm-radius-sm) !important; }
body .hm-dstep .hm-one-box .hm-dq-error { margin: 10px 0 0; flex-basis: 100%; }
body .hm-dstep .hm-one-box .hm-dq-error a { font-weight: 700; }

.hm-cfg-plan { background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); padding: 18px 20px; margin: 0 0 22px; }
.hm-cfg-plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.hm-cfg-plan h2 { font-family: var(--hm-display); font-size: 22px; font-weight: 600; color: var(--hm-ink); margin: 0; }
.hm-cfg-change { font-size: 14px; font-weight: 600; white-space: nowrap; }
.hm-cfg-plan .hm-list-check { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 18px; font-size: 15px; color: var(--hm-ink); }
.hm-cfg-plan .hm-list-check li { position: relative; padding-left: 24px; }
.hm-cfg-q { font-family: var(--hm-display); font-size: 19px; font-weight: 600; color: var(--hm-ink); margin: 0 0 12px; }
.hm-cfg-q .hm-bn { font-size: 15px; }
.hm-cycles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 22px; }
.hm-cycle-card { position: relative; text-align: left; background: #fff; border: 1.5px solid var(--hm-line); border-radius: var(--hm-radius); padding: 16px 18px 16px 50px; cursor: pointer; color: var(--hm-ink); display: flex; flex-direction: column; gap: 2px; }
.hm-cycle-card::before { content: ""; position: absolute; left: 18px; top: 19px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #CBD5E1; background: #fff; }
.hm-cycle-card.is-on { border-color: var(--hm-navy); box-shadow: 0 0 0 3px var(--hm-sky-soft); }
.hm-cycle-card.is-on::before { border-color: var(--hm-navy); background: radial-gradient(circle, var(--hm-navy) 45%, #fff 50%); }
.hm-cycle-card:focus-visible { outline: 3px solid var(--hm-sky); outline-offset: 2px; }
.hm-cycle-name { font-weight: 600; font-size: 15px; }
.hm-cycle-name .hm-bn { display: inline; font-size: 13.5px; margin-left: 4px; }
.hm-cycle-price { color: var(--hm-muted); font-size: 15px; }
.hm-cycle-price strong { color: var(--hm-ink); font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.hm-cycle-save { color: #15803D; font-weight: 600; font-size: 13.5px; }
.hm-cycle-note { color: var(--hm-muted); font-size: 13.5px; }
.hm-cycle-flag { position: absolute; top: -10px; right: 14px; font-style: normal; font-size: 12px; font-weight: 700; background: #15803D; color: #fff; border-radius: 999px; padding: 2px 10px; }
.hm-cycle-select { display: none; }
.hm-cfg-help { color: var(--hm-muted); font-size: 14px; margin: 6px 0 18px; }
.hm-cfg-help i { color: #94A3B8; margin-right: 4px; }
.hm-cfg-help .hm-bn { display: inline; font-size: 13.5px; }
.hm-cfg-help a { font-weight: 700; }
body .hm-cfg .order-summary h2 { font-size: 20px; }

.hm-host-offer { background: #F4F7FE; border: 1.5px solid var(--hm-navy); border-radius: var(--hm-radius); padding: 20px; margin: 4px 0 16px; }
.hm-host-offer h2 { font-family: var(--hm-display); font-size: 20px; font-weight: 600; color: var(--hm-ink); margin: 0 0 6px; }
.hm-host-offer h2 .hm-bn { font-size: 15px; }
.hm-host-offer > p { color: var(--hm-ink); font-size: 15px; margin: 0 0 14px; }
.hm-host-offer > p .hm-bn { font-size: 14px; }
.hm-host-offer .hm-dq-choices { margin-bottom: 0; }
.hm-host-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.hm-host-plans .hm-dq-note { grid-column: 1 / -1; margin: 4px 0 0; }
.hm-host-plan { display: flex; flex-direction: column; gap: 3px; background: #fff; border: 1px solid var(--hm-line); border-radius: var(--hm-radius-sm); padding: 14px; color: var(--hm-ink); text-decoration: none !important; }
.hm-host-plan:hover, .hm-host-plan:focus-visible { border-color: var(--hm-navy); box-shadow: 0 0 0 3px var(--hm-sky-soft); }
.hm-host-plan strong { font-family: var(--hm-display); font-size: 17px; font-weight: 600; }
.hm-host-plan-price { color: var(--hm-muted); font-size: 14px; }
.hm-host-plan-price b { color: var(--hm-ink); font-size: 20px; }
.hm-host-plan small { color: var(--hm-muted); font-size: 13px; }
.hm-host-plan-go { margin-top: 8px; background: var(--hm-navy); color: #fff; font-weight: 700; text-align: center; border-radius: 8px; padding: 8px; font-size: 14px; }
.hm-host-offer.is-no { background: #fff; border-color: var(--hm-line); }
@media (max-width: 767px) {
  .hm-cycles { grid-template-columns: 1fr; }
  .hm-host-plans { grid-template-columns: 1fr; }
  .hm-host-offer { padding: 16px; }
  .hm-cfg-plan { padding: 16px; }
}
.hm-host-plan.is-busy { opacity: .6; cursor: progress; }
/* SRV-086: one required question per domain without hosting */
.hm-host-q { border-top: 1px solid #D6DEF0; padding: 14px 0 4px; }
.hm-host-q:first-of-type { border-top: 0; padding-top: 4px; }
.hm-host-q-name { display: block; font-family: var(--hm-display); font-weight: 600; font-size: 17px; color: var(--hm-ink); margin: 0 0 8px; word-break: break-all; }
.hm-host-q.is-done { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.hm-host-q.is-done .hm-host-q-name { display: inline; margin: 0; }
.hm-host-q .hm-dq-error { margin: 10px 0 0; }
.hm-host-q[data-answer="no"] .hm-dq-choice[data-hm-host="no"] { background: #fff; }
/* SRV-087: VPS SSH keys */
.hm-keys { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.hm-keys li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; border: 1px solid var(--hm-line); border-radius: var(--hm-radius-sm); padding: 10px 12px; }
.hm-key-name { font-weight: 600; color: var(--hm-ink); }
.hm-key-fp { font-size: 12px; color: var(--hm-muted); word-break: break-all; flex: 1 1 220px; }
.hm-keys form { margin: 0; }