:root {
    --ytlee-blue: rgb(0, 96, 180);
    --ytlee-blue-light: rgba(0, 96, 180, 0.1); /* 主題色的輕微透明 */
    --ytlee-blue-hover: rgba(0, 96, 180, 0.8); /* 主題色的 hover 效果 */
    --disabled-bg: #f0f0f0; /* 禁用狀態的背景色 */
    --disabled-text: #999; /* 禁用狀態的文字顏色 */
    --header-bg-url: url(../img/activity_header.jpg); /* header圖片 */
}

/*----------不同螢幕的圖片排版----------*/
.ytlee-activity-img-container {
    position: relative;
    overflow: hidden;
}

.ytlee-activity-img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    transition: transform 0.3s ease;
}

    .ytlee-activity-img:hover {
        transform: scale(1.1);
    }

/* 在小螢幕時進一步縮小圖片高度 */
@media (max-width: 768px) {
    .ytlee-activity-img-container {
        height: 150px;
    }
}

/* 在中等螢幕時調整圖片高度 */
@media (min-width: 769px) and (max-width: 1199px) {
    .ytlee-activity-img-container {
        height: 250px;
    }
}

/* 在大螢幕時增加圖片高度 */
@media (min-width: 1200px) {
    .ytlee-activity-img-container {
        height: 350px;
    }
}

/*----------header----------*/
.ytlee-page-header {
    background: linear-gradient(rgba(0, 0, 0, .05), rgba(0, 0, 0, .05)), var(--header-bg-url) center center no-repeat;
    background-size: cover;
    position: relative;
    padding-top: 40%;
    height: auto;
}

@media (min-width: 768px) {
    .ytlee-page-header {
        padding-top: 20%;
    }
}

/*----------活動工具----------*/
.ytlee-activity-btn-tool {
    background-color: var(--ytlee-blue);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 8px 3px rgba(0, 96, 180, 0.3);
}

    .ytlee-activity-btn-tool:hover {
        background-color: var(--ytlee-blue-hover);
        box-shadow: 0 0 12px 6px rgba(0, 96, 180, 0.5);
    }

.modal-header {
    background: var(--ytlee-blue);
    color: white;
    padding: 1rem;
    border-bottom: none;
}

.btn-close {
    filter: invert(1); /* 使按鈕的顏色反轉，這對於原本是黑色的按鈕會顯示為白色 */
}

.ytlee-activity-tool-custom-btn {
    min-width: 80px;
    max-width: 100px;
}

/*----------activity_container容器----------*/
.ytlee-activity-border-bottom {
    border-bottom: 2px dashed var(--ytlee-blue-light);
    padding-bottom: 20px;
}

.ytlee-activity-item {
    padding-bottom: 30px !important;
}

#activity_container .row.mb-4 {
    margin-bottom: 20px;
    padding: 15px;
    border-bottom: 2px dashed var(--ytlee-blue-light);
}

#activity_container img {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#activity_container h4 {
    color: var(--ytlee-blue);
    font-weight: bold;
}

#activity_container h5 {
    color: rgba(0, 96, 180, 0.6);
    font-weight: bold;
}

#activity_container p {
    color: #555;
}

#activity_container .btn-primary {
    background-color: var(--ytlee-blue);
    border: none;
    transition: background-color 0.3s ease;
}

    #activity_container .btn-primary:hover {
        background-color: var(--ytlee-blue-hover);
    }

/*----------子頁Details樣式----------*/
.ytlee-page-header-activity-details {
    --header-bg-url: url(../img/activity_activity_details_header.jpg);
}

.bg-primary {
    background-color: rgb(0, 96, 180) !important;
}

/*----------活動按鈕 (lg 以下)----------*/
@media (max-width: 991.98px) {
    .ytlee-back-to-top {
        bottom: 100px;
    }
}

.mobile-bottom-bar {
    height: 10%;
}

/*----------活動按鈕 (任何尺寸)----------*/
.floating-sidebar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.9); /* 半透明背景 */
    padding: 10px;
    border-radius: 20px 0 0 20px; /* 讓左側有圓角 */
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease-in-out; /* 漸變動畫 */
}

    .floating-sidebar a {
        width: 80px;
        height: 110px;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    .floating-sidebar img {
        max-width: 80px; /* 限制圖片大小 */
    }

.floating-sidebar-btn:hover {
    background-color: var(--ytlee-blue-hover);
    box-shadow: 0 0 3px 1px rgba(0, 96, 180, 0.3);
}

.floating-sidebar.hidden {
    right: -100px; /* 移出視窗外 */
}

/*----------活動梯次卡片樣式----------*/
.session-card {
    border: 1px solid rgba(0, 96, 180, 0.2);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.session-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 96, 180, 0.15);
}

.session-card .card-body {
    padding: 1.25rem;
}

.session-card .form-check {
    margin-bottom: 1rem;
    padding: 0.5rem;
    background-color: var(--ytlee-blue-light);
    border-radius: 6px;
}

.session-card .form-check-input:checked {
    background-color: var(--ytlee-blue);
    border-color: var(--ytlee-blue);
}

.session-card .session-info {
    padding-top: 0.5rem;
}

.session-card .text-muted {
    color: #6c757d !important;
    font-weight: 500;
}

@media (max-width: 576px) {
    .session-card .row > div {
        padding: 0.35rem;
    }
}