/*
Theme Name: MovieWeb V6 All In One
Author: Gemini AI
Version: 13.2
*/

body { background-color: #2c4c4c; color: #fff; font-family: Arial, sans-serif; margin: 0; padding: 0; }
.site-wrapper { max-width: 1100px; margin: 0 auto; background: #1a2e2e; border: 1px solid #3d6666; }
.container { display: flex; padding: 15px; gap: 15px; flex-wrap: wrap; align-items: flex-start; }

/* NAVBAR & LOGO */
header { background: #001a1a; padding: 25px; }
.logo img { max-height: 80px; width: auto; }
.logo-text { font-size: 35px; color: #8fb3b3; font-weight: bold; font-style: italic; text-decoration: none; }

nav { background: #0d1a1a; border-bottom: 3px solid #1db954; padding: 5px 10px; }
.nav-links { display: flex; justify-content: flex-start; flex-wrap: wrap; }
.nav-links a { color: #8fb3b3; padding: 15px 20px; text-decoration: none; font-size: 13px; font-weight: bold; text-transform: uppercase; }
.nav-links a:hover { color: #1db954; }

/* SLIDER */
.top-slider { display: flex; overflow-x: auto; gap: 10px; padding: 15px; background: #243b3b; border-bottom: 1px solid #3d6666; }
.slider-card { min-width: 180px; border: 1px solid #3d6666; background: #132525; text-decoration: none; }
.slider-card img { width: 100%; height: 240px; object-fit: cover; display: block; }
.slider-card span { display: block; padding: 5px; font-size: 11px; text-align: center; color: #79a6a6; }

/* LAYOUT */
.main-content { flex: 3; min-width: 320px; }
.side-column { flex: 1; min-width: 280px; }

/* SINGLE MOVIE BOX */
.mercy-box { background: #e0e0e0; color: #333; padding: 15px; border: 1px solid #999; margin-bottom: 20px; }
.mercy-title { font-size: 20px; font-weight: bold; border-bottom: 1px solid #999; padding-bottom: 10px; margin-bottom: 15px; color: #000; }
.mercy-flex { display: flex; gap: 20px; background: #f4f4f4; padding: 15px; border: 1px solid #ccc; flex-wrap: wrap; align-items: flex-start; }
.mercy-left { flex: 1; min-width: 200px; max-width: 300px; }
.mercy-left img { width: 100%; border: 1px solid #999; height: auto; display: block; }
.mercy-right { flex: 1.5; min-width: 250px; }
 .mercy-right > p > strong{
 font-size: 20px;
 } 

/* 30PX TEXT IN ROWS ONLY */
.mercy-row { 
    margin-bottom: 10px; 
    border-bottom: 1px solid #ddd; 
    padding-bottom: 5px; 
    display: flex; 
    font-size: 20px; /* Big font for the content */
    line-height: 1.2;
}
.mercy-label { 
    color: #a00; 
    font-weight: bold; 
    width: 160px; /* Increased to accommodate 30px label text */
    flex-shrink: 0; 
}

/* BUTTONS */
.btn-blue { background: #4a90e2; color: #fff; padding: 10px 15px; text-decoration: none; font-weight: bold; border-bottom: 3px solid #357abd; display: inline-block; }
.btn-green { background: #4caf50; color: #fff; padding: 10px 15px; text-decoration: none; font-weight: bold; border-bottom: 3px solid #388e3c; display: inline-block; }
.btn-red-bar { background: #a00; color: #fff; display: block; text-align: center; padding: 15px; margin-top: 15px; font-size: 18px; font-weight: bold; text-decoration: none; border-bottom: 5px solid #600; }

/* LIST HEADS & GRID */
.list-head { background: #1a3d3d; color: #1db954; padding: 10px; font-weight: bold; border-bottom: 2px solid #1db954; margin-top: 20px; text-transform: uppercase; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.card { background: #132525; border: 1px solid #3d6666; padding: 5px; text-align: center; }
.card img { width: 100%; height: 190px; object-fit: cover; }
.card-title { font-size: 10px; color: #79a6a6; display: block; margin-top: 5px; text-decoration: none; font-weight: bold; } /* Container to hold buttons and slider */
.slider-wrapper {
    padding: 20px 40px;
    background: #0b1414;
}

/* The actual scrolling area */
.top-slider {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 15px;
    scrollbar-width: none; /* Hides scrollbar on Firefox */
}

.top-slider::-webkit-scrollbar {
    display: none; /* Hides scrollbar on Chrome/Safari */
}

.slider-card {
    flex: 0 0 200px; /* Fixed width so they don't shrink */
    text-decoration: none;
    color: #8fb3b3;
    font-size: 14px;
    text-align: center;
}

.slider-card img {
    width: 100%;
    border-radius: 4px;
    display: block;
}

/* Green Buttons from your image */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.8);
    border: 2px solid #1e3a2a;
    color: #2ecc71;
    font-size: 24px;
    padding: 15px 10px;
    cursor: pointer;
    z-index: 99;
    transition: 0.3s;
}

.slider-btn:hover { background: #1e3a2a; color: #fff; }
.prev { left: 5px; }
.next { right: 5px; }