/* =========================================================
   SPIRO Mortuary Care Services - Frosted Glass & Orchid Pink Interface
   Theme Color: #ed87e6
   Ethereal, Luminous, Dignified, Serene, and Elegant
   ========================================================= */

:root {
  --spiro-primary: #4d0235;       /* Official Dark Accent: #4d0235 */
  --spiro-primary-light: #730a52; /* Rich mulberry */
  --spiro-violet: #ed87e6;        /* Theme Pastel Violet: #ed87e6 */
  --spiro-violet-light: #fcecfb;  /* Soft orchid blossom mist */
  --spiro-violet-glow: rgba(237, 135, 230, 0.45);
  --spiro-gold: #b45309;          /* Warm refined gold / amber */
  --spiro-gold-light: #fef3c7;    /* Soft gold badge bg */
  --spiro-glass-bg: rgba(255, 255, 255, 0.8);
  --spiro-glass-border: rgba(255, 255, 255, 0.92);
  --spiro-text-main: #1a0824;     /* Rich deep berry slate */
  --spiro-text-muted: #6e5874;    /* Soft muted orchid slate */
}

/* Custom Dreamy Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: rgba(254, 246, 253, 0.8);
}
::-webkit-scrollbar-thumb {
  background: #ed87e6;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #df5ed5;
}

/* Universal Responsive Reset & Safe Area System */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  max-width: 100vw;
}

body {
  overflow-x: clip;
  max-width: 100vw;
  width: 100%;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Sticky Frozen Header Navigation */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 45 !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

img, video, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
}

/* Typography & Luminous #ed87e6 Ambient Background */
html, body {
  scroll-behavior: smooth;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #1a0824;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fef7fe;
  background-image: 
    radial-gradient(at 10% 12%, rgba(237, 135, 230, 0.55) 0px, transparent 50%),
    radial-gradient(at 90% 8%, rgba(249, 218, 246, 0.6) 0px, transparent 45%),
    radial-gradient(at 20% 55%, rgba(244, 191, 238, 0.55) 0px, transparent 50%),
    radial-gradient(at 85% 65%, rgba(237, 135, 230, 0.45) 0px, transparent 50%),
    radial-gradient(at 50% 90%, rgba(249, 218, 246, 0.6) 0px, transparent 60%),
    linear-gradient(180deg, #FEF7FE 0%, #FAF0FA 30%, #F8E2F6 65%, #FEF7FE 100%);
  background-attachment: fixed;
  background-size: cover;
}

.font-serif-title, h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -0.025em;
  font-weight: 700;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ================= FROSTED GLASS INTERFACE SYSTEM ================= */
.frosted-glass,
.glass-panel-light {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 10px 30px -5px rgba(237, 135, 230, 0.08), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.card-hover-effect {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(18px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 10px 25px -5px rgba(237, 135, 230, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.02), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover-effect:hover {
  background: rgba(255, 255, 255, 0.96) !important;
  transform: translateY(-4px);
  border-color: #ed87e6 !important;
  box-shadow: 0 20px 40px -8px rgba(237, 135, 230, 0.22), 0 4px 12px -2px rgba(223, 94, 213, 0.1), inset 0 1px 2px 0 rgba(255, 255, 255, 1);
}

/* Card Inner Frosted Boxes */
.card-hover-effect .bg-slate-50,
.card-hover-effect .bg-stone-50 {
  background-color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.88) !important;
}

/* Category Filter Active States with #4d0235 Highlights */
.plan-category-btn.bg-slate-900,
.service-category-btn.bg-slate-900 {
  background-color: #4d0235 !important; /* Deep Velvet Plum #4d0235 */
  border-color: #4d0235 !important;
  box-shadow: 0 4px 14px 0 rgba(77, 2, 53, 0.35);
}

/* ================= SILKY SMOOTH CALCULATOR ANIMATIONS ================= */
@keyframes calc-fade-pop {
  0% {
    opacity: 0.45;
    transform: translateY(4px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.calc-pulse-animate {
  animation: calc-fade-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.calc-plan-card {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.28s ease,
              border-color 0.28s ease !important;
  will-change: transform, box-shadow;
}

.calc-plan-card:hover:not(.calc-plan-card-selected) {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(237, 135, 230, 0.75) !important;
  box-shadow: 0 10px 22px -4px rgba(237, 135, 230, 0.2) !important;
}

.calc-plan-card img {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.calc-plan-card:hover img {
  transform: scale(1.08) translateY(-2px);
}

/* Selected Calculator Plan Card (#4d0235 Deep Velvet Plum Active State) */
.calc-plan-card-selected {
  background: linear-gradient(135deg, #4d0235 0%, #2f0120 100%) !important;
  color: #ffffff !important;
  border-color: #4d0235 !important;
  box-shadow: 0 12px 28px -4px rgba(77, 2, 53, 0.5), 0 0 0 2.5px rgba(77, 2, 53, 0.6) !important;
  transform: scale(1.03) translateY(-2px);
}

/* Calculator Payment Mode Buttons Smooth Interaction */
.calc-mode-btn {
  transition: transform 0.25s cubic-bezier(0.34, 1.35, 0.64, 1),
              box-shadow 0.25s cubic-bezier(0.34, 1.35, 0.64, 1),
              background 0.22s ease,
              border-color 0.22s ease,
              color 0.22s ease !important;
  will-change: transform, box-shadow;
}

.calc-mode-btn:hover:not(.active) {
  transform: translateY(-2px);
  border-color: rgba(237, 135, 230, 0.6) !important;
}

.calc-mode-btn:active {
  transform: scale(0.96);
}

/* Calculator Payment Mode Active Button (#4d0235) */
.calc-mode-btn.active,
.calc-mode-btn-active {
  background: linear-gradient(135deg, #4d0235 0%, #2f0120 100%) !important;
  color: #ffffff !important;
  border-color: #4d0235 !important;
  box-shadow: 0 6px 18px -2px rgba(77, 2, 53, 0.45) !important;
}

#calc-plan-features {
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dreamy Hero Banner */
.hero-light-bg {
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.94) 0%, rgba(254, 246, 253, 0.85) 60%, rgba(249, 218, 246, 0.72) 100%),
              url('https://images.unsplash.com/photo-1518495973542-4542c06a5843?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(8px);
}

/* Ambient Floating Glowing Aura Orbs (#ed87e6 Luminous Glow) */
.dreamy-glow-top {
  position: absolute;
  top: -10%;
  left: 20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(237, 135, 230, 0.65) 0%, rgba(252, 236, 251, 0.3) 60%, transparent 80%);
  filter: blur(70px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.dreamy-glow-bottom {
  position: absolute;
  bottom: 0%;
  right: 15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(249, 218, 246, 0.6) 0%, rgba(237, 135, 230, 0.35) 50%, transparent 80%);
  filter: blur(80px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Emergency Pulse (Soft & Unobtrusive) */
@keyframes pulse-subtle-red {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.emergency-pulse-soft {
  animation: pulse-subtle-red 2.5s infinite;
}

/* Modal Backdrop */
.modal-backdrop-light {
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  -webkit-overflow-scrolling: touch;
}

/* Frosted Modal Windows (Adaptive for 50% - 300% Zoom and All Resolutions) */
.modal-backdrop-light > div,
.frosted-modal-content {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 25px 60px -15px rgba(109, 40, 217, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
}

#printable-plan-modal {
  max-height: 92vh;
  max-height: 92dvh;
}

@media (max-height: 600px) {
  #printable-plan-modal {
    max-height: 96vh;
    max-height: 96dvh;
  }
}

/* Minimalist Tables */
.admin-table-light th {
  background-color: rgba(248, 250, 252, 0.85);
  backdrop-filter: blur(10px);
  color: #475569;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.admin-table-light td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgba(241, 245, 249, 0.8);
  color: #1e293b;
}
.admin-table-light tr:hover td {
  background-color: rgba(248, 250, 252, 0.9);
}

/* Toast Notifications */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 300px;
  max-width: 420px;
  padding: 0.875rem 1.25rem;
  border-radius: 1rem;
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(1rem);
  opacity: 0;
  backdrop-filter: blur(12px);
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-success {
  background-color: rgba(6, 95, 70, 0.92);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.toast-error {
  background-color: rgba(153, 27, 27, 0.92);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.toast-info {
  background-color: rgba(30, 27, 75, 0.92);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ================= COMPREHENSIVE RESPONSIVE DESIGN (PHONES & TABLETS) ================= */

/* Safe Area Inset Support for Modern iOS / Android Devices */
header.sticky {
  padding-top: max(0.5rem, env(safe-area-inset-top));
}

.fixed.bottom-6,
.fixed.bottom-4 {
  bottom: max(1rem, calc(1rem + env(safe-area-inset-bottom))) !important;
  right: max(1rem, calc(1rem + env(safe-area-inset-right))) !important;
}

/* Responsive Table Horizontal Scroll Container */
.table-responsive-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0.5rem;
}

.table-responsive-container::-webkit-scrollbar {
  height: 5px;
}
.table-responsive-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

/* Tablets (iPad, Galaxy Tab, Surface: 641px - 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
  .frosted-glass,
  .glass-panel-light {
    padding: 1.75rem !important;
  }
  
  #calculator-section .grid-cols-12 > div:first-child {
    grid-column: span 12 / span 12;
  }
  
  #calculator-section .grid-cols-12 > div:last-child {
    grid-column: span 12 / span 12;
    margin-top: 1rem;
  }

  .admin-table-light th,
  .admin-table-light td {
    padding: 0.65rem 0.75rem;
    font-size: 0.75rem;
  }
}

/* =========================================================
   UNIVERSAL CROSS-PLATFORM MOBILE OPTIMIZATION
   Supports iOS Safari, Android Chrome, Samsung Internet,
   Foldables, Small Handsets (320px+), and Tablets
   ========================================================= */

/* Tablets & Foldable Screens (641px - 1024px) */
@media (max-width: 1024px) {
  .max-w-7xl {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* Phones & Standard Mobile Platforms (320px - 640px) */
@media (max-width: 640px) {
  /* Prevent iOS automatic zooming on form input focus */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Safe Area Inset Support for iPhone Notch / Dynamic Island / Android Navigation Bar */
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .frosted-glass,
  .glass-panel-light {
    padding: 1.15rem 0.85rem !important;
    border-radius: 1.15rem !important;
  }

  /* Smooth Compact Header on Mobile */
  header .h-20 {
    height: 4.25rem !important;
  }

  /* Compact button paddings for mobile header actions */
  header .company-emergency-hotline {
    padding: 0 0.55rem !important;
    height: 2.25rem !important;
  }

  /* Plan cards in calculator */
  .calc-plan-card {
    padding: 0.6rem !important;
    border-radius: 0.85rem !important;
  }
  
  .calc-plan-card .h-14 {
    height: 2.75rem !important;
  }

  .calc-plan-card h4 {
    font-size: 0.75rem !important;
  }

  /* Floating Quick Contact Button safe positioning */
  .fixed.bottom-6.right-6 {
    bottom: max(1rem, calc(1rem + env(safe-area-inset-bottom))) !important;
    right: max(1rem, calc(1rem + env(safe-area-inset-right))) !important;
  }

  /* Toast responsiveness */
  #toast-container {
    left: 1rem;
    right: 1rem;
    bottom: max(1rem, calc(1rem + env(safe-area-inset-bottom)));
  }

  .toast {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    font-size: 0.8rem;
  }

  /* Modal responsive containment for mobile viewports */
  .modal-backdrop-light {
    padding: 0.75rem !important;
    padding-top: max(0.75rem, env(safe-area-inset-top)) !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
  }

  .modal-backdrop-light > div {
    max-width: 100% !important;
    max-height: calc(100dvh - 1.5rem) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 1.25rem !important;
  }

  #printable-plan-modal {
    max-height: 92dvh !important;
  }
}

/* Very Small Mobile (< 375px: iPhone SE, Galaxy Z Fold Cover) */
@media (max-width: 375px) {
  .company-emergency-hotline span {
    font-size: 0.65rem !important;
  }
  
  #calc-plan-cards-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.35rem !important;
  }

  .calc-mode-btn {
    padding: 0.4rem 0.25rem !important;
    font-size: 0.7rem !important;
  }
}

/* Print Stylesheet for Plan Brochures */
@media print {
  body * {
    visibility: hidden;
  }
  #printable-plan-modal, #printable-plan-modal * {
    visibility: visible;
  }
  #printable-plan-modal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
    background: white;
    color: black;
  }
  .no-print {
    display: none !important;
  }
}

/* Responsive Facebook Page Plugin Styling */
.fb-page,
.fb-page span,
.fb-page iframe {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 1.25rem !important;
  overflow: hidden !important;
}

.fb-page iframe {
  box-shadow: 0 4px 20px -5px rgba(77, 2, 53, 0.08);
}

/* Full Projected Interactive Map Styling */
.spiro-office-leaflet-map {
  width: 100% !important;
  height: 100% !important;
  min-height: 320px;
  background-color: #f8fafc;
  z-index: 10;
}

.leaflet-pane {
  z-index: 10 !important;
}

.leaflet-top,
.leaflet-bottom {
  z-index: 15 !important;
}

.leaflet-popup-content-wrapper {
  border-radius: 1rem !important;
  box-shadow: 0 10px 25px -5px rgba(77, 2, 53, 0.25) !important;
  border: 1px solid rgba(244, 191, 238, 0.8) !important;
  padding: 0.25rem !important;
}

.leaflet-popup-tip {
  background: #ffffff !important;
}

.custom-spiro-map-pin {
  background: transparent !important;
  border: none !important;
}

/* Mobile Admin Dashboard Specific Responsive Rules */
@media (max-width: 1024px) {
  #admin-sidebar {
    height: 100dvh !important;
    padding-top: max(1rem, env(safe-area-inset-top)) !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 640px) {
  .admin-table-light th,
  .admin-table-light td {
    padding: 0.65rem 0.55rem !important;
  }
  
  .admin-table-light th {
    font-size: 0.65rem !important;
  }

  .admin-table-light td {
    font-size: 0.72rem !important;
  }

  .admin-tab-pane h2 {
    font-size: 1.15rem !important;
  }
}