.pb select {
  background-repeat: no-repeat;
  background-position: right 1.5rem center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.plan-wrapper {
  position: relative;
  z-index: 1;
  padding: 40px;
  overflow: hidden;
  background-color: #fff;
}







.pb {
  height: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #F8F8F8;
}

.pb h2 {
  font-family: var(--v2-font-1);
  font-size: 4rem;
  margin-top: 0;
  margin-bottom: 4rem;
}

/* Show/hide by viewport: use for separate desktop vs mobile blocks if needed */
.pb .pb-show-desktop {
  display: block;
}
.pb .pb-show-mobile {
  display: none;
}
@media screen and (max-width: 639px) {
  .pb .pb-show-desktop {
    display: none;
  }
  .pb .pb-show-mobile {
    display: block;
  }
}

.pb .btn {
  border: 0;
  outline: 0;
  font-family: var(--font-text-bold);
  font-size: 1.5rem;
  border-radius: 10px;
  padding: 3px 3rem;
  color: #000;
  background-color: #D3DB47;
  border: 2px solid #D3DB47;
  transition: all 0.3s;
}

.pb .btn.white {
  background-color: #fff;
}

.pb .btn.white:hover {
  background-color: #D3DB47;
}

.pb .btn.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
}

/* Button icons */
.pb .pb-btn-icon {
  width: auto;
  height: 1.2rem;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

.pb .btn:hover,
.pb .btn:active,
.pb .btn:focus {
  background-color: transparent;
}

.pb .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.pb .btn.loading {
  position: relative;
  color: transparent;
}

.pb .btn.loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid #000;
  border-radius: 50%;
  border-top-color: transparent;
  animation: pb-spin 0.6s linear infinite;
}

@keyframes pb-spin {
  to {
    transform: rotate(360deg);
  }
}

.pb .text-align--center {
  text-align: center;
}

.pb input,
.pb select {
  border: 1px solid #565656;
  border-radius: 10px;
  padding: 1.5rem;
  font-size: 1.5rem;
  width: 100%;
}

/* Input with unit suffix (e.g. KG) */
.pb .pb-input-with-suffix {
  position: relative;
}

.pb .pb-input-with-suffix input {
  padding-right: 4rem; /* space for suffix text */
}

.pb .pb-input-suffix {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  font-family: var(--font-text-bold);
  font-size: 1.4rem;
  color: #565656;
  pointer-events: none;
}

.pb input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #D3DB47;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 0;
  margin: 0 0.75rem 0 0; /* space before label text */
  vertical-align: middle;
}

.pb select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-size: 1rem;
  padding-right: 2rem;
  font-family: var(--font-text);
  text-transform: uppercase;
}

.pb input[type="radio"]:checked {
  border: 6px solid #D3DB47;
}

.pb .ml-register-msg {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 6px;
  background: #e6f7ff;
  border: 1px solid #b6e0ff;
  color: #005b99;
  font-family: var(--font-text-bold);
  font-size: 1.5rem;
}

.pb .login-section .text p {
  font-family: var(--font-text-bold);
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: 2rem;
}

/* Login / Register cards - outer wrapper */
.pb .login-section .pb-login-cards {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Inner grid: 2 columns + divider on desktop */
.pb .login-section .pb-login-cards-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  justify-items: center;
  min-height: 28rem;
  position: relative;
}

.pb .login-section .grid-col--1 {
  grid-column: 1;
}

.pb .login-section .pb-login-cards-divider {
  grid-column: 2;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.15);
  align-self: stretch;
  min-height: 20rem;
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
}

.pb .login-section .grid-col--2 {
  grid-column: 3;
}

.pb .login-section .pb-login-card {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 31rem;
  height: 100%;
  flex: 1;
  border-radius: 16px;
  overflow: visible;
  position: relative;
  width: 550px;
  max-width: 100%;
  box-sizing: border-box;
  z-index: 1;
}

.pb .login-section .pb-login-card--login {
  background-color: #E8E8E8 !important;
  background: #E8E8E8 !important;
}

.pb .login-section .pb-login-card--register {
  background-color: #D3DB47 !important;
  background: #D3DB47 !important;
}

.pb .login-section .pb-login-card__content {
  margin: 20px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem 2rem;
  min-width: 0;
  z-index: 1;
  position: relative;
}

.pb .login-section .pb-login-card__content .text p {
  padding-top: 0;
  padding-bottom: 1rem;
  margin: 0;
  width: 175px;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.pb .login-section .pb-login-card__content .button {
  margin-top: 0.5rem;
}

.pb .login-section .pb-login-card--login .btn {
  background-color: #D3DB47 !important;
  border-color: #D3DB47 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.pb .login-section .pb-login-card--register .btn {
  background-color: #fff !important;
  border-color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.pb .login-section .pb-login-card--register .btn:hover {
  background-color: #E8E8E8 !important;
  border-color: #E8E8E8 !important;
}

.pb .login-section .pb-login-card__image {
  position: absolute;
  right: 29px;
  bottom: 0;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 55%;
  max-width: 55%;
  z-index: 2;
  transform: translateX(28%);
  pointer-events: none;
}

.pb .login-section .pb-login-card__image img {
  width: auto;
  height: 100%;
  max-height: 48rem;
  object-fit: cover;
  object-position: right bottom;
  display: block;
  filter: drop-shadow(-4px 4px 8px rgba(0, 0, 0, 0.15));
}

.pb .login-section .grid-col {
  width: 100%;
  max-width: 550px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 28rem;
}

.pb .login-section .grid-col--1,
.pb .login-section .grid-col--2 {
  margin: 0;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* No extra padding in the gap between the two cards */
.pb .login-section .grid-col--1 {
  padding-right: 1.5rem;
}

.pb .login-section .grid-col--2 {
  padding-left: 1.5rem;
}

.pb .field-wrapper {
  width: 40%;
  margin: auto;
}

/* Register step: left-align labels and inputs */
.pb .user-info-section .field-wrapper,
.pb .user-info-section .field-item {
  text-align: left;
}

.pb .user-info-section .label {
  text-align: left;
}

.pb .user-info-section .button {
  text-align: center;
}

.pb .label {
  font-family: var(--font-text-bold);
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 2rem;
  text-transform: capitalize;
}

.pb .icon-float {
  width: fit-content;
  position: absolute;
  right: 14%;
}

.pb .title-wrapper {
  display: block;
}



/* 1. Base Wrapper */
.pb .progress {
  margin-bottom: 5rem;
}

.pb .steps-wrapper {
  position: relative;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 50px 0 0 0;
  padding: 0 1%;
  z-index: 0;
  gap: 0;
  height: 0;
  min-height: 0;
}

/* 2. Step Circles */
.pb .steps-wrapper .steps {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  font-size: 11px;
  padding: 0 2px;
}

/* Hide step circle indicators */
.pb .steps-wrapper .steps::before {
  display: none !important;
}

.pb .steps-wrapper .steps.active::before {
  display: none !important;
}

.pb .steps-wrapper::before {
  content: "";
  position: absolute;
  top: -26px;
  left: 1%;
  right: 1%;
  width: auto;
  height: 15px;
  border-radius: 15px;
  background-color: #D9D9D9;
  z-index: -1;
}

/* Filled (green) progress bar behind the steps, width driven by CSS variable */
.pb .steps-wrapper::after {
  content: "";
  position: absolute;
  top: -26px;
  left: 1%;
  height: 15px;
  border-radius: 15px;
  background-color: #D3DB47;
  width: var(--pb-progress, 0%);
  z-index: -1;
  max-width: calc(100% - 2%);
  box-sizing: border-box;
}

.pb .steps-wrapper .steps.active {
  font-family: var(--font-text-bold);
  color: transparent !important;
  font-size: 0 !important;
}

.pb .steps-wrapper .steps {
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex !important;
  height: 20px;
}

.pb .plan-wrapper .container {
  min-height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pb .dogname-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.pb .create-plan-footer {
  background-color: #F8F8F8;
}

.pb .plan-wrapper-nav {
  padding: 2rem;
}

.pb .dogsize-wrapper {
  width: 100%;
}

.pb .dogsize-wrapper .label {
  font-family: var(--font-text-bold);
  text-align: center;
  margin-bottom: 2rem;
}

.pb .radio-wrapper {
  background-color: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 10px;
  padding: 1.5rem 2rem;
  width: 100%;
  min-height: 6rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.pb .radio-wrapper p {
  margin: 0;
}

/* Dog sex icons (boy / girl) */
.pb .pb-sex-icon {
  width: auto;
  height: 2rem;
  margin-right: 0.75rem;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

/* Highlighted dog name in questions (e.g. "Is Monty a boy or a girl?") */
.pb .pb-dog-name-label {
  font-weight: 700;
  color: #f56b8a;
}

.pb .field-wrapper.dog-size {
  width: 100%
}

.pb .field-wrapper.dog-weight {
  width: 70%;
}

.pb .dogmeals-wrapper .grid {
  width: 100%;
  margin: auto;
  text-align: center;
  row-gap: 3rem;
  column-gap: 3rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pb .dogmeals-wrapper .label,
.pb .dogplan-wrapper .label {
  text-align: center;
  margin-bottom: 2rem;
}

.pb .meal-box,
.pb .diet-box {
  position: relative;
  border: 1px solid #D3DB47;
  padding: 2rem;
  border-radius: 5px;
  min-height: 35rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.3s;
}

.pb .meal-box:hover,
.pb .meal-box:active,
.pb .meal-box:focus,
.pb .meal-box.active {
  background-color: #deffb7;
  border: 1px solid #84c23a;
}

/* Meal selection badge: tick when selected, X on hover */
.pb .meal-box-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: rgb(120 255 0 / 81%);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #09710c;
  line-height: 1;
  transition: background-color 0.2s, content 0.2s;
}

.pb .meal-box.active .meal-box-badge {
  display: flex;
}

.pb .meal-box.active .meal-box-badge::before {
  content: "✓";
}

.pb .meal-box.active:hover .meal-box-badge::before {
  content: "✕";
}

.pb .meal-box.active:hover .meal-box-badge {
  background-color: rgb(142 18 18 / 81%);
  color: #ffd2d2;
}

.pb .diet-box:hover,
.pb .diet-box:active,
.pb .diet-box:focus,
.pb .diet-box.active {
  background-color: #ECF09C;
}

.pb .diet-box .plan-info {
  border-radius: 10px;
  background-color: #F7F7F7;
  padding: 1rem;
  transition: all 0.3s;
}

.pb .diet-box.active .plan-info,
.pb .diet-box:hover .plan-info {
  background-color: #D3DB47;
}

.pb .diet-box {
  border-radius: 20px;
}

.pb .meal-box img {
  width: 200px;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.pb .meal-box h3,
.pb .diet-box h3 {
  font-size: 2rem;
}

.pb .diet-box p {
  margin: 0;
}

.pb .diet-box.loading {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

/* Overlay spinner for plan selection */
.pb .pb-plan-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 20px;
}

.pb .pb-plan-loading-overlay::after {
  content: "";
  width: 50px;
  height: 50px;
  border: 4px solid #D3DB47;
  border-radius: 50%;
  border-top-color: transparent;
  animation: pb-spin 0.6s linear infinite;
}

.pb .dogplan-wrapper {
  position: relative;
}

.pb .dogplan-wrapper .grid {
  row-gap: 3rem;
  column-gap: 3rem;
  text-align: center;
}

.pb .subscribe-wrapper .the-meal {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  column-gap: 1rem;
  width: 24rem;
}

.pb .the-meal img {
  width: 9rem;
  border-radius: 20px;
  height: 9rem;
  object-fit: cover;
}

.pb .subscribe-box {
  border: 1px solid #E5E5E5;
  background-color: #fff;
  padding: 2rem;
  border-radius: 10px;
}

.pb .subscribe-wrapper {
  padding-left: 1%;
  padding-right: 1%;
}

.pb .subscribe-box .info p {
  margin: 0;
}

.pb .subscribe-wrapper .label {
  text-align: center;
}

.pb .pb-selected-meals {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
  border: 1px solid #E5E5E5;
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
}

.pb .pb-meals-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem;
  align-items: stretch;
  width: 100%;
}

.pb .pb-meal-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  text-align: left;
  gap: 1rem;
  width: 100%;
  flex-wrap: nowrap;
}

.pb .pb-meal-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.pb .pb-meal-title {
  font-size: 1.4rem;
  margin: 0;
  font-weight: 500;
  color: #000;
  line-height: 1.3;
  flex: 1;
}

.pb .pb-summary-subtitle {
  font-size: 1.4rem;
  color: #666;
  line-height: 1.5;
}

.pb .meals-quantity-wrapper {
  background-color: #F7F7F7;
  border-radius: 10px;
  padding: 1.5rem;
  column-gap: 2rem;
}

.pb .total-label,
.pb .total-amount {
  font-family: var(--font-text-bold);
  font-size: 1.8rem;
}

.total-amount {
  transition: color 0.2s ease-in-out;
}

.price-updated {
  color: #2ecc71;
  font-weight: bold;
}

.pb .meals-quantity-wrapper .info p {
  font-family: var(--font-text-bold);
}

/* Did You Know Popup */
.pb .pb-input-wrapper {
  position: relative;
  width: 100%;
}

.pb .pb-did-you-know-popup {
  position: fixed;
  bottom: 15rem;
  left: 3rem;
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  z-index: 1000;
  width: auto;
  max-width: none;
  min-width: auto;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  visibility: visible;
}

.pb .pb-did-you-know-popup.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pb .pb-popup-icon {
  flex-shrink: 0;
  width: auto;
  height: 100%;
  background-color: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  align-self: stretch;
}

.pb .pb-popup-icon img {
  width: auto;
  height: 100%;
  max-height: 100%;
  max-width: 10rem;
  object-fit: contain;
  object-position: center;
}

.pb .pb-popup-content {
  flex: 0 0 auto;
  width: 32rem;
  max-width: 32rem;
  background-color: #F7F7F7;
  border-radius: 10px;
  padding: 1.2rem;
  position: relative;
  text-align: left;
  min-height: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  align-self: stretch;
}

.pb .pb-popup-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.3s ease;
}

.pb .pb-popup-close:hover {
  background-color: #333;
}

.pb .pb-popup-title {
  line-height: 1;
  font-family: var(--font-text-bold);
  font-size: 1.3rem;
  font-weight: bold;
  margin: 0 0 0.8rem 0;
  color: #000;
  text-align: left;
}

.pb .pb-popup-text {
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0;
  color: #000;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.pb .pb-popup-text .pb-dog-name-popup {
  color: #f56b8a;
  font-weight: 700;
}

@media screen and (max-width: 1024px) {
  .pb .pb-did-you-know-popup {
    min-width: 28rem;
    max-width: 32rem;
  }

  .pb .dogmeals-wrapper .grid {
    width: 80%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pb .icon-float img {
    width: 10rem;
  }

  .pb .meals-quantity-wrapper {
    grid-template-columns: 1fr 1fr;
    row-gap: 2rem;
  }

  .pb .subscribe-wrapper {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .pb .pb-did-you-know-popup {
    /* Fully hide popup on mobile */
    display: none !important;
  }

  .pb .dogsize-wrapper .grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 2rem;
  }

  .pb .field-wrapper {
    width: 100%;
  }

  .pb .dogsize-wrapper .flex {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 639px) {
  /* Tighten overall vertical spacing on mobile */
  .pb {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Reduce padding top for login cards on mobile (pt-5 instead of pt-10) */
  .pb .login-section .pb-login-cards {
    padding-top: 3rem;
  }

  .pb .field-wrapper.dog-weight {
    width: 100%;
  }

  /* Login / Register cards - stack nicely on mobile */
  .pb .login-section .pb-login-cards-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 2rem;
  }

  /* Hide vertical divider between cards on mobile */
  .pb .login-section .pb-login-cards-divider {
    display: none;
  }

  .pb .login-section .grid {
    grid-template-columns: 1fr;
    row-gap: 3rem;
  }

  .pb .dogmeals-wrapper .grid,
  .pb .dogsize-wrapper,
  .pb .radio-wrapper {
    width: 100%;
  }

  .pb .dogsize-wrapper .grid,
  .pb .meals-quantity-wrapper {
    grid-template-columns: 1fr;
  }

  .pb .login-section .grid-col--1 {
    border-right: 0;
  }

  .pb .login-section .pb-login-card {
    flex-direction: column;
    min-height: auto;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .pb .login-section .pb-login-card__content {
    padding: 1.5rem 1.25rem;
  }

  /* Hide login/register card image on mobile only */
  .pb .login-section .pb-login-card__image {
    display: none;
  }

  /* Hide floating round graphic on mobile */
  .pb .icon-float {
    display: none;
  }

  .pb .login-section .pb-login-card__image img {
    max-height: 14rem;
    width: 100%;
    object-position: center bottom;
  }

  /* Summary step: stack CTA buttons with Add to Basket on top of Back */
  .pb .subscribe-section .plan-wrapper-nav {
    flex-direction: column-reverse;
    row-gap: 1.5rem;
  }

  /* Make Add to Basket more prominent on mobile */
  .pb .subscribe-section .pb-add-to-basket {
    font-size: 25px;
  }

  .pb .btn {
    width: 100%;
  }
}

/* Account creation loader overlay */
.pb .pb-account-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

.pb .pb-loader-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.pb .pb-loader-spinner {
  width: 60px;
  height: 60px;
  border: 5px solid #D3DB47;
  border-radius: 50%;
  border-top-color: transparent;
  animation: pb-spin 0.8s linear infinite;
}

.pb .pb-loader-text {
  font-family: var(--font-text-bold);
  font-size: 1.8rem;
  color: #000;
  margin: 0;
}

@media screen and (max-width: 600px) {

  .pb .dogplan-wrapper,
  .pb .dogmeals-wrapper {
    width: 100%;
  }

  .pb .dogplan-wrapper .grid,
  .pb .dogmeals-wrapper .grid {
    grid-template-columns: 1fr;
  }
}