/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


 /* @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap'); */
 @import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Caveat:wght@400..700&family=Comfortaa:wght@300..700&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap');

/* :root, *, body — all base styles now live in application_redesign.css */

* {
  box-sizing: border-box;
  padding: 0; margin: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) transparent;
  font-size: 16px;
  /* user-select: none; */
}

.text-right {
  text-align: right;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.text-center {
  text-align: center !important;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gap-24 {
  gap: 24px
}

.gap-8 {
  gap: 8px
}

img {
  user-select: none;
  -drag: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

.text-shadow {
  text-shadow: var(--text-shadow);
}

html {
  scroll-behavior: smooth;
}

/* body styles moved to application_redesign.css */

.no-scroll {
  overflow: hidden;
  /* -webkit-overflow-scrolling: touch;
  touch-action: none;
  -ms-touch-action: none; */
}

.btn {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  scale: 1;
  transition: scale 0.5s;
}

.btn:hover {
  scale: 1.02;
}

.btn:active {
  opacity: 0.5;
}

section {
  display: flex;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  /* scroll-snap-align: center; */
}

.for-mobile {
  display: none;
}

/* Home section styles moved to application_redesign.css */

/* Education section — see application_redesign.css */

.services-grid-block, .contacts-grid-block {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  width: 50%;
  position: relative;
}

#show-gallery {
  margin-left: auto;
  margin-right: auto;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  padding: 16px 56px;
  border-radius: var(--border-radius);
  cursor: pointer;
}

ul li {
  margin-bottom: 8px;
  text-align: justify;
  hyphens: auto;
}

/* gallery */

#gallery {
  position: relative;
  scroll-snap-type: y mandatory;
  background-color: #D9D9D9;
  justify-content: center;
  min-height: 400px;
}













.cert-slider {
  padding: 80px 40px;
  background: #efefef;
  text-align: center;
}

.cert-title {
  font-size: 32px;
  margin-bottom: 12px;
}

.cert-subtitle {
  max-width: 720px;
  margin: 0 auto 48px;
  color: #6c7a80;
}

.slider-viewport {
  overflow: hidden;
  width: 100%;
  cursor: grab;
}

.slider-viewport:active {
  cursor: grabbing;
}

.slider-track {
  display: flex;
  gap: 32px;
  will-change: transform;
  transition: transform .5s ease-out;
  touch-action: pan-y;
}

.slide {
  width: 360px;
  max-width: 100vw;
  height: 260px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
  flex-shrink: 0;
  transition: transform .3s ease;
  position: relative;
}

/* :not(.loaded) */
.slide:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
  width: 25px;
  height: 25px;
  border-radius: 50px;
  border: 5px solid #99ABB6;
  border-top-color: var(--secondary-color);
  animation: loading 1s linear infinite;
}

.slide:has(img.loaded):before {
  display: none;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.slide:hover {
  transform: scale(1.08);
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 18px;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;

  flex-wrap: wrap;
  padding: 0 24px;
}

.pagination-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5db;
  cursor: pointer;
  transition: transform .3s ease, background .3s ease;
}

.pagination-dot.active {
  background: #5b7c8a;
  transform: scale(1.4);
}



.cert-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.cert-modal.active {
  display: block;
}

.cert-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px);
}

.cert-modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  animation: modalFade .35s ease;
}

.cert-modal-content img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 40px 80px rgba(0,0,0,.4);
}

.cert-modal .close-modal-icon {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  z-index: 100;
  transition: transform 0.5s;
}

.cert-modal .close-modal-icon:hover {
  transform: rotate(180deg);
}


@keyframes modalFade {
  from {
    opacity: 0;
    transform: scale(.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Prevent background scroll when modal open */
body.modal-open {
  overflow: hidden;
}













/* services — block 1: feature (photo + quote + CTA); block 2: two cards */

#services {
  min-height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(32px, 5vh, 64px);
  padding: clamp(48px, 7vh, 80px) 0;
  background-color: var(--bg-cream);
  /* allow the sticky feature image to pin against the viewport */
  overflow: visible;
}

/* ---- Block 1: full-width feature (photo pins below nav, body scrolls over it) ---- */
.services-feature {
  width: 100%;
  background: transparent;
  position: relative;
}

/* The image pins just below the fixed header, then the body slides up over it */
.services-feature-image {
  position: sticky;
  top: var(--header-height);
  z-index: 0;
}

.services-feature-image img {
  display: block;
  width: 100%;
  height: clamp(300px, 42vh, 520px);
  object-fit: cover;
  object-position: center;
}

/* Full-width opaque panel that covers the pinned image as it scrolls up.
   min-height must be >= the image height so it fully hides the image before
   the section scrolls on. */
.services-feature-body {
  position: relative;
  z-index: 1;
  background-color: var(--bg-cream);
  min-height: clamp(320px, 44vh, 540px);
  display: flex;
  align-items: center;
}

/* content stays constrained to a centered, readable width on the cream band */
.services-feature-inner {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(28px, 3.5vw, 52px) clamp(24px, 4vw, 64px);
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

.services-feature-quote {
  margin: 0;
  padding-left: clamp(18px, 2vw, 32px);
  border-left: 1px solid var(--sage-soft);
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.1vw, 2.05rem);
  line-height: 1.3;
  color: var(--ink);
}
.services-feature-quote span { display: block; margin-top: 0.5em; font-size: inherit; }

.services-feature-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(16px, 2vh, 26px);
}

.services-feature-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
}
.services-feature-tags li {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink-soft);
}

.services-feature-divider {
  width: 100%;
  height: 1px;
  background: var(--line);
}

/* ---- Block 2: the two service cards row ---- */
.services-cards {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 3vw, 40px);
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
}

/* the old central divider is replaced by the cards' own separation */
.services-separator { display: none; }

.services-grid-block {
  flex: 1 1 0;
  width: auto;
  margin: 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: clamp(24px, 2.4vw, 40px);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--box-shadow);
}

.services-card-title {
  width: auto;
  background: transparent;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
}

.services-card-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  margin: 16px auto 24px;
  background: var(--sage-soft);
}

.services-content-content {
  width: min(450px, 100%)
}

.services-content-list-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.services-content-list-line svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--sage);
}

.services-content-list-line span { flex: 1 }

/* ============ Block 2: "Формат роботи та запити" ============ */
.services-requests {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
}

.services-requests-title {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  margin-bottom: clamp(28px, 4vh, 48px);
}
.services-requests-title .rule {
  flex: 1;
  height: 1px;
  background: var(--sage-soft);
}
.services-requests-title h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-align: center;
}

.services-requests-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(20px, 2.5vw, 40px);
  /* stretch so the right column (photo) matches the chips column height */
  align-items: stretch;
}

.request-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--ink);
}
.chip-ic {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-cream-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage-dark);
  font-size: 14px;
}

.services-formats {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.format-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.format-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.format-card:hover { background: var(--bg-subtle-hover); transform: translateY(-2px); }
.format-ic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-cream-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage-dark);
  font-size: 16px;
}
.format-title {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.format-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.format-meta .arrow { color: var(--sage-dark); }

.services-note {
  background: var(--bg-cream-soft);
  border-left: 2px solid var(--sage);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
}
.services-note p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  line-height: 1.4;
  color: var(--ink);
}

/* Keep the photo its fixed size, but push it to the bottom of the column
   so it aligns with the last chip. */
.services-photo {
  margin-top: auto;
  margin-bottom: 8px;
}
.services-photo img {
  display: block;
  width: 100%;
  height: clamp(220px, 26vh, 340px);
  object-fit: cover;
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .services-requests { padding: 0 16px; }
  .services-requests-grid { grid-template-columns: 1fr; gap: 20px; }
  .request-chips { grid-template-columns: 1fr; }
  .format-cards { grid-template-columns: 1fr; }

  /* On mobile show "Формат роботи" (formats) first, then "Запити" (chips).
     Desktop keeps DOM order (chips | formats) since both titles are hidden. */
  .sr-title-formats   { order: 1; }
  .services-formats   { order: 2; }
  .sr-title-requests  { order: 3; }
  .request-chips      { order: 4; }
}

/* Contacts — fits one viewport: row 1 (content + photo) + row 2 (CTA) */

section#contacts {
  background-color: var(--bg-cream);
  flex-direction: column;
  align-items: stretch;
  /* min-height (not fixed height) so on short viewports the section grows and
     the CTA stays visible instead of being clipped */
  min-height: 100dvh;
  padding: 0;
  overflow: visible;
}

.contacts-top {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 4vw, 64px);
}

.contacts-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(16px, 2vh, 26px);
  padding: calc(var(--header-height) - clamp(8px, 1vh, 16px)) 0 clamp(20px, 3vh, 36px) clamp(24px, 4vw, 64px);
  min-width: 0;
}
.contacts-heading {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.contacts-lead {
  margin: 0;
  max-width: 52ch;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink-soft);
  border-left: 1px solid var(--sage-soft);
  padding-left: clamp(18px, 2vw, 32px);
}
.contacts-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(8px, 2vh, 24px);
}
.contact-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: clamp(16px, 1.6vw, 24px) 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  transition: background-color .2s ease, transform .2s ease;
}
.contact-method:hover { background: var(--bg-subtle-hover); transform: translateY(-2px); }
/* static (non-link) method — e.g. phone: no click affordance, no hover lift */
.contact-method--static { cursor: default; }
.contact-method--static:hover { background: var(--bg-subtle); transform: none; }

.cm-ic-icon {
  font-size: 52px;
}
.cm-ic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: var(--ink);
}
.cm-value { font-size: 0.9rem; color: var(--ink); }
.cm-label { font-size: 0.8rem; color: var(--ink-muted); }

.contacts-photo {
  position: relative;
  overflow: hidden;
  min-height: 0;
  border-top-left-radius: 40%;
}
.contacts-photo img {
  /* Absolutely positioned so the image doesn't drive the grid row height —
     the row is sized by the content column and the photo just fills it. */
  position: absolute;
  inset: 0;
  /* wider/taller than the container so ~30% bleeds off (clipped by overflow),
     shifting the visible frame; the transform nudges the framing left/up. */
  width: 143%;
  height: 112%;
  object-fit: cover;
  object-position: left top;
  transform: translate(-10%, -10%);
  display: block;
}

/* Row 2: CTA card — soft light panel matching the contacts-content width.
   Icon spans on the left; text on top, booking button below. */
.cta-card {
  flex-shrink: 0;
  align-self: stretch;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon body"
    "icon button";
  align-items: center;
  column-gap: clamp(18px, 2vw, 32px);
  row-gap: clamp(16px, 2vh, 24px);
  padding: clamp(24px, 2.6vw, 36px) clamp(24px, 2.8vw, 40px);
  background: var(--bg-cream-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(35, 35, 31, 0.06);
}
.cta-icon {
  grid-area: icon;
  width: clamp(64px, 5.2vw, 84px);
  height: clamp(64px, 5.2vw, 84px);
  border-radius: 50%;
  background: var(--sage-tint);
  color: var(--sage-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(24px, 2.2vw, 32px);
  flex-shrink: 0;
  padding: clamp(16px, 1.4vw, 22px);
}
.cta-icon img {
  width: 170%;
  height: 170%;
  object-fit: contain;
}
.cta-body {
  grid-area: body;
  min-width: 0;
}
.cta-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sage-dark);
}
.cta-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.cta-desc {
  margin: 14px 0 0;
  padding-left: clamp(14px, 1.2vw, 20px);
  border-left: 2px solid var(--sage-soft);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cta-button {
  grid-area: button;
  justify-self: start;
  white-space: nowrap;
}
section#contacts * {
  user-select: text;
}

.photo-image {
  aspect-ratio: 1 / 1;
  width: 70%;
  background-color: var(--primary-color);
  background-image: url("/assets/v2/profile-686edb78.webp");
  background-size: 130%;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 25%;
  border-radius: 50%;
  position: relative;
}

.contacts-grid-block {
  padding: 24px;
}

.contacts-grid-block:nth-child(2n) {
  align-items: normal;
  padding-top: 180px;
}

#contacts-info-container {
  width: min(500px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#contacts-info-container .contact-item {
  display: flex;
  align-items: center;
  gap: 8px
}

#contacts-info-container .contact-item i {
  color: var(--sage);
  width: 20px;
  text-align: center;
}

#contacts-info-container .contact-item a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

#contacts-info-container .contact-item a:hover {
  color: var(--sage-dark);
  text-decoration: underline;
}

#google-map {
  margin-top: 3rem;
  height: min(500px, 60%);
  width: 100%;
}

#phone-number i {
  animation: ring 3s ease-in-out infinite;
}

@keyframes ring {
  0% {
      transform: rotate(0deg);
  }
  5% {
      transform: rotate(15deg);
  }
  10% {
      transform: rotate(-15deg);
  }
  15% {
      transform: rotate(10deg);
  }
  20% {
      transform: rotate(-10deg);
  }
  25% {
      transform: rotate(5deg);
  }
  30% {
      transform: rotate(-5deg);
  }
  35% {
      transform: rotate(3deg);
  }
  40% {
      transform: rotate(-3deg);
  }
  45% {
      transform: rotate(1deg);
  }
  50% {
      transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}


/* Navbar styles moved to application_redesign.css */


/* Articles */

section.article-style {
  background-color: var(--secondary-color);
  padding: 100px 10% 24px 10%;
  gap: 32px;
  flex-direction: column;
  min-height: unset;
  counter-reset: footnotes footnote-elements;
  padding-bottom: 5rem;
}

section#articles {
  display: grid;
  --grid-gap: 28px;
  gap: var(--grid-gap);
  /* Responsive: each card is at least 200px wide, but never more than
     4 columns — the min track also grows to a quarter of the row, so a
     5th column can't fit. Drops to fewer columns (down to 1) as it narrows. */
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, max(200px, (100% - 3 * var(--grid-gap)) / 4)), 1fr)
  );
  align-items: stretch;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--box-shadow);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(45, 45, 42, 0.12);
}

.card .img {
  background-image: var(--background);
  background-position: center;
  background-size: cover;
  aspect-ratio: 4 / 3;
  transition: transform 0.4s ease;
}

.card:hover .img {
  transform: scale(1.04);
}

.card .date {
  padding: 18px 22px 0;
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-dark);
}

.card .title {
  padding: 8px 22px 24px;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

section.article-style p {
  text-indent: 24px;
  text-align: justify;
}

.text-align-justify {
  text-align: justify;
}


/* Article headings — serif, matching the rest of the site */
section.article-style h1,
section.article-style h2,
section.article-style h3,
section.article-style h4,
.article-title h2 {
  font-family: var(--font-serif);
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

section.article-style h1 {
  font-size: 3rem;
}

section.article-style h2 {
  font-size: 2.5rem;
}

section.article-style h3 {
  font-size: 2rem;
}

section.article-style h4 {
  font-size: 1.5rem;
}

/* Byline (the div right after the title) — muted */
.article-title + div {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin-bottom: 8px;
}

/* Non-hero article pages (index + show): the header has no hero behind it,
   so give it a solid ground + hairline so it doesn't blend into the cream. */
body:has(section.article-style) header {
  background: var(--bg-cream-soft);
  border-bottom: 1px solid var(--line);
}

/* Footnote links in text */
.footnote-item {
  counter-increment: footnotes;
  text-decoration: none;
}

.footnote-item:after {
  content: "[" counter(footnotes) "]";
  vertical-align: super;
  font-size: 60%;
  margin-left: .1em;
}

.footnote-element {
  counter-increment: footnote-elements;
}

.footnote-element:before {
  content: "[" counter(footnote-elements) "] ";
  vertical-align: super;
  font-size: 60%;
}
/* Footnote links in text */

section.article-style .articles-mobile-pre img {
  max-width: 600px;
  max-height: 350px;
}

/* nav .nav-cta styles moved to application_redesign.css */

/* ============ APPOINTMENT MODAL ============ */
.modal-backdrop {
  --modal-bg: #FBFAF6;
  --backdrop: rgba(35, 35, 31, 0.78);
  /* --ink / --ink-soft / --ink-muted inherit from :root (no local override) */
  --line: rgba(35, 35, 31, 0.12);
  --line-soft: rgba(35, 35, 31, 0.06);
  --accent-warm: var(--sage);
  --cream: #FBFAF6;
  --cream-deep: #ECE9E1;
  --serif: 'Lora', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;

  position: fixed;
  inset: 0;
  background: var(--backdrop);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  padding: 40px 20px;
  overflow-y: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: var(--sans);
  color: var(--ink);
}
.modal-backdrop.active { display: flex; animation: modalFadeIn 0.35s ease; }
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-backdrop * { color: inherit; }

.modal-backdrop .modal {
  background: var(--modal-bg);
  width: 100%;
  max-width: 560px;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04);
  animation: modalSlideUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  margin: auto;
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-backdrop .modal-header {
  padding: 36px 24px 32px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.modal-backdrop .modal-eyebrow {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-backdrop .modal-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent-warm);
}
.modal-backdrop .modal-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  color: var(--ink);
}
/* font-size:inherit defeats the global `* { font-size:16px }` reset so the
   accent word (e.g. the name) matches the heading size. */
.modal-backdrop .modal-title em { font-style: italic; color: var(--accent-warm); font-size: inherit; }

.modal-backdrop .modal-close {
  position: absolute;
  top: 24px; right: 24px;
  width: 36px; height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  transition: all 0.2s ease;
  border-radius: 50%;
  z-index: 2;
}
.modal-backdrop .modal-close:hover {
  background: var(--cream-deep);
  color: var(--ink);
  transform: rotate(90deg);
}
.modal-backdrop .modal-close svg { width: 16px; height: 16px; }

.modal-backdrop .modal-body { padding: 36px 24px 32px; }

.modal-backdrop .modal-loading {
  padding: 80px 48px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 16px;
}

.modal-backdrop .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.modal-backdrop .form-group {
  margin-bottom: 20px;
  position: relative;
}
.modal-backdrop .form-row .form-group { margin-bottom: 0; }

.modal-backdrop .form-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
  font-weight: 500;
}
/* required-field marker */
.modal-backdrop .form-label .req {
  color: var(--sage-dark);
  margin-left: 3px;
  font-weight: 600;
}
/* optional-field hint */
.modal-backdrop .form-label .optional {
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: none;
  font-weight: 400;
  font-style: italic;
}
.modal-backdrop .form-input {
  width: 100%;
  padding: 13px 0;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.3s ease;
  outline: none;
}
.modal-backdrop .form-input::placeholder { color: var(--ink-muted); font-weight: 300; }
.modal-backdrop .form-input:focus { border-bottom-color: var(--accent-warm); }

/* Segmented radio choices (consultation type / format) */
.modal-backdrop .option-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.modal-backdrop .option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Descriptive info cards under each option (duration/price, messengers, address) */
.modal-backdrop .option-info-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.modal-backdrop .option-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.modal-backdrop .option-info-ic {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 15px;
  color: var(--sage-dark);
}
.modal-backdrop .option-info-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.modal-backdrop .option-info-addr { color: var(--ink); }
.modal-backdrop .option-info-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-backdrop .option-info-line i {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--sage-dark);
}
/* stacked variant: icon+text on top, full-width centered row below */
.modal-backdrop .option-info--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.modal-backdrop .option-info-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.modal-backdrop .option-info-apps {
  display: flex;
  justify-content: center;
  gap: 16px;
  /* wrap so the last app drops to a centered second line when it doesn't fit */
  flex-wrap: wrap;
  row-gap: 14px;
}
.modal-backdrop .option-info-apps .app {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  text-align: center;
  color: var(--ink-muted);
}
.modal-backdrop .option-info-apps .app i {
  font-size: 18px;
  color: var(--ink);
}
.modal-backdrop .option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.modal-backdrop .option:hover { border-color: var(--ink-muted); }
.modal-backdrop .option:has(input:checked) {
  background: var(--btn-accent);
  border-color: var(--btn-accent);
  color: #fff;
}
.modal-backdrop .option:has(input:focus-visible) {
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
}

/* Rich selectable cards (consultation type / format) — option + info merged */
.modal-backdrop .choice-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal-backdrop .choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.modal-backdrop .choice-card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.modal-backdrop .choice-card:hover { border-color: var(--ink-muted); }
.modal-backdrop .choice-card:has(input:checked) {
  border-color: var(--btn-accent);
  box-shadow: inset 0 0 0 1px var(--btn-accent);
  background: rgba(110, 122, 88, 0.06);
}
.modal-backdrop .choice-card:has(input:focus-visible) {
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
}
/* radio indicator — vertically centered on the title's first line */
.modal-backdrop .choice-mark {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.modal-backdrop .choice-card:has(input:checked) .choice-mark {
  border-color: var(--btn-accent);
  background: var(--btn-accent);
}
.modal-backdrop .choice-card:has(input:checked) .choice-mark::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.modal-backdrop .choice-title {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.25;
  color: var(--ink);
  padding-right: 30px; /* keep clear of the checkmark */
  min-height: 2.5em;   /* align dividers when titles wrap differently */
  margin-bottom: 14px;
}
/* body: info lines below the title; divider aligns across cards via the
   fixed title min-height (not pinned to the bottom, which misaligns dividers) */
.modal-backdrop .choice-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.modal-backdrop .choice-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-backdrop .choice-line i {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--sage-dark);
}
.modal-backdrop .choice-addr {
  color: var(--ink);
}
.modal-backdrop .choice-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  row-gap: 12px;
  padding-left: 24px;
}
.modal-backdrop .choice-apps .app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  text-align: center;
  color: var(--ink-muted);
}
.modal-backdrop .choice-apps .app i {
  font-size: 18px;
  color: var(--sage-dark);
}

/* Numbered section head (serif title + description) */
.modal-backdrop .field-head {
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.modal-backdrop .field-num {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent-warm);
  font-weight: 500;
}
.modal-backdrop .field-head-text { min-width: 0; }
.modal-backdrop .field-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 6px;
}
.modal-backdrop .field-title .req {
  color: var(--sage-dark);
  margin-left: 4px;
  font-weight: 600;
}
.modal-backdrop .field-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Реквізити delivery method — selectable icon cards */
.modal-backdrop .delivery-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.modal-backdrop .delivery-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.modal-backdrop .delivery-card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.modal-backdrop .delivery-card:hover { border-color: var(--ink-muted); }
/* temporarily unavailable channel (Telegram/WhatsApp) — visible but not selectable.
   Kept interactive (no pointer-events:none) so the not-allowed cursor shows; the
   disabled radio still blocks selection. Grayscale + dimming = clear disabled look. */
.modal-backdrop .delivery-card--disabled {
  opacity: 0.5;
  filter: grayscale(1);
  cursor: not-allowed;
}
.modal-backdrop .delivery-card--disabled:hover { border-color: var(--line); }
.modal-backdrop .delivery-card:has(input:checked) {
  border-color: var(--btn-accent);
  box-shadow: inset 0 0 0 1px var(--btn-accent);
  background: rgba(110, 122, 88, 0.06);
}
.modal-backdrop .delivery-card:has(input:focus-visible) {
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
}
/* radio indicator in the top-right corner */
.modal-backdrop .delivery-mark {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.modal-backdrop .delivery-card:has(input:checked) .delivery-mark {
  border-color: var(--btn-accent);
  background: var(--btn-accent);
}
.modal-backdrop .delivery-card:has(input:checked) .delivery-mark::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* icon disc */
.modal-backdrop .delivery-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--sage-dark);
  font-size: 22px;
  margin-bottom: 14px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.modal-backdrop .delivery-ic i {
  font-size: 130%;
}
.modal-backdrop .delivery-card:has(input:checked) .delivery-ic {
  background: var(--btn-accent);
  color: #fff;
}
.modal-backdrop .delivery-title {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 4px;
}
.modal-backdrop .delivery-sub {
  font-size: 12px;
  color: var(--ink-muted);
}

.modal-backdrop .calendar-section {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.modal-backdrop .form-section-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.modal-backdrop .form-section-title::before {
  content: '01';
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent-warm);
  font-weight: 500;
}
.modal-backdrop .form-section-title.time::before { content: '02'; }

.modal-backdrop .calendar {
  background: #fff;
  border: 1px solid var(--line);
  padding: 20px;
}
.modal-backdrop .calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.modal-backdrop .calendar-month {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
}
.modal-backdrop .calendar-nav { display: flex; gap: 4px; }
.modal-backdrop .nav-btn {
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  transition: all 0.2s ease;
}
.modal-backdrop .nav-btn:hover {
  background: var(--btn-accent);
  color: #fff;
  border-color: var(--btn-accent);
}
.modal-backdrop .nav-btn svg { width: 12px; height: 12px; }
.modal-backdrop .calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 8px;
}
.modal-backdrop .weekday {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 6px 0;
  font-weight: 500;
}
.modal-backdrop .calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.modal-backdrop .day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  background: transparent;
  transition: all 0.2s ease;
  position: relative;
}
.modal-backdrop .day:hover:not(.disabled):not(.empty) { background: var(--cream-deep); }
.modal-backdrop .day.today { font-weight: 600; }
.modal-backdrop .day.today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--accent-warm);
  border-radius: 50%;
}
.modal-backdrop .day.selected {
  background: var(--btn-accent);
  color: #fff;
  font-weight: 500;
}
.modal-backdrop .day.selected::after { background: #fff; }
.modal-backdrop .day.disabled {
  color: var(--ink-muted);
  opacity: 0.35;
  cursor: not-allowed;
}
.modal-backdrop .day.empty { cursor: default; }

.modal-backdrop .time-section { margin-top: 32px; margin-bottom: 32px; }
.modal-backdrop .selected-date-display {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 16px;
  font-style: italic;
}
.modal-backdrop .selected-date-display strong {
  color: var(--ink);
  font-style: normal;
  font-weight: 500;
}
.modal-backdrop .time-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.modal-backdrop .time-slot {
  padding: 12px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.modal-backdrop .time-slot:hover:not(.unavailable) {
  border-color: var(--ink);
  background: var(--cream-deep);
}
.modal-backdrop .time-slot.selected {
  background: var(--btn-accent);
  color: #fff;
  border-color: var(--btn-accent);
}
.modal-backdrop .time-slot.unavailable {
  color: var(--ink-muted);
  background: var(--line-soft);
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Payment реквізити card on the booked confirmation screen — mirrors the email. */
.modal-backdrop .req-title {
  margin: 28px 0 12px;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  text-align: center;
}
.modal-backdrop .req-card {
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.modal-backdrop .req-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.modal-backdrop .req-row:last-child { border-bottom: none; }
.modal-backdrop .req-label {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  margin-bottom: 4px;
}
.modal-backdrop .req-value {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  word-break: break-word;
}
/* Numbers keep a hair of tracking for legibility, but the same Manrope
   weight/color as every other value so they read uniformly (like the bank). */
.modal-backdrop .req-value--mono {
  letter-spacing: 0.3px;
}
.modal-backdrop .req-value--purpose {
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
}
/* value + copy button on one line */
.modal-backdrop .req-value-line {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-backdrop .req-value-line .req-value {
  flex: 1;
  min-width: 0;
}
.modal-backdrop .req-copy {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.modal-backdrop .req-copy:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
  background: var(--bg-subtle);
}
.modal-backdrop .req-copy.copied {
  color: var(--sage-dark);
  border-color: var(--sage-dark);
}

.modal-backdrop .notice {
  margin-top: 32px;
  padding: 18px 20px;
  background: var(--cream);
  border-left: 2px solid var(--accent-warm);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.modal-backdrop .notice-icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--accent-warm);
  margin-top: 2px;
}
.modal-backdrop .notice-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: justify;
}

.modal-backdrop .modal-footer {
  padding: 24px 24px 32px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
}
.modal-backdrop .footer-meta {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-muted);
}
.modal-backdrop .submit-btn {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--btn-accent);
  color: #fff;
  border: none;
  padding: 16px 32px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.modal-backdrop .submit-btn:hover:not(:disabled) { background: var(--btn-accent-dark); }
.modal-backdrop .submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.modal-backdrop .submit-btn .arrow { display: inline-block; margin-left: 8px; transition: transform 0.3s ease; }
.modal-backdrop .submit-btn:hover:not(:disabled) .arrow { transform: translateX(4px); }

@media (max-width: 768px) {
  .modal-backdrop { padding: 0; }
  .modal-backdrop .modal { max-width: 100%; min-height: 100vh; }
  .modal-backdrop .modal-header { padding: 32px 24px 24px; }
  .modal-backdrop .modal-title { font-size: 28px; }
  .modal-backdrop .modal-body { padding: 28px 24px; }
  .modal-backdrop .modal-footer { padding: 20px 24px 32px; flex-direction: column; align-items: stretch; }
  .modal-backdrop .submit-btn { width: 100%; }
  .modal-backdrop .footer-meta { text-align: center; }
  .modal-backdrop .form-row { grid-template-columns: 1fr; gap: 20px; }
  .modal-backdrop .form-row .form-group { margin-bottom: 0; }
  .modal-backdrop .time-slots { grid-template-columns: repeat(3, 1fr); }
  .modal-backdrop .delivery-group { gap: 8px; }
  .modal-backdrop .delivery-card { padding: 20px 8px 16px; }
  .modal-backdrop .delivery-ic { width: 46px; height: 46px; font-size: 18px; margin-bottom: 10px; }
  .modal-backdrop .delivery-title { font-size: 15px; }
  .modal-backdrop .delivery-sub { display: none; }

  .modal-backdrop .choice-group { gap: 8px; }
  .modal-backdrop .choice-card { padding: 14px 12px 14px; }
  .modal-backdrop .choice-title { font-size: 15px; padding-right: 26px; }
  .modal-backdrop .choice-addr,
  .modal-backdrop .choice-apps { padding-left: 0; }
  .modal-backdrop .choice-apps { gap: 10px; justify-content: space-between; }
}