:root {
  --pb-ink: #1d2b23;
  --pb-muted: #66736b;
  --pb-green: #3f7155;
  --pb-green-dark: #2c543d;
  --pb-green-soft: #edf5ef;
  --pb-cream: #faf8f2;
  --pb-border: #dce5de;
  --pb-radius: 1rem;
  --pb-shadow: 0 1rem 2.5rem rgba(29, 43, 35, .09);
}

html {
  min-height: 100%;
  font-size: 14px;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  color: var(--pb-ink);
  background: #fff;
}

a {
  text-underline-offset: .18em;
}

.btn {
  border-radius: .7rem;
  font-weight: 700;
}

.btn-success {
  --bs-btn-bg: var(--pb-green);
  --bs-btn-border-color: var(--pb-green);
  --bs-btn-hover-bg: var(--pb-green-dark);
  --bs-btn-hover-border-color: var(--pb-green-dark);
}

.btn-outline-success {
  --bs-btn-color: var(--pb-green);
  --bs-btn-border-color: var(--pb-green);
  --bs-btn-hover-bg: var(--pb-green);
  --bs-btn-hover-border-color: var(--pb-green);
}

.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--pb-green);
  box-shadow: 0 0 0 .25rem rgba(63, 113, 85, .2);
}

.site-header {
  z-index: 1020;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
}

.navbar-brand img {
  display: block;
  width: auto;
  height: 42px;
}

.site-header .navbar .nav-link {
  color: var(--pb-ink);
  font-weight: 650;
}

.site-header .navbar .nav-link:hover,
.site-header .navbar .nav-link:focus {
  color: var(--pb-green);
}

.admin-header .navbar-brand,
.admin-header .nav-link {
  color: rgba(255, 255, 255, .84);
}

.admin-header .navbar-brand:hover,
.admin-header .navbar-brand:focus,
.admin-header .nav-link:hover,
.admin-header .nav-link:focus {
  color: #fff;
}

.admin-header .nav-link {
  font-weight: 650;
}

.admin-header .navbar-toggler {
  border-color: rgba(255, 255, 255, .45);
}

.contact-notification {
  position: sticky;
  top: 0;
  z-index: 1020;
  padding: .85rem 1rem;
  color: #fff;
  background: #b42318;
  border-bottom: 4px solid #7a170f;
  box-shadow: 0 .25rem .8rem rgba(0, 0, 0, .28);
}

.contact-notification[hidden],
.contact-notification-warning[hidden] {
  display: none;
}

.contact-notification-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 100%;
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
}

.contact-notification-inner strong {
  overflow-wrap: anywhere;
}

.contact-notification-warning {
  margin-top: .5rem;
  font-weight: 700;
}

.contact-message-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.contact-message-preview {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .contact-notification-inner {
    align-items: stretch;
    flex-direction: column;
  }
}

.site-footer {
  color: var(--pb-muted);
  background: var(--pb-cream);
}

.site-footer a {
  color: var(--pb-ink);
}

.hero-section {
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 7rem) !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(63, 113, 85, .11), transparent 34rem),
    var(--pb-cream);
}

.hero-section h1 {
  max-width: 12ch;
  font-size: clamp(2.7rem, 5vw, 5rem);
  letter-spacing: -.045em;
  line-height: 1.02;
}

.hero-section .lead {
  max-width: 58ch;
  color: var(--pb-muted);
}

.hero-image {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 2rem 5rem 2rem 5rem;
  object-fit: cover;
  box-shadow: var(--pb-shadow);
}

.eyebrow {
  display: block;
  color: var(--pb-green);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.section-block {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.section-heading {
  max-width: 720px;
  margin-bottom: 2.5rem;
}

.section-heading.text-center {
  margin-inline: auto;
}

.section-heading h1,
.section-heading h2 {
  margin-top: .55rem;
  margin-bottom: .8rem;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.035em;
}

.section-heading p {
  color: var(--pb-muted);
  font-size: 1.12rem;
}

.feature-card,
.city-card,
.plan-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  background: #fff;
}

.feature-card h3,
.city-card h3,
.plan-card h3 {
  margin-block: .8rem;
  font-size: 1.45rem;
  font-weight: 800;
}

.feature-card p,
.city-card p {
  color: var(--pb-muted);
}

.step-number {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--pb-green);
  font-weight: 800;
}

.plan-card {
  padding: 2rem;
  box-shadow: 0 .65rem 2rem rgba(29, 43, 35, .06);
}

.plan-kicker {
  color: var(--pb-green);
  font-weight: 800;
}

.price-pair {
  margin-block: 1rem;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.plan-facts,
.summary-list {
  margin-bottom: 1.5rem;
}

.plan-facts div,
.summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .7rem;
  border-bottom: 1px solid var(--pb-border);
}

.plan-facts dt,
.summary-list dt {
  color: var(--pb-muted);
  font-weight: 500;
}

.plan-facts dd,
.summary-list dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
}

.closing-cta,
.menu-subscription-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 1.5rem;
  color: #fff;
  background: var(--pb-green-dark);
}

.closing-cta h2,
.menu-subscription-cta h2 {
  margin-block: .5rem;
  font-weight: 800;
}

.closing-cta p,
.menu-subscription-cta p {
  margin: 0;
  color: rgba(255, 255, 255, .75);
}

.page-header {
  margin-bottom: 2rem;
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--pb-cream);
}

.page-header h1 {
  margin-block: .5rem;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -.04em;
}

.page-header p {
  max-width: 62ch;
  margin: 0;
  color: var(--pb-muted);
  font-size: 1.15rem;
}

.empty-state {
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px dashed #b9c9bd;
  border-radius: var(--pb-radius);
  text-align: center;
  background: var(--pb-green-soft);
}

.empty-state.compact {
  padding: 1.5rem;
}

.empty-state h2,
.empty-state h3 {
  font-weight: 800;
}

.empty-state p {
  color: var(--pb-muted);
}

.choice-pills,
.week-selector,
.day-selector {
  display: flex;
  gap: .65rem;
  overflow-x: auto;
  padding: .15rem .15rem .65rem;
  scrollbar-width: thin;
}

.choice-pill,
.week-option,
.day-option {
  flex: 0 0 auto;
  border: 1px solid var(--pb-border);
  border-radius: .8rem;
  color: var(--pb-ink);
  background: #fff;
  text-decoration: none;
}

.choice-pill {
  padding: .7rem 1.1rem;
  font-weight: 750;
}

.week-option {
  display: flex;
  min-width: 150px;
  flex-direction: column;
  padding: .8rem 1rem;
}

.week-option span {
  color: var(--pb-muted);
  font-size: .75rem;
}

.day-option {
  display: flex;
  min-width: 100px;
  flex: 1 0 100px;
  flex-direction: column;
  align-items: center;
  padding: .8rem .65rem;
  text-transform: capitalize;
}

.day-option span {
  color: var(--pb-muted);
  font-size: .82rem;
}

.choice-pill:hover,
.week-option:hover,
.day-option:hover {
  border-color: var(--pb-green);
  color: var(--pb-green);
}

.choice-pill.is-active,
.week-option.is-active,
.day-option.is-active {
  border-color: var(--pb-green);
  color: #fff;
  background: var(--pb-green);
}

.choice-pill.is-active span,
.week-option.is-active span,
.day-option.is-active span {
  color: rgba(255, 255, 255, .8);
}

.selected-menu-day {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--pb-border);
  border-radius: 1.25rem;
  box-shadow: 0 .75rem 2.5rem rgba(29, 43, 35, .06);
}

.selected-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--pb-border);
}

.selected-menu-header h2 {
  margin: .35rem 0 0;
  font-weight: 800;
  text-transform: capitalize;
}

/* The shared preview adapts to its own width, including the reschedule sidebar. */
.menu-day-preview {
  container-type: inline-size;
}

/* Дневното меню беше почти безцветно — бяло по бяло с едва различими
   бордове, така че ястията и макросите се сливаха. Първият опит с фини
   оттенъци се оказа невидим; тук границите и заливките са достатъчно
   тъмни, за да се четат от пръв поглед. */
.menu-day-preview [data-menu-preview-macros] {
  background: #e4f1e9;
  border: 2px solid #6fae8b;
}

.menu-day-preview [data-menu-preview-meals] {
  border: 2px solid #9c968e;
  box-shadow: 0 .5rem 1.5rem rgba(29, 43, 35, .12);
}

/* Разделителите между ястията — иначе списъкът изглежда като едно цяло. */
.menu-day-preview [data-menu-preview-meals] > div {
  border-bottom: 1px solid #cfc9c1;
}

.menu-day-preview .menu-preview-detail {
  background: #e9f3ed;
  border: 2px solid #6fae8b;
  box-shadow: 0 .5rem 1.5rem rgba(29, 43, 35, .12);
}

.menu-day-preview .menu-preview-inline {
  background: #e9f3ed;
  border-top: 2px solid #6fae8b;
}

.menu-day-preview .menu-preview-detail {
  display: none;
}

@container (min-width: 640px) {
  .menu-day-preview [data-menu-preview-macros] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Изравняване на височините на списъка с ястията и детайла. Прави се тук,
   за да остане налично и ако Tailwind stylesheet-ът не се зареди. */
.menu-day-preview [data-menu-preview-content] {
  align-items: stretch;
}

.menu-day-preview [data-menu-preview-meals],
.menu-day-preview .menu-preview-detail {
  align-self: stretch;
  height: 100%;
}

@container (min-width: 960px) {
  .menu-day-preview [data-menu-preview-content] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .menu-day-preview [data-menu-preview-meals] {
    grid-column: span 7;
  }
  .menu-day-preview .menu-preview-detail {
    display: block;
    grid-column: span 5;
  }
  .menu-day-preview .menu-preview-inline {
    display: none;
  }
}

.date-pagination {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pb-border);
}

.menu-subscription-cta {
  margin-top: 2rem;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr);
  gap: 2rem;
  /* Гридът остава stretch по подразбиране — иначе aside-ът е с височината
     на карточката и position: sticky на .summary-card не може да "пътува"
     при скрол (секцията с цената не би следвала курсора). */
}

.summary-card,
.checkout-form,
.form-card {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  background: #fff;
  box-shadow: var(--pb-shadow);
}

.summary-card {
  position: sticky;
  top: 6.5rem;
}

/* Слайдваща лента с дължимата сума — малки екрани,
   където summary карточката не е sticky. */
.checkout-total-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--pb-border);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .14);
}

.checkout-total-bar.is-visible {
  display: flex;
}

.checkout-total-bar span {
  color: var(--pb-muted);
  font-weight: 600;
}

.checkout-total-bar strong {
  color: var(--pb-green);
  font-size: 1.15rem;
}

@media (min-width: 992px) {
  .checkout-total-bar.is-visible {
    display: none;
  }
}

body.pb-bar-on .checkout-layout {
  padding-bottom: 5.5rem;
}

.summary-card h2 {
  margin-block: .5rem;
  font-weight: 800;
}

.summary-total {
  font-size: 1.2rem;
}

.cod-note {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border-radius: .75rem;
  background: var(--pb-green-soft);
}

.cod-note span,
.payment-option span span,
.address-option span span {
  color: var(--pb-muted);
}

.checkout-section {
  margin: 0 0 2rem;
  padding: 0 0 2rem;
  border: 0;
  border-bottom: 1px solid var(--pb-border);
}

.checkout-section legend,
.checkout-section h2 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 800;
}

.address-options {
  display: grid;
  gap: .75rem;
}

.address-option,
.payment-option {
  display: flex;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid var(--pb-border);
  border-radius: .75rem;
  cursor: pointer;
}

.address-option:has(input:checked),
.payment-option:has(input:checked) {
  border-color: var(--pb-green);
  background: var(--pb-green-soft);
}

.address-option > span,
.payment-option > span {
  display: flex;
  flex-direction: column;
}

.address-option small {
  margin-left: .3rem;
  color: var(--pb-green);
}

.delivery-date-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}

.delivery-date-list span {
  padding: .55rem .75rem;
  border-radius: .6rem;
  color: var(--pb-green-dark);
  background: var(--pb-green-soft);
  font-weight: 700;
  text-transform: capitalize;
}

.calendar-months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.5rem;
}

.cal-title {
  margin-bottom: .6rem;
  font-weight: 800;
  text-transform: capitalize;
}

.cal-dow,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .35rem;
}

.cal-dow span {
  padding-bottom: .2rem;
  text-align: center;
  color: var(--pb-muted);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cal-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1px solid var(--pb-border);
  border-radius: .6rem;
  font-size: .9rem;
  user-select: none;
}

.cal-empty {
  border: 0;
}

.cal-pick {
  cursor: pointer;
}

.cal-pick:hover {
  border-color: var(--pb-green);
}

.cal-pick input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cal-pick:has(input:checked),
.cal-pick.is-selected {
  border-color: var(--pb-green);
  background: var(--pb-green);
  color: #fff;
  font-weight: 700;
}

.cal-off {
  border-style: dashed;
  color: #b3bdb6;
}

.cal-counter {
  margin: .9rem 0 .35rem;
}

.cal-validity {
  margin: 0 0 .75rem;
  padding: .85rem 1rem;
  border-radius: .75rem;
  background: var(--pb-green-soft);
  color: var(--pb-green-dark);
}

.bank-details {
  margin-top: .85rem;
  padding: 1rem;
  border: 1px dashed var(--pb-border);
  border-radius: .75rem;
  background: var(--pb-cream);
  white-space: pre-wrap;
}

/* Checkout: customer card data entry */
.card-entry {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--pb-border);
  border-radius: .75rem;
  background: #fff;
}
.card-entry-head {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: .85rem;
}
.card-entry-hint {
  color: var(--pb-muted);
  font-size: .85rem;
}
.card-entry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media (min-width: 640px) {
  .card-entry-grid {
    grid-template-columns: 1.5fr .7fr 1fr;
  }
}

.bank-details > strong {
  display: block;
  margin-bottom: .5rem;
}

.bank-details-text {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  white-space: pre-wrap;
}

.account-form {
  max-width: 680px;
}

.account-form.reschedule-page {
  max-width: 980px;
}

.reschedule-layout {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(0, 1.35fr);
  gap: 1.5rem;
}

.available-date-options {
  display: grid;
  gap: .6rem;
  max-height: 22rem;
  margin: 1.25rem 0 .5rem;
  padding: 0;
  overflow-y: auto;
  border: 0;
}

.available-date-options legend {
  margin-bottom: .65rem;
  font-size: .9rem;
  font-weight: 800;
}

.available-date-option {
  display: block;
  cursor: pointer;
}

.available-date-option > span {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .75rem .85rem;
  border: 1px solid var(--pb-border);
  border-radius: .7rem;
  background: #fff;
  text-transform: capitalize;
}

.available-date-option > span:hover,
.available-date-option:has(input:focus-visible) > span {
  border-color: var(--pb-green);
}

.available-date-option:has(input:focus-visible) > span {
  outline: .2rem solid rgba(35, 117, 76, .2);
}

.available-date-option:has(input:checked) > span {
  border-color: var(--pb-green);
  color: #fff;
  background: var(--pb-green);
}

.available-date-option small {
  color: var(--pb-muted);
  text-transform: none;
}

.available-date-option:has(input:checked) small {
  color: rgba(255, 255, 255, .8);
}

.account-nav {
  gap: .5rem;
}

.account-nav .nav-link {
  color: var(--pb-green);
  background: var(--pb-green-soft);
  font-weight: 700;
}

.address-card {
  margin-bottom: .75rem;
  padding: 1.25rem;
  border: 1px solid var(--pb-border);
  border-radius: .8rem;
}

.address-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.address-card h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
}

.address-card p {
  margin: .65rem 0 0;
}

.order-card {
  margin-bottom: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  background: #fff;
  box-shadow: 0 .65rem 2rem rgba(29, 43, 35, .06);
}

.order-card > header,
.order-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
}

.order-card > header h2 {
  margin: .3rem 0 0;
  font-size: 1.45rem;
  font-weight: 800;
}

.order-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.order-price strong {
  font-size: 1.35rem;
}

.order-facts,
.order-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--pb-border);
}

.order-facts > div,
.order-detail-grid > article {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem;
  background: var(--pb-green-soft);
}

.order-facts span,
.order-detail-grid span,
.order-detail-grid small {
  color: var(--pb-muted);
  font-size: .82rem;
}

.order-detail-grid {
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
}

.order-detail-grid > article {
  background: #fff;
}

.delivery-list {
  display: grid;
  gap: .75rem;
}

.delivery-list > article {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--pb-border);
  border-radius: .8rem;
}

.delivery-list h3,
.delivery-list p {
  margin: 0;
  text-transform: capitalize;
}

.delivery-date {
  display: grid;
  width: 3.5rem;
  min-width: 3.5rem;
  place-items: center;
  padding: .4rem;
  border-radius: .65rem;
  background: var(--pb-green-soft);
}

.delivery-date strong {
  font-size: 1.35rem;
  line-height: 1;
}

.delivery-date span {
  color: var(--pb-muted);
  text-transform: uppercase;
}

.formatted-copy {
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.formatted-copy p {
  margin: 0 0 1rem;
  white-space: pre-line;
}
.formatted-copy h2,
.formatted-copy h3 {
  margin: 1.5rem 0 .75rem;
  font-weight: 700;
}
.formatted-copy h2 { font-size: 1.5rem; }
.formatted-copy h3 { font-size: 1.25rem; }
.formatted-copy ul,
.formatted-copy ol {
  margin: 0 0 1rem;
  padding-left: 1.75rem;
}
.formatted-copy ul { list-style: disc; }
.formatted-copy ol { list-style: decimal; }
.formatted-copy li { margin: .35rem 0; }

.legal-copy {
  max-width: 900px;
  white-space: normal;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 991.98px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .summary-card {
    position: static;
  }

  .order-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 767.98px) {
  .closing-cta,
  .menu-subscription-cta,
  .selected-menu-header,
  .order-card > header,
  .order-card > footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .order-price {
    align-items: flex-start;
  }

  .order-facts {
    grid-template-columns: 1fr;
  }

  .delivery-list > article {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .reschedule-layout {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 575.98px) {
  .navbar-brand img {
    height: 36px;
  }

  .hero-image {
    border-radius: 1.25rem 3rem 1.25rem 3rem;
  }

  .order-detail-grid {
    grid-template-columns: 1fr;
  }

  .date-pagination .btn {
    flex: 1;
  }
}


/* ==========================================================================
   Merged landing layout harmonization
   The shared _Layout.cshtml uses a compiled Tailwind stylesheet outside
   Development and the Play CDN in Development, both with preflight disabled,
   so Bootstrap keeps owning the base styles
   of the content pages. The rules below restore the few base behaviours the
   redesign relies on, scoped to the redesign containers (.pb-shell = top
   strip/header/footer, .pb-landing = the home page sections) so the
   Bootstrap content of the inner pages is left untouched.
   ========================================================================== */

/* Anchor jumps must clear the sticky 4rem header on every page. */
html {
  scroll-padding-top: 5rem;
}

/* Preflight's universal border reset, scoped to the redesign. The Tailwind
   stylesheet loads after this file, so border colour and width utilities win. */
.pb-shell *,
.pb-shell *::before,
.pb-shell *::after,
.pb-landing *,
.pb-landing *::before,
.pb-landing *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

/* Redesign links carry their own colour utilities; never underline them. */
.pb-shell a,
.pb-landing a {
  text-decoration: none;
}

/* Buttons in the redesign inherit typography (UA button font otherwise). */
.pb-shell button,
.pb-landing button {
  font-family: inherit;
  line-height: inherit;
}

/* Low specificity lets responsive Tailwind visibility/size utilities win. */
:where(.pb-landing) img {
  display: block;
  max-width: 100%;
}

/* Mobile hero text sits on the busy part of the photo; a soft white halo keeps it readable. */
@media (max-width: 1023.98px) {
  .pb-hero-glow {
    text-shadow: 0 0 6px #fff, 0 0 12px rgba(255, 255, 255, 0.9);
  }
}

/* Банерът: ястието е вдясно, текстът — вляво.
   Снимката е камиера и не може да се премести без да се реже, затова вместо
   да се „разширява“ с фалшив градиент (което оставя шев) лявата половина се
   измива с бяло. По този начин текстът в хедъра на секцията стои върху
   светъл фон, както и да е композирана снимката. */
.pb-hero-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.94) 28%,
    rgba(255, 255, 255, 0.72) 44%,
    rgba(255, 255, 255, 0.28) 56%,
    rgba(255, 255, 255, 0) 66%
  );
}

/* На телефон ястието е под текста, затова измиването е по-слабо и по-меко,
   иначе ще закрие снимката. */
@media (max-width: 1023.98px) {
  .pb-hero-wash {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.72) 42%,
      rgba(255, 255, 255, 0.3) 68%,
      rgba(255, 255, 255, 0) 100%
    );
  }
}

/* Tailwind also ships a .container; freeze the Bootstrap widths so the
   content pages keep their current layout at every breakpoint. */
@media (min-width: 576px) {
  .container { max-width: 540px !important; }
}

@media (min-width: 768px) {
  .container { max-width: 720px !important; }
}

@media (min-width: 992px) {
  .container { max-width: 960px !important; }
}

@media (min-width: 1200px) {
  .container { max-width: 1140px !important; }
}

@media (min-width: 1400px) {
  .container { max-width: 1320px !important; }
}

/* Bootstrap's .border utility sets the colour with !important, which would
   wash out the redesign's stone/emerald hairlines. These twins load after
   default.min.css, so they win on equal specificity. */
.border-stone-100 { border-color: #f5f5f4 !important; }
.border-stone-200 { border-color: #e7e5e4 !important; }
.border-stone-300 { border-color: #d6d3d1 !important; }
.border-stone-800 { border-color: #292524 !important; }
.border-stone-900 { border-color: #1c1917 !important; }
.border-stone-950 { border-color: #0c0a09 !important; }
.border-emerald-200 { border-color: #a7f3d0 !important; }
.border-emerald-700 { border-color: #047857 !important; }
.border-emerald-700\/50 { border-color: rgba(4, 120, 87, .5) !important; }

/* Homepage plan cards retain the original landing design. */
/* Картите с пакети стояха върху бледосива секция без сянка и с почти същия
   цвят на контура, така че изглеждаха като текст, а не като отделни карти.
   Първият опит с фино зеленикаво кантче се оказа невидим; тук контурът е
   тъмен, а лявът кант — плътен зелен, за да се чете разликата наведнъж. */
.pb-landing .pb-plan-card {
  padding: 2rem;
  border: 2px solid #9c968e;
  border-left: 6px solid #059669;
  /* Същият закръглен ръб като при бутоните с пакети в калкулатора (1rem), за
     да изглеждат двете части на страницата като едно цяло. */
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 .5rem 1.5rem rgba(29, 43, 35, .12);
  transition: box-shadow .15s ease, border-color .15s ease;
}

.pb-landing .pb-plan-card:hover {
  border-color: #047857;
  border-left-color: #065f46;
  box-shadow: 0 .75rem 2rem rgba(4, 120, 87, .2);
}

.pb-landing .pb-plan-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: .25rem 0 0;
}

/* Препоръчаният пакет изпъква още повече — по-плътен контур и по-дълбока
   сянка, иначе изглеждаше по-слаб от обикновените карти. */
.pb-landing .pb-plan-featured {
  border: 3px solid #047857;
  border-left-width: 8px;
  background: #f2faf5;
  box-shadow: 0 1rem 2.5rem rgba(4, 120, 87, .28);
}

/* Пакетите в калкулатора: контурът вече е тъмен, но без сянка изглеждат
   плоски. Лека сянка ги отделя от белия фон на секцията. */
#calculator [data-plan-id] {
  box-shadow: 0 .25rem .75rem rgba(29, 43, 35, .1);
}

#calculator [data-plan-id][aria-pressed='true'] {
  box-shadow: 0 .5rem 1.25rem rgba(4, 120, 87, .25);
}

.pb-plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 2rem);
  padding: .25rem .75rem;
  background: #047857;
  color: white;
  font-size: .625rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.pb-plan-order {
  border: 1px solid #1c1917;
  color: #0c0a09;
}

.pb-plan-order:hover {
  background: #1c1917;
  color: white;
}

.pb-plan-featured .pb-plan-order {
  border-color: #047857;
  background: #047857;
  color: white;
}

.pb-plan-featured .pb-plan-order:hover {
  border-color: #065f46;
  background: #065f46;
}

/* Промоция „безплатен ден за нови клиенти".
   Показва се на видно място във всяка карта, защото е основната причина да се избере
   пакетът, а не бележка под цената. Числото остава отделно, за да не се бърка с дните
   от пакета. */
.pb-plan-bonus {
      display: inline-flex;
      align-items: baseline;
      gap: .5rem;
      margin: .9rem 0 .2rem;
      padding: .55rem .9rem;
      border-radius: 999px;
      background: linear-gradient(135deg, #047857, #059669);
      color: #fff;
      box-shadow: 0 .35rem 1rem rgba(4, 120, 87, .28);
}

.pb-plan-bonus strong {
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.02em;
}

.pb-plan-bonus span {
      font-size: .8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      opacity: .95;
}

.pb-plan-bonus-note {
      margin-top: .5rem;
      font-size: .8rem;
      font-weight: 600;
      color: var(--pb-green);
}

/* Отстъпка за първа поръчка — отделен ред под цената, защото тя не е наложена
   на всеки: само на клиент, който още не е поръчвал. */
.pb-plan-first-order {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: .4rem .6rem;
      margin-top: .9rem;
      padding: .5rem .75rem;
      border: 1px dashed var(--pb-green);
      border-radius: .75rem;
      font-size: .85rem;
      color: var(--pb-green);
}

.pb-plan-first-order strong {
      font-weight: 700;
}

.pb-plan-first-order-note {
      font-weight: 600;
      opacity: .85;
}

/* Калкулаторът повтаря същото, но по-компактно. */
.pb-calc-bonus {
      display: block;
      margin-top: .45rem;
      padding: .3rem .5rem;
      border-radius: .5rem;
      background: #ecfdf5;
      color: #065f46;
      font-size: .75rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
}

.calendar-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
}

.delivery-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
  gap: 1.5rem;
  align-items: start;
}

.delivery-calendar-card,
.delivery-calendar-editor {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  background: #fff;
  box-shadow: 0 .65rem 2rem rgba(29, 43, 35, .06);
}

.delivery-calendar-card {
  overflow: hidden;
}

.delivery-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  border-bottom: 1px solid var(--pb-border);
}

.delivery-calendar-toolbar h2 {
  margin: 0;
  text-transform: capitalize;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  padding: .85rem 1.25rem;
  color: var(--pb-muted);
  font-size: .82rem;
}

.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.calendar-legend i {
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
}

.legend-delivery { background: var(--pb-green); }
.legend-available { background: #bce7c6; }
.legend-booked { background: #ffe3a3; }
.legend-unavailable { background: #e4e8e5; }

.delivery-calendar-weekdays,
.delivery-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.delivery-calendar-weekdays {
  border-top: 1px solid var(--pb-border);
  background: var(--pb-green-soft);
}

.delivery-calendar-weekdays span {
  padding: .65rem;
  text-align: center;
  color: var(--pb-muted);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.delivery-calendar-day {
  min-height: 8.5rem;
  padding: .45rem;
  border-top: 1px solid var(--pb-border);
  border-right: 1px solid var(--pb-border);
  background: #fff;
}

.delivery-calendar-day:nth-child(7n) {
  border-right: 0;
}

.delivery-calendar-day.is-outside-month {
  background: #f7f8f7;
  opacity: .58;
}

.delivery-calendar-day.date-state-available { background: #f0faf2; }
.delivery-calendar-day.date-state-alreadyscheduled { background: #fff8e7; }
.delivery-calendar-day.date-state-unavailable,
.delivery-calendar-day.date-state-beforecutoff { background: #f5f6f5; }
.delivery-calendar-day.date-state-current { box-shadow: inset 0 0 0 2px var(--pb-green); }

.calendar-date-button {
  display: grid;
  width: 2rem;
  height: 2rem;
  margin: 0 0 .35rem auto;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--pb-text);
  background: transparent;
  font-weight: 800;
}

.date-state-available .calendar-date-button {
  color: #fff;
  background: var(--pb-green);
}

.calendar-delivery-chip {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-top: .35rem;
  padding: .45rem .55rem;
  border: 1px solid #9acaaa;
  border-radius: .55rem;
  color: var(--pb-text);
  background: var(--pb-green-soft);
  text-align: left;
  line-height: 1.2;
}

.calendar-delivery-chip strong {
  color: var(--pb-green);
  font-variant-numeric: tabular-nums;
}

.calendar-delivery-chip span,
.calendar-delivery-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-delivery-chip.is-selected {
  outline: 3px solid rgba(43, 116, 67, .25);
  border-color: var(--pb-green);
}

.calendar-message {
  min-height: 1.5rem;
  margin: 0;
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--pb-border);
  color: var(--pb-muted);
}

.delivery-calendar-editor {
  position: sticky;
  top: 1rem;
  padding: 1.35rem;
}

.delivery-calendar-editor h2 {
  margin: .35rem 0;
  text-transform: capitalize;
}

.calendar-menu-preview {
  max-height: 25rem;
  overflow: auto;
  padding: 1rem;
  border-radius: .75rem;
  background: var(--pb-green-soft);
}

@media (max-width: 991.98px) {
  .delivery-calendar-layout {
    grid-template-columns: 1fr;
  }

  .delivery-calendar-editor {
    position: static;
  }
}


@media (max-width: 767.98px) {
  .calendar-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .delivery-calendar-weekdays {
    display: none;
  }

  .delivery-calendar-grid {
    grid-template-columns: 1fr;
  }

  .delivery-calendar-day {
    min-height: 0;
    border-right: 0;
  }

  .delivery-calendar-day.is-outside-month,
  .delivery-calendar-day:not(:has(.calendar-delivery-chip)):not(.date-state-available):not(.date-state-current):not(.date-state-alreadyscheduled) {
    display: none;
  }

  .calendar-date-button {
    width: auto;
    margin: 0 0 .35rem;
    padding: .25rem .5rem;
    border-radius: .45rem;
  }
}