.billing-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  font-family: var(--montserrat);
  border: 1px solid var(--alabaster-gray);
  border-radius: 2vw;
}

.billing-toggle__option {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.08);
  background: transparent;
  cursor: pointer;
  font-weight: 500;
  color: var(--black);
  width: 6vw;
  font-family: var(--montserrat);
}

.billing-toggle__option--active {
  background: var(--accent, #6c5ce7);
  color: #fff;
  border-color: var(--accent, #6c5ce7);
}

@media (max-width: 480px) {
  .billing-toggle { gap: 6px; }
  .billing-toggle__option { padding: 6px 8px; font-size: 14px; }
}

/* Discount note shown when annual billing is selected */
.plan-card__discount {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.95rem;
  color: var(--success, #16a34a);
  font-weight: 700;
}

/* Coupon input styles */
.plan-coupon {
  margin-top: 8px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.plan-coupon__input {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 0.95rem;
  min-width: 40vw;
}
.plan-coupon__apply, .plan-coupon__clear {
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--accent, #6c5ce7);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.plan-coupon__clear {
  background: #999;
}
.plan-coupon__message {
  font-size: 0.85rem;
  margin-left: 8px;
  color: #666;
}
.plan-coupon__message.error {
  color: #d32f2f;
  font-weight: 700;
}

/* Coupon button shown next to the toggle */
.plan-coupon-button {
  margin-left: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  color: var(--text-color, var(--black));
  font-size: 0.96rem;
  font-family: var(--montserrat);
}
.plan-coupon-button.pm-hover-lift {
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.plan-coupon-button:hover {
  background: #6c5ce7;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(79, 24, 129, 0.18);
}

/* Coupon modal uses the project's modal styles for consistent look */
.coupon-modal .modal-content {
  background: var(--white);
  color: var(--black);
  padding: 2rem;
  border-radius: 0.9vw;
  width: min(84vw, 560px);
  max-width: 560px;
}
.coupon-modal .modal-content.modal-content--plan {
  min-width: 80vw;
  min-height: auto;
  max-height: none;
  overflow: visible;
  padding: 1.6rem;
}
.coupon-modal .modal-content h2 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1.6rem;
}
.coupon-modal__close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: transparent;
  border: none;
  color: var(--black);
  font-size: 1.6rem;
  cursor: pointer;
}
.coupon-modal__body { margin-top: 0.6rem; }

/* Inputs and buttons inside modal */
.plan-coupon__input {
  padding: 0.9rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: var(--lavender-mist);
  color: var(--black);
  font-size: 1rem;
  min-width: 40vw;
}
.plan-coupon__apply {
  padding: 0.9rem 1rem;
  border-radius: 8px;
  background: var(--gradient-purple);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 700;
}
.plan-coupon__clear {
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--black);
  cursor: pointer;
}
.plan-coupon__message { margin-top: 0.6rem; }

/* Responsive adjustments */
@media (max-width: 1024px) {
  .billing-toggle { flex-wrap: wrap; gap: 10px; }
  .plan-coupon-button { margin-left: 0; margin-top: 8px; }

  .plan-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .plan-card { padding: 1rem; border-radius: 10px; }

  .plan-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 1.6rem;
  }
  .plan-card__price .plan-card__price-period { font-size: 0.9rem; color: var(--gray); margin-left: 0.25rem; }
  .plan-card__discount { font-size: 0.9rem; margin-left: 0.4rem; margin-top: 0; color: var(--success,#16a34a); }

  .coupon-modal .modal-content { width: min(86vw, 520px); max-width: 520px; padding: 1.6rem; }
  .coupon-modal__body .plan-coupon { display: flex; gap: 10px; align-items: center; }
  .coupon-modal__body .plan-coupon__input { flex: 1; min-width: 120px; }
}

@media (max-width: 480px) {
  .plan-options { grid-template-columns: 1fr; }
  .billing-toggle { width: 100%; justify-content: flex-start; gap: 10px; }
  .billing-toggle__option { padding: 8px 12px; font-size: 0.95rem; }
  .plan-coupon-button { margin-left: 0; margin-top: 8px; padding: 8px 12px; }

  .plan-card__price { font-size: 1.4rem; gap: 0.4rem; }
  .plan-card__price .plan-card__price-period { font-size: 0.92rem; }
  .plan-card__discount { display: block; font-size: 0.9rem; margin-left: 0; margin-top: 6px; }

  .coupon-modal__body .plan-coupon { flex-direction: column; align-items: stretch; }
  .plan-coupon__apply { width: 100%; margin-top: 8px; }
  .plan-coupon__clear { width: 100%; margin-top: 6px; }
  .plan-coupon__input { width: 100%; min-width: 0; }

  .plan-card__name { font-size: 1.4rem; }
  .plan-card__description { font-size: 0.95rem; }
  .plan-select__button { font-size: 0.95rem; padding: 12px; }
}

/* Mobile interaction fixes and better stacking */
/* Remove the native tap highlight and ensure touch-friendly actions */
.billing-toggle__option,
.plan-coupon-button,
.plan-coupon__apply,
.plan-coupon__clear,
.plan-coupon__input {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
}

.billing-toggle__option:focus,
.plan-coupon-button:focus,
.plan-coupon__apply:focus {
  box-shadow: 0 0 0 6px rgba(111,0,255,0.12);
  outline: none;
}

/* Make sure toggle options don't overflow on small screens */
.billing-toggle__option {
  min-width: 72px;
  text-align: center;
  white-space: nowrap;
  padding-left: 10px;
  padding-right: 10px;
}

/* Header layout for plans section: title/subtitle stacked left, controls aligned right on desktop/TV */
.home-section.home-plans .home-section__header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

/* Ensure title/subtitle stay stacked on the left column */
.home-section.home-plans .home-section__title {
  grid-column: 1;
  grid-row: 1;
  margin: 0; /* normalize spacing inside grid */
}
.home-section.home-plans .home-section__subtitle {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}

/* Place billing toggle and coupon button in separate right-side columns, vertically centered */
.home-section.home-plans .home-section__header .plans-header-controls {
  /* place controls left-aligned below the subtitle */
  grid-column: 1;
  grid-row: 3;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-self: start;
  margin-top: 8px;
}
.home-section.home-plans .home-section__header .plans-header-controls .billing-toggle {
  margin: 0;
}
.home-section.home-plans .home-section__header .plans-header-controls .plan-coupon-button {
  margin-left: 0;
}

@media (max-width: 480px) {
  .billing-toggle { width: 100%; padding: 6px 4px; }
  .billing-toggle__option { flex: 1 1 0; min-width: 0; }
  .plan-coupon-button { width: 100%; margin-left: 0; margin-top: 6px; padding: 10px 12px; }
  .home-section.home-plans .home-section__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .home-section.home-plans .home-section__header .plans-header-controls {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    justify-content: flex-start;
  }
  .home-section.home-plans .home-section__header .plans-header-controls .billing-toggle {
    width: 100%;
  }
  .home-section.home-plans .home-section__header .plans-header-controls .plan-coupon-button {
    width: 100%;
  }
  /* Ensure price line wraps cleanly on small screens */
  .plan-card__price { flex-direction: row; align-items: baseline; }
  .plan-card__discount { display: block; margin-top: 6px; margin-left: 0; }
}