/* =================================================================== */
/* COMPLETE REDESIGN FOR CHECK-IN TRAVEL (7-PART)          */
/* AUTHOR: GEMINI (FOR MATEUS)                           */
/* */
/* This file is meticulously crafted to be complete and    */
/* reflect all design requirements.                        */
/* =================================================================== */
/* PART 1/7: FOUNDATION - VARIABLES & RESETS               */
/* =================================================================== */

/* --- 1. ROOT VARIABLES (THE DNA OF THE DESIGN) --- */
:root {
    /* 1.1. Color Palette */
    --primary-color: #b40000;      /* Main brand color from the logo */
    --secondary-color: #e0544e;    /* Darker shade for hover/active states */
    --accent-color: #b40000;       /* Red for important highlights */
    
    --heading-color: #1a202c;      /* Near-black for sharp, high-contrast headings */
    --text-color: #4a5568;         /* Softer, elegant gray for body text */
    --subtle-text-color: #718096;   /* Lighter gray for secondary text */
    
    --background-color: #ffffff;   /* Pure white background */
    --light-bg-color: #f7fafc;     /* Light gray for alternating sections */
    --dark-bg-color: #1a202c;       /* Dark background, matches heading color */
    
    --border-color: #e2e8f0;       /* Standard border color */

    /* 1.2. Typography */
    --font-primary: 'FiraGO', 'Helvetica', 'Arial', sans-serif;
    --font-headings: 'BPG Nino Mtavruli', 'FiraGO', sans-serif;
    --base-font-size: 16px;
    --line-height-base: 1.7;
    --line-height-heading: 1.3;

    /* 1.3. Layout & Effects */
    --container-width: 1240px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --transition-fast: all 0.2s ease-in-out;
    --transition-medium: all 0.3s ease-in-out;
}


/* --- 2. GLOBAL RESET & BASE STYLES --- */

/* A more modern reset approach */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape mode */
}

body {
    font-family: var(--font-primary);
    font-size: var(--base-font-size);
    line-height: var(--line-height-base);
    color: var(--text-color);
    background-color: var(--background-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Base styles for images and other elements */
img, video, svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
/* =================================================================== */
/* PART 2/7: TYPOGRAPHY & BUTTONS                          */
/* =================================================================== */

/* --- 3. TYPOGRAPHY HIERARCHY & TEXT STYLES --- */

/* General heading styles */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    color: var(--heading-color);
    font-weight: 700;
    line-height: var(--line-height-heading);
    letter-spacing: -0.5px; /* Adds elegance to Georgian fonts */
    margin-top: 0;
    margin-bottom: 1.25rem;
}

/* Fluid font sizes for responsiveness */
h1, .h1 { font-size: clamp(2.4rem, 5vw, 3.25rem); }
h2, .h2 { font-size: clamp(2rem, 4vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.5rem, 3vw, 1.75rem); }
h4, .h4 { font-size: clamp(1.2rem, 2.5vw, 1.25rem); }
h5, .h5 { font-size: 1.1rem; }
h6, .h6 { font-size: 1rem; }

/* Paragraph and links */
p {
    margin-bottom: 1rem;
    max-width: 75ch; /* Improves readability by limiting line length */
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--secondary-color);
    text-decoration: none; /* No underline on hover for a cleaner look */
}

/* Other text elements */
strong, b {
    font-weight: 600;
    color: var(--heading-color);
}

em, i {
    font-style: italic;
}

blockquote {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background-color: var(--light-bg-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

blockquote p {
    margin-bottom: 0;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--heading-color);
}


/* --- 4. BUTTONS --- */

/* Base button style */
.btn {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 14px 32px;
    border-radius: var(--border-radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-medium);
    user-select: none; /* Prevent text selection on click */
    white-space: nowrap; /* Prevent button text from wrapping */
}

/* Primary Button (Main Call-to-Action) */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Outline Button */
.btn-outline-primary {
    border: 2px solid var(--border-color);
    color: var(--heading-color);
    background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* Accent Button (for special actions, uses red) */
.btn-accent {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.btn-accent:hover,
.btn-accent:focus {
    background-color: #9a0000; /* Darker red */
    border-color: #9a0000;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -5px rgba(180, 0, 0, 0.4);
}

/* Button sizing */
.btn-lg {
    padding: 18px 40px;
    font-size: 1rem;
}

.btn-sm {
    padding: 10px 20px;
    font-size: 0.8rem;
}
/* =================================================================== */
/* PART 3/7: LAYOUT & GENERIC COMPONENTS                   */
/* =================================================================== */

/* --- 5. LAYOUT STRUCTURE --- */

/* Main container for centering content */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
}

/* Base class for all major page sections */
.section {
    padding: 100px 0;
    position: relative;
    overflow: hidden; /* Prevents unwanted horizontal scroll from animations */
}

/* Modifier for sections with a light gray background */
.section.bg-light {
    background-color: var(--light-bg-color);
}

/* Standardized style for section titles */
.section-title {
    text-align: center;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* The small, uppercase text above the main section heading */
.section-title span {
    display: block;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

/* Optional descriptive paragraph within the section title block */
.section-title p {
    font-size: 1.1rem;
    color: var(--text-color);
    line-height: 1.6;
}


main {
    padding-top: 90px; /* ეს მნიშვნელობა ანაცვლებს ჰედერის სიმაღლეს */
}

/* --- 6. GENERIC CARD COMPONENT --- */

/* Base card style used for tours, employees, etc. */
.card {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: var(--transition-medium);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

/* Elegant hover effect for all cards */
.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.card-img-top {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-bottom: 1px solid var(--border-color);
}

.card-body {
    padding: 25px 30px;
    flex-grow: 1; /* Allows body to take up available space */
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.card-text,
.card p {
    flex-grow: 1; /* Pushes footer content down */
    margin-bottom: 1.5rem;
}

.card-footer {
    padding: 20px 30px;
    background-color: transparent;
    border-top: 1px solid var(--border-color);
    margin-top: auto; /* Pushes footer to the absolute bottom of the card */
}


/* --- 7. GENERIC FORM STYLING --- */

.form-group {
    margin-bottom: 1.5rem;
}

.form-control {
    display: block;
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.5;
    color: var(--heading-color);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d2d6dc; /* Slightly darker border for forms */
    border-radius: var(--border-radius-md);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control::placeholder {
    color: var(--subtle-text-color);
    opacity: 1;
}

.form-control:focus {
    color: var(--heading-color);
    background-color: #fff;
    border-color: var(--primary-color);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.25);
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}
/* =================================================================== */
/* PART 4/7: HEADER & FOOTER                               */
/* =================================================================== */

/* --- 8. HEADER & NAVIGATION --- */
.navbar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition-medium);
    border-bottom: 1px solid transparent;
}

/* Style for the navbar when the page is scrolled */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-md);
    padding: 10px 0;
    border-bottom-color: var(--border-color);
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 2rem;
}

.navbar-brand img {
    height: 45px;
    transition: var(--transition-fast);
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

.navbar-nav {
    gap: 10px; /* Space between nav links */
}

.nav-link {
    color: var(--heading-color) !important;
    font-weight: 500;
    padding: 10px 16px !important;
    position: relative;
    border-radius: var(--border-radius-md);
}

.nav-link:hover {
    color: var(--primary-color) !important;
    background-color: rgba(32, 201, 151, 0.08);
}

/* Elegant underline effect for active/hovered links */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-link.active::after,
.nav-link:hover::after {
    width: 25px;
}

/* Mobile menu hamburger icon */
.navbar-toggler {
    border: none;
    font-size: 1.5rem;
    color: var(--heading-color);
    padding: 5px 10px;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.25);
    outline: none;
}

/* Language switcher styles */
.language-switcher {
    display: flex;
    align-items: center;
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid var(--border-color);
}

.language-switcher .nav-link {
    padding: 5px 12px !important;
    text-align: center;
}

.language-switcher .nav-link.active {
    background: rgba(32, 201, 151, 0.1);
    color: var(--primary-color) !important;
    font-weight: 700;
}
.language-switcher .nav-link.active::after {
    width: 0; /* No underline for active language selector */
}


/* --- 9. FOOTER --- */
.footer {
    background: var(--dark-bg-color);
    color: #a0aec0; /* Lighter gray for readability on dark background */
    padding: 80px 0 30px;
}

.footer h5 {
    color: #fff;
    margin-bottom: 25px;
    font-family: var(--font-headings);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

.footer ul li a {
    color: #a0aec0;
    display: block;
    padding: 8px 0;
    transition: var(--transition-fast);
}

.footer ul li a:hover {
    color: var(--primary-color);
    padding-left: 5px; /* Subtle indent on hover */
}

/* Newsletter form inside the footer */
.footer .newsletter-form .form-control {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #fff;
}
.footer .newsletter-form .form-control::placeholder {
    color: var(--subtle-text-color);
}
.footer .newsletter-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.3);
}

/* Social media links in the footer */
.footer .social-links a {
    color: #a0aec0 !important;
    margin-right: 15px;
    font-size: 1.3rem;
    display: inline-block; /* Needed for transform */
}
.footer .social-links a:hover {
    color: var(--primary-color) !important;
    transform: translateY(-2px);
}

/* Copyright section at the bottom of the footer */
.footer-bottom {
    border-top: 1px solid #4a5568;
    padding-top: 30px;
    margin-top: 50px;
    text-align: center;
    color: var(--subtle-text-color);
    font-size: 0.9rem;
}
/* =================================================================== */
/* PART 5/7: MAIN PAGE SECTIONS (PART A)                   */
/* =================================================================== */

/* --- 10. HERO SECTION --- */
.hero-section {
    height: 90vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* Creates the parallax scrolling effect */
    position: relative;
    color: #fff;
}

/* Dark gradient overlay for text readability and elegance */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.4) 100%);
    z-index: 1;
}

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

.hero-content {
    max-width: 750px;
}

.hero-content h1 {
    font-weight: 800;
    color: #fff;
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
    margin-bottom: 1.5rem;
}

.hero-content p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    max-width: 90%;
}


/* --- 11. TOURS / SERVICES SECTION --- */
.tour-card {
    /* Inherits most styles from the base .card */
    /* Specific overrides can be added here if needed */
}

.tour-card .tour-card-body {
    text-align: center;
}

.tour-card .tour-title {
    min-height: 50px; /* Ensures titles of different lengths align buttons */
    margin-bottom: 1.5rem;
}

/* This targets the footer div inside the tour card body */
.tour-card .tour-card-footer {
    border-top: none;
    padding: 0;
    margin-top: auto; /* Pushes the button to the bottom */
}

.tour-card {
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tour-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.tour-card:hover img {
    transform: scale(1.05);
}

.tour-card-image {
    width: 100%;
    height: 450px;
    overflow: hidden;
}

.tour-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tour-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.tour-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-color);
}

.tour-description {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 15px;
    flex-grow: 1;
}

.tour-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.price-tag {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
}

.tour-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: 1;
}

.tour-category-card:hover::before {
    transform: translateX(100%);
}

.tour-details-section {
    padding-top: 120px;
}



/* --- 12. FEATURED PROJECTS (CHECKERBOARD) --- */
.project-checkerboard {
    /* The main container doesn't need much styling itself */
    background-color: var(--light-bg-color);
}

.checkerboard-row {
    background-color: var(--background-color);
    display: flex;
    flex-wrap: wrap; /* Allows columns to stack on mobile */
    align-items: center;
    transition: var(--transition-medium);
}

/* Alternating background color for rows */
.project-checkerboard > .checkerboard-row:nth-child(even) {
    background-color: var(--light-bg-color);
}

/* Row hover effect for an interactive feel */
.checkerboard-row:hover {
    box-shadow: var(--shadow-lg);
    transform: scale(1.01);
    z-index: 5;
    position: relative;
}

.checkerboard-image {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 500px; /* Taller image block for a premium feel */
}

.checkerboard-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Image zoom effect on row hover */
.checkerboard-row:hover .checkerboard-image img {
    transform: scale(1.08);
}

.checkerboard-content {
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.checkerboard-content .project-title {
    margin-bottom: 1.5rem;
}

.checkerboard-content .project-description {
    margin-bottom: 2rem;
}
/* =================================================================== */
/* PART 6/7: MAIN PAGE SECTIONS (B) & OTHER PAGES          */
/* =================================================================== */

/* --- 13. TEAM SECTION --- */
.team-card-v2 {
    background: #ffffff;
    border-radius: var(--border-radius, 8px);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    text-align: center;
    padding: 30px 20px;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.team-card-v2:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.featured-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #ffc107;
    font-size: 1.3rem;
    text-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.team-card-v2-image {
    margin: 0 auto 20px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 0 0 4px var(--primary-color, #ff6b35);
    transition: transform 0.3s ease;
}

.team-card-v2:hover .team-card-v2-image {
    transform: scale(1.05);
}

.team-card-v2-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card-v2-content {
    flex-grow: 1;
}

.team-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color, #333);
    margin-top: 10px;
    margin-bottom: 5px;
}

.team-position {
    font-size: 0.9rem;
    color: var(--primary-color, #ff6b35);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.team-contact-info {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 15px;
}

.team-contact-info p {
    margin-bottom: 5px;
    word-break: break-all;
}

.team-contact-info a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.team-contact-info a:hover {
    color: var(--primary-color, #ff6b35);
}

.team-contact-info i {
    margin-right: 8px;
}

.team-card-v2-footer {
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.team-social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #f1f1f1;
    color: #555;
    border-radius: 50%;
    margin: 0 5px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.team-social a:hover {
    background: var(--primary-color, #ff6b35);
    color: #fff;
    transform: scale(1.1);
}


/* --- 14. GALLERY SECTION --- */
#gallery-featured .swiper {
    padding: 10px 0; /* Add some vertical padding for shadow visibility */
}

.gallery-item-featured {
    position: relative;
    overflow: hidden;
    height: 400px;
    border-radius: var(--border-radius-md);
    background-color: var(--light-bg-color);
}

.gallery-item-featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-item-featured:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.2);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: var(--transition-medium);
}

.gallery-item-featured:hover .gallery-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.6);
}

.gallery-overlay i {
    font-size: 3rem;
    margin-bottom: 1rem;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}
.gallery-item-featured:hover .gallery-overlay i {
    transform: scale(1);
}

.gallery-overlay h5 {
    position: absolute;
    bottom: 25px;
    left: 25px;
    right: 25px;
    text-align: center;
    font-family: var(--font-headings);
    font-size: 1.1rem;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease 0.1s; /* Add a slight delay */
}
.gallery-item-featured:hover .gallery-overlay h5 {
    transform: translateY(0);
    opacity: 1;
}

/* --- 15. CONTACT SECTION --- */
.contact-info, .contact-form {
    background: white;
    padding: 40px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    height: 100%;
}

.contact-info h4 {
    margin-bottom: 20px;
}

.contact-info p {
    color: var(--text-color);
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.contact-info i {
    color: var(--primary-color);
    margin-right: 15px;
    margin-top: 5px;
    width: 20px;
}

.map-container {
    margin-top: 2rem;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    line-height: 0; /* remove bottom space from iframe */
}

.map-container iframe {
    width: 100%;
    height: 450px;
    border: 0;
}

/* --- 16. LOGIN PAGE --- */
.login-container {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 2rem 0;
    background-color: var(--light-bg-color);
}

.login-card {
    /* Uses base .card styles, with some specific overrides */
    border: none;
    box-shadow: var(--shadow-lg);
}

.login-header {
    background: none;
    padding: 2.5rem;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.login-logo {
    width: 90px;
    height: auto;
    margin-bottom: 1rem;
}

.login-body {
    padding: 2rem 2.5rem;
}

/* Password visibility toggle button */
.input-group .toggle-password {
    border-left: 0;
    background-color: #fff;
    color: var(--subtle-text-color);
}
.input-group .toggle-password:hover {
    color: var(--primary-color);
}

/* --- 17. OTHER/LEGACY COMPONENTS (TO ENSURE COMPLETENESS) --- */
/* Styles for components found in the original CSS, but not in current PHP files */

.reel-card {
    /* Inherits from .card */
}

.director-card {
    text-align: center;
    padding: 2rem;
    background-color: var(--background-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}

.visa-service-card {
    padding: 2.5rem;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    border-left: 5px solid var(--primary-color);
}
/* =================================================================== */
/* PART 7/7: RESPONSIVE DESIGN (MEDIA QUERIES)             */
/* =================================================================== */

/* --- 18. RESPONSIVE STYLES --- */

/* For Laptops and Large Tablets (up to 1200px) */
@media (max-width: 1199.98px) {
    .container {
        max-width: 960px;
    }
}


/* For Tablets (up to 992px) */
@media (max-width: 991.98px) {
    /* Adjust base typography and layout for smaller screens */
    h1, .h1 { font-size: 2.5rem; }
    h2, .h2 { font-size: 2rem; }

    main { padding-top: 72px; } /* Adjust for potentially smaller navbar */
    .section { padding: 80px 0; scroll-margin-top: 72px; }

    /* --- Navbar on Mobile --- */
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--background-color);
        box-shadow: var(--shadow-lg);
        padding: 15px;
        border-top: 1px solid var(--border-color);
    }
    .navbar-nav { 
        flex-direction: column; 
        align-items: stretch; 
        gap: 5px; 
    }
    .nav-link { text-align: left; }
    .nav-link:hover, .nav-link.active {
        background-color: rgba(32, 201, 151, 0.08);
    }
    .nav-link::after { display: none; } /* Hide underline effect in mobile menu */
    
    .language-switcher { 
        border-left: none; 
        margin-left: 0; 
        padding-left: 0; 
        margin-top: 10px; 
        justify-content: flex-start;
    }

    /* --- Section adjustments --- */
    .hero-section { 
        background-attachment: scroll; /* Parallax is often buggy on mobile/tablet */
    }

    /* --- Checkerboard on Tablet (Your requested layout) --- */
    /*
      NOTE: This implements your request for a side-by-side layout on tablets.
      This can cause text to be small. The standard approach is stacking.
    */
    .checkerboard-row {
        display: flex;
        flex-wrap: nowrap; /* Force columns to stay in one row */
    }
    .checkerboard-row .col-lg-6 {
        flex: 0 0 50%; /* Each column takes exactly 50% */
        max-width: 50%;
    }
    .checkerboard-image { min-height: 380px; }
    .checkerboard-content { padding: 30px; }
    .checkerboard-content h3 { font-size: 1.4rem; }
    .checkerboard-content p { font-size: 0.9rem; }
}


/* For Mobile Devices (up to 768px) */
@media (max-width: 767.98px) {
    /* Center hero content on mobile */
    .hero-content {
        text-align: center;
        max-width: 100%;
    }
    .hero-content p {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Checkerboard on Mobile: Reverting to a stacked layout for usability.
      The side-by-side view becomes unreadable on small phone screens.
    */
    .checkerboard-row {
        display: block; /* Revert to normal stacking flow */
    }
    .checkerboard-row .col-lg-6 {
        max-width: 100%; /* Columns are now full-width */
    }
    .checkerboard-row .order-lg-2 {
        order: 1 !important; /* Ensure image is always first on mobile */
    }
    .checkerboard-row .order-lg-1 {
        order: 2 !important; /* Text block comes after image */
    }
    .checkerboard-image {
        min-height: 300px;
    }
}


/* For very small devices (up to 576px) */
@media (max-width: 575.98px) {
    body { 
        font-size: 15px; 
        line-height: 1.6;
    }
    .section { padding: 60px 0; }
    
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.75rem; }

    .btn { padding: 12px 24px; font-size: 0.8rem; }

    /* Adjust padding for contact and login forms */
    .contact-form, .contact-info, .login-body { 
        padding: 25px; 
    }
}
/* =================================================================== */
/* MISSING STYLES - REFACTORED FOR THE NEW DESIGN (7-PART) */
/* AUTHOR: GEMINI (FOR MATEUS)                           */
/* */
/* NOTE: This code should be ADDED AFTER the previously      */
/* provided 7 parts.                                     */
/* =================================================================== */
/* PART 1/7: MISCELLANEOUS & GENERAL PURPOSE ADDITIONS     */
/* =================================================================== */

/* --- Body User-Select Property --- */
body {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Standard syntax to prevent text selection */
}


/* --- Room Features List (from original tour-related styles) --- */
.room-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.room-features li {
    color: var(--text-color);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.room-features i {
    color: var(--primary-color);
    margin-right: 12px;
    width: 20px;
    text-align: center;
}


/* --- Price Tag (from original tour card styles) --- */
.price-tag {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-headings);
    color: var(--primary-color);
}


/* --- Form Check Custom Styling --- */
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:checked + .form-check-label {
    color: var(--heading-color);
    font-weight: 600;
}


/* --- reCAPTCHA Validation Feedback --- */
.is-invalid-captcha > div {
    border: 1px solid var(--accent-color) !important; /* Use accent color for errors */
    border-radius: var(--border-radius-sm);
}

.invalid-feedback.d-block {
    display: block !important;
    color: var(--accent-color);
    font-weight: 500;
}
/* =================================================================== */
/* PART 2/7: INNER PAGE TITLE SECTION                      */
/* =================================================================== */

/* This section is used as a banner on top of pages like "About Us",
  "Employees", "Gallery", etc. to display the page title.
*/

.page-title-section {
    background-size: cover;
    background-position: center;
    background-color: var(--dark-bg-color); /* Fallback color if image fails */
    padding: 140px 0 80px 0;
    text-align: center;
    position: relative;
    color: #fff;
    /* This negative margin helps it sit flush against the scrolled navbar,
       assuming the main content has padding-top. */
    margin-top: -80px; 
}

/* Dark overlay for better text readability */
.page-title-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

.page-title-section .container {
    position: relative;
    z-index: 2; /* Ensures content is above the overlay */
}

.page-title-section h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* Optional lead paragraph under the title */
.page-title-section .lead {
    font-size: 1.25rem;
    max-width: 650px;
    margin: 1rem auto 0;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* =================================================================== */
/* PART 3/7: "ABOUT US" PAGE COMPONENTS                    */
/* =================================================================== */

/* --- About Page Main Content Area --- */
.about-content .section-subtitle {
    font-size: 1.8rem;
    font-weight: 600;
    font-family: var(--font-headings);
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.about-content p {
    color: var(--text-color);
    line-height: var(--line-height-base);
}


/* --- Services/Features List with Icons --- */
.services-list {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}

.services-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    color: var(--heading-color);
}

.services-list li i {
    color: var(--primary-color);
    margin-right: 15px;
    margin-top: 5px; /* Aligns icon nicely with the first line of text */
    font-size: 1.2rem;
    width: 20px;
}


/* --- Director's Showcase Card --- */
.director-card {
    background: var(--background-color);
    padding: 2.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: var(--transition-medium);
}

.director-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.director-card img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid var(--primary-color);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.director-card .director-name {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    color: var(--heading-color);
}

.director-card .director-title {
    font-weight: 500;
    color: var(--primary-color);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* =================================================================== */
/* PART 4/7: VISA & DESTINATION PAGE COMPONENTS            */
/* =================================================================== */

/* --- Visa Service Card --- */
.visa-service-card {
    background-color: var(--background-color);
    padding: 2.5rem;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    border-left: 5px solid var(--primary-color);
    transition: var(--transition-medium);
}

.visa-service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.visa-country-title {
    font-family: var(--font-headings);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 1.5rem;
}

.visa-service-card p {
    line-height: var(--line-height-base);
    color: var(--text-color);
}

/* Fees section inside the visa card */
.visa-fees {
    font-weight: 600;
    font-size: 1.1rem;
    font-family: var(--font-headings);
    color: var(--primary-color);
    text-align: center;
    background: rgba(32, 201, 151, 0.08); /* Use primary color with low opacity */
    padding: 10px 15px;
    border-radius: var(--border-radius-sm);
    margin-top: 1.5rem;
}


/* --- Clickable Destination Card --- */

/* This turns the entire card into a clickable link */
.destination-card-link {
    text-decoration: none;
    color: inherit;
    display: block; /* Makes the link fill the grid column */
    transition: var(--transition-medium);
    height: 100%;
    border-radius: var(--border-radius-md); /* Ensures hover effect respects the border radius */
}

/* The card itself, nested inside the link */
.destination-card {
    /* Inherits most styles from the base .card */
    /* No separate hover effect needed, as it's on the parent link */
}

.destination-card-link:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.destination-card .card-img-top {
    height: 200px;
}

/* "Discover" button/text that appears on hover */
.discover-btn {
    color: var(--primary-color);
    font-weight: 600;
    text-align: right;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
}

.destination-card-link:hover .discover-btn {
    opacity: 1; /* Appears on hover */
}
/* =================================================================== */
/* PART 5/7: "SOCIAL REELS" PAGE COMPONENTS                */
/* =================================================================== */

/* --- Reel Card Styling --- */
.reel-card {
    /* Inherits from base .card, but with specific structure */
    display: flex;
    flex-direction: column;
}

/* Wrapper for embedding videos to maintain aspect ratio */
.reel-video-wrapper {
    position: relative;
    padding-bottom: 177.77%; /* Default 9:16 aspect ratio for TikTok/Reels */
    height: 0;
    overflow: hidden;
    background-color: #000;
}

/* Ensure the embedded content fills the wrapper */
.reel-video-wrapper iframe,
.reel-video-wrapper blockquote,
.reel-video-wrapper .tiktok-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;  /* !important is needed to override embed's inline styles */
    height: 100% !important;
    border: 0;
}

/* Modifier class for standard 16:9 videos (e.g., YouTube) */
.reel-card.aspect-16-9 .reel-video-wrapper {
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}


/* --- Reel Card Content Styling --- */
.reel-card-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.reel-title {
    font-family: var(--font-headings);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--heading-color);
}

.reel-description {
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 15px;
    flex-grow: 1; /* Allows description to take available space */
    min-height: 95px; /* Ensures consistent height before "Read More" */
    position: relative;
}

.reel-badge {
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary-color);
    border-radius: 50px; /* Pill shape */
    align-self: flex-start;
    margin-top: auto; /* Pushes to the bottom */
}


/* --- "Read More" Functionality Styles --- */

/* The actual text paragraph that will be truncated */
.reel-description-text {
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--text-color);
    line-height: 1.6;
}

/* Class to be toggled by JavaScript to collapse text */
.reel-description-text.collapsed {
    max-height: 65px; /* Approx. 3 lines of text */
    overflow: hidden;
    position: relative;
}

/* Optional: Add a subtle fade-out effect to the collapsed text */
.reel-description-text.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25px;
    background: linear-gradient(to bottom, transparent, var(--background-color));
}

/* The "Read More" button */
.read-more-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 0.9rem;
    display: none; /* Hidden by default, shown by JavaScript when needed */
}

.read-more-btn:hover {
    text-decoration: underline;
    color: var(--secondary-color);
}
/* =================================================================== */
/* PART 6/7: ADMIN PANEL STYLES                            */
/* =================================================================== */

/* --- Admin Panel Layout --- */
.admin-container {
    padding: 2rem;
    background-color: var(--light-bg-color);
}

.admin-sidebar {
    background: var(--background-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.admin-content {
    background: var(--background-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2rem;
}


/* --- Admin Sidebar Components --- */
.admin-profile {
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.admin-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 3px solid var(--primary-color);
}

.admin-profile h5 {
    margin-bottom: 0.25rem;
    color: var(--heading-color);
}

.admin-profile p {
    margin-bottom: 0;
    color: var(--subtle-text-color);
    font-size: 0.9rem;
}

/* Premium Admin Dashboard Styles */
.admin-body {
    background-color: #f5f7fa;
    font-family: 'Poppins', sans-serif;
}

.stat-card-v2 {
    background: linear-gradient(135deg, var(--card-color) 0%, color-mix(in srgb, var(--card-color) 70%, black) 100%);
    color: white;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    border: none;
}

.stat-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.stat-card-v2 .card-icon {
    font-size: 2.5rem;
    opacity: 0.9;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
}

.stat-card-v2 .card-content {
    flex-grow: 1;
}

.stat-card-v2 .card-title {
    color: rgba(255,255,255,0.9);
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 400;
}

.stat-card-v2 .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: white;
    margin: 0 0 10px 0;
}

.stat-card-v2 .stat-link {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Quick Actions Styling */
.quick-actions-v2 {
    display: grid;
    gap: 10px;
}

.quick-actions-v2 .action-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--text-color);
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
}

.quick-actions-v2 .action-item:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(180, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.quick-actions-v2 .action-item i {
    font-size: 1.3rem;
    margin-right: 15px;
    width: 24px;
    text-align: center;
}

/* Activity Feed Styling */
.activity-feed-v2 {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activity-feed-v2 .feed-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.activity-feed-v2 .feed-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.activity-feed-v2 .feed-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.activity-feed-v2 .feed-content {
    flex-grow: 1;
}

.activity-feed-v2 .feed-content strong {
    display: block;
    margin-bottom: 5px;
    color: var(--heading-color);
}

.activity-feed-v2 .feed-content p {
    font-size: 0.9rem;
    margin-bottom: 5px;
    color: var(--text-color);
}

.activity-feed-v2 .feed-content small {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
}


/* --- Admin Navigation Menu --- */
.admin-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-menu li {
    margin-bottom: 0.5rem;
}

.admin-menu li a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: var(--border-radius-md);
    color: var(--text-color);
    font-weight: 500;
    transition: var(--transition-fast);
}

.admin-menu li a:hover {
    background: rgba(32, 201, 151, 0.08);
    color: var(--primary-color);
}

.admin-menu li a i {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
    color: var(--subtle-text-color);
    transition: var(--transition-fast);
}

.admin-menu li a:hover i {
    color: var(--primary-color);
}

/* Style for the active menu item */
.admin-menu li.active a {
    background: rgba(32, 201, 151, 0.1);
    color: var(--primary-color);
    font-weight: 600;
}

.admin-menu li.active a i {
    color: var(--primary-color);
}


/* --- Admin Content Area --- */
.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.admin-section-header h2 {
    margin-bottom: 0;
}


/* --- Profile Page Specific --- */
.profile-avatar {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid var(--primary-color);
    box-shadow: var(--shadow-md);
}

/* =================================================================== */
/* PART 7/7: RESPONSIVE ADJUSTMENTS FOR MISSING COMPONENTS */
/* =================================================================== */

/* For Tablets (up to 992px) */
@media (max-width: 991.98px) {

    /* Adjust page title section on tablets */
    .page-title-section h1 {
        font-size: 2.8rem;
    }
    .page-title-section {
        padding: 120px 0 70px 0;
    }

    /* Add spacing for director card when it stacks */
    .director-card {
        margin-top: 3rem;
    }

    /* Admin content adjustments */
    .admin-content {
        margin-top: 2rem;
    }
}


/* For Mobile Devices (up to 768px) */
@media (max-width: 767.98px) {
    
    /* Further reduce page title on mobile */
    .page-title-section h1 {
        font-size: 2.2rem;
    }
    .page-title-section .lead {
        font-size: 1.1rem;
    }

    /* Stack admin section header elements vertically */
    .admin-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    /* Adjust padding on various cards for smaller screens */
    .director-card,
    .visa-service-card {
        padding: 2rem;
    }

    .visa-country-title {
        font-size: 1.5rem;
    }
}


/* For very small devices (up to 576px) */
@media (max-width: 575.98px) {
    .admin-container,
    .admin-content {
        padding: 1rem;
    }
    
    .admin-section-header {
        padding-bottom: 1rem;
        margin-bottom: 1.5rem;
    }
}
/* =================================================================== */
/* FINAL ADDITIONS - MINOR UTILITY CLASSES FROM OLD CSS    */
/* =================================================================== */

/* For hiding elements on specific devices */
@media (max-width: 991.98px) {
	.mobile-hidden { 
        display: none !important; 
    }
}

@media (min-width: 992px) {
    .mobile-only { 
        display: none !important; 
    }
}

/* A very specific component from the old file */
.tour-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    z-index: 1;
}
/* Ensure swiper container is always visible */
.employees-swiper {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix for swiper slides */
.swiper-wrapper {
    display: flex;
    align-items: stretch; /* Make all cards same height */
}

.swiper-slide {
    height: auto; /* Allow slide to take natural height */
    display: flex; /* Needed for equal height */
}

/* Team card adjustments */
.team-card-v2 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.team-card-v2-content {
    flex-grow: 1; /* Push footer to bottom */
}

/* Hero Background-ის დინამიური სტილი */
.hero-background {
    /* საერთო სტილები, რომლებიც ორივე ვერსიას სჭირდება */
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: background-image 0.3s ease-in-out; /* სურვილისამებრ, ეფექტისთვის */

    /* ნაგულისხმევი (Mobile-First) სურათი მობილურისთვის */
    background-image: url('<?php echo BASE_URL; ?>/assets/images/mobile-bg.jpg');
}

/* Media Query: ეს სტილი იმუშავებს მხოლოდ დიდ ეკრანებზე (992px და მეტი) */
@media (min-width: 991.98px) {
    .hero-background {
        /* დესკტოპის სურათი, რომელიც გადააწერს მობილურისას */
        background-image: url('<?php echo BASE_URL; ?>/assets/images/hero-bg.jpg');
    }
}

/* დავამატოთ style.css-ში მობილურის მედია კვერის ქვეშ */
@media (max-width: 767.98px) {
    .employees-swiper .swiper-button-next,
    .employees-swiper .swiper-button-prev {
        width: 40px !important;
        height: 40px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
        border: 1px solid var(--border-color) !important;
    }
    
    .employees-swiper .swiper-button-next::after,
    .employees-swiper .swiper-button-prev::after {
        font-size: 1.2rem !important;
        color: var(--primary-color) !important;
        font-weight: bold !important;
    }
    
    /* დავამატოთ ინდიკატორიც (dots) თუ საჭიროა */
    .employees-swiper .swiper-pagination {
        position: relative !important;
        margin-top: 20px !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .employees-swiper .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
        background: var(--border-color) !important;
        opacity: 1 !important;
    }
    
    .employees-swiper .swiper-pagination-bullet-active {
        background: var(--primary-color) !important;
    }
}

/* --- Library Module Styles --- */
.alphabet-filter a {
    display: inline-block;
    padding: 5px 10px;
    margin: 2px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
}
.alphabet-filter a:hover,
.alphabet-filter a.active {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.author-card-link {
    text-decoration: none;
}
.author-card {
    transition: var(--transition-medium);
}
.author-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.author-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.author-card-title {
    color: var(--heading-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.book-card-title a {
    text-decoration: none;
    color: var(--heading-color);
    font-weight: 500;
}
.book-cover-sm {
    transition: var(--transition-medium);
    border-radius: var(--border-radius-sm);
}
.book-cover-sm:hover {
    transform: scale(1.05);
}

/* Star Rating */
.average-rating-stars .fa-star,
.user-rating-stars .fa-star {
    color: #f8c102;
    font-size: 1.2rem;
}
.user-rating-stars .fa-star {
    cursor: pointer;
    transition: transform 0.2s;
}
.user-rating-stars .fa-star:hover {
    transform: scale(1.2);
}

/* Reviews */
.review-item {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.5rem;
}
.review-item:last-child {
    border-bottom: none;
}

/* =================================================================== */
/* LIBRARY MODULE - MOBILE RESPONSIVE STYLES               */
/* =================================================================== */

@media (max-width: 767.98px) {

    /* --- General Adjustments for Library Pages --- */
    .library-section-title h2,
    .section-title h2 {
        font-size: 2rem; /* სათაურების შემცირება მობილურზე */
    }

    /* --- Library Page (library.php) --- */
    .alphabet-filter {
        /* ჰორიზონტალური სქროლვა, რათა ანბანი ერთ ხაზზე დარჩეს და არ გაიწელოს */
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch; /* გლუვი სქროლი iOS-ზე */
    }
    .alphabet-filter::-webkit-scrollbar {
        height: 4px; /* სქროლბარის ვიზუალი */
    }
    .alphabet-filter::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 10px;
    }
    .alphabet-filter a {
        padding: 4px 8px;
        font-size: 0.9rem;
    }
    .author-card-img {
        height: 150px; /* ავტორის სურათის სიმაღლის კორექცია */
    }
    .author-card-title {
        font-size: 0.8rem;
    }


    /* --- Author Page (author.php) --- */
    .author-info-block .col-md-3,
    .author-info-block .col-md-9 {
        text-align: center; /* ავტორის სურათის და ტექსტის ცენტრირება */
    }
    .author-info-block .col-md-9 {
        margin-top: 1.5rem;
    }
    .author-info-block h1 {
        font-size: 2.2rem; /* ავტორის სახელის ზომის კორექცია */
    }


    /* --- Book Page (book.php) --- */
    .book-details-container .col-md-4 {
        margin-bottom: 2rem; /* დაშორება წიგნის ყდასა და დეტალებს შორის */
    }
    .book-details-container h1 {
        font-size: 1.8rem; /* წიგნის სათაურის ზომის კორექცია */
        text-align: center;
    }
    .book-details-container h4 {
        font-size: 1.1rem;
        text-align: center;
    }
    .book-details-container .d-flex {
        justify-content: center; /* რეიტინგის ვარსკვლავების ცენტრირება */
    }
    .review-item img {
        width: 40px; /* კომენტარის ავტორის სურათის დაპატარავება */
        height: 40px;
    }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* უზრუნველყოფს, რომ body ყოველთვის ეკრანის სიმაღლეა */
}

main {
    flex-grow: 1; /* აიძულებს <main> კონტენტს, დაიკავოს ყველა თავისუფალი სივრცე */
}

.back-link {
    text-decoration: none;
    color: var(--subtle-text-color);
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition-fast);
}
.back-link:hover {
    color: var(--primary-color);
}
.back-link i {
    transition: transform 0.2s ease-in-out;
}
.back-link:hover i {
    transform: translateX(-3px);
}
/* --- Library Stats Cards --- */
.stat-card-library {
    background-color: var(--light-bg-color);
    border: 1px solid var(--border-color);
    padding: 2rem 1.5rem;
    border-radius: var(--border-radius-md);
    transition: var(--transition-medium);
}
.stat-card-library:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}
.stat-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    font-family: var(--font-headings);
    color: var(--heading-color);
    line-height: 1.2;
}
.stat-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--subtle-text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* --- Premium Team Credits Widget Styles --- */
.team-credit-item {
    padding: 0.75rem 0.5rem;
}
.team-credit-item:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}
.team-credit-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid var(--primary-color);
    padding: 2px;
    background-color: #fff;
    box-shadow: var(--shadow-sm);
}
.team-credit-name {
    font-weight: 600;
    color: var(--heading-color);
    font-size: 1rem;
    line-height: 1.3;
}
.team-credit-status {
    font-size: 0.8rem;
    color: var(--primary-color);
    font-weight: 500;
}

/* --- Mobile Fixes for Team Credits Widget --- */
@media (max-width: 767.98px) {
    
    /* კონკრეტულად ამ სათაურისთვის ვამცირებთ შრიფტის ზომას მობილურზე */
    .card-title.h6.text-center.text-muted.mb-3 {
        font-size: 0.8rem; /* შეგიძლიათ ეს ზომა შეცვალოთ (მაგ: 0.75rem) */
        white-space: nowrap; /* ეს სტილი კრძალავს ტექსტის გადმოტანას */
        overflow: hidden; /* იმ შემთხვევაში, თუ ტექსტი მაინც არ ეტევა */
        text-overflow: ellipsis; /* ბოლოში დაამატებს სამ წერტილს ... */
    }

    /* ადმინისტრატორის სტატუსისთვის ვამცირებთ შრიფტის ზომას */
    .team-credit-status {
        font-size: 0.75rem; /* შეგიძლიათ ეს ზომა შეცვალოთ (მაგ: 0.7rem) */
        white-space: nowrap; /* ეს სტილი კრძალავს ტექსტის გადმოტანას */
    }
}

/* --- Facebook Share Button Style --- */
.btn-facebook {
    background-color: #1877F2;
    border-color: #1877F2;
    color: #fff;
    text-transform: none; /* სურვილისამებრ, რომ ტექსტი არ იყოს დიდი ასოებით */
}

.btn-facebook:hover,
.btn-facebook:focus {
    background-color: #166fe5;
    border-color: #166fe5;
    color: #fff;
}
/*
--- Admin Statistics Page Styles ---
*/

.stat-card-admin {
    background-color: #fff;
    border-radius: var(--border-radius-md);
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.stat-card-admin:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    border-color: var(--primary-color);
}

.stat-card-admin i {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.stat-card-admin .stat-info {
    display: flex;
    flex-direction: column;
}

.stat-card-admin .stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--heading-color);
    line-height: 1.2;
}

.stat-card-admin .stat-label {
    font-size: 1rem;
    color: var(--text-color);
}

.card-header h4 {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
    color: var(--heading-color);
}