/* ── Mazu custom color utilities ── */
.bg-mazu-bg    { background-color: #FFFBF0; }
.bg-mazu-red   { background-color: #D32F2F; }
.bg-mazu-pink  { background-color: #FF69B4; }
.bg-mazu-gold  { background-color: #FDB813; }
.text-mazu-red  { color: #D32F2F; }
.text-mazu-pink { color: #FF69B4; }
.text-mazu-gold { color: #FDB813; }
.border-mazu-red  { border-color: #D32F2F; }
.border-mazu-pink { border-color: #FF69B4; }
.border-mazu-gold { border-color: #FDB813; }
.ring-mazu-pink   { --tw-ring-color: #FF69B4; }
/* opacity variants */
.border-mazu-red\/30 { border-color: rgb(211 47 47 / 0.3); }
.bg-mazu-red\/10     { background-color: rgb(211 47 47 / 0.1); }
/* hover variants */
.hover\:bg-mazu-gold:hover   { background-color: #FDB813; }
.hover\:border-mazu-pink:hover { border-color: #FF69B4; }
/* file input */
.file\:text-mazu-red::file-selector-button { color: #D32F2F; }

        body {
            font-family: 'Noto Sans TC', sans-serif;
            background-color: #FFFBF0;
            scroll-behavior: smooth; /* 平滑捲動 */
        }
        
        /* 通用輪播樣式 */
        .carousel-container {
            position: relative;
            overflow: hidden;
        }
        .carousel-item {
            transition: opacity 0.7s ease-in-out;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }
        .carousel-item.active {
            opacity: 1;
            position: relative;
            z-index: 1;
        }
        
        /* 讓按鈕在輪播圖之上 */
        .carousel-control {
            z-index: 10;
        }

        /* 自定義捲軸 */
        ::-webkit-scrollbar {
            width: 10px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1; 
        }
        ::-webkit-scrollbar-thumb {
            background: #FF69B4; 
            border-radius: 5px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #D32F2F; 
        }
        
        /* 修正 FB 外掛在手機上的響應式問題 */
        .fb-post, .fb-post span, .fb-post iframe, .fb-video, .fb-video span, .fb-video iframe {
            width: 100% !important;
            max-width: 100% !important;
        }

        /* Modal 動畫效果 */
        .modal-enter {
            opacity: 0;
            transform: scale(0.95);
        }
        .modal-enter-active {
            opacity: 1;
            transform: scale(1);
            transition: opacity 0.3s ease-out, transform 0.3s ease-out;
        }
        .modal-exit {
            opacity: 1;
            transform: scale(1);
        }
        .modal-exit-active {
            opacity: 0;
            transform: scale(0.95);
            transition: opacity 0.2s ease-in, transform 0.2s ease-in;
        }
        
        /* Modal 內文捲軸 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 8px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f1f1; 
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #FF69B4; 
            border-radius: 4px;
        }



        /* 投稿／編輯 Modal 表單可讀性
           避免輸入欄位繼承到粉色或淡色文字，造成白底上不易辨識。 */
        #post-modal input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
        #post-modal textarea,
        #post-modal select,
        #edit-post-modal input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
        #edit-post-modal textarea,
        #edit-post-modal select {
            color: #1F2937 !important;
            background-color: #FFFFFF !important;
            caret-color: #C0286A;
            border-color: #D1D5DB;
            font-weight: 500;
        }

        #post-modal input::placeholder,
        #post-modal textarea::placeholder,
        #edit-post-modal input::placeholder,
        #edit-post-modal textarea::placeholder {
            color: #6B7280 !important;
            opacity: 1;
            font-weight: 400;
        }

        #post-modal input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus,
        #post-modal textarea:focus,
        #post-modal select:focus,
        #edit-post-modal input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus,
        #edit-post-modal textarea:focus,
        #edit-post-modal select:focus {
            color: #111827 !important;
            background-color: #FFFFFF !important;
            border-color: #D4A843 !important;
            box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.22) !important;
            outline: none;
        }

        #post-modal select option,
        #edit-post-modal select option {
            color: #1F2937;
            background-color: #FFFFFF;
        }





        /* 會員中心登入／註冊／重設密碼表單可讀性 */
        #auth-modal input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
        #auth-modal select {
            color: #1F2937 !important;
            -webkit-text-fill-color: #1F2937 !important;
            background-color: #FFFFFF !important;
            caret-color: #C0286A;
            border-color: #D1D5DB;
            font-weight: 500;
        }

        #auth-modal input::placeholder {
            color: #6B7280 !important;
            -webkit-text-fill-color: #6B7280 !important;
            opacity: 1;
            font-weight: 400;
        }

        #auth-modal input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus,
        #auth-modal select:focus {
            color: #111827 !important;
            -webkit-text-fill-color: #111827 !important;
            background-color: #FFFFFF !important;
            border-color: #D4A843 !important;
            box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.22) !important;
            outline: none;
        }

        #auth-modal select option {
            color: #1F2937;
            background-color: #FFFFFF;
        }

        #auth-modal input:-webkit-autofill,
        #auth-modal input:-webkit-autofill:hover,
        #auth-modal input:-webkit-autofill:focus {
            -webkit-text-fill-color: #111827 !important;
            box-shadow: 0 0 0 1000px #FFFFFF inset !important;
            caret-color: #C0286A;
        }

        /* 管理 Modal 表單可讀性：影音 URL / JSON / 公告管理欄位 */
        #gongtian-video-admin-modal textarea,
        #gongtian-reels-admin-modal textarea,
        #highlight-admin-modal textarea,
        #reels-admin-modal textarea,
        #news-admin-modal input,
        #news-admin-modal textarea,
        #hero-carousel-admin-modal input,
        #hero-carousel-admin-modal textarea,
        #pilgrimage-video-admin-modal textarea,
        #pilgrimage-reels-admin-modal textarea {
            color: #1F2937 !important;
            background-color: #FFFFFF !important;
            caret-color: #C0286A;
            border-color: #D1D5DB;
            font-weight: 500;
        }

        #gongtian-video-admin-modal textarea::placeholder,
        #gongtian-reels-admin-modal textarea::placeholder,
        #highlight-admin-modal textarea::placeholder,
        #reels-admin-modal textarea::placeholder,
        #news-admin-modal input::placeholder,
        #news-admin-modal textarea::placeholder,
        #hero-carousel-admin-modal input::placeholder,
        #hero-carousel-admin-modal textarea::placeholder,
        #pilgrimage-video-admin-modal textarea::placeholder,
        #pilgrimage-reels-admin-modal textarea::placeholder {
            color: #6B7280 !important;
            opacity: 1;
            font-weight: 400;
        }

        #gongtian-video-admin-modal textarea:focus,
        #gongtian-reels-admin-modal textarea:focus,
        #highlight-admin-modal textarea:focus,
        #reels-admin-modal textarea:focus,
        #news-admin-modal input:focus,
        #news-admin-modal textarea:focus,
        #hero-carousel-admin-modal input:focus,
        #hero-carousel-admin-modal textarea:focus,
        #pilgrimage-video-admin-modal textarea:focus,
        #pilgrimage-reels-admin-modal textarea:focus {
            color: #111827 !important;
            background-color: #FFFFFF !important;
            border-color: #D4A843 !important;
            box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.22) !important;
            outline: none;
        }

        /* GPS 脈衝動畫 */
        @keyframes pulse-ring {
            0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(255, 105, 180, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 105, 180, 0); }
            100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(255, 105, 180, 0); }
        }
        .gps-pulse {
            animation: pulse-ring 2s infinite;
        }

        /* 筊杯動畫樣式 */
        .bwei-container {
            perspective: 1000px;
            height: 180px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 60px;
            margin-bottom: 20px;
        }

        .bwei {
            width: 80px;
            height: 80px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            transition: transform 0.1s;
            /* 預設顯示陰面 */
            background-image: url('../image/bwei_yin.svg'); 
            /* 修正厚度感：縮小硬陰影距離，避免看起來像兩個疊在一起；保留軟陰影作為地面投影 */
            filter: drop-shadow(0 3px 0 #7A0000) drop-shadow(0 8px 6px rgba(0,0,0,0.4));
        }

        .bwei.yang {
            background-image: url('../image/bwei_yang.svg');
        }

        /* 擲筊動畫 - 旋轉並拋起 */
        @keyframes toss {
            0% { transform: translateY(0) rotateX(0) rotateY(0) rotateZ(0); }
            25% { transform: translateY(-120px) rotateX(360deg) rotateY(180deg) rotateZ(45deg); }
            50% { transform: translateY(-80px) rotateX(720deg) rotateY(360deg) rotateZ(90deg); }
            75% { transform: translateY(-40px) rotateX(1080deg) rotateY(540deg) rotateZ(135deg); }
            100% { transform: translateY(0) rotateX(1440deg) rotateY(720deg) rotateZ(180deg); }
        }

        .tossing {
            animation: toss 0.8s ease-in-out;
        }

        /* 聖杯計數器樣式 */
        .saint-cup-count {
            font-size: 3rem;
            font-weight: bold;
            color: #D32F2F;
            text-shadow: 2px 2px 0 #FDB813;
        }

        /* ── 後台主行動鈕統一互動態（mazu-red 實心鈕）──
           統一 hover 加深暖正紅、按下回饋、disabled 態，
           避免散落的按鈕有的有 hover 有的沒有。 */
        button.bg-mazu-red:not(:disabled) {
            transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
        }
        button.bg-mazu-red:not(:disabled):hover {
            background-color: #b71c1c; /* 暖正紅，與 #D32F2F 同色相加深 */
            box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3);
        }
        button.bg-mazu-red:not(:disabled):active {
            transform: scale(0.97);
        }
        button.bg-mazu-red:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }