/* Global custom styles */
body {
    font-family: system-ui, -apple-system, sans-serif;
}

.card {
    transition: transform 0.2s;
}

    .card:hover {
        transform: translateY(-4px);
    }

.container-fluid {
    max-width: 1480px; /* or 1600px if you want it very wide */
    margin-left: auto;
    margin-right: auto;
}


/* Dropdown menu - hover on desktop, tap on mobile */
@media (min-width: 992px) {
    .dropdown:hover > .dropdown-menu {
        display: block !important;
    }
}

/* Smooth transition for dropdown */
.dropdown-menu {
    transition: opacity 0.15s ease;
}


/* ==================== GLOBAL HORIZONTAL MARGIN REDUCTION ==================== */
.container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
}

/* Medium screens (tablets) */
@media (min-width: 768px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Large screens (desktops) */
@media (min-width: 992px) {
    .container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}

/* Extra large screens */
@media (min-width: 1200px) {
    .container {
        padding-left: 30px !important;
        padding-right: 30px !important;
        max-width: 1140px !important; /* optional - keeps it from becoming too wide */
    }
}


/* Responsive text in card bottom bar - prevents wrapping */
/* Card bottom bar - Name gets ellipsis, Total stays fully visible */
.card-bottom-name {
    font-size: clamp(0.75rem, 2vw, 0.95rem);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1; /* takes all available space */
}

.card-bottom-total {
    font-size: clamp(0.75rem, 2vw, 0.95rem);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    margin-left: 10px; /* small gap between name and total */
}

/* =============================================
   MyTravels Country Cards - Responsive sizes
   ============================================= */

.mytravel-card {
    height: 160px;
}

.mytravel-thumb {
    width: 160px;
    height: 160px;
}

/* Medium screens (tablet) */
@media (min-width: 768px) {
    .mytravel-card {
        height: 150px;
    }

    .mytravel-thumb {
        width: 150px;
        height: 150px;
    }
}

/* Large screens (desktop) */
@media (min-width: 992px) {
    .mytravel-card {
        height: 150px;
    }

    .mytravel-thumb {
        width: 150px;
        height: 150px;
    }
}



/* Extra large screens - even tighter if needed */
@media (min-width: 1200px) {
    .mytravel-card {
        height: 140px;
    }

    .mytravel-thumb {
        width: 140px;
        height: 140px;
    }
}


/* =============================================
   MyBooks Cards - 
   ============================================= */


.book-cover {
    max-height: 170px;
    width: auto;
    object-fit: contain;
    display: block;
}

.book-description {
    line-height: 1.7;
}

.book-description p {
    margin-bottom: 1rem;
}



.mybook-card {
    height: 160px;
}


/* =============================================
   MyMovies Cards
   ============================================= */


.mymovie-card {
    height: 160px;
}


/* =============================================
   MyRecipes Cards
   ============================================= */

.myrecipe-card {
    height: 160px;
}


/* Spotlight – smaller description on phones */
@media (max-width: 768px) {
    .spotlight-description,
    .sp-description,
    [class*="spotlight"] .description {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        max-height: 22vh !important;
        overflow-y: auto !important;
        padding: 0.4rem 0.6rem !important;
    }

    /* title a bit smaller too if needed */
    .spotlight-title,
    .sp-title {
        font-size: 0.95rem !important;
    }
}


/*@media (max-width: 768px) {
    .spotlight-description {
        max-height: 20vh;
        overflow-y: auto;
        font-size: 0.8rem;
    }
}
*/