/*
 * Theme Name:  Jain X Cyber City Park
 * Theme URI:   https://conservex.in
 * Description: Custom WordPress landing page theme for Jain X Cyber City Park — Smart Studios, Greater Noida. Built by Conservex Infomedia.
 * Version:     1.0.0
 * Author:      Conservex Infomedia
 * Author URI:  https://conservex.in
 * License:     Private / Commercial
 * Text Domain: jainx-cyber
 */

/* ============================================================
   TABLE OF CONTENTS
   1.  CSS Custom Properties (Design Tokens)
   2.  Reset & Base
   3.  Typography Utilities
   4.  Layout — Wrap, Grid, Content, Sidebar
   5.  Topbar / Header
   6.  Section Base & Cards
   7.  Utility Grids (g2, g3, g4)
   8.  Bullet Lists
   9.  Buttons
   10. Hero Section
   11. Hero Slider
   12. USP Bar
   13. Gallery
   14. Floor Plans
   15. Site Plan
   16. Amenities
   17. Location
   18. Pricing
   19. Discount CTA
   20. Lead Capture Form (Sidebar)
   21. Mobile Sticky CTA Bar
   22. Footer
   23. Scroll Reveal Animations
   24. Admin Bar Offset Fix
   25. WordPress Block Editor Resets
   26. Responsive Overrides
   27. Print Styles
   ============================================================ */

/* NOTE: Google Fonts are loaded via wp_enqueue_style() in functions.php.
   Do NOT @import them here — that causes a double request. */


/* ============================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */
:root {
  /* Palette */
  --bg:        #f5f3ef;
  --card:      #ffffff;
  --card2:     #faf8f4;
  --text:      #111111;
  --muted:     #5f5a54;
  --line:      rgba(0, 0, 0, 0.08);
  --gold:      #c79a3b;
  --gold2:     #e2c06d;
  --black:     #111111;

  /* Shadows */
  --shadow:    0 12px 36px rgba(0, 0, 0, 0.07);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);

  /* Radius */
  --radius:    22px;
  --radius-sm: 16px;

  /* Typography */
  --font-body: 'Poppins', 'Lato', system-ui, sans-serif;

  /* Transitions */
  --ease: 0.22s ease;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-padding-top: 80px; /* offset for sticky topbar */
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

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

ul { list-style: none; }

button {
  cursor: pointer;
  font-family: var(--font-body);
  background: none;
  border: none;
}

input,
select,
textarea {
  font-family: var(--font-body);
}

/* Global placeholder style */
::placeholder {
  color: #b0a89e;
  opacity: 1;
}

/* Global focus-visible ring — keyboard navigation */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Smooth selection highlight */
::selection {
  background: rgba(199, 154, 59, 0.22);
  color: var(--text);
}

/* WordPress core image alignment */
.alignleft  { float: left;  margin-right: 1rem; }
.alignright { float: right; margin-left: 1rem;  }
.aligncenter { display: block; margin-inline: auto; }


/* ============================================================
   3. TYPOGRAPHY UTILITIES
   ============================================================ */
h2.sh {
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
  line-height: 1.2;
}

p.lead {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
  max-width: 60ch;
}

.divider {
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}

.section-note {
  margin-top: 12px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
}


/* ============================================================
   4. LAYOUT — WRAP, GRID, CONTENT, SIDEBAR
   ============================================================ */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 36px;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-top: 16px;
}

@media (min-width: 992px) {
  .layout {
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.9fr);
  }
}

.content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.sidebar {
  min-width: 0;
}

@media (min-width: 992px) {
  .layout {
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.9fr);
    align-items: start;
  }

  .sidebar {
    position: sticky;
    top: 78px;
    align-self: start;
  }

  .sticky-wrap {
    position: static;
  }

  .admin-bar .sidebar {
    top: 110px;
  }
}
@media (max-width: 991px) {
  .sidebar {
    position: static;
    top: auto;
  }

  .sticky-wrap {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* ============================================================
   5. TOPBAR / HEADER
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--ease);
}

/* Admin bar offsets — single canonical block */
.admin-bar .topbar { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .topbar { top: 46px; }
}

.topbar.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 12px;
  flex-wrap: wrap;
}

/* Brand / Logo */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(145deg, #111, #3a3a3a);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* Logo when set as an image (WP Customizer / ACF) */
.logo img {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  object-fit: cover;
}

.brand-text h1 {
  font-size: 14px;
  line-height: 1.15;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-text p {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--muted);
}

/* Top Nav */
.topnav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: #fff;
  white-space: nowrap;
}

.pill.gold {
  border-color: rgba(199, 154, 59, 0.35);
  color: var(--gold);
  font-weight: 600;
}

.callbtn {
  background: #111;
  color: #fff;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--ease), transform var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.callbtn:hover {
  background: #333;
  transform: translateY(-1px);
}


/* ============================================================
   6. SECTION BASE & CARDS
   ============================================================ */
section,
.hero-wrap,
.form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pad {
  padding: 20px;
}

/* Inner card (card2 style) */
.card {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
}


/* ============================================================
   7. UTILITY GRIDS
   ============================================================ */
.g2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}

@media (min-width: 640px) {
  .g2 { grid-template-columns: 1fr 1fr; }
}

.g3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 640px) {
  .g3 { grid-template-columns: repeat(3, 1fr); }
}

.g4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}

@media (min-width: 640px) {
  .g4 { grid-template-columns: repeat(4, 1fr); }
}


/* ============================================================
   8. BULLET LISTS
   ============================================================ */
.blist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.blist li {
  padding-left: 18px;
  position: relative;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.blist li::before {
  content: "●";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 10px;
  top: 4px;
}


/* ============================================================
   9. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 11px 18px;
  font: 600 13px/1 var(--font-body);
  cursor: pointer;
  transition: transform var(--ease), filter var(--ease), background var(--ease);
  text-decoration: none;
  will-change: transform;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn.dark {
  background: #111;
  color: #fff;
}

.btn.dark:hover {
  background: #333;
}

.btn.gold {
  background: linear-gradient(135deg, #f3dfac, #c79a3b);
  color: #111;
}

.btn.gold:hover {
  filter: brightness(1.05);
}

.btn.full {
  width: 100%;
  justify-content: center;
  border-radius: 14px;
  padding: 13px;
}


/* ============================================================
   10. HERO SECTION
   ============================================================ */
.hero-wrap {
  /* inherits section base styles */
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

/* Hero Copy — Left */
.hero-copy {
  padding: 22px 20px;
}

.kicker {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 10px;
}

.htitle {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}

.htitle span {
  color: var(--gold);
}

.hsub {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 44ch;
}

/* Hero Meta Tiles */
.hmeta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}

@media (min-width: 480px) {
  .hmeta { grid-template-columns: repeat(4, 1fr); }
}

.mitem {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}

.mitem strong {
  display: block;
  font-size: 11px;
  color: var(--gold);
  margin-bottom: 4px;
}

.mitem span {
  font-size: 12px;
  color: var(--muted);
}

/* Hero Buttons */
.hbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.rera {
  font-size: 11px;
  color: var(--muted);
  margin-top: 10px;
}


/* ============================================================
   11. HERO SLIDER — Right Side
   ============================================================ */
.hero-slider {
  position: relative;
  min-height: 290px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .hero-slider { min-height: 220px; }
}

/* Individual slide */
.sl-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.9s ease;
  will-change: opacity;
}

.sl-img.on {
  opacity: 1;
}

/* Dark gradient overlay at bottom */
.sl-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.15) 55%,
    transparent 100%
  );
  pointer-events: none;
}

/* Caption container */
.sl-body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  color: #fff;
}

.sl-caption {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 14px;
}

.sl-caption h3 {
  font-size: 17px;
  margin-bottom: 6px;
  font-weight: 600;
  color: #fff;
}

.sl-caption p {
  font-size: 12px;
  opacity: 0.85;
  line-height: 1.55;
  margin-bottom: 10px;
  color: #fff;
}

/* Dots */
.sl-dots {
  display: flex;
  gap: 7px;
}

.sl-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  transition: width 0.3s ease, background 0.3s ease;
  cursor: pointer;
  will-change: width;
}

.sl-dot.on {
  width: 22px;
  background: var(--gold2);
}


/* ============================================================
   12. USP BAR
   ============================================================ */
.usp-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 16px;
}

@media (min-width: 640px) {
  .usp-bar { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .usp-bar { grid-template-columns: repeat(6, 1fr); }
}

.usp-item {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  transition: transform var(--ease), box-shadow var(--ease);
  will-change: transform;
}

.usp-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.usp-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  font-size: 18px;
}

.usp-item strong {
  display: block;
  font-size: 12px;
  margin-bottom: 3px;
  font-weight: 600;
  color: var(--text);
}

.usp-item span {
  font-size: 11px;
  color: var(--muted);
}


/* ============================================================
   13. GALLERY
   ============================================================ */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}

@media (min-width: 640px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}

.gshot {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  height: 160px;
  background: #e8e4dd;
  cursor: pointer;
}

.gshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  will-change: transform;
}

.gshot:hover img {
  transform: scale(1.05);
}

.gcap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  padding: 20px 10px 10px;
  font-size: 11px;
  line-height: 1.4;
}


/* ============================================================
   14. FLOOR PLANS
   ============================================================ */
.fp-card {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.fp-tag {
  background: #111;
  color: #fff;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.fp-area {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
}

.fp-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Floor plan CSS diagram */
.fp-visual {
  background: linear-gradient(135deg, #f0ede7, #e5e0d8);
  border-radius: 14px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.fp-room {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
}

.fp-room .ricon  { font-size: 20px; }
.fp-room .rlabel { letter-spacing: 0.06em; text-transform: uppercase; font-size: 9px; font-weight: 600; }
.fp-room .rdim   { font-size: 9px; color: var(--gold); font-weight: 600; }

/* Floor plan layout grids */
.fp-layout {
  display: grid;
  gap: 6px;
}

.fp-layout.l525 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}

.fp-layout.l725 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
}

/* Balcony note strip */
.fp-balcony-note {
  margin-top: 10px;
  background: rgba(199, 154, 59, 0.12);
  border-radius: 10px;
  padding: 8px;
  font-size: 11px;
  color: var(--gold);
  text-align: center;
  font-weight: 500;
}

/* Floor plan badges */
.fp-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.fp-badge {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #fff;
  font-weight: 500;
}


/* ============================================================
   15. SITE PLAN
   ============================================================ */
.siteplan {
  background: linear-gradient(135deg, #f0ede7, #e5e0d8);
  border-radius: 18px;
  padding: 20px;
  margin-top: 14px;
}

.siteplan-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.sp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

@media (min-width: 640px) {
  .sp-grid { grid-template-columns: repeat(3, 1fr); }
}

.sp-zone {
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
}

.sp-zone.it  { background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.25); color: #1d4ed8; }
.sp-zone.res { background: rgba(34,197,94,.12);  border: 1px solid rgba(34,197,94,.25);  color: #15803d; }
.sp-zone.com { background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.25); color: #c2410c; }
.sp-zone.hot { background: rgba(168,85,247,.12); border: 1px solid rgba(168,85,247,.25); color: #7e22ce; }
.sp-zone.ins { background: rgba(236,72,153,.12); border: 1px solid rgba(236,72,153,.25); color: #be185d; }
.sp-zone.sco { background: rgba(234,179,8,.12);  border: 1px solid rgba(234,179,8,.25);  color: #a16207; }

.sp-zone strong { display: block; font-size: 12px; margin-bottom: 2px; }
.sp-zone span   { font-size: 11px; opacity: 0.85; }

.sp-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  flex-shrink: 0;
}

.sp-dot.it  { background: #3b82f6; }
.sp-dot.res { background: #22c55e; }
.sp-dot.com { background: #f97316; }
.sp-dot.hot { background: #a855f7; }
.sp-dot.ins { background: #ec4899; }
.sp-dot.sco { background: #eab308; }

.sp-entry {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.sp-entry-pill {
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--muted);
}


/* ============================================================
   16. AMENITIES
   ============================================================ */
.am-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}

@media (min-width: 640px) {
  .am-grid { grid-template-columns: repeat(3, 1fr); }
}

.am-card {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  transition: transform var(--ease), box-shadow var(--ease);
  will-change: transform;
}

.am-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.am-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 18px;
}

.am-card strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--text);
}

.am-card span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
}


/* ============================================================
   17. LOCATION
   ============================================================ */
.loc-map {
  border-radius: 16px;
  overflow: hidden;
  height: 200px;
  background: #e0dbd2;
  border: 1px solid var(--line);
  margin-top: 14px;
  position: relative;
}

.loc-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.dist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.dist-card {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  transition: transform var(--ease);
  will-change: transform;
}

.dist-card:hover {
  transform: translateY(-1px);
}

.dist-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 16px;
}

.dist-card strong {
  display: block;
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 2px;
  font-weight: 600;
}

.dist-card span {
  font-size: 11px;
  color: var(--muted);
}


/* ============================================================
   18. PRICING
   ============================================================ */
.price-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.price-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.price-badge {
  background: #111;
  color: #fff;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.price-nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.pnum-card {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
}

.pnum-card .label   { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.pnum-card .val     { font-size: 16px; font-weight: 700; color: var(--gold); }
.pnum-card .old     { font-size: 11px; color: var(--muted); text-decoration: line-through; }
.pnum-card .val-orange { font-size: 16px; font-weight: 700; color: #e67e22; }

/* Pricing Table */
.ptable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.ptable th,
.ptable td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.ptable th {
  color: var(--gold);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ptable tr:last-child td {
  border-bottom: none;
}

.ptable tr:hover td {
  background: rgba(199, 154, 59, 0.04);
}

/* Other Charges */
.other-charges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.oc {
  font-size: 10px;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
}

.plc-note {
  margin-top: 12px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
}


/* ============================================================
   19. DISCOUNT CTA
   ============================================================ */
.discount-hero {
  background: linear-gradient(135deg, #111 0%, #1f1a10 50%, #2a1f00 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 26px 20px;
  border: 1px solid rgba(199, 154, 59, 0.35);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Decorative gold orb */
.discount-hero::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(199,154,59,.25), transparent 70%);
  pointer-events: none;
}

.d-tag {
  background: var(--gold);
  color: #111;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}

.discount-hero h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.2;
  color: #fff;
}

.discount-hero h3 span {
  color: var(--gold2);
}

.discount-hero > p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  max-width: 52ch;
  margin-bottom: 16px;
}

/* Perks Grid */
.discount-perks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

@media (min-width: 640px) {
  .discount-perks { grid-template-columns: repeat(4, 1fr); }
}

.perk {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  line-height: 1.4;
}

.perk .picon {
  font-size: 20px;
  margin-bottom: 6px;
  display: block;
}

/* Countdown Counter */
.counter {
  background: rgba(199, 154, 59, 0.18);
  border: 1px solid rgba(199, 154, 59, 0.35);
  border-radius: 12px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--gold2);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.counter .cn {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold2);
  transition: transform 0.2s ease;
  will-change: transform;
}

.counter .cn.bump {
  transform: scale(1.25);
}

/* Discount CTA Button */
.dbtn {
  background: linear-gradient(135deg, #f3dfac, #c79a3b);
  color: #111;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: filter var(--ease), transform var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  will-change: transform;
}

.dbtn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}


/* ============================================================
   20. LEAD CAPTURE FORM (SIDEBAR)
   ============================================================ */
.form-card {
  padding: 18px;
  /* inherits section base: background, border, radius, shadow */
}

.form-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}

.form-card .fsub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.6;
}

.lead-form {
  display: grid;
  gap: 10px;
}

.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Inputs, selects, textareas */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  font-family: var(--font-body);
  font-size: 13px;
  background: #fff;
  outline: none;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: rgba(199, 154, 59, 0.55);
  box-shadow: 0 0 0 3px rgba(199, 154, 59, 0.10);
}

textarea {
  min-height: 80px;
  resize: vertical;
  border-radius: 14px;
}

/* Radio group */
.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radio-row label.rlabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-family: var(--font-body);
}

.radio-row label.rlabel:hover {
  border-color: rgba(199, 154, 59, 0.4);
}

/* Radio input reset inside label */
.radio-row label.rlabel input[type="radio"] {
  width: auto;
  accent-color: var(--gold);
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  outline: none;
  -webkit-appearance: auto;
  appearance: auto;
}

.fsub-note {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 4px;
}

/* Submit button */
.fsubmit {
  background: #111;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 13px;
  font: 700 14px/1 var(--font-body);
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--ease), transform var(--ease);
  will-change: transform;
}

.fsubmit:hover {
  background: #222;
  transform: translateY(-1px);
}

.fsubmit:disabled {
  background: #888;
  cursor: not-allowed;
  transform: none;
  will-change: auto;
}

/* Trust badges row */
.trust {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── Loading spinner inside submit ── */
.fsubmit .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Success message ── */
.form-success {
  display: none;
  text-align: center;
  padding: 24px 16px;
}

.form-success.show {
  display: block;
}

.form-success .success-icon {
  font-size: 40px;
  margin-bottom: 12px;
  display: block;
}

.form-success h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.form-success p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* ── Inline field error ── */
.field-error {
  font-size: 11px;
  color: #c0392b;
  margin-top: 4px;
  display: none;
}

.field-error.show {
  display: block;
}

input.invalid,
select.invalid,
textarea.invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}

/* ── Form error alert banner ── */
.form-alert {
  background: #fef3f2;
  border: 1px solid rgba(192, 57, 43, 0.25);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: #c0392b;
  display: none;
  margin-bottom: 10px;
}

.form-alert.show {
  display: block;
}


/* ============================================================
   21. MOBILE STICKY CTA BAR
   ============================================================ */
.m-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1200;
  display: flex;
  gap: 10px;
}

@media (min-width: 992px) {
  .m-cta { display: none; }
}

.m-cta a {
  flex: 1;
  text-align: center;
  padding: 13px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  transition: transform var(--ease), filter var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  will-change: transform;
}

.m-cta a:hover {
  transform: translateY(-1px);
}

.m-cta a.cta-call {
  background: #111;
  color: #fff;
}

.m-cta a.cta-enquire {
  background: linear-gradient(135deg, #f3dfac, #c79a3b);
  color: #111;
}


/* ============================================================
   22. FOOTER
   ============================================================ */
footer {
  padding: 24px 0 70px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

footer a {
  color: var(--gold);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}


/* ============================================================
   23. SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  will-change: opacity, transform;
}

.reveal-stagger.visible > *:nth-child(1)  { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2)  { transition-delay: 0.10s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3)  { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4)  { transition-delay: 0.20s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(5)  { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(6)  { transition-delay: 0.30s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(7)  { transition-delay: 0.35s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(8)  { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(9)  { transition-delay: 0.45s; opacity: 1; transform: translateY(0); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  .sl-img,
  .sl-dot,
  .btn,
  .dbtn,
  .fsubmit,
  .m-cta a,
  .am-card,
  .usp-item,
  .dist-card,
  .gshot img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
    animation: none !important;
  }
}


/* ============================================================
   24. ADMIN BAR OFFSET FIX (single canonical block)
   ============================================================ */
.admin-bar .topbar       { top: 32px; }
.admin-bar .sticky-wrap  { top: 110px; }

@media screen and (max-width: 782px) {
  .admin-bar .topbar      { top: 46px; }
  .admin-bar .sticky-wrap { top: 92px; }
}


/* ============================================================
   25. WORDPRESS BLOCK EDITOR RESETS
   ============================================================ */
.wp-block-image img {
  border-radius: var(--radius-sm);
}

.wp-caption-text {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 6px;
}

/* Normalise WP paragraph colour inside sections */
.pad p:not(.lead):not(.fsub):not(.rera):not(.section-note) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}


/* ============================================================
   26. RESPONSIVE OVERRIDES
   ============================================================ */

/* ── max 480px ── */
@media (max-width: 480px) {
  .htitle            { font-size: 22px; }
  .frow              { grid-template-columns: 1fr; }
  .discount-hero h3  { font-size: 20px; }
  .hmeta             { grid-template-columns: repeat(2, 1fr); }
  .dist-grid         { grid-template-columns: 1fr; }
  h2.sh              { font-size: 18px; }
}

/* ── max 640px ── */
@media (max-width: 640px) {
  .wrap              { padding: 0 12px 80px; }
  .topbar-inner      { padding: 8px 0; gap: 8px; }
  .brand-text h1     { font-size: 13px; }
  .gallery           { grid-template-columns: repeat(2, 1fr); }
  .am-grid           { grid-template-columns: 1fr; }
  .sp-grid           { grid-template-columns: 1fr; }
  .discount-perks    { grid-template-columns: repeat(2, 1fr); }
  .price-nums        { grid-template-columns: 1fr; }
}

/* ── max 768px ── */
@media (max-width: 768px) {
  .hero-grid         { grid-template-columns: 1fr; }
  .hero-slider       { min-height: 220px; }
  .usp-bar           { grid-template-columns: repeat(2, 1fr); }
}

/* ── max 992px ── */
@media (max-width: 992px) {
  .layout            { grid-template-columns: 1fr; }
  /* sidebar stays below content — form below hero is correct on mobile */
}

/* ── min 1280px ── */
@media (min-width: 1280px) {
  .htitle            { font-size: 32px; }
  .hero-slider       { min-height: 340px; }
}


/* ============================================================
   27. PRINT STYLES
   Hide non-essential UI, ensure readable text for print/PDF
   ============================================================ */
@media print {
  .topbar,
  .m-cta,
  .form-card,
  .sidebar,
  .discount-hero,
  .hero-slider,
  .hbtns,
  footer { display: none !important; }

  body  { background: #fff; color: #000; font-size: 12pt; }
  .wrap { max-width: 100%; padding: 0; }

  section,
  .hero-wrap { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }

  .ptable th,
  .ptable td { border-bottom: 1px solid #ccc; }

  a::after { content: none; }

  h2.sh { font-size: 16pt; }
  .htitle { font-size: 22pt; }
}


/* Floor Plans grid */
.fp-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
    align-items:start;
}

.fp-card{
    min-width:0;
    width:100%;
}

/* Tablet / narrower content area */
@media (max-width: 1199px){
    .fp-grid{
        grid-template-columns:1fr;
        gap:20px;
    }
}

@media (max-width: 767px){
    #floor-plans{
        padding-top:32px;
        padding-bottom:32px;
    }

    .fp-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .fp-card{
        border-radius:18px;
        padding:14px;
    }

    .fp-head{
        display:flex;
        flex-direction:column;
        gap:6px;
        margin-bottom:12px;
    }

    .fp-label{
        font-size:18px;
        line-height:1.2;
    }

    .fp-config{
        font-size:13px;
        opacity:.8;
    }

    .fp-visual{
        padding:12px;
        border-radius:14px;
    }

    .fp-room{
        padding:8px 10px;
        border-radius:10px;
    }

    .fp-rname{
        font-size:12px;
    }

    .fp-rsize{
        font-size:11px;
    }

    .fp-price{
        margin-top:12px;
        font-size:24px;
        line-height:1.1;
    }

    .fp-badge{
        font-size:11px;
        padding:6px 10px;
        border-radius:999px;
        color: #fff !important;
    }
}