/* ═══════════════════════════════════════════════════════
   Olgen & Anarda — 26 Shtator 2026
   Paleta: Liqeni i Komos — sage, krem, blu e zbehtë, ar
   ═══════════════════════════════════════════════════════ */

:root {
  --cream: #F7F2E7;
  --cream-deep: #EFE7D6;
  --paper: #FBF7EE;
  --stone: #E3D8BF;
  --stone-line: #CDBF9F;
  --sage: #7F9173;
  --sage-deep: #5F7157;
  --sage-soft: #A3B295;
  --blue: #9FB6C2;
  --blue-soft: #C5D5DA;
  --gold: #B9975B;
  --gold-soft: #D3BC8D;
  --ink: #3F4A3C;
  --ink-soft: #6B7365;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --script: 'Great Vibes', cursive;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* atributi hidden fiton gjithmonë, edhe mbi klasat me display */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--serif);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.no-scroll {
  overflow: hidden;
  height: 100dvh;
}

/* ═══════════════ ZARFI — HYRJA ═══════════════ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 120% 90% at 50% 40%, var(--paper) 0%, var(--cream) 55%, var(--cream-deep) 100%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .8s ease;
}

.intro.reveal {
  opacity: 0;
  pointer-events: none;
}

.intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  transition: transform 1s cubic-bezier(.4, 0, .3, 1), opacity .85s ease;
}

.intro.reveal .intro-inner {
  transform: scale(1.5);
  opacity: 0;
}

/* — zarfi — */

.envelope {
  position: relative;
  width: min(86vw, 400px);
  aspect-ratio: 10 / 7;
  perspective: 1100px;
  animation: envelope-float 5.5s ease-in-out infinite;
  filter: drop-shadow(0 22px 34px rgba(95, 113, 87, .18));
}

.intro.opening .envelope {
  animation: none;
}

@keyframes envelope-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.env-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, #EDE4D0, #E4D9C0);
  border: 1px solid rgba(185, 151, 91, .38);
  border-radius: 8px;
}

.env-letter {
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 7%;
  top: 8%;
  bottom: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: var(--paper);
  border: 1px solid rgba(185, 151, 91, .3);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(63, 74, 60, .08);
  transition: transform .75s cubic-bezier(.25, .7, .3, 1);
}

.envelope.letter-up .env-letter {
  transform: translateY(-48%) scale(1.03);
}

.env-letter-script {
  font-family: var(--script);
  font-size: clamp(1.9rem, 9vw, 2.6rem);
  color: var(--sage-deep);
  line-height: 1;
}

.env-letter-script em {
  font-style: normal;
  color: var(--gold);
}

.env-letter-rule {
  width: 52px;
  height: 1px;
  background: var(--gold-soft);
}

.env-letter-date {
  font-size: .85rem;
  letter-spacing: .35em;
  color: var(--ink-soft);
  padding-left: .35em; /* balancon letter-spacing */
}

.env-pocket {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(175deg, #F6F0E1 0%, #EFE7D3 60%, #E9DFC8 100%);
  border-radius: 8px;
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 -2px 3px rgba(95, 113, 87, .12));
}

.env-flap {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(180deg, #EBE1CB 0%, #E2D6BA 92%);
  border-radius: 8px 8px 0 0;
  clip-path: polygon(0 0, 100% 0, 50% 62%);
  transform-origin: 50% 0;
  transition: transform .75s cubic-bezier(.55, .06, .35, .95);
  backface-visibility: visible;
}

.envelope.flap-open .env-flap {
  transform: rotateX(-178deg);
}

.envelope.flap-behind .env-flap {
  z-index: 1;
}

/* — vula e dyllit — */

.seal {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 62%;
  width: clamp(72px, 22vw, 92px);
  height: clamp(72px, 22vw, 92px);
  transform: translate(-50%, -50%);
}

.seal svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(95, 113, 87, .35));
}

.intro.opening .seal {
  animation: seal-break .5s cubic-bezier(.5, 0, .7, .4) forwards;
}

@keyframes seal-break {
  0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  30%  { transform: translate(-50%, -50%) scale(1.14) rotate(-5deg); opacity: 1; }
  100% { transform: translate(-50%, -22%) scale(.25) rotate(30deg); opacity: 0; }
}

/* — udhëzimi — */

.tap-hint {
  margin-top: 2.4rem;
  font-size: .82rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-left: .32em;
  animation: hint-pulse 2.6s ease-in-out infinite;
  transition: opacity .4s ease;
}

.intro.opening .tap-hint {
  animation: none; /* animacioni ka përparësi mbi opacity — duhet hequr */
  opacity: 0;
}

@keyframes hint-pulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

/* ═══════════════ HERO ═══════════════ */

.hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-scene svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* mjegull e lehtë kremi pas tekstit, për lexueshmëri */
.hero-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 95% 46% at 50% 27%,
    rgba(248, 243, 231, .92) 0%,
    rgba(248, 243, 231, .5) 48%,
    rgba(248, 243, 231, 0) 74%
  );
}

/* shkëlqim i lehtë i currilit të ujit */
.hero-scene .jet {
  animation: jet-shimmer 3.4s ease-in-out infinite;
}

@keyframes jet-shimmer {
  0%, 100% { opacity: .8; }
  50%      { opacity: .5; }
}

.hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(88px, 16vh, 150px) 1.5rem 0;
}

.hero-script {
  font-family: var(--script);
  font-size: clamp(1.35rem, 5.6vw, 2.1rem);
  color: var(--sage-deep);
  margin-bottom: .9rem;
}

.hero-names {
  font-weight: 500;
  font-size: clamp(2.9rem, 12.5vw, 5.4rem);
  line-height: 1.08;
  letter-spacing: .02em;
  color: var(--ink);
}

.hero-names .amp {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  font-size: .78em;
  padding: 0 .06em;
}

.divider {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 1.4rem 0 1.3rem;
}

.divider-line {
  width: clamp(42px, 12vw, 76px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}

.divider-line:last-child {
  background: linear-gradient(90deg, var(--gold-soft), transparent);
}

.divider-leaf {
  width: 34px;
  height: 14px;
}

.divider-leaf.flipped {
  transform: scaleX(-1);
}

.hero-welcome {
  font-style: italic;
  font-size: clamp(1.05rem, 4.4vw, 1.4rem);
  color: var(--ink-soft);
  margin-bottom: .85rem;
}

.hero-date {
  font-size: clamp(1rem, 4vw, 1.25rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink);
  padding-left: .34em;
}

/* — shfaqja e shkallëzuar pas hapjes së zarfit — */

.hero-content > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .6, .2, 1);
}

.hero.is-visible .hero-content > * {
  opacity: 1;
  transform: none;
}

.hero.is-visible .hero-content > *:nth-child(1) { transition-delay: .25s; }
.hero.is-visible .hero-content > *:nth-child(2) { transition-delay: .45s; }
.hero.is-visible .hero-content > *:nth-child(3) { transition-delay: .65s; }
.hero.is-visible .hero-content > *:nth-child(4) { transition-delay: .8s; }
.hero.is-visible .hero-content > *:nth-child(5) { transition-delay: .95s; }

/* — treguesi i zbritjes — */

.scroll-indicator {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(1.4rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1s ease 1.6s;
}

.hero.is-visible .scroll-indicator {
  opacity: 1;
}

.scroll-track {
  display: block;
  width: 1px;
  height: 52px;
  background: rgba(251, 247, 238, .55); /* krem — dallohet mbi gjelbërimin */
  position: relative;
  overflow: hidden;
}

.scroll-dot {
  position: absolute;
  left: -1.5px;
  top: -8px;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--gold);
  animation: scroll-drop 2.2s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes scroll-drop {
  0%   { transform: translateY(0); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(60px); opacity: 0; }
}

/* — seksionet e ardhshme: shfaqje me scroll — */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .6, .2, 1);
}

.reveal-on-scroll.in-view {
  opacity: 1;
  transform: none;
}

/* ═══════════════ LËVIZJE E REDUKTUAR ═══════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .envelope,
  .tap-hint,
  .scroll-dot,
  .hero-scene .jet {
    animation: none;
  }

  .env-flap,
  .env-letter,
  .intro-inner,
  .hero-content > *,
  .reveal-on-scroll {
    transition-duration: .25s;
  }

  .intro.reveal .intro-inner {
    transform: none;
  }

  .hero-content > *,
  .reveal-on-scroll {
    transform: none;
  }
}

/* ═══════════════ SEKSIONET ═══════════════ */

.section {
  padding: clamp(4.5rem, 10vh, 7rem) 1.5rem;
}

.section-head {
  max-width: 640px;
  margin: 0 auto clamp(2.6rem, 6vw, 3.6rem);
  text-align: center;
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin-bottom: 1.2rem;
}

.ornament span {
  width: clamp(44px, 12vw, 64px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}

.ornament span:last-child {
  background: linear-gradient(90deg, var(--gold-soft), transparent);
}

.ornament i {
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.section-title {
  font-weight: 500;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1.12;
  color: var(--ink);
}

.section-sub {
  font-style: italic;
  font-size: clamp(1rem, 4.2vw, 1.25rem);
  color: var(--ink-soft);
  margin-top: .55rem;
}

/* ═══════════════ DEKORIME — MOTIVE SVG NËPËR SEKSIONE ═══════════════ */

.section,
.site-footer {
  position: relative;
}

.corner-deco {
  position: absolute;
  pointer-events: none;
  opacity: .5;
  z-index: 0;
}

.corner-deco svg {
  display: block;
  width: 100%;
  height: auto;
}

.corner-deco.tl { top: .5rem; left: .5rem; width: clamp(34px, 7vw, 68px); }
.corner-deco.tr { top: .5rem; right: .5rem; width: clamp(34px, 7vw, 68px); transform: scaleX(-1); }
.corner-deco.bl { bottom: .5rem; left: .5rem; width: clamp(30px, 6vw, 58px); }
.corner-deco.br { bottom: .5rem; right: .5rem; width: clamp(30px, 6vw, 58px); transform: scaleX(-1); }

/* pika e dytë e vogël në qoshen e sipërme djathtas (numërimi mbrapsht) */
.corner-deco.tr-accent {
  top: calc(.5rem + 30px);
  right: clamp(.4rem, 3.5vw, 1.6rem);
  width: clamp(20px, 4.2vw, 34px);
  opacity: .4;
}

.site-footer .corner-deco {
  opacity: .6;
}

@media (max-width: 420px) {
  .corner-deco.bl,
  .corner-deco.br {
    display: none;
  }
}

/* ═══════════════ NUMËRIMI MBRAPSHT ═══════════════ */

.count-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.55rem, 2.4vw, 1.2rem);
  max-width: 640px;
  margin: 0 auto;
}

.count-card {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(185, 151, 91, .35);
  border-radius: 6px;
  padding: clamp(1rem, 4vw, 1.7rem) .25rem;
  text-align: center;
  box-shadow: 0 10px 26px rgba(95, 113, 87, .09);
}

.count-card::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(185, 151, 91, .16);
  border-radius: 4px;
  pointer-events: none;
}

.count-num {
  display: block;
  font-size: clamp(1.65rem, 7.5vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--sage-deep);
  font-variant-numeric: tabular-nums;
}

.count-label {
  display: block;
  margin-top: .4rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* varka si mbishkrim i heshtur nën kartat e numërimit */
.bg-boat {
  position: absolute;
  left: 50%;
  bottom: .25rem;
  transform: translateX(-50%);
  width: clamp(220px, 50vw, 380px);
  opacity: .15;
  z-index: -1;
  pointer-events: none;
}

.bg-boat svg {
  display: block;
  width: 100%;
  height: auto;
}

/* — festa e ditës: shfaqet kur mbërrin dita e dasmës — */

.confetti-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
}

.celebration-title {
  font-family: var(--script);
  font-size: clamp(2.4rem, 10vw, 3.4rem);
  color: var(--sage-deep);
  animation: step-in .7s ease;
}

.celebration-sub {
  font-style: italic;
  font-size: clamp(1.05rem, 4.2vw, 1.3rem);
  color: var(--ink-soft);
  margin-top: .6rem;
  margin-bottom: clamp(1.8rem, 5vw, 2.6rem);
}

@media (prefers-reduced-motion: reduce) {
  .celebration-title {
    animation: none;
  }
}

/* ═══════════════ DETAJET E DITËS ═══════════════ */

.details {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 14%, var(--cream-deep) 86%, var(--cream) 100%);
}

/* varka e vogël — flourish mes nëntitullit dhe kartës së vendit */
.section-boat {
  width: clamp(80px, 18vw, 120px);
  margin: 0 auto clamp(1.6rem, 4vw, 2.4rem);
}

.section-boat svg {
  display: block;
  width: 100%;
  height: auto;
}

.details-card {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}

.photo-frame {
  background: var(--paper);
  padding: 10px;
  border: 1px solid rgba(185, 151, 91, .4);
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(63, 74, 60, .14);
}

.photo-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

/* vendmbajtëse elegante kur fotoja mungon (shih komentet në index.html) */
.ph {
  display: none;
  width: 100%;
  aspect-ratio: 4 / 3;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: 2px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(251, 247, 238, .5), transparent 75%),
    linear-gradient(150deg, #E7E3D1 0%, #D9E0D6 55%, #CBD8D8 100%);
  color: var(--sage-deep);
}

.missing img { display: none; }
.missing .ph { display: flex; }

.ph-script {
  font-family: var(--script);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  line-height: 1;
}

.ph-note {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.details-info {
  text-align: center;
}

.venue-name {
  font-weight: 500;
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  color: var(--ink);
}

.info-rule {
  width: 56px;
  height: 1px;
  background: var(--gold-soft);
  margin: .9rem auto 1.2rem;
}

.info-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-size: clamp(1.1rem, 4.4vw, 1.3rem);
  color: var(--ink);
  margin-bottom: .7rem;
}

.info-line svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-gold {
  display: inline-block;
  margin-top: 1.4rem;
  padding: .9em 2.2em;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .35s ease, color .35s ease, opacity .35s ease;
}

.btn-gold:hover:not(:disabled),
.btn-gold:focus-visible:not(:disabled) {
  background: var(--gold);
  color: var(--paper);
}

.btn-gold:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ═══════════════ GALERIA — TRESHJA ═══════════════ */

.monogram-deco {
  width: clamp(120px, 30vw, 180px);
  margin: 0 auto .8rem;
}

.monogram-deco svg {
  display: block;
  width: 100%;
  height: auto;
}

.gallery-trio {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.9rem, 2.5vw, 1.5rem);
  align-items: center;
}

/* varka-vijëzim — mbishkrim shumë i lehtë pas fotove */
.bg-boat-outline {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 60vw, 440px);
  opacity: .1;
  z-index: 0;
  pointer-events: none;
}

.bg-boat-outline svg {
  display: block;
  width: 100%;
  height: auto;
}

.gallery-item {
  position: relative;
  z-index: 1;
  font: inherit;
  border: 1.5px solid rgba(185, 151, 91, .55);
  border-radius: 4px;
  padding: 8px;
  background: var(--paper);
  box-shadow: 0 20px 46px rgba(63, 74, 60, .17), 0 3px 10px rgba(63, 74, 60, .08);
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.gallery-item.g-center {
  grid-column: 1 / -1;
}

/* degëz gjethesh — vetëm në kornizën qendrore, si theksim i vetëm */
.g-flourish {
  position: absolute;
  top: -14px;
  right: -10px;
  width: clamp(26px, 6vw, 34px);
  opacity: .7;
  transform: rotate(18deg);
  pointer-events: none;
  z-index: 2;
}

.g-flourish svg {
  display: block;
  width: 100%;
  height: auto;
}

.gallery-item .thumb {
  display: block;
  overflow: hidden;
  border-radius: 2px;
}

.gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .6, .2, 1), filter .7s ease;
}

.gallery-item.g-center img,
.gallery-item.g-center .ph {
  aspect-ratio: 4 / 3;
}

.gallery-item.g-left .ph,
.gallery-item.g-right .ph {
  aspect-ratio: 1 / 1;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.05);
  filter: brightness(1.06) saturate(1.04);
}

.gallery-item.missing {
  cursor: default;
}

/* ═══════════════ LIGHTBOX ═══════════════ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(30, 36, 28, .92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .35s ease;
}

.lightbox-img {
  max-width: min(92vw, 900px);
  max-height: 84vh;
  border: 8px solid var(--paper);
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  transform: scale(.95);
  transition: transform .35s cubic-bezier(.2, .6, .2, 1);
}

.lightbox.open .lightbox-img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: calc(.6rem + env(safe-area-inset-top));
  right: 1rem;
  background: none;
  border: none;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  padding: .3rem .6rem;
}

body.lightbox-open {
  overflow: hidden;
}

/* ═══════════════ EKRANE TË GJERA ═══════════════ */

@media (min-width: 900px) {
  .hero-content {
    padding-top: clamp(110px, 17vh, 170px);
  }
}

@media (min-width: 820px) {
  .details-card {
    grid-template-columns: 1.1fr 1fr;
  }

  .gallery-trio {
    grid-template-columns: 1fr 1.45fr 1fr;
  }

  .gallery-item.g-center { grid-column: 2; grid-row: 1; }
  .gallery-item.g-left   { grid-column: 1; grid-row: 1; }
  .gallery-item.g-right  { grid-column: 3; grid-row: 1; }

  .gallery-item img,
  .gallery-item .ph,
  .gallery-item.g-center img,
  .gallery-item.g-center .ph {
    aspect-ratio: 3 / 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item img {
    transition: none;
  }

  .lightbox,
  .lightbox-img {
    transition: none;
  }
}

/* ═══════════════ RSVP — KONFIRMIMI ═══════════════ */

.rsvp {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 14%, var(--cream-deep) 86%, var(--cream) 100%);
}

.rsvp-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid rgba(185, 151, 91, .4);
  border-radius: 6px;
  padding: clamp(1.6rem, 5vw, 2.6rem);
  box-shadow: 0 18px 40px rgba(63, 74, 60, .14);
}

@keyframes step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* — karta "telefononi për të konfirmuar" — */

.rsvp-call-card {
  text-align: center;
  padding: clamp(2.4rem, 8vw, 3.6rem) clamp(1.4rem, 6vw, 2.4rem);
}

.phone-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: 1em 1rem;
  border: 1.5px solid var(--gold);
  border-radius: 4px;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--sage-deep);
  background: rgba(185, 151, 91, .07);
  text-decoration: none;
  transition: background .3s ease, color .3s ease, transform .15s ease;
}

#rsvp-phone-number {
  font-size: clamp(1.3rem, 6.5vw, 2.3rem);
  letter-spacing: .02em;
  white-space: nowrap;
}

.phone-cta:hover,
.phone-cta:focus-visible {
  background: var(--gold);
  color: var(--paper);
}

.phone-cta:active {
  transform: scale(.98);
}

.phone-cta[aria-disabled="true"] {
  color: var(--ink-soft);
  border-color: var(--stone-line);
  background: transparent;
  pointer-events: none;
}

.phone-cta-icon {
  width: clamp(18px, 5.5vw, 26px);
  height: clamp(18px, 5.5vw, 26px);
  flex-shrink: 0;
}

.phone-hint {
  margin-top: 1.1rem;
  font-style: italic;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* ═══════════════ FUNDI I FAQES ═══════════════ */

.site-footer {
  background: var(--sage-deep);
  text-align: center;
  padding: clamp(3rem, 8vh, 4.5rem) 1.5rem calc(2.4rem + env(safe-area-inset-bottom));
}

.site-footer .ornament i {
  border-color: var(--gold-soft);
}

.footer-names {
  font-family: var(--script);
  font-size: clamp(2rem, 8vw, 2.6rem);
  color: var(--cream);
  margin-top: 1.1rem;
}

.footer-date {
  margin-top: .7rem;
  font-size: .82rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(247, 242, 231, .75);
  padding-left: .3em;
}

.footer-closing {
  margin-top: 1.6rem;
  font-style: italic;
  font-size: .98rem;
  color: rgba(247, 242, 231, .78);
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.footer-credit {
  margin-top: .9rem;
  font-size: .74rem;
  letter-spacing: .08em;
  color: rgba(247, 242, 231, .5);
}

.footer-credit a {
  color: rgba(211, 188, 141, .8);
  text-decoration: none;
  border-bottom: 1px solid rgba(211, 188, 141, .35);
  transition: color .3s ease, border-color .3s ease;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: var(--gold-soft);
  border-color: var(--gold-soft);
}

/* ═══════════════ DITA E DASMËS — anashkalohet faqja normale ═══════════════ */

html.is-wedding-day .intro,
html.is-wedding-day .hero,
html.is-wedding-day main,
html.is-wedding-day .site-footer {
  display: none !important;
}

html.is-wedding-day body {
  overflow: auto !important;
  height: auto !important;
}

.day-of-page {
  display: none;
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  background: radial-gradient(ellipse 120% 70% at 50% 15%, var(--paper) 0%, var(--cream) 55%, var(--cream-deep) 100%);
  text-align: center;
  padding: clamp(3rem, 10vh, 5rem) 1.5rem calc(3rem + env(safe-area-inset-bottom));
}

html.is-wedding-day .day-of-page {
  display: block;
}

.day-of-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

.day-of-names {
  margin-top: .4rem;
}

.day-of-date {
  margin-top: .6rem;
  margin-bottom: clamp(2.4rem, 7vw, 3.4rem);
}