/*
 * read-bar-frontend.css
 * Styles for the ReadBar plugin frontend elements.
 */

/* ==========================================================================
   Base Styles for Reading Time & Progress Bar
   ========================================================================== */

/* Ensure the reading time element is hidden by default unless explicitly shown by device-specific rules */
.read-bar-reading-time {
    display: none; /* Hidden by default */
    box-sizing: border-box; /* Ensure padding/margin are calculated correctly */
    line-height: 1; /* Prevent extra space around text */
}

/* Ensure the progress bar container is hidden by default unless explicitly shown by device-specific rules */
#read-bar-progress-container {
    display: none; /* Hidden by default */
    position: fixed;
    left: 0;
    width: 100%;
    height: 4px; /* Explicitly define height here */
    background: transparent;
    z-index: 9999;
}

/* Styles for the progress bar itself */
#read-bar-progress-bar {
    height: 100%; /* Take full height of container */
    width: 0;
    transition: width 0.25s ease;
}


/* ==========================================================================
   Device-Specific Visibility & Positioning
   ========================================================================== */

/* --- Desktop Styles (min-width: 1025px) --- */
@media (min-width: 1025px) {
    /* Progress Bar Visibility for Desktop */
    #read-bar-progress-container[data-vis-desktop="1"] {
        display: block;
    }
    /* Explicitly hide if not marked for desktop visibility */
    #read-bar-progress-container:not([data-vis-desktop="1"]) {
        display: none !important;
    }
    /* Progress Bar Position for Desktop */
    #read-bar-progress-container[data-pos-desktop="top"] {
        top: 0;
        bottom: auto;
    }
    #read-bar-progress-container[data-pos-desktop="bottom"] {
        bottom: 0;
        top: auto;
    }

    /* Reading Time Bar Visibility for Desktop */
    .read-bar-reading-time[data-vis-desktop="1"] {
        display: block;
    }
    /* Explicitly hide if not marked for desktop visibility */
    .read-bar-reading-time:not([data-vis-desktop="1"]) {
        display: none !important;
    }
}


/* --- Tablet Styles (max-width: 1024px and min-width: 768px) --- */
@media (max-width: 1024px) and (min-width: 768px) {
    /* Progress Bar Visibility for Tablet */
    #read-bar-progress-container[data-vis-tablet="1"] {
        display: block;
    }
    /* Explicitly hide if not marked for tablet visibility */
    #read-bar-progress-container:not([data-vis-tablet="1"]) {
        display: none !important;
    }
    /* Progress Bar Position for Tablet */
    #read-bar-progress-container[data-pos-tablet="top"] {
        top: 0;
        bottom: auto;
    }
    #read-bar-progress-container[data-pos-tablet="bottom"] {
        bottom: 0;
        top: auto;
    }

    /* Reading Time Bar Visibility for Tablet */
    .read-bar-reading-time[data-vis-tablet="1"] {
        display: block;
    }
    /* Explicitly hide if not marked for tablet visibility */
    .read-bar-reading-time:not([data-vis-tablet="1"]) {
        display: none !important;
    }
}


/* --- Mobile Styles (max-width: 767px) --- */
@media (max-width: 767px) {
    /* Progress Bar Visibility for Mobile */
    #read-bar-progress-container[data-vis-mobile="1"] {
        display: block;
    }
    /* Explicitly hide if not marked for mobile visibility */
    #read-bar-progress-container:not([data-vis-mobile="1"]) {
        display: none !important;
    }
    /* Progress Bar Position for Mobile */
    #read-bar-progress-container[data-pos-mobile="top"] {
        top: 0;
        bottom: auto;
    }
    #read-bar-progress-container[data-pos-mobile="bottom"] {
        bottom: 0;
        top: auto;
    }

    /* Reading Time Bar Visibility for Mobile */
    .read-bar-reading-time[data-vis-mobile="1"] {
        display: block;
    }
    /* Explicitly hide if not marked for mobile visibility */
    .read-bar-reading-time:not([data-vis-mobile="1"]) {
        display: none !important;
    }
}