/* Reusable building blocks: glass surface, buttons, section headings. */

/* Frosted glass surface */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--glass-fallback);
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: clamp(15px, 4.4vw, 17px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:active {
  transform: scale(0.97);
}

/* Both buttons are see-through glass; the main one is tinted pink → purple */
.btn--primary,
.btn--glass {
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
}

.btn--primary {
  color: #fff;
  background: var(--gradient-accent);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    var(--accent-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(90, 40, 120, 0.35);
}

.btn--glass {
  color: var(--accent-ink);
  background: rgba(255, 255, 255, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 10px 26px rgba(122, 60, 104, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.btn--wide {
  width: 100%;
}

/* Round icon button (header) */
.icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--accent-ink);
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--glass-border);
  transition: transform 0.2s ease;
}

.icon-btn:active {
  transform: scale(0.92);
}

/* ---- Text that floats directly on the film (no boxes) ---- */

/* Label + title (+ text) group at the top of a page */
.section-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Small label above a title, e.g. "/ منوی ما" */
.eyebrow-line {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--accent-ink);
  text-shadow: var(--glow);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 34px);
  font-weight: 800;
  line-height: 1.35;
  text-shadow: var(--glow);
}

.section-title--xl {
  font-size: clamp(32px, 9.5vw, 40px);
}

.section-text {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.9;
  color: var(--ink);
  text-shadow: var(--glow);
}

/* Highlighted word in a title: pink → purple */
.accent-text {
  background: linear-gradient(135deg, #e46aa9 0%, #8f5fd6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(255, 246, 251, 0.95));
}

/* A soft light haze behind floating text: keeps it readable, no edges */
.haze {
  position: relative;
  isolation: isolate;
}

.haze::before {
  content: "";
  position: absolute;
  inset: -16% -8%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 246, 251, 0.85) 40%, rgba(255, 246, 251, 0));
  pointer-events: none;
}

/* Two buttons side by side */
.actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

/* Small glass chip with an icon, e.g. the phone number */
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.36);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.8;
  white-space: nowrap;
}

.contact-chip .icon {
  width: 16px;
  height: 16px;
  color: var(--accent-ink);
}