/* ════════════════════════════════════════
   CONNECT HQ - GLASSMORPHISM THEME
   ════════════════════════════════════════ */

:root {
  /* Color Palette */
  --chq-bg-beige: #FAF8F5; /* Off-whitish beige */
  --chq-dark: #0A0A0A;     /* Solid Black */
  --chq-purple: #5A3E85;   /* Deep Purple */
  --chq-purple-light: #7E5CAD; 
  --chq-glass-bg: rgba(255, 255, 255, 0.4);
  --chq-glass-border: rgba(255, 255, 255, 0.6);
  
  /* Overriding existing theme.css tokens */
  --bg: var(--chq-bg-beige);
  --white: #FFFFFF;
  --dark: var(--chq-dark);
  
  /* Animation Timing - Buttery Smooth & Bouncy */
  --bounce-transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --smooth-transition: all 0.4s ease-in-out;
}

/* Global Body Override */
body.chq {
  background-color: var(--bg);
  color: var(--chq-dark);
  font-family: 'Outfit', 'Inter', sans-serif;
  scroll-behavior: smooth;
}

body.chq.dark-mode {
  background-color: var(--chq-dark);
  color: var(--chq-bg-beige);
}

/* ════════════════════════════════════════
   GLASSMORPHISM UTILITIES 
   ════════════════════════════════════════ */

.glass-card {
  background: var(--chq-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--chq-glass-border);
  border-radius: 24px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  transition: var(--bounce-transition);
  overflow: hidden;
  position: relative;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  transition: var(--smooth-transition);
  z-index: 1;
  pointer-events: none;
}

.glass-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 40px 0 rgba(90, 62, 133, 0.15); /* Soft Purple glow */
  border-color: rgba(255, 255, 255, 0.8);
}

.glass-card:hover::before {
  left: 200%;
  transition: 0.8s ease-in-out;
}

/* Buttons with Bounciness */
.btn-glass {
  background: var(--chq-glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--chq-glass-border);
  color: #fff;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--bounce-transition);
  cursor: pointer;
  text-decoration: none;
}

.btn-glass:hover {
  background: var(--chq-purple);
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(90, 62, 133, 0.5);
  color: #fff;
}

.btn-primary.glass-primary {
  background: var(--chq-purple);
  border: none;
  border-radius: 50px;
  transition: var(--bounce-transition);
  box-shadow: 0 4px 15px rgba(90, 62, 133, 0.3);
}

.btn-primary.glass-primary:hover {
  background: var(--chq-purple-light);
  transform: scale(1.08) translateY(-3px);
  box-shadow: 0 12px 24px rgba(90, 62, 133, 0.6);
}

/* ════════════════════════════════════════
   HERO OVERRIDES
   ════════════════════════════════════════ */
#hero {
  position: relative;
  overflow: hidden;
}

.hero-overlay {
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.9) 0%, rgba(90, 62, 133, 0.8) 100%);
  mix-blend-mode: multiply;
}

.hero-dark-form {
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  transition: var(--bounce-transition);
}

.hero-dark-form:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  border-color: rgba(90, 62, 133, 0.5);
}

/* ════════════════════════════════════════
   CLIENT REQUIREMENTS (MANAGED VS COWORKING)
   ════════════════════════════════════════ */
.client-req-section {
  padding: 100px 4vw;
  background-color: var(--chq-dark);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Ambient purple glow behind cards */
.client-req-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(90,62,133,0.15) 0%, rgba(10,10,10,0) 70%);
  z-index: 0;
  pointer-events: none;
}

.req-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.req-card {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.req-card h3 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: 700;
  background: linear-gradient(to right, #fff, var(--chq-bg-beige));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.req-card p {
  font-size: 1.1rem;
  line-height: 1.6;
  opacity: 0.8;
  margin-bottom: 30px;
}

.req-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.req-card li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 1.05rem;
  padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
  transition: var(--bounce-transition);
}

.req-card li:hover {
  transform: translateX(10px) scale(1.02);
  background: rgba(90,62,133,0.2);
  border-color: rgba(90,62,133,0.5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.req-card li svg {
  color: var(--chq-purple-light);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .req-container { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════
   ENDLESS CAROUSEL
   ════════════════════════════════════════ */
.photo-marquee-section {
  padding: 80px 0;
  background: var(--chq-dark);
  position: relative;
  overflow: hidden;
}

.photo-marquee-container {
  display: flex;
  width: fit-content;
  animation: scrollMarquee 40s linear infinite;
}

/* Pause on hover with smooth transition */
.photo-marquee-section:hover .photo-marquee-container {
  animation-play-state: paused;
}

.photo-marquee-item {
  width: 400px;
  height: 280px;
  margin-right: 30px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  transition: var(--bounce-transition);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.photo-marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--smooth-transition);
}

.photo-marquee-item img.img-contain {
  object-fit: contain !important;
  background-color: var(--chq-dark);
}

.photo-marquee-item:hover {
  transform: scale(1.05) translateY(-10px);
  box-shadow: 0 15px 40px rgba(90,62,133,0.4);
  z-index: 10;
}

@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 15px)); } /* -50% because we duplicate the items for endless loop */
}

/* Dark mode section overrides for general pages */
.dark-section {
  background-color: var(--chq-dark) !important;
  color: #fff !important;
}

.dark-section .card {
  background: var(--chq-glass-bg);
  border: 1px solid var(--chq-glass-border);
}
/* ----------------------------------------
   NEW COMPONENTS - LIQUID GLASS CARDS (iOS 26 style)
   ---------------------------------------- */
.amenities-grid .amenity-card, .spaces-grid .space-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.14) 100%
  ) !important;
  backdrop-filter: blur(28px) saturate(200%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.08) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.5) inset,
    0 -1px 0 rgba(255,255,255,0.1) inset,
    1px 0 0 rgba(255,255,255,0.2) inset,
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Top glass edge highlight */
.amenities-grid .amenity-card::before, .spaces-grid .space-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9) 30%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.9) 70%, transparent);
  z-index: 3;
  pointer-events: none;
}

/* Shimmer sweep on hover */
.amenities-grid .amenity-card::after, .spaces-grid .space-card::after {
  content: '';
  position: absolute;
  top: -20%; left: -120%;
  width: 70%; height: 140%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0.20) 50%,
    rgba(255, 255, 255, 0.05) 60%,
    transparent 100%
  );
  transform: skewX(-15deg);
  transition: left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 2;
  pointer-events: none;
}

.amenities-grid .amenity-card:hover::after, .spaces-grid .space-card:hover::after {
  left: 160%;
}

.amenities-grid .amenity-card *, .spaces-grid .space-card * {
  position: relative;
  z-index: 3;
}

/* Text color on dark glass background */
.amenities-grid .amenity-card .amenity-title,
.amenities-grid .amenity-card .amenity-desc,
.spaces-grid .space-card .space-title,
.spaces-grid .space-card .space-desc,
.spaces-grid .space-card .space-seats {
  color: #ffffff !important;
}

.amenities-grid .amenity-card:hover, .spaces-grid .space-card:hover {
  transform: translateY(-10px) scale(1.02) !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.22) 100%
  ) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  border-top-color: rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.7) inset,
    0 -1px 0 rgba(255,255,255,0.1) inset,
    1px 0 0 rgba(255,255,255,0.3) inset,
    0 28px 60px rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(90, 62, 133, 0.3),
    0 0 0 1px rgba(255,255,255,0.25) !important;
}
/* ----------------------------------------
   INTERACTIVE REQUIREMENTS CARDS
   ---------------------------------------- */
.client-req-section .req-card {
  position: relative;
  overflow: hidden;
}

.req-content-main {
  transition: all 0.4s ease-in-out;
}

.req-card:hover .req-content-main {
  opacity: 0.1;
  filter: blur(4px);
}

.req-hover-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 30px;
}

.req-card:hover .req-hover-overlay {
  opacity: 1;
  transform: translateY(0);
}

.req-hover-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.req-hover-link:hover {
  background: var(--chq-purple);
  border-color: var(--chq-purple-light);
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(90, 62, 133, 0.4);
}

/* ════════════════════════════════════════
   GLOBAL LIQUID GLASS — AMENITIES + MEMBERSHIPS
   Applies site-wide to all branch pages
   ════════════════════════════════════════ */

/* Rich beige + soft purple radial blobs — gives glass something to blur through */
body.chq #amenities,
body.chq #memberships {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(214,196,240,0.35) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(200,185,230,0.25) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 80%, rgba(230,218,250,0.2) 0%, transparent 50%),
    linear-gradient(160deg, #FAF8F5 0%, #F3EDE5 35%, #EDE4D8 65%, #F8F5F0 100%) !important;
  position: relative !important;
}

/* Section heading colors on beige background */
body.chq #amenities .section-tag,
body.chq #memberships .section-tag { color: #5A3E85 !important; }

body.chq #amenities .section-title,
body.chq #amenities .section-title strong,
body.chq #memberships .section-title,
body.chq #memberships .section-title strong { color: #0A0A0A !important; }

body.chq #amenities .section-sub,
body.chq #memberships .section-sub { color: #555 !important; }

/* ── AMENITY CARDS — liquid glass ── */
body.chq #amenities .amenity-card {
  background: rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(40px) saturate(220%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.08) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  border-top: 1.5px solid rgba(255,255,255,0.85) !important;
  border-left: 1px solid rgba(255,255,255,0.6) !important;
  border-radius: 20px !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.75) inset,
    0 8px 40px rgba(90,62,133,0.08),
    0 2px 8px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
  position: relative !important;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

body.chq #amenities .amenity-card:hover {
  transform: translateY(-12px) scale(1.025) !important;
  background: rgba(255,255,255,0.35) !important;
  border-color: rgba(255,255,255,0.75) !important;
  border-top-color: rgba(255,255,255,0.95) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.9) inset,
    0 30px 80px rgba(90,62,133,0.14),
    0 8px 24px rgba(0,0,0,0.1) !important;
}

body.chq #amenities .amenity-title { color: #0A0A0A !important; font-weight: 600 !important; }
body.chq #amenities .amenity-desc  { color: #444 !important; }

/* ── MEMBERSHIP / SPACE CARDS — liquid glass ── */
body.chq #memberships .space-card,
body.chq #spaces .space-card {
  background: rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(40px) saturate(220%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.08) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  border-top: 1.5px solid rgba(255,255,255,0.85) !important;
  border-left: 1px solid rgba(255,255,255,0.6) !important;
  border-radius: 20px !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.75) inset,
    0 8px 40px rgba(90,62,133,0.08),
    0 2px 8px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
  position: relative !important;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

body.chq #memberships .space-card:hover,
body.chq #spaces .space-card:hover {
  transform: translateY(-12px) scale(1.025) !important;
  background: rgba(255,255,255,0.38) !important;
  border-color: rgba(255,255,255,0.8) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.9) inset,
    0 30px 80px rgba(90,62,133,0.14),
    0 8px 24px rgba(0,0,0,0.1) !important;
}

body.chq #memberships .space-title,
body.chq #spaces .space-title { color: #0A0A0A !important; }

body.chq #memberships .space-desc,
body.chq #memberships .space-seats,
body.chq #spaces .space-desc,
body.chq #spaces .space-seats { color: #444 !important; }

/* Also apply beige to #spaces section */
body.chq #spaces {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(214,196,240,0.3) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(200,185,230,0.2) 0%, transparent 50%),
    linear-gradient(160deg, #FAF8F5 0%, #F3EDE5 40%, #F8F5F0 100%) !important;
}