@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {

  --font-display: 'Cinzel', serif;
  --font-body: 'Cormorant Garamond', serif;
  --font-ui: 'Inter', sans-serif;

  --silver: #bcc5d2;
  --silver-light: #d6dde7;

  --white: #ffffff;
  --soft-white: #d8d8d8;

  --card-bg: rgba(15, 15, 15, 0.72);

  --border: rgba(186, 197, 212, 0.24);

  --safe-area-tint: #101318;
  --page-background: var(--safe-area-tint);
  --safe-area-background:
    var(--safe-area-tint);

  --shadow:
    0 14px 46px rgba(0,0,0,0.48);

}

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

html,
body {

  margin: 0;
  padding: 0;

  width: 100%;
  min-height: 100%;

  overflow-x: hidden;

  scroll-behavior: smooth;

  background-color: var(--safe-area-tint);

  color: var(--white);

  font-family: var(--font-body);

  line-height: 1.35;
}

html {
  min-height: 100%;
  min-height: -webkit-fill-available;
  min-height: 100dvh;

  background: var(--page-background);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--safe-area-tint);
}

/* Hide scrollbar for Chrome, Safari, Edge */

::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Firefox */

html {
    scrollbar-width: none;
}

body {
    -ms-overflow-style: none;
    overflow-x: hidden;
    position: relative;
    isolation: isolate;

    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100dvh;
    overscroll-behavior-y: none;

  background: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 0;
}

body::before,
body::after {
  content: "";
  position: fixed;
  left: 0;
  width: 100vw;

  z-index: 2;
  pointer-events: none;

  background: var(--safe-area-background);
  background-size: cover;
  background-repeat: no-repeat;

  transform: translate3d(0,0,0);
}

body::before {
  top: 0;
  height: env(safe-area-inset-top, 0px);
}

body::after {
  bottom: 0;
  height: env(safe-area-inset-bottom, 0px);
}

body.safe-area-painted::before,
body.safe-area-painted::after {
  transform: translate3d(0,0,0.01px);
}

body > * {
  position: relative;
  z-index: 1;
}

html {
    overscroll-behavior: none;
}

body {
  overscroll-behavior: none;
}

/* =========================
   MAIN CONTAINER
========================= */

.container {

  width: 100%;
  max-width: 580px;
  margin: auto;

  position: relative;

  padding:
    calc(24px + env(safe-area-inset-top, 0px))
    calc(22px + env(safe-area-inset-right, 0px))
    calc(60px + env(safe-area-inset-bottom, 0px))
    calc(22px + env(safe-area-inset-left, 0px));
}

/* =========================
   TOP BAR
========================= */

.topbar {

  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 22px;

  color: rgba(198,214,236,0.86);

  font-family: var(--font-ui);

  font-size: 12px;
  font-weight: 500;

  letter-spacing: 2.5px;
  text-transform: uppercase;

  opacity: 0.9;
}

/* =========================
   HERO SECTION
========================= */

.hero {

  text-align: center;

  margin-bottom: 20px;
}

.hero h1 {

  font-family: var(--font-display);

  font-size: 65px;
  font-weight: 500;

  margin-top: 42px;

  letter-spacing: 6px;

  color: var(--silver);

  background:
    linear-gradient(
      110deg,
      #3e4756 0%,
      #cbd3de 28%,
      #95a1b1 52%,
      #eef2f7 64%,
      #5b6778 100%
    );
  background-size: 240% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: silver-text-shine-strong 3.6s ease-in-out infinite;

  margin-bottom: 18px;

  text-shadow:
    0 0 22px rgba(0,0,0,0.6);
}

.subtitle {

  font-family: var(--font-body);

  font-size: 19px;
  font-weight: 600;

  letter-spacing: 4.2px;
  text-transform: uppercase;

  color: var(--silver);

  margin-bottom: 12px;
}

.hotel-name {

  font-family: var(--font-body);
  font-weight: 500;

  font-size: 17px;

  letter-spacing: 2.2px;

  color: rgba(196,213,236,0.88);

  opacity: 0.85;
}

.hotel-name::after {

  content: "";

  display: block;

  width: 88px;
  height: 1px;

  margin: 24px auto 0;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(180,195,215,0.85),
      transparent
    );
}

/* =========================
   GENERAL SECTIONS
========================= */

.section {

  margin-top: 50px;
}

.section-title {

  text-align: center;

  font-family: var(--font-display);

  font-size: 34px;
  font-weight: 500;

  color: var(--silver);

  background:
    linear-gradient(
      110deg,
      #3e4756 0%,
      #cbd3de 30%,
      #95a1b1 56%,
      #eef2f7 70%,
      #5b6778 100%
    );
  background-size: 220% 100%;
  background-position: 10% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: silver-text-shine-soft 5.2s ease-in-out infinite;

  letter-spacing: 4px;

  margin-bottom: 22px;

  position: relative;
}

.section-title::after {
  display: none;
}

.section-text {

  font-family: var(--font-body);
  font-weight: 500;

  text-align: center;

  color: var(--soft-white);

  line-height: 1.58;

  font-size: 17px;

  max-width: 420px;

  margin:
    0 auto
    28px;
}

/* =========================
   RECOMMENDATIONS MENU
========================= */

.recommendations {

  margin-top: 34px;
}

.recommendations .section-text {

  color: rgba(196,213,236,0.9);
}

.rec-tabs {

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;

  margin-bottom: 16px;
}

.rec-tab {

  border: 1px solid rgba(166,180,201,0.3);
  border-radius: 14px;

  background:
    linear-gradient(
      150deg,
      rgba(24,30,38,0.84),
      rgba(12,16,22,0.76)
    );

  color: rgba(225,233,244,0.9);

  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;

  letter-spacing: 1px;
  text-transform: uppercase;

  padding: 10px 8px;

  cursor: pointer;

  transition:
    border-color 0.22s ease,
    transform 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}

.rec-tab:hover,
.rec-tab:focus-visible {

  border-color: rgba(184,198,218,0.58);
  color: rgba(242,247,255,0.97);

  transform: translateY(-1px);

  box-shadow: 0 10px 24px rgba(0,0,0,0.34);

  outline: none;
}

.rec-tab.is-active {

  border-color: rgba(184,198,218,0.66);

  background:
    linear-gradient(
      145deg,
      rgba(52,62,78,0.9),
      rgba(86,100,122,0.88),
      rgba(123,143,170,0.84)
    );

  color: rgba(248,252,255,0.97);

  box-shadow:
    0 12px 30px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(246,250,255,0.18);
}

.rec-panels {

  position: relative;
}

.rec-panel {

  display: none;
  gap: 10px;
}

.rec-panel.is-active {

  display: grid;
}

.rec-item {

  text-decoration: none;

  display: flex;
  flex-direction: column;
  gap: 4px;

  padding: 14px 15px;

  border-radius: 16px;
  border: 1px solid rgba(160,176,198,0.3);

  background:
    linear-gradient(
      155deg,
      rgba(18,24,32,0.84),
      rgba(9,13,19,0.76)
    );

  backdrop-filter: blur(10px);

  transition:
    border-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.rec-item:hover,
.rec-item:focus-visible {

  border-color: rgba(184,198,218,0.54);

  transform: translateY(-1px);

  box-shadow: 0 12px 30px rgba(0,0,0,0.38);

  outline: none;
}

.rec-name {

  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;

  letter-spacing: 1.1px;

  color: rgba(224,235,248,0.95);
}

.rec-meta {

  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;

  color: rgba(203,217,236,0.9);

  line-height: 1.35;
}

/* =========================
   PAYMENT BUTTONS
========================= */

.tip-button {

  width: 88%;
  margin-left: auto;
  margin-right: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  text-decoration: none;

  position: relative;

  overflow: hidden;

  isolation: isolate;

  padding:
    24px
    22px;

  margin-bottom: 30px;

  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      rgba(62,72,88,0.9),
      rgba(89,102,122,0.9),
      rgba(129,147,173,0.86),
      rgba(161,181,207,0.84)
    ),
    radial-gradient(
      circle at 20% 50%,
      rgba(255,255,255,0.08),
      transparent 50%
    );
  background-blend-mode: overlay;

  border:
    1px solid
    rgba(190,208,232,0.26);

  backdrop-filter: blur(18px);

  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.1);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;

  animation: tip-button-aura 1.2s cubic-bezier(0.35, 0, 0.2, 1) infinite;

  will-change: border-color, box-shadow;

  color: #0f131a;

  text-shadow:
    0 1px 0 rgba(195,214,238,0.18);
}

.tip-button::before {

  content: "";

  position: absolute;
  inset: -35%;

  background:
    linear-gradient(
      110deg,
      transparent 36%,
      rgba(239,246,255,0.16) 42%,
      rgba(246,251,255,0.56) 47%,
      rgba(255,255,255,0.82) 50%,
      rgba(246,251,255,0.58) 52.8%,
      rgba(120,141,168,0.22) 57.5%,
      transparent 64%
    );

  background-size: 150% 190%;
  background-position: 0% 50%;

  opacity: 0.44;

  transform: translateX(-145%) rotate(1.2deg);

  animation: tip-button-shine 1.2s cubic-bezier(0.35, 0, 0.2, 1) infinite;

  will-change: transform, opacity, background-position;

  pointer-events: none;
}

.tip-button::after {

  content: "";

  position: absolute;
  inset: -32%;

  background:
    linear-gradient(
      106deg,
      transparent 41%,
      rgba(236,245,255,0.1) 45%,
      rgba(255,255,255,0.34) 49%,
      rgba(244,250,255,0.3) 51.5%,
      rgba(120,141,168,0.16) 55%,
      transparent 60.5%
    );

  background-size: 170% 210%;
  background-position: 0% 50%;

  opacity: 0.24;

  transform: translateX(-132%) rotate(-0.8deg);

  animation: tip-button-glint 1.2s cubic-bezier(0.35, 0, 0.2, 1) infinite;

  will-change: transform, opacity, background-position;

  pointer-events: none;
}

.tip-button > * {

  position: relative;
  z-index: 1;
}

.tip-button:hover {

  animation-play-state: paused;

  transform: translateY(-4px);

  border-color:
    rgba(178,196,220,0.64);

  background:
    linear-gradient(
      135deg,
      rgba(72,83,101,0.94),
      rgba(99,115,138,0.94),
      rgba(142,162,189,0.9),
      rgba(172,193,221,0.88)
    ),
    radial-gradient(
      circle at 20% 50%,
      rgba(255,255,255,0.12),
      transparent 50%
    );
  background-blend-mode: overlay;

  box-shadow:
    0 18px 50px rgba(0,0,0,0.6);
}

.tip-button.silver {

  background:
    linear-gradient(
      135deg,
      rgba(62,72,88,0.9),
      rgba(89,102,122,0.9),
      rgba(129,147,173,0.86),
      rgba(161,181,207,0.84)
    ),
    radial-gradient(
      circle at 20% 50%,
      rgba(255,255,255,0.08),
      transparent 50%
    );
  background-blend-mode: overlay;

  color: #0f131a;

  border:
    1px solid
    rgba(190,208,232,0.26);

  backdrop-filter: blur(18px);

  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.1);
}

.tip-button.silver:hover {

  animation-play-state: paused;

  transform: translateY(-4px);

  background:
    linear-gradient(
      135deg,
      rgba(72,83,101,0.94),
      rgba(99,115,138,0.94),
      rgba(142,162,189,0.9),
      rgba(172,193,221,0.88)
    ),
    radial-gradient(
      circle at 20% 50%,
      rgba(255,255,255,0.12),
      transparent 50%
    );
  background-blend-mode: overlay;

  box-shadow:
    0 18px 60px rgba(0,0,0,0.6);
}

@keyframes tip-button-shine {

  0% {

    opacity: 0.3;

    background-position: 0% 50%;

    transform: translateX(-145%) rotate(1.2deg);
  }

  45% {

    opacity: 0.38;

    background-position: 50% 50%;

    transform: translateX(8%) rotate(1.2deg);
  }

  70% {

    opacity: 0.24;

    background-position: 100% 50%;

    transform: translateX(145%) rotate(1.2deg);
  }

  100% {

    opacity: 0.3;

    background-position: 100% 50%;

    transform: translateX(145%) rotate(1.2deg);
  }
}

@keyframes tip-button-aura {

  0%,
  100% {

    border-color: rgba(160,177,201,0.44);

    box-shadow: var(--shadow);
  }

  45% {

    border-color: rgba(186,202,225,0.58);

    box-shadow:
      0 12px 42px rgba(0,0,0,0.5),
      0 0 20px rgba(172,192,220,0.18);
  }

  60% {

    border-color: rgba(232,240,252,0.72);

    box-shadow:
      0 14px 40px rgba(0,0,0,0.5),
      0 0 28px rgba(160,181,210,0.28),
      0 0 50px rgba(152,174,204,0.18);
  }

  80% {

    border-color: rgba(194,213,236,0.46);

    box-shadow:
      0 12px 34px rgba(0,0,0,0.45),
      0 0 14px rgba(172,192,220,0.14);
  }
}

@keyframes tip-button-glint {

  0% {

    opacity: 0.16;

    background-position: 0% 50%;

    transform: translateX(-132%) rotate(-0.8deg);
  }

  45% {

    opacity: 0.16;

    background-position: 50% 50%;

    transform: translateX(10%) rotate(-0.8deg);
  }

  70% {

    opacity: 0.12;

    background-position: 100% 50%;

    transform: translateX(138%) rotate(-0.8deg);
  }

  100% {

    opacity: 0.16;

    background-position: 100% 50%;

    transform: translateX(138%) rotate(-0.8deg);
  }
}

.section .tip-button:nth-of-type(1),
.section .tip-button:nth-of-type(1)::before,
.section .tip-button:nth-of-type(1)::after {

  animation-delay: 0s;
}

.section .tip-button:nth-of-type(2),
.section .tip-button:nth-of-type(2)::before,
.section .tip-button:nth-of-type(2)::after {

  animation-delay: 1.2s;
}

.section .tip-button:nth-of-type(3),
.section .tip-button:nth-of-type(3)::before,
.section .tip-button:nth-of-type(3)::after {

  animation-delay: 2.4s;
}

.section .tip-button:nth-of-type(4),
.section .tip-button:nth-of-type(4)::before,
.section .tip-button:nth-of-type(4)::after {

  animation-delay: 3.6s;
}

.section .tip-button:nth-of-type(5),
.section .tip-button:nth-of-type(5)::before,
.section .tip-button:nth-of-type(5)::after {

  animation-delay: 4.8s;
}

@media (prefers-reduced-motion: reduce) {

  .tip-button {

    animation: none;
  }

  .tip-button::before {

    animation: none;
  }

  .tip-button::after {

    animation: none;
  }
}

body.reduced-motion .tip-button,
body.reduced-motion .tip-button::before,
body.reduced-motion .tip-button::after,
body.reduced-motion .hero h1,
body.reduced-motion .section-title,
body.reduced-motion .qr-title,
body.reduced-motion .footer h2 {

  animation: none !important;
}

.button-left {

  display: flex;
  flex-direction: column;
  flex: 1;

  gap: 6px;
}

.button-title {

  font-family: var(--font-display);

  font-size: 19px;
  font-weight: 500;

  letter-spacing: 1.8px;

  text-transform: uppercase;
}

.button-subtitle {

  font-family: var(--font-body);
  font-weight: 600;

  font-size: 15px;

  letter-spacing: 0.5px;

  opacity: 0.9;
}

.arrow {

  font-size: 30px;
  font-weight: 300;
}

/* =========================
   QR CARD
========================= */

.qr-card {

  margin-top: 42px;

  padding:
    40px
    26px;

  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      rgba(62,72,88,0.9),
      rgba(89,102,122,0.9),
      rgba(129,147,173,0.86),
      rgba(161,181,207,0.84)
    ),
    radial-gradient(
      circle at 20% 50%,
      rgba(255,255,255,0.08),
      transparent 50%
    );
  background-blend-mode: overlay;

  border:
    1px solid
    rgba(190,208,232,0.26);

  backdrop-filter: blur(16px);

  text-align: center;

  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.1);
}

.qr-title {

  font-family: var(--font-display);

  font-size: 30px;

  color: var(--silver);

  background:
    linear-gradient(
      110deg,
      #404a5a 0%,
      #cbd3de 30%,
      #97a3b3 58%,
      #eef2f7 72%,
      #5d6879 100%
    );
  background-size: 220% 100%;
  background-position: 5% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: silver-text-shine-soft 5.4s ease-in-out infinite;

  letter-spacing: 4px;

  margin-bottom: 28px;
}

.qr-image {

  width: 240px;
  height: 240px;

  object-fit: cover;

  border-radius: 20px;

  border:
    3px solid
    rgba(158,177,203,0.5);

  margin-bottom: 24px;

  box-shadow:
    0 10px 35px rgba(0,0,0,0.5);
}

/* =========================
   FOOTER
========================= */

.footer {

  margin-top: 64px;

  text-align: center;
}

.footer h2 {

  font-family: var(--font-display);

  font-size: 38px;

  color: var(--silver);

  background:
    linear-gradient(
      110deg,
      #556276 0%,
      #d8e0ea 28%,
      #8898ac 55%,
      #f2f6fb 68%,
      #637186 100%
    );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: silver-text-shine-soft 5.8s ease-in-out infinite;

  letter-spacing: 5px;

  margin-bottom: 18px;
}

.footer p {

  font-family: var(--font-body);
  font-weight: 500;

  color: rgba(196,213,236,0.9);

  margin-bottom: 26px;

  font-size: 16px;
}

.footer-bottom {

  font-family: var(--font-ui);

  color: var(--silver);

  opacity: 0.7;

  font-size: 12px;

  letter-spacing: 4px;

  text-transform: uppercase;
}

@keyframes silver-text-shine-strong {

  0% {

    background-position: 0% 50%;

    text-shadow:
      0 0 12px rgba(170,190,218,0.24);
  }

  45% {

    background-position: 100% 50%;

    text-shadow:
      0 0 28px rgba(220,233,252,0.6),
      0 0 52px rgba(165,189,220,0.38);
  }

  100% {

    background-position: 0% 50%;

    text-shadow:
      0 0 12px rgba(170,190,218,0.24);
  }
}

@keyframes silver-text-shine-soft {

  0% {

    background-position: 0% 50%;

    text-shadow:
      0 0 8px rgba(166,187,214,0.18);
  }

  50% {

    background-position: 100% 50%;

    text-shadow:
      0 0 16px rgba(210,227,248,0.26),
      0 0 26px rgba(154,176,205,0.14);
  }

  100% {

    background-position: 0% 50%;

    text-shadow:
      0 0 8px rgba(166,187,214,0.18);
  }
}

/* =========================
  SILVER DIVIDER
========================= */

.divider {

  width: 120px;
  height: 1px;

  margin:
    26px auto;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(160,180,208,0.62),
      transparent
    );
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 640px) {

  .container {

    padding:
      calc(16px + env(safe-area-inset-top, 0px))
      calc(14px + env(safe-area-inset-right, 0px))
      calc(28px + env(safe-area-inset-bottom, 0px))
      calc(14px + env(safe-area-inset-left, 0px));
  }

  .topbar {

    flex-direction: row;

    gap: 6px;

    text-align: center;

    margin-bottom: 8px;

    font-size: 10px;

    letter-spacing: 1.3px;
  }

  .hero {

    margin-bottom: 6px;
  }

  .section {

    margin-top: 32px;
  }

  .hero h1 {

    font-size: 39px;

    margin-top: 28px;

    letter-spacing: 2.2px;

    margin-bottom: 8px;
  }

  .subtitle {

    font-size: 14px;

    letter-spacing: 2.1px;

    margin-bottom: 6px;
  }

  .hotel-name {

    font-size: 14px;

    letter-spacing: 1.4px;
  }

  .section-title {

    font-size: 24px;

    margin-bottom: 8px;
  }

  .section-title::after {

    margin-top: 8px;
  }

  .recommendations {

    margin-top: 28px;
  }

  .rec-tabs {

    gap: 8px;
  }

  .rec-tab {

    font-size: 12px;

    padding: 9px 8px;
  }

  .rec-item {

    padding: 13px 13px;
  }

  .rec-name {

    font-size: 17px;
  }

  .rec-meta {

    font-size: 14px;
  }

  .tip-button {

    width: 90%;
    margin-left: auto;
    margin-right: auto;

    padding:
      14px
      12px;

    margin-bottom: 12px;

    border-radius: 15px;
  }

  .button-left {

    gap: 2px;
  }

  .button-title {

    font-size: 14px;

    letter-spacing: 1px;
  }

  .button-subtitle {

    font-size: 12px;

    letter-spacing: 0.3px;
  }

  .arrow {

    font-size: 19px;
  }

  .qr-image {

    width: 210px;
    height: 210px;
  }

  .footer h2 {

    font-size: 30px;
  }
}

@media (max-width: 430px) {

  .container {

    padding:
      calc(10px + env(safe-area-inset-top, 0px))
      calc(10px + env(safe-area-inset-right, 0px))
      calc(24px + env(safe-area-inset-bottom, 0px))
      calc(10px + env(safe-area-inset-left, 0px));
  }

  .topbar {

    margin-bottom: 6px;

    font-size: 8px;

    letter-spacing: 1px;
  }

  .hero {

    margin-bottom: 4px;
  }

  .section {

    margin-top: 4px;
  }

  .tip-button {

    width: 92%;
    margin-left: auto;
    margin-right: auto;

    padding:
      10px
      8px;

    margin-bottom: 10px;

    border-radius: 12px;
  }

  .rec-tab {

    letter-spacing: 0.8px;
  }

  .rec-name {

    font-size: 15px;
  }

  .rec-meta {

    font-size: 12px;
  }

  .button-title {

    font-size: 12px;

    letter-spacing: 0.8px;
  }

  .button-subtitle {

    font-size: 10px;
  }

  .arrow {

    font-size: 16px;
  }

}