/* ============================================================
   PALM BAY COMMISSARY — Services Page Styles
   ============================================================ */

/* ── Services Hero ──────────────────────────────────────── */
.services-hero-bg {
  background: linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 60%, var(--sky) 100%);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.services-hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 6rem;
  padding-bottom: 5rem;
}

.services-hero-section .overlay {
  background: linear-gradient(160deg, rgba(20,70,128,0.75) 0%, rgba(11,30,60,0.62) 100%);
}

.services-hero-section .hero-content h1 {
  font-size: 2.75rem;
  font-weight: 800;
  color: white;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  margin-bottom: 1rem;
}
.services-hero-section .hero-content p {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.9);
}

/* ── Service Block (text + image layout) ───────────────── */
.service-block {
  display: grid;
  gap: 3rem;
  align-items: center;
  padding: 5rem 0;
  border-bottom: 1px solid var(--border);
}
.service-block:last-child { border-bottom: none; }

.service-block .text-side h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 1rem;
}
.service-block .text-side p {
  font-size: 0.97rem;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.service-block .service-tag {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 2rem;
  margin-bottom: 1rem;
}

.service-block .img-side {
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 10px 36px var(--shadow-lg);
}
.service-block .img-side img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.service-block .img-side:hover img { transform: scale(1.04); }

/* ── Service Feature List ───────────────────────────────── */
.service-features { list-style: none; margin: 1.25rem 0; }
.service-features li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--text-mid);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.service-features li:last-child { border-bottom: none; }
.service-features li i { color: var(--accent); margin-top: 0.15rem; flex-shrink: 0; }

/* ── Pricing Cards ──────────────────────────────────────── */
.pricing-card {
  background: var(--bg-white);
  border-radius: 1.5rem;
  padding: 2.5rem 2rem;
  box-shadow: 0 4px 24px var(--shadow-sm);
  border: 2px solid var(--border);
  transition: all 0.3s ease;
  text-align: center;
  position: relative;
}
.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 48px var(--shadow-md);
  border-color: var(--primary);
}
.pricing-card.featured {
  border-color: var(--accent);
  background: linear-gradient(160deg, var(--bg-white) 0%, var(--sky-light) 100%);
}
.pricing-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -1rem; left: 50%; transform: translateX(-50%);
  background: var(--accent);
  color: var(--text-dark);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 1.2rem;
  border-radius: 2rem;
  white-space: nowrap;
}
.pricing-card .price { font-size: 2.5rem; font-weight: 800; color: var(--primary); }
.pricing-card .price span { font-size: 1rem; font-weight: 500; color: var(--text-light); }
.pricing-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--text-dark); margin-bottom: 1rem; }
.pricing-card ul { list-style: none; text-align: left; margin: 1.5rem 0; }
.pricing-card ul li {
  display: flex; gap: 0.6rem;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text-mid);
  padding: 0.4rem 0;
}
.pricing-card ul li i { color: var(--accent); font-size: 0.85rem; }
.pricing-card .btn-plan {
  display: block;
  margin-top: 1.5rem;
  padding: 0.85rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  font-weight: 700;
  border-radius: 2rem;
  transition: all 0.25s ease;
}
.pricing-card .btn-plan:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--shadow-md);
}
.pricing-card.featured .btn-plan {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--text-dark);
}

/* ── Tab Navigation ─────────────────────────────────────── */
.service-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem;
  background: var(--bg-light);
  border-radius: 1rem;
  margin-bottom: 2.5rem;
  border: 1px solid var(--border);
}
.service-tab {
  padding: 0.6rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
  transition: all 0.25s ease;
  border: none;
  background: transparent;
}
.service-tab:hover { color: var(--primary); background: var(--primary-light); }
.service-tab.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 3px 10px var(--shadow-md);
}

/* ── Icon Grid ──────────────────────────────────────────── */
.service-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.25rem;
}
.service-icon-item {
  background: var(--bg-white);
  border-radius: 1rem;
  padding: 1.5rem 1rem;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px var(--shadow-sm);
  transition: all 0.25s ease;
}
.service-icon-item:hover {
  transform: translateY(-5px);
  border-color: var(--sky);
  box-shadow: 0 8px 24px var(--shadow-md);
}
.service-icon-item i { font-size: 2rem; color: var(--primary); margin-bottom: 0.75rem; display: block; transition: color 0.2s ease; }
.service-icon-item:hover i { color: var(--accent); }
.service-icon-item span { font-size: 0.82rem; font-weight: 600; color: var(--text-mid); }

/* ── CTA ────────────────────────────────────────────────── */
.services-cta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 5rem 1.5rem;
  text-align: center;
  color: white;
}
.services-cta h2 { font-size: 2.25rem; font-weight: 800; margin-bottom: 1rem; }
.services-cta p { font-size: 1.1rem; color: rgba(255,255,255,0.85); margin-bottom: 2.5rem; }
.services-cta .btn-cta {
  display: inline-block;
  background: var(--accent);
  color: var(--text-dark);
  font-weight: 700;
  padding: 1rem 2.5rem;
  border-radius: 2rem;
  font-size: 1rem;
  box-shadow: 0 4px 16px rgba(245,167,34,0.4);
  transition: all 0.25s ease;
}
.services-cta .btn-cta:hover {
  background: var(--accent-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(245,167,34,0.5);
}

/* Icons inside service content */
.services-icon i    { color: var(--accent) !important; }
.service-options i  { color: white; }
.service-options p  { color: var(--text-dark); }

/* ── Individual Service Page Hero Band ──────────────────── */
.svc-hero {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 65%, var(--sky) 100%);
  padding: 7rem 1.5rem 3.5rem;
  text-align: center;
  color: white;
}
.svc-hero h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.svc-hero p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.88);
  max-width: 600px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .svc-hero { padding: 6rem 1rem 2.5rem; }
  .svc-hero h2 { font-size: 1.75rem; }
}

/* ── Service page white card (below hero) ───────────────── */
.svc-card {
  margin-top: 0 !important;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 2.5rem;
  background: white;
  box-shadow: 0 4px 32px var(--shadow-sm);
}
@media (max-width: 768px) {
  .svc-card { padding: 2rem 1.25rem; }
}

/* ── Pricing card header text (white on blue bg) ────────── */
.title-plan { color: white !important; font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; }

/* ── Pricing Plan "Get Started" Button ─────────────────── */
.start-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.5rem;
  border-radius: 2rem;
  box-shadow: 0 4px 14px rgba(27, 94, 168, 0.3);
  transition: all 0.25s ease;
}
.start-btn:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--text-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 167, 34, 0.45);
}

/* ── More Details / CTA Button ──────────────────────────── */
.more-details {
  display: inline-block;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white !important;
  font-weight: 700;
  padding: 0.7rem 1.75rem;
  border-radius: 2rem;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  box-shadow: 0 3px 12px var(--shadow-md);
  transition: all 0.25s ease;
}
.more-details:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--text-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245,167,34,0.45);
}

/* ── Service list icon containers ───────────────────────── */
.service-list .w-16 {
  background-color: var(--primary-light) !important;
}
.service-list .w-16 i { color: var(--primary) !important; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .services-hero-section .hero-content h1 { font-size: 2rem; }
  .service-block { padding: 3rem 0; }
  .service-block .text-side h2 { font-size: 1.5rem; }
  .service-icon-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}