/* MB Developments professional polish and SEO content system — Keybit Services. */
:root {
  --mbd-bg: #090c11;
  --mbd-surface: #111722;
  --mbd-surface-2: #171f2c;
  --mbd-blue: #1d5ed8;
  --mbd-blue-strong: #1649ad;
  --mbd-blue-soft: #72a8ff;
  --mbd-text: #f7f9fc;
  --mbd-muted: #c1c9d6;
  --mbd-line: rgba(122, 168, 255, 0.24);
  --mbd-radius: 16px;
  --mbd-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

html { scroll-behavior: smooth; }
body.keybit-mbd-seo { color: var(--mbd-text); background-color: var(--mbd-bg); }
body.keybit-mbd-seo a { text-underline-offset: 0.18em; }
body.keybit-mbd-seo img { max-width: 100%; height: auto; }

.skip-link:focus {
  clip: auto !important;
  width: auto;
  height: auto;
  left: 14px;
  top: 14px;
  padding: 12px 16px;
  color: #07101f;
  background: #fff;
  border-radius: 8px;
  z-index: 100001;
}

#carzine_logo_area_container { padding: 18px 0 10px; }
#carzine_logo_container { text-align: center; }
#carzine_logo { display: inline-block; line-height: 0; }
#carzine_logo img { width: min(100%, 520px); height: auto; }

#carzine_menu_area { position: relative; z-index: 20; }
#carzine_menu_area .container { border-radius: 14px; overflow: visible; }
#main-menu { display: flex; flex-wrap: wrap; justify-content: center; }
#main-menu > li > a { min-height: 54px; display: flex; align-items: center; justify-content: center; padding: 14px 19px; }
#main-menu .sub-menu { min-width: 260px; }
#main-menu a:focus-visible,
.mbd-button:focus-visible,
.mbd-card a:focus-visible,
.mbd-text-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

#breadcrumbs_and_title { padding: 20px 0 12px; }
#breadcrumbs_and_title h1 { color: var(--mbd-text); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08; margin: 0 0 12px; }
.woocommerce-breadcrumb { color: var(--mbd-muted); }
.woocommerce-breadcrumb a { color: var(--mbd-blue-soft); }

.carzine_single_post_content { color: var(--mbd-text); font-size: 17px; line-height: 1.7; }
.carzine_single_post_content > :first-child { margin-top: 0; }

.mbd-eyebrow {
  margin: 0 0 9px;
  color: #9ec1ff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.mbd-hero {
  position: relative;
  min-height: clamp(500px, 60vw, 680px);
  display: grid;
  align-items: end;
  overflow: hidden;
  margin: 0 0 28px;
  border: 1px solid var(--mbd-line);
  border-radius: 20px;
  background: #080b10;
  box-shadow: var(--mbd-shadow);
  isolation: isolate;
}
.mbd-hero__media,
.mbd-hero__media img,
.mbd-hero__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.mbd-hero__media img { object-fit: cover; object-position: center; }
.mbd-hero__overlay { background: linear-gradient(90deg, rgba(4, 8, 16, 0.96) 0%, rgba(4, 8, 16, 0.72) 48%, rgba(4, 8, 16, 0.17) 100%), linear-gradient(0deg, rgba(4, 8, 16, 0.82), transparent 55%); z-index: 1; }
.mbd-hero__content { position: relative; z-index: 2; max-width: 720px; padding: clamp(28px, 6vw, 66px); }
.mbd-hero h1 { margin: 0 0 18px; color: #fff; font-size: clamp(2.2rem, 5.3vw, 4.8rem); line-height: 1.02; letter-spacing: -0.035em; }
.mbd-hero p:not(.mbd-eyebrow) { max-width: 640px; margin: 0 0 24px; color: #eef3fb; font-size: clamp(1rem, 1.8vw, 1.25rem); }

.mbd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.mbd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.mbd-button:hover { transform: translateY(-2px); color: #fff; }
.mbd-button--primary { color: #fff; background: var(--mbd-blue); border-color: var(--mbd-blue); }
.mbd-button--primary:hover { background: #2b6ce4; }
.mbd-button--secondary { color: #fff; background: rgba(17, 23, 34, 0.88); border-color: rgba(255, 255, 255, 0.5); }
.mbd-button--secondary:hover { background: var(--mbd-surface-2); }
.mbd-button--ghost { color: #dbe8ff; background: transparent; border-color: var(--mbd-line); }
.mbd-button--ghost:hover { border-color: var(--mbd-blue-soft); background: rgba(29, 94, 216, 0.14); }

.mbd-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; margin: 0 0 clamp(46px, 7vw, 76px); border: 1px solid var(--mbd-line); border-radius: var(--mbd-radius); background: var(--mbd-line); }
.mbd-proof > div { display: grid; gap: 4px; padding: 20px; background: var(--mbd-surface); }
.mbd-proof strong { color: #fff; font-size: 1.08rem; }
.mbd-proof span { color: var(--mbd-muted); font-size: 0.9rem; }

.mbd-section { margin: clamp(44px, 7vw, 84px) 0; }
.mbd-section__intro { max-width: 820px; margin-bottom: 26px; }
.mbd-section h2,
.mbd-service-intro h2,
.mbd-split h2 { margin: 0 0 14px; color: #fff; font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.13; letter-spacing: -0.02em; }
.mbd-section__intro > p:last-child,
.mbd-service-intro > p:last-of-type,
.mbd-split__content > p { color: var(--mbd-muted); }

.mbd-service-intro { max-width: 940px; padding: clamp(24px, 5vw, 46px); margin: 0 0 36px; border: 1px solid var(--mbd-line); border-radius: var(--mbd-radius); background: linear-gradient(135deg, rgba(29, 94, 216, 0.22), rgba(17, 23, 34, 0.96) 56%); box-shadow: var(--mbd-shadow); }

.mbd-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mbd-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mbd-card { position: relative; min-width: 0; padding: clamp(22px, 4vw, 32px); border: 1px solid var(--mbd-line); border-radius: var(--mbd-radius); background: linear-gradient(150deg, var(--mbd-surface-2), var(--mbd-surface)); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); }
.mbd-card h2,
.mbd-card h3 { margin: 0 0 12px; color: #fff; line-height: 1.18; }
.mbd-card h2 { font-size: 1.45rem; }
.mbd-card h3 { font-size: 1.3rem; }
.mbd-card p,
.mbd-card address { color: var(--mbd-muted); font-style: normal; }
.mbd-card a,
.mbd-text-link { color: #9fc2ff; font-weight: 700; }
.mbd-card__number { display: inline-block; margin-bottom: 18px; color: var(--mbd-blue-soft); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; }

.mbd-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 5vw, 54px); align-items: center; }
.mbd-split__media { overflow: hidden; border: 1px solid var(--mbd-line); border-radius: var(--mbd-radius); box-shadow: var(--mbd-shadow); }
.mbd-split__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mbd-split__content { min-width: 0; }

.mbd-process { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; padding: 0; margin: 0; counter-reset: mbd-process; }
.mbd-process li { position: relative; min-width: 0; padding: 24px 22px 24px 58px; border: 1px solid var(--mbd-line); border-radius: 13px; background: var(--mbd-surface); counter-increment: mbd-process; }
.mbd-process li::before { content: counter(mbd-process, decimal-leading-zero); position: absolute; left: 18px; top: 23px; color: var(--mbd-blue-soft); font-weight: 800; }
.mbd-process strong,
.mbd-process span { display: block; }
.mbd-process strong { margin-bottom: 7px; color: #fff; }
.mbd-process span { color: var(--mbd-muted); font-size: 0.94rem; line-height: 1.55; }

.mbd-local { padding: clamp(26px, 5vw, 46px); border: 1px solid var(--mbd-line); border-radius: var(--mbd-radius); background: linear-gradient(135deg, rgba(29, 94, 216, 0.18), rgba(17, 23, 34, 0.96)); }
.mbd-local > p:not(.mbd-eyebrow) { max-width: 900px; color: var(--mbd-muted); }
.mbd-note { margin: 22px 0 0; padding: 16px 18px; border-left: 4px solid var(--mbd-blue); color: var(--mbd-muted); background: rgba(29, 94, 216, 0.1); }

.mbd-contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mbd-hours { margin: 0; }
.mbd-hours div { display: flex; justify-content: space-between; gap: 18px; padding: 8px 0; border-bottom: 1px solid var(--mbd-line); }
.mbd-hours dt { color: var(--mbd-muted); font-weight: 400; }
.mbd-hours dd { margin: 0; color: #fff; font-weight: 700; text-align: right; }
.mbd-form-section { max-width: 900px; }

.mbd-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mbd-gallery-grid figure { overflow: hidden; margin: 0; border: 1px solid var(--mbd-line); border-radius: var(--mbd-radius); background: var(--mbd-surface); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); }
.mbd-gallery-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #e9edf2; }
.mbd-gallery-grid figcaption { min-height: 70px; padding: 15px 17px; color: var(--mbd-muted); font-size: 0.92rem; line-height: 1.5; }
.mbd-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mbd-price-card { min-width: 0; padding: 22px; border: 1px solid var(--mbd-line); border-radius: 13px; background: var(--mbd-surface); }
.mbd-price-card strong { display: block; margin-bottom: 8px; color: #fff; font-size: 1.15rem; }
.mbd-price-card span { display: block; color: var(--mbd-blue-soft); font-size: 1.55rem; font-weight: 800; }
.mbd-price-card p { margin: 10px 0 0; color: var(--mbd-muted); }

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea,
.wpforms-container select { color: #111827 !important; background: #fff !important; border: 2px solid #c6cfdd !important; }
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus { border-color: var(--mbd-blue-soft) !important; box-shadow: 0 0 0 3px rgba(114, 168, 255, 0.24) !important; }
.wpforms-container label { color: #fff !important; }
.wpforms-submit { min-height: 48px !important; color: #fff !important; background: var(--mbd-blue) !important; border: 0 !important; border-radius: 8px !important; font-weight: 700 !important; }

#carzine_footer_area { margin-top: clamp(42px, 7vw, 82px); border-top: 1px solid var(--mbd-line); }
#carzine_footer_sidebar h2 { color: #fff; font-size: 1.06rem; line-height: 1.3; }
#carzine_footer_sidebar a { color: #a9c8ff; overflow-wrap: anywhere; }
#carzine_footer_sidebar { color: #d7deea; }
.mbd-contact-panel a { min-height: 44px; }

/* Keep the WooCommerce category archive on a predictable, left-aligned grid.
   Legacy Additional CSS still carries WooCommerce's old first/last float
   classes, which otherwise strand the ninth category in the centre. */
body.keybit-mbd-shop.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 2.66%;
  align-items: stretch;
}
body.keybit-mbd-shop.woocommerce ul.products::before,
body.keybit-mbd-shop.woocommerce ul.products::after { display: none !important; }
body.keybit-mbd-shop.woocommerce ul.products li.product-category {
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0 !important;
}

@media (max-width: 991px) {
  body.keybit-mbd-shop.woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .mbd-proof { grid-template-columns: repeat(2, 1fr); }
  .mbd-card-grid--three,
  .mbd-process,
  .mbd-contact-grid,
  .mbd-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mbd-split { grid-template-columns: 1fr; }
  .mbd-split__media { order: 0; }
  .mbd-split__content { order: 1; }
}

@media (max-width: 767px) {
  body.keybit-mbd-shop.woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 8px;
  }
  body.keybit-mbd-shop.woocommerce ul.products li.product-category:nth-child(odd),
  body.keybit-mbd-shop.woocommerce ul.products li.product-category:nth-child(even) { margin: 0 !important; }
  #carzine_logo_area_container { padding: 12px 0 8px; }
  #carzine_logo img { width: min(100%, 380px); }
  #breadcrumbs_and_title { padding-top: 14px; }
  #breadcrumbs_and_title h1 { font-size: clamp(1.9rem, 9vw, 2.65rem); overflow-wrap: anywhere; }
  .carzine_single_post_content { font-size: 16px; }
  .mbd-hero { min-height: 570px; border-radius: 14px; }
  .mbd-hero__overlay { background: linear-gradient(0deg, rgba(4, 8, 16, 0.97) 0%, rgba(4, 8, 16, 0.82) 58%, rgba(4, 8, 16, 0.28) 100%); }
  .mbd-hero__content { padding: 26px 21px; }
  .mbd-hero h1 { font-size: clamp(2rem, 10.2vw, 3.1rem); }
  .mbd-actions { flex-direction: column; }
  .mbd-button { width: 100%; }
  .mbd-card-grid,
  .mbd-card-grid--three,
  .mbd-process,
  .mbd-contact-grid,
  .mbd-gallery-grid,
  .mbd-price-grid { grid-template-columns: 1fr; }
  .mbd-section { margin: 46px 0; }
  .mbd-service-intro,
  .mbd-local,
  .mbd-card { padding: 22px 19px; }
  .mbd-hours div { align-items: flex-start; }
  #carzine_footer_sidebar .col-md-3 { margin-bottom: 24px; }
}

@media (max-width: 420px) {
  .mbd-proof { grid-template-columns: 1fr; }
  .mbd-hero { min-height: 600px; }
  .mbd-hero__content { padding: 22px 17px; }
  .mbd-process li { padding-left: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mbd-button { transition: none; }
}