/* Global Styles & Variables */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

:root {
  /* Colors - Premium Warm Palette */
  --bg-body: #F9F5F0;
  /* Light Warm Beige */
  --bg-white: #FFFFFF;
  /* Pure White for Cards */
  --bg-secondary: #ebddc5;
  /* Muted Gold */
  --bg-dark: #8A3B08;
  /* Deep Brown for Footer */

  --primary: #2E4365;
  /* Deep Blue - Text & Headers */
  --primary-light: #4A6fa5;
  --accent: #E59D2C;
  /* Warm Gold - Buttons */
  --accent-hover: #C58317;

  --text-primary: #2E4365;
  --text-secondary: #5F6C7B;
  --text-light: #8D99AE;
  --text-white: #FFFFFF;

  /* Typography */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  --h1-size: 3.5rem;
  --h2-size: 2.5rem;
  --h3-size: 1.75rem;
  --body-size: 1.125rem;

  /* Spacing */
  --spacing-xs: 0.5rem;
  /* 8px */
  --spacing-sm: 1.5rem;
  /* 24px */
  --spacing-md: 3rem;
  /* 48px */
  --spacing-lg: 6rem;
  /* 96px */
  --spacing-xl: 9rem;
  /* 144px */

  /* Layout */
  --container-width: 1200px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;

  /* Shadows - Soft & Premium */
  --shadow-sm: 0 4px 6px -1px rgba(46, 67, 101, 0.05);
  --shadow-md: 0 10px 15px -3px rgba(46, 67, 101, 0.08), 0 4px 6px -2px rgba(46, 67, 101, 0.04);
  --shadow-lg: 0 20px 25px -5px rgba(46, 67, 101, 0.1), 0 10px 10px -5px rgba(46, 67, 101, 0.04);

  /* Transitions */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
  font-family: var(--font-body);
  background-color: var(--bg-body);
  color: var(--text-primary);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

h1 {
  font-size: var(--h1-size);
}

h2 {
  font-size: var(--h2-size);
}

h3 {
  font-size: var(--h3-size);
}

p {
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
  font-size: var(--body-size);
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition);
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  font-family: inherit;
}

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

/* Utilities */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.section {
  padding: var(--spacing-lg) 0;
}

.bg-light {
  background-color: var(--bg-body);
}

.bg-white {
  background-color: var(--bg-white);
}

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

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

.text-muted {
  color: var(--text-secondary);
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

/* Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border-radius: 50px;
  /* Pill shape */
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  transition: all var(--transition);
  text-transform: uppercase;
  font-size: 0.9rem;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(46, 67, 101, 0.2);
}

.btn-primary:hover {
  background-color: var(--primary-light);
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(46, 67, 101, 0.3);
}

.btn-secondary {
  background-color: var(--accent);
  color: white;
  box-shadow: 0 4px 12px rgba(229, 157, 44, 0.3);
}

.btn-secondary:hover {
  background-color: var(--accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(229, 157, 44, 0.4);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: white;
}

.btn-outline:hover {
  background-color: white;
  color: var(--primary);
  border-color: white;
}

/* Navbar */
.navbar {
  background-color: rgba(46, 67, 101, 0.95);
  backdrop-filter: blur(10px);
  color: var(--text-white);
  padding: 1.5rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  /* Added 3D shadow effect */
}

/* About Page Specifics */
.about-header {
  background-color: var(--primary);
  color: white;
  padding: 6rem 0;
  text-align: center;
}

.about-header h1 {
  color: white;
  margin-bottom: 1.5rem;
}

.about-header p {
  color: var(--accent);
  /* Golden color */
  font-size: 1.25rem;
  font-weight: 500;
  max-width: 700px;
  margin: 0 auto;
}

.value-card {
  background-color: var(--bg-secondary);
}

.about-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.about-image-grid img {
  border-radius: var(--border-radius-md);
  height: 220px;
  width: 100%;
  object-fit: cover;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease;
}

.about-image-grid img:hover {
  transform: scale(1.05);
  z-index: 10;
}

/* Specific Grid Layout Adjustments (Staggered look if desired, or simple grid) */
.about-image-grid img:nth-child(2) {
  margin-top: 2rem;
}

.about-image-grid img:nth-child(3) {
  margin-top: -2rem;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.navbar-logo {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  border-radius: 50%;
  object-fit: cover !important;
  flex-shrink: 0;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px rgba(229, 157, 44, 0.25);
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.logo-name {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: white;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.logo-tagline {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0.05em;
  white-space: nowrap;
  opacity: 0.9;
}

.nav-links {
  display: flex;
  gap: 2.2rem;
  margin-left: auto;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  font-size: 0.95rem;
  padding-bottom: 4px;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--accent);
  transition: width 0.3s ease;
}

.nav-links a.active,
.nav-links a.active::after,
.nav-links a:hover::after {
  color: white;
  width: 100%;
}

.nav-links a.active {
  border-bottom: none;
  /* override old style */
}

/* DIRECTOR Section */
.director-header {
  background-color: var(--primary);
  color: white;
  padding: 6rem 0;
  text-align: center;
}

.director-header h1 {
  color: white;
  margin-bottom: 1.5rem;
}

.director-header p {
  color: var(--accent);
  /* Golden color */
  font-size: 1.25rem;
  font-weight: 500;
  max-width: 700px;
  margin: 0 auto;
}

/* Hero Section */
.hero-section {
  background-size: cover;
  background-position: center;
  position: relative;
  color: white;
  padding: 12rem 0;
  /* Increase spacing */
  text-align: left;
  /* Left align */
}

.hero-section::before {
  /* Improve contrast */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(30, 58, 138, 0.9) 0%, rgba(46, 67, 101, 0.6) 100%);
  /* Adjusted gradient for text readability */
  z-index: 1;
}

.hero-section h1 {
  color: white;
  font-size: 3rem;
  /* Larger heading */
  margin-bottom: 1.5rem;
  max-width: 800px;
}

.hero-section p {
  color: var(--accent);
  /* Gold subtext */
  font-size: 1.5rem;
  max-width: 600px;
  margin-bottom: 2.5rem;
}

/* Admission Timeline */
.timeline-section {
  background-color: var(--bg-secondary);
  /* Beige background matches reference */
  padding: 6rem 0;
}

.timeline-steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin-top: 4rem;
  flex-wrap: wrap;
  gap: 2rem;
}

.timeline-steps::before {
  content: '';
  position: absolute;
  top: 25px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--primary);
  z-index: 0;
  display: none;
  /* Hidden on mobile, shown on desktop via media query */
}

@media (min-width: 768px) {
  .timeline-steps::before {
    display: block;
  }

  .timeline-step {
    flex: 1;
  }
}

.timeline-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 1rem;
}

.step-number {
  width: 50px;
  height: 50px;
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.25rem;
  margin: 0 auto 1.5rem;
  border: 4px solid var(--bg-secondary);
  /* Creates gap from line */
}

.timeline-step h4 {
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.timeline-step p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.hero-section .container {
  position: relative;
  z-index: 2;
}

/* Card */
.card {
  padding: 3rem 2.5rem;
  background-color: var(--bg-white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  border: 1px solid rgba(0, 0, 0, 0.03);
  text-align: center;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(229, 157, 44, 0.2);
}

.card h3 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

/* Footer */
footer {
  background-color: var(--bg-dark);
  color: rgba(255, 255, 255, 0.8);
  padding: 6rem 0 2rem;
  margin-top: auto;
}

footer h3,
footer h4 {
  color: white;
  letter-spacing: 0.05em;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 4rem;
}

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

/* Gallery Grid */
.gallery-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 4rem;
}

.filter-btn {
  padding: 0.6rem 2rem;
  border-radius: 50px;
  border: 1px solid #D1D5DB;
  background-color: transparent;
  color: var(--text-primary);
  font-weight: 500;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-btn.active {
  background-color: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: var(--shadow-md);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

.gallery-item {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  height: 280px;
  position: relative;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Mobile Nav */
.mobile-menu-btn {
  display: none;
  background: none;
  color: white;
  border: none;
}

@media (max-width: 768px) {
  :root {
    --h1-size: 2.5rem;
    --h2-size: 2rem;
    --container-width: 100%;
    --spacing-lg: 4rem;
  }

  /* ── Core container padding on mobile ── */
  .container {
    padding: 0 1.25rem;
  }

  .navbar {
    padding: 1rem 0;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--primary);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-lg);
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    font-size: 1.1rem;
    padding: 0.75rem 0;
    color: rgba(255, 255, 255, 0.8);
  }

  .mobile-menu-btn {
    display: block;
  }

  .hero-section {
    padding: 6rem 0;
  }

  /* ── Cards ── */
  .card {
    padding: 2rem 1.5rem;
  }

  .contact-card {
    padding: 2rem 1.5rem;
  }

  .contact-form-container {
    padding-right: 0;
  }

  /* ── Gallery ── */
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .gallery-item {
    height: 220px;
  }

  .gallery-filters {
    gap: 0.5rem;
    margin-bottom: 2rem;
  }

  .filter-btn {
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
  }

  /* ── Contact ── */
  .contact-cards-grid {
    gap: 1rem;
    margin-bottom: 3rem;
  }

  /* ── Footer ── */
  .footer-grid {
    gap: 2rem;
  }

  /* ── Page headers ── */
  .director-header,
  .about-header {
    padding: 4rem 0;
  }

  .director-header h1,
  .about-header h1 {
    font-size: 2rem;
  }

  /* ── Timeline ── */
  .timeline-steps {
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .timeline-step {
    padding: 0 0.5rem;
  }

  /* ── About image grid ── */
  .about-image-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .about-image-grid img {
    height: 160px;
    margin-top: 0 !important;
  }

  /* ── Home gallery masonry ── */
  .gallery-grid-home {
    column-count: 1;
    column-gap: 1rem;
  }

  .gallery-card-home {
    margin-bottom: 1rem;
  }
}

/* Contact Page Redesign */
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 5rem;
}

.contact-card {
  background-color: var(--bg-secondary);
  /* Using the user updated beige */
  padding: 3rem 2rem;
  border-radius: var(--border-radius-lg);
  text-align: center;
  transition: transform var(--transition);
}

.contact-card:hover {
  transform: translateY(-5px);
}

.icon-circle {
  width: 60px;
  height: 60px;
  background-color: var(--accent);
  /* Gold/Orange */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: white;
}

.contact-card h4 {
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.contact-card p,
.contact-card a {
  color: var(--primary);
  font-size: 0.95rem;
  opacity: 0.8;
}

/* Specific styling for the blue icon circle alternative if needed, 
   but reference shows gold/orange circles or blue circles depending on the specific card in some designs. 
   The user reference has Gold circles for all or mixed. Let's use Gold as base from reference 1, or Blue from reference 2? 
   Reference 1 (top) has Gold circles. Reference 2 (bottom map) has Blue map icon. 
   Let's stick to Gold for the cards to match the beige theme nicely.
*/
.contact-card .icon-circle.blue {
  background-color: var(--primary);
}

/* Form Section Split */
.contact-split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 900px) {
  .contact-split-section {
    grid-template-columns: 1fr;
  }
}

.contact-form-container {
  padding-right: 2rem;
}

.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.95rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  background-color: rgba(46, 67, 101, 0.05);
  /* Light fill */
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
  padding: 1rem;
  width: 100%;
  margin-bottom: 1.5rem;
  transition: all 0.3s;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background-color: white;
}

.map-container-styled {
  background-color: #D1D5DB;
  /* Placeholder gray color from reference */
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  height: 450px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 2rem;
}

.map-placeholder-content i {
  color: var(--primary);
  margin-bottom: 1rem;
}

.map-placeholder-content h4 {
  color: var(--primary);
  margin-bottom: 0.5rem;
}

/* Submit Button Override */
.contact-form .btn-submit {
  width: 100%;
  justify-content: center;
  background-color: var(--accent);
  color: white;
  padding: 1.25rem;
  font-size: 1.1rem;
}

.contact-form .btn-submit:hover {
  background-color: var(--accent-hover);
}

/* Home Page Gallery Masonry */
.gallery-grid-home {
  column-count: 3;
  column-gap: 1.5rem;
}

.gallery-card-home {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition);
}

.gallery-card-home:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.gallery-card-home img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius-md);
}

@media (max-width: 900px) {
  .gallery-grid-home {
    column-count: 2;
  }
}

@media (max-width: 600px) {
  .gallery-grid-home {
    column-count: 1;
  }
}

/* -------------------------------------
   Admission Popup Styles
--------------------------------------- */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(46, 67, 101, 0.85);
  /* Deep Blue backdrop */
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

.popup-overlay.show {
  opacity: 1;
  visibility: visible;
}

.popup-content {
  background: var(--bg-white);
  width: 90%;
  max-width: 500px;
  border-radius: var(--border-radius-lg);
  padding: 3.5rem 2.5rem;
  text-align: center;
  position: relative;
  /* Enhanced 3D effect */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: perspective(1000px) rotateX(15deg) scale(0.9) translateY(30px);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-top: 5px solid var(--accent);
  transform-style: preserve-3d;
  cursor: pointer;
}

.popup-overlay.show .popup-content {
  transform: perspective(1000px) rotateX(0deg) scale(1) translateY(0);
}

/* Beautiful clickable cross icon */
.popup-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(46, 67, 101, 0.05);
  /* very light bg */
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 0.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 10;
}

.popup-close:hover {
  background: #EF4444;
  /* red on hover */
  color: white;
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

.popup-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(229, 157, 44, 0.2), rgba(229, 157, 44, 0.05));
  color: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), 0 4px 10px rgba(229, 157, 44, 0.15);
}

.popup-title {
  color: var(--primary);
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.popup-text {
  color: var(--text-secondary);
  font-size: 1.15rem;
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.popup-btn {
  width: 100%;
  justify-content: center;
  padding: 1.2rem;
  font-size: 1.1rem;
  box-shadow: 0 8px 20px rgba(229, 157, 44, 0.3);
}

.popup-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(229, 157, 44, 0.4);
}

/* -------------------------------------
   Toast Notification Styles
--------------------------------------- */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  background: var(--bg-white);
  border-left: 4px solid #10B981;
  box-shadow: var(--shadow-lg);
  border-radius: var(--border-radius-sm);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 300px;
  transform: translateX(120%);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: auto;
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast-icon {
  color: #10B981;
  display: flex;
  align-items: center;
}

.toast-content h4 {
  font-family: var(--font-body);
  color: var(--primary);
  font-size: 1rem;
  margin: 0 0 0.2rem 0;
}

.toast-content p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}