/*:root {
    --primary: #4A5D23;
    --secondary: #8F9779;
    --accent: #D4B872;
    --dark: #2C3617;
}*/
:root {
    --primary: #276852;   /* 園區經典綠：呼應實體看板的森林綠，給人安心、大自然的感覺 */
    --secondary: #B34D2E; /* 落羽松紅：作為次要按鈕或重要提示的顏色，在綠色中會非常跳脫亮眼 */
    --accent: #E5A93C;    /* 暖陽金黃：用於小圖示、徽章或分隔線，增加畫面的活潑度 */
    --dark: #1F3025;      /* 幽靜墨綠：極深的綠色，用於文字，與主色完美融合 */
    --primarylight: #2e896a;
    --red: #ef4444;
    --white:#ffffff;
}
footer{text-align: center;font-size: 14px;padding: 3px 0px;background: var(--primary);color: var(--white);}
.logo img{height: 50px;}
.bg-primary { background-color: var(--primary); }
.bg-secondary{ background-color: var(--secondary); }
.text-primary { color: var(--primary); }
.border-primary { border-color: var(--primary); }
.text-accent { color: var(--accent); }
.text-red{ color: var(--red); }
.flex-cc{display: flex;align-content: center;justify-content: center;}
.flex-c{display: flex;align-content: center;}
body { font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; background-color: #f7f9f6; overflow-y: scroll; }
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.mock-qr {
    background-image: repeating-linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000),
                      repeating-linear-gradient(45deg, #000 25%, #fff 25%, #fff 75%, #000 75%, #000);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}
.hero-pattern {
    background-color: var(--primary);
    background-image: radial-gradient(#8F9779 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Custom Tailwind Colors because CDN might not parse innerHTML perfectly */
.bg-primary { background-color: var(--primary); }
.text-primary { color: var(--primary); }
.border-primary { border-color: var(--primary); }
.hover\:bg-primary:hover { background-color: var(--primary); }
.hover\:text-primary:hover { color: var(--primary); }
.focus\:ring-primary:focus { --tw-ring-color: var(--primary); box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); }
.focus\:border-primary:focus { border-color: var(--primary); }

.bg-secondary { background-color: var(--secondary); }
.text-secondary { color: var(--secondary); }

.bg-accent { background-color: var(--accent); }
.text-accent { color: var(--accent); }
.border-accent { border-color: var(--accent); }

.bg-dark { background-color: var(--dark); }
.text-dark { color: var(--dark); }
.hover\:border-primary:hover { border-color: var(--primary) }

.bg-primarylight { background-color: var(--primarylight); }
.text-primarylight { color: var(--primarylight); }
.hover\:border-primary:hover { border-color: var(--primary) }


.banner-slider { position: relative; overflow: hidden; }
    .banner-slide { position: relative; height: 420px; overflow: hidden; }
    /* Mobile optimization: Increased height for better visual impact without being overwhelmingly tall */
    @media (max-width: 768px) { 
        .banner-slide { height: 500px; } 
    }
    .banner-slide img { width: 100%; height: 100%; object-fit: cover; }
    .banner-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.1) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; padding-bottom: 2.5rem; color: #fff; }
    .banner-overlay h2 { font-size: 1.5rem; font-weight: 900; margin-bottom: 0.5rem; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
    .banner-overlay p { font-size: 0.95rem; opacity: 0.9; max-width: 600px; line-height: 1.6; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }
    @media (min-width: 768px) { 
        .banner-overlay { padding: 3rem; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.25) 100%); } 
        .banner-overlay h2 { font-size: 2.25rem; } 
        .banner-overlay p { font-size: 1.1rem; } 
    }
    .banner-slider .slick-dots { position: absolute; bottom: 12px; z-index: 10; }
    .banner-slider .slick-dots li button:before { color: #fff; opacity: 0.6; font-size: 10px; }
    .banner-slider .slick-dots li.slick-active button:before { color: #fff; opacity: 1; }
    .banner-slider .slick-prev, .banner-slider .slick-next { z-index: 10; width: 44px; height: 44px; }
    .banner-slider .slick-prev { left: 12px; } .banner-slider .slick-next { right: 12px; }
    .banner-slider .slick-prev:before, .banner-slider .slick-next:before { font-size: 28px; text-shadow: 0 2px 6px rgba(0,0,0,0.4); }
    /* Hide arrows on mobile to prevent overlap with text, rely on touch swipe */
    @media (max-width: 768px) {
        .banner-slider .slick-prev, .banner-slider .slick-next { display: none !important; }
    }
    .merchant-filter-btn { background: #f3f4f6; color: #6b7280; border: 1px solid transparent; }
    .merchant-filter-btn:hover { background: #e5e7eb; }
    .merchant-filter-btn.active { background: var(--primary); color: #fff; border-color: #4A5D23; }



    /* Custom Flatpickr Primary Color Theme */
    .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
    }
    .flatpickr-months .flatpickr-month,
    .flatpickr-months .flatpickr-prev-month,
    .flatpickr-months .flatpickr-next-month {
        color: #fff !important;
        fill: #fff !important;
        background: var(--primary) !important;
    }
    .flatpickr-monthDropdown-months {
        background: var(--primary) !important;
        color: #fff !important;
    }
    .flatpickr-monthDropdown-months option {
        background: #fff !important;
        color: #333 !important;
    }
    .flatpickr-weekdays, span.flatpickr-weekday {
        background: var(--primary) !important;
        color: #fff !important;
    }
    .flatpickr-footer {
        display: flex;
        justify-content: space-between;
        padding: 10px 12px;
        border-top: 1px solid #f3f4f6;
        background: #fff;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    
 .calendaricon{
  position: relative;
  width: 100%;
  display: inline-block;
}

.calendaricon::before {
  content: "\f274" !important; 
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important; 
  color: var(--primary); 
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none; 
  font-size: 18px;
}