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

/* Modern dark theme overrides for the public site */

/*
 * This stylesheet defines a cohesive, premium look and feel for the
 * public-facing portion of the radio portal.  It builds on top of
 * the existing base and premium styles, overriding colours, fonts
 * and layout details to deliver a fresh, modern appearance.  The
 * palette is inspired by deep blues and teals with warm golden
 * accents.  Typography is set to Montserrat for a clean, modern
 * aesthetic.  Additional layout tweaks ensure the radio player is
 * aligned and fully responsive.
 */

body {
    background-color: #101E2E;
    color: #E5E7EB;
    font-family: 'Montserrat', sans-serif;
}

a {
    color: #00B4D8;
    text-decoration: none;
}
a:hover {
    color: #0095BB;
    text-decoration: none;
}

/* Navbar styling */
.navbar-premium {
    background-color: #172A46;
    border-bottom: 3px solid #00B4D8;
}
.navbar-premium .navbar-brand {
    color: #FFD166;
    font-weight: 700;
}
.navbar-premium .navbar-brand:hover,
.navbar-premium .navbar-brand:focus {
    color: #FFC44D;
}
.navbar-premium .nav-link {
    color: #E5E7EB;
    margin-left: 1rem;
    font-weight: 500;
}
.navbar-premium .nav-link:hover,
.navbar-premium .nav-link:focus {
    color: #00B4D8;
}

/* Buttons */
.btn-premium,
.btn-primary {
    background-color: #00B4D8 !important;
    border-color: #00B4D8 !important;
    color: #172A46 !important;
    font-weight: 600;
    transition: background-color 0.3s ease;
}
.btn-premium:hover,
.btn-primary:hover {
    background-color: #0095BB !important;
    border-color: #0095BB !important;
    color: #172A46 !important;
}

/* Section titles */
.section-title {
    color: #FFD166;
}

/* Card styling */
.premium-card {
    background-color: #172A46;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border-radius: 0.5rem;
    overflow: hidden;
}
.premium-card img {
    border-bottom: 2px solid #172A46;
}
.premium-card .card-title {
    color: #FFD166;
}

/* Player styling */
.player-premium {
    background-color: #172A46;
    color: #E5E7EB;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.player-premium .station-name h1 {
    color: #FFD166;
}
.player-premium .jp-controls button,
.player-premium .m3-play,
.player-premium .m3-pause,
.player-premium .jp-play,
.player-premium .jp-pause {
    background-color: #00B4D8;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: background-color 0.3s ease;
}
.player-premium .jp-controls button svg,
.player-premium .m3-play svg,
.player-premium .m3-pause svg,
.player-premium .jp-play svg,
.player-premium .jp-pause svg {
    fill: #172A46;
    width: 20px;
    height: 20px;
}
.player-premium .jp-controls button:hover,
.player-premium .m3-play:hover,
.player-premium .m3-pause:hover,
.player-premium .jp-play:hover,
.player-premium .jp-pause:hover {
    background-color: #0095BB;
}
.player-premium .mute-box a {
    color: #00B4D8;
}
.player-premium .rate_station .up-button,
.player-premium .rate_station .down-button {
    background-color: #172A46;
    border: 2px solid #00B4D8;
    color: #00B4D8;
    border-radius: 0.5rem;
    padding: 0.4rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.player-premium .rate_station .up-button:hover,
.player-premium .rate_station .down-button:hover {
    background-color: #00B4D8;
    color: #172A46;
}
.player-premium .rate_station small {
    color: #E5E7EB;
}
/* Player extras */
.player-premium .jp-current-time {
    color: #E5E7EB;
}
.player-premium .jp-volume-bar {
    background: #23395D;
    height: 6px;
}
.player-premium .jp-volume-bar-value {
    background: #00B4D8;
}
/* Player layout adjustments */
.player-premium #play_1,
.player-premium #jp_container_1 .jp-type-single {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.player-premium .jp-controls {
    margin-bottom: 0.5rem;
}
.player-premium .mute-box {
    margin-bottom: 0.5rem;
}
.player-premium .jp-time-holder {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #E5E7EB;
}
.player-premium .jp-volume-controls {
    width: 100%;
}

/* Search form */
.search-form {
    background-color: #172A46;
    color: #E5E7EB;
    border: 1px solid #23395D;
}
.search-form::placeholder {
    color: #7F93B2;
}
.search-btn {
    background-color: #00B4D8 !important;
    border-color: #00B4D8 !important;
    color: #172A46 !important;
    font-weight: 600;
}
.search-btn:hover {
    background-color: #0095BB !important;
    border-color: #0095BB !important;
    color: #172A46 !important;
}

/* Footer */
.footer-premium {
    background-color: #172A46;
    color: #E5E7EB;
}
.footer-premium .section-head {
    color: #FFD166;
    font-weight: 600;
}
.footer-premium a {
    color: #00B4D8;
}
.footer-premium a:hover {
    color: #0095BB;
}
.cookiealert {
    background-color: #172A46;
    color: #E5E7EB;
    border: none;
}
.cookiealert .btn,
.cookiealert .acceptcookies {
    background-color: #00B4D8;
    color: #172A46;
    border: none;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
}
.cookiealert .btn:hover,
.cookiealert .acceptcookies:hover {
    background-color: #0095BB;
    color: #172A46;
}

/* Sidebar filter and genre list colours */
.filter-title,
.letter {
    color: #FFD166;
    font-weight: 600;
}
.genre-list a {
    color: #E5E7EB;
    display: block;
    margin-bottom: 3px;
    font-size: 0.875rem;
}
.genre-list a:hover {
    color: #00B4D8;
}
/* Alert no record */
.alert-no-record {
    background-color: #172A46;
    color: #E5E7EB;
    border-color: #23395D;
    font-size: 14px;
}
/* Genre image text */
.genre-image {
    font-weight: 600;
    color: #FFD166;
    text-align: center;
}
/* Override default white backgrounds to dark for modern theme */
.bg-white {
    background-color: #172A46 !important;
    color: #E5E7EB !important;
}
/* Panels and details containers */
.radio-details,
.page-details,
.user-reviews {
    background-color: #172A46;
    color: #E5E7EB;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* Pagination */
.pagination .page-link {
    background-color: #172A46 !important;
    border-color: #172A46 !important;
    color: #E5E7EB !important;
}
.pagination .page-link:hover {
    background-color: #23395D !important;
    color: #00B4D8 !important;
}
.pagination .page-item.active .page-link {
    background-color: #00B4D8 !important;
    border-color: #00B4D8 !important;
    color: #172A46 !important;
}
/* Generic text overrides */
.text-dark,
.text-body,
.text-secondary,
.text-muted,
.navbar .text-dark,
h1.text-dark,
h2.text-dark,
h3.text-dark,
h4.text-dark,
h5.text-dark,
h6.text-dark,
small.text-dark {
    color: #E5E7EB !important;
}
.section-title.text-dark {
    color: #FFD166 !important;
}
.badge-light,
.badge-secondary {
    background-color: #172A46 !important;
    color: #E5E7EB !important;
}
/* Form controls */
.form-control,
.form-select {
    background-color: #172A46;
    border-color: #23395D;
    color: #E5E7EB;
    font-size: 14px;
}
.form-control::placeholder,
.form-select option:first-child {
    color: #7F93B2;
}
.form-control:focus,
.form-select:focus {
    background-color: #172A46;
    border-color: #00B4D8;
    box-shadow: none;
    color: #E5E7EB;
}
/* Alert classes */
.alert {
    background-color: #172A46;
    border-color: #23395D;
    color: #E5E7EB;
}
.alert-success {
    background-color: #2E8B57;
    border-color: #2E8B57;
    color: #fff;
}
.alert-danger {
    background-color: #B22222;
    border-color: #B22222;
    color: #fff;
}