@font-face {
    font-family: 'Darlerton';
    src: url('media/fonts/Darleston.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ========================================
   RESET AND BASE STYLES
======================================== */

/* Universal reset for consistent styling across browsers */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global body styles with default font family and colors */
body {
    font-family: "Open Sans", sans-serif;
    color: #000;
    line-height: 1.6;
    background-color: #fff;
}

/* Main container for mobile-first design (iPhone 16 Pro width from Figma) */
.container {
    max-width: 430px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

/* ========================================
   TYPOGRAPHY STYLES
======================================== */

/* Consistent spacing for all heading elements */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.5rem;
}

/* ========================================
   MOBILE OPTIMIZATION
======================================== */

/* Ensure touch targets meet iOS accessibility guidelines */
.form-input,
.send-button {
    min-height: 44px;
    /* iOS minimum touch target size */
    touch-action: manipulation;
}

/* Prevent unwanted text scaling in landscape orientation */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ========================================
   HEADER SECTION
======================================== */

/* Main header with full viewport height and background image */
.header {
    position: relative;
    height: 100vh;
    max-height: 800px;
    /* Optimize for mobile screens */
    background: url("images/header-bg.png") center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    color: #fff;
    background-position-x: -20px;
}

/* ========================================
   CSS GRID UTILITY CLASSES
======================================== */

/* Base grid display */
.grid {
    display: grid;
}

/* Grid column layouts */
.grid-column-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-column-2-1 {
    grid-template-columns: 1.8fr 1.2fr;
}

.grid-column-1-2 {
    grid-template-columns: 1.2fr 1.8fr;
}

.grid-column-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-column-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-column-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-column-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-column-7 {
    grid-template-columns: repeat(7, 1fr);
}

.grid-column-8 {
    grid-template-columns: repeat(8, 1fr);
}

.grid-column-12 {
    grid-template-columns: repeat(12, 1fr);
}

/* Grid row layouts */
.grid-row-2 {
    grid-template-rows: repeat(2, 1fr);
}

.grid-row-3 {
    grid-template-rows: repeat(3, 1fr);
}

.grid-row-4 {
    grid-template-rows: repeat(4, 1fr);
}

.grid-row-auto {
    grid-template-rows: auto;
}

/* Grid gap utilities */
.grid-gap-1 {
    gap: 0.25rem;
}

.grid-gap-2 {
    gap: 0.5rem;
}

.grid-gap-3 {
    gap: 0.75rem;
}

.grid-gap-4 {
    gap: 1rem;
}

.grid-gap-5 {
    gap: 1.25rem;
}

.grid-gap-6 {
    gap: 1.5rem;
}

/* Responsive grid layouts */
.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Grid item alignment */
.grid-center {
    place-items: center;
}

.grid-start {
    place-items: start;
}

.grid-end {
    place-items: end;
}

.grid-stretch {
    place-items: stretch;
}

/* Grid item image styling */
.grid-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}

/* ========================================
   HEADER CONTENT AND OVERLAYS
======================================== */

.window {
    position: fixed;
    width: 100%;
    max-width: 430px;
    height: 100vh;
    z-index: 100;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%);
}

.window-left,
.window-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.window-left {
    left: 0;
    object-position: right;
    /* border-right: 1px solid rgba(255, 0, 0, 0.267); */
}

.window-right {
    right: 0;
    object-position: left;
}

/* Dark overlay for better text readability on header background */
.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(93, 93, 93, 0.29);
}

/* Main content container within header */
.header-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Couple names styling with decorative font */
.couple-names {
    font-family: "WindSong", cursive;
    font-size: 2rem;
    /* Optimized for mobile */
    line-height: 0.9;
    margin-bottom: 1rem;
    width: 90%;
    max-width: 364px;
    /* Based on Figma design */
}

.couple-names span {
    display: block;
    margin: 0.5rem 0;
}

/* Save the date text styling */
.save-date {
    font-family: "Inria Serif", serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* ========================================
   DATE DISPLAY COMPONENTS
======================================== */

/* Container for date information */
.date-info {
    display: flex;
    justify-content: center;
}

.date-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Individual date label with decorative lines */
.date-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85px;
    position: relative;
    margin: 0.5rem 0;
}

.date-label p {
    font-family: "Roboto", sans-serif;
    font-size: 0.9rem;
    margin: 0.2rem 0;
}

/* Decorative lines above and below date elements */
.line-top,
.line-bottom {
    width: 100%;
    height: 1px;
    background-color: #fff;
}

.line-primary {
    background-color: #8e4718;
}

/* ========================================
   FLEXBOX UTILITY CLASSES
======================================== */

/* Base flexbox display */
.d-flex {
    display: flex;
}

/* Flex direction utilities */
.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

/* Alignment utilities */
.align-items-center {
    align-items: center;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-baseline {
    align-items: baseline;
}

.align-items-stretch {
    align-items: stretch;
}

/* Justify content utilities */
.justify-content-center {
    justify-content: center;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-around {
    justify-content: space-around;
}

.justify-content-evenly {
    justify-content: space-evenly;
}

/* Self alignment utilities */
.align-self-auto {
    align-self: auto;
}

.align-self-start {
    align-self: flex-start;
}

.align-self-end {
    align-self: flex-end;
}

.align-self-center {
    align-self: center;
}

.align-self-baseline {
    align-self: baseline;
}

.align-self-stretch {
    align-self: stretch;
}

/* Flex wrap utilities */
.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

/* Flex grow/shrink utilities */
.flex-grow-0 {
    flex-grow: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-shrink-1 {
    flex-shrink: 1;
}

/* Flex shorthand utilities */
.flex-1 {
    flex: 1;
}

.flex-auto {
    flex: auto;
}

.flex-initial {
    flex: initial;
}

.flex-none {
    flex: none;
}

/* Order utilities */
.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-4 {
    order: 4;
}

.order-5 {
    order: 5;
}

.order-first {
    order: -9999;
}

.order-last {
    order: 9999;
}

/* ========================================
   SPACING UTILITY CLASSES
======================================== */

/* Gap utilities for flexbox and grid */
.gap-0 {
    gap: 0;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px;
}

.gap-20 {
    gap: 20px;
}

/* Width utilities */
.w-100 {
    width: 100%;
}

/* Margin utilities */
.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

/* Position utilities */
.relative {
    position: relative;
}

/* Text alignment utilities */
.text-center {
    text-align: center;
}

/* ========================================
   DECORATIVE TEXT AND COUNTDOWN
======================================== */

/* Decorative love text with cursive font */
.love-text {
    font-family: "WindSong", cursive;
    font-size: 2rem;
    color: rgba(144, 105, 79, 0.5);
    line-height: 1.2;
    margin-top: 30%;
}

/* Grid alignment utility */
.grid-items-start {
    align-items: start;
}

/* Large date number display */
.date-number {
    font-family: "Roboto", sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    margin: 0 !important;
}

/* Wedding countdown timer container */
.countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 350px;
    /* Better mobile sizing */
    gap: 0.5rem;
    /* Add consistent spacing */
}

/* Individual countdown time unit */
.countdown-box {
    text-align: center;
    margin: 0 0.3rem;
}

.countdown-box div:first-child {
    font-weight: 400;
    font-size: 0.9rem;
}

.countdown-box div:last-child {
    font-size: 0.8rem;
}

/* Separator between countdown units */
.separator {
    font-weight: 700;
    margin: 0 0.2rem;
}

/* Gradient footer overlay for header section */
.header-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg,
            rgba(100, 100, 100, 0) 0%,
            rgba(0, 0, 0, 1) 100%);
}

/* ========================================
   INVITATION SECTION
======================================== */

/* Main invitation section container */
.invitation {
    padding: 0.5rem;
    background-color: #fff;
    max-width: 100%;
}

/* Header container for invitation section */
.invitation-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Background overlay for invitation header */
.invitation-overlay {
    position: relative;
    width: 90%;
    max-width: 358px;
    /* Based on Figma mobile design */
    height: 180px;
    opacity: 0.1;
    border-radius: 10px;
}

/* Main invitation title styling */
.invitation-title {
    font-family: "WindSong", cursive;
    font-size: 1.5rem;
    font-weight: 400;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* Utility class for rounded corners and shadow */
.round {
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}

/* Decorative flower elements positioned around invitation */
.invitation-left {
    position: absolute;
    left: 0;
    width: 200px;
    height: 200px;
    transform: translateX(-30%) translateY(100px) rotate(45deg);
    margin-top: 20px;
}

.invitation-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 200px;
    transform: translateX(40%) translateY(-10px) rotate(-45deg);
}

/* ========================================
   QUOTE SECTION
======================================== */

/* Inspirational quote styling */
.quote {
    text-align: center;
    margin: 2rem auto;
    max-width: 95%;
    padding: 0 1rem;
}

.quote p {
    font-family: 'Darlerton', cursive;
    font-size: 1.3rem;
    /* Slightly smaller for mobile */
    line-height: 1.3;
}

/* ========================================
   COUPLE PROFILES SECTION
======================================== */

/* Container for bride and groom profiles */
.couple-profiles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin: 2rem 1rem;
    position: relative;
}

.flex-reverse {
    flex-direction: column-reverse !important;
}

/* Decorative flower overlay for profiles section */
.overlay-flower {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-30%) translateX(-20%);
    z-index: 0;
}

/* Individual profile container */
.profile {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Better mobile sizing */
}

/* Profile photo container with rounded corners */
.profile-photo {
    width: 100%;
    max-width: 180px;
    /* Limit size for mobile */
    height: auto;
    border-radius: 4px;
    overflow: hidden;
}

.profile-photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ========================================
   DECORATIVE LINES
======================================== */

/* Horizontal decorative line */
.line-horizontal {
    width: 60%;
    height: 2px;
    background-color: rgba(144, 105, 79, 0.34);
    margin: 0 auto;
}

/* Vertical decorative line */
.line-vertical {
    width: 2px;
    height: 60px;
    background-color: rgba(144, 105, 79, 0.34);
    margin: 0 auto;
}

/* Profile information styling */
.profile-info {
    text-align: center;
    margin-top: 1rem;
}

.profile-info h3 {
    font-family: "Italianno", cursive;
    font-size: 1.8rem;
    font-weight: 400;
}

.profile-info .name {
    font-family: "Italianno", cursive;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    letter-spacing: 1.5px;
}

/* Family information styling */
.family {
    font-family: "Italianno", cursive;
    font-size: 1.5rem;
    line-height: 1.3;
    text-align: center;
}

/* ========================================
   INVITATION MESSAGE SECTION
======================================== */

/* Main container for invitation message and photos */
.invitation-message {
    margin: 3rem 0;
}

.message-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Top message section with title and decorative elements */
.message-top {
    text-align: center;
    margin-bottom: 2rem;
}

/* Decorative line under message title */
.message-line {
    width: 100px;
    height: 1px;
    background-color: rgba(144, 105, 79, 0.34);
    margin: 0.5rem auto;
}

.message-top h3,
#customer-name {
    font-family: "Italianno", cursive;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1rem;
}

#customer-name {
    line-height: 0.5rem;
    text-transform: capitalize;
}

.message-top h3 {
    font-family: "Italianno", sans-serif;
    line-height: 2rem;
    margin-bottom: 10px;
    font-weight: 100;
    font-size: 2rem;
}


#customer-name {
    color: rgba(144, 105, 79);
    border-bottom: 1px dotted rgba(144, 105, 79, 0.5);
    display: inline-block;
    padding: 0 1rem;
}

/* Dotted line decoration */
.dotted-line {
    color: rgba(0, 0, 0, 0.6);
    margin: 0.5rem 0;
}

.message-top h2 {
    font-family: "Italianno", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    margin-top: 1rem;
}

/* Container for message photos grid */
.message-photos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* ========================================
   SWIPER SLIDER CUSTOMIZATION
======================================== */

/* Custom wedding-themed Swiper slider styles */
.wedding-photos-swiper {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    padding: 2rem !important;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-image {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 8px;
    max-width: unset !important;
}

/* Custom navigation buttons with wedding theme colors */
.swiper-button-next,
.swiper-button-prev {
    color: #90694f !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    margin-top: -20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 18px !important;
    font-weight: bold !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(144, 105, 79, 0.9) !important;
    color: white !important;
    transform: scale(1.1) !important;
}

/* Custom pagination dots styling */
.swiper-pagination {
    bottom: 15px !important;
}

.swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: 2px solid rgba(144, 105, 79, 0.6) !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 4px !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
}

.swiper-pagination-bullet-active {
    background-color: #90694f !important;
    border-color: #90694f !important;
    transform: scale(1.2) !important;
}

/* Message photos grid styling */
.message-photos img {
    width: 28%;
    height: auto;
    max-width: 120px;
    object-fit: cover;
    border-radius: 4px;
}

/* ========================================
   CALENDAR SECTION
======================================== */

/* Main calendar container */
.calendar {
    padding: 0 1.5rem;
    max-width: 100%;
}

/* Section title styling */
.section-title {
    font-family: "Adamina", serif;
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 1rem;
}

/* Week day headers grid */
.week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Individual week day name styling */
.day-name {
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-size: 0.8rem;
    color: #6e7781;
    text-transform: uppercase;
}

/* Calendar days grid layout */
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

/* Individual calendar day styling */
.day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    /* Slightly larger for mobile touch */
    min-width: 35px;
    /* Ensure minimum touch target */
    font-family: "Roboto", sans-serif;
    font-size: 0.9rem;
    color: #262d33;
}

/* Styling for days not in current month */
.day.out-of-month {
    opacity: 0.5;
}

/* Special highlighting for wedding day */
.day.highlight {
    position: relative;
}

.day.highlight img {
    width: 100%;
    position: absolute;
    transform: scale(1.5) translateX(-4px) translateY(-2px) rotate(45deg);
    animation: zoomInOut 2s infinite;
}

/* Animation for highlighted wedding day */

@keyframes toLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-120%);
    }
}

@keyframes toRight {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(120%);
    }
}

@keyframes zoomInOut {
    0% {
        transform: scale(1.5) translateX(-4px) translateY(-2px) rotate(45deg);
    }

    50% {
        transform: scale(1.7) translateX(-4px) translateY(-2px) rotate(45deg);
    }

    100% {
        transform: scale(1.5) translateX(-4px) translateY(-2px) rotate(45deg);
    }
}

/* ========================================
   VENUES SECTION
======================================== */

/* Main venues section container */
.venues {
    padding: 1.5rem;
    margin: 1rem 0;
    max-width: 100%;
}

/* Venues section title */
.venues-title {
    font-family: "Italianno", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 2rem;

}

/* Container for venue cards */
.venue-cards {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Individual venue card styling */
.venue-card {
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    color: #9d806d;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Venue card background images for groom and bride venues */
.groom-venue .venue-card-square,
.bride-venue .venue-card-square {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 10px;
    overflow: hidden;
    background-image: url("images/BLM05375.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25);
}

/* Generic square card container */
.card-square {
    width: 100%;
    aspect-ratio: 1/1;
    /* Force square aspect ratio */
    overflow: hidden;
    border-radius: 3px;
    position: relative;
    box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25);
}

.card-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Crop image without distortion */
    object-position: center;
    /* Center the crop */
}

/* Specific background for bride venue */
.bride-venue .venue-card-square {
    background-image: url("images/BLM05149.jpg");
}

/* Venue type title styling */
.venue-type {
    position: relative;
    font-family: "Adamina", serif;
    font-size: 1.2rem;
    font-weight: 400;
    text-align: center;
    margin: 1rem 0;
    margin-bottom: 0;
}

/* Venue date display with decorative elements */
.venue-date {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    gap: 10px;
}

.venue-date .date-label .line-top,
.venue-date .date-label .line-bottom {
    background-color: #8e4718;
}

.venue-date .date-number {
    font-family: "Roboto", sans-serif;
    font-size: 2rem;
    color: #90694f;
}

/* Venue information text styling */
.lunar-date,
.venue-time,
.venue-address {
    position: relative;
    text-align: center;
    margin: 0.5rem 0;
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
}

.venue-address {
    font-family: "Italianno", cursive;
    font-size: 1.3rem;
}

.lunar-date {
    font-style: italic;
    font-size: 0.8rem;
}

.venue-time {
    font-weight: 700;
    font-size: 0.9rem;
    color: #90694f;
}

/* ========================================
   ALBUM SECTION
======================================== */

/* Main album section container */
.album {
    padding: 0 1.5rem;
    position: relative;
    max-width: 100%;
}

/* Album header and container images */
.album-header img,
.album-container img {
    width: 100%;
}

/* Special section 3 album styling */
.album-section3 {
    margin-top: 20px;
}

.album-section3 .image-section3-wrapper {
    width: 80%;
    position: relative;
}

/* Decorative flag element for section 3 */
.album-section3 .image-section3-wrapper::after {
    content: "";
    display: block;
    width: 80px;
    height: 50%;
    background-image: url("images/flag.png");
    position: absolute;
    right: 0;
    top: 30%;
    transform: translateY(-50%) translateX(50%);
    z-index: 1;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Decorative line separator */
.line {
    width: 2px;
    height: 100px;
    background-color: rgba(144, 105, 79, 0.34);
    margin: 0 auto 2rem;
}

/* Heart section title with background line */
.heart-section-title {
    font-family: "Italianno", cursive;
    font-size: 1.5rem;
    position: relative;
}

.heart-section-title::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background-color: rgba(144, 105, 79, 0.34);
    z-index: -1;
}

/* Heart icon container */
.heart-icon {
    display: flex;
    justify-content: center;
    margin: 1rem 0 2rem;
}

.heart-icon img {
    height: 30px;
    margin: 0 0.2rem;
}

/* Album container and content */
.album-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Album quote styling */
.album-quote {
    font-family: "Italianno", cursive;
    font-size: 1.2rem;
    line-height: 1.25;
    /* text-transform: capitalize; */
    margin-top: 1rem;
}

/* ========================================
   ALBUM GRID LAYOUT
======================================== */

/* Main album photo grid */
.album-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 0.8rem;
    /* Slightly smaller gap for mobile */
    margin-bottom: 2rem;
    width: 100%;
    max-width: 380px;
    /* Limit width for mobile */
    margin-left: auto;
    margin-right: auto;
}

/* Individual album item container */
.album-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}

.album-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Specific grid item layouts */
.item1 {
    grid-column: 1 / 3;
    /* Spans across both columns */
    height: 180px;
    /* Adjusted for mobile */
}

.item2,
.item3 {
    height: 130px;
    /* Adjusted for mobile */
}

/* Special text item in album grid */
.item4 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f5f5;
    padding: 0.8rem;
    height: 130px;
    /* Adjusted for mobile */
}

/* Album text styling within grid items */
.album-text {
    text-align: right;
}

.album-text h3 {
    font-family: "Roboto Serif", serif;
    font-size: 2.5rem;
    color: #90694f;
    line-height: 1.1;
    font-weight: 400;
}

/* Vertical text orientation for special layouts */
.album-text.vertical h3 {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    z-index: 10000;
}

/* Love box styling */
.love-box {
    background-color: #d9d9d9;
    border-radius: 2px;
    padding: 0.5rem 1rem;
}

.love-box p {
    font-family: "WindSong", cursive;
    font-size: 1.2rem;
    color: #90694f;
}

/* Small couple names text */
.couple-names-small {
    font-family: "Italianno", cursive;
    font-size: 2.5rem;
    color: rgba(144, 105, 79, 0.59);
    text-align: center;
}

/* Album section title */
.album-title {
    font-family: "Italianno", cursive;
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: capitalize;
}

/* ========================================
   GUESTBOOK SECTION
======================================== */

/* Main guestbook section */
.guestbook {
    margin-top: 2rem;
    max-width: 100%;
}

.guestbook-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Guestbook header with photo and title */
.guestbook-header {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    gap: 20px;
}

/* Background overlay for guestbook header */
.guestbook-header::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 50%;
    background-color: rgba(202, 179, 164, 0.5);
    z-index: -1;
}

/* Guestbook photo with polaroid-style border */
.guestbook-photo {
    width: 40%;
    height: 280px;
    padding: 10px;
    border: 1px solid #b9aaa0;
    position: relative;
    margin-left: 40px;
}

.guestbook-photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
    position: absolute;
    top: 10px;
    left: -20px;
}

/* Guestbook section title */
.guestbook-title {
    font-family: "Italianno", cursive;
    font-size: 2rem;
    color: #797373;
    font-weight: 200;
    flex: 1;
    position: relative;
}

/* Decorative heart icon for guestbook title */
.guestbook-title img {
    position: absolute;
    top: -20px;
    width: 50px;
    filter: drop-shadow(4px 6px 6px rgba(0, 0, 0, 0.2));
    right: 20%;
    transform: rotate(45deg);
}

/* ========================================
   GUESTBOOK FORM
======================================== */

/* Main form container */
.guestbook-form {
    width: 100%;
    max-width: 380px;
    /* Better mobile sizing */
    margin-top: 20px;
}

/* Guestbook introductory message */
.guestbook-message {
    font-family: "Italianno", cursive;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 20px;
    font-weight: 200;
}

/* Form group container */
.form-group {
    margin-bottom: 1rem;
}

/* Form input styling */
.form-input {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #b9aaa0;
    border-radius: 9px;
    font-family: "Inter", sans-serif;
    font-size: 0.8rem;
    color: #787878;
    min-height: 44px;
    /* iOS minimum touch target */
    touch-action: manipulation;
    outline: none;
}

.form-input:focus {
    border-color: #90694f;
    box-shadow: 0 0 5px rgba(144, 105, 79, 0.5);
}

/* Send button styling */
.send-button {
    width: 100%;
    padding: 0.8rem;
    background-color: #fff;
    border: 1px solid #b9aaa0;
    border-radius: 9px;
    font-family: "Inter", sans-serif;
    font-size: 0.8rem;
    color: #b9aaa0;
    cursor: pointer;
    margin-bottom: 1.5rem;
    min-height: 44px;
    /* iOS minimum touch target */
    touch-action: manipulation;
    transition: background-color 0.3s ease;
}

.send-button:hover {
    background-color: #f5f5f5;
}

.send-button:active {
    background-color: #e0e0e0;
}

/* ========================================
   TIMER AND THANK YOU SECTIONS
======================================== */

/* Wedding countdown timer container */
.timer-container {
    position: relative;
    width: 80%;
    border: 1px solid #cab3a4;
    height: 50px;
    margin: 20px;
}

/* Timer label with background styling */
.timer-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 0.5rem 1rem;
}

.timer-label-bg {
    font-family: "Italianno", cursive;
    font-size: 2rem;
    color: #cab3a4;
    line-height: 0.8rem;
    letter-spacing: 5px;
}

/* Timer display styling */
.timer {
    text-align: center;
    font-family: "Open Sans", sans-serif;
    font-size: 1.5rem;
    color: #cab3a4;
    line-height: 50px;
}

/* ========================================
    MAP SECTION
======================================== */

/* Main map section container */
.map-section {
    width: 100%;
    max-width: 430px;
    padding: 0 1.5rem;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map-title {
    font-family: "Italianno", sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.map-title img {
    height: 30px;
    width: 30px;
    flex-grow: 0;
    margin-right: 10px;
}

.qr-gift-section {
    font-family: "Fleur De Leah", cursive;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin-bottom: 1.5rem;
}

.qr-gift-section h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.qr-gift-section p {
    font-size: 8px;
    line-height: 1.3;
    margin-bottom: 1rem;
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-style: italic;
    color: #888;
}

/* ========================================
   THANK YOU SECTION
======================================== */

#music-toggle:hover {
    opacity: 1;
}

/* Thank you section with background image */
.thank-you-container {
    position: relative;
    height: 200px;
    background-image: url("images/thank-you-photo.png");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thank-you-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(217, 217, 217, 0.45);
}

.thank-you {
    position: relative;
    font-family: "Italianno", cursive;
    font-size: 2.5rem;
    color: #fff;
    text-shadow: 1px 4px 4.3px rgba(0, 0, 0, 0.25);
    margin-top: 100px;
    font-weight: 200;
    letter-spacing: 5px;
}

/* ========================================
   ANIMATIONS AND TRANSITIONS
======================================== */

/* Base fade-in animation */
.toLeft {
    animation: toLeft 1s forwards;
}

.toRight {
    animation: toRight 1s forwards;
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.active {
    opacity: 1;
    transform: translateY(0);
}

/* Slide in from left animation */
.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-left.active {
    opacity: 1;
    transform: translateX(0);
}

/* Slide in from right animation */
.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-right.active {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-bottom {
    opacity: 0;
    transform: translateY(50%);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-bottom.active {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-top {
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-top.active {
    opacity: 1;
    transform: translateY(0);
}

/* Scale-in animation */
.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scale-in.active {
    opacity: 1;
    transform: scale(1);
}

/* Animation delay utilities */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

.delay-600 {
    transition-delay: 0.6s;
}

.delay-700 {
    transition-delay: 0.7s;
}

.delay-800 {
    transition-delay: 0.8s;
}

.delay-1000 {
    transition-delay: 1s;
}

.delay-1200 {
    transition-delay: 1.2s;
}

.delay-1500 {
    animation-delay: 1.5s !important;
    transition-delay: 1.5s !important;
}

.delay-2000 {
    animation-delay: 2s !important;
    transition-delay: 2s !important;
}

/* Additional animation effects */
/* Slide up animation */
.map-animation {
    animation: ring 2s 2s infinite;
}

@keyframes ring {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Zoom in out animation */
.zoom-in-out {
    animation: zoomInOutCustom 2s infinite;
}

@keyframes zoomInOutCustom {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

.slide-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Slide down animation */
.slide-down {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-down.active {
    opacity: 1;
    transform: translateY(0);
}

/* Rotate in animation */
.rotate-in {
    opacity: 0;
    transform: rotate(-10deg) scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.rotate-in.active {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Zoom in animation */
.zoom-in {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.zoom-in.active {
    opacity: 1;
    transform: scale(1);
}

/* Bounce in animation */
.bounce-in {
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.6s ease,
        transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-in.active {
    opacity: 1;
    transform: scale(1);
}

/* Section-level animation states */
.scroll-animate {
    transition: all 0.3s ease;
}

/* Staggered animation for child elements */
.scroll-animate .fade-in,
.scroll-animate .slide-in-left,
.scroll-animate .slide-in-right,
.scroll-animate .scale-in,
.scroll-animate .slide-up,
.scroll-animate .slide-down,
.scroll-animate .rotate-in,
.scroll-animate .zoom-in,
.scroll-animate .bounce-in {
    transition-duration: 0.8s;
    transition-timing-function: ease-out;
}

/* Special animation for the calendar highlight */
.calendar .day.highlight.active img {
    animation: zoomInOut 2s infinite;
}

/* Enhanced heart animation */
@keyframes heartPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.heart-icon img {
    animation: heartPulse 2s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.2s);
}

/* Smooth transitions for all animated elements */
.fade-in,
.slide-in-left,
.slide-in-right,
.scale-in,
.slide-up,
.slide-down,
.rotate-in,
.zoom-in,
.bounce-in {
    will-change: opacity, transform;
}