/* 全站基本設定 */
body {
    font-family: 'Arial', sans-serif;
    background-color: #fff5f0;
    color: #5a2a27;
    text-align: center;
    margin: 0;
    padding: 0;
}

.hero-image {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.hero-bg {
    background-image: url('0520.jpg'); /* 換成你的圖 */
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    transform: scale(1);
    transition: transform 0.1s linear;
    z-index: 0;
    will-change: transform;
}


.hero-image .container {
    position: relative;
    z-index: 2;
}

.hero-image::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.2); /* 可調深色濾鏡效果 */
    z-index: 1;
}

.hero-text-block {
    position: relative;
    z-index: 2;
    margin-bottom: 40px;
}

.hero-timer {
    font-size: 1.6rem;
    font-weight: bold;
    color: white;
    padding: 0;
}

.hero-names {
    font-size: 2.5rem;
    margin: 10px 0 5px;
}

.hero-info {
    font-size: 1.2rem;
    margin: 0 auto;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.7);
    color: #5a2a27;
    padding: 8px 16px;
    border-radius: 12px;
}

header {
    background-color: #8B0000;
    color: white;
    padding: 20px 0;
    font-size: 24px;
}

h1, h2 {
    font-family: 'Georgia', serif;
}

/* 倒數計時樣式 */
#countdown {
    margin: 20px 0;
}
/*
#timer {
    font-size: 1.5rem;
    font-weight: bold;
    background: #8B0000;
    color: white;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
}
*/
/* 輪播婚紗照 */
.slideshow-container {
    max-width: 800px;
    margin: auto;
}

.carousel-item img {
    max-height: 500px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* 婚禮流程時間軸 */
.timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
}

.timeline-item {
    background: #fae1dd;
    color: #5a2a27;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
    width: 50%;
    text-align: left;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.time {
    font-size: 20px;
    font-weight: bold;
    color: #8B0000;
}

.event {
    font-size: 1.1rem;
}

/* Dress Code 區域 */
#dress-code {
    background-color: #8B0000;
    color: white;
    padding: 20px;
    border-radius: 10px;
}

#portraits {
    background-color: #fffaf7;
}

.portrait-name {
    font-family: 'Georgia', serif;
    font-size: 1.5rem;
    color: #5a2a27;
    margin-bottom: 0;
}

.portrait-caption {
    font-size: 1.1rem;
    color: #5a2a27;
    padding: 20px;
}

@media (max-width: 768px) {
    .portrait-caption {
        text-align: center !important;
    }
}


#portraits img {
    max-width: 60%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

#portraits img:hover {
    transform: scale(1.02);
}

@media (min-width: 768px) {
    .row.flex-md-row-reverse .col-md-6:first-child {
        text-align: right;
    }

    .row:not(.flex-md-row-reverse) .col-md-6:first-child {
        text-align: left;
    }
}

.portrait-name {
    font-family: 'Georgia', serif;
    font-size: 1.5rem;
    color: #5a2a27;
    line-height: 1.2;
}

.portrait-en {
    font-size: 1rem;
    color: #8B0000;
    font-style: italic;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* 基本樣式 */
.portrait-text {
    font-size: 1.1rem;
    color: #5a2a27;
    line-height: 1.8;
    font-weight: 500;
    padding: 15px 20px;
    background-color: #fff8f2;
    border-radius: 8px;
    white-space: pre-line;
}

/* 新郎段落（在 .flex-md-row-reverse 裡） → 左邊框線 */
#portraits .row.flex-md-row-reverse .portrait-text {
    border-left: 4px solid #d9a979;
    text-align: left;
}

/* 新娘段落（正常順序） → 右邊框線 */
#portraits .row:not(.flex-md-row-reverse) .portrait-text {
    border-right: 4px solid #d9a979;
    text-align: right;
}

/* 手機版統一置中＆取消框線 */
@media (max-width: 768px) {
    .portrait-text {
        border-left: none !important;
        border-right: none !important;
        text-align: center !important;
    }
}

/* 按鈕樣式 */
.btn-custom {
    background: #8B0000;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.3s;
}

.btn-wedding:hover {
    background: #a52a2a;
}

/**音樂的部分*/
.mute-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    color: #5a2a27;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    width: 48px;
    height: 48px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 9999;
    transition: background-color 0.3s ease;
}

.mute-btn:hover {
    background-color: #fff3ec;
}


/*婚禮流程*/
#schedule {
    background-color: #fff8f2;
    border-top: 1px solid #e5d5c3;
    border-bottom: 1px solid #e5d5c3;
}

#schedule h2 {
    color: #5a2a27;
    font-weight: bold;
}

.invite-text {
    font-size: 1.2rem;
    color: #5a2a27;
    background-color: #fff;
    padding: 20px;
    border-left: 4px solid #d9a979;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    line-height: 2;
}

.invite-card {
    background-color: #ffffff;
    padding: 30px 20px;
    border-radius: 40px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #f0e5dc;
    max-width: 360px;
    width: 100%;
}

.invite-icon {
    font-size: 2.2rem;
    color: #8B4513;
}

.invite-labels {
    font-weight: bold;
    font-size: 1.4rem;
    color: #5a2a27;
    margin-bottom: 8px;
}

.invite-names {
    font-size: 1.4rem;
    font-family: 'Georgia', serif;
    color: #5a2a27;
    line-height: 1.6;
}
.invite-section-title {
    font-size: 1.4rem;
    font-weight: bold;
    margin: 12px 0 4px;
    color: #5a2a27;
}

.invite-footer {
    font-size: 1.4rem;
    color: #5a2a27;
    font-weight: bold;
    letter-spacing: 2px;
}

.invite-card-full {
    background-color: #ffffff;
    padding: 30px 20px;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border: 1px solid #f0e5dc;
    width: 100%; /* 讓它和左側流程區塊寬度一致 */
}

@media (max-width: 768px) {
    .invite-card-full {
        padding: 20px 15px;
        border-radius: 20px;
    }
}

.leaf {
    position: absolute;
    font-size: 1.8rem;
    opacity: 0.5;
    pointer-events: none;
    transition: transform 0.3s ease;
}

/* 左側葉子（leaf1～leaf5） */
.leaf1 { top: 10px; left: -30px; transform: rotate(-10deg); }
.leaf2 { top: 60px; left: -25px; transform: rotate(20deg); }
.leaf3 { top: 120px; left: -35px; transform: rotate(-15deg); }
.leaf4 { top: 180px; left: -28px; transform: rotate(12deg); }
.leaf5 { top: 240px; left: -32px; transform: rotate(-8deg); }

/* 右側葉子（leaf6～leaf10） */
.leaf6  { top: 10px; right: -30px; transform: scaleX(-1) rotate(-10deg); }
.leaf7  { top: 60px; right: -25px; transform: scaleX(-1) rotate(18deg); }
.leaf8  { top: 120px; right: -35px; transform: scaleX(-1) rotate(-12deg); }
.leaf9  { top: 180px; right: -28px; transform: scaleX(-1) rotate(15deg); }
.leaf10 { top: 240px; right: -32px; transform: scaleX(-1) rotate(-6deg); }

/* 手機版隱藏葉子，避免太擠 */
@media (max-width: 768px) {
    .leaf {
        display: none;
    }
}

/*LINE*/
#line-group {
    background-color: #fffdf9;
    border-top: 1px solid #f0e5dc;
    border-bottom: 1px solid #f0e5dc;
}

#line-group h2 {
    color: #5a2a27;
    font-weight: bold;
}

#line-group p {
    font-size: 1rem;
    color: #5a2a27;
    line-height: 1.6;
}

.btn-line-link {
    display: inline-block;
    background-color: #00b900;
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.btn-line-link:hover {
    background-color: #00a200;
}

.bubble-box {
    background-color: #f1fdf6;
    border-radius: 20px;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
    position: relative;
    text-align: left;
}

/* 小氣泡尾巴（三角形） */
.bubble-box::after {
    content: '';
    position: absolute;
    left: 20px;
    bottom: -15px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #f1fdf6;
}

/*交通資訊*/
#transportation h2 {
    color: #5a2a27;
    font-weight: bold;
}

.transport-text h5 {
    color: #8B0000;
    font-size: 1.1rem;
    margin-top: 1rem;
}

.transport-text ul {
    padding-left: 1.2rem;
    margin-bottom: 1rem;
}

.transport-text li {
    font-size: 1rem;
    color: #5a2a27;
    line-height: 1.6;
}

#transportation img {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/**google map*/
#google-map {
    margin-top: 40px;
    border-top: 1px solid #eee;
}

.btn-map-link {
    display: inline-block;
    background-color: #8B0000;
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.btn-map-link:hover {
    background-color: #a52a2a;
}

/* 小裝飾的時間軸保留原本樣式即可 */
.timeline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}


.line-float-btn {
    position: fixed;
    bottom: 80px; /* 比靜音鈕高一點 */
    right: 20px;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    background-color: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.line-float-btn:hover {
    transform: scale(1.05);
}

.line-icon {
    width: 42px;
    height: 42px;
}

.transport-text {
    text-align: left; /* 確保所有裝置都左對齊 */
}

/* 固定輪播容器高度 */
.carousel-item {
    height: 600px; /* 可自行調整高度 */
    overflow: hidden;
}

/* 輪播圖片填滿並等比例裁切 */
.carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .carousel-item {
        height: 400px;
    }
}

.timeline-item {
    background: #fae1dd;
    color: #5a2a27;
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.05);
    width: 100%;
}

.time {
    font-size: 1.2rem;
    font-weight: bold;
    color: #8B0000;
}

.event {
    font-size: 1.1rem;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .invite-text {
        text-align: center;
        border-left: none;
        border-top: 4px solid #d9a979;
    }
}

#wedding-footer {
    background-color: #fff8f2;
    border-top: 1px solid #e5d5c3;
    margin-top: 60px;
}

#wedding-footer p {
    color: #5a2a27;
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 0;
}



/* 響應式調整 */
@media (max-width: 768px) {
    header {
        font-size: 20px;
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    #timer {
        font-size: 1.2rem;
        padding: 8px 15px;
    }
    
    .time {
        font-size: 1.1rem;
    }
    
    .event {
        font-size: 1rem;
    }
    
    .btn-wedding {
        font-size: 1rem;
        padding: 8px 15px;
    }
}

@media (max-width: 576px) {
    header {
        font-size: 18px;
        padding: 15px 0;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.3rem;
    }
    
    #timer {
        font-size: 1rem;
        padding: 6px 12px;
    }
}