/* LensStory - Photography Website (Figma design → Express/EJS) */

:root {
  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-950: #030712;
  --green-500: #22c55e;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-600: #4b5563;
  --gray-900: #111827;
  --white: #ffffff;
  --gradient-primary: linear-gradient(to right, var(--purple-600), var(--pink-600));
  --gradient-bg: linear-gradient(to bottom right, var(--gray-50), var(--gray-100));
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
  --radius: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--white);
  color: var(--gray-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.app { min-height: 100vh; }

.container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container { padding: 0 1.5rem; }
  .nav-inner.container { padding: 0 1.5rem; }
}

.container-narrow {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container-narrow { padding: 0 1.5rem; }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  padding: 0 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--gray-900);
  font-weight: 600;
  font-size: 1.125rem;
}

.logo .icon-camera { flex-shrink: 0; }

.nav-links {
  display: none;
  align-items: center;
  gap: 2rem;
}

.nav-links .nav-link {
  text-decoration: none;
  color: var(--gray-600);
  font-size: .875rem;
  transition: color .2s;
}

.nav-links .nav-link:hover { color: var(--gray-900); }

.nav-phone {
  text-decoration: none;
  color: var(--gray-600);
  font-size: .875rem;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--gray-900);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Hamburger to X when menu is open */
.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav-links { display: flex; }
}

/* Mobile menu: full viewport height overlay so body content is not visible; z-index below header so hamburger stays clickable */
.nav-links.is-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  min-height: 100vh;
  z-index: 40;
  background: var(--white);
  border-bottom: none;
  padding: 5rem 1rem 1rem;
  gap: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.nav-menu-open { overflow: hidden; }
/* Keep header bar (logo + hamburger) above the open menu so it stays visible to close */
.site-header .logo,
.site-header .nav-toggle { position: relative; z-index: 50; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem 1.25rem;
  font-size: .875rem;
  font-weight: 500;
  border-radius: .5rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity .2s, transform .05s;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--gradient-primary);
  color: var(--white);
}

.btn-primary:hover { opacity: .95; }

.btn-outline {
  background: transparent;
  color: var(--gray-900);
  border: 2px solid #e5e7eb;
}

.btn-outline:hover { background: var(--gray-50); border-color: #9ca3af; }

.btn-nav { color: var(--white) !important; }

/* User Menu */
.user-menu-wrapper {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: .5rem;
  transition: background-color .2s;
}

.user-menu-trigger:hover {
  background: rgba(0, 0, 0, 0.05);
}

.user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-name {
  font-size: .875rem;
  font-weight: 500;
  color: var(--gray-900);
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-arrow {
  width: 1rem;
  height: 1rem;
  color: var(--gray-600);
  transition: transform .2s;
}

.user-menu-trigger[aria-expanded="true"] .user-menu-arrow {
  transform: rotate(180deg);
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  background: var(--white);
  border-radius: .75rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  min-width: 16rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 100;
  border: 1px solid rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

.user-menu-dropdown[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.user-menu-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
}

.user-menu-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gray-100);
}

.user-menu-info {
  flex: 1;
  min-width: 0;
}

.user-menu-username {
  font-size: .875rem;
  font-weight: 600;
  color: var(--gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-divider {
  height: 1px;
  background: var(--gray-100);
  margin: 0.5rem 0;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  text-decoration: none;
  color: var(--gray-900);
  font-size: .875rem;
  transition: background-color .2s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.user-menu-item:hover {
  background: var(--gray-50);
}

.user-menu-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gray-600);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .user-name {
    display: none;
  }
  
  .user-menu-dropdown {
    right: -1rem;
    min-width: 14rem;
  }
}

.btn-sm { padding: .375rem .75rem; font-size: .8125rem; }

.btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }

.btn-block { width: 100%; }

.btn-inverse { background: var(--white); color: var(--purple-600); }

.btn-inverse:hover { opacity: .95; }

.icon-arrow { width: 1.25rem; height: 1.25rem; }

.icon-play { width: 1.25rem; height: 1.25rem; }

/* Hero - Figma: py-20 lg:py-32, gap-12, px-4; proper padding for "Capturing Your Precious Moments" */
.hero {
  position: relative;
  background: var(--gradient-bg);
  overflow: hidden;
}

.hero .container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 640px) {
  .hero .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .hero .container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.hero-bg-deco {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .3;
  pointer-events: none;
  z-index: 0;
}

.hero-bg-deco-1 {
  top: 0; right: 0;
  width: 50%; height: 50%;
  background: linear-gradient(to bottom right, var(--purple-100), #fce7f3);
}

.hero-bg-deco-2 {
  bottom: 0; left: 0;
  width: 50%; height: 50%;
  background: linear-gradient(to top right, #dbeafe, #cffafe);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3rem;
  padding: 3rem 0 4rem;
  align-items: center;
}

@media (min-width: 640px) {
  .hero-inner {
    padding: 5rem 0 6rem;
  }
}

@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr 1fr;
    padding: 8rem 0;
    gap: 3rem;
  }
}

.hero-badge {
  display: inline-block;
  padding: .5rem 1rem;
  background: rgba(0,0,0,.05);
  border-radius: 9999px;
  font-size: .875rem;
  margin-bottom: 1.5rem;
}

.hero-title {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.hero-title-gradient {
  display: block;
  margin-top: .15em;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (min-width: 1024px) {
  .hero-title { font-size: 3.75rem; margin-bottom: 1.5rem; }
}

.hero-desc {
  font-size: 1.125rem;
  color: var(--gray-600);
  max-width: 36rem;
  margin-bottom: 2rem;
  line-height: 1.65;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.btn-hero-primary { padding: .75rem 1.5rem; font-size: 1rem; }

.btn-hero-outline { padding: .75rem 1.5rem; font-size: 1rem; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding-top: 3rem;
  margin-top: 3rem;
  border-top: 1px solid rgba(0,0,0,.08);
}

.hero-stat-value { display: block; font-size: 1.875rem; font-weight: 700; color: var(--gray-900); }

.hero-stat-label { font-size: .875rem; color: var(--gray-600); }

.hero-image-wrap { position: relative; }

.hero-image-box {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}

.hero-image-box img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px) {
  .hero-image-box img { height: 600px; }
}

.hero-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.2), transparent);
  pointer-events: none;
}

.hero-float-card {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 1.5rem;
}

.hero-float-card-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-float-label { font-size: .875rem; color: var(--gray-600); margin-bottom: .25rem; }

.hero-float-title { font-weight: 600; font-size: 1rem; }

/* Section common - Figma py-20 = 5rem */
.section { padding: 5rem 0; }

.section-header { text-align: center; margin-bottom: 3rem; }

.section-header-services { margin-bottom: 4rem; }

.section-header-gallery { margin-bottom: 3rem; }

.section-header-testimonials { margin-bottom: 4rem; }

.section-cta-services { margin-top: 3rem; }

.section-badge {
  display: inline-block;
  padding: .5rem 1rem;
  background: var(--purple-50);
  color: var(--purple-600);
  font-size: .875rem;
  font-weight: 500;
  border-radius: 9999px;
  margin-bottom: 1rem;
}

.section-title {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
  .section-title { font-size: 3rem; }
}

.section-desc {
  font-size: 1.125rem;
  color: var(--gray-600);
  max-width: 42rem;
  margin: 0 auto;
}

.section-cta { text-align: center; margin-top: 2rem; }

.page-main { padding-top: 0; }

.page-title { font-size: 2rem; font-weight: 700; margin-bottom: .5rem; }

@media (min-width: 1024px) {
  .page-title { font-size: 3rem; }
}

.section-page-hero {
  padding: 3rem 0;
  background: var(--gradient-bg);
}

/* Services grid - Figma: p-6, gap-6, icon w-14 h-14, title row emoji+text, footer justify-between */
.section-services { background: var(--white); }

.services-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (min-width: 1024px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.service-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-2xl);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .3s, transform .3s;
  height: 100%;
}

.service-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.service-card-icon {
  width: 3.5rem;
  height: 3.5rem;
  min-width: 3.5rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(to bottom right, var(--purple-500), var(--pink-500));
  margin-bottom: 1rem;
  transition: transform .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.service-card-icon .service-card-icon-svg {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.service-card:hover .service-card-icon { transform: scale(1.1); }

.service-card-title-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .75rem;
}

.service-emoji { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }

.service-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  flex: 1;
}

.service-card:hover .service-card-title { color: var(--purple-600); }

.service-card-desc {
  font-size: .875rem;
  color: var(--gray-600);
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  line-height: 1.5;
}

.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  font-size: .875rem;
}

.service-card-count { color: #6b7280; }

.service-card-link {
  color: var(--purple-600);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.service-card-arrow {
  display: inline-block;
  transition: transform .2s;
}

.service-card:hover .service-card-arrow { transform: translateX(4px); }

/* Gallery - Figma: py-20, mb-12, gap-3, px-6 py-2, shadow-lg when active */
.section-gallery { background: var(--gray-50); }

.section-gallery .section-header-gallery .wedding-section-title {
  margin-bottom: 0.5rem;
  text-align: center;
  background: linear-gradient(to right, var(--purple-600), var(--pink-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-gallery .section-header-gallery {
  text-align: center;
}

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-bottom: 3rem;
}

.gallery-filter {
  padding: .5rem 1.5rem;
  border-radius: 9999px;
  border: none;
  background: var(--white);
  color: #374151;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}

.gallery-filter:hover { background: var(--gray-100); }

.gallery-filter.is-active {
  background: var(--gradient-primary);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}

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

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

.gallery-item {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}

.gallery-item:hover img { transform: scale(1.08); }

.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.2) 40%, transparent);
  opacity: 0;
  transition: opacity .3s;
}

.gallery-item:hover::after { opacity: 1; }

.gallery-item-cat {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  padding: .25rem .75rem;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 9999px;
  color: var(--white);
  font-size: .875rem;
  z-index: 1;
  opacity: 0;
  transition: opacity .3s;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
}

.gallery-item-location {
  font-size: .75rem;
  opacity: .9;
}

.gallery-item-location::before {
  content: '·';
  margin-right: .35rem;
  opacity: .8;
}

.gallery-item:hover .gallery-item-cat { opacity: 1; }

/* Gallery page lightbox - full-size view with prev/next */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.gallery-lightbox-inner {
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 4rem;
}
.gallery-lightbox-img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  z-index: 10;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.75rem;
  border-radius: var(--radius-md);
}
.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.25);
}
.gallery-lightbox-close {
  top: 1.5rem;
  right: 1.5rem;
  font-size: 2rem;
  padding: 0.5rem 0.75rem;
}
.gallery-lightbox-prev {
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.gallery-lightbox-next {
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.gallery-lightbox-prev:active,
.gallery-lightbox-next:active {
  transform: translateY(-50%) scale(0.96);
}

.gallery-lightbox-count {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.5);
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  z-index: 10;
}

/* Homepage gallery marquee - single row, scrollable and draggable */
.section-gallery-home .gallery-marquee-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  margin: 0 -1rem;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.section-gallery-home .gallery-marquee-wrap::-webkit-scrollbar {
  display: none;
}

.section-gallery-home .gallery-marquee-wrap.is-dragging {
  cursor: grabbing;
}

.section-gallery-home .gallery-marquee-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
  width: max-content;
}

.section-gallery-home .gallery-marquee-track .gallery-item {
  flex: 0 0 auto;
  width: 280px;
  min-width: 280px;
}

/* Service Area - Tamil Nadu districts (redesign) */
.section-service-area {
  position: relative;
  overflow: hidden;
}

.service-area-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--purple-50) 0%, var(--white) 35%, #fdf2f8 70%, var(--gray-50) 100%);
  pointer-events: none;
}

.service-area-container {
  position: relative;
  z-index: 1;
}

.service-area-header {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.service-area-badge {
  display: inline-block;
  padding: .4rem 1rem;
  background: var(--white);
  color: var(--purple-600);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 9999px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.12);
  border: 1px solid rgba(147, 51, 234, 0.15);
}

.service-area-title {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-bottom: .75rem;
}

@media (min-width: 1024px) {
  .service-area-title { font-size: 2.5rem; }
}

.service-area-desc {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--gray-600);
}

.service-area-desc strong {
  color: var(--purple-600);
  font-weight: 600;
}

.service-area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 56rem;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .service-area-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
  }
}

.service-area-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: transform .2s, box-shadow .25s, border-color .2s;
}

.service-area-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(147, 51, 234, 0.12);
  border-color: rgba(147, 51, 234, 0.2);
}

.service-area-card-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--purple-50), var(--purple-100));
  color: var(--purple-600);
  border-radius: 50%;
  transition: transform .2s, background .2s;
}

.service-area-card:hover .service-area-card-icon {
  background: linear-gradient(135deg, var(--purple-500), var(--pink-500));
  color: var(--white);
  transform: scale(1.08);
}

.service-area-card-name {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--gray-900);
  transition: color .2s;
}

.service-area-card:hover .service-area-card-name {
  color: var(--purple-600);
}

/* Testimonials - Figma: p-8, gap-8, quote top-6 right-6 h-12 w-12, text gray-700, stars fill-yellow-400 */
.section-testimonials { background: var(--white); }

.testimonials-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

.testimonial-card {
  position: relative;
  background: linear-gradient(to bottom right, var(--purple-50), #fdf2f8);
  border-radius: var(--radius-2xl);
  padding: 2rem;
}

.testimonial-quote-icon {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  opacity: .2;
  color: var(--purple-600);
}

.testimonial-quote-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.testimonial-stars {
  color: #eab308;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  letter-spacing: .05em;
}

.testimonial-text {
  color: #374151;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  font-size: 1rem;
  line-height: 1.6;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonial-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial-author div { display: flex; flex-direction: column; gap: .125rem; }

.testimonial-author strong { display: block; font-size: 1rem; }

.testimonial-author span { font-size: .875rem; color: var(--gray-600); }

/* ========== Homepage: 100% mobile responsive ========== */
@media (max-width: 767px) {
  .app:not(.admin-page) .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .app:not(.admin-page) .hero .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .app:not(.admin-page) .hero-inner {
    padding: 2rem 0 3rem;
    gap: 2rem;
  }
  .app:not(.admin-page) .hero-badge {
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
    margin-bottom: 1rem;
  }
  .app:not(.admin-page) .hero-title {
    font-size: 1.75rem;
    line-height: 1.25;
    margin-bottom: 1rem;
  }
  .app:not(.admin-page) .hero-desc {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  .app:not(.admin-page) .hero-buttons {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  .app:not(.admin-page) .hero-buttons .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding: 0.75rem 1.25rem;
  }
  .app:not(.admin-page) .hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
  }
  .app:not(.admin-page) .hero-stat-value { font-size: 1.375rem; }
  .app:not(.admin-page) .hero-stat-label { font-size: 0.75rem; }
  .app:not(.admin-page) .hero-image-box img { height: 280px; }
  .app:not(.admin-page) .hero-float-card {
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    padding: 1rem;
  }
  .app:not(.admin-page) .hero-float-card-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.75rem;
  }
  .app:not(.admin-page) .hero-float-card .btn {
    min-height: 44px;
  }
  .app:not(.admin-page) .section {
    padding: 3rem 0;
  }
  .app:not(.admin-page) .section-header,
  .app:not(.admin-page) .section-header-services,
  .app:not(.admin-page) .section-header-gallery,
  .app:not(.admin-page) .section-header-testimonials {
    margin-bottom: 2rem;
  }
  .app:not(.admin-page) .section-title {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }
  .app:not(.admin-page) .section-desc {
    font-size: 1rem;
  }
  .app:not(.admin-page) .section-cta-services {
    margin-top: 2rem;
  }
  .app:not(.admin-page) .section-cta .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
    min-height: 44px;
  }
  .app:not(.admin-page) .services-grid {
    gap: 1rem;
  }
  .app:not(.admin-page) .service-card {
    padding: 1.25rem;
    min-height: auto;
  }
  .app:not(.admin-page) .service-card-title {
    font-size: 1rem;
  }
  .app:not(.admin-page) .service-card-desc {
    font-size: 0.8125rem;
    -webkit-line-clamp: 2;
  }
  .app:not(.admin-page) .section-gallery-home .gallery-marquee-wrap {
    margin: 0 max(-1rem, calc(-1 * env(safe-area-inset-left)));
    padding-left: max(1rem, env(safe-area-inset-left));
  }
  .app:not(.admin-page) .section-gallery-home .gallery-marquee-track .gallery-item {
    width: 220px;
    min-width: 220px;
  }
}

/* ========== Gallery page (/gallery): 100% mobile responsive ========== */
@media (max-width: 767px) {
  .app:not(.admin-page) .page-main .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .app:not(.admin-page) .page-main .section-page-hero {
    padding: 2rem 0;
  }
  .app:not(.admin-page) .page-main .section-page-hero .section-badge {
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.75rem;
  }
  .app:not(.admin-page) .page-main .section-page-hero .page-title {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
  }
  .app:not(.admin-page) .page-main .section-page-hero .section-desc {
    font-size: 1rem;
  }
  .app:not(.admin-page) .section-gallery .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .app:not(.admin-page) .section-gallery {
    padding: 2rem 0 3rem;
  }
  .app:not(.admin-page) .section-gallery .gallery-filters {
    gap: 0.5rem;
    margin-bottom: 2rem;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .app:not(.admin-page) .section-gallery .gallery-filters::-webkit-scrollbar {
    display: none;
  }
  .app:not(.admin-page) .section-gallery .gallery-filter {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
  }
  .app:not(.admin-page) .section-gallery .gallery-grid {
    gap: 0.75rem;
  }
  .app:not(.admin-page) .section-gallery .gallery-item-cat {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
  }
  .app:not(.admin-page) .section-gallery .gallery-item:active img {
    transform: scale(1.03);
  }
  .app:not(.admin-page) .section-gallery .gallery-item:active::after {
    opacity: 1;
  }
  .app:not(.admin-page) .section-gallery .gallery-item:active .gallery-item-cat {
    opacity: 1;
  }
  /* Gallery lightbox: touch-friendly and safe area */
  .gallery-lightbox-inner {
    padding: 1rem;
    max-width: 100%;
    max-height: calc(100vh - 6rem);
  }
  .gallery-lightbox-img {
    max-height: calc(100vh - 8rem);
  }
  .gallery-lightbox-close,
  .gallery-lightbox-prev,
  .gallery-lightbox-next {
    min-width: 44px;
    min-height: 44px;
    padding: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .gallery-lightbox-close {
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
  }
  .gallery-lightbox-prev {
    left: max(0.5rem, env(safe-area-inset-left));
  }
  .gallery-lightbox-next {
    right: max(0.5rem, env(safe-area-inset-right));
  }
  .gallery-lightbox-count {
    bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .app:not(.admin-page) .service-area-header {
    margin-bottom: 2rem;
  }
  .app:not(.admin-page) .service-area-title {
    font-size: 1.5rem;
  }
  .app:not(.admin-page) .service-area-desc {
    font-size: 0.9375rem;
  }
  .app:not(.admin-page) .service-area-grid {
    gap: 0.75rem;
  }
  .app:not(.admin-page) .service-area-card {
    padding: 0.75rem 1rem;
  }
  .app:not(.admin-page) .service-area-card-name {
    font-size: 0.8125rem;
  }
  .app:not(.admin-page) .testimonials-grid {
    gap: 1.5rem;
  }
  .app:not(.admin-page) .testimonial-card {
    padding: 1.5rem;
  }
  .app:not(.admin-page) .testimonial-quote-icon {
    width: 2.5rem;
    height: 2.5rem;
    top: 1rem;
    right: 1rem;
  }
  .app:not(.admin-page) .testimonial-stars {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
  }
  .app:not(.admin-page) .testimonial-text {
    font-size: 0.9375rem;
    margin-bottom: 1rem;
  }
  .app:not(.admin-page) .testimonial-avatar {
    width: 3rem;
    height: 3rem;
  }
}

/* Footer */
.footer {
  background: var(--gray-900);
  color: #d1d5db;
  padding: 3rem 0 1.5rem;
}

.footer-grid {
  display: grid;
  gap: 2rem 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}

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

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

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.75fr 1fr 1fr 1fr 1.25fr;
    gap: 2rem 2rem;
  }
}

.footer-brand { min-width: 0; }
.footer-links { min-width: 0; }
.footer-contact { min-width: 0; }

.footer-brand .logo { color: var(--white); }

.footer-brand p {
  font-size: .875rem;
  margin: 1rem 0;
  max-width: 20rem;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-link {
  color: inherit;
  transition: color .2s;
}

.social-link:hover { color: var(--white); }

.footer-links h4,
.footer-contact h4 {
  color: var(--white);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.footer-links ul { list-style: none; }

.footer-links li { margin-bottom: .5rem; }

.footer-links a,
.footer-contact a {
  color: inherit;
  text-decoration: none;
  font-size: .875rem;
}

.footer-links a:hover,
.footer-contact a:hover { color: var(--white); }

.footer-contact p { font-size: .875rem; margin-bottom: .5rem; }

.footer-address { margin-bottom: .5rem; }

.footer-bottom {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
  text-align: center;
  font-size: .875rem;
}

/* Sticky WhatsApp button (bottom right) – shown on all public pages, hidden on admin and choose-photo */
.admin-page .whatsapp-float { display: none !important; }
.choose-photo-page .whatsapp-float { display: none !important; }
.whatsapp-float {
  position: fixed;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  right: max(1.25rem, env(safe-area-inset-right));
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.whatsapp-float:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}
.whatsapp-float:active {
  transform: scale(0.98);
}
.whatsapp-float-icon {
  width: 32px;
  height: 32px;
}

/* Contact – full redesign: hero + two-column form & contact options */
.contact-main { padding-bottom: 4rem; }

/* Hero */
.contact-hero {
  position: relative;
  padding: 3.5rem 0 4rem;
  overflow: hidden;
}
.contact-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 35%, #fce7f3 100%);
}
.contact-hero-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
  pointer-events: none;
}
.contact-hero-shape-1 {
  width: 20rem;
  height: 20rem;
  background: linear-gradient(135deg, var(--purple-500), var(--pink-500));
  top: -8rem;
  right: -6rem;
}
.contact-hero-shape-2 {
  width: 14rem;
  height: 14rem;
  background: linear-gradient(135deg, var(--pink-500), #f9a8d4);
  bottom: -5rem;
  left: -4rem;
}
.contact-hero-inner {
  position: relative;
  text-align: center;
  max-width: 36rem;
  margin: 0 auto;
}
.contact-hero-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--purple-600);
  background: rgba(255,255,255,0.8);
  border-radius: 9999px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12);
}
.contact-hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--gray-900);
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}
.contact-hero-title-accent {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.contact-hero-desc {
  font-size: 1.0625rem;
  color: var(--gray-600);
  margin: 0;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .contact-hero { padding: 4.5rem 0 5rem; }
  .contact-hero-title { font-size: 3rem; }
}

/* Content grid */
.contact-content { padding: 0 0 3rem; }
.contact-content-inner { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .contact-content-inner { padding: 0 1.5rem; } }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: stretch; }
}

/* Visual side: quote + contact options */
.contact-visual { min-width: 0; }
.contact-visual-card {
  background: linear-gradient(145deg, var(--gray-50) 0%, var(--white) 100%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 1024px) { .contact-visual-card { padding: 2.5rem; } }
.contact-visual-quote {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--gray-800);
  line-height: 1.5;
  margin: 0 0 2rem 0;
}
.contact-visual-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.contact-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border-radius: 9999px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--gray-800);
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}
.contact-option:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  border-color: rgba(0,0,0,.1);
}
.contact-option-icon { display: flex; align-items: center; justify-content: center; }
.contact-option-phone:hover { border-color: rgba(37, 99, 235, 0.35); color: #2563eb; }
.contact-option-wa:hover { border-color: rgba(34, 197, 94, 0.4); color: #16a34a; }
.contact-option-email:hover { border-color: rgba(245, 158, 11, 0.4); color: #b45309; }
.contact-visual-detail {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin: 0;
}

/* Form side – clean single-column layout */
.contact-form-side { min-width: 0; }
.contact-form-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
@media (min-width: 640px) { .contact-form-card { padding: 2.25rem; } }
.contact-form-card-head {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.contact-form-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 0.25rem 0;
}
.contact-form-desc {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin: 0;
}
.contact-form-fields { display: flex; flex-direction: column; gap: 1rem; }
.contact-form-row-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 479px) {
  .contact-form-row-two { grid-template-columns: 1fr; }
}
.contact-form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.contact-phone-group { gap: 0.5rem; }
.contact-form-group label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
}
.contact-form-group .req { color: #dc2626; }
.contact-form-group input,
.contact-form-group textarea,
.contact-form-group select {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form-group input.contact-input-error,
.contact-form-group textarea.contact-input-error {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}
.contact-form-group input:focus,
.contact-form-group textarea:focus,
.contact-form-group select:focus {
  outline: none;
  border-color: var(--purple-500);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.contact-form-group input.contact-input-error:focus,
.contact-form-group textarea.contact-input-error:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}
.contact-field-error {
  display: block;
  font-size: 0.8125rem;
  color: #dc2626;
  margin-top: 0.35rem;
  min-height: 1.25em;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
}
.contact-field-error-visible {
  visibility: visible;
  opacity: 1;
}
.contact-form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}
.contact-form-group textarea { min-height: 5.5rem; resize: vertical; }

/* Contact: Mobile + OTP (Verify only after Send OTP; Resend after 60s) */
.contact-phone-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.contact-phone-input-wrap {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.5rem;
  overflow: hidden;
}
.contact-phone-input-wrap:focus-within {
  border-color: var(--purple-500);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}
.contact-phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 1rem;
  color: var(--gray-500);
  background: var(--gray-50);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  user-select: none;
  pointer-events: none;
}
.contact-phone-input-wrap input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  padding-left: 0.75rem;
}
.contact-phone-input-wrap input:focus {
  outline: none;
  box-shadow: none;
}
.contact-phone-row input {
  flex: 1;
  min-width: 0;
}
.contact-btn-otp {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--white);
  background: var(--purple-600);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, opacity 0.2s;
}
.contact-btn-otp:hover:not(:disabled) { background: var(--purple-500); }
.contact-btn-otp:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}
.contact-otp-block {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--gray-50);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 0.5rem;
}
.contact-otp-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.contact-otp-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-bottom: 0.75rem;
}
.contact-otp-row input {
  width: 9.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: inherit;
  letter-spacing: 0.15em;
}
.contact-otp-row input:focus {
  outline: none;
  border-color: var(--purple-500);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}
.contact-btn-verify {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--white);
  background: var(--gray-900);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
}
.contact-btn-verify:hover:not(:disabled) { background: #1f2937; }
.contact-btn-verify:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.contact-resend-row {
  font-size: 0.8125rem;
  color: var(--gray-500);
}
.contact-resend-countdown strong {
  font-weight: 600;
  color: var(--gray-700);
}
.contact-btn-resend {
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--purple-600);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}
.contact-btn-resend:hover:not(:disabled) { color: var(--purple-500); }
.contact-btn-resend:disabled { opacity: 0.7; cursor: not-allowed; }
.contact-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #059669;
}
.contact-verified-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #d1fae5;
  color: #059669;
  font-size: 0.75rem;
}

.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--white);
  background: var(--gray-900);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.contact-submit-btn:hover { background: #1f2937; }
.contact-submit-btn:active { transform: scale(0.98); }
.contact-submit-btn.is-loading {
  cursor: not-allowed;
  pointer-events: none;
}
.contact-submit-btn .contact-submit-text,
.contact-submit-btn .contact-submit-arrow { display: inline-flex; }
.contact-submit-btn .contact-submit-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.contact-submit-btn .contact-submit-loading[hidden] { display: none; }
.contact-submit-btn.is-loading .contact-submit-text,
.contact-submit-btn.is-loading .contact-submit-arrow { display: none; }
.contact-submit-spinner {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: contact-spin 0.7s linear infinite;
}
@keyframes contact-spin {
  to { transform: rotate(360deg); }
}

/* Contact toast */
.contact-toast {
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-1.5rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.875rem 1.25rem;
  background: var(--gray-900);
  color: var(--white);
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  font-size: 0.9375rem;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
  z-index: 1000;
}
.contact-toast-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.contact-toast-hide {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-0.5rem);
}
.contact-toast-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #22c55e;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Success */
.contact-success-wrap {
  max-width: 28rem;
  margin: 0 auto;
  padding: 2rem 0;
}
.contact-success-card {
  text-align: center;
  padding: 2.5rem 2rem;
  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid rgba(5, 150, 105, 0.2);
  border-radius: var(--radius-2xl);
  box-shadow: 0 4px 20px rgba(5, 150, 105, 0.1);
}
.contact-success-icon-wrap {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.25rem;
  background: #059669;
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-success-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 0.5rem 0;
}
.contact-success-para {
  font-size: 0.9375rem;
  color: var(--gray-600);
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
}
.contact-success-btn { margin: 0; }

/* Contact page – appcodr-style layout (light theme, bg image, form card) */
.container-narrow { max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container-narrow { padding: 0 1.5rem; } }
.relative { position: relative; z-index: 10; }
.section-contact {
  position: relative;
  padding: 4rem 0 5rem;
  min-height: 60vh;
  background: none;
  color: var(--gray-900);
}
.contact-header { text-align: center; margin-bottom: 3rem; }
.cta-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 9999px;
  color: var(--purple-600);
  font-size: 0.875rem;
  margin-bottom: 2rem;
}
.section-contact .contact-title { font-size: 2rem; margin-bottom: 0.75rem; color: var(--gray-900); }
@media (min-width: 640px) { .section-contact .contact-title { font-size: 2.5rem; } }
.gradient-text {
  background: linear-gradient(to right, var(--blue-400), var(--purple-400), var(--pink-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.contact-desc { color: var(--gray-600); font-size: 1rem; max-width: 36rem; margin: 0 auto; }
.section-contact .contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  padding: 1.25rem;
  margin-bottom: 3rem;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
@media (min-width: 480px) { .section-contact .contact-form { padding: 2rem; } }
@media (min-width: 640px) { .section-contact .contact-form { padding: 2.5rem; } }
.section-contact .contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 639px) { .section-contact .contact-form .form-row { grid-template-columns: 1fr; } }
.section-contact .contact-form .form-row.contact-form-row-two { grid-template-columns: 1fr 1fr; }
@media (max-width: 479px) { .section-contact .contact-form .form-row.contact-form-row-two { grid-template-columns: 1fr; } }
.section-contact .contact-form .form-row + .form-group,
.section-contact .contact-form .form-group + .form-group { margin-top: 0; }
.section-contact .contact-form .form-group { margin-top: 0; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; width: 100%; }
.section-contact .contact-form label { font-size: 0.875rem; font-weight: 500; color: var(--gray-700); min-height: 1.25rem; display: flex; align-items: center; }
.section-contact .contact-form .field-required { color: var(--pink-600); }
.section-contact .contact-form input,
.section-contact .contact-form select,
.section-contact .contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--gray-900);
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.section-contact .contact-form input,
.section-contact .contact-form select { min-height: 44px; }
.section-contact .contact-form textarea { min-height: 6rem; resize: vertical; }
.section-contact .contact-form input::placeholder,
.section-contact .contact-form textarea::placeholder { color: var(--gray-500); }
.section-contact .contact-form input:focus,
.section-contact .contact-form select:focus,
.section-contact .contact-form textarea:focus { outline: none; border-color: var(--purple-500); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12); }
.section-contact .contact-form input.contact-input-error,
.section-contact .contact-form textarea.contact-input-error { border-color: var(--pink-500); }
.section-contact .contact-form select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}
.contact-field-error { display: block; font-size: 0.8125rem; color: var(--pink-600); margin-top: 0.25rem; min-height: 1.25rem; }
.contact-field-error-visible { display: block; }
.section-contact .contact-phone-row { display: flex; gap: 0.5rem; align-items: stretch; }
.section-contact .contact-phone-input-wrap {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.5rem;
  overflow: hidden;
}
.section-contact .contact-phone-input-wrap:focus-within {
  border-color: var(--purple-500);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}
.section-contact .contact-phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 1rem;
  color: var(--gray-500);
  background: var(--gray-50);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  user-select: none;
  pointer-events: none;
}
.section-contact .contact-phone-input-wrap input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  padding-left: 0.75rem;
}
.section-contact .contact-phone-input-wrap input:focus {
  outline: none;
  box-shadow: none;
}
.section-contact .contact-phone-row input { flex: 1; min-width: 0; }
.section-contact .contact-btn-otp {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
  background: var(--purple-600);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
}
.section-contact .contact-btn-otp:hover:not(:disabled) { background: var(--purple-500); }
.section-contact .contact-btn-otp:disabled { opacity: 0.8; cursor: not-allowed; }
.section-contact .contact-otp-block {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--gray-50);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.5rem;
}
.section-contact .contact-otp-label { font-size: 0.75rem; font-weight: 600; color: var(--gray-600); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.03em; }
.section-contact .contact-otp-row { display: flex; gap: 0.5rem; align-items: stretch; margin-bottom: 0.75rem; }
.section-contact .contact-otp-row input {
  width: 9.75rem;
  padding: 0.55rem 0.75rem;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.5rem;
  color: var(--gray-900);
  font-size: 1rem;
  letter-spacing: 0.15em;
}
.section-contact .contact-otp-row input:focus { outline: none; border-color: var(--purple-500); box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.12); }
.section-contact .contact-btn-verify {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
  background: var(--gray-900);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}
.section-contact .contact-btn-verify:hover:not(:disabled) { background: #1f2937; }
.section-contact .contact-btn-verify:disabled { opacity: 0.7; cursor: not-allowed; }
.section-contact .contact-resend-row { font-size: 0.8125rem; color: var(--gray-600); }
.section-contact .contact-resend-countdown strong { color: var(--gray-900); }
.section-contact .contact-btn-resend { padding: 0; font-size: 0.8125rem; font-weight: 600; color: var(--purple-600); background: none; border: none; cursor: pointer; text-decoration: underline; }
.section-contact .contact-btn-resend:hover:not(:disabled) { color: var(--purple-500); }
.section-contact .contact-verified-badge { color: var(--green-500); margin-top: 0.5rem; }
.section-contact .contact-verified-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.25);
  color: var(--green-500);
  font-size: 0.75rem;
}
.section-contact .btn-contact-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 1rem 1.75rem;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 600;
}
.section-contact .btn-contact-submit:hover { box-shadow: 0 0 2rem rgba(59, 130, 246, 0.5); }
.section-contact .btn-contact-submit .icon-arrow { transition: transform 0.2s; }
.section-contact .btn-contact-submit:hover .icon-arrow { transform: translateX(4px); }
.section-contact .btn-contact-submit.is-loading { cursor: not-allowed; pointer-events: none; }
.section-contact .btn-contact-submit .contact-submit-text,
.section-contact .btn-contact-submit .icon-arrow { display: inline-flex; }
.section-contact .btn-contact-submit .contact-submit-loading { display: inline-flex; align-items: center; gap: 0.5rem; }
.section-contact .btn-contact-submit .contact-submit-loading[hidden] { display: none; }
.section-contact .btn-contact-submit.is-loading .contact-submit-text,
.section-contact .btn-contact-submit.is-loading .icon-arrow { display: none !important; }
.section-contact .contact-success {
  text-align: center;
  padding: 3rem 2rem;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 1rem;
  margin-bottom: 3rem;
}
.section-contact .contact-success-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-500);
}
.section-contact .contact-success h3 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--gray-900); }
.section-contact .contact-success p { color: var(--gray-600); }
.section-contact .contact-success-back { display: inline-block; margin-top: 1rem; }
.section-contact .contact-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2rem;
  margin-top: 0;
}
.section-contact .contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--gray-600);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.2s;
}
a.section-contact .contact-item:hover,
a.section-contact .contact-item:hover .contact-item-text { color: var(--gray-900); }
.section-contact .contact-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: var(--gray-500);
  transition: color 0.2s;
}
a.section-contact .contact-item:hover .contact-item-icon { color: var(--purple-600); }
.section-contact .contact-item-text { line-height: 1.3; }

/* Contact page: 100% mobile responsive / mobile friendly */
@media (max-width: 767px) {
  .contact-page .page-main {
    overflow-x: hidden;
  }
  .contact-page .container-narrow.relative {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .contact-toast {
    top: max(5rem, calc(4rem + env(safe-area-inset-top)));
    max-width: calc(100vw - 2rem);
    width: max-content;
    box-sizing: border-box;
    transform: translateX(-50%) translateY(-1.5rem);
  }
  .contact-toast-visible { transform: translateX(-50%) translateY(0); }
  .contact-toast-hide { transform: translateX(-50%) translateY(-0.5rem); }
  .section-contact {
    padding: 2rem 0 3rem;
    min-height: 0;
  }
  .contact-header {
    margin-bottom: 2rem;
  }
  .cta-badge {
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
    margin-bottom: 1rem;
  }
  .section-contact .contact-title {
    font-size: 1.5rem;
    line-height: 1.25;
    margin-bottom: 0.5rem;
  }
  .contact-desc {
    font-size: 0.9375rem;
    padding: 0;
  }
  .section-contact .contact-form {
    padding: 1.25rem max(1rem, env(safe-area-inset-left)) 1.25rem max(1rem, env(safe-area-inset-right));
    margin-bottom: 2rem;
    border-radius: 0.75rem;
  }
  .section-contact .contact-form .form-row {
    grid-template-columns: 1fr;
  }
  .section-contact .contact-form .form-row.contact-form-row-two {
    grid-template-columns: 1fr;
  }
  .section-contact .contact-form input,
  .section-contact .contact-form select {
    min-height: 44px;
    font-size: 16px;
  }
  .section-contact .contact-form textarea {
    min-height: 5rem;
    font-size: 16px;
  }
  .section-contact .contact-phone-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .section-contact .contact-phone-input-wrap {
    min-width: 0;
    width: 100%;
  }
  .section-contact .contact-phone-input-wrap input {
    min-height: 44px;
  }
  .section-contact .contact-btn-otp {
    width: 100%;
    min-height: 44px;
    padding: 0.75rem 1rem;
    -webkit-tap-highlight-color: rgba(168, 85, 247, 0.2);
  }
  .section-contact .contact-otp-block {
    padding: 1rem;
  }
  .section-contact .contact-otp-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .section-contact .contact-otp-row input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    max-width: none;
  }
  .section-contact .contact-btn-verify {
    min-height: 44px;
    padding: 0.75rem 1rem;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
  .section-contact .contact-btn-resend {
    min-height: 44px;
    padding: 0.5rem 0;
    display: inline-flex;
    align-items: center;
  }
  .section-contact .btn-contact-submit {
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    -webkit-tap-highlight-color: rgba(168, 85, 247, 0.2);
  }
  .section-contact .contact-success {
    padding: 2rem 1.25rem;
    margin-bottom: 2rem;
    border-radius: 0.75rem;
  }
  .section-contact .contact-success h3 {
    font-size: 1.25rem;
  }
  .section-contact .contact-success-back {
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(168, 85, 247, 0.2);
  }
  .section-contact .contact-info {
    gap: 1rem;
    flex-direction: column;
    align-items: stretch;
  }
  .section-contact .contact-item {
    min-height: 44px;
    padding: 0.75rem 0;
    justify-content: center;
    align-items: center;
    -webkit-tap-highlight-color: rgba(168, 85, 247, 0.1);
  }
}

@media (max-width: 380px) {
  .section-contact .contact-form {
    padding: 1rem max(0.75rem, env(safe-area-inset-left)) 1rem max(0.75rem, env(safe-area-inset-right));
  }
}

/* Legacy (other pages) */
.section-contact .section-header { margin-bottom: 2rem; }
.contact-form { max-width: 32rem; margin-bottom: 2rem; }
.form-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .375rem; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: .5rem .75rem; border: 1px solid rgba(0,0,0,.15); border-radius: .5rem; font-size: 1rem; font-family: inherit;
}
.form-group textarea { min-height: 6rem; resize: vertical; }
.contact-success { text-align: center; padding: 2rem; background: #dcfce7; border-radius: var(--radius-xl); margin-bottom: 2rem; }
.contact-success-icon {
  width: 3rem; height: 3rem; margin: 0 auto 1rem; background: #22c55e; color: var(--white); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.contact-info { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.contact-item { display: flex; align-items: center; gap: .5rem; color: var(--gray-600); text-decoration: none; }
.contact-item .contact-icon { font-size: 1.25rem; }
.contact-item:hover { color: var(--gray-900); }

/* Booking */
.back-link {
  display: inline-block;
  color: var(--gray-600);
  text-decoration: none;
  margin-bottom: 1rem;
  font-size: .875rem;
}
.back-link:hover { color: var(--gray-900); }

.booking-hero {
  padding: 3rem 0 2.5rem;
  text-align: center;
}
.booking-hero-inner { position: relative; }
.booking-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 9999px;
  color: var(--purple-600);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
.booking-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}
@media (min-width: 640px) {
  .booking-title { font-size: 2.5rem; }
}
.booking-hero-desc {
  font-size: 1.0625rem;
  color: var(--gray-600);
  margin: 0;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.booking-success-section { padding: 0 0 4rem; }
.booking-success {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  text-align: center;
}
.booking-success-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.25rem;
  background: #dcfce7;
  color: #22c55e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.booking-success h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.booking-success p { color: var(--gray-600); margin-bottom: 1.5rem; font-size: 0.9375rem; }

.section-booking-form { padding: 0 0 4rem; }
.booking-form-card {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
@media (min-width: 640px) {
  .booking-form-card { padding: 2rem 2.5rem; }
}
.booking-form-card .form-block {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 2rem;
}
.booking-form-card .form-block:last-of-type { margin-bottom: 1.5rem; }
.booking-form-card .form-block h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 1rem;
}
.booking-form-card .btn-block { margin-top: 0.5rem; }

/* Booking: Select Service dropdown (same pattern as Create Team Add Teammates) */
.booking-service-wrap {
  position: relative;
}
.booking-service-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.5rem;
  background: var(--white);
  color: var(--gray-900);
}
.booking-service-input:focus {
  outline: none;
  border-color: var(--purple-500);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.15);
}
.booking-service-input.contact-input-error {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}
.booking-service-dropdown {
  z-index: 200;
}

.form-block {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.form-block h2 { font-size: 1.25rem; margin-bottom: 1rem; }

.booking-next-card {
  background: linear-gradient(135deg, var(--purple-500), var(--blue-500));
  color: var(--white);
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
  .booking-next-card { padding: 2rem 2.5rem; }
}
.booking-next-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1.25rem 0;
}

.booking-steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}
.booking-steps li {
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  opacity: 0.98;
}
.booking-steps li:last-child { margin-bottom: 0; }
.booking-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}
.booking-steps li strong { font-weight: 600; }

.booking-help {
  text-align: center;
  font-size: 0.875rem;
  color: var(--gray-600);
}
.booking-help a { color: var(--purple-600); text-decoration: none; }
.booking-help a:hover { text-decoration: underline; }

/* Login page */
.login-page .page-main { padding-top: 0; }
.login-main { overflow-x: hidden; }

.login-hero {
  position: relative;
  padding: 3rem 0 2.5rem;
  text-align: center;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 25%, #4c1d95 50%, #5b21b6 75%, #3730a3 100%);
  background-size: 400% 400%;
  background-attachment: scroll;
}
.login-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(168, 85, 247, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 50% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 25%),
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 25%);
  pointer-events: none;
}
.login-hero-overlay {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
}
.login-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.login-hero .back-link {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.75rem;
}
.login-hero .back-link:hover {
  color: var(--white);
}
.login-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
.login-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}
.login-title .gradient-text {
  background: linear-gradient(to right, #a5b4fc, #c4b5fd, #f9a8d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-hero-desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
@media (min-width: 640px) {
  .login-hero { min-height: 320px; padding: 4rem 0 3rem; }
  .login-title { font-size: 2.5rem; }
  .login-hero-desc { font-size: 1.0625rem; }
}

.login-section {
  padding: 0 0 4rem;
  margin-top: -2rem;
}
.login-card {
  position: relative;
  z-index: 2;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  padding: 2rem;
  margin: 0 auto;
  max-width: 28rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}
.login-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.login-btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: 2px solid rgba(0, 0, 0, 0.1);
  background: var(--white);
  color: var(--gray-900);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.login-btn-social:hover {
  border-color: rgba(0, 0, 0, 0.2);
  background: var(--gray-50);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.login-btn-google .login-social-icon { flex-shrink: 0; }
.login-btn-facebook .login-social-icon { flex-shrink: 0; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
}
.login-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}
.login-divider-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.login-phone-block {
  margin-top: 0.5rem;
}
.login-phone-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 0.25rem 0;
}
.login-phone-desc {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin: 0 0 1rem 0;
}
.login-card .contact-phone-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.login-card .contact-phone-input-wrap {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.5rem;
  overflow: hidden;
}
.login-card .contact-phone-input-wrap:focus-within {
  border-color: var(--purple-500);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}
.login-card .contact-phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 1rem;
  color: var(--gray-500);
  background: var(--gray-50);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.login-card .contact-phone-input-wrap input {
  flex: 1;
  min-width: 0;
  border: none;
  padding-left: 0.75rem;
}
.login-card .contact-btn-otp {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
  background: var(--purple-600);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}
.login-card .contact-btn-otp:hover:not(:disabled) { background: var(--purple-500); }
.login-card .contact-btn-otp:disabled { opacity: 0.8; cursor: not-allowed; }
.login-card .contact-otp-block {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--gray-50);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.5rem;
}
.login-card .contact-otp-row { display: flex; gap: 0.5rem; align-items: stretch; margin-bottom: 0.75rem; }
.login-card .contact-otp-row input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.5rem;
  font-size: 1rem;
}
.login-card .contact-btn-verify {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
  background: var(--gray-900);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}
.login-card .contact-verified-badge { color: var(--green-500); margin-top: 0.5rem; }
.login-card .contact-field-error { display: block; font-size: 0.8125rem; color: var(--pink-600); margin-top: 0.25rem; }
.login-toast {
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-1.5rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.875rem 1.25rem;
  background: var(--gray-900);
  color: var(--white);
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  font-size: 0.875rem;
  max-width: calc(100vw - 2rem);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}
.login-toast.login-toast-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.login-toast-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

/* Login page: mobile responsive */
@media (max-width: 640px) {
  .login-page .page-main {
    padding-top: 0;
  }
  .login-hero {
    min-height: 220px;
    padding: 1.5rem 0 1.25rem;
  }
  .login-hero .back-link {
    font-size: 0.8125rem;
    padding: 0.35em 0;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
  }
  .login-badge {
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
  }
  .login-title {
    font-size: 1.75rem;
    line-height: 1.25;
  }
  .login-hero-desc {
    font-size: 0.9375rem;
    padding: 0 0.25rem;
    line-height: 1.45;
  }
  .login-section {
    margin-top: -1.5rem;
    padding: 0 0 3rem;
  }
  .login-card {
    padding: 1.25rem 1rem;
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
    overflow-wrap: break-word;
    border-radius: 0.75rem;
  }
  .login-options {
    gap: 0.6rem;
  }
  .login-btn-social {
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    font-size: 0.9375rem;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
  }
  .login-divider {
    margin: 1.25rem 0;
  }
  .login-phone-title {
    font-size: 1rem;
  }
  .login-phone-desc {
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
  }
  .login-card .contact-phone-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .login-card .contact-phone-input-wrap {
    width: 100%;
    min-width: 0;
  }
  .login-card .contact-phone-input-wrap input {
    min-height: 2.75rem;
    font-size: 1rem;
  }
  .login-card .contact-btn-otp {
    width: 100%;
    min-height: 2.75rem;
    -webkit-tap-highlight-color: rgba(168, 85, 247, 0.2);
  }
  .login-card .contact-otp-block {
    padding: 0.875rem;
    margin-top: 0.75rem;
  }
  .login-card .contact-otp-row {
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
  }
  .login-card .contact-otp-row input {
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    font-size: 1rem;
  }
  .login-card .contact-btn-verify {
    min-height: 2.75rem;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
  .login-toast {
    max-width: calc(100vw - 1.5rem);
    left: 50%;
    font-size: 0.8125rem;
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 380px) {
  .login-hero {
    min-height: 200px;
    padding: 1.25rem 0 1rem;
  }
  .login-card {
    padding: 1rem 0.75rem;
  }
}

/* Booking page: 100% mobile responsive / mobile friendly */
@media (max-width: 767px) {
  .booking-page .page-main {
    overflow-x: hidden;
  }
  .booking-page .container-narrow {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .booking-hero {
    padding: 2rem 0 1.5rem;
  }
  .booking-page .back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0;
    -webkit-tap-highlight-color: rgba(168, 85, 247, 0.15);
  }
  .booking-badge {
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.75rem;
  }
  .booking-title {
    font-size: 1.5rem;
    line-height: 1.25;
    margin-bottom: 0.5rem;
  }
  .booking-hero-desc {
    font-size: 1rem;
    padding: 0;
  }
  .booking-success-section {
    padding: 0 0 3rem;
  }
  .booking-success {
    padding: 2rem max(1.25rem, env(safe-area-inset-left)) 2rem max(1.25rem, env(safe-area-inset-right));
    border-radius: 0.75rem;
  }
  .booking-success h2 {
    font-size: 1.125rem;
  }
  .booking-success .btn {
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    -webkit-tap-highlight-color: rgba(168, 85, 247, 0.2);
  }
  .section-booking-form {
    padding: 0 0 3rem;
  }
  .booking-form-card {
    padding: 1.25rem max(1rem, env(safe-area-inset-left)) 1.25rem max(1rem, env(safe-area-inset-right));
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
  }
  .booking-form-card .form-block {
    margin-bottom: 1.5rem;
  }
  .booking-form-card .form-block:last-of-type {
    margin-bottom: 1rem;
  }
  .booking-form-card .form-block h2 {
    font-size: 1.0625rem;
    margin-bottom: 0.75rem;
  }
  .booking-form-card .form-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .booking-form-card .form-group {
    margin-bottom: 0;
  }
  .booking-form-card input,
  .booking-form-card select,
  .booking-form-card textarea {
    min-height: 44px;
    font-size: 16px;
  }
  .booking-form-card textarea {
    min-height: 5rem;
  }
  .booking-form-card .contact-phone-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .booking-form-card .contact-phone-input-wrap {
    min-width: 0;
    width: 100%;
  }
  .booking-form-card .contact-phone-input-wrap input {
    min-height: 44px;
  }
  .booking-form-card .contact-btn-otp {
    width: 100%;
    min-height: 44px;
    padding: 0.75rem 1rem;
    -webkit-tap-highlight-color: rgba(168, 85, 247, 0.2);
  }
  .booking-form-card .contact-otp-block {
    padding: 1rem;
  }
  .booking-form-card .contact-otp-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .booking-form-card .contact-otp-row input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    max-width: none;
  }
  .booking-form-card .contact-btn-verify {
    min-height: 44px;
    padding: 0.75rem 1rem;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
  .booking-form-card .contact-btn-resend {
    min-height: 44px;
    padding: 0.5rem 0;
    display: inline-flex;
    align-items: center;
  }
  .booking-form-card .btn-block {
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    -webkit-tap-highlight-color: rgba(168, 85, 247, 0.2);
  }
  .booking-next-card {
    padding: 1.5rem max(1.25rem, env(safe-area-inset-left)) 1.5rem max(1.25rem, env(safe-area-inset-right));
    margin-bottom: 1.25rem;
    border-radius: 0.75rem;
  }
  .booking-next-card h3 {
    font-size: 1.0625rem;
    margin-bottom: 1rem;
  }
  .booking-steps li {
    font-size: 0.875rem;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
  }
  .booking-help {
    font-size: 0.8125rem;
  }
  .booking-help a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.25em 0.25em;
    -webkit-tap-highlight-color: rgba(168, 85, 247, 0.15);
  }
}

@media (max-width: 380px) {
  .booking-form-card {
    padding: 1rem max(0.75rem, env(safe-area-inset-left)) 1rem max(0.75rem, env(safe-area-inset-right));
  }
}

/* Service detail */
.section-service-hero .service-hero-inner { text-align: center; }

.service-hero-emoji { font-size: 3rem; display: block; margin-bottom: 1rem; }

.service-hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; }

/* What's Included - modern card grid */
.service-included-wrap {
  margin-bottom: 2rem;
}

.service-included-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 640px) {
  .service-included-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .service-included-list { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

.service-included-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.service-included-list li:hover {
  border-color: rgba(147, 51, 234, 0.2);
  box-shadow: 0 8px 24px rgba(147, 51, 234, 0.08);
  transform: translateY(-2px);
}

.service-included-list .check {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--purple-50), var(--purple-100));
  color: var(--purple-600);
  font-weight: 700;
  font-size: .875rem;
  border-radius: 50%;
}

.service-included-list li:hover .check {
  background: linear-gradient(135deg, var(--purple-500), var(--pink-500));
  color: var(--white);
}

.service-included-list li {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-900);
}

.section-cta-bar {
  background: var(--gradient-primary);
  color: var(--white);
  text-align: center;
}

.section-cta-bar .section-title { color: var(--white); }

.section-cta-bar p { opacity: .95; margin-bottom: 1rem; }

/* Housewarming (Griha Pravesh) service page */
.page-main .hw-hero {
  position: relative;
  min-height: 28rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.hw-hero-image-wrap {
  position: absolute;
  inset: 0;
}

.hw-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hw-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.52) 100%);
}

.hw-hero-content {
  position: relative;
  z-index: 1;
  padding: 3rem 1rem 4rem;
}

.hw-hero-back {
  display: inline-block;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  font-size: .9375rem;
  margin-bottom: 1rem;
  transition: color .2s;
}

.hw-hero-back:hover { color: var(--white); }

.hw-hero-emoji {
  display: block;
  font-size: 3rem;
  margin-bottom: .75rem;
  line-height: 1;
}

.hw-hero-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .75rem;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .hw-hero-title { font-size: 2.75rem; }
}

.hw-hero-tagline {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.92);
  max-width: 32rem;
  margin: 0 auto 1.5rem;
  line-height: 1.55;
}

.hw-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.hw-btn-outline {
  border-color: rgba(255,255,255,.6);
  color: var(--white);
}

.hw-btn-outline:hover {
  background: rgba(255,255,255,.15);
  border-color: var(--white);
  color: var(--white);
}

/* Housewarming stats bar */
.hw-stats {
  background: var(--gray-900);
  color: var(--white);
  padding: 1.5rem 0;
}

.hw-stats-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 3rem;
}

.hw-stat {
  text-align: center;
}

.hw-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hw-stat-label {
  font-size: .875rem;
  opacity: .88;
}

/* Housewarming What We Cover */
.hw-cover .section-badge { margin-bottom: 1rem; }
.hw-cover .section-title { margin-bottom: .75rem; }
.hw-cover .section-desc { margin-bottom: 2.5rem; }

.hw-cover .container > .section-badge,
.hw-cover .container > .wedding-section-title,
.hw-cover .container > .section-desc {
  text-align: center;
}
.hw-cover .wedding-section-title {
  margin-bottom: 0.5rem;
  background: linear-gradient(to right, var(--purple-600), var(--pink-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hw-cover-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

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

/* Educational page: 4 cover cards */
.edu-cover-grid-four {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .edu-cover-grid-four { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .edu-cover-grid-four { grid-template-columns: repeat(4, 1fr); }
}

/* Lifestyle page: 5 cover cards */
.edu-cover-grid-five {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .edu-cover-grid-five { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .edu-cover-grid-five { grid-template-columns: repeat(5, 1fr); }
}

.hw-cover-card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: box-shadow .25s, transform .2s;
}

.hw-cover-card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,.1);
  transform: translateY(-2px);
}

.hw-cover-card-image {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.hw-cover-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}

.hw-cover-card:hover .hw-cover-card-image img { transform: scale(1.05); }

.hw-cover-card-body {
  padding: 1.5rem;
}

.hw-cover-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: .5rem;
}

.hw-cover-card-desc {
  font-size: .9375rem;
  color: var(--gray-600);
  line-height: 1.55;
}

/* Housewarming Why Choose */
.hw-why .section-badge { margin-bottom: 1rem; }
.hw-why .section-title { margin-bottom: 2rem; }

.hw-why-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

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

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

.hw-why-card {
  text-align: center;
  padding: 1.5rem 1.25rem;
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,.06);
  transition: border-color .2s, box-shadow .2s;
}

.hw-why-card:hover {
  border-color: rgba(147, 51, 234, 0.2);
  box-shadow: 0 8px 24px rgba(147, 51, 234, 0.08);
}

.hw-why-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--purple-50), var(--purple-100));
  color: var(--purple-600);
  border-radius: 50%;
}

.hw-why-card h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: .35rem;
}

.hw-why-card p {
  font-size: .875rem;
  color: var(--gray-600);
  line-height: 1.5;
  margin: 0;
}

/* About */
.about-content p { margin-bottom: 1rem; color: var(--gray-600); }

.about-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* About page – redesigned */
.about-page .page-main { padding-top: 0; }
.about-hero {
  padding: 3.5rem 0 3rem;
  text-align: center;
}
.about-hero-inner { position: relative; }
.about-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 9999px;
  color: var(--purple-600);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.about-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}
@media (min-width: 640px) {
  .about-title { font-size: 2.5rem; }
}
.about-hero-desc {
  font-size: 1.0625rem;
  color: var(--gray-600);
  margin: 0;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.about-section {
  padding: 0 0 4rem;
}
.about-content-card {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
@media (min-width: 640px) {
  .about-content-card { padding: 2.5rem; }
}
.about-content-card p {
  margin: 0 0 1.25rem 0;
  color: var(--gray-600);
  font-size: 1rem;
  line-height: 1.7;
}
.about-content-card p:last-child { margin-bottom: 0; }
.about-lead {
  font-size: 1.125rem !important;
  font-weight: 500;
  color: var(--gray-800) !important;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.about-stat {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--gray-50);
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.about-stat-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--purple-600);
  margin-bottom: 0.25rem;
}
@media (min-width: 640px) {
  .about-stat-value { font-size: 2rem; }
}
.about-stat-label {
  font-size: 0.875rem;
  color: var(--gray-600);
}
.about-cta-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.about-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.about-cta-btn .icon-arrow { transition: transform 0.2s; }
.about-cta-btn:hover .icon-arrow { transform: translateX(4px); }

/* About page: 100% mobile responsive / mobile friendly */
@media (max-width: 767px) {
  .about-page .page-main {
    overflow-x: hidden;
  }
  .about-page .container-narrow {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .about-hero {
    padding: 2rem 0 1.5rem;
  }
  .about-badge {
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
    margin-bottom: 1rem;
  }
  .about-title {
    font-size: 1.5rem;
    line-height: 1.25;
    margin-bottom: 0.5rem;
  }
  .about-hero-desc {
    font-size: 1rem;
    padding: 0;
    line-height: 1.6;
  }
  .about-section {
    padding: 0 0 3rem;
  }
  .about-content-card {
    padding: 1.25rem max(1rem, env(safe-area-inset-right)) 1.25rem max(1rem, env(safe-area-inset-left));
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .about-content-card p {
    font-size: 1rem;
    margin-bottom: 1rem;
    line-height: 1.65;
  }
  .about-content-card p:last-child {
    margin-bottom: 0;
  }
  .about-lead {
    font-size: 1.0625rem !important;
  }
  .about-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .about-stat {
    padding: 1.25rem 1rem;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .about-stat-value {
    font-size: 1.5rem;
  }
  .about-stat-label {
    font-size: 0.8125rem;
  }
  .about-cta-wrap {
    gap: 0.75rem;
    flex-direction: column;
    align-items: stretch;
  }
  .about-cta-btn {
    justify-content: center;
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    -webkit-tap-highlight-color: rgba(168, 85, 247, 0.15);
  }
}

/* Legal / Terms & Conditions page */
.legal-page .page-main { padding-top: 0; }
.legal-hero {
  padding: 3.5rem 0 2rem;
  text-align: center;
}
.legal-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 9999px;
  color: var(--purple-600);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.legal-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}
@media (min-width: 640px) {
  .legal-title { font-size: 2.5rem; }
}
.legal-hero-desc {
  font-size: 1rem;
  color: var(--gray-600);
  margin: 0 0 0.5rem 0;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.legal-updated {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin: 0;
}
.legal-section {
  padding: 0 0 4rem;
}
.legal-content {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
@media (min-width: 640px) {
  .legal-content { padding: 2.5rem 3rem; }
}
.legal-list {
  list-style: none;
  counter-reset: legal;
  margin: 0;
  padding: 0;
}
.legal-list > li {
  counter-increment: legal;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.legal-list > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.legal-list h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
}
.legal-list h2::before {
  content: counter(legal) ". ";
  color: var(--purple-600);
}
@media (min-width: 640px) {
  .legal-list h2 { font-size: 1.25rem; }
}
.legal-list p {
  margin: 0 0 0.75rem 0;
  color: var(--gray-600);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.legal-list p:last-child { margin-bottom: 0; }
.legal-list ul {
  margin: 0.5rem 0 0.75rem 0;
  padding-left: 1.25rem;
  color: var(--gray-600);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.legal-list li li { margin-bottom: 0.35rem; }
.legal-list a {
  color: var(--purple-600);
  text-decoration: none;
}
.legal-list a:hover { text-decoration: underline; }
.legal-back {
  text-align: center;
}

/* Legal page: mobile responsive (disclaimer, terms, privacy, etc.) */
@media (max-width: 640px) {
  .legal-page .page-main {
    overflow-x: hidden;
  }
  .legal-hero {
    padding: 2rem 0 1.5rem;
  }
  .legal-title {
    font-size: 1.75rem;
    line-height: 1.25;
  }
  .legal-hero-desc {
    font-size: 0.9375rem;
    padding: 0 0.25rem;
  }
  .legal-updated {
    font-size: 0.8125rem;
  }
  .legal-section {
    padding: 0 0 3rem;
  }
  .legal-content {
    padding: 1.25rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .legal-list > li {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .legal-list h2 {
    font-size: 1.0625rem;
    margin-bottom: 0.5rem;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .legal-list p,
  .legal-list ul {
    font-size: 1rem;
    line-height: 1.65;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .legal-list p {
    margin-bottom: 0.65rem;
  }
  .legal-list ul {
    padding-left: 1rem;
    margin: 0.4rem 0 0.65rem 0;
  }
  .legal-list a {
    display: inline-block;
    padding: 0.25em 0.1em;
    line-height: 1.5;
    -webkit-tap-highlight-color: rgba(168, 85, 247, 0.15);
  }
  .legal-back {
    padding-top: 0.25rem;
  }
  .legal-back .btn {
    display: inline-block;
    min-height: 2.75rem;
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
    line-height: 1.4;
    -webkit-tap-highlight-color: rgba(168, 85, 247, 0.15);
  }
}

/* Error pages */
.section-error { padding: 4rem 0; }

.error-code {
  font-size: 4rem;
  font-weight: 700;
  color: var(--purple-600);
  margin-bottom: .5rem;
}

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

.section-error .btn { margin-top: 1rem; }

/* ========== Wedding service page (Figma) ========== */
.page-main { padding-top: 0; }

.wedding-hero {
  position: relative;
  height: 70vh;
  min-height: 400px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .wedding-hero { height: 80vh; }
}

.wedding-hero-slider {
  position: absolute;
  inset: 0;
}

.wedding-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.wedding-hero-slide.is-active { opacity: 1; z-index: 1; }

.wedding-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wedding-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.3) 40%, transparent);
  z-index: 2;
}

.wedding-hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1rem;
}

.wedding-hero-back {
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: .875rem;
  margin-bottom: 1rem;
}

.wedding-hero-back:hover { color: #fff; }

.wedding-hero-emoji { font-size: 3rem; display: block; margin-bottom: 0.5rem; }

.wedding-hero-title {
  color: #fff;
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .wedding-hero-title { font-size: 3.5rem; }
}

@media (min-width: 1024px) {
  .wedding-hero-title { font-size: 4rem; }
}

.wedding-hero-tagline {
  color: rgba(255,255,255,.9);
  font-size: 1.125rem;
  max-width: 36rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .wedding-hero-tagline { font-size: 1.25rem; }
}

.wedding-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.wedding-btn-outline { border-color: rgba(255,255,255,.5); color: #fff; }

.wedding-btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* Stats bar – compact, refined */
.wedding-stats {
  background: linear-gradient(to right, var(--purple-600), var(--pink-600));
  color: #fff;
  padding: 1.5rem 1rem;
}

@media (min-width: 768px) {
  .wedding-stats { padding: 2rem 1rem; }
}

.wedding-stats-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  text-align: center;
  max-width: 56rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .wedding-stats-inner { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}

.wedding-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.125rem;
}

@media (min-width: 768px) {
  .wedding-stat-value { font-size: 1.875rem; }
}

.wedding-stat-label {
  font-size: 0.8125rem;
  opacity: 0.9;
}

/* Cinematic section */
.wedding-cinematic {
  background: linear-gradient(to bottom, #000, #111827);
  color: #fff;
  padding: 5rem 0;
}

.wedding-section-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: rgba(168,85,247,.2);
  border: 1px solid rgba(168,85,247,.3);
  border-radius: 9999px;
  font-size: .875rem;
  font-weight: 600;
  color: #c4b5fd;
  margin-bottom: 1rem;
}

.wedding-section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  background: linear-gradient(to right, #fff, #e9d5ff, #fce7f3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (min-width: 768px) {
  .wedding-section-title { font-size: 3rem; }
}

.wedding-section-desc {
  color: #d1d5db;
  font-size: 1.125rem;
  max-width: 48rem;
  margin-bottom: 2rem;
}

.wedding-feature-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .wedding-feature-grid { grid-template-columns: repeat(2, 1fr); }
}

.wedding-feature-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(to bottom right, #1f2937, #111827);
}

.wedding-feature-card:hover { border-color: var(--purple-500); }

.wedding-feature-img {
  height: 12rem;
  overflow: hidden;
}

.wedding-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.wedding-feature-card:hover .wedding-feature-img img { transform: scale(1.05); }

.wedding-feature-body {
  padding: 1.25rem;
  position: relative;
}

.wedding-feature-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #111827, transparent);
  pointer-events: none;
}

.wedding-feature-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  position: relative;
}

.wedding-feature-body p { color: #9ca3af; font-size: .875rem; position: relative; }

.wedding-subtitle {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
}

.wedding-packages-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

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

.wedding-package-card {
  position: relative;
  background: linear-gradient(to bottom right, rgba(31,41,55,.8), rgba(17,24,39,.8));
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,.1);
  border-radius: 1rem;
  padding: 1.5rem;
  color: #fff;
}

.wedding-package-card:hover { border-color: rgba(168,85,247,.5); }

.wedding-package-popular { border-color: var(--purple-500); box-shadow: 0 0 2rem rgba(168,85,247,.2); }

.wedding-package-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to right, var(--purple-500), var(--pink-500));
  color: #fff;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.wedding-package-card h4 { font-size: 1.25rem; margin-bottom: 0.25rem; }

.wedding-package-duration { font-size: .875rem; color: #c4b5fd; margin-bottom: 0.5rem; }

.wedding-package-price {
  font-size: 1.75rem;
  font-weight: 700;
  background: linear-gradient(to right, #c4b5fd, #f9a8d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}

.wedding-package-card ul {
  list-style: none;
  margin-bottom: 1rem;
  font-size: .875rem;
  color: #d1d5db;
}

.wedding-package-card ul li { padding: 0.25rem 0; padding-left: 1.25rem; position: relative; }

.wedding-package-card ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--purple-400);
}

.wedding-package-card .btn { width: 100%; }

/* Drone section */
.wedding-drone {
  background: linear-gradient(to bottom, #0c4a6e, #1e3a5f, #312e81);
  color: #fff;
  padding: 5rem 0;
}

.wedding-drone-badge {
  background: rgba(56,189,248,.2);
  border-color: rgba(56,189,248,.3);
  color: #7dd3fc;
}

.wedding-drone .wedding-section-title {
  background: linear-gradient(to right, #fff, #bae6fd, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wedding-drone .wedding-section-desc { color: #bae6fd; }

.wedding-drone-card {
  background: linear-gradient(to bottom right, rgba(12,74,110,.5), rgba(30,58,95,.5));
  border-color: rgba(56,189,248,.3);
}

.wedding-drone-card:hover { border-color: #38bdf8; }

.wedding-drone-pkg {
  background: linear-gradient(to bottom right, rgba(12,74,110,.8), rgba(30,58,95,.8));
  border-color: rgba(56,189,248,.2);
}

.wedding-drone-pkg.wedding-package-popular { border-color: #0ea5e9; }

.wedding-drone-pkg .wedding-package-price {
  background: linear-gradient(to right, #7dd3fc, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Safety & Compliance (DGCA, Insured, 4K, Quick Delivery) */
.wedding-drone-safety {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 4rem;
}

@media (min-width: 768px) {
  .wedding-drone-safety { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .wedding-drone-safety { grid-template-columns: repeat(4, 1fr); }
}

.wedding-drone-safety-card {
  background: rgba(12,74,110,.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0.75rem;
  padding: 1.5rem;
  border: 1px solid rgba(56,189,248,.3);
  text-align: center;
}

.wedding-drone-safety-card:nth-child(2),
.wedding-drone-safety-card:nth-child(4) {
  background: rgba(30,58,138,.3);
  border-color: rgba(59,130,246,.3);
}

.wedding-drone-safety-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.wedding-drone-safety-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.wedding-drone-safety-icon-sky {
  background: rgba(56,189,248,.2);
  color: #38bdf8;
}

.wedding-drone-safety-icon-blue {
  background: rgba(59,130,246,.2);
  color: #60a5fa;
}

.wedding-drone-safety-card h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #fff;
}

.wedding-drone-safety-card p {
  font-size: 0.875rem;
  color: #9ca3af;
  margin: 0;
}

/* Ready to Soar Above the Ordinary? (Drone CTA) */
.wedding-drone-cta {
  text-align: center;
  margin-top: 4rem;
}

.wedding-drone-cta-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #fff;
}

@media (min-width: 768px) {
  .wedding-drone-cta-title { font-size: 1.875rem; }
}

.wedding-drone-cta-desc {
  color: #9ca3af;
  margin-bottom: 2rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1rem;
}

.wedding-drone-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.wedding-drone-cta-primary {
  background: linear-gradient(to right, #0284c7, #2563eb);
  color: #fff;
  border: none;
}

.wedding-drone-cta-primary:hover {
  background: linear-gradient(to right, #0369a1, #1d4ed8);
  color: #fff;
}

.wedding-drone-cta-outline {
  background: transparent;
  border: 2px solid #38bdf8;
  color: #7dd3fc;
}

.wedding-drone-cta-outline:hover {
  background: rgba(56,189,248,.1);
  color: #bae6fd;
  border-color: #38bdf8;
}

/* Photo Album section */
.wedding-album {
  background: linear-gradient(to bottom, #1c1917, #292524, #1f2937);
  color: #fff;
  padding: 5rem 0;
}

.wedding-album-badge {
  background: rgba(245,158,11,.2);
  border-color: rgba(245,158,11,.35);
  color: #fcd34d;
}

.wedding-album .wedding-section-title {
  background: linear-gradient(to right, #fff, #fde68a, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wedding-album .wedding-section-desc { color: #d6d3d1; }

.wedding-album-card {
  background: linear-gradient(to bottom right, rgba(41,37,36,.6), rgba(28,25,23,.8));
  border-color: rgba(251,191,36,.25);
}

.wedding-album-card:hover { border-color: #fbbf24; }

/* Why Choose Our Photo Album? (same pattern as Cinematic / Drone) */
.wedding-why-album-wrap {
  margin-top: 5rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(68,64,60,.55), rgba(41,37,36,.75));
  border-radius: 1.5rem;
  border: 1px solid rgba(251,191,36,.28);
  box-shadow: 0 4px 24px rgba(0,0,0,.2);
}

@media (min-width: 768px) {
  .wedding-why-album-wrap { padding: 3rem; }
}

.wedding-why-album-wrap .wedding-why-block {
  margin-top: 0;
}

.wedding-why-album-title {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #fff;
}

.wedding-why-album .wedding-why-item h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #fff;
}

.wedding-why-album .wedding-why-item p {
  font-size: 1rem;
  color: rgba(255,255,255,.85);
  margin: 0;
}

.wedding-why-album .wedding-why-list {
  gap: 1.5rem;
}

.wedding-why-album .wedding-why-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wedding-why-icon-amber {
  background: rgba(245,158,11,.35);
  color: #fcd34d;
}

.wedding-why-icon-gold {
  background: rgba(217,119,6,.4);
  color: #fde68a;
}

.wedding-why-album-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,25,23,.6), transparent);
}

.wedding-why-stats-album {
  background: linear-gradient(to right, #d97706, #b45309);
  color: #fff;
}

.wedding-why-album .wedding-why-stats-pos .wedding-why-stats-label {
  color: rgba(254,243,199,.95);
}

/* Why Choose Our Cinematic / Drone (two-column blocks) */

/* Cinematic: Figma card wrapper (gradient box on dark section) */
.wedding-why-cinematic-wrap {
  margin-top: 5rem;
  padding: 2rem;
  background: linear-gradient(to right, rgba(88,28,135,.3), rgba(131,24,67,.3));
  border-radius: 1.5rem;
  border: 1px solid rgba(168,85,247,.2);
}

@media (min-width: 768px) {
  .wedding-why-cinematic-wrap { padding: 3rem; }
}

.wedding-why-cinematic-wrap .wedding-why-block {
  margin-top: 0;
}

.wedding-why-block {
  display: grid;
  gap: 2rem;
  margin-top: 4rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 968px) {
  .wedding-why-block { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.wedding-why-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: inherit;
}

/* Cinematic: light text (on dark card) */
.wedding-why-cinematic-title {
  font-size: 1.875rem;
  margin-bottom: 1.5rem;
  color: #fff;
}
.wedding-why-cinematic .wedding-why-item h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #fff;
}
.wedding-why-cinematic .wedding-why-item p {
  font-size: 1rem;
  color: #9ca3af;
  margin: 0;
}
.wedding-why-cinematic .wedding-why-list {
  gap: 1.5rem;
}

/* Cinematic: alternating purple/pink icon boxes (Figma) */
.wedding-why-cinematic .wedding-why-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wedding-why-icon-purple {
  background: rgba(168,85,247,.2);
  color: #c4b5fd;
}
.wedding-why-icon-pink {
  background: rgba(236,72,153,.2);
  color: #f9a8d4;
}

/* Drone: Figma card wrapper (sky/blue gradient box) */
.wedding-why-drone-wrap {
  margin-top: 5rem;
  padding: 2rem;
  background: linear-gradient(to right, rgba(12,74,110,.3), rgba(30,58,138,.3));
  border-radius: 1.5rem;
  border: 1px solid rgba(56,189,248,.2);
}

@media (min-width: 768px) {
  .wedding-why-drone-wrap { padding: 3rem; }
}

.wedding-why-drone-wrap .wedding-why-block {
  margin-top: 0;
}

/* Drone: title and list text, left-aligned (Figma screenshot) */
.wedding-why-drone .wedding-why-content {
  text-align: left;
}
.wedding-why-drone-title {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #fff;
}
.wedding-why-drone .wedding-why-item h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #fff;
}
.wedding-why-drone .wedding-why-item p {
  font-size: 1rem;
  color: rgba(255,255,255,.85);
  margin: 0;
}
.wedding-why-drone .wedding-why-list {
  gap: 1.5rem;
}

/* Drone: dark blue icon boxes with light blue icons (Figma screenshot) */
.wedding-why-drone .wedding-why-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wedding-why-drone .wedding-why-icon-sky,
.wedding-why-drone .wedding-why-icon-blue {
  background: rgba(30,58,138,.6);
  color: #7dd3fc;
}

.wedding-why-list { display: flex; flex-direction: column; gap: 1.25rem; }
.wedding-why-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.wedding-why-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: rgba(168,85,247,.15);
  color: var(--purple-600);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wedding-why-item h4 { font-size: 1rem; margin-bottom: 0.25rem; }
.wedding-why-item p { font-size: .875rem; color: var(--gray-600); margin: 0; }

/* Cinematic: image with rounded-2xl, play overlay, stats bottom-right */
.wedding-why-image-wrap { position: relative; }
.wedding-why-cinematic-image-wrap {
  position: relative;
}

/* Baby Shower: Why Choose — light theme (no black background) */
.baby-shower-why-section {
  background: var(--gray-50);
}
.baby-shower-why-section .container > .section-badge,
.baby-shower-why-section .container > .wedding-section-title,
.baby-shower-why-section .container > .section-desc {
  text-align: center;
}
.baby-shower-why-section .wedding-section-title {
  margin-bottom: 0.5rem;
  background: linear-gradient(to right, var(--purple-600), var(--pink-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.baby-shower-why-section .section-desc {
  margin-bottom: 2.5rem;
}
.baby-shower-why-wrap {
  margin-top: 0;
  padding: 2rem;
  background: #fff;
  border-radius: 1.5rem;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -2px rgba(0,0,0,.05);
}
@media (min-width: 768px) {
  .baby-shower-why-wrap { padding: 3rem; }
}
.baby-shower-why-wrap .wedding-why-block {
  margin-top: 0;
}
.baby-shower-why-block {
  background: transparent;
  color: var(--gray-900);
}
.baby-shower-why-block-title {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--gray-900);
}
.baby-shower-why-block .wedding-why-item h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--gray-900);
}
.baby-shower-why-block .wedding-why-item p {
  font-size: 1rem;
  color: var(--gray-600);
  margin: 0;
}
.baby-shower-why-block .wedding-why-list {
  gap: 1.5rem;
}
.baby-shower-why-block .wedding-why-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
}
.baby-shower-why-image-wrap {
  position: relative;
}

.wedding-why-image {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.wedding-why-image-rounded {
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}
.wedding-why-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wedding-why-image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wedding-why-play-wrap {
  background: transparent;
}
.wedding-why-play-wrap .wedding-why-play {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 4px solid rgba(255,255,255,.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  padding-left: 0.35rem;
  transition: transform .2s;
}
.wedding-why-play-wrap .wedding-why-play:hover {
  transform: scale(1.1);
}
/* Drone: image with gradient overlay and icon group (Figma: top-middle, outlined circle + camera, two solid dots) */
.wedding-why-drone-image-wrap {
  position: relative;
}
.wedding-why-drone-image {
  position: relative;
}
.wedding-why-drone-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30,58,138,.8), transparent);
  pointer-events: none;
}
.wedding-why-drone-icon-group {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.wedding-why-drone-icon-center {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: transparent;
  border: 3px solid rgba(56,189,248,.8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wedding-why-drone-icon-center svg {
  width: 2.25rem;
  height: 2.25rem;
}
.wedding-why-drone-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #38bdf8;
  flex-shrink: 0;
}
.wedding-why-drone-dot-left { order: -1; }
.wedding-why-drone-dot-right { order: 1; }

/* Stats: default full-width at bottom */
.wedding-why-stats {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  color: #fff;
  text-align: center;
}
.wedding-why-stats-value { display: block; font-size: 1.5rem; font-weight: 700; }
.wedding-why-stats-label { font-size: .875rem; opacity: .9; }

/* Cinematic: stats card at bottom-right — shared corner-card style */
.wedding-why-stats-pos,
.wedding-why-stats-pos-left {
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.3);
  min-width: 11rem;
}
.wedding-why-stats-pos {
  bottom: -1.5rem;
  right: -1.5rem;
  left: auto;
}
.wedding-why-stats-pos .wedding-why-stats-value { font-size: 1.875rem; }
.wedding-why-stats-pos .wedding-why-stats-label { color: rgba(233,213,255,.95); }

/* Drone: same card style as cinematic, positioned bottom-left */
.wedding-why-stats-pos-left {
  bottom: -1.5rem;
  left: -1.5rem;
  right: auto;
}
.wedding-why-stats-pos-left .wedding-why-stats-value { font-size: 1.875rem; }
.wedding-why-stats-pos-left .wedding-why-stats-label { color: rgba(224,242,254,.95); }

.wedding-why-stats-purple { background: linear-gradient(to right, var(--purple-600), var(--pink-600)); }
.wedding-why-stats-drone { background: linear-gradient(to right, #0ea5e9, #1d4ed8); color: #fff; }
.wedding-why-stats-teal { background: linear-gradient(to right, #0e7490, #0ea5e9); }
@media (min-width: 968px) {
  .wedding-why-drone.wedding-why-block { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* Mobile: content first, then image (Figma order-1 / order-2) */
.wedding-why-drone .wedding-why-content { order: 1; }
.wedding-why-drone .wedding-why-image-wrap { order: 2; }
@media (min-width: 968px) {
  .wedding-why-drone .wedding-why-content { order: unset; }
  .wedding-why-drone .wedding-why-image-wrap { order: unset; }
}

/* Pricing (GoDaddy-style: toggle + 4 plans, one recommended) */
.wedding-pricing {
  padding: 5rem 0;
  background: #fff;
}

.wedding-pricing .container {
  max-width: 80rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .wedding-pricing .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.wedding-pricing-header {
  text-align: center;
  margin-bottom: 2.5rem;
  padding-left: 0;
  padding-right: 0;
}

.wedding-pricing .wedding-section-title {
  margin-bottom: 0.5rem;
  background: linear-gradient(to right, var(--purple-600), var(--pink-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wedding-pricing-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.wedding-pricing-subtitle {
  font-size: 1.125rem;
  color: var(--gray-600);
  margin-bottom: 1.5rem;
}

/* Toggle (pill) */
.wedding-pricing-toggle {
  display: inline-flex;
  background: var(--gray-100);
  border-radius: 9999px;
  padding: 0.25rem;
  margin-bottom: 0.5rem;
}

.wedding-pricing-toggle-btn {
  padding: 0.625rem 1.5rem;
  border: none;
  border-radius: 9999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-600);
  background: transparent;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.wedding-pricing-toggle-btn:hover {
  color: var(--gray-900);
}

.wedding-pricing-toggle-btn.is-active {
  background: var(--gray-900);
  color: #fff;
}

.wedding-pricing-toggle-hint {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin: 0;
}

/* Grid: 2 columns (2 cards per row) */
.wedding-pricing-grid-two {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 100%;
}

.wedding-pricing-grid-two .wedding-pricing-card {
  max-width: 300px;
  width: 100%;
  justify-self: center;
}

/* Baby Shower pricing: better spacing between the two cards */
#babyShowerPricingGrid.wedding-pricing-grid-two {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  row-gap: 2rem;
}
#babyShowerPricingGrid.wedding-pricing-grid-two .wedding-pricing-card {
  flex: 0 1 300px;
  max-width: 300px;
}

/* Baby Shower pricing: RECOMMENDED badge centered on card */
#babyShowerPricingGrid .wedding-pricing-recommended-badge {
  left: 50%;
  transform: translateX(-50%);
}

/* Baby Shower pricing: hide cards by tier when toggling Photography / Photography + Video */
#babyShowerPricingGrid .wedding-pricing-card[hidden] {
  display: none !important;
}

#newbornPricingGrid.wedding-pricing-grid-two {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
#newbornPricingGrid.wedding-pricing-grid-two .wedding-pricing-card {
  flex: 0 1 300px;
  max-width: 300px;
}
#newbornPricingGrid .wedding-pricing-recommended-badge {
  left: 50%;
  transform: translateX(-50%);
}
#newbornPricingGrid .wedding-pricing-card[hidden] {
  display: none !important;
}

#housewarmingPricingGrid.wedding-pricing-grid-two {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
#housewarmingPricingGrid.wedding-pricing-grid-two .wedding-pricing-card {
  flex: 0 1 300px;
  max-width: 300px;
}
#housewarmingPricingGrid .wedding-pricing-recommended-badge {
  left: 50%;
  transform: translateX(-50%);
}
#housewarmingPricingGrid .wedding-pricing-card[hidden] {
  display: none !important;
}

#educationalPricingGrid.wedding-pricing-grid-two {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
#educationalPricingGrid.wedding-pricing-grid-two .wedding-pricing-card {
  flex: 0 1 300px;
  max-width: 300px;
}
#educationalPricingGrid .wedding-pricing-recommended-badge {
  left: 50%;
  transform: translateX(-50%);
}
#educationalPricingGrid .wedding-pricing-card[hidden] {
  display: none !important;
}

#birthdayPricingGrid.wedding-pricing-grid-two {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
#birthdayPricingGrid.wedding-pricing-grid-two .wedding-pricing-card {
  flex: 0 1 300px;
  max-width: 300px;
}
#birthdayPricingGrid .wedding-pricing-recommended-badge {
  left: 50%;
  transform: translateX(-50%);
}
#birthdayPricingGrid .wedding-pricing-card[hidden] {
  display: none !important;
}

#religiousPricingGrid.wedding-pricing-grid-two {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
#religiousPricingGrid.wedding-pricing-grid-two .wedding-pricing-card {
  flex: 0 1 300px;
  max-width: 300px;
}
#religiousPricingGrid .wedding-pricing-recommended-badge {
  left: 50%;
  transform: translateX(-50%);
}
#religiousPricingGrid .wedding-pricing-card[hidden] {
  display: none !important;
}

#professionalPricingGrid.wedding-pricing-grid-two {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
#professionalPricingGrid.wedding-pricing-grid-two .wedding-pricing-card {
  flex: 0 1 300px;
  max-width: 300px;
}
#professionalPricingGrid .wedding-pricing-recommended-badge {
  left: 50%;
  transform: translateX(-50%);
}
#professionalPricingGrid .wedding-pricing-card[hidden] {
  display: none !important;
}

#fashionPricingGrid.wedding-pricing-grid-two {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
#fashionPricingGrid.wedding-pricing-grid-two .wedding-pricing-card {
  flex: 0 1 300px;
  max-width: 300px;
}
#fashionPricingGrid .wedding-pricing-recommended-badge {
  left: 50%;
  transform: translateX(-50%);
}
#fashionPricingGrid .wedding-pricing-card[hidden] {
  display: none !important;
}

#lifestylePricingGrid.wedding-pricing-grid-two {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
#lifestylePricingGrid.wedding-pricing-grid-two .wedding-pricing-card {
  flex: 0 1 300px;
  max-width: 300px;
}
#lifestylePricingGrid .wedding-pricing-recommended-badge {
  left: 50%;
  transform: translateX(-50%);
}
#lifestylePricingGrid .wedding-pricing-card[hidden] {
  display: none !important;
}

@media (min-width: 640px) {
  .wedding-pricing-grid-two { grid-template-columns: repeat(2, 1fr); }
}

/* Grid: 4 columns on large, full container width */
.wedding-pricing-grid-four {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 640px) {
  .wedding-pricing-grid-four { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .wedding-pricing-grid-four { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

.wedding-pricing-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.wedding-pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(147,51,234,.18);
}

.wedding-pricing-recommended {
  border-color: rgba(13,148,136,.55);
  box-shadow: 0 0 0 2px rgba(13,148,136,.18), var(--shadow-xl);
}

.wedding-pricing-recommended-badge {
  position: absolute;
  top: -0.75rem;
  left: 1.25rem;
  background: #0d9488;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  box-shadow: 0 6px 18px rgba(13,148,136,.25);
}

.wedding-pricing-plan-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 0.35rem 0;
}

.wedding-pricing-recommended .wedding-pricing-plan-name {
  margin-top: 0.25rem;
}

.wedding-pricing-amt {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.15rem;
  letter-spacing: -0.02em;
}

.wedding-pricing-term {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin: 0 0 1.125rem 0;
}

.wedding-pricing-cta {
  width: 100%;
  text-align: center;
  padding: 0.8rem 1rem;
  font-weight: 600;
  background: var(--gray-900);
  border-color: var(--gray-900);
  margin-bottom: 1.1rem;
  border-radius: 0.75rem;
}

.wedding-pricing-cta:hover {
  background: #1f2937;
  border-color: #1f2937;
}

.wedding-pricing-features {
  list-style: none;
  margin: 0;
  padding: 1.1rem 0 0 0;
  font-size: 0.875rem;
  color: var(--gray-600);
  flex: 1;
  border-top: 1px solid rgba(0,0,0,.06);
}

.wedding-pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0;
}

.wedding-pricing-feature-icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: rgba(147,51,234,.12);
  color: var(--purple-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
}

.wedding-pricing-recommended .wedding-pricing-feature-icon {
  background: rgba(13,148,136,.14);
  color: #0d9488;
}

.wedding-pricing-popular {
  border-color: var(--purple-500);
  box-shadow: 0 0 0 2px rgba(147,51,234,.15);
}

/* What Makes Us Different (Figma) */
.wedding-different {
  padding: 5rem 0;
  background: #fff;
}

.wedding-different-header {
  text-align: center;
  margin-bottom: 4rem;
}

.wedding-different-title {
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0;
  color: var(--gray-900);
}

@media (min-width: 768px) {
  .wedding-different-title { font-size: 3rem; }
}

@media (min-width: 1024px) {
  .wedding-different-title { font-size: 3.75rem; }
}

.wedding-different-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .wedding-different-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .wedding-different-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}

.wedding-different-item {
  text-align: center;
}

.wedding-different-icon {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wedding-different-icon svg {
  width: 2.5rem;
  height: 2.5rem;
}

.wedding-different-icon-purple {
  background: var(--purple-100);
  color: var(--purple-600);
}

.wedding-different-icon-pink {
  background: #fce7f3;
  color: var(--pink-600);
}

.wedding-different-item h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--gray-900);
}

.wedding-different-item p {
  font-size: 1rem;
  color: var(--gray-600);
  margin: 0;
  line-height: 1.5;
}

/* FAQ */
.wedding-faq {
  padding: 5rem 0;
  background: var(--gray-50);
}

.wedding-faq .wedding-section-title {
  margin-bottom: 0.5rem;
  text-align: center;
  background: linear-gradient(to right, var(--purple-600), var(--pink-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wedding-faq .section-desc {
  text-align: center;
}

.wedding-faq-list { max-width: 48rem; margin: 0 auto; }

.wedding-faq-item {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.wedding-faq-item summary {
  padding: 1rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.wedding-faq-item summary::-webkit-details-marker { display: none; }

.wedding-faq-item summary::after {
  content: '+';
  float: right;
  font-size: 1.25rem;
  color: var(--purple-600);
}

.wedding-faq-item[open] summary::after { content: '−'; }

.wedding-faq-item p {
  padding: 0 1.25rem 1rem;
  margin: 0;
  color: var(--gray-600);
  font-size: .9375rem;
  line-height: 1.6;
}

/* CTA */
.wedding-cta {
  background: linear-gradient(to right, var(--purple-600), var(--pink-600));
  color: #fff;
  padding: 5rem 2rem;
  text-align: center;
}

.wedding-cta-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .wedding-cta-title { font-size: 2.5rem; }
}

.wedding-cta p {
  margin-bottom: 1.5rem;
  opacity: .95;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.wedding-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.wedding-cta-outline {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}

.wedding-cta-outline:hover { background: rgba(255,255,255,.15); }

/* ========== Admin Dashboard (Figma-style) ========== */
.admin-layout {
  display: flex;
  min-height: calc(100vh - 4rem);
  background: var(--gray-50);
}

.admin-sidebar {
  position: fixed;
  left: 0;
  top: 4rem;
  width: 16rem;
  height: calc(100vh - 4rem);
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
  overflow: hidden;
  z-index: 40;
}

.admin-sidebar-collapsed {
  width: 4rem;
}

.admin-sidebar-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 0;
  min-width: 16rem;
  overflow: hidden;
}

.admin-sidebar-collapsed .admin-sidebar-inner {
  min-width: 4rem;
}

.admin-sidebar-brand {
  flex-shrink: 0;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.admin-sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

.admin-sidebar-scroll .admin-sidebar-nav {
  flex-shrink: 0;
}

.admin-sidebar-collapsed .admin-sidebar-brand {
  padding: 0.5rem 0.75rem 0.75rem;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.admin-sidebar-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gray-900);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.2s;
  min-width: 0;
}

.admin-sidebar-collapsed .admin-sidebar-logo {
  justify-content: center;
}

.admin-sidebar-text {
  white-space: nowrap;
}

.admin-sidebar-collapsed .admin-sidebar-text {
  display: none;
}

.admin-sidebar-toggle {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: var(--gray-100);
  border-radius: 0.375rem;
  color: var(--gray-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.admin-sidebar-toggle:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}

.admin-sidebar-toggle-icon {
  transition: transform 0.2s ease;
}

.admin-sidebar-collapsed .admin-sidebar-toggle-icon {
  transform: rotate(180deg);
}

.admin-sidebar-collapsed .admin-sidebar-toggle {
  margin: 0 auto;
}

.admin-sidebar-logo:hover { color: var(--purple-600, #7c3aed); }

.admin-sidebar-emoji {
  flex-shrink: 0;
  font-size: 1.25em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-sidebar-emoji-logo {
  font-size: 1.125em;
}
.admin-sidebar-group-label .admin-sidebar-emoji {
  font-size: 1.125em;
}
.admin-sidebar-sublink .admin-sidebar-emoji {
  font-size: 1.125em;
}

.admin-sidebar-icon {
  flex-shrink: 0;
  color: var(--purple-600, #7c3aed);
}

.admin-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 0.75rem;
}

.admin-sidebar-collapsed .admin-sidebar-nav {
  padding: 0 0.5rem;
  align-items: center;
}

.admin-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  color: #374151;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: background 0.2s, color 0.2s;
}

.admin-sidebar-collapsed .admin-sidebar-link {
  padding: 0.625rem;
  justify-content: center;
}

.admin-sidebar-link:hover {
  background: rgba(124, 58, 237, 0.08);
  color: #5b21b6;
}

.admin-sidebar-link.active {
  background: rgba(124, 58, 237, 0.14);
  color: #6d28d9;
  font-weight: 600;
}

.admin-sidebar-link-icon {
  flex-shrink: 0;
  opacity: 0.85;
}

.admin-sidebar-footer {
  margin-top: auto;
  padding: 1rem 0.75rem 0;
  border-top: 1px solid rgba(0,0,0,.06);
  margin-bottom:60px;
}

.admin-sidebar-collapsed .admin-sidebar-footer {
  padding: 0.75rem 0.5rem 0;
  align-items: center;
}

.admin-sidebar-collapsed .admin-sidebar-footer .admin-sidebar-link {
  justify-content: center;
}

.admin-sidebar-back {
  color: #6d28d9;
  font-weight: 500;
}

.admin-sidebar-back:hover {
  color: #5b21b6;
  background: rgba(124, 58, 237, 0.1);
}

.admin-sidebar-group {
  margin-top: 0.5rem;
}
.admin-sidebar-group-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: color 0.15s ease, background 0.15s ease;
}
.admin-sidebar-group-label:hover {
  color: #4b5563;
  background: rgba(0, 0, 0, 0.04);
}
.admin-sidebar-group-label-link {
  text-decoration: none;
  color: inherit;
}
.admin-sidebar-group-label-link:hover {
  color: #4b5563;
  background: rgba(0, 0, 0, 0.04);
}
.admin-sidebar-group-label-link.active {
  background: rgba(124, 58, 237, 0.14);
  color: #6d28d9;
}
.admin-sidebar-group-label .admin-sidebar-link-icon {
  opacity: 0.7;
}
.admin-sidebar-group-chevron {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: #6b7280;
  opacity: 0.85;
}
.admin-sidebar-group.is-open .admin-sidebar-group-chevron {
  transform: rotate(90deg);
  color: #4b5563;
  opacity: 1;
}
.admin-sidebar-group-links {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
  padding-left: 1rem;
  padding-right: 0.75rem;
}
.admin-sidebar-group.is-open .admin-sidebar-group-links {
  max-height: 600px;
  transition: max-height 0.3s ease-out;
}
.admin-sidebar-group:not(.is-open) .admin-sidebar-group-links {
  max-height: 0;
  transition: max-height 0.25s ease-in;
}
.admin-sidebar-sublink {
  padding: 0.5rem 0.75rem 0.5rem 1.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.admin-sidebar-sublink .admin-sidebar-emoji {
  font-size: 1.125em;
}
.admin-sidebar-sublink .admin-sidebar-link-icon {
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  min-height: 1.125rem;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.admin-sidebar-sublink:hover .admin-sidebar-link-icon {
  opacity: 1;
}
.admin-sidebar-sublink.active .admin-sidebar-link-icon {
  opacity: 1;
}
.admin-sidebar-collapsed .admin-sidebar-group-label .admin-sidebar-text {
  display: none;
}
.admin-sidebar-collapsed .admin-sidebar-group-label {
  padding: 0.25rem 0.5rem;
  justify-content: center;
}
.admin-sidebar-collapsed .admin-sidebar-group-chevron {
  display: none;
}
.admin-sidebar-collapsed .admin-sidebar-group-links .admin-sidebar-sublink {
  padding-left: 0.75rem;
}

/* ========== Admin sidebar: mobile-friendly drawer ========== */
@media (max-width: 767px) {
  body.admin-mobile-menu-open { overflow: hidden; touch-action: none; }
  .admin-layout { flex-direction: column; }
  .admin-layout .admin-main { margin-left: 0; padding-top: 1rem; padding-left: 0; padding-right: 0; }
  /* On admin pages the header hamburger opens the sidebar; hide the site nav links on mobile */
  .admin-page .admin-page-nav-links { display: none !important; }
  /* Backdrop when drawer is open */
  .admin-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    top: 4rem;
    z-index: 90;
    background: rgba(0,0,0,0.4);
    -webkit-tap-highlight-color: transparent;
  }
  body.admin-mobile-menu-open .admin-sidebar-backdrop { display: block; }
  /* Sidebar as drawer: off-canvas left, slide in when open */
  .admin-sidebar {
    position: fixed;
    left: 0;
    top: 4rem;
    width: min(300px, 85vw);
    max-width: 300px;
    height: calc(100vh - 4rem);
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
    z-index: 95;
    border-right: none;
    box-shadow: none;
    overflow: hidden;
  }
  body.admin-mobile-menu-open .admin-sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }
  .admin-sidebar-inner {
    padding: 0.75rem 0;
    padding-left: max(0.75rem, env(safe-area-inset-left));
    min-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .admin-sidebar-brand {
    padding: 0.75rem 1rem 0.5rem;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .admin-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .admin-sidebar-nav { flex-direction: column; padding: 0 0.5rem; gap: 0.125rem; }
  .admin-sidebar-link {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    min-height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    -webkit-tap-highlight-color: transparent;
  }
  .admin-sidebar-footer {
    margin-top: auto;
    padding: 1rem 0.5rem 0;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(0,0,0,.08);
  }
  .admin-sidebar-footer .admin-sidebar-link { min-height: 44px; }
  /* Keep collapse toggle as "Close" on mobile: larger tap target */
  .admin-sidebar-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  .admin-sidebar-collapsed .admin-sidebar-brand { flex-direction: row; }
  .admin-sidebar-collapsed .admin-sidebar-text { display: inline; }
  .admin-sidebar-collapsed .admin-sidebar-toggle-icon { transform: none; }
  .app.admin-page > .footer,
  .admin-page .footer,
  .admin-page.admin-sidebar-is-collapsed .footer { margin-left: 0; width: 100%; }

  /* Admin-page content: safe area, touch targets, typography */
  .admin-page .admin-main .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .admin-page .admin-back {
    min-height: 44px;
    padding: 0.5rem 0;
    align-items: center;
    -webkit-tap-highlight-color: rgba(124, 58, 237, 0.12);
  }
  .admin-page .admin-header {
    margin-bottom: 1.5rem;
  }
  .admin-page .admin-title {
    font-size: 1.5rem;
    line-height: 1.25;
    margin-bottom: 0.25rem;
  }
  .admin-page .admin-subtitle {
    font-size: 0.875rem;
  }
  .admin-page .admin-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .admin-page .admin-dashboard-card {
    padding: 1.25rem 1rem;
    min-height: 44px;
    -webkit-tap-highlight-color: rgba(124, 58, 237, 0.08);
  }
  .admin-page .admin-dashboard-card-title {
    font-size: 1.0625rem;
  }
  .admin-page .admin-dashboard-card-desc {
    font-size: 0.8125rem;
  }
  /* Baby Shower (and other service) edit dashboards: long card titles wrap */
  .admin-baby-shower-edits-page .admin-dashboard-card-title,
  .admin-newborn-edits-page .admin-dashboard-card-title,
  .admin-housewarming-edits-page .admin-dashboard-card-title,
  .admin-educational-edits-page .admin-dashboard-card-title,
  .admin-birthday-edits-page .admin-dashboard-card-title,
  .admin-religious-edits-page .admin-dashboard-card-title,
  .admin-professional-edits-page .admin-dashboard-card-title,
  .admin-fashion-edits-page .admin-dashboard-card-title,
  .admin-lifestyle-edits-page .admin-dashboard-card-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}
@media (min-width: 768px) {
  .admin-sidebar-backdrop { display: none !important; }
}

.admin-layout .admin-main {
  flex: 1;
  min-width: 0;
  min-height: auto;
  padding: 2rem 0 4rem;
}

/* Footer in admin: full width by default (mobile); desktop overrides in media below */
.app.admin-page > .footer,
.admin-page .footer {
  position: relative;
  z-index: 50;
  max-width: none;
  margin-left: 0;
  width: 100%;
  transition: margin-left 0.2s ease;
}

/* Desktop: main and footer offset by sidebar width */
@media (min-width: 768px) {
  .admin-layout .admin-main {
    margin-left: 16rem;
    transition: margin-left 0.2s ease;
  }
  .admin-layout.admin-sidebar-is-collapsed .admin-main {
    margin-left: 4rem;
  }
  .app.admin-page > .footer,
  .admin-page .footer {
    margin-left: 16rem;
    width: calc(100% - 16rem);
  }
  .app.admin-page.admin-sidebar-is-collapsed > .footer,
  .admin-page.admin-sidebar-is-collapsed .footer {
    margin-left: 4rem;
    width: calc(100% - 4rem);
  }
}

/* Footer inside main (e.g. team-management): main already has offset, so no extra margin */
.admin-main .footer {
  margin-left: 0;
  width: 100%;
}

.admin-layout.admin-sidebar-is-collapsed .admin-main .footer {
  margin-left: 0;
  width: 100%;
}

.admin-page .admin-main {
  min-height: 80vh;
  background: var(--gray-50);
  padding: 2rem 0 4rem;
}

/* When footer is inside main (team-management), no extra space after it */
.admin-layout:has(.admin-main .footer) {
  min-height: auto;
}
.admin-page .admin-main:has(.footer) {
  min-height: auto;
  padding-bottom: 0;
}

.admin-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gray-600);
  text-decoration: none;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  transition: color 0.2s;
}

.admin-back:hover { color: var(--gray-900); }

.admin-back-icon { flex-shrink: 0; }

.admin-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .admin-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.admin-title {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--gray-900);
}

.admin-subtitle {
  color: var(--gray-600);
  font-size: 0.9375rem;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.admin-btn-primary {
  background: linear-gradient(to right, var(--purple-600), var(--pink-600));
  color: var(--white);
  border: none;
}

.admin-btn-primary:hover { opacity: 0.95; }

.admin-btn-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.admin-export-btn { cursor: pointer; }

/* Stats grid */
.admin-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
}

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

.admin-stat-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  transition: box-shadow 0.2s;
}

.admin-stat-card:hover { box-shadow: var(--shadow-lg); }

.admin-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.admin-stat-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-stat-icon-purple { background: var(--purple-100); color: var(--purple-600); }
.admin-stat-icon-yellow { background: #fef3c7; color: #b45309; }
.admin-stat-icon-blue { background: #dbeafe; color: #2563eb; }
.admin-stat-icon-green { background: #d1fae5; color: #059669; }

.admin-stat-badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
  background: var(--white);
}

.admin-stat-badge-yellow { background: #fffbeb; color: #b45309; border-color: #fcd34d; }
.admin-stat-badge-blue { background: #eff6ff; color: #2563eb; border-color: #93c5fd; }
.admin-stat-badge-green { background: #ecfdf5; color: #059669; border-color: #6ee7b7; }

.admin-stat-value {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--gray-900);
}

.admin-stat-label {
  font-size: 0.875rem;
  color: var(--gray-600);
}

/* Admin dashboard overview (hub) */
.admin-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
@media (min-width: 640px) {
  .admin-dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .admin-dashboard-grid { grid-template-columns: repeat(3, 1fr); }
}
.admin-dashboard-card {
  display: block;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-dashboard-card:hover {
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.admin-dashboard-card-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.admin-dashboard-icon-purple { background: rgba(124, 58, 237, 0.12); color: var(--purple-600, #7c3aed); }
.admin-dashboard-icon-blue { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.admin-dashboard-icon-green { background: rgba(5, 150, 105, 0.12); color: #059669; }
.admin-dashboard-icon-amber { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.admin-dashboard-icon-teal { background: rgba(20, 184, 166, 0.12); color: #0d9488; }
.admin-dashboard-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 0.375rem 0;
}
.admin-dashboard-card-desc {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin: 0 0 1rem 0;
  line-height: 1.4;
}
.admin-dashboard-card-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--purple-600, #7c3aed);
}
.admin-dashboard-card:hover .admin-dashboard-card-link {
  text-decoration: underline;
}

/* Sleek stats variant (appointment etc.) */
.admin-stats-sleek {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
  .admin-stats-sleek { grid-template-columns: repeat(4, 1fr); }
}
.admin-stats-roles.admin-stats-sleek {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.admin-stat-sleek-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--white);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-stat-sleek-card:hover {
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.admin-stat-sleek-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-stat-sleek-purple .admin-stat-sleek-icon { background: rgba(124, 58, 237, 0.12); color: var(--purple-600, #7c3aed); }
.admin-stat-sleek-blue .admin-stat-sleek-icon { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.admin-stat-sleek-amber .admin-stat-sleek-icon { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.admin-stat-sleek-green .admin-stat-sleek-icon { background: rgba(5, 150, 105, 0.12); color: #059669; }
.admin-stat-sleek-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.admin-stat-sleek-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}
.admin-stat-sleek-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Filters */
.admin-filters {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .admin-filters { flex-direction: row; }
}

.admin-search-wrap {
  flex: 1;
  position: relative;
}

.admin-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gray-600);
  pointer-events: none;
}

.admin-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.5rem;
  font-size: 0.875rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: var(--white);
  color: var(--gray-900);
  position: relative;
  z-index: 1;
  -webkit-user-select: text;
  user-select: text;
}

.admin-search-input::placeholder { color: #9ca3af; }
.admin-search-input:focus { outline: none; border-color: var(--purple-500); box-shadow: 0 0 0 3px rgba(168,85,247,.15); }

.admin-filter-select-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .admin-filter-select-wrap { min-width: 12rem; }
}

.admin-filter-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gray-600);
  flex-shrink: 0;
}

.admin-select {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: var(--white);
  color: var(--gray-900);
  cursor: pointer;
}

.admin-select:focus { outline: none; border-color: var(--purple-500); }

/* Table */
.admin-table-wrap {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.admin-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--gray-900);
  background: var(--gray-50);
  border-bottom: 1px solid #e5e7eb;
}

.admin-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  color: var(--gray-900);
  vertical-align: middle;
}

.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--gray-50); }

.admin-td-id { font-weight: 500; }

.admin-contact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--gray-600);
}

.admin-datetime { color: var(--gray-600); }

.admin-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.375rem;
}

.admin-badge-pending { background: #fef3c7; color: #b45309; }
.admin-badge-contacted { background: #e0e7ff; color: #4338ca; }
.admin-badge-quotation-sent { background: #fce7f3; color: #be185d; }
.admin-badge-follow-up-required { background: #fed7aa; color: #c2410c; }
.admin-badge-confirmed { background: #d1fae5; color: #059669; }
.admin-badge-team-not-assigned { background: #fef3c7; color: #b45309; }
.admin-badge-team-assigned { background: #d1fae5; color: #059669; }
.admin-badge-completed { background: #d1fae5; color: #059669; }
.admin-badge-cancelled { background: #fee2e2; color: #dc2626; }

.admin-status-select {
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  background: var(--white);
  cursor: pointer;
  min-width: 7rem;
}

.admin-status-select:focus { outline: none; border-color: var(--purple-500); }

.admin-results-info {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--gray-600);
  text-align: center;
}

@media (max-width: 767px) {
  .admin-table-wrap { overflow-x: auto; }
  .admin-table { min-width: 42rem; }
}

/* Admin Team Management (Figma-style) */
.admin-stat-icon-orange { background: #ffedd5; color: #ea580c; }

.admin-tabs { margin-bottom: 1.5rem; }

.admin-tabs-list {
  display: inline-flex;
  gap: 0;
  padding: 0.25rem;
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-xl);
  margin-bottom: 1.5rem;
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--gray-600);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.admin-tab:hover { color: var(--gray-900); background: var(--gray-50); }

.admin-tab.active {
  background: var(--gray-900);
  color: var(--white);
}

.admin-tab-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

.admin-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 9999px;
  background: var(--gray-100);
  color: var(--gray-600);
  margin-left: 0.3rem;
  transition: background 0.2s, color 0.2s;
}
.admin-tab.active .admin-tab-count {
  background: rgba(255,255,255,.2);
  color: var(--white);
}

.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; }

.admin-filters-team { flex-wrap: wrap; }
.admin-filters-team .admin-add-teammate-btn { white-space: nowrap; }

.admin-teammate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .admin-teammate-grid { grid-template-columns: repeat(2, 1fr); }
}

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

.admin-teammate-scroll-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
  visibility: hidden;
}
.admin-teammate-load-more-wrap {
  margin-top: 1rem;
  text-align: center;
}
.admin-teammate-load-more-btn { min-width: 10rem; }
.admin-teammate-load-more-loading { color: var(--gray-600); }

.admin-teammate-card,
.admin-team-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  transition: box-shadow 0.2s;
  min-width: 370px;
max-width:450px;
}

.admin-teammate-card:hover,
.admin-team-card:hover { box-shadow: var(--shadow-lg); }

.admin-teammate-card-header,
.admin-team-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.admin-teammate-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-teammate-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-500), var(--pink-500));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
}

.admin-teammate-avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.6875rem;
}

.admin-teammate-avatar-img {
  background-color: var(--gray-200);
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.admin-teammate-avatar-img.admin-teammate-avatar-skeleton {
  background: var(--gray-200);
  background-image: none;
}

.admin-teammate-avatar-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-400) 50%, var(--gray-100) 100%);
  background-size: 200% 100%;
  animation: admin-album-shimmer 1.2s ease-in-out infinite;
}

.admin-teammate-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.125rem;
}

.admin-teammate-id {
  font-size: 0.8125rem;
  color: var(--gray-600);
}

.admin-card-menu {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 0.375rem;
  color: var(--gray-600);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.admin-card-menu:hover { background: var(--gray-100); color: var(--gray-900); }

.admin-card-dropdown {
  position: fixed;
  z-index: 1100;
  min-width: 10rem;
  padding: 0.25rem 0;
  background: var(--white);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.admin-card-dropdown[hidden] { display: none !important; }
.admin-card-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  text-align: left;
  border: none;
  background: none;
  font-size: 0.875rem;
  color: var(--gray-800);
  cursor: pointer;
}
.admin-card-dropdown-item:hover { background: var(--gray-100); }
.admin-card-dropdown-item-danger { color: var(--red-600, #dc2626); }
.admin-card-dropdown-item-danger:hover { background: rgba(220,38,38,.08); }
.admin-teammate-card[data-archived="true"] { opacity: 0.65; border-style: dashed; }

.admin-teammate-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.admin-role-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px solid transparent;
}

.admin-role-photographer { background: var(--purple-100); color: var(--purple-600); }
.admin-role-videographer { background: #dbeafe; color: #2563eb; }
.admin-role-editor { background: #d1fae5; color: #059669; }
.admin-role-drone { background: #e0f2fe; color: #0284c7; }
.admin-role-assistant { background: var(--gray-100); color: var(--gray-700); }

.admin-status-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px solid transparent;
}

.admin-status-active { background: #d1fae5; color: #059669; }
.admin-status-inactive { background: var(--gray-100); color: var(--gray-600); }

.admin-teammate-details {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-bottom: 1rem;
}

.admin-teammate-details p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.admin-detail-icon { flex-shrink: 0; color: var(--gray-500); }

.admin-detail-alt { font-size: 0.75rem; color: var(--gray-500); margin-left: 0.25rem; }

.admin-teammate-notes { word-break: break-word; }
.admin-teammate-notes .admin-notes-label { font-weight: 500; color: var(--gray-700); }

.admin-teammate-spec { margin-bottom: 1rem; }

.admin-teammate-spec-label,
.admin-equipment-label,
.admin-team-members-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 0.5rem;
}

.admin-spec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.admin-spec-tags span {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  background: var(--gray-100);
  color: var(--gray-700);
  border-radius: 0.25rem;
}

.admin-teammate-equipment {
  border-top: 1px solid #f3f4f6;
  padding-top: 1rem;
}

.admin-equipment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.admin-equipment-add {
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  border: none;
  background: transparent;
  color: var(--purple-600);
  cursor: pointer;
  font-weight: 500;
}

.admin-equipment-add:hover { text-decoration: underline; }

.admin-equipment-list {
  list-style: none;
  font-size: 0.8125rem;
  color: var(--gray-600);
}

.admin-equipment-list li {
  padding: 0.5rem 0.625rem;
  background: var(--gray-50);
  border-radius: 0.5rem;
  margin-bottom: 0.375rem;
}

/* Equipment item: Name (dark, big) → Type (medium) → Condition (light, small) */
.admin-equipment-item-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.3;
  margin-bottom: 0.125rem;
}

.admin-equipment-item-type {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-700);
  line-height: 1.3;
  margin-bottom: 0.0625rem;
}

.admin-equipment-item-condition {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gray-500);
  line-height: 1.3;
}

.admin-equipment-more {
  margin-top: 0.375rem;
}

.admin-equipment-list-empty .admin-no-equipment {
  text-align: center;
  color: var(--gray-500);
  font-style: italic;
  background: transparent;
}

.admin-teammate-review {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,.06);
}

.admin-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-review-summary {
  font-size: 0.8125rem;
  color: var(--gray-700);
}

.admin-review-avg-group {
  display: inline-block;
  margin-right: 0.75rem;
}

.admin-review-avg-group:last-of-type {
  margin-right: 0;
}

.admin-review-avg-stars {
  color: #eab308;
  letter-spacing: 0.05em;
}

.admin-review-avg-value {
  font-weight: 600;
}

.admin-review-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
}

.admin-review-add {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(0,0,0,.12);
  background: var(--white);
  border-radius: 0.375rem;
  color: var(--gray-700);
  cursor: pointer;
}

.admin-review-add:hover {
  background: var(--gray-50);
}

.admin-review-list {
  list-style: none;
  font-size: 0.8125rem;
  color: var(--gray-600);
  max-height: 8rem;
  overflow-y: auto;
}

.admin-review-item {
  padding: 0.375rem 0.5rem;
  background: var(--gray-50);
  border-radius: 0.5rem;
  margin-bottom: 0.25rem;
}

.admin-review-stars {
  color: #eab308;
  letter-spacing: 0.05em;
}

.admin-review-list-empty .admin-no-review {
  text-align: center;
  color: var(--gray-500);
  font-style: italic;
  background: transparent;
}

.admin-review-stars-input {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.admin-star-btn {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(0,0,0,.15);
  background: var(--white);
  border-radius: 0.375rem;
  font-size: 1.25rem;
  color: var(--gray-300);
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}

.admin-star-btn:hover,
.admin-star-btn.admin-star-btn-active {
  color: #eab308;
  border-color: #eab308;
}

/* Review modal: stepper */
.admin-review-modal-box .admin-modal-body {
  padding-top: 0.5rem;
}

.admin-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 1.5rem;
}

.admin-stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.admin-stepper-num {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-stepper-step-active .admin-stepper-num {
  background: var(--purple-600, #7c3aed);
  color: var(--white);
}

.admin-stepper-step-done .admin-stepper-num {
  background: var(--gray-500);
  color: var(--white);
}

.admin-stepper-label {
  font-size: 0.75rem;
  color: var(--gray-600);
}

.admin-stepper-step-active .admin-stepper-label {
  color: var(--gray-900);
  font-weight: 500;
}

.admin-stepper-line {
  width: 2rem;
  height: 2px;
  background: var(--gray-200);
  margin: 0 0.25rem;
}

.admin-review-step {
  display: none;
  min-height: 12rem;
}

.admin-review-step.admin-review-step-active {
  display: block;
}

.admin-review-step-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
  justify-content: flex-end;
}

/* Step 1: calendar */
.admin-review-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.admin-calendar-nav {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(0,0,0,.15);
  background: var(--white);
  border-radius: 0.375rem;
  font-size: 1.25rem;
  color: var(--gray-700);
  cursor: pointer;
  line-height: 1;
}

.admin-calendar-nav:hover {
  background: var(--gray-50);
}

.admin-calendar-month-year {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.admin-calendar-hint {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-bottom: 0.5rem;
}

.admin-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}

.admin-calendar-day {
  aspect-ratio: 1;
  min-width: 2.25rem;
  padding: 0.15rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  background: var(--gray-100);
  color: var(--gray-500);
  cursor: not-allowed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.admin-calendar-day-num {
  line-height: 1.1;
}

.admin-calendar-day-count {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--gray-500);
  line-height: 1;
}

.admin-calendar-day-has-events .admin-calendar-day-count {
  color: var(--purple-600, #7c3aed);
}

.admin-calendar-day-selected .admin-calendar-day-count {
  color: var(--purple-700, #6d28d9);
}

.admin-calendar-day-unreviewed {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--gray-500);
  line-height: 1;
}

.admin-calendar-day-has-events .admin-calendar-day-unreviewed {
  color: #ea580c;
}

.admin-calendar-day-selected .admin-calendar-day-unreviewed {
  color: #c2410c;
}

.admin-calendar-day-has-events {
  border-color: rgba(0,0,0,.12);
  color: var(--gray-800);
  cursor: pointer;
}

/* At least one event not reviewed → light red */
.admin-calendar-day-has-unreviewed {
  background: #fef2f2;
  border-color: #fecaca;
}

.admin-calendar-day-has-unreviewed:hover {
  background: #fee2e2;
}

.admin-calendar-day-has-unreviewed.admin-calendar-day-selected {
  background: #fecaca;
  border-color: #dc2626;
  color: #b91c1c;
}

/* All events reviewed → light green */
.admin-calendar-day-all-reviewed {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.admin-calendar-day-all-reviewed:hover {
  background: #dcfce7;
}

.admin-calendar-day-all-reviewed.admin-calendar-day-selected {
  background: #bbf7d0;
  border-color: #16a34a;
  color: #15803d;
}

.admin-calendar-day-selected {
  border-width: 2px;
}

.admin-review-step-date {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-800);
  margin-bottom: 0.5rem;
}

.admin-review-event-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-review-event-option {
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 0.5rem;
  background: var(--white);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.admin-review-event-option:hover {
  background: var(--gray-50);
}

.admin-review-event-option-selected {
  border-color: var(--purple-600, #7c3aed);
  background: var(--purple-50, #f5f3ff);
}

.admin-review-step-event {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-800);
  margin-bottom: 0.5rem;
}

.admin-review-client-details {
  margin-bottom: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(to bottom, #fafafa 0%, var(--gray-50) 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden;
}

.admin-review-client-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.admin-review-client-icon {
  font-size: 1.125rem;
  line-height: 1;
  opacity: 0.9;
}

.admin-review-client-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
  letter-spacing: 0.01em;
}

.admin-review-client-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
  padding: 1rem 1rem 1.25rem;
}

.admin-review-client-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}

.admin-review-client-item-full {
  grid-column: 1 / -1;
}

.admin-review-client-item .admin-review-client-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-800);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-review-client-item .admin-review-client-value {
  font-size: 0.875rem;
  color: var(--gray-200);
  font-weight: 300;
  word-break: break-word;
}

.admin-review-client-item .admin-review-client-value:empty::before {
  content: "—";
  color: var(--gray-400);
  font-weight: 400;
}

.admin-teams-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin-teams-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
}

.admin-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
 min-height:500px;
}

@media (min-width: 768px) {
  .admin-team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Empty state: no enquiries / no appointments */
.admin-team-grid .admin-empty-state {
  grid-column: 1 / -1;
  justify-self: center;
}
.admin-empty-state {
  text-align: center;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  max-width: 28rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-600, #6b7280);
  background: linear-gradient(135deg, var(--gray-50, #f9fafb) 0%, var(--gray-100, #f3f4f6) 100%);
  border-radius: 1rem;
  border: 1px dashed var(--gray-300, #d1d5db);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.admin-team-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.admin-team-desc {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-bottom: 1rem;
}

.admin-team-members { margin-bottom: 1rem; }

.admin-team-member-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-team-member {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: var(--gray-50);
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.admin-team-member span { font-weight: 500; color: var(--gray-900); }
.admin-team-member-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.admin-team-member-name { font-weight: 500; color: var(--gray-900); font-size: 0.875rem; line-height: 1.3; }
.admin-team-member-role { font-size: 0.75rem; color: var(--gray-600); line-height: 1.3; display: block; }
.admin-team-member-roles { font-size: 0.75rem; color: var(--gray-500); }

.admin-team-equipment { margin-bottom: 1rem; }
.admin-team-equipment-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-700);
  margin: 0 0 0.5rem 0;
}
.admin-team-equipment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin-team-equipment-list-item {
  padding: 0.5rem;
  background: var(--gray-50);
  border-radius: 0.5rem;
}
.admin-team-eq-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.admin-team-eq-name {
  font-weight: 500;
  color: var(--gray-900);
  font-size: 0.875rem;
  line-height: 1.3;
}
.admin-team-eq-responsible {
  font-size: 0.75rem;
  color: var(--gray-600);
  line-height: 1.3;
  display: block;
}
.admin-team-eq-meta { color: var(--gray-500); font-size: 0.8125rem; }

/* Team management card: section blocks (Team Members, Equipment, Additional Details) */
.admin-enquiry-card-body .admin-team-card-section {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--gray-200, #e5e7eb);
}
.admin-enquiry-card-body .admin-team-card-section-members {
  background: rgba(139, 92, 246, 0.06);
  border-left: 3px solid var(--purple-500, #8b5cf6);
}
.admin-enquiry-card-body .admin-team-card-section-equipment {
  background: rgba(59, 130, 246, 0.06);
  border-left: 3px solid var(--blue-500, #3b82f6);
}
.admin-enquiry-card-body .admin-team-card-section-details {
  background: rgba(107, 114, 128, 0.06);
  border-left: 3px solid var(--gray-500, #6b7280);
}
.admin-enquiry-card-body .admin-team-card-section-details .admin-form-notes-section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.admin-team-meta {
  font-size: 0.8125rem;
  color: var(--gray-500);
}

/* Enquiry cards with emoji design */
.admin-enquiry-card-emojis .admin-enquiry-card-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.admin-enquiry-card-emojis .admin-enquiry-emoji {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.admin-enquiry-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--gray-200);
}
.admin-enquiry-card-emojis .admin-appointment-type {
  display: block;
  margin-top: 0.125rem;
}
.admin-enquiry-card-emojis {
  padding: 1rem 1.25rem;
}
.admin-enquiry-card-body {
  background: var(--gray-50);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  border-left: 3px solid var(--gray-200);
}
.admin-enquiry-card-emojis .admin-enquiry-block {
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 0.375rem;
}
.admin-enquiry-card-emojis .admin-enquiry-block:last-of-type {
  margin-bottom: 0;
}
.admin-enquiry-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 0.375rem;
}
.admin-enquiry-value {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.admin-enquiry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.75rem;
  margin-top: 0;
}
.admin-enquiry-card-body .admin-enquiry-meta:first-child {
  margin-top: 0;
}
.admin-enquiry-meta span {
  font-size: 0.8125rem;
  color: var(--gray-600);
}
.admin-enquiry-link {
  color: var(--gray-700);
  text-decoration: none;
}
.admin-enquiry-link:hover {
  text-decoration: underline;
  color: var(--gray-900);
}

/* Delete enquiry confirmation modal */
.admin-enquiry-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.admin-enquiry-delete-modal[hidden] {
  display: none;
}
.admin-enquiry-delete-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.admin-enquiry-delete-modal-dialog {
  position: relative;
  background: #fff;
  border-radius: 0.5rem;
  padding: 1.5rem;
  max-width: 32rem;
  width: 100%;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.admin-enquiry-delete-modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--gray-900);
}
.admin-enquiry-delete-modal-message {
  font-size: 0.9375rem;
  color: var(--gray-600);
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
}
.admin-enquiry-delete-modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.admin-enquiry-delete-modal-actions .btn:first-child {
  margin-right: auto;
}
.admin-enquiry-delete-modal-actions .btn:last-child {
  margin-left: auto;
}
.admin-enquiry-delete-cancel-btn {
  color: #dc2626;
  border: 1px solid #dc2626;
  background: transparent;
}
.admin-enquiry-delete-cancel-btn:hover {
  background: #fef2f2;
  border-color: #b91c1c;
  color: #b91c1c;
}

/* Delete Enquiry modal – redesign (like Change Status) */
/* Delete Enquiry modal – open/close animation */
.admin-delete-enquiry-modal:not([hidden]) {
  display: flex;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}
.admin-delete-enquiry-modal:not([hidden]):not(.admin-delete-enquiry-modal-open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.admin-delete-enquiry-modal:not([hidden]).admin-delete-enquiry-modal-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.admin-delete-enquiry-modal .admin-enquiry-delete-modal-backdrop {
  transition: opacity 0.25s ease-out;
}
.admin-delete-enquiry-modal:not(.admin-delete-enquiry-modal-open) .admin-enquiry-delete-modal-backdrop {
  opacity: 0;
}
.admin-delete-enquiry-modal.admin-delete-enquiry-modal-open .admin-enquiry-delete-modal-backdrop {
  opacity: 1;
}
.admin-delete-enquiry-modal .admin-enquiry-delete-modal-dialog {
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.admin-delete-enquiry-modal:not(.admin-delete-enquiry-modal-open) .admin-enquiry-delete-modal-dialog {
  opacity: 0;
  transform: scale(0.96);
}
.admin-delete-enquiry-modal.admin-delete-enquiry-modal-open .admin-enquiry-delete-modal-dialog {
  opacity: 1;
  transform: scale(1);
}

/* Delete Teammate modal – open/close (same as Delete Enquiry) */
.admin-delete-teammate-modal:not([hidden]) {
  display: flex;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}
.admin-delete-teammate-modal:not([hidden]):not(.admin-delete-teammate-modal-open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.admin-delete-teammate-modal:not([hidden]).admin-delete-teammate-modal-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.admin-delete-teammate-modal .admin-enquiry-delete-modal-backdrop {
  transition: opacity 0.25s ease-out;
}
.admin-delete-teammate-modal:not(.admin-delete-teammate-modal-open) .admin-enquiry-delete-modal-backdrop {
  opacity: 0;
}
.admin-delete-teammate-modal.admin-delete-teammate-modal-open .admin-enquiry-delete-modal-backdrop {
  opacity: 1;
}
.admin-delete-teammate-modal .admin-enquiry-delete-modal-dialog {
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.admin-delete-teammate-modal:not(.admin-delete-teammate-modal-open) .admin-enquiry-delete-modal-dialog {
  opacity: 0;
  transform: scale(0.96);
}
.admin-delete-teammate-modal.admin-delete-teammate-modal-open .admin-enquiry-delete-modal-dialog {
  opacity: 1;
  transform: scale(1);
}

.admin-delete-enquiry-dialog-redesign {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.admin-delete-enquiry-header .admin-enquiry-edit-modal-header-inner {
  align-items: center;
}
.admin-delete-enquiry-accent {
  background: linear-gradient(to bottom, #dc2626, #b91c1c) !important;
}
.admin-delete-enquiry-ref-chip {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  font-size: 0.8125rem;
  font-weight: 600;
}
.admin-delete-enquiry-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.admin-delete-enquiry-body .admin-enquiry-delete-modal-message {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--gray-600);
  line-height: 1.5;
}
.admin-delete-enquiry-actions {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
  justify-content: space-between;
  gap: 0.75rem;
}
.admin-delete-enquiry-sure-btn {
  background: linear-gradient(to right, #dc2626, #b91c1c);
  color: #fff;
  border: none;
}
.admin-delete-enquiry-sure-btn:hover {
  opacity: 0.95;
}

/* Book Appointment modal */
.admin-book-appointment-dialog {
  max-width: 28rem;
}
.admin-book-appointment-event,
.admin-book-appointment-roles {
  margin-bottom: 1rem;
}
.admin-book-appointment-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  margin: 0 0 0.35rem 0;
}
.admin-book-appointment-datetime {
  font-size: 0.9375rem;
  color: var(--gray-800);
  margin: 0;
}
.admin-book-appointment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.admin-book-appointment-chip {
  display: inline-block;
  font-size: 0.8125rem;
  padding: 0.35rem 0.65rem;
  background: var(--gray-100);
  color: var(--gray-800);
  border-radius: 0.375rem;
  border: 1px solid var(--gray-200);
}

/* Book Appointment modal – open/close animation */
.admin-book-appointment-modal:not([hidden]) {
  display: flex;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}
.admin-book-appointment-modal:not([hidden]):not(.admin-book-appointment-modal-open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.admin-book-appointment-modal:not([hidden]).admin-book-appointment-modal-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.admin-book-appointment-modal .admin-enquiry-delete-modal-backdrop {
  transition: opacity 0.25s ease-out;
}
.admin-book-appointment-modal:not(.admin-book-appointment-modal-open) .admin-enquiry-delete-modal-backdrop {
  opacity: 0;
}
.admin-book-appointment-modal.admin-book-appointment-modal-open .admin-enquiry-delete-modal-backdrop {
  opacity: 1;
}
.admin-book-appointment-modal .admin-book-appointment-dialog {
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.admin-book-appointment-modal:not(.admin-book-appointment-modal-open) .admin-book-appointment-dialog {
  opacity: 0;
  transform: scale(0.96);
}
.admin-book-appointment-modal.admin-book-appointment-modal-open .admin-book-appointment-dialog {
  opacity: 1;
  transform: scale(1);
}

/* Book Appointment modal – redesign (like Edit Enquiry) */
.admin-book-appointment-dialog-redesign {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.admin-book-appointment-header .admin-enquiry-edit-modal-header-inner {
  align-items: center;
}
.admin-book-appointment-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.admin-book-appointment-confirm-block {
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 0.75rem;
  text-align: center;
}
.admin-book-appointment-confirm-text {
  font-size: 1rem;
  color: var(--gray-700);
  margin: 0 0 0.75rem 0;
  font-weight: 500;
}
.admin-book-appointment-confirm-id {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1d4ed8;
  letter-spacing: 0.02em;
  padding: 0.5rem 1rem;
  background: #fff;
  border-radius: 0.5rem;
  border: 2px solid #3b82f6;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
  margin-bottom: 0.75rem;
}
.admin-book-appointment-confirm-question {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--gray-600);
  font-weight: 600;
}
.admin-book-appointment-body .admin-enquiry-delete-modal-message {
  margin: 0 0 1rem 0;
}
.admin-book-appointment-body .admin-book-appointment-event,
.admin-book-appointment-body .admin-book-appointment-roles {
  margin-bottom: 1rem;
}
.admin-book-appointment-body .admin-book-appointment-roles:last-child {
  margin-bottom: 0;
}
.admin-book-appointment-actions {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* Change Status modal – redesign (like Edit Enquiry) */
.admin-change-status-modal .admin-change-status-dialog {
  max-width: 27rem;
}
/* Change Status modal – open/close animation */
.admin-change-status-modal:not([hidden]) {
  display: flex;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}
.admin-change-status-modal:not([hidden]):not(.admin-change-status-modal-open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.admin-change-status-modal:not([hidden]).admin-change-status-modal-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.admin-change-status-modal .admin-enquiry-delete-modal-backdrop {
  transition: opacity 0.25s ease-out;
}
.admin-change-status-modal:not(.admin-change-status-modal-open) .admin-enquiry-delete-modal-backdrop {
  opacity: 0;
}
.admin-change-status-modal.admin-change-status-modal-open .admin-enquiry-delete-modal-backdrop {
  opacity: 1;
}
.admin-change-status-modal .admin-change-status-dialog {
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.admin-change-status-modal:not(.admin-change-status-modal-open) .admin-change-status-dialog {
  opacity: 0;
  transform: scale(0.96);
}
.admin-change-status-modal.admin-change-status-modal-open .admin-change-status-dialog {
  opacity: 1;
  transform: scale(1);
}
.admin-change-status-dialog-redesign {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
/* Change Status header: grid so title/ref and subtitle/current align by row */
.admin-change-status-header .admin-enquiry-edit-modal-header-inner.admin-change-status-header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  row-gap: 0.25rem;
  align-items: baseline;
}
.admin-change-status-header .admin-enquiry-edit-modal-header-accent {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
}
.admin-change-status-header .admin-enquiry-edit-modal-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
.admin-change-status-header-grid .admin-change-status-ref-chip {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
.admin-change-status-header .admin-change-status-subtitle {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}
.admin-change-status-header .admin-change-status-current {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--gray-600);
}
.admin-change-status-ref-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  font-size: 0.8125rem;
  font-weight: 600;
}
.admin-change-status-current span {
  font-weight: 600;
  color: var(--gray-800);
}
.admin-change-status-option[hidden] {
  display: none !important;
}
.admin-change-status-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.admin-change-status-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin-change-status-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  text-align: left;
  border: 1px solid var(--gray-300);
  border-radius: 0.5rem;
  background: #fff;
  cursor: pointer;
  color: var(--gray-800);
  transition: background 0.15s, border-color 0.15s;
}
.admin-change-status-option:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}
.admin-change-status-option.admin-change-status-option-selected,
.admin-change-status-option[aria-pressed="true"] {
  border-color: var(--primary, #2563eb);
  background: var(--primary-light, rgba(37, 99, 235, 0.08));
  color: var(--primary, #2563eb);
  font-weight: 600;
}
.admin-change-status-actions {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
  justify-content: flex-end;
}

/* Confirm Change Status modal – redesign */
.admin-confirm-change-status-dialog-redesign {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.admin-confirm-change-status-header .admin-enquiry-edit-modal-header-inner {
  align-items: center;
}
.admin-confirm-change-status-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.admin-confirm-change-status-body .admin-enquiry-delete-modal-message {
  margin: 0;
}
.admin-confirm-change-status-actions {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* Event Payment modal */
.admin-event-payment-ref {
  font-size: 0.9375rem;
  color: var(--gray-600);
  margin: 0 0 1rem 0;
}

/* Event Payment modal – open/close animation */
.admin-event-payment-modal:not([hidden]) {
  display: flex;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}
.admin-event-payment-modal:not([hidden]):not(.admin-event-payment-modal-open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.admin-event-payment-modal:not([hidden]).admin-event-payment-modal-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.admin-event-payment-modal .admin-enquiry-delete-modal-backdrop {
  transition: opacity 0.25s ease-out;
}
.admin-event-payment-modal:not(.admin-event-payment-modal-open) .admin-enquiry-delete-modal-backdrop {
  opacity: 0;
}
.admin-event-payment-modal.admin-event-payment-modal-open .admin-enquiry-delete-modal-backdrop {
  opacity: 1;
}
.admin-event-payment-modal .admin-enquiry-delete-modal-dialog {
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.admin-event-payment-modal:not(.admin-event-payment-modal-open) .admin-enquiry-delete-modal-dialog {
  opacity: 0;
  transform: scale(0.96);
}
.admin-event-payment-modal.admin-event-payment-modal-open .admin-enquiry-delete-modal-dialog {
  opacity: 1;
  transform: scale(1);
}

/* Event Payment modal – redesign (like Change Status) */
.admin-event-payment-dialog-redesign {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.admin-event-payment-header .admin-enquiry-edit-modal-header-inner {
  align-items: center;
}
.admin-event-payment-ref-chip {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  font-size: 0.8125rem;
  font-weight: 600;
}
.admin-event-payment-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.admin-event-payment-body .admin-event-payment-field {
  margin-bottom: 0;
}
.admin-event-payment-actions {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 0.75rem;
}

.admin-event-payment-field {
  margin-bottom: 1.25rem;
}
.admin-event-payment-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 0.375rem;
}
.admin-event-payment-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  box-sizing: border-box;
}
.admin-event-payment-input:focus {
  outline: none;
  border-color: var(--purple-500, #7c3aed);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}
.admin-event-payment-modal .admin-enquiry-delete-modal-actions {
  justify-content: flex-end;
}

/* Add Payments modal */
.admin-add-payment-ref {
  font-size: 0.9375rem;
  color: var(--gray-600);
  margin: 0 0 1rem 0;
}
/* Add Payment modal – open/close animation */
.admin-add-payment-modal:not([hidden]) {
  display: flex;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}
.admin-add-payment-modal:not([hidden]):not(.admin-add-payment-modal-open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.admin-add-payment-modal:not([hidden]).admin-add-payment-modal-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.admin-add-payment-modal .admin-enquiry-delete-modal-backdrop,
.admin-add-payment-modal .admin-enquiry-edit-modal-backdrop {
  transition: opacity 0.25s ease-out;
}
.admin-add-payment-modal:not(.admin-add-payment-modal-open) .admin-enquiry-delete-modal-backdrop,
.admin-add-payment-modal:not(.admin-add-payment-modal-open) .admin-enquiry-edit-modal-backdrop {
  opacity: 0;
}
.admin-add-payment-modal.admin-add-payment-modal-open .admin-enquiry-delete-modal-backdrop,
.admin-add-payment-modal.admin-add-payment-modal-open .admin-enquiry-edit-modal-backdrop {
  opacity: 1;
}
.admin-add-payment-modal .admin-enquiry-delete-modal-dialog,
.admin-add-payment-modal .admin-enquiry-edit-modal-dialog {
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.admin-add-payment-modal:not(.admin-add-payment-modal-open) .admin-enquiry-delete-modal-dialog,
.admin-add-payment-modal:not(.admin-add-payment-modal-open) .admin-enquiry-edit-modal-dialog {
  opacity: 0;
  transform: scale(0.96);
}
.admin-add-payment-modal.admin-add-payment-modal-open .admin-enquiry-delete-modal-dialog,
.admin-add-payment-modal.admin-add-payment-modal-open .admin-enquiry-edit-modal-dialog {
  opacity: 1;
  transform: scale(1);
}
.admin-add-payment-field {
  margin-bottom: 1rem;
}
.admin-add-payment-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 0.375rem;
}
.admin-add-payment-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  box-sizing: border-box;
}
.admin-add-payment-input-disabled {
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-600);
  cursor: not-allowed;
}
.admin-add-payment-input:focus {
  outline: none;
  border-color: var(--purple-500, #7c3aed);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}
.admin-add-payment-file {
  width: 100%;
  font-size: 0.875rem;
  padding: 0.375rem 0;
}
.admin-add-payment-list {
  max-height: 12rem;
  overflow-y: auto;
  padding: 0.5rem 0;
  font-size: 0.875rem;
}
.admin-add-payment-list-empty {
  margin: 0;
  color: var(--gray-500);
  font-style: italic;
}
.admin-add-payment-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
  background: var(--gray-50, #f9fafb);
  border-radius: 0.375rem;
  border: 1px solid var(--gray-200, #e5e7eb);
}
.admin-add-payment-list-item:last-child {
  margin-bottom: 0;
}
.admin-add-payment-list-item-left {
  flex: 1;
  min-width: 0;
}
.admin-add-payment-list-date {
  color: var(--gray-600);
}
.admin-add-payment-list-amount {
  font-weight: 600;
  color: var(--gray-800);
}
.admin-add-payment-list-delete {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--gray-500);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.admin-add-payment-list-delete:hover {
  background: var(--gray-200, #e5e7eb);
  color: var(--red-600, #dc2626);
}
.admin-add-payment-screenshot-link {
  color: var(--purple-600, #7c3aed);
  text-decoration: none;
}
.admin-add-payment-screenshot-link:hover {
  text-decoration: underline;
}
.admin-add-payment-modal .admin-enquiry-delete-modal-actions,
.admin-add-payment-modal .admin-enquiry-edit-modal-footer {
  justify-content: flex-end;
}

/* Edit enquiry modal – redesigned */
.admin-enquiry-edit-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.admin-enquiry-edit-modal[hidden] {
  display: none;
}
/* Edit Enquiry modal – open/close animation */
.admin-enquiry-edit-modal:not([hidden]) {
  display: flex;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}
.admin-enquiry-edit-modal:not([hidden]):not(.admin-enquiry-edit-modal-open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.admin-enquiry-edit-modal:not([hidden]).admin-enquiry-edit-modal-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.admin-enquiry-edit-modal .admin-enquiry-edit-modal-backdrop {
  transition: opacity 0.25s ease-out;
}
.admin-enquiry-edit-modal:not(.admin-enquiry-edit-modal-open) .admin-enquiry-edit-modal-backdrop {
  opacity: 0;
}
.admin-enquiry-edit-modal.admin-enquiry-edit-modal-open .admin-enquiry-edit-modal-backdrop {
  opacity: 1;
}
.admin-enquiry-edit-modal .admin-enquiry-edit-modal-dialog {
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.admin-enquiry-edit-modal:not(.admin-enquiry-edit-modal-open) .admin-enquiry-edit-modal-dialog {
  opacity: 0;
  transform: scale(0.96);
}
.admin-enquiry-edit-modal.admin-enquiry-edit-modal-open .admin-enquiry-edit-modal-dialog {
  opacity: 1;
  transform: scale(1);
}
.admin-enquiry-edit-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
}
.admin-enquiry-edit-modal-dialog {
  position: relative;
  background: #fff;
  border-radius: 0.75rem;
  max-width: 32rem;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.admin-enquiry-edit-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.admin-enquiry-edit-modal-header-redesign {
  background: #f4f5f7;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
}
.admin-enquiry-edit-modal-header-redesign .admin-enquiry-edit-modal-header-inner {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
}
.admin-enquiry-edit-modal-header-redesign .admin-enquiry-edit-modal-header-text {
  flex: 1;
  min-width: 0;
}
.admin-enquiry-edit-modal-header-redesign.admin-enquiry-edit-modal-header-edit .admin-enquiry-edit-modal-header-inner {
  align-items: center;
}
.admin-enquiry-edit-modal-header-redesign.admin-enquiry-edit-modal-header-edit .admin-enquiry-edit-id-badge {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 9999px;
  letter-spacing: 0.02em;
}
.admin-enquiry-edit-modal-header-redesign .admin-modal-close {
  position: static;
  flex-shrink: 0;
  margin-left: 0.5rem;
}
.admin-enquiry-edit-modal-header-redesign .admin-enquiry-edit-modal-header-accent {
  width: 4px;
  min-height: 2.5rem;
  border-radius: 2px;
  background: linear-gradient(to bottom, #4285f4, #1a73e8);
  flex-shrink: 0;
  align-self: stretch;
}
.admin-enquiry-edit-modal-header-redesign .admin-enquiry-edit-modal-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.admin-enquiry-edit-modal-subtitle {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin: 0;
  font-weight: 500;
}
.admin-enquiry-edit-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: var(--gray-900);
  letter-spacing: -0.01em;
}
.admin-enquiry-edit-id-badge {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--gray-100);
  padding: 0.35rem 0.65rem;
  border-radius: 0.375rem;
  letter-spacing: 0.02em;
}
.admin-enquiry-edit-modal-header-redesign .admin-enquiry-edit-id-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
}
.admin-enquiry-edit-modal-header-redesign .admin-enquiry-edit-id-badge:empty {
  display: none;
}
.admin-enquiry-edit-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.admin-enquiry-edit-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}
.admin-enquiry-edit-section {
  margin-bottom: 1.5rem;
}
.admin-enquiry-edit-section:last-child {
  margin-bottom: 0;
}
.admin-enquiry-edit-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.35rem;
}
.admin-enquiry-edit-grid {
  display: grid;
  gap: 0.875rem;
}
.admin-enquiry-edit-grid-2 {
  grid-template-columns: 1fr 1fr;
}
.admin-enquiry-edit-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.admin-enquiry-edit-section .admin-enquiry-edit-field {
  margin-bottom: 0.875rem;
}
.admin-enquiry-edit-section .admin-enquiry-edit-field:last-child,
.admin-enquiry-edit-section .admin-enquiry-edit-grid + .admin-enquiry-edit-field {
  margin-bottom: 0;
}
.admin-enquiry-edit-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-700);
}
.admin-enquiry-edit-input {
  font-size: 0.9375rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.5rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-enquiry-edit-input:hover {
  border-color: var(--gray-400);
}
.admin-enquiry-edit-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.admin-enquiry-edit-input::placeholder {
  color: var(--gray-400);
}
.admin-enquiry-edit-textarea {
  resize: vertical;
  min-height: 4.5rem;
}
.admin-enquiry-edit-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
}
.admin-enquiry-edit-save-btn {
  min-width: 7rem;
}
.admin-enquiry-add-btn {
  background: linear-gradient(to right, #4285f4, #1a73e8);
  color: var(--white);
}
.admin-enquiry-add-btn:hover { opacity: 0.95; }
.admin-enquiry-save-changes-btn {
  background: linear-gradient(to right, #4285f4, #1a73e8);
  color: var(--white);
}
.admin-enquiry-save-changes-btn:hover { opacity: 0.95; }
/* Edit Enquiry: Additional Details uses same design as Teammate Notes (admin-form-notes-section) */
.admin-enquiry-edit-body .admin-form-notes-section {
  margin-bottom: 0;
}

/* Enquiry card: Additional Details as readonly notes (same design as Edit popup, no edit/delete) */
.admin-enquiry-card-notes.admin-form-notes-section {
  margin-top: 0.75rem;
}
.admin-note-row-readonly .admin-note-saved-view {
  display: block;
}

/* Album/Storage folder card: Additional Details section and note rows take full width */
.admin-album-folder-card .admin-form-notes-section,
.admin-album-folder-card .admin-enquiry-card-notes {
  width: 100%;
  box-sizing: border-box;
}
.admin-album-folder-card .admin-notes-list {
  width: 100%;
}
.admin-album-folder-card .admin-note-row,
.admin-album-folder-card .admin-note-row-readonly {
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 420px) {
  .admin-enquiry-edit-grid-2 {
    grid-template-columns: 1fr;
  }
  .admin-enquiry-edit-modal-header {
    flex-wrap: wrap;
  }
}

.admin-enquiry-block {
  margin-bottom: 0.75rem;
}

/* Data Management page */
.admin-dm-tabs {
  margin-bottom: 1rem;
}
.admin-dm-panel.admin-dm-card {
  margin-top: 0;
}
.admin-dm-section {
  margin-bottom: 2rem;
}
.admin-dm-card {
  background: #fff;
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.admin-dm-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: var(--gray-900);
}

/* Admin Settings page */
.admin-settings-page .admin-settings-card {
  max-width: 42rem;
}
.admin-settings-section {
  margin-bottom: 2rem;
}
.admin-settings-section:last-of-type {
  margin-bottom: 0;
}
.admin-settings-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.admin-settings-field-full {
  width: 100%;
}
.admin-settings-fields .admin-enquiry-edit-field {
  flex: 1 1 16rem;
  min-width: 0;
}
.admin-settings-fields .admin-settings-field-full {
  flex: 1 1 100%;
}
.admin-settings-hint {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin: -0.5rem 0 0.75rem 0;
}
.admin-settings-social-grid .admin-enquiry-edit-field {
  flex: 1 1 18rem;
}
.admin-settings-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
}
.admin-settings-message {
  font-size: 0.875rem;
}
.admin-dm-add-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  align-items: flex-start;
}
.admin-dm-add-input-wrap {
  flex: 1;
  max-width: 20rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.admin-dm-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  box-sizing: border-box;
}
.admin-dm-input.admin-dm-input-error {
  border-color: #dc2626;
}
.admin-dm-add-error {
  font-size: 0.8125rem;
  color: #dc2626;
  display: none;
}
.admin-dm-add-error:not(:empty) {
  display: block;
}
.admin-dm-edit-input {
  width: 100%;
  max-width: 16rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.9375rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.25rem;
}
.admin-dm-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.admin-dm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  margin-bottom: 0.25rem;
  background: var(--gray-50);
}
.admin-dm-item-name {
  font-size: 0.9375rem;
  color: var(--gray-800);
}
.admin-dm-item-actions {
  display: flex;
  gap: 0.5rem;
}
.admin-dm-item-actions button {
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--gray-600);
  cursor: pointer;
  border-radius: 0.25rem;
}
.admin-dm-edit-btn:hover {
  color: var(--purple-600, #7c3aed);
  background: rgba(124, 58, 237, 0.08);
}
.admin-dm-delete-btn:hover {
  color: #dc2626;
  background: #fef2f2;
}
.admin-dm-empty {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin: 0.5rem 0 0 0;
}

/* Appointment Management card view */
.admin-appointment-card .admin-team-name { margin-bottom: 0.125rem; }
.admin-appointment-type {
  font-size: 0.8125rem;
  color: var(--gray-600);
}
.admin-appointment-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.admin-payment-card .admin-team-name { margin-bottom: 0.125rem; }

.admin-equipment-card .admin-team-name { margin-bottom: 0.125rem; }

/* Equipment card: key details block (ID, Condition, Added) above Additional Details */
.admin-equipment-card-details {
  margin: 0.75rem 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-md, 0.375rem);
}
.admin-equipment-detail-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.admin-equipment-detail-row + .admin-equipment-detail-row { margin-top: 0.375rem; }
.admin-equipment-detail-label {
  font-weight: 600;
  color: var(--gray-700, #374151);
  min-width: 5rem;
}
.admin-equipment-detail-value {
  color: var(--gray-800, #1f2937);
}

/* Equipment page: date filter (before Add Equipment button) */
.admin-equipment-date-filter-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1rem;
}
.admin-equipment-date-filter-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700, #374151);
  margin: 0;
}
.admin-equipment-date-input {
  width: auto;
  min-width: 10rem;
}
.admin-equipment-date-clear {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

/* Searchable combobox (Choose Event in Assign Equipment) */
.admin-combobox-wrap {
  position: relative;
  width: 100%;
}
.admin-combobox-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  max-height: 12rem;
  overflow-y: auto;
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-md, 0.375rem);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1));
  z-index: 50;
}
.admin-combobox-option {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--gray-800, #1f2937);
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
}
.admin-combobox-option:last-child { border-bottom: none; }
.admin-combobox-option:hover,
.admin-combobox-option-active {
  background: var(--gray-100, #f3f4f6);
}

.admin-enquiry-card .admin-team-name { margin-bottom: 0.125rem; }

/* Enquiry lazy load: hide cards not yet revealed */
.admin-enquiry-card.admin-enquiry-card-lazy-pending {
  display: none !important;
}
.admin-assign-btn-inline { font-size: inherit; padding: 0 0.25rem; vertical-align: baseline; }

/* Admin Bookings page (Figma-style) */
.admin-stat-value-accent { color: #b45309; }
.admin-stat-value-green { color: #059669; }
.admin-stat-value-purple { color: var(--purple-600); }

.admin-table-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.admin-table-title {
  font-size: 1.125rem;
  font-weight: 600;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f3f4f6;
  margin: 0;
  color: var(--gray-900);
}

.admin-table-scroll {
  overflow-x: auto;
  max-height: 36rem;
  overflow-y: auto;
}

/* Analytics: sections and error summary grid */
.admin-analytics-section {
  margin-bottom: 2rem;
}
.admin-analytics-section .admin-teams-header { margin-bottom: 1rem; }
.admin-analytics-errors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .admin-analytics-errors-grid { grid-template-columns: 1fr 1fr; }
}
.admin-analytics-error-block .admin-table-title {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f3f4f6;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
}
.admin-analytics-error-block .admin-table-scroll {
  max-height: 16rem;
}

/* Storage: client folder grid (B2 warm / Glacier cold) */
.admin-storage-section { margin-bottom: 2rem; }
.admin-storage-section .admin-teams-header { margin-bottom: 1.25rem; }
.admin-storage-folder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .admin-storage-folder-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .admin-storage-folder-grid { grid-template-columns: repeat(3, 1fr); }
}
.admin-storage-folder-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-storage-folder-card:hover {
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.admin-storage-folder-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.admin-storage-folder-icon-cold {
  background: rgba(124, 58, 237, 0.1);
  color: var(--purple-600, #7c3aed);
}
.admin-storage-folder-name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 0.75rem 0;
  line-height: 1.3;
  padding-right: 2rem;
}
.admin-storage-folder-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--gray-600);
  flex: 1;
}
.admin-storage-folder-date {
  display: block;
}
.admin-storage-folder-date strong {
  color: var(--gray-700);
  font-weight: 500;
  margin-right: 0.25rem;
}
.admin-storage-folder-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  margin-bottom: 0.25rem;
  width: fit-content;
}
.admin-storage-badge-warm {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}
.admin-storage-badge-cold {
  background: rgba(124, 58, 237, 0.12);
  color: var(--purple-600, #7c3aed);
}
.admin-storage-folder-actions {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}
.admin-storage-folder-actions .admin-card-menu {
  background: transparent;
  border: none;
}
.admin-storage-folder-actions .admin-dropdown-menu {
  right: 0;
  left: auto;
  min-width: 8rem;
}
.admin-storage-folder-open-link {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--purple-600, #7c3aed);
  text-decoration: none;
  border-radius: var(--radius-md);
  background: rgba(124, 58, 237, 0.08);
  transition: background 0.2s, color 0.2s;
}
.admin-storage-folder-open-link:hover {
  background: rgba(124, 58, 237, 0.15);
  color: var(--purple-700, #6d28d9);
}
.admin-storage-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--gray-600);
}

/* Album Status: client folders with expand → Raw / Selected Photos (card width matches payment-management) */
.admin-album-section { margin-bottom: 2rem; }
.admin-album-section .admin-teams-header { margin-bottom: 1.25rem; }
.admin-album-folder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
@media (min-width: 640px) {
  .admin-album-folder-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .admin-album-folder-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Album Status page: card max-width 450px, 2 columns from 768px, gap 2rem */
.admin-album-status-page .admin-album-folder-grid {
  gap: 2rem;
}
.admin-album-status-page .admin-album-folder-card {
  max-width: 450px;
}
/* Album Status card: balanced padding */
.admin-album-status-page .admin-team-card.admin-album-folder-card {
  padding: 1.25rem;
}
.admin-album-status-page .admin-album-folder-card .admin-team-card-header {
  margin-bottom: 0.75rem;
}
.admin-album-status-page .admin-album-folder-card .admin-enquiry-card-body {
  margin-top: 0.75rem;
  padding: 0.875rem 1rem;
}
.admin-album-status-page .admin-album-folder-card .admin-enquiry-meta {
  margin-bottom: 0.625rem;
}
.admin-album-status-page .admin-album-folder-card .admin-enquiry-date-row {
  margin-bottom: 0.75rem;
}
.admin-album-status-page .admin-album-folder-card .admin-enquiry-block {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.625rem;
}
.admin-album-status-page .admin-album-folder-card .admin-enquiry-block:last-of-type {
  margin-bottom: 0;
}
@media (min-width: 640px) {
  .admin-album-status-page .admin-album-folder-grid { grid-template-columns: 1fr; }
}
@media (min-width: 768px) {
  .admin-album-status-page .admin-album-folder-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .admin-album-status-page .admin-album-folder-grid { grid-template-columns: repeat(2, 1fr); }
}
.admin-album-folder-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-xl);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  overflow: hidden;
}
.admin-album-folder-card:hover {
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 8px 28px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  transform: translateY(-2px);
}

/* V2 card accent strip */
.album-card-v2-accent {
  height: 4px;
  background: linear-gradient(90deg, #7c3aed 0%, #2563eb 50%, #06b6d4 100%);
  flex-shrink: 0;
}
.album-card-v2-body {
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Top row: icon + name + days badge */
.album-card-v2-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.album-card-v2-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(37, 99, 235, 0.10) 100%);
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.album-card-v2-title-wrap {
  flex: 1;
  min-width: 0;
}
.album-card-v2-name {
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--gray-900);
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-card-v2-days-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  line-height: 1;
}

/* Booking ID, Phone, Email row (same as payment-management) */
.album-card-v2-meta {
  margin-top: 0;
  margin-bottom: 0.75rem;
}
.album-card-v2-meta span {
  font-size: 0.8125rem;
  color: var(--gray-600);
}
/* Event Date & Time, Days Left two-column row */
.album-card-v2-date-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 1rem;
}
.album-card-v2-date-block {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 0.375rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.album-card-v2-date-block .admin-enquiry-label {
  margin-bottom: 0.25rem;
}
.album-card-v2-date-block .admin-enquiry-value {
  margin: 0;
  font-size: 0.875rem;
  color: var(--gray-800);
}
.album-card-v2-date-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-500);
}
.album-card-v2-date-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-800);
}

/* Folders section */
.album-card-v2-folders {
  margin-bottom: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.album-card-v2-folders-title {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-400);
  margin-bottom: 0.5rem;
}
.album-card-v2-folders-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.album-card-v2-folder-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem;
  border-radius: 0.375rem;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.album-card-v2-folder-row .admin-album-subfolder-label {
  flex: 1;
  font-size: inherit;
  font-weight: inherit;
}
.album-card-v2-folder-row .admin-album-subfolder-count {
  opacity: 0.7;
  font-weight: 400;
}
.album-card-v2-folder-arrow {
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}
.album-card-v2-folder-row:hover .album-card-v2-folder-arrow {
  opacity: 0.6;
  transform: translateX(2px);
}
.album-card-v2-folder-row.album-card-v2-photo-raw {
  color: #2563eb;
}
.album-card-v2-folder-row.album-card-v2-photo-raw:hover {
  background: rgba(37, 99, 235, 0.06);
}
.album-card-v2-folder-row.album-card-v2-photo-raw svg:first-child {
  color: rgba(37, 99, 235, 0.6);
}
.album-card-v2-folder-row.album-card-v2-photo-selected {
  color: #059669;
}
.album-card-v2-folder-row.album-card-v2-photo-selected:hover {
  background: rgba(16, 185, 129, 0.06);
}
.album-card-v2-folder-row.album-card-v2-photo-selected svg:first-child {
  color: rgba(16, 185, 129, 0.6);
}

/* Selection Requirement section */
.album-card-v2-selection {
  margin-bottom: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.album-card-v2-selection-needed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.album-card-v2-selection-needed-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-500);
}
.album-card-v2-selection-needed-count {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0284c7;
}
.album-card-v2-selection-tag-row {
  margin-bottom: 0.5rem;
  min-height: 1.5rem;
}
.album-card-v2-selection-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  white-space: nowrap;
  line-height: 1.5;
}
.album-card-v2-selection-tag[data-status="no-raw"] {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
.album-card-v2-selection-tag[data-status="no-selected"] {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}
.album-card-v2-selection-tag[data-status="meet"] {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.album-card-v2-selection-tag:empty {
  display: none;
}
.album-card-v2-setcount-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.album-card-v2-setcount-btn:hover {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.28);
}

/* Set Selected Photos Count modal */
.album-set-count-modal-dialog {
  max-width: 400px;
}
.album-set-count-client-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-500);
  margin: -0.25rem 0 1rem 0;
}
.album-set-count-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
.album-set-count-info-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #0369a1;
}
.album-set-count-info-value {
  font-size: 1rem;
  font-weight: 700;
  color: #0284c7;
}
.album-set-count-field {
  margin-bottom: 1.25rem;
}
.album-set-count-field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 0.375rem;
}
.album-set-count-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: var(--white);
  color: var(--gray-900);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.album-set-count-input:focus {
  outline: none;
  border-color: var(--purple-500);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

/* Card options (3-dot menu) */
.album-card-v2-options {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}
.album-card-v2-options-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gray-500);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.album-card-v2-options-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--gray-700);
}
.album-card-v2-options-btn[aria-expanded="true"] {
  background: rgba(0, 0, 0, 0.08);
  color: var(--gray-800);
}
.album-card-v2-options-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.25rem;
  min-width: 10rem;
  padding: 0.25rem 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 50;
}
.album-card-v2-options-menu[hidden] {
  display: none !important;
}
.album-card-v2-option-item {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  color: var(--gray-700);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.album-card-v2-option-item:hover {
  background: #f3f4f6;
}

.album-additional-details-content {
  font-size: 0.9375rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Payments section (album-status card, same as payment-management) */
.album-card-v2-payments {
  margin-bottom: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.album-card-v2-payments .admin-enquiry-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 0.5rem;
}
.album-card-v2-payments-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.album-card-v2-payments .admin-payments-col {
  flex: 1;
  min-width: 0;
}
.album-card-v2-payments .admin-payments-col-label {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-bottom: 0.25rem;
}
.album-card-v2-payments .admin-enquiry-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-900);
}

/* Access section */
.album-card-v2-access {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.album-card-v2-access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.album-card-v2-access-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-500);
}
.album-card-v2-access-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.175rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
}
.album-card-v2-access-count {
  font-weight: 700;
}
.album-card-v2-manage-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.album-card-v2-manage-btn:hover {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.28);
}

/* Legacy compat */
.admin-album-folder-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.admin-album-folder-name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}
.admin-album-folder-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--gray-600);
}
.admin-album-folder-date { display: block; }
.admin-album-folder-date strong { color: var(--gray-700); font-weight: 500; margin-right: 0.25rem; }
.admin-album-folder-days { margin-top: 0.25rem; }
.admin-album-folder-days .admin-album-days-count { color: var(--gray-900); }
.admin-album-folder-expand {
  width: 100%;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,.06);
}
.admin-album-subfolders {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin-album-subfolder {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--gray-50);
  color: var(--gray-800);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
.admin-album-subfolder:hover {
  background: rgba(124, 58, 237, 0.08);
  color: var(--purple-700, #6d28d9);
}
.admin-album-subfolder-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
}
.admin-album-subfolder:hover .admin-album-subfolder-icon { color: inherit; }
.admin-album-subfolder-label { flex: 1; }
.admin-album-subfolder-count { color: #666666; }

/* ========== Album Access Modal ========== */
.album-access-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.album-access-modal[hidden] { display: none; }
.album-access-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.album-access-modal-dialog {
  position: relative;
  background: #fff;
  border-radius: 1rem;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  animation: albumAccessModalIn 0.25s ease-out;
}
@keyframes albumAccessModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.album-access-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.album-access-modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}
.album-access-modal-subtitle {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin: 0.15rem 0 0;
}
.album-access-modal-close {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--gray-400);
  background: none;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.album-access-modal-close:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}
.album-access-modal-body {
  padding: 1.25rem 1.5rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}

/* Search section */
.album-access-search-section {
  margin-bottom: 1.25rem;
}
.album-access-search-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 0.5rem;
}
.album-access-search-wrap {
  position: relative;
}
.album-access-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
}
.album-access-search-input {
  width: 100%;
  padding: 0.625rem 0.75rem 0.625rem 2.25rem;
  font-size: 0.875rem;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 0.5rem;
  background: var(--white);
  color: var(--gray-900);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.album-access-search-input:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.album-access-search-results {
  margin-top: 0.5rem;
  background: var(--white);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.album-access-search-results[hidden] { display: none; }
.album-access-search-empty {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: var(--gray-500);
  text-align: center;
}
.album-access-search-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  transition: background 0.15s;
}
.album-access-search-row:hover {
  background: var(--gray-50);
}
.album-access-search-row + .album-access-search-row {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

/* User avatars */
.album-access-user-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.album-access-user-avatar-sm {
  width: 1.75rem;
  height: 1.75rem;
}

/* User info */
.album-access-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.album-access-user-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-access-user-detail {
  font-size: 0.75rem;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Add button */
.album-access-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 0.375rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.album-access-add-btn:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.35);
}
.album-access-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Access list section */
.album-access-list-section {
  margin-top: 0;
}
.album-access-list-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.album-access-list-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
}
.album-access-list-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
  border-radius: 999px;
}
.album-access-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.album-access-user-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.5rem;
  border-radius: 0.5rem;
  transition: background 0.15s;
}
.album-access-user-row:hover {
  background: var(--gray-50);
}
.album-access-user-row + .album-access-user-row {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.album-access-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background: none;
  border: 1px solid transparent;
  color: var(--gray-400);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.album-access-remove-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: #dc2626;
}
.album-access-remove-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.album-access-list-empty {
  padding: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--gray-500);
}
.album-access-list-loading {
  padding: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* ========== Storage page: minimal card design ========== */
.admin-storage-page .admin-album-folder-grid {
  gap: 1.5rem;
}
.admin-storage-page .admin-album-folder-grid > * {
  min-width: 0;
}
.admin-storage-page .admin-album-folder-card.admin-storage-card {
  width: 100%;
  min-width: 0;
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.admin-storage-page .admin-album-folder-card.admin-storage-card:hover {
  border-color: #d1d5db;
  background: #fafafa;
}

/* Top row: badge + menu (inline with content) */
.admin-storage-page .admin-storage-card__top {
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0;
  background: transparent;
  border: none;
}
.admin-storage-page .admin-storage-card-actions {
  position: static;
}
.admin-storage-page .admin-storage-card-badge {
  position: static;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 4px;
}
.admin-storage-page .admin-storage-badge-no_file {
  background: #f3f4f6;
  color: #6b7280;
}
.admin-storage-page .admin-storage-badge-uploaded {
  background: #eff6ff;
  color: #2563eb;
}
.admin-storage-page .admin-storage-badge-requested_to_download {
  background: #fffbeb;
  color: #b45309;
}
.admin-storage-page .admin-storage-badge-ready_to_download {
  background: #ecfdf5;
  color: #059669;
}

/* Title row */
.admin-storage-page .admin-storage-card__head {
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
  margin-bottom: 0.75rem;
}
.admin-storage-page .admin-storage-card__head .admin-album-folder-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0;
  border-radius: 6px;
  background: #f3f4f6;
  color: #4b5563;
  flex-shrink: 0;
}
.admin-storage-page .admin-album-folder-name {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1.4;
}

/* Meta */
.admin-storage-page .admin-storage-card__meta {
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin-bottom: 1rem;
  gap: 0.15rem;
  font-size: 0.8rem;
  color: #6b7280;
}
.admin-storage-page .admin-storage-card__meta .admin-album-folder-date {
  display: block;
}
.admin-storage-page .admin-storage-card__meta .admin-album-folder-date strong {
  color: #374151;
  font-weight: 500;
}

/* Folders: simple list */
.admin-storage-page .admin-storage-card__folders {
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  margin-top: 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid #e5e7eb;
  background: transparent;
}
.admin-storage-page .admin-storage-card__folders .admin-album-subfolders {
  flex-direction: column;
  gap: 0.5rem;
}
.admin-storage-page .admin-storage-card__folders .admin-album-subfolder {
  padding: 0.4rem 0.65rem;
  border-radius: 4px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  font-size: 0.8rem;
  font-weight: 500;
  color: #374151;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin-storage-page .admin-storage-card__folders .admin-album-subfolder:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #111827;
}
.admin-storage-page .admin-storage-card__folders .admin-album-subfolder-icon {
  color: #9ca3af;
}
.admin-storage-page .admin-storage-card__folders .admin-album-subfolder:hover .admin-album-subfolder-icon {
  color: #6b7280;
}
.admin-storage-card-empty-detail { color: #9ca3af; margin: 0; font-size: 0.875rem; }
.admin-storage-page .admin-storage-card-empty-folder {
  color: #9ca3af;
  font-size: 0.8rem;
  display: block;
}

/* Additional details */
.admin-storage-page .admin-storage-card__details {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin-top: 0.75rem;
  padding: 0.75rem 0 0;
  border-top: 1px solid #e5e7eb;
  background: transparent;
}
.admin-storage-page .admin-storage-card__details .admin-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
.admin-storage-page .admin-storage-card__details .admin-note-saved-text {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.5;
}
.admin-storage-page .admin-storage-card__details .admin-note-saved-added,
.admin-storage-page .admin-storage-card__details .admin-note-saved-updated {
  font-size: 0.75rem;
  color: #9ca3af;
}
.admin-storage-page .admin-storage-card__details .admin-notes-list,
.admin-storage-page .admin-storage-card__details .admin-note-row,
.admin-storage-page .admin-storage-card__details .admin-note-row-readonly {
  min-width: 0;
}
.admin-storage-page .admin-storage-card__details .admin-note-saved-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.admin-storage-page .admin-storage-card__details.admin-notes-collapsed .admin-notes-list .admin-note-row:nth-child(n+2) {
  display: none;
}
.admin-storage-page .admin-storage-details-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.admin-storage-details-toggle {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--purple-600, #7c3aed);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.admin-storage-details-toggle:hover {
  text-decoration: underline;
}

.admin-album-subfolder-static {
  cursor: default;
  pointer-events: none;
}
.admin-album-subfolder-static .admin-album-subfolder-label { color: var(--gray-700); }

.admin-album-subfolder-folder-link {
  cursor: pointer;
  pointer-events: auto;
  width: auto;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
}
.admin-storage-page .admin-storage-card__folders .admin-album-subfolder-folder-link {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}
.admin-album-subfolder-folder-link:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #111827;
}

/* Folder popup modal (Upload, Download, Request to download) */
.admin-folder-actions { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 1.5rem; }
.admin-folder-action-row { display: flex; flex-direction: column; gap: 0.5rem; }
.admin-folder-action-label { font-weight: 600; color: var(--gray-800); font-size: 0.9375rem; }
.admin-folder-action-desc { font-size: 0.875rem; color: var(--gray-600); margin: 0; }
.admin-folder-upload-wrap { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.admin-folder-file-input { font-size: 0.875rem; max-width: 100%; }
.admin-folder-request-wrap { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.admin-folder-request-email { min-width: 200px; }
.admin-folder-status { font-size: 0.875rem; color: var(--gray-600); margin: 0; min-height: 1.25rem; }
.admin-folder-upload-progress-wrap { width: 100%; max-width: 320px; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.75rem; }
.admin-folder-upload-progress-wrap[hidden] { display: none !important; }
.admin-folder-upload-progress { flex: 1; height: 8px; border-radius: 4px; overflow: hidden; accent-color: var(--purple-600, #7c3aed); }
.admin-folder-upload-progress::-webkit-progress-bar { background: var(--gray-200); border-radius: 4px; }
.admin-folder-upload-progress::-webkit-progress-value { background: var(--purple-600, #7c3aed); border-radius: 4px; }
.admin-folder-upload-progress::-moz-progress-bar { background: var(--purple-600, #7c3aed); border-radius: 4px; }
.admin-folder-upload-progress-text { font-size: 0.875rem; font-weight: 600; color: var(--gray-700); min-width: 2.5rem; }
.admin-folder-files-section { border-top: 1px solid rgba(0,0,0,.08); padding-top: 1rem; }
.admin-folder-files-title { font-size: 1rem; font-weight: 600; color: var(--gray-800); margin: 0 0 0.5rem 0; }
.admin-folder-files-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.admin-folder-files-list li { margin: 0; }
.admin-folder-file-link { color: var(--purple-700, #6d28d9); text-decoration: none; font-size: 0.875rem; }
.admin-folder-file-link:hover { text-decoration: underline; }
.admin-folder-file-name { font-size: 0.875rem; color: var(--gray-700); }
.admin-folder-files-empty { font-size: 0.875rem; color: var(--gray-500); margin: 0; }

/* Folder popup: Logic 1 empty state (centered) */
.admin-folder-modal-body { min-height: 180px; }
.admin-folder-empty-state { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; text-align: center; }
.admin-folder-empty-text { font-size: 1rem; color: var(--gray-600); margin: 0; }
.admin-folder-file-input-hidden { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.admin-folder-empty-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.admin-folder-upload-center { margin-top: 0; }
.admin-folder-selected-row { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; width: 100%; max-width: 320px; }
.admin-folder-selected-name { font-size: 0.9375rem; color: var(--gray-800); font-weight: 500; word-break: break-all; }
.admin-folder-selected-size { font-size: 0.8125rem; color: var(--gray-500); margin-top: -0.25rem; }
.admin-folder-selected-size-error { font-size: 0.8125rem; color: #dc2626; margin: 0.25rem 0 0; }
.admin-folder-selected-buttons { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }

/* Folder popup: Logic 2 & 3 file cards */
.admin-folder-has-files-state { width: 100%; }
.admin-folder-file-cards { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.admin-folder-file-card { border: 1px solid rgba(0,0,0,.08); border-radius: 0.5rem; padding: 1rem; background: var(--gray-50); }
.admin-folder-file-card-name { font-weight: 600; color: var(--gray-900); margin-bottom: 0.25rem; }
.admin-folder-file-card-meta { font-size: 0.875rem; color: var(--gray-600); margin-bottom: 0.25rem; }
.admin-folder-file-card-time-left { font-size: 0.875rem; color: var(--purple-700, #6d28d9); font-weight: 500; margin-bottom: 0.75rem; }
.admin-folder-file-card-restoring { font-size: 0.875rem; color: var(--gray-600); margin-bottom: 0.5rem; line-height: 1.4; }
.admin-folder-request-hint { font-size: 0.875rem; color: var(--gray-600); margin: 0 0 0.75rem 0; line-height: 1.4; }
.admin-folder-card-btn { margin-right: 0.5rem; margin-bottom: 0.25rem; }
.admin-folder-card-delete { color: var(--red-600, #b91c1c); border-color: var(--red-300, #fca5a5); }
.admin-folder-card-delete:hover { background: rgba(185, 28, 28, 0.08); }

/* Delete confirmation */
.admin-modal-small .admin-modal-box { max-width: 420px; }
.admin-folder-delete-message { margin: 0; font-size: 0.9375rem; color: var(--gray-700); }
.admin-storage-delete-confirm-body { display: flex; flex-direction: column; gap: 1rem; }
.admin-storage-delete-confirm-intro { margin: 0; font-size: 0.9375rem; color: var(--gray-700); line-height: 1.5; }
.admin-storage-delete-confirm-card-preview {
  padding: 0.75rem 1rem;
  background: var(--gray-100, #f3f4f6);
  border-radius: 8px;
  border: 1px solid var(--gray-200, #e5e7eb);
}
.admin-storage-delete-confirm-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); margin-right: 0.5rem; }
.admin-storage-delete-confirm-name { font-size: 1rem; color: var(--gray-900); word-break: break-word; }
.admin-btn-danger { background: var(--red-600, #b91c1c); border-color: var(--red-600, #b91c1c); color: #fff; }
.admin-btn-danger:hover { background: var(--red-700, #991b1b); }

/* Album Status: Raw / Selected Photos view (same page) */
.admin-album-photo-view { margin-bottom: 2rem; }
.admin-album-photo-view-header { margin-bottom: 1.5rem; }
.admin-album-photo-view-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.admin-album-photo-view-header-text { min-width: 0; }
.admin-album-photo-view-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 0.25rem 0;
}
.admin-album-photo-view-subtitle {
  font-size: 0.9375rem;
  color: var(--gray-600);
  margin: 0;
}
.admin-album-upload-btn-header { flex-shrink: 0; }
.admin-album-photo-view-content { min-height: 280px; }
.admin-album-photo-view-content-has-photos .admin-album-photo-empty { display: none !important; }
.admin-album-upload-progress {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,.06);
}
.admin-album-upload-progress-text {
  margin: 0 0 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gray-700);
}
.admin-album-upload-progress-bar {
  height: 8px;
  background: rgba(0,0,0,.08);
  border-radius: 999px;
  overflow: hidden;
}
.admin-album-upload-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--purple-600, #7c3aed);
  border-radius: 999px;
  transition: width 0.15s ease-out;
}
.admin-album-upload-progress-saving .admin-album-upload-progress-fill {
  animation: admin-album-upload-pulse 1.2s ease-in-out infinite;
}
@keyframes admin-album-upload-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.admin-album-photo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 2rem;
  background: var(--gray-50);
  border-radius: var(--radius-xl);
  border: 2px dashed rgba(0,0,0,.1);
}
.admin-album-photo-empty-text {
  font-size: 1rem;
  color: var(--gray-600);
  margin: 0 0 1rem 0;
}
.admin-album-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
  background: var(--purple-600, #7c3aed);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.admin-album-upload-btn:hover {
  background: var(--purple-700, #6d28d9);
  transform: translateY(-1px);
}
.admin-album-upload-btn-secondary {
  margin-top: 1rem;
  background: var(--gray-600);
}
.admin-album-upload-btn-secondary:hover { background: var(--gray-700); }
.admin-album-photo-grid-wrap { margin-top: 0.5rem; }
.admin-album-photo-loading { margin-bottom: 0.5rem; }
.admin-album-photo-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
.admin-album-photo-skeleton-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-100);
}
.admin-album-photo-skeleton-shimmer {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
  background-size: 200% 100%;
  animation: admin-album-shimmer 1.2s ease-in-out infinite;
}
@keyframes admin-album-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.admin-album-photo-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-100);
}
.admin-album-photo-cell-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
  background-size: 200% 100%;
  animation: admin-album-shimmer 1.2s ease-in-out infinite;
  transition: opacity 0.2s ease;
}
.admin-album-photo-cell-loaded .admin-album-photo-cell-skeleton {
  opacity: 0;
  pointer-events: none;
}
.admin-album-photo-cell .admin-album-photo-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.admin-album-photo-cell-loaded .admin-album-photo-thumb {
  opacity: 1;
}
.admin-album-photo-cell-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.admin-album-photo-cell-close:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: scale(1.05);
}
.admin-album-photo-cell-close svg {
  display: block;
}
.admin-album-photo-failed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--gray-500);
  padding: 0.5rem;
  text-align: center;
}
.admin-album-empty-msg {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--gray-600);
}
.admin-album-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
.admin-album-photo-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--gray-100);
}

/* Admin album lightbox: reuse choose-photo look, hide Select/Go to/toolbar */
.admin-album-lightbox .lg-toolbar-inner,
.admin-album-lightbox .lg-toolbar-mobile-trigger,
.admin-album-lightbox .lg-btn-select,
.admin-album-lightbox .lg-photo-id { display: none !important; }
.admin-album-lightbox .lg-toolbar { flex: 0; }
.admin-album-lightbox .admin-album-lightbox-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;
}
.admin-album-lightbox .admin-album-lightbox-delete:hover {
  background: rgba(255, 255, 255, 0.25);
}
.admin-album-lightbox .admin-album-lightbox-delete svg {
  display: block;
}
.admin-album-lightbox .admin-album-lightbox-read-note,
.admin-album-lightbox .admin-album-lightbox-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;
}
.admin-album-lightbox .admin-album-lightbox-read-note[hidden],
.admin-album-lightbox .admin-album-lightbox-edit[hidden] {
  display: none;
}
.admin-album-lightbox .admin-album-lightbox-read-note:hover,
.admin-album-lightbox .admin-album-lightbox-edit:hover {
  background: rgba(255, 255, 255, 0.25);
}
.admin-album-lightbox .admin-album-lightbox-read-note svg,
.admin-album-lightbox .admin-album-lightbox-edit svg {
  display: block;
}
/* Note modal above lightbox (lightbox z-index is 9999) */
.admin-album-note-modal.admin-enquiry-delete-modal {
  z-index: 10000;
}
.admin-album-note-modal-dialog { max-width: 420px; }
.admin-album-read-note-content {
  font-size: 0.9375rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0 0 1.25rem 0;
  padding: 0.75rem;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 12rem;
  overflow-y: auto;
}
.admin-album-note-modal-hint {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin: -0.25rem 0 0.75rem;
}
.admin-album-note-textarea {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font: inherit;
  resize: vertical;
  min-height: 100px;
}
.admin-album-note-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 59, 130, 246), 0.2);
}
.admin-album-photo-cell-has-notes {
  position: relative;
  box-shadow: 0 0 0 2px var(--primary, #3b82f6);
  border-radius: var(--radius-lg);
}
.admin-album-photo-cell-has-notes::after {
  content: 'Note';
  position: absolute;
  bottom: 0.25rem;
  right: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--primary, #3b82f6);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  line-height: 1.2;
}

.admin-th-actions { text-align: right; }
.admin-td-actions { text-align: right; }

.admin-booking-client,
.admin-booking-service,
.admin-booking-datetime,
.admin-booking-amount {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.admin-booking-client-name,
.admin-booking-service-name { font-weight: 500; color: var(--gray-900); }

.admin-booking-client-phone,
.admin-booking-service-count,
.admin-booking-time,
.admin-amount-paid {
  font-size: 0.8125rem;
  color: var(--gray-600);
}

.admin-amount-total { font-weight: 500; color: var(--gray-900); }

.admin-team-badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: var(--gray-100);
  color: var(--gray-700);
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
}

.admin-assign-btn {
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--purple-600);
  cursor: pointer;
  font-weight: 500;
}

.admin-assign-btn:hover { text-decoration: underline; }

.admin-badge-inprogress {
  background: #dbeafe;
  color: #2563eb;
}

.admin-actions-dropdown {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}

.admin-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.25rem;
  min-width: 11rem;
  background: var(--white);
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-lg);
  z-index: 10;
  padding: 0.25rem;
}

.admin-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: none;
  background: transparent;
  color: var(--gray-900);
  cursor: pointer;
  border-radius: 0.375rem;
}

.admin-dropdown-item:hover { background: var(--gray-50); }

.admin-dropdown-danger { color: #dc2626; }
.admin-dropdown-danger:hover { background: #fef2f2; }

.admin-team-stats-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  text-align: center;
  margin-bottom: 1rem;
}

.admin-team-stats-inline > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--gray-600);
}

.admin-team-stat-num {
  font-size: 1.5rem;
  color: var(--purple-600);
}

.admin-team-stat-green { color: #059669; }

.admin-schedule-btn { width: 100%; justify-content: center; }

/* Admin modal (e.g. Add Equipment) */
.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.admin-modal.admin-modal-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.admin-modal-body-open { overflow: hidden; }
.admin-dropdown-open { overflow: hidden; }

.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.admin-modal-box {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  pointer-events: auto;
}

.admin-modal-header {
  position: relative;
  padding: 1.5rem 1.5rem 0;
  flex-shrink: 0;
}

.admin-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: var(--gray-900);
}

.admin-modal-subtitle {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin: 0 0 1rem;
}

.admin-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray-600);
  cursor: pointer;
  border-radius: 0.375rem;
}

.admin-modal-close:hover { background: var(--gray-100); color: var(--gray-900); }

/* Add Equipment modal – redesign */
.admin-add-equipment-modal .admin-add-equipment-backdrop {
  transition: opacity 0.25s ease-out;
}
.admin-add-equipment-modal:not(.admin-modal-open) .admin-add-equipment-backdrop {
  opacity: 0;
}
.admin-add-equipment-modal.admin-modal-open .admin-add-equipment-backdrop {
  opacity: 1;
}
.admin-add-equipment-modal .admin-add-equipment-dialog {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.admin-add-equipment-modal:not(.admin-modal-open) .admin-add-equipment-dialog {
  opacity: 0;
  transform: scale(0.96);
}
.admin-add-equipment-modal.admin-modal-open .admin-add-equipment-dialog {
  opacity: 1;
  transform: scale(1);
}
.admin-add-equipment-header {
  background: #f4f5f7;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}
.admin-add-equipment-header-inner {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
}
.admin-add-equipment-header-text {
  flex: 1;
  min-width: 0;
}
.admin-add-equipment-accent {
  width: 4px;
  min-height: 2.5rem;
  border-radius: 2px;
  background: linear-gradient(to bottom, #0d9488, #0f766e);
  flex-shrink: 0;
  align-self: stretch;
}
.admin-add-equipment-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.admin-add-equipment-subtitle {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin: 0;
  font-weight: 500;
}
.admin-add-equipment-close {
  position: static;
  flex-shrink: 0;
  margin-left: 0.5rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray-600);
  cursor: pointer;
  border-radius: 0.375rem;
}
.admin-add-equipment-close:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.admin-add-equipment-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.admin-add-equipment-body .admin-form-row {
  margin-bottom: 1rem;
}
.admin-add-equipment-body .admin-form-row-half {
  display: inline-block;
  width: calc(50% - 0.5rem);
  vertical-align: top;
}
.admin-add-equipment-body .admin-form-row-half:first-of-type {
  margin-right: 0.5rem;
}
.admin-add-equipment-actions {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.admin-add-equipment-actions .btn:first-child {
  margin-right: auto;
}
.admin-add-equipment-actions .btn:last-child {
  margin-left: auto;
}
.admin-add-equipment-submit {
  background: linear-gradient(to right, #0d9488, #0f766e);
  color: #fff;
  border: none;
}
.admin-add-equipment-submit:hover {
  opacity: 0.95;
}

/* Belongs-to teammate selection chip */
.admin-eq-belongs-to-selected[hidden] { display: none !important; }
.admin-eq-belongs-to-selected {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 0.5rem;
  background: var(--gray-50);
}
.admin-eq-belongs-to-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-800);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-eq-belongs-to-remove {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--gray-400);
  cursor: pointer;
  padding: 0 0.15rem;
  border-radius: 0.25rem;
  transition: color 0.15s, background 0.15s;
}
.admin-eq-belongs-to-remove:hover {
  color: var(--gray-700);
  background: var(--gray-200);
}

/* Assign Equipment modal – redesign */
.admin-assign-equipment-modal .admin-assign-equipment-backdrop {
  transition: opacity 0.25s ease-out;
}
.admin-assign-equipment-modal:not(.admin-modal-open) .admin-assign-equipment-backdrop {
  opacity: 0;
}
.admin-assign-equipment-modal.admin-modal-open .admin-assign-equipment-backdrop {
  opacity: 1;
}
.admin-assign-equipment-modal .admin-assign-equipment-dialog {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.admin-assign-equipment-modal:not(.admin-modal-open) .admin-assign-equipment-dialog {
  opacity: 0;
  transform: scale(0.96);
}
.admin-assign-equipment-modal.admin-modal-open .admin-assign-equipment-dialog {
  opacity: 1;
  transform: scale(1);
}
.admin-assign-equipment-header {
  background: #f4f5f7;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}
.admin-assign-equipment-header-inner {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
}
.admin-assign-equipment-header-text {
  flex: 1;
  min-width: 0;
}
.admin-assign-equipment-accent {
  width: 4px;
  min-height: 2.5rem;
  border-radius: 2px;
  background: linear-gradient(to bottom, #2563eb, #1d4ed8);
  flex-shrink: 0;
  align-self: stretch;
}
.admin-assign-equipment-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.admin-assign-equipment-subtitle {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin: 0;
  font-weight: 500;
}
.admin-assign-equipment-subtitle strong {
  color: var(--gray-700);
  font-weight: 600;
}
.admin-assign-equipment-close {
  position: static;
  flex-shrink: 0;
  margin-left: 0.5rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray-600);
  cursor: pointer;
  border-radius: 0.375rem;
}
.admin-assign-equipment-close:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.admin-assign-equipment-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.admin-assign-equipment-body .admin-form-row {
  margin-bottom: 1rem;
}
.admin-assign-equipment-actions {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.admin-assign-equipment-actions .btn:first-child {
  margin-right: auto;
}
.admin-assign-equipment-actions .btn:last-child {
  margin-left: auto;
}
.admin-assign-equipment-submit {
  background: linear-gradient(to right, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
}
.admin-assign-equipment-submit:hover {
  opacity: 0.95;
}

/* Create Storage modal – redesign */
.admin-create-storage-modal .admin-create-storage-backdrop {
  transition: opacity 0.25s ease-out;
}
.admin-create-storage-modal:not(.admin-modal-open) .admin-create-storage-backdrop {
  opacity: 0;
}
.admin-create-storage-modal.admin-modal-open .admin-create-storage-backdrop {
  opacity: 1;
}
.admin-create-storage-modal .admin-create-storage-dialog {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.admin-create-storage-modal:not(.admin-modal-open) .admin-create-storage-dialog {
  opacity: 0;
  transform: scale(0.96);
}
.admin-create-storage-modal.admin-modal-open .admin-create-storage-dialog {
  opacity: 1;
  transform: scale(1);
}
.admin-create-storage-header {
  background: #f4f5f7;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}
.admin-create-storage-header-inner {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
}
.admin-create-storage-header-text {
  flex: 1;
  min-width: 0;
}
.admin-create-storage-accent {
  width: 4px;
  min-height: 2.5rem;
  border-radius: 2px;
  background: linear-gradient(to bottom, #7c3aed, #6d28d9);
  flex-shrink: 0;
  align-self: stretch;
}
.admin-create-storage-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.admin-create-storage-subtitle {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin: 0;
  font-weight: 500;
}
.admin-create-storage-close {
  position: static;
  flex-shrink: 0;
  margin-left: 0.5rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray-600);
  cursor: pointer;
  border-radius: 0.375rem;
}
.admin-create-storage-close:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.admin-create-storage-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.admin-create-storage-body .admin-form-row {
  margin-bottom: 1rem;
}
.admin-create-storage-actions {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.admin-create-storage-actions .btn:first-child {
  margin-right: auto;
}
.admin-create-storage-actions .btn:last-child {
  margin-left: auto;
}
.admin-create-storage-submit {
  background: linear-gradient(to right, #7c3aed, #6d28d9);
  color: #fff;
  border: none;
}
.admin-create-storage-submit:hover {
  opacity: 0.95;
}

/* Create Team modal – redesign */
.admin-create-team-modal .admin-create-team-backdrop {
  transition: opacity 0.25s ease-out;
}
.admin-create-team-modal:not(.admin-modal-open) .admin-create-team-backdrop {
  opacity: 0;
}
.admin-create-team-modal.admin-modal-open .admin-create-team-backdrop {
  opacity: 1;
}
.admin-create-team-modal .admin-create-team-dialog {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.admin-create-team-modal:not(.admin-modal-open) .admin-create-team-dialog {
  opacity: 0;
  transform: scale(0.96);
}
.admin-create-team-modal.admin-modal-open .admin-create-team-dialog {
  opacity: 1;
  transform: scale(1);
}
.admin-create-team-header {
  background: #f4f5f7;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}
.admin-create-team-header-inner {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
}
.admin-create-team-header-text {
  flex: 1;
  min-width: 0;
}
.admin-create-team-accent {
  width: 4px;
  min-height: 2.5rem;
  border-radius: 2px;
  background: linear-gradient(to bottom, #059669, #047857);
  flex-shrink: 0;
  align-self: stretch;
}
.admin-create-team-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.admin-create-team-subtitle {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin: 0;
  font-weight: 500;
}
.admin-create-team-close {
  position: static;
  flex-shrink: 0;
  margin-left: 0.5rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray-600);
  cursor: pointer;
  border-radius: 0.375rem;
}
.admin-create-team-close:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.admin-create-team-body {
  position: relative;
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.admin-create-team-body .admin-form-row {
  margin-bottom: 1rem;
}
.admin-create-team-actions {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.admin-create-team-actions .btn:first-child {
  margin-right: auto;
}
.admin-create-team-actions .btn:last-child {
  margin-left: auto;
}
.admin-create-team-submit {
  background: linear-gradient(to right, #059669, #047857);
  color: #fff;
  border: none;
}
.admin-create-team-submit:hover {
  opacity: 0.95;
}

/* Create/Edit Team modal – Event For input when disabled (Edit mode) */
.admin-create-team-modal .admin-form-input:disabled,
.admin-create-team-modal input.admin-form-input[disabled] {
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-600, #4b5563);
  border-color: var(--gray-200, #e5e7eb);
  cursor: not-allowed;
  opacity: 1;
}

/* Delete Team modal – red accent, danger button, body spacing, open/close animation */
.admin-delete-team-accent {
  background: linear-gradient(to bottom, #dc2626, #b91c1c) !important;
}
.admin-delete-team-sure {
  background: linear-gradient(to right, #dc2626, #b91c1c);
  color: #fff;
  border: none;
}
.admin-delete-team-sure:hover {
  opacity: 0.95;
}

.admin-delete-team-modal .admin-delete-team-backdrop {
  transition: opacity 0.25s ease-out;
}
.admin-delete-team-modal:not(.admin-modal-open) .admin-delete-team-backdrop {
  opacity: 0;
}
.admin-delete-team-modal.admin-modal-open .admin-delete-team-backdrop {
  opacity: 1;
}
.admin-delete-team-modal .admin-delete-team-dialog {
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.admin-delete-team-modal:not(.admin-modal-open) .admin-delete-team-dialog {
  opacity: 0;
  transform: scale(0.96);
}
.admin-delete-team-modal.admin-modal-open .admin-delete-team-dialog {
  opacity: 1;
  transform: scale(1);
}

.admin-delete-team-body {
  padding: 1.5rem 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.admin-delete-team-body .admin-delete-team-message {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--gray-700);
  font-weight: 500;
}
.admin-delete-team-body .admin-delete-team-ref {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--gray-800);
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  background: var(--gray-50);
  border-radius: 0.375rem;
  border: 1px solid var(--gray-200);
}

/* Delete storage card modal – redesign */
.admin-delete-storage-card-modal .admin-delete-storage-card-backdrop {
  transition: opacity 0.25s ease-out;
}
.admin-delete-storage-card-modal:not(.admin-modal-open) .admin-delete-storage-card-backdrop {
  opacity: 0;
}
.admin-delete-storage-card-modal.admin-modal-open .admin-delete-storage-card-backdrop {
  opacity: 1;
}
.admin-delete-storage-card-modal .admin-delete-storage-card-dialog {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.admin-delete-storage-card-modal:not(.admin-modal-open) .admin-delete-storage-card-dialog {
  opacity: 0;
  transform: scale(0.96);
}
.admin-delete-storage-card-modal.admin-modal-open .admin-delete-storage-card-dialog {
  opacity: 1;
  transform: scale(1);
}
.admin-delete-storage-card-header {
  background: #f4f5f7;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}
.admin-delete-storage-card-header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.admin-delete-storage-card-header-text {
  flex: 1;
  min-width: 0;
}
.admin-delete-storage-card-accent {
  width: 4px;
  min-height: 2.5rem;
  border-radius: 2px;
  background: linear-gradient(to bottom, #dc2626, #b91c1c);
  flex-shrink: 0;
  align-self: stretch;
}
.admin-delete-storage-card-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.admin-delete-storage-card-subtitle {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin: 0;
  font-weight: 500;
}
.admin-delete-storage-card-ref-chip {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  font-size: 0.8125rem;
  font-weight: 600;
}
.admin-delete-storage-card-ref-chip:empty {
  display: none;
}
.admin-delete-storage-card-close {
  position: static;
  flex-shrink: 0;
  margin-left: 0.5rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray-600);
  cursor: pointer;
  border-radius: 0.375rem;
}
.admin-delete-storage-card-close:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.admin-delete-storage-card-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.admin-delete-storage-card-message {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--gray-600);
  line-height: 1.5;
}
.admin-delete-storage-card-actions {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.admin-delete-storage-card-actions .btn:first-child {
  margin-right: auto;
}
.admin-delete-storage-card-actions .btn:last-child {
  margin-left: auto;
}
.admin-delete-storage-card-sure {
  background: linear-gradient(to right, #dc2626, #b91c1c);
  color: #fff;
  border: none;
}
.admin-delete-storage-card-sure:hover {
  opacity: 0.95;
}

/* Delete Equipment modal – redesign */
.admin-delete-equipment-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.admin-delete-equipment-modal[hidden] {
  display: none;
}
.admin-delete-equipment-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: opacity 0.25s ease-out;
}
.admin-delete-equipment-modal:not([hidden]):not(.admin-delete-equipment-modal-open) {
  pointer-events: none;
}
.admin-delete-equipment-modal:not([hidden]):not(.admin-delete-equipment-modal-open) .admin-delete-equipment-backdrop {
  opacity: 0;
}
.admin-delete-equipment-modal:not([hidden]).admin-delete-equipment-modal-open .admin-delete-equipment-backdrop {
  opacity: 1;
}
.admin-delete-equipment-modal .admin-delete-equipment-dialog {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 32rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.admin-delete-equipment-modal:not(.admin-delete-equipment-modal-open) .admin-delete-equipment-dialog {
  opacity: 0;
  transform: scale(0.96);
}
.admin-delete-equipment-modal.admin-delete-equipment-modal-open .admin-delete-equipment-dialog {
  opacity: 1;
  transform: scale(1);
}
.admin-delete-equipment-header {
  background: #f4f5f7;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}
.admin-delete-equipment-header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.admin-delete-equipment-header-text {
  flex: 1;
  min-width: 0;
}
.admin-delete-equipment-accent {
  width: 4px;
  min-height: 2.5rem;
  border-radius: 2px;
  background: linear-gradient(to bottom, #dc2626, #b91c1c);
  flex-shrink: 0;
  align-self: stretch;
}
.admin-delete-equipment-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.admin-delete-equipment-subtitle {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin: 0;
  font-weight: 500;
}
.admin-delete-equipment-ref-chip {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  font-size: 0.8125rem;
  font-weight: 600;
}
.admin-delete-equipment-ref-chip:empty {
  display: none;
}
.admin-delete-equipment-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.admin-delete-equipment-message {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--gray-600);
  line-height: 1.5;
}
.admin-delete-equipment-actions {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.admin-delete-equipment-actions .btn:first-child {
  margin-right: auto;
}
.admin-delete-equipment-actions .btn:last-child {
  margin-left: auto;
}
.admin-delete-equipment-sure {
  background: linear-gradient(to right, #dc2626, #b91c1c);
  color: #fff;
  border: none;
}
.admin-delete-equipment-sure:hover {
  opacity: 0.95;
}

.admin-modal-body {
  padding: 0 1.5rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.admin-form-row-profile-image .admin-form-label { margin-bottom: 0.5rem; }

.admin-photo-description {
  font-size: 0.8125rem;
  color: var(--gray-600);
  margin: 0 0 0.5rem 0;
}

.admin-form-hint {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin: 0.25rem 0 0 0;
}

.admin-create-team-members-wrap { margin-top: 0.25rem; }
.admin-create-team-members-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.admin-create-team-members-row .admin-form-input { flex: 1; min-width: 0; }

.admin-create-team-search-wrap {
  position: relative;
}
.admin-create-team-search-wrap .admin-form-input { width: 100%; }
.admin-create-team-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0.25rem;
  max-height: 14rem;
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,.12), 0 8px 10px -6px rgba(0,0,0,.06);
  z-index: 200;
}
.admin-create-team-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.9375rem;
  background: #ffffff;
}
.admin-create-team-dropdown-item:hover,
.admin-create-team-dropdown-item:focus,
.admin-create-team-dropdown-item.admin-create-team-dropdown-item-active {
  background: #f3f4f6;
  outline: none;
}
.admin-create-team-dropdown-item-text { flex: 1; color: #000; min-width: 0; }
.admin-create-team-dropdown-role {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-left: 0.25rem;
}
/* Equipment dropdown: same row design as Teammates (avatar-sized icon + name + meta) */
.admin-create-team-eq-avatar {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-create-team-eq-avatar svg {
  display: block;
}
.admin-create-team-event-for-item {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}
.admin-create-team-event-for-name {
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.3;
}
.admin-create-team-event-for-meta {
  font-size: 0.8125rem;
  color: var(--gray-600);
  line-height: 1.4;
}
.admin-create-team-event-for-date {
  display: block;
  margin-top: 0.125rem;
  color: var(--gray-500);
  font-size: 0.75rem;
}
.admin-create-team-event-for-datetime {
  display: block;
  color: var(--gray-500);
  font-size: 0.7rem;
}
.admin-create-team-selected-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.admin-create-team-selected-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
}
.admin-create-team-selected-name { flex: 1; font-weight: 500; color: var(--gray-900); }
.admin-create-team-remove-member {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--gray-500);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-create-team-remove-member:hover { background: var(--gray-200); color: var(--gray-800); }

.admin-create-team-role-assign {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}
.admin-create-team-role-assign-title { margin: 0 0 0.5rem 0; font-size: 0.9375rem; color: var(--gray-900); }
.admin-create-team-role-assign .admin-form-hint { margin: 0 0 0.5rem 0; }
.admin-create-team-role-section { margin-bottom: 1rem; }
.admin-create-team-role-section:last-of-type { margin-bottom: 0; }
.admin-create-team-role-section-label {
  margin: 0 0 0.25rem 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.admin-create-team-role-check-disabled { opacity: 0.85; cursor: default; }
.admin-create-team-role-check-disabled input:disabled { cursor: default; }
.admin-create-team-role-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.75rem;
}
.admin-create-team-role-check {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  color: var(--gray-800);
  cursor: pointer;
}
.admin-create-team-role-check input { margin: 0; }
.admin-create-team-role-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.admin-create-team-selected-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.admin-create-team-selected-roles {
  font-size: 0.8125rem;
  color: var(--gray-500);
}

.admin-create-team-equipment-section {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: linear-gradient(to bottom, var(--gray-50), var(--white));
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}
.admin-create-team-equipment-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.admin-create-team-equipment-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  color: var(--gray-600);
}
.admin-create-team-equipment-title {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
}
.admin-create-team-equipment-desc {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--gray-600);
  line-height: 1.4;
}
.admin-create-team-eq-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-md);
}
.admin-create-team-eq-alert[hidden] {
  display: none !important;
}
.admin-create-team-eq-alert-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  background: #f59e0b;
  color: #fff;
  border-radius: 50%;
}
.admin-create-team-eq-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 0;
  align-items: end;
  margin-bottom: 1rem;
}
.admin-create-team-eq-field {
}
.admin-create-team-eq-field .admin-form-input,
.admin-create-team-eq-field .admin-select { width: 100%; }
.admin-create-team-eq-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.admin-create-team-eq-label-invisible { visibility: hidden; }
.admin-create-team-eq-name-wrap {
  position: relative;
  min-width: 0;
}
.admin-create-team-eq-name-wrap .admin-form-input { width: 100%; }
.admin-create-team-eq-name-dropdown {
  top: 100%;
  margin-top: 0.25rem;
  z-index: 100;
}
.admin-create-team-eq-type-wrap {
  position: relative;
  min-width: 0;
}
.admin-create-team-eq-type-wrap .admin-form-input { width: 100%; }
.admin-create-team-eq-type-dropdown {
  top: 100%;
  margin-top: 0.25rem;
  z-index: 100;
}
.admin-create-team-eq-field-type { min-width: 0; }
.admin-create-team-eq-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}
.admin-create-team-eq-add-btn-icon {
  font-size: 1.125rem;
  line-height: 1;
  font-weight: 300;
}
.admin-create-team-equipment-list-wrap {
  border-top: 1px dashed var(--gray-200);
  padding-top: 1rem;
}
.admin-create-team-eq-list-title {
  margin: 0 0 0.5rem 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-600);
}
.admin-create-team-eq-list-empty {
  margin: 0;
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--gray-500);
  text-align: center;
  background: var(--gray-50);
  border: 1px dashed var(--gray-200);
  border-radius: var(--radius-md);
}
.admin-create-team-equipment-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin-create-team-equipment-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.admin-create-team-eq-item-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: var(--radius);
  color: var(--gray-500);
}
.admin-create-team-eq-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.admin-create-team-eq-item-name { font-weight: 600; color: var(--gray-900); }
.admin-create-team-eq-item-type { font-size: 0.8125rem; color: var(--gray-500); }
.admin-create-team-eq-item-responsible {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-700);
  background: var(--gray-100);
  border-radius: var(--radius);
}
.admin-create-team-remove-eq {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--gray-400);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.admin-create-team-remove-eq:hover { background: #fee2e2; color: #dc2626; }

.admin-photo-input { position: absolute; width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; }

.admin-photo-preview-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-height: 7rem;
}

.admin-photo-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  border: 2px dashed var(--gray-300);
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.admin-photo-placeholder:hover {
  border-color: var(--gray-400);
  background: var(--gray-100);
}

.admin-photo-placeholder-text {
  font-size: 0.8125rem;
  color: var(--gray-500);
}

.admin-photo-placeholder-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.admin-photo-placeholder-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
  pointer-events: none;
}

.admin-photo-placeholder--has-image:hover .admin-photo-placeholder-hover {
  opacity: 1;
  pointer-events: auto;
}

.admin-photo-crop-wrap {
  position: relative;
  width: 100%;
  max-width: 20rem;
  height: 280px;
  background: var(--gray-100);
}

.admin-photo-crop-wrap img {
  display: block;
  max-width: 100%;
}

.admin-photo-crop-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  pointer-events: none;
}

.admin-photo-controls {
  margin-top: 0.5rem;
}

.admin-photo-hint {
  margin: 0 0 0.375rem 0;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.admin-photo-preview-wrap .admin-photo-hint {
  margin-top: 0;
}

.admin-photo-zoom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-photo-zoom-btn {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--gray-300);
  border-radius: 0.25rem;
  background: #fff;
  color: var(--gray-700);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-photo-zoom-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
}

.admin-photo-zoom-label {
  font-size: 0.75rem;
  color: var(--gray-600);
  min-width: 2.5rem;
  text-align: center;
}

.admin-photo-okay-btn {
  margin-top: 0.5rem;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
}

.admin-photo-change-row {
  margin-top: 0.5rem;
}

.admin-photo-change-btn {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.admin-photo-remove {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-600);
  font-size: 1.125rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.admin-photo-remove:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

.admin-form-row-id-proof .admin-form-label { margin-bottom: 0; }

.admin-id-proof-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.admin-id-proof-select {
  width: auto;
  min-width: 10rem;
  margin-bottom: 0;
}

.admin-id-proof-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
}

.admin-id-proof-upload {
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

.admin-id-proof-filename {
  font-size: 0.8125rem;
  color: var(--gray-600);
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-id-proof-preview-link {
  font-size: 0.8125rem;
  color: var(--gray-700);
  text-decoration: underline;
}

.admin-id-proof-preview-link:hover {
  color: var(--gray-900);
}

.admin-form-row-id-proof .admin-add-role-inline {
  margin-top: 0.5rem;
}

.admin-id-proof-detail {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-bottom: 0.375rem;
}

.admin-form-notes-section {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.admin-notes-list {
  display: flex;
  flex-direction: column;
  gap: 0rem;
}

.admin-note-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.5rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
}

.admin-note-row:last-child {
  margin-bottom: 0;
}

/* Storage modal: single folder input row (one input always) */
/* Hidden by default; shown only when user clicks "+ Add folder" */
.admin-storage-folder-input-row[hidden] {
  display: none !important;
}
.admin-storage-folder-input-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  min-height: 2.5rem;
}
.admin-storage-folder-input-row .admin-storage-folder-input-wrap {
  flex: 1;
  min-width: 0;
}
.admin-storage-folder-input-row .admin-storage-folder-row-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.admin-storage-folder-input-row .admin-storage-folder-row-actions .btn {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

/* Storage modal: saved folder row (list item, no input) */
.admin-storage-created-folder-row {
  margin-bottom: 0.5rem;
  padding: 0rem 1rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
}
.admin-storage-created-folder-row .admin-storage-folder-edit-view,
.admin-storage-created-folder-row .admin-storage-folder-saved-view {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.25rem;
}
.admin-storage-created-folder-row .admin-storage-folder-edit-view .admin-storage-folder-input-wrap {
  flex: 1;
  min-width: 0;
}
.admin-storage-created-folder-row .admin-storage-folder-row-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.admin-storage-created-folder-row .admin-storage-folder-row-actions .admin-note-save {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}
.admin-storage-created-folder-row .admin-storage-folder-remove {
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--gray-500);
  border-radius: 0.25rem;
}
.admin-storage-created-folder-row .admin-storage-folder-remove:hover {
  color: var(--red-600, #dc2626);
  background: var(--gray-100);
}
.admin-storage-created-folder-row .admin-note-edit,
.admin-storage-created-folder-row .admin-note-delete {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Saved row: icon + name on left, actions on right, same baseline */
.admin-storage-created-folder-row .admin-storage-folder-saved-row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.admin-storage-created-folder-row .admin-storage-folder-saved-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gray-600);
}
.admin-storage-created-folder-row .admin-note-saved-text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--gray-800);
  line-height: 1.25rem;
}

/* Storage modal: folder name input with folder icon */
.admin-storage-folder-input-wrap {
  position: relative;
  width: 100%;
}
.admin-storage-folder-input-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gray-600);
  pointer-events: none;
}
.admin-storage-folder-input-wrap .admin-storage-folder-input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.5rem;
  box-sizing: border-box;
  min-height: 2.25rem;
}


/* Meta row: saved time (left) and actions (right) on one line */
.admin-note-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  min-height: 1.75rem;
}

.admin-note-datetime {
  font-size: 0.75rem;
  color: var(--gray-500);
  flex: 1;
  min-width: 0;
}

.admin-note-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.admin-note-actions .admin-note-save {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

.admin-note-textarea {
  resize: vertical;
  min-height: 4rem;
  margin: 0;
  background: #fff;
  border: 1px solid var(--gray-200);
}

.admin-note-textarea:focus {
  border-color: var(--gray-400);
  outline: none;
}

.admin-note-remove {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--gray-300);
  background: #fff;
  color: var(--gray-600);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0.25rem;
}

.admin-note-remove:hover {
  background: var(--gray-100);
  color: var(--gray-800);
  border-color: var(--gray-400);
}

/* Saved note: bottom row = content + date/time (left), edit + delete icons (right) */
.admin-note-saved-view {
  width: 100%;
}

.admin-note-saved-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.25rem;
}

.admin-note-saved-left {
  flex: 1;
  min-width: 0;
}

.admin-note-saved-text {
  margin: 0 0 0.25rem 0;
  font-size: 0.875rem;
  color: var(--gray-700);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
}

.admin-note-saved-datetime,
.admin-note-saved-added,
.admin-note-saved-updated {
  font-size: 0.75rem;
  color: var(--gray-500);
  display: block;
}
.admin-note-saved-added { margin-top: 0.25rem; }
.admin-note-saved-updated { margin-top: 0.125rem; }

.admin-note-saved-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.admin-note-edit,
.admin-note-delete {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--gray-300);
  background: #fff;
  color: var(--gray-600);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-note-edit:hover,
.admin-note-delete:hover {
  background: var(--gray-100);
  color: var(--gray-800);
  border-color: var(--gray-400);
}

.admin-note-icon-bin {
  display: block;
  pointer-events: none;
}

.admin-notes-ul {
  margin: 0.25rem 0 0 1.25rem;
  padding: 0;
  font-size: 0.875rem;
  color: var(--gray-600);
  list-style: none;
}

.admin-notes-ul li { margin-bottom: 0.5rem; }
.admin-notes-ul li:last-child { margin-bottom: 0; }

.admin-note-item {
  display: block;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.admin-note-item:last-child { border-bottom: none; }

.admin-note-item .admin-note-text {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-note-item .admin-note-datetime {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
  text-align: left;
}

.admin-form-textarea {
  resize: vertical;
  min-height: 4rem;
}

.admin-form-row {
  margin-bottom: 1rem;
}

.admin-form-row-half {
  display: inline-block;
  width: calc(50% - 0.5rem);
  vertical-align: top;
}

.admin-form-row-half:first-of-type { margin-right: 0.5rem; }

.admin-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: var(--gray-700);
}

.admin-form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}

.admin-form-label-row .admin-form-label {
  margin-bottom: 0;
}

.admin-add-role-btn {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--purple-600);
  cursor: pointer;
  white-space: nowrap;
}

.admin-add-role-btn:hover { text-decoration: underline; }

.admin-add-role-inline {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  align-items: flex-start;
}

/* Keep add-role inline hidden until "+ Add New Role" is clicked */
.admin-add-role-inline[hidden] {
  display: none !important;
}

.admin-add-inline-input-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.admin-add-role-inline .admin-form-input { width: 100%; margin-bottom: 0; }
.admin-form-input.admin-dm-input-error { border-color: #dc2626; }
.admin-add-role-confirm,
.admin-add-role-close { flex-shrink: 0; }

/* Specialization chips in Add Teammate modal */
.admin-spec-chips-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 2rem;
}

.admin-spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
  font-size: 0.8125rem;
  background: var(--gray-100);
  color: var(--gray-800);
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.admin-spec-chip:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
}

.admin-spec-chip-selected {
  background: #dbeafe;
  color: #2563eb;
  border-color: #3b82f6;
}

.admin-spec-chip-selected:hover {
  background: #bfdbfe;
  border-color: #2563eb;
}

.admin-spec-chip-label { flex-shrink: 0; }

.admin-chip-order {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  margin-left: 0.125rem;
}

.admin-chip-up,
.admin-chip-down {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  font-size: 0.7rem;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  opacity: 0.85;
}

.admin-chip-up:hover,
.admin-chip-down:hover {
  opacity: 1;
  background: rgba(0,0,0,0.08);
}

.admin-spec-chips-add {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.admin-spec-chips-add .admin-form-input {
  flex: 1;
  margin-bottom: 0;
}

.admin-spec-chip-add-btn { flex-shrink: 0; }

.admin-form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: var(--white);
  color: var(--gray-900);
}

.admin-form-input:focus {
  outline: none;
  border-color: var(--purple-500);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.admin-form-textarea {
  min-height: 5rem;
  resize: vertical;
}

.admin-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #f3f4f6;
  flex-shrink: 0;
}