/* static/css/styles.css */

/* CSS Variables for Consistency and Maintainability */
:root {
    /* General Styles */
    --body-bg-color: #d1e8e2; /* Main Background color */
    --body-font-family: Arial, sans-serif;
    --body-padding-top: 5px;

    /* Navbar Styles */
    --navbar-brand-font-weight: bold;
    --navbar-brand-font-size: 1 rem;

    --nav-link-cursor: pointer;

    /* Language Card Styling */
    --language-card-width: 120px;
    --language-card-padding: 8px;
    --language-card-img-width: 24px;
    --language-card-img-height: 16px;
    --language-card-img-margin-bottom: 4px;

    /* Registration and Login Modals */
    --modal-header-bg-color: #007bff;
    --modal-header-text-color: white;
    --modal-footer-bg-color: #f1f1f1;

    /* Buttons */
    --btn-primary-bg-color: #2c3531;
    --btn-primary-border-color: #010f1d;
    --btn-primary-hover-bg-color: #116466;
    --btn-primary-hover-border-color: #004085;  
    --btn-primary-icon-margin-right: 5px;
    --btn-primary-text-color: #000000;

    /* Ask Question Section */
    --question-input-resize: none;
    --ask-button-width: 20%;

    /* Answer Display */
    --answer-container-bg-color: #dcdcd1;
    --answer-container-padding: 15px;
    --answer-container-border-radius: 5px;  
    --answer-text-white-space: pre-wrap;

    /* Audio Container */
    --audio-container-margin-top: 10px;
    --audio-width: 100%;
    --audio-max-width: 300px;

    /* Questions History */
    --questions-history-margin-top: 30px;

    /* Questions List Items */
    --questions-list-li-bg-color: #d1e8e2; /* Question list main background */
    --questions-list-li-border: 2px solid #134b3c;
    --questions-list-li-border-radius: 20px;
    --questions-list-li-padding: 15px;
    --questions-list-li-margin-bottom: 10px;

    /* Description Container */
    --description-container-font-style: italic;
    --description-container-color: #666;
    --description-container-margin-top: 10px;

    /* Error and Success Messages */
    --text-danger-color: #dc3545;
    --text-success-color: #28a745;

    /* Ratings Section */
    --answer-card-position: relative;
    --answer-card-padding: 20px;
    --answer-card-bg-color: #729AC9;
    --answer-card-border: 1px solid #000000;
    --answer-card-border-radius: 8px;
    --answer-card-margin-top: 10px;

    --rating-section-top-position: absolute;
    --rating-section-top-top: 10px;
    --rating-section-top-right: 10px;
    --rating-section-top-display: flex;
    --rating-section-top-align-items: center;
    --rating-section-top-justify-content: flex-end;
    --rating-section-top-gap: 10px;

    --rating-section-h6-margin-right: 10px;
    --rating-section-h6-font-size: 14px;

    --rate-btn-margin-right: 10px;
    --rate-btn-padding: 0;
    --rate-btn-border: 0;
    --rate-btn-background: #FFFFFF;
    --rate-btn-cursor: pointer;
    --rate-btn-font-size: 12px;
    --rate-btn-user-select: none;
    --rate-btn-hover-background-color: #f0f0f0;
    --rate-btn-border-radius: 8px;

    --rating-count-margin-left-small: 2px;
    --rating-count-font-size-small: 12px;
    --rating-count-margin-left-medium: 5px;
    --rating-count-font-size-medium: 14px;

    --admin-link-font-weight: bold;
    --admin-link-color: #007bff;

    --language-badge-font-size: 0.9em;
    --language-badge-padding: 0.5em 0.75em;
    --language-badge-border-radius: 0.25rem;
    --language-badge-display: flex;
    --language-badge-align-items: center;

    --language-badge-img-width: 16px;
    --language-badge-img-height: 12px;
    --language-badge-img-margin-right: 4px;

    --rating-section-display: flex;
    --rating-section-align-items: center;
    --rating-section-margin-top: 10px;

    --rating-section-h6-margin-right: 10px;
    --rating-section-h6-font-size: 14px;

    --language-display-font-size: 14px;
    --language-display-color: #6c757d;
    --language-display-margin-top: 5px;
}

/* General Styles */
body {
    background-color: var(--body-bg-color);
    font-family: var(--body-font-family);
    padding-top: var(--body-padding-top);
}

/* Navbar Styles */
.navbar-brand {
    font-weight: var(--navbar-brand-font-weight);
    font-size: var(--navbar-brand-font-size);
}

.nav-link {
    cursor: var(--nav-link-cursor);
}

/* Language Card Styling */
.language-card {
    width: var(--language-card-width);
}

.language-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--language-card-padding);
}

.language-card img {
    width: var(--language-card-img-width);
    height: var(--language-card-img-height);
    margin-bottom: var(--language-card-img-margin-bottom);
}

/* Registration and Login Modals */
.modal-header {
    background-color: var(--modal-header-bg-color);
    color: var(--modal-header-text-color);
}

.modal-footer {
    background-color: var(--modal-footer-bg-color);
}

/* Buttons */
.btn-primary {
    background-color: var(--btn-primary-bg-color);
    border-color: var(--btn-primary-border-color);
    display: flex; /* Ensures flex layout for icon and text */
    align-items: center; /* Vertically centers icon and text */
}

.btn-primary:hover {
    background-color: var(--btn-primary-hover-bg-color);
    border-color: var(--btn-primary-hover-border-color);
}

.btn-primary i {
    margin-right: var(--btn-primary-icon-margin-right); /* Spacing between icon and text */
}

/* Ask Question Section */
#question-input {
    resize: var(--question-input-resize);
}

#ask-button {
    width: var(--ask-button-width);
}

/* Answer Display */
#answer-container {
    background-color: var(--answer-container-bg-color);
    padding: var(--answer-container-padding);
    border-radius: var(--answer-container-border-radius);
}

#answer-text {
    white-space: var(--answer-text-white-space); /* Preserve whitespace */
}

/* Audio Container */
#audio-container {
    margin-top: var(--audio-container-margin-top);
}

#audio-container audio {
    width: var(--audio-width);
    max-width: var(--audio-max-width);
}

/* Questions History */
#questions-history {
    margin-top: var(--questions-history-margin-top);
}

#questions-list li {
    background-color: var(--questions-list-li-bg-color);
    border: var(--questions-list-li-border);
    border-radius: var(--questions-list-li-border-radius);
    padding: var(--questions-list-li-padding);
    margin-bottom: var(--questions-list-li-margin-bottom);
}

/* Description for question source Container */
#description-container {
    font-style: var(--description-container-font-style);
    color: var(--description-container-color);
    margin-top: var(--description-container-margin-top);
}

/* Error and Success Messages */
.text-danger {
    color: var(--text-danger-color) !important;
}

.text-success {
    color: var(--text-success-color) !important;
}

/* Ratings Section */
/* Answer Container Styling */
.answer-card {
    position: var(--answer-card-position); /* Ensures child elements can be absolutely positioned */
    padding: var(--answer-card-padding);
    background-color: var(--answer-card-bg-color);
    border: var(--answer-card-border);
    border-radius: var(--answer-card-border-radius);
    margin-top: var(--answer-card-margin-top);
}

/* Rating Buttons Top-Right */
.rating-section-top {
    position: var(--rating-section-top-position); /* Position it relative to the parent container */
    top: var(--rating-section-top-top);
    right: var(--rating-section-top-right); /* Align it to the top-right corner */
    display: var(--rating-section-top-display);
    align-items: var(--rating-section-top-align-items);
    justify-content: var(--rating-section-top-justify-content);
    gap: var(--rating-section-top-gap); /* Adds spacing between buttons and counts */
}

.rating-section-top .btn {
    padding: 0;
    border: var(--rating-section-top-btn-border);
    background: var(--rating-section-top-btn-background);
    cursor: var(--rating-section-top-btn-cursor);
}

.rating-section-top .btn:hover {
    opacity: 0.7;
}

.rating-section-top .rating-count {
    font-size: 14px;
    margin-left: 5px;
}

.rating-section h6 {
    margin-right: var(--rating-section-h6-margin-right);
    font-size: var(--rating-section-h6-font-size);
}

/* Rating Button Styling - question history */
.rate-btn {
    margin-right: var(--rate-btn-margin-right);
    padding: var(--rate-btn-padding);
    border: var(--rate-btn-border);
    background: var(--rate-btn-background);
    cursor: var(--rate-btn-cursor);
    font-size: var(--rate-btn-font-size);
    user-select: var(--rate-btn-user-select);
    border-radius: var(--rate-btn-border-radius);
}

.rate-btn:hover {
    opacity: 0.7;
    background-color: var(--rate-btn-hover-background-color);
}

.rate-btn.active.text-success {
    color: var(--text-success-color); /* Bootstrap success color */
}

.rate-btn.active.text-danger {
    color: var(--text-danger-color); /* Bootstrap danger color */
}

/* Optional: Styles for total ratings */
.rating-count {
    margin-left: var(--rating-count-margin-left-small);
    font-size: var(--rating-count-font-size-small);
}

.rating-count.large {
    margin-left: var(--rating-count-margin-left-medium);
    font-size: var(--rating-count-font-size-medium);
}

/* Admin Link Styling */
#admin-link {
    font-weight: var(--admin-link-font-weight);
    color: var(--admin-link-color);
}

/* Responsive Design */
@media (max-width: 576px) {
    .navbar-brand {
        font-size: 1.2rem;
    }
    
    #answer-text {
        font-size: 0.9rem;
    }
    
    #questions-list li {
        padding: 10px;
    }
    
    /* Adjust language card for Smaller Screens */
    .language-card {
        width: 80px;
    }

    .language-card img {
        width: 20px;
        height: 14px;
    }

    .language-badge {
        font-size: 0.8em;
        padding: 0.4em 0.6em;
    }
}

/* Language Badge Styling */
.language-badge {
    font-size: var(--language-badge-font-size);
    padding: var(--language-badge-padding);
    border-radius: var(--language-badge-border-radius);
    display: var(--language-badge-display);
    align-items: var(--language-badge-align-items);
}

.language-badge img {
    width: var(--language-badge-img-width);
    height: var(--language-badge-img-height);
    margin-right: var(--language-badge-img-margin-right);
}

/* Rating Section Styling */
.rating-section {
    display: var(--rating-section-display);
    align-items: var(--rating-section-align-items);
    margin-top: var(--rating-section-margin-top);
}

.rating-section h6 {
    margin-right: var(--rating-section-h6-margin-right);
    font-size: var(--rating-section-h6-font-size);
}

/* Ensure the answer card is positioned relative for absolute positioning of rating section */
.answer-card {
    position: var(--answer-card-position);
}

/* Disable text selection for rating buttons */
.rate-btn {
    user-select: var(--rate-btn-user-select);
}

/* Language Display Styling */
.language-display {
    font-size: var(--language-display-font-size);
    color: var(--language-display-color);
    margin-top: var(--language-display-margin-top);
}

.chapter-display {
    font-weight: bold;
    color: #555;
}

.floating-frame {
    position: fixed;
    top: 60px;
   /* bottom: 20px; */
    right: 10px;
    padding: 5px;
    background-color: #ecebf1;
    border: 1px solid #141212;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    font-size: 12px;
    border-radius: var(--rate-btn-border-radius);
}

/* Improve Share Button Spacing */
.share-btn {
    margin-left: 2px; /* Add spacing from other buttons */
    margin-right: 8px; /* Add spacing from other buttons */
    padding: 5px 5px; /* Add padding inside the button */
    border-radius: 5px; /* Slightly rounded corners */
    background-color: #ecebf1;
}