/* Shared card styling (Home, Pricing, FAQs, Delivery Area, Order Now, etc.) and the Pricing/Payment page's
   payment-method accordion. Ported from legacy's application.css; Bootstrap 3's .panel/.panel-heading/
   .panel-title/.panel-body become Bootstrap 5's .card/.card-header/.card-title/.card-body -- Bootstrap 5
   dropped .panel entirely. */

.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(11, 30, 61, 0.08);
  margin-bottom: 20px;
  overflow: hidden;
}
.card-header {
  border: none;
  padding: 14px 20px;
}
.card-header.snPanelBackground {
  background-color: var(--sn-blue-light) !important;
  border-bottom: 3px solid var(--sn-pink);
}
.card-title {
  color: var(--sn-navy);
  font-size: 17px;
}
.card-body {
  padding: 20px;
  line-height: 1.6;
}

.snPanelBackground {
  background-color: var(--sn-pink-light) !important;
  color: var(--sn-navy);
}

/* ---- Fancier cards (Home page content cards) ---- */
.snFancyCard {
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(11, 30, 61, 0.06), 0 12px 28px rgba(11, 30, 61, 0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.snFancyCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(11, 30, 61, 0.08), 0 20px 36px rgba(11, 30, 61, 0.16);
}
.snFancyCard .card-header {
  background: linear-gradient(135deg, var(--sn-blue-light) 0%, #ffffff 100%) !important;
  border-bottom: 3px solid;
  border-image: linear-gradient(to right, var(--sn-pink), var(--sn-blue-dark)) 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.snFancyCardIcon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sn-pink) 0%, var(--sn-blue-dark) 100%);
  color: #ffffff;
  font-size: 16px;
  box-shadow: 0 3px 8px rgba(11, 30, 61, 0.25);
}
.snFancyCard .card-title {
  margin: 0;
}

/* ---- Payment method accordion (Pricing / Payment page) ---- */
.snAccordionCard .card-header {
  padding: 0;
}
.snAccordionCard .card-title {
  font-size: 17px;
}
.snAccordionToggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  color: var(--sn-navy) !important;
  font-weight: 600;
}
.snAccordionToggle:hover,
.snAccordionToggle:focus {
  background-color: var(--sn-blue-light);
}
/* .snLink a:link/:visited (layout.css) force an underline with !important. Unlike legacy's single
   application.css (where source order alone made this win), Propshaft's :app bundle emits one <link> per
   file in alphabetical filename order, so layout.css's rule loads *after* this one -- matching specificity
   plus "later wins" would make the underline win. Adding .snAccordionCard as a second ancestor class here
   raises specificity instead of relying on load order. */
.snAccordionCard a.snAccordionToggle,
.snAccordionCard a.snAccordionToggle:link,
.snAccordionCard a.snAccordionToggle:visited,
.snAccordionCard a.snAccordionToggle:hover,
.snAccordionCard a.snAccordionToggle:focus,
.snAccordionCard a.snAccordionToggle:active {
  text-decoration: none !important;
}
.snAccordionIcon {
  width: 36px;
  height: 36px;
  font-size: 15px;
}
.snChevron {
  margin-left: auto;
  color: var(--sn-gray);
  transition: transform 0.2s ease;
}
.snAccordionToggle:not(.collapsed) .snChevron {
  transform: rotate(180deg);
}