/* General Styles for All Designs */
.ramadan-lantern {
  font-family: 'Montserrat', Georgia, serif;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
}

.ramadan-lantern-shortcode {
  position: relative;
  display: inline-block;
  margin: 0;
  bottom: auto;
  left: auto;
}

.ramadan-lantern .vertical-text {
  position: absolute;
  bottom: 0;
  left: -20px;
  writing-mode: vertical-lr;
  font-size: 12px;
  color: #242c35;
  font-weight: bold;
}

/* Specific Styles for Each Design */
<?php foreach (range(1, 10) as $design_num): ?>
.ramadan-lantern.design<?php echo $design_num; ?> #fanos,
.ramadan-lantern.design<?php echo $design_num; ?> #small-circle,
.ramadan-lantern.design<?php echo $design_num; ?> #half-circle,
.ramadan-lantern.design<?php echo $design_num; ?> #bottom-quppa,
.ramadan-lantern.design<?php echo $design_num; ?> #line,
.ramadan-lantern.design<?php echo $design_num; ?> #top-triangle,
.ramadan-lantern.design<?php echo $design_num; ?> #box,
.ramadan-lantern.design<?php echo $design_num; ?> #last-triangle {
    border-color: var(--lantern-border-color);
}

.ramadan-lantern.design<?php echo $design_num; ?> #candle {
    background-color: var(--candle-color);
}
<?php endforeach; ?>