@import url('https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');
@import url('https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css');

/* html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

*/
html {
    position: relative;
    min-height: 100%;
}

/* body {
  margin-bottom: 60px;
}  */


/* Custom styles for the landing page */
.hero-section {
    background-image: url('/images/White_and_Blue_Simple_Prayer_Journal_Book_Cover.png');
    background-size: cover;
    background-position: center;
    position: relative;
}

    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.85);
        z-index: 0;
    }

    .hero-section .container {
        position: relative;
        z-index: 1;
    }

header.sticky-top {
    top: 0;
    z-index: 1000;
}

/* Featured books carousel */
.featured-books-carousel {
    margin: 0 -15px;
}

.featured-book-item {
    margin-bottom: 20px;
}

/* Category icons */
.category-icon {
    transition: transform 0.3s ease;
}

.card:hover .category-icon {
    transform: scale(1.1);
}

#FeaturedBooksSection {
    background-color: antiquewhite;
}

/* Sticky sidebar adjustments */
@media (min-width: 992px) {
    .sticky-top {
        top: 20px;
        z-index: 100;
    }
}

@media (max-width: 580px) {
    .slick-prev.slick-arrow, .slick-next.slick-arrow {
        display: none !important;
    }
}

.navbar.bg-info, .navbar.bg-info .form-control, .navbar.bg-info .btn-light {
    border-color: #9487e9 !important; /* #4F8CFF */
}

    .navbar.bg-info .form-control {
    }

    .navbar.bg-info .dropdown-item:hover, .dropdown-item:focus {
        color: var(--bs-dropdown-link-hover-color);
        background-color: var(--bs-dropdown-link-hover-bg);
    }

/* Ẩn nút xóa mặc định */
.delete-image-btn {
    display: none;
    opacity: 0.8;
    padding: 1px 6px;
}

/* Thu nhỏ icon trash */
.delete-image-icon {
    font-size: 0.8rem;
    vertical-align: middle;
}

.image-thumb:hover .delete-image-btn {
    display: inline-block !important;
}


.upload-drop-area {
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

    .upload-drop-area.dragover {
        border-color: #007bff;
        background: #e3f2fd;
        box-shadow: 0 0 10px #007bff55;
    }

        .upload-drop-area.dragover .upload-icon {
            color: #0056b3;
            text-shadow: 0 0 8px #007bff88;
        }

.progress {
    height: 20px;
}

.progress-bar {
    font-size: 0.9rem;
}

.stop-upload-btn {
    min-width: 120px;
}


.card-body .row.g-2.mb-2 {
    max-height: 450px; /* hoặc giá trị bạn muốn, ví dụ 220px */
    overflow-y: auto;
    margin-bottom: 0.5rem;
}

.image-thumb {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .image-thumb img {
        max-height: 120px;
        width: auto;
        max-width: 100%;
        object-fit: cover;
    }



.card-body {
    min-height: 160px; /* Tùy chỉnh nếu muốn đồng đều chiều cao */
}

.event-title-2line a:hover {
    color: #0d6efd;
    text-decoration: underline;
}

.event-card {
    background: linear-gradient(135deg, #e3f2fd 0%, #fff 100%);
    border: 1px solid #90caf9;
    transition: box-shadow 0.2s, transform 0.2s;
}

    .event-card:hover {
        box-shadow: 0 6px 24px rgba(33,150,243,0.15);
        transform: translateY(-4px) scale(1.02);
        border-color: #1976d2;
    }

.event-card-body {
    border-radius: 0 0 0.5rem 0.5rem;
    background: #fff;
}

.event-title-2line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2em;
}

    .event-title-2line a {
        text-decoration: none;
        transition: color 0.2s;
    }

.event-image-thumb {
    width: 100%;
    aspect-ratio: 1/1;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
}

    .event-image-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.swiper-container-locations {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 8px;
}

.swiper-slide {
    display: inline-block;
    vertical-align: top;
}

.item-location img {
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: box-shadow 0.2s;
}

.item-location:hover img {
    box-shadow: 0 4px 16px rgba(33,150,243,0.15);
}

.progress-bar-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 0.95em;
    pointer-events: none;
    white-space: nowrap;
}

.progress.position-relative {
    position: relative;
}



:root {
    --primary: #4F8CFF;
    --secondary: #A685E2;
    --accent: #FF6F61;
    --yellow: #FFE066;
    --mint: #6EE7B7;
    --bg-light: #F5F6FA;
    --text-dark: #222;
    --text-light: #fff;
}

body {
    background: var(--bg-light);
    color: var(--text-dark);
    font-family: 'Quicksand', 'Segoe UI', Arial, sans-serif;
}

.navbar, .card-header {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    color: var(--text-light);
}

.navbar-brand, .navbar-nav .nav-link {
    color: var(--text-light) !important;
    font-weight: 600;
}

.btn-primary, .btn-success, .btn-info {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border: none;
    color: var(--text-light);
    font-weight: 600;
    border-radius: 24px;
    transition: background 0.3s;
}

    .btn-primary:hover, .btn-success:hover, .btn-info:hover {
        background: linear-gradient(90deg, var(--accent), var(--primary));
        color: var(--text-light);
    }

.card {
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(79,140,255,0.08);
    border: none;
}

.card-header {
    border-radius: 18px 18px 0 0;
}



input.form-control, select.form-select, textarea.form-control {
    border-radius: 12px;
    border: 1px solid var(--primary);
}

.progress-bar {
    font-size: 0.9rem;
    /*background: linear-gradient(90deg, var(--primary), var(--accent));*/
}

footer {
    background: var(--primary);
    color: var(--text-light);
}

    footer a {
        color: var(--primary);
    }

.event-image-thumb, .img-thumbnail {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(79,140,255,0.12);
}

.alert-success {
    background: var(--mint);
    color: var(--text-dark);
    border: none;
}

.alert-danger {
    background: var(--accent);
    color: var(--text-light);
    border: none;
}

::-webkit-scrollbar {
    width: 8px;
    background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 8px;
}

.navbar.navbar-expand-lg {
    background: linear-gradient(90deg, #4F8CFF, #A685E2);
}

    /* Border for navbar (bg-info) */
    .navbar.navbar-expand-lg.bg-info {
        border-bottom: 2px solid #9487e9 !important; /* rgba of --primary */
    }

/* Brand text utility */
.text-brand {
    color: var(--primary) !important;
}

    .text-brand:hover {
        color: var(--accent) !important;
    }

/* Event title link colors (override Bootstrap's text-info) */
.event-title-2line a {
    color: var(--primary) !important;
    text-decoration: none;
    transition: color 0.2s;
}

    .event-title-2line a:hover {
        color: var(--accent);
        text-decoration: underline;
    }

/* New hero alert style (replaces default alert-info) */
.alert-hero {
    position: relative;
    color: var(--text-light);
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(79,140,255,0.15);
    background: transparent; /* nền do ::before đảm nhận */
}

    .alert-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(79,140,255,0.65) 0%, rgba(166,133,226,0.65) 100%), url('/images/background.png') center/cover no-repeat;
        background-position: center, center 35% !important;
    }

    .alert-hero .container {
        position: relative;
        z-index: 1;
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .alert-hero i,
    .alert-hero h2 {
        color: var(--text-light);
    }

    .alert-hero .input-group-lg .form-control {
        background: rgba(255,255,255,0.96);
        border: 0;
    }

        .alert-hero .input-group-lg .form-control::placeholder {
            color: #6c757d;
        }

.input-group-lg .form-control {
    font-size: 1.25rem;
    border-radius: 2rem 0 0 2rem;
}

.input-group-lg .btn {
    border-radius: 0 2rem 2rem 0;
    font-size: 1.25rem;
}

.event-search-section {
    min-height: 260px;
    background: transparent;
}

.event-search-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #159BAF 0%, #116A7B 60%, #eaf6fa 100%);
    opacity: 0.92;
    z-index: 1;
    border-radius: 0 0 32px 32px;
}

.event-search-section .container {
    position: relative;
    z-index: 2;
}

.event-search-section h2 {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.input-group-lg .form-control {
    font-size: 1.25rem;
    border-radius: 2rem 0 0 2rem;
}

.input-group-lg .btn {
    border-radius: 0 2rem 2rem 0;
    font-size: 1.25rem;
}

/* Event card - modern style */
:root {
    --primary-rgb: 79,140,255;
    --accent-rgb: 255,111,97;
}

.card.event-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.12);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .card.event-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 40px rgba(var(--primary-rgb), 0.20);
    }

    .card.event-card .card-img-top {
        border-bottom: 1px solid rgba(var(--primary-rgb), 0.15);
        transition: transform .35s ease;
    }

    .card.event-card:hover .card-img-top {
        transform: scale(1.03);
    }

    .card.event-card .event-card-body {
        background: #fff;
    }

/* Brand text utility for titles */
.text-brand {
    color: var(--primary) !important;
}

    .text-brand:hover {
        color: var(--accent) !important;
    }