/*
 * Marotori Modern - brand layer on top of Twenty-One (loaded after theme.min.css).
 * Brand (2023, design/logo): navy #182957, grey-blue #abb6be; slate #525f81 for muted text.
 * Keep overrides here small; override a .tpl only when markup has to change.
 * Note: twenty-one puts .primary-bg-color on <body> - it's the page background, not a brand bar.
 */

:root {
  --mt-navy: #182957;      /* 2023 brand navy */
  --mt-brand-grey: #abb6be;
  --mt-navy-dark: #0e1b3a;
  --mt-navy-light: #233a73;
  --mt-slate: #525f81;
  --mt-accent: #3fa9f5;
  --mt-page: #f4f6fa;
  --primary: var(--mt-navy);
}

body.primary-bg-color {
  background-color: var(--mt-page);
}

/* ---------- Header ---------- */
header.header .topbar {
  background-color: var(--mt-navy-dark);
}

header.header .main-navbar-wrapper {
  background-color: var(--mt-navy);
}
header.header .main-navbar-wrapper .navbar-nav > li > a,
header.header .main-navbar-wrapper .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
}
header.header .main-navbar-wrapper .navbar-nav > li > a:hover,
header.header .main-navbar-wrapper .navbar-nav > li > a:focus,
header.header .main-navbar-wrapper .navbar-nav > li.show > a,
header.header .main-navbar-wrapper .navbar-nav > li.active > a {
  color: #fff;
}
/* dropdowns stay white with dark text */
header.header .main-navbar-wrapper .dropdown-menu a {
  color: #333;
}
header.header .main-navbar-wrapper .dropdown-menu a:hover {
  color: var(--mt-navy);
  background-color: var(--mt-page);
}

/* ---------- Buttons / links ---------- */
a {
  color: var(--mt-navy-light);
}
.btn-primary {
  background-color: var(--mt-navy);
  border-color: var(--mt-navy);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--mt-navy-light);
  border-color: var(--mt-navy-light);
}
.btn-outline-primary {
  color: var(--mt-navy);
  border-color: var(--mt-navy);
}
.btn-outline-primary:hover {
  background-color: var(--mt-navy);
  border-color: var(--mt-navy);
  color: #fff;
}

/* ---------- Homepage: domain search hero ---------- */
.home-domain-search.bg-white {
  background: linear-gradient(135deg, var(--mt-navy) 0%, var(--mt-navy-light) 60%, var(--mt-slate) 100%) !important;
  color: #fff;
}
.home-domain-search h2 {
  color: #fff;
  font-weight: 600;
}
.home-domain-search a {
  color: rgba(255, 255, 255, 0.9);
}
.home-domain-search .input-group-wrapper {
  border: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.home-domain-search .btn-primary {
  background-color: var(--mt-accent);
  border-color: var(--mt-accent);
}

/* ---------- Homepage: intro (homepage.tpl) ---------- */
.mt-intro {
  padding: 2.5rem 0 1rem;
}
.mt-intro .lead {
  max-width: 46rem;
  margin: 0 auto;
  color: #4a5368;
}
.mt-intro h2 {
  color: var(--mt-navy);
  font-weight: 600;
}
.mt-features .card {
  border: 0;
  border-top: 3px solid var(--mt-navy);
  box-shadow: 0 4px 16px rgba(22, 41, 87, 0.08);
  height: 100%;
}
.mt-features .mt-icon {
  font-size: 1.8rem;
  color: var(--mt-navy);
  margin-bottom: .75rem;
}
.mt-features h3 {
  font-size: 1.15rem;
  color: var(--mt-navy);
}
.mt-trust {
  color: var(--mt-slate);
  font-size: .95rem;
}
.mt-trust i {
  color: var(--mt-navy);
  margin-right: .35rem;
}
.mt-cta {
  background: var(--mt-navy);
  color: #fff;
  border-radius: .5rem;
  padding: 2rem;
}
.mt-cta h3 {
  color: #fff;
}
.mt-cta .btn {
  background: #fff;
  color: var(--mt-navy);
}

/* ---------- Footer ---------- */
footer.footer {
  background-color: var(--mt-navy-dark);
}

/* ---------- Content pages (About / Privacy / T&C) ---------- */
.mt-legal h3 {
  font-size: 1.15rem;
  margin-top: 1.75rem;
  color: var(--mt-navy);
}
/* [bracketed] placeholders in draft pages - must be gone before a page goes live */
.mt-draft {
  background: #fff3a0;
  padding: 0 .2em;
}

/* breadcrumb: blend with the page instead of a white strip inside the container */
.master-breadcrumb,
.master-breadcrumb .breadcrumb {
  background-color: transparent;
  border: 0;
}
.mt-legal code,
.mt-features code,
.card-body code {
  color: var(--mt-navy);
  background: var(--mt-page);
  padding: 0 .25em;
  border-radius: 3px;
}

/* Domains / DNS pages */
.mt-domains td { vertical-align: middle; }

/* Logo */
header.header .logo-img.mt-logo {
  height: 56px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 575.98px) {
  header.header .logo-img.mt-logo { height: 42px; }
}
.mt-filterbar .mt-search { width: 16rem; max-width: 100%; }
.mt-filterbar .btn .badge { font-weight: 500; }
header.header .logo-img.mt-logo-marotori-pill { height: 44px; }
header.header .logo-img.mt-logo-marotori-wordmark { height: 38px; }
@media (max-width: 575.98px) { header.header .logo-img.mt-logo-marotori-wordmark { height: 28px; } }
.mt-footer-logo img { height: 22px; width: auto; opacity: .9; }

/* DNS record editor (clientareadomaindns-zoneguru.tpl): flex rows on desktop, stacked cards on phones */
.mt-dns-head, .mt-rec { display: flex; align-items: flex-start; gap: .5rem; }
.mt-dns-head {
  font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--mt-slate); border-bottom: 2px solid #e3e7ef; padding: 0 .5rem .4rem;
}
.mt-rec { padding: .5rem; border-bottom: 1px solid #eef1f6; }
.mt-rec:hover { background: #fafbfd; }
.mt-c-host  { flex: 0 0 22%; min-width: 0; }
.mt-c-type  { flex: 0 0 6.5rem; }
.mt-c-value { flex: 1 1 auto; min-width: 0; }
.mt-c-opts  { flex: 0 0 13.5rem; display: flex; gap: .25rem; align-items: center; }
.mt-c-opts .mt-opt { width: 4.4rem; }
.mt-c-opts .mt-none { padding-left: .5rem; }
.mt-c-del   { flex: 0 0 2.5rem; text-align: right; }
.mt-fqdn { margin-top: .15rem; padding-left: .1rem; }
.mt-lbl { display: block; font-size: .75rem; color: var(--mt-slate); margin-bottom: .15rem; }
.mt-rec-new { background: var(--mt-page); border-radius: .35rem; margin-top: .75rem; border-bottom: 0; }
.mt-rec.mt-deleted { background: #fdecee; }
.mt-rec.mt-deleted input[type=text], .mt-rec.mt-deleted select { text-decoration: line-through; opacity: .6; }
.mt-del-btn.active { background: #dc3545; color: #fff; }
@media (max-width: 767.98px) {
  .mt-rec { flex-wrap: wrap; border: 1px solid #e3e7ef; border-radius: .35rem; margin-bottom: .5rem; }
  .mt-c-host  { flex: 1 1 60%; }
  .mt-c-type  { flex: 1 1 30%; }
  .mt-c-value { flex: 1 1 100%; }
  .mt-c-opts  { flex: 1 1 auto; }
  .mt-c-del   { flex: 0 0 auto; margin-left: auto; align-self: flex-end; }
}

/* Click-to-edit: rows show as text; .mt-editing shows the inputs */
.mt-rec:not(.mt-editing) .mt-edit,
.mt-rec:not(.mt-editing) .mt-opt { display: none !important; }
.mt-rec.mt-editing .mt-show { display: none !important; }
.mt-rec:not(.mt-editing) { align-items: center; }
.mt-show-host, .mt-show-value { padding: .2rem 0; }
.mt-show-value {
  font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem;
  word-break: break-all; color: #2b3445;
}
.mt-rec.mt-editing:not(.mt-rec-new) { background: #f2f6ff; box-shadow: inset 3px 0 0 var(--mt-navy); }
.mt-c-del { flex-basis: 5.5rem; }
.mt-badge { font-size: .75rem; font-weight: 600; padding: .3em .55em; color: #fff; background: var(--mt-slate); min-width: 3.2rem; }
.mt-badge-a, .mt-badge-aaaa { background: var(--mt-navy); }
.mt-badge-cname, .mt-badge-dname { background: #8b70a0; }   /* brand purple */
.mt-badge-mx { background: #2f7346; }                       /* brand green */
.mt-badge-txt { background: #656556; }                      /* brand olive */
.mt-badge-srv, .mt-badge-ns { background: #3a4f86; }
.mt-badge-url { background: #abb6be; color: #182957; }      /* brand grey-blue */
@media (max-width: 767.98px) {
  .mt-rec:not(.mt-editing) .mt-c-host { flex: 1 1 auto; }
  .mt-rec:not(.mt-editing) .mt-c-type { flex: 0 0 auto; order: -1; }
  .mt-rec:not(.mt-editing) .mt-c-value { order: 3; }
  .mt-rec:not(.mt-editing) .mt-c-opts { order: 4; flex-basis: 100%; }
  .mt-rec:not(.mt-editing) .mt-c-del { order: 2; flex-basis: auto; }
}

/* My Domains: aligned action buttons, muted expired rows */
.mt-domains .mt-dns-btn { min-width: 4.6rem; }
.mt-domains .mt-more { width: 2.2rem; }
.mt-domains .btn-group { margin-left: .25rem; }
.mt-domains tr.mt-expired td { color: #8a93a6; }
.mt-domains tr.mt-expired a strong { color: #5b6478; }
.mt-domains td:first-child { min-width: 12rem; }

/* Phones: nothing may push the card wider than the screen */
.mt-filterbar { max-width: 100%; }
.mt-filterbar .btn-group { max-width: 100%; overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
.mt-filterbar .btn-group .btn { flex: 0 0 auto; }
.mt-rec > div { min-width: 0; }
@media (max-width: 767.98px) {
  .mt-filterbar .mt-search { width: 100%; margin-right: 0 !important; }
  .mt-filterbar #mtDnsShown { margin-left: 0 !important; }
  .card-body { padding: 1rem; }
}
@media (max-width: 575.98px) {
  .mt-domains td:first-child { min-width: 0; }
  .mt-domains .mt-dns-btn { min-width: 0; }
}
/* Same column widths in every TLD group (each group is its own table) */
@media (min-width: 768px) {
  .mt-domains { table-layout: fixed; }
  .mt-domains th:nth-child(1) { width: 30%; }
  .mt-domains th:nth-child(2) { width: 12%; }
  .mt-domains th:nth-child(3) { width: 16%; }
  .mt-domains th:nth-child(4) { width: 16%; }
  .mt-domains th:nth-child(5) { width: 12%; }
  .mt-domains th:nth-child(6) { width: 9rem; }
  .mt-domains td:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* Single-record editing (2026-10-25): each row is its own form */
.mt-rec.mt-editing { flex-wrap: wrap; }
.mt-rec .mt-c-opts.mt-edit { display: flex; gap: .3rem; flex-wrap: wrap; }
.mt-rec .mt-c-opts.mt-edit > div { flex: 0 0 auto; }
.mt-rec.mt-editing .mt-c-opts { flex-basis: 15rem; }
.mt-rec.mt-editing .mt-c-del { flex-basis: 9.5rem; text-align: left; }
.mt-rec .mt-c-value .mt-help { margin-top: .2rem; }
.mt-rec-error { flex-basis: 100%; padding-top: .25rem; }
.mt-rec-new { margin: .25rem 0 .75rem; }
@media (max-width: 767.98px) {
  .mt-rec.mt-editing .mt-c-opts, .mt-rec.mt-editing .mt-c-del { flex-basis: 100%; }
}

/* Homepage domain search on phones: twenty-one puts Search/Transfer in their own row with no gap before the captcha */
@media (max-width: 575.98px) {
  .home-domain-search .row.d-sm-none { margin-top: .75rem; margin-bottom: 1rem; }
  .home-domain-search .row.d-sm-none .btn { margin-bottom: .5rem; }
  .home-domain-search h2 { font-size: 1.6rem; }
}

/* Client area dashboard: "Domains · N DNS only" */
.tiles .tile .title .mt-tile-sub { font-size: .75em; color: var(--mt-slate); white-space: nowrap; }