/* --- Theme Colors (from logo, approximate) --- */
:root {
    --dd-bg-cream: #FDF6E3;
    --dd-primary-blue: #3E6D8E;
    --dd-secondary-blue: #A5D8DD;
    --dd-text-dark: #334155;
    --dd-text-light: #FFFFFF;
    --dd-accent-pink: #F4C6C6;
    --dd-border-color: #E2E8F0;
}

/* --- General Styles --- */
body { font-family: 'Prompt', sans-serif; background-color: var(--dd-bg-cream); color: var(--dd-text-dark); overscroll-behavior: none; margin: 0; padding: 0; line-height: 1.7; }
html { scroll-behavior: smooth; }

/* --- Navigation Bar --- */
.navbar { background-color: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-bottom: 1px solid var(--dd-border-color); }
.navbar-brand img { border-radius: 4px; } .navbar-brand { font-weight: 700; color: var(--dd-primary-blue) !important; }
.nav-link { color: var(--dd-text-dark) !important; font-weight: 500; transition: color 0.2s ease-in-out; }
.nav-link:hover, .nav-link.active { color: var(--dd-primary-blue) !important; }

/* --- Section Styling --- */
section { padding-top: 4rem; padding-bottom: 4rem; }
.section-title { color: var(--dd-primary-blue); font-weight: 700; margin-bottom: 3rem; position: relative; }
.section-title::after { content: ''; display: block; width: 60px; height: 3px; background-color: var(--dd-secondary-blue); margin: 0.5rem auto 0; }

/* Hero Section */
.hero-section { background-color: var(--dd-secondary-blue); color: var(--dd-text-dark); min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.hero-section h1 { color: var(--dd-primary-blue); } .hero-section .lead { color: #475569; }
.hero-section .btn-primary { background-color: var(--dd-primary-blue); border-color: var(--dd-primary-blue); padding: 0.75rem 1.5rem; font-size: 1.1rem; }
.hero-section .btn-primary:hover { background-color: #315a78; border-color: #315a78; }

/* Features & How to Use & Create Display Sections */
#features, #create-display { background-color: var(--dd-bg-cream); }
#how-to-use, #contact { background-color: #FFFFFF; }
.feature-item { background-color: #FFFFFF; border: 1px solid var(--dd-border-color); height: 100%; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; border-radius: 0.375rem; }
.feature-item:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0,0,0,.10)!important; }
.feature-item i, .step-item i { color: var(--dd-primary-blue); } .feature-item h5 { color: var(--dd-primary-blue); font-weight: 600; margin-top: 1rem; }
.step-item { border: 1px solid var(--dd-border-color); border-radius: 0.5rem; background-color: var(--dd-bg-cream); }
.step-number { background-color: var(--dd-primary-blue); color: var(--dd-text-light); width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; margin-bottom: 1rem; }
#settings-panel .card { border: 1px solid var(--dd-border-color); }
#settings-panel .card-header { background-color: var(--dd-secondary-blue); color: var(--dd-text-dark); font-weight: 600; }
#contact a { color: var(--dd-primary-blue); text-decoration: none; } #contact a:hover { text-decoration: underline; }
#custom-text-editor { border: 1px solid var(--dd-border-color); padding: 0.375rem 0.75rem; line-height: 1.5; background-color: #fff; resize: vertical; overflow: auto; min-height: 150px; }
#custom-text-editor:focus { outline: 0; box-shadow: 0 0 0 0.25rem rgba(62, 109, 142, 0.25); border-color: var(--dd-secondary-blue); }
#preview-dog-image { max-width: 100%; object-fit: contain; background-color: #e9ecef; max-height: 200px; }

/* --- Display Area Styles (Fullscreen Mode) --- */
/* This is the main container that goes fullscreen */
#display-area {
    display: none; /* Controlled by JS: .active class or direct style */
    visibility: hidden; /* Controlled by JS */
    opacity: 0; /* Controlled by JS */
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: var(--dd-secondary-blue); /* Default theme, JS will override */
    color: var(--dd-text-dark);
    padding: 1rem;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 9999 !important;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
#display-area.active {
    display: flex !important; /* Force display when active */
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    justify-content: center;
}
/* Ensure children of active display-area are also visible */
#display-area.active > .display-content {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%; height: 100%;
}
/* Individual child elements forced visible if parent is active */
#display-area.active .dog-image-container,
#display-area.active .info-container,
#display-area.active #display-dog-image,
#display-area.active #display-custom-html,
#display-area.active #display-time,
#display-area.active #display-audio-controls, /* Target specific ID for display controls */
#display-area.active #exit-fullscreen-btn {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Display Content Layout (Fullscreen) */
.display-content { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1rem; width: 100%; height: 100%; max-width: 1200px; }
.dog-image-container { flex: 1 1 50%; text-align: center; max-height: 80%; }
#display-dog-image { max-width: 100%; max-height: 100%; height: auto; object-fit: contain; border-radius: 10px; }
.info-container { flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; text-align: center; overflow: hidden; max-height: 90%; }
#display-custom-html { line-height: 1.4; margin-bottom: 1rem; word-wrap: break-word; overflow-y: auto; max-height: calc(100% - 130px); padding: 0 5px; }
#display-time { font-size: 1.6rem; font-weight: bold; margin-top: auto; padding-top: 5px; opacity: 0.8; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
#display-time .clock-icon { font-size: 0.9em; }

@media (max-width: 768px) { #display-area { padding: 1rem; } .display-content { flex-direction: column; gap: 0.5rem; } .dog-image-container { max-height: 40%; } .info-container { max-height: 55%; } #display-custom-html { margin-bottom: 0.5rem; max-height: calc(100% - 110px); } #display-time { font-size: 1.3rem; } }

/* --- SHARED Audio Controls Styling --- */
.audio-controls-shared { width: 100%; padding-top: 5px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.audio-controls-shared.d-none { display: none !important; }
/* Force visibility for settings audio controls when NOT d-none */
#settings-panel #settings-audio-controls:not(.d-none) {
    display: flex !important; /* It's already flex by .audio-controls-shared, but this reinforces */
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 60px !important;
    margin-top: 1rem !important;
    /* border: 1px dashed blue; */ /* Debug */
}
.audio-controls-shared .audio-info { margin-bottom: 0.25rem; display: flex; width: 100%; justify-content: space-between; align-items: center; }
.audio-controls-shared .audio-play-button { margin-top: 0.25rem; }
.audio-controls-shared .btn-lg { padding: 0.6rem 1.1rem; font-size: 1.3rem; border-radius: 50px; background-color: var(--dd-primary-blue); border-color: var(--dd-primary-blue); color: var(--dd-text-light); }
.audio-controls-shared .btn-lg:hover { background-color: #315a78; border-color: #315a78; }
.audio-controls-shared .btn-sm { background-color: var(--dd-secondary-blue); border-color: var(--dd-secondary-blue); color: var(--dd-text-dark); padding: 0.25rem 0.5rem; font-size: 0.875rem;}
.audio-controls-shared .btn-sm:hover { background-color: #90c8cf; border-color: #90c8cf; }

/* Exit Button */
#exit-fullscreen-btn { position: absolute; top: 10px; right: 10px; z-index: 10000; background-color: rgba(220, 53, 69, 0.7); border-color: rgba(220, 53, 69, 0.7); display: none; /* Initially hidden by JS */ }
#exit-fullscreen-btn:hover { background-color: #dc3545; border-color: #dc3545; }
/* Hidden YouTube Player */
#youtube-player { position: absolute; top: -9999px; left: -9999px; width: 0; height: 0; overflow: hidden; opacity: 0; }

/* --- Theme Definitions for Display Area --- */
#display-area.theme-default { background-color: var(--dd-bg-cream); color: var(--dd-text-dark); }
#display-area.theme-default #display-dog-image { border: 1px solid var(--dd-border-color); }
#display-area.theme-default .audio-controls-shared span[id*="current-video-title"] { color: var(--dd-text-dark); }

#display-area.theme-dark { background-color: var(--dd-text-dark); color: var(--dd-bg-cream); }
#display-area.theme-dark #display-dog-image { border: 1px solid #444; }
#display-area.theme-dark .audio-controls-shared,
#display-area.theme-dark #display-time { color: var(--dd-bg-cream); }
#display-area.theme-dark .audio-controls-shared button:not(#exit-fullscreen-btn) { background-color: #6c757d; border-color: #6c757d; color: white; }
/* Fix dark theme title color for BOTH settings and display if needed, though settings usually won't have theme-dark */
#display-area.theme-dark #display-current-video-title,
#settings-panel #settings-current-video-title.text-theme-dark-compatible { /* hypothetical class */
    color: #adb5bd !important;
}
/* If #settings-audio-controls is always on a light background, this might not be needed for it: */
/* #settings-panel #settings-current-video-title { color: var(--dd-text-dark); } */


#display-area.theme-calm { background-color: var(--dd-secondary-blue); color: #004d40; } #display-area.theme-calm #display-dog-image { border: 1px solid #80cbc4; box-shadow: 2px 2px 8px rgba(0,0,0,0.1); } #display-area.theme-calm #display-time { color: #00796b; } #display-area.theme-calm .audio-controls-shared span[id*="current-video-title"] { color: #00695c; } #display-area.theme-calm .audio-controls-shared button:not(#exit-fullscreen-btn) { background-color: #80cbc4; border-color: #4db6ac; color:#004d40; }
#display-area.theme-playful { background-color: #fff9c4; color: #c2185b; } #display-area.theme-playful #display-dog-image { border: 3px dashed var(--dd-accent-pink); padding: 5px; border-radius: 15px; } #display-area.theme-playful #display-time { font-weight: bold; color: #f57c00; } #display-area.theme-playful .audio-controls-shared span[id*="current-video-title"] { color: #e64a19; } #display-area.theme-playful .audio-controls-shared button:not(#exit-fullscreen-btn) { background-color: var(--dd-accent-pink); border-color: #ef9a9a; color:#c2185b; }

/* Font Classes */
.font-Prompt { font-family: 'Prompt', sans-serif; } .font-Kanit { font-family: 'Kanit', sans-serif; } .font-Sarabun { font-family: 'Sarabun', sans-serif; } .font-Noto-Sans-Thai { font-family: 'Noto Sans Thai', sans-serif; }