:root {
    --primary: #f59f27;
    --primary-dark: #e08d1a;
    --primary-light: #ffc56e;
    --dark: #1a1a2e;
    --dark-light: #2d2d44;
    --gray: #6c757d;
    --gray-light: #f8f9fa;
    --gray-medium: #e9ecef;
    --white: #ffffff;
    --success: #28a745;
    --danger: #dc3545;
    --gradient: linear-gradient(135deg, #f59f27 0%, #ff6b35 100%);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Keep Bootstrap-specific vars from the top block */
    --bs-nav-pills-link-active-bg: #f59f27;
    --bs-nav-pills-link-active-color: white;
    --bs-primary: #f59f27;
    --bs-primary-rgb: 245, 159, 39;
}

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

html,
body {
    scroll-behavior: auto !important;
    min-height: 100vh;
}

body {
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--dark);
    background: var(--gray-light);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

/* ----------------------------header --------------------------------------*/

/* Header */
.site-header {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
}

.logo-link {
    display: flex;
    align-items: center;
}

.logo {
    height: 42px;
    width: auto;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 14px;
}
.btn-browse-campers {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(245, 159, 39, 0.15);
}

.btn-browse-campers:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.35);
    color: var(--primary);
}

.btn-browse-campers i {
    font-size: 11px;
}

@media (min-width: 768px) {
    .btn-browse-campers {
        display: flex;
    }
}

/* List Camper Button */
.btn-list-camper {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #f59f27 0%, #ff6b35 100%);
    color: #fff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(245, 159, 39, 0.25);
}

.btn-list-camper:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.35);
    color: #fff;
}

.btn-list-camper i {
    font-size: 11px;
}

@media (min-width: 768px) {
    .btn-list-camper {
        display: flex;
    }
}
/* User Menu */
.user-menu {
    position: relative;
}

.menu-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 5px 5px 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.menu-trigger:hover,
.menu-trigger.active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.menu-trigger i {
    font-size: 15px;
    color: #333;
}

.user-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #f59f27 0%, #ff6b35 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.user-avatar i {
    font-size: 13px;
    color: #fff;
}

/* Dropdown */
.menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border-radius: 12px;
    min-width: 260px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.2s ease;
    overflow: hidden;
    z-index: 1001;
}

.menu-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.menu-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fff9f0 0%, #fff5e6 100%);
}

.menu-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #f59f27 0%, #ff6b35 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.menu-user-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.menu-user-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-user-email {
    font-size: 12px;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-divider {
    height: 1px;
    background: #e9ecef;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.menu-item:hover {
    background: #f8f9fa;
    color: #f59f27;
}

.menu-item i {
    width: 18px;
    font-size: 14px;
    color: #6c757d;
    text-align: center;
}

.menu-item:hover i {
    color: #f59f27;
}

.menu-item-admin,
.menu-item-admin i {
    color: #dc3545;
}

.menu-item-admin:hover {
    background: #fff5f5;
    color: #dc3545;
}

.menu-item-logout,
.menu-item-logout i {
    color: #dc3545;
}

.menu-item-logout:hover {
    background: #fff5f5;
    color: #dc3545;
}

/* Auth Modals */
.auth-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-success i {
    font-size: 16px;
}

.auth-optional {
    color: #95a5a6;
    font-weight: normal;
    font-size: 12px;
}

.auth-modal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.auth-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    opacity: 1;
}

.auth-modal-close:hover {
    background: #fff;
    transform: rotate(90deg);
}

.auth-image-side {
    position: relative;
    height: 100%;
    min-height: 480px;
}

.auth-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 24px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.8) 100%
    );
    color: #fff;
}

.auth-image-overlay h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}

.auth-image-overlay p {
    font-size: 13px;
    opacity: 0.9;
    margin: 0;
}

.auth-modal-body {
    padding: 32px;
    max-height: 90vh;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .auth-modal-body {
        padding: 24px 20px;
    }
}

.auth-header {
    text-align: center;
    margin-bottom: 24px;
}

.auth-logo {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #f59f27 0%, #ff6b35 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.auth-logo i {
    font-size: 22px;
    color: #fff;
}

.auth-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
}

.auth-subtitle {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

.auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .auth-row {
        grid-template-columns: 1fr;
    }
}

.auth-input-group {
    margin-bottom: 16px;
}

.auth-input-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 6px;
}

.input-wrapper {
    position: relative;
}

.input-wrapper i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #adb5bd;
    pointer-events: none;
}

.input-wrapper input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 14px;
    color: #1a1a2e;
    transition: all 0.2s ease;
}

.input-wrapper input:focus {
    outline: none;
    border-color: #f59f27;
    box-shadow: 0 0 0 3px rgba(245, 159, 39, 0.1);
}

.input-wrapper input:focus + i,
.input-wrapper:focus-within i {
    color: #f59f27;
}

.auth-birthday-inputs {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 10px;
}

.auth-birthday-inputs select {
    padding: 12px 14px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 13px;
    color: #1a1a2e;
    cursor: pointer;
    appearance: none;
    background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E")
        no-repeat right 12px center;
    padding-right: 32px;
}

.auth-birthday-inputs select:focus {
    outline: none;
    border-color: #f59f27;
}

.auth-forgot-password {
    text-align: right;
    margin-bottom: 20px;
}

.auth-forgot-password a {
    font-size: 13px;
    color: #f59f27;
    text-decoration: none;
    font-weight: 500;
}

.auth-forgot-password a:hover {
    text-decoration: underline;
}

.auth-submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #f59f27 0%, #ff6b35 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.25);
}

.auth-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245, 159, 39, 0.35);
}

.auth-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.auth-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 8px;
    margin-bottom: 14px;
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

.auth-error i {
    color: #dc3545;
    font-size: 14px;
    margin-top: 1px;
}

.auth-error span {
    font-size: 13px;
    color: #dc3545;
    line-height: 1.4;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e9ecef;
}

.auth-divider span {
    font-size: 12px;
    color: #adb5bd;
    white-space: nowrap;
}

.auth-social-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-social-btn:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
}

.auth-terms {
    text-align: center;
    font-size: 12px;
    color: #6c757d;
    margin: 16px 0 10px;
    line-height: 1.5;
}

.auth-terms a {
    color: #f59f27;
    text-decoration: none;
    font-weight: 500;
}

.auth-terms a:hover {
    text-decoration: underline;
}

.auth-link {
    text-align: center;
    font-size: 13px;
    color: #6c757d;
    margin: 0;
}

.auth-link a {
    color: #f59f27;
    text-decoration: none;
    font-weight: 600;
}

.auth-link a:hover {
    text-decoration: underline;
}

.password-toggle {
    position: absolute;
    right: 14px;
    background: none;
    border: none;
    color: #95a5a6;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover {
    color: #e67e22;
}

/* Responsive */
@media (max-width: 768px) {
    .header-container {
        padding: 10px 16px;
    }

    .logo {
        height: 34px;
    }

    .menu-dropdown {
        min-width: 240px;
        right: -4px;
    }
}

/* ----------------------------header end --------------------------------------*/

/* ----------------------------footer --------------------------------------*/
footer {
    background: #000000;
    color: white;
    padding: 40px 20px 20px;
    margin-top: auto;
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.footer-links a {
    color: white;
    text-decoration: none;
    transition: opacity 0.3s;
}

.footer-links a:hover {
    opacity: 0.7;
}

.footer-bottom {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    opacity: 0.8;
}

/* Backdrop shared styles */
#tos-backdrop,
#privacy-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    z-index: 9998;
}

/* Modal container shared styles */
#tos-modal,
#privacy-modal {
    position: fixed;
    inset: 0;
    display: none;
    /* hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

/* Show modal when open */
#tos-modal.open,
#privacy-modal.open {
    display: flex;
}

/* Modal content box shared styles */
.tos-box {
    background: #111;
    color: #fff;
    width: 92%;
    max-width: 800px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 30px;
    border-radius: 14px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7);
    font-size: 14px;
    line-height: 1.7;
    position: relative;
}

/* Close buttons sticky at top-right */
#tos-close,
#privacy-close {
    position: sticky;
    top: 5px;
    /* moved closer to top */
    right: 5px;
    /* moved closer to right */
    background: none;
    color: #fff;
    font-size: 26px;
    border: none;
    cursor: pointer;
    line-height: 1;
    float: right;
    z-index: 10000;
    /* above modal content */
}

#tos-close:hover,
#privacy-close:hover {
    color: #f00;
    /* red on hover */
}

/* Prevent background scroll when either modal is open */
body.tos-lock {
    overflow: hidden;
}

/* ----------------------------footer end --------------------------------------*/

/* ----------------------------BECOME AN OWNER --------------------------------------*/
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #f59f27 !important;
    box-shadow: 0 0 0 0.2rem rgba(245, 159, 39, 0.15) !important;
}

.form-check-input:checked {
    background-color: #f59f27 !important;
    border-color: #f59f27 !important;
}

.btn-orange {
    background: #f59f27 !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.btn-orange:hover {
    background: #e68f1a !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.3) !important;
}

.card {
    transition: all 0.3s ease;
}

@media (max-width: 991px) {
    .col-lg-4 {
        margin-top: 0 !important;
    }
}

.btn-outline-orange {
    background: white !important;
    color: #f59f27 !important;
    border: 2px solid #f59f27 !important;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.btn-outline-orange:hover {
    background: #f59f27 !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.3) !important;
}

.preview-container img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #ccc;
    transition: transform 0.2s ease;
}

.preview-container img:hover {
    transform: scale(1.05);
}

.delete-existing-photo:hover {
    background: rgba(220, 53, 69, 1) !important;
}

.sortable-ghost {
    opacity: 0.4;
}

.sortable-drag {
    opacity: 1;
    cursor: grabbing !important;
}

.existing-photo-wrapper {
    transition: transform 0.2s ease;
}

.existing-photo-wrapper:hover {
    transform: scale(1.02);
}

.drag-handle {
    user-select: none;
}

.btn-outline-secondary {
    border-radius: 8px !important;
    font-weight: 600;
}

/* Home checkpoint in become an owner */
.steps-container {
    position: relative;
    padding-left: 45px;
}

/* Vertical Timeline */
.vertical-timeline {
    position: absolute;
    left: 17px;
    top: 25px;
    bottom: 25px;
    width: 2px;
    background: #dee2e6;
}

/* Step Card Wrapper */
.step-card-wrapper {
    position: relative;
    margin-bottom: 20px;
}

/* Step Number Circle */
.step-number-circle {
    position: absolute;
    left: -45px;
    top: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    background: white;
    border: 2px solid #dee2e6;
    color: #adb5bd;
    z-index: 2;
    transition: all 0.3s ease;
}

.step-number-circle.active {
    border-color: #f59f27;
    color: #f59f27;
    background: white;
}

.step-number-circle.completed {
    border-color: #f59f27;
    background: #f59f27;
    color: white;
}

.step-number-circle.inactive {
    border-color: #e9ecef;
    color: #ced4da;
}

/* Step Card */
.step-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.step-card.active {
    border-color: #f59f27;
    box-shadow: 0 3px 12px rgba(245, 159, 39, 0.12);
}

.step-card.completed {
    border-color: #f59f27;
    background: #fff9f0;
}

.step-card.inactive {
    opacity: 0.6;
    background: #f8f9fa;
}

.step-card-header {
    font-size: 11px;
    font-weight: 700;
    color: #adb5bd;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.step-card.active .step-card-header {
    color: #f59f27;
}

.step-card-title {
    font-size: 19px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 6px;
}

.step-card-description {
    color: #7f8c8d;
    font-size: 13px;
    margin-bottom: 15px;
}

/* Step Action Button */
.btn-step-action {
    background: #f59f27;
    color: white;
    border: none;
    border-radius: 7px;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 24px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-step-action:hover:not(:disabled) {
    background: #e68f1a;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(245, 159, 39, 0.25);
    color: white;
}

.btn-step-action:disabled {
    background: #dee2e6;
    color: #adb5bd;
    cursor: not-allowed;
}

/* Summary Card */
.summary-card {
    background: white;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 20px;
}

/* Icons */
.success-icon-large {
    font-size: 60px;
    color: #f59f27;
}

.pending-icon-large {
    font-size: 60px;
    color: #f59f27;
}

/* Progress Checklist */
.progress-checklist {
    text-align: left;
    margin: 20px 0;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.checklist-item.completed {
    background: #fff9f0;
}

.checklist-icon {
    font-size: 20px;
    color: #dee2e6;
    flex-shrink: 0;
}

.checklist-item.completed .checklist-icon {
    color: #f59f27;
}

.checklist-text {
    flex: 1;
}

.checklist-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 3px;
}

.checklist-subtitle {
    font-size: 12px;
    color: #7f8c8d;
}

/* Large Buttons */
.btn-publish-large {
    width: 100%;
    background: #f59f27;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    padding: 13px 28px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(245, 159, 39, 0.25);
}

.btn-publish-large:hover {
    background: #e68f1a;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(245, 159, 39, 0.35);
}

.btn-secondary-large {
    width: 100%;
    background: white;
    color: #6c757d;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 24px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary-large:hover {
    background: #f8f9fa;
    color: #495057;
    border-color: #adb5bd;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

/* Responsive */
@media (max-width: 991px) {
    .summary-card {
        position: static;
        margin-top: 30px;
    }
}

@media (max-width: 768px) {
    .steps-container {
        padding-left: 38px;
    }

    .vertical-timeline {
        left: 14px;
    }

    .step-number-circle {
        left: -38px;
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .step-card {
        padding: 16px;
    }

    .step-card-title {
        font-size: 17px;
    }

    .summary-card {
        padding: 24px 18px;
    }

    .success-icon-large,
    .pending-icon-large {
        font-size: 50px;
    }
}
/* ------------------------ BECOME AN OWNER END--------------------------------- */

/* ------------------------ home--------------------------------- */

/* Utility Classes */
.text-gradient-home {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.min-vh-75-home {
    min-height: 75vh;
}

/* Section Badges & Titles */
.section-badge-home {
    display: inline-block;
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
    color: var(--primary);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
}

.section-title-home {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.section-subtitle-home {
    font-size: 1.1rem;
    color: var(--gray);
    max-width: 500px;
    margin: 0 auto 48px;
}

.section-header-home {
    margin-bottom: 48px;
}

/* Buttons */
.btn-primary-custom-home {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--gradient);
    color: var(--white);
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(245, 159, 39, 0.35);
    border: none;
    cursor: pointer;
}

.btn-primary-custom-home:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(245, 159, 39, 0.45);
    color: var(--white);
}

.btn-primary-custom-home i {
    transition: transform 0.3s ease;
}

.btn-primary-custom-home:hover i {
    transform: translateX(4px);
}

.btn-primary-custom-home.btn-lg-home {
    padding: 18px 40px;
    font-size: 16px;
}

.btn-outline-custom-home {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--dark);
    padding: 16px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.btn-outline-custom-home:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(245, 159, 39, 0.05);
}

.btn-white-home {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    color: var(--primary);
    padding: 18px 36px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.btn-white-home:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    color: var(--primary-dark);
}

.btn-outline-white-home {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--white);
    padding: 18px 36px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-outline-white-home:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--white);
    color: var(--white);
}

/* ==================== HERO SECTION ==================== */
.hero-section-home {
    position: relative;
    background: linear-gradient(180deg, #fff9f0 0%, #ffffff 100%);
    padding: 67px 0 80px;
    overflow: hidden;
}

.hero-bg-shapes-home {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.shape-home {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
}

.shape-1-home {
    width: 600px;
    height: 600px;
    background: radial-gradient(
        circle,
        rgba(245, 159, 39, 0.15) 0%,
        transparent 70%
    );
    top: -200px;
    right: -100px;
    animation: float-home 20s ease-in-out infinite;
}

.shape-2-home {
    width: 400px;
    height: 400px;
    background: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.1) 0%,
        transparent 70%
    );
    bottom: -100px;
    left: -100px;
    animation: float-home 15s ease-in-out infinite reverse;
}

.shape-3-home {
    width: 200px;
    height: 200px;
    background: radial-gradient(
        circle,
        rgba(245, 159, 39, 0.2) 0%,
        transparent 70%
    );
    top: 50%;
    left: 30%;
    animation: float-home 12s ease-in-out infinite;
}

@keyframes float-home {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -30px) scale(1.05);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.95);
    }
}

.hero-badge-home {
    display: inline-block;
    background: var(--gradient);
    color: var(--white);
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 24px;
    animation: fadeInUp-home 0.8s ease;
}

.hero-title-home {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--dark);
    animation: fadeInUp-home 0.8s ease 0.1s both;
}

.hero-text-home {
    font-size: 1.2rem;
    color: var(--gray);
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 500px;
    animation: fadeInUp-home 0.8s ease 0.2s both;
}

.hero-actions-home {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 48px;
    animation: fadeInUp-home 0.8s ease 0.3s both;
}

.hero-stats-home {
    display: flex;
    align-items: center;
    gap: 32px;
    animation: fadeInUp-home 0.8s ease 0.4s both;
}

.stat-item-home {
    text-align: center;
}

.stat-number-home {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.stat-label-home {
    font-size: 14px;
    color: var(--gray);
    font-weight: 500;
}

.stat-divider-home {
    width: 1px;
    height: 40px;
    background: rgba(0, 0, 0, 0.1);
}

@media (max-width: 991px) {
    .powered-by-section {
        justify-content: center !important;
    }
}

.hero-image-wrapper-home {
    position: relative;
    animation: fadeInRight-home 1s ease 0.3s both;
}

.hero-image-card-home {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.hero-image-card-home img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}

.floating-badge-home {
    position: absolute;
    top: 24px;
    left: 24px;
    background: var(--white);
    padding: 12px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--dark);
    box-shadow: var(--shadow-md);
}

.floating-badge-home i {
    color: #ffc107;
}

.hero-decoration-home {
    position: absolute;
    border-radius: var(--radius-lg);
}

.hero-decoration-1-home {
    width: 120px;
    height: 120px;
    background: var(--gradient);
    bottom: -30px;
    left: -30px;
    z-index: -1;
    opacity: 0.3;
}

.hero-decoration-2-home {
    width: 80px;
    height: 80px;
    border: 4px solid var(--primary);
    top: -20px;
    right: -20px;
    opacity: 0.3;
}

.scroll-indicator-home {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: fadeIn-home 1s ease 1s both;
}

.scroll-indicator-home span {
    font-size: 12px;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.scroll-mouse-home {
    width: 26px;
    height: 42px;
    border: 2px solid var(--gray);
    border-radius: 20px;
    position: relative;
}

.scroll-wheel-home {
    width: 4px;
    height: 8px;
    background: var(--primary);
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-home 2s ease-in-out infinite;
}

@keyframes scroll-home {
    0%,
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    50% {
        opacity: 0.5;
        transform: translateX(-50%) translateY(12px);
    }
}

@keyframes fadeInUp-home {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight-home {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn-home {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==================== ABOUT SECTION ==================== */
.about-section-home {
    padding: 100px 0;
    background: var(--white);
}

.about-images-home {
    position: relative;
    padding: 40px;
}

.about-img-main-home {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.about-img-main-home img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}

.about-img-secondary-home {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 200px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 6px solid var(--white);
}

.about-img-secondary-home img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.experience-badge-home {
    position: absolute;
    top: 20px;
    left: 0;
    background: var(--gradient);
    color: var(--white);
    padding: 24px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
}

.exp-number-home {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.exp-text-home {
    font-size: 13px;
    opacity: 0.9;
    line-height: 1.3;
}

.about-content-home {
    padding-left: 20px;
}

.about-text-home {
    font-size: 1.1rem;
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 32px;
}

.about-features-home {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.feature-item-home {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: var(--gray-light);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.feature-item-home:hover {
    background: var(--white);
    box-shadow: var(--shadow-md);
    transform: translateX(8px);
}

.feature-icon-home {
    width: 56px;
    height: 56px;
    background: var(--gradient);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon-home i {
    font-size: 24px;
    color: var(--white);
}

.feature-content-home h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
}

.feature-content-home p {
    font-size: 14px;
    color: var(--gray);
    margin: 0;
}

/* ==================== TOP RATED SECTION ==================== */
.top-rated-section-home {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(
        180deg,
        var(--gray-light) 0%,
        var(--white) 100%
    );
    overflow: hidden;
}

.floating-shapes-home {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.float-shape-home {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
}

.float-shape-1-home {
    width: 300px;
    height: 300px;
    background: radial-gradient(
        circle,
        rgba(245, 159, 39, 0.1) 0%,
        transparent 70%
    );
    top: 10%;
    left: -5%;
    animation: float-home 18s ease-in-out infinite;
}

.float-shape-2-home {
    width: 250px;
    height: 250px;
    background: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.08) 0%,
        transparent 70%
    );
    bottom: 10%;
    right: -5%;
    animation: float-home 22s ease-in-out infinite reverse;
}

.top-rated-card-home {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s ease;
}

.top-rated-card-home:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-lg);
}

.card-rank-home {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--dark);
    color: var(--white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    z-index: 10;
}

.top-rated-card-home .card-image-home {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.top-rated-card-home .card-image-home img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.top-rated-card-home:hover .card-image-home img {
    transform: scale(1.1);
}

.card-overlay-home {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.top-rated-card-home:hover .card-overlay-home {
    opacity: 1;
}

.view-btn-home {
    width: 56px;
    height: 56px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    font-size: 20px;
    transition: all 0.3s ease;
    transform: scale(0.8);
}

.top-rated-card-home:hover .view-btn-home {
    transform: scale(1);
}

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

.rating-badge-home {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: var(--white);
    padding: 8px 14px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
}

.rating-badge-home i {
    color: #ffc107;
}

.top-rated-card-home .card-body-home {
    padding: 24px;
}

.card-meta-home {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
}

.meta-divider-home {
    opacity: 0.5;
}

.top-rated-card-home .card-title-home {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 20px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 52px;
}

.top-rated-card-home .card-footer-home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.card-price-home {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.price-value-home {
    font-size: 24px;
    font-weight: 800;
    color: var(--dark);
}

.price-unit-home {
    font-size: 14px;
    color: var(--gray);
}

.book-btn-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gradient);
    color: var(--white);
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.book-btn-home:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(245, 159, 39, 0.4);
    color: var(--white);
}

/* ==================== CAMPERS SECTION ==================== */
.campers-section-home {
    position: relative;
    padding: 100px 0;
    background: var(--white);
    overflow: hidden;
}

.parallax-bg-home {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(135deg, #fff9f0 0%, #fff5e6 50%, #fff 100%);
    transform: skewY(-3deg);
    transform-origin: top left;
    z-index: 0;
}

.campers-section-home > .container-fluid,
.campers-section-home > .container {
    position: relative;
    z-index: 1;
}

.campers-scroll-container-home {
    position: relative;
    padding: 0 60px;
    max-width: 100%;
}

.campers-wrapper-home {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    gap: 28px;
    padding: 24px 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.campers-wrapper-home::-webkit-scrollbar {
    display: none;
}

.camper-card-home {
    flex: 0 0 320px;
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s ease;
}

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

.camper-link-home {
    text-decoration: none;
    color: inherit;
    display: block;
}

.camper-image-home {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.camper-image-home img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.camper-card-home:hover .camper-image-home img {
    transform: scale(1.1);
}

.image-overlay-home {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 50%,
        rgba(0, 0, 0, 0.6) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.camper-card-home:hover .image-overlay-home {
    opacity: 1;
}

.price-tag-home {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--white);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.price-tag-home .currency-home {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray);
}

.price-tag-home .amount-home {
    font-size: 22px;
    font-weight: 800;
    color: var(--dark);
}

.price-tag-home .period-home {
    font-size: 12px;
    color: var(--gray);
}

.quick-view-home {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    color: var(--dark);
}

.camper-card-home:hover .quick-view-home {
    opacity: 1;
    transform: translateY(0);
}

.camper-content-home {
    padding: 24px;
}

.camper-tags-home {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.tag-home {
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tag-type-home {
    background: rgba(245, 159, 39, 0.1);
    color: var(--primary);
}

.tag-license-home {
    background: var(--gray-light);
    color: var(--gray);
}

.camper-title-home {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 50px;
}

.camper-action-home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.action-text-home {
    font-weight: 600;
    color: var(--primary);
    font-size: 14px;
}

.action-icon-home {
    width: 36px;
    height: 36px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: transform 0.3s ease;
}

.camper-card-home:hover .action-icon-home {
    transform: translateX(4px);
}

/* Scroll Arrows */
.scroll-arrow-home {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: var(--white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
    opacity: 0;
}

.campers-scroll-container-home:hover .scroll-arrow-home {
    opacity: 1;
}

.scroll-arrow-home:hover {
    background: var(--primary);
    transform: translateY(-50%) scale(1.1);
}

.scroll-arrow-home i {
    color: var(--primary);
    font-size: 20px;
    transition: color 0.3s ease;
}

.scroll-arrow-home:hover i {
    color: var(--white);
}

.scroll-arrow-left-home {
    left: 8px;
}

.scroll-arrow-right-home {
    right: 8px;
}

.scroll-arrow-home:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Scroll Progress */
.scroll-progress-home {
    max-width: 400px;
    margin: 32px auto 0;
}

.progress-track-home {
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill-home {
    height: 100%;
    background: var(--gradient);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s ease;
}

/* Empty State */
.empty-state-home {
    text-align: center;
    padding: 80px 20px;
}

.empty-icon-home {
    width: 100px;
    height: 100px;
    background: var(--gray-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.empty-icon-home i {
    font-size: 48px;
    color: var(--gray);
}

.empty-state-home h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.empty-state-home p {
    color: var(--gray);
}

/* ==================== CTA SECTION ==================== */
.cta-section-home {
    position: relative;
    padding: 100px 0;
    background: var(--primary);
    overflow: hidden;
}

.cta-bg-pattern-home {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.cta-content-home {
    position: relative;
    z-index: 1;
}

.cta-title-home {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 16px;
}

.cta-text-home {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cta-actions-home {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991px) {
    .hero-section-home {
        padding: 100px 0 60px;
    }

    .hero-stats-home {
        gap: 20px;
    }

    .stat-number-home {
        font-size: 2rem;
    }

    .about-images-home {
        padding: 20px;
        margin-bottom: 40px;
    }

    .about-content-home {
        padding-left: 0;
    }

    .experience-badge-home {
        top: auto;
        bottom: -20px;
        left: 20px;
    }
}

@media (max-width: 768px) {
    .hero-section-home {
        padding: 80px 0 60px;
        text-align: center;
    }

    .hero-text-home {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions-home {
        justify-content: center;
    }

    .hero-stats-home {
        justify-content: center;
    }

    .scroll-indicator-home {
        display: none;
    }

    .about-section-home,
    .top-rated-section-home,
    .campers-section-home,
    .cta-section-home {
        padding: 60px 0;
    }

    .about-img-secondary-home {
        width: 140px;
        height: 140px;
    }

    .campers-scroll-container-home {
        padding: 0 20px;
    }

    .camper-card-home {
        flex: 0 0 calc(100vw - 80px);
        max-width: 320px;
    }

    .scroll-arrow-home {
        width: 44px;
        height: 44px;
    }

    .scroll-arrow-left-home {
        left: 4px;
    }

    .scroll-arrow-right-home {
        right: 4px;
    }

    .cta-actions-home {
        flex-direction: column;
        align-items: center;
    }

    .btn-white-home,
    .btn-outline-white-home {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hero-title-home {
        font-size: 2rem;
    }

    .hero-text-home {
        font-size: 1rem;
    }

    .btn-primary-custom-home,
    .btn-outline-custom-home {
        padding: 14px 24px;
        font-size: 14px;
    }

    .hero-stats-home {
        flex-wrap: wrap;
        gap: 16px;
    }

    .stat-divider-home {
        display: none;
    }

    .stat-item-home {
        flex: 0 0 calc(50% - 8px);
    }

    .section-title-home {
        font-size: 1.75rem;
    }

    .feature-item-home {
        flex-direction: column;
        text-align: center;
    }

    .camper-card-home {
        flex: 0 0 calc(100vw - 60px);
    }
}
/* ==================== MOBILE OVERFLOW FIXES ==================== */

/* Fix 1: Contain the decorative shapes */
.hero-bg-shapes-home {
    overflow: hidden;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Fix 2: Hide shapes on mobile since they cause issues and aren't very visible anyway */
@media (max-width: 991px) {
    .shape-home {
        display: none;
    }
}

/* Fix 3: Fix Bootstrap row with g-5 gutter causing overflow */
.about-section-home .row,
.top-rated-section-home .row,
.campers-section-home .row {
    margin-left: 0;
    margin-right: 0;
}

/* Or more targeted - reduce gutter on mobile */
@media (max-width: 768px) {
    .row.g-5 {
        --bs-gutter-x: 1rem; /* Reduce from default g-5 (3rem) */
        margin-left: 0;
        margin-right: 0;
    }

    .row.g-5 > * {
        padding-left: calc(var(--bs-gutter-x) / 2);
        padding-right: calc(var(--bs-gutter-x) / 2);
    }
}

/* Fix 4: Ensure all main sections clip overflow */
.hero-section-home,
.about-section-home,
.top-rated-section-home,
.campers-section-home,
.cta-section-home {
    overflow-x: clip;
}
/* ------------------------ home END--------------------------------- */

/* ------------------------ user dash--------------------------------- */

.dashboard-page {
    min-height: 100vh;
}

.text-gradient-dash {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==================== headerUserDash ==================== */
.dashboard-headerUserDash {
    position: relative;
    background: linear-gradient(
        135deg,
        #fff9f0 0%,
        #fff5e6 50%,
        var(--white) 100%
    );
    padding: 100px 0 80px;
    overflow: hidden;
}

.headerUserDash-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.shape-dash {
    position: absolute;
    border-radius: 50%;
}

.shape-dash-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(
        circle,
        rgba(245, 159, 39, 0.12) 0%,
        transparent 70%
    );
    top: -200px;
    right: -100px;
    animation: float 20s ease-in-out infinite;
}

.shape-dash-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.08) 0%,
        transparent 70%
    );
    bottom: -100px;
    left: -50px;
    animation: float 15s ease-in-out infinite reverse;
}

.shape-dash-3 {
    width: 150px;
    height: 150px;
    background: radial-gradient(
        circle,
        rgba(245, 159, 39, 0.15) 0%,
        transparent 70%
    );
    top: 40%;
    left: 20%;
    animation: float 12s ease-in-out infinite;
}

@keyframes float {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(20px, -20px) scale(1.03);
    }

    66% {
        transform: translate(-15px, 15px) scale(0.97);
    }
}

.headerUserDash-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.greeting-badge-dash {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    color: var(--primary);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.greeting-title-dash {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 12px;
    line-height: 1.2;
}

.greeting-subtitle-dash {
    font-size: 1.1rem;
    color: var(--gray);
}

.headerUserDash-avatar {
    position: relative;
}

.avatar-circle-dash {
    width: 100px;
    height: 100px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--white);
    box-shadow: 0 8px 24px rgba(245, 159, 39, 0.35);
}

.avatar-status-dash {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: var(--success);
    border: 3px solid var(--white);
    border-radius: 50%;
}

/* ==================== CONTENT ==================== */
.dashboard-content {
    padding: 0 0 60px;
    margin-top: -40px;
    position: relative;
    z-index: 10;
}

/* Tab Navigation */
.tab-navigation-dash {
    display: flex;
    gap: 12px;
    background: var(--white);
    padding: 8px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: 40px;
    max-width: 400px;
}

.tab-btn-dash {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: none;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 600;
    color: var(--gray);
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn-dash:hover {
    color: var(--dark);
    background: var(--gray-light);
}

.tab-btn-dash.active {
    background: var(--gradient);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.3);
}

.tab-btn-dash i {
    font-size: 18px;
}

/* Tab Content */
.tab-pane-dash {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-pane-dash.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section headerUserDashs */
.section-headerUserDash {
    margin-bottom: 24px;
}

.section-title-dasj {
    font-size: 24px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
}

.section-subtitle-dash {
    font-size: 15px;
    color: var(--gray);
}

/* ==================== STATS GRID ==================== */
.stats-grid-dash {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.stat-card-dash {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--white);
    padding: 28px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: all 0.4s ease;
    overflow: hidden;
}

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

.stat-card-dash::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.stat-card-dash-primary::before {
    background: var(--gradient);
}

.stat-card-dash-success::before {
    background: var(--success);
}

.stat-card-dash-warning::before {
    background: var(--warning);
}

.stat-icon-dash {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.stat-card-dash-primary .stat-icon-dash {
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
    color: var(--primary);
}

.stat-card-dash-success .stat-icon-dash {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success);
}

.stat-card-dash-warning .stat-icon-dash {
    background: rgba(255, 193, 7, 0.1);
    color: #d39e00;
}

.stat-content-dash {
    display: flex;
    flex-direction: column;
}

.stat-value-dash {
    font-size: 36px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
}

.stat-label-dash {
    font-size: 14px;
    color: var(--gray);
    margin-top: 6px;
}

.stat-arrow-dash {
    margin-left: auto;
    width: 40px;
    height: 40px;
    background: var(--gray-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
    transition: all 0.3s ease;
}

.stat-card-dash:hover .stat-arrow-dash {
    background: var(--primary);
    color: var(--white);
    transform: translateX(4px);
}

.stat-badge-dash {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--gray-light);
    color: var(--gray);
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==================== ACTIONS GRID ==================== */
.actions-grid-dash {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.action-card-dash {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--white);
    padding: 24px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: all 0.4s ease;
}

.action-card-dash:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.action-badge-dash {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--danger);
    color: var(--white);
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
}

.action-icon-dash {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.action-icon-dash-browse {
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
    color: var(--primary);
}

.action-icon-dash-list {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success);
}

.action-icon-dash-messages {
    background: rgba(23, 162, 184, 0.1);
    color: var(--info);
}

.action-icon-dash-listings {
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
}

.action-content-dash {
    flex: 1;
}

.action-title-dash {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
}

.action-description-dash {
    font-size: 13px;
    color: var(--gray);
    margin: 0;
}

.action-arrow-dash {
    width: 36px;
    height: 36px;
    background: var(--gray-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
    transition: all 0.3s ease;
}

.action-card-dash:hover .action-arrow-dash {
    background: var(--primary);
    color: var(--white);
}

/* ==================== PROFILE CARD ==================== */
.profile-card-dash {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.profile-headerUserDash {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px;
    background: linear-gradient(135deg, #fff9f0 0%, #fff5e6 100%);
    border-bottom: 1px solid var(--gray-medium);
}

.profile-avatar-dash {
    width: 80px;
    height: 80px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--white);
    box-shadow: 0 4px 16px rgba(245, 159, 39, 0.3);
}

.profile-info-dash {
    flex: 1;
}

.profile-name-dash {
    font-size: 24px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
}

.profile-email-dash {
    font-size: 15px;
    color: var(--gray);
    margin-bottom: 12px;
}

.profile-member-badge-dash {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    color: var(--primary);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.profile-details-dash {
    padding: 8px 0;
}

.detail-row-dash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    border-bottom: 1px solid var(--gray-medium);
    transition: background 0.2s ease;
}

.detail-row-dash:last-child {
    border-bottom: none;
}

.detail-row-dash:hover {
    background: var(--gray-light);
}

.detail-label-dash {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--gray);
}

.detail-label-dash i {
    width: 20px;
    color: var(--primary);
}

.detail-value-dash-dash {
    font-size: 15px;
    font-weight: 600;
    color: var(--dark);
}

.detail-value-dash .not-set {
    color: var(--gray);
    font-style: italic;
    font-weight: 400;
}

.profile-actions-dash {
    display: flex;
    gap: 16px;
    padding: 24px 32px;
    border-top: 1px solid var(--gray-medium);
}

.btn-profile-edit1 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: var(--gradient);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.3);
}

.btn-profile-edit1:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 159, 39, 0.4);
    color: var(--white);
}

.btn-profile-password1 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: var(--white);
    color: var(--dark);
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-profile-password1:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #fff8f0;
}

/* ==================== SETTINGS GRID ==================== */
.settings-grid-dash {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-card-dash {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--white);
    padding: 20px 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.settings-card-dash:hover {
    transform: translateX(4px);
}

.settings-card-dash-danger:hover {
    background: #fff5f5;
}

.settings-icon-dash {
    width: 48px;
    height: 48px;
    background: var(--gray-light);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
    font-size: 18px;
}

.settings-icon-dash-danger {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger);
}

.settings-content-dash {
    flex: 1;
}

.settings-content-dash h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 2px;
}

.settings-content-dash p {
    font-size: 13px;
    color: var(--gray);
    margin: 0;
}

.settings-badge-dash {
    background: var(--gray-light);
    color: var(--gray);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

.settings-btn-dash {
    width: 40px;
    height: 40px;
    background: var(--danger);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s ease;
}

.settings-btn-dash:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991px) {
    .headerUserDash-content {
        flex-direction: column;
        text-align: center;
    }

    .stats-grid-dash {
        grid-template-columns: 1fr;
    }

    .actions-grid-dash {
        grid-template-columns: 1fr;
    }

    .profile-headerUserDash {
        flex-direction: column;
        text-align: center;
    }

    .profile-actions-dash {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .dashboard-headerUserDash {
        padding: 80px 0 60px;
    }

    .greeting-title-dash {
        font-size: 1.75rem;
    }

    .avatar-circle-dash {
        width: 80px;
        height: 80px;
        font-size: 26px;
    }

    .tab-navigation-dash {
        max-width: 100%;
    }

    .tab-btn-dash {
        padding: 14px 16px;
        font-size: 14px;
    }

    .stat-card-dash {
        padding: 20px;
    }

    .stat-value-dash {
        font-size: 28px;
    }

    .detail-row-dash {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 16px 24px;
    }

    .profile-actions-dash {
        padding: 20px 24px;
    }
}
/* ------------------------ user dashEND--------------------------------- */
/* ------------------------ my listing --------------------------------- */

.my-listings-page {
    min-height: 100vh;
}

/* ==================== PAGE headerML ==================== */
.page-headerML {
    position: relative;
    background: linear-gradient(
        135deg,
        #fff9f0 0%,
        #fff5e6 50%,
        var(--white) 100%
    );
    padding: 100px 0 60px;
    overflow: hidden;
}

.headerML-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.shapeML {
    position: absolute;
    border-radius: 50%;
}

.shapeML-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(
        circle,
        rgba(245, 159, 39, 0.12) 0%,
        transparent 70%
    );
    top: -150px;
    right: -50px;
}

.shapeML-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.08) 0%,
        transparent 70%
    );
    bottom: -80px;
    left: -50px;
}

.headerML-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
}

.back-link-ml {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.back-link-ml:hover {
    gap: 12px;
    color: var(--primary-dark);
}

.headerML-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.headerML-subtitle {
    font-size: 1.1rem;
    color: var(--gray);
}

.btn-add-listing-ml {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gradient);
    color: var(--white);
    padding: 16px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(245, 159, 39, 0.3);
    white-space: nowrap;
}

.btn-add-listing-ml:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(245, 159, 39, 0.4);
    color: var(--white);
}

/* Stats Row */
.stats-row-ml {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.stat-item-ml {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    padding: 20px 28px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    min-width: 180px;
}

.stat-icon-ml {
    width: 50px;
    height: 50px;
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 20px;
}

.stat-icon-ml-success {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success);
}

.stat-icon-ml-draft {
    background: rgba(108, 117, 125, 0.1);
    color: var(--gray);
}

.stat-content-ml {
    display: flex;
    flex-direction: column;
}

.stat-value-ml {
    font-size: 28px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
}

.stat-label-ml {
    font-size: 14px;
    color: var(--gray);
    margin-top: 4px;
}

/* ==================== LISTINGS CONTENT ==================== */
.listings-content-ml {
    padding: 0 0 60px;
    margin-top: -20px;
    position: relative;
    z-index: 10;
}

/* ==================== EMPTY STATE ==================== */
.empty-state-ml {
    text-align: center;
    padding: 80px 20px;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.empty-illustration-ml {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 32px;
}

.empty-icon-ml {
    width: 120px;
    height: 120px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.empty-icon-ml i {
    font-size: 48px;
    color: var(--white);
}

.empty-circles-ml {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.empty-circles-ml span {
    position: absolute;
    border: 2px dashed rgba(245, 159, 39, 0.3);
    border-radius: 50%;
}

.empty-circles-ml span:nth-child(1) {
    width: 140px;
    height: 140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 3s ease-in-out infinite;
}

.empty-circles-ml span:nth-child(2) {
    width: 160px;
    height: 160px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 3s ease-in-out infinite 0.5s;
}

.empty-circles-ml span:nth-child(3) {
    width: 180px;
    height: 180px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 3s ease-in-out infinite 1s;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

.empty-state-ml h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 12px;
}

.empty-state-ml p {
    font-size: 16px;
    color: var(--gray);
    max-width: 400px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.btn-create-first-ml {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--gradient);
    color: var(--white);
    padding: 18px 36px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(245, 159, 39, 0.35);
}

.btn-create-first-ml:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(245, 159, 39, 0.45);
    color: var(--white);
}

/* ==================== LISTINGS GRID ==================== */
.listings-grid-ml {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 28px;
}

.listing-card-ml {
    background: var(--white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s ease;
}

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

/* Card Image */
.card-image-ml {
    position: relative;
    height: 220px;
    overflow: hidden;
}

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

.listing-card-ml:hover .card-image-ml img {
    transform: scale(1.08);
}

.image-placeholder-ml {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--gray-light) 0%,
        var(--gray-medium) 100%
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--gray);
}

.image-placeholder-ml i {
    font-size: 48px;
    opacity: 0.5;
}

.image-placeholder-ml span {
    font-size: 14px;
    font-weight: 500;
}

.status-badge-ml {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}

.status-active-ml {
    background: rgba(40, 167, 69, 0.9);
    color: var(--white);
}

.status-draft-ml {
    background: rgba(108, 117, 125, 0.9);
    color: var(--white);
}

.price-badge-ml {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--white);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: baseline;
    gap: 2px;
    z-index: 2;
}

.price-currency-ml {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray);
}

.price-amount-ml {
    font-size: 20px;
    font-weight: 800;
    color: var(--dark);
}

.price-period-ml {
    font-size: 12px;
    color: var(--gray);
}

.image-overlay-ml {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.listing-card-ml:hover .image-overlay-ml {
    opacity: 1;
}

.overlay-btn-ml {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    color: var(--dark);
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    transform: translateY(10px);
}

.listing-card-ml:hover .overlay-btn-ml {
    transform: translateY(0);
}

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

/* Card Content */
.card-content-ml {
    padding: 24px;
}

.card-title-ml {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta-ml {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.meta-tag-ml {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gray-light);
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 12px;
    color: var(--gray);
}

.meta-tag-ml i {
    color: var(--primary);
    font-size: 11px;
}

.card-stats-ml {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--gray-medium);
    border-bottom: 1px solid var(--gray-medium);
    margin-bottom: 16px;
}

.card-stat-ml {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray);
}

.card-stat-ml i {
    font-size: 12px;
}

/* Card Actions */
.card-actions-ml {
    display: flex;
    gap: 10px;
}

.action-btn-ml {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
}

.action-btn-ml-edit {
    background: var(--gradient);
    color: var(--white);
}

.action-btn-ml-edit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.3);
    color: var(--white);
}

.action-btn-ml-calendar {
    background: var(--dark);
    color: var(--white);
}

.action-btn-ml-calendar:hover {
    background: var(--dark-light);
    transform: translateY(-2px);
    color: var(--white);
}

.action-btn-ml-more {
    background: var(--gray-light);
    color: var(--gray);
    flex: 0;
    width: 44px;
    padding: 12px;
}

.action-btn-ml-more:hover {
    background: var(--gray-medium);
    color: var(--dark);
}

/* dropdownML */
.action-dropdownML {
    position: relative;
}

.dropdownML-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
    margin-bottom: 8px;
}

.dropdownML-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdownML-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.dropdownML-item:hover {
    background: var(--gray-light);
}

.dropdownML-item i {
    width: 18px;
    color: var(--gray);
}

.dropdownML-item-danger {
    color: var(--danger);
}

.dropdownML-item-danger:hover {
    background: #fee;
}

.dropdownML-item-danger i {
    color: var(--danger);
}

/* Card Footer */
.card-footer-ml {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-medium);
}

.footer-date-ml {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--gray);
}

.footer-date-ml i {
    color: var(--primary);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991px) {
    .headerML-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats-row-ml {
        width: 100%;
    }

    .stat-item-ml {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .page-headerML {
        padding: 80px 0 50px;
    }

    .stats-row-ml {
        gap: 12px;
    }

    .stat-item-ml {
        padding: 16px;
    }

    .stat-value-ml {
        font-size: 22px;
    }

    .listings-grid-ml {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card-image-ml {
        height: 200px;
    }

    .card-actions-ml {
        flex-wrap: wrap;
    }

    .action-btn-ml {
        font-size: 13px;
        padding: 10px 16px;
    }

    .action-btn-ml-edit,
    .action-btn-ml-calendar {
        flex: 1 1 calc(50% - 5px);
    }

    .action-btn-ml-more {
        flex: 0 0 44px;
    }
}

@media (max-width: 575px) {
    .stat-item-ml {
        flex: 1 1 100%;
    }

    .card-stats-ml {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* ------------------------ my listings END--------------------------------- */

/* ------------------------ change pass and edit profile--------------------------------- */
.profile-page,
.password-page {
    min-height: 100vh;
    padding: 60px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    width: 100%;
    max-width: 560px;
}

.password-page .container {
    max-width: 480px;
}

/* ==================== CARDS ==================== */
.profile-card,
.password-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
}

/* ==================== BACK LINK ==================== */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 32px;
    transition: gap 0.3s ease;
}

.back-link:hover {
    gap: 12px;
    color: var(--primary-dark);
}

/* ==================== HEADER ==================== */
.card-header {
    text-align: center;
    margin-bottom: 32px;
}

.header-avatar {
    width: 80px;
    height: 80px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    font-weight: 700;
    color: var(--white);
    box-shadow: 0 4px 16px rgba(245, 159, 39, 0.3);
}

.header-icon {
    width: 72px;
    height: 72px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.header-icon i {
    font-size: 28px;
    color: var(--white);
}

.card-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.card-header p {
    font-size: 15px;
    color: var(--gray);
}

/* ==================== ALERTS ==================== */
.alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    font-size: 14px;
}

.alert-success {
    background: #d4edda;
    color: #155724;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
}

.alert-info {
    background: #d1ecf1;
    color: #0c5460;
}

/* ==================== FORM ==================== */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.required {
    color: var(--danger);
}

.optional {
    font-weight: 400;
    color: var(--gray);
}

/* ==================== INPUTS ==================== */
.input-wrapper {
    position: relative;
}

.input-wrapper i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray);
    font-size: 16px;
}

.input-wrapper input {
    width: 100%;
    padding: 16px 16px 16px 48px;
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--dark);
    transition: all 0.3s ease;
}

.input-wrapper input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(245, 159, 39, 0.1);
}

.input-wrapper input.error {
    border-color: var(--danger);
}

.input-hint {
    display: block;
    font-size: 13px;
    color: var(--gray);
    margin-top: 6px;
}

.error-message {
    display: block;
    font-size: 13px;
    color: var(--danger);
    margin-top: 6px;
}

/* ==================== BIRTHDAY SELECT ==================== */
.birthday-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 12px;
}

.select-wrapper {
    position: relative;
}

.select-wrapper select {
    width: 100%;
    padding: 16px 40px 16px 16px;
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--dark);
    background: var(--white);
    appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.select-wrapper select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(245, 159, 39, 0.1);
}

.select-wrapper select.error {
    border-color: var(--danger);
}

.select-wrapper i {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray);
    font-size: 12px;
    pointer-events: none;
}

/* ==================== FORM ACTIONS ==================== */
.form-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
}

.btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: var(--gradient);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(245, 159, 39, 0.3);
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(245, 159, 39, 0.4);
}

.btn-cancel {
    display: block;
    width: 100%;
    padding: 16px;
    background: none;
    color: var(--gray);
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    color: var(--dark);
    background: var(--gray-light);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 575px) {
    .profile-page,
    .password-page {
        padding: 40px 16px;
    }

    .profile-card,
    .password-card {
        padding: 32px 24px;
    }

    .card-header h1 {
        font-size: 22px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .birthday-row {
        grid-template-columns: 1fr;
    }
}
/* ------------------------ change pass and edit profile end--------------------------------- */

/* ------------------------ calendar--------------------------------- */

.calendar-page {
    min-height: 100vh;
}

/* High Season Calendar Styles */
.calendar-day.high-season {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%) !important;
    color: #856404 !important;
    border: 1px solid #ffc107 !important;
}
.calendar-day.high-season:hover {
    background: linear-gradient(135deg, #ffeeba 0%, #ffd966 100%) !important;
}
.legend-dot.high-season {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    border: 1px solid #d39e00;
}
.high-season-item {
    background: linear-gradient(135deg, #fffbea 0%, #fff8e1 100%);
}

/* ==================== PAGE headerC ==================== */
.page-headerC {
    position: relative;
    background: linear-gradient(
        135deg,
        #fff9f0 0%,
        #fff5e6 50%,
        var(--white) 100%
    );
    padding: 100px 0 60px;
    overflow: hidden;
}

.headerC-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.shape-mc {
    position: absolute;
    border-radius: 50%;
}

.shape-mc-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(
        circle,
        rgba(245, 159, 39, 0.12) 0%,
        transparent 70%
    );
    top: -150px;
    right: -50px;
}

.shape-mc-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.08) 0%,
        transparent 70%
    );
    bottom: -80px;
    left: -50px;
}

.headerC-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.headerC-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gradient);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.headerC-title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
    line-height: 1.2;
}

.headerC-subtitle {
    font-size: 1rem;
    color: var(--gray);
}

.headerC-camper {
    flex-shrink: 0;
    width: 180px;
    height: 120px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

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

/* ==================== CALENDAR CONTENT ==================== */
.calendar-content {
    padding: 0 0 60px;
    margin-top: -30px;
    position: relative;
    z-index: 10;
}

/* ==================== CALENDAR CARD ==================== */
.calendar-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.calendar-card .card-headerC {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--gray-medium);
}

.headerC-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-btn-cl {
    width: 40px;
    height: 40px;
    background: var(--gray-light);
    border: none;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--dark);
}

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

.month-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    min-width: 180px;
    text-align: center;
}

.today-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--gray-light);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
}

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

.calendar-card .card-body {
    padding: 28px;
}

/* Calendar Legend */
.calendar-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--gray);
}

.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.legend-dot.available {
    background: var(--white);
    border: 2px solid var(--gray-medium);
}

.legend-dot.blocked {
    background: #fee2e2;
    border: 2px solid #fca5a5;
}

.legend-dot.selected {
    background: var(--primary);
}

.legend-dot.past {
    background: var(--gray-medium);
}

/* Calendar Grid */
.calendar-grid {
    border: 1px solid var(--gray-medium);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--gray-light);
}

.weekday {
    padding: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-medium);
    border-top: none;
    border-left: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.calendar-day:nth-child(7n) {
    border-right: none;
}

.calendar-day:nth-child(7n + 1) {
    border-left: none;
}

.calendar-day.empty {
    background: var(--gray-light);
    cursor: default;
}

.calendar-day.past {
    background: var(--gray-light);
    color: #adb5bd;
    cursor: not-allowed;
}

.calendar-day.today {
    font-weight: 700;
    color: var(--primary);
}

.calendar-day.today::after {
    content: "";
    position: absolute;
    bottom: 6px;
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
}

.calendar-day.blocked {
    background: #fee2e2;
    color: #dc2626;
}

.calendar-day.blocked:hover {
    background: #fecaca;
}

.calendar-day.selected {
    background: var(--primary);
    color: var(--white);
}

.calendar-day.in-range {
    background: rgba(245, 159, 39, 0.2);
    color: var(--primary-dark);
}

.calendar-day:not(.empty):not(.past):not(.blocked):hover {
    background: rgba(245, 159, 39, 0.1);
}

/* Selection Info */
.selection-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
    border-radius: var(--radius-md);
    border: 2px solid var(--primary);
}

.selection-dates {
    display: flex;
    align-items: center;
    gap: 20px;
}

.date-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.date-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary-dark);
    letter-spacing: 0.5px;
}

.date-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
}

.date-arrow {
    color: var(--primary);
}

.clear-selection {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--gray);
    cursor: pointer;
    transition: all 0.3s ease;
}

.clear-selection:hover {
    background: var(--gray-light);
    color: var(--danger);
}

/* Instructions Card */
.instructions-card {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-top: 24px;
}

.instruction-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 20px;
    flex-shrink: 0;
}

.instruction-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 6px;
}

.instruction-content p {
    font-size: 14px;
    color: var(--gray);
    line-height: 1.6;
}

/* ==================== SIDEBAR CARDS ==================== */
.sidebar-card-cl {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
}

.sidebar-headerC {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-medium);
}

.sidebar-headerC i {
    color: var(--primary);
    font-size: 18px;
}

.sidebar-headerC h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}

.badge-count-cl {
    margin-left: auto;
    background: var(--primary);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
}

/* Form Styles */
.sidebar-card-cl form {
    padding: 24px;
}

.form-group-cl {
    margin-bottom: 20px;
}

.form-group-cl:last-of-type {
    margin-bottom: 24px;
}

.form-group-cl label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.optional-cl {
    font-weight: 400;
    color: var(--gray);
}

.input-wrapper-cl {
    position: relative;
}

.input-wrapper-cl i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray);
    font-size: 14px;
}

.input-wrapper-cl input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--dark);
    transition: all 0.3s ease;
}

.input-wrapper-cl input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(245, 159, 39, 0.1);
}

.btn-block-dates {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: var(--gradient);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(245, 159, 39, 0.3);
}

.btn-block-dates:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(245, 159, 39, 0.4);
}

.btn-block-dates:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Blocked List */
.blocked-list {
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
}

.blocked-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--gray-light);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.blocked-item:last-child {
    margin-bottom: 0;
}

.blocked-item:hover {
    background: #fee2e2;
}

.blocked-dates {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
}

.blocked-dates i {
    color: var(--danger);
}

.blocked-reason {
    font-size: 12px;
    color: var(--gray);
    margin-top: 4px;
    padding-left: 26px;
}

.unblock-btn {
    width: 36px;
    height: 36px;
    background: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--gray);
}

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

.empty-blocked {
    text-align: center;
    padding: 40px 20px;
}

.empty-blocked i {
    font-size: 40px;
    color: var(--success);
    margin-bottom: 16px;
}

.empty-blocked p {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 4px;
}

.empty-blocked span {
    font-size: 13px;
    color: var(--gray);
}

/* Quick Actions */
.quick-actions-cl {
    display: flex;
    gap: 12px;
    padding: 20px;
}

.quick-action-cl {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: var(--gray-light);
    border-radius: var(--radius-md);
    color: var(--dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.quick-action-cl:hover {
    background: var(--primary);
    color: var(--white);
}

.quick-action-cl i {
    font-size: 16px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991px) {
    .headerC-content {
        flex-direction: column;
        text-align: center;
    }

    .headerC-camper {
        width: 100%;
        max-width: 300px;
        height: 160px;
    }
}

@media (max-width: 767px) {
    .page-headerC {
        padding: 80px 0 50px;
    }

    .calendar-card .card-headerC {
        flex-direction: column;
        gap: 16px;
    }

    .month-title {
        font-size: 18px;
    }

    .calendar-legend {
        gap: 12px;
    }

    .legend-item {
        font-size: 12px;
    }

    .calendar-day {
        font-size: 12px;
    }

    .selection-info {
        flex-direction: column;
        gap: 16px;
    }

    .weekday {
        padding: 10px 4px;
        font-size: 11px;
    }

    .quick-actions-cl {
        flex-direction: column;
    }
}
/* ------------------------ calendar end--------------------------------- */

/* ------------------------ create msg--------------------------------- */

.conversation-page {
    min-height: 100vh;
    padding: 40px 20px;
}

.container-msg {
    max-width: 800px;
    margin: 0 auto;
}

.conversation-wrapper {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
}

/* ==================== HEADER ==================== */
.conversation-headerCO {
    padding: 24px;
    border-bottom: 1px solid var(--gray-medium);
    background: linear-gradient(135deg, #fff9f0 0%, #fff5e6 100%);
}

.headerCO-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.headerCO-avatar {
    width: 56px;
    height: 56px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    flex-shrink: 0;
}

.headerCO-details {
    flex: 1;
    min-width: 0;
}

.headerCO-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.headerCO-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gray);
}

.headerCO-user i {
    color: var(--primary);
    font-size: 12px;
}

.view-listing-btnCO {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--white);
    color: var(--dark);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.view-listing-btnCO:hover {
    background: var(--primary);
    color: var(--white);
}

.view-listing-btnCO i {
    font-size: 16px;
}

/* ==================== MESSAGES CONTAINER ==================== */
.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.messages-thread {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.message-bubble {
    display: flex;
    gap: 12px;
    max-width: 80%;
}

.message-bubble.sent {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message-bubble.received {
    align-self: flex-start;
}

.bubble-avatar {
    width: 36px;
    height: 36px;
    background: var(--gray-medium);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray);
    flex-shrink: 0;
}

.bubble-content {
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    position: relative;
}

.message-bubble.sent .bubble-content {
    background: var(--gradient);
    color: var(--white);
    border-bottom-right-radius: 4px;
}

.message-bubble.received .bubble-content {
    background: var(--gray-light);
    color: var(--dark);
    border-bottom-left-radius: 4px;
}

.bubble-text {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 8px;
    word-wrap: break-word;
}

.bubble-time {
    font-size: 11px;
    opacity: 0.7;
    display: block;
}

/* ==================== NO MESSAGES ==================== */
.no-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.no-messages-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.no-messages-icon i {
    font-size: 32px;
    color: var(--primary);
}

.no-messages p {
    font-size: 16px;
    color: var(--gray);
}

/* ==================== MESSAGE FORM ==================== */
.message-form-container {
    padding: 20px 24px;
    border-top: 1px solid var(--gray-medium);
    background: var(--white);
}

.message-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    background: var(--gray-light);
    border-radius: var(--radius-lg);
    padding: 8px 8px 8px 20px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.form-input-wrapper:focus-within {
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(245, 159, 39, 0.1);
}

.message-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: var(--dark);
    resize: none;
    max-height: 120px;
    padding: 10px 0;
    line-height: 1.5;
}

.message-input:focus {
    outline: none;
}

.message-input::placeholder {
    color: var(--gray);
}

.message-input.error {
    color: var(--danger);
}

.send-btn {
    width: 48px;
    height: 48px;
    background: var(--gradient);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.3);
}

.send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(245, 159, 39, 0.4);
}

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

.error-message {
    font-size: 13px;
    color: var(--danger);
    padding-left: 20px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 767px) {
    .conversation-page {
        padding: 20px 16px;
    }

    .conversation-wrapper {
        min-height: calc(100vh - 40px);
    }

    .conversation-headerCO {
        padding: 20px;
    }

    .headerCO-info {
        flex-wrap: wrap;
    }

    .headerCO-avatar {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .headerCO-details {
        flex: 1 1 calc(100% - 64px);
    }

    .headerCO-title {
        font-size: 18px;
    }

    .view-listing-btnCO {
        width: 100%;
        justify-content: center;
        margin-top: 12px;
    }

    .messages-container {
        padding: 16px;
    }

    .message-bubble {
        max-width: 90%;
    }

    .bubble-content {
        padding: 12px 14px;
    }

    .bubble-text {
        font-size: 14px;
    }

    .message-form-container {
        padding: 16px;
    }
}
/* ------------------------ create msg end--------------------------------- */

/* ------------------------ inbox--------------------------------- */

.messages-page {
    min-height: 100vh;
}

/* ==================== PAGE headerI ==================== */
.page-headerI {
    position: relative;
    background: linear-gradient(
        135deg,
        #fff9f0 0%,
        #fff5e6 50%,
        var(--white) 100%
    );
    padding: 100px 0 60px;
    overflow: hidden;
}

.headerI-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.shape-inbox {
    position: absolute;
    border-radius: 50%;
}

.shape-inbox-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(
        circle,
        rgba(245, 159, 39, 0.12) 0%,
        transparent 70%
    );
    top: -150px;
    right: -50px;
}

.shape-inbox-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.08) 0%,
        transparent 70%
    );
    bottom: -80px;
    left: -50px;
}

.headerI-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.headerI-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.headerI-subtitle {
    font-size: 1rem;
    color: var(--gray);
}

.headerI-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.stat-badge-i {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    padding: 12px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    box-shadow: var(--shadow-sm);
}

.stat-badge-i i {
    color: var(--primary);
}

.stat-badge-i-unread {
    background: var(--gradient);
    color: var(--white);
}

.stat-badge-i-unread i {
    color: var(--white);
}

/* ==================== MESSAGES CONTENT ==================== */
.messages-content {
    padding: 0 0 60px;
    margin-top: -20px;
    position: relative;
    z-index: 10;
}

/* ==================== EMPTY STATE ==================== */
.empty-state-i {
    text-align: center;
    padding: 80px 20px;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.empty-illustration-i {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 32px;
}

.empty-icon-i {
    width: 120px;
    height: 120px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.empty-icon-i i {
    font-size: 48px;
    color: var(--white);
}

.empty-circles-i {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.empty-circles-i span {
    position: absolute;
    border: 2px dashed rgba(245, 159, 39, 0.3);
    border-radius: 50%;
}

.empty-circles-i span:nth-child(1) {
    width: 140px;
    height: 140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 3s ease-in-out infinite;
}

.empty-circles-i span:nth-child(2) {
    width: 160px;
    height: 160px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 3s ease-in-out infinite 0.5s;
}

.empty-circles-i span:nth-child(3) {
    width: 180px;
    height: 180px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 3s ease-in-out infinite 1s;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

.empty-state-i h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 12px;
}

.empty-state-i p {
    font-size: 16px;
    color: var(--gray);
    max-width: 400px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.btn-browse-i {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gradient);
    color: var(--white);
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(245, 159, 39, 0.3);
}

.btn-browse-i:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(245, 159, 39, 0.4);
    color: var(--white);
}

/* ==================== CONVERSATIONS LIST ==================== */
.conversations-list-i {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.conversation-card-i {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--gray-medium);
    transition: all 0.3s ease;
}

.conversation-card-i:last-child {
    border-bottom: none;
}

.conversation-card-i:hover {
    background: var(--gray-light);
}

.conversation-card-i.has-unread {
    background: linear-gradient(
        90deg,
        rgba(245, 159, 39, 0.05) 0%,
        transparent 100%
    );
}

.conversation-card-i.has-unread:hover {
    background: linear-gradient(
        90deg,
        rgba(245, 159, 39, 0.1) 0%,
        var(--gray-light) 100%
    );
}

/* Avatar */
.conversation-avatar-i {
    position: relative;
    width: 56px;
    height: 56px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
    flex-shrink: 0;
}

.avatar-dot-i {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    background: var(--success);
    border: 3px solid var(--white);
    border-radius: 50%;
}

/* Content */
.conversation-content-i {
    flex: 1;
    min-width: 0;
}

.conversation-headerI {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.conversation-title-i {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-time-i {
    font-size: 13px;
    color: var(--gray);
    white-space: nowrap;
}

.conversation-meta-i {
    display: flex;
    align-items: center;
    gap: 12px;
}

.conversation-user-i {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--gray);
}

.conversation-user-i i {
    font-size: 12px;
    color: var(--primary);
}

.unread-badge-i {
    display: inline-flex;
    align-items: center;
    background: var(--primary);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

/* Arrow */
.conversation-arrow-i {
    width: 36px;
    height: 36px;
    background: var(--gray-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.conversation-card-i:hover .conversation-arrow-i {
    background: var(--primary);
    color: var(--white);
    transform: translateX(4px);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 767px) {
    .page-headerI {
        padding: 80px 0 50px;
    }

    .headerI-content {
        flex-direction: column;
    }

    .headerI-stats {
        width: 100%;
    }

    .stat-badge-i {
        flex: 1;
        justify-content: center;
    }

    .conversation-card-i {
        padding: 20px;
        gap: 16px;
    }

    .conversation-avatar-i {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .conversation-headerI {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .conversation-title-i {
        font-size: 15px;
    }

    .conversation-arrow-i {
        display: none;
    }
}
/* ------------------------ inbox end--------------------------------- */

/* ------------------------ camper lisitngs--------------------------------- */

/* ==================== FILTERS BAR - REDESIGNED ==================== */
.filters-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 20px 24px;
    margin-bottom: 32px;
}

.filters-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.filters-main {
    flex: 1;
    min-width: 0;
}

.filters-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-item {
    flex: 1;
    min-width: 180px;
    max-width: 240px;
}

.filter-item-price {
    min-width: 260px;
    max-width: 320px;
}

.filter-actions-item {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    min-width: auto;
    max-width: none;
}

.filter-label-l {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-label-l i {
    color: var(--primary);
    font-size: 12px;
}

.input-wrapper-l {
    position: relative;
}

.filter-input-l {
    width: 100%;
    padding: 12px 14px;
    padding-right: 40px;
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
    background: var(--white);
    transition: all 0.3s ease;
}

.filter-input-l:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(245, 159, 39, 0.1);
}

.filter-input-l::placeholder {
    color: #adb5bd;
}

.input-icon-l-l {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
    pointer-events: none;
    font-size: 13px;
}

.select-wrapper-l {
    position: relative;
}

.filter-select-l {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
    background: var(--white);
    appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-select-l:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(245, 159, 39, 0.1);
}

.select-icon-l {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray);
    pointer-events: none;
    font-size: 11px;
}

/* Price Inputs */
.price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-input-wrapper {
    position: relative;
    flex: 1;
}

.price-input-l {
    padding-left: 32px !important;
    padding-right: 14px !important;
}

.currency-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray);
    font-weight: 600;
    font-size: 13px;
}

.price-divider {
    color: #ced4da;
    font-size: 12px;
    flex-shrink: 0;
}

/* Action Buttons */
.btn-search-l {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--gradient);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(245, 159, 39, 0.3);
    white-space: nowrap;
    height: 46px;
}

.btn-search-l:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(245, 159, 39, 0.4);
}

.btn-clear-l {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: var(--white);
    color: var(--gray);
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.btn-clear-l:hover {
    border-color: #dc3545;
    color: #dc3545;
    background: #fff5f5;
}

.btn-more-filters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: var(--gray-light);
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    color: var(--gray);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    height: 46px;
}

.btn-more-filters:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #fff8f0;
}

.btn-more-filters.active {
    border-color: var(--primary);
    color: var(--primary);
    background: #fff8f0;
}

.btn-more-filters .toggle-icon {
    transition: transform 0.3s ease;
    font-size: 10px;
    margin-left: 2px;
}

.btn-more-filters.active .toggle-icon {
    transform: rotate(180deg);
}

/* Map Toggle Section */
.map-toggle-section {
    flex-shrink: 0;
    padding-top: 22px;
    /* Align with filter inputs */
}

.btn-map-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--dark);
    color: var(--white);
    border: 2px solid var(--dark);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    height: 46px;
}

.btn-map-toggle:hover {
    background: var(--dark-light);
    border-color: var(--dark-light);
    transform: translateY(-2px);
}

.btn-map-toggle i {
    color: var(--primary);
    font-size: 16px;
}

.btn-map-toggle.map-hidden {
    background: var(--white);
    color: var(--dark);
    border-color: var(--gray-medium);
}

.btn-map-toggle.map-hidden:hover {
    border-color: var(--primary);
    background: #fff8f0;
}

.btn-map-toggle.map-hidden i {
    color: var(--primary);
}

/* Advanced Filters */
.advanced-filters {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.advanced-filters.expanded {
    max-height: 200px;
    opacity: 1;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--gray-medium);
}

.advanced-filters-content {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ==================== RESPONSIVE FILTERS ==================== */
@media (max-width: 1400px) {
    .filter-item {
        min-width: 160px;
    }
}

@media (max-width: 1200px) {
    .filters-wrapper {
        flex-direction: column;
        gap: 16px;
    }

    .map-toggle-section {
        padding-top: 0;
        width: 100%;
    }

    .btn-map-toggle {
        width: 100%;
        justify-content: center;
    }

    .filter-item {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
    }

    .filter-actions-item {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .filters-card {
        padding: 16px;
    }

    .filters-row {
        gap: 12px;
    }

    .filter-item {
        flex: 1 1 100%;
    }

    .filter-item-price {
        min-width: 100%;
    }

    .filter-actions-item {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 8px;
        width: 100%;
    }

    .btn-search-l {
        width: 100%;
        justify-content: center;
    }

    .advanced-filters.expanded {
        max-height: 400px;
    }

    .advanced-filters-content {
        flex-direction: column;
    }

    .advanced-filters-content .filter-item {
        min-width: 100%;
    }

    .more-filters-text {
        display: none;
    }

    .btn-more-filters {
        padding: 12px 14px;
    }
}

@media (max-width: 480px) {
    .filter-actions-item {
        grid-template-columns: 1fr auto auto;
    }

    .price-inputs {
        flex-direction: column;
        gap: 8px;
    }

    .price-divider {
        display: none;
    }
}

/* ==================== REST OF STYLES (unchanged) ==================== */
.text-gradient-l {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero Section */
.listings-hero {
    position: relative;
    background: linear-gradient(
        135deg,
        #fff9f0 0%,
        #fff5e6 50%,
        var(--white) 100%
    );
    padding: 100px 0 60px;
    overflow: hidden;
}

.hero-bg-shapes-l {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.shape-l {
    position: absolute;
    border-radius: 50%;
}

.shape-l-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(
        circle,
        rgba(245, 159, 39, 0.12) 0%,
        transparent 70%
    );
    top: -200px;
    right: -100px;
    animation: float 20s ease-in-out infinite;
}

.shape-l-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.08) 0%,
        transparent 70%
    );
    bottom: -100px;
    left: -50px;
    animation: float 15s ease-in-out infinite reverse;
}

@keyframes float {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(20px, -20px) scale(1.03);
    }

    66% {
        transform: translate(-15px, 15px) scale(0.97);
    }
}

.hero-content-l {
    position: relative;
    z-index: 1;
}

.hero-badge-l {
    display: inline-flex;
    align-items: center;
    background: var(--gradient);
    color: var(--white);
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    animation: fadeInDown 0.6s ease;
}

.hero-title-l {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    animation: fadeInUp 0.6s ease 0.1s both;
}

.hero-subtitle-l {
    font-size: 1.15rem;
    color: var(--gray);
    max-width: 500px;
    margin: 0 auto;
    animation: fadeInUp 0.6s ease 0.2s both;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Listings Section */
.listings-section {
    padding: 0 0 60px;
    margin-top: -30px;
    position: relative;
    z-index: 10;
}

/* Results Header */
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 0 4px;
}

.results-count {
    display: flex;
    align-items: center;
    gap: 8px;
}

.count-highlight {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient);
    color: var(--white);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
}

.count-text {
    color: var(--gray);
    font-size: 15px;
}

.view-options {
    display: flex;
    gap: 8px;
}

.view-btn-l {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-sm);
    color: var(--gray);
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-btn-l:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.view-btn-l.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

/* Campers Grid */
.campers-grid-l {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.camper-item-l {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.4s ease;
}

.camper-item-l.hidden {
    display: none !important;
}

.camper-card-l {
    display: block;
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s ease;
}

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

.camper-card-l.highlighted {
    box-shadow: 0 8px 32px rgba(245, 159, 39, 0.3);
    outline: 3px solid var(--primary);
}

.card-image-l {
    position: relative;
    height: 200px;
    overflow: hidden;
}

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

.camper-card-l:hover .card-image-l img {
    transform: scale(1.1);
}

.image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 40%,
        rgba(0, 0, 0, 0.6) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.camper-card-l:hover .image-overlay {
    opacity: 1;
}

.price-badge-l {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--white);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: baseline;
    gap: 2px;
    z-index: 2;
}

.price-amount-l {
    font-size: 18px;
    font-weight: 800;
    color: var(--dark);
}

.price-period-l {
    font-size: 12px;
    color: var(--gray);
    font-weight: 500;
}

.quick-actions-l {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    z-index: 2;
}

.camper-card-l:hover .quick-actions-l {
    opacity: 1;
    transform: translateX(0);
}

.action-btn-l {
    width: 40px;
    height: 40px;
    background: var(--white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--dark);
    box-shadow: var(--shadow-sm);
}

.action-btn-l:hover {
    background: var(--primary);
    color: var(--white);
    transform: scale(1.1);
}

.type-badge-l {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: var(--gradient);
    color: var(--white);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.card-content-l {
    padding: 20px;
}

.card-meta-l {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.meta-item-l {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray);
    font-weight: 500;
}

.meta-item-l i {
    color: var(--primary);
    font-size: 11px;
}

.card-title-l {
    font-size: 17px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 48px;
}

.card-footer-l {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--gray-medium);
}

.card-rating-l {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
}

.card-rating-l i {
    color: #ffc107;
}

.rating-count-l {
    color: var(--gray);
    font-weight: 400;
    font-size: 13px;
}

.view-details-l {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    transition: all 0.3s ease;
}

.camper-card-l:hover .view-details-l {
    gap: 10px;
}

/* No Results */
.no-results-l,
.empty-state-l {
    text-align: center;
    padding: 80px 20px;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.no-results-l-icon,
.empty-icon-l {
    width: 100px;
    height: 100px;
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.no-results-l-icon i,
.empty-icon-l i {
    font-size: 40px;
    color: var(--primary);
}

.no-results-l h3,
.empty-state-l h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.no-results-l p,
.empty-state-l p {
    color: var(--gray);
    margin-bottom: 24px;
}

.btn-reset-view-l,
.btn-primary-custom-l {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--gradient);
    color: var(--white);
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(245, 159, 39, 0.3);
}

.btn-reset-view-l:hover,
.btn-primary-custom-l:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(245, 159, 39, 0.4);
    color: var(--white);
}

/* Map Section */
.map-container {
    position: sticky;
    top: 20px;
}

.map-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    position: relative;
}

#campersMap {
    height: calc(100vh - 180px);
    min-height: 500px;
}

.search-toggle {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: var(--white);
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: var(--shadow-md);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin: 0;
    user-select: none;
}

.toggle-label input {
    display: none;
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: #dee2e6;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.toggle-switch::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--white);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-label input:checked + .toggle-switch {
    background: var(--primary);
}

.toggle-label input:checked + .toggle-switch::after {
    left: 22px;
}

.toggle-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
}

.map-controls {
    position: absolute;
    bottom: 24px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}

.map-control-btn {
    width: 40px;
    height: 40px;
    background: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    color: var(--dark);
}

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

/* Map marker info window */
.marker-info {
    max-width: 280px;
    padding: 4px;
}

.marker-info img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.marker-info .type-label {
    display: inline-block;
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.marker-info h5 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--dark);
    line-height: 1.3;
}

.marker-info .price {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 12px;
}

.marker-info .price span {
    font-size: 12px;
    font-weight: 400;
    color: var(--gray);
}

.marker-info a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--gradient);
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.marker-info a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.4);
}

/* Google Places Autocomplete */
.pac-container {
    z-index: 10000;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    margin-top: 4px;
    border: none;
    font-family: inherit;
}

.pac-item {
    padding: 12px 16px;
    font-size: 14px;
    cursor: pointer;
    border-top: 1px solid var(--gray-medium);
}

.pac-item:first-child {
    border-top: none;
}

.pac-item:hover {
    background-color: #fff8f0;
}

.pac-icon {
    display: none;
}

.pac-item-query {
    font-weight: 600;
    color: var(--dark);
}

/* Layout Transitions */
#listingsColumn,
#mapColumn {
    transition: all 0.4s ease;
}

#listingsColumn.full-width {
    flex: 0 0 100%;
    max-width: 100%;
}

#listingsColumn.full-width .campers-grid-l {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

#mapColumn.hidden {
    display: none;
}

/* Responsive */
@media (max-width: 991px) {
    .listings-hero {
        padding: 80px 0 50px;
    }

    #listingsColumn {
        flex: 0 0 100%;
        max-width: 100%;
        order: 2;
    }

    #mapColumn {
        flex: 0 0 100%;
        max-width: 100%;
        order: 1;
        margin-bottom: 24px;
    }

    .map-container {
        position: relative;
    }

    #campersMap {
        height: 400px !important;
        min-height: 400px;
    }

    .campers-grid-l {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

@media (max-width: 767px) {
    .listings-section {
        padding: 0 0 40px;
    }

    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .campers-grid-l {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .card-image-l {
        height: 180px;
    }

    #campersMap {
        height: 350px !important;
        min-height: 350px;
    }
}

@media (max-width: 575px) {
    .hero-title-l {
        font-size: 1.75rem;
    }
}

/* ------------------------ camper listings end--------------------------------- */

/* ------------------------ camper show and preview--------------------------------- */
.camper-preview-page,
.camper-detail-page {
    min-height: 100vh;
}

/* ==================== PREVIEW BANNER (Preview Page Only) ==================== */
.preview-banner {
    background: linear-gradient(135deg, #2d2d44 0%, #1a1a2e 100%);
    padding: 16px 0;
    position: relative;
    overflow: hidden;
}

.preview-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient);
}

.banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.banner-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.banner-icon {
    width: 48px;
    height: 48px;
    background: rgba(245, 159, 39, 0.15);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 20px;
}

.banner-text {
    display: flex;
    flex-direction: column;
}

.banner-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
}

.banner-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
}

.status-active {
    background: rgba(40, 167, 69, 0.15);
    color: #5cb85c;
}

.status-draft {
    background: rgba(108, 117, 125, 0.15);
    color: #adb5bd;
}

/* ==================== GALLERY HERO ==================== */
.gallery-hero {
    background: var(--dark);
}

.gallery-main {
    position: relative;
    height: 500px;
    overflow: hidden;
}

.camper-preview-page .gallery-main {
    height: 480px;
}

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

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
}

.photo-counter {
    position: absolute;
    top: 24px;
    right: 24px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--white);
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(10px);
}

.btn-view-all {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: var(--white);
    color: var(--dark);
    border: none;
    padding: 14px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.btn-view-all:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: var(--white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
    color: var(--dark);
    font-size: 18px;
}

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

.gallery-nav-prev {
    left: 24px;
}

.gallery-nav-next {
    right: 24px;
}

.thumbnail-strip {
    background: var(--dark);
    padding: 16px 24px;
}

.thumbnail-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
}

.thumbnail-container::-webkit-scrollbar {
    display: none;
}

.thumbnail {
    flex-shrink: 0;
    width: 80px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 3px solid transparent;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
    padding: 0;
    background: none;
}

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

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

.thumbnail-more {
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 700;
    font-size: 16px;
    opacity: 1;
}

.thumbnail-more:hover {
    background: var(--primary);
}

/* ==================== DETAIL CONTENT ==================== */
.detail-content {
    padding: 40px 0 80px;
}

.detail-header {
    margin-bottom: 32px;
}

.header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.badge-type {
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-license {
    background: var(--gray-medium);
    color: var(--gray);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

.badge-instant {
    background: var(--gradient);
    color: var(--white);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-finance {
    background: #28a745; /* green background */
    color: #fff; /* white text */
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
    line-height: 1.2;
}

.detail-subtitle {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--gray);
    margin-bottom: 16px;
}

.detail-meta-s {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.meta-item-s {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gray);
    font-size: 15px;
}

.meta-item-s i {
    color: var(--primary);
}

.meta-rating-s {
    color: var(--dark);
    font-weight: 600;
}

.meta-rating-s i {
    color: #ffc107;
}

.rating-count-s {
    color: var(--gray);
    font-weight: 400;
}

/* ==================== QUICK STATS ==================== */
.quick-stats-s {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card-s {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

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

.stat-icon-s {
    width: 48px;
    height: 48px;
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 20px;
}

.stat-content-s {
    display: flex;
    flex-direction: column;
}

.stat-value-s {
    font-size: 20px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.2;
}

.stat-label-s {
    font-size: 13px;
    color: var(--gray);
}

/* ==================== DETAIL CARDS ==================== */
.detail-card-s {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
}

.detail-card-s .card-header-s {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    border-bottom: 1px solid var(--gray-medium);
}

.header-icon-s {
    width: 44px;
    height: 44px;
    background: var(--gradient);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 18px;
}

.detail-card-s .card-header-s h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}

.feature-count-s,
.review-summary-s {
    margin-left: auto;
    background: var(--gray-light);
    color: var(--gray);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
}

.detail-card-s .card-body-s {
    padding: 28px;
}

.description-text-s {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}

/* Features Grid */
.features-grid-s {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.feature-item-s {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gray-light);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--dark);
    transition: all 0.3s ease;
}

.feature-item-s:hover {
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
}

.feature-item-s i {
    color: var(--primary);
    font-size: 12px;
}

/* Rules List */
.rules-list-s {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rule-item-s {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #fff8f0;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--primary);
}

.rule-icon {
    color: var(--primary);
    font-size: 16px;
    margin-top: 2px;
}

.rule-item-s span {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

/* ==================== REVIEWS ==================== */
.rating-overview-s {
    display: flex;
    gap: 40px;
    padding: 24px;
    background: var(--gray-light);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.rating-score {
    text-align: center;
    padding-right: 40px;
    border-right: 1px solid var(--gray-medium);
}

.score-value {
    display: block;
    font-size: 48px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 8px;
}

.score-stars {
    color: #ffc107;
    font-size: 16px;
    margin-bottom: 8px;
}

.score-count {
    font-size: 14px;
    color: var(--gray);
}

.rating-breakdown {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.breakdown-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.breakdown-label {
    width: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
}

.breakdown-row i {
    color: #ffc107;
    font-size: 12px;
}

.breakdown-bar {
    flex: 1;
    height: 8px;
    background: var(--gray-medium);
    border-radius: 4px;
    overflow: hidden;
}

.breakdown-fill {
    height: 100%;
    background: var(--gradient);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.breakdown-count {
    width: 30px;
    font-size: 13px;
    color: var(--gray);
    text-align: right;
}

.btn-write-review {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gradient);
    color: var(--white);
    border: none;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(245, 159, 39, 0.3);
    text-decoration: none;
    margin-bottom: 24px;
}

.btn-write-review:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(245, 159, 39, 0.4);
    color: var(--white);
}

.reviews-list {
    display: flex;
    flex-direction: column;
}

.review-item {
    padding: 24px 0;
    border-bottom: 1px solid var(--gray-medium);
}

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

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.reviewer-avatar {
    width: 48px;
    height: 48px;
    background: var(--gradient);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}

.reviewer-details {
    display: flex;
    flex-direction: column;
}

.reviewer-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark);
}

.review-date {
    font-size: 13px;
    color: var(--gray);
}

.review-rating {
    color: #ffc107;
    font-size: 14px;
}

.review-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.review-comment {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 0;
}

.owner-response {
    margin-top: 16px;
    padding: 16px;
    background: var(--gray-light);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary);
}

.response-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.response-header i {
    color: var(--primary);
}

.response-label {
    font-weight: 600;
    color: var(--dark);
    font-size: 14px;
}

.response-date {
    font-size: 12px;
    color: var(--gray);
}

.response-text {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

.review-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.review-actions .action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--gray-light);
    border: none;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray);
    cursor: pointer;
    transition: all 0.3s ease;
}

.review-actions .action-btn:hover {
    background: var(--gray-medium);
    color: var(--dark);
}

.review-actions .action-btn-danger:hover {
    background: #fee;
    color: var(--danger);
}

.review-actions .action-btn-primary {
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
    color: var(--primary);
}

.review-actions .action-btn-primary:hover {
    background: var(--gradient);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.3);
}

.no-reviews {
    text-align: center;
    padding: 48px 20px;
}

.no-reviews-icon {
    width: 80px;
    height: 80px;
    background: var(--gray-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.no-reviews-icon i {
    font-size: 32px;
    color: var(--gray);
}

.no-reviews h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.no-reviews p {
    color: var(--gray);
    margin-bottom: 20px;
}

.reviews-pagination {
    display: flex;
    justify-content: center;
    padding-top: 24px;
}

/* ==================== BOOKING CARD (Detail Page) ==================== */
.booking-card-s {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 28px;
    position: sticky;
    top: 24px;
}

.booking-price-s {
    text-align: center;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--gray-medium);
}

.price-main-s {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.price-currency-s {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray);
}

.price-amount-s {
    font-size: 42px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.price-period-s {
    font-size: 16px;
    color: var(--gray);
}

.price-extra-s {
    font-size: 13px;
    color: var(--gray);
    margin-top: 8px;
}

/* Booking Dates */
.booking-dates-S {
    display: flex;
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.booking-dates-S:focus-within {
    border-color: var(--primary);
}

.date-input-s {
    flex: 1;
    padding: 14px 16px;
    cursor: pointer;
}

.date-input-s label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 6px;
}

.date-input-s input {
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--dark);
    width: 100%;
    cursor: pointer;
    outline: none;
}

.date-input-s input::placeholder {
    color: #999;
}

.date-field-s {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dark);
    font-size: 14px;
    cursor: pointer;
}

.date-field-s i {
    color: var(--primary);
}

.date-divider-s {
    width: 1px;
    background: var(--gray-medium);
}

/* Booking Summary */
.booking-summary-s {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
    display: none;
}

.booking-summary-s.active {
    display: block;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.summary-row.total {
    border-top: 1px solid #e0e0e0;
    margin-top: 8px;
    padding-top: 16px;
    font-weight: 600;
    font-size: 16px;
}

.trip-length-notice {
    background: #fff3e0;
    border: 1px solid #f59f27;
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
    font-size: 13px;
    color: #e65100;
    display: none;
}

.trip-length-notice.active {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Booking Actions */
.booking-actions-s {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.btn-book-s {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: var(--gradient);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(245, 159, 39, 0.3);
}

.btn-book-s:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(245, 159, 39, 0.4);
}

.btn-book-s.btn-instant {
    background: linear-gradient(135deg, #f59f27 0%, #ffc107 100%);
}

.btn-message-s {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: var(--white);
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-message-s:hover {
    background: #fff8f0;
    color: var(--primary);
}

.owner-notice-s {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: var(--radius-md);
    font-weight: 500;
}

/* Booking Info */
.booking-info-s {
    padding: 20px 0;
    border-top: 1px solid var(--gray-medium);
    border-bottom: 1px solid var(--gray-medium);
}

.info-row-s {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.info-label-s {
    font-size: 14px;
    color: var(--gray);
}

.info-value-s {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-value-s.text-success-s {
    color: var(--success);
}

.info-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
}

.info-badge-success {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success);
}

.info-badge-draft {
    background: var(--gray-light);
    color: var(--gray);
}

.booking-extras-s {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.extra-btn-s {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--gray-light);
    border: none;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray);
    cursor: pointer;
    transition: all 0.3s ease;
}

.extra-btn-s:hover {
    background: var(--gray-medium);
    color: var(--dark);
}

/* ==================== OWNER CARD (Preview Page) ==================== */
.owner-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 0;
    position: sticky;
    top: 24px;
    overflow: hidden;
}

.owner-badge {
    background: linear-gradient(135deg, #2d2d44 0%, #1a1a2e 100%);
    color: var(--white);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
}

.owner-badge i {
    color: var(--primary);
}

.price-section {
    padding: 24px;
    text-align: center;
    border-bottom: 1px solid var(--gray-medium);
}

.listing-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-medium);
    gap: 12px;
}

.listing-stat {
    text-align: center;
}

.stat-icon-s-small {
    width: 36px;
    height: 36px;
    background: var(--gray-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    color: var(--gray);
    font-size: 14px;
}

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

.stat-number {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
}

.stat-text {
    font-size: 11px;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.owner-actions {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid var(--gray-medium);
}

.btn-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: var(--gradient);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(245, 159, 39, 0.3);
}

.btn-edit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(245, 159, 39, 0.4);
    color: var(--white);
}

.btn-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    border: 2px solid;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--white);
}

.btn-deactivate {
    border-color: var(--danger);
    color: var(--danger);
}

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

.btn-activate {
    border-color: var(--success);
    color: var(--success);
}

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

.listing-info {
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-medium);
}

.quick-links {
    padding: 20px 24px;
}

.quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    color: var(--dark);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

.quick-link:last-child {
    margin-bottom: 0;
}

.quick-link:hover {
    background: var(--gray-light);
    color: var(--primary);
}

.quick-link i {
    width: 20px;
    color: var(--primary);
}

/* ==================== MODALS ==================== */
.review-overlay-s {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.review-overlay-s.active {
    display: flex;
}

.review-modal-s {
    background: var(--white);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.review-modal-s .modal-header-s {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid var(--gray-medium);
}

.review-modal-s .modal-header-s h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}

.modal-close-s {
    width: 36px;
    height: 36px;
    background: var(--gray-light);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--gray);
}

.modal-close-s:hover {
    background: var(--gray-medium);
    color: var(--dark);
}

.review-modal-s .modal-body {
    padding: 28px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 10px;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--dark);
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(245, 159, 39, 0.1);
}

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

.form-hint {
    display: block;
    font-size: 12px;
    color: var(--gray);
    margin-top: 6px;
}

.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}

.star-rating input {
    display: none;
}

.star-rating label {
    cursor: pointer;
    font-size: 32px;
    color: #ddd;
    transition: all 0.2s ease;
    margin-bottom: 0;
}

.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
    color: #ffc107;
}

.review-modal-s .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 28px;
    border-top: 1px solid var(--gray-medium);
    background: var(--gray-light);
}

.btn-cancel {
    padding: 12px 24px;
    background: var(--white);
    color: var(--gray);
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    border-color: var(--gray);
    color: var(--dark);
}

.btn-submit {
    padding: 12px 28px;
    background: var(--gradient);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.3);
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(245, 159, 39, 0.4);
}

/* ==================== GALLERY MODAL ==================== */
.gallery-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.gallery-modal.active {
    display: flex;
}

.gallery-modal-close-s {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--white);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.gallery-modal-close-s:hover {
    background: var(--primary);
}

.gallery-modal-content-s {
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-modal-content-s img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.gallery-modal-nav-s {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--white);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-modal-nav-s:hover {
    background: var(--primary);
}

.gallery-modal-prev-s {
    left: 24px;
}

.gallery-modal-next-s {
    right: 24px;
}

.gallery-modal-counter {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
}

.gallery-modal-thumbs {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    max-width: 90vw;
    overflow-x: auto;
    padding: 12px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: var(--radius-md);
    scrollbar-width: none;
}

.gallery-modal-thumbs::-webkit-scrollbar {
    display: none;
}

.modal-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 48px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s ease;
    padding: 0;
    background: none;
}

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

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

/* ==================== FLATPICKR CUSTOMIZATIONS ==================== */
.flatpickr-calendar {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #f59f27 !important;
    border-color: #f59f27 !important;
}

.flatpickr-day.inRange {
    background: rgba(245, 159, 39, 0.2) !important;
    border-color: rgba(245, 159, 39, 0.2) !important;
}

.flatpickr-day.blocked-date {
    background: #ffebee !important;
    color: #c62828 !important;
    text-decoration: line-through;
    pointer-events: none;
}

.flatpickr-day.disabled {
    color: #ccc !important;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991px) {
    .gallery-main {
        height: 400px;
    }

    .camper-preview-page .gallery-main {
        height: 380px;
    }

    .quick-stats-s {
        grid-template-columns: repeat(2, 1fr);
    }

    .rating-overview-s {
        flex-direction: column;
        gap: 24px;
    }

    .rating-score {
        padding-right: 0;
        padding-bottom: 24px;
        border-right: none;
        border-bottom: 1px solid var(--gray-medium);
    }

    .booking-card-s,
    .owner-card {
        position: relative;
        top: 0;
    }

    .listing-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .banner-content {
        flex-direction: column;
        text-align: center;
    }

    .banner-info {
        flex-direction: column;
    }

    .gallery-main {
        height: 300px;
    }

    .camper-preview-page .gallery-main {
        height: 280px;
    }

    .gallery-nav {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .gallery-nav-prev {
        left: 12px;
    }

    .gallery-nav-next {
        right: 12px;
    }

    .btn-view-all {
        bottom: 16px;
        right: 16px;
        padding: 12px 18px;
        font-size: 13px;
    }

    .thumbnail-strip {
        padding: 12px 16px;
    }

    .thumbnail {
        width: 64px;
        height: 44px;
    }

    .detail-content {
        padding: 24px 0 60px;
    }

    .quick-stats-s {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card-s {
        padding: 16px;
    }

    .features-grid-s {
        grid-template-columns: 1fr;
    }

    .review-header {
        flex-direction: column;
        gap: 12px;
    }

    .booking-extras-s {
        flex-wrap: wrap;
    }

    .listing-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .gallery-modal-nav-s {
        width: 44px;
        height: 44px;
    }

    .gallery-modal-prev-s {
        left: 12px;
    }

    .gallery-modal-next-s {
        right: 12px;
    }
}

@media (max-width: 575px) {
    .detail-meta-s {
        flex-direction: column;
        gap: 12px;
    }

    .stat-card-s {
        flex-direction: column;
        text-align: center;
    }

    .stat-icon-s {
        margin-bottom: 8px;
    }

    .quick-link {
        padding: 12px 14px;
        font-size: 13px;
    }
}
/* ------------------------ camper show and preview end--------------------------------- */

/* ------------------------my bookings index --------------------------------- */

.bookings-page {
    min-height: 100vh;
    background: var(--gray-light);
}

/* Header */
.bookings-header {
    position: relative;
    background: linear-gradient(
        135deg,
        #fff9f0 0%,
        #fff5e6 50%,
        var(--white) 100%
    );
    padding: 100px 0 80px;
    overflow: hidden;
}

.header-bg-shape-bis {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.shape-bi {
    position: absolute;
    border-radius: 50%;
}

.shape-bi-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(
        circle,
        rgba(245, 159, 39, 0.1) 0%,
        transparent 70%
    );
    top: -150px;
    right: -100px;
}

.shape-bi-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.08) 0%,
        transparent 70%
    );
    bottom: -100px;
    left: -50px;
}

.header-content-bi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.page-title-bi {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.page-subtitle-bi {
    font-size: 1.1rem;
    color: var(--gray);
}

.btn-browse-bi {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--gradient);
    color: var(--white);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.3);
}

.btn-browse-bi:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 159, 39, 0.4);
    color: var(--white);
}

/* Content */
.bookings-content {
    padding: 0 0 60px;
    margin-top: -40px;
    position: relative;
    z-index: 10;
}

/* Tab Navigation */
.tab-navigation-bi {
    display: flex;
    gap: 12px;
    background: var(--white);
    padding: 8px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: 32px;
    max-width: 500px;
}

.tab-btn-bi {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: none;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 600;
    color: var(--gray);
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn-bi:hover {
    color: var(--dark);
    background: var(--gray-light);
}

.tab-btn-bi.active {
    background: var(--gradient);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.3);
}

.tab-count-bi {
    background: rgba(255, 255, 255, 0.3);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.tab-btn-bi:not(.active) .tab-count-bi {
    background: var(--gray-medium);
    color: var(--gray);
}

/* Tab Content */
.tab-pane-bi {
    display: none;
}

.tab-pane-bi.active {
    display: block;
}

/* Filter Bar */
.filter-bar-bi {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.filter-group-bi {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-chip-bi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--white);
    border: 2px solid var(--gray-medium);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray);
    text-decoration: none;
    transition: all 0.2s ease;
}

.filter-chip-bi:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-chip-bi.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.filter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.filter-dot.pending {
    background: var(--warning);
}

/* Pending Alert */
.pending-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    color: #856404;
    font-size: 14px;
}

.pending-alert i {
    font-size: 18px;
}

/* Bookings List */
.bookings-list-bi {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.booking-card-bi {
    display: flex;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
}

.booking-card-bi:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.booking-card-bi.booking-pending {
    border-left: 4px solid var(--warning);
}

.booking-image-bi {
    width: 220px;
    min-height: 200px;
    position: relative;
    flex-shrink: 0;
}

.booking-image-bi img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-image-bi .no-image-bi {
    width: 100%;
    height: 100%;
    background: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--gray-medium);
}

.booking-status-bi {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.status-pending-bi {
    background: #fff3cd;
    color: #856404;
}

.status-confirmed-bi {
    background: #d4edda;
    color: #155724;
}

.status-completed-bi {
    background: #cce5ff;
    color: #004085;
}

.status-cancelled-bi,
.status-rejected-bi {
    background: #f8d7da;
    color: #721c24;
}

.booking-details-bi {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.booking-header-bi {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.booking-title-bi {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 4px;
}

.booking-ref-bi {
    font-size: 12px;
    color: var(--gray);
    font-family: monospace;
}

.instant-badge-bi {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fef3c7;
    color: #92400e;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.booking-meta-bi {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}

.meta-item-bi {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--gray);
}

.meta-item-bi i {
    color: var(--primary);
}

/* Renter Info */
.renter-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--gray-light);
    border-radius: var(--radius-md);
}

.renter-avatar {
    width: 40px;
    height: 40px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
}

.renter-details {
    display: flex;
    flex-direction: column;
}

.renter-name {
    font-weight: 600;
    color: var(--dark);
    font-size: 14px;
}

.renter-email {
    font-size: 12px;
    color: var(--gray);
}

.renter-message {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: #f0f9ff;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--dark);
}

.renter-message i {
    color: var(--info);
    font-size: 14px;
    margin-top: 2px;
}

.renter-message p {
    margin: 0;
    line-height: 1.5;
}

/* Booking Dates */
.booking-dates-bi {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: var(--gray-light);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.date-block-bi {
    display: flex;
    flex-direction: column;
}

.date-label-bi {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 4px;
}

.date-value-bi {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark);
}

.date-day-bi {
    font-size: 12px;
    color: var(--gray);
}

.date-arrow-bi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--gray);
}

.nights-count-bi {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
}

/* Booking Footer */
.booking-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--gray-medium);
}

.price-label {
    font-size: 12px;
    color: var(--gray);
    display: block;
}

.price-value-bi {
    font-size: 20px;
    font-weight: 800;
    color: var(--dark);
}

.price-value-bi.earnings {
    color: var(--success);
}

.booking-actions-bi {
    display: flex;
    gap: 10px;
}

.btn-view-bi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--gradient);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-view-bi:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.3);
    color: var(--white);
}

.btn-message-bi,
.btn-cancel-bi {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    color: var(--gray);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-message-bi:hover {
    border-color: var(--info);
    color: var(--info);
    background: #f0f9ff;
}

.btn-cancel-bi:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: #fff5f5;
}

.btn-approve-bi,
.btn-decline-bi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.btn-approve-bi:hover {
    background: #218838;
    transform: translateY(-2px);
}

.btn-decline-bi {
    background: var(--white);
    border: 2px solid var(--danger);
    color: var(--danger);
}

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

/* Empty State */
.empty-state-bi {
    text-align: center;
    padding: 80px 20px;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.empty-icon-bi {
    width: 100px;
    height: 100px;
    background: var(--gray-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 40px;
    color: var(--gray);
}

.empty-state-bi h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.empty-state-bi p {
    color: var(--gray);
    margin-bottom: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.btn-explore-bi {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--gradient);
    color: var(--white);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-explore-bi:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.3);
    color: var(--white);
}

/* Pagination */
.pagination-wrapper {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

/* Modal Styles */
.modal-overlay-bi {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-overlay-bi.active {
    display: flex;
}

.modal-content-bi {
    background: var(--white);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    animation: modalSlide 0.3s ease;
}

@keyframes modalSlide {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header-bi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-medium);
}

.modal-header-bi h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}

.modal-close-bi {
    width: 36px;
    height: 36px;
    background: var(--gray-light);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
    transition: all 0.2s ease;
}

.modal-close-bi:hover {
    background: var(--gray-medium);
}

.modal-body-bi {
    padding: 24px;
}

.modal-body-bi p {
    color: var(--gray);
    margin-bottom: 20px;
}

.modal-icon-bi {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
}

.modal-icon-bi.success {
    background: #d4edda;
    color: var(--success);
}

.modal-icon-bi.danger {
    background: #f8d7da;
    color: var(--danger);
}

.form-group-bi {
    margin-bottom: 16px;
}

.form-group-bi label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.form-group-bi .required {
    color: var(--danger);
}

.form-group-bi textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    font-size: 14px;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.form-group-bi textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.modal-footer-bi {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--gray-medium);
}

.btn-modal-cancel-bi-bi {
    flex: 1;
    padding: 12px;
    background: var(--gray-light);
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--gray);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-cancel-bi-bi:hover {
    background: var(--gray-medium);
}

.btn-modal-confirm {
    flex: 1;
    padding: 12px;
    background: var(--danger);
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-confirm:hover {
    background: #c82333;
}

.btn-modal-approve-bi {
    flex: 1;
    padding: 12px;
    background: var(--success);
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-approve-bi:hover {
    background: #218838;
}

.btn-modal-decline-bi {
    flex: 1;
    padding: 12px;
    background: var(--danger);
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Responsive */
@media (max-width: 991px) {
    .header-content-bi {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .booking-card-bi {
        flex-direction: column;
    }

    .booking-image-bi {
        width: 100%;
        height: 200px;
    }
}

@media (max-width: 767px) {
    .bookings-header {
        padding: 80px 0 60px;
    }

    .page-title-bi {
        font-size: 1.75rem;
    }

    .tab-navigation-bi {
        max-width: 100%;
    }

    .tab-btn-bi {
        padding: 12px 16px;
        font-size: 13px;
    }

    .tab-btn-bi span:not(.tab-count-bi) {
        display: none;
    }

    .filter-bar-bi {
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .booking-dates-bi {
        flex-direction: column;
        text-align: center;
    }

    .date-arrow-bi {
        flex-direction: row;
    }

    .booking-footer {
        flex-direction: column;
        gap: 16px;
    }

    .booking-actions-bi {
        width: 100%;
        justify-content: center;
    }
}

/* ------------------------ my bookings index end--------------------------------- */

/* ------------------------ booking show--------------------------------- */

.booking-detail-page {
    background: var(--gray-light);
    min-height: 100vh;
    padding-top: 80px;
}

/* Header Card */
.booking-header-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 24px 32px;
    margin-bottom: 24px;
}

.header-content-bs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.booking-status-large {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.booking-status-large.status-pending {
    background: #fff3cd;
    color: #856404;
}

.booking-status-large.status-confirmed {
    background: #d4edda;
    color: #155724;
}

.booking-status-large.status-completed {
    background: #cce5ff;
    color: #004085;
}

.booking-status-large.status-cancelled,
.booking-status-large.status-rejected {
    background: #f8d7da;
    color: #721c24;
}

.booking-ref-large {
    font-size: 28px;
    font-weight: 800;
    color: var(--dark);
    margin: 0 0 4px;
}

.booking-created {
    font-size: 14px;
    color: var(--gray);
    margin: 0;
}

.header-actions-bs {
    display: flex;
    gap: 12px;
}

.btn-cancel-booking,
.btn-decline-booking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--white);
    border: 2px solid var(--danger);
    color: var(--danger);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel-booking:hover,
.btn-decline-booking:hover {
    background: var(--danger);
    color: var(--white);
}

.btn-approve-booking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--success);
    border: none;
    color: var(--white);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-approve-booking:hover {
    background: #218838;
}

/* Detail Cards */
.detail-card-bs {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
}

.card-header-bs {
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-medium);
}

.card-header-bs h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-header-bs h3 i {
    color: var(--primary);
}

.card-body-bs {
    padding: 24px;
}

/* Camper Info */
.camper-info-row-bs {
    display: flex;
    gap: 20px;
}

.camper-image-bs {
    width: 160px;
    height: 120px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.camper-image-bs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camper-image-bs .no-image-bs {
    width: 100%;
    height: 100%;
    background: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-medium);
    font-size: 40px;
}

.camper-details-bs .camper-type-bs {
    display: inline-block;
    background: var(--gray-light);
    color: var(--gray);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.camper-details-bs h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 4px;
}

.camper-details-bs .camper-model-bs {
    font-size: 14px;
    color: var(--gray);
    margin: 0 0 8px;
}

.camper-location-bs {
    font-size: 13px;
    color: var(--gray);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.camper-location-bs i {
    color: var(--primary);
}

.btn-view-listing-bs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.btn-view-listing-bs:hover {
    text-decoration: underline;
}

/* Trip Dates */
.trip-dates-large-bs {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px 0;
}

.date-block-large-bs {
    text-align: center;
}

.date-block-large-bs .date-label-bs {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 8px;
}

.date-block-large-bs .date-weekday-bs {
    display: block;
    font-size: 14px;
    color: var(--primary);
    font-weight: 600;
}

.date-block-large-bs .date-day-large-bs {
    display: block;
    font-size: 48px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
}

.date-block-large-bs .date-month-bs {
    display: block;
    font-size: 16px;
    color: var(--gray);
    margin-top: 4px;
}

.date-separator-bs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.separator-line-bs {
    width: 60px;
    height: 2px;
    background: var(--gray-medium);
}

.nights-badge-large-bs {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--primary);
    color: var(--white);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

/* Report Reasons Grid */
.report-reasons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.reason-option {
    cursor: pointer;
    margin: 0;
}

.reason-option input[type="radio"] {
    display: none;
}

.reason-card {
    padding: 20px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    background: white;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reason-card:hover {
    border-color: #007bff;
    background-color: #f8f9fa;
}

.reason-option input[type="radio"]:checked + .reason-card {
    border-color: #007bff;
    background-color: #e7f3ff;
}

.reason-card i {
    font-size: 28px;
    color: #6c757d;
    margin-bottom: 5px;
}

.reason-option input[type="radio"]:checked + .reason-card i {
    color: #007bff;
}

.reason-title {
    display: block;
    font-weight: 600;
    color: #212529;
    font-size: 14px;
}

.reason-desc {
    display: block;
    font-size: 12px;
    color: #6c757d;
    line-height: 1.4;
}

.btn-submit-danger {
    background-color: #dc3545;
}

.btn-submit-danger:hover {
    background-color: #c82333;
}

/* Notification Styles */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10000;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    max-width: 400px;
}

.notification.show {
    transform: translateX(0);
}

.notification-success {
    border-left: 4px solid #28a745;
}

.notification-success i {
    color: #28a745;
    font-size: 20px;
}

.notification-error {
    border-left: 4px solid #dc3545;
}

.notification-error i {
    color: #dc3545;
    font-size: 20px;
}

.notification span {
    color: #212529;
    font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .report-reasons {
        grid-template-columns: 1fr;
    }

    .notification {
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

/* Contact Info */
.contact-info-bs {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-avatar-bs {
    width: 60px;
    height: 60px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 24px;
    font-weight: 700;
}

.contact-details-bs {
    flex: 1;
}

.contact-details-bs h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 4px;
}

.contact-details-bs p {
    font-size: 14px;
    color: var(--gray);
    margin: 0;
}

.btn-message-contact-bs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--gradient);
    color: var(--white);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-message-contact-bs:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.3);
    color: var(--white);
}

/* Message Box */
.message-box-bs {
    background: var(--gray-light);
    border-radius: var(--radius-md);
    padding: 16px;
    border-left: 4px solid var(--primary);
}

.message-box-bs p {
    margin: 0;
    color: var(--dark);
    line-height: 1.6;
}

.message-box-bs.owner-response-bs {
    border-left-color: var(--info);
}

.response-date-bs {
    display: block;
    font-size: 12px;
    color: var(--gray);
    margin-top: 8px;
}

/* License Details */
.license-info-grid-bs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.license-field .field-label {
    display: block;
    font-size: 12px;
    color: var(--gray);
    margin-bottom: 4px;
}

.license-field .field-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--dark);
}

.license-image-preview {
    margin-top: 16px;
}

.preview-label {
    display: block;
    font-size: 12px;
    color: var(--gray);
    margin-bottom: 8px;
}

.license-image-link {
    display: block;
    position: relative;
    width: 200px;
    height: 130px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.license-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-overlay-bs {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);
    opacity: 0;
    transition: opacity 0.2s;
}

.license-image-link:hover .image-overlay-bs {
    opacity: 1;
}

/* Rules */
.rules-list-bs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rule-item-bs {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--gray-light);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--dark);
}

.rule-item-bs i {
    color: var(--primary);
    margin-top: 2px;
}

.rules-accepted {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px;
    background: #d4edda;
    border-radius: var(--radius-md);
    color: #155724;
    font-size: 13px;
}

/* Price Card */
.price-card-bs {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: sticky;
    top: 100px;
}

.price-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-medium);
}

.price-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}

.price-body {
    padding: 20px 24px;
}

.price-row-bs-bs {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
    color: var(--gray);
}

.price-row-bs-bs.total {
    border-top: 1px solid var(--gray-medium);
    margin-top: 12px;
    padding-top: 16px;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
}

.payment-info {
    padding: 16px 24px;
    border-top: 1px solid var(--gray-medium);
    text-align: center;
}

.payment-status-bs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
}

.payment-status-bs.paid {
    background: #d4edda;
    color: #155724;
}

.payment-status-bs.pending {
    background: #fff3cd;
    color: #856404;
}

.payment-date {
    display: block;
    font-size: 12px;
    color: var(--gray);
    margin-top: 8px;
}

.booking-type-info {
    padding: 16px 24px;
    border-top: 1px solid var(--gray-medium);
}

.type-badge-bs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
}

.type-badge-bs.instant {
    background: #fef3c7;
    color: #92400e;
}

.type-badge-bs.request {
    background: #e0f2fe;
    color: #0369a1;
}

/* Cancellation Card */
.cancellation-card-bs {
    background: #fff5f5;
    border: 1px solid var(--danger);
    border-radius: var(--radius-xl);
    padding: 20px;
    margin-top: 20px;
}

.cancellation-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--danger);
    margin-bottom: 12px;
}

.cancellation-header h4 {
    margin: 0;
    font-size: 16px;
}

.cancellation-body p {
    font-size: 13px;
    color: var(--gray);
    margin: 0 0 8px;
}

.cancellation-reason {
    background: var(--white);
    padding: 12px;
    border-radius: var(--radius-md);
    font-style: italic;
}

/* Help Card */
.help-card-bs {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 20px;
    margin-top: 20px;
    display: flex;
    gap: 16px;
    border: 1px solid var(--gray-medium);
}

.help-icon-bs {
    width: 44px;
    height: 44px;
    background: #e0f2fe;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0284c7;
    font-size: 20px;
    flex-shrink: 0;
}

.help-content-bs h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    margin: 0 0 4px;
}

.help-content-bs p {
    font-size: 13px;
    color: var(--gray);
    margin: 0 0 8px;
}

.help-link-bs {
    font-size: 13px;
    color: #0284c7;
    text-decoration: none;
    font-weight: 500;
}

/* Modals */
.modal-overlay-bs {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-overlay-bs.active {
    display: flex;
}

.modal-content-bs {
    background: var(--white);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
}

.modal-header-bs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-medium);
}

.modal-header-bs h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.modal-close-bs {
    width: 36px;
    height: 36px;
    background: var(--gray-light);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.modal-body-bs {
    padding: 24px;
}

.modal-body-bs p {
    color: var(--gray);
    margin-bottom: 20px;
}

.form-group-bs label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.form-group-bs .required {
    color: var(--danger);
}

.form-group-bs textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    resize: vertical;
}

.form-group-bs textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.modal-footer-bs {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--gray-medium);
}

.btn-modal-cancel-bs,
.btn-modal-confirm-bs,
.btn-modal-approve-bs,
.btn-modal-decline-bs {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-modal-cancel-bs {
    background: var(--gray-light);
    color: var(--gray);
}

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

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

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

/* Responsive */
@media (max-width: 991px) {
    .price-card-bs {
        position: static;
    }
}

@media (max-width: 767px) {
    .header-content-bs {
        flex-direction: column;
        align-items: flex-start;
    }

    .camper-info-row-bs {
        flex-direction: column;
    }

    .camper-image-bs {
        width: 100%;
        height: 180px;
    }

    .trip-dates-large-bs {
        flex-direction: column;
        gap: 24px;
    }

    .date-separator-bs {
        flex-direction: row;
    }

    .separator-line-bs {
        width: 40px;
    }

    .contact-info-bs {
        flex-direction: column;
        text-align: center;
    }

    .license-info-grid-bs {
        grid-template-columns: 1fr;
    }
}

.btn-pay-now {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-pay-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

/* Pending Request Badge */
.pending-request-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #fef3c7;
    border: 2px solid #f59e0b;
    color: #92400e;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
}

/* Request Cancel Button */
.btn-request-cancel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--white);
    border: 2px solid #f59f27;
    color: #f59f27;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-request-cancel:hover {
    background: #f59f27;
    color: var(--white);
}

/* Policy Card */
.policy-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-top: 20px;
}

.policy-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-medium);
}

.policy-header i {
    color: var(--primary);
}

.policy-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.policy-body {
    padding: 20px;
}

.policy-type {
    margin-bottom: 12px;
}

.policy-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.policy-type.flexible .policy-badge {
    background: #dcfce7;
    color: #166534;
}

.policy-type.strict .policy-badge {
    background: #fee2e2;
    color: #991b1b;
}

.policy-description {
    font-size: 13px;
    color: var(--gray);
    margin: 0 0 12px;
    line-height: 1.5;
}

.policy-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
}

.policy-status.free {
    background: #dcfce7;
    color: #166534;
}

.policy-status.request {
    background: #fef3c7;
    color: #92400e;
}

/* Cancellation Request Card */
.cancellation-request-card {
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: var(--radius-xl);
    padding: 20px;
    margin-top: 20px;
}

.request-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #92400e;
    margin-bottom: 12px;
}

.request-header h4 {
    margin: 0;
    font-size: 16px;
}

.request-body p {
    font-size: 13px;
    color: #78350f;
    margin: 0 0 8px;
}

.request-reason {
    background: #fff;
    padding: 10px;
    border-radius: var(--radius-md);
    font-style: italic;
}

/* Alert Box in Modal */
.alert-box {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.alert-box.warning {
    background: #fef3c7;
    border: 1px solid #fcd34d;
}

.alert-box.warning i {
    color: #f59e0b;
    font-size: 18px;
    margin-top: 2px;
}

.alert-box p {
    margin: 0;
    font-size: 13px;
    color: #92400e;
    line-height: 1.5;
}

/* Modal Request Button */
.btn-modal-request {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: #f59f27;
    color: var(--white);
}

.btn-modal-request:hover {
    background: #e08d1a;
}
/* ------------------------ booking show end--------------------------------- */

/* ------------------------ booking create send--------------------------------- */

/* Booking Page Styles */
.booking-page {
    background: #f5f7fa;
    min-height: 100vh;
    padding-bottom: 60px;
}

/* Form Card */
.booking-form-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.form-header-bc {
    padding: 24px 28px;
    border-bottom: 1px solid #eee;
}

.form-header-bc h1 {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px;
}

.form-header-bc p {
    margin: 0;
    font-size: 14px;
}

/* Form Sections */
.form-section-bc {
    padding: 24px 28px;
    border-bottom: 1px solid #eee;
}

.form-section-bc:last-of-type {
    border-bottom: none;
}

.section-header-bc {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.section-icon-bc {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #f59f27 0%, #e8890c 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.section-header-bc h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    flex: 1;
}

.required-badge-bc {
    background: #fee2e2;
    color: #dc2626;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

.optional-badge-bc {
    background: #e0f2fe;
    color: #0284c7;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* Detail Items */
.detail-item-bc {
    background: #f8f9fa;
    padding: 14px 16px;
    border-radius: 10px;
}

.detail-item-bc label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.detail-value-bc {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
}

/* International traveller section styling */
.international-traveller-section {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    border: 2px solid #bdd9f5;
    border-radius: 12px;
    padding: 16px;
}

.international-check {
    margin-bottom: 0;
}

.international-check .form-check-bc-label {
    font-size: 0.95rem;
    color: #1a5a96;
}

.international-check .form-check-bc-input:checked + .form-check-bc-label {
    color: #0d4a7c;
}

.international-notice {
    padding-left: 28px;
}

.international-notice small {
    color: #5a6268;
}

/* Deposit row highlight when international */
.deposit-international {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    margin: 0 -16px;
    padding: 12px 16px !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.deposit-international span:first-child {
    color: #c2410c;
    font-weight: 600;
}

#depositTypeLabel {
    background-color: #f59f27 !important;
    color: white;
}

/* Trip Dates */
.trip-date-bcs-bc {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 12px;
}

.trip-date-bc {
    flex: 1;
    text-align: center;
}

.date-label-bc {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.date-value-bc {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.trip-arrow-bc {
    color: #f59f27;
    font-size: 18px;
}

.trip-duration-bc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.trip-duration-bc i {
    color: #f59f27;
}

/* License Requirement Alert */
.license-requirement-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    color: #c2410c;
    font-size: 14px;
}

/* Form Controls */
.form-group-bc {
    margin-bottom: 16px;
}

.form-group-bc:last-child {
    margin-bottom: 0;
}

.form-group-bc label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.form-control-bc {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.form-control-bc:focus {
    outline: none;
    border-color: #f59f27;
    box-shadow: 0 0 0 3px rgba(245, 159, 39, 0.1);
}

.form-control-bc.is-invalid {
    border-color: #dc2626;
}

/* License Upload */
.license-upload-area {
    border: 2px dashed #ddd;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fafafa;
}

.license-upload-area:hover {
    border-color: #f59f27;
    background: #fff7ed;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #666;
}

.upload-placeholder i {
    font-size: 40px;
    color: #f59f27;
}

.upload-placeholder small {
    color: #999;
    font-size: 12px;
}

.upload-preview {
    position: relative;
}

.upload-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
}

.btn-remove-image-bc {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Checkboxes */
.form-check-bc {
    padding: 16px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-top: 16px;
}

.form-check-bc-input {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
}

.form-check-bc-input:checked {
    background-color: #f59f27;
    border-color: #f59f27;
}

.form-check-bc-label {
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

/* Owner Intro */
.owner-intro-bc {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.owner-avatar-bc {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #f59f27 0%, #e8890c 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.owner-info {
    display: flex;
    flex-direction: column;
}

.owner-name-bc {
    font-weight: 600;
    color: #1a1a1a;
}

.owner-label-bc {
    font-size: 13px;
    color: #666;
}

/* Textarea Counter */
.textarea-counter {
    text-align: right;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

/* Rules List */
.rules-list-booking {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px;
}

.rule-item-booking {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #333;
}

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

.rule-item-booking i {
    color: #f59f27;
    margin-top: 2px;
}

/* Submit Section */
.booking-submit {
    padding: 24px 28px;
    background: #f8f9fa;
    text-align: center;
}

.btn-book-now-bc {
    width: 100%;
    padding: 16px 24px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
}

.btn-instant-book-bc {
    background: linear-gradient(135deg, #f59f27 0%, #e8890c 100%);
    color: #fff;
}

.btn-instant-book-bc:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.4);
}

.btn-request-book-bc {
    background: #1a1a1a;
    color: #fff;
}

.btn-request-book-bc:hover {
    background: #333;
    transform: translateY(-2px);
}

.btn-price-bc {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
}

.instant-note,
.request-note {
    margin-top: 12px;
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.instant-note i {
    color: #22c55e;
}

.request-note i {
    color: #f59f27;
}

/* Summary Card */
.booking-summary-card-bc {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: sticky;
    top: 100px;
}

.camper-preview-bc {
    position: relative;
}

.camper-preview-bc img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.camper-preview-bc-info {
    padding: 16px 20px;
}

.camper-type-bc {
    display: inline-block;
    background: #f0f0f0;
    color: #666;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.camper-preview-bc-info h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 4px;
}

.camper-preview-bc-info p {
    font-size: 14px;
    color: #666;
    margin: 0 0 8px;
}

.camper-location-bc-bc {
    font-size: 13px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Price Breakdown */
.price-breakdown {
    padding: 20px;
    border-top: 1px solid #eee;
}

.price-breakdown h5 {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 12px;
}

.price-row-bc {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #666;
}

.price-total-bc {
    border-top: 1px solid #eee;
    margin-top: 8px;
    padding-top: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

/* Booking Type Badge */
.booking-type-badge-bc-bc {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    margin: 0 20px 20px;
    border-radius: 12px;
}

.booking-type-badge-bc-bc.instant {
    background: #fef3c7;
    color: #92400e;
}

.booking-type-badge-bc-bc.request {
    background: #e0f2fe;
    color: #0369a1;
}

.booking-type-badge-bc-bc i {
    font-size: 24px;
}

.badge-content {
    display: flex;
    flex-direction: column;
}

.badge-title {
    font-weight: 600;
    font-size: 14px;
}

.badge-desc {
    font-size: 12px;
    opacity: 0.8;
}

/* Cancellation Policy */
.cancellation-policy {
    padding: 16px 20px;
    background: #f8f9fa;
    margin: 0;
}

.cancellation-policy h5 {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cancellation-policy h5 i {
    color: #22c55e;
}

.cancellation-policy p {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 991px) {
    .booking-summary-card-bc {
        position: static;
        margin-bottom: 24px;
    }

    .col-lg-5 {
        order: -1;
    }
}

@media (max-width: 576px) {
    .form-section-bc {
        padding: 20px 16px;
    }

    .form-header-bc {
        padding: 20px 16px;
    }

    .booking-submit {
        padding: 20px 16px;
    }

    .trip-date-bcs-bc {
        flex-direction: column;
        gap: 12px;
    }

    .trip-arrow-bc {
        transform: rotate(90deg);
    }
}
/* ------------------------ booking create send end--------------------------------- */

/* ------------------------ booking confirmaiton--------------------------------- */

/* Confirmation Page Styles */
.confirmation-page {
    background: #f5f7fa;
    min-height: 100vh;
}

.confirmation-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Header */
.confirmation-header {
    text-align: center;
    padding: 48px 24px;
    position: relative;
    overflow: hidden;
}

.confirmation-header.instant {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
}

.confirmation-header.request {
    background: linear-gradient(135deg, #f59f27 0%, #e8890c 100%);
    color: #fff;
}

.success-icon-BC {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 40px;
}

.deposit-international {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    margin: 0 -16px;
    padding: 12px 16px !important;
    border-radius: 8px;
}

.confirmation-header h1 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px;
}

.confirmation-subtitle {
    font-size: 16px;
    opacity: 0.9;
    margin: 0 0 24px;
}

.booking-reference {
    display: inline-flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.2);
    padding: 12px 24px;
    border-radius: 12px;
}

.ref-label {
    font-size: 11px;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 4px;
}

.ref-number {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Body */
.confirmation-body {
    padding: 32px;
}

/* Detail Sections */
.detail-section {
    margin-bottom: 32px;
}

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

.detail-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.detail-section h3 i {
    color: #f59f27;
    font-size: 18px;
}

/* Trip Summary */
.trip-summary-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 24px;
}

.trip-dates-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.trip-date-item {
    text-align: center;
}

.trip-date-item .date-label-bc {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.trip-date-item .date-day-bc {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
}

.trip-date-item .date-full-bc {
    display: block;
    font-size: 14px;
    color: #666;
}

.trip-arrow-bs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #ccc;
}

.nights-badge-bc {
    background: #f59f27;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}

/* Camper Detail Card */
.camper-detail-card {
    display: flex;
    gap: 16px;
    background: #f8f9fa;
    border-radius: 16px;
    padding: 16px;
}

.camper-detail-card .camper-image-bc {
    width: 140px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.camper-detail-card .camper-image-bc img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camper-detail-card .no-image-bc {
    width: 100%;
    height: 100%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 32px;
}

.camper-info-bc .camper-type-bc {
    display: inline-block;
    background: #e0e0e0;
    color: #666;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.camper-info-bc h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 4px;
}

.camper-info-bc .camper-model-bc {
    font-size: 13px;
    color: #666;
    margin: 0 0 8px;
}

.camper-location-bc {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Owner Contact Card */
.owner-contact-card-bc {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f8f9fa;
    border-radius: 16px;
    padding: 16px;
}

.owner-contact-card-bc .owner-avatar-bc {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #f59f27 0%, #e8890c 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    flex-shrink: 0;
}

.owner-details-bc {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.owner-details-bc .owner-name-bc {
    font-weight: 600;
    color: #1a1a1a;
}

.owner-details-bc .owner-email-bc {
    font-size: 13px;
    color: #666;
}

.btn-contact-owner-bc {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-contact-owner-bc:hover {
    border-color: #f59f27;
    color: #f59f27;
}

/* Message Card */
.message-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 16px;
    border-left: 4px solid #f59f27;
}

.message-card p {
    margin: 0;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

/* Next Steps */
.next-steps {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 20px;
}

.step-item-bc {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

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

.step-icon-bc {
    width: 32px;
    height: 32px;
    background: #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    flex-shrink: 0;
}

.step-item-bc.completed .step-icon-bc {
    background: #22c55e;
    color: #fff;
}

.step-item-bc.pending .step-icon-bc {
    background: #f59f27;
    color: #fff;
}

.step-content-bc {
    display: flex;
    flex-direction: column;
}

.step-title-bc {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 14px;
}

.step-desc-bc {
    font-size: 13px;
    color: #666;
}

/* Price Summary Card */
.price-summary-card-bc {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 24px;
    position: sticky;
    top: 100px;
}

.price-summary-card-bc h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 20px;
}

.price-breakdown-bc {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.price-row-bc {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #666;
}

.price-total-bc {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    padding-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 16px;
}

.payment-status-bc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 20px;
}

.payment-status-bc.success {
    background: #dcfce7;
    color: #16a34a;
}

.payment-status-bc.pending {
    background: #fef3c7;
    color: #b45309;
}

/* License Summary */
.license-summary {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.license-summary h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 12px;
}

.license-info-bc {
    margin-bottom: 12px;
}

.license-row-bc {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
}

.license-row-bc:last-child {
    border-bottom: none;
}

.license-row-bc span:first-child {
    color: #666;
}

.license-row-bc span:last-child {
    color: #1a1a1a;
    font-weight: 500;
}

.license-image-thumb {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.license-image-thumb img {
    width: 50px;
    height: 35px;
    object-fit: cover;
    border-radius: 6px;
}

.license-image-thumb span {
    font-size: 12px;
    color: #22c55e;
}

/* Actions */
.confirmation-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-secondary-action-bc,
.btn-primary-action-bc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-secondary-action-bc {
    background: #fff;
    border: 2px solid #e0e0e0;
    color: #333;
}

.btn-secondary-action-bc:hover {
    border-color: #f59f27;
    color: #f59f27;
}

.btn-primary-action-bc {
    background: linear-gradient(135deg, #f59f27 0%, #e8890c 100%);
    color: #fff;
    border: none;
}

.btn-primary-action-bc:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.4);
}

/* Help Card */
.help-card-bc {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
    display: flex;
    gap: 16px;
    border: 1px solid #e0e0e0;
}

.help-icon-bc {
    width: 44px;
    height: 44px;
    background: #e0f2fe;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0284c7;
    font-size: 20px;
    flex-shrink: 0;
}

.help-content-bc h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 4px;
}

.help-content-bc p {
    font-size: 13px;
    color: #666;
    margin: 0 0 8px;
}

.help-link-bc {
    font-size: 13px;
    color: #0284c7;
    text-decoration: none;
    font-weight: 500;
}

.help-link-bc:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 991px) {
    .price-summary-card-bc {
        position: static;
    }
}

@media (max-width: 768px) {
    .confirmation-header {
        padding: 32px 20px;
    }

    .confirmation-header h1 {
        font-size: 24px;
    }

    .confirmation-body {
        padding: 20px;
    }

    .trip-dates-display {
        flex-direction: column;
        gap: 16px;
    }

    .trip-arrow-bs {
        transform: rotate(90deg);
    }

    .camper-detail-card {
        flex-direction: column;
    }

    .camper-detail-card .camper-image-bc {
        width: 100%;
        height: 160px;
    }

    .owner-contact-card-bc {
        flex-wrap: wrap;
    }

    .btn-contact-owner-bc {
        width: 100%;
        justify-content: center;
    }
}
/* ------------------------ booking confirmation end--------------------------------- */

/* ------------------------ admin dashboard--------------------------------- */

.admin-dashboard-page {
    min-height: 100vh;
}

/* ==================== ADMIN headerAD ==================== */
.admin-headerAD {
    position: relative;
    background: linear-gradient(135deg, #2d2d44 0%, #1a1a2e 100%);
    padding: 100px 0 40px;
    overflow: hidden;
}

.headerAD-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.shape-ad {
    position: absolute;
    border-radius: 50%;
}

.shape-ad-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(
        circle,
        rgba(220, 53, 69, 0.15) 0%,
        transparent 70%
    );
    top: -150px;
    right: -50px;
}

.shape-ad-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(
        circle,
        rgba(245, 159, 39, 0.1) 0%,
        transparent 70%
    );
    bottom: -80px;
    left: -50px;
}

.headerAD-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.headerAD-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.headerAD-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

.headerAD-avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.4);
}

/* Admin Navigation */
.admin-nav-ad {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.nav-item.active {
    background: #ffffff;
    color: #1a1a2e;
}

.nav-item-back {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.5);
}

.nav-item-back:hover {
    color: #f59f27;
}

/* ==================== ADMIN CONTENT ==================== */
.admin-content {
    padding: 40px 0 60px;
}

/* Section headerADs */
.section-headerAD {
    margin-bottom: 24px;
}

.section-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
}

.section-subtitle {
    font-size: 15px;
    color: #6c757d;
}

/* ==================== STATS GRID ==================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.stat-card-ad {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.4s ease;
}

.stat-card-ad::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

.stat-card-ad-users::before {
    background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
}

.stat-card-ad-listings::before {
    background: linear-gradient(135deg, #f59f27 0%, #ff6b35 100%);
}

.stat-card-ad-active::before {
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

.stat-card-ad-reviews::before {
    background: linear-gradient(90deg, #eab308 0%, #ca8a04 100%);
}

.stat-card-ad:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
}

.action-icon-ad-blog {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.stat-icon-ad {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.stat-card-ad-users .stat-icon-ad {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.stat-card-ad-listings .stat-icon-ad {
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
    color: #f59f27;
}

.stat-card-ad-active .stat-icon-ad {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.stat-card-ad-reviews .stat-icon-ad {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
}

.stat-content-ad {
    display: flex;
    flex-direction: column;
}

.stat-value-ad {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1;
    margin-bottom: 6px;
}

.stat-label-ad {
    font-size: 14px;
    color: #6c757d;
}

.stat-trend {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6c757d;
    background: #f8f9fa;
    padding: 6px 12px;
    border-radius: 50px;
}

.stat-trend-success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

/* ==================== ACTIONS GRID ==================== */
.actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.action-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    padding: 28px;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: inherit;
    transition: all 0.4s ease;
}

.action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.action-card-disabled {
    opacity: 0.7;
    pointer-events: none;
}

.action-icon-ad {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.action-icon-ad-users {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.action-icon-ad-listings {
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
    color: #f59f27;
}

.action-icon-ad-bookings {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.action-icon-ad-reports {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.action-content {
    flex: 1;
}

.action-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
}

.action-description {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

.action-stats {
    text-align: center;
    padding: 0 20px;
    border-left: 1px solid #e9ecef;
}

.action-count {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #f59f27;
    line-height: 1;
}

.action-label {
    font-size: 12px;
    color: #6c757d;
}

.action-badge-ad {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f8f9fa;
    color: #6c757d;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.action-arrow-ad {
    width: 40px;
    height: 40px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.action-card:hover .action-arrow-ad {
    background: #f59f27;
    color: #ffffff;
}

/* ==================== STATUS GRID ==================== */
.status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.status-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-healthy {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
    animation: pulse-green 2s ease-in-out infinite;
}

@keyframes pulse-green {
    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.1);
    }
}

.status-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 2px;
}

.status-content p {
    font-size: 13px;
    color: #6c757d;
    margin: 0;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1199px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .headerAD-content {
        flex-direction: column;
        text-align: center;
    }

    .admin-nav-ad {
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-item-back {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

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

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

@media (max-width: 767px) {
    .admin-headerAD {
        padding: 80px 0 30px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card-ad {
        padding: 24px;
    }

    .stat-value-ad {
        font-size: 28px;
    }

    .nav-item {
        padding: 12px 16px;
        font-size: 13px;
    }

    .nav-item span {
        display: none;
    }

    .nav-item i {
        margin: 0;
    }

    .action-card {
        flex-wrap: wrap;
        padding: 20px;
    }

    .action-stats {
        display: none;
    }
}

/* ------------------------ admin dashboard end--------------------------------- */

/* ------------------------ admin meta dashboard--------------------------------- */

/* Tabs Container */
.meta-tabs-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Tabs Navigation */
.meta-tabs-nav {
    display: flex;
    gap: 0;
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    padding: 0;
    overflow-x: auto;
}

.meta-tab-btn {
    flex: 1;
    min-width: 150px;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #6c757d;
}

.meta-tab-btn i {
    font-size: 16px;
}

.meta-tab-btn:hover {
    background: #e9ecef;
    color: #495057;
}

.meta-tab-btn.active {
    background: white;
    color: #ff6b35;
    border-bottom-color: #ff6b35;
}

/* Tab Content */
.meta-tabs-content {
    padding: 0;
}

.meta-tab-pane {
    display: none;
    animation: fadeIn 0.3s ease;
}

.meta-tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Card adjustments for tabs */
.meta-tab-pane .meta-form-card {
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .meta-tab-btn {
        min-width: 120px;
        padding: 12px 16px;
        font-size: 14px;
    }

    .meta-tab-btn span {
        display: none;
    }

    .meta-tab-btn i {
        font-size: 18px;
    }
}

.meta-tags-section {
    margin-bottom: 3rem;
}

.meta-form-card {
    background: white;
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group-meta {
    margin-bottom: 2rem;
}

.form-group-meta:last-of-type {
    margin-bottom: 2.5rem;
}

.form-group-meta label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #2c3e50;
    font-size: 1rem;
}

.form-group-meta label i {
    color: #3498db;
    font-size: 0.9rem;
}

.form-control-meta {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s;
    font-family: inherit;
}

.form-control-meta:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
}

.form-control-meta::placeholder {
    color: #999;
}

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

.form-text-meta {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
    font-style: italic;
}

.form-actions-meta {
    display: flex;
    justify-content: flex-end;
    padding-top: 1.5rem;
    border-top: 2px solid #f0f0f0;
}

.btn-meta {
    padding: 0.875rem 2rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
}

.btn-meta-primary {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
}

.btn-meta-primary:hover {
    background: linear-gradient(135deg, #2980b9 0%, #21618c 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

.action-icon-ad-meta {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

@media (max-width: 768px) {
    .meta-form-card {
        padding: 1.5rem;
    }

    .btn-meta {
        width: 100%;
        justify-content: center;
    }
}
/* ------------------------ admin meta dashboard end--------------------------------- */

/* ------------------------ admin meta dashboard--------------------------------- */

.action-btn-al-edit {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.action-btn-al-edit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.listing-preview-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    gap: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.preview-image {
    width: 200px;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f7fafc;
}

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

.image-placeholder-am {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #cbd5e0;
    font-size: 48px;
}

.preview-info {
    flex: 1;
}

.preview-info h3 {
    margin: 0 0 12px 0;
    color: #2d3748;
    font-size: 24px;
}

.preview-details {
    margin: 8px 0;
    color: #718096;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.preview-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: #4299e1;
    text-decoration: none;
    font-weight: 500;
}

.preview-link:hover {
    color: #2b6cb0;
}

.meta-tags-form-container {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.form-section-am {
    margin-bottom: 32px;
}

.info-box {
    background: #edf2f7;
    border-left: 4px solid #4299e1;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    display: flex;
    gap: 12px;
}

.info-box i {
    color: #4299e1;
    font-size: 20px;
    margin-top: 2px;
}

.info-box strong {
    display: block;
    margin-bottom: 4px;
    color: #2d3748;
}

.info-box p {
    margin: 0;
    color: #4a5568;
    font-size: 14px;
}

.form-group-am {
    margin-bottom: 24px;
}

.form-group-am label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
    font-size: 15px;
}

.form-input-am,
.form-textarea-am {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-input-am:focus,
.form-textarea-am:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-textarea-am {
    resize: vertical;
    line-height: 1.6;
}

.form-hint-am {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    color: #718096;
    font-size: 13px;
    line-height: 1.5;
}

.form-hint-am i {
    margin-top: 2px;
    flex-shrink: 0;
}

.auto-image-preview {
    background: #f7fafc;
    border: 2px dashed #cbd5e0;
    border-radius: 8px;
    padding: 16px;
}

.auto-image-preview img {
    width: 100%;
    max-width: 400px;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 12px;
}

.auto-image-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #48bb78;
    font-size: 14px;
}

.no-image-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f56565;
    font-size: 14px;
    padding: 12px;
}

.form-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 2px solid #e2e8f0;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f7fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    color: #4a5568;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-back:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.btn-primary-am {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary-am:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.btn-secondary-am {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    color: #4a5568;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
}

.btn-secondary-am:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
}

.meta-preview-section {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 2px solid #e2e8f0;
}

.meta-preview-section h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: #2d3748;
    font-size: 18px;
}

.google-preview {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.preview-url {
    color: #5f6368;
    font-size: 14px;
    margin-bottom: 4px;
}

.preview-title {
    color: #1a0dab;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 4px;
    cursor: pointer;
    line-height: 1.3;
}

.preview-title:hover {
    text-decoration: underline;
}

.preview-description {
    color: #4d5156;
    font-size: 14px;
    line-height: 1.6;
}

.social-preview {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    max-width: 500px;
}

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

.social-preview-content {
    padding: 16px;
    background: #f7fafc;
}

.social-preview-title {
    font-weight: 600;
    color: #1c1e21;
    margin-bottom: 4px;
    font-size: 16px;
}

.social-preview-description {
    color: #606770;
    font-size: 14px;
    margin-bottom: 8px;
    line-height: 1.4;
}

.social-preview-url {
    color: #606770;
    font-size: 12px;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .listing-preview-card {
        flex-direction: column;
    }

    .preview-image {
        width: 100%;
        height: 200px;
    }
}
/* ------------------------ admin meta dashboard end--------------------------------- */

/* ------------------------ admin lsitings dashboard--------------------------------- */

.admin-listings-page {
    min-height: 100vh;
}

/* ==================== ADMIN headerAL ==================== */
.admin-headerAL {
    position: relative;
    background: linear-gradient(135deg, #2d2d44 0%, #1a1a2e 100%);
    padding: 100px 0 40px;
    overflow: hidden;
}

.headerAL-bg-shape-als {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.shape-al {
    position: absolute;
    border-radius: 50%;
}

.shape-al-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(
        circle,
        rgba(245, 159, 39, 0.15) 0%,
        transparent 70%
    );
    top: -150px;
    right: -50px;
}

.shape-al-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(
        circle,
        rgba(220, 53, 69, 0.1) 0%,
        transparent 70%
    );
    bottom: -80px;
    left: -50px;
}

.headerAL-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.admin-badge-al {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.headerAL-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.headerAL-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

.headerAL-stats {
    display: flex;
    gap: 24px;
}

.headerAL-stat {
    text-align: center;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.stat-number-al {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.stat-label-al {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Admin Navigation */
.admin-nav-al {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.nav-item-al {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-item-al:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.nav-item-al.active {
    background: #f59f27;
    color: #ffffff;
}

.nav-item-al-back {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.5);
}

.nav-item-al-back:hover {
    color: #f59f27;
}

/* ==================== ADMIN CONTENT ==================== */
.admin-content-al {
    padding: 40px 0 60px;
}
/* ==================== FILTER BAR ==================== */
.filter-bar-al {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #ffffff;
    padding: 16px 24px;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 32px;
}

.filter-search-al {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.filter-search-al i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray);
}

.filter-search-al input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 2px solid var(--gray-medium);
    border-radius: 12px;
    font-size: 14px;
    color: #1a1a2e;
    transition: all 0.3s ease;
}

.filter-search-al input:focus {
    outline: none;
    border-color: #f59f27;
    box-shadow: 0 0 0 4px rgba(245, 159, 39, 0.1);
}

.filter-buttons-al {
    display: flex;
    gap: 8px;
}

.filter-btn-al {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--gray-light);
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray);
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn-al:hover {
    background: var(--gray-medium);
    color: #1a1a2e;
}

.filter-btn-al.active {
    background: #f59f27;
    color: #ffffff;
}

.filter-count-al {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 12px;
}

.filter-btn-al.active .filter-count-al {
    background: rgba(255, 255, 255, 0.2);
}

/* ==================== LISTINGS GRID ==================== */
.listings-grid-al {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

.listing-card-al {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

.listing-card-al:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
}

.listing-card-al.hidden {
    display: none;
}

/* Card Image */
.card-image-al {
    position: relative;
    height: 200px;
    overflow: hidden;
}

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

.listing-card-al:hover .card-image-al img {
    transform: scale(1.08);
}

.image-placeholder-al {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--gray-light) 0%,
        var(--gray-medium) 100%
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--gray);
}

.image-placeholder-al i {
    font-size: 40px;
    opacity: 0.5;
}

.image-placeholder-al span {
    font-size: 13px;
}

.status-badge-al {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}

.status-active-al {
    background: rgba(34, 197, 94, 0.9);
    color: #ffffff;
}

.status-inactive-al {
    background: rgba(108, 117, 125, 0.9);
    color: #ffffff;
}

.card-overlay-al {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.listing-card-al:hover .card-overlay-al {
    opacity: 1;
}

.overlay-btn-al {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a2e;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: translateY(10px);
    text-decoration: none;
}

.listing-card-al:hover .overlay-btn-al {
    transform: translateY(0);
}

.overlay-btn-al:hover {
    background: #f59f27;
    color: #ffffff;
}

.overlay-btn-al-danger:hover {
    background: #dc3545;
}

/* Card Content */
.card-content-al {
    padding: 24px;
}

.card-title-al {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 16px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-details-al {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.detail-row-al {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--gray);
}

.detail-row-al i {
    width: 16px;
    color: #f59f27;
    font-size: 13px;
}

.detail-row-al span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Card Actions */
.card-actions-al {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.action-btn-al {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-btn-al-view {
    background: linear-gradient(135deg, #f59f27 0%, #ff6b35 100%);
    color: #ffffff;
}

.action-btn-al-view:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 159, 39, 0.3);
}

.action-btn-al-disabled {
    background: var(--gray-light);
    color: var(--gray);
    cursor: not-allowed;
}

.action-btn-al-delete {
    background: var(--gray-light);
    color: var(--gray);
}

.action-btn-al-delete:hover {
    background: #fee;
    color: #dc3545;
}

/* Card Footer */
.card-footer-al {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-medium);
    font-size: 13px;
    color: var(--gray);
}

.card-footer-al i {
    color: #f59f27;
}

/* ==================== empty-al STATE ==================== */
.empty-al-state {
    text-align: center;
    padding: 80px 20px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.empty-al-icon {
    width: 100px;
    height: 100px;
    background: var(--gray-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.empty-al-icon i {
    font-size: 40px;
    color: var(--gray);
}

.empty-al-state h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 8px;
}

.empty-al-state p {
    font-size: 16px;
    color: var(--gray);
}

/* ==================== DELETE MODAL ==================== */
.delete-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.delete-modal-overlay.active {
    display: flex;
}

.delete-modal {
    background: #ffffff;
    border-radius: 24px;
    padding: 32px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
}

.modal-icon {
    width: 72px;
    height: 72px;
    background: #fee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.modal-icon i {
    font-size: 32px;
    color: #dc3545;
}

.delete-modal h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.delete-modal p {
    font-size: 15px;
    color: var(--gray);
    margin-bottom: 20px;
}

.delete-modal strong {
    color: #1a1a2e;
}

.modal-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fff3cd;
    border-radius: 12px;
    margin-bottom: 24px;
    text-align: left;
}

.modal-warning i {
    color: #856404;
    margin-top: 2px;
}

.modal-warning span {
    font-size: 13px;
    color: #856404;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 12px;
}

.modal-btn {
    flex: 1;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.modal-btn-cancel {
    background: var(--gray-light);
    color: var(--gray);
}

.modal-btn-cancel:hover {
    background: var(--gray-medium);
    color: #1a1a2e;
}

.modal-btn-delete {
    background: #dc3545;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.modal-btn-delete:hover {
    background: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991px) {
    .headerAL-content {
        flex-direction: column;
        text-align: center;
    }

    .headerAL-stats {
        justify-content: center;
    }

    .admin-nav-al {
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-item-al-back {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .filter-bar-al {
        flex-direction: column;
        gap: 16px;
    }

    .filter-search-al {
        max-width: 100%;
    }

    .filter-buttons-al {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .admin-headerAL {
        padding: 80px 0 30px;
    }

    .headerAL-stats {
        gap: 12px;
    }

    .headerAL-stat {
        padding: 12px 16px;
    }

    .stat-number-al {
        font-size: 24px;
    }

    .nav-item-al {
        padding: 12px 16px;
        font-size: 13px;
    }

    .nav-item-al span {
        display: none;
    }

    .listings-grid-al {
        grid-template-columns: 1fr;
    }

    .filter-buttons-al {
        flex-wrap: wrap;
    }

    .filter-btn-al {
        flex: 1;
        min-width: 100px;
        justify-content: center;
    }
}
/* ------------------------ admin listings dashboard end--------------------------------- */

/* ------------------------ admin users dashboard end--------------------------------- */

.admin-users-page {
    min-height: 100vh;
}

/* ==================== ADMIN headerAD ==================== */

.headerAD-stats {
    display: flex;
    gap: 24px;
}

.headerAD-stat {
    text-align: center;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.stat-number {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Admin Navigation */
.admin-nav-ad {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.nav-item.active {
    background: #3b82f6;
    color: #ffffff;
}

.nav-item-back {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.5);
}

.nav-item-back:hover {
    color: #f59f27;
}

/* ==================== ADMIN CONTENT ==================== */
.admin-content {
    padding: 40px 0 60px;
}

/* Alerts */
.alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    animation: slideIn 0.3s ease;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success {
    background: #d4edda;
    color: #155724;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
}

.alert button {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
}

.alert button:hover {
    opacity: 1;
}

/* ==================== FILTER BAR ==================== */
.filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #ffffff;
    padding: 16px 24px;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 32px;
}

.filter-search {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.filter-search i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray);
}

.filter-search input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 2px solid var(--gray-medium);
    border-radius: 12px;
    font-size: 14px;
    color: #1a1a2e;
    transition: all 0.3s ease;
}

.filter-search input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.filter-buttons {
    display: flex;
    gap: 8px;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--gray-light);
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray);
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background: var(--gray-medium);
    color: #1a1a2e;
}

.filter-btn.active {
    background: #3b82f6;
    color: #ffffff;
}

.filter-count {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 12px;
}

.filter-btn.active .filter-count {
    background: rgba(255, 255, 255, 0.2);
}

/* ==================== USERS TABLE ==================== */
.users-table-wrapper {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

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

.users-table thead {
    background: var(--gray-light);
}

.users-table th {
    padding: 16px 24px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.users-table tbody tr {
    border-bottom: 1px solid var(--gray-medium);
    transition: background 0.2s ease;
}

.users-table tbody tr:last-child {
    border-bottom: none;
}

.users-table tbody tr:hover {
    background: #fafbfc;
}

.users-table tbody tr.hidden {
    display: none;
}

.users-table td {
    padding: 20px 24px;
    vertical-align: middle;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 14px;
}

.user-avatar {
    width: 44px;
    height: 44px;
    background: black;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.user-avatar.avatar-admin {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-name {
    font-weight: 600;
    color: #1a1a2e;
}

.badge-admin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
}

.email-text {
    font-size: 14px;
    color: var(--gray);
}

.provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

.provider-google {
    background: rgba(234, 67, 53, 0.1);
    color: #ea4335;
}

.provider-facebook {
    background: rgba(66, 103, 178, 0.1);
    color: #4267b2;
}

.provider-email {
    background: var(--gray-light);
    color: var(--gray);
}

.listings-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-light);
    color: var(--gray);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
}

.listings-count.has-listings {
    background: rgba(245, 159, 39, 0.1);
    color: #f59f27;
}

.date-text {
    font-size: 14px;
    color: var(--gray);
}

.delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--gray-light);
    border: none;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray);
    cursor: pointer;
    transition: all 0.3s ease;
}

.delete-btn:hover {
    background: #fee;
    color: #dc3545;
}

.current-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: #22c55e;
}

/* ==================== MOBILE CARDS ==================== */
.users-cards {
    display: none;
}

.user-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 16px;
}

.user-card.hidden {
    display: none;
}

.user-card .card-headerAD {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-medium);
}

.card-user-info {
    flex: 1;
}

.card-user-info .user-name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 2px;
}

.user-email {
    font-size: 13px;
    color: var(--gray);
}

.card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.detail-item {
    flex: 1;
    min-width: 80px;
}

.detail-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.card-actions {
    padding-top: 16px;
    border-top: 1px solid var(--gray-medium);
}

.card-actions .delete-btn,
.card-actions .current-user-badge {
    width: 100%;
    justify-content: center;
    padding: 12px;
}

/* ==================== EMPTY STATE ==================== */
.empty-state {
    text-align: center;
    padding: 80px 20px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.empty-icon {
    width: 100px;
    height: 100px;
    background: var(--gray-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.empty-icon i {
    font-size: 40px;
    color: var(--gray);
}

.empty-state h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 16px;
    color: var(--gray);
}

/* ==================== DELETE MODAL ==================== */
.delete-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.delete-modal-overlay.active {
    display: flex;
}

.delete-modal {
    background: #ffffff;
    border-radius: 24px;
    padding: 32px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
}

.modal-icon {
    width: 72px;
    height: 72px;
    background: #fee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.modal-icon i {
    font-size: 32px;
    color: #dc3545;
}

.delete-modal h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.delete-modal p {
    font-size: 15px;
    color: var(--gray);
    margin-bottom: 20px;
}

.delete-modal strong {
    color: #1a1a2e;
}

.modal-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fff3cd;
    border-radius: 12px;
    margin-bottom: 24px;
    text-align: left;
}

.modal-warning i {
    color: #856404;
    margin-top: 2px;
}

.modal-warning span {
    font-size: 13px;
    color: #856404;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 12px;
}

.modal-btn {
    flex: 1;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.modal-btn-cancel {
    background: var(--gray-light);
    color: var(--gray);
}

.modal-btn-cancel:hover {
    background: var(--gray-medium);
    color: #1a1a2e;
}

.modal-btn-delete {
    background: #dc3545;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.modal-btn-delete:hover {
    background: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991px) {
    .headerAD-content {
        flex-direction: column;
        text-align: center;
    }

    .headerAD-stats {
        justify-content: center;
    }

    .admin-nav-ad {
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-item-back {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .filter-bar {
        flex-direction: column;
        gap: 16px;
    }

    .filter-search {
        max-width: 100%;
    }

    .filter-buttons {
        width: 100%;
        justify-content: center;
    }

    .users-table-wrapper {
        display: none;
    }

    .users-cards {
        display: block;
    }
}

@media (max-width: 767px) {
    .headerAD-stats {
        gap: 12px;
    }

    .headerAD-stat {
        padding: 12px 16px;
    }

    .stat-number {
        font-size: 24px;
    }

    .nav-item {
        padding: 12px 16px;
        font-size: 13px;
    }

    .nav-item span {
        display: none;
    }

    .filter-buttons {
        flex-wrap: wrap;
    }

    .filter-btn {
        flex: 1;
        min-width: 80px;
        justify-content: center;
        padding: 10px 12px;
    }
}

/* ------------------------ admin users dashboard end--------------------------------- */

/* ------------------------ payfast redirect--------------------------------- */
.payfast-redirect-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.payment-processing-card {
    background: #fff;
    border-radius: 16px;
    padding: 3rem 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.processing-icon {
    margin-bottom: 1.5rem;
}

.processing-icon .spinner-border {
    width: 3rem;
    height: 3rem;
}

.payment-processing-card h2 {
    color: #333;
    margin-bottom: 0.5rem;
}

.booking-summary-mini {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
}

.booking-summary-mini p {
    margin-bottom: 0.25rem;
}
/* ------------------------ payfast redirect end--------------------------------- */

/* ------------------------ contact page--------------------------------- */

/* Page Base */
.contact-page {
    min-height: 100vh;
    background: var(--gray-light);
}

/* Hero Section */
.contact-hero {
    position: relative;
    background: linear-gradient(135deg, var(--dark-light) 0%, var(--dark) 100%);
    padding: 80px 0 120px;
    overflow: hidden;
}

.hero-bg-shape-contacts {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.shape-contact {
    position: absolute;
    border-radius: 50%;
}
.shape-contact-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(
        circle,
        rgba(245, 159, 39, 0.15) 0%,
        transparent 70%
    );
    top: -150px;
    right: -100px;
}
.shape-contact-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.1) 0%,
        transparent 70%
    );
    bottom: -100px;
    left: -50px;
}

.hero-content-cc {
    text-align: center;
    position: relative;
    z-index: 1;
}

.hero-badge-cc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gradient);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.hero-title-cc {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 12px;
}

.hero-subtitle-cc {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 500px;
    margin: 0 auto;
}

/* Content Section */
.contact-content {
    margin-top: -60px;
    padding-bottom: 80px;
    position: relative;
    z-index: 2;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}

/* Form Card */
.form-card-cc {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-md);
}

.form-header-cc {
    margin-bottom: 32px;
}
.form-header-cc h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}
.form-header-cc p {
    font-size: 15px;
    color: var(--gray);
    margin: 0;
}

/* Form Styles */
.form-row-cc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group-cc {
    margin-bottom: 24px;
}

.form-group-cc label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 10px;
}

.form-group-cc label i {
    color: var(--primary);
    font-size: 14px;
}

.form-group-cc input,
.form-group-cc textarea {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--dark);
    background: var(--white);
    transition: all 0.3s ease;
}

.form-group-cc input:focus,
.form-group-cc textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(245, 159, 39, 0.1);
}

.form-group-cc input::placeholder,
.form-group-cc textarea::placeholder {
    color: #adb5bd;
}

.form-group-cc input.error,
.form-group-cc textarea.error {
    border-color: #dc3545;
}

.form-group-cc textarea {
    resize: vertical;
    min-height: 140px;
}

.error-message-cc {
    display: block;
    font-size: 13px;
    color: #dc3545;
    margin-top: 6px;
}

.submit-btn-cc {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    background: var(--gradient);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(245, 159, 39, 0.3);
}

.submit-btn-cc:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(245, 159, 39, 0.4);
}

/* Sidebar */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

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

.info-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(
        135deg,
        rgba(245, 159, 39, 0.1) 0%,
        rgba(255, 107, 53, 0.1) 100%
    );
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-icon i {
    font-size: 22px;
    color: var(--primary);
}

.info-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
}
.info-content p {
    font-size: 14px;
    color: var(--gray);
    margin: 0;
}

/* Social Links */
.social-links-cc {
    background: var(--white);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.social-links-cc h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 16px;
}

.social-icon-ccs-cc {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.social-icon-cc {
    width: 44px;
    height: 44px;
    background: var(--gray-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon-cc:hover {
    background: var(--gradient);
    color: var(--white);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 991px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .social-links-cc {
        grid-column: span 2;
    }
}

@media (max-width: 767px) {
    .contact-hero {
        padding: 60px 0 100px;
    }
    .form-card-cc {
        padding: 24px;
    }
    .form-row-cc {
        grid-template-columns: 1fr;
    }

    .contact-sidebar {
        grid-template-columns: 1fr;
    }

    .social-links-cc {
        grid-column: span 1;
    }
}

/* ------------------------ contact page end--------------------------------- */

/* ------------------------ recaptcha--------------------------------- */
.g-recaptcha {
    margin: 15px 0;
    display: flex;
    justify-content: center;
}

@media (max-width: 500px) {
    .g-recaptcha {
        transform: scale(0.85);
        transform-origin: 0 0;
    }
}
/* ------------------------ recaptcha end--------------------------------- */

/* ------------------------ admin view listing details--------------------------------- */

/* Photo Modal */
.photo-modal-admin-listing {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}

.photo-modal-content-admin-listing {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.photo-modal-close-admin-listing {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Base Styles */
.admin-listing-details-page-admin-listing {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    min-height: 100vh;
    padding-bottom: 50px;
}

.admin-header-detail-admin-listing {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 30px 0;
    position: relative;
    overflow: hidden;
}

.header-bg-shape-admin-listing {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
}

.shape-admin-listing {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

.shape-1-admin-listing {
    width: 400px;
    height: 400px;
    top: -200px;
    right: -100px;
}

.shape-2-admin-listing {
    width: 300px;
    height: 300px;
    bottom: -150px;
    left: -50px;
}

.header-breadcrumb-admin-listing {
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

.header-breadcrumb-admin-listing a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s;
}

.header-breadcrumb-admin-listing a:hover {
    color: white;
}

.header-content-admin-listing {
    position: relative;
    z-index: 1;
}

.header-title-admin-listing {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.header-meta-admin-listing {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.meta-item-admin-listing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    opacity: 0.9;
}

/* Detail Content */
.admin-detail-content-admin-listing {
    padding: 30px 0;
}

.detail-grid-admin-listing {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
}

.detail-card-admin-listing {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    overflow: hidden;
}

.card-header-admin-listing {
    background: #f8f9fa;
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
}

.card-header-admin-listing h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-body-admin-listing {
    padding: 25px;
}

/* Photos Grid */
.photos-grid-admin-listing {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.photo-item-admin-listing {
    position: relative;
    padding-bottom: 75%;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
}

.photo-item-admin-listing:hover {
    transform: scale(1.05);
}

.photo-item-admin-listing img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info Grid */
.info-grid-admin-listing {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.info-item-admin-listing {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-label-admin-listing {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #7f8c8d;
    letter-spacing: 0.5px;
}

.info-value-admin-listing {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
}

.info-full-admin-listing {
    margin-top: 20px;
}

.info-description-admin-listing {
    margin-top: 10px;
    line-height: 1.6;
    color: #555;
}

/* Features List */
.features-list-admin-listing {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.feature-tag-admin-listing {
    background: #e9ecef;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    color: #495057;
}

/* Insurance Styles */
.insurance-active-admin-listing {
    border-left: 4px solid #2ecc71;
}

.insurance-none-admin-listing {
    border-left: 4px solid #e74c3c;
}

.insurance-badge-admin-listing {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #d4edda;
    color: #155724;
    padding: 15px;
    border-radius: 8px;
    font-weight: 600;
}

.insurance-none-badge-admin-listing {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 8px;
    font-weight: 600;
}

.insurance-pending-admin-listing {
    background: #fff3cd;
    color: #856404;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: start;
    gap: 10px;
}

.extras-section-admin-listing h4,
.documents-section-admin-listing h4 {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
}

.extras-list-admin-listing {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.extra-item-admin-listing {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 6px;
}

.extra-value-admin-listing {
    font-weight: 600;
    color: #2ecc71;
}

.documents-list-admin-listing {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.document-item-admin-listing {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: background 0.3s;
}

.document-item-admin-listing:hover {
    background: #e9ecef;
}

.document-icon-admin-listing {
    font-size: 28px;
}

.document-icon-admin-listing .fa-file-pdf {
    color: #e74c3c;
}

.document-icon-admin-listing .fa-file-image {
    color: #3498db;
}

.document-info-admin-listing {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.document-name-admin-listing {
    font-weight: 600;
    color: #2c3e50;
}

.document-type-admin-listing {
    font-size: 12px;
    color: #7f8c8d;
}

.document-action-admin-listing {
    background: #3498db;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s;
}

.document-action-admin-listing:hover {
    background: #2980b9;
}

/* Pricing */
.pricing-info-admin-listing {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.price-item-admin-listing {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #e9ecef;
}

.price-item-admin-listing:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.discount-admin-listing {
    color: #2ecc71;
}

.price-value-admin-listing {
    font-weight: 600;
    color: #2c3e50;
}

/* Action Buttons */
.action-buttons-admin-listing {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-btn-admin-listing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.action-btn-primary-admin-listing {
    background: #3498db;
    color: white;
}

.action-btn-primary-admin-listing:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

.action-btn-secondary-admin-listing {
    background: #95a5a6;
    color: white;
}

.action-btn-secondary-admin-listing:hover {
    background: #7f8c8d;
    transform: translateY(-2px);
}

/* Location */
.location-info-admin-listing p {
    margin: 5px 0;
    color: #555;
}

/* Responsive */
@media (max-width: 1024px) {
    .detail-grid-admin-listing {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .photos-grid-admin-listing {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .info-grid-admin-listing {
        grid-template-columns: 1fr;
    }
}

/* Photo Modal */
.photo-modal-admin-listing {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}

.photo-modal-content-admin-listing {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.photo-modal-close-admin-listing {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Base Styles */
.admin-listing-details-page-admin-listing {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    min-height: 100vh;
    padding-bottom: 50px;
}

.admin-header-detail-admin-listing {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 30px 0;
    position: relative;
    overflow: hidden;
}

.header-bg-shape-admin-listing {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
}

.shape-admin-listing {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

.shape-1-admin-listing {
    width: 400px;
    height: 400px;
    top: -200px;
    right: -100px;
}

.shape-2-admin-listing {
    width: 300px;
    height: 300px;
    bottom: -150px;
    left: -50px;
}

.header-breadcrumb-admin-listing {
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

.header-breadcrumb-admin-listing a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s;
}

.header-breadcrumb-admin-listing a:hover {
    color: white;
}

.header-content-admin-listing {
    position: relative;
    z-index: 1;
}

.header-title-admin-listing {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.header-meta-admin-listing {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.meta-item-admin-listing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    opacity: 0.9;
}

/* Detail Content */
.admin-detail-content-admin-listing {
    padding: 30px 0;
}

.detail-grid-admin-listing {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
}

.detail-card-admin-listing {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    overflow: hidden;
}

.card-header-admin-listing {
    background: #f8f9fa;
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
}

.card-header-admin-listing h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-body-admin-listing {
    padding: 25px;
}

/* Photos Grid */
.photos-grid-admin-listing {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.photo-item-admin-listing {
    position: relative;
    padding-bottom: 75%;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
}

.photo-item-admin-listing:hover {
    transform: scale(1.05);
}

.photo-item-admin-listing img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info Grid */
.info-grid-admin-listing {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.info-item-admin-listing {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-label-admin-listing {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #7f8c8d;
    letter-spacing: 0.5px;
}

.info-value-admin-listing {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
}

.info-full-admin-listing {
    margin-top: 20px;
}

.info-description-admin-listing {
    margin-top: 10px;
    line-height: 1.6;
    color: #555;
}

/* Features List */
.features-list-admin-listing {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.feature-tag-admin-listing {
    background: #e9ecef;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    color: #495057;
}

/* Insurance Styles */
.insurance-active-admin-listing {
    border-left: 4px solid #2ecc71;
}

.insurance-none-admin-listing {
    border-left: 4px solid #e74c3c;
}

.insurance-badge-admin-listing {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #d4edda;
    color: #155724;
    padding: 15px;
    border-radius: 8px;
    font-weight: 600;
}

.insurance-none-badge-admin-listing {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 8px;
    font-weight: 600;
}

.insurance-pending-admin-listing {
    background: #fff3cd;
    color: #856404;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: start;
    gap: 10px;
}

.extras-section-admin-listing h4,
.documents-section-admin-listing h4 {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
}

.extras-list-admin-listing {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.extra-item-admin-listing {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 6px;
}

.extra-value-admin-listing {
    font-weight: 600;
    color: #2ecc71;
}

.documents-list-admin-listing {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.document-item-admin-listing {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: background 0.3s;
}

.document-item-admin-listing:hover {
    background: #e9ecef;
}

.document-icon-admin-listing {
    font-size: 28px;
}

.document-icon-admin-listing .fa-file-pdf {
    color: #e74c3c;
}

.document-icon-admin-listing .fa-file-image {
    color: #3498db;
}

.document-info-admin-listing {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.document-name-admin-listing {
    font-weight: 600;
    color: #2c3e50;
}

.document-type-admin-listing {
    font-size: 12px;
    color: #7f8c8d;
}

.document-action-admin-listing {
    background: #3498db;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s;
}

.document-action-admin-listing:hover {
    background: #2980b9;
}

/* Pricing */
.pricing-info-admin-listing {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.price-item-admin-listing {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #e9ecef;
}

.price-item-admin-listing:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.discount-admin-listing {
    color: #2ecc71;
}

.price-value-admin-listing {
    font-weight: 600;
    color: #2c3e50;
}

/* Action Buttons */
.action-buttons-admin-listing {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-btn-admin-listing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.action-btn-primary-admin-listing {
    background: #3498db;
    color: white;
}

.action-btn-primary-admin-listing:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

.action-btn-secondary-admin-listing {
    background: #95a5a6;
    color: white;
}

.action-btn-secondary-admin-listing:hover {
    background: #7f8c8d;
    transform: translateY(-2px);
}

/* Location */
.location-info-admin-listing p {
    margin: 5px 0;
    color: #555;
}

/* Responsive */
@media (max-width: 1024px) {
    .detail-grid-admin-listing {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .photos-grid-admin-listing {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .info-grid-admin-listing {
        grid-template-columns: 1fr;
    }
}

/* ------------------------ admin view listing details end--------------------------------- */

/* ------------------------ whatsapp widget --------------------------------- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.whatsapp-float:hover {
    background-color: #128c7e;
    transform: scale(1.1);
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4);
}

.whatsapp-float i {
    margin-top: 3px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
        font-size: 26px;
    }
}
/* ------------------------ whatsapp widget end--------------------------------- */

/* ========================================
   BLOG SYSTEM STYLES
   ======================================== */

/* -----------------------------------------
   Custom Text Editor Styles
   ----------------------------------------- */
.custom-editor-container {
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-bottom: 2px solid #e8e8e8;
}

.toolbar-group {
    display: flex;
    gap: 2px;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: #dee2e6;
    margin: 0 8px;
}

.toolbar-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #495057;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolbar-btn:hover {
    background: #e9ecef;
    color: #d35400;
}

.toolbar-btn.active {
    background: #d35400;
    color: white;
}

.editor-content {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding: 15px;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

.editor-content:focus {
    outline: none;
}

.editor-content:empty:before {
    content: attr(data-placeholder);
    color: #adb5bd;
}

.editor-content ul,
.editor-content ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.editor-content a {
    color: #d35400;
    text-decoration: underline;
}

/* -----------------------------------------
   Link Modal Styles
   ----------------------------------------- */
.link-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.link-modal-overlay.active {
    display: flex;
}

.link-modal {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.link-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e9ecef;
}

.link-modal-header h4 {
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
}

.link-modal-header h4 i {
    color: #d35400;
}

.link-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
}

.link-modal-close:hover {
    color: #333;
}

.link-modal-body {
    padding: 20px;
}

.link-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e9ecef;
}

/* -----------------------------------------
   Blog Listing Page (Public)
   ----------------------------------------- */
.blog-listing-page {
    min-height: 100vh;
    background: #f8fafc;
}

.blog-header {
    position: relative;
    padding: 80px 0;
    background: var(--gradient);
    overflow: hidden;
}

.blog-header-bg {
    position: absolute;
    inset: 0;
}

.blog-header .shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    background: white;
}

.blog-header .shape-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -100px;
}

.blog-header .shape-2 {
    width: 300px;
    height: 300px;
    bottom: -150px;
    left: -50px;
}

.blog-header-content {
    position: relative;
    text-align: center;
    color: white;
}

.blog-header-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
}

.blog-header-subtitle {
    font-size: 18px;
    opacity: 0.9;
}

.blog-grid-section {
    padding: 60px 0;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

/* -----------------------------------------
   Blog Card Styles
   ----------------------------------------- */
.blog-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.blog-card-image {
    display: block;
    position: relative;
    height: 220px;
    overflow: hidden;
}

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

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

.blog-card-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    color: #94a3b8;
    font-size: 48px;
}

.blog-card-date {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #d35400;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
    line-height: 1.2;
}

.blog-card-date .date-day {
    display: block;
    font-size: 20px;
    font-weight: 700;
}

.blog-card-date .date-month {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
}

.blog-card-content {
    padding: 25px;
}

.blog-card-meta {
    margin-bottom: 12px;
}

.blog-author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 13px;
}

.blog-card-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.4;
}

.blog-card-title a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-card-title a:hover {
    color: #d35400;
}

.blog-card-excerpt {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #d35400;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.blog-read-more:hover {
    gap: 12px;
}

.blog-pagination {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.blog-empty {
    text-align: center;
    padding: 80px 20px;
    color: #64748b;
}

.blog-empty i {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.blog-empty h2 {
    font-size: 24px;
    color: #374151;
    margin-bottom: 10px;
}

/* -----------------------------------------
   Single Blog Post Page
   ----------------------------------------- */
.blog-single-page {
    min-height: 100vh;
    background: #f8fafc;
}

.blog-hero {
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: flex-end;
    padding: 60px 0;
}

.blog-hero-bg {
    position: absolute;
    inset: 0;
}

.blog-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-hero-gradient {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
}

.blog-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.3) 100%
    );
}

.blog-hero-content {
    position: relative;
    color: white;
    max-width: 800px;
}

.blog-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.blog-back-link:hover {
    color: white;
}

.blog-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 15px;
    opacity: 0.9;
}

.blog-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog-meta .meta-divider {
    opacity: 0.5;
}

.blog-content-section {
    padding: 60px 0;
}

.blog-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
}

/* -----------------------------------------
   Blog Content Styles
   ----------------------------------------- */
.blog-content {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    font-size: 17px;
    line-height: 1.8;
    color: #374151;
}

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4 {
    color: #1e293b;
    margin: 1.5em 0 0.8em;
    font-weight: 600;
}

.blog-content h1 {
    font-size: 2em;
}

.blog-content h2 {
    font-size: 1.6em;
}

.blog-content h3 {
    font-size: 1.3em;
}

.blog-content p {
    margin: 1em 0;
}

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.5em 0;
}

.blog-content blockquote {
    border-left: 4px solid #d35400;
    margin: 1.5em 0;
    padding: 1em 1.5em;
    background: #fffaf5;
    font-style: italic;
    border-radius: 0 8px 8px 0;
}

.blog-content ul,
.blog-content ol {
    padding-left: 1.5em;
    margin: 1em 0;
}

.blog-content li {
    margin: 0.5em 0;
}

.blog-content a {
    color: #d35400;
}

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

/* -----------------------------------------
   Blog Sidebar Styles
   ----------------------------------------- */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.sidebar-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f5f9;
}

.author-card {
    text-align: center;
}

.author-avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #d35400, #e67e22);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    color: white;
    font-size: 32px;
    overflow: hidden;
}

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

.author-name {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.author-role {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 10px;
}

.author-bio-text {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.keyword-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.keyword-tag {
    background: #f1f5f9;
    color: #475569;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
}

.share-buttons {
    display: flex;
    gap: 10px;
}

.share-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.share-btn:hover {
    transform: scale(1.1);
}

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

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

.share-linkedin {
    background: #0a66c2;
}

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

/* -----------------------------------------
   Related Posts
   ----------------------------------------- */
.related-posts {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 2px solid #e2e8f0;
}

.related-title {
    font-size: 24px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 25px;
}

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

.related-card {
    display: block;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.related-image {
    height: 160px;
    overflow: hidden;
}

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

.related-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    color: #94a3b8;
    font-size: 32px;
}

.related-content {
    padding: 20px;
}

.related-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
    line-height: 1.4;
}

.related-date {
    font-size: 13px;
    color: #64748b;
}

/* -----------------------------------------
   Admin Blog Management Styles
   ----------------------------------------- */
.btn-create-blog {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #d35400, #e67e22);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(211, 84, 0, 0.3);
}

.btn-create-blog:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(211, 84, 0, 0.4);
    color: white;
}

.btn-create-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #475569;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-right: 10px;
}

.btn-create-author:hover {
    background: #334155;
    transform: translateY(-2px);
    color: white;
}

.blog-keywords-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0;
}

.blog-keywords-preview .keyword-tag {
    background: #f0f4f8;
    color: #64748b;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
}

.keyword-more {
    background: #e2e8f0;
    color: #475569;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.btn-create-first {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #d35400, #e67e22);
    color: white;
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.btn-create-first:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(211, 84, 0, 0.4);
    color: white;
}

/* -----------------------------------------
   Author Management Styles
   ----------------------------------------- */
.authors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.author-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.author-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.author-card-image {
    position: relative;
    height: 200px;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}

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

.author-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: #94a3b8;
}

.author-status {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-active {
    background: #dcfce7;
    color: #16a34a;
}

.status-inactive {
    background: #fee2e2;
    color: #dc2626;
}

.author-card-content {
    padding: 20px;
}

.author-card-content .author-name {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.author-stats {
    margin-bottom: 12px;
}

.author-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 14px;
}

.author-stat i {
    color: #d35400;
}

.author-bio {
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.author-actions {
    display: flex;
    gap: 10px;
}

.action-btn-al {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-btn-al-edit {
    background: #f0f4f8;
    color: #475569;
}

.action-btn-al-edit:hover {
    background: #d35400;
    color: white;
}

.action-btn-al-delete {
    background: #fef2f2;
    color: #dc2626;
}

.action-btn-al-delete:hover {
    background: #dc2626;
    color: white;
}

.author-card.hidden {
    display: none;
}

/* -----------------------------------------
   Author Form Styles
   ----------------------------------------- */
.author-form-section {
    padding: 30px 0 60px;
}

.author-form-card {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    max-width: 700px;
}

.author-image-upload {
    position: relative;
}

.author-image-upload .file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.upload-area:hover {
    border-color: #d35400;
    background: #fffaf5;
}

.upload-placeholder {
    padding: 40px;
    text-align: center;
    color: #9ca3af;
}

.upload-placeholder i {
    font-size: 40px;
    margin-bottom: 10px;
    color: #d1d5db;
}

.upload-placeholder p {
    font-weight: 500;
    color: #6b7280;
    margin: 0 0 4px;
}

.upload-placeholder span {
    font-size: 12px;
}

.image-preview {
    position: relative;
}

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

.remove-image {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: rgba(220, 38, 38, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.remove-image:hover {
    background: #dc2626;
}

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.toggle-switch input {
    display: none;
}

.toggle-slider {
    width: 50px;
    height: 26px;
    background: #d1d5db;
    border-radius: 13px;
    position: relative;
    transition: all 0.3s ease;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: all 0.3s ease;
}

.toggle-switch input:checked + .toggle-slider {
    background: #22c55e;
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(24px);
}

.toggle-label {
    font-weight: 500;
    color: #374151;
}

/* -----------------------------------------
   Blog Form Styles
   ----------------------------------------- */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 20px;
}

.back-link:hover {
    color: #d35400;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.author-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.add-author-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 13px;
    color: #d35400;
    text-decoration: none;
    font-weight: 500;
}

.add-author-link:hover {
    text-decoration: underline;
}

/* -----------------------------------------
   Delete Modal Styles
   ----------------------------------------- */
.delete-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.delete-modal-overlay.active {
    display: flex;
}

.delete-modal {
    background: white;
    border-radius: 16px;
    padding: 30px;
    max-width: 420px;
    width: 90%;
    text-align: center;
}

.modal-icon {
    width: 60px;
    height: 60px;
    background: #fef2f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #dc2626;
    font-size: 24px;
}

.delete-modal h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 10px;
}

.delete-modal p {
    color: #64748b;
    margin-bottom: 20px;
}

.modal-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fffbeb;
    border-radius: 8px;
    color: #d97706;
    font-size: 14px;
    margin-bottom: 25px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-btn-cancel {
    background: #f3f4f6;
    color: #6b7280;
}

.modal-btn-cancel:hover {
    background: #e5e7eb;
}

.modal-btn-delete {
    background: #dc2626;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.modal-btn-delete:hover {
    background: #b91c1c;
}

/* -----------------------------------------
   Responsive Styles for Blog System
   ----------------------------------------- */
@media (max-width: 1024px) {
    .blog-content-wrapper {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .blog-header {
        padding: 60px 0;
    }

    .blog-header-title {
        font-size: 32px;
    }

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

    .blog-hero {
        min-height: 350px;
    }

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

    .blog-content {
        padding: 25px;
    }

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

    .form-row {
        grid-template-columns: 1fr;
    }

    .editor-toolbar {
        gap: 3px;
        padding: 8px;
    }

    .toolbar-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .toolbar-divider {
        margin: 0 4px;
    }

    .authors-grid {
        grid-template-columns: 1fr;
    }
}
/* -----------------------------------------
   Fixed Publish Toggle Switch
   ----------------------------------------- */
.sidebar-card .toggle-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 0;
}

.sidebar-card .toggle-switch input {
    display: none;
}

.sidebar-card .toggle-switch .toggle-slider {
    width: 50px;
    min-width: 50px;
    height: 26px;
    background: #d1d5db;
    border-radius: 13px;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.sidebar-card .toggle-switch .toggle-slider::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.sidebar-card .toggle-switch input:checked + .toggle-slider {
    background: #22c55e;
}

.sidebar-card .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(24px);
}

.sidebar-card .toggle-switch .toggle-label {
    font-weight: 500;
    color: #374151;
    font-size: 14px;
    line-height: 1.4;
}

/* -----------------------------------------
   Fixed Author Form Toggle Switch
   ----------------------------------------- */
.author-form .toggle-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 0;
}

.author-form .toggle-switch input {
    display: none;
}

.author-form .toggle-switch .toggle-slider {
    width: 50px;
    min-width: 50px;
    height: 26px;
    background: #d1d5db;
    border-radius: 13px;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.author-form .toggle-switch .toggle-slider::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.author-form .toggle-switch input:checked + .toggle-slider {
    background: #22c55e;
}

.author-form .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(24px);
}

.author-form .toggle-switch .toggle-label {
    font-weight: 500;
    color: #374151;
    font-size: 14px;
    line-height: 1.4;
}
/* -----------------------------------------
   Preview Banner Styles
   ----------------------------------------- */
.preview-banner {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
    color: white;
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.preview-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.preview-banner-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.preview-banner-left i {
    font-size: 20px;
    opacity: 0.9;
}

.preview-banner-left span {
    font-size: 14px;
}

.preview-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 5px;
}

.preview-status.draft {
    background: #fbbf24;
    color: #92400e;
}

.preview-status.published {
    background: #34d399;
    color: #065f46;
}

.preview-banner-actions {
    display: flex;
    gap: 10px;
}

.preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.preview-btn-edit {
    background: #d35400;
    color: white;
}

.preview-btn-edit:hover {
    background: #b84700;
    color: white;
}

.preview-btn-back {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.preview-btn-back:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

@media (max-width: 768px) {
    .preview-banner-content {
        flex-direction: column;
        text-align: center;
    }

    .preview-banner-left {
        flex-direction: column;
        gap: 8px;
    }

    .preview-banner-actions {
        width: 100%;
        justify-content: center;
    }
}