:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary: #3b82f6;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --dark: #0f172a;
    --gray: #64748b;
    --light-gray: #f8fafc;
    --white: #ffffff;
    --shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
    --shadow-lg: 0 12px 25px rgba(37, 99, 235, 0.12);
    --radius: 12px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: transparent;
    color: var(--dark);
    line-height: 1.6;
    scroll-behavior: smooth;
     -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;



  transition: all 0.3s ease-in-out;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #666;
}




.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   NAVBAR WITH FIXED MOBILE SEARCH
   ============================================ */

/* ============================================
   NAVBAR & SEARCH
   ============================================ */

.navbar {
    background: linear-gradient(135deg, #ffffff 0%, #eef5ff 100%);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
    border-bottom: 1px solid #dbeafe;
    padding: 0.75rem 0;
    position: sticky;
    top: 33px;
    z-index: 1000;
}

.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.logo img {
    height: 42px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}

/* Desktop Search */
.desktop-search {
    display: flex;
    align-items: center;
    max-width: 320px;
    width: 100%;
    border: 1px solid #f28500;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
   background: #ffffff;
}



.desktop-search:focus-within {
    background: var(--white);
    border-color: #f28500;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.header-search-input,
.mobile-search-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.875rem;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    outline: none;
    color: var(--dark);
    font-family: 'Ubuntu', sans-serif;
}

.header-search-input::placeholder,
.mobile-search-input::placeholder {
    color: #94a3b8;
}

.header-search-btn,
.mobile-search-btn {
    padding: 0.5rem 0.875rem;
background:  linear-gradient(316deg, #f28500 0%, #ff6801 74%);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}



.header-search-btn:hover,
.mobile-search-btn:hover {
    background: var(--primary-dark);
}

/* Mobile Search Toggle Button */
.mobile-search-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background:  linear-gradient(316deg, #f28500 0%, #ff6801 74%);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Mobile Search Wrapper - CRITICAL FIX */
.mobile-search-wrapper {
    display: none;
    width: 100%;
    padding: 0.75rem 0;
    background: #f1f5f9;
    border-top: 1px solid #f28500;
    animation: slideDown 0.3s ease;
}

.mobile-search-wrapper.active {
    display: block !important;
}

.mobile-search-form {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid #f28500;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}



.mobile-search-form:focus-within {
 border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tablet */
@media (max-width: 768px) {
    .navbar {
        top: 30px;
    }
    
    .logo img {
        height: 36px;
        max-width: 130px;
    }
    
    .desktop-search {
        max-width: 260px;
    }
}

/* Mobile - Show toggle button, hide desktop search */
@media (max-width: 640px) {
    .desktop-search {
        display: none !important;
    }
    
    .mobile-search-toggle {
        display: flex !important;
    }
    
    .navbar {
        padding: 0.625rem 0;
    }
    
    .logo img {
        height: 32px;
        max-width: 110px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .navbar {
        top: 28px;
        padding: 0.5rem 0;
    }
    
    .logo img {
        height: 28px;
        max-width: 90px;
    }
    
    .mobile-search-toggle {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }
    
    .mobile-search-input {
        padding: 0.4375rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .mobile-search-btn {
        padding: 0.4375rem 0.75rem;
    }
}

/* Extra small */
@media (max-width: 360px) {
    .logo img {
        height: 24px;
        max-width: 75px;
    }
    
    .mobile-search-input {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
    }
    
    .mobile-search-btn {
        padding: 0.375rem 0.625rem;
    }
}
.btn-admin {
    background: var(--primary);
    color: var(--white) !important;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
}

.btn-admin:hover {
    background: var(--primary-dark);
}

/* ============================================
   ADVERTISEMENT BANNER
   ============================================ */

.ad-banner {
    background: radial-gradient(125% 125% at 50% 90%, #ffffff 40%, #0b84f5 100%);
    padding: 1.5rem 0;
    
}

.ad-banner .container {
    max-width: 1200px;
}

.ad-banner a {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ad-banner a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.ad-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .ad-banner {
        padding: 1rem;
    }
    
    .ad-banner a {
        border-radius: 8px;
    }
}


/* ============================================
   SEARCH OVERLAY
   ============================================ */

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.search-container {
    width: 90%;
    max-width: 500px;
    text-align: center;
    position: relative;
    padding: 2rem;
}

.search-close {
    position: absolute;
    top: -60px;
    right: 0;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.3s;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-close:hover {
    color: #ffffff;
}

.search-container h2 {
    color: #ffffff;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.search-container h2 i {
    color: #ec4899;
}

.search-input {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 2px solid #334155;
    border-radius: 16px;
    background: #1e293b;
    color: #ffffff;
    font-size: 1.125rem;
    margin-bottom: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

.search-input:focus {
    border-color: #ec4899;
}

.search-input::placeholder {
    color: #64748b;
}

.search-submit {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    color: #ffffff;
    border: none;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.search-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(236, 72, 153, 0.4);
}


.search-box button {
    padding: 1rem 2rem;
    background: var(--secondary);
    color: var(--white);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: opacity 0.3s;
}

.search-box button:hover {
    opacity: 0.9;
}

/* Categories */
.categories-section {
    padding: 3rem 0;
}

.section-title {
    text-align: center;
    margin-bottom: 2rem;
  font-family: 'Roboto', sans-serif;
font-size: 20px;
letter-spacing: 3px;
word-spacing: 1px;
color: #a3a3a3;
font-weight: normal;
text-decoration: none;
font-style: normal;
font-variant: small-caps;
text-transform: none;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
}

.category-card {
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid #e0ecff;
    text-align: center;
    text-decoration: none;
    color: var(--dark);
    box-shadow: var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s;
    
    
    
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    color: var(--primary);
}

.category-card i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

/* Posts Grid */
.posts-section {
    padding: 3rem 0;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.post-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-radius: var(--radius);
     border: 1px solid #e0ecff;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    
    
    }

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

.post-thumbnail {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: var(--light-gray);
}

.post-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #FE9A37;
    color: var(--white);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.post-badge.featured {
    background: var(--danger);
}

.post-content {
    padding: 1.25rem;
}

.post-category {
    color: #991E2C;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.post-title {
    font-size: 1.125rem;
    margin: 0.5rem 0;
    color: var(--dark);
    line-height: 1.4;
}

.post-description {
    color: var(--gray);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--light-gray);
}

.post-price {
    font-size: 1.25rem;
    font-weight: bold;
    color: #FE9A37;
}

.post-location {
    color: var(--gray);
    font-size: 0.875rem;
}

.post-meta {
    display: flex;
    gap: 1rem;
    color: var(--gray);
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

/* Admin Layout */
.admin-layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 260px;
     background: linear-gradient(135deg, #1e3a8a, #2563eb);
    color: #ffffff;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
}

.sidebar-menu {
    list-style: none;
    padding: 1rem 0;
   
}

.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
   color: #ffffff;
    text-decoration: none;
    transition: all 0.3s;
}

.sidebar-menu li a:hover,
.sidebar-menu li a.active {
    background: linear-gradient(to right, #D31027 0%, #EA384D 51%, #D31027 100%);
    color: var(--white);
    border-left: 3px solid var(--primary);
}

.sidebar-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.sidebar-footer a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Admin Main */
.admin-main {
    flex: 1;
    margin-left: 260px;
    background: transparent;
    min-height: 100vh;
}

/* Admin header actions */
.admin-header {
    background: var(--white);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 50;
}

.admin-header > div {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-header span {
    color: var(--gray);
    font-size: 0.875rem;
}

/* Danger button for logout */
.btn-danger {
    background: var(--danger);
    color: var(--white);
}

.btn-danger:hover {
    background: #dc2626;
    opacity: 0.9;
}

.admin-content {
    padding: 2rem;
}

/* Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e0ecff;
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-icon.blue { background: #dbeafe; color: var(--primary); }
.stat-icon.green { background: #d1fae5; color: var(--success); }
.stat-icon.orange { background: #fef3c7; color: var(--secondary); }
.stat-icon.red { background: #fee2e2; color: var(--danger); }

.stat-info h3 {
    font-size: 2rem;
    color: var(--dark);
}

.stat-info p {
    color: var(--gray);
    font-size: 0.875rem;
}

/* Charts Section */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.chart-card {
     background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e0ecff;
    transition: transform 0.3s, box-shadow 0.3s;
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.chart-card h3 {
    margin-bottom: 1rem;
    color: var(--dark);
}

/* Tables */
.data-table {
    width: 100%;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.data-table table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--light-gray);
}

.data-table th {
    background: var(--light-gray);
    font-weight: 600;
    color: var(--dark);
}

.data-table tr:hover {
    background: #f9fafb;
}

.table-actions {
    display: flex;
    gap: 0.5rem;
}

/* Buttons */
.btn {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-success {
    background: var(--success);
    color: var(--white);
}

.btn-danger {
    background: var(--danger);
    color: var(--white);
}

.btn-warning {
    background: var(--warning);
    color: var(--white);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

/* Forms */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--dark);
}

.form-group input[type="file"] {
    width: 100%;
    padding: 12px;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    color: #555;
}

.form-group input[type="file"]:hover {
    border-color: #f5b027;
    background: #fff8e8;
}

.form-group input[type="file"]:focus {
    outline: none;
    border-color: #f5b027;
    box-shadow: 0 0 0 4px rgba(245, 176, 39, 0.18);
}

/* Upload Button */
input[type="file"].form-control::file-selector-button {
    background: linear-gradient(135deg, #f5b027, #ff9800);
    color: #fff;
    border: none;
    padding: 10px 18px;
    margin-right: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

input[type="file"].form-control::file-selector-button:hover {
    background: linear-gradient(135deg, #e69c00, #ff7b00);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(245, 176, 39, 0.35);
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);

}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

/* Image Upload */
.image-upload {
    border: 2px dashed #d1d5db;
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s;
}

.image-upload:hover {
    border-color: var(--primary);
}

.image-upload i {
    font-size: 3rem;
    color: var(--gray);
    margin-bottom: 1rem;
}

.image-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.preview-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.preview-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.preview-item .remove {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--danger);
    color: var(--white);
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Login Page */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(125% 125% at 50% 90%, #ffffff 40%, #0b84f5 100%);
}

.login-box {
     background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e0ecff;
    transition: transform 0.3s, box-shadow 0.3s;
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 400px;
}

.login-box h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--dark);
}

.login-box .logo {
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

.alert {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Profile */
.profile-header {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--light-gray);
}

.profile-info h3 {
    font-size: 1.5rem;
    color: var(--dark);
}

.profile-info p {
    color: var(--gray);
}

/* Status badges */
.status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status.active { background: #d1fae5; color: #065f46; }
.status.pending { background: #fef3c7; color: #92400e; }
.status.sold { background: #e5e7eb; color: #374151; }

/* Footer */
.footer {
    background: transparent;
    color: var(--white);
    text-align: center;
    padding: 5rem 0;
    margin-top: 0rem;
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        position: relative;
        height: auto;
    }
    
    .admin-main {
        margin-left: 0;
    }
    
    .admin-layout {
        flex-direction: column;
    }
    
    .hero-header h1 {
        font-size: 2rem;
    }
    
    .stats-grid,
    .charts-grid {
        grid-template-columns: 1fr;
    }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.post-card,
.stat-card,
.category-card {
    animation: fadeIn 0.5s ease-out;
}

/* Post Card Improvements */
.post-image-wrapper {
    position: relative;
    overflow: hidden;
}

.post-thumbnail {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: var(--light-gray);
    transition: transform 0.3s;
}

.post-card:hover .post-thumbnail {
    transform: scale(1.05);
}

.post-category-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--primary);
    color: var(--white);
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    border-top-right-radius: var(--radius);
}

.post-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--secondary);
    color: var(--white);
    padding: 0.375rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 2;
}

.post-badge.featured {
    background: var(--danger);
}

.post-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.post-status.active {
    background: #497D15;
    color: #FEE685;
}

.post-status.pending {
    background: #fef3c7;
    color: #92400e;
}

.post-status.sold {
    background: #e5e7eb;
    color: #374151;
}

/* Rich Text Editor */
.editor-toolbar {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 0.5rem;
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.editor-toolbar button {
    background: var(--white);
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 0.375rem 0.625rem;
    cursor: pointer;
    color: var(--dark);
    transition: all 0.2s;
}

.editor-toolbar button:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.rich-editor {
    min-height: 300px;
    border: 1px solid #d1d5db;
    border-radius: 0 0 8px 8px;
    padding: 1rem;
    background: var(--white);
    overflow-y: auto;
    line-height: 1.6;
}

.rich-editor:focus {
    outline: none;
    border-color: var(--primary);
}

.rich-editor p {
    margin-bottom: 0.75rem;
}

.rich-editor ul, .rich-editor ol {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.editor-status {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 8px 8px;
    font-size: 0.75rem;
    color: var(--gray);
}

/* Image Upload Areas */
.image-upload {
    border: 2px dashed #d1d5db;
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #f9fafb;
}

.image-upload:hover {
    border-color: var(--primary);
    background: #f0f9ff;
}

.image-upload i {
    font-size: 2.5rem;
    color: var(--gray);
    margin-bottom: 0.75rem;
}

.image-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.preview-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
}

.preview-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.preview-item .remove {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--danger);
    color: var(--white);
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
    .posts-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
    
    .editor-toolbar {
        gap: 0.125rem;
    }
    
    .editor-toolbar button {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}


/* Post Detail Page */
.post-detail-header {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border-bottom: 1px solid #e0ecff;
    padding: 1rem 0;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--gray);
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span:last-child {
    color: var(--dark);
    font-weight: 500;
}

.post-detail {
    padding: 2rem 0;
}

.post-detail-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
}
/* Post Images */
.post-images {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Small size images */
.post-images img {
    width: 120px;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

/* Gallery thumbnails small preview */
.gallery-thumbs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.gallery-thumbs .thumb {
    width: 70px; /* small preview size */
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.gallery-thumbs .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-thumbs .thumb:hover,
.gallery-thumbs .thumb.active {
    border-color: #2563eb;
    transform: scale(1.05);
}

.main-image {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--light-gray);
}

.main-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
}

.featured-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--danger);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.gallery-thumbs {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.thumb {
    min-width: 80px;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.7;
    transition: all 0.3s;
}

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

.thumb.active,
.thumb:hover {
    border-color: var(--primary);
    opacity: 1;
}

/* Post Info */
.post-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.post-info-header {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.post-category-tag {
    background: var(--primary);
    color: var(--white);
    padding: 0.375rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.post-status-badge {
    padding: 0.375rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.post-status-badge.active {
    background: #d1fae5;
    color: #065f46;
}

.post-status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.post-status-badge.sold {
    background: #e5e7eb;
    color: #374151;
}

.post-title-large {
    font-size: 2rem;
    color: var(--dark);
    line-height: 1.3;
}

.post-price-large {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--success);
}

.post-meta-detail {
    display: flex;
    gap: 1.5rem;
    color: var(--gray);
    font-size: 0.875rem;
    padding: 1rem 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.post-description-full h3,
.post-location-detail h3,
.contact-box h3,
.share-buttons h3 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    color: var(--dark);
}

.description-content {
    color: var(--gray);
    line-height: 1.7;
}

.description-content p {
    margin-bottom: 0.75rem;
}

.post-location-detail {
    background: #f0f9ff;
    padding: 1rem;
    border-radius: var(--radius);
}

.post-location-detail p {
    color: var(--gray);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Contact Box */
.contact-box {
     background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e0ecff;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: var(--radius);
    padding: 1.5rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.contact-item:last-child {
    border-bottom: none;
}

.contact-item i {
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-item label {
    display: block;
    font-size: 0.75rem;
    color: var(--gray);
    text-transform: uppercase;
}

.contact-item a {
    color: var(--dark);
    text-decoration: none;
    font-weight: 500;
}

.contact-item a:hover {
    color: var(--primary);
}

/* Share Buttons */
.share-icons {
    display: flex;
    gap: 0.75rem;
}

.share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 1.125rem;
    transition: transform 0.3s;
}

.share-btn:hover {
    transform: translateY(-3px);
}

.share-btn.facebook {
    background: #1877f2;
}

.share-btn.twitter {
    background: #1da1f2;
}

.share-btn.whatsapp {
    background: #25d366;
}

.share-btn.copy {
    background: var(--gray);
}

/* Related Posts */
.related-posts {
    padding: 3rem 0;
    background: var(--light-gray);
}

.related-posts .post-card {
    position: relative;
}

.related-posts .post-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Index page card as link */
.posts-grid .post-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .post-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .main-image img {
        height: 300px;
    }
    
    .post-title-large {
        font-size: 1.5rem;
    }
    
    .post-price-large {
        font-size: 1.875rem;
    }
    
    .post-meta-detail {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}


/* ============================================
   POST DETAIL PAGE STYLES
   ============================================ */

/* Post Detail Header / Breadcrumb */
.post-detail-header {
    background: var(--white);
    padding: 1rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--gray);
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumb a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.breadcrumb span {
    color: #9ca3af;
}

.breadcrumb span:last-child {
    color: var(--dark);
    font-weight: 500;
}

/* Post Detail Layout */
.post-detail {
    padding: 2rem 0;
    background: var(--light-gray);
    min-height: calc(100vh - 200px);
}

.post-detail-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
}

@media (max-width: 968px) {
    .post-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Post Images Section */
.post-images {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.main-image {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--light-gray);
    box-shadow: var(--shadow);
}

.main-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.main-image:hover img {
    transform: scale(1.02);
}

.featured-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--danger);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    z-index: 2;
    box-shadow: var(--shadow);
}

/* Gallery Thumbnails */
.gallery-thumbs {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}

.gallery-thumbs::-webkit-scrollbar {
    height: 6px;
}

.gallery-thumbs::-webkit-scrollbar-track {
    background: var(--light-gray);
    border-radius: 3px;
}

.gallery-thumbs::-webkit-scrollbar-thumb {
    background: var(--gray);
    border-radius: 3px;
}

.thumb {
    min-width: 90px;
    width: 90px;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    opacity: 0.6;
    transition: all 0.3s ease;
    position: relative;
}

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

.thumb.active {
    border-color: var(--primary);
    opacity: 1;
    box-shadow: var(--shadow);
}

.thumb:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Post Info Section */
.post-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.post-info-box {
     background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e0ecff;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.post-info-header {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.post-category-tag {
    background: var(--primary);
    color: var(--white);
    padding: 0.375rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.post-status-badge {
    padding: 0.375rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.post-status-badge.active {
    background: #d1fae5;
    color: #065f46;
}

.post-status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.post-status-badge.sold {
    background: #e5e7eb;
    color: #374151;
}

.post-title-large {
    font-size: 1.875rem;
    color: var(--dark);
    line-height: 1.3;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

@media (max-width: 768px) {
    .post-title-large {
        font-size: 1.5rem;
    }
}

.post-price-large {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--success);
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .post-price-large {
        font-size: 1.75rem;
    }
}

.post-meta-detail {
    display: flex;
    gap: 1.5rem;
    color: var(--gray);
    font-size: 0.875rem;
    padding: 1rem 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.post-meta-detail span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.post-meta-detail i {
    color: var(--primary);
}

/* Description Section */
.post-description-full h3,
.post-location-detail h3,
.contact-box h3,
.share-buttons h3 {
    font-size: 1rem;
    margin-bottom: 0.875rem;
    color: var(--dark);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.description-content {
    color: var(--gray);
    line-height: 1.8;
    font-size: 0.9375rem;
}

.description-content p {
    margin-bottom: 0.875rem;
}

.description-content ul,
.description-content ol {
    margin-left: 1.5rem;
    margin-bottom: 0.875rem;
}

.description-content li {
    margin-bottom: 0.375rem;
}

.description-content a {
    color: var(--primary);
    text-decoration: none;
}

.description-content a:hover {
    text-decoration: underline;
}

.description-content strong {
    color: var(--dark);
}

.description-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 1rem 0;
}

/* Location Section */
.post-location-detail {
    background: #f0f9ff;
    padding: 1.25rem;
    border-radius: var(--radius);
    border-left: 4px solid var(--primary);
}

.post-location-detail p {
    color: var(--gray);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.post-location-detail i {
    color: var(--primary);
}

/* Contact Box */
.contact-box {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.contact-item:last-child {
    border-bottom: none;
}

.contact-item i {
    width: 42px;
    height: 42px;
    min-width: 42px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.contact-item div {
    flex: 1;
}

.contact-item label {
    display: block;
    font-size: 0.6875rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.125rem;
}

.contact-item a {
    color: var(--dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: color 0.3s;
}

.contact-item a:hover {
    color: var(--primary);
}

/* Share Buttons */
.share-buttons {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e0ecff;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.share-icons {
    display: flex;
    gap: 0.875rem;
}

.share-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.share-btn:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.share-btn.facebook {
    background: #1877f2;
}

.share-btn.twitter {
    background: #1da1f2;
}

.share-btn.whatsapp {
    background: #25d366;
}

.share-btn.copy {
    background: #6b7280;
}

/* Related Posts Section */
.related-posts {
    padding: 3rem 0;
    background: var(--light-gray);
    border-top: 1px solid #e5e7eb;
}

.related-posts .section-title {

    color: #1e3a8a;
    text-align: center;
    margin-bottom: 2rem;
}

/* Make index cards clickable */
.posts-grid .post-card {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

.posts-grid .post-card:hover {
    transform: translateY(-8px);
}

/* No results */
.no-results {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray);
}

.no-results i {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    color: #d1d5db;
}

.no-results p {
    font-size: 1.125rem;
}


/* ============================================
   BOTTOM TAB BAR - 3 ITEMS (Home, Category, Contact, Privacy)
   ============================================ */

.bottom-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 0;
    z-index: 1000;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    border-radius: 20px 20px 0 0;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 200;
    transition: all 0.3s ease;
    padding: 0.5rem 0.75rem;
    flex: 1;
    cursor: pointer;
}

.tab-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: all 0.3s ease;
}

.tab-icon i {
    font-size: 1.25rem;
    color: #ffffff;
    transition: all 0.3s ease;
}

.tab-item:hover .tab-icon {
    background: rgba(56, 189, 248, 0.1);
}

.tab-item:hover .tab-icon i {
    color: #38bdf8;
}

.tab-item.active .tab-icon {
    background: rgba(56, 189, 248, 0.15);
}

.tab-item.active .tab-icon i {
    color: #38bdf8;
}

.tab-item:hover {
    color: #38bdf8;
}

.tab-item.active {
    color: #38bdf8;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .bottom-tab-bar {
        padding: 0.5rem 0;
        border-radius: 16px 16px 0 0;
    }
    
    .tab-item {
        font-size: 0.625rem;
        padding: 0.375rem 0.5rem;
        gap: 0.25rem;
    }
    
    .tab-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    
    .tab-icon i {
        font-size: 1.125rem;
    }
}

@media (max-width: 360px) {
    .tab-item {
        padding: 0.375rem 0.25rem;
    }
    
    .tab-icon {
        width: 36px;
        height: 36px;
    }
}

/* ============================================
   BOTTOM TAB BAR - ALL EQUAL STYLE
   ============================================ */

.bottom-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 0;
    z-index: 1000;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    border-radius: 20px 20px 0 0;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 400;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    flex: 1;
    cursor: pointer;
}

.tab-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: all 0.3s ease;
}

.tab-icon i {
    font-size: 1.25rem;
    color: #ffffff;
    transition: all 0.3s ease;
}

.tab-item:hover .tab-icon {
    background: transparent;
}

.tab-item:hover .tab-icon i {
    color: #ffffff;
}

.tab-item.active .tab-icon {
    background: rgba(255, 255, 255, 0.15);
}

.tab-item.active .tab-icon i {
    color: #ffffff;
}

.tab-item:hover {
    color: #ffffff;
}

.tab-item.active {
    color: #ffffff;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .bottom-tab-bar {
        padding: 0.5rem 0;
        border-radius: 16px 16px 0 0;
    }
    
    .tab-item {
        font-size: 0.625rem;
        padding: 0.375rem 0.5rem;
        gap: 0.25rem;
    }
    
    .tab-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    
    .tab-icon i {
        font-size: 1.125rem;
    }
}

@media (max-width: 360px) {
    .tab-item {
        padding: 0.375rem 0.25rem;
    }
    
    .tab-icon {
        width: 36px;
        height: 36px;
    }
}   padding-bottom: 100px;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .bottom-tab-bar {
        padding: 0.375rem 0 0.5rem;
    }
    
    .tab-item {
        font-size: 0.625rem;
        padding: 0.25rem 0.5rem;
    }
    
    .tab-item i {
        font-size: 1.125rem;
    }
    
    .tab-center-btn {
        width: 50px;
        height: 50px;
    }
    
    .tab-center {
        top: -16px;
    }
}

/* ============================================
   CATEGORIES PAGE
   ============================================ */

.categories-page {
    padding: 3rem 0 50px;
    
}

.categories-grid-large {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.category-card-large {
         background: linear-gradient(135deg, #1e3a8a, #2563eb);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    box-shadow: 4px 13px 30px 1px rgba(37, 99, 235, 0.28);
    transition: all 0.3s ease;
    border: 0px solid transparent;
}

.category-card-large:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

/* ============================================
   CATEGORY IMAGE STYLES (REPLACES ICON)
   ============================================ */

.category-image-large {
    width: 300px;
    height: 150px;
    border-radius: 15px;
    overflow: hidden;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
    border: 1px solid #ffffff;
    transition: all 0.3s ease;
}

.category-image-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.category-card-large:hover .category-image-large {
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
    transform: translateY(-4px);
}

.category-card-large:hover .category-image-large img {
    transform: scale(1.1);
}

/* Remove old icon styles */
.category-icon-large,
.category-icon-large i {
    display: none;
}

.category-card-large h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.category-count {
    color: #8ce4ff;
    font-size: 0.875rem;
}

/* ============================================
   CONTACT PAGE
   ============================================ */

.contact-page {
    padding: 2rem 0 100px;
    background: transparent;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.contact-info-box,
.contact-form-box {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e0ecff;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
}

.contact-info-box h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--dark);
}

.contact-info-box > p {
    color: var(--gray);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.contact-info-item:last-child {
    border-bottom: none;
}

.contact-info-item i {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.contact-info-item div {
    flex: 1;
    min-width: 0;
}

.contact-info-item label {
    display: block;
    font-size: 0.75rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.contact-info-item a,
.contact-info-item span {
    color: var(--dark);
    text-decoration: none;
    font-weight: 600;
    word-break: break-word;
}

.contact-info-item a:hover {
    color: var(--primary);
}

/* Alert messages */
.alert {
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Form placeholder color */
.form-control::placeholder {
    color: #94a3b8;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-info-box,
    .contact-form-box {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .contact-info-box,
    .contact-form-box {
        padding: 1.25rem;
        border-radius: 0;
    }
    
    .contact-info-item i {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* ============================================
   TOP DATE/TIME BAR
   ============================================ */

.top-datetime-bar {
background-image: linear-gradient(316deg, #f28500 0%, #ff6801 74%);
    color: #e0f2fe;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 1001;
}

.top-datetime-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.datetime-left,
.datetime-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.datetime-left i,
.datetime-right i {
    color: #FFD86D;
    font-size: 0.875rem;
}

.timezone-badge {
    background: linear-gradient(to right, #D31027 0%, #EA384D 51%, #D31027 100%);
    color: #ffffff;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 0.25rem;
}

/* Adjust navbar since datetime bar is now sticky */
.navbar {
    position: sticky;
    top: 33px; /* Height of datetime bar */
    z-index: 1000;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .top-datetime-bar {
        font-size: 0.75rem;
        padding: 0.375rem 0;
    }
    
    .datetime-left i,
    .datetime-right i {
        font-size: 0.75rem;
    }
    
    .timezone-badge {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }
    
    .navbar {
        top: 30px;
    }
}

@media (max-width: 480px) {
    .top-datetime-bar .container {
        gap: 0.5rem;
    }
    
    .datetime-left {
        flex: 1;
    }
    
    .datetime-right {
        flex-shrink: 0;
    }
}



        .marquee {
            box-shadow: 0 0px 0px rgba(0, 0, 0, .1);
            border: 0px solid rgba(0, 0, 0, .15);
            border-radius: 5px;
            background-color: transparent;
            overflow: hidden;
            position: relative;
            height: 30px;
            width: 100%;
            /* Full width of its parent */
            white-space: nowrap;
        }

        .marquee p {
           font-family: 'Prompt', sans-serif;
font-size: 15px;
letter-spacing: 1px;
word-spacing: 0px;
color: #1e3a8a;
font-weight: bold;
            position: absolute;
            width: auto;
            height: 100%;
            margin: 0;
            line-height: 30px;
            text-align: center;
            /* Start off the right edge */
            transform: translateX(100%);
            /* Animate to the left */
            animation: scroll-left 20s linear infinite;
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(70%);
            }

            100% {
                transform: translateX(-100%);
            }
        }
        
        
        
        /* ============================================
   PRIVACY POLICY PAGE
   ============================================ */

.privacy-policy-page {
    padding: 2rem 0 100px;
    background: transparent;
}

.privacy-policy-content {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e0ecff;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: var(--shadow);
    max-width: 900px;
    margin: 0 auto;
}

.privacy-policy-content h1 {
    font-size: 2rem;
    color: var(--dark);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.privacy-policy-content h1 i {
    color: var(--primary);
}

.last-updated {
    color: var(--gray);
    font-size: 0.875rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--light-gray);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.policy-section {
    margin-bottom: 2rem;
}

.policy-section:last-child {
    margin-bottom: 0;
}

.policy-section h2 {
    font-size: 1.25rem;
    color: var(--dark);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.policy-section p {
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 0.875rem;
}

.policy-section ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.policy-section ul li {
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

.policy-section a {
    color: var(--primary);
    text-decoration: none;
}

.policy-section a:hover {
    text-decoration: underline;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .privacy-policy-content {
        padding: 1.5rem;
    }
    
    .privacy-policy-content h1 {
        font-size: 1.5rem;
    }
    
    .policy-section h2 {
        font-size: 1.125rem;
    }
}

@media (max-width: 480px) {
    .privacy-policy-content {
        padding: 1.25rem;
        border-radius: 0;
    }
    
    .privacy-policy-content h1 {
        font-size: 1.25rem;
    }
    
    .policy-section h2 {
        font-size: 1rem;
    }
    
    .policy-section p,
    .policy-section ul li {
        font-size: 0.875rem;
    }
}

hr.s1 {
    
  height:5px;
  border-top:1px solid #F5B027;
  border-bottom:2px solid #F5B027;
}

/* ============================================
   FULL-PAGE IMAGE LIGHTBOX WITH ZOOM
   ============================================ */

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    background: rgba(15, 23, 42, 0.98);
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

/* Full-page viewport for image */
.lightbox-viewport {
    position: relative;
    z-index: 2;
    width: 100vw;
    height: calc(100vh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
}

.lightbox-viewport img {
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
}

/* Zoom Controls - Top Center */
.lightbox-zoom-controls {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(16px);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.zoom-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.zoom-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: scale(1.15);
}

.zoom-btn:active {
    transform: scale(0.95);
}

.zoom-level {
    color: #e2e8f0;
    font-size: 0.8125rem;
    font-weight: 700;
    min-width: 52px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

/* Close Button - Top Right */
.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

.lightbox-close:hover {
    background: rgba(239, 68, 68, 0.9);
    border-color: transparent;
    transform: rotate(90deg) scale(1.1);
}

/* Navigation Arrows */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

.lightbox-nav:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-50%) scale(1.15);
}

.lightbox-prev {
    left: 1.5rem;
}

.lightbox-next {
    right: 1.5rem;
}

/* Caption - Bottom above thumbs */
.lightbox-caption {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: rgba(15, 23, 42, 0.7);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    pointer-events: none;
}

.lightbox-caption #lightboxCounter {
    font-size: 0.875rem;
    color: #94a3b8;
    font-weight: 500;
}

.lightbox-caption #lightboxTitle {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #ffffff;
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Thumbnail Strip - Bottom */
.lightbox-thumbs {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    max-width: 90vw;
    overflow-x: auto;
    scrollbar-width: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.lightbox-thumbs::-webkit-scrollbar {
    display: none;
}

.lightbox-thumb {
    min-width: 60px;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.5;
    transition: all 0.3s ease;
}

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

.lightbox-thumb.active {
    border-color: var(--primary);
    opacity: 1;
    transform: scale(1.05);
}

.lightbox-thumb:hover {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.5);
}

/* Main Image Zoom Hint */
.image-zoom-hint {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.main-image:hover .image-zoom-hint {
    opacity: 1;
}

.main-image {
    cursor: pointer;
}

/* Hide nav if single image */
.lightbox-overlay:has(.lightbox-thumbs > :only-child) .lightbox-nav {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .lightbox-viewport {
        height: calc(100vh - 120px);
    }
    
    .lightbox-nav {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
    
    .lightbox-prev {
        left: 0.75rem;
    }
    
    .lightbox-next {
        right: 0.75rem;
    }
    
    .lightbox-close {
        top: 0.75rem;
        right: 0.75rem;
        width: 40px;
        height: 40px;
    }
    
    .lightbox-zoom-controls {
        top: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
    
    .zoom-btn {
        width: 34px;
        height: 34px;
        font-size: 0.75rem;
    }
    
    .zoom-level {
        font-size: 0.75rem;
        min-width: 44px;
    }
    
    .lightbox-caption {
        bottom: 90px;
        padding: 0.375rem 1rem;
    }
    
    .lightbox-caption #lightboxTitle {
        max-width: 70vw;
        font-size: 0.8125rem;
    }
    
    .lightbox-thumbs {
        bottom: 0.75rem;
        padding: 0.375rem;
        gap: 0.375rem;
    }
    
    .lightbox-thumb {
        min-width: 50px;
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .lightbox-viewport {
        height: calc(100vh - 110px);
    }
    
    .lightbox-nav {
        width: 40px;
        height: 40px;
    }
    
    .lightbox-zoom-controls {
        border-radius: 12px;
        gap: 0.375rem;
    }
    
    .zoom-btn {
        width: 32px;
        height: 32px;
    }
    
    .lightbox-thumb {
        min-width: 44px;
        width: 44px;
        height: 44px;
    }
    
    .lightbox-caption {
        display: none; /* Hide caption on very small screens */
    }
}

/* ============================================
   IMAGE LIGHTBOX POPUP STYLES
   ============================================ */

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.lightbox-content {
    position: relative;
    z-index: 2;
    max-width: 90vw;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: lightboxFadeIn 0.4s ease;
}

@keyframes lightboxFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lightbox-content img {
    max-width: 100%;
    max-height: 65vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.lightbox-caption {
    margin-top: 1rem;
    text-align: center;
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lightbox-caption #lightboxCounter {
    font-size: 0.875rem;
    color: #94a3b8;
    font-weight: 500;
}

.lightbox-caption #lightboxTitle {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    max-width: 600px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Close Button */
.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.lightbox-close:hover {
    background: rgba(239, 68, 68, 0.8);
    border-color: transparent;
    transform: rotate(90deg);
}

/* Navigation Arrows */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.lightbox-nav:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
    left: 1.5rem;
}

.lightbox-next {
    right: 1.5rem;
}

/* Thumbnail Strip inside Lightbox */
.lightbox-thumbs {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(15, 23, 42, 0.7);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    max-width: 90vw;
    overflow-x: auto;
    scrollbar-width: none;
}

.lightbox-thumbs::-webkit-scrollbar {
    display: none;
}

.lightbox-thumb {
    min-width: 60px;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.3s ease;
}

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

.lightbox-thumb.active {
    border-color: var(--primary);
    opacity: 1;
    transform: scale(1.05);
}

.lightbox-thumb:hover {
    opacity: 1;
    border-color: rgba(245, 176, 39, 0.5);
}

/* Main Image Zoom Hint */
.image-zoom-hint {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.main-image:hover .image-zoom-hint {
    opacity: 1;
}

/* Cursor pointer on main image */
.main-image {
    cursor: pointer;
}

/* Hide nav buttons if only 1 image */
.lightbox-overlay:has(.lightbox-thumbs:only-child) .lightbox-nav,
.lightbox-overlay:has(.lightbox-thumbs > :only-child) .lightbox-nav {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .lightbox-content img {
        max-height: 55vh;
        border-radius: 8px;
    }

    .lightbox-nav {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .lightbox-prev {
        left: 0.75rem;
    }

    .lightbox-next {
        right: 0.75rem;
    }

    .lightbox-close {
        top: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
    }

    .lightbox-thumbs {
        bottom: 1rem;
        padding: 0.375rem;
        gap: 0.375rem;
    }

    .lightbox-thumb {
        min-width: 50px;
        width: 50px;
        height: 50px;
    }

    .lightbox-caption #lightboxTitle {
        max-width: 80vw;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .lightbox-content img {
        max-height: 50vh;
    }

    .lightbox-nav {
        width: 40px;
        height: 40px;
    }

    .lightbox-thumb {
        min-width: 44px;
        width: 44px;
        height: 44px;
    }
}


/* ============================================
   WHATSAPP BUTTON STYLES
   ============================================ */

.post-whatsapp-large {
    margin: 1rem 0;
}

.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: var(--white) !important;
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.whatsapp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}

.whatsapp-btn i {
    font-size: 1.5rem;
}

/* ============================================
   SOCIAL MEDIA LINKS BOX
   ============================================ */

.social-links-box {
     background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e0ecff;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.social-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.social-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    font-size: 1.25rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.social-btn:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: var(--shadow-lg);
}

.social-btn.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-btn.facebook {
    background: #1877f2;
}

.social-btn.twitter {
    background: #1da1f2;
}

.social-btn.website {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

/* ============================================
   SCHEDULE SECTION IN ADMIN
   ============================================ */

.schedule-section {
    background: #f0f9ff;
    border: 2px solid #bae6fd;
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.schedule-section h4 {
    margin-bottom: 1rem;
    color: var(--dark);
    font-size: 1.125rem;
}

.schedule-section .form-group {
    margin-bottom: 1rem;
}

.schedule-section input[type="datetime-local"] {
    font-family: 'Segoe UI', sans-serif;
}

/* ============================================
   FONT SIZE SELECT IN EDITOR TOOLBAR
   ============================================ */

.editor-toolbar .font-size-select {
    padding: 0.375rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: var(--white);
    color: var(--dark);
    font-size: 0.875rem;
    cursor: pointer;
    outline: none;
    margin-left: 0.25rem;
}

.editor-toolbar .font-size-select:hover {
    border-color: var(--primary);
}

.editor-toolbar .font-size-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(245, 176, 39, 0.2);
}

/* ============================================
   GOOGLE MAP CONTAINER
   ============================================ */

.google-map-container {
    margin-top: 1rem;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 2px solid #e5e7eb;
}

.google-map-container iframe {
    display: block;
    width: 100%;
    border: none;
}

/* ============================================
   SCHEDULING STATS CARDS
   ============================================ */

.stat-card {
    transition: all 0.3s ease;
}

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

/* Duration preview box */
#durationPreview {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #e0f2fe;
    border-radius: 8px;
    border-left: 4px solid var(--primary);
    display: none;
}

#durationPreview i {
    margin-right: 0.5rem;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .whatsapp-btn {
        width: 100%;
        justify-content: center;
        font-size: 0.9375rem;
        padding: 0.875rem 1rem;
    }

    .social-links {
        gap: 0.75rem;
    }

    .social-btn {
        width: 44px;
        height: 44px;
        font-size: 1.125rem;
    }

    .schedule-section {
        padding: 1rem;
    }

    .google-map-container iframe {
        height: 250px;
    }
}

@media (max-width: 480px) {
    .post-whatsapp-large {
        margin: 0.75rem 0;
    }

    .whatsapp-btn i {
        font-size: 1.25rem;
    }

    .editor-toolbar .font-size-select {
        font-size: 0.75rem;
        padding: 0.25rem;
    }

    .google-map-container iframe {
        height: 200px;
    }
}

/* ============================================
   SCHEDULE BADGES IN TABLES
   ============================================ */

.schedule-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.schedule-badge.publish {
    background: #d1fae5;
    color: #065f46;
}

.schedule-badge.unpublish {
    background: #fee2e2;
    color: #991b1b;
}

/* ============================================
   POST STATUS - EXPIRED
   ============================================ */

.status.expired {
    background: #fee2e2;
    color: #991b1b;
}

.post-status-badge.expired {
    background: #fee2e2;
    color: #991b1b;
}

.ad-banner {
    padding: 60px 0;
    background: #f7f8fb;
}

.hero-banner-wrapper {
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 70px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}

.hero-banner-image {
    width: 100%;
    display: block;
}

/* =========================
   CORE SOLUTIONS
========================= */

.core-solutions-section {
    text-align: center;
}

.section-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #4d7cff;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.core-solutions-section h2 {
    font-size: 48px;
    line-height: 1.15;
    font-weight: 800;
    color: #0b1633;
    margin-bottom: 18px;
}

.core-solutions-section h2 span {
    background: linear-gradient(90deg, #4d7cff, #ff8a00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-description {
    max-width: 700px;
    margin: 0 auto 55px;
    font-size: 16px;
    line-height: 1.8;
    color: #6b7280;
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.solution-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 30px;
    text-align: left;
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(0,0,0,0.03);
}

.solution-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.solution-card .icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    font-size: 18px;
}

.solution-card .icon.orange {
    background: rgba(255,138,0,0.12);
    color: #ff8a00;
}

.solution-card .icon.blue {
    background: rgba(77,124,255,0.12);
    color: #4d7cff;
}

.solution-card .icon.pink {
    background: rgba(255,0,128,0.12);
    color: #ff0080;
}

.solution-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0b1633;
    margin-bottom: 15px;
}

.solution-card p {
    font-size: 14px;
    line-height: 1.8;
    color: #6b7280;
    margin-bottom: 20px;
}

.solution-card a {
    color: #ff6a00;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.solution-card a i {
    margin-left: 5px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991px) {

    .core-solutions-section h2 {
        font-size: 36px;
    }

    .solutions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {

    .ad-banner {
        padding: 40px 0;
    }

    .core-solutions-section h2 {
        font-size: 28px;
    }

    .section-description {
        font-size: 14px;
    }

    .solution-card {
        padding: 24px;
    }
}


    .container{
      max-width:1000px;
      margin:auto;
    }

    /* =========================
       SECTION TITLE
    ========================== */

    .section-top{
      text-align:center;
      margin-bottom:40px;
    }

    .mini-title{
      font-size:12px;
      letter-spacing:3px;
      text-transform:uppercase;
      color:#2f7cff;
      margin-bottom:10px;
      font-weight:600;
    }

    .main-title{
      font-size:48px;
      font-weight:800;
      line-height:1.1;
      color:#07142f;
    }

    /* =========================
       TESTIMONIAL CARD
    ========================== */

    .testimonial-card{
      background:#fff;
      border:1.5px solid #111827;
      border-radius:32px;
      padding:42px;
      position:relative;
      overflow:hidden;
      margin-bottom:70px;
    }

    .testimonial-card::after{
      content:'';
      position:absolute;
      width:120px;
      height:120px;
      background:rgba(230,225,220,0.5);
      border-radius:50%;
      top:-20px;
      right:-20px;
    }

    .stars{
      color:#ff9800;
      font-size:24px;
      margin-bottom:28px;
      letter-spacing:3px;
    }

    .testimonial-text{
      font-size:31px;
      line-height:1.6;
      color:#162447;
      margin-bottom:38px;
      max-width:90%;
    }

    .profile{
      display:flex;
      align-items:center;
      gap:16px;
      margin-bottom:40px;
    }

    .profile img{
      width:58px;
      height:58px;
      border-radius:50%;
      object-fit:cover;
    }

    .profile h4{
      font-size:20px;
      margin-bottom:4px;
      font-weight:700;
    }

    .profile p{
      color:#667085;
      font-size:15px;
    }

    .bottom-controls{
      border-top:1px solid #e5e7eb;
      padding-top:26px;
      display:flex;
      justify-content:space-between;
      align-items:center;
    }

    .slider-dots{
      display:flex;
      gap:10px;
      align-items:center;
    }

    .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:#cfd4dc;
    }

    .dot.active{
      width:28px;
      border-radius:30px;
      background:#2196f3;
    }

    .nav-buttons{
      display:flex;
      gap:12px;
    }

    .nav-btn{
      width:48px;
      height:48px;
      border-radius:14px;
      border:1px solid #d8dce3;
      background:#fff;
      cursor:pointer;
      font-size:20px;
      color:#334155;
      transition:0.3s ease;
    }

    .nav-btn:hover{
      background:#f3f4f6;
    }

    /* =========================
       CTA SECTION
    ========================== */

    .cta-box{
      background:linear-gradient(135deg,#030817 0%, #06163f 55%, #071c52 100%);
      border-radius:34px;
      padding:55px 50px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:30px;
      flex-wrap:wrap;
    }

    .cta-left{
      max-width:650px;
    }

    .cta-mini{
      color:#ff7b00;
      font-size:12px;
      letter-spacing:3px;
      text-transform:uppercase;
      font-weight:700;
      margin-bottom:18px;
    }

    .cta-title{
      font-size:42px;
      line-height:1.2;
      color:#fff;
      font-weight:800;
      margin-bottom:20px;
    }

    .cta-text{
      font-size:20px;
      line-height:1.8;
      color:#d6d9e3;
    }

    .cta-btn{
      background:#ff7a00;
      color:#fff;
      text-decoration:none;
      padding:20px 36px;
      border-radius:18px;
      font-weight:700;
      transition:0.3s ease;
      white-space:nowrap;
    }

    .cta-btn:hover{
      transform:translateY(-3px);
      background:#ff8f28;
    }

    /* =========================
       RESPONSIVE
    ========================== */

    @media(max-width:768px){

      .main-title{
        font-size:34px;
      }

      .testimonial-text{
        font-size:20px;
        max-width:100%;
      }

      .cta-title{
        font-size:28px;
      }

      .cta-text{
        font-size:16px;
      }

      .testimonial-card{
        padding:28px;
      }

      .cta-box{
        padding:35px 28px;
      }
    }
    
    /* =========================
   BIG IMAGE HOLDER
========================== */

.image-holder-card{
  padding:10px;
}

.image-wrapper{
  width:100%;
  height:100%;
  border-radius:24px;
  overflow:hidden;
  margin-bottom:0px;
  position:relative;
}

.image-wrapper img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:0.4s ease;
}

.image-wrapper img:hover{
  transform:scale(1.0);
}

/* FLOATING STICKY TAB BAR */
.tab-wrapper{
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;

    width: 100%;
    display: flex;
    justify-content: center;

    pointer-events: none;
}

/* TAB BAR */
.tab-bar{
    pointer-events: auto;

    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    padding: 18px 26px;
    border-radius: 28px;

    display: flex;
    align-items: center;
    gap: 18px;

    box-shadow:
      0 10px 30px rgba(0,0,0,0.10),
      0 2px 10px rgba(0,0,0,0.06);

    border: 1px solid rgba(255,255,255,0.4);
}

/* TAB ITEM */
.tab-item{
    width: 86px;
    height: 72px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;

    text-decoration: none;
    color: #8a97b5;

    border-radius: 20px;

    transition: all 0.3s ease;
}

/* ACTIVE TAB */
.tab-item.active{
    background: #F28500;
    color: #ffffff;
}

/* HOVER */
.tab-item:hover{
    background: #FFF6D3;
        color: #F28500;
    transform: translateY(-3px);
}

/* ICON */
.icon{
    font-size: 24px;
    line-height: 1;
}

/* TEXT */
.tab-item span{
    font-size: 14px;
    font-weight: 600;
}


/* MOBILE */
@media (max-width: 768px){

    .tab-wrapper{
        bottom: 14px;
        padding: 0 12px;
    }

    .tab-bar{
        width: 100%;
        justify-content: space-between;

        padding: 12px;
        gap: 8px;
        border-radius: 24px;
    }

    .tab-item{
        flex: 1;
        width: auto;
        height: 60px;
    }

    .icon{
        font-size: 20px;
    }

    .tab-item span{
        font-size: 11px;
    }
}