/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

/* General Body & Root Variables */
:root {
    --header-bg-color: #19224d;
    --header-text-color: #ffffff;
    --header-hover-color: #a9a9d4;
    --header-height: 70px;
    --primary-blue: #4A67E2;
    --primary-blue-dark: #3a50b4;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
    margin: 0;
}

body {
    font-family: 'Manrope', sans-serif;
    background-color: #fff;
}

/* Main Header Container */
.site-header {
    background-color: var(--header-bg-color);
    color: var(--header-text-color);
    height: var(--header-height);
    position: relative;
    z-index: 1000;
}

.site-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Site Branding (Logo & Title) */
.site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.custom-logo {
    max-height: 40px;
    width: auto;
}

.site-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-left: 1rem;
}

.site-title a {
    color: var(--header-text-color);
    text-decoration: none;
}

/* Screen reader text */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}

/* Desktop Navigation */
.main-navigation {
    display: none;
}

.main-navigation ul {
    margin: 0; padding: 0; list-style: none; display: flex;
}

.main-navigation li {
    margin: 0 1rem;
}

.main-navigation a {
    color: var(--header-text-color); text-decoration: none; font-weight: 500; font-size: 1rem; padding: 0.5rem 0; position: relative; transition: color 0.3s ease;
}

.main-navigation a:after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 50%; transform: translateX(-50%); background-color: var(--header-hover-color); transition: width 0.3s ease;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: var(--header-hover-color);
}

.main-navigation a:hover:after,
.main-navigation .current-menu-item > a:after {
    width: 100%;
}

/* Header Actions (CTA & Mobile Toggle) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* --- FIX: HIDE DESKTOP CTA ON MOBILE --- */
.header-cta {
    display: none;
}

/* Mobile Menu Toggle (Hamburger) */
.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

.icon-bar {
    width: 100%; height: 3px; background-color: var(--header-text-color); border-radius: 2px; transition: all 0.3s linear;
}

/* Mobile Menu Panel */
.mobile-menu-panel {
    display: none; position: absolute; top: var(--header-height); left: 0; width: 100%; background-color: var(--header-bg-color); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); padding: 1.5rem 2rem;
}

.mobile-menu-panel.is-open {
    display: block;
}

.mobile-navigation ul {
    list-style: none; padding: 0; margin: 0;
}

.mobile-navigation li {
    text-align: center;
}

.mobile-navigation a {
    display: block; padding: 1rem; color: var(--header-text-color); text-decoration: none; font-size: 1.1rem; font-weight: 500;
}

.mobile-menu-actions {
    margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- FIX: NEW, BETTER BUTTON STYLES --- */
.button-primary, .button-header-cta {
    background-color: var(--primary-blue);
    color: #fff;
    border: 1px solid var(--primary-blue);
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all 0.3s ease;
}

.button-primary:hover, .button-header-cta:hover {
    background-color: var(--primary-blue-dark);
    border-color: var(--primary-blue-dark);
    transform: translateY(-2px);
}

.mobile-menu-actions .button-primary {
    width: 100%;
}

/* --- FIX: DESKTOP MEDIA QUERY --- */
@media (min-width: 992px) {
    .main-navigation {
        display: block;
    }
    .header-cta {
        display: block; /* Show desktop button */
    }
    .mobile-menu-toggle {
        display: none; /* Hide hamburger */
    }
}

/* --- MODAL STYLES (from previous step, ensure they are present) --- */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(25, 34, 77, 0.8);display:flex;justify-content:center;align-items:center;z-index:2000;padding:1rem;}
.modal-content{background-color:#fff;padding:2.5rem;border-radius:16px;max-width:500px;width:100%;position:relative;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.2);}
.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:2rem;color:#aaa;cursor:pointer;line-height:1;}
.modal-title{font-size:1.8rem;font-weight:800;color:#19224d;margin-bottom:0.5rem;}
.modal-subtitle{color:#6c757d;margin-bottom:2rem;}
.modal-form .form-group{margin-bottom:1rem;}
.modal-form input[type="email"]{width:100%;padding:0.9rem 1rem;border:1px solid #ced4da;border-radius:8px;font-size:1rem;}
.modal-form-response{margin-top:1rem;font-weight:500;padding:0.75rem;border-radius:8px;}
.modal-form-response.success{background-color:#d4edda;color:#155724;}
.modal-form-response.error{background-color:#f8d7da;color:#721c24;}
.modal-form input[type="text"] {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 1rem;
}

/*--------------------------------------------------------------
# Main Styles & Global Fixes
--------------------------------------------------------------*/

/* Apply a natural box layout model to all elements */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* Disable horizontal scroll globally */
body {
  overflow-x: hidden;
}

/* Prevent all major elements and images from breaking the layout */
.site, .container, .entry-content,
.single-page-container, .main-content-area, .sticky-sidebar,
img, figure {
  max-width: 100%;
}

/* Ensure images scale correctly within their containers */
img {
    height: auto;
}

/*--------------------------------------------------------------
# Fallback Logo Styles
--------------------------------------------------------------*/

/* Style for the fallback <img> tag (your favicon) */
.fallback-logo {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Prevents the favicon from stretching or being cropped */
    border-radius: inherit; /* Inherits the rounded corners from its container */
}

/* Ensure the generic fallback span also respects the container's shape */
.fallback-icon {
    border-radius: inherit;
}

/*--------------------------------------------------------------
# Featured Websites Section
--------------------------------------------------------------*/
.featured-section {
    padding: 5rem 1.5rem; /* Adjusted padding for mobile */
    background-color: #f8f9fa;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0; /* Container should not have padding */ }
.section-title { text-align: center; font-size: 2.5rem; font-weight: 800; color: #19224d; margin-bottom: 0.5rem; }
.section-subtitle { text-align: center; font-size: 1.1rem; color: #6c757d; margin-bottom: 3rem; }
.featured-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.featured-card { background-color: #fff; border-radius: 12px; padding: 2rem; text-align: center; text-decoration: none; color: #333; border: 1px solid #e9ecef; box-shadow: 0 4px 10px rgba(0,0,0,0.02); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.featured-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.card-logo { height: 64px; margin-bottom: 1.5rem; display: flex; justify-content: center; align-items: center; }
.card-logo img { max-height: 100%; max-width: 150px; width: auto; height: auto; }
.card-title { font-size: 1.1rem; font-weight: 700; color: #19224d; margin: 0 0 1rem 0; }
.card-sparkline { opacity: 0.7; }
.section-footer { text-align: center; margin-top: 3rem; }
.button-view-more { display: inline-block; background-color: #4A67E2; color: #fff; padding: 0.8rem 2rem; border-radius: 8px; text-decoration: none; font-weight: 700; transition: background-color 0.3s ease; }
.button-view-more:hover { background-color: #3a50b4; }

/* Responsive */
@media (max-width: 992px) {
    .featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .featured-section { padding: 3rem 1rem; } /* Less padding */
    .featured-grid { grid-template-columns: 1fr; }
    .section-title { font-size: 2rem; }
}
.card-logo .fallback-site-logo {
    max-height: 100%;
    max-width: 150px;
    width: auto;
    height: auto;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero-section {
    background-color: var(--header-bg-color);
    color: var(--header-text-color);
    padding: 6rem 1.5rem; /* Adjusted padding for mobile */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-content { max-width: 800px; width: 100%; }
.hero-headline { font-size: 3.5rem; font-weight: 800; line-height: 1.2; margin: 0 0 1rem 0; }
.hero-subheadline { font-size: 1.25rem; font-weight: 400; color: var(--header-hover-color); margin: 0 0 3rem 0; }

/* Search Form */
.hero-search-form-wrapper { max-width: 750px; margin: 0 auto; }
.hero-search-form { display: flex; background-color: #fff; border-radius: 12px; padding: 0.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); align-items: stretch; }
.hero-search-field { flex-grow: 1; border: none; background: transparent; padding: 0 1.5rem; font-size: 1rem; font-family: 'Manrope', sans-serif; color: #333; min-width: 100px; }
.hero-search-field:focus { outline: none; }
.location-selector { display: flex; align-items: center; border-left: 1px solid #e0e0e0; padding-left: 1rem; position: relative; }
.location-icon { color: #888; margin-right: 0.5rem; }
.hero-location-dropdown { border: none; background: transparent; color: #555; font-size: 1rem; font-family: 'Manrope', sans-serif; padding-right: 1.5rem; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.hero-location-dropdown:focus { outline: none; }
.hero-search-submit { background-color: #4A67E2; color: #fff; border: none; padding: 0.8rem 2rem; border-radius: 8px; font-size: 1rem; font-weight: 700; font-family: 'Manrope', sans-serif; cursor: pointer; transition: background-color 0.3s ease; margin-left: 0.5rem; }
.hero-search-submit:hover { background-color: #3a50b4; }

/* Favicon Bar */
.hero-favicon-bar { margin-top: 3rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; }
.favicon-item { display: inline-block; transition: transform 0.2s ease; }
.favicon-item img { width: 36px; height: 36px; border-radius: 50%; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border: 2px solid #fff; }
.favicon-item:hover { transform: translateY(-3px); }

/* Responsive */
@media (max-width: 768px) {
    .hero-section { padding: 4rem 1rem; } /* Less padding on mobile */
    .hero-headline { font-size: 2.2rem; } /* Smaller headline */
    .hero-subheadline { font-size: 1.1rem; }
    .hero-search-form { flex-direction: column; gap: 1rem; background: transparent; box-shadow: none; padding: 0; }
    .hero-search-field { background: #fff; padding: 1rem 1.5rem; border-radius: 12px; }
    .location-selector { background: #fff; border-radius: 12px; padding: 1rem 1.5rem; border-left: none; }
    .hero-search-submit { padding: 1rem; width: 100%; margin-left: 0; }
    .hero-favicon-bar { gap: 1rem; }
    .favicon-item img { width: 32px; height: 32px; }
}

/*--------------------------------------------------------------
# HOMEPAGE FAQ - DEDICATED & COMPLETE STYLESHEET
--------------------------------------------------------------*/

.hp-faq-section {
    padding: 5rem 1.5rem;
    background-color: #f8f9fa;
}

.hp-faq-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: #19224d;
    margin-bottom: 3rem;
}

/* This is the main container for the cards */
.hp-faq-accordion {
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Creates space between each card */
}

/* This is the individual card style */
.hp-faq-item {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    overflow: hidden; /* Ensures border-radius is respected by children */
    transition: box-shadow 0.3s ease;
}

.hp-faq-item:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); /* Deeper shadow on hover */
}

/* This is the clickable question button */
.hp-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: transparent; /* Card provides the background */
    border: none;
    text-align: left;
    padding: 1.5rem; /* Consistent padding on all sides */
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    color: #19224d;
    cursor: pointer;
    position: relative;
}

/* This is the plus/minus icon */
.hp-faq-icon {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.hp-faq-icon::before,
.hp-faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background-color: #4A67E2;
    border-radius: 2px;
    transition: transform 0.3s ease-in-out;
}

.hp-faq-icon::before {
    transform: translate(-50%, -50%);
}

.hp-faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.hp-faq-question.is-active .hp-faq-icon::after {
    transform: translate(-50%, -50%) rotate(180deg); /* Creates a minus sign */
}

/* This is the answer content area */
.hp-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.hp-faq-answer p {
    padding: 0 1.5rem 1.5rem 1.5rem; /* Padding for the text inside the answer div */
    color: #555;
    line-height: 1.7;
    margin: 0;
}

/*--------------------------------------------------------------
# Check Another Website Section (Homepage) - FINAL GUARANTEED FIX
--------------------------------------------------------------*/
.check-another-section-home {
    padding: 5rem 1.5rem;
    background-color: #f8f9fa;
}

.check-another-section-home .section-title {
    text-align: center; font-size: 1.2rem; font-weight: 500; color: #19224d; margin-bottom: 0.5rem;
}
.check-another-section-home .section-subtitle {
    text-align: center; font-size: 1.1rem; color: #6c757d; margin-bottom: 3rem;
}
.check-another-section-home .check-another-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.check-another-section-home .check-another-card { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem; background-color: #fff; border: 1px solid #e9ecef; border-radius: 12px; text-decoration: none; transition: all 0.3s ease; }
.check-another-section-home .check-another-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.07); }
.check-another-section-home .card-content { display: flex; align-items: center; gap: 1rem; }
.check-another-section-home .card-icon img, 
.check-another-section-home .card-icon .fallback-icon { width: 32px; height: 32px; border-radius: 6px; display: block; background-color: #e9ecef; }
.check-another-section-home .card-text { display: flex; flex-direction: column; }
.check-another-section-home .card-title { font-weight: 600; color: #333; display: block; }
.check-another-section-home .card-time { font-size: 0.85rem; color: #6c757d; display: block; }

/* --- THE NEW, MORE GENERAL FIX FOR THE DOT --- */
.status-dot-sm {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot-sm.status-up { background-color: #28a745; }
.status-dot-sm.status-down { background-color: #dc3545; }
.status-dot-sm.status-issues { background-color: #ffc107; }

/* Responsive Grid */
@media (max-width: 576px) { 
    .check-another-section-home { padding: 3rem 1rem; }
}

/*--------------------------------------------------------------
# "Leave a Review" Page Styles
--------------------------------------------------------------*/
.review-page-wrapper {
    padding: 5rem 1.5rem;
    background-color: #fff;
}
.review-page-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.review-page-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #19224d;
    margin-bottom: 1rem;
}
.review-page-subtitle {
    font-size: 1.2rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 3rem;
}

/* Logged-Out Prompt Card */
.review-login-prompt {
    background-color: #f8f9fa;
    border-radius: 16px;
    padding: 2.5rem;
    border: 1px solid #e9ecef;
}
.review-login-prompt p {
    margin-top: 0;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
}
.review-login-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.review-login-buttons a {
    text-decoration: none;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.3s ease;
}
.button-signin {
    background-color: #fff;
    color: #4A67E2;
    border: 2px solid #e0e0e0;
}
.button-signin:hover {
    background-color: #f1f3f5;
    border-color: #ccc;
}
.button-signup {
    background-color: #4A67E2;
    color: #fff;
    border: 2px solid #4A67E2;
}
.button-signup:hover {
    background-color: #3a50b4;
    border-color: #3a50b4;
}

/* Logged-In Form */
.review-form-container {
    background-color: #f8f9fa;
    border-radius: 16px;
    padding: 2.5rem;
    border: 1px solid #e9ecef;
    text-align: left;
}
.form-row { margin: 0 0 1.5rem 0; }
.form-row label { display: block; font-weight: 700; margin-bottom: 0.5rem; color: #333; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 0.8rem 1rem; border: 1px solid #ced4da; border-radius: 8px; font-size: 1rem; font-family: 'Manrope', sans-serif; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: #4A67E2; box-shadow: 0 0 0 2px rgba(74, 103, 226, 0.2); }
.button-submit-review { width: 100%; background-color: #4A67E2; color: #fff; border: none; padding: 1rem; border-radius: 8px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: background-color 0.3s ease; }
.button-submit-review:hover { background-color: #3a50b4; }

/* Success Message */
.review-form-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 2rem;
    border-radius: 16px;
}
.review-form-success h3 {
    margin-top: 0;
}

/* Responsive */
@media (max-width: 576px) {
    .review-page-wrapper { padding: 3rem 1rem; }
    .review-page-title { font-size: 2.2rem; }
    .review-page-subtitle { font-size: 1rem; }
    .review-login-prompt, .review-form-container { padding: 1.5rem; }
}

/* Form Messages */
.review-form-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    text-align: left;
}

.review-form-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 2rem;
    border-radius: 16px;
}
.review-form-success h3 {
    margin-top: 0;
}

/* Style for file input */
.form-row input[type="file"] {
    padding: 0.5rem;
    background-color: #fff;
}

/*--------------------------------------------------------------
# Status Columns Section (REBUILT FROM SCRATCH)
--------------------------------------------------------------*/
.status-columns-section {
    padding: 5rem 2rem;
    background-color: #fff;
}

/* This is the new Flexbox container that will force the columns into a row */
.status-columns-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    gap: 2rem;
}

/* Each column will now be a flexible item */
.status-column {
    flex: 1; /* This makes each column take up equal space */
    min-width: 280px; /* Prevents columns from getting too squished */
}

.column-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #19224d;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.5rem;
}

.status-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.status-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
}

.item-icon {
    flex-shrink: 0;
    margin-right: 1rem;
}

.item-icon img,
.item-icon .fallback-site-logo {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: block;
    object-fit: contain;
}

.item-info {
    flex-grow: 1;
}

.item-title {
    display: block;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    word-wrap: break-word; /* For older browsers */
    overflow-wrap: break-word; /* For modern browsers */
}

.item-time {
    font-size: 0.85rem;
    color: #6c757d;
}

.item-status {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* This will push the dot to the right */
    min-width: 20px; /* Give it some space */
}

.status-dot {
    width: 12px; /* Slightly bigger dot */
    height: 12px;
    border-radius: 50%;
}

.item-status.status-up { color: #28a745; }
.item-status.status-up .status-dot { background-color: #28a745; }

.item-status.status-down { color: #dc3545; }
.item-status.status-down .status-dot { background-color: #dc3545; }

.item-status.status-issues { color: #ffc107; }
.item-status.status-issues .status-dot { background-color: #ffc107; }

.no-outages-message {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    color: #6c757d;
}

/*--------------------------------------------------------------
# Website Archive Page
--------------------------------------------------------------*/

.archive-header {
    background-color: #19224d; /* Dark Blue */
    color: #fff;
    padding: 4rem 2rem;
    text-align: center;
    margin-bottom: 3rem;
}

.archive-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.archive-subtitle {
    font-size: 1.2rem;
    color: #a9a9d4; /* Lighter text color */
    max-width: 600px;
    margin: 0 auto;
}

/* --- THE GRID FIX --- */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Re-using the card style from the featured section */
.featured-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    text-decoration: none;
    color: #333;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.card-logo {
    height: 64px;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-logo img {
    max-height: 100%;
    max-width: 150px;
    width: auto;
    height: auto;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #19224d;
    margin: 0 0 1rem 0;
}

.card-sparkline {
    opacity: 0.7;
}
/* --- END OF GRID FIX --- */


/* Pagination Styles */
.pagination-container {
    margin-top: 3rem;
    border-top: 1px solid #e9ecef;
    padding-top: 2rem;
}

.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.nav-links .page-numbers {
    display: inline-block;
    padding: 0.6rem 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    color: #4A67E2;
    background-color: #fff;
    transition: all 0.2s ease;
}

.nav-links .page-numbers:hover {
    background-color: #f0f0f0;
    border-color: #ccc;
}

.nav-links .page-numbers.current {
    background-color: #4A67E2;
    color: #fff;
    border-color: #4A67E2;
    font-weight: 700;
}

/* Responsive for archive grid */
@media (max-width: 992px) {
    .archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .archive-grid {
        grid-template-columns: 1fr;
    }
    .archive-title {
        font-size: 2.2rem;
    }
}

/*--------------------------------------------------------------
# Reviews Section
--------------------------------------------------------------*/
.reviews-section {
    padding: 5rem 2rem;
    background-color: #fff;
}

.reviews-section .section-title,
.reviews-section .section-subtitle {
    text-align: center;
}

/* Review Card */
.review-card {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 2rem;
    height: 100%; /* Important for swiper */
    display: flex;
    flex-direction: column;
}

.review-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.reviewer-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.reviewer-name {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #19224d;
}

.reviewer-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reviewer-rating .stars {
    color: #FFD700; /* Golden */
    font-size: 1.1rem;
}
.reviewer-rating .empty-star {
    color: #ccc;
}

.reviewer-rating .rating-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6c757d;
}

.review-content {
    flex-grow: 1;
    color: #555;
    line-height: 1.6;
}
.review-content p {
    margin: 0;
}

.reviewer-occupation {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 1rem 0;
    font-style: italic;
}

.review-divider {
    border: 0;
    border-top: 1px solid #e0e0e0;
    margin: 1rem 0;
}

.review-aggregate-data {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 600;
    color: #19224d;
}

/* Swiper Slider Styles */
.reviews-slider {
    padding: 1rem 0 3rem 0 !important; /* Space for pagination */
}

.swiper-pagination-bullet {
    background-color: #4A67E2 !important;
}

/* Call to Action Button */
.reviews-section .section-footer {
    text-align: center;
    margin-top: 1rem;
}

.button-write-review {
    display: inline-block;
    background-color: #4A67E2;
    color: #fff;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.3s ease;
}
.button-write-review:hover {
    background-color: #3a50b4;
}

/* Responsive */
@media (max-width: 768px) {
    .button-write-review {
        display: block;
        width: 100%;
    }
}

/*--------------------------------------------------------------
# SINGLE WEBSITE PAGE - UNIFIED & CORRECTED STYLES
--------------------------------------------------------------*/

/* Main Page Structure & Layout */
.single-page-wrapper {
    width: 100%;
}
.single-page-container {
    display: flex;
    gap: 2rem;
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 2rem;
    align-items: flex-start;
}
.main-content-area {
    flex: 1;
    min-width: 0;
}
.sticky-sidebar {
    width: 300px;
    flex-shrink: 0;
}
@media (min-width: 992px) {
    .sticky-sidebar {
        position: sticky;
        top: 40px;
    }
}
@media (max-width: 991px) {
    .single-page-container {
        flex-direction: column;
    }
    .sticky-sidebar {
        width: 100%;
        margin-top: 2rem;
    }
}
/* --- FINAL, "WOW" FACTOR H1 STYLING --- */

.entry-header {
    padding: 3rem 2rem;
    border-radius: 16px;
    margin-bottom: 2.5rem;
    text-align: center;
    border: 1px solid #e9ecef;
    position: relative; /* Needed for the pattern */
    background-color: #f8f9fa;
    
    /* The subtle background pattern */
    background-image: url('../images/header-bg-pattern.png');
    background-repeat: repeat;
    background-size: 400px;
}

.entry-title {
    font-size: 3.2rem; /* Slightly larger for more impact */
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
    position: relative; /* Ensures it's on top of the pattern */
    
    /* The Gradient Text Effect */
    background: linear-gradient(45deg, #4A67E2, #19224d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    
    display: inline-block; /* Necessary for the gradient to apply correctly */
}

.header-status-badge {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    color: #fff;
    margin-left: 1rem;
    vertical-align: middle;
    -webkit-text-fill-color: white; /* Resets the gradient for the badge */
    text-transform: uppercase;
    position: relative;
    top: -5px; /* Aligns it nicely with the main text */
}

.header-status-badge.status-up { background-color: #28a745; }
.header-status-badge.status-down { background-color: #dc3545; }
.header-status-badge.status-issues { background-color: #ffc107; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .entry-header {
        padding: 2.5rem 1.5rem;
    }
    .entry-title {
        font-size: 2.2rem !important;
    }
    .header-status-badge {
        display: block;
        margin-top: 1rem;
        margin-left: 0;
        top: 0;
    }
}
.entry-header .entry-subtext { font-size: 1.1rem; color: #6c757d; margin-bottom: 2rem; line-height: 1.6; }
.entry-content p { font-size: 1rem; line-height: 1.7; color: #333; }
.entry-content strong a { color: #4A67E2; text-decoration: none; font-weight: 700; }
.entry-content strong a:hover { text-decoration: underline; }
.status-text-up { color: #28a745; }
.status-text-down { color: #dc3545; }
.status-text-issues { color: #ffc107; }

/* In-Page Search Bar (FIXED) */
.single-page-search-wrapper { margin: 2.5rem 0; }
.single-page-search-form { display: flex; width: 100%; border: 1px solid #e0e0e0; border-radius: 10px; background-color: #f8f9fa; padding: 0.5rem; overflow: hidden; }
.single-page-search-field { flex-grow: 1; border: none; background: transparent; padding: 0.75rem 1rem; font-size: 1rem; font-family: 'Manrope', sans-serif; color: #333; min-width: 0; }
.single-page-search-field:focus { outline: none; }
.single-page-search-submit { background-color: #fff; color: #4A67E2; border: 1px solid #e0e0e0; padding: 0 1.5rem; border-radius: 8px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; }
.single-page-search-submit:hover { background-color: #4A67E2; color: #fff; border-color: #4A67E2; }
@media (max-width: 576px) {
    .single-page-search-form { flex-direction: column; gap: 0.5rem; background-color: transparent; border: none; padding: 0; }
    .single-page-search-field { background-color: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 10px; }
    .single-page-search-submit { padding: 0.9rem 1.5rem; width: 100%; }
}

/* Infobox Cards */
.infobox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 2.5rem 0; }
.infobox-card { background-color: #fff; border: 1px solid #e9ecef; border-radius: 12px; padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.location-info { display: flex; flex-direction: column; gap: 0.5rem; }
.location-name { font-weight: 700; color: #333; }
.status-badge { font-size: 0.8rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 20px; display: inline-block; color: #fff; text-transform: uppercase; }
.status-badge.status-online { background-color: #28a745; }
.status-badge.status-offline { background-color: #dc3545; }
.response-info { text-align: right; }
.response-time { display: block; font-size: 1.2rem; font-weight: 700; color: #19224d; }
.response-code { display: block; font-size: 0.85rem; color: #6c757d; }
@media (max-width: 768px) { .infobox-grid { grid-template-columns: 1fr; } }

/*--------------------------------------------------------------
# Live Screenshot Section
--------------------------------------------------------------*/
.live-screenshot-section {
    margin: 2.5rem 0;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden; /* To keep the image corners rounded */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.live-screenshot-section img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid #e9ecef;
}

.screenshot-caption {
    background-color: #f8f9fa;
    padding: 1rem 1.5rem;
    margin: 0;
    font-size: 0.9rem;
    color: #6c757d;
    text-align: center;
}

.screenshot-caption span {
    display: block;
    font-size: 0.8rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}
/*--------------------------------------------------------------
# Global Responsive Fixes
--------------------------------------------------------------*/
.main-content-inner-wrap {
    /* This is the key: it prevents horizontal overflow */
    overflow-x: hidden;
}

/* On mobile, ensure padding is applied correctly */
@media (max-width: 768px) {
    .single-page-container {
        padding: 0 1rem; /* Adjust padding for smaller screens */
        margin-top: 2rem;
    }
}
/* --- FINAL, PROFESSIONAL FAQ SECTION STYLING --- */

.faq-section {
    margin: 3rem 0;
    padding-top: 3rem;
    border-top: 1px solid #e9ecef;
}

.faq-section-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: #19224d;
    margin-bottom: 2.5rem;
}

.faq-accordion {
    max-width: 800px; /* Center the accordion */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between each FAQ item */
}

.faq-item {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden; /* Ensures the border-radius is respected */
    transition: all 0.3s ease;
}

.faq-item.is-active {
    border-color: #4A67E2;
    box-shadow: 0 5px 15px rgba(74, 103, 226, 0.1);
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    color: #19224d;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question::after {
    content: '+';
    font-size: 1.8rem;
    font-weight: 300;
    color: #4A67E2;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.faq-question.is-active::after {
    content: '−'; /* Minus sign */
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: #f8f9fa; /* A slightly different background for the answer */
}

.faq-answer p {
    padding: 0 1.5rem 1.5rem 1.5rem;
    margin: 0;
    color: #555;
    line-height: 1.7;
    border-top: 1px solid #e9ecef;
    padding-top: 1.5rem;
}

.faq-answer p strong {
    color: #19224d;
}

/*--------------------------------------------------------------
# Comments & Reports Section
--------------------------------------------------------------*/
.comments-and-reports-section {
    margin: 3rem 0;
    padding-top: 3rem;
    border-top: 1px solid #e9ecef;
}

.comment-reply-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: #19224d;
    margin-bottom: 2rem;
}

#commentform {
    background-color: #f8f9fa;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

#commentform p {
    margin-bottom: 1.5rem;
}

#commentform label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

#commentform input[type="text"],
#commentform textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

#commentform input[type="text"]:focus,
#commentform textarea:focus {
    outline: none;
    border-color: #4A67E2;
}

.comment-form-comment {
    position: relative;
}

.chars-remaining {
    position: absolute;
    bottom: -1.2rem;
    right: 0;
    font-size: 0.8rem;
    color: #6c757d;
}

/* Report Issue Checkbox */
.comment-form-report {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comment-form-report label {
    margin: 0;
    font-weight: 400;
}
.comment-form-report input[type="checkbox"] {
    width: 1.2em;
    height: 1.2em;
}

/* CAPTCHA styling */
.comment-form-captcha {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.captcha-image {
    background-color: #e0e0e0;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-family: monospace;
    font-size: 1.2rem;
    letter-spacing: 4px;
    text-decoration: line-through;
    user-select: none;
}

.comment-form-captcha input[type="text"] {
    width: auto;
}

/* Submit Button */
.submit-comment-button {
    background-color: #4A67E2;
    color: #fff;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-comment-button:hover {
    background-color: #3a50b4;
}

/*--------------------------------------------------------------
# Comments List Styling (New Card Design)
--------------------------------------------------------------*/
.comments-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #19224d;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.comment-list,
.comment-list li {
    list-style: none; /* This is the key */
    padding: 0;
}

.comment-list {
     margin-top: 2rem;
}

/* The main container for each comment card */
.comment-body-card {
    display: flex;
    align-items: flex-start; /* Aligns items to the top */
    gap: 1rem;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    min-height: 60px; /* Ensures a consistent minimum height */
}

/* User's avatar on the left */
.comment-avatar .avatar {
    border-radius: 50%;
    width: 48px !important; /* Force size */
    height: 48px !important;
    display: block;
}

/* Middle section with name and comment */
.comment-content-wrap {
    flex-grow: 1; /* Takes up available space */
}

.comment-author-name {
    font-weight: 700;
    font-size: 1.1rem;
}
.comment-author-name a {
    color: #19224d;
    text-decoration: none;
}
.says {
    display: none; /* Hide the default "says" */
}

.comment-text-content p {
    margin: 0.25rem 0 0 0;
    color: #555;
    line-height: 1.5;
    font-size: 0.95rem;
}

/* Right side with date and reply link */
.comment-meta-info {
    flex-shrink: 0; /* Prevents this column from shrinking */
    text-align: right;
    font-size: 0.85rem;
    color: #6c757d;
}

.comment-date {
    margin-bottom: 0.5rem;
}

.comment-reply-link a {
    color: #4A67E2;
    text-decoration: none;
    font-weight: 600;
}
.comment-reply-link a:hover {
    text-decoration: underline;
}

/* Hide the default "Your email will not be published" note */
.comment-notes {
    display: none;
}

@media (max-width: 600px) {
  .comment-body-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .comment-content-wrap {
    width: 100%;
  }

  .comment-meta-info {
    text-align: left;
    width: 100%;
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
  }

  .comment-author-name {
    font-size: 1rem;
  }

  .comment-text-content p {
    font-size: 0.95rem;
    word-break: break-word;
  }
}


/*--------------------------------------------------------------
# Check Another Website Section (FINAL, REBUILT FROM SCRATCH)
--------------------------------------------------------------*/

.caw-section {
    margin: 3rem 0;
    padding-top: 3rem;
    border-top: 1px solid #e9ecef;
}

.caw-section-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: #19224d;
    margin-bottom: 3rem;
}

.caw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.caw-card {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.caw-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border-color: #ddd;
}

/* --- FIX FOR LOGO SIZING --- */
.caw-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-right: 1rem;
}
/* This rule targets BOTH the real logo and the fallback favicon */
.caw-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Prevents stretching */
    border-radius: 6px;
}

/* --- FIX FOR CARD HEIGHT --- */
.caw-card-info {
    flex-grow: 1;
    min-width: 0; /* Allows text to wrap */
}

.caw-card-title {
    display: block;
    font-weight: 700;
    color: #333;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Prevents long titles from breaking layout */
}

.caw-card-time {
    display: block;
    font-size: 0.85rem;
    color: #6c757d;
}

/* --- FIX FOR STATUS DOTS --- */
.caw-card-status {
    flex-shrink: 0;
    margin-left: 1rem;
}

.caw-status-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.caw-status-dot.status-up { background-color: #28a745; }
.caw-status-dot.status-down { background-color: #dc3545; }
.caw-status-dot.status-issues { background-color: #ffc107; }

/* Responsive Grid */
@media (max-width: 991px) {
    .caw-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .caw-grid {
        grid-template-columns: 1fr;
    }
}

/* Sidebar Widgets (FIXED & REDESIGNED) */
.sidebar-widget { margin-bottom: 1.5rem; background-color: #fff; padding: 1.25rem; border-radius: 12px; border: 1px solid #e9ecef; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.widget-title { margin-top: 0; font-size: 1rem; color: #19224d; border-bottom: 1px solid #e0e0e0; padding-bottom: 0.75rem; margin-bottom: 1rem; font-weight: 700; }
#rating-widget.is-loading { opacity: 0.5; pointer-events: none; }
.stars { font-size: 1.8rem; color: #e0e0e0; text-align: center; margin-bottom: 0.75rem; }
.star-item { display: inline-block; transition: color 0.2s ease, transform 0.2s ease; cursor: pointer; }
#rating-widget:not(.has-voted) .star-item:hover { transform: scale(1.15); }
#rating-widget:not(.has-voted) .stars:hover .star-item { color: #ffc107; }
#rating-widget:not(.has-voted) .stars .star-item:hover ~ .star-item { color: #e0e0e0; }
#rating-widget.has-voted .stars { cursor: default; }
#rating-widget.has-voted .star-item.is-active { color: #ffc107; }
.rating-summary { text-align: center; font-size: 0.9rem; color: #6c757d; }
.rating-summary .avg-rating { font-weight: 700; }
.sidebar-website-list { display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-website-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem; border-radius: 8px; text-decoration: none; background-color: #f8f9fa; border: 1px solid transparent; transition: all 0.2s ease; }
.sidebar-website-item:hover { transform: translateY(-2px); box-shadow: 0 3px 6px rgba(0,0,0,0.06); border-color: #e0e0e0; background-color: #fff; }
.sidebar-website-item .item-icon img, .sidebar-website-item .item-icon .fallback-icon { width: 24px; height: 24px; border-radius: 4px; display: block; }
.sidebar-website-item .item-title { flex-grow: 1; color: #333; font-weight: 500; font-size: 0.9rem; }
.sidebar-website-item .sidebar-status-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; }
.sidebar-status-dot.status-up { background-color: #28a745; }
.sidebar-status-dot.status-down { background-color: #dc3545; }
.sidebar-status-dot.status-issues { background-color: #ffc107; }

/* --- Start of Replacement --- */
/* Rating Widget Specifics */
#rating-widget.is-loading {
    opacity: 0.5;
    pointer-events: none;
}
.stars {
    font-size: 1.8rem;
    color: #e0e0e0;
    text-align: center;
    margin-bottom: 0.75rem;
}
.star-item {
    display: inline-block;
    transition: color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

/* Hover effect ONLY if not voted */
#rating-widget:not(.has-voted) .star-item:hover {
    transform: scale(1.15);
}
#rating-widget:not(.has-voted) .stars:hover .star-item {
    color: #ffc107;
}
#rating-widget:not(.has-voted) .stars .star-item:hover ~ .star-item {
    color: #e0e0e0;
}

/* Final state after voting */
#rating-widget.has-voted .stars {
    cursor: default;
}
#rating-widget.has-voted .star-item.is-active {
    color: #ffc107;
}

.rating-summary {
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d;
}
.rating-summary .avg-rating {
    font-weight: 700;
}

/*--------------------------------------------------------------
# Graph / Chart Section (Professional Card Layout)
--------------------------------------------------------------*/

.graph-container {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 16px; /* More pronounced radius */
    padding: 2rem;
    margin: 3rem 0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); /* Professional shadow */
}

.graph-container .section-title {
    text-align: left; /* Align title to the left */
    font-size: 1.5rem; /* A more appropriate size for a card title */
    font-weight: 700;
    color: #19224d;
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.chart-wrapper {
    position: relative;
    height: 350px; /* Increased height for a better look */
}

/* Responsive adjustments for the chart */
@media (max-w-width: 768px) {
    .graph-container {
        padding: 1.5rem;
    }
    .chart-wrapper {
        height: 250px; /* A more suitable height for mobile */
    }
}
/*--------------------------------------------------------------
# FIX: Fallback Logo Size in "Check Another" Section
--------------------------------------------------------------*/

.check-another-card .card-icon .fallback-logo {
    /* Override the global 100% width from main.css */
    width: 32px;
    height: 32px;
    /* object-fit is already inherited, but we can be explicit */
    object-fit: contain;
}

/*--------------------------------------------------------------
# Live Screenshot & Graph
--------------------------------------------------------------*/
.live-screenshot-section,
.graph-container {
    margin: 3rem 0;
    padding-top: 3rem;
    border-top: 1px solid #e9ecef;
}

.live-screenshot-section img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.screenshot-caption {
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 1rem;
}
.screenshot-caption span {
    margin-left: 0.5rem;
    font-style: italic;
}

.graph-container .section-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: #19224d;
    margin-bottom: 2rem;
}

.chart-wrapper {
    position: relative;
    height: 300px;
}

/*--------------------------------------------------------------
# Custom Comment Card Styles (UPDATED & RESPONSIVE VERSION)
--------------------------------------------------------------*/
.comments-area {
    margin-top: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

.comments-title {
    font-size: 2rem;
    font-weight: 800;
    color: #19224d;
    margin-bottom: 2rem;
    text-align: center;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* reduced gap for compactness */
}

.comment-list li .comment-body {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 0.75rem 1rem; /* reduced padding to decrease card height */
    position: relative;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}
.comment-list li .comment-body:hover {
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
}

.comment-list .children {
    list-style: none;
    padding-left: 1.5rem;
    margin-top: 1rem;
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem; /* reduced for height */
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.comment-author .avatar {
    border-radius: 50%;
    width: 36px;
    height: 36px;
}

.comment-author .fn {
    font-weight: 700;
    font-style: normal;
    color: #19224d;
    font-size: 0.95rem;
}

.comment-author .fn a {
    text-decoration: none !important;
    color: #19224d; /* ya apna desired color */
}

.comment-author .fn a:hover {
    text-decoration: none !important;
}


.comment-metadata {
    text-align: right;
    font-size: 0.8rem;
}

.comment-metadata a {
    color: #4A67E2;
    text-decoration: none;
}

.issue-reported-flag {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.15rem;
    color: #e8a600;
    font-weight: 600;
    font-size: 0.85rem;
}

.warning-icon {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    line-height: 0.9em;
    text-align: center;
    border-radius: 50%;
    background-color: #e8a600;
    color: #fff;
    font-weight: bold;
    font-size: 0.75em;
}

.comment-content {
    padding-left: calc(36px + 0.75rem);
    font-size: 0.95rem;
}

.comment-content p {
    margin: 0;
    color: #333;
    line-height: 1.4; /* reduced line-height */
}

.reply {
    padding-left: calc(36px + 0.75rem);
    margin-top: 0.5rem;
}

.comment-reply-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: #4A67E2;
    text-decoration: none;
}

.comment-list li {
    border-bottom: none;
    padding: 0;
}

/* ------------------------------
   Mobile Responsiveness
------------------------------ */
@media (max-width: 600px) {
    .comment-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .comment-author .avatar {
        width: 32px;
        height: 32px;
    }

    .comment-content, .reply {
        padding-left: 1.5rem;
    }

    .comments-title {
        font-size: 1.5rem;
    }
}

/*--------------------------------------------------------------
# Footer Styles
--------------------------------------------------------------*/
.site-footer {
    background-color: #19224d; /* Dark Blue, same as header */
    color: #a9a9d4; /* Light, muted text color */
    font-size: 0.9rem;
}

.footer-widgets-wrapper {
    padding: 4rem 2rem;
}

.footer-widgets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.footer-widget .custom-logo {
    max-width: 150px;
    margin-bottom: 1rem;
}

.footer-description {
    line-height: 1.7;
    padding-right: 2rem; /* Give some space on the right */
}

.footer-widget .widget-title {
    color: #ffffff !important; /* Use white color and ensure it's not overridden */
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 0.8rem;
}

.footer-menu a {
    color: #a9a9d4;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-menu a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Site Info / Copyright Bar */
.site-info {
    background-color: rgba(0, 0, 0, 0.2); /* Slightly darker shade */
    padding: 1.5rem 2rem;
}

.site-info-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright-text {
    color: #a9a9d4;
}

.footer-social-links {
    display: flex;
    align-items: center;
    gap: 1.2rem; /* Icons ke beech mein space */
}

.footer-social-links a {
    color: #a9a9d4;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block; /* Ensures transform works */
}

.footer-social-links a:hover {
    color: #ffffff;
    transform: translateY(-2px); /* Hover par halka sa upar uthega */
}

/* SVG icon ka size control karne ke liye */
.footer-social-links a svg {
    width: 22px;
    height: 22px;
}

/* Responsive */
@media (max-width: 992px) {
    .footer-widgets-grid {
        grid-template-columns: 1fr 1fr;
    }
    .footer-description {
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .footer-widgets-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-widget .custom-logo {
        margin-left: auto;
        margin-right: auto;
    }
    .site-info-content {
        flex-direction: column;
        gap: 1rem;
    }
}
/*--------------------------------------------------------------
# Recently Checked Websites Section (REBUILT)
--------------------------------------------------------------*/
.recent-checks-section {
    padding: 5rem 2rem;
    background-color: #f8f9fa; /* Light grey background */
}

.recent-checks-section .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: #19224d;
    margin-bottom: 0.5rem;
}

.recent-checks-section .section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #6c757d;
    margin-bottom: 3rem;
}

.recent-checks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    gap: 1.5rem;
}

.recent-check-card {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.recent-check-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.recent-check-card .card-icon {
    flex-shrink: 0;
    margin-right: 1rem;
}

.recent-check-card .card-icon img,
.recent-check-card .card-icon .fallback-site-logo {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: block;
    object-fit: contain;
}

.recent-check-card .card-title {
    font-weight: 600;
    color: #333;
    flex-grow: 1; /* Allows title to take up available space */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.card-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 1rem;
}

.card-status-dot.status-up { background-color: #28a745; }
.card-status-dot.status-down { background-color: #dc3545; }
.card-status-dot.status-issues { background-color: #ffc107; }

/* Responsive Grid */
@media (max-width: 992px) {
    .recent-checks-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .recent-checks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .recent-checks-grid {
        grid-template-columns: 1fr;
    }
}

/* --- FIX for Infobox Badge Colors --- */

/* Green for 'Online' and 'up' */
.status-badge.status-online,
.status-badge.status-up {
    background-color: #28a745;
    color: #fff;
}

/* Red for 'Offline' and 'down' */
.status-badge.status-offline,
.status-badge.status-down {
    background-color: #dc3545;
    color: #fff;
}

/* Yellow for 'Issues' */
.status-badge.status-issues {
    background-color: #ffc107;
    color: #212529; /* Dark text for better readability on yellow */
}

/* Text color for the dynamic paragraph */
.status-text-up { color: #28a745; }
.status-text-down { color: #dc3545; }
.status-text-issues { color: #ffc107; }

/* --- Live Uptime Dashboard Styles --- */
.metric-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin: 2.5rem 0;
}
.metric-card {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}
.metric-label {
    display: block;
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}
.metric-value {
    font-size: 2rem;
    font-weight: 800;
    color: #19224d;
    line-height: 1.2;
}
.metric-value.status-up { color: #28a745; }
.metric-value.status-down { color: #dc3545; }
.metric-value.status-issues { color: #ffc107; }

.graph-container {
    margin: 3rem 0;
}
.graph-container .section-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: #19224d;
    margin-bottom: 2rem;
}
.chart-wrapper {
    position: relative;
    height: 350px;
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 1rem;
}

/* --- Live Uptime Dashboard Styles --- */
.smart-paragraph {
    background-color: #f8f9fa;
    border-left: 4px solid #4A67E2;
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 0 8px 8px 0;
    font-size: 1.1rem;
    line-height: 1.7;
}
.metric-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.metric-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}
.metric-label {
    display: block; font-size: 0.9rem; color: #6c757d; margin-bottom: 0.5rem;
}
.metric-value {
    font-size: 2rem; font-weight: 800; color: #19224d; line-height: 1.2;
}
.metric-value.status-up { color: #28a745; }
.metric-value.status-down { color: #dc3545; }
.metric-value.status-issues { color: #ffc107; }

.performance-snapshot-wrapper {
    display: flex; flex-wrap: wrap; gap: 2rem; margin: 2.5rem 0;
}
.performance-map-container {
    flex: 2; min-width: 300px; height: 350px; border-radius: 12px; overflow: hidden;
}
#performance-map {
    width: 100%; height: 100%; background-color: #eef2f5;
}
.performance-cards-container {
    flex: 3; min-width: 300px;
}
.snapshot-title {
    font-size: 1.5rem; font-weight: 700; color: #19224d; margin-top: 0; margin-bottom: 1rem;
}
.chart-wrapper {
    position: relative; height: 300px;
}

/* --- Global Performance Snapshot Styles (FINAL, GUARANTEED FIX) --- */
.performance-snapshot-wrapper {
    display: flex; flex-wrap: wrap; gap: 2rem; margin: 2.5rem 0;
}
.performance-map-container {
    flex: 2; min-width: 300px; height: 350px; border-radius: 12px; overflow: hidden;
    border: 1px solid #e9ecef;
}
#performance-map {
    width: 100%; height: 100%; background-color: #eef2f5;
}
.performance-cards-container {
    flex: 3; min-width: 300px;
}
.snapshot-title {
    font-size: 1.5rem; font-weight: 700; color: #19224d; margin-top: 0; margin-bottom: 1rem;
}
.chart-wrapper {
    position: relative; height: 300px;
}

/* --- Global Performance Snapshot Styles (FINAL, STABLE VERSION) --- */
.performance-snapshot-wrapper {
    display: flex; flex-wrap: wrap; gap: 2rem; margin: 2.5rem 0;
}
.performance-map-container {
    flex: 2; min-width: 300px; height: 350px; border-radius: 12px; overflow: hidden;
    border: 1px solid #e9ecef;
}
#performance-map {
    width: 100%; height: 100%; background-color: #eef2f5;
}
.performance-cards-container {
    flex: 3; min-width: 300px;
}
.snapshot-title {
    font-size: 1.5rem; font-weight: 700; color: #19224d; margin-top: 0; margin-bottom: 1rem;
}
.chart-wrapper {
    position: relative; height: 300px;
}

/* --- Leaflet Tooltip Styling (FINAL, GUARANTEED FIX) --- */
.leaflet-tooltip {
    background: #19224d !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4) !important;
    padding: 10px 15px !important;
    /* This allows the box to grow with the text */
    white-space: normal !important; 
    min-width: 150px; /* Set a minimum width */
    z-index: 9999 !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}
.leaflet-tooltip strong {
    font-weight: 700;
}
.leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before, .leaflet-tooltip-right:before {
    border: none !important;
}

/* --- Professional Incident History Section Styles --- */
.incident-history-section {
    margin: 3rem 0;
}
.incident-history-section .section-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: #19224d;
    margin-bottom: 0.5rem;
}
.incident-history-section .section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #6c757d;
    max-width: 700px;
    margin: 0 auto 2.5rem auto;
}

.incident-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.incident-card {
    display: flex;
    align-items: flex-start;
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    border-left: 5px solid #ccc; /* Default border color */
}

.incident-card.status-up { border-left-color: #28a745; }
.incident-card.status-down { border-left-color: #dc3545; }
.incident-card.status-issues { border-left-color: #ffc107; }

.incident-icon {
    font-size: 1.5rem;
    margin-right: 1.5rem;
    margin-top: 2px;
}

.incident-details {
    flex-grow: 1;
}

.incident-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #19224d;
}

.incident-time {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
}

/* --- Improved Live Screenshot Section Styles --- */
.live-screenshot-section .section-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: #19224d;
    margin-bottom: 0.5rem;
}

.live-screenshot-section .section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #6c757d;
    max-width: 700px;
    margin: 0 auto 2rem auto;
}

.screenshot-image-wrapper {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.live-screenshot-section img {
    width: 100%;
    height: auto;
    display: block; /* Removes bottom space under the image */
}

.screenshot-caption {
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 1rem;
    font-style: italic;
}

/* --- FINAL, GUARANTEED FIX for Map Tooltip --- */

.leaflet-tooltip {
    background-color: #19224d !important; /* Dark blue background */
    color: #ffffff !important; /* White text */
    border: 1px solid #3a50b4 !important; /* Lighter blue border */
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    padding: 10px 15px !important; /* Proper padding */
    
    /* This ensures the tooltip appears above all other elements */
    z-index: 9999 !important; 
    
    /* This prevents the text from breaking out of the box */
    white-space: nowrap; 
}

.leaflet-tooltip strong {
    font-weight: 700;
}

/* This removes the default transparent arrow which was causing issues */
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
    border: none !important;
}

/*--------------------------------------------------------------
# Responsive Typography (FINAL, FORCEFUL FIX)
--------------------------------------------------------------*/

@media (max-width: 768px) {

    /* --- Homepage Hero H1 --- */
    .hero-headline {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }

    /* --- Main H1 on Single/Archive Pages --- */
    .entry-header .entry-title,
    .archive-title {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }

    /* --- All Section Headings (H2) --- */
    /* Covers: "Recently Checked", "User Reviews", "Live Screenshot", "Incidents", "FAQs", "Check Another" */
    .section-title {
        font-size: 1.7rem !important;
        line-height: 1.3 !important;
    }

    /* --- Column Headings --- */
    .column-title {
        font-size: 1.3rem !important;
    }

    /* --- Sub-Headings (H3) --- */
    .card-title,
    .incident-title {
        font-size: 1.1rem !important;
    }

    /* --- Widget/Column Headings (H4) --- */
    .widget-title {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 480px) {
    .hero-headline {
        font-size: 2rem !important;
    }
    .entry-header .entry-title,
    .archive-title {
        font-size: 1.7rem !important;
    }
    .section-title {
        font-size: 1.5rem !important;
    }
}
/* --- FINAL DASHBOARD STYLES --- */

/* Metric Cards */
.metric-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; margin: 2.5rem 0; }
.metric-card { background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px; padding: 1.5rem; text-align: center; }
.metric-label { display: block; font-size: 0.9rem; color: #6c757d; margin-bottom: 0.5rem; }
.metric-value { font-size: 2rem; font-weight: 800; color: #19224d; line-height: 1.2; }
.metric-value.status-up { color: #28a745; }
.metric-value.status-down { color: #dc3545; }
.metric-value.status-issues { color: #ffc107; }

/* Performance Snapshot (Map + Graph) */
.performance-snapshot-wrapper { display: flex; flex-wrap: wrap; gap: 2rem; margin: 2.5rem 0; }
.performance-map-container { flex: 2; min-width: 300px; height: 350px; border-radius: 12px; overflow: hidden; border: 1px solid #e9ecef; }
#performance-map { width: 100%; height: 100%; background-color: #eef2f5; }
.performance-cards-container { flex: 3; min-width: 300px; }
.snapshot-title { font-size: 1.5rem; font-weight: 700; color: #19224d; margin-top: 0; margin-bottom: 1rem; }
.chart-wrapper { position: relative; height: 300px; }

/* Smart Paragraph */
.smart-paragraph { background-color: #f8f9fa; border-left: 4px solid #4A67E2; padding: 1.5rem; margin: 2.5rem 0; border-radius: 0 8px 8px 0; font-size: 1.1rem; line-height: 1.7; }

/* --- Professional Detailed Report Section (FINAL) --- */
.detailed-report-section {
    display: grid; /* Use grid for better alignment */
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2.5rem 0;
    padding-top: 2.5rem;
    border-top: 1px solid #e9ecef;
}
.detailed-report-column {
    min-width: 0; /* Prevents overflow */
}
.report-card-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.report-card-detailed {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s ease;
}
.report-card-detailed:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
}

.report-card-detailed .card-icon {
    font-size: 1.8rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.report-card-detailed .card-info {
    flex-grow: 1;
}

.report-card-detailed .card-title {
    font-weight: 700;
    color: #19224d;
    display: block;
}

.report-card-detailed .card-detail {
    font-size: 0.85rem;
    color: #6c757d;
}

.report-card-detailed .card-value {
    font-weight: 700;
    font-size: 1rem;
    margin-left: 1rem;
    flex-shrink: 0;
    text-align: right;
    color: #19224d; /* Default dark blue color */
}

.report-card-detailed .status-ok,
.report-card-detailed .card-value.status-ok {
    color: #28a745;
}
.report-card-detailed .status-error,
.report-card-detailed .card-value.status-error {
    color: #dc3545;
}
.report-card-detailed .status-warning,
.report-card-detailed .card-value.status-warning {
    color: #ffc107;
}

/* Responsive */
@media (max-width: 992px) {
    .detailed-report-section {
        grid-template-columns: 1fr; /* Stack columns on tablets and mobile */
    }
}
.live-screenshot-section, .incident-history-section { margin: 3rem 0; }

/* --- FIX for MS (Response Time) Color --- */

.report-card-detailed .card-value.ms-fast {
    color: #28a745; /* Green for fast response */
}

.report-card-detailed .card-value.ms-avg {
    color: #ffc107; /* Yellow for average response */
}

.report-card-detailed .card-value.ms-slow {
    color: #dc3545; /* Red for slow response */
}

/* --- Search Validation Error Styles --- */
.search-error-message {
    color: #dc3545;
    font-weight: 500;
    margin-top: 0.75rem;
    text-align: center;
}
.hero-search-form-wrapper .search-error-message {
    color: #ffbaba; /* Lighter red for dark background */
}
.shake {
    animation: shake 0.5s;
}
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* --- FINAL, GUARANTEED STAR RATING WIDGET --- */
.sidebar-widget {
    text-align: center; /* Center all content inside the widget */
}
.widget-divider {
    border: none;
    border-top: 1px solid #e9ecef;
    margin: 1rem 0;
}
.star-rating-system {
    margin-top: 1rem;
}
.star-rating-input {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.star-rating-input .star {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.star-rating-input .star svg {
    width: 32px;
    height: 32px;
    fill: #e0e0e0; /* Default grey color */
    transition: all 0.2s ease;
}

/* Hover and Selected States */
.star-rating-input:not(.is-rated) .star:hover svg,
.star-rating-input:not(.is-rated) .star.hover svg {
    fill: #ffc107; /* Yellow on hover */
    transform: scale(1.1);
}
.star-rating-input.is-rated .star.selected svg {
    fill: #ffc107; /* Solid yellow for selected */
}

/* Lock the rating after submission */
.star-rating-input.is-rated {
    cursor: default;
}
.star-rating-input.is-rated .star {
    cursor: default;
}

.rating-summary { 
    color: #6c757d; 
    font-size: 0.9rem;
}
.rating-response-message { 
    font-weight: 500; 
    margin-top: 1rem; 
    min-height: 1.2em; 
}

/* --- FINAL, PROFESSIONAL GRAPH LOADER --- */
.chart-wrapper {
    position: relative;
    height: 350px;
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 1rem;
}
.chart-wrapper.is-loading #uptimeChart {
    visibility: hidden; /* Hide the canvas while loading */
}
.chart-wrapper .chart-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px; /* Bigger size */
    height: 60px;
    margin: -30px 0 0 -30px;
    border: 6px solid #eef2f5; /* Light grey background circle */
    border-top: 6px solid #4A67E2; /* Blue progress color */
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.chart-wrapper:not(.is-loading) .chart-loader {
    opacity: 0; /* Fade out the loader */
    visibility: hidden;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.no-graph-data {
    text-align: center;
    color: #6c757d;
    padding: 4rem 2rem;
}