/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #f9fafb;
      overflow-x: hidden;
      scroll-behavior: smooth;
}
a {
  text-decoration: none;
  color: inherit;
}

/* Navigation */
.navbar {
  background: #c0f0f7;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-logo {
  color: #221530;
  font-size: 1.8rem;
  font-weight: bold;
}
.nav-menu {
  list-style: none;
  display: flex;
}
.nav-item {
  margin-left: 20px;
}
.nav-link {
  color: #FFFdF5;
  font-size: 1rem;
  transition: color 0.3s;
}
.nav-link:hover, .nav-link.active {
  color: #ffcc00;
}
.nav-icon {
  display: none;
  color: #FFFdF5;
  font-size: 1.5rem;
  cursor: pointer;
}
@media (max-width: 768px) {
  .hero-section img {
        object-position: 50% 20%;
    }
  .nav-menu {
    display: none;
    flex-direction: column;
    background: #c0f0f7;
    width: 100%;
  }
  .nav-menu.active {
    display: flex;
  }
  .nav-item {
    margin: 10px 0;
    text-align: center;
  }
  .nav-icon {
    display: block;
  }
}


/* Hero Section */


/* Container & Section Styles */
.container {
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 20px;
}
section {
  margin-bottom: 60px;
}
section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  text-align: center;
  color: #221530;
}
section p {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: #221530;
}

/* Benefits & Extra Content Grids */
/* 1. Container centering */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* =============================
Grid & Container
============================= */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
}

.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2rem;
}

/* =============================
Card Base + Hover Zoom
============================= */
.benefit-card {
position: relative;               /* for the icon-overlay */
overflow: visible;                /* allow icon to bleed out */
background: #fff;
border-radius: 10px;
padding: clamp(1.5rem, 3vw, 2.5rem) 1rem 1.5rem; 
/* top padding will be bumped by the icon-overlay code below */
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
transform-origin: center bottom;
}
.benefit-card:hover,
.benefit-card:focus-within {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
z-index: 5;
}

/* =============================
Icon Overlay (Responsive)
============================= */
/* 1) Give card extra top padding to clear the icon */
.benefit-card {
padding-top: clamp(4rem, 4vw, 8rem);
}

/* 2) Force every icon into same responsive square */
.benefit-card .icon-overlay {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;

width:  clamp(4rem, 10vw, 8rem);
height: clamp(4rem, 10vw, 8rem);

object-fit: contain;
object-position: center;
}

/* =============================
Title & Text
============================= */
.benefit-card h3 {
margin-top: clamp(2rem, 2vw, 7rem);
margin-bottom: 0.5rem;
font-size: 1.1rem;
color: #221530;
text-align: center;
}
.benefit-card p {
font-size: 0.9rem;
color: #555;
text-align: center;
margin: 0;
flex-grow: 1;  /* pushes any button or footer down */
}

/* =============================
Mobile Fallback (if needed)
============================= */
@media (max-width: 400px) {
.benefit-card {
padding-top: 4rem;  /* floor value */
}
.benefit-card .icon-overlay {
width: 4rem;
height: 4rem;
}
.benefit-card h3 {
margin-top: 2rem;
}
}

    
/* Call-to-Action Section */
.cta-section {
  background: linear-gradient(135deg, #c0f0f7, #FFFdF5);
  color: #FFFdF5;
  padding: 60px 20px;
  text-align: center;
}
.cta-section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}
.cta-section p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cta-btn {
  background: #221530;
  color: #FFFdF5;
  padding: 15px 30px;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: bold;
  transition: background 0.3s;
}
.cta-btn:hover {
    color: #221530;
  background: #c0f0f7;
}

/* Footer */
.footer {
  background: #221530;
  color: #FFFdF5;
  text-align: center;
  padding: 20px;
}
/* overlay headline above the button */
.overlay-text {
  position: absolute;
  top: 70%;                    /* 70% down from top of image */
  left: 2%;                   /* same horizontal inset as button */
  transform: translateY(-50%);
  z-index: 2;
  
  /* force the block to a reasonable width */
  width: clamp(200px, 30vw, 400px);

  /* center‑justify text inside the block */
  text-align: center;

  /* responsive font sizing */
  font-size: clamp(1rem, 2vw, 2rem);
  line-height: 1.2;
  color: #221530;
}
/* Hero becomes a flex container */
.hero-section {
  display: flex;
  flex-wrap: wrap;         /* allow stacking on narrow screens */
  align-items: center;     /* vertical centering if heights differ */
  padding: 50px 20px;      /* adjust to taste */
  margin-top: 80px;        /* preserve space for fixed nav */
  background: none;        /* remove overlay gradient */
  position: relative;
  text-align: left;        /* text always flush left */
  overflow:hidden;
}

/* Text block on the left */
.hero-content {
  /*order: 1;*/
  flex: 1 1 20%;           /* take half the width, shrink as needed */
  padding: 20px;
  z-index: 1;
  color: #221530;          /* switch back from white-on-overlay */
}

/* Responsive headings/buttons */
.hero-content h1 {
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  margin-bottom: 0.5em;
  text-align:center;
}
.hero-content p {
  font-size: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 1em;
  text-align:center;
}
.hero-content .quiz-btn {
  display: inline-block;
  padding: 0.75em 1.5em;
  font-size: 1rem;
  background: #fffdf5;
  color: #221530;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  align-items:center;
}
.hero-tagline {
  text-align: center;
}

/* Image on the right, scales fluidly */
.hero-section img {
  order: 2;
  flex: 1 1 50%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}
.hero-section .quiz-btn {
  position: absolute;
  top: 80%;      /* 80% down from the top of the hero */
  left: 10%;     /* 10% in from the left edge—you can tweak */
  z-index: 2;    /* above the image */
  margin: 0;     /* cancel any normal flow margins */
  transform: translateY(-50%); /* vertically center the button at that point */             /* remove any inherited margins */
    /* Responsive sizing */
  /* Font scales between 0.9rem and 1.5rem, favoring 1.2vw */
  font-size: clamp(0.9rem, 1.2vw, 1.5rem);

  /* Padding scales between 0.5rem/1rem and 1rem/2rem, favoring 1.5vw/3vw */
  padding: clamp(0.5rem, 1.5vw, 1rem) clamp(1rem, 3vw, 2rem);

  /* Optional: set a min/max width so it never gets absurdly small/large */
  width: clamp(8rem, 20vw, 12rem);

  /* Keep your styling */
  background: #fffdf5;
  color: #221530;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  align-items:center;
    }
.quiz-btn {
  position: relative;
  padding: 0.75em 1.5em;
  background: #c0f0f7;
  color: #FFFdF5;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  overflow: hidden;
  align-items:center;
  transform: translateY(-50%);
}

/* the animated border */
.quiz-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #221530;
  transform: scaleX(0);
  transform-origin: left center;
  /* play once on load */
  animation: drawBorder 0.8s ease forwards;
}
/* hover state */
.hero-section .quiz-btn:hover {
  background: #221530;  /* dark fill */
  color: #FFFdF5;       /* light text */
}
    
/* keyframes to “draw” from 0→100% */
@keyframes drawBorder {
  to { transform: scaleX(1); }
}

/* optional: replay on hover */
.quiz-btn:hover::before {
  /* restart the animation */
  animation: drawBorder 0.8s ease forwards;
}

/* make the <ul> a horizontal flex container */
.nav-menu {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

/* each <li> just holds its link */
.nav-item {
  /* nothing special here */
}

/* the pill style */
/* base pill style: un‑filled */
.nav-menu .nav-item .nav-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: transparent;         /* no fill */
  color: #221530;                  /* white text */
  border: 2px solid #221530;       /* yellow border */
  text-decoration: none;
  transition: background-color .2s, color .2s;
}

/* hover just tints a bit */
.nav-menu .nav-item .nav-link:hover {
  background: rgba(255, 204, 0, 0.1);
}

/* active = filled pill */
.nav-menu .nav-item .nav-link.active {
  background: #221530 !important;  /* yellow fill */
  color: #c0f0f7 !important;       /* yellow text */
  border-color: #221530 !important;/* yellow border */
  font-weight: bold;
}
/* 1) Ensure we have a positioning context */
/* hide the open‑btn by default, only show on mobile */
/* hide hamburger by default */
/* hide the button on desktop */
.menu-btn {
display: none;
}

/* MOBILE ≤768px */
@media (max-width: 768px) {

/* show the toggle button, push it to the right */
.menu-btn {
display: block;
margin-left: auto;
background: none;
border: none;
position: relative;
width: 2rem;
height: 2rem;
cursor: pointer;
z-index: 1002;
}

/* stack the two icons on top of each other */
.menu-btn i {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem;
color: #221530;
transition: opacity 0.3s ease, transform 0.3s ease;
}

/* default: show bars, hide times */
.menu-btn .fa-bars { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
.menu-btn .fa-times { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg); }

/* when open: hide bars, show times */
.menu-btn.open .fa-bars  { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.menu-btn.open .fa-times { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }

/* turn UL into a right‑anchored sidebar */
.nav-menu {
position: fixed;
top: 0; right: 0;
width: 0;             /* start hidden */
height: 100%;
background-color: rgb(0,0,0,0.9);
overflow-x: hidden;
transition: width 0.3s ease;
display: flex;
flex-direction: column;
padding-top: 60px;    /* space for × */
z-index: 1001;
}
/* sidebar links */
#mySidenav a {
padding: 16px 32px;
font-size: 1.2rem;
color: #fffdf5;
display: block;
transition: color 0.2s;
}
#mySidenav a:hover {
  background:#221530;
color: #fffdf5;
}

}


/* Footer */
.footer {
  background: #c0f0f7;
  color: #221530;
  padding: 40px 0 20px;
  font-size: 0.9rem;
}
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}
.footer-col {
  flex: 1 1 200px;
}
.footer-col h4 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: #221530;
}
.footer-col p,
.footer-col ul {
  margin-bottom: 0.5rem;
}
.footer-col ul {
  list-style: none;
  padding: 0;
}
.footer-col ul li {
  margin-bottom: 0.5rem;
}
.footer-col a {
  color: #221530;
  text-decoration: none;
  transition: color 0.3s;
}
.footer-col a:hover {
  background: rgba(255, 204, 0, 0.1);
  color:#221530;
}
.footer-col .social li i {
  margin-right: 0.5rem;
}
.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }
  .footer-col {
    margin-bottom: 1.5rem;
  }
}

/* SOS Call Button */
.sos-call-btn {
  position: fixed;
  bottom: 20px;               /* distance from bottom of viewport */
  right: 20px;                /* distance from right edge */
  width: 60px;                /* square size */
  height: 60px;
  background: #e74c3c;        /* alarming red, change as needed */
  color: #fff;                /* icon color */
  border-radius: 50%;         /* make it round */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;      /* remove underline */
  font-size: 1.5rem;          /* icon size */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 9999;              /* always on top */
  transition: background 0.3s, transform 0.2s;
}

/* Hover/focus effect */
.sos-call-btn:hover,
.sos-call-btn:focus {
  background: #c0392b;        /* darker red on hover */
  transform: scale(1.1);
}
    /* SOS Call Button */
.sos-call-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 9999;
  transition: background 0.3s, transform 0.2s;
  text-align: center;
}

/* “SOS” text above the icon */
.sos-call-btn .sos-text {
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
  line-height: 1;
}

/* Phone icon */
.sos-call-btn i {
  font-size: 1.3rem;
  line-height: 1;
}

/* Hover/focus effect */
.sos-call-btn:hover,
.sos-call-btn:focus {
  background: #c0392b;
  transform: scale(1.1);
}
/* Base: hidden everywhere */
    /* Base: hidden everywhere */
    /* Back‑to‑Top Button (now same size as SOS) */
#back-to-top {
  /* same fixed sizing as .sos-call-btn */
  width: 70px;
  height: 70px;

  /* keep it positioned above the SOS */
  bottom: calc(20px + 70px + 10px);
  right: 20px;

  display: none;
  position: fixed;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  z-index: 10000;
  transition: background 0.3s, transform 0.2s, opacity 0.3s;
  opacity: 0;
}

/* show on small screens */
@media (max-width: 768px) {
  #back-to-top {
    display: flex;
  }
}

/* fade in when scrolled */
#back-to-top.visible {
  opacity: 1;
}

/* match SOS icon size */
#back-to-top i {
  font-size: 1.5rem;
  line-height: 1;
}

/* hover/focus */
#back-to-top:hover,
#back-to-top:focus {
  background: rgba(0,0,0,0.8);
  transform: translateY(-2px);
}
/* Tab Content */
.tab-content {
padding: 20px 10px;
}

/* =============================
Table View (Dashboard)
============================= */
.appointments-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
font-size: 0.95rem;
}
.appointments-table thead {
background-color: #2575fc;
color: #fff;
}
.appointments-table th,
.appointments-table td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
.appointments-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
.appointments-table tbody tr:hover {
background-color: #f1f1f1;
}

/* =============================
Calendar View (Appointments)
============================= */
#calendar {
max-width: 900px;
margin: 20px auto;
}

/* =============================
Messages Tab
============================= */
.messages-container {
display: flex;
gap: 20px;
margin-top: 20px;
}
.therapist-list {
flex: 1;
max-width: 250px;
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
}
.therapist-item {
padding: 8px;
border-bottom: 1px solid #eee;
cursor: pointer;
}
.therapist-item:hover,
.therapist-item.active {
background: #e6e6e6;
}
.chat-panel {
flex: 3;
display: flex;
flex-direction: column;
border: 1px solid #ccc;
background: #f9f9f9;
padding: 10px;
border-radius: 4px;
height: 400px;
}
.chat-messages {
flex: 1;
overflow-y: auto;
margin-bottom: 10px;
}
.chat-input-container {
display: flex;
gap: 10px;
}
.chat-input {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.send-chat-btn {
padding: 10px 15px;
background: #ffcc00;
color: #2575fc;
border: none;
border-radius: 4px;
cursor: pointer;
}
.file-upload {
margin-top: 10px;
}

/* =============================
Therapist Listings
============================= */
.container {
width: 90%;
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
}
.page-title {
text-align: center;
font-size: 2rem;
margin-bottom: 20px;
color: #2575fc;
}
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
margin-bottom: 40px;
}
.filter-bar input,
.filter-bar select {
padding: 10px;
font-size: 1rem;
border: 1px solid #ddd;
border-radius: 5px;
min-width: 200px;
}
.filter-bar button {
padding: 10px 15px;
font-size: 1rem;
border: 1px solid #ddd;
border-radius: 5px;
background: #fff;
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
transition: background 0.3s;
}
.filter-bar button:hover {
background: #e6e6e6;
}
.therapist-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.therapist-card {
background: #fff;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: transform 0.3s;
position: relative;
}
.therapist-card:hover {
transform: translateY(-5px);
}
.therapist-card img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 15px;
}
.therapist-card h3 {
font-size: 1.4rem;
margin-bottom: 10px;
color: #333;
}
.therapist-card p {
font-size: 0.9rem;
margin-bottom: 10px;
color: #555;
text-align: left;
}
.therapist-card .btn {
display: inline-block;
background: #6a11cb;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
margin: 5px;
transition: background 0.3s;
}
.therapist-card .btn:hover {
background: #2575fc;
}
.hover-icon {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s, transform 0.3s;
margin-top: 10px;
}
.therapist-card:hover .hover-icon {
opacity: 1;
transform: translateY(0);
}
/* Monthly / Yearly toggle buttons */
#toggleMonthly, #toggleYearly {
  padding: .5rem 1.5rem;
  border-radius: 999px;
  border: 1px solid #2575fc;
  background: #fff;
  color: #2575fc;
  cursor: pointer;
}
#toggleMonthly.active, #toggleYearly.active {
  background: #2575fc;
  color: #fff;
}

/* =============================
Responsive Fallback
============================= */
@media (max-width: 400px) {
.benefit-card, /* if also using benefit cards */
.therapist-card {
padding-top: 4rem;
}
.benefit-card .icon-overlay {
width: 4rem;
height: 4rem;
}
.benefit-card h3 {
margin-top: 2rem;
}
}

/* =============================
Portal Layout
============================= */
.portal-container {
max-width: 900px;
margin: 100px auto 40px; /* leave space for nav */
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Header Bar */
.header-bar {
background: linear-gradient(375deg, #c0f0f7, #fffdf5);
color: #fff;
padding: 20px;
text-align: center;
border-radius: 8px;
margin-bottom: 30px;
}
.header-bar h2 {
margin: 0;
font-size: 2rem;
color:#221530;
}
/* make the calendar area horizontally scrollable on narrow screens */
.calendar-wrapper {
width: 100%;
overflow-x: hidden;
overflow-y:auto;
min-height:500px;
-webkit-overflow-scrolling: touch;
}

/* ensure the inner calendar has a sensible minimum width */
#calendar {
width: 100% !important;   /* override any inline width */
min-width: 320px;         /* ensure touch targets aren’t too tiny */
box-sizing: border-box;
}

/* make the FullCalendar toolbar wrap and align buttons */
.fc .fc-header-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 1rem;
}

/* on mobile, stack the toolbar chunks */
@media (max-width: 768px) {
.fc .fc-header-toolbar {
flex-direction: column;
align-items: stretch;
}
.fc .fc-header-toolbar .fc-toolbar-chunk {
display: flex !important;
justify-content: space-between;
width: 100%;
margin: 0.25rem 0;
}
/* shrink button text */
.fc .fc-button {
padding: 0.25rem 0.5rem;
font-size: 0.85rem;
}
}


#addAppointmentBtn {
position: absolute;
bottom: 12px; /* distance from the bottom of the calendar */
right: 12px;  /* distance from the right edge */
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: #ffcc00;
color: #2575fc;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
z-index: 1000; /* ensure it floats above the calendar */
}

#addAppointmentBtn:hover {
transform: scale(1.1);
}
.fab i {
display: block;
font-size: 28px;
transition: color 0.3s;
}

/* Roll & expand keyframes on the <i> */
@keyframes plusRoll {
0%   { transform: rotate(0deg)   scale(1); }
50%  { transform: rotate(180deg) scale(1.3); }
100% { transform: rotate(360deg) scale(1); }
}

/* When the button has “animate”, target the <i> inside */
.fab.animate i {
animation: plusRoll 0.6s ease;
color: #2575fc;
}
/* Extra CSS for the login page */
.login-container{
max-width: 400px;
margin: 120px auto;
background: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.login-container h2 {
text-align: center;
margin-bottom: 20px;
color: #221530;
}
.login-container form input {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
.login-container form button {
width: 100%;
padding: 12px;
background: #221530;
border: none;
border-radius: 5px;
font-size: 1rem;
font-weight: bold;
color: #fffdf5;
cursor: pointer;
}
.login-container form button:hover {
  background: #fffdf5;
  color: #221530;
  border: 2px solid #221530;
  border-radius:5px;
}
.google-btn {
display: block;
text-align: center;
margin-top: 15px;
}
.message {
text-align: center;
margin-bottom: 10px;
font-weight: bold;
}
.error {
color: red;
}
.success {
color: green;
}
/* Overlay behind the modal */
#cookie-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  z-index: 9998;
}

/* The modal box itself */
#cookie-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 2em;
  max-width: 90%;
  width: 400px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  border-radius: 8px;
  display: none;
  z-index: 9999;
  font-family: sans-serif;
}

#cookie-modal h3 {
  margin-top: 0;
}

.cookie-btn {
  margin-top: 1.5em;
  padding: 0.6em 1.2em;
  font-size: 0.9em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#btn-accept {
  background: #28a745;
  color: #fff;
}

#btn-reject {
  background: #dc3545;
  color: #fff;
  margin-left: 0.5em;
}
/* ───────────────────────────────────────────────────────────────────────── */
/* Subscription Tab & Plan Cards                                             */
/* ───────────────────────────────────────────────────────────────────────── */

.section-block {
  background: #fff;
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.plan-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.25rem;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.plan-card.featured {
  border-color: #2575fc;
  box-shadow: 0 0 8px rgba(37,117,252,0.3);
}

.plan-card h3 {
  margin-top: 0;
  font-size: 1.25rem;
  color: #333;
}

.price {
  font-size: 2rem;
  color: #2575fc;
  margin: .5rem 0 1rem;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  text-align: left;
}
.plan-features li {
  margin: .5rem 0;
  position: relative;
  padding-left: 1.5em;
}
.plan-features li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: #2575fc;
}

.choose-plan-btn {
  margin-top: 1rem;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* Credit History Table                                                      */
/* ───────────────────────────────────────────────────────────────────────── */

.simple-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.simple-table th,
.simple-table td {
  border: 1px solid #ddd;
  padding: .75rem;
  text-align: left;
}
.simple-table th {
  background: #f9f9f9;
  font-weight: 600;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* Modal (Subscribe / Change Plan)                                           */
/* ───────────────────────────────────────────────────────────────────────── */

.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.close-modal {
  position: absolute;
  top: .5rem; right: .5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #888;
}
.close-modal:hover {
  color: #333;
}

.modal-content h2 {
  margin-top: 0;
  font-size: 1.5rem;
  color: #2575fc;
}

.modal-content form label {
  display: block;
  margin: 1rem 0 .5rem;
  font-weight: 500;
}
.modal-content form input[type="text"],
.modal-content form input[type="email"] {
  width: 100%;
  padding: .5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.modal-content form button {
  width: 100%;
  margin-top: 1rem;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* 3-column grid */
/* ───────────────────────────────────────────────────────────────────────── */
/* Subscription Tab & Plan Cards (deduplicated + corrected)                */
/* ───────────────────────────────────────────────────────────────────────── */
/* ───────────────────────────────────────────────────────────────────────── */
/* Fallback 3-column layout using floats (universally supported)           */
/* ───────────────────────────────────────────────────────────────────────── */
/* ───────────────────────────────────────────────────────────────────────── */
/* Subscription Section Styles                                              */
/* ───────────────────────────────────────────────────────────────────────── */

.subscription-section {
  padding: 2rem 1rem;
  background: #fff;
  border-radius: 8px;
  margin: 2rem 0;
}

/* 1. Pill Toggle */
.billing-toggle {
  display: inline-flex;
  border: 1px solid #2575fc;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 auto 2rem;
}
.billing-toggle .toggle-btn {
  padding: .5rem 1.5rem;
  background: #fff;
  border: none;
  color: #2575fc;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.billing-toggle .toggle-btn.active {
  background: #2575fc;
  color: #fff;
}

.plan-card {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem 1rem;
  text-align: center;
  position: relative;
  transition: transform .2s, box-shadow .2s;
  justify-content:center;
}
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.plan-cards gridname {
  display: grid;
  grid-column: 1/3;
  gap: 1.5rem;
}
@media(max-width:768px){
  .plan-cards { grid-template-columns: 1fr; }
}


/* Save badge */
.save-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  background: #ffcc00;
  color: #221530;
  padding: .25rem .5rem;
  border-radius: 4px;
  font-size: .75rem;
}

/* Icon */
.plan-icon {
  width: 48px;
  height: 48px;
  margin-bottom: .75rem;
}

/* Titles & text */
.plan-card h3 {
  margin: .5rem 0;
  font-size: 1.25rem;
}
.plan-subtitle {
  color: #555;
  margin-bottom: .5rem;
}
.plan-desc {
  color: #888;
  margin-bottom: 1rem;
}
/* Prices */
.plan-price {
  font-size: 1.75rem;
  color: #221530;
  margin-bottom: 1rem;
}
.price-yearly { display: none; }

/* CTA */
.cta-btn {
  width: 100%;
  padding: .75rem;
  background: #fffdf5;
  color: #221530;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background .3s;
}
.cta-btn:hover {
  background: #221530;
  color:#fffdf5;
}
.learn-more {
  display: block;
  margin-top: .5rem;
  color: #2575fc;
  font-weight: bold;
}

/* 3. Comparison table */
.table-wrapper {
  overflow-x: auto;
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}
.comparison-table th,
.comparison-table td {
  padding: .75rem 1rem;
  border: 1px solid #eee;
  text-align: center;
}
.comparison-table th {
  background: #fafafa;
  font-weight: 600;
}
.savings-row td {
  background: #fffbeb;
  font-weight: bold;
}
.plan-card.recommended {
  border: 2px solid #ffcc00;
  box-shadow: 0 4px 12px rgba(255,204,0,0.4);
}
.plan-card.recommended .badge {
  position: absolute;
  top: 1rem; right: 1rem;
  background: #ffcc00;
  color: #221530;
  padding: .25rem .5rem;
  border-radius: 4px;
  font-size: .75rem;
  font-weight: bold;
}
/* ————— Subscription grid ————— */
.subscription-section { margin-top:2rem; }

/* toggle */
.billing-toggle {
  display:inline-flex;
  border:1px solid #2575fc;
  border-radius:999px; overflow:hidden;
  margin-bottom:1.5rem;
}
.toggle-btn {
  padding:.5rem 1.5rem;
  background:#fff; border:none;
  color:#2575fc; cursor:pointer;
  transition:background .3s,color .3s;
}
.toggle-btn.active {
  background:#2575fc; color:#fff;
}

/* grid: feature-column + 3 plan-columns */
.subscription-grid {
  display:grid;
  grid-template-columns: 1fr repeat(3,1fr);
  gap:1rem;
}

/* feature list */
.feature-list { display:grid; }
.feature-name {
  padding:.75rem 1rem;
  font-weight:600;
  background:#fafafa;
  border-bottom:1px solid #eee;
}

/* plan-columns */
.plan-column {
  display:grid;
  grid-template-rows:
    auto    /* card */
    repeat(4, auto) /* feature cells */;
  row-gap:.5rem;
}

/* cards */
.plan-card {
  padding:1rem;
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:8px;
  text-align:center;
  position:relative;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.plan-card.recommended {
  border:2px solid #2575fc;
  box-shadow:0 4px 12px rgba(37,117,252,0.3);
  transform:scale(1.05);
  z-index:1;
}

/* badge */
.save-badge {
  position:absolute;
  top:.5rem; right:.5rem;
  background:#ffcc00;
  color:#221530;
  padding:.25rem .5rem;
  border-radius:4px;
  font-size:.75rem;
}

/* icons & text */
.plan-icon { width:48px; height:48px; margin-bottom:.75rem; }
.plan-desc { color:#555; margin-bottom:1rem; }
.plan-price { font-size:1.5rem; color:#2575fc; }

/* feature cells */
.feature-cell {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.5rem;
  border-top:1px solid #eee;
  font-size:1.2rem;
}
.feature-cell .fa-times { color:red; }
.feature-cell .fa-check { color:green; }

/* responsive */
@media (max-width:768px) {
  .subscription-grid { grid-template-columns:1fr; }
  .plan-column { margin-top:1.5rem; }
}


.subscription-container {
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  margin: 2rem auto;
  max-width: 1200px;
}

/* 1) Pills */
.billing-toggle {
  text-align: center;
  margin-bottom: 2rem;
}
.billing-toggle .toggle-btn {
  margin: 0 .25rem;
  padding: .5rem 1.25rem;
  border: 1px solid #2575fc;
  background: #fff;
  color: #2575fc;
  border-radius: 999px;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.billing-toggle .toggle-btn.active {
  background: #2575fc;
  color: #fff;
}

/* 2) Grid of cards */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 1.5rem;
}
.plan-card {
  position: relative;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .2s, box-shadow .2s;
  min-height: 480px; /* ensures all cards are same height */
}
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
/* Highlight recommended */
.plan-card.recommended {
  border: 2px solid #ffcc00;
  transform: scale(1.03);
  z-index: 1;
}
.recommended-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  background: #ffcc00;
  color: #221530;
  padding: .25rem .5rem;
  border-radius: 4px;
  font-size: .75rem;
}

/* price display */
.price-display {
  font-size: 1.75rem;
  color: #221530;
  margin: .5rem 0 1rem;
}
.price-quarterly, .price-yearly {
  display: none;
}

/* feature list */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  flex-grow: 1; /* push savings & button to bottom */
}
.feature-list li {
  margin: .5rem 0;
  font-size: . 9rem;
}
.feature-list .fa-check { color: green; margin-right:.5rem; }
.feature-list .fa-times { color: red; margin-right:.5rem; }

/* savings line */
.savings {
  font-weight: bold;
  margin-bottom: 1rem;
  text-align: center;
}

/* CTA button */
.cta-btn {
  padding: .75rem;
  background: #2575fc;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background .3s;
}
.cta-btn:hover {
  background: #1e5bb8;
}

/* Responsive fallback */
@media (max-width: 600px) {
  .plan-card { min-height: auto; }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* Subscription Plans Section                                              */
/* ───────────────────────────────────────────────────────────────────────── */

/* Wraps the entire section in a white card like your portal */
.subscription-hero {
  background: linear-gradient(135deg,#2575fc,#6a11cb);
  color: #fff;
  text-align: center;
  padding: 3rem 1rem;
}
.subscription-hero h1 {
  font-size: 2.5rem;
  margin-bottom: .5rem;
}
.subscription-hero p.tagline {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* The white inner “container” */
.subscription-section {
  background: #fff;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ─── Pill Toggle ─── */
/* ──────────────────────────────────────── */
/* Center & tighten up the billing toggle  */
/* ──────────────────────────────────────── */
.billing-toggle {
  /* make it a block-level flex container */
  display: flex !important;

  /* shrink-wrap to its children */
  width: fit-content;

  /* center in its parent */
  margin: 0 auto 1.5rem !important;

  /* pill border */
  border: 1px solid #221530;
  border-radius: 999px;
  overflow: hidden;

  /* vertically center the buttons inside */
  align-items: center;
}

/* remove any stray margins on the buttons */
.billing-toggle .toggle-btn {
  background: #fffdf5;
  color: #221530;
  border: 1px solid #221530;
  transition: background .3s, color .3s;
  margin:0;
}
/* active pill */
.billing-toggle .toggle-btn.active {
  background: #221530;
  border: 1px solid #221530;
  color: #fffdf5;
}



/* ─── Grid of Plan Cards ─── */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 1.5rem;
}
.plan-card {
  position: relative;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem 1rem;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* Highlight the recommended plan */
.plan-card.recommended,
.plan-card.featured {
  border-color: #ffcc00;
  box-shadow: 0 0 8px rgba(255,204,0,0.4);
}
.plan-card.recommended .save-badge,
.plan-card.featured .save-badge {
  background: #ffcc00;
  color: #221530;
}

/* “Recommended” badge */
.plan-card .save-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  padding: .25rem .5rem;
  border-radius: 4px;
  font-size: .75rem;
  font-weight: bold;
}

/* Plan Title */
.plan-card h3 {
  margin: 0.5rem 0;
  font-size: 1.25rem;
  color: #221530;
}

/* Prices */
.plan-price {
  font-size: 1.75rem;
  color: #221530;
  margin: .5rem 0 1rem;
}
.plan-price .price-quarterly,
.plan-price .price-yearly {
    font-size: 1.75rem;
  color: #221530;
  margin: .5rem 0 1rem;
}

/* Feature List */
.plan-features {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  flex-grow: 1;
  text-align: left;
}
.plan-features li {
  margin: .5rem 0;
  position: relative;
  padding-left: 1.5em;
  font-size: .95rem;
}


/* Savings line */
.savings {
  font-size: .9rem;
  margin-bottom: 1rem;
  color: #555;
}

/* CTA Button */
.plan-card .cta-btn {
  background: #2575fc;
  color: #fff;
  border: none;
  padding: .75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background .3s;
}
.plan-card .cta-btn:hover {
  background: #1e5bb8;
}


/* ────────────────────────────────────────────────────────── */
/* 1) Give the “Recommended” badge some breathing room        */
/* ────────────────────────────────────────────────────────── */
.subscription-section .plan-card .save-badge {
  /* move it further down from the top edge */
  top: 1.5rem;
}

/* also push your <h3> down so it never collides */
.subscription-section .plan-card h3 {
  margin-top: 2rem !important;
}

/* ────────────────────────────────────────────────────────── */
/* 2) Make the “Buy this offer” button a pill shape         */
/* ────────────────────────────────────────────────────────── */
.subscription-section .plan-card .buy-btn,
.subscription-section .plan-card .cta-btn {
  border-radius: 999px !important;
  /* you can tweak padding if you like: */
  padding: 0.75rem 1.5rem !important;
    background: #fffdf5 !important;
  color:      #221530 !important;
  border:     1px solid #221530; /* optional: give it a matching outline */
}
.subscription-section .plan-card .buy-btn:hover,
.subscription-section .plan-card .cta-btn:hover {
  background: #221530 !important;
  color:      #fffdf5 !important;
  /* if you added a border on the normal state, you can change it here too: */
  border-color: #fffdf5 !important;
}
.subscription-section .plan-card .buy-btn,
.subscription-section .plan-card .cta-btn {
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
@media (max-width: 768px) {
  /* stack plan-cards to single column */
  .plan-cards {
    display:         grid;
    grid-template-columns: 1fr !important;
    gap:             1.5rem;
  }
  /* full-width buttons for easy tapping */
  .subscription-section .plan-card .buy-btn,
  .subscription-section .plan-card .cta-btn {
    width:     100% !important;
    display:   block;
    margin:    0.5rem auto !important;
  }
}

/*sdvd*/