:root {
  --font-family-sans-noto: "Noto Sans", sans-serif;
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-sans-noto);
}

/* Main container: w-full h-full min-h-100dvh */
.main-container {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background-image: url("../images/campaign/fanzaCampaignBg.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

/* Content wrapper: relative w-full lg:h-screen h-fit min-h-screen px-3 lg:py-0 py-4 lg:px-[43px] overflow-hidden */
.content-wrapper {
  position: relative;
  width: 100%;
  max-width: 1800px;
  height: fit-content;
  min-height: 100vh;
  padding: 1rem 0.75rem 0rem 0.75rem; /* py-4 px-3 */
  overflow: visible;
  margin: 0 auto; /* Center the content */
}

/* MOODYZ Logo: w-[76px] h-fit lg:w-[111px] lg:h-[117px] aspect-[19/20] object-cover absolute top-0 right-3 lg:left-[43px] */
.moodyz-logo {
  width: 95px;
  height: auto;
  aspect-ratio: 95/91;
  object-fit: cover;
  position: absolute;
  top: 0;
  right: 4px;
}

/* ===== MOBILE VERSION ===== */

/* Mobile Version: lg:hidden flex flex-col gap-1 */
.mobile-version {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* gap-1 */
}

/* Mobile Logos: flex gap-2 items-center */
.mobile-logos {
  display: flex;
  gap: 0.5rem; /* gap-2 */
  align-items: center;
}

/* Fanza Logo Mobile: w-[188px] h-[28px] aspect-[47/7] */
.mobile-logos .fanza-logo {
  width: 188px;
  height: 28px;
  aspect-ratio: 47/7;
}

/* Mobile Title: w-full h-fit aspect-[351/109] mx-auto max-w-[351px] */
.mobile-title {
  width: 100%;
  height: auto;
  aspect-ratio: 351/109;
  margin: 0 auto; /* mx-auto */
  /* max-width: 351px; */
}

/* Mobile Characters: lg:hidden mx-auto w-full flex relative drop-shadow-[0_0_20px_rgba(255,255,255,0.8)] */
.mobile-characters {
  margin: 0 auto; /* mx-auto */
  width: 100%;
  height: auto;
  display: flex;
  position: relative;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
}

/* Character Left: absolute -left-[3%] bottom-0 w-fit h-[96%] aspect-[438/924] */
.character-left {
  position: absolute;
  left: -3%;
  bottom: 0;
  height: 96%;
  width: auto;
}

.character-left img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* Character Right: absolute -right-[24%] bottom-0 w-fit h-[96%] aspect-[634/924] */
.character-right {
  position: absolute;
  right: -6%;
  bottom: 0;
  height: 96%;
  width: auto;
}

.character-right img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* Character Center: w-[70%] h-fit aspect-[595/962] relative left-1/2 -translate-x-1/2 bottom-0 */
.character-center {
  width: 46%;
  height: auto;
  position: relative;
  left: 50%; /* left-1/2 */
  transform: translateX(-46%);
  bottom: 0;
}

.character-center img {
  width: 100%;
  height: auto;
}

/* Character Images: w-full h-full */
.character-img {
  width: 100%;
  height: 100%;
}

/* Name Tags: bg-[#DB699C] absolute */
.name-tag {
  background-color: #db699c;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Left Tag: p-[3px] top-[15%] left-[26%] w-[8%] h-fit aspect-[18/60] */
.left-tag {
  padding: 3px;
  top: 18%;
  left: 8%;
  width: 12%;
  height: auto;
  /* aspect-ratio: 18/60; */
}

/* Right Tag: p-[3px] top-[15%] right-[34%] w-[5.8%] h-fit aspect-[18/58] */
.right-tag {
  padding: 3px;
  top: 18%;
  right: 12%;
  width: 10%;
  height: auto;
  /* aspect-ratio: 18/58; */
}

/* Center Tag: p-[3px] top-[20%] right-[26%] w-[6%] h-fit aspect-[18/45] */
.center-tag {
  padding: 3px;
  top: 22%;
  right: 16%;
  width: 12%;
  height: auto;
  /* aspect-ratio: 18/45; */
}

/* Name Tag Images: w-full h-fit */
.name-tag img {
  width: 100%;
  height: auto;
}

/* Mobile Discount Card: lg:hidden p-6 w-full h-fit rounded-lg border-[3px] border-[rgba(255, 255, 255, 0.50)] flex flex-col items-center gap-8 relative */
.mobile-discount-card {
  padding: 1.5rem; /* p-6 */
  width: 100%;
  height: fit-content;
  border-radius: 0.5rem; /* rounded-lg */
  border: 3px solid rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; /* gap-4 */
  position: relative;
  top: -32px;
  background: linear-gradient(
      180deg,
      #ffc8af -6.01%,
      rgba(255, 255, 255, 0) 33.66%
    ),
    radial-gradient(
      175.58% 143.96% at 102.55% 100%,
      rgba(149, 220, 255, 0.8) 3.85%,
      rgba(255, 255, 255, 0) 37.51%
    ),
    radial-gradient(
      197.78% 169.96% at 64.03% -54.05%,
      rgba(255, 255, 255, 0) 66.35%,
      rgba(255, 169, 251, 0.8) 94.24%
    ),
    rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 10px 0 rgba(211, 26, 69, 0.5);
}

/* Mobile Airplane: w-full h-fit aspect-[351/97] absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 */
.mobile-airplane {
  width: 100%;
  height: auto;
  aspect-ratio: 360/77;
  position: absolute;
  top: 0;
  left: 50%; /* left-1/2 */
  transform: translate(-50%, -50%); /* -translate-x-1/2 -translate-y-1/2 */
}

/* Discount Content: w-full flex flex-col justify-center gap-3 */
.discount-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem; /* gap-3 */
  z-index: 10;
}

/* Discount Text: flex items-end gap-1 mx-auto */
.discount-text {
  display: flex;
  align-items: end;
  gap: 0.25rem; /* gap-1 */
  margin: 0 auto; /* mx-auto */
}

/* Text Elements: relative w-fit */
.text-element {
  position: relative;
  width: fit-content;
}

/* Text Small (Mobile): text-2xl font-black */
.text-small .text-outline,
.text-small .text-gradient {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 900; /* font-black */
  margin: 0;
  line-height: 1;
}

/* Text Large (Mobile): text-4xl font-black */
.text-large .text-outline,
.text-large .text-gradient {
  font-size: 2.5rem; /* text-4xl */
  font-weight: 900; /* font-black */
  margin: 0;
  line-height: 1;
}

/* Text Outline Effects */
.text-outline {
  -webkit-text-stroke: 3px #fff;
  -webkit-text-fill-color: transparent;
}

/* Text Gradient: absolute inset-0 text-transparent bg-clip-text bg-[linear-gradient(0deg,_#D31A45_23.43%,_#FF7C9B_73.95%)] */
.text-gradient {
  position: absolute;
  inset: 0;
  color: transparent;
  background: linear-gradient(0deg, #d31a45 23.43%, #ff7c9b 73.95%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Coupon Code: px-4 py-3 border-[2px] border-secondary rounded-lg bg-white flex items-center gap-1 justify-between w-full */
.coupon-code {
  padding: 0.75rem 1rem; /* px-4 py-3 */
  border: 2px solid #8724d9; /* border-secondary (gray-500) */
  border-radius: 0.5rem; /* rounded-lg */
  background-color: white;
  display: flex;
  align-items: center;
  gap: 0.25rem; /* gap-1 */
  justify-content: space-between;
  width: 100%;
}

/* Code Text: text-gray-900 text-2xl */
.code-text {
  color: #111827; /* text-gray-900 */
  font-size: 1.5rem; /* text-2xl */
  margin: 0;
}

/* Copy Button: px-2 rounded-[3px] bg-primary text-white w-[60px] h-[30px] */
.copy-button {
  padding: 0 0.5rem; /* px-2 */
  border-radius: 3px;
  background-color: #3b82f6; /* bg-primary (blue-500) */
  color: white;
  width: 60px;
  height: 30px;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
}

/* Expiry Text: text-[#D31A45] text-sm text-center */
.expiry-text {
  color: #d31a45;
  font-size: 0.875rem; /* text-sm */
  text-align: center;
  margin: 0;
}

/* Visit Button: text-white text-lg font-black py-4 w-full h-fit rounded bg-writer text-center */
.mobile-visit {
  color: white;
  font-size: 1.125rem; /* text-lg */
  font-weight: 900; /* font-black */
  padding: 1rem 0; /* py-4 */
  width: 100%;
  height: fit-content;
  border-radius: 0.25rem; /* rounded */
  background: linear-gradient(0deg, #6719df 0%, #509cfb 100%);
  text-align: center;
  text-decoration: none;
  display: block;
}

.mobile-visit:hover {
  background-color: #6d28d9;
}

/* ===== DESKTOP VERSION ===== */

/* Desktop Version: hidden by default, shown on lg+ */
.desktop-version {
  display: none;
}

/* Large screen styles: lg:h-screen lg:py-0 lg:px-[43px] */
@media (min-width: 1200px) {
  .content-wrapper {
    height: 100vh; /* lg:h-screen */
    padding: 0 43px; /* lg:py-0 lg:px-[43px] */
  }

  .moodyz-logo {
    width: 143px; /* lg:w-[143px] */
    height: 137px; /* lg:h-[137px] */
    left: -16px; /* lg:left-[-16px] */
    right: auto;
  }

  /* Hide mobile, show desktop */
  .mobile-version {
    display: none; /* lg:hidden */
  }

  .desktop-version {
    display: flex; /* lg:flex */
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }

  /* Desktop Characters: lg:flex justify-center items-end hidden gap-20 w-[50%] h-full drop-shadow-[0_0_30px_rgba(255,255,255,0.8)] relative */
  .desktop-characters {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 5rem; /* gap-20 */
    width: 50%;
    height: 100%;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8));
    position: relative;
  }

  /* Desktop Character Left: absolute w-fit h-[88%] aspect-[373/900] -translate-x-[88%] */
  .desktop-char-left {
    position: absolute;
    width: fit-content;
    height: 88%;
    aspect-ratio: 373/900;
    transform: translateX(-88%);
  }

  /* Desktop Character Right: absolute w-fit h-[88%] aspect-[439/900] translate-x-[62%] */
  .desktop-char-right {
    position: absolute;
    width: fit-content;
    height: 88%;
    aspect-ratio: 439/900;
    transform: translateX(62%);
  }

  /* Desktop Character Center: w-fit h-[90%] aspect-[388/918] */
  .desktop-char-center {
    width: fit-content;
    height: 90%;
    aspect-ratio: 388/918;
    position: relative;
  }

  /* Desktop Name Tags: p-2 bg-[#DB699C] absolute */
  .desktop-name-tag {
    padding: 0.5rem; /* p-2 */
    background-color: #db699c;
    position: absolute;
  }

  /* Left Desktop Tag: top-[15%] left-[12%] */
  .left-desktop-tag {
    top: 15%;
    left: 12%;
  }

  .left-desktop-tag img {
    width: 24px;
    height: 116px;
  }

  /* Right Desktop Tag: top-[18%] right-[14%] */
  .right-desktop-tag {
    top: 18%;
    right: 14%;
  }

  .right-desktop-tag img {
    width: 24px;
    height: 113px;
  }

  /* Center Desktop Tag: top-[20%] right-[10%] */
  .center-desktop-tag {
    top: 20%;
    right: 10%;
  }

  .center-desktop-tag img {
    width: 24px;
    height: 84px;
  }

  /* Desktop Content: lg:flex hidden w-[36%] h-full justify-center items-center z-10 relative */
  .desktop-content {
    display: flex;
    width: 40%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 10;
    position: relative;
  }

  /* Desktop Inner: flex flex-col gap-[42px] items-center */
  .desktop-inner {
    display: flex;
    flex-direction: column;
    gap: 42px;
    align-items: center;
  }

  /* Desktop Header: flex flex-col gap-4 items-center */
  .desktop-header {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }

  .desktop-logos-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

  /* Desktop Logos: flex gap-2 items-center */
  .desktop-logos {
    display: flex;
    gap: 0.5rem; /* gap-2 */
    align-items: center;
  }

  .desktop-fanza-logo {
    width: 360px;
    height: 54px;
    aspect-ratio: 20/3;
  }

  /* Desktop Title */
  .desktop-title {
    width: 100%;
    max-width: 800px;
    height: fit-content;
    aspect-ratio: 400/51;
  }

  /* Desktop Airplane */
  .desktop-airplane {
    width: 100%;
    max-width: 630px;
    height: fit-content;
    aspect-ratio: 630/135;
  }

  /* Desktop Discount Card: p-8 pt-6 w-full max-w-[536px] h-fit rounded-lg border-[3px] border-[rgba(255, 255, 255, 0.50)] flex flex-col items-center gap-8 */
  .desktop-discount-card {
    padding: 2rem 2rem 1.5rem; /* p-8 pt-6 */
    width: 100%;
    max-width: 536px;
    height: fit-content;
    border-radius: 0.5rem; /* rounded-lg */
    border: 3px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem; /* gap-8 */
    background: linear-gradient(
        180deg,
        #ffc8af -6.01%,
        rgba(255, 255, 255, 0) 33.66%
      ),
      radial-gradient(
        175.58% 143.96% at 102.55% 100%,
        rgba(149, 220, 255, 0.8) 3.85%,
        rgba(255, 255, 255, 0) 37.51%
      ),
      radial-gradient(
        197.78% 169.96% at 64.03% -54.05%,
        rgba(255, 255, 255, 0) 66.35%,
        rgba(255, 169, 251, 0.8) 94.24%
      ),
      rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 10px 0 rgba(211, 26, 69, 0.5);
  }

  /* Desktop Discount Content: flex flex-col justify-center gap-4 */
  .desktop-discount-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem; /* gap-4 */
  }

  /* Desktop Discount Text: flex items-end */
  .desktop-discount-text {
    display: flex;
    align-items: end;
  }

  /* Desktop Text Elements: relative w-fit */
  .desktop-text-element {
    position: relative;
    width: fit-content;
  }

  /* Desktop Text Small: text-4xl font-black */
  .desktop-text-small .text-outline,
  .desktop-text-small .text-gradient {
    font-size: 1.875rem; /* text-4xl */
    font-weight: 900; /* font-black */
    line-height: 1;
  }

  /* Desktop Text Large: text-6xl font-black */
  .desktop-text-large .text-outline,
  .desktop-text-large .text-gradient {
    font-size: 3rem; /* text-6xl */
    font-weight: 900; /* font-black */
    line-height: 1;
  }

  /* Desktop Coupon Code: px-4 py-3 border-[2px] border-secondary rounded-lg bg-white flex items-center gap-1 justify-between */
  .desktop-coupon-code {
    padding: 0.75rem 1rem; /* px-4 py-3 */
    border: 2px solid #8724d9; /* border-secondary */
    border-radius: 0.5rem; /* rounded-lg */
    background-color: white;
    display: flex;
    align-items: center;
    gap: 0.25rem; /* gap-1 */
    justify-content: space-between;
  }

  /* Desktop Code Text: text-gray-900 text-2xl */
  .desktop-code-text {
    color: #111827; /* text-gray-900 */
    font-size: 1.5rem; /* text-2xl */
    margin: 0;
  }

  /* Desktop Copy Button: px-2 rounded-[3px] bg-primary text-white w-[60px] h-[30px] */
  .desktop-copy-button {
    padding: 0 0.5rem; /* px-2 */
    border-radius: 3px;
    background-color: #007cfb; /* bg-primary */
    color: white;
    width: 60px;
    height: 30px;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Desktop Expiry Text: text-[#D31A45] text-sm text-center */
  .desktop-expiry-text {
    color: #d31a45;
    font-size: 0.875rem; /* text-sm */
    text-align: center;
    margin: 0;
  }

  /* Desktop Visit Button: text-white text-2xl font-black py-4 w-full h-[72px] rounded bg-writer text-center */
  .desktop-visit-button {
    color: white;
    font-size: 1.5rem; /* text-2xl */
    font-weight: 900; /* font-black */
    padding: 1rem 0; /* py-4 */
    width: 100%;
    height: 72px;
    border-radius: 0.25rem; /* rounded */
    background: linear-gradient(0deg, #6719df 0%, #509cfb 100%);
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .desktop-visit-button:hover {
    background-color: #6d28d9;
  }
}

@media (min-width: 1440px) {
  .desktop-text-small .text-outline,
  .desktop-text-small .text-gradient {
    font-size: 2.5rem; /* text-4xl */
    font-weight: 900; /* font-black */
    line-height: 1;
  }
  .desktop-text-large .text-outline,
  .desktop-text-large .text-gradient {
    font-size: 3.75rem; /* text-6xl */
    font-weight: 900; /* font-black */
    line-height: 1;
  }
}

/* Alert styles for notifications */
.alert {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 24px;
  background-color: #007cfb;
  color: white;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
}

.alert.show {
  opacity: 1;
  transform: translateX(0);
}

.alert.success {
  background-color: #007cfb;
}

.alert.error {
  background-color: #007cfb;
}