/* =========================================
   1. FONTS
   ========================================= */

@font-face {
  font-family: "notourdu";
  src: url("../fonts/notourdu.ttf");
}

@font-face {
  font-family: "dream_avenue";
  src: url("../fonts/dream_avenue.otf");
}

@font-face {
  font-family: "montserrat";
  src: url("../fonts/montserrat.ttf");
}

@font-face {
  font-family: "comfortaa";
  src: url("../fonts/comfortaa.ttf");
}

#bismillah {
  font-size: 2rem !important;
  text-align: center;
  margin-bottom: 20px !important;
}

#greeting p{
  color: #ece2b1 !important;
}

#ayah {
  text-align: right;
}

#translation {
  text-shadow: 1px 0px rgba(29, 29, 29, 0.8);
}

/* Font Utility Classes */
.font-opening {
  font-family: "notourdu" !important;
  font-size: 2.5rem;
}

.font-title,
.hover-title:hover,
.after-title:after,
.before-title:before {
  font-family: "dream_avenue" !important;
}

.font-additional,
.hover-additional:hover,
.after-additional:after,
.before-additional:before {
  font-family: "montserrat" !important;
}

.font-content,
.hover-content:hover,
.after-content:after,
.before-content:before,
.content-layout p,
.also_invite,
#also_inviting li,
.content-layout p b,
.content-layout a,
.content-layout .form-control,
.content-layout button,
#welcome p,
#welcome p b,
#welcome button,
.modal-body p,
.modal-body label,
.modal-body b {
  font-family: "comfortaa" !important;
}

#title-thewedding {
  text-align: center;
  color:#fbf6df;
}

.contentWrapper {
  transform: translateY(-60px);
}

.countdownWrapper {
  flex-direction: column;
}

.main-title h1{
  font-size: 3rem !important;
  font-weight: bold !important;
}

/* =========================================
   2. COLORS & THEME UTILITIES
   ========================================= */

/* Primary Color: #1b1d1b (Dark Grey/Black) */
.color-primary,
.hover-color-primary:hover,
.focus-color-primary:focus {
  color: #1b1d1b !important;
}
.background-primary,
.hover-background-primary:hover,
.focus-background-primary:focus {
  background-color: #1b1d1b !important;
}
.border-primary,
.borders-primary {
  border-color: #1b1d1b !important;
}
.fill-primary {
  fill: #1b1d1b !important;
}
.stroke-primary {
  stroke: #1b1d1b !important;
}
.background-transparent-primary {
  background-color: rgba(27, 29, 27, 0.2) !important;
}

/* Secondary Color: #bbd7dd (Light Blue) */
.color-secondary,
.hover-color-secondary:hover,
.focus-color-secondary:focus {
  color: #bbd7dd;
}
.background-secondary,
.hover-background-secondary:hover,
.focus-background-secondary:focus {
  background-color: #bbd7dd !important;
}
.border-secondary,
.borders-secondary {
  border-color: #bbd7dd !important;
}
.fill-secondary {
  fill: #bbd7dd !important;
}
.stroke-secondary {
  stroke: #bbd7dd !important;
}
.background-transparent-secondary {
  background-color: rgba(187, 215, 221, 0.2) !important;
}

/* Third Color: #3d5337 (Dark Green) */
.color-third,
.hover-color-third:hover,
.focus-color-third:focus {
  color: #3d5337 !important;
}
.background-third,
.hover-background-third:hover,
.focus-background-third:focus {
  background-color: #3d5337 !important;
}
.border-third,
.borders-third {
  border-color: #3d5337 !important;
}
.fill-third {
  fill: #3d5337 !important;
}
.stroke-third {
  stroke: #3d5337 !important;
}
.background-transparent-third {
  background-color: rgba(61, 83, 55, 0.2) !important;
}

/* Fourth Color: #ece2b1 (Cream/Gold) */
.color-fourth,
.hover-color-fourth:hover,
.focus-color-fourth:focus {
  color: #ece2b1 !important;
}
.background-fourth,
.hover-background-fourth:hover,
.focus-background-fourth:focus {
  background-color: #ece2b1 !important;
}
.border-fourth,
.borders-fourth {
  border-color: #ece2b1 !important;
}
.fill-fourth {
  fill: #ece2b1 !important;
}
.stroke-fourth {
  stroke: #ece2b1 !important;
}
.background-transparent-fourth {
  background-color: rgba(236, 226, 177, 0.2) !important;
}

/* Fifth Color: #827e76 (Greyish) */
.color-fifth,
.hover-color-fifth:hover {
  color: #827e76 !important;
}
.background-fifth,
.hover-background-fifth:hover {
  background-color: #827e76 !important;
}
.border-fifth,
.borders-fifth {
  border-color: #827e76 !important;
}
.fill-fifth {
  fill: #827e76 !important;
}
.stroke-fifth {
  stroke: #827e76 !important;
}
.background-transparent-fifth {
  background-color: rgba(130, 126, 118, 0.2) !important;
}

/* Sixth Color: #4f6368 (Muted Green/Grey) */
.color-sixth,
.hover-color-sixth:hover {
  color: #4f6368 !important;
}
.background-sixth,
.hover-background-sixth:hover {
  background-color: #4f6368 !important;
}
.border-sixth,
.borders-sixth {
  border-color: #4f6368 !important;
}
.fill-sixth {
  fill: #4f6368 !important;
}
.stroke-sixth {
  stroke: #4f6368 !important;
}
.background-transparent-sixth {
  background-color: rgba(79, 99, 104, 0.2) !important;
}

/* =========================================
   3. SECTION SPECIFIC STYLES
   ========================================= */

/* Cover Section */
#cover p,
#cover h3,
#cover h1 {
  color: #fbf6df;
}

#cover span i {
  background: #fbf6df !important;
}

/* Titles */
h1 .title-child {
  color: #3d5337;
}

/* Gift Section */
#gift h1 {
  position: relative;
  left: -2rem;
}

#gift h1 span {
  left: 46%;
  position: absolute;
  bottom: -33px;
}

/* Maps */
#maps .btn {
  display: none;
}

/* Music Icon */
#gramophone path {
  fill: #ece2b1;
}

/* =========================================
   4. BACKGROUND IMAGES (Parallax)
   ========================================= */

#quote-words,
#quote-words > .parallax__container > .parallax {
  background-image: url("../images/3a46dbc0-77bd-11ed-8fdd-4125222ff7a7.jpg") !important;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: inset 2000px 0 0 0 rgba(236, 226, 177, 0.1);
}

#quote-words.background-third,
#quote-words.background-third > .parallax__container > .parallax {
  background-image: url("../images/3a46dbc0-77bd-11ed-8fdd-4125222ff7a8.jpg") !important;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: inset 2000px 0 0 0 rgba(236, 226, 177, 0.1);
}


#rundown,
#rundown > .parallax__container > .parallax {
  background-image: url("../images/c00dd650-77bd-11ed-b64b-350e3e2459fc.jpg") !important;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: inset 2000px 0 0 0 rgba(24, 26, 27, 0.1);
}

#live_streaming,
#live_streaming > .parallax__container > .parallax {
  background-image: url("../images/159c6940-77ed-11ed-a73f-7b9748546e76.jpg") !important;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: inset 2000px 0 0 0 undefined;
}

#gift,
#gift > .parallax__container > .parallax {
  background-image: url("../images/159c6940-77ed-11ed-a73f-7b9748546e76.jpg") !important;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: inset 2000px 0 0 0 undefined;
}

#galleries,
#galleries > .parallax__container > .parallax {
  background-image: url("../images/159c6940-77ed-11ed-a73f-7b9748546e76.jpg") !important;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: inset 2000px 0 0 0 rgba(187, 215, 221, 1);
}

#rsvp,
#rsvp > .parallax__container > .parallax {
  background-image: url("../images/3a46dbc0-77bd-11ed-8fdd-4125222ff7a8.jpg") !important;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: inset 2000px 0 0 0 rgba(236, 226, 177, 0.1);
}

/* =========================================
   5. MEDIA QUERIES
   ========================================= */

@media screen and (max-width: 500px) {
  #closing {
    margin-top: -1px;
  }
  #rundown .acaraWrapper .image .photoWrapper.second {
    bottom: 50% !important;
  }
}

/* =========================================
   6. SCROLL LOCK & LAYOUT LOGIC
   ========================================= */

body,
html {
  width: 100%;
  overflow-x: hidden; /* Prevents side-scrolling */
}

/* The Lock Class: Added/removed by JavaScript */
.no-scroll {
  overflow: hidden; /* Stops scrolling */
  height: 100vh; /* Limits height to screen size */
  position: fixed; /* Freezes it in place */
  width: 100%;
}

#main-wrap {
  position: relative;
  width: 100%;
}

.text-glow-static {
  /* Adjust the color code (rgba) to match your wedding theme colors */
  text-shadow: 0 0 10px #010101c0, 0 0 20px rgba(0, 0, 0, 0.3);
}


/* Layout: Split Card */
.guestbook-wrapper {
    display: flex;
    flex-wrap: wrap; /* Stacks on mobile */
    background: #fff; /* Or use your var(--bg-color) */
    overflow: hidden;
    border-radius: 10px; /* Optional rounded corners */
    border: 1px solid; /* Uses borders-secondary color via class */
}

.guestbook-image {
    flex: 1 1 40%; /* Takes 40% width on desktop */
    min-height: 300px;
}

.guestbook-content {
    flex: 1 1 60%; /* Takes 60% width on desktop */
    padding: 2rem;
    display: flex;
    flex-direction: column;
    max-height: 700px; /* Prevents it from getting too tall */
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .guestbook-wrapper {
        flex-direction: column;
    }
    .guestbook-image {
        display: none; /* Hide image on mobile to save space, or set height: 200px */
    }
}

/* Sticker Container - Matches your Input Fields */
.sticker-container {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid; /* Will take color from borders-secondary */
    background-color: rgba(255, 255, 255, 0.2); /* Subtle transparency */
    overflow-x: auto; /* Enable horizontal scroll */
    white-space: nowrap;
}

/* Hide scrollbar for cleaner look */
.sticker-container::-webkit-scrollbar {
    height: 6px;
}
.sticker-container::-webkit-scrollbar-thumb {
    background-color: #d4af37; /* Adjust to match your secondary color */
    border-radius: 10px;
}

/* Individual Sticker Option */
.sticker-option {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    cursor: pointer;
    border: 2px solid transparent; /* Invisible border by default */
    border-radius: 8px;
    padding: 5px;
    transition: all 0.3s ease;
    vertical-align: middle;
}

/* Hover Effect */
.sticker-option:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Active/Selected State - Matches 'focus-border-sixth' concept */
.sticker-option.active {
    border-color: #d4af37; /* Gold/Secondary Color */
    background-color: rgba(212, 175, 55, 0.1);
    transform: scale(1.05);
}

/* Scrollable Feed Area */
.wishes-feed-scrollable {
    flex-grow: 1; /* Fills remaining space */
    overflow-y: auto;
    margin-top: 1rem;
    padding-right: 5px;
    max-height: 300px; /* Fixed height for scroll */
}

/* Individual Wish Item */
.wish-item-compact {
    padding: 5px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Countdown Number Styling */
.countdown-number {
  font-size: 0.9rem !important;
  line-height: 1;
  min-width: 60px; /* Ensures numbers don't jump width when changing */
}

/* Label Styling (Days, Hours, etc.) */
.countdown-label {
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 5px;
}

/* The Colon Separator (:) */
.countdown-divider {
  font-size: 2rem;
  line-height: 1;
  margin-top: 5px; /* Adjust align with numbers */
}

/* Mobile Adjustment */
@media (max-width: 576px) {
  .countdown-number {
    font-size: 1.8rem;
    min-width: 40px;
  }
  .countdown-divider {
    font-size: 1.5rem;
    margin: 0 2px;
  }
}


/* 1. Base styles for the image container (Mobile Default) */
.cover-bg {
  /* Mobile Image Path */
  background-image: url("../images/4545b4a0-77dc-11ed-8c9d-79a6c007173b.jpg");
  
  /* Standard background settings */
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 2. Desktop Override (Screens wider than 992px) */
@media (min-width: 992px) {
  .cover-bg {
    /* DESKTOP Image Path - REPLACE 'desktop-image.jpg' below */
    background-image: url("../images/for_desktop.jpg") !important;
  }
  #walimatul {
    font-size: 5rem;
  }
}