/* /css/style.css */

/* --- ROOT VARIABLES --- */
:root {
    --input-padding-x: 1.5rem;
    --input-padding-y: .75rem;

    /* Color Palette */
    --tp-primary: #2c3e50;
    --tp-primary-rgb: 44, 62, 80;
    --tp-secondary: #3498db;
    --tp-secondary-rgb: 52, 152, 219;
    --tp-accent: #ff9800;
    --tp-accent-rgb: 255, 152, 0;
    --tp-accent-hover: #e08900;
    --tp-light: #f8f9fa;
    --tp-medium-light: #e9ecef;
    --tp-dark: #212529;
    --tp-dark-rgb: 33, 37, 41;
    --tp-muted: #6c757d;
    --tp-white: #ffffff;
    --tp-border: #dee2e6;
    --tp-success: #198754;
    --tp-info: #0dcaf0;
    --tp-danger: #dc3545;
    --tp-brand-green: #7ACC2D; /* REPLACE with your actual green */
    --tp-brand-green-rgb: 122, 204, 45; /* RGB version of your green */
    --tp-brand-green-darker: #62a324; /* A slightly darker version for hover/borders if needed */
    --tp-brand-green-subtle: rgba(var(--tp-brand-green-rgb), 0.1); /* For light backgrounds */


    /* Typography */
    --tp-font-sans-serif: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tp-font-headings: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* UI Elements */
    --tp-border-radius: 0.375rem;
    --tp-border-radius-sm: 0.25rem;
    --tp-border-radius-lg: 0.5rem;
    --tp-box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    --tp-box-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
    --tp-transition: all 0.2s ease-in-out;
}

/* --- GLOBAL STYLES --- */
html {
    box-sizing: border-box;
    scroll-padding-top: 85px; /* Adjust to your fixed navbar height + a little buffer */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}
*, *::before, *::after {
    box-sizing: inherit;
}
body {
    font-family: var(--tp-font-sans-serif);
    color: var(--tp-dark);
    background-color: var(--tp-medium-light); /* Changed for less starkness */
    line-height: 1.65;
    padding-top: 70px; /* Default fixed top navbar height */
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.wrapper {
    flex-grow: 1;
    width: 100%;
}
/* Body padding for fixed bottom nav on mobile */
@media (max-width: 991.98px) { /* lg breakpoint, when mobile bottom nav is visible */
    body.has-mobile-bottom-nav { /* Add this class to body via JS if mobile nav is present */
        padding-bottom: 56px; /* Height of mobile bottom nav */
    }
}
@media (max-width: 576px) { /* Adjust breakpoint as needed (e.g., Bootstrap's sm breakpoint) */
    .post-form-card .btn-group .btn,
    .post-form-card button[name="submitPost"] {
        padding: 0.35rem 0.5rem; /* Reduce button padding */
        font-size: 0.8rem;     /* Slightly smaller font/icon */
    }
    .post-form-card .d-flex.align-items-center {
        gap: 0.25rem !important; /* Reduce gap between btn-group and post button */
    }
    .post-form-card .btn-group {
        gap: 0.1rem; /* Reduce gap between icon buttons if they are individual */
    }
}
@media (max-width: 400px) { /* Example very small screen breakpoint */
    .post-form-card button[name="submitPost"] .button-text {
        display: none; /* Hide text "Post" */
    }
    .post-form-card button[name="submitPost"] i {
        margin-left: 0 !important; /* Remove margin if text is hidden */
    }
    .post-form-card button[name="submitPost"] {
         min-width: 40px; /* Ensure it has some width for the icon */
    }
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--tp-font-headings);
    font-weight: 700;
    color: var(--tp-primary);
    margin-top: 0;
    margin-bottom: 0.75rem;
}
a {
    color: var(--tp-secondary);
    text-decoration: none;
    transition: var(--tp-transition);
}
a:hover {
    color: var(--tp-accent);
}
/* In style.css */
.card-header.header-brand-green { /* Create a specific class */
background-image: url('/images/site_images/card-header-bk-green.png');
/*	opacity: 0.5;*/
  background-repeat: repeat;
    background-color: var(--tp-brand-green);
    color: var(--tp-white); /* White text usually looks good on vibrant green */
    border-bottom: 1px solid var(--tp-brand-green-darker); /* Optional darker border */
}
.card-header.header-brand-green .small,
.card-header.header-brand-green a.small { /* For "View All" links */
    color: rgba(var(--tp-white-rgb, 255, 255, 255), 0.85);
}
.card-header.header-brand-green a.small:hover {
    color: var(--tp-white);
}
.card-header.header-brand-green .card-title { /* If you use h5.card-title in header */
    color: var(--tp-white);
}
/* In style.css */
.card-header.header-brand-green-tint { /* Create a specific class */
    background-color: var(--tp-brand-green-subtle); /* e.g., rgba(122, 204, 45, 0.1) */
    color: var(--tp-primary); /* Keep dark text for readability */
    border-bottom: 1px solid rgba(var(--tp-brand-green-rgb), 0.2); /* Slightly more saturated border */
}
.card-header.header-brand-green-tint .small {
    color: var(--tp-brand-green); /* Make "View All" links the brand green */
}
.card-header.header-brand-green-tint .small:hover {
    color: var(--tp-brand-green-darker);
}
/* --- UTILITIES --- */
.text-accent { color: var(--tp-accent) !important; }
.bg-accent { background-color: var(--tp-accent) !important; }
.border-accent { border-color: var(--tp-accent) !important; }
.bg-primary-subtle { background-color: rgba(var(--tp-primary-rgb), 0.05); }
.bg-secondary-subtle { background-color: rgba(var(--tp-secondary-rgb), 0.05); }
.bg-accent-subtle { background-color: rgba(var(--tp-accent-rgb), 0.05); }

/* --- BUTTONS --- */
.btn {
    border-radius: var(--tp-border-radius);
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    transition: var(--tp-transition);
    border-width: 1px; /* Ensure all buttons have a consistent border width for outline versions */
}
.btn:focus, .btn.focus { /* General focus style for accessibility */
    box-shadow: 0 0 0 .25rem rgba(var(--tp-secondary-rgb), 0.4);
}
.btn-primary {
    background-color: var(--tp-primary);
    border-color: var(--tp-primary);
    color: var(--tp-white);
}
.btn-primary:hover {
    background-color: color-mix(in srgb, var(--tp-primary), #000 10%);
    border-color: color-mix(in srgb, var(--tp-primary), #000 10%);
    color: var(--tp-white);
}
.btn-secondary {
    background-color: var(--tp-secondary);
    border-color: var(--tp-secondary);
    color: var(--tp-white);
}
.btn-secondary:hover {
    background-color: color-mix(in srgb, var(--tp-secondary), #000 10%);
    border-color: color-mix(in srgb, var(--tp-secondary), #000 10%);
    color: var(--tp-white);
}
.btn-accent, .btn-warning {
    background-color: var(--tp-accent);
    border-color: var(--tp-accent);
    color: var(--tp-white);
}
.btn-accent:hover, .btn-warning:hover {
    background-color: var(--tp-accent-hover);
    border-color: var(--tp-accent-hover);
    color: var(--tp-white);
}
.btn-accent:focus, .btn-warning:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--tp-accent-rgb), 0.5);
}
.btn-light {
    background-color: var(--tp-medium-light);
    border-color: var(--tp-border);
    color: var(--tp-dark);
}
.btn-light:hover {
    background-color: color-mix(in srgb, var(--tp-medium-light), #000 5%);
    border-color: color-mix(in srgb, var(--tp-border), #000 10%);
}
.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
}
.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
}


/* --- CARDS --- */
.card {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-border-radius-lg);
    box-shadow: var(--tp-box-shadow-sm);
    margin-bottom: 1.5rem;
    overflow: hidden;
    background-color: var(--tp-white); /* Ensure cards are white on non-white body */
}
.card-header {
    background-color: var(--tp-light);
    border-bottom: 1px solid var(--tp-border);
    padding: 0.75rem 1.25rem;
    font-family: var(--tp-font-headings);
    font-weight: 600;
    color: var(--tp-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-body { padding: 1.25rem; }
.card-footer {
    background-color: var(--tp-light);
    border-top: 1px solid var(--tp-border);
    padding: 0.75rem 1.25rem;
}
.card-img-top {
    width: 100%;
    object-fit: cover;
    border-top-left-radius: calc(var(--tp-border-radius-lg) - 1px); /* Account for border */
    border-top-right-radius: calc(var(--tp-border-radius-lg) - 1px);
}
/*----------LOGIN PAGE-------------- */
.login-card-img-left {
    width: 50%;
    /* Link to your background image using in the property below! */
    background: scroll center url("../images/site_images/Lu-Login-transparent-512x512.png");
    background-size: cover; 
}
card-signin {
    border: 0;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card-signin .card-title {
    margin-bottom: 2rem;
    font-weight: 300;
    font-size: 1.5rem;
}

.card-signin .card-img-left {
    width: 45%;
    /* Link to your background image using in the property below! */
    background: scroll center url("../images/site_images/register-backgroung.jpg");
    background-size: cover;
}

.card-signin .card-body {
    padding: 2rem;
}

.form-signin {
    width: 100%;
}

.form-signin .btn {
    font-size: 80%;
    letter-spacing: .1rem;
    font-weight: bold;
    padding: 1rem;
    transition: all 0.2s;
}

/* --- FORMS --- */
.form-control {
    border-radius: var(--tp-border-radius);
    border: 1px solid var(--tp-border);
    padding: 0.5rem 0.85rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background-color: var(--tp-white); /* Ensure form inputs have white background */
}
.form-control:focus {
    border-color: var(--tp-accent);
    box-shadow: 0 0 0 .2rem rgba(var(--tp-accent-rgb), 0.25);
    background-color: var(--tp-white); /* Maintain white bg on focus */
}
.form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--tp-primary);
}
/* Your existing .form-label-group styles adapted */
.form-label-group { /* (Keep as is from previous style.css if working) */
    position: relative; margin-bottom: 1rem;
}
.form-label-group input { height: auto; border-radius: var(--tp-border-radius); }
.form-label-group > input, .form-label-group > label { padding: var(--input-padding-y) var(--input-padding-x); }
.form-label-group > label {
    position: absolute; top: 0; left: 0; display: block; width: 100%; margin-bottom: 0;
    line-height: 1.5; color: var(--tp-muted); border: 1px solid transparent;
    border-radius: var(--tp-border-radius); transition: all .1s ease-in-out; pointer-events: none;
}
.form-label-group input::-webkit-input-placeholder { color: transparent; }
.form-label-group input:-ms-input-placeholder { color: transparent; }
.form-label-group input::-ms-input-placeholder { color: transparent; }
.form-label-group input::-moz-placeholder { color: transparent; }
.form-label-group input::placeholder { color: transparent; }
.form-label-group input:not(:placeholder-shown) {
    padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
    padding-bottom: calc(var(--input-padding-y) / 3);
}
.form-label-group input:not(:placeholder-shown) ~ label {
    padding-top: calc(var(--input-padding-y) / 3); padding-bottom: calc(var(--input-padding-y) / 3);
    font-size: 12px; color: var(--tp-muted);
}
.form-label-group input:focus ~ label { color: var(--tp-accent); }
.form-floating > .form-control, .form-floating > .form-select {
    background-color: var(--tp-white); /* Ensure Bootstrap floating labels have white bg */
}
.form-floating > label { color: var(--tp-muted); }


/* --- NAVBAR (Top Fixed) --- */
.navbar.fixed-top {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1030;
    box-shadow: var(--tp-box-shadow-sm);
    padding-top: 0.75rem; /* Adjusted padding */
    padding-bottom: 0.75rem;
    background-color: var(--tp-dark) !important; /* Override Bootstrap's .bg-dark if needed for specificity */
}
.navbar-brand img { max-height: 45px; width: auto; } /* Adjusted logo height */

.navbar-dark .navbar-nav .nav-link {
    font-weight: 600;
    padding: 0.4rem 0.9rem; /* Adjusted padding */
    color: rgba(255,255,255,0.75); /* Slightly less bright for non-active */
    transition: var(--tp-transition);
    border-radius: var(--tp-border-radius-sm);
    margin: 0 0.15rem;
}
.navbar-dark .navbar-nav .nav-link:hover { color: var(--tp-white); }
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--tp-accent);
    /* background-color: rgba(var(--tp-accent-rgb), 0.15); */
}
.navbar-dark .navbar-toggler { border-color: rgba(255,255,255,0.1); }
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler .badge {
    font-size: 0.6em; padding: 0.25em 0.45em;
    position: absolute; top: 8px; right: 8px; transform: none;
}

.dropdown-menu {
    border-radius: var(--tp-border-radius);
    box-shadow: var(--tp-box-shadow);
    border: 1px solid var(--tp-border);
    padding: 0.5rem 0;
    background-color: var(--tp-white);
}
.dropdown-item {
    padding: 0.5rem 1.25rem;
    color: var(--tp-dark);
    font-weight: 500;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--tp-medium-light);
    color: var(--tp-primary);
}
.dropdown-item.active, .dropdown-item:active { /* For active state in dropdowns if used */
    background-color: var(--tp-accent);
    color: var(--tp-white);
}
.dropdown-divider { border-top: 1px solid var(--tp-border); }

/* Scrolled Navbar Style */
.navbar.scrolled {
    background-color: rgba(var(--tp-dark-rgb), 0.97) !important; /* Darken on scroll */
    box-shadow: var(--tp-box-shadow);
    transition: background-color 0.3s ease-in-out;
}

/* --- INDEX.PHP SPECIFIC STYLES --- */
.hero-section {
    position: relative; background-color: var(--tp-primary);
    background-repeat: no-repeat; background-position: center center; background-size: cover;
    padding: 5rem 1.5rem; color: var(--tp-white); text-align: center;
}
.hero-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(var(--tp-primary-rgb), 0.5), rgba(var(--tp-primary-rgb), 0.8));
}
.hero-content { position: relative; z-index: 1; }
.hero-logo { max-width: 150px; height: auto; margin-bottom: 1.5rem; }
.hero-section h1 { color: var(--tp-white); text-shadow: 1px 1px 3px rgba(0,0,0,0.3); font-size: 2.8rem; margin-bottom: 0.75rem;}
.hero-section .lead { color: rgba(255,255,255,0.9); font-weight: 400; max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 1.5rem;}
.hero-section .btn-accent { padding: 0.85rem 2.25rem; font-size: 1.1rem; text-transform: uppercase; }

.sec-about, .sec-features, .sec-testimonials, .sec-contact { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.sec-about h1.display-5 {color: var(--tp-primary);} /* From your index.php structure */
.sec-about h2 { color: var(--tp-secondary); margin-top: 2rem; font-size: 1.75rem; }
.sec-about ul.fa-ul { margin-left: 2.2em; } /* Ensure fa-ul has proper margin */
.sec-about ul.fa-ul li { margin-bottom: 0.75rem; font-size: 1.05rem; line-height: 1.7; }
.sec-about ul.fa-ul .fa-li { color: var(--tp-accent); }

.stat-block {
    background-color: var(--tp-white); padding: 2rem 1.5rem;
    border-radius: var(--tp-border-radius-lg); box-shadow: var(--tp-box-shadow);
    transition: var(--tp-transition); margin-bottom: 1.5rem; text-align: center;
}
.stat-block:hover { transform: translateY(-5px); }
.stat-block .stat-icon { font-size: 2.5rem; color: var(--tp-accent); margin-bottom: 0.75rem; display: block; }
.stat-block h4 { font-size: 2.25rem; color: var(--tp-primary); margin-bottom: 0.15rem; }
.stat-block h5 { color: var(--tp-muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0; }

.sec-features { background-color: var(--tp-light); } /* Differentiate section */
.sec-features .feature-item {
    text-align: center; margin-bottom: 2rem; background-color: var(--tp-white);
    padding: 2rem; border-radius: var(--tp-border-radius-lg); box-shadow: var(--tp-box-shadow);
    transition: var(--tp-transition); min-height: 100%; /* For equal height cards in a row */
}
.sec-features .feature-item:hover { transform: translateY(-5px); }
.sec-features .feature-icon-container {
    width: 70px; height: 70px; margin: 0 auto 1.25rem auto; background-color: rgba(var(--tp-accent-rgb), 0.1);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--tp-accent); font-size: 2.25rem;
}
.sec-features .feature-item h3 { color: var(--tp-primary); margin-bottom: 0.75rem; font-size: 1.4rem; }
.sec-features .feature-item p { color: var(--tp-muted); font-size: 0.95rem; }

.sec-testimonials { background-color: var(--tp-white); }
.sec-testimonials .carousel-item { padding: 0 10%; }
.sec-testimonials .blockquote {
    border-left: 4px solid var(--tp-accent); padding: 1.5rem 2rem;
    background-color: var(--tp-light); border-radius: var(--tp-border-radius);
    margin: 1rem auto 3.5rem auto; font-size: 1.05rem;
}
.sec-testimonials .blockquote footer { color: var(--tp-muted); font-style: italic; margin-top: 1rem; font-weight: 600; }
.sec-testimonials .carousel-indicators button {
    background-color: rgba(var(--tp-primary-rgb), 0.3); border-radius: 50%;
    width: 10px; height: 10px; margin: 0 4px; border: none;
}
.sec-testimonials .carousel-indicators .active { background-color: var(--tp-primary); }
.sec-testimonials .carousel-control-prev, .sec-testimonials .carousel-control-next { width: auto; }
.sec-testimonials .carousel-control-prev-icon, .sec-testimonials .carousel-control-next-icon {
    background-color: var(--tp-dark); border-radius: 50%;
    padding: 1.2rem; background-size: 50%; filter: invert(1);
}

.sec-contact { background-color: var(--tp-light); }
.sec-contact form .form-control { background-color: var(--tp-white); }


/* --- MAIN.PHP (NEWS FEED) STYLES --- */
/* Main content area for feed */
.main-feed-content-area {
    padding-top: 1.5rem; /* Space from navbar */
    padding-bottom: 1.5rem;
}

/* Sidebars in main.php */
/*.main-sidebar .card { margin-bottom: 1.5rem; }
.main-sidebar .card-header .small { color: var(--tp-accent); font-weight: 600; }
.main-sidebar .card-header .small:hover { text-decoration: underline; }
.main-sidebar .list-unstyled li {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--tp-border);
    font-size: 0.9rem;
}
.main-sidebar .list-unstyled li:last-child { border-bottom: none; }
.main-sidebar .list-unstyled a { color: var(--tp-primary); font-weight: 600; text-decoration: none; display: block;}
.main-sidebar .list-unstyled a:hover { color: var(--tp-accent); }
.main-sidebar .list-unstyled .text-muted { font-size: 0.8rem; }
.main-sidebar .sticky-top { top: 85px; z-index: 1019; }*/ /* Adjust top based on navbar height */

.recent-images-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.recent-images-strip img {
    width: 60px; height: 60px; object-fit: cover;
    border-radius: var(--tp-border-radius); border: 2px solid var(--tp-border);
    transition: var(--tp-transition);
}
.recent-images-strip img:hover { border-color: var(--tp-accent); transform: scale(1.05); }

/* Post Creation Form */
.post-form-card .card-header span { margin-right: 0.5rem; font-size: 1.3rem; color: var(--tp-accent); }
#postContent { min-height: 70px; font-size: 1.1rem; }
#previewContainer { margin-top: 0.75rem; margin-bottom: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
#previewContainer .preview-item img {
    max-width: 100px; max-height: 100px; display: block;
    border-radius: var(--tp-border-radius); border: 1px solid var(--tp-border); object-fit: cover;
}
#previewContainer .preview-item .remove-preview {
    top: -8px; right: -8px; width: 22px; height: 22px; line-height: 20px;
    background: var(--tp-danger); color: var(--tp-white); font-size: 14px;
    /* Other styles from previous CSS */
}
.post-form-card .btn-group .btn { border-color: var(--tp-border); } /* For icon buttons */
.post-form-card .btn-group .btn:hover { background-color: var(--tp-medium-light); }
.post-form-card .btn-group .btn i { color: var(--tp-muted); }
.post-form-card .btn-group .btn:hover i { color: var(--tp-primary); }
.post-form-card .btn-group .btn.active i { color: var(--tp-accent); } /* For active location button */


/* Post Card */
.post-card { box-shadow: var(--tp-box-shadow); }
.post-card .card-header { background-color: var(--tp-white); font-weight: normal; }
.post-card .card-header .avatar,
.post-card .card-header img.rounded-circle { /* User avatar in post header */
    width: 45px; height: 45px; object-fit: cover;
    border: 2px solid var(--tp-accent-subtle);
}
.post-card .card-header strong,
.post-card .card-header .fw-bold { color: var(--tp-primary); font-weight: 700; }
.post-card .card-header .text-muted { font-size: 0.85rem; }
.post-card .post-content-text {
    margin-bottom: 1rem; line-height: 1.7; color: var(--tp-dark);
    font-size: 1.05rem; word-wrap: break-word;
}
.post-card .post-content-text a { font-weight: 600; } /* Emphasize links in content */

.post-card .card-header {
    background-color: var(--tp-white); /* Base color */
    background-image: url('/images/site_images/card-header-bk-yellow.png'); /* Your pattern */
	/*opacity: 0.5;*/
    background-repeat: repeat;
    background-size: auto; /* Or e.g., '80px' */
    color: var(--tp-primary); /* Ensure text contrasts */
    /* ... other card-header styles ... */
    position: relative; /* For potential overlay */
    z-index: 1;
}

/* Optional overlay for better text readability if texture is busy */
.post-card .card-header::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(var(--tp-white-rgb), 0.75); /* Semi-transparent white overlay */
    z-index: -1;
    border-radius: var(--tp-border-radius-lg) var(--tp-border-radius-lg) 0 0;
}
.post-card .card-header > * { position: relative; z-index: 2; }

.post-media { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.post-media img.post-image {
    max-width: 100%; height: auto; border-radius: var(--tp-border-radius);
    cursor: pointer; border: 1px solid var(--tp-border);
}
.post-media.multiple-items img.post-image {
   flex: 1 1 calc(50% - 0.25rem); max-width: calc(50% - 0.25rem);
   aspect-ratio: 1 / 1; /* Make gallery images square-ish */
   object-fit: cover;
}
/* For a single image, let it take more space */
.post-media:not(.multiple-items) img.post-image {
    max-height: 500px; /* Limit height for very tall single images */
    object-fit: contain; /* Show full image if it's one */
    width: auto; /* Adjust width based on contain */
    margin: 0 auto; /* Center if narrower than container */
    display: block;
}


.post-card .controls {
    margin-top: 1rem; padding-top: 0.75rem;
    border-top: 1px solid var(--tp-medium-light);
    align-items: center; font-size: 0.9rem;
}
.post-card .controls .text-muted {
    cursor: pointer; padding: 0.35rem 0.65rem; border-radius: var(--tp-border-radius);
    transition: var(--tp-transition); color: var(--tp-muted); font-weight: 600;
}
.post-card .controls .text-muted:hover { background-color: var(--tp-medium-light); color: var(--tp-primary); }
.post-card .controls .text-muted i { margin-right: 0.4rem; font-size: 0.95em; }

.reactions-summary, .reply-reactions-summary { display: flex; align-items: center; gap: 0.3rem; }
.reaction-summary {
    font-size: 0.9rem; padding: 3px 5px; border-radius: var(--tp-border-radius-sm);
    cursor: pointer; background-color: var(--tp-medium-light);
    display: inline-flex; align-items: center;
}
.reaction-summary:hover { filter: brightness(0.95); }
.reaction-summary .count { font-size: 0.75rem; margin-left: 3px; color: var(--tp-muted); font-weight: normal;}
.reaction-you { background-color: var(--tp-accent-subtle); }
.reaction-you .count { color: var(--tp-accent); font-weight: bold;}


/* Reply Form & Replies */
.reply-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--tp-medium-light); }
.reply-form textarea.reply-text { min-height: 50px; font-size: 0.9rem; }
.reply-card {
    background-color: var(--tp-light); padding: 0.75rem;
    border-radius: var(--tp-border-radius); margin-top: 0.75rem;
    border-left: 3px solid var(--tp-secondary-subtle);
}
.reply-card .avatar-sm, /* Bootstrap class or custom if .avatar is too big */
.reply-card img.rounded-circle { width: 35px; height: 35px; object-fit: cover; border: 1px solid var(--tp-border); }
.reply-card strong, .reply-card .fw-bold { color: var(--tp-primary); font-weight: 600; font-size: 0.9rem;}
.reply-card .text-muted { font-size: 0.75rem; }
.reply-card .reply-content-text { font-size: 0.9rem; margin-bottom: 0.5rem; line-height: 1.6; word-wrap: break-word;}
.reply-card .reply-controls { gap: 0.5rem !important; font-size: 0.8rem;} /* Smaller controls for replies */
.reply-card .reply-controls .text-muted i { font-size: 0.9em;}


/* Lightbox */
#lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(var(--tp-dark-rgb),0.9); display: none; align-items: center;
    justify-content: center; z-index: 10060; cursor: pointer;
}
#lightbox-img {
    max-width: 90vw; max-height: 90vh; object-fit: contain;
    border-radius: var(--tp-border-radius-sm); box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
#lightbox .btn-close { font-size: 1.2rem; filter: invert(1) grayscale(100%) brightness(200%); }


/* GIPHY Modal */
#gifModal.modal { /* Target Bootstrap modal class if you switch to it */
    --bs-modal-bg: var(--tp-white);
    --bs-modal-border-radius: var(--tp-border-radius-lg);
    --bs-modal-box-shadow: var(--tp-box-shadow);
}
#gifModal .modal-content {
    background: var(--tp-white); padding: 0; /* Bootstrap handles padding */
    border-radius: var(--tp-border-radius-lg); box-shadow: var(--tp-box-shadow);
}
#gifModal .modal-header {
    border-bottom: 1px solid var(--tp-border); padding: 1rem 1.5rem;
}
#gifModal .modal-title { font-family: var(--tp-font-headings); color: var(--tp-primary); }
#gifModal .modal-body { padding: 1.5rem; }
#gifModal input[type="text"] { margin-bottom: 0.75rem; }
#gifModal .gif-results {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem;
    max-height: 50vh; overflow-y:auto; margin-bottom: 1rem; padding: 0.5rem;
    background-color: var(--tp-medium-light); border-radius: var(--tp-border-radius);
}
#gifModal .gif-results img {
    width: 100%; height: 100px; object-fit: cover; cursor: pointer;
    border: 2px solid transparent; border-radius: var(--tp-border-radius-sm); transition: var(--tp-transition);
}
#gifModal .gif-results img:hover { border-color: var(--tp-secondary); }
#gifModal .gif-results img.selected { border-color: var(--tp-accent); box-shadow: 0 0 0 2px var(--tp-accent); }
#gifModal .modal-footer { border-top: 1px solid var(--tp-border); padding: 1rem 1.5rem; }


/* Mobile Bottom Nav */
.mobile-bottom-nav {
    background-color: var(--tp-white);
    box-shadow: 0 -2px 5px rgba(0,0,0,0.08);
    padding: 0.1rem 0; /* Fine-tuned padding */
    border-top: 1px solid var(--tp-border);
}
.mobile-bottom-nav .nav-link {
    color: var(--tp-muted); display: flex; flex-direction: column;
    align-items: center; font-size: 0.7rem;
    padding: 0.4rem 0.2rem !important; /* More balanced padding */
    transition: color 0.15s ease-in-out;
    flex-grow: 1; /* Ensure items take up equal space */
}
.mobile-bottom-nav .nav-link i { font-size: 1.25rem; margin-bottom: 2px; line-height: 1; }
.mobile-bottom-nav .nav-link .label { display: block; line-height: 1; } /* Keep label visible */
.mobile-bottom-nav .nav-link:hover { color: var(--tp-secondary); }
.mobile-bottom-nav .nav-link.active,
.mobile-bottom-nav .nav-link.active i {
    color: var(--tp-accent) !important;
}
/* Badge on mobile nav item */
.mobile-bottom-nav .nav-link .badge {
    position: absolute;
    top: 2px; /* Adjust as needed */
    right: calc(50% - 20px); /* Adjust to center above icon somewhat */
    font-size: 0.6em;
    padding: 2px 4px;
    line-height: 1;
}


/* --- MISC & YOUR EXISTING STYLES (ADAPTED) --- */
.colorgraph { /* Kept as is */
    height: 5px; border-top: 0; background: #c4e17f; border-radius: 5px;
    background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}
.avatar { /* Good base style */
    width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
    display: inline-block; background-color: var(--tp-medium-light);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.toast-container { z-index: 10090 !important; }
.toast {
    border-radius: var(--tp-border-radius); box-shadow: var(--tp-box-shadow);
    background-color: var(--tp-dark); color: var(--tp-white); /* Default toast appearance */
}
.toast.bg-success { background-color: var(--tp-success) !important; color: var(--tp-white) !important; }
.toast.bg-danger { background-color: var(--tp-danger) !important; color: var(--tp-white) !important; }
.toast.bg-info { background-color: var(--tp-info) !important; color: var(--tp-dark) !important; } /* Info usually has dark text */
.toast.bg-warning { background-color: var(--tp-accent) !important; color: var(--tp-white) !important; }
.toast .toast-body { padding: 0.85rem 1rem; }
.toast .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Make close button white */

/* Edit Profile Page (example theming) */
#leftPanel { background-color: var(--tp-secondary); color: var(--tp-white); padding: 2rem; text-align: center; }
#rightPanel { padding: 2rem; min-height: 415px; }

/* Profile Card Container (from your CSS) */
.profile-card-container { width: 100%; max-width: 18rem; height: 100%; margin-left: auto; margin-right: auto; }
.profile-card-container .card-img-top { height: 200px; object-fit: cover; }
.profile-card-container .bio-desc-container { height: 70px; overflow-y: auto; font-size: 0.9rem; color: var(--tp-muted); margin-bottom: 0.5rem; }


/* --- FOOTER --- */
.footer {
    background-color: var(--tp-dark);
    color: rgba(var(--tp-white-rgb, 255,255,255), 0.7); /* Use white with opacity */
    padding: 3rem 0 1.5rem 0; /* More padding top */
    font-size: 0.9rem;
}
.footer h5, .footer h6 {
    color: var(--tp-white);
    font-family: var(--tp-font-headings);
    margin-bottom: 1rem;
}
.footer a {
    color: rgba(var(--tp-white-rgb, 255,255,255), 0.7);
    text-decoration: none;
}
.footer a:hover {
    color: var(--tp-accent);
    text-decoration: underline;
}
.footer .list-unstyled li {
    margin-bottom: 0.5rem;
}
.footer .social-icons a {
    font-size: 1.25rem;
    margin: 0 0.5rem;
    color: rgba(var(--tp-white-rgb, 255,255,255), 0.7);
}
.footer .social-icons a:hover {
    color: var(--tp-accent);
}
.footer hr {
    border-color: rgba(var(--tp-white-rgb, 255,255,255), 0.2);
}
.footer .copyright {
    padding-top: 1.5rem;
    font-size: 0.85rem;
    color: rgba(var(--tp-white-rgb, 255,255,255), 0.5);
}


/* In your /css/style.css */

/* --- MOBILE OFFCANVAS SWIPEABLE SIDEBAR --- */
#mobileSwipeSidebar { /* Targets the main offcanvas div */
    /* Bootstrap's .offcanvas-start already handles positioning and width */
    /* You can add overrides here if needed, e.g., max-width */
    /* max-width: 90vw; */ /* Example: Limit width if needed */
}

#mobileSwipeSidebar .offcanvas-header {
    background-color: var(--tp-light);
    border-bottom: 1px solid var(--tp-border);
    padding: 0.75rem 1.25rem; /* Adjust padding */
}

#mobileSwipeSidebar .offcanvas-title {
    color: var(--tp-primary);
    font-family: var(--tp-font-headings);
    font-weight: 600;
    font-size: 1.1rem; /* Adjust title size */
}

#mobileSwipeSidebar .offcanvas-body {
    padding: 0; /* Padding will be handled by individual slides or the slider container */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Critical: Prevent body scroll when offcanvas is open and content overflows vertically */
}

.mobile-sidebar-slider {
    flex-grow: 1; /* Allows the slider to take up available vertical space in the offcanvas body */
    position: relative; /* For absolute positioning of non-active slides for the fade effect */
    overflow: hidden;   /* Hide non-active slides if they were to actually slide horizontally */
    display: flex;      /* Though for absolute positioning of slides, this is less critical */
}

.mobile-sidebar-slide {
    min-width: 100%; /* Each slide takes full width of the slider */
    flex-shrink: 0;
    padding: 1rem 1.25rem; /* Padding within each slide for its content */
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    position: absolute;   /* Stack slides on top of each other for the fade effect */
    top: 0; left: 0; width:100%; height: 100%; /* Make slides cover the entire slider area */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* Fade transition */
    overflow-y: auto;   /* Allow individual slide content to scroll vertically if it's tall */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS for slide content */
}

.mobile-sidebar-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative; /* Active slide takes up space in the document flow (within offcanvas-body) */
    transition: opacity 0.3s ease-in-out; /* Fade in */
}

/* Styling for content within slides */
.mobile-sidebar-slide .slide-internal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tp-secondary); /* Or var(--tp-primary) */
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--tp-border);
}

/* Recent Uploads strip inside a mobile slide (Grid Layout) */
.recent-images-strip-mobile {
    display: grid;
    /* This will create columns that are:
       - At least 70px wide (min). Adjust this min value to influence column count.
       - At most 1fr (they will share the available space equally).
       - 'auto-fill' will create as many columns as fit in the container width.
       This should naturally give you 2-3 columns on most phone screens.
    */
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 0.75rem; /* Space between images */
    /* No overflow-x: auto; as items will wrap or fit the grid */
}

.recent-images-strip-mobile a { /* The link wrapping the image */
    display: block; /* Important for grid item behavior and aspect ratio */
    aspect-ratio: 1 / 1; /* Makes the link (and thus the grid cell) square */
    border-radius: var(--tp-border-radius-sm);
    overflow: hidden; /* Clips the image to the link's border-radius */
    border: 1px solid var(--tp-border);
    transition: var(--tp-transition);
}

.recent-images-strip-mobile a:hover {
    border-color: var(--tp-accent);
    transform: scale(1.03);
}

.recent-images-strip-mobile img {
    width: 100%;    /* Image fills its 'a' tag container */
    height: 100%;   /* Image fills its 'a' tag container */
    object-fit: cover; /* Ensures image covers the square area without distortion */
    display: block;
}

/* "View All" link styled as a card-like item in the grid */
.recent-images-strip-mobile a.view-all-card-mobile-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* aspect-ratio: 1 / 1; /* Already on 'a', so this will inherit if 'a' is the direct element */
    border: 1px dashed var(--tp-muted);
    background-color: var(--tp-light);
    color: var(--tp-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    /* border-radius: var(--tp-border-radius-sm); /* Already on 'a' */
    transition: var(--tp-transition);
    padding: 0.5rem; /* Add some padding */
}

.recent-images-strip-mobile a.view-all-card-mobile-link:hover {
    background-color: var(--tp-medium-light);
    border-color: var(--tp-accent);
    color: var(--tp-accent);
}


/* General list styling for other sidebar slides (Forums, Events) */
.mobile-sidebar-list {
    margin-bottom: 0;
    padding-left: 0; /* Remove default ul padding */
    list-style: none; /* Remove default list bullets */
}

.mobile-sidebar-list li {
    padding: 0.75rem 0; /* Increased padding for better tap targets */
    border-bottom: 1px solid var(--tp-medium-light);
}

.mobile-sidebar-list li:last-child {
    border-bottom: none;
}

.mobile-sidebar-list a { /* The link itself within the list item */
    font-size: 0.9rem; /* Readable font size */
    font-weight: 500;
    display: block;
    color: var(--tp-primary);
    text-decoration: none;
}
.mobile-sidebar-list a .fw-bold { /* If title inside link is bolded */
    color: var(--tp-primary); /* Ensure bolded text has good color */
}

.mobile-sidebar-list a:hover,
.mobile-sidebar-list a:hover .fw-bold {
    color: var(--tp-accent);
}

.mobile-sidebar-list small.text-muted { /* Sub-text like dates or locations */
    font-size: 0.8rem;
    display: block; /* Ensure it takes its own line if needed */
    margin-top: 0.15rem;
}
.mobile-sidebar-list small.text-muted i.fas { /* Icons in sub-text */
    margin-right: 0.3rem;
    width: 1em; /* Ensure icons align well */
}

/* Navigation controls within the offcanvas footer */
.mobile-sidebar-nav {
    padding: 0.75rem 1.25rem; /* Match slide padding */
    background-color: var(--tp-light);
    border-top: 1px solid var(--tp-border);
    flex-shrink: 0; /* Prevent this nav from shrinking if slide content is short */
}

.mobile-sidebar-nav .btn {
    padding: 0.375rem 0.75rem; /* Bootstrap's default .btn-sm padding */
    background-color: var(--tp-white); /* Make buttons distinct from nav background */
    border-color: var(--tp-border);
    color: var(--tp-primary);
}
.mobile-sidebar-nav .btn:hover {
    background-color: var(--tp-medium-light);
}
.mobile-sidebar-nav .btn:disabled {
    background-color: var(--tp-medium-light);
    opacity: 0.65;
}
#mobileSidebarSlideIndicator {
    display: inline-block;
    min-width: 45px; /* Give it consistent space */
    font-weight: 500;
    color: var(--tp-muted);
}

#mobileSidebarDots {
    padding-bottom: 0.25rem; /* Little space below dots */
}
#mobileSidebarDots .dot {
    height: 9px; /* Slightly larger dots */
    width: 9px;
    margin: 0 4px;
    background-color: var(--tp-border);
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
#mobileSidebarDots .dot:hover {
    background-color: var(--tp-secondary);
}
#mobileSidebarDots .dot.active {
    background-color: var(--tp-accent);
    transform: scale(1.2); /* Make active dot slightly larger */
}
/* --- END MOBILE OFFCANVAS SWIPEABLE SIDEBAR --- */

/* Tab Styling for Profile View */
.nav-tabs { /* The tab buttons container */
    border-bottom: 1px solid var(--tp-border); /* Add a bottom border to the nav itself */
}
.nav-tabs .nav-item {
    margin-bottom: -1px; /* To make active tab border connect with content */
}
.nav-tabs .nav-link {
    font-family: var(--tp-font-headings);
    font-weight: 600;
    color: var(--tp-muted);
    background-color: var(--tp-light); /* Non-active tab background */
    border: 1px solid var(--tp-border);
    border-bottom-color: var(--tp-border); /* Ensure bottom border matches for non-active */
    border-radius: var(--tp-border-radius-sm) var(--tp-border-radius-sm) 0 0;
    margin-right: 2px; /* Small space between tabs */
    padding: 0.6rem 1rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.nav-tabs .nav-link:hover {
    border-color: var(--tp-medium-light) var(--tp-medium-light) var(--tp-accent);
    color: var(--tp-accent);
    background-color: var(--tp-medium-light);
}
.nav-tabs .nav-link.active {
    color: var(--tp-accent);
    background-color: var(--tp-white); /* Active tab background should match tab content pane */
    border-color: var(--tp-border) var(--tp-border) var(--tp-white); /* Top and side borders match, bottom "disappears" */
    /* border-bottom-color: transparent; /* Make bottom border of active tab transparent */
}

/* Tab Content Panes */
.tab-content > .tab-pane {
    background-color: var(--tp-white);
    padding: 1.25rem;
    border: 1px solid var(--tp-border);
    border-top: none; /* Top border is handled by active tab nav-link */
    border-radius: 0 0 var(--tp-border-radius-lg) var(--tp-border-radius-lg); /* Rounded bottom corners */
    box-shadow: var(--tp-box-shadow-sm);
    margin-bottom: 1.5rem; /* Spacing below tab content */
}
.tab-content > .tab-pane.active {
    /* Any specific styles for active pane if needed */
}

/* Photo Grid within Gallery Tabs */
.gallery-tab-pane .photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Adjust 100px min for desired thumbnail size */
    gap: 0.75rem;
}
.gallery-tab-pane .photo-grid-item a { /* The link wrapping the image */
    display: block;
    aspect-ratio: 1 / 1; /* Makes the link container square */
    border-radius: var(--tp-border-radius-sm);
    overflow: hidden; /* Clips the image to the link's border-radius */
    border: 1px solid var(--tp-border);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    background-color: var(--tp-light); /* Placeholder if image is slow to load */
}
.gallery-tab-pane .photo-grid-item a:hover {
    transform: scale(1.03);
    box-shadow: var(--tp-box-shadow);
    border-color: var(--tp-accent);
}
.gallery-tab-pane .photo-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the square area without distortion */
    display: block; /* Removes any extra space below the image */
}

/* Styles for member list items if not already covered adequately by Bootstrap */
.list-group-item .member-avatar-list-sm { /* Your class for member thumbs */
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 1px solid var(--tp-border);
}