:root{
  --pkg-bg:#f3f4f6;
  --pkg-card:#ffffff;
  --pkg-text:#0f172a;
  --pkg-muted:#6b7280;
  --pkg-green:#009245;
  --pkg-green-dark:#047857;
  --pkg-line:#d9e7df;
  --pkg-shadow:0 18px 40px rgba(15,23,42,.10);
  --pkg-shadow-lg:0 26px 60px rgba(15,23,42,.16);
  --pkg-radius:28px;
}

.packages-page,
.package-show-page{
  padding: 2.2rem 0 3.5rem;
  background: var(--pkg-bg);
}

.packages-header{
  text-align:center;
  margin-bottom: 1.25rem;
}

.packages-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.2rem 1.1rem;
  border-radius:999px;
  font-size:2rem;
  font-weight:800;
  background:linear-gradient(135deg, rgba(16,185,129,.08), rgba(59,130,246,.06));
  color:var(--pkg-green-dark);
}

.packages-title{
  margin:.55rem 0 .35rem;
  font-size:2rem;
  font-weight:800;
  color:#111827;
}

.packages-subtitle{
  max-width:1000px;
  margin:0 auto;
  color:#4b5563;
  font-size:1.04rem;
  line-height:1.8;
}

.packages-empty{
  text-align:center;
  padding:1.5rem;
  color:#6b7280;
  background:#fff;
  border-radius:18px;
  box-shadow: var(--pkg-shadow);
}

/* accordion */
.package-accordion-block{
  margin: 1rem 0 1.15rem;
}

.accordion-header{
  width:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.3rem 1rem 2.9rem;
  border:none;
  cursor:pointer;
  text-align:left;
  border-radius:999px;
  background:linear-gradient(90deg,#e8f9f0 0%, #f5fcf8 16%, #ffffff 48%, #ffffff 100%);
  color:var(--pkg-green-dark);
  box-shadow:
    rgba(50,50,93,.18) 0 24px 40px -18px,
    rgba(0,0,0,.15) 0 18px 30px -18px,
    rgba(10,37,64,.18) 0 -2px 6px 0 inset;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.accordion-header::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  bottom:4px;
  width:22px;
  border-radius:999px 0 0 999px;
  background:linear-gradient(180deg,#18a84f 0%, #0d8b4b 100%);
}

.accordion-header:hover,
.accordion-header:focus-visible{
  transform:translateY(-2px);
  background:linear-gradient(90deg,#dcfce7 0%, #f2fdf7 18%, #ffffff 52%, #ffffff 100%);
  box-shadow:
    rgba(50,50,93,.24) 0 30px 52px -20px,
    rgba(0,0,0,.18) 0 22px 34px -20px,
    rgba(10,37,64,.22) 0 -2px 6px 0 inset;
}

.accordion-header-main{
  display:flex;
  align-items:center;
  gap:.85rem;
  min-width:0;
}

.accordion-header-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#eefaf3;
  color:var(--pkg-green-dark);
  flex:0 0 36px;
  font-size:1rem;
}

.accordion-header-content{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.accordion-header-text{
  font-size:1.25rem;
  font-weight:800;
  color:var(--pkg-green-dark);
  line-height:1.35;
}

.accordion-header-subtitle{
  font-size:.9rem;
  line-height:1.45;
  color:#5b6b63;
  margin-top:1px;
}

.accordion-header-arrow{
  font-size:1rem;
  color:var(--pkg-green-dark);
  transition:transform .22s ease;
  flex:0 0 auto;
}

.package-accordion-block.collapsed .accordion-header-arrow{
  transform:rotate(-90deg);
}

.package-accordion-block.open .accordion-header-arrow{
  transform:rotate(0deg);
}

/* body */
.accordion-body{
  display:none;
  padding:0;
  animation: accordionFade .2s ease-out;
}

.package-accordion-block.open .accordion-body{
  display:block;
  padding:1rem .2rem .2rem;
}

@keyframes accordionFade{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}

/* cards grid */
.product-plans{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:34px 52px;
}

.product-plan{
  --accent-color:#16a34a;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1rem;
  background:linear-gradient(135deg,#ffffff 0%, #f5f7f8 100%);
  border-radius:32px;
  padding:3.1rem 1.5rem 1.5rem;
  box-shadow:0 18px 40px rgba(15,23,42,.14);
  min-height:100%;
  overflow:visible;
  transition:transform .18s ease, box-shadow .18s ease;
}

.product-plan:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 56px rgba(15,23,42,.18);
}

.product-plan:nth-child(6n+1){ --accent-color:#16a34a; }
.product-plan:nth-child(6n+2){ --accent-color:#1d4ed8; }
.product-plan:nth-child(6n+3){ --accent-color:#0f766e; }
.product-plan:nth-child(6n+4){ --accent-color:#7c3aed; }
.product-plan:nth-child(6n+5){ --accent-color:#0891b2; }
.product-plan:nth-child(6n+6){ --accent-color:#d97706; }

.product-plan .price{
  position:absolute;
  top:.45rem;
  right:1.1rem;
  margin:0;
  padding:.55rem 1.05rem;
  background:var(--accent-color);
  color:#fff !important;
  font-size:1.12rem;
  font-weight:800;
  letter-spacing:.2px;
  border-radius:6px;
  box-shadow:0 10px 22px rgba(0,0,0,.15);
  z-index:2;
  white-space:nowrap;
}

.product-plan .price::after{
  content:"";
  position:absolute;
  right:.45rem;
  top:100%;
  width:1rem;
  height:1rem;
  background:inherit;
  clip-path:polygon(0 0,100% 0,0 100%);
  filter:brightness(.7);
}

.product-plan .title{
  padding-right:6rem;
}

.product-plan .title-km{
  font-size:1.42rem;
  line-height:1.45;
  font-weight:800;
  color:var(--accent-color);
  font-family:"Nokora","Battambang",sans-serif;
}

.product-plan .title-en{
  margin-top:.18rem;
  font-size:1rem;
  line-height:1.5;
  color:#4b5563;
  font-family:"Poppins","Inter",sans-serif;
  font-weight:600;
}

.product-plan .features{
  list-style:none;
  margin:.15rem 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}

.product-plan .features li{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  padding:.8rem 1rem;
  border-radius:999px;
  background:linear-gradient(135deg,#f8fafc,#e8edf1);
  border:1px solid rgba(148,163,184,.45);
  box-shadow:0 6px 16px rgba(15,23,42,.10);
  font-size:1.05rem;
  line-height:1.5;
  color:#111827;
  word-break:break-word;
  overflow-wrap:break-word;
}

.product-plan .features li::before{
  content:"✓";
  flex:0 0 32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
  background:radial-gradient(circle at 30% 30%, #ffffff 0%, #22c55e 72%);
  box-shadow:0 4px 10px rgba(34,197,94,.25);
}

.package-btn{
  margin-top:auto !important;
  align-self:flex-start;
  border:none;
  cursor:pointer;
  padding:.78rem 2rem !important;
  min-height:3.05rem !important;
  height:3.05rem !important;
  box-sizing:border-box !important;
  border-radius:0;
  background:var(--accent-color);
  color:#fff !important;
  font-size:1.12rem !important;
  font-weight:700 !important;
  line-height:1 !important;
  position:relative;
  box-shadow:0 12px 24px rgba(0,0,0,.12);
  transition:filter .16s ease, transform .16s ease;
}

.package-btn::before{
  content:"";
  position:absolute;
  left:0;
  bottom:100%;
  width:1rem;
  height:1rem;
  background:inherit;
  clip-path:polygon(100% 0,100% 100%,0 100%);
  filter:brightness(.7);
}

.package-btn:hover{
  filter:brightness(.96);
  transform:translateY(-1px);
}

/* modal */
.package-modal-backdrop,
.package-modal{
  display:none;
}

.package-modal-backdrop.is-open{
  display:block;
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(4px);
  z-index:1040;
}

.package-modal.is-open{
  display:flex;
  position:fixed;
  inset:0;
  align-items:center;
  justify-content:center;
  padding:1rem;
  z-index:1050;
}

.package-modal-inner{
  position:relative;
  width:100%;
  max-width:820px;
  background:radial-gradient(circle at top left, #ecfdf5, #ffffff);
  border-radius:24px;
  padding:1.6rem 1.6rem 1.4rem;
  box-shadow:0 28px 70px rgba(15,23,42,.22);
  transform:translateY(10px) scale(.98);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}

.package-modal.is-open .package-modal-inner{
  transform:translateY(0) scale(1);
  opacity:1;
}

.package-modal-close{
  position:absolute;
  top:.9rem;
  right:1rem;
  border:none;
  background:transparent;
  cursor:pointer;
  color:#6b7280;
  font-size:1.1rem;
}

.package-modal-chip{
  display:inline-flex;
  align-items:center;
  padding:.38rem 1rem;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(16,185,129,.10), rgba(59,130,246,.06));
  color:var(--pkg-green-dark);
  font-size:1rem;
  font-weight:800;
  margin-bottom:.9rem;
}

.package-modal-title{
  font-size:1.5rem;
  font-weight:800;
  color:#111827;
  margin:0;
}

.package-modal-title-en{
  margin-top:.15rem;
  color:#6b7280;
  font-weight:600;
}

.package-modal-price{
  margin-top:.45rem;
  font-size:1rem;
  font-weight:800;
  color:var(--pkg-green);
}

.package-modal-count{
  margin-top:.35rem;
  font-size:.95rem;
  color:#6b7280;
}

.package-modal-count strong{
  color:var(--pkg-green-dark);
}

.package-modal-body{
  margin-top:1rem;
  max-height:360px;
  overflow:auto;
}

.package-items-table{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
}

.package-items-table th,
.package-items-table td{
  padding:.68rem .6rem;
  border-bottom:1px solid #e5e7eb;
}

.package-items-table th{
  text-align:left;
  font-weight:700;
  background:#f8fafc;
  color:#4b5563;
}

.package-items-table td:first-child,
.package-items-table td:last-child,
.package-items-table th:first-child,
.package-items-table th:last-child{
  text-align:center;
}

.package-modal-actions{
  margin-top:1rem;
  display:flex;
  justify-content:flex-end;
}

.package-secondary-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.62rem 1.2rem;
  border-radius:999px;
  border:1px solid rgba(16,185,129,.45);
  background:#ecfdf5;
  color:var(--pkg-green-dark);
  font-weight:700;
  cursor:pointer;
}

body.package-modal-open{
  overflow:hidden;
}

/* responsive */
@media (max-width: 991.98px){
  .product-plans{
    grid-template-columns:1fr;
    gap:24px;
  }

  .product-plan{
    max-width:720px;
    width:100%;
    margin:0 auto;
  }
}

@media (max-width: 768px){
  .packages-page{ padding:1.6rem 0 2.4rem; }

  .packages-badge{ font-size:1.55rem; }
  .packages-title{ font-size:1.65rem; }
  .packages-subtitle{ font-size:.96rem; }

  .accordion-header{
    padding:.9rem 1rem .9rem 2.7rem;
    font-size:1.08rem;
  }

  .accordion-header::before{
    width:18px;
  }

  .accordion-header-icon{
    width:32px;
    height:32px;
    flex-basis:32px;
    font-size:.95rem;
  }

  .accordion-header-text{ font-size:1.02rem; }
  .accordion-header-subtitle{ font-size:.8rem; }

  .package-accordion-block.open .accordion-body{
    padding:.9rem 0 0;
  }

  .product-plan{
    padding:3rem 1rem 1.15rem;
    border-radius:24px;
  }

  .product-plan .price{
    right:.9rem;
    top:.4rem;
    font-size:.98rem !important;
    padding:.48rem .9rem;
  }

  .product-plan .title{
    padding-right:5.2rem;
  }

  .product-plan .title-km{
    font-size:1.18rem;
  }

  .product-plan .title-en{
    font-size:.92rem;
  }

  .product-plan .features li{
    font-size:.96rem !important;
    padding:.72rem .9rem !important;
  }

  .package-btn{
    font-size:1rem !important;
    padding:.75rem 1.35rem !important;
  }

  .package-modal-inner{
    border-radius:18px;
    padding:1.2rem 1rem 1rem;
  }

  .package-modal-title{
    font-size:1.25rem;
  }

  .package-modal-chip{
    font-size:.92rem;
  }
}
.package-accordion-block{
  position: relative;
  z-index: 0;
  margin: 1rem 0 2rem 0;
}

.accordion-header{
  position: relative;
  z-index: 2;
}

.accordion-body{
  display: none;
  padding: 0;
  animation: accordionFade .2s ease-out;
}

.package-accordion-block.open .accordion-body{
  display: block;
  padding: 1rem 0 2.4rem;
}

.product-plan{
  position: relative;
  z-index: 1;
}
.package-btn.js-package-details{
  font-family: 'Battambang', sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

:root{
  --pkg-bg:#f3f4f6;
  --pkg-card:#ffffff;
  --pkg-text:#0f172a;
  --pkg-muted:#6b7280;
  --pkg-green:#009245;
  --pkg-green-dark:#047857;
  --pkg-line:#d9e7df;
  --pkg-shadow:0 18px 40px rgba(15,23,42,.10);
  --pkg-shadow-lg:0 26px 60px rgba(15,23,42,.16);
}

/* =========================
   PAGE
   ========================= */
.packages-page,
.package-show-page{
  padding: 2.2rem 0 3.5rem;
  background: var(--pkg-bg);
}

.packages-header{
  text-align:center;
  margin-bottom: 1.2rem;
}

.packages-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.2rem 1.1rem;
  border-radius:999px;
  font-size:2rem;
  font-weight:800;
  background:linear-gradient(135deg, rgba(16,185,129,.08), rgba(59,130,246,.06));
  color:var(--pkg-green-dark);
}

.packages-title{
  margin:.55rem 0 .35rem;
  font-size:2rem;
  font-weight:800;
  color:#111827;
}

.packages-subtitle{
  max-width:1000px;
  margin:0 auto;
  color:#4b5563;
  font-size:1.04rem;
  line-height:1.8;
}

.packages-empty{
  text-align:center;
  padding:1.5rem;
  color:#6b7280;
  background:#fff;
  border-radius:18px;
  box-shadow: var(--pkg-shadow);
}

/* =========================
   ACCORDION
   ========================= */
.package-accordion-block{
  position: relative;
  z-index: 0;
  margin: 1rem 0 2rem 0; /* more bottom space */
}

.accordion-header{
  width:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.3rem 1rem 2.9rem;
  border:none;
  cursor:pointer;
  text-align:left;
  border-radius:999px;
  background:linear-gradient(90deg,#e8f9f0 0%, #f5fcf8 16%, #ffffff 48%, #ffffff 100%);
  color:var(--pkg-green-dark);
  box-shadow:
    rgba(50,50,93,.18) 0 24px 40px -18px,
    rgba(0,0,0,.15) 0 18px 30px -18px,
    rgba(10,37,64,.18) 0 -2px 6px 0 inset;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  z-index: 2;
}

.accordion-header::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  bottom:4px;
  width:22px;
  border-radius:999px 0 0 999px;
  background:linear-gradient(180deg,#18a84f 0%, #0d8b4b 100%);
}

.accordion-header:hover,
.accordion-header:focus-visible{
  transform:translateY(-2px);
  background:linear-gradient(90deg,#dcfce7 0%, #f2fdf7 18%, #ffffff 52%, #ffffff 100%);
  box-shadow:
    rgba(50,50,93,.24) 0 30px 52px -20px,
    rgba(0,0,0,.18) 0 22px 34px -20px,
    rgba(10,37,64,.22) 0 -2px 6px 0 inset;
}

.accordion-header-main{
  display:flex;
  align-items:center;
  gap:.85rem;
  min-width:0;
}

.accordion-header-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#eefaf3;
  color:var(--pkg-green-dark);
  flex:0 0 36px;
  font-size:1rem;
}

.accordion-header-content{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.accordion-header-text{
  font-size:1.25rem;
  font-weight:800;
  color:var(--pkg-green-dark);
  line-height:1.35;
}

.accordion-header-subtitle{
  font-size:.9rem;
  line-height:1.45;
  color:#5b6b63;
  margin-top:1px;
}

.accordion-header-arrow{
  font-size:1rem;
  color:var(--pkg-green-dark);
  transition:transform .22s ease;
  flex:0 0 auto;
}

.package-accordion-block.collapsed .accordion-header-arrow{
  transform:rotate(-90deg);
}

.package-accordion-block.open .accordion-header-arrow{
  transform:rotate(0deg);
}

.accordion-body{
  display:none;
  padding:0;
  animation:accordionFade .2s ease-out;
}

.package-accordion-block.open .accordion-body{
  display:block;
  padding:1rem 0 2.4rem; /* important: prevent overlap with next accordion */
}

@keyframes accordionFade{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}

/* =========================
   CARD GRID
   ========================= */
.product-plans{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:34px 52px;
}

.product-plan{
  --accent-color:#16a34a;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:1rem;
  background:linear-gradient(135deg,#ffffff 0%, #f5f7f8 100%);
  border-radius:32px;
  padding:3.1rem 1.5rem 1.5rem;
  box-shadow:0 18px 40px rgba(15,23,42,.14);
  min-height:100%;
  overflow:hidden; /* stop visual overlap */
  transition:transform .18s ease, box-shadow .18s ease;
}

.product-plan:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 56px rgba(15,23,42,.18);
}

.product-plan:nth-child(6n+1){ --accent-color:#16a34a; }
.product-plan:nth-child(6n+2){ --accent-color:#1d4ed8; }
.product-plan:nth-child(6n+3){ --accent-color:#0f766e; }
.product-plan:nth-child(6n+4){ --accent-color:#7c3aed; }
.product-plan:nth-child(6n+5){ --accent-color:#0891b2; }
.product-plan:nth-child(6n+6){ --accent-color:#d97706; }

/* =========================
   PRICE TAG
   ========================= */
.product-plan .price{
  position:absolute;
  top:.45rem;
  right:1.1rem;
  margin:0;
  padding:.55rem 1.05rem;
  background:var(--accent-color);
  color:#fff !important;
  font-size:1.12rem;
  font-weight:800;
  letter-spacing:.2px;
  border-radius:6px;
  box-shadow:0 10px 22px rgba(0,0,0,.15);
  z-index:2;
  white-space:nowrap;
}

.product-plan .price::after{
  content:"";
  position:absolute;
  right:.45rem;
  top:100%;
  width:1rem;
  height:1rem;
  background:inherit;
  clip-path:polygon(0 0,100% 0,0 100%);
  filter:brightness(.7);
}

/* =========================
   TITLE
   ========================= */
.product-plan .title{
  padding-right:6rem;
}

.product-plan .title-km{
  font-size:1.42rem;
  line-height:1.45;
  font-weight:800;
  color:var(--accent-color);
  font-family:"Nokora","Battambang",sans-serif;
}

.product-plan .title-en{
  margin-top:.18rem;
  font-size:1rem;
  line-height:1.5;
  color:#4b5563;
  font-family:"Poppins","Inter",sans-serif;
  font-weight:600;
}

/* =========================
   FEATURES
   ========================= */
.product-plan .features{
  list-style:none;
  margin:.15rem 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}

.product-plan .features li{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  padding:.8rem 1rem;
  border-radius:999px;
  background:linear-gradient(135deg,#f8fafc,#e8edf1);
  border:1px solid rgba(148,163,184,.45);
  box-shadow:0 6px 16px rgba(15,23,42,.10);
  font-size:1.05rem;
  line-height:1.5;
  color:#111827;
  word-break:break-word;
  overflow-wrap:break-word;
}

.product-plan .features li::before{
  content:"✓";
  flex:0 0 32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
  background:radial-gradient(circle at 30% 30%, #ffffff 0%, #22c55e 72%);
  box-shadow:0 4px 10px rgba(34,197,94,.25);
}

/* =========================
   BUTTON
   ========================= */
.package-btn,
.package-btn.js-package-details{
  margin-top:auto !important;
  align-self:flex-start;
  border:none;
  cursor:pointer;
  padding:.78rem 2rem !important;
  min-height:3.05rem !important;
  height:3.05rem !important;
  box-sizing:border-box !important;
  border-radius:0;
  background:var(--accent-color);
  color:#fff !important;
  font-size:1.12rem !important;
  font-weight:700 !important;
  line-height:1 !important;
  position:relative;
  box-shadow:0 12px 24px rgba(0,0,0,.12);
  transition:filter .16s ease, transform .16s ease;
  font-family:'Battambang','Khmer OS Battambang',sans-serif !important;
  letter-spacing:.2px;
}

.package-btn::before{
  content:"";
  position:absolute;
  left:0;
  bottom:100%;
  width:1rem;
  height:1rem;
  background:inherit;
  clip-path:polygon(100% 0,100% 100%,0 100%);
  filter:brightness(.7);
}

.package-btn:hover{
  filter:brightness(.96);
  transform:translateY(-1px);
}

/* =========================
   MODAL
   ========================= */
.package-modal-backdrop,
.package-modal{
  display:none;
}

.package-modal-backdrop.is-open{
  display:block;
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(4px);
  z-index:1040;
}

.package-modal.is-open{
  display:flex;
  position:fixed;
  inset:0;
  align-items:center;
  justify-content:center;
  padding:1rem;
  z-index:1050;
}

.package-modal-inner{
  position:relative;
  width:100%;
  max-width:820px;
  background:radial-gradient(circle at top left, #ecfdf5, #ffffff);
  border-radius:24px;
  padding:1.6rem 1.6rem 1.4rem;
  box-shadow:0 28px 70px rgba(15,23,42,.22);
  transform:translateY(10px) scale(.98);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}

.package-modal.is-open .package-modal-inner{
  transform:translateY(0) scale(1);
  opacity:1;
}

.package-modal-close{
  position:absolute;
  top:.9rem;
  right:1rem;
  border:none;
  background:transparent;
  cursor:pointer;
  color:#6b7280;
  font-size:1.1rem;
}

.package-modal-chip{
  display:inline-flex;
  align-items:center;
  padding:.38rem 1rem;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(16,185,129,.10), rgba(59,130,246,.06));
  color:var(--pkg-green-dark);
  font-size:1rem;
  font-weight:800;
  margin-bottom:.9rem;
}

.package-modal-title{
  font-size:1.5rem;
  font-weight:800;
  color:#111827;
  margin:0;
}

.package-modal-title-en{
  margin-top:.15rem;
  color:#6b7280;
  font-weight:600;
}

.package-modal-price{
  margin-top:.45rem;
  font-size:1rem;
  font-weight:800;
  color:var(--pkg-green);
}

.package-modal-count{
  margin-top:.35rem;
  font-size:.95rem;
  color:#6b7280;
}

.package-modal-count strong{
  color:var(--pkg-green-dark);
}

.package-modal-body{
  margin-top:1rem;
  max-height:360px;
  overflow:auto;
}

.package-items-table{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
}

.package-items-table th,
.package-items-table td{
  padding:.68rem .6rem;
  border-bottom:1px solid #e5e7eb;
}

.package-items-table th{
  text-align:left;
  font-weight:700;
  background:#f8fafc;
  color:#4b5563;
}

.package-items-table td:first-child,
.package-items-table td:last-child,
.package-items-table th:first-child,
.package-items-table th:last-child{
  text-align:center;
}

.package-modal-actions{
  margin-top:1rem;
  display:flex;
  justify-content:flex-end;
}

.package-secondary-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.62rem 1.2rem;
  border-radius:999px;
  border:1px solid rgba(16,185,129,.45);
  background:#ecfdf5;
  color:var(--pkg-green-dark);
  font-weight:700;
  cursor:pointer;
}

body.package-modal-open{
  overflow:hidden;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 991.98px){
  .product-plans{
    grid-template-columns:1fr;
    gap:24px;
  }

  .product-plan{
    max-width:720px;
    width:100%;
    margin:0 auto;
  }
}

@media (max-width: 768px){
  .packages-page{
    padding:1.6rem 0 2.4rem;
  }

  .packages-badge{
    font-size:1.55rem;
  }

  .packages-title{
    font-size:1.65rem;
  }

  .packages-subtitle{
    font-size:.96rem;
  }

  .accordion-header{
    padding:.9rem 1rem .9rem 2.7rem;
  }

  .accordion-header::before{
    width:18px;
  }

  .accordion-header-icon{
    width:32px;
    height:32px;
    flex-basis:32px;
    font-size:.95rem;
  }

  .accordion-header-text{
    font-size:1.02rem;
  }

  .accordion-header-subtitle{
    font-size:.8rem;
  }

  .package-accordion-block{
    margin: .9rem 0 1.6rem 0;
  }

  .package-accordion-block.open .accordion-body{
    padding:.9rem 0 2rem;
  }

  .product-plan{
    padding:3rem 1rem 1.15rem;
    border-radius:24px;
  }

  .product-plan .price{
    right:.9rem;
    top:.4rem;
    font-size:.98rem !important;
    padding:.48rem .9rem;
  }

  .product-plan .title{
    padding-right:5.2rem;
  }

  .product-plan .title-km{
    font-size:1.18rem;
  }

  .product-plan .title-en{
    font-size:.92rem;
  }

  .product-plan .features li{
    font-size:.96rem !important;
    padding:.72rem .9rem !important;
  }

  .package-btn,
  .package-btn.js-package-details{
    font-size:1rem !important;
    padding:.75rem 1.35rem !important;
  }

  .package-modal-inner{
    border-radius:18px;
    padding:1.2rem 1rem 1rem;
  }

  .package-modal-title{
    font-size:1.25rem;
  }

  .package-modal-chip{
    font-size:.92rem;
  }
}

/* =========================================
   FINAL FIX: STOP PACKAGE CARDS OVERLAPPING
   Put this at the VERY END of packages.css
   ========================================= */

/* accordion block spacing */
.package-accordion-block{
  margin: 0 0 2.8rem 0 !important;
}

/* accordion body must give enough space */
.package-accordion-block .accordion-body{
  display: none;
  overflow: visible !important;
  padding: 0 !important;
}

.package-accordion-block.open .accordion-body{
  display: block !important;
  overflow: visible !important;
  padding: 1rem 0 2.8rem 0 !important;
}

/* grid of cards */
.product-plans{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 3.2rem 3.2rem !important; /* vertical + horizontal gap */
  align-items: start !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* each card */
.product-plan{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 1rem !important;
  height: auto !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 3.1rem 1.5rem 1.5rem !important;
  overflow: hidden !important;   /* important: stop child visual overlap */
  z-index: 1 !important;
}

/* make sure title/features take normal space */
.product-plan .title,
.product-plan .features{
  position: static !important;
  z-index: auto !important;
}

/* absolutely REMOVE old floating/absolute button behavior */
.package-btn,
.package-btn.js-package-details{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  max-width: 100% !important;
  margin-top: auto !important;   /* push button to bottom INSIDE card */
  align-self: flex-start !important;

  border-radius: 0 !important;
  overflow: visible !important;
  z-index: 1 !important;
}

/* remove any old triangle that may stick outside too much */
.package-btn::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 100% !important;
  width: 1rem !important;
  height: 1rem !important;
}

/* price tag can stay absolute but must stay inside card */
.product-plan .price{
  position: absolute !important;
  top: .45rem !important;
  right: 1.1rem !important;
  z-index: 2 !important;
}

/* next accordion header must always stay below previous cards */
.accordion-header{
  position: relative !important;
  z-index: 2 !important;
}

/* tablet/mobile */
@media (max-width: 991.98px){
  .product-plans{
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .package-accordion-block{
    margin-bottom: 2.2rem !important;
  }

  .package-accordion-block.open .accordion-body{
    padding-bottom: 2.2rem !important;
  }
}

/* =========================
   ADD SPACE BETWEEN CARDS
   ========================= */

/* 1. Increase space between cards (grid gap) */
.product-plans{
  gap: 6rem 2rem !important;
}

/* 2. Add space under each card */
.product-plan{
  margin-bottom: 1rem !important;
}

/* 3. Add space under accordion content */
.package-accordion-block.open .accordion-body{
  padding-bottom: 3.5rem !important;
}

/* 4. Add space between accordion groups */
.package-accordion-block{
  margin-bottom: 3rem !important;
}
/* =========================================
   iPhone / iPad / Safari FIX
   Add this at the END of package.css
   ========================================= */

/* Prevent horizontal cut / overflow on Safari */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.packages-page,
.package-show-page {
  overflow-x: hidden;
}

.packages-page *,
.package-show-page * {
  box-sizing: border-box;
  min-width: 0;
}

/* Better container fit on Apple devices */
.packages-page .container,
.package-show-page .container {
  width: 100%;
  max-width: 100%;
  padding-left: 14px;
  padding-right: 14px;
}

/* Accordion header should wrap nicely */
.accordion-header {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: 22px;
}

.accordion-header-main,
.accordion-header-content {
  min-width: 0;
  max-width: 100%;
}

.accordion-header-text,
.accordion-header-subtitle {
  display: block;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Grid cards */
.product-plans {
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.product-plan {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
  padding: 3rem 1rem 1.1rem;
}

/* Prevent title and text overflow */
.product-plan .title,
.product-plan .title-km,
.product-plan .title-en,
.product-plan .features,
.product-plan .features li {
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.product-plan .title {
  padding-right: 0;
  margin-top: 2.8rem;
}

.product-plan .title-km {
  font-size: 1.14rem;
  line-height: 1.5;
}

.product-plan .title-en {
  font-size: .92rem;
  line-height: 1.45;
}

/* Price badge: keep inside card on iPhone */
.product-plan .price {
  position: absolute;
  top: .8rem;
  right: .8rem;
  left: auto;
  max-width: calc(100% - 1.6rem);
  font-size: .95rem;
  line-height: 1.2;
  padding: .45rem .75rem;
  border-radius: 8px;
  white-space: normal;
  word-break: break-word;
}

.product-plan .price::after {
  display: none;
}

/* Feature pills should not overflow on Apple device */
.product-plan .features li {
  border-radius: 16px;
  padding: .75rem .85rem;
  font-size: .94rem;
  line-height: 1.5;
}

/* Detail button */
.package-btn,
.package-btn.js-package-details {
  width: 100%;
  max-width: 100%;
  justify-content: center;
  text-align: center;
  height: auto !important;
  min-height: 46px !important;
  padding: .82rem 1rem !important;
  font-size: 1rem !important;
  border-radius: 14px;
}

.package-btn::before {
  display: none;
}

/* Modal fit for iPhone Safari */
.package-modal {
  align-items: flex-start;
  padding:
    calc(env(safe-area-inset-top, 0px) + 14px)
    12px
    calc(env(safe-area-inset-bottom, 0px) + 14px);
}

.package-modal-inner {
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 28px);
  overflow: hidden;
  border-radius: 18px;
}

.package-modal-body {
  max-height: calc(100vh - 260px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.package-items-table {
  font-size: .9rem;
}

.package-items-table th,
.package-items-table td {
  padding: .6rem .45rem;
  word-break: break-word;
}

/* iPad + medium screens */
@media (max-width: 991.98px) {
  .product-plans {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .product-plan {
    margin: 0 auto;
  }
}

/* iPhone */
@media (max-width: 640px) {
  .packages-page,
  .package-show-page {
    padding: 1rem 0 2rem;
  }

  .packages-header {
    margin-bottom: 1rem;
  }

  .packages-badge {
    font-size: 1.2rem;
    padding: .3rem .9rem;
  }

  .packages-title {
    font-size: 1.35rem;
    line-height: 1.35;
  }

  .packages-subtitle {
    font-size: .92rem;
    line-height: 1.65;
    padding: 0 .15rem;
  }

  .package-accordion-block {
    margin: .8rem 0 1.2rem;
  }

  .accordion-header {
    padding: .85rem .9rem .85rem 1rem;
    border-radius: 18px;
    gap: .7rem;
  }

  .accordion-header::before {
    display: none;
  }

  .accordion-header-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    font-size: .92rem;
  }

  .accordion-header-text {
    font-size: .98rem;
    line-height: 1.45;
  }

  .accordion-header-subtitle {
    font-size: .78rem;
    line-height: 1.45;
    margin-top: 2px;
  }

  .package-accordion-block.open .accordion-body {
    padding: .8rem 0 1rem;
  }

  .product-plan {
    padding: 2.8rem .9rem 1rem;
    border-radius: 18px;
  }

  .product-plan .price {
    top: .7rem;
    right: .7rem;
    font-size: .88rem;
    padding: .42rem .65rem;
  }

  .product-plan .title {
    margin-top: 2.5rem;
  }

  .product-plan .title-km {
    font-size: 1.03rem;
  }

  .product-plan .title-en {
    font-size: .86rem;
  }

  .product-plan .features {
    gap: .65rem;
  }

  .product-plan .features li {
    font-size: .9rem;
    padding: .68rem .78rem;
    border-radius: 14px;
    gap: .7rem;
  }

  .product-plan .features li::before {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    font-size: .82rem;
  }

  .package-btn,
  .package-btn.js-package-details {
    min-height: 44px !important;
    font-size: .96rem !important;
    padding: .75rem .95rem !important;
  }

  .package-modal-inner {
    padding: 1rem .9rem .9rem;
  }

  .package-modal-chip {
    font-size: .82rem;
    line-height: 1.4;
    padding: .35rem .75rem;
  }

  .package-modal-title {
    font-size: 1.08rem;
    line-height: 1.45;
    padding-right: 28px;
  }

  .package-modal-title-en,
  .package-modal-price,
  .package-modal-count {
    font-size: .88rem;
  }

  .package-modal-close {
    top: .7rem;
    right: .75rem;
    font-size: 1rem;
  }

  .package-secondary-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Extra small iPhone */
@media (max-width: 390px) {
  .packages-page .container,
  .package-show-page .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .accordion-header {
    padding: .8rem;
  }

  .product-plan {
    padding-left: .8rem;
    padding-right: .8rem;
  }

  .product-plan .title-km {
    font-size: .98rem;
  }

  .product-plan .features li {
    font-size: .86rem;
  }
}
/* ===== FIX GAP BETWEEN FEATURES AND DETAIL BUTTON ===== */

.product-plan{
  gap: 0.75rem !important;
}

.product-plan .features{
  margin-bottom: 0.35rem;
}

.package-btn,
.package-btn.js-package-details{
  margin-top: 0 !important;      /* remove push-to-bottom */
  align-self: flex-start;
}

/* iPhone / mobile */
@media (max-width: 640px){
  .product-plan{
    gap: 0.55rem !important;
  }

  .product-plan .features{
    margin-bottom: 0.2rem;
  }

  .package-btn,
  .package-btn.js-package-details{
    margin-top: 0 !important;
  }
}
/* ===== FORCE COMPACT CARD (IMPORTANT FIX) ===== */

.product-plan{
  display: flex;
  flex-direction: column;

  /* ❌ remove tall card */
  height: auto !important;
  min-height: unset !important;

  /* 🔥 compact spacing */
  padding: 1.2rem 0.9rem 0.9rem !important;
  gap: 0.4rem !important;
}

/* ❌ REMOVE SPACE PUSHING */
.product-plan .features{
  margin-bottom: 0 !important;
}

/* ❌ VERY IMPORTANT: remove auto push */
.package-btn,
.package-btn.js-package-details{
  margin-top: 0 !important;
}

/* 🔥 make button stick close to content */
.product-plan .actions,
.product-plan .btn-area{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 🔥 remove any hidden spacing div */
.product-plan > *{
  margin-bottom: 0 !important;
}

/* ===== iPhone EXTRA COMPACT ===== */
@media (max-width: 640px){
  .product-plan{
    padding: 1rem 0.8rem 0.8rem !important;
    gap: 0.35rem !important;
  }

  .product-plan .title{
    margin-top: 1.8rem !important;
  }
}
/* =========================================
   FINAL APPLE / iPHONE SAFARI PACKAGE FIX
   Put this at the VERY END of package.css
   ========================================= */

/* stop safari weird stretching */
.product-plans{
  align-items: start !important;
}

.product-plan{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;

  height: auto !important;
  min-height: 320px !important;   /* a little taller, but not too tall */
  max-height: none !important;

  padding: 2.15rem 1rem 1rem !important;
  gap: 0.55rem !important;

  overflow: hidden !important;
  -webkit-transform: translateZ(0);
}

/* remove extra push down */
.product-plan > *{
  flex-shrink: 0;
}

.product-plan .title{
  margin-top: 0.55rem !important;
  margin-bottom: 0.15rem !important;
  padding-right: 0 !important;
}

.product-plan .title-km{
  font-size: 1.08rem !important;
  line-height: 1.45 !important;
}

.product-plan .title-en{
  margin-top: 0.1rem !important;
  line-height: 1.4 !important;
}

.product-plan .features{
  margin: 0 !important;
  padding: 0 !important;
  gap: 0.55rem !important;
}

.product-plan .features li{
  margin: 0 !important;
  padding: 0.68rem 0.85rem !important;
  border-radius: 14px !important;
  font-size: 0.93rem !important;
  line-height: 1.42 !important;
}

/* price badge compact */
.product-plan .price{
  top: 0.7rem !important;
  right: 0.8rem !important;
  font-size: 0.9rem !important;
  padding: 0.42rem 0.72rem !important;
  white-space: nowrap !important;
}

.product-plan .price::after{
  display: none !important;
}

/* VERY IMPORTANT: keep button close to features */
.package-btn,
.package-btn.js-package-details{
  margin-top: 0.25rem !important;   /* close to feature list */
  margin-bottom: 0 !important;
  align-self: flex-start !important;

  width: auto !important;
  min-width: 140px !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 36px !important;
  padding: 0.5rem 0.95rem !important;

  border-radius: 10px !important;
  line-height: 1.2 !important;
  font-size: 0.92rem !important;
}

.package-btn::before{
  display: none !important;
}

/* kill old auto-push from old css */
.product-plan .package-btn,
.product-plan .package-btn.js-package-details{
  margin-top: 0.25rem !important;
}

/* iPad / tablet */
@media (max-width: 991.98px){
  .product-plan{
    min-height: 300px !important;
    padding: 2rem 0.95rem 0.95rem !important;
  }
}

/* iPhone Safari */
@media (max-width: 640px){
  .product-plan{
    min-height: 250px !important;   /* increase a bit, but compact */
    padding: 1.95rem 0.88rem 0.85rem !important;
    gap: 0.45rem !important;
  }

  .product-plan .title{
    margin-top: 0.4rem !important;
    margin-bottom: 0.1rem !important;
  }

  .product-plan .title-km{
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  .product-plan .title-en{
    font-size: 0.84rem !important;
  }

  .product-plan .features{
    gap: 0.45rem !important;
  }

  .product-plan .features li{
    padding: 0.62rem 0.78rem !important;
    font-size: 0.88rem !important;
    line-height: 1.38 !important;
  }

  .package-btn,
  .package-btn.js-package-details{
    margin-top: 0.15rem !important;
    min-height: 34px !important;
    padding: 0.45rem 0.85rem !important;
    font-size: 0.88rem !important;
  }
}

/* extra small iPhone */
@media (max-width: 390px){
  .product-plan{
    min-height: 238px !important;
    padding: 1.85rem 0.8rem 0.8rem !important;
  }

  .product-plan .features li{
    font-size: 0.85rem !important;
  }
}
/* =========================================
   PACKAGE CARD HEIGHT + ACCORDION GAP FIX
   ========================================= */

/* 1) accordion block spacing: reduce bottom gap */
.package-accordion-block{
  margin: 1rem 0 1.1rem !important;
}

.package-accordion-block.open .accordion-body{
  padding: 1rem 0 0.9rem !important;
}

/* 2) grid gap inside accordion */
.product-plans{
  gap: 20px 32px !important;
  align-items: stretch !important;
}

/* 3) package card: a bit taller and cleaner */
.product-plan{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;

  min-height: 360px !important;   /* increase card height */
  height: auto !important;

  padding: 2.3rem 1.2rem 1.15rem !important;
  gap: 0.65rem !important;

  border-radius: 28px !important;
}

/* title area */
.product-plan .title{
  margin-top: 0.7rem !important;
  margin-bottom: 0.2rem !important;
  padding-right: 6.2rem !important;
}

.product-plan .title-km{
  line-height: 1.45 !important;
}

.product-plan .title-en{
  line-height: 1.45 !important;
}

/* features */
.product-plan .features{
  margin: 0 !important;
  gap: 0.75rem !important;
}

.product-plan .features li{
  padding: 0.8rem 1rem !important;
  border-radius: 18px !important;
  line-height: 1.5 !important;
}

/* button: keep close but not too close */
.package-btn,
.package-btn.js-package-details{
  margin-top: 0.4rem !important;
}

/* 4) tablet */
@media (max-width: 991.98px){
  .package-accordion-block{
    margin: 0.9rem 0 1rem !important;
  }

  .package-accordion-block.open .accordion-body{
    padding: 0.9rem 0 0.8rem !important;
  }

  .product-plans{
    gap: 18px !important;
  }

  .product-plan{
    min-height: 330px !important;
    padding: 2.15rem 1rem 1rem !important;
  }
}

/* 5) mobile / iPhone */
@media (max-width: 640px){
  .package-accordion-block{
    margin: 0.8rem 0 0.85rem !important;   /* reduce space to next accordion */
  }

  .package-accordion-block.open .accordion-body{
    padding: 0.75rem 0 0.55rem !important;
  }

  .product-plans{
    gap: 14px !important;
  }

  .product-plan{
    min-height: 280px !important;          /* taller than before */
    padding: 2rem 0.9rem 0.95rem !important;
    gap: 0.5rem !important;
    border-radius: 20px !important;
  }

  .product-plan .title{
    margin-top: 0.5rem !important;
    margin-bottom: 0.1rem !important;
    padding-right: 5.3rem !important;
  }

  .product-plan .features{
    gap: 0.55rem !important;
  }

  .product-plan .features li{
    padding: 0.68rem 0.82rem !important;
    border-radius: 14px !important;
  }

  .package-btn,
  .package-btn.js-package-details{
    margin-top: 0.25rem !important;
  }
}