/*
 * "Preserve Your Memories, Your Way" cards outside the home page (2026-10-08).
 *
 * Markup: resources/views/frontend/static/home/_preserve_cards.blade.php, shared
 * with the home page. Card rules only: the surrounding section, title and
 * subtitle stay with each page. The home page styles it from its own inlined bundle
 * (public/frontend_assets/home/home.css); this file carries the same rules, taken
 * from that bundle, for pages on the main layout such as /order. Everything is
 * scoped to #preserve so it cannot touch other buttons or cards on the page.
 *
 * Sizes are px, not rem: the home page sets html { font-size: 20px }, the main
 * layout keeps 16px, so the home bundle's rem values are converted at 20px.
 * If the home section's look changes, change it here too.
 */

#preserve {
  --page-blue-dark: var(--sc-navy);
  --page-blue-light: var(--sc-light-blue);
}

/* ---- card -------------------------------------------------------------- */
/* The "Most Popular" tab sits behind its card (z-index -1). Making each column
   a stacking context keeps it above the page background, e.g. /order's navy band. */
#preserve .row > [class*="col-"] {
  position: relative;
  z-index: 0;
}

#preserve .pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: 0;
  overflow: visible;
  background-color: #ffffff;
  border-radius: 22px;
  box-shadow: 0 10px 38px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  color: var(--sc-text);
}

#preserve .pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

#preserve .pricing-card-header {
  margin-bottom: 0;
  padding: 12px;
  font-size: 18px;
  font-weight: var(--sc-weight-bold);
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: none;
  color: var(--sc-on-brand);
  background-color: var(--page-blue-light);
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
}

#preserve .badge-popular {
  position: absolute;
  top: -28px;
  left: 0;
  z-index: -1;
  padding: 6px 9px 20px;
  font-size: 12px;
  font-weight: var(--sc-weight-medium);
  letter-spacing: 0.08em;
  text-transform: none;
  color: #ffffff;
  background-color: var(--sc-orange);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(255, 159, 28, 0.4);
}

#preserve .pricing-card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  padding: 20px;
}

#preserve .pricing-media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 140px;
  min-height: 140px;
  margin-bottom: 30px;
  overflow: hidden;
  background-color: transparent;
  border-radius: 14px;
}

#preserve .pricing-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---- description: "À La Carte" / lead / sub ----------------------------- */
#preserve .pricing-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 117px;
  margin-bottom: 24px;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  color: var(--page-blue-dark);
}

#preserve .desc-first {
  display: block;
  margin-bottom: 10px;
  font-family: var(--sc-font-heading);
  font-size: 18px;
  font-weight: var(--sc-weight-medium);
  color: var(--sc-navy);
}

#preserve .desc-lead,
#preserve .desc-sub {
  display: block;
  color: var(--sc-text);
}

#preserve .desc-lead {
  font-size: 16px;
  font-weight: var(--sc-weight-regular);
}

#preserve .desc-sub {
  margin-top: 5px;
  font-weight: var(--sc-weight-regular);
}

/* ---- buttons ----------------------------------------------------------- */
#preserve .pricing-button-wrapper {
  flex-shrink: 0;
  margin-bottom: 30px;
}

#preserve .btn-pricing {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-bottom: 0;
  padding: 10px !important;
  font-size: 18px;
  line-height: 1.5;
  font-weight: var(--sc-weight-medium);
  letter-spacing: 0.06em;
  text-transform: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

#preserve .btn-outline-light-blue,
#preserve .btn-outline-light-blue:link,
#preserve .btn-outline-light-blue:visited,
#preserve .btn-outline-light-blue:focus,
#preserve .btn-outline-light-blue:active {
  color: var(--sc-on-brand);
  background-color: var(--sc-light-blue);
  border-color: var(--sc-light-blue);
}

#preserve .btn-outline-light-blue:hover {
  color: var(--sc-on-brand);
  background-color: var(--sc-navy);
  border-color: var(--sc-navy);
}

#preserve .btn-sc-orange,
#preserve .btn-sc-orange:link,
#preserve .btn-sc-orange:visited,
#preserve .btn-sc-orange:hover,
#preserve .btn-sc-orange:focus,
#preserve .btn-sc-orange:active {
  color: var(--sc-on-brand);
  background-color: var(--sc-orange);
  border: none;
}

#preserve .btn-radius-8 { border-radius: 8px; }

/* ---- feature list ------------------------------------------------------ */
#preserve .pricing-list {
  flex-grow: 1;
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 18px;
  color: var(--sc-text);
}

#preserve .pricing-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 32px;
  margin-bottom: 10px;
  padding-left: 40px;
  font-family: var(--sc-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sc-text);
}

#preserve .pricing-list li::before {
  content: "\2713";
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background-color: var(--sc-border);
  border-radius: 50%;
}

/* ---- responsive (same breakpoints as home.css) ------------------------- */
/* The button text stays 18px at every width, exactly as the home page does
   (its 20px root keeps .btn-pricing at 0.9rem = 18px throughout). No
   step-down here, or /order's button would read smaller than the home one. */
@media (max-width: 767.98px) {
  #preserve .pricing-card { padding: 40px 30px 30px; }
}

@media (max-width: 767px) {
  @media (max-width: 576px) {
    #preserve .pricing-card { padding: 0; }
  }
}

/* ---- counter the temporary site-wide 16px preview override --------------
   app_head.blade.php ships a blanket `font-size:16px !important` on every
   non-heading element while the font revamp is reviewed. On the main layout
   that shrinks this section's 18px header / card title / button and inflates
   the 12px "Most Popular" badge to 16px, so /order stops mirroring the home
   page's Preserve section. These #preserve rules carry an id, so their
   !important outranks the hack's id-less one and restores the exact home-page
   sizes. Remove this whole block when the preview override goes and the real
   font sizing lands. The 16px lines (lead, sub, list) already match at 16px
   and need nothing here. */
#preserve .pricing-card-header { font-size: 18px !important; }
#preserve .desc-first          { font-size: 18px !important; }
#preserve .btn-pricing         { font-size: 18px !important; }
#preserve .badge-popular       { font-size: 12px !important; }