/* static/css/style.css */

/* --- START: Added/Modified styles for Analytics Detail Block --- */
section.analytics-detail-block { /* Increased specificity */
    background-color: #e6fffa !important; /* Light green background */
    border-radius: 8px;
    padding: 30px 40px;
    overflow: hidden;        /* Contains the floated element */
    margin-bottom: 30px;
}
.analytics-detail-block .analytics-image-container {
    float: right;
    width: 30%;
    max-width: 250px;
    margin-left: 30px;
    margin-bottom: 15px;
    margin-top: 5px;
}
.analytics-detail-block .analytics-image-container img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.analytics-detail-block p { color: #333; }
.space-y-4 > * + * { margin-top: 1rem; }
@media (max-width: 768px) {
    .analytics-detail-block { padding: 20px 15px; }
    .analytics-detail-block .analytics-image-container {
        float: none; width: 80%; max-width: 300px;
        margin: 0 auto 20px auto; display: block; }
     .analytics-detail-block .analytics-image-container img { display: block; margin: 0 auto; }
}
/* --- END: Added/Modified styles for Analytics Detail Block --- */

/* --- START: Added styles for Recommendations Detail Block --- */
section.recommendations-detail-block { /* Use specific class */
    background-color: #fce7f3; /* Medium pinkish background */
    border-radius: 8px;
    padding: 30px 40px;
    overflow: hidden;        /* Contains the floated element */
    margin-bottom: 30px;
    /* Inherits max-width and margin:auto from .content-section */
}
.recommendations-detail-block .recommendations-image-container {
    float: left;             /* Float the image container to the LEFT */
    width: 30%;              /* Adjust width */
    max-width: 250px;        /* Optional max width */
    margin-right: 30px;       /* Space between image and text */
    margin-bottom: 15px;     /* Space below image if text wraps */
    margin-top: 5px;         /* Small space above image */
}
.recommendations-detail-block .recommendations-image-container img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.recommendations-detail-block p { color: #333; }
/* Responsive adjustments for the recommendations block */
@media (max-width: 768px) {
    .recommendations-detail-block { padding: 20px 15px; }
    .recommendations-detail-block .recommendations-image-container {
        float: none;          /* Stop floating */
        width: 80%;
        max-width: 300px;
        margin: 0 auto 20px auto; /* Center block and add space below */
        display: block;
    }
     .recommendations-detail-block .recommendations-image-container img {
         display: block;
         margin: 0 auto; /* Center image */
     }
}
/* --- END: Added styles for Recommendations Detail Block --- */

/* Responsive adjustments for the floated block */
@media (max-width: 768px) {
    .analytics-detail-block {
        padding: 20px 15px; /* Reduce padding on smaller screens */
    }

    .analytics-detail-block .analytics-image-container {
        float: none;          /* Stop floating */
        width: 80%;           /* Allow image to take more width */
        max-width: 300px;     /* Adjust max-width */
        margin: 0 auto 20px auto; /* Center the image block and add space below */
        display: block;
    }
     .analytics-detail-block .analytics-image-container img {
         display: block;
         margin: 0 auto; /* Center image within its container */
     }
}
/* --- END: Added/Modified styles --- */


/* --- Your existing CSS rules below --- */

/* Basic Reset and Body Styling */
body { margin: 0; padding: 0; font-family: sans-serif; background-color: #f4f4f4; color: #333; line-height: 1.6; }
html { scroll-padding-top: 60px; }

/* Header Styling */
.site-header { position: fixed; top: 0; left: 0; width: 100%; height: 60px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; align-items: center; padding: 0 5%; box-sizing: border-box; z-index: 1000; }
.site-title { font-size: 1.5em; font-weight: bold; margin-right: 30px; }
.site-title a { text-decoration: none; color: #004d00; }
.site-nav ul { list-style: none; padding: 0; margin: 0; display: flex; }
.site-nav li { margin-right: 20px; }
.site-nav a { text-decoration: none; color: #333; font-weight: normal; transition: color 0.3s ease; }
.site-nav a:hover { color: #007b00; }
.auth-buttons { margin-left: auto; }
.auth-buttons button { margin-left: 10px; padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; transition: background-color 0.3s ease; }
.btn-signin { background-color: #eee; color: #333; }
.btn-register { background-color: #007b00; color: white; }
.auth-buttons button:hover { opacity: 0.9; }

/* Main Content Styling */
main { padding-top: 60px; padding-left: 0; padding-right: 0; }
.content-section { max-width: 90%; margin: 0 auto 20px auto; padding: 60px 20px; background-color: #fff; border-bottom: 1px solid #ddd; box-sizing: border-box; }
.content-section h1 { text-align: center; margin-bottom: 40px; color: #004d00; }
.content-section h2 { text-align: center; margin-bottom: 40px; color: #004d00; }

/* 3-Column Layout */
.three-column-layout { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; padding: 0; }
.three-column-layout .column { flex: 1; min-width: 250px; text-align: center; padding: 20px; background-color: #f9f9f9; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* Centered Text Block */
.centered-text-block { width: 100%; margin: 0 auto; text-align: center; padding: 0; box-sizing: border-box; }

/* Alternating Image/Text Sections */
.alternating-section { max-width: 90%; margin: 0 auto 30px auto; display: flex; align-items: center; gap: 40px; padding: 40px 20px; background-color: #fff; border-bottom: 1px solid #ddd; flex-wrap: wrap; justify-content: center; box-sizing: border-box; }
.section-image { flex: 0 0 20%; max-width: 20%; min-width: 150px; text-align: center; box-sizing: border-box; order: 1; }
.section-image img { display: block; max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); object-fit: cover; }
.section-text { flex: 1 0 75%; min-width: 300px; box-sizing: border-box; order: 2; }
.alternating-section:nth-child(even) .section-image { order: 2; }
.alternating-section:nth-child(even) .section-text { order: 1; }

/* Hero Section */
.hero-section { position: relative; width: 100%; height: 500px; overflow: hidden; display: flex; justify-content: center; align-items: center; color: white; text-align: center; }
.hero-section img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero-text { position: relative; z-index: 2; background: rgba(0, 0, 0, 0.5); padding: 20px; border-radius: 10px; max-width: 80%; }
.hero-text h1 { margin-top: 0; font-size: 3em; margin-bottom: 10px; }
.hero-text p { font-size: 1.2em; }

/* Footer Styling */
.site-footer { background-color: #333; color: #fff; padding: 20px 5%; text-align: center; width: 100%; box-sizing: border-box; }
.footer-links ul { list-style: none; padding: 0; margin: 0 0 15px 0; display: flex; justify-content: center; flex-wrap: wrap; }
.footer-links li { margin: 0 15px 10px 15px; }
.footer-links a { text-decoration: none; color: #bbb; transition: color 0.3s ease; }
.footer-links a:hover { color: #fff; }
.footer-text { font-size: 0.9em; color: #888; }

/* Pricing Table Styling */
.pricing-table { width: 50%; margin: 40px auto; border-collapse: collapse; box-shadow: 0 2px 8px rgba(0,0,0,0.1); background-color: #fff; font-size: 1em; table-layout: fixed; }
.pricing-table th, .pricing-table td { padding: 15px 10px; border: 1px solid #ddd; text-align: left; word-wrap: break-word; }
.pricing-table thead th { background-color: #d3d3d3; font-weight: bold; text-align: center; }
.pricing-table thead th:first-child { width: 50%; text-align: left; }
.pricing-table thead th:nth-child(2), .pricing-table thead th:nth-child(3) { width: 25%; }
.pricing-table .category-header td { background-color: #eee; font-weight: bold; text-align: left; padding: 15px 10px; border-bottom: 2px solid #ddd; border-top: 2px solid #ddd; }
.pricing-table tbody tr:not(.category-header) td:nth-child(2), .pricing-table tbody tr:not(.category-header) td:nth-child(3) { text-align: center; }
.pricing-table tbody tr:not(.category-header) td:nth-child(2):not(:empty), .pricing-table tbody tr:not(.category-header) td:nth-child(3):not(:empty) { color: #007b00; font-weight: bold; }
.pricing-table .price-row td { font-weight: bold; background-color: #f9f9f9; border-top: 2px solid #ddd; padding: 20px 10px; }
.pricing-table .button-row td { padding: 20px 10px; }
.btn-pricing { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; font-weight: bold; transition: background-color 0.3s ease; width: 100%; max-width: 150px; display: inline-block; text-align: center; }
.btn-pricing.basic { background-color: #ddd; color: #333; }
.btn-pricing.premium { background-color: #007b00; color: white; }
.btn-pricing:hover { opacity: 0.9; }


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    /* Header */
     .site-header { flex-direction: column; height: auto; padding: 10px 5%; }
     .site-title { margin-bottom: 10px; }
     .site-nav ul { flex-direction: column; align-items: center; }
     .site-nav li { margin: 5px 0; }
     .auth-buttons { margin-left: 0; margin-top: 10px; width: 100%; display: flex; justify-content: center; }
     .auth-buttons button { flex: 1; margin: 0 5px; }
     /* Main Content */
     main { padding-top: 150px; padding-left: 0; padding-right: 0; } /* Adjust padding-top based on actual collapsed header height */
     .content-section { max-width: 100%; padding: 30px 10px; margin-left: 0; margin-right: 0; }
     /* Layouts */
     .three-column-layout { flex-direction: column; gap: 10px; padding: 0 10px; }
     .three-column-layout .column { min-width: 95%; margin-bottom: 10px; }
     .alternating-section { flex-direction: column; padding: 30px 15px; max-width: 100%; margin-left: 0; margin-right: 0; }
     .section-image { order: unset; flex: 0 0 95%; max-width: 95%; min-width: 0; margin-bottom: 20px; }
     .section-text { order: unset; flex: 0 0 95%; min-width: 0; }
     /* Hero */
     .hero-section { height: 300px; width: 100%; left: auto; transform: none; }
     /* Pricing */
     .pricing-table { width: 95%; margin: 20px auto; table-layout: auto; }
     .pricing-table th, .pricing-table td { padding: 10px 5px; font-size: 0.9em; width: auto !important; }
     .pricing-table thead th:first-child, .pricing-table thead th:nth-child(2), .pricing-table thead th:nth-child(3) { width: auto !important; }
     /* Centered Text Block */
     .centered-text-block { width: 100%; padding: 0 10px; box-sizing: border-box; text-align: left; margin: 0; }

     /* Responsive adjustments for the floated analytics block */
     .analytics-detail-block .analytics-image-container {
        float: none;          /* Stop floating */
        width: 80%;           /* Allow image to take more width */
        max-width: 300px;     /* Adjust max-width */
        margin: 0 auto 20px auto; /* Center the image block and add space below */
        display: block;
     }
      .analytics-detail-block .analytics-image-container img {
          display: block;
          margin: 0 auto; /* Center image within its container */
      }
}