/* MDIX Studio Foto Prima — template-specific fixes (design QA 2026-10-13). Loaded last. */

/* Brand orange #FB5E2B fails AA as text on the cream page and with white button text
   (2.6:1 / 3.1:1). A deeper orange keeps the look and passes (4.6:1 / 5.4:1). D-20. */
:root {
  --primary: #b8430e;
  --bs-primary: #b8430e;
  --primary-hover: #9a380b;
  --primary-dark: #8a320a;
  --body-color: #5c5c5c;
  --bs-body-color: #5c5c5c;
  --bs-body-color-rgb: 92, 92, 92;
}

/* Long marquee/slider rows must not widen the document (full-page captures became ~8000px wide). */
#smooth-content,
.page-content {
  overflow-x: clip;
}

/* Theme overlay referenced a missing url(image.png) (404 on Portofolio). */
.dz-box.style-1 .dz-media::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(184, 67, 14, 0.9) 98%);
}

/* Sticky header: translucent 30% white made the logo unreadable over photos. */
.site-header.style-1.is-fixed .main-bar {
  background-color: rgba(236, 236, 222, 0.95);
}

/* 992–1199px: desktop menu wrapped onto two rows (header 176px high). */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-header.style-1 .nav > li > a {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 16px;
  }
}
.site-header .extra-nav .btn {
  white-space: nowrap;
}

/* Footer: logo centred under the copyright on phones; keep it clear of the back-to-top button. */
@media (max-width: 767.98px) {
  .site-footer .footer-bottom .text-end {
    text-align: center !important;
    margin-top: 12px;
  }
}
@media (min-width: 768px) {
  .site-footer .footer-bottom .fb-inner {
    padding-right: 64px;
  }
}

/* Touch targets ≥ 24px for small text links. */
.site-footer .widget ul li a,
.dz-user a,
.section-head a.d-flex,
.dz-card .info-meta a,
.post-share ul li a,
.post-tags a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Keyless Google Maps embed on Kontak. */
.mdix-map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: 20px;
}
@media (max-width: 575.98px) {
  .mdix-map iframe {
    height: 320px;
  }
}

/* Title Case on Indonesian sentences ("Wajah Di Balik…"): theme capitalize → sentence case. */
.section-head.style-1 .title,
.section-head.style-2 .title,
.section-head.style-3 .title,
.section-head.style-1 .inner-content .sub-title,
.categery-swiper .categery .catgery-info .title,
.service-banner.style-1 .banner-inner .hero-content .dooted-bx-inner .customers-box ul .customer-text,
.dz-card.style-7 .dz-info .info-top .info-meta,
.dz-card.style-7 .dz-info .info-top .info-meta .badge,
.header-nav.xmenu > .nav > li .sub-menu li a {
  text-transform: none;
}

/* Buttons on the deeper orange: white label and icon (black was 3.8:1). */
.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  color: #fff;
}
.btn.btn-primary svg path {
  stroke: #fff;
}
.btn.btn-primary.btn-square svg path {
  stroke: #fff;
}

/* Prices: keep Rupiah on one line inside the narrow cards. */
.dz-pricingtable .pricingtable-bx {
  font-size: clamp(26px, 2.3vw, 36px);
  white-space: nowrap;
}
.dz-pricingtable .pricingtable-bx .pricingtable-type {
  display: block;
  margin-top: 4px;
}

/* FAQ: long questions must not run under the +/− icon. */
.dz-accordion .accordion-button {
  padding-right: 40px;
}

/* Detail-layanan steps over a bright photo: darken the photo so the text reads. */
.content-inner-1.style-6 {
  box-shadow: inset 0 0 0 4000px rgba(18, 18, 18, 0.62);
}

/* Buttons: no Title Case on Indonesian labels ("Kembali Ke Beranda"). */
.btn {
  text-transform: none;
}

/* Portfolio image links were inline (20px tall hit area on phones). */
.dz-media > a:has(> img) {
  display: block;
}

/* Category badges: white label on the deeper orange (dark text was 3.3:1). */
.dz-card .info-meta .badge,
a.badge {
  color: #fff;
}

/* Theme greys hard-coded as #999 (2.4:1 on the cream page): team roles, "Lihat profil",
   check lists, FAQ answers, history label. */
.item-box .item-content > span,
.item-box .more-btn a,
.item-box .more-btn a span,
[class*="list-check"] li,
.accordion-body p,
.history-swiper span.bg-light,
span.bg-light {
  color: #5c5c5c !important;
}
.item-box .more-btn a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
/* "Lihat tim" / "Booking sesi" blob: white label on the deeper orange. */
.btn-blob {
  color: #fff !important;
}

/* Kontak: info links as 24px targets. */
.contact-left ul li a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* FAQ side heading: "Pertanyaan" broke mid-word in the narrow column at 1200–1399px. */
.custmize .faq-head .title {
  font-size: clamp(32px, 3.6vw, 60px);
}

.dz-card.style-7 .dz-info .info-top .info-meta .badge {
  color: #fff !important;
}

/* Tentang Kami photos were squashed (fixed box, different ratio). */
.small-media img,
.big-media img {
  object-fit: cover;
}

.footer-bottom-logo a {
  display: inline-block;
}

/* More #999/#aaa theme greys on light backgrounds (blog meta, share, form intro, counts). */
.categery .catgery-info .title span,
.dz-blog .dz-meta li,
.dz-blog .dz-meta li a,
.dz-blog .dz-meta time,
.post-share h6,
.post-tags span,
.form-head p,
.form-head p.text {
  color: #5c5c5c !important;
}

/* Portofolio filter: white label on the active orange pill; pills ≥ 24px on touch. */
.site-filters li.active a {
  color: #fff !important;
}
.site-filters li a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

/* Phone menu sub-links were #999 on white. */
@media (max-width: 991.98px) {
  body:not([data-theme-version="dark"]) .header-nav.xmenu .sub-menu li a {
    color: #5c5c5c;
  }
}

/* Dark mode (theme toggle): undo the light-page grey/background overrides above. */
body[data-theme-version="dark"] .item-box .item-content > span,
body[data-theme-version="dark"] .item-box .more-btn a,
body[data-theme-version="dark"] .item-box .more-btn a span,
body[data-theme-version="dark"] [class*="list-check"] li,
body[data-theme-version="dark"] .accordion-body p,
body[data-theme-version="dark"] span.bg-light,
body[data-theme-version="dark"] .categery .catgery-info .title span,
body[data-theme-version="dark"] .dz-blog .dz-meta li,
body[data-theme-version="dark"] .dz-blog .dz-meta li a,
body[data-theme-version="dark"] .dz-blog .dz-meta time,
body[data-theme-version="dark"] .post-share h6,
body[data-theme-version="dark"] .post-tags span,
body[data-theme-version="dark"] .form-head p,
body[data-theme-version="dark"] .form-head p.text {
  color: #b8b8b8 !important;
}
body[data-theme-version="dark"] .site-header.style-1.is-fixed .main-bar {
  background-color: rgba(24, 24, 24, 0.95);
}

/* ===== design-qa round 2 (2026-10-13) ===== */
/* Paket Foto: Rupiah prices overflowed into the next card (60px theme size, 3-class selector). */
.pricingtable-wrapper.style-1 .pricingtable-inner .pricingtable-bx {
  font-size: clamp(26px, 2.4vw, 36px);
  white-space: nowrap;
}
@media (max-width: 1199.98px) {
  .pricingtable-wrapper.style-1 .pricingtable-inner .pricingtable-bx {
    font-size: 32px;
  }
}
/* Orange (active / hovered) price card: dark text was 3.2:1 → white. */
.pricingtable-wrapper.style-1.active .pricingtable-bx,
.pricingtable-wrapper.style-1:hover .pricingtable-bx,
.pricingtable-wrapper.style-1.active .pricingtable-type,
.pricingtable-wrapper.style-1:hover .pricingtable-type,
.pricingtable-wrapper.style-1.active .pricingtable-title .title,
.pricingtable-wrapper.style-1:hover .pricingtable-title .title,
.pricingtable-wrapper.style-1.active .pricingtable-title .text,
.pricingtable-wrapper.style-1:hover .pricingtable-title .text,
.pricingtable-wrapper.style-1.active .pricingtable-list .pricingtable-features li,
.pricingtable-wrapper.style-1:hover .pricingtable-list .pricingtable-features li,
.pricingtable-wrapper.style-1.active .pricingtable-list .pricingtable-features li:after,
.pricingtable-wrapper.style-1:hover .pricingtable-list .pricingtable-features li:after {
  color: #fff !important;
}

/* FAQ: question text ran under the 55px +/− icon (right: 20px). */
.dz-accordion .accordion-header .accordion-button {
  padding-right: 84px !important;
}
@media (max-width: 767.98px) {
  .dz-accordion .accordion-header .accordion-button {
    padding-right: 64px !important;
  }
}

/* Team / service rows turn orange on hover: role, "Lihat profil/semua", count and arrow were grey on orange. */
.item-box:hover .item-content > span,
.item-box:hover .item-content .count,
.item-box:hover .item-content .item-title,
.item-box:hover .more-btn a,
.item-box:hover .more-btn a span {
  color: #fff !important;
}
.item-box:hover .more-btn a svg path {
  stroke: #fff !important;
}
.item-box:hover .item-social a {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.8);
}

/* Hero social icons: white on 30% grey over cream (≈1.3:1) → dark tiles. */
.main-banner.style-2 .social-icon-list ul li a {
  background: rgba(24, 24, 24, 0.82);
  color: #fff;
}

/* Layanan hero intro was theme #999 (≈2.4:1). */
.service-banner.style-1 .banner-inner .hero-content.style-2 .dooted-bx-inner p {
  color: #5c5c5c;
}
body[data-theme-version="dark"] .service-banner.style-1 .banner-inner .hero-content.style-2 .dooted-bx-inner p {
  color: #b8b8b8;
}

/* Footer 768–991: four narrow columns wrapped the address into 3 lines → 2 × 2. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .site-footer .footer-top .row > .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
/* Price cards (not highlighted): theme #999 type, intro and features (≈2.4:1) → #5c5c5c. */
.pricingtable-wrapper.style-1 .pricingtable-inner .pricingtable-bx small,
.pricingtable-wrapper.style-1 .pricingtable-inner .pricingtable-title .text,
.pricingtable-wrapper.style-1 .pricingtable-inner .pricingtable-list .pricingtable-features li {
  color: #5c5c5c;
}
body[data-theme-version="dark"] .pricingtable-wrapper.style-1 .pricingtable-inner .pricingtable-bx small,
body[data-theme-version="dark"] .pricingtable-wrapper.style-1 .pricingtable-inner .pricingtable-title .text,
body[data-theme-version="dark"] .pricingtable-wrapper.style-1 .pricingtable-inner .pricingtable-list .pricingtable-features li {
  color: #b8b8b8;
}
/* Service-row tags on the orange hover bar: keep them light chips with dark text. */
.item-box:hover .tag-list li a {
  background-color: rgba(255, 255, 255, 0.92);
  color: #181818;
}

/* Dark mode (theme toggle): the AA-darkened orange #b8430e is only 3.2:1 on #181818 →
   use the theme's lighter orange for TEXT; buttons keep the darker fill. */
body[data-theme-version="dark"] .text-primary,
body[data-theme-version="dark"] a.text-primary,
body[data-theme-version="dark"] .testimonial-position,
body[data-theme-version="dark"] .dz-user a {
  color: #fb6a3a !important;
}
body[data-theme-version="dark"] .dz-player p {
  color: #b8b8b8;
}
body[data-theme-version="dark"] .nav .nav-item button.nav-link:not(.active) {
  color: #b8b8b8;
}