/* ==========================================================================
   VARIABLES & CONFIGURATION GLOBALE / GLOBAL CONFIG / GLOBALE KONFIGURATION
   ========================================================================== */
/* 
   [FR] C'est ici que tout se personnalise. Modifiez les valeurs ci-dessous 
   pour changer les couleurs, formes et tailles sans toucher au reste du code.
   [EN] This is where all customization happens. Change values below to alter 
   colors, shapes, and sizes without touching the rest of the code.
   [DE] Hier erfolgt die gesamte Anpassung. Ändern Sie die Werte unten, um 
   Farben, Formen und Größen zu ändern, ohne den restlichen Code zu berühren.
*/

:root {
    /* --- Couleurs de base / Base Colors / Grundfarben --- */
    --bd-bg-color: #f1f1f1;      /* Fond du conteneur / Container bg / Hintergrund */
    --bd-card-bg: #dadada;       /* Fond des cartes/épisodes / Card bg / Kartenhintergrund */
    
    /* --- Typographie / Typography / Typografie --- */
    --bd-text-main: #000000;     /* Texte principal / Main text / Haupttext */
    --bd-text-muted: #000000;    /* Texte secondaire (dates, méta) / Secondary text / Sekundärtext */
    --bd-text-light: #ffffff;    /* Texte sur boutons colorés / Text on buttons / Text auf Buttons */
    
    /* --- Structure & Bordures / Structure & Borders / Struktur & Rahmen --- */
    --bd-border-color: #000000;  /* Couleur des bordures / Border color / Rahmenfarbe */
    --bd-shadow-color: rgba(255, 255, 255, 0.05); /* Ombres portées / Shadows / Schatten */
    
    /* --- Accentuation / Accent Color / Akzentfarbe --- */
    --bd-primary-color: #5a2bc8; /* Couleur principale (lecteur, liens) / Primary color / Primärfarbe */
    --bd-primary-hover: #a08dcd; /* Survol de la couleur principale / Primary hover / Primär Hover */
    
    /* --- Épisode en vedette / Featured Episode / Hervorgehobene Folge --- */
    --bd-featured-bg: #c6bbde;
    --bd-featured-border: #313131;

    /* --- Boutons Standards / Standard Buttons / Standard-Buttons --- */
    /* RSS */
    --bd-btn-rss-bg: #eecc99;
    --bd-btn-rss-bg-hover: #bca179;
    --bd-btn-rss-text: #000000;

    /* Externe / External / Extern */
    --bd-btn-external-bg: #c7afff;
    --bd-btn-external-bg-hover: #a08dcd;
    --bd-btn-external-text: #000000;

    /* Télécharger / Download / Herunterladen */
    --bd-btn-download-bg: #afe4ff;
    --bd-btn-download-bg-hover: #8db8cd;
    --bd-btn-download-text: #000000;

    /* Vidéo */
    --bd-btn-video-bg: #ffafb0;
    --bd-btn-video-bg-hover: #cd8d8e;
    --bd-btn-video-text: #000000;

    /* Document */
    --bd-btn-doc-bg: #eecc99;
    --bd-btn-doc-bg-hover: #bca179;
    --bd-btn-doc-text: #000000;

    /* --- Boutons Header (Configurables dans l'admin) / Header Buttons / Header-Buttons --- */
    /* Ces couleurs correspondent aux choix dans l'admin (Jaune, Bleu, Vert, etc.) 
       / These colors match admin choices (Yellow, Blue, Green, etc.)
       / Diese Farben entsprechen den Admin-Auswahlen (Gelb, Blau, Grün, usw.) */
    
    --bd-btn-header-yellow: #eecc99;
    --bd-btn-header-yellow-hover: #bca179;
    
    --bd-btn-header-blue: #afe4ff;
    --bd-btn-header-blue-hover: #8db8cd;
    
    --bd-btn-header-green: #a3ee99;
    --bd-btn-header-green-hover: #81bc79;
    
    --bd-btn-header-red: #ffafb0;
    --bd-btn-header-red-hover: #cd8d8e;
    
    --bd-btn-header-purple: #c7afff;
    --bd-btn-header-purple-hover: #a08dcd;
    
    --bd-btn-header-grey: #bebebe;
    --bd-btn-header-grey-hover: #8c8c8c;

    /* --- Pagination --- */
    /* État normal / Normal state / Normalzustand */
    --bd-pagination-bg: var(--bd-card-bg);
    --bd-pagination-text: var(--bd-text-main);
    --bd-pagination-border: var(--bd-border-color);
    
    /* Survol / Hover / Hover */
    --bd-pagination-hover-bg: #ffffff;
    --bd-pagination-hover-text: var(--bd-text-main);
    --bd-pagination-hover-border: var(--bd-border-color);
    
    /* Actif (page courante) / Active (current page) / Aktiv (aktuelle Seite) */
    --bd-pagination-active-bg: var(--bd-primary-color);
    --bd-pagination-active-text: #ffffff;
    --bd-pagination-active-border: transparent;
    
    /* Désactivé / Disabled / Deaktiviert */
    --bd-pagination-disabled-text: #ccc;
    --bd-pagination-disabled-bg: transparent;
    --bd-pagination-disabled-border: transparent;

    /* --- Formes & Dimensions / Shapes & Sizes / Formen & Größen --- */
    --bd-container-width: 900px; /* Largeur max du contenu / Max width / Max-Breite */
    --bd-radius: 8px;            /* Rayon standard (images, inputs) / Standard radius / Standard-Radius */
    --bd-btn-radius: 50px;       /* Rayon des boutons (pill shape) / Button radius / Button-Radius */
    --bd-card-radius: 12px;      /* Rayon des cartes / Card radius / Karten-Radius */
    
    /* Spécifique Pagination / Pagination Specific / Spezifisch für Paginierung */
    --bd-pagination-radius: var(--bd-btn-radius);
    --bd-pagination-padding: 0.5rem 0.9rem;
    --bd-pagination-gap: 0.5rem;
    
    --bd-shadow: 0 2px 5px var(--bd-shadow-color);
    --bd-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
/* [FR] Styles de base pour le conteneur principal et la boîte */
/* [EN] Base styles for the main container and box */
/* [DE] Basisstile für den Hauptcontainer und die Box */

.bd-container {
    font-family: var(--bd-font-family);
    background-color: var(--bd-bg-color);
    color: var(--bd-text-main);
    line-height: 1.6;
    max-width: var(--bd-container-width);
    margin: 0 auto;
    padding: 0 1.5rem 3rem 1.5rem;
    box-sizing: border-box;
}

.bd-container * {
    box-sizing: border-box;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
/* [FR] En-tête du podcast (Logo, Titre, Boutons d'action) */
/* [EN] Podcast header (Logo, Title, Action buttons) */
/* [DE] Podcast-Kopfzeile (Logo, Titel, Aktionsschaltflächen) */

.bd-site-header {
    background: var(--bd-card-bg);
    padding: 2rem 0;
    margin-bottom: 2rem;
    box-shadow: var(--bd-shadow);
    border-radius: var(--bd-card-radius);
    margin-left: -1.5rem; /* Compensation du padding du conteneur */
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.bd-header-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: var(--bd-container-width);
    margin: 0 auto;
}

.bd-header-image-wrapper {
    flex-shrink: 0;
}

.bd-podcast-cover-header {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--bd-radius);
    box-shadow: var(--bd-shadow);
    display: block;
}

.bd-header-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

.bd-site-title {
    font-size: 2rem;
    margin: 0;
    color: var(--bd-primary-color);
    line-height: 1.2;
}

.bd-site-description {
    color: var(--bd-text-muted);
    font-size: 1.1rem;
    margin: 0;
}

.bd-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* ==========================================================================
   BOUTONS GÉNÉRAUX / GENERAL BUTTONS / ALLGEMEINE BUTTONS
   ========================================================================== */
/* [FR] Styles communs à tous les boutons. Les couleurs spécifiques sont définies plus bas. */
/* [EN] Common styles for all buttons. Specific colors are defined below. */
/* [DE] Gemeinsame Stile für alle Buttons. Spezifische Farben werden unten definiert. */

.bd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: var(--bd-btn-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s, transform 0.1s;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    color: var(--bd-text-light);
}

.bd-btn:active { transform: scale(0.98); }
.bd-btn:hover { opacity: 0.9; text-decoration: none; }
.bd-btn svg { fill: currentColor; width: 1.2em; height: 1.2em; margin-right: 0.3rem; }

/* --- Définition des couleurs par type de bouton (Redondance assumée pour clarté) --- */
/* [FR] Chaque bloc définit fond, survol et texte pour un type d'action. */
/* [EN] Each block defines background, hover, and text for an action type. */
/* [DE] Jeder Block definiert Hintergrund, Hover und Text für einen Aktionstyp. */

.bd-btn-rss { background: var(--bd-btn-rss-bg); color: var(--bd-btn-rss-text); }
.bd-btn-rss:hover { background: var(--bd-btn-rss-bg-hover); }

.bd-btn-external { background: var(--bd-btn-external-bg); color: var(--bd-btn-external-text); }
.bd-btn-external:hover { background: var(--bd-btn-external-bg-hover); }

.bd-btn-download { background: var(--bd-btn-download-bg); color: var(--bd-btn-download-text); }
.bd-btn-download:hover { background: var(--bd-btn-download-bg-hover); }

.bd-btn-video { background: var(--bd-btn-video-bg); color: var(--bd-btn-video-text); }
.bd-btn-video:hover { background: var(--bd-btn-video-bg-hover); }

.bd-btn-doc { background: var(--bd-btn-doc-bg); color: var(--bd-btn-doc-text); }
.bd-btn-doc:hover { background: var(--bd-btn-doc-bg-hover); }

/* Bouton personnalisé (via admin) / Custom button (via admin) / Benutzerdefinierter Button */
.bd-btn-custom {
    color: #000000 !important; 
}
.bd-btn-custom:hover {
    opacity: 0.85;
}

/* --- Gestion des couleurs de survol pour les boutons personnalisés --- */
/* [FR] Mapping des classes de couleur vers les variables de survol. */
/* [EN] Mapping color classes to hover variables. */
/* [DE] Zuordnung von Farbklassen zu Hover-Variablen. */

.bd-btn-color-yellow { --bd-btn-custom-hover: var(--bd-btn-header-yellow-hover); }
.bd-btn-color-blue   { --bd-btn-custom-hover: var(--bd-btn-header-blue-hover); }
.bd-btn-color-green  { --bd-btn-custom-hover: var(--bd-btn-header-green-hover); }
.bd-btn-color-red    { --bd-btn-custom-hover: var(--bd-btn-header-red-hover); }
.bd-btn-color-purple { --bd-btn-custom-hover: var(--bd-btn-header-purple-hover); }
.bd-btn-color-grey   { --bd-btn-custom-hover: var(--bd-btn-header-grey-hover); }

/* Règle générale appliquant la variable de survol */
.bd-btn-custom:hover {
    background-color: var(--bd-btn-custom-hover) !important;
    opacity: 1;
}

/* ==========================================================================
   BOUTON VIDÉO & MODALE / VIDEO BUTTON & MODAL / VIDEO-BUTTON & MODAL
   ========================================================================== */

.bd-episode-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.bd-episode-image img {
    width: 100%;
    max-width: 250px;
    height: auto;
    border-radius: var(--bd-radius);
    display: block;
    margin: 0 auto;
    box-shadow: var(--bd-shadow);
}

.bd-btn-video-prominent {
    width: 100%;
    max-width: 250px;
    font-size: 0.95rem;
    padding: 0.6rem 1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: normal;
}

.bd-btn-video-prominent:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    background: var(--bd-btn-video-bg-hover);
    opacity: 1;
}

/* Modale (Overlay) */
.bd-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bd-modal-overlay.active { opacity: 1; }

.bd-modal-content {
    position: relative;
    background: #000;
    width: 90%;
    max-width: 1000px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.bd-modal-overlay.active .bd-modal-content { transform: scale(1); }

.bd-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
    transition: color 0.2s;
}

.bd-modal-close:hover { color: var(--bd-primary-color); }

.bd-modal-video-container {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    background: #000;
}

.bd-modal-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   CONTENU & ÉPISODES / CONTENT & EPISODES / INHALT & EPISODEN
   ========================================================================== */

.bd-main { /* Padding top si nécessaire / Padding top if needed */ }

.bd-no-content {
    text-align: center;
    padding: 3rem 0;
    color: var(--bd-text-muted);
}

.bd-episode-card {
    background: var(--bd-card-bg);
    border-radius: var(--bd-card-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--bd-shadow);
    border: 1px solid var(--bd-border-color);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.bd-featured-episode {
    margin-bottom: 3rem;
}

.bd-featured-episode h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--bd-primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.bd-featured-episode h2 svg { fill: var(--bd-text-main); }

/* Style spécifique pour l'épisode en vedette */
.bd-episode-card.featured {
    background: var(--bd-featured-bg);
    border-color: var(--bd-featured-border);
    padding: 2rem;
}

.bd-episode-content h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--bd-text-main);
}

.bd-episode-meta {
    font-size: 0.9rem;
    color: var(--bd-text-muted);
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.bd-episode-meta svg { fill: var(--bd-text-muted); margin-right: 2px; }

.bd-episode-desc {
    margin-bottom: 1.5rem;
    white-space: pre-wrap; /* Conserve les sauts de ligne */
}

.bd-episode-player { margin-bottom: 1.5rem; width: 100%; }

.bd-episode-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: auto;
}

.bd-separator {
    border: 0;
    border-top: 2px solid var(--bd-border-color);
    margin: 2rem 0;
}

.bd-episode-list h2 {
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    color: var(--bd-text-main);
}

/* ==========================================================================
   LECTEUR AUDIO / AUDIO PLAYER / AUDIO-PLAYER
   ========================================================================== */

.bd-custom-audio-player {
    background: var(--bd-bg-color);
    border: 1px solid var(--bd-border-color);
    border-radius: var(--bd-btn-radius);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--bd-shadow);
    width: 100%;
    box-sizing: border-box;
}

.bd-custom-audio-player audio { display: none; }

.bd-audio-play-btn {
    background: var(--bd-primary-color);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
    font-size: 1.2rem;
    padding-top: 4px;
}
.bd-audio-play-btn svg { fill: #fff; width: 1em; height: 1em; margin: 0; }
.bd-audio-play-btn:hover { background: var(--bd-primary-hover); opacity: 1; }

.bd-audio-progress-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
}

.bd-audio-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--bd-border-color);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.bd-audio-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--bd-primary-color);
    border-radius: 3px;
    transition: width 0.1s linear;
}

.bd-audio-time {
    font-size: 0.75rem;
    color: var(--bd-text-muted);
    font-family: monospace;
    display: flex;
    justify-content: space-between;
}

.bd-audio-volume-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    color: var(--bd-text-main);
}
.bd-audio-volume-container svg { fill: var(--bd-text-main); width: 1em; height: 1em; }

.bd-audio-volume-slider {
    width: 80px;
    cursor: pointer;
    accent-color: var(--bd-primary-color); /* Couleur du curseur native */
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
/* [FR] Styles pour la navigation entre les pages d'épisodes */
/* [EN] Styles for navigating between episode pages */
/* [DE] Stile für die Navigation zwischen Episodenseiten */

.bd-pagination {
    margin-top: 3rem;
    margin-bottom: 2rem;
    text-align: center;
}

.bd-pagination-controls {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--bd-pagination-gap);
    align-items: center;
}

/* Style de base pour les liens et spans de pagination */
.bd-page-link,
.bd-page-disabled,
.bd-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--bd-pagination-padding);
    border-radius: var(--bd-pagination-radius);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    text-decoration: none;
    min-width: 40px;
}

.bd-page-link svg,
.bd-page-disabled svg {
    fill: currentColor;
    width: 1.2em;
    height: 1.2em;
    margin: 0 0.2rem;
    vertical-align: middle;
}

/* État : Lien normal */
.bd-page-link {
    background-color: var(--bd-pagination-bg);
    color: var(--bd-pagination-text);
    border: 1px solid var(--bd-pagination-border);
    cursor: pointer;
}

.bd-page-link:hover {
    background-color: var(--bd-pagination-hover-bg);
    color: var(--bd-pagination-hover-text);
    border-color: var(--bd-pagination-hover-border);
    text-decoration: none;
    transform: translateY(-1px);
}

/* État : Page active */
.bd-page-link.bd-page-active {
    background-color: var(--bd-pagination-active-bg);
    color: var(--bd-pagination-active-text);
    border-color: var(--bd-pagination-active-border);
    font-weight: 700;
    cursor: default;
}

.bd-page-link.bd-page-active:hover {
    transform: none;
    opacity: 1;
}

/* État : Désactivé */
.bd-page-disabled {
    background-color: var(--bd-pagination-disabled-bg);
    color: var(--bd-pagination-disabled-text);
    border-color: var(--bd-pagination-disabled-border);
    cursor: default;
    opacity: 0.7;
}

.bd-page-disabled:hover {
    transform: none;
    background-color: var(--bd-pagination-disabled-bg);
    color: var(--bd-pagination-disabled-text);
}

.bd-page-ellipsis {
    color: var(--bd-text-muted);
    padding: 0.5rem;
    cursor: default;
}

/* ==========================================================================
   RESPONSIVE (MISE EN PAGE) / RESPONSIVE (LAYOUT) / RESPONSIVE (LAYOUT)
   ========================================================================== */

/* Tablette & Desktop (min-width: 768px) */
@media (min-width: 768px) {
    .bd-episode-card {
        flex-direction: row;
        align-items: flex-start;
    }

    .bd-episode-image {
        width: 250px; 
        margin-right: 1.5rem;
        margin-bottom: 0;
    }
    
    .bd-episode-image img {
        width: 100%;
        max-width: none;
    }

    .bd-episode-content { flex-grow: 1; }
    .bd-header-actions { justify-content: flex-start; }
    .bd-featured-episode .bd-episode-card { padding: 2.5rem; }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
    .bd-header-container {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .bd-header-content {
        align-items: center;
        width: 100%;
    }

    .bd-header-actions {
        justify-content: center;
        width: 100%;
    }

    /* Masquer l'image du header sur mobile pour gagner de la place */
    .bd-header-image-wrapper, 
    .bd-podcast-cover-header {
        display: none !important;
    }

    .bd-site-title { font-size: 1.5rem; }
    .bd-site-description { font-size: 1rem; }

    .bd-custom-audio-player {
        flex-wrap: wrap;
        padding: 0.8rem;
        gap: 0.8rem;
    }
    
    .bd-audio-volume-container { display: none; } /* Cache le volume sur petit écran */
    
    .bd-audio-play-btn {
        width: 35px;
        height: 35px;
    }
    
    /* Ajustement pagination mobile */
    .bd-pagination-controls { gap: 0.3rem; }
    .bd-page-link, .bd-page-disabled { padding: 0.4rem 0.6rem; font-size: 0.85rem; }
    .bd-page-link svg, .bd-page-disabled svg { width: 1em; height: 1em; }
}

/* ==========================================================================
   OPTIMISATION MOBILE EXTRÊME (max-width: 480px)
   ========================================================================== */
/* [FR] Simplification drastique de la pagination sur très petits écrans */
/* [EN] Drastic simplification of pagination on very small screens */
/* [DE] Drastische Vereinfachung der Paginierung auf sehr kleinen Bildschirmen */

@media (max-width: 480px) {
    .bd-pagination {
        margin-top: 2rem;
        margin-bottom: 2rem;
        width: 100%;
    }

    .bd-pagination-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.8rem;
        width: 100%;
        flex-wrap: nowrap; /* Pas de retour à la ligne */
    }

    /* 1. MASQUER LE SUPERFLU / HIDE UNNECESSARY ELEMENTS */
    .bd-page-first, 
    .bd-page-last, 
    .bd-page-ellipsis {
        display: none !important;
    }

    /* Ne garder que la page active et les flèches Prev/Next */
    .bd-page-link:not(.bd-page-active):not(.bd-page-prev):not(.bd-page-next) {
        display: none !important;
    }

    /* 2. AJUSTEMENTS STRUCTURELS / STRUCTURAL ADJUSTMENTS */
    .bd-page-link.bd-page-active {
        display: inline-flex !important;
        min-width: 40px;
        justify-content: center;
    }

    .bd-page-prev, 
    .bd-page-next {
        display: inline-flex !important;
        min-width: 44px;
        height: 44px;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
        margin: 0;
    }

    .bd-page-prev svg, 
    .bd-page-next svg {
        width: 1.2em;
        height: 1.2em;
        margin: 0;
    }

    .bd-page-disabled.bd-page-prev,
    .bd-page-disabled.bd-page-next {
        pointer-events: none;
    }
}