/* ==========================================================================
   REDESIGN 2026 — Authoritative design system (loaded LAST, wins the cascade)
   Tenant brand colors are injected as :root vars by includes/header.php:
     --primary-color  --secondary-color  --accent-color  --text-color  --background-color
   This file intentionally overrides the legacy theme.css template.
   ========================================================================== */

:root {
  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* Radius */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(17, 12, 24, 0.06), 0 1px 3px rgba(17, 12, 24, 0.05);
  --shadow-md: 0 10px 30px rgba(17, 12, 24, 0.10);
  --shadow-lg: 0 24px 60px rgba(17, 12, 24, 0.18);
  --shadow-glow: 0 12px 40px var(--primary-soft, rgba(128, 0, 128, 0.28));

  /* Surfaces */
  --surface: #ffffff;
  --surface-alt: #f7f4f8;
  --surface-dark: #15101a;
  --surface-darker: #0d0911;
  --ink: var(--text-color, #221a2b);
  --ink-soft: color-mix(in srgb, var(--text-color, #221a2b) 62%, transparent);
  --border-soft: color-mix(in srgb, var(--text-color, #221a2b) 12%, transparent);

  /* Derived brand tints (safe fallbacks if color-mix unsupported) */
  --primary-soft: color-mix(in srgb, var(--primary-color) 22%, transparent);
  --primary-tint: color-mix(in srgb, var(--primary-color) 8%, white);
  --grad-brand: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  --grad-brand-soft: linear-gradient(135deg,
      color-mix(in srgb, var(--primary-color) 14%, white),
      color-mix(in srgb, var(--secondary-color) 14%, white));

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------- Base resets that defeat the dated template ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--background-color, #fff);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;           /* kill horizontal scroll everywhere */
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4,
.banner-title, .sectionTitle h2, .widget_title, .sectionHeader h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.12;
}

a { transition: color .25s var(--ease-soft); }

.colorPrimary { color: var(--primary-color) !important; }
.primaryFont { color: var(--primary-color) !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }

/* Consistent section rhythm — kills the "khup empty space" gaps */
.commonSection { padding: var(--space-xl) 0; position: relative; }
@media (max-width: 991px){ .commonSection { padding: var(--space-lg) 0; } }
@media (max-width: 575px){ .commonSection { padding: var(--space-md) 0; } }

.rd-section { padding: var(--space-xl) 0; }
.rd-section--tight { padding: var(--space-lg) 0; }
.rd-eyebrow {
  display: inline-block; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  font-size: .78rem; color: var(--primary-color); margin-bottom: .6rem;
}
.rd-section-head { max-width: 720px; margin: 0 auto var(--space-lg); text-align: center; }
.rd-section-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin: 0 0 1rem; }
.rd-section-head p { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-primary, .primary-btn, a.btn-primary,
.mo_btn, .hero-cta {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.7rem; border-radius: var(--r-pill);
  background: var(--grad-brand) !important; color: #fff !important;
  border: none !important; font-weight: 600; line-height: 1.1;
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), filter .25s var(--ease-out);
}
.btn-primary:hover, .primary-btn:hover, a.btn-primary:hover,
.mo_btn:hover, .hero-cta:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-glow);
  filter: brightness(1.05); color: #fff !important;
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.6rem; border-radius: var(--r-pill);
  background: transparent; color: var(--primary-color);
  border: 1.5px solid var(--primary-color); font-weight: 600;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
}
.btn-ghost:hover { background: var(--primary-color); color: #fff; transform: translateY(-2px); }

/* ==========================================================================
   PAGE TRANSITIONS (FIX 1) — body crossfade
   ========================================================================== */
body.rd-fade { opacity: 0; }
body.rd-ready { opacity: 1; transition: opacity .30s var(--ease-soft); }
body.rd-leaving { opacity: 0 !important; transition: opacity .20s var(--ease-soft); }

/* ==========================================================================
   PREMIUM LOADER (FIX 2) — ring + skeleton
   ========================================================================== */
.loader-ring {
  width: 64px; height: 64px; border-radius: 50%;
  background: conic-gradient(from 0deg,
      transparent 0%, var(--primary-color) 70%, var(--accent-color) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  animation: rd-spin .9s linear infinite;
  margin: 0 auto;
}
.loader-ring--sm { width: 40px; height: 40px; }
.loader-ring--lg { width: 84px; height: 84px; }
@keyframes rd-spin { to { transform: rotate(360deg); } }

.loader-block { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: var(--space-lg) 0; }
.loader-block p { color: var(--ink-soft); font-weight: 500; margin: 0; letter-spacing: .02em; }

/* Skeleton shimmer cards */
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); }
.skeleton-card {
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm);
  overflow: hidden; min-height: 360px;
}
.skeleton-card__media { height: 190px; }
.skeleton-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.skeleton-line { height: 14px; border-radius: 8px; }
.skeleton-line.w-40 { width: 40%; } .skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-80 { width: 80%; } .skeleton-line.w-100 { width: 100%; }
.skeleton-line.tall { height: 38px; border-radius: var(--r-pill); width: 55%; margin-top: .5rem; }
.shimmer, .skeleton-card__media, .skeleton-line {
  background: linear-gradient(100deg,
      var(--surface-alt) 30%, color-mix(in srgb, var(--primary-color) 8%, var(--surface-alt)) 50%, var(--surface-alt) 70%);
  background-size: 200% 100%;
  animation: rd-shimmer 1.4s ease-in-out infinite;
}
@keyframes rd-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Smooth swap when real data arrives */
.rd-pop-in { animation: rd-pop .45s var(--ease-out) both; }
@keyframes rd-pop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   3D + ANIMATED CARDS (FIX 4)
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--space-md);
  align-items: stretch;
}
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* Centered consistent-width cards — fixes 1–2 item stretch (FIX 5) */
.rd-cards-center { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; align-items: stretch; }
.rd-cards-center > .card-3d, .rd-cards-center > [class*="col-"] { flex: 0 1 340px; max-width: 360px; }
@media (max-width: 480px) { .rd-cards-center > .card-3d, .rd-cards-center > [class*="col-"] { flex-basis: 100%; max-width: 100%; } }

.card-3d {
  position: relative; height: 100%;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transform-style: preserve-3d; will-change: transform;
  transition: transform .15s ease-out, box-shadow .35s var(--ease-out);
  display: flex; flex-direction: column;
}
.card-3d::before {            /* shimmer sweep */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .6s var(--ease-out); opacity: 0;
}
.card-3d__media { position: relative; overflow: hidden; }
.card-3d__media img,
.card-3d__media > .card-3d__imgwrap img { width: 100%; height: auto; object-fit: contain; display: block;
  transition: transform .4s var(--ease-out), filter .4s var(--ease-out); }
.card-3d__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; transform: translateZ(30px); }
.card-3d__body h3, .card-3d__body h4 { margin: 0; font-size: 1.25rem; }
.card-3d__body p { color: var(--ink-soft); margin: 0; font-size: .96rem; line-height: 1.6; }
.card-3d__foot { margin-top: auto; padding-top: .9rem; }

@media (hover: hover) {
  .card-3d:hover { box-shadow: var(--shadow-lg); }
  .card-3d:hover::before { transform: translateX(120%); opacity: 1; }
  .card-3d:hover .card-3d__media img { transform: none; filter: brightness(1.03); }
}
/* JS tilt sets transform inline; this is the non-hover lift fallback for touch */
@media (hover: none) {
  .card-3d:active { transform: scale(.98); transition: transform .12s ease; }
}

/* Entrance animation via IntersectionObserver .in-view (stagger set inline by JS) */
.reveal-on-scroll, .card-3d, [data-reveal] {
  opacity: 0; transform: translateY(28px) scale(.985);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-on-scroll.in-view, .card-3d.in-view, [data-reveal].in-view {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll, .card-3d, [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* hero copy + any keyframe-in content must not be left invisible */
  .slide-content .hero-text-item { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Missing-image placeholder (FIX 5 — services with no image) */
.card-3d__placeholder {
  height: 220px; display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand-soft); color: var(--primary-color);
}
.card-3d__placeholder i { font-size: 3.4rem; opacity: .65; }
.rd-badge-soon {
  position: absolute; top: 14px; left: 14px; z-index: 4;
  background: rgba(0,0,0,.55); color:#fff; font-size:.72rem; font-weight:600;
  letter-spacing: .08em; text-transform: uppercase; padding: .35rem .7rem; border-radius: var(--r-pill);
}

/* ==========================================================================
   MODALS (FIX 3) — override Bootstrap entirely
   ========================================================================== */
.modal-backdrop.show { opacity: 0; transition: opacity .25s var(--ease-soft); }
.modal-backdrop.rd-in { opacity: .55; }
.modal { backdrop-filter: blur(2px); }
.modal .modal-content {
  border: none !important; border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg); overflow: hidden;
  opacity: 0; transform: scale(.92);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.modal.rd-in .modal-content { opacity: 1; transform: scale(1); }
.modal.rd-out .modal-content { opacity: 0; transform: scale(.96); transition: opacity .2s var(--ease-soft), transform .2s var(--ease-soft); }
.modal .modal-header {
  border-bottom: none !important; padding: 1.5rem 1.6rem .25rem;
  align-items: flex-start;
}
.modal .modal-title { font-family: var(--font-display); font-size: 1.5rem; }
.modal .modal-body { padding: 1.25rem 1.6rem 1.75rem; }
/* circular ghost close button */
.modal .btn-close, .rd-modal-close {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-soft);
  background: var(--surface-alt); opacity: 1; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--ink); cursor: pointer; transition: all .25s var(--ease-out); padding: 0;
}
.modal .btn-close::before, .rd-modal-close::before { content: "\00d7"; line-height: 1; }
.modal .btn-close { background-image: none; }
.modal .btn-close:hover, .rd-modal-close:hover {
  background: var(--primary-color); color: #fff; border-color: var(--primary-color); transform: rotate(90deg);
}
.modal .form-control, .rd-input {
  border-radius: var(--r-sm); border: 1.5px solid var(--border-soft); padding: .7rem .9rem;
  transition: border-color .2s, box-shadow .2s;
}
.modal .form-control:focus, .rd-input:focus {
  border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--primary-soft); outline: none;
}

/* ==========================================================================
   HEADER / NAVBAR (FIX 6)
   ========================================================================== */
.header_01 {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  padding: 14px 0; background: transparent;
  transition: background .35s var(--ease-out), box-shadow .35s var(--ease-out), padding .35s var(--ease-out);
}
.header_01.scrolled {
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: var(--shadow-sm); padding: 8px 0;
}
/* When not over a hero (inner pages), force solid so links are visible.
   Nav stays position:fixed (set above); body padding-top offsets it exactly once. */
body.rd-solid-nav .header_01 { background: rgba(255,255,255,.96); box-shadow: var(--shadow-sm); }
body:not(.rd-has-hero) { padding-top: 72px; }   /* offset fixed nav on non-hero pages */

/* Force a clean single-row header (override legacy theme.css grid/floats) */
.header_01 .container-fluid { max-width: 1320px; margin: 0 auto; }
.header_01 .container-fluid > .row {
  display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
  margin: 0; gap: 12px;
}
.header_01 .cusLogo { flex: 0 0 auto; width: auto !important; max-width: none !important; padding: 0; }
.header_01 .menu-col { flex: 1 1 auto; width: auto !important; max-width: none !important; padding: 0; }
.header_01 .nav-actions { flex: 0 0 auto; width: auto !important; max-width: none !important; padding: 0 0 0 32px; margin-left: auto; }
.header_01 .mainMenu ul li a { white-space: nowrap; }   /* no 2-line labels */

.header_01 .imglogo { width: 64px; height: auto; max-height: 52px; object-fit: contain; transition: width .35s var(--ease-out); }
.header_01.scrolled .imglogo { width: 56px; }

.mainMenu ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; align-items: center; justify-content: center; flex-wrap: nowrap; }
.mainMenu ul li a {
  position: relative; display: block; padding: 8px 11px; font-weight: 600; font-size: .92rem;
  color: var(--ink); text-decoration: none;
}
.mainMenu ul li a::after { left: 11px; right: 11px; }   /* match tighter padding */
.header_01 .menu-col { min-width: 0; }                  /* allow flexbox to size correctly */
body.rd-has-hero .header_01:not(.scrolled) .mainMenu ul li a { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.mainMenu ul li a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out); border-radius: 2px;
}
.mainMenu ul li a:hover::after,
.mainMenu ul li.current-menu-item a::after { transform: scaleX(1); }
.mainMenu ul li a:hover, .mainMenu ul li.current-menu-item a { color: var(--primary-color); }
body.rd-has-hero .header_01:not(.scrolled) .mainMenu ul li a:hover { color: #fff; }

/* cart icon */
.nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.header_01 .nav-actions a.cart-icon {
  position: relative; width: 44px; height: 44px; min-width: 44px; border-radius: 50%;
  display: inline-flex !important; align-items: center; justify-content: center;
  background-color: var(--primary-color) !important; background-image: none !important;
  color: #fff !important; text-decoration: none; flex-shrink: 0;
  box-shadow: var(--shadow-sm); z-index: 1000;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.header_01 .nav-actions a.cart-icon:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-glow); color: #fff !important;
  background-color: var(--primary-color) !important;
}
.header_01 .nav-actions a.cart-icon .cart-icon__svg {
  width: 20px; height: 20px; display: block; flex-shrink: 0;
}
.header_01 .nav-actions a.cart-icon i {
  font-size: 1.15rem; line-height: 1; color: #fff !important;
}
.cart-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--grad-brand); color: #fff; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* Hamburger -> right drawer */
.hamburger-menu { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburger-menu .bar { display: block; width: 26px; height: 2.5px; margin: 5px 0; border-radius: 2px;
  background: var(--ink); transition: .3s var(--ease-out); }
body.rd-has-hero .header_01:not(.scrolled) .hamburger-menu .bar { background: #fff; }

.rd-drawer {
  position: fixed; top: 0; right: 0; width: min(82vw, 340px); height: 100dvh; z-index: 1100;
  background: var(--surface); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform .35s var(--ease-out);
  padding: 84px 0 24px; overflow-y: auto;
}
.rd-drawer.open { transform: translateX(0); }
.rd-drawer ul { list-style: none; margin: 0; padding: 0; }
.rd-drawer li a { display: block; padding: 15px 26px; color: var(--ink); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--border-soft); transition: background .2s, color .2s; }
.rd-drawer li a:hover { background: var(--primary-tint); color: var(--primary-color); padding-left: 32px; }
.rd-drawer__close { position: absolute; top: 22px; right: 22px; }
.rd-overlay {
  position: fixed; inset: 0; z-index: 1050; background: rgba(10,6,14,.5);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-out), visibility .35s;
  backdrop-filter: blur(2px);
}
.rd-overlay.open { opacity: 1; visibility: visible; }

@media (max-width: 991px) {
  .menu-col { display: none !important; }
  .hamburger-menu { display: block; }
  body:not(.rd-has-hero) { padding-top: 66px; }
}
@media (min-width: 992px) { .rd-drawer, .rd-overlay { display: none; } }

/* ==========================================================================
   FOOTER (FIX 6)
   ========================================================================== */
.footer_01 {
  background: var(--surface-darker); color: rgba(255,255,255,.75);
  padding: var(--space-xl) 0 0 !important; position: relative; margin-top: 0; margin-bottom: 0;
}
.footer_01 .widget_title { color: #fff; font-size: 1.25rem; margin-bottom: 1.1rem; }
.footer_01 p, .footer_01 .info_box p { color: rgba(255,255,255,.68); }
.footer_01 a { color: rgba(255,255,255,.8); }
.footer_01 a:hover { color: #fff; }
.footer_01 .info_box {
  display: flex; gap: .85rem; align-items: flex-start;
  margin-bottom: 1.35rem !important; padding-left: 0 !important;
}
.footer_01 .info_box:last-child { margin-bottom: 0 !important; }
.footer_01 .info_box i {
  position: static !important; flex-shrink: 0;
  height: 49px; width: 49px; font-size: 16px;
  background: #f7a392; border-radius: 50%;
  text-align: center; line-height: 49px;
  color: #fff !important; margin-top: 0 !important;
}

.rd-news { display: flex; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-pill); padding: 5px 5px 5px 18px; max-width: 360px;
  transition: box-shadow .25s, border-color .25s; }
.rd-news:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--primary-soft); }
.rd-news input { flex: 1; background: none; border: none; color: #fff; outline: none; font-size: .95rem; }
.rd-news input::placeholder { color: rgba(255,255,255,.5); }
.rd-news button { width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--grad-brand); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .25s var(--ease-out); }
.rd-news button:hover { transform: scale(1.08); }

.rd-social { display: flex; gap: 10px; margin-top: 1.2rem; }
.rd-social a { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.2); color: #fff; position: relative; overflow: hidden;
  transition: color .3s var(--ease-out); }
.rd-social a::before { content: ""; position: absolute; inset: 0; background: var(--grad-brand);
  transform: scale(0); border-radius: 50%; transition: transform .3s var(--ease-out); z-index: -1; }
.rd-social a:hover { border-color: transparent; }
.rd-social a:hover::before { transform: scale(1.4); }

.rd-footer-bottom {
  margin-top: var(--space-lg); margin-bottom: 0; border-top: 2px solid var(--primary-color);
  padding: 1.3rem 0; font-size: .9rem; color: rgba(255,255,255,.6);
}
.rd-footer-bottom .container { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; }
.rd-footer-bottom a { color: rgba(255,255,255,.6); }

/* ==========================================================================
   ABOUT GRID + general layout fixes (FIX 5)
   ========================================================================== */
.rd-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.rd-about-grid .rd-about-media { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rd-about-grid .rd-about-media img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.rd-about-grid .rd-about-media .tall { grid-row: span 2; }
@media (max-width: 900px) { .rd-about-grid { grid-template-columns: 1fr; gap: var(--space-md); } }

.rd-feature-list { display: grid; gap: 1.1rem; margin: 1.6rem 0; }
.rd-feature-list .featureItem { display: grid; grid-template-columns: auto 1fr; gap: .9rem 1rem; align-items: start; }
.rd-feature-list .featureItem i { color: var(--primary-color); font-size: 1.5rem; grid-row: span 2; }
.rd-feature-list .featureItem h4 { margin: 0; font-size: 1.1rem; }
.rd-feature-list .featureItem p { margin: 0; color: var(--ink-soft); }

/* page banner for inner pages */
.page_banner {
  padding: calc(78px + var(--space-lg)) 0 var(--space-lg);
  background: var(--grad-brand); color: #fff; position: relative; overflow: hidden;
}
.page_banner .banner-title { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 .5rem; }
.page_banner .breadcrumbs, .page_banner .breadcrumbs a { color: rgba(255,255,255,.9); }
.page_banner .breadcrumbs span { margin: 0 .5rem; opacity: .7; }

/* contact info cards */
.rd-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); }
.rd-info-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 1.8rem 1.5rem; text-align: center; }
.rd-info-card .rd-info-ic { width: 60px; height: 60px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-brand-soft); color: var(--primary-color); font-size: 1.6rem; margin-bottom: 1rem; }
.rd-info-card h4 { margin: 0 0 .4rem; font-size: 1.1rem; }
.rd-info-card p, .rd-info-card a { color: var(--ink-soft); margin: 0; word-break: break-word; }

/* contact.php � remove legacy extra white gap below form/map */
.contactSection { padding: 0 !important; }
section.rd-section.contactSection {
  padding: var(--space-xl) 0 var(--space-md) !important;
}
.google_map {
  height: auto !important;
  line-height: normal !important;
  overflow: visible !important;
}
.google_map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* Modern form grid (contact / appointments / checkout) */
.rd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.3rem; }
.rd-form-grid .rd-field--full { grid-column: 1 / -1; }
.rd-field { display: flex; flex-direction: column; gap: .4rem; }
.rd-field label { font-weight: 600; font-size: .9rem; color: var(--ink); }
.rd-input {
  width: 100%; border-radius: var(--r-sm); border: 1.5px solid var(--border-soft);
  padding: .7rem .9rem; background: var(--surface); color: var(--ink); font: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.rd-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--primary-soft); outline: none; }
textarea.rd-input { resize: vertical; min-height: 120px; }
@media (max-width: 600px) { .rd-form-grid { grid-template-columns: 1fr; } }

/* gallery / instagram strip */
.my_instagram { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: var(--space-lg); }
.my_instagram a { overflow: hidden; }
.my_instagram img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s var(--ease-out); }
.my_instagram a:hover img { transform: scale(1.1); }
@media (max-width: 900px) { .my_instagram { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .my_instagram { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   RESPONSIVE (FIX 7)
   ========================================================================== */
@media (max-width: 991px) {
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 600px) {
  .card-grid, .skeleton-grid { grid-template-columns: 1fr; }
  .rd-section-head p { font-size: 1rem; }
}
input, select, textarea, button, .btn { min-height: 44px; }     /* tap targets */

/* ==========================================================================
   Legacy template card classes mapped onto the new look
   (so existing markup on pages we haven't fully rewritten still looks modern)
   ========================================================================== */
.service_item_01, .blog_item_01, .trust-strip__item .tilt-card,
.package_item, .membership-card, .product_item, .team_item {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 1.8rem; transition: transform .15s ease-out, box-shadow .35s var(--ease-out);
  height: 100%;
}
.blog_item_01 { padding: 0; overflow: hidden; }
.blog_item_01 img { width: 100%; height: 220px; object-fit: cover; transition: transform .4s var(--ease-out); }
.blog_item_01 .bp_content { padding: 1.4rem 1.5rem 1.6rem; }
@media (hover: hover){
  .blog_item_01:hover img { transform: scale(1.07); }
}

/* ==========================================================================
   HERO fixes (sits behind transparent fixed nav) + fluid text (FIX 5 + 7)
   ========================================================================== */
.rd-has-hero .simple-slider-section { margin-top: 0 !important; }
.simple-slider-section .slide-content h1 {
  font-family: var(--font-display); color: #fff;
  font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: 1.05; margin: 0 0 1rem;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.simple-slider-section .slide-content p {
  color: rgba(255,255,255,.92); font-size: clamp(1rem, 2.2vw, 1.4rem);
  margin: 0 auto 1.8rem; max-width: 640px; text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.simple-slider-section .slide-content { padding: 0 1.2rem; width: min(900px, 92vw); }

/* Back to top — branded */
#backtotop {
  position: fixed; right: 22px; bottom: 22px; z-index: 800;
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-brand); color: #fff !important; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
#backtotop.show { opacity: 1; visibility: visible; transform: none; }
#backtotop:hover { box-shadow: var(--shadow-glow); transform: translateY(-3px); }

/* ==========================================================================
   Inner-page banner cleanup (FIX 5) — drop dated torn-paper layer images
   ========================================================================== */
.page_banner .layer_img, .page_banner .page_layer, .page_banner .pnl { display: none !important; }
.page_banner .container { position: relative; z-index: 2; }
.page_banner .row { justify-content: center; text-align: center; }
.page_banner .col-lg-5, .page_banner [class*="offset"] { margin-left: 0 !important; }
.page_banner .breadcrumbs { justify-content: center; display: flex; gap: .25rem; }

/* ==========================================================================
   AJAX service cards (services.php) — consistent cards + missing-image fallback
   ========================================================================== */
.service-category-card, .service-subcategory-card, .service-card {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  overflow: hidden; height: 100%; cursor: pointer;
  transition: transform .15s ease-out, box-shadow .35s var(--ease-out);
  display: flex; flex-direction: column;
}
.service-category-card .svc-media, .service-subcategory-card .svc-media, .service-card .svc-media,
.service-category-card > img, .service-subcategory-card > img, .service-card > img {
  position: relative; height: auto; overflow: hidden; display: block;
  background: var(--grad-brand-soft);
}
.svc-media img { width: 100%; height: auto; object-fit: unset; display: block;
  transition: transform .4s var(--ease-out), filter .4s var(--ease-out); }
.svc-media.svc-noimg { display: flex; align-items: center; justify-content: center; }
.svc-media.svc-noimg::after {
  content: ""; width: 64px; height: 64px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23800080' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5L5 19'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (hover: hover) {
  .service-category-card:hover .svc-media img,
  .service-subcategory-card:hover .svc-media img,
  .service-card:hover .svc-media img { transform: none; filter: brightness(1.03); }
}
.service-card-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.service-card-body h4, .service-card-body h5 { margin: 0; font-size: 1.15rem; }
.service-card-body .service-desc {
  color: var(--ink-soft); font-size: .92rem; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.service-card-body .service-rate { color: var(--primary-color); font-weight: 700; font-size: 1.1rem; }
.service-card-body .btn-block { width: 100%; margin-top: auto !important; }

/* Cart toast safety (positioning) */
.cart-notification {
  position: fixed; top: 90px; right: 20px; width: min(340px, 92vw); z-index: 1200;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  display: none; overflow: hidden;
}
.cart-notification__inner { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; }
.cart-notification__icon { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; background: var(--grad-brand); color: #fff; }
.cart-notification__actions { display: flex; gap: .6rem; padding: 0 1.1rem 1rem; }

/* ==========================================================================
   CART page (cart.php) — item rows + summary card
   ========================================================================== */
.cart-item-card {
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  padding: 1rem 1.2rem; margin-bottom: 1rem;
  transition: box-shadow .3s var(--ease-out);
}
.cart-item-card:hover { box-shadow: var(--shadow-md); }
.cart-item-card img { border-radius: var(--r-sm); }
.cart-item-card h5 { margin: 0 0 .25rem; font-size: 1.05rem; }
.cart-summary, .checkout-summary-card {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 1.8rem; position: sticky; top: 96px;
}
.cart-summary h4, .checkout-summary-card h4 { margin: 0 0 1.2rem; font-size: 1.3rem; }
.cart-summary .grand-total, .checkout-summary-card .grand-total { color: var(--primary-color); font-size: 1.35rem; }
.cart-summary hr { border-color: var(--border-soft); }
.btn-block { width: 100%; justify-content: center; }
.quantity-controls input { border-radius: var(--r-sm) !important; }
.quantity-controls .btn { border-radius: 50% !important; }

/* ==========================================================================
   CHECKOUT page (checkout.php, WooCommerce-style markup) — fix contrast/layout
   ========================================================================== */
.cartPage { background: var(--surface-alt) !important; padding: var(--space-xl) 0; }
.cartPage .woocommerce-billing-fields,
.cartPage #order_review {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 2rem; margin-bottom: var(--space-md);
}
.cartPage .woocommerce-billing-fields h3,
.cartPage #order_review h3 { margin-top: 0; font-size: 1.4rem; }
.cartPage .woocommerce input[type="text"],
.cartPage .woocommerce input[type="email"],
.cartPage .woocommerce input[type="tel"],
.cartPage .woocommerce input[type="password"],
.cartPage .woocommerce input[type="number"],
.cartPage .woocommerce textarea,
.cartPage .woocommerce select,
.cartPage .woocommerce .input-text {
  width: 100%; border: 1.5px solid var(--border-soft); border-radius: var(--r-sm);
  padding: .7rem .9rem; background: var(--surface); color: var(--ink); font: inherit;
  margin-bottom: .3rem; transition: border-color .2s, box-shadow .2s;
}
.cartPage .woocommerce input:focus,
.cartPage .woocommerce textarea:focus,
.cartPage .woocommerce select:focus {
  border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--primary-soft); outline: none;
}
.cartPage .woocommerce label,
.cartPage .woocommerce p,
.cartPage .woocommerce td,
.cartPage .woocommerce th { color: var(--ink); }
.cartPage .shop_table { width: 100%; }
.cartPage .shop_table th, .cartPage .shop_table td { padding: .7rem .4rem; border-bottom: 1px solid var(--border-soft); }
.cartPage #place_order,
.cartPage .woocommerce #place_order,
.cartPage button#place_order {
  background: var(--grad-brand) !important; color: #fff !important; border: none !important;
  border-radius: var(--r-pill) !important; padding: .9rem 2rem !important; font-weight: 600;
  width: 100%; margin-top: 1rem; box-shadow: var(--shadow-sm);
}
.cartPage #place_order:hover { box-shadow: var(--shadow-glow); transform: translateY(-2px); }

.luxury-footer{
  background: linear-gradient(
      180deg,
      #f8f3f8 0%,
      #f3eef5 100%
  );
  border-top: 1px solid #e8dceb;
  color: #444;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.footer-top{
  padding:40px 0 20px;
  text-align:center;
  border-bottom:1px solid rgba(128,0,128,.08);
}

.footer-logo img{
  height:65px;
  width:auto;
  margin-bottom:10px;
}

.footer-top h2{
  font-size:28px;
  margin-bottom:8px;
  color:#1f1f1f;
}

.footer-top p{
  font-size:14px;
  color:#777;
  margin-bottom:15px;
}

.footer-social{
  display:flex;
  justify-content:center;
  gap:10px;
}

.footer-social a{
  width:40px;
  height:40px;
  border-radius:50%;
  background:#fff;
  color:var(--primary-color);
  box-shadow:0 5px 15px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.3s;
}

.footer-social a:hover{
  background:var(--primary-color);
  color:#fff;
  transform:translateY(-3px);
}

.footer-main{
  padding:30px 0 15px;
}

.footer-widget{
  height:100%;
}

.footer-widget h4{
  margin-bottom:15px;
}

.footer-widget ul li{
  margin-bottom:10px;
}
.footer-widget h4{
  font-size:18px;
  margin-bottom:18px;
  color:#1f1f1f;
}

.footer-widget p,
.footer-widget li,
.footer-widget a{
  font-size:14px;
  color:#666;
  line-height:1.7;
}

.footer-widget ul{
  margin:0;
  padding:0;
  list-style:none;
}

.footer-widget li{
  margin-bottom:8px;
}

.footer-widget a:hover{
  color:var(--primary-color);
}

.contact-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.contact-list i{
  color:var(--primary-color);
  font-size:16px;
  margin-top:4px;
}

.hours-list span{
  float:right;
  font-weight:600;
  color:#333;
}

.footer-book-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 22px;
  margin-top:12px;
  border-radius:30px;
  background:linear-gradient(
      135deg,
      var(--primary-color),
      var(--secondary-color)
  );
  color:#fff !important;
  font-size:14px;
  font-weight:600;
}

.footer-bottom{
  background:#ece5f0;
  border-top:1px solid #ddd0e2;
  padding:12px 0;
}

.footer-bottom p,
.footer-bottom a{
  color:#555;
}

.footer-bottom-wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
}

.footer-bottom p{
  margin:0;
  color:#777;
  font-size:13px;
}

.footer-links{
  display:flex;
  gap:18px;
}

.footer-links a{
  color:#666;
  font-size:13px;
}
.my_instagram{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

.my_instagram + .luxury-footer{
  margin-top:0 !important;
}

.footer-main{
  margin-top:0 !important;
}
.my_instagram{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

.luxury-footer{
  margin-top:0 !important;
}

.footer-top{
  padding-top:25px !important;
}
/* ==========================================
   FOOTER LAYOUT FIX
========================================== */

.footer-main{
  padding-top:40px;
  padding-bottom:20px;
  border-top:1px solid rgba(0,0,0,.08);
}

.footer-widget{
  height:100%;
}

.footer-widget h4{
  font-size:24px;
  font-weight:700;
  margin-bottom:22px;
  color:#1f2340;
}

.footer-widget p{
  font-size:15px;
  line-height:1.9;
  color:#666;
  margin:0;
}

.footer-links-list,
.contact-list{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-links-list li{
  margin-bottom:12px;
}

.footer-links-list a{
  color:#555;
  text-decoration:none;
  transition:.3s;
}

.footer-links-list a:hover{
  color:#b10dc9;
  padding-left:5px;
}

.contact-list li{
  display:flex;
  align-items:flex-start;
  gap:15px;
  margin-bottom:18px;
  color:#555;
  line-height:1.7;
}

.contact-list i{
  color:#b10dc9;
  font-size:18px;
  margin-top:4px;
  width:18px;
}

.contact-list a{
  color:#555;
  text-decoration:none;
}

.contact-list a:hover{
  color:#b10dc9;
}

.footer-about{
  padding-right:40px;
}

/* Mobile */

@media(max-width:991px){

  .footer-main{
      text-align:center;
  }

  .footer-about{
      padding-right:0;
      margin-bottom:30px;
  }

  .footer-widget{
      margin-bottom:30px;
  }

  .contact-list li{
      justify-content:center;
  }
}

.hero-rating-card .stars{
  display:flex;
  gap:4px;
  margin-bottom:10px;
}

.hero-rating-card .stars i{
  color:#d4af37 !important;
  font-size:18px;
  text-shadow:0 2px 8px rgba(212,175,55,.4);
}