/* =============================================================================
 * Subscription Box — Phase Premium P6 (2026-06-06)
 * ============================================================================= */

.sub-page { background: #fafaf8; }

.sub-hero {
  background: linear-gradient(135deg, #0e2620 0%, #2d5e3e 60%, #52b788 100%);
  color: #fff;
  padding: 80px 16px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sub-hero::after {
  content: '🍵';
  position: absolute;
  font-size: 380px;
  opacity: .06;
  right: -60px;
  bottom: -120px;
  pointer-events: none;
}

.sub-hero__eyebrow {
  display: inline-block;
  background: rgba(255,255,255,.15);
  color: #fff;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
}

.sub-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 5vw, 54px);
  margin: 0 0 14px;
  line-height: 1.1;
}

.sub-hero p {
  max-width: 640px;
  margin: 0 auto;
  opacity: .9;
  font-size: 16px;
  line-height: 1.55;
}

.sub-hero__bullets {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
  font-size: 14px;
  opacity: .95;
}

.sub-flash {
  padding: 12px 16px;
  border-radius: 10px;
  margin: 16px auto;
  max-width: 880px;
}
.sub-flash--ok { background: #e8f5e9; color: #2d5e3e; }
.sub-flash--err { background: #fde7e9; color: #c0392b; }

.sub-plans {
  padding: 60px 16px;
}

.sub-plans h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 4vw, 36px);
  text-align: center;
  color: #2d3e50;
  margin: 0 0 36px;
}

.sub-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.sub-plan {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.06);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
  display: flex;
  flex-direction: column;
}

.sub-plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(0,0,0,.12);
}

.sub-plan__cover {
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.sub-plan__cover--placeholder {
  background: linear-gradient(135deg, #c8a45c, #d9bb78);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  opacity: .5;
}

.sub-plan__body {
  padding: 24px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sub-plan__body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  margin: 0 0 6px;
  color: #2d3e50;
}

.sub-plan__price {
  font-size: 30px;
  font-weight: 800;
  color: #2d5e3e;
  margin: 4px 0 12px;
}

.sub-plan__price small {
  font-size: 13px;
  font-weight: 500;
  color: #888;
  letter-spacing: 1px;
}

.sub-plan__desc {
  color: #666;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 14px;
}

.sub-plan__preview {
  background: #f8faf8;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}

.sub-plan__preview strong { color: #2d5e3e; }
.sub-plan__preview em { color: #c8a45c; font-style: italic; }
.sub-plan__preview ul { margin: 6px 0 0 18px; padding: 0; color: #555; }

.sub-plan__cta {
  margin-top: auto;
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #2d5e3e, #52b788);
  color: #fff;
  border: none;
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .5px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform .25s, box-shadow .25s;
}

.sub-plan__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(45, 94, 62, .35);
}

.sub-plan__form {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #ccd6cf;
  flex-direction: column;
  gap: 10px;
}

.sub-plan__form.is-open { display: flex; }

.sub-plan__form label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  letter-spacing: .3px;
}

.sub-plan__form input,
.sub-plan__form textarea {
  margin-top: 4px;
  padding: 10px 12px;
  border: 2px solid #e5e9e6;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
}

.sub-plan__form input:focus,
.sub-plan__form textarea:focus {
  outline: none;
  border-color: #52b788;
}

.sub-plan__confirm {
  background: #2d5e3e;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.sub-plan__form small {
  color: #888;
  font-size: 11px;
  text-align: center;
}

/* =============================================================================
 * BENEFIT GRID
 * ============================================================================= */
.sub-benefits {
  padding: 60px 16px;
  background: #fff;
}

.sub-benefits h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3.6vw, 32px);
  text-align: center;
  color: #2d3e50;
  margin: 0 0 36px;
}

.sub-benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.sub-benefit-grid > div {
  text-align: center;
  padding: 24px;
  background: #f8faf8;
  border-radius: 14px;
}

.sub-benefit-grid span {
  display: inline-block;
  font-size: 40px;
  margin-bottom: 10px;
}

.sub-benefit-grid h4 {
  color: #2d5e3e;
  margin: 0 0 8px;
  font-size: 17px;
}

.sub-benefit-grid p {
  color: #666;
  font-size: 13.5px;
  margin: 0;
  line-height: 1.55;
}

/* =============================================================================
 * MY SUBSCRIPTIONS PAGE
 * ============================================================================= */
.sub-mine {
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

.sub-mine__head {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}

.sub-mine__head img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 12px;
}

.sub-mine__head h3 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #2d3e50;
}

.sub-mine__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-size: 14px;
  color: #666;
}

.sub-status {
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .5px;
}

.sub-status--active    { background: #e8f5e9; color: #2d5e3e; }
.sub-status--paused    { background: #fff8e1; color: #f57c00; }
.sub-status--cancelled { background: #f5f5f5; color: #999; }

.sub-mine__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 18px;
  padding: 14px 16px;
  background: #f8faf8;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: #555;
}

.sub-mine__grid strong { color: #2d5e3e; }

.sub-mine__addr {
  margin-bottom: 14px;
}

.sub-mine__addr summary {
  cursor: pointer;
  color: #2d5e3e;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 0;
}

.sub-addr-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.sub-addr-form textarea,
.sub-addr-form input {
  padding: 10px;
  border: 2px solid #e5e9e6;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
}

.btn-mini {
  background: #2d5e3e;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  align-self: flex-start;
}

.sub-mine__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px dashed #eee;
}

.btn-pause, .btn-resume, .btn-cancel {
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}

.btn-pause  { background: #fff8e1; color: #f57c00; }
.btn-resume { background: #e8f5e9; color: #2d5e3e; }
.btn-cancel { background: #fde7e9; color: #c0392b; }

.btn-pause:hover  { background: #fff3c4; }
.btn-resume:hover { background: #c8e6c9; }
.btn-cancel:hover { background: #f8d7da; }