/* review and star */

.review-section {
    display: flex; align-items: center; gap: 8px; margin: 10px 0;  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.rating-number {  font-size: 0.9em;   font-weight: 500;  color: #363636 !important; line-height: 1;}

.stars-container {display: inline-flex; align-items: center;}

/* Update star styling to match Image 2 */
.stars-container .fa-star,
.stars-container .fa-star-half-o { color: #ffc107; /* Golden yellow */  font-size: 14px;  margin-right: 2px;}

.stars-container .fa-star-o {  color: #e4e5e9; /* Light gray for empty stars */ font-size: 14px; margin-right: 2px;}

.review-count {color: #363636 !important; font-size: 0.9em; font-weight: 500;}

/* Alternative single-line layout if preferred */
.review-section.inline { display: inline-flex; align-items: baseline;}

.review-section.inline .rating-number {  margin-right: 6px;}

.review-section.inline .review-count { margin-left: 4px;}

.review-container {   max-height: 400px; overflow-y: auto;}

.view-review {display: none; /* hidden by default, JS will show */ align-items: flex-start;
    border-bottom: 1px solid #ddd;  padding: 15px;   margin-bottom: 15px;  background: #fff;
    border-radius: 8px;  position: relative; /* for absolute stars */
}
/* stars section aligned to right */
.view-review .stars {   position: absolute; top: 15px; right: 15px; font-size: 18px;color: #f1c40f;}
.view-review .span {background: #f1c40f;  color: #fff; font-weight: bold;  font-size: 16px;width: 45px;  height: 45px; border-radius: 50%; display: flex;align-items: center;justify-content: center;margin-right: 15px;}
.view-review .comet-fix { flex-grow: 1;}
.view-review h5 { margin: 0; font-size: 16px;font-weight: 600;}
.view-review h5 small {display: block; font-size: 13px;color: #777;}
.view-review p { margin-top: 8px; color: #444; font-size: 14px;line-height: 1.5;}
.rating h5{font-size:1.2em;color:#ffbf00;font-weight:800;}
.rating p{color:#363636;font-size:0.9em;font-weight:500;margin:25px 0}
.rating img{width:100px}
.rating .star {cursor: pointer;font-size: 22px;color: #ccc;}
.rating .star.checked { color: #ffbf00;}
.rating .star.hover {color: #ffbf00;}

/* Bootstrap Select main block */
    .bootstrap-select {
        display: block !important;
    }
    /* Fix width/overflow for dropdown menu - REMOVE overflow-y here */
    .bootstrap-select .dropdown-menu {
        will-change: transform;
        transform: translateZ(0);
        border-radius: 8px !important;
        border: 1px solid #ddd !important;
        padding: 5px !important;
        max-height: 250px !important;
        /* REMOVED: overflow-y: auto !important; */
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Add scrollbar only to the inner list */
    .bootstrap-select .dropdown-menu .inner {
        max-height: 240px !important;
        overflow-y: auto !important;
    }
    /* Show dropdown over inputs--no shifting */
    .bootstrap-select.open .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        z-index: 1050 !important;
    }
    /* Selectpicker look and prevent jumping */
    .bootstrap-select .dropdown-toggle {
        background: #fff !important;
        border: 1px solid #ced4da !important;
        border-radius: 50px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        color: rgb(37, 35, 35) !important;
        box-shadow: none !important;
    }
    .bootstrap-select,
    .bootstrap-select .dropdown-toggle,
    .bootstrap-select .dropdown-menu {
        white-space: normal !important;
    }
    /* Reduce height/spacing of dropdown items */
    .bootstrap-select .dropdown-menu li a {
        margin: 0 !important;
        padding: 4px 10px !important;
        color: rgb(37, 35, 35) !important;
        font-weight: 500 !important;
    }
    .bootstrap-select .dropdown-menu li {
        margin: 0 !important;
    }
    .bootstrap-select .dropdown-menu li a span.text {
        margin: 0 !important;
        display: block;
        color: rgb(37, 35, 35) !important;
    }
    .bootstrap-select .dropdown-menu li a:hover {
        background: #c2bfbf !important;
        color: rgb(20, 20, 20) !important;
    }
    /* Form field and error handling */
    .form-group {
        position: relative !important;
        margin-bottom: 1.5rem !important;
    }
    .modal, .container, .form-group, .profile, .row, .col-lg-4 {
        overflow: visible !important;
    }
    /* Error message styling below fields */
    .form-group .help-block,
    .form-group .error-message,
    .form-group .error-container .text-danger { position: absolute; bottom: -18px;left: 0; font-size: 12px;color: #dc3545 !important;  margin: 0; padding: 2px 0; width: 100%; z-index: 10;
    }
    /* Ensure error messages don't interfere with layout */
    .form-group .help-block:empty,
    .form-group .error-message:empty { display: none;}
    /* Keep asterisks in labels normal */
    .form-group label .text-danger { position: static !important;font-size: inherit !important; margin: 0 !important;padding: 0 !important; }
    /* Custom validation error styling */
    .form-control.error,
    .bootstrap-select.error .dropdown-toggle {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    }
    /* Label style */
    .form-group label { display: block; margin-bottom: 5px;  font-weight: 500; color: #333; }
    /* Responsive column margin */
    .modal-form .col-lg-4 {margin-bottom: 25px;}
    /* Ensure parent .form-group/.col has relative positioning */
    .form-group, .col-lg-4 {position: relative !important;  }
    /* Hide the search input scrollbar if it appears */
    .bootstrap-select .bs-searchbox input { overflow: hidden !important; }

.history-cell { position: relative; cursor: pointer; }
.history-cell span, .last-update span { font-size: 0.6em; color: #9b9a9a; }
.history-tooltip { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #ccc; padding: 8px; z-index: 10; width: 250px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.history-cell:hover .history-tooltip { display: block; }
.history-tooltip table { width: 100%; border-collapse: collapse; font-size: 12px; }
.history-tooltip th, .history-tooltip td { border: 1px solid #ddd; padding: 4px; }


.static-page { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1f2937; }
.static-page .container { margin: auto; background: #ffffff; padding: 50px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); }
.page-header { text-align: center; margin-bottom: 45px; }
.page-header h1 { font-size: 2.5rem; margin-bottom: 10px; color: #111827; }
.page-header p { font-size: 1rem; color: #6b7280; }
.content-section { margin-bottom: 40px; }
.content-section h2 { padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; }
.content-section p { font-size: 1rem; line-height: 1.75; margin-bottom: 14px; }
.content-section ul { margin: 12px 0 18px 20px; padding: 0; }
.content-section ul li { margin-bottom: 8px; line-height: 1.6; }
.version-info { background: #f8fafc; border: 1px solid #e5e7eb; padding: 20px; border-radius: 6px; font-size: 0.95rem; }

/* footer static content */
.footer-expand-text summary {list-style: none;cursor: pointer;display: flex;justify-content: center;align-items: center;gap: 8px;color: #fff;font-size: 14px;}
.expand-arrow {width: 10px;height: 10px;border-right: 2px solid #fff;border-bottom: 2px solid #fff;transform: rotate(45deg);transition: transform 0.3s ease;}

.course-container { margin-bottom: 15px; }
.hidden-course { display: none; }
.view-more-btn { text-align: center; margin: 20px 0; }
.more-exams { color: #007bff; cursor: help; font-weight: 500; }
.more-exams:hover { text-decoration: underline; }

.blog-social-buttons { display: flex; gap: 10px; margin-left: auto;}
.blog-social-buttons a { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: #0d6efd;  color: #fff !important; border-radius: 20px; font-size: 13px; text-decoration: none; white-space: nowrap; transition: all 0.3s ease; }
.blog-social-buttons a:last-child { background: #25D366;}
.blog-social-buttons a:hover { opacity: 0.9; }