/* ==========================================================================
   全域變數與專案主題顏色
   ========================================================================== */
:root {
    --theme-primary: #C1522B;
    --theme-secondary: #8E5E25;
    --theme-info: #45BABA;
    --theme-dark-red: #832e1c;
    --theme-gold: #E7D198;
}

/* 標題與說明區塊 */
.hosp-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.book-desc {
    font-size: 1.1rem;
    font-weight: 600;
}

.desc-block {
    background-color: var(--bgcolor, #f8f9fa);
    color: var(--color, #212529);
    border-radius: 1.25rem;
    padding: 1.25rem;
}

/* 圖片與互動效果 */
.btn-hover-effect {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.btn-hover-effect:hover {
    transform: scale(1.02);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.border-dashed {
    border-style: dashed !important;
}

/* ==========================================================================
   客製化按鈕 (對應舊有 button-5, button-4, button-6)
   ========================================================================== */
.btn-custom {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.75rem 2.5rem;
    border-radius: 50px;
    border: 3px solid #fff;
    color: #fff !important;
    box-shadow: 0 8px 0 0 #BEBEBE, 0 8px 8px 1px rgba(0, 0, 0, .2);
    transition: all 0.3s ease;
    position: relative;
}

.btn-custom:active {
    top: 2px;
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
}

.btn-custom-primary {
    background-color: var(--theme-primary);
}
.btn-custom-primary:hover, .btn-custom-primary:active {
    background-color: #9E4323;
    border-color: #9E4323;
}

.btn-custom-secondary {
    background-color: var(--theme-secondary);
}
.btn-custom-secondary:hover, .btn-custom-secondary:active {
    background-color: #6E491D;
    border-color: #6E491D;
}

.btn-custom-info {
    background-color: var(--theme-info);
}
.btn-custom-info:hover, .btn-custom-info:active {
    background-color: #31A3A0;
    border-color: #31A3A0;
}

.btn-custom-danger {
    background-color: #EA2F14;
    border-radius: 20px;
    padding: 0.5rem 1.25rem;
}
.btn-custom-danger:hover, .btn-custom-danger:active {
    background-color: #E6521F;
}

/* ==========================================================================
   處方卡片與日期元件
   ========================================================================== */
.card-block {
    background-color: var(--theme-dark-red);
    color: #ffffff;
    border-radius: 10px;
}

.pre-pt {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--theme-dark-red);
}

.pre-desc {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
}


/* ==========================================================================
   日期卡片區塊 - 底色與 Hover 修正
   ========================================================================== */
.date-block {
    /* 強制給予預設底色（米黃色/金黃色系），避免變數失效導致變透明 */
    background-color: var(--theme-gold-bg, #FFF9EF) !important;
    border: 2px solid var(--theme-gold, #E7D198);
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}

/* Hover 時加深背景與陰影 */
.date-block:hover {
    background-color: #F0E4D3 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Badge 區塊防壓縮 */
.date-badge {
    background-color: var(--theme-dark-red, #832e1c);
    color: #FFFFFF;
    border-radius: 8px;
    padding: 0.5rem;
    min-width: 75px;
    flex-shrink: 0;
}

/* ==========================================================================
   預約紀錄卡片與 RWD 修正
   ========================================================================== */

/* 日期 Badge 置中維持 */
.qdate-badge {
    background-color: #ed5d24;
    color: #FFFFFF;
    border-radius: 12px;
    padding: 0.5rem 0.8rem;
    min-width: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

/* 手機版全寬按鈕樣式 (文字強制居中) */
@media (max-width: 576px) {
    .mobile-full-btn {
        width: 100%;
        max-width: 280px; /* 避免手機版按鈕過寬，保持精緻感與置中效果 */
        margin: 0 auto;
        text-align: center;
    }
}

.qdate-badge .qdate-year {
    font-size: 1.5rem;
    font-weight: 700;
    opacity: 0.9;
}

.qdate-badge .qdate-day {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

/* 按鈕微調：手機版自動滿寬 */
.btn-custom {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    border: 2px solid #fff;
    color: #fff !important;
    box-shadow: 0 4px 0 0 #BEBEBE, 0 4px 6px 1px rgba(0, 0, 0, .15);
    transition: all 0.3s ease;
    white-space: nowrap; /* 避免按鈕文字斷行 */
}

.btn-custom-danger {
    background-color: #EA2F14;
    border-radius: 20px;
    padding: 0.5rem 1rem;
}

/* 📱 手機版專屬優化 (螢幕寬度 < 576px) */
@media (max-width: 576px) {
    /* 1. 減小內距，增加可顯示空間 */
    .date-block {
        padding: 0.875rem !important;
    }

    /* 2. 標題與文字縮小一級，避免撐爆 */
    .hosp-title {
        font-size: 1.25rem !important;
    }
    
    .pre-pt {
        font-size: 1rem !important;
    }

    .pre-desc {
        font-size: 1.2rem !important;
    }

    /* 3. 按鈕在手機版調整為 100% 寬度（方便點擊且不會推開排版） */
    .mobile-full-btn {
        width: 100%;
        display: block;
        margin-top: 0.5rem;
    }

    /* 4. 處方頂部卡片文字大小優化 */
    .card-block div {
        font-size: 0.95rem !important;
        text-align: left !important; /* 手機版靠左較好閱讀 */
    }
}

.blink_text {
    animation: blinker 1.2s linear infinite;
}
@keyframes blinker {
    50% { opacity: 0; }
}

.banner-img {
    max-height: 280px;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 576px) {
    .banner-img {
        max-height: none !important;
        object-fit: contain !important;
    }
}
.footer-text {
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}