@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* ===== General Styles ===== */
.root {
    -fx-background-color: linear-gradient(to bottom, #000000, #111111);
    -fx-padding: 0;
    -fx-spacing: 0;
}

/* ===== Typography ===== */
.title-font {
    -fx-font-family: 'Bebas Neue', sans-serif;
}

.body-font {
    -fx-font-family: 'Roboto', sans-serif;
}

/* ===== Main Title ===== */
.main-title {
    -fx-font-size: 40px;
    -fx-text-fill: transparent;
    -fx-background-color: linear-gradient(to bottom, #E50914, #B81D24);
    -fx-background-clip: text;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.8), 4, 0.5, 0, 2);
    -fx-padding: 5;
}

/* ===== Menu Bar ===== */
.menu-bar {
    -fx-background-color: #222222;
    -fx-spacing: 10;
}

.menu-bar button {
    -fx-background-color: #444444;
    -fx-text-fill: white;
    -fx-font-weight: bold;
    -fx-font-size: 14px;
    -fx-padding: 10 20;
    -fx-border-radius: 5;
    -fx-background-radius: 5;
}

.menu-bar button:hover {
    -fx-background-color: #555555;
    -fx-cursor: hand;
}

/* ===== Movie Card ===== */
.movie-card {
    -fx-background-color: #1c1c1c;
    -fx-border-color: #444444;
    -fx-border-radius: 10;
    -fx-background-radius: 10;
    -fx-padding: 10;
    -fx-pref-width: 300px;
    -fx-pref-height: 450px;
}

.movie-card:hover {
    -fx-border-color: gold;
    -fx-scale-x: 1.05;
    -fx-scale-y: 1.05;
    -fx-effect: dropshadow(gaussian, rgba(255, 215, 0, 0.5), 8, 0.5, 0, 2);
}

/* ===== Movie Card Overlay ===== */
.movie-card-overlay {
    -fx-background-color: rgba(0, 0, 0, 0.8);
    -fx-border-radius: 10;
    -fx-padding: 10;
    -fx-opacity: 0;
    -fx-transition: opacity 0.5s ease-in-out;
}

.movie-card:hover .movie-card-overlay {
    -fx-opacity: 1;
}

/* ===== Movie Text Styles ===== */
.movie-title {
    -fx-font-size: 18px;
    -fx-text-fill: white;
    -fx-font-weight: bold;
    -fx-wrap-text: true;
}

.movie-details, .overview-text {
    -fx-font-size: 14px;
    -fx-text-fill: #E0E0E0;
    -fx-wrap-text: true;
    -fx-spacing: 10;
}

/* ===== Scroll Pane ===== */
.scroll-pane {
    -fx-background-color: transparent;
}

.scroll-pane .viewport {
    -fx-background-color: transparent;
}

/* ===== Tooltip ===== */
.custom-tooltip {
    -fx-background-color: rgba(0, 0, 0, 0.8);
    -fx-text-fill: white;
    -fx-font-size: 14px;
    -fx-padding: 10;
    -fx-background-radius: 5;
    -fx-border-color: gold;
    -fx-border-width: 1;
}

/* ===== Overlay Styles ===== */
.hover-overlay {
    -fx-background-color: rgba(0, 0, 0, 0.9);
    -fx-padding: 15;
    -fx-text-fill: #E0E0E0;
    -fx-font-size: 14px;
    -fx-border-radius: 10;
}

.hover-section-title, .hover-tags {
    -fx-font-size: 16px;
    -fx-font-weight: bold;
    -fx-text-fill: white;
    -fx-padding: 5 0 10 0;
}

/* ===== Layout Spacing ===== */
.hbox, .vbox {
    -fx-spacing: 10;
}