/* ============================================ */
/* OurLuvPhoto 站內自訂 CSS                        */
/* Tailwind CSS 為主，此檔案僅放全域覆寫與動畫  */
/* ============================================ */

/* Alpine：初始化前隱藏 x-cloak 節點，避免未綁定狀態閃爍 */
[x-cloak] {
    display: none !important;
}

/* 平滑滾動 */
html {
    scroll-behavior: smooth;
}

/* 選取文字顏色（沿用品牌綠；原本的金色只存在於本檔，與橄欖綠品牌不一致） */
::selection {
    background-color: #526348;
    color: #ffffff;
}

/* 焦點樣式：唯一規格集中在 components.css 的 --focus-ring，
   原本此處為金色、brand.css 為 #7e956d、account.css 為 #526348，共三種 */

/* 漸入動畫（供 Hero 區使用） */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* 延遲動畫（服務卡片等） */
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
/* 攝影師作品視窗需在內容捲動後仍保留關閉按鈕。 */
.photographer-portfolio-dialog {
    max-height: calc(100vh - 2rem);
}

.photographer-portfolio-close {
    position: sticky;
    top: 1rem;
}

.selection-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.photo-lightbox-canvas {
    width: min(72rem, calc(100vw - 2rem));
    height: min(72vh, 48rem);
}

.photo-lightbox-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.photo-lightbox-favorite {
    position: absolute;
    top: 1rem;
    right: 4.5rem;
    z-index: 20;
    min-height: 44px;
    padding: 0 16px;
    background: rgba(255, 255, 255, .95);
    color: #374151;
}

.photo-lightbox-favorite:hover {
    background: #fff;
}

.photo-lightbox-favorite[aria-pressed="true"] {
    color: #dc2626;
}

@media (max-width: 639px) {
    .selection-actions { padding: 1rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
    .selection-actions > div.mt-4 { display: none; }
}