/* static/style.css - FOR BOOTSTRAP PAGES ONLY */

/* --- General Body & Font Styles --- */
body {
    background-color: #f8f9fa;
    font-family: 'Outfit', sans-serif;
}

/* Navbar Styles */
#mainNavbar {
    /* <<< CHANGE: Updated the border to be thin and light grey >>> */
    border-bottom: 1px solid #dee2e6;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    z-index: 1030;
}

body.page-always-visible-navbar {
    padding-top: 70px;
}

#mainNavbar.scrolling-navbar {
    position: fixed;
    top: 0; left: 0; right: 0; width: 100%;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}
#mainNavbar.scrolling-navbar.navbar-visible {
    transform: translateY(0);
}

#mainNavbar .navbar-brand { color: #000 !important; font-weight: 700; font-size: 1.5rem; }
#mainNavbar .nav-link { font-size: 0.95rem; color: #333; }
#mainNavbar .nav-link.active { font-weight: 700; color: #000; }


/* --- Video Hero Section Styles (No longer used on homepage, kept for reference) --- */
.hero-video-container {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 500px;
  max-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #ffffff;
}
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 1;
  object-fit: cover;
}
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2;
}
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 2rem;
}

/* --- Filter Controls Styles --- */
.filter-controls-cards {
    display: flex;
    justify-content: center;
    padding: 0 20px;
}
.main-filter-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.filter-controls-wrapper {
    background-color: #ffffff;
    border-radius: 50px;
    padding: 12px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 20px rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 700px;
    width: 100%;
}
.search-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 250px;
}
.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 16px;
    z-index: 10;
}
.filter-controls-wrapper .search-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 16px 12px 45px;
    font-size: 16px;
    color: #374151;
    border-radius: 25px;
}
.search-input::placeholder { color: #9ca3af; }
.filter-select {
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 16px;
    font-size: 16px;
    color: #374151;
    cursor: pointer;
    min-width: 140px;
    border-radius: 20px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}
.filter-select:focus { background-color: #f9fafb; }
.clear-filters-btn {
    background: none; border: none; width: 40px; height: 40px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background-color 0.2s; color: #6b7280;
}
.clear-filters-btn:hover { background-color: #f3f4f6; }
.clear-filters-btn i { font-size: 16px; }
.cta-button {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 24px; height: 76px; min-width: 140px; flex-shrink: 0;
    background-color: #111827; color: #ffffff; border-radius: 50px;
    font-size: 16px; font-weight: 700; text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 0 20px rgba(255, 255, 255, 0.8);
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.cta-button:hover {
    background-color: #374151; transform: scale(1.03); color: #ffffff;
}
#noResultsMessage { color: #6c757d; padding: 2rem; }
@media (max-width: 768px) {
    .filter-controls-wrapper {
        flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px;
    }
    .search-input-wrapper { min-width: unset; width: 100%; }
    .filter-select { width: 100%; min-width: unset; }
    .main-filter-container { flex-direction: column; gap: 16px; align-items: stretch; }
    .cta-button { width: 100%; max-width: 300px; margin: 0 auto; }
}


/* --- Brands Card View Styles (for index.html) --- */
.main-content-area {
    padding-left: 20px;
    padding-right: 20px;
}
.cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: -10px;
    margin-right: -10px;
}
.brand-card {
    background-color: #fff; border: 1px solid #e0e0e0;
    border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    flex: 0 1 300px;
    max-width: 320px;
    margin: 10px;
}
.brand-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.brand-card-image-link { display: block; width: 100%; aspect-ratio: 15 / 13;
                        overflow: hidden; background-color: #f0f0f0; }
.brand-card-image { width: 100%; height: 100%; object-fit: cover; }
.brand-card-content { padding: 15px; display: flex; flex-direction: column; flex-grow: 1; }
.brand-card-name { font-size: 1.3rem; font-weight: 700; color: #333; margin-bottom: 0.5rem; text-decoration: none; }
.brand-card-name:hover { color: #000; }
.brand-card-category { font-size: 0.8rem; color: #757575; background-color: #f0f0f0; padding: 3px 8px; border-radius: 12px; display: inline-block; margin-bottom: 8px; }
.brand-card-description { font-size: 0.9rem; color: #555; line-height: 1.4; margin-bottom: 12px; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: calc(1.4em * 3); }
.brand-card-stats { display: flex; justify-content: space-around; align-items: flex-start; margin-top: auto; padding-top: 12px; border-top: 1px solid #f0f0f0; }
.stat-item { text-align: center; color: #777; display: flex; flex-direction: column; align-items: center; flex: 1; padding: 0 5px; }
.stat-link, .stat-link-nonclickable { display: flex; align-items: center; text-decoration: none; color: #333; margin-bottom: 4px; }
.stat-link:hover, .stat-link:hover .fab, .stat-link:hover .fas { color: #007bff; }
.stat-link .fab, .stat-link .fas, .stat-link-nonclickable .fas { font-size: 1rem; color: #555; margin-right: 5px; line-height: 1; transition: color 0.15s ease-in-out; }
.stat-link strong, .stat-link-nonclickable strong { display: inline-block; font-size: 0.9rem; font-weight: 700; line-height: 1; }
.stat-label { font-size: 0.7rem; color: #888; line-height: 1.2; }
@media (min-width: 1200px) { .brand-card { flex-basis: calc(25% - 20px); max-width: calc(25% - 20px); } }
@media (min-width: 992px) and (max-width: 1199.98px) { .brand-card { flex-basis: calc(33.333% - 20px); max-width: calc(33.333% - 20px); } }
@media (min-width: 768px) and (max-width: 991.98px) { .brand-card { flex-basis: calc(50% - 20px); max-width: calc(50% - 20px); } }
@media (max-width: 767.98px) { .brand-card { flex-basis: calc(50% - 20px); max-width: calc(50% - 20px); } }


/* --- DataTable Styles (for table_view.html) --- */
#brandsDataTable { border-collapse: separate; border-spacing: 0; margin-top: 1rem; box-shadow: 0 2px 5px rgba(0,0,0,.1); border-radius: 0.375rem; overflow: hidden; background-color: #fff; }
#brandsDataTable thead th { background-color: #e9ecef; color: #343a40; font-weight: 600; vertical-align: middle; border-bottom: 2px solid #dee2e6; text-align: left; white-space: nowrap; }
#brandsDataTable thead th.image-header, #brandsDataTable thead th.actions-header { text-align: center; }
#brandsDataTable tbody td { vertical-align: middle; border: none; border-bottom: 1px solid #f1f1f1; padding: 0.65rem 0.75rem; }
#brandsDataTable tbody tr:last-child td { border-bottom: none; }
#brandsDataTable tbody tr:hover { background-color: #f8f9fa; }
#brandsDataTable tbody td a { color: #3D3D3D; text-decoration: none; }
#brandsDataTable tbody td a:hover { color: #000000; text-decoration: underline; }
.brand-image.dt-brand-image { width: 35px; height: 35px; max-height: 35px; vertical-align: middle; border-radius: 0; display: block; margin: 0 auto; object-fit: contain; background-color: #fff; border: 1px solid #eee; }
#brandsDataTable tbody td.image-cell.dt-image-cell { width: 60px; text-align: center; padding: 5px !important; }
#brandsDataTable thead th.image-header { width: 60px; }
.dataTables_wrapper .row:first-child > div { margin-bottom: 1rem; }
.dataTables_wrapper .row:last-child > div { margin-top: 1rem; padding-top: 0.5rem; }
.dataTables_paginate .page-link { color: #353e43; }
.dataTables_paginate .page-item.active .page-link { background-color: #353e43; border-color: #353e43; color: #fff; }
.dataTables_filter { display: none; }
.btn-edit { padding: 0.25rem 0.5rem; font-size: 0.8rem; color: #555; background: none; border: 1px solid #ccc; border-radius: 0.25rem; transition: all 0.2s ease-in-out; }
.btn-edit:hover { color: #000; background-color: #e9ecef; border-color: #aaa; }
#brandsDataTable td.actions-cell.dt-actions-cell { text-align: center; width: 80px; }

/* --- New Homepage Hero Styles --- */
.new-hero-section {
    background-color: #f8f9fa; /* Light background to match the body */
    padding: 5rem 0;
    border-bottom: 1px solid #dee2e6;
}
.hero-text-content .hero-title-playfair {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: #212529; /* Dark text for light background */
}
.hero-text-content .lead {
    font-size: 1.25rem;
    color: #495057;
}
.hero-cta-button {
    padding: 12px 30px;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.2s ease-in-out;
}
.hero-cta-button:hover {
    transform: scale(1.05);
}
.hero-email-mockup {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.mockup-header {
    padding: 10px 15px;
    background-color: #f1f3f5;
    border-bottom: 1px solid #dee2e6;
}
.mockup-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ced4da;
    margin-right: 6px;
}
.mockup-body {
    padding: 20px;
}
.mockup-field {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.9rem;
}
.mockup-label {
    color: #6c757d;
    margin-right: 10px;
}
.mockup-value {
    color: #343a40;
    font-weight: 500;
}
.mockup-textarea {
    width: 100%;
    height: 150px;
    border: none;
    resize: none;
    background-color: transparent;
    font-family: 'Inter', sans-serif; /* Use a more standard UI font */
    font-size: 0.9rem;
    color: #495057;
    padding: 0;
}
.mockup-textarea:focus {
    outline: none;
}
/* --- Styles for Moved Search Section --- */
.search-brands-section {
    padding: 3rem 0;
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
}
.search-title {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: #343a40;
    margin-bottom: 0.5rem;
}
/* Adjust filter controls for the new context */
.filter-controls-cards {
    padding: 0; /* Remove extra padding since the section has it */
}
.filter-controls-wrapper {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* Toned down shadow */
}
/* Responsive adjustments for the new hero */
@media (max-width: 991.98px) {
    .new-hero-section {
        text-align: center;
        padding: 3rem 0;
    }
    .hero-email-mockup {
        margin-top: 3rem;
    }
}
/* --- Typing Animation for Hero Mockup --- */
.mockup-textarea {
    position: relative;
    white-space: pre-wrap; /* Allows the newlines in the text to work */
}
/* The blinking cursor effect */
.mockup-textarea::after {
    content: '|';
    display: inline-block;
    vertical-align: baseline;
    animation: blink 0.7s infinite;
    -webkit-animation: blink 0.7s infinite;
}
/* Keyframes for the blinking cursor */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
@-webkit-keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}