/* RAMADAN THEME - GOLDEN GARLAND STYLE */

#ramadan-decorations-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  pointer-events: none;
  z-index: 9999;
  font-family: 'Amiri', serif;
}

/* --- Dotted Garland Strings (The Swag) --- */
.garland-swag {
  position: absolute;
  top: -20px;
  /* Start slightly off screen */
  border-bottom: 3px dotted #f1c40f;
  /* The dotted gold line */
  border-radius: 0 0 50% 50%;
  /* The curve */
  height: 80px;
  width: 100%;
  z-index: 9998;
  opacity: 0.8;
}

/* Multiple swags to create the draped effect */
.swag-1 {
  left: -10%;
  width: 40%;
  transform: rotate(-5deg);
  top: -30px;
}

.swag-2 {
  left: 20%;
  width: 60%;
  height: 120px;
  top: -50px;
}

.swag-3 {
  right: -10%;
  width: 40%;
  transform: rotate(5deg);
  top: -30px;
}

/* --- The Gold Lanterns (Cylindrical with Bars) --- */
.vector-lantern {
  position: absolute;
  top: 0;
  transform-origin: top center;
  animation: gentleSwing 4s ease-in-out infinite alternate;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 1. The Hanging String (Dotted) */
.hanging-string {
  width: 0;
  border-left: 2px dotted #f39c12;
  height: 60px;
  /* Adjust per lantern */
  margin-bottom: -2px;
}

/* 2. The Lantern Structure (From User Image) */
.gold-lantern-structure {
  width: 40px;
  position: relative;
  /* Removed glow/aure */
}

/* Dome Top */
.lantern-top {
  width: 30px;
  height: 15px;
  background: linear-gradient(to right, #f1c40f, #f39c12);
  margin: 0 auto;
  border-radius: 15px 15px 2px 2px;
  /* Dome shape */
  position: relative;
  z-index: 2;
}

.lantern-top::before {
  /* Small knob */
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #f39c12;
  border-radius: 50%;
}

/* Cylinder Body with Bars */
.lantern-body {
  width: 30px;
  height: 45px;
  margin: 0 auto;
  background: rgba(255, 255, 224, 0.3);
  /* Glassy center */
  border-left: 3px solid #f39c12;
  border-right: 3px solid #f39c12;
  position: relative;
}

/* The vertical bar in the middle */
.lantern-body::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #f39c12;
  transform: translateX(-50%);
}

/* Base (Pointed/Curved) */
.lantern-bottom {
  width: 30px;
  height: 15px;
  background: linear-gradient(to right, #f1c40f, #f39c12);
  margin: 0 auto;
  border-radius: 2px 2px 15px 15px;
  /* Curved bottom */
  position: relative;
}

.lantern-bottom::after {
  /* The point */
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #f39c12;
}

/* --- Golden Crescents --- */
.vector-moon {
  position: relative;
  width: 40px;
  height: 40px;

  /* Correction for box-shadow offset */
  left: 12px;
  margin-top: -8px;

  border-radius: 50%;
  box-shadow: -10px 0 0 0 #f1c40f;
  transform: rotate(-30deg);
  background: transparent;
}


/* --- POPUP (Retained Navy) --- */
.ramadan-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s;
}

.ramadan-popup-overlay.show {
  opacity: 1;
  visibility: visible;
}

.ramadan-popup-content {
  background: linear-gradient(135deg, #1a252f 0%, #0d161d 100%);
  border: 4px solid #d5b82c;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
  padding: 50px 30px;
  text-align: center;
  border-radius: 20px;
  max-width: 90%;
  width: 500px;
  position: relative;
}

.ramadan-popup-content h2 {
  color: #f1c40f;
  margin: 15px 0;
  font-size: 3.5rem;
  font-family: 'Amiri', serif;
}

.ramadan-popup-content p {
  color: #bdc3c7;
  font-size: 1.2rem;
}

.ramadan-popup-close {
  background: transparent;
  color: #f1c40f;
  border: 2px solid #f1c40f;
  padding: 10px 30px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: bold;
  margin-top: 25px;
  transition: all 0.3s;
}

.ramadan-popup-close:hover {
  background: #f1c40f;
  color: #1a252f;
}

/* Animations */
@keyframes gentleSwing {
  0% {
    transform: rotate(2deg);
  }

  100% {
    transform: rotate(-2deg);
  }
}

@keyframes starTwinkle {
  0% {
    transform: scale(0.9) rotate(5deg);
  }

  100% {
    transform: scale(1.1) rotate(-5deg);
  }
}

/* Positions */
.pos-1 {
  left: 10%;
}

/* Lantern */
.pos-2 {
  left: 25%;
  top: 40px;
}

/* Moon */
.pos-3 {
  left: 40%;
}

/* Lantern */
.pos-4 {
  left: 50%;
  top: 50px;
}

/* Lantern (Center Low) */
.pos-5 {
  left: 60%;
}

/* Lantern */
.pos-6 {
  left: 75%;
  top: 40px;
}

/* Moon */
.pos-7 {
  left: 90%;
}

/* Lantern */
.pos-star-1 {
  left: 5%;
  top: 80px;
}

.pos-star-2 {
  right: 5%;
  top: 80px;
}

@media (max-width: 768px) {
  .swag-2 {
    height: 60px;
  }

  .pos-2,
  .pos-4,
  .pos-6 {
    display: none;
  }
}