/* ========================================
   TourDaddy - Main Stylesheet
   ======================================== */

/* ----------------------------------------
   CSS Variables
   ---------------------------------------- */
:root {
    /* Brand Colors */
    --td-primary: #003939;
    --td-primary-dark: #002626;
    --td-primary-light: #005c5c;
    --td-secondary: #37d4d9;
    --td-secondary-dark: #2fb9bd;

    /* Neutrals */
    --td-dark: #0f172a;
    --td-dark-soft: #1e293b;
    --td-gray-900: #334155;
    --td-gray-700: #475569;
    --td-gray-500: #64748b;
    --td-gray-400: #94a3b8;
    --td-gray-300: #cbd5e1;
    --td-gray-200: #e2e8f0;
    --td-gray-100: #f1f5f9;
    --td-white: #ffffff;

    /* Status Colors */
    --td-success: #10b981;
    --td-error: #ef4444;
    --td-warning: #f59e0b;
    --td-info: #3b82f6;

    /* Typography */
    --font-primary: "Jost", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: "Jost", Georgia, serif;

    /* Spacing */
    --container-max: 1200px;
    --header-height: 72px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:
        0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg:
        0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
}

/* ----------------------------------------
   Reset & Base Styles
   ---------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--td-gray-700);
    background-color: var(--td-gray-100);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

main {
    flex: 1;
    overflow-x: hidden;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ----------------------------------------
   Header Styles
   ---------------------------------------- */
.logo-image {
    height: 40px; /* adjust as needed */
    width: auto;
    display: block;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--td-gray-200);
    height: var(--header-height);
}

.header-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.logo-text {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.logo-tour {
    color: var(--td-dark);
}

.logo-daddy {
    color: var(--td-primary);
}

/* Header Navigation */
.header-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* User Menu */
.user-menu {
    position: relative;
}

.menu-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 6px 6px 14px;
    background: var(--td-white);
    border: 1px solid var(--td-gray-300);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.menu-trigger:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--td-gray-400);
}

.menu-trigger i {
    font-size: 14px;
    color: var(--td-gray-700);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
    color: var(--td-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

/* Menu Dropdown */
.menu-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 280px;
    background: var(--td-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--td-gray-200);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-base);
    overflow: hidden;
}

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

.menu-user-info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: var(--td-gray-100);
}

.menu-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
    color: var(--td-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
}

.menu-avatar.admin-menu-avatar {
    background: linear-gradient(
        135deg,
        var(--td-secondary) 0%,
        var(--td-secondary-dark) 100%
    );
}

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

.menu-user-name {
    font-weight: 600;
    color: var(--td-dark);
    font-size: 15px;
}

.menu-user-email {
    font-size: 13px;
    color: var(--td-gray-500);
}

.menu-divider {
    height: 1px;
    background: var(--td-gray-200);
    margin: 8px 0;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: var(--td-gray-700);
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.menu-item:hover {
    background: var(--td-gray-100);
    color: var(--td-primary);
}

.menu-item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.menu-item-admin {
    color: var(--td-primary);
}

.menu-item-admin:hover {
    background: rgba(15, 118, 110, 0.08);
}

.menu-item-logout {
    color: var(--td-error);
}

.menu-item-logout:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--td-error);
}

/* ----------------------------------------
   Auth Modal Styles
   ---------------------------------------- */
.auth-modal .modal-dialog {
    max-width: 800px;
}

.auth-modal-content {
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.auth-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    opacity: 1;
    box-shadow: var(--shadow-md);
}

.auth-image-side {
    height: 100%;
    min-height: 500px;
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 40px;
}

.auth-image-side.auth-image-register {
    background: linear-gradient(
        135deg,
        var(--td-secondary) 0%,
        var(--td-secondary-dark) 100%
    );
}

.auth-image-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
}

.auth-image-overlay {
    position: relative;
    z-index: 2;
    color: var(--td-white);
}

.auth-image-overlay h3 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.auth-image-overlay p {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.5;
}

.auth-modal-body {
    padding: 48px 40px;
}

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

.auth-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
    color: var(--td-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 20px;
}

.auth-modal-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--td-dark);
    margin-bottom: 8px;
}

.auth-subtitle {
    color: var(--td-gray-500);
    font-size: 14px;
}

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

.auth-row {
    display: flex;
    gap: 16px;
}

.auth-row .auth-input-group {
    flex: 1;
}

.auth-input-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--td-gray-700);
    margin-bottom: 8px;
}

.input-wrapper {
    position: relative;
}

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

.input-wrapper input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 1px solid var(--td-gray-300);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--td-dark);
    transition: all var(--transition-fast);
}

.input-wrapper input:focus {
    outline: none;
    border-color: var(--td-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.input-wrapper input::placeholder {
    color: var(--td-gray-400);
}

.auth-submit-btn {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
    color: var(--td-white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: 8px;
}

.auth-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.3);
}

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

.auth-divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
    color: var(--td-gray-400);
    font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--td-gray-200);
}

.auth-divider span {
    padding: 0 16px;
}

.auth-social-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 24px;
    background: var(--td-white);
    border: 1px solid var(--td-gray-300);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--td-gray-700);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.auth-social-btn:hover {
    background: var(--td-gray-100);
    border-color: var(--td-gray-400);
}

.auth-link {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--td-gray-500);
}

.auth-link a {
    color: var(--td-primary);
    font-weight: 600;
}

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

.auth-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    color: var(--td-error);
    font-size: 14px;
    margin-bottom: 16px;
}

.auth-error i {
    font-size: 18px;
}

/* ----------------------------------------
   Footer Styles
   ---------------------------------------- */
.footer-legal {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    justify-content: center;
}

.footer-legal a {
    color: var(--td-white);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color var(--transition-fast);
}

.footer-legal a:hover {
    color: var(--td-secondary);
}

.footer-legal .separator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .footer-legal {
        flex-direction: column;
        gap: 0.5rem;
    }

    .footer-legal .separator {
        display: none;
    }
}

.site-footer {
    background: var(--td-dark);
    color: var(--td-gray-300);
    padding: 48px 0 32px;
    margin-top: auto;
}

.footer-content {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.footer-brand {
    margin-bottom: 32px;
}

.footer-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.footer-logo .logo-tour {
    color: var(--td-white);
}

.footer-logo .logo-daddy {
    color: var(--td-primary-light);
}

.footer-tagline {
    font-size: 14px;
    color: var(--td-gray-400);
}

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

.footer-links a {
    font-size: 14px;
    color: var(--td-gray-400);
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--td-white);
}

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: var(--td-gray-500);
}

/* ----------------------------------------
   Coming Soon Page
   ---------------------------------------- */
.coming-soon-page {
    min-height: calc(100vh - var(--header-height));
    padding-top: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        var(--td-gray-100) 0%,
        var(--td-white) 100%
    );
}

.coming-soon-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: linear-gradient(
        135deg,
        rgba(15, 118, 110, 0.3) 0%,
        rgba(20, 184, 166, 0.2) 100%
    );
    top: -200px;
    right: -100px;
    animation: float 20s ease-in-out infinite;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: linear-gradient(
        135deg,
        rgba(245, 158, 11, 0.2) 0%,
        rgba(217, 119, 6, 0.15) 100%
    );
    bottom: -150px;
    left: -100px;
    animation: float 25s ease-in-out infinite reverse;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: linear-gradient(
        135deg,
        rgba(15, 118, 110, 0.2) 0%,
        rgba(20, 184, 166, 0.1) 100%
    );
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 15s ease-in-out infinite;
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-30px) rotate(5deg);
    }
}

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

.coming-soon-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 40px 24px;
    max-width: 800px;
}

.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(15, 118, 110, 0.1);
    border: 1px solid rgba(15, 118, 110, 0.2);
    border-radius: var(--radius-full);
    color: var(--td-primary);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 32px;
}

.coming-soon-badge i {
    font-size: 16px;
}

.coming-soon-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    line-height: 1.1;
}

.title-tour {
    color: var(--td-dark);
}

.title-daddy {
    color: var(--td-primary);
}

.coming-soon-subtitle {
    font-size: 1.25rem;
    color: var(--td-gray-500);
    max-width: 500px;
    margin: 0 auto 48px;
    line-height: 1.6;
}

.coming-soon-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 48px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--td-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

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

.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
    color: var(--td-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.feature-item span {
    font-weight: 600;
    color: var(--td-dark);
    font-size: 15px;
}

.coming-soon-cta {
    margin-top: 32px;
}

.coming-soon-cta p {
    font-size: 14px;
    color: var(--td-gray-500);
    margin-bottom: 16px;
}

.btn-primary-td {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
    color: var(--td-white);
    border: none;
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-primary-td:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(15, 118, 110, 0.3);
    color: var(--td-white);
}

/* ----------------------------------------
   Dashboard Styles
   ---------------------------------------- */
.dashboard-page,
.admin-dashboard-page {
    padding-top: var(--header-height);
    min-height: 100vh;
    background: var(--td-gray-100);
}

.dashboard-header,
.admin-header {
    position: relative;
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
    padding: 48px 0 80px;
    overflow: hidden;
}

.header-bg-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

.shape-1 {
    width: 400px;
    height: 400px;
    top: -200px;
    right: -100px;
}

.shape-2 {
    width: 300px;
    height: 300px;
    bottom: -150px;
    left: -50px;
}

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

.header-info {
    color: var(--td-white);
}

.user-badge,
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}

.header-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.header-subtitle {
    font-size: 15px;
    opacity: 0.85;
}

.header-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 3px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--td-white);
}

.header-avatar.admin-avatar i {
    font-size: 2rem;
}

/* Dashboard Navigation */
.dashboard-nav,
.admin-nav {
    display: flex;
    gap: 8px;
    margin-top: 32px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.dashboard-nav .nav-item,
.admin-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.dashboard-nav .nav-item:hover,
.admin-nav .nav-item:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--td-white);
}

.dashboard-nav .nav-item.active,
.admin-nav .nav-item.active {
    background: var(--td-white);
    color: var(--td-primary);
}

.nav-item-back {
    margin-left: auto;
}

/* Dashboard Content */
.dashboard-content,
.admin-content {
    padding: 32px 0 64px;
    position: relative;
    z-index: 2;
}

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

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--td-success);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--td-error);
}

.alert button {
    margin-left: auto;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.alert button:hover {
    opacity: 1;
}

/* Welcome Card */
.welcome-card {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px;
    background: var(--td-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: 24px;
}

.welcome-icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
    color: var(--td-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
}

.welcome-content h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--td-dark);
    margin-bottom: 8px;
}

.welcome-content p {
    color: var(--td-gray-500);
    font-size: 15px;
}

/* Coming Soon Notice */
.coming-soon-notice {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius-lg);
}

.notice-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--td-secondary);
    color: var(--td-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.notice-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--td-secondary-dark);
    margin-bottom: 4px;
}

.notice-content p {
    color: var(--td-gray-600);
    font-size: 14px;
}

/* Section Header */
.section-header {
    margin-bottom: 24px;
}

.section-header + .section-header,
.actions-grid + .section-header,
.quick-add-grid + .section-header,
.status-grid + .section-header,
.listings-grid + .section-header,
.content-toolbar + .section-header {
    margin-top: 48px;
}

.manifest-form {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    gap: 1rem;
}

.toolbar-left {
    display: flex;
    gap: 0.5rem;
    /* space between date inputs */
}

.section-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--td-dark);
    margin-bottom: 4px;
}

.section-subtitle {
    color: var(--td-gray-500);
    font-size: 14px;
}

/* Actions Grid */
.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.action-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--td-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

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

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

.action-icon-tours {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.action-icon-private {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.action-icon-yachts {
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
}

.action-icon-rentals {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.action-icon-restaurants {
    background: linear-gradient(
        135deg,
        var(--td-secondary) 0%,
        var(--td-secondary-dark) 100%
    );
}

.action-content {
    flex: 1;
    min-width: 0;
}

.action-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--td-dark);
    margin-bottom: 4px;
}

.action-description {
    font-size: 13px;
    color: var(--td-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-stats {
    text-align: center;
    padding: 0 16px;
}

.action-count {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--td-dark);
}

.action-label {
    font-size: 12px;
    color: var(--td-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.action-arrow {
    color: var(--td-gray-400);
    transition: all var(--transition-fast);
}

.action-card:hover .action-arrow {
    color: var(--td-primary);
    transform: translateX(4px);
}

/* Quick Add Grid */
.quick-add-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.quick-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    background: var(--td-white);
    border: 2px dashed var(--td-gray-300);
    border-radius: var(--radius-lg);
    color: var(--td-gray-600);
    font-size: 14px;
    font-weight: 600;
    transition: all var(--transition-base);
}

.quick-add-btn:hover {
    border-style: solid;
    transform: translateY(-2px);
}

.quick-add-tours:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.quick-add-private:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}

.quick-add-yachts:hover {
    border-color: var(--td-primary);
    color: var(--td-primary);
    background: rgba(15, 118, 110, 0.05);
}

.quick-add-rentals:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}

.quick-add-restaurants:hover {
    border-color: var(--td-secondary);
    color: var(--td-secondary);
    background: rgba(245, 158, 11, 0.05);
}

/* Status Grid */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.status-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--td-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-healthy {
    background: var(--td-success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

.status-warning {
    background: var(--td-warning);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
}

.status-error {
    background: var(--td-error);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}

.status-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--td-dark);
    margin-bottom: 2px;
}

.status-content p {
    font-size: 13px;
    color: var(--td-gray-500);
}

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

    .logo-text {
        font-size: 1.5rem;
    }

    .auth-modal .modal-dialog {
        margin: 16px;
    }

    .auth-modal-body {
        padding: 32px 24px;
    }

    .coming-soon-features {
        flex-direction: column;
        align-items: center;
    }

    .feature-item {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    .header-content {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }

    .header-avatar {
        order: -1;
    }

    .dashboard-nav,
    .admin-nav {
        justify-content: center;
    }

    .nav-item-back {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .welcome-card {
        flex-direction: column;
        text-align: center;
    }

    .coming-soon-notice {
        flex-direction: column;
        text-align: center;
    }

    .action-card {
        flex-wrap: wrap;
    }

    .action-stats {
        display: none;
    }

    .actions-grid,
    .quick-add-grid,
    .status-grid {
        grid-template-columns: 1fr;
    }
}

/* Content Header with Action */
.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.content-header .section-title {
    margin-bottom: 4px;
}

.content-header .section-subtitle {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .content-header {
        flex-direction: column;
        align-items: stretch;
    }

    .content-header .btn-primary-td {
        justify-content: center;
    }

    .coming-soon-title {
        font-size: 2.5rem;
    }

    .coming-soon-subtitle {
        font-size: 1rem;
    }

    .header-title {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.25rem;
    }

    .auth-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ----------------------------------------
   Admin Toolbar
   ---------------------------------------- */
.content-toolbar {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    background: var(--td-white);
    padding: 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.toolbar-search {
    display: flex;
    gap: 12px;
    flex: 1;
    flex-wrap: wrap;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.search-input-wrapper i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--td-gray-400);
}

.search-input-wrapper input {
    width: 100%;
    padding: 12px 12px 12px 42px;
    border: 1px solid var(--td-gray-300);
    border-radius: var(--radius-md);
    font-size: 14px;
}

.search-input-wrapper input:focus {
    outline: none;
    border-color: var(--td-primary);
}

.toolbar-select {
    padding: 12px 16px;
    border: 1px solid var(--td-gray-300);
    border-radius: var(--radius-md);
    font-size: 14px;
    background: var(--td-white);
    min-width: 150px;
}

.btn-search {
    padding: 12px 20px;
    background: var(--td-gray-100);
    border: 1px solid var(--td-gray-300);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-search:hover {
    background: var(--td-gray-200);
}

/* ----------------------------------------
   Listings Grid
   ---------------------------------------- */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.listing-card {
    background: var(--td-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}

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

.listing-image {
    position: relative;
    height: 180px;
    background: var(--td-gray-100);
    overflow: hidden;
}

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

.listing-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        var(--td-gray-100) 0%,
        var(--td-gray-200) 100%
    );
    color: var(--td-gray-400);
    font-size: 48px;
}

.listing-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.listing-card:hover .listing-actions {
    opacity: 1;
}

.action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--td-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--td-gray-600);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

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

.action-btn-danger:hover {
    background: var(--td-error);
}

.listing-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.listing-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--td-dark);
    margin-bottom: 8px;
}

.listing-location,
.listing-tags,
.listing-price {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--td-gray-500);
    margin-bottom: 4px;
}

.listing-location i,
.listing-tags i,
.listing-price i {
    width: 16px;
    color: var(--td-primary);
}

.listing-description {
    font-size: 13px;
    color: var(--td-gray-500);
    margin-bottom: 12px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.listing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.listing-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--td-gray-500);
}

.listing-meta .meta-item i {
    color: var(--td-primary);
    font-size: 12px;
}

.listing-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--td-gray-100);
    margin-top: auto;
}

.listing-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--td-primary);
    margin: 0;
}

.listing-price small {
    font-size: 12px;
    font-weight: 400;
    color: var(--td-gray-400);
    margin-left: 4px;
}

.listing-code {
    font-size: 11px;
    color: var(--td-gray-400);
    background: var(--td-gray-100);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-family: monospace;
}

/* ----------------------------------------
   Empty State
   ---------------------------------------- */
.empty-state {
    text-align: center;
    padding: 64px 24px;
    background: var(--td-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--td-gray-100);
    color: var(--td-gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 24px;
}

.empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--td-dark);
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--td-gray-500);
    margin-bottom: 24px;
}

/* ----------------------------------------
   Pagination
   ---------------------------------------- */
.pagination-wrapper {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.pagination-wrapper nav {
    display: flex;
    gap: 4px;
}

.pagination-wrapper .page-link {
    padding: 10px 16px;
    border-radius: var(--radius-md);
    background: var(--td-white);
    border: 1px solid var(--td-gray-300);
    color: var(--td-gray-700);
    font-size: 14px;
    transition: all var(--transition-fast);
}

.pagination-wrapper .page-link:hover {
    background: var(--td-gray-100);
}

.pagination-wrapper .page-item.active .page-link {
    background: var(--td-primary);
    border-color: var(--td-primary);
    color: var(--td-white);
}

/* ----------------------------------------
   Admin Forms
   ---------------------------------------- */
.admin-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-section {
    background: var(--td-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.form-section-header {
    padding: 20px 24px;
    background: var(--td-gray-50);
    border-bottom: 1px solid var(--td-gray-200);
}

.form-section-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--td-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.form-section-header h3 i {
    color: var(--td-primary);
}

.form-section-content {
    padding: 24px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-row-thirds {
    grid-template-columns: repeat(3, 1fr);
}

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

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--td-gray-700);
    margin-bottom: 8px;
}

.form-group label .required {
    color: var(--td-error);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--td-gray-300);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--td-dark);
    transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--td-primary);
    box-shadow: 0 0 0 3px rgba(0, 57, 57, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-error {
    display: block;
    color: var(--td-error);
    font-size: 13px;
    margin-top: 4px;
}

.form-hint {
    display: block;
    color: var(--td-gray-500);
    font-size: 12px;
    margin-top: 4px;
}

.commission-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
}

.commission-item:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

.commission-source-select {
    width: 100%;
}

.commission-source-select option:disabled {
    color: #ccc !important;
    font-style: italic;
}

/* Dynamic Fields */
.dynamic-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.dynamic-field-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.dynamic-field-row input,
.dynamic-field-row select {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--td-gray-300);
    border-radius: var(--radius-md);
    font-size: 14px;
}

.dynamic-field-row select {
    flex: 0 0 140px;
}

.btn-remove-field {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: 1px solid var(--td-gray-300);
    background: var(--td-white);
    color: var(--td-gray-500);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.btn-remove-field:hover {
    background: var(--td-error);
    border-color: var(--td-error);
    color: var(--td-white);
}

.btn-add-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--td-gray-100);
    border: 1px dashed var(--td-gray-300);
    border-radius: var(--radius-md);
    color: var(--td-gray-600);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-add-field:hover {
    background: var(--td-primary);
    border-color: var(--td-primary);
    border-style: solid;
    color: var(--td-white);
}

/* File Upload */
.file-upload-area {
    position: relative;
    border: 2px dashed var(--td-gray-300);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.file-upload-area:hover {
    border-color: var(--td-primary);
    background: rgba(0, 57, 57, 0.02);
}

.file-upload-area .file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-upload-content i {
    font-size: 48px;
    color: var(--td-gray-400);
    margin-bottom: 16px;
}

.file-upload-content p {
    font-size: 15px;
    color: var(--td-gray-600);
    margin-bottom: 8px;
}

.file-upload-content span {
    font-size: 13px;
    color: var(--td-gray-400);
}

/* Image Preview & Grid */
.image-preview-grid,
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.preview-image,
.image-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--td-gray-100);
}

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

.image-item-actions {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.image-item:hover .image-item-actions {
    opacity: 1;
}

.btn-delete-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--td-error);
    border: none;
    color: var(--td-white);
    cursor: pointer;
}

.existing-images {
    margin-bottom: 24px;
}

.existing-images > label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--td-gray-700);
    margin-bottom: 12px;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding: 24px;
    background: var(--td-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    padding: 14px 28px;
    background: var(--td-gray-100);
    border: 1px solid var(--td-gray-300);
    border-radius: var(--radius-md);
    color: var(--td-gray-700);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn-secondary:hover {
    background: var(--td-gray-200);
}

/* ----------------------------------------
   Detail View
   ---------------------------------------- */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
}

.detail-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.detail-card {
    background: var(--td-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.detail-card-header {
    padding: 16px 20px;
    background: var(--td-gray-50);
    border-bottom: 1px solid var(--td-gray-200);
}

.detail-card-header h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--td-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.detail-card-header h3 i {
    color: var(--td-primary);
}

.detail-card-content {
    padding: 20px;
}

.detail-description {
    line-height: 1.7;
    color: var(--td-gray-700);
}

.commissions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.commission-display-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.95rem;
}

.commission-display-item i {
    color: #667eea;
    font-size: 1.1rem;
}

.commission-display-item strong {
    color: #2c3e50;
}

.commission-display-item span {
    color: #555;
}

.comission-status-badge {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.comission-status-badge-active {
    background: #d4edda;
    color: #155724;
}

.comission-status-badge-inactive {
    background: #f8d7da;
    color: #721c24;
}

.detail-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.gallery-item {
    aspect-ratio: 4/3;
    border-radius: var(--radius-md);
    overflow: hidden;
}

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

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

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-item > i {
    width: 20px;
    color: var(--td-primary);
    margin-top: 2px;
}

.info-label {
    display: block;
    font-size: 12px;
    color: var(--td-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.info-value {
    display: block;
    font-size: 14px;
    color: var(--td-dark);
}

.links-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--td-gray-50);
    border-radius: var(--radius-md);
    color: var(--td-gray-700);
    font-size: 14px;
    transition: all var(--transition-fast);
}

.detail-link:hover {
    background: var(--td-primary);
    color: var(--td-white);
}

.social-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-link-item {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--td-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--td-gray-600);
    font-size: 18px;
    transition: all var(--transition-fast);
}

.social-link-item:hover {
    background: var(--td-primary);
    color: var(--td-white);
}

.menus-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--td-gray-50);
    border-radius: var(--radius-md);
}

.menu-name {
    flex: 1;
    font-weight: 500;
    color: var(--td-dark);
}

.menu-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--td-primary);
    color: var(--td-white);
    border-radius: var(--radius-sm);
    font-size: 13px;
    transition: all var(--transition-fast);
}

.menu-link:hover {
    background: var(--td-primary-dark);
    color: var(--td-white);
}

.seo-info p {
    font-size: 13px;
    color: var(--td-gray-600);
    margin-bottom: 8px;
}

.seo-info p:last-child {
    margin-bottom: 0;
}

.seo-info strong {
    color: var(--td-gray-700);
}

.detail-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.btn-danger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--td-white);
    border: 1px solid var(--td-error);
    border-radius: var(--radius-md);
    color: var(--td-error);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

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

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

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

@media (max-width: 768px) {
    .content-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-search {
        flex-direction: column;
    }

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

    .dynamic-field-row {
        flex-wrap: wrap;
    }

    .dynamic-field-row select {
        flex: 1 1 100%;
    }
}

/* ----------------------------------------
   Custom Text Editor
   ---------------------------------------- */
.custom-editor-container {
    border: 1px solid var(--td-gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--td-white);
}

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    background: var(--td-gray-50);
    border-bottom: 1px solid var(--td-gray-200);
    flex-wrap: wrap;
}

.toolbar-group {
    display: flex;
    gap: 2px;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--td-gray-300);
    margin: 0 8px;
}

.toolbar-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--td-gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.toolbar-btn:hover {
    background: var(--td-gray-200);
    color: var(--td-dark);
}

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

.editor-content {
    min-height: 200px;
    padding: 16px;
    outline: none;
    font-size: 15px;
    line-height: 1.6;
    color: var(--td-dark);
}

.editor-content:focus {
    background: rgba(0, 57, 57, 0.02);
}

.editor-content-sm {
    min-height: 100px;
}

.editor-content p {
    margin-bottom: 12px;
}

.editor-content ul,
.editor-content ol {
    margin-bottom: 12px;
    padding-left: 24px;
}

.editor-content a {
    color: var(--td-primary);
    text-decoration: underline;
}

/* Link Modal */
.link-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
}

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

.link-modal {
    background: var(--td-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 440px;
    margin: 20px;
    transform: translateY(-20px);
    transition: transform var(--transition-fast);
}

.link-modal-overlay.active .link-modal {
    transform: translateY(0);
}

.link-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--td-gray-200);
}

.link-modal-header h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--td-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.link-modal-header h4 i {
    color: var(--td-primary);
}

.link-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--td-gray-100);
    border-radius: 50%;
    font-size: 20px;
    color: var(--td-gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.link-modal-close:hover {
    background: var(--td-error);
    color: var(--td-white);
}

.link-modal-body {
    padding: 24px;
}

.link-modal-body .form-group {
    margin-bottom: 16px;
}

.link-modal-body .form-group:last-child {
    margin-bottom: 0;
}

.link-modal-body input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--td-gray-300);
    border-radius: var(--radius-md);
    font-size: 15px;
}

.link-modal-body input:focus {
    outline: none;
    border-color: var(--td-primary);
    box-shadow: 0 0 0 3px rgba(0, 57, 57, 0.1);
}

.link-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--td-gray-200);
    background: var(--td-gray-50);
}

/* ----------------------------------------
   Menu Fields
   ---------------------------------------- */
.menu-field-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    background: var(--td-gray-50);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
}

.menu-field-inputs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.menu-field-inputs input[type="text"],
.menu-field-inputs input[type="url"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--td-gray-300);
    border-radius: var(--radius-md);
    font-size: 14px;
}

.menu-field-inputs input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--td-gray-300);
    border-radius: var(--radius-md);
    background: var(--td-white);
    font-size: 14px;
}

.menu-type-toggle {
    display: flex;
    gap: 16px;
}

.menu-type-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.menu-type-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--td-primary);
}

.menu-type-option span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--td-gray-600);
}

.menu-type-option input:checked + span {
    color: var(--td-primary);
    font-weight: 500;
}

.existing-menus {
    margin-bottom: 24px;
}

.existing-menus > label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--td-gray-700);
    margin-bottom: 12px;
}

.menus-list-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-item-edit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--td-white);
    border: 1px solid var(--td-gray-200);
    border-radius: var(--radius-md);
}

.menu-item-edit .menu-name {
    flex: 1;
    font-weight: 500;
    color: var(--td-dark);
}

.menu-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--td-error);
    color: var(--td-white);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
}

.menu-badge-link {
    background: var(--td-primary);
}

.btn-delete-menu {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--td-gray-100);
    border-radius: var(--radius-sm);
    color: var(--td-gray-500);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-delete-menu:hover {
    background: var(--td-error);
    color: var(--td-white);
}

/* ----------------------------------------
   Image Crop Modal
   ---------------------------------------- */
.crop-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
}

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

.crop-modal {
    background: var(--td-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    margin: 20px;
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    transition: transform var(--transition-fast);
}

.crop-modal-overlay.active .crop-modal {
    transform: scale(1);
}

.crop-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--td-gray-200);
}

.crop-modal-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--td-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.crop-modal-header h4 i {
    color: var(--td-primary);
}

.crop-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--td-gray-100);
    border-radius: 50%;
    font-size: 20px;
    color: var(--td-gray-500);
    cursor: pointer;
}

.crop-modal-close:hover {
    background: var(--td-error);
    color: var(--td-white);
}

.crop-modal-body {
    padding: 20px;
    overflow: auto;
    flex: 1;
}

.crop-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
    background: #1a1a1a;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.crop-container img {
    display: block;
    max-width: 100%;
    max-height: 60vh;
}

.crop-box {
    position: absolute;
    border: 2px solid var(--td-white);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    cursor: move;
}

.crop-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--td-white);
    border: 2px solid var(--td-primary);
    border-radius: 2px;
}

.crop-handle-nw {
    top: -6px;
    left: -6px;
    cursor: nw-resize;
}
.crop-handle-ne {
    top: -6px;
    right: -6px;
    cursor: ne-resize;
}
.crop-handle-sw {
    bottom: -6px;
    left: -6px;
    cursor: sw-resize;
}
.crop-handle-se {
    bottom: -6px;
    right: -6px;
    cursor: se-resize;
}

.crop-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 20px;
    border-top: 1px solid var(--td-gray-200);
    background: var(--td-gray-50);
}

/* ----------------------------------------
   Image Preview with Crop Button
   ---------------------------------------- */
.preview-image {
    position: relative;
}

.preview-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.preview-image:hover .preview-actions {
    opacity: 1;
}

.btn-crop-image,
.btn-remove-preview {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all var(--transition-fast);
}

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

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

.btn-remove-preview {
    background: var(--td-error);
    color: var(--td-white);
}

.btn-remove-preview:hover {
    background: #c0392b;
}

/* ----------------------------------------
   Drag & Drop Reorder
   ---------------------------------------- */
.drag-hint {
    font-weight: 400;
    color: var(--td-gray-400);
    font-size: 12px;
}

.image-item {
    cursor: grab;
    position: relative;
}

.image-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.image-item .drag-handle {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: var(--td-white);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}

.image-item:hover .drag-handle {
    opacity: 1;
}

.sortable .image-item {
    transition: transform 0.15s ease;
}

/* ----------------------------------------
   Pricing & Contact Field Rows
   ---------------------------------------- */
.pricing-field-row,
.contact-field-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.pricing-field-row input,
.contact-field-row input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--td-gray-300);
    border-radius: var(--radius-md);
    font-size: 14px;
}

.pricing-field-row input:focus,
.contact-field-row input:focus {
    outline: none;
    border-color: var(--td-primary);
    box-shadow: 0 0 0 3px rgba(0, 57, 57, 0.1);
}

.pricing-field-row input[type="number"] {
    max-width: 120px;
}

.contact-field-row input[type="email"] {
    flex: 1.5;
}

/* Checkbox styling */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--td-dark);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--td-primary);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.checkbox-card {
    display: block;
    cursor: pointer;
}

.checkbox-card input {
    display: none;
}

.checkbox-card-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--td-gray-50);
    border: 2px solid var(--td-gray-200);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--td-gray-600);
    transition: all var(--transition-fast);
}

.checkbox-card-content i {
    opacity: 0;
    color: var(--td-primary);
    transition: opacity var(--transition-fast);
}

.checkbox-card input:checked + .checkbox-card-content {
    background: rgba(0, 57, 57, 0.05);
    border-color: var(--td-primary);
    color: var(--td-dark);
}

.checkbox-card input:checked + .checkbox-card-content i {
    opacity: 1;
}

.checkbox-card:hover .checkbox-card-content {
    border-color: var(--td-primary);
}

/* Form label standalone */
.form-label-standalone {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--td-gray-700);
    margin-bottom: 12px;
}

/* Pricing table (show view) */
.pricing-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--td-gray-50);
    border-radius: var(--radius-md);
}

.pricing-label {
    font-weight: 500;
    color: var(--td-dark);
}

.pricing-duration {
    font-weight: 400;
    color: var(--td-gray-500);
    margin-left: 8px;
}

.pricing-amount {
    font-weight: 600;
    color: var(--td-primary);
    font-size: 1.1rem;
}

/* Contact card (show view) */
.contact-card {
    padding: 16px;
    background: var(--td-gray-50);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
}

.contact-card:last-child {
    margin-bottom: 0;
}

.contact-name {
    font-weight: 600;
    color: var(--td-dark);
    margin-bottom: 8px;
}

.contact-detail {
    font-size: 14px;
    color: var(--td-gray-600);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-detail i {
    color: var(--td-primary);
    width: 16px;
}

/* Company name display */
.company-name-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--td-primary);
    color: white;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 16px;
}

.company-name-display i {
    opacity: 0.8;
}

/* Tags list */
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    display: inline-block;
    padding: 6px 12px;
    background: var(--td-gray-100);
    border-radius: 20px;
    font-size: 13px;
    color: var(--td-gray-700);
}

/* Company name in listing */
.listing-company {
    font-size: 13px;
    color: var(--td-gray-500);
    margin-bottom: 8px;
}

/* Form row thirds */
.form-row-thirds {
    grid-template-columns: repeat(3, 1fr);
}

/* Feature category heading */
.feature-category {
    font-size: 14px;
    font-weight: 600;
    color: var(--td-gray-600);
    margin: 16px 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feature-category:first-child {
    margin-top: 0;
}

/* Listing meta (multiple icons in a row) */
.listing-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--td-gray-500);
    margin-bottom: 8px;
}

.listing-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.listing-meta i {
    color: var(--td-primary);
}

/* ----------------------------------------
   Stats Grid
   ---------------------------------------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

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

.stat-icon-total {
    background: rgba(0, 57, 57, 0.1);
    color: var(--td-primary);
}

.stat-icon-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.stat-icon-approved {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.stat-icon-rejected {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.stat-icon-completed {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

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

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

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

/* ----------------------------------------
   Data Table
   ---------------------------------------- */
/* Referral Source Cell Styling */
.referral-source-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.referral-source-cell .fa-handshake {
    color: #667eea;
    font-size: 1.2rem;
}

.referral-source-cell strong {
    color: #2c3e50;
    font-weight: 600;
}

.data-table-container {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

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

.data-table th {
    padding: 16px 20px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--td-gray-500);
    background: var(--td-gray-50);
    border-bottom: 1px solid var(--td-gray-200);
}

.data-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--td-gray-100);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background: var(--td-gray-50);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.th-checkbox,
.td-checkbox {
    width: 48px;
    text-align: center;
}

/* User cell */
.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--td-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

.user-avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 600;
    color: var(--td-dark);
}

.user-fullname,
.user-email {
    font-size: 13px;
    color: var(--td-gray-500);
}

/* Contact cell */
.contact-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-email,
.contact-phone {
    font-size: 14px;
    color: var(--td-gray-600);
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-email i,
.contact-phone i {
    color: var(--td-gray-400);
    font-size: 12px;
    width: 14px;
}

/* Date cell */
.date-cell {
    display: block;
    font-weight: 500;
    color: var(--td-dark);
}

.time-cell {
    display: block;
    font-size: 13px;
    color: var(--td-gray-500);
}

/* Amount cell */
.amount-cell {
    font-weight: 600;
    color: var(--td-primary);
    font-size: 16px;
}

/* Booking reference */
.booking-reference {
    font-family: monospace;
    font-weight: 600;
    color: var(--td-primary);
    background: rgba(0, 57, 57, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
}

/* Booking item */
.booking-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-type {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--td-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--td-primary);
}

.booking-name {
    font-weight: 500;
    color: var(--td-dark);
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.status-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.status-approved,
.status-confirmed {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.status-rejected,
.status-cancelled {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.status-completed {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
}

/* Auth badges */
.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.auth-google {
    background: rgba(234, 67, 53, 0.1);
    color: #ea4335;
}

.auth-email {
    background: rgba(0, 57, 57, 0.1);
    color: var(--td-primary);
}

/* Action buttons */
.action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-action {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-approve {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.btn-approve:hover {
    background: #10b981;
    color: white;
}

.btn-reject {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.btn-reject:hover {
    background: #ef4444;
    color: white;
}

.btn-view {
    background: rgba(0, 57, 57, 0.1);
    color: var(--td-primary);
}

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

.btn-delete {
    background: rgba(239, 68, 68, 0.05);
    color: var(--td-gray-400);
}

.btn-delete:hover {
    background: #ef4444;
    color: white;
}

.btn-more {
    background: var(--td-gray-100);
    color: var(--td-gray-500);
}

.btn-more:hover {
    background: var(--td-gray-200);
}

/* Dropdown */
.dropdown-action {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    z-index: 100;
    display: none;
    overflow: hidden;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    font-size: 14px;
    color: var(--td-gray-700);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--td-gray-50);
}

.dropdown-item-danger {
    color: #ef4444;
}

.dropdown-item-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Table footer */
.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--td-gray-50);
    border-top: 1px solid var(--td-gray-200);
}

.bulk-actions {
    display: flex;
    gap: 12px;
}

.btn-bulk {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-bulk:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-bulk-approve {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.btn-bulk-approve:not(:disabled):hover {
    background: #10b981;
    color: white;
}

/* Status display (detail view) */
.status-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-radius: var(--radius-md);
    font-size: 18px;
    font-weight: 600;
}

.status-display i {
    font-size: 24px;
}

.status-display-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.status-display-approved,
.status-display-confirmed {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.status-display-rejected,
.status-display-cancelled {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.status-display-completed {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
}

.approval-info {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--td-gray-200);
    font-size: 14px;
    color: var(--td-gray-600);
}

.approval-info p {
    margin-bottom: 4px;
}

/* Customer profile */
.customer-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.customer-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--td-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
}

.customer-info h4 {
    margin: 0 0 4px;
    font-size: 18px;
}

.customer-info p {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--td-gray-600);
    display: flex;
    align-items: center;
    gap: 8px;
}

.customer-info i {
    color: var(--td-gray-400);
    width: 16px;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--td-primary);
    font-size: 14px;
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: underline;
}

/* Payment summary */
.payment-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pricing-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pricing-row-table {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    color: var(--td-gray-600);
}

.pricing-row-table.pricing-total {
    border-top: 2px solid var(--td-gray-300);
    padding-top: 12px;
    margin-top: 4px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--td-dark);
}

.payment-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--td-gray-600);
}

.payment-discount span:last-child {
    color: #10b981;
}

.payment-total {
    padding-top: 12px;
    border-top: 2px solid var(--td-gray-200);
    font-size: 18px;
    font-weight: 600;
    color: var(--td-dark);
}

.payment-status {
    margin-top: 16px;
    text-align: center;
}

/* Info grid */
.info-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--td-gray-100);
}

.info-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.info-row .info-label {
    font-size: 14px;
    color: var(--td-gray-500);
}

.info-row .info-value {
    font-weight: 500;
    color: var(--td-dark);
    text-align: right;
}

/* Actions grid 2 columns */
.actions-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Action badge (for pending counts) */
.action-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

.action-badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.action-badge-info {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

/* Action icon colors */
.action-icon-users {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.action-icon-bookings {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
}

/* Extended toolbar */
.toolbar-search-extended {
    flex-wrap: wrap;
}

.toolbar-date {
    padding: 12px 16px;
    border: 1px solid var(--td-gray-300);
    border-radius: var(--radius-md);
    font-size: 14px;
    background: white;
}

@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .data-table-container {
        overflow-x: auto;
    }

    .data-table {
        min-width: 800px;
    }

    .table-footer {
        flex-direction: column;
        gap: 16px;
    }
}

/* ----------------------------------------
   Extras Styles
   ---------------------------------------- */
.extras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.extra-card {
    cursor: pointer;
}

.extra-card input[type="checkbox"] {
    display: none;
}

.extra-card-content {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--td-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-fast);
    position: relative;
}

.extra-card input:checked + .extra-card-content {
    border-color: var(--td-primary);
    background: rgba(0, 57, 57, 0.02);
}

.extra-card:hover .extra-card-content {
    border-color: var(--td-gray-300);
}

.extra-card input:checked + .extra-card-content:hover {
    border-color: var(--td-primary);
}

.extra-image {
    height: 120px;
    background: var(--td-gray-100);
    overflow: hidden;
}

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

.extra-image-placeholder {
    height: 120px;
    background: var(--td-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--td-gray-400);
}

.extra-info {
    padding: 12px;
}

.extra-name {
    font-weight: 600;
    color: var(--td-dark);
    display: block;
    margin-bottom: 4px;
}

.extra-price {
    font-size: 14px;
    color: var(--td-primary);
    font-weight: 500;
}

.extra-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--transition-fast);
    color: var(--td-primary);
    box-shadow: var(--shadow-sm);
}

.extra-card input:checked + .extra-card-content .extra-check {
    opacity: 1;
    transform: scale(1);
}

/* Extras Management Grid */
.extras-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.extra-manage-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.extra-manage-image {
    height: 160px;
    background: var(--td-gray-100);
}

.extra-manage-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.extra-manage-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--td-gray-300);
}

.extra-manage-content {
    padding: 16px;
    flex: 1;
}

.extra-manage-content h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--td-dark);
}

.extra-manage-price {
    font-size: 16px;
    font-weight: 600;
    color: var(--td-primary);
    margin: 0 0 8px;
}

.extra-manage-desc {
    font-size: 14px;
    color: var(--td-gray-500);
    margin: 0;
    line-height: 1.5;
}

.extra-manage-actions {
    padding: 12px 16px;
    background: var(--td-gray-50);
    border-top: 1px solid var(--td-gray-100);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Extras Display Grid (show view) */
.extras-display-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.extra-display-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--td-gray-50);
    border-radius: var(--radius-md);
}

.extra-display-image {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.extra-display-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.extra-display-info h4 {
    margin: 0 0 4px;
    font-size: 15px;
    color: var(--td-dark);
}

.extra-display-price {
    display: inline-block;
    font-weight: 600;
    color: var(--td-primary);
    font-size: 14px;
    margin-bottom: 4px;
}

.extra-display-info p {
    margin: 0;
    font-size: 13px;
    color: var(--td-gray-500);
    line-height: 1.4;
}

/* Single image preview */
.preview-image-single {
    margin-top: 12px;
    max-width: 200px;
}

.preview-image-single img {
    width: 100%;
    border-radius: var(--radius-md);
}

.current-image-preview {
    margin-bottom: 16px;
}

.current-image-preview img {
    max-width: 200px;
    border-radius: var(--radius-md);
}

.current-image-label {
    font-size: 13px;
    color: var(--td-gray-500);
    margin-top: 4px;
}

.file-upload-single {
    max-width: 300px;
}

.btn-link-sm {
    font-size: 13px;
    color: var(--td-primary);
    text-decoration: none;
}

.btn-link-sm:hover {
    text-decoration: underline;
}

.toolbar-actions {
    display: flex;
    gap: 12px;
}

/* ----------------------------------------
   Tours / Rezdy Styles
   ---------------------------------------- */
.categories-filter {
    background: white;
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.categories-header {
    margin-bottom: 16px;
}

.categories-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--td-gray-600);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.category-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--td-gray-100);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    color: var(--td-gray-600);
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
}

.category-chip:hover {
    background: var(--td-gray-200);
    color: var(--td-dark);
}

.category-chip.active {
    background: var(--td-primary);
    color: white;
}

.results-info {
    font-size: 14px;
    color: var(--td-gray-500);
    margin-bottom: 20px;
}

.results-info .search-term,
.results-info .filter-term {
    color: var(--td-primary);
    font-weight: 500;
}

.tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.tour-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.tour-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.tour-image {
    position: relative;
    height: 200px;
    background: var(--td-gray-100);
    overflow: hidden;
}

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

.tour-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--td-gray-300);
}

.tour-type-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.tour-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.tour-card:hover .tour-actions {
    opacity: 1;
}

.tour-content {
    padding: 20px;
}

.tour-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--td-dark);
    margin: 0 0 8px;
    line-height: 1.4;
}

.tour-description {
    font-size: 13px;
    color: var(--td-gray-500);
    margin: 0 0 12px;
    line-height: 1.5;
}

.tour-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.tour-duration,
.tour-location {
    font-size: 13px;
    color: var(--td-gray-500);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tour-duration i,
.tour-location i {
    color: var(--td-primary);
    font-size: 12px;
}

.tour-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--td-gray-100);
}

.tour-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--td-primary);
}

.tour-price small {
    font-size: 12px;
    font-weight: 400;
    color: var(--td-gray-400);
}

.tour-code {
    font-size: 11px;
    font-family: monospace;
    color: var(--td-gray-400);
    background: var(--td-gray-100);
    padding: 4px 8px;
    border-radius: 4px;
}

/* Coming Soon Button */
.btn-coming-soon {
    position: relative;
    opacity: 0.7;
    cursor: not-allowed;
}

.badge-coming-soon {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--td-secondary);
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.btn-clear-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--td-gray-200);
    border-radius: var(--radius-md);
    color: var(--td-gray-500);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn-clear-search:hover {
    background: var(--td-gray-300);
    color: var(--td-dark);
}

/* Price Display Large */
.price-display-large {
    font-size: 32px;
    font-weight: 700;
    color: var(--td-primary);
    margin-bottom: 16px;
}

.price-display-large small {
    font-size: 14px;
    font-weight: 400;
    color: var(--td-gray-400);
}

.price-options {
    border-top: 1px solid var(--td-gray-100);
    padding-top: 16px;
}

.price-option {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--td-gray-100);
}

.price-option:last-child {
    border-bottom: none;
}

.price-option-label {
    font-size: 14px;
    color: var(--td-gray-600);
}

.price-option-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--td-dark);
}

.monospace {
    font-family: "SF Mono", Monaco, Consolas, monospace;
}

/* Alert Info */
.alert-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
}

.alert-info i {
    color: #0284c7;
}

.alert-info span {
    flex: 1;
    color: #0369a1;
}

/* ----------------------------------------
   Public Tours Page Styles
   ---------------------------------------- */
.tours-page {
    min-height: 100vh;
    background: var(--td-gray-50);
}

.tours-hero {
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
    padding: 60px 0;
    padding-top: 100px;
    margin-top: 72px;
    position: relative;
    overflow: hidden;
}

.tours-hero .hero-bg-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.tours-hero .shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

.tours-hero .shape-1 {
    width: 400px;
    height: 400px;
    top: -200px;
    right: -100px;
}

.tours-hero .shape-2 {
    width: 300px;
    height: 300px;
    bottom: -150px;
    left: -50px;
}

.tours-hero .hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.tours-hero .hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 12px;
}

.tours-hero .hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    max-width: 600px;
    margin-inline: auto;
}

/* Filters */
.tours-filters {
    background: white;
    padding: 24px 0;
    box-shadow: var(--shadow-sm);
}

.filters-form {
    width: 100%;
}

.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.filter-group {
    flex: 1;
    min-width: 150px;
}

.filter-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--td-gray-500);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-group label i {
    margin-right: 4px;
}

.filter-group input,
.filter-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--td-gray-200);
    border-radius: var(--radius-md);
    font-size: 14px;
    background: white;
    transition: all var(--transition-fast);
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--td-primary);
    box-shadow: 0 0 0 3px rgba(0, 57, 57, 0.1);
}

.filter-search {
    flex: 2;
    min-width: 200px;
}

.filter-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.btn-filter {
    padding: 10px 20px;
    background: var(--td-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
}

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

.btn-clear {
    padding: 10px 16px;
    background: var(--td-gray-100);
    color: var(--td-gray-600);
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-fast);
}

.btn-clear:hover {
    background: var(--td-gray-200);
    color: var(--td-dark);
}

/* Results */
.tours-results {
    padding: 40px 0 60px;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.results-count {
    font-size: 15px;
    color: var(--td-gray-600);
}

.results-count .count {
    font-weight: 700;
    color: var(--td-dark);
}

.results-count .filter-tag {
    background: var(--td-primary);
    color: white;
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 12px;
    margin-left: 8px;
}

/* Tours Grid */
.tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.tour-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

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

.tour-card-image {
    position: relative;
    height: 200px;
    background: var(--td-gray-100);
    overflow: hidden;
}

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

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

.tour-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--td-gray-300);
}

.tour-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--td-primary);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.tour-card-badge i {
    font-size: 10px;
}

.tour-card-price {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: white;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tour-card-price .price-from {
    font-size: 10px;
    color: var(--td-gray-500);
    text-transform: uppercase;
}

.tour-card-price .price-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--td-primary);
}

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

.tour-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--td-dark);
    margin: 0 0 8px;
    line-height: 1.4;
}

.tour-card-description {
    font-size: 13px;
    color: var(--td-gray-500);
    margin: 0 0 12px;
    line-height: 1.5;
    flex: 1;
}

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

.tour-card-meta .meta-item {
    font-size: 13px;
    color: var(--td-gray-500);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tour-card-meta .meta-item i {
    color: var(--td-primary);
    font-size: 12px;
}

.tour-card-footer {
    padding-top: 12px;
    border-top: 1px solid var(--td-gray-100);
}

.view-details {
    font-size: 14px;
    font-weight: 500;
    color: var(--td-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tour-card:hover .view-details {
    gap: 10px;
}

.view-details i {
    transition: transform var(--transition-fast);
}

.tour-card:hover .view-details i {
    transform: translateX(4px);
}

/* No Results */
.no-results {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: var(--radius-lg);
}

.no-results-icon {
    width: 80px;
    height: 80px;
    background: var(--td-gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 32px;
    color: var(--td-gray-400);
}

.no-results h3 {
    font-size: 1.5rem;
    color: var(--td-dark);
    margin: 0 0 8px;
}

.no-results p {
    color: var(--td-gray-500);
    margin: 0 0 24px;
}

/* ----------------------------------------
   Tour Detail Page Styles
   ---------------------------------------- */
.tour-detail-page {
    background: var(--td-gray-50);
    min-height: 100vh;
}

.tour-breadcrumb {
    background: white;
    border-bottom: 1px solid var(--td-gray-100);
    padding-top: 85px; /* Adjust this value to match your header height */
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.breadcrumb a {
    color: var(--td-gray-500);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--td-primary);
}

.breadcrumb .separator {
    color: var(--td-gray-300);
    font-size: 10px;
}

.breadcrumb .current {
    color: var(--td-dark);
    font-weight: 500;
}

/* Gallery */
.tour-gallery {
    background: white;
    padding: 24px 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 16px;
}

.gallery-main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 400px;
    background: var(--td-gray-100);
    cursor: pointer;
}

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

.gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gallery-thumb {
    height: 75px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    opacity: 0.7;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
}

.gallery-thumb:hover,
.gallery-thumb.active {
    opacity: 1;
}

.gallery-thumb.active {
    border-color: var(--td-primary);
}

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

.thumb-more {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.gallery-placeholder {
    height: 400px;
    background: var(--td-gray-100);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: var(--td-gray-300);
}

/* Tour Content */
.tour-content {
    padding: 40px 0 60px;
}

.tour-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.tour-header {
    margin-bottom: 32px;
}

.tour-detail-page .tour-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--td-dark);
    margin: 0 0 16px;
    line-height: 1.3;
}

/* Show desktop booking card only on desktop */
.booking-card-desktop {
    display: block;
}

.booking-card-mobile {
    display: none;
}

/* On mobile, show mobile booking card and hide desktop */
@media (max-width: 991px) {
    .booking-card-desktop {
        display: none;
    }

    .booking-card-mobile {
        display: block;
        margin-bottom: 2rem;
    }
}

.tour-quick-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.info-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--td-gray-100);
    border-radius: 50px;
    font-size: 13px;
    color: var(--td-gray-600);
}

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

.info-badge-success {
    background: #dcfce7;
    color: #166534;
}

.info-badge-success i {
    color: #16a34a;
}

/* Tour Sections */
.tour-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--td-gray-200);
}

.tour-section:last-child {
    border-bottom: none;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--td-dark);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title i {
    color: var(--td-primary);
}

.tour-overview {
    font-size: 16px;
    line-height: 1.7;
    color: var(--td-gray-600);
}

.tour-description {
    font-size: 15px;
    line-height: 1.8;
    color: var(--td-gray-600);
}

.tour-description h3 {
    font-size: 1.1rem;
    color: var(--td-dark);
    margin: 24px 0 12px;
}

.tour-description ul,
.tour-description ol {
    margin: 16px 0;
    padding-left: 24px;
}

.tour-description li {
    margin-bottom: 8px;
}

/* Extras Grid */
.extras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.extra-card {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--td-gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--td-gray-100);
}

.extra-image {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

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

.extra-content h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--td-dark);
    margin: 0 0 4px;
}

.extra-content p {
    font-size: 13px;
    color: var(--td-gray-500);
    margin: 0 0 8px;
    line-height: 1.4;
}

.extra-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--td-primary);
}

/* Terms */
.tour-terms .terms-content {
    font-size: 13px;
    line-height: 1.7;
    color: var(--td-gray-500);
    white-space: pre-line;
}

/* Booking Card */
.tour-sidebar {
    position: sticky;
    top: 100px;
}

.booking-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
    margin-bottom: 20px;
}

.booking-price {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--td-gray-100);
    margin-bottom: 20px;
}

.booking-price .price-label {
    display: block;
    font-size: 12px;
    color: var(--td-gray-500);
    text-transform: uppercase;
}

.booking-price .price-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--td-primary);
}

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

.booking-details {
    margin-bottom: 20px;
}

.booking-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--td-gray-600);
    border-bottom: 1px solid var(--td-gray-100);
}

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

.booking-detail i {
    color: var(--td-primary);
    width: 20px;
    text-align: center;
}

.btn-book-now {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: var(--td-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.btn-book-now:hover {
    background: var(--td-secondary-dark);
    transform: translateY(-2px);
}

.booking-note {
    text-align: center;
    font-size: 12px;
    color: var(--td-gray-500);
    margin: 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.booking-note i {
    color: #16a34a;
}

/* Sidebar Cards */
.location-card,
.supplier-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
}

.location-card h3,
.supplier-card h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--td-gray-500);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.location-card h3 i,
.supplier-card h3 i {
    color: var(--td-primary);
}

.location-details p {
    font-size: 14px;
    color: var(--td-gray-600);
    margin: 0 0 4px;
}

.supplier-card p {
    font-size: 15px;
    font-weight: 500;
    color: var(--td-dark);
    margin: 0;
}

/* Related Tours */
.related-tours {
    background: white;
    padding: 60px 0;
}

.section-heading {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--td-dark);
    margin: 0 0 32px;
    text-align: center;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-content {
    max-width: 90vw;
    max-height: 80vh;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: var(--radius-md);
}

.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
    .tour-layout {
        grid-template-columns: 1fr;
    }

    .tour-sidebar {
        position: static;
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .gallery-thumbs {
        flex-direction: row;
        overflow-x: auto;
    }

    .gallery-thumb {
        width: 80px;
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    .tours-hero .hero-title {
        font-size: 1.75rem;
    }

    .filters-row {
        flex-direction: column;
    }

    .filter-group {
        width: 100%;
    }

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

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

    .tour-title {
        font-size: 1.5rem;
    }

    .gallery-main {
        height: 250px;
    }
}

/* ----------------------------------------
   Booking Modal Styles - Improved
   ---------------------------------------- */
.booking-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    padding: 0;
    overflow-y: auto;
}

.booking-modal-overlay.active {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.booking-modal {
    background: white;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0.8;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Drag indicator for mobile */
.booking-modal::before {
    content: "";
    position: sticky;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 36px;
    height: 4px;
    background: #d0d0d0;
    border-radius: 2px;
    margin: 10px auto 0;
}

.booking-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--td-gray-100, #f3f4f6);
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--td-gray-500, #6b7280);
    transition: all 0.2s ease;
    z-index: 10;
}

.booking-modal-close:hover {
    background: var(--td-gray-200, #e5e7eb);
    color: var(--td-dark, #111827);
}

.booking-modal-header {
    padding: 24px 20px 16px;
    border-bottom: 1px solid var(--td-gray-100, #f3f4f6);
}

.booking-modal-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--td-dark, #111827);
    margin: 0 0 6px;
    padding-right: 44px;
    line-height: 1.3;
}

.modal-price {
    font-size: 14px;
    color: var(--td-gray-500, #6b7280);
    margin: 0;
}

.modal-price strong {
    color: var(--td-primary, #003939);
    font-size: 1.25rem;
    font-weight: 700;
}

.booking-modal-body {
    padding: 20px;
}

.booking-step {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--td-gray-100, #f3f4f6);
}

.booking-step:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.step-number {
    width: 28px;
    height: 28px;
    background: var(--td-primary, #003939);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.step-header h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--td-dark, #111827);
    margin: 0;
}

.optional-tag {
    font-size: 12px;
    color: var(--td-gray-400, #9ca3af);
    font-weight: 400;
}

.step-content {
    padding-left: 0px;
}

/* Date Input */
.date-picker-container {
    position: relative;
}

.booking-date-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--td-gray-200, #e5e7eb);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--td-dark, #111827);
    background: var(--td-gray-50, #f9fafb);
    transition: all 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.booking-date-input:focus {
    outline: none;
    border-color: var(--td-primary, #003939);
    background: white;
    box-shadow: 0 0 0 3px rgba(0, 57, 57, 0.1);
}

.date-hint {
    font-size: 13px;
    color: var(--td-gray-500, #6b7280);
    margin: 10px 0 0;
}

.date-hint i {
    color: var(--td-primary, #003939);
    margin-right: 4px;
}

/* Loading Spinner */
.loading-spinner {
    text-align: center;
    padding: 24px;
    color: var(--td-gray-500, #6b7280);
    font-size: 14px;
}

.loading-spinner i {
    margin-right: 8px;
    color: var(--td-primary, #003939);
}

/* Time Slots */
.time-slots-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.time-slot {
    padding: 14px 12px;
    border: 2px solid var(--td-gray-200, #e5e7eb);
    border-radius: 12px;
    background: var(--td-gray-50, #f9fafb);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.time-slot:hover {
    border-color: var(--td-primary, #003939);
    background: white;
}

.time-slot:active {
    transform: scale(0.98);
}

.time-slot.selected {
    border-color: var(--td-primary, #003939);
    background: rgba(0, 57, 57, 0.05);
    box-shadow: 0 0 0 3px rgba(0, 57, 57, 0.1);
}

.time-slot-time {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--td-dark, #111827);
}

.time-slot-seats {
    display: block;
    font-size: 12px;
    color: var(--td-gray-500, #6b7280);
    margin-top: 3px;
}

/* No Availability */
.no-availability {
    text-align: center;
    padding: 32px 16px;
    color: var(--td-gray-500, #6b7280);
}

.no-availability i {
    font-size: 40px;
    color: var(--td-gray-300, #d1d5db);
    margin-bottom: 12px;
    display: block;
}

.no-availability p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Quantity Selector */
.quantity-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.qty-btn {
    width: 50px;
    height: 50px;
    border: 2px solid var(--td-gray-200, #e5e7eb);
    background: var(--td-gray-50, #f9fafb);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--td-gray-600, #4b5563);
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.qty-btn:hover {
    border-color: var(--td-primary, #003939);
    color: var(--td-primary, #003939);
    background: white;
}

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

.quantity-selector input {
    width: 70px;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    border: none;
    color: var(--td-primary, #003939);
    background: transparent;
}

.quantity-info {
    text-align: center;
    font-size: 13px;
    color: var(--td-gray-500, #6b7280);
    margin: 14px 0 0;
    padding: 10px 14px;
    background: var(--td-gray-50, #f9fafb);
    border-radius: 8px;
}

/* Extras */
.extras-selection {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.extra-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    border: 2px solid var(--td-gray-200, #e5e7eb);
    border-radius: 12px;
    background: var(--td-gray-50, #f9fafb);
    gap: 12px;
    transition: all 0.2s ease;
}

.extra-option.has-qty {
    border-color: var(--td-secondary, #00a896);
    background: rgba(0, 168, 150, 0.05);
}

.extra-option-info {
    display: flex;
    gap: 12px;
    flex: 1;
    min-width: 0;
    align-items: center;
}

.extra-thumb {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

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

.extra-option-details h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--td-dark, #111827);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.extra-option-details p {
    font-size: 12px;
    color: var(--td-gray-500, #6b7280);
    margin: 0 0 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.extra-option-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--td-secondary, #00a896);
}

.extra-option-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.qty-btn-sm {
    width: 32px;
    height: 32px;
    border: 2px solid var(--td-gray-200, #e5e7eb);
    background: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--td-gray-600, #4b5563);
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.qty-btn-sm:hover {
    border-color: var(--td-primary, #003939);
    color: var(--td-primary, #003939);
}

.qty-btn-sm:active {
    transform: scale(0.9);
}

.extra-option-qty input {
    width: 28px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    border: none;
    color: var(--td-dark, #111827);
    background: transparent;
}

/* Booking Summary */
.booking-summary {
    background: linear-gradient(
        135deg,
        var(--td-gray-50, #f9fafb) 0%,
        #f0f4f4 100%
    );
    padding: 18px;
    border-radius: 14px;
    margin-top: 8px;
}

.booking-summary h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--td-dark, #111827);
    margin: 0 0 14px;
}

.summary-details {
    font-size: 14px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.summary-row span:first-child {
    color: var(--td-gray-500, #6b7280);
}

.summary-row span:last-child {
    color: var(--td-dark, #111827);
    font-weight: 600;
}

.summary-divider {
    height: 1px;
    background: var(--td-gray-200, #e5e7eb);
    margin: 10px 0;
}

.summary-total {
    font-size: 16px;
    padding-top: 4px;
}

.summary-total span:last-child {
    color: var(--td-primary, #003939);
    font-weight: 700;
    font-size: 1.125rem;
}

/* Modal Footer */
.booking-modal-footer {
    padding: 16px 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    display: flex;
    gap: 12px;
    border-top: 1px solid var(--td-gray-100, #f3f4f6);
    background: white;
    position: sticky;
    bottom: 0;
}

.booking-modal-footer .btn-secondary {
    flex: 0 0 auto;
    padding: 14px 20px;
    background: var(--td-gray-100, #f3f4f6);
    color: var(--td-gray-600, #4b5563);
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.booking-modal-footer .btn-secondary:hover {
    background: var(--td-gray-200, #e5e7eb);
}

.btn-add-to-cart {
    flex: 1;
    padding: 14px 20px;
    background: var(--td-secondary, #00a896);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 168, 150, 0.3);
}

.btn-add-to-cart:hover:not(:disabled) {
    background: var(--td-secondary-dark, #008f7a);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 168, 150, 0.35);
}

.btn-add-to-cart:active:not(:disabled) {
    transform: scale(0.98);
}

.btn-add-to-cart:disabled {
    background: var(--td-gray-300, #d1d5db);
    cursor: not-allowed;
    box-shadow: none;
}

/* ----------------------------------------
   Tablet & Desktop (min-width: 600px)
   ---------------------------------------- */
@media (min-width: 600px) {
    .booking-modal-overlay.active {
        align-items: center;
        padding: 24px;
    }

    .booking-modal {
        max-width: 500px;
        max-height: 85vh;
        border-radius: 20px;
        animation: scaleIn 0.25s ease-out;
    }

    .booking-modal::before {
        display: none;
    }

    @keyframes scaleIn {
        from {
            transform: scale(0.95);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    .booking-modal-header {
        padding: 24px 24px 18px;
    }

    .booking-modal-header h3 {
        font-size: 1.25rem;
    }

    .booking-modal-body {
        padding: 24px;
    }

    .booking-modal-footer {
        padding: 18px 24px 24px;
    }

    .time-slots-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ----------------------------------------
   Desktop (min-width: 768px)
   ---------------------------------------- */
@media (min-width: 768px) {
    .booking-modal {
        max-width: 550px;
    }

    .modal-price strong {
        font-size: 1.375rem;
    }
}

/* ----------------------------------------
   Reduced Motion
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .booking-modal {
        animation: none;
    }

    .time-slot,
    .qty-btn,
    .qty-btn-sm,
    .btn-add-to-cart {
        transition: none;
    }
}
/* ----------------------------------------
   Cart Page Styles
   ---------------------------------------- */
.cart-page {
    min-height: 100vh;
    background: var(--td-gray-50);
}

.cart-header {
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
    padding: 100px 0 40px;
    margin-top: 70px;
}

.cart-header h1 {
    font-size: 2rem;
    color: white;
    margin: 0 0 8px;
}

.cart-header h1 i {
    margin-right: 12px;
}

.cart-header p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.cart-content {
    padding: 40px 0 60px;
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-item {
    background: white;
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    box-shadow: var(--shadow-sm);
}

.cart-item-name {
    font-size: 18px;
    color: var(--td-dark);
    margin: 0 0 12px;
}

.cart-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    color: var(--td-gray-500);
}

.cart-item-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cart-item-meta i {
    color: var(--td-primary);
}

.cart-item-extras {
    margin-top: 12px;
    font-size: 13px;
    color: var(--td-gray-500);
}

.extra-tag {
    display: inline-block;
    background: var(--td-gray-100);
    padding: 4px 10px;
    border-radius: 50px;
    margin: 4px 4px 0 0;
}

.cart-item-price {
    text-align: right;
    flex-shrink: 0;
}

.item-subtotal {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--td-primary);
    margin-bottom: 12px;
}

.btn-remove {
    padding: 8px 12px;
    background: #fee2e2;
    color: #dc2626;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-remove:hover {
    background: #fecaca;
}

.cart-summary-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 100px;
}

.cart-summary-card h3 {
    font-size: 18px;
    color: var(--td-dark);
    margin: 0 0 20px;
}

.summary-rows {
    border-bottom: 1px solid var(--td-gray-100);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.cart-summary-card .summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.free-text {
    color: #16a34a;
    font-weight: 500;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 18px;
    font-weight: 600;
}

.total-amount {
    color: var(--td-primary);
    font-size: 24px;
}

.btn-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: var(--td-secondary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
    margin-bottom: 12px;
}

.btn-checkout:hover {
    background: var(--td-secondary-dark);
}

.btn-continue-shopping {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: transparent;
    color: var(--td-gray-600);
    border: 1px solid var(--td-gray-200);
    border-radius: var(--radius-md);
    font-size: 14px;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn-continue-shopping:hover {
    border-color: var(--td-gray-300);
    color: var(--td-dark);
}

.trust-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--td-gray-100);
}

.trust-badges span {
    font-size: 13px;
    color: var(--td-gray-500);
    display: flex;
    align-items: center;
    gap: 8px;
}

.trust-badges i {
    color: #16a34a;
}

.empty-cart {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: var(--radius-lg);
}

.empty-cart-icon {
    width: 100px;
    height: 100px;
    background: var(--td-gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 40px;
    color: var(--td-gray-300);
}

.empty-cart h2 {
    font-size: 1.5rem;
    color: var(--td-dark);
    margin: 0 0 8px;
}

.empty-cart p {
    color: var(--td-gray-500);
    margin: 0 0 24px;
}

/* ----------------------------------------
   Checkout Page Styles
   ---------------------------------------- */
.checkout-page {
    min-height: 100vh;
    background: var(--td-gray-50);
}

.checkout-header {
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
    padding: 100px 0 40px;
    margin-top: 70px;
}

.checkout-header h1 {
    font-size: 2rem;
    color: white;
    margin: 0;
}

.checkout-header h1 i {
    margin-right: 12px;
}

.checkout-content {
    padding: 40px 0 60px;
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 32px;
    align-items: start;
}

.checkout-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.checkout-card h3 {
    font-size: 18px;
    color: var(--td-dark);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkout-card h3 i {
    color: var(--td-primary);
}

.checkout-card .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.checkout-card .form-group {
    margin-bottom: 16px;
}

.checkout-card .form-group:last-child {
    margin-bottom: 0;
}

.checkout-card label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--td-gray-600);
    margin-bottom: 6px;
}

.checkout-card input[type="text"],
.checkout-card input[type="email"],
.checkout-card input[type="tel"],
.checkout-card textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--td-gray-200);
    border-radius: var(--radius-md);
    font-size: 15px;
    transition: all var(--transition-fast);
}

.checkout-card input:focus,
.checkout-card textarea:focus {
    outline: none;
    border-color: var(--td-primary);
    box-shadow: 0 0 0 3px rgba(0, 57, 57, 0.1);
}

.payment-methods {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.payment-method-option {
    flex: 1;
    cursor: pointer;
}

.payment-method-option input {
    display: none;
}

.payment-method-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border: 2px solid var(--td-gray-200);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.payment-method-option input:checked + .payment-method-content {
    border-color: var(--td-primary);
    background: rgba(0, 57, 57, 0.05);
}

.payment-method-content i {
    font-size: 20px;
    color: var(--td-gray-500);
}

.payment-method-option input:checked + .payment-method-content i {
    color: var(--td-primary);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--td-gray-600);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 2px;
}

.checkbox-label a {
    color: var(--td-primary);
}

.btn-pay-now {
    width: 100%;
    padding: 18px;
    background: var(--td-secondary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all var(--transition-fast);
}

.btn-pay-now:hover {
    background: var(--td-secondary-dark);
}

.checkout-summary-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 100px;
}

.checkout-summary-card h3 {
    font-size: 18px;
    color: var(--td-dark);
    margin: 0 0 20px;
}

.checkout-items {
    border-bottom: 1px solid var(--td-gray-100);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.checkout-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--td-gray-100);
}

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

.checkout-item-info h4 {
    font-size: 14px;
    color: var(--td-dark);
    margin: 0 0 4px;
}

.checkout-item-info p {
    font-size: 12px;
    color: var(--td-gray-500);
    margin: 0;
}

.checkout-item-extras {
    font-size: 11px;
    color: var(--td-gray-400);
}

.checkout-item-price {
    font-weight: 600;
    color: var(--td-dark);
}

.checkout-totals {
    margin-bottom: 20px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.total-final {
    font-size: 18px;
    font-weight: 600;
    padding-top: 12px;
    border-top: 1px solid var(--td-gray-100);
}

.total-final span:last-child {
    color: var(--td-primary);
}

.checkout-guarantee {
    padding: 16px;
    background: var(--td-gray-50);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.guarantee-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--td-gray-600);
    padding: 6px 0;
}

.guarantee-item i {
    color: #16a34a;
}

.btn-back-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    color: var(--td-gray-600);
    text-decoration: none;
    font-size: 14px;
}

.btn-back-to-cart:hover {
    color: var(--td-primary);
}

/* Checkout Step Header */
.checkout-step-header {
    margin-bottom: 20px;
}

.checkout-step-header .step-badge {
    display: inline-block;
    background: var(--td-gray-100);
    color: var(--td-gray-500);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 8px;
}

.checkout-card .form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

/* Payment Buttons */
.payment-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.payment-option {
    border: 1px solid var(--td-gray-200);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all var(--transition-fast);
}

.payment-option:hover {
    border-color: var(--td-gray-300);
}

.payment-option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.payment-option-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.payment-option-info > i {
    font-size: 28px;
    color: var(--td-primary);
    width: 40px;
    text-align: center;
}

.payment-option-info .fa-paypal {
    color: #003087;
}

.payment-option-info h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--td-dark);
    margin: 0 0 2px;
}

.payment-option-info p {
    font-size: 13px;
    color: var(--td-gray-500);
    margin: 0;
}

.payment-cards {
    display: flex;
    gap: 8px;
}

.payment-cards i {
    font-size: 28px;
    color: var(--td-gray-400);
}

.btn-pay-stripe {
    width: 100%;
    padding: 16px 24px;
    background: var(--td-secondary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all var(--transition-fast);
}

.btn-pay-stripe:hover {
    background: var(--td-secondary-dark);
    transform: translateY(-1px);
}

.btn-pay-stripe i {
    font-size: 14px;
}

#paypal-button-container {
    min-height: 45px;
}

.payment-divider {
    display: flex;
    align-items: center;
    margin: 8px 0;
}

.payment-divider::before,
.payment-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--td-gray-200);
}

.payment-divider span {
    padding: 0 16px;
    color: var(--td-gray-400);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
}

.payment-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--td-gray-100);
    font-size: 13px;
    color: var(--td-gray-500);
}

.payment-security i {
    color: #16a34a;
}

.terms-group {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--td-gray-100);
}

.checkout-terms {
    padding: 16px 24px;
}

/* ----------------------------------------
   Confirmation Page Styles
   ---------------------------------------- */
.confirmation-page {
    min-height: 100vh;
    background: var(--td-gray-50);
    padding: 120px 0 60px;
}

.confirmation-card {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: var(--radius-lg);
    padding: 48px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.confirmation-icon {
    width: 100px;
    height: 100px;
    background: #dcfce7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.confirmation-icon i {
    font-size: 48px;
    color: #16a34a;
}

.confirmation-card h1 {
    font-size: 2rem;
    color: var(--td-dark);
    margin: 0 0 12px;
}

.confirmation-message {
    font-size: 16px;
    color: var(--td-gray-500);
    margin: 0 0 32px;
}

.booking-details {
    background: var(--td-gray-50);
    padding: 20px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    text-align: left;
}

.booking-details h3 {
    font-size: 14px;
    color: var(--td-gray-500);
    text-transform: uppercase;
    margin: 0 0 12px;
}

.booking-reference {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.booking-reference .label {
    color: var(--td-gray-500);
}

.booking-reference .value {
    font-weight: 600;
    color: var(--td-dark);
}

.booking-items {
    text-align: left;
    margin-bottom: 32px;
}

.booking-items h3 {
    font-size: 14px;
    color: var(--td-gray-500);
    text-transform: uppercase;
    margin: 0 0 16px;
}

.booking-item {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    background: var(--td-gray-50);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
}

.booking-item .item-info h4 {
    font-size: 16px;
    color: var(--td-dark);
    margin: 0 0 4px;
}

.booking-item .item-info p {
    font-size: 13px;
    color: var(--td-gray-500);
    margin: 0;
}

.booking-item .item-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--td-primary);
}

.confirmation-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.btn-secondary-td {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: transparent;
    color: var(--td-gray-600);
    border: 1px solid var(--td-gray-200);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn-secondary-td:hover {
    border-color: var(--td-gray-300);
    color: var(--td-dark);
}

.confirmation-contact {
    padding-top: 24px;
    border-top: 1px solid var(--td-gray-100);
}

.confirmation-contact p {
    font-size: 14px;
    color: var(--td-gray-500);
    margin: 0;
}

.confirmation-contact a {
    color: var(--td-primary);
    font-weight: 500;
}

/* ----------------------------------------
   Private Tours Page Styles
   ---------------------------------------- */
.private-tours-page {
    min-height: 100vh;
    background: var(--td-gray-50);
}

.private-tours-hero {
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
    padding: 60px 0;
    padding-top: 100px;
    margin-top: 72px;
    position: relative;
    overflow: hidden;
}

.private-tours-hero .hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 12px;
}

.private-tours-hero .hero-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Private Tours Grid */
.private-tours-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.private-tour-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.private-tour-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.private-tour-card .card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--td-gray-100);
}

.private-tour-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

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

.private-tour-card .image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--td-gray-300);
}

.private-tour-card .card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--td-primary);
    color: white;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
}

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

.private-tour-card .card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--td-dark);
    margin: 0 0 4px;
    line-height: 1.4;
}

.private-tour-card .card-company {
    font-size: 13px;
    color: var(--td-gray-500);
    margin: 0 0 12px;
}

.private-tour-card .card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.private-tour-card .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--td-gray-500);
}

.private-tour-card .meta-item i {
    color: var(--td-primary);
    font-size: 12px;
}

.private-tour-card .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--td-gray-100);
    margin-top: auto;
}

.private-tour-card .card-price {
    display: flex;
    flex-direction: column;
}

.private-tour-card .price-label {
    font-size: 12px;
    color: var(--td-gray-400);
}

.private-tour-card .price-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--td-primary);
}

.private-tour-card .card-cta {
    font-size: 13px;
    color: var(--td-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Private Tour Detail Page */
.private-tour-detail-page {
    min-height: 100vh;
    background: var(--td-gray-50);
    padding-top: 72px;
}

.private-tour-detail-page .breadcrumb-section {
    background: white;
    padding: 16px 0;
    border-bottom: 1px solid var(--td-gray-100);
}

.tour-detail-section {
    padding: 40px 0;
}

.tour-detail-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.tour-main-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Tour Gallery */
.tour-gallery {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.gallery-main {
    position: relative;
    height: 400px;
}

.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.gallery-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--td-primary);
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
}

.gallery-thumbs {
    display: flex;
    gap: 8px;
    padding: 12px;
    overflow-x: auto;
}

.gallery-thumbs .thumb {
    width: 80px;
    height: 60px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.gallery-thumbs .thumb:hover,
.gallery-thumbs .thumb.active {
    opacity: 1;
}

.gallery-thumbs .thumb.active {
    box-shadow: 0 0 0 2px var(--td-primary);
}

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

.gallery-placeholder {
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--td-gray-100);
    color: var(--td-gray-400);
}

.gallery-placeholder i {
    font-size: 64px;
    margin-bottom: 16px;
}

/* Tour Info Card */
.tour-info-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
}

.tour-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--td-dark);
    margin: 0 0 8px;
    line-height: 1.3;
}

.tour-company {
    font-size: 15px;
    color: var(--td-gray-500);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tour-company i {
    color: var(--td-primary);
}

.tour-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--td-gray-50);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--td-gray-700);
}

.highlight-item i {
    color: var(--td-primary);
}

/* Tour Sections */
.tour-section {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
}

.tour-section h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--td-dark);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tour-section h2 i {
    color: var(--td-primary);
}

.tour-description {
    font-size: 15px;
    color: var(--td-gray-600);
    line-height: 1.7;
}

/* Pricing Tiers */
.pricing-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.pricing-tier {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--td-gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--td-gray-100);
}

.tier-duration {
    font-size: 14px;
    color: var(--td-gray-600);
}

.tier-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--td-primary);
}

/* Payment Methods */
.payment-methods-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.payment-method-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--td-gray-50);
    border-radius: 50px;
    font-size: 13px;
    color: var(--td-gray-600);
}

.payment-method-badge i {
    color: var(--td-success);
}

/* Sidebar */
.tour-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
}

.booking-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.booking-card-header {
    padding: 24px;
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
    color: white;
    text-align: center;
}

.price-display {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.price-display .price-label {
    font-size: 13px;
    opacity: 0.85;
}

.price-display .price-amount {
    font-size: 36px;
    font-weight: 700;
}

.deposit-note {
    font-size: 13px;
    margin: 12px 0 0;
    opacity: 0.85;
}

.booking-card-body {
    padding: 24px;
}

.btn-request-booking {
    width: 100%;
    padding: 16px;
    background: var(--td-secondary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all var(--transition-fast);
}

.btn-request-booking:hover {
    background: var(--td-secondary-dark);
}

.booking-note {
    text-align: center;
    font-size: 13px;
    color: var(--td-gray-500);
    margin: 12px 0 0;
}

.booking-card-footer {
    padding: 16px 24px;
    background: var(--td-gray-50);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.trust-item i {
    color: var(--td-success);
}

/* Contact Card */
.contact-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-md);
}

.contact-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--td-dark);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-card h3 i {
    color: var(--td-primary);
}

.contact-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--td-gray-100);
}

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

.contact-name {
    font-weight: 500;
    color: var(--td-dark);
    margin: 0 0 8px;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--td-gray-600);
    text-decoration: none;
    margin-bottom: 6px;
}

.contact-link:hover {
    color: var(--td-primary);
}

.contact-link i {
    width: 16px;
    color: var(--td-primary);
}

/* Related Section */
.related-section {
    padding: 60px 0;
    background: white;
}

.related-section .section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--td-dark);
    margin: 0 0 32px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Booking Success */
.booking-success {
    padding: 48px 24px;
    text-align: center;
}

.success-icon {
    width: 80px;
    height: 80px;
    background: #dcfce7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.success-icon i {
    font-size: 40px;
    color: #16a34a;
}

.booking-success h3 {
    font-size: 1.5rem;
    color: var(--td-dark);
    margin: 0 0 12px;
}

.booking-success p {
    color: var(--td-gray-500);
    margin: 0 0 24px;
}

/* Pricing Tiers Grid */
.pricing-tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.pricing-tier-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--td-gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--td-gray-100);
}

.pricing-tier-card .tier-duration {
    font-size: 14px;
    color: var(--td-gray-600);
}

.pricing-tier-card .tier-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--td-primary);
}

/* Tour Contact Card */
.tour-contact-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-md);
}

.tour-contact-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--td-dark);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tour-contact-card h3 i {
    color: var(--td-primary);
}

.tour-contact-card .contact-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--td-gray-100);
}

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

.tour-contact-card .contact-name {
    font-weight: 500;
    color: var(--td-dark);
    margin: 0 0 8px;
}

.tour-contact-card .contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--td-gray-600);
    text-decoration: none;
    margin-bottom: 6px;
}

.tour-contact-card .contact-link:hover {
    color: var(--td-primary);
}

.tour-contact-card .contact-link i {
    width: 16px;
    color: var(--td-primary);
}

/* Form hint */
.form-hint {
    display: block;
    font-size: 12px;
    color: var(--td-gray-400);
    margin-top: 4px;
}

/* Charter Highlights Cards */
.charter-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.highlight-card {
    background: white;
    border: 1px solid var(--td-gray-200);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.highlight-card i {
    font-size: 24px;
    color: var(--td-primary);
}

.highlight-card .highlight-label {
    font-size: 13px;
    color: var(--td-gray-500);
}

.highlight-card .highlight-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--td-dark);
}

/* Booking Information Grid */
.booking-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.booking-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.booking-info-item > i {
    width: 40px;
    height: 40px;
    background: var(--td-gray-100);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--td-primary);
    font-size: 16px;
    flex-shrink: 0;
}

.booking-info-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.booking-info-label {
    font-size: 13px;
    color: var(--td-gray-500);
}

.booking-info-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--td-dark);
}

.booking-info-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--td-gray-100);
}

.booking-info-note i {
    font-size: 6px;
    color: #dc2626;
}

.booking-info-note span {
    font-size: 14px;
    color: #dc2626;
    font-weight: 500;
}

@media (max-width: 768px) {
    .charter-highlights {
        grid-template-columns: 1fr;
    }

    .booking-info-grid {
        grid-template-columns: 1fr;
    }
}

/* 2-column charter highlights */
.charter-highlights-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .charter-highlights-2 {
        grid-template-columns: 1fr;
    }
}

/* Amenities Grid */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.amenity-category h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--td-dark);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.amenity-category h4 i {
    color: var(--td-primary);
}

.amenity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.amenity-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--td-gray-600);
    border-bottom: 1px solid var(--td-gray-100);
}

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

.amenity-list li i {
    color: var(--td-success);
    font-size: 12px;
}

.amenity-list li .extra-price {
    color: var(--td-primary);
    font-size: 12px;
    margin-left: 4px;
}

/* Nights Display */
.nights-display {
    background: var(--td-gray-50);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
    margin-top: 24px;
}

.nights-display .nights-label {
    display: block;
    font-size: 13px;
    color: var(--td-gray-500);
    margin-bottom: 4px;
}

.nights-display .nights-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--td-primary);
}

/* Restaurant Styles */
.menu-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-menu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--td-gray-100);
    color: var(--td-dark);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

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

.contact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-item-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
}

.contact-item-inline i {
    color: var(--td-primary);
    width: 20px;
}

.contact-item-inline a {
    color: var(--td-gray-700);
    text-decoration: none;
}

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

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.social-link {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--td-gray-100);
    color: var(--td-dark);
    border-radius: 50%;
    font-size: 18px;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.social-link:hover {
    background: var(--td-primary);
    color: white;
}

.virtual-tour-container {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.virtual-tour-container iframe {
    width: 100%;
    min-height: 400px;
    border: none;
}

/* Restaurant Booking Card */
.restaurant-booking-card {
    overflow: hidden;
}

.booking-card-header-simple {
    background: linear-gradient(
        135deg,
        var(--td-primary) 0%,
        var(--td-primary-dark) 100%
    );
    color: white;
    padding: 16px 20px;
}

.booking-card-header-simple h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-widget-container {
    padding: 0;
}

.booking-widget-container iframe {
    width: 100%;
    min-height: 350px;
    border: none;
}

.btn-secondary-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    background: var(--td-gray-100);
    color: var(--td-dark);
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 12px;
    transition: all var(--transition-fast);
}

.btn-secondary-block:hover {
    background: var(--td-gray-200);
}

.btn-directions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: var(--td-gray-100);
    color: var(--td-dark);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin-top: 16px;
    transition: all var(--transition-fast);
}

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

/* Restaurant Full-Width Gallery */
.restaurant-gallery-section {
    margin-top: 24px;
    margin-bottom: 32px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

.restaurant-gallery-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.restaurant-gallery-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.restaurant-gallery-scroll::-webkit-scrollbar {
    display: none;
}

.restaurant-gallery-item {
    flex: 0 0 auto;
    width: calc(50% - 12px);
    min-width: 500px;
    max-width: 800px;
    height: 450px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

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

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

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--td-dark);
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all var(--transition-fast);
    opacity: 1;
    visibility: visible;
}

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

.gallery-nav-left {
    left: 20px;
}

.gallery-nav-right {
    right: 20px;
}

.gallery-nav.hidden {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
}

/* Lightbox improvements */
.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}

.lightbox-counter {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 14px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 16px;
    border-radius: 20px;
}

@media (max-width: 768px) {
    .restaurant-gallery-section {
        margin-top: 16px;
    }

    .restaurant-gallery-scroll {
        padding: 0 8px;
        gap: 8px;
    }

    .restaurant-gallery-item {
        width: calc(90% - 8px);
        min-width: 280px;
        height: 300px;
    }

    .gallery-nav {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .gallery-nav-left {
        left: 10px;
    }

    .gallery-nav-right {
        right: 10px;
    }
}

/* Lightbox Overlay - for restaurant gallery */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.lightbox-overlay.active {
    display: flex;
}

/* Form Sections in Modal */
.form-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--td-gray-100);
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--td-dark);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section h4 i {
    color: var(--td-primary);
}

.btn-submit-request {
    padding: 14px 24px;
    background: var(--td-secondary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
}

.btn-submit-request:hover:not(:disabled) {
    background: var(--td-secondary-dark);
}

.btn-submit-request:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 1024px) {
    .private-tours-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tour-detail-layout {
        grid-template-columns: 1fr;
    }

    .tour-sidebar {
        position: static;
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .private-tours-grid {
        grid-template-columns: 1fr;
    }

    .private-tours-hero .hero-title {
        font-size: 1.75rem;
    }

    .gallery-main {
        height: 280px;
    }

    .tour-name {
        font-size: 1.5rem;
    }

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

    .pricing-tiers {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary-card,
    .checkout-summary-card {
        position: static;
    }
}

@media (max-width: 768px) {
    .cart-item {
        flex-direction: column;
    }

    .cart-item-price {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 16px;
        border-top: 1px solid var(--td-gray-100);
        margin-top: 16px;
    }

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

    .payment-methods {
        flex-direction: column;
    }

    .time-slots-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .form-row-thirds {
        grid-template-columns: 1fr;
    }

    .pricing-field-row,
    .contact-field-row {
        flex-wrap: wrap;
    }

    .pricing-field-row input,
    .contact-field-row input {
        flex: 1 1 calc(50% - 6px);
        min-width: 100px;
    }

    .pricing-field-row input[type="number"] {
        max-width: none;
    }

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

/* local tour public view */

.pickup-locations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pickup-location-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--td-gray-50);
    border-radius: var(--radius-md);
}

.pickup-location-item i {
    color: var(--td-primary);
    font-size: 18px;
    margin-top: 4px;
}

.pickup-location-item strong {
    display: block;
    color: var(--td-dark);
    margin-bottom: 4px;
}

.pickup-location-item p {
    margin: 0;
    color: var(--td-gray-600);
    font-size: 14px;
}
.listing-status-badge {
    position: absolute;
    top: 12px;
    left: 12px;
}

.status-active {
    background: var(--td-success);
    color: white;
}

.status-inactive {
    background: var(--td-gray-400);
    color: white;
}

/* ===================================
   HERO SECTION — FULL IMAGE WITH CENTERED CONTENT
   =================================== */
.hero-home {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 350px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
}

/* Full-width background image */
.hero-bg-home {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-image-home {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay-home {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 58, 82, 0.4) 0%,
        rgba(0, 58, 82, 0.25) 50%,
        rgba(0, 58, 82, 0.5) 100%
    );
}

/* Centered content */
.hero-content-home {
    position: relative;
    z-index: 2;
    max-width: 800px;
    width: 90%;
    text-align: center;
    padding: 2rem 2rem 6rem;
}

.hero-eyebrow-home {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--td-secondary);
    margin-bottom: 1.25rem;
    padding: 0.4rem 1.25rem;
    border: 1px solid rgba(55, 212, 217, 0.4);
    border-radius: var(--radius-full);
    background: rgba(55, 212, 217, 0.15);
}

.hero-title-home {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--td-white);
    margin: 0 0 1rem;
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hero-subtitle-home {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: rgba(255, 255, 255, 0.85);
    max-width: 100%;
    margin: 0 auto 2.5rem;
    line-height: 1.65;
    font-weight: 400;
    white-space: no-wrap;
}

.hero-scroll-cue-home {
    display: none;
}

.hero-scroll-cue-home:hover {
    opacity: 0.9;
}

.hero-scroll-cue-home span {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--td-white);
    font-weight: 500;
}

.scroll-line-home {
    width: 40px;
    height: 1px;
    background: linear-gradient(to right, var(--td-secondary), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%,
    100% {
        opacity: 0.3;
        transform: scaleX(0.6);
        transform-origin: center;
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
        transform-origin: center;
    }
}

/* ===================================
   SEARCH BAR — CENTERED
   =================================== */
.hero-search-home {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.search-form-home {
    width: 100%;
}

.search-group-home {
    display: flex;
    align-items: stretch;
    background: var(--td-white);
    border-radius: var(--radius-xl);
    overflow: visible;
    box-shadow:
        0 20px 60px -10px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: box-shadow var(--transition-base);
}

.search-group-home:hover {
    box-shadow:
        0 25px 70px -10px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.15);
}

.search-field-home {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.125rem 1.5rem;
    min-width: 0;
    cursor: pointer;
    border-radius: var(--radius-xl);
    transition: background var(--transition-fast);
}

.search-field-home:hover {
    background: var(--td-gray-100);
}

.search-label-home {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--td-primary);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.search-label-home i {
    font-size: 0.75rem;
    color: var(--td-secondary);
}

.search-input-home {
    border: none;
    outline: none;
    font-size: 0.9375rem;
    color: var(--td-dark);
    background: transparent;
    font-family: var(--font-primary);
    padding: 0;
    width: 100%;
    cursor: pointer;
}

.search-input-home::placeholder {
    color: var(--td-gray-400);
}

.search-input-home:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.search-divider-home {
    width: 1px;
    background: var(--td-gray-200);
    margin: 1rem 0;
}

.search-button-home {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0 2.25rem;
    background: var(--td-primary);
    color: var(--td-white);
    border: none;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: background var(--transition-base);
    white-space: nowrap;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}

.search-button-home:hover:not(:disabled) {
    background: var(--td-primary-dark);
}

.search-button-home:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.search-button-home i {
    font-size: 1rem;
}

/* ===================================
   SEARCH DROPDOWNS
   =================================== */
.search-dropdown-home {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--td-white);
    border-radius: var(--radius-lg);
    box-shadow:
        0 20px 40px -8px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    max-height: 300px;
    overflow-y: auto;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--transition-fast),
        visibility var(--transition-fast),
        transform var(--transition-fast);
    transform: translateY(-4px);
}

.search-dropdown-home.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown-item-home {
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        padding-left var(--transition-fast);
    border-bottom: 1px solid var(--td-gray-100);
    font-size: 0.9375rem;
    color: var(--td-dark);
}

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

.dropdown-item-home:hover {
    background: var(--td-gray-100);
    padding-left: 1.5rem;
    color: var(--td-primary);
}

/* ===================================
   MOBILE RESPONSIVE
   =================================== */
@media (max-width: 768px) {
    .hero-home {
        height: 70svh;
        min-height: 485px;
        align-items: center;
    }

    .hero-content-home {
        padding: 2rem 1.5rem 6rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-title-home {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .hero-subtitle-home {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    /* Hide desktop search on mobile */
    .search-form-home {
        display: none;
    }

    /* Show mobile trigger */
    .mobile-search-trigger-home {
        display: flex;
    }

    .hero-scroll-cue-home {
        display: flex;
        margin-top: 3rem;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        opacity: 0.6;
    }
}

/* Mobile search trigger (hidden on desktop) */
.mobile-search-trigger-home {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--td-white);
    border: none;
    border-radius: var(--radius-xl);
    font-size: 0.9375rem;
    color: var(--td-gray-400);
    font-family: var(--font-primary);
    cursor: pointer;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.35);
}

.mobile-search-trigger-home i {
    color: var(--td-secondary);
}
/* ===================================
           SHARED SECTION STYLES
           =================================== */
.container-home {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section-header-home {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-tag-home {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--td-secondary);
    margin-bottom: 0.75rem;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-full);
    background: rgba(55, 212, 217, 0.1);
    border: 1px solid rgba(55, 212, 217, 0.2);
}

.section-tag-light-home {
    background: rgba(55, 212, 217, 0.15);
    border-color: rgba(55, 212, 217, 0.3);
}

.section-title-home {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--td-primary);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

.section-title-light-home {
    color: var(--td-white);
}

.section-subtitle-home {
    font-size: 1.0625rem;
    color: var(--td-gray-500);
    margin: 0;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.section-subtitle-light-home {
    color: rgba(255, 255, 255, 0.65);
}

.section-line-home {
    width: 48px;
    height: 3px;
    background: var(--td-secondary);
    border-radius: var(--radius-full);
    margin: 1.5rem auto 0;
}

.section-line-light-home {
    background: var(--td-secondary);
    opacity: 0.6;
}

/* ===================================
   TOUR LOCATIONS SECTION
   =================================== */
.locations-section-home {
    padding: 5rem 0;
    background: var(--td-gray-50);
}

.locations-grid-home {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Dynamic grid layouts based on count */
.locations-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.locations-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.locations-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.locations-grid-5 {
    grid-template-columns: repeat(3, 1fr);
}

.locations-grid-5 .location-card-home:nth-child(4),
.locations-grid-5 .location-card-home:nth-child(5) {
    grid-column: span 1;
}

.locations-grid-5 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.locations-grid-5 .location-card-home:nth-child(1),
.locations-grid-5 .location-card-home:nth-child(2),
.locations-grid-5 .location-card-home:nth-child(3) {
    grid-column: span 2;
}

.locations-grid-5 .location-card-home:nth-child(4) {
    grid-column: 2 / span 2;
}

.locations-grid-5 .location-card-home:nth-child(5) {
    grid-column: 4 / span 2;
}

.locations-grid-6 {
    grid-template-columns: repeat(3, 1fr);
}

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

.locations-grid-7 .location-card-home:nth-child(1),
.locations-grid-7 .location-card-home:nth-child(2),
.locations-grid-7 .location-card-home:nth-child(3),
.locations-grid-7 .location-card-home:nth-child(4) {
    grid-column: span 3;
}

.locations-grid-7 .location-card-home:nth-child(5),
.locations-grid-7 .location-card-home:nth-child(6),
.locations-grid-7 .location-card-home:nth-child(7) {
    grid-column: span 4;
}

/* Location Card */
.location-card-home {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    min-height: 220px;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.location-card-home:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
}

.location-card-bg-home {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--td-primary);
    transition: transform var(--transition-base);
}

.location-card-home:hover .location-card-bg-home {
    transform: scale(1.05);
}

.location-card-overlay-home {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 58, 82, 0.9) 0%,
        rgba(0, 58, 82, 0.4) 50%,
        rgba(0, 58, 82, 0.1) 100%
    );
}

.location-card-content-home {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
    width: 100%;
}

.location-card-title-home {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--td-white);
    margin: 0 0 0.5rem;
}

.location-card-cta-home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--td-secondary);
    transition: gap var(--transition-fast);
}

.location-card-home:hover .location-card-cta-home {
    gap: 0.75rem;
}

.location-card-cta-home i {
    font-size: 0.75rem;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .locations-grid-4,
    .locations-grid-5,
    .locations-grid-6,
    .locations-grid-7 {
        grid-template-columns: repeat(2, 1fr);
    }

    .locations-grid-5 .location-card-home,
    .locations-grid-7 .location-card-home {
        grid-column: span 1 !important;
    }

    .locations-grid-5 .location-card-home:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 576px) {
    .locations-grid-home {
        grid-template-columns: 1fr !important;
    }

    .locations-grid-5 .location-card-home,
    .locations-grid-7 .location-card-home {
        grid-column: span 1 !important;
    }

    .location-card-home {
        min-height: 180px;
    }

    .location-card-title-home {
        font-size: 1.25rem;
    }
}

/* ===================================
           FEATURED / SWIMMING PIGS SECTION
           =================================== */
.featured-section-home {
    padding: 6rem 0 5rem;
    background: var(--td-white);
    position: relative;
}

.featured-section-home::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--td-gray-200),
        transparent
    );
}

/* ===================================
           CAROUSEL
           =================================== */
.carousel-home {
    position: relative;
    margin: 0 -1rem;
}

.carousel-container-home {
    overflow: hidden;
    padding: 0 1rem 2rem;
}

.carousel-track-home {
    display: flex;
    gap: 1.5rem;
    transition: transform var(--transition-slow);
}

.product-card-home {
    flex: 0 0 calc(33.333% - 1rem);
    min-width: 280px;
    background: var(--td-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all var(--transition-base);
    border: 1px solid var(--td-gray-200);
}

.product-card-home:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px -8px rgba(0, 57, 57, 0.15);
    border-color: transparent;
}

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

.product-image-home {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--td-gray-200);
}

.product-image-home img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.product-card-home:hover .product-image-home img {
    transform: scale(1.06);
}

.product-placeholder-home {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--td-gray-200);
    color: var(--td-gray-400);
    font-size: 3rem;
}

.product-price-home {
    position: absolute;
    bottom: 0.875rem;
    right: 0.875rem;
    background: var(--td-primary);
    color: var(--td-white);
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 12px rgba(0, 57, 57, 0.3);
}

.product-badge-home {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    background: var(--td-secondary);
    color: var(--td-primary-dark);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.product-info-home {
    padding: 1.25rem 1.5rem 1.5rem;
}

.product-name-home {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--td-dark);
    margin: 0 0 0.5rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.product-description-home {
    font-size: 0.875rem;
    color: var(--td-gray-500);
    line-height: 1.65;
    margin: 0 0 1rem;
}

.product-meta-home {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding-top: 0.875rem;
    border-top: 1px solid var(--td-gray-100);
}

.meta-item-home {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--td-gray-500);
    font-weight: 500;
}

.meta-item-home i {
    color: var(--td-secondary);
    font-size: 0.8125rem;
}

/* ===================================
           CAROUSEL NAVIGATION
           =================================== */
.carousel-nav-home {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--td-white);
    border: 1px solid var(--td-gray-200);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    color: var(--td-primary);
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-base);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-nav-home:hover:not(:disabled) {
    background: var(--td-primary);
    color: var(--td-white);
    border-color: var(--td-primary);
    box-shadow: 0 8px 24px rgba(0, 57, 57, 0.2);
}

.carousel-nav-home:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.carousel-prev-home {
    left: 0;
}

.carousel-next-home {
    right: 0;
}

/* ===================================
           TESTIMONIALS SECTION
           =================================== */
.testimonials-section-home {
    padding: 6rem 0;
    background: var(--td-primary);
    position: relative;
    overflow: hidden;
}

.testimonials-bg-pattern-home {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 600px 400px at 10% 20%,
            rgba(55, 212, 217, 0.06) 0%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 500px 500px at 90% 80%,
            rgba(55, 212, 217, 0.04) 0%,
            transparent 70%
        );
    pointer-events: none;
}

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

/* ===================================
           BLOG SECTION
           =================================== */
.blog-section-home {
    padding: 6rem 0 5rem;
    background: var(--td-gray-100);
    position: relative;
}

.blog-carousel-home {
    position: relative;
    margin: 0 -1rem;
}

.blog-carousel-container-home {
    overflow: hidden;
    padding: 0 1rem 2rem;
}

.blog-carousel-track-home {
    display: flex;
    gap: 1.5rem;
    transition: transform var(--transition-slow);
}

.blog-card-home {
    flex: 0 0 calc(33.333% - 1rem);
    min-width: 280px;
    background: var(--td-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--td-gray-200);
    transition: all var(--transition-base);
}

.blog-card-home:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px -8px rgba(0, 57, 57, 0.12);
    border-color: transparent;
}

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

.blog-image-home {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.blog-image-home img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.blog-card-home:hover .blog-image-home img {
    transform: scale(1.06);
}

.blog-image-overlay-home {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 38, 38, 0.5) 0%, transparent 60%);
}

.blog-category-home {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    background: var(--td-secondary);
    color: var(--td-primary-dark);
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.blog-body-home {
    padding: 1.25rem 1.5rem 1.5rem;
}

.blog-date-home {
    font-size: 0.75rem;
    color: var(--td-gray-400);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.blog-date-home i {
    font-size: 0.7rem;
    color: var(--td-secondary);
}

.blog-title-home {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--td-dark);
    margin: 0 0 0.5rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.blog-excerpt-home {
    font-size: 0.8475rem;
    color: var(--td-gray-500);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.blog-read-more-home {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--td-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition:
        gap var(--transition-fast),
        color var(--transition-fast);
}

.blog-read-more-home i {
    font-size: 0.7rem;
    transition: transform var(--transition-fast);
}

.blog-card-home:hover .blog-read-more-home {
    color: var(--td-secondary-dark);
    gap: 0.6rem;
}

.blog-card-home:hover .blog-read-more-home i {
    transform: translateX(2px);
}

/* Blog carousel nav positioning */
.blog-prev-home {
    left: 0;
}

.blog-next-home {
    right: 0;
}

/* ===================================
           RESPONSIVE - TABLET
           =================================== */
@media (max-width: 1024px) {
    .product-card-home {
        flex: 0 0 calc(50% - 0.75rem);
    }

    .blog-card-home {
        flex: 0 0 calc(50% - 0.75rem);
    }
}

/* ===================================
           RESPONSIVE - MOBILE
           =================================== */
@media (max-width: 768px) {
    .search-form-home {
        width: 100%;
    }

    .search-group-home {
        flex-direction: column;
        border-radius: var(--radius-lg);
    }

    .search-field-home {
        padding: 1rem 1.25rem;
    }

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

    .search-button-home {
        padding: 1.25rem;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }

    .search-button-home span {
        display: inline;
    }

    .search-button-home i {
        display: none;
    }

    .search-dropdown-home {
        position: fixed;
        left: 1rem;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        max-height: 70vh;
        border-radius: var(--radius-lg);
        z-index: 3000;
    }

    .search-dropdown-home.active::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }

    /* Sections mobile */
    .featured-section-home,
    .testimonials-section-home,
    .blog-section-home {
        padding: 3.5rem 0 3rem;
    }

    .section-header-home {
        margin-bottom: 2rem;
    }

    .product-card-home {
        flex: 0 0 calc(100% - 2rem);
        min-width: 260px;
    }

    .blog-card-home {
        flex: 0 0 calc(100% - 2rem);
        min-width: 260px;
    }

    .carousel-nav-home {
        display: none;
    }

    .carousel-container-home,
    .blog-carousel-container-home {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .carousel-container-home::-webkit-scrollbar,
    .blog-carousel-container-home::-webkit-scrollbar {
        display: none;
    }

    .product-card-home,
    .blog-card-home {
        scroll-snap-align: center;
    }
}

@media (max-width: 480px) {
    .hero-content-home {
        margin-top: 70px;
        padding: 1rem;
    }

    .search-field-home {
        padding: 0.875rem 1rem;
    }

    .search-label-home {
        font-size: 0.625rem;
    }

    .search-input-home {
        font-size: 0.875rem;
    }

    .search-button-home {
        font-size: 0.875rem;
    }

    .dropdown-item-home {
        padding: 1rem;
        font-size: 0.875rem;
    }
}

/* ===================================
           MOBILE SEARCH MODAL
           =================================== */
.search-modal-home {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 38, 38, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fadeInModal-home 0.2s ease;
}

.search-modal-home.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content-home {
    background: var(--td-white);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 500px;
    margin: 0;
    animation: slideDownModal-home 0.3s ease;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.modal-header-home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--td-gray-100);
}

.modal-title-home {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--td-dark);
    margin: 0;
    letter-spacing: -0.01em;
}

.modal-close-home {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: none;
    background: var(--td-gray-100);
    color: var(--td-gray-700);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.modal-close-home:hover {
    background: var(--td-gray-200);
    color: var(--td-dark);
}

.modal-body-home {
    padding: 1.5rem;
}

.modal-field-home {
    margin-bottom: 1.25rem;
}

.modal-field-label-home {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--td-primary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.modal-select-home {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1.5px solid var(--td-gray-200);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-family: var(--font-primary);
    color: var(--td-dark);
    background: var(--td-white);
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.125rem;
    padding-right: 3rem;
}

.modal-select-home:focus {
    outline: none;
    border-color: var(--td-secondary);
    box-shadow: 0 0 0 3px rgba(55, 212, 217, 0.15);
}

.modal-select-home:disabled {
    background-color: var(--td-gray-100);
    cursor: not-allowed;
    opacity: 0.5;
}

.modal-search-btn-home {
    width: 100%;
    padding: 1rem;
    background: var(--td-primary);
    color: var(--td-white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: var(--font-primary);
    cursor: pointer;
    transition:
        background var(--transition-base),
        box-shadow var(--transition-base);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.modal-search-btn-home:hover:not(:disabled) {
    background: var(--td-primary-dark);
    box-shadow: 0 4px 16px rgba(0, 57, 57, 0.25);
}

.modal-search-btn-home:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes fadeInModal-home {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideDownModal-home {
    from {
        opacity: 0;
        transform: translateY(-1.5rem) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hide regular search on mobile, show modal trigger */
@media (max-width: 768px) {
    .search-group-home {
        display: none;
    }

    .mobile-search-trigger-home {
        display: flex;
        align-items: center;
        gap: 0.875rem;
        width: 100%;
        padding: 1.125rem 1.5rem;
        background: var(--td-white);
        border: none;
        border-radius: var(--radius-lg);
        box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.25);
        cursor: pointer;
        text-align: left;
        transition: box-shadow var(--transition-base);
    }

    .mobile-search-trigger-home:hover {
        box-shadow: 0 20px 56px -8px rgba(0, 0, 0, 0.3);
    }

    .mobile-search-trigger-home i {
        font-size: 1.125rem;
        color: var(--td-secondary);
    }

    .mobile-search-trigger-home span {
        font-size: 0.9375rem;
        color: var(--td-gray-500);
        font-family: var(--font-primary);
    }

    .search-form-home {
        width: 100%;
    }
}

@media (min-width: 769px) {
    .mobile-search-trigger-home {
        display: none;
    }

    .search-modal-home {
        display: none !important;
    }
}

/* ===================================
               ABOUT HERO — SPLIT LAYOUT
               =================================== */
.hero-about {
    position: relative;
    width: 100%;
    height: 55vh;
    min-height: 400px;
    padding-top: 72px;
    display: flex;
    overflow: hidden;
}

.hero-left-about {
    position: relative;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.hero-left-bg-about {
    position: absolute;
    inset: 0;
    background: var(--td-primary);
    z-index: 0;
}

.hero-left-bg-about::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -20%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(55, 212, 217, 0.06) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.hero-left-bg-about::after {
    content: "";
    position: absolute;
    bottom: -5%;
    left: -10%;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(55, 212, 217, 0.04) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.hero-right-about {
    position: relative;
    width: 50%;
    overflow: hidden;
}

.hero-image-about {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay-about {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.25);
}

.hero-content-about {
    position: relative;
    z-index: 2;
    max-width: 480px;
    width: 85%;
    text-align: left;
    padding: 2rem 2rem 2rem 0;
}

.hero-eyebrow-about {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--td-secondary);
    margin-bottom: 1.25rem;
    padding: 0.4rem 1.25rem;
    border: 1px solid rgba(55, 212, 217, 0.3);
    border-radius: var(--radius-full);
    background: rgba(55, 212, 217, 0.08);
}

.hero-title-about {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--td-white);
    margin: 0 0 1rem;
    line-height: 1.1;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.hero-subtitle-about {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    color: rgba(255, 255, 255, 0.6);
    max-width: 400px;
    margin: 0;
    line-height: 1.65;
    font-weight: 400;
}

@keyframes scrollPulseAbout {
    0%,
    100% {
        opacity: 0.3;
        transform: scaleX(0.6);
        transform-origin: left;
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
        transform-origin: left;
    }
}

/* ===================================
               MISSION SECTION
               =================================== */
.mission-section-about {
    padding: 6rem 0;
    background: var(--td-white);
    position: relative;
}

.mission-section-about::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--td-gray-200),
        transparent
    );
}

.mission-grid-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.mission-text-about .section-tag-home {
    margin-bottom: 1rem;
}

.mission-heading-about {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    font-weight: 700;
    color: var(--td-primary);
    margin: 0.75rem 0 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.mission-body-about {
    font-size: 1rem;
    color: var(--td-gray-700);
    line-height: 1.75;
    margin: 0 0 1rem;
}

.mission-body-about:last-of-type {
    margin-bottom: 0;
}

.mission-divider-about {
    width: 48px;
    height: 3px;
    background: var(--td-secondary);
    border-radius: var(--radius-full);
    margin: 2rem 0;
}

.mission-conservation-about {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: var(--td-gray-100);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border-left: 3px solid var(--td-secondary);
}

.conservation-icon-about {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(55, 212, 217, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--td-secondary-dark);
    font-size: 1.125rem;
}

.conservation-text-about {
    font-size: 0.9375rem;
    color: var(--td-gray-700);
    line-height: 1.7;
    margin: 0;
}

.conservation-text-about strong {
    color: var(--td-primary);
    font-weight: 700;
}

/* ===================================
               IMAGE CLUSTER
               =================================== */
.mission-images-about {
    position: relative;
}

.image-cluster-about {
    position: relative;
    padding: 1.5rem;
}

.cluster-large-about {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 16px 48px -12px rgba(0, 57, 57, 0.2);
    z-index: 2;
}

.cluster-large-about img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.cluster-small-about {
    position: absolute;
    bottom: -1rem;
    right: -0.5rem;
    width: 55%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 36px -8px rgba(0, 57, 57, 0.25);
    z-index: 3;
    border: 4px solid var(--td-white);
}

.cluster-small-about img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.cluster-accent-about {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    border-radius: var(--radius-xl);
    background: var(--td-secondary);
    opacity: 0.12;
    z-index: 1;
}

/* ===================================
               FEATURES GRID
               =================================== */
.features-section-about {
    padding: 6rem 0;
    background: var(--td-gray-100);
}

.features-grid-about {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.feature-card-about {
    background: var(--td-white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid var(--td-gray-200);
    transition: all var(--transition-base);
    text-align: center;
}

.feature-card-about:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px -8px rgba(0, 57, 57, 0.1);
    border-color: transparent;
}

.feature-icon-about {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-md);
    background: rgba(55, 212, 217, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: var(--td-secondary-dark);
    font-size: 1.25rem;
    transition:
        background var(--transition-base),
        color var(--transition-base);
}

.feature-card-about:hover .feature-icon-about {
    background: var(--td-primary);
    color: var(--td-white);
}

.feature-title-about {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--td-dark);
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}

.feature-desc-about {
    font-size: 0.875rem;
    color: var(--td-gray-500);
    line-height: 1.65;
    margin: 0;
}

/* ===================================
               VIDEO BANNER
               =================================== */
.video-banner-about {
    padding: 5rem 0;
    background: var(--td-white);
}

.video-card-about {
    position: relative;
    width: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 21/9;
    min-height: 320px;
}

.video-bg-about {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay-about {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 38, 38, 0.75) 0%,
        rgba(0, 57, 57, 0.5) 50%,
        rgba(0, 38, 38, 0.7) 100%
    );
}

.video-content-about {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
    gap: 2rem;
}

.play-btn-about {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--td-white);
    font-size: 1.25rem;
    text-decoration: none;
    transition: all var(--transition-base);
}

.play-btn-about i {
    margin-left: 3px;
}

.play-btn-about:hover {
    background: var(--td-secondary);
    border-color: var(--td-secondary);
    color: var(--td-primary-dark);
    transform: scale(1.08);
    box-shadow: 0 0 0 12px rgba(55, 212, 217, 0.15);
}

.video-text-about {
    max-width: 500px;
}

.video-eyebrow-about {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--td-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.video-title-about {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--td-white);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* ===================================
               REUSED HOME CLASSES — ensure they
               render correctly on about page too.
               Testimonials, blog carousel, section
               headers, carousel nav, etc. are all
               pulled from the home stylesheet via
               layouts.app or a shared CSS file.
               Below are only the about-specific
               overrides if needed.
               =================================== */

/* Testimonials & Blog sections reuse home classes directly */

/* ===================================
               RESPONSIVE — TABLET
               =================================== */
@media (max-width: 1024px) {
    .mission-grid-about {
        gap: 3rem;
    }

    .cluster-large-about img {
        height: 340px;
    }

    .cluster-small-about img {
        height: 180px;
    }

    .features-grid-about {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===================================
               RESPONSIVE — MOBILE
               =================================== */
@media (max-width: 768px) {
    .hero-about {
        flex-direction: column;
        height: auto;
        min-height: auto;
    }

    .hero-left-about {
        width: 100%;
        min-height: 320px;
        padding: 2rem 0;
    }

    .hero-right-about {
        width: 100%;
        height: 220px;
        display: none;
    }

    .hero-content-about {
        width: 90%;
        max-width: none;
        text-align: center;
        padding: 1.5rem 1rem;
    }

    .hero-subtitle-about {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-scroll-cue-about {
        justify-content: center;
    }

    /* Mission */
    .mission-section-about {
        padding: 3.5rem 0;
    }

    .mission-grid-about {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .mission-text-about {
        text-align: center;
    }

    .mission-conservation-about {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .image-cluster-about {
        max-width: 400px;
        margin: 0 auto;
    }

    .cluster-large-about img {
        height: 280px;
    }

    .cluster-small-about {
        width: 50%;
        bottom: -0.5rem;
        right: 0;
    }

    .cluster-small-about img {
        height: 160px;
    }

    /* Features */
    .features-section-about {
        padding: 3.5rem 0;
    }

    .features-grid-about {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .feature-card-about {
        padding: 1.5rem;
    }

    /* Video */
    .video-banner-about {
        padding: 3rem 0;
    }

    .video-card-about {
        aspect-ratio: 16/10;
        min-height: 260px;
    }

    .play-btn-about {
        width: 4rem;
        height: 4rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-content-about {
        padding: 1rem;
    }

    .cluster-large-about img {
        height: 220px;
    }

    .cluster-small-about img {
        height: 130px;
    }

    .video-card-about {
        min-height: 220px;
        border-radius: var(--radius-lg);
    }
}

/* ===================================
               CONTACT HERO — SPLIT LAYOUT
               =================================== */
.hero-contact {
    position: relative;
    width: 100%;
    height: 55vh;
    min-height: 400px;
    padding-top: 72px;
    display: flex;
    overflow: hidden;
}

.hero-left-contact {
    position: relative;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.hero-left-bg-contact {
    position: absolute;
    inset: 0;
    background: var(--td-primary);
    z-index: 0;
}

.hero-left-bg-contact::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -20%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(55, 212, 217, 0.06) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.hero-left-bg-contact::after {
    content: "";
    position: absolute;
    bottom: -5%;
    left: -10%;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(55, 212, 217, 0.04) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.hero-right-contact {
    position: relative;
    width: 50%;
    overflow: hidden;
}

.hero-image-contact {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay-contact {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.25);
}

.hero-content-contact {
    position: relative;
    z-index: 2;
    max-width: 480px;
    width: 85%;
    text-align: left;
    padding: 2rem 2rem 2rem 0;
}

.hero-eyebrow-contact {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--td-secondary);
    margin-bottom: 1.25rem;
    padding: 0.4rem 1.25rem;
    border: 1px solid rgba(55, 212, 217, 0.3);
    border-radius: var(--radius-full);
    background: rgba(55, 212, 217, 0.08);
}

.hero-title-contact {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--td-white);
    margin: 0 0 1rem;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.hero-subtitle-contact {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    color: rgba(255, 255, 255, 0.6);
    max-width: 400px;
    margin: 0;
    line-height: 1.65;
    font-weight: 400;
}

/* ===================================
               TOAST NOTIFICATIONS
               =================================== */
.toast-contact {
    position: fixed;
    top: calc(var(--header-height, 72px) + 1rem);
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--td-white);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-left: 4px solid var(--td-success);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    animation:
        slideInToast 0.35s ease,
        fadeOutToast 0.35s ease 5s forwards;
    max-width: 420px;
    font-size: 0.9375rem;
    color: var(--td-dark);
    font-weight: 500;
}

.toast-error-contact {
    border-color: rgba(239, 68, 68, 0.2);
    border-left-color: var(--td-error);
}

.toast-icon-contact {
    font-size: 1.125rem;
    color: var(--td-success);
    flex-shrink: 0;
}

.toast-error-contact .toast-icon-contact {
    color: var(--td-error);
}

.toast-close-contact {
    background: none;
    border: none;
    color: var(--td-gray-400);
    cursor: pointer;
    padding: 0;
    font-size: 0.875rem;
    margin-left: 0.5rem;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.toast-close-contact:hover {
    color: var(--td-gray-700);
}

@keyframes slideInToast {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }

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

@keyframes fadeOutToast {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        pointer-events: none;
    }
}

/* ===================================
               FORM SECTION
               =================================== */
.form-section-contact {
    padding: 5rem 0;
    background: var(--td-white);
    position: relative;
}

.form-section-contact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--td-gray-200),
        transparent
    );
}

.contact-layout-contact {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3.5rem;
    align-items: start;
}

/* Form Column */
.section-header-contact {
    margin-bottom: 2rem;
}

.form-heading-contact {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--td-primary);
    margin: 0.75rem 0 0.5rem;
    letter-spacing: -0.02em;
}

.form-subheading-contact {
    font-size: 0.9375rem;
    color: var(--td-gray-500);
    line-height: 1.6;
    margin: 0;
}

.contact-form-contact {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.form-group-contact {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-label-contact {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--td-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-input-contact,
.form-textarea-contact {
    width: 100%;
    padding: 0.8125rem 1rem;
    border: 1.5px solid var(--td-gray-200);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-family: var(--font-primary);
    color: var(--td-dark);
    background: var(--td-white);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.form-input-contact:focus,
.form-textarea-contact:focus {
    outline: none;
    border-color: var(--td-secondary);
    box-shadow: 0 0 0 3px rgba(55, 212, 217, 0.12);
}

.form-input-contact::placeholder,
.form-textarea-contact::placeholder {
    color: var(--td-gray-400);
}

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

.form-error-contact {
    font-size: 0.75rem;
    color: var(--td-error);
    font-weight: 500;
}

.form-footer-contact {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
}

.form-submit-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 2rem;
    background: var(--td-primary);
    color: var(--td-white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: var(--font-primary);
    cursor: pointer;
    transition:
        background var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-fast);
    letter-spacing: 0.02em;
}

.form-submit-contact:hover {
    background: var(--td-primary-dark);
    box-shadow: 0 8px 24px rgba(0, 57, 57, 0.2);
    transform: translateY(-1px);
}

.form-submit-contact:active {
    transform: translateY(0);
}

.form-submit-contact i {
    font-size: 0.8125rem;
    transition: transform var(--transition-fast);
}

.form-submit-contact:hover i {
    transform: translateX(2px);
}

/* ===================================
               INFO COLUMN
               =================================== */
.info-column-contact {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: calc(var(--header-height, 72px) + 2rem);
}

.info-card-contact {
    background: var(--td-gray-100);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    border: 1px solid var(--td-gray-200);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.info-card-primary-contact {
    background: var(--td-primary);
    border-color: var(--td-primary);
}

.info-card-header-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info-card-title-contact {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--td-dark);
    margin: 0;
    letter-spacing: -0.01em;
}

.info-card-primary-contact .info-card-title-contact {
    color: var(--td-white);
}

.info-card-badge-contact {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    background: var(--td-secondary);
    color: var(--td-primary-dark);
}

.info-card-badge-secondary-contact {
    background: rgba(55, 212, 217, 0.12);
    color: var(--td-secondary-dark);
}

.info-item-contact {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
}

.info-icon-contact {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    background: rgba(55, 212, 217, 0.12);
    color: var(--td-secondary-dark);
}

.info-card-primary-contact .info-icon-contact {
    background: rgba(55, 212, 217, 0.15);
    color: var(--td-secondary);
}

.info-label-contact {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--td-gray-400);
    margin-bottom: 0.125rem;
}

.info-card-primary-contact .info-label-contact {
    color: rgba(255, 255, 255, 0.45);
}

.info-value-contact {
    font-size: 0.9rem;
    color: var(--td-dark);
    line-height: 1.5;
    margin: 0;
}

.info-card-primary-contact .info-value-contact {
    color: rgba(255, 255, 255, 0.85);
}

.info-link-contact {
    text-decoration: none;
    display: block;
    transition: color var(--transition-fast);
}

.info-link-contact:hover {
    color: var(--td-secondary);
}

.info-card-primary-contact .info-link-contact:hover {
    color: var(--td-secondary);
}

/* ===================================
               RESPONSIVE — TABLET
               =================================== */
@media (max-width: 1024px) {
    .contact-layout-contact {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .info-column-contact {
        position: static;
        flex-direction: row;
    }

    .info-card-contact {
        flex: 1;
    }
}

/* ===================================
               RESPONSIVE — MOBILE
               =================================== */
@media (max-width: 768px) {
    .hero-contact {
        flex-direction: column;
        height: auto;
        min-height: auto;
    }

    .hero-left-contact {
        width: 100%;
        min-height: 320px;
        padding: 2rem 0;
    }

    .hero-right-contact {
        width: 100%;
        height: 220px;
        display: none;
    }

    .hero-content-contact {
        width: 90%;
        max-width: none;
        text-align: center;
        padding: 1.5rem 1rem;
    }

    .hero-subtitle-contact {
        margin-left: auto;
        margin-right: auto;
    }

    .form-section-contact {
        padding: 3rem 0;
    }

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

    .form-footer-contact {
        flex-direction: column;
        align-items: stretch;
    }

    .form-submit-contact {
        justify-content: center;
    }

    .info-column-contact {
        flex-direction: column;
    }

    .toast-contact {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .hero-content-contact {
        padding: 1rem;
    }
}

/* ===================================
       LEGAL HERO — SPLIT LAYOUT
       =================================== */
.hero-legal {
    position: relative;
    width: 100%;
    height: 55vh;
    min-height: 400px;
    padding-top: 72px;
    display: flex;
    overflow: hidden;
}

.hero-left-legal {
    position: relative;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.hero-left-bg-legal {
    position: absolute;
    inset: 0;
    background: var(--td-primary);
    z-index: 0;
}

.hero-left-bg-legal::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -20%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(55, 212, 217, 0.06) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.hero-left-bg-legal::after {
    content: "";
    position: absolute;
    bottom: -5%;
    left: -10%;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(55, 212, 217, 0.04) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.hero-right-legal {
    position: relative;
    width: 50%;
    overflow: hidden;
}

.hero-image-legal {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay-legal {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.25);
}

.hero-content-legal {
    position: relative;
    z-index: 2;
    max-width: 480px;
    width: 85%;
    text-align: left;
    padding: 2rem 2rem 2rem 0;
}

.hero-eyebrow-legal {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--td-secondary);
    margin-bottom: 1.25rem;
    padding: 0.4rem 1.25rem;
    border: 1px solid rgba(55, 212, 217, 0.3);
    border-radius: var(--radius-full);
    background: rgba(55, 212, 217, 0.08);
}

.hero-title-legal {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--td-white);
    margin: 0 0 1rem;
    line-height: 1.1;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.hero-subtitle-legal {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    color: rgba(255, 255, 255, 0.6);
    max-width: 400px;
    margin: 0;
    line-height: 1.65;
    font-weight: 400;
}

/* ===================================
       CONTENT SECTION
       =================================== */
.content-section-legal {
    padding: 4rem 0 5rem;
    background: var(--td-gray-100);
    position: relative;
}

.content-section-legal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--td-gray-200),
        transparent
    );
}

.content-card-legal {
    background: var(--td-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--td-gray-200);
    padding: 3rem;
    max-width: 880px;
    margin: 0 auto;
    font-size: 1rem;
    color: var(--td-gray-700);
    line-height: 1.8;
}

/* ===================================
       TYPOGRAPHY — handles any HTML
       the user pastes into the card
       =================================== */
.content-card-legal h1,
.content-card-legal h2,
.content-card-legal h3,
.content-card-legal h4,
.content-card-legal h5,
.content-card-legal h6 {
    font-family: var(--font-display);
    color: var(--td-primary);
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin: 2rem 0 0.75rem;
}

.content-card-legal h1:first-child,
.content-card-legal h2:first-child,
.content-card-legal h3:first-child {
    margin-top: 0;
}

.content-card-legal h1 {
    font-size: 1.75rem;
}
.content-card-legal h2 {
    font-size: 1.5rem;
}
.content-card-legal h3 {
    font-size: 1.25rem;
}
.content-card-legal h4 {
    font-size: 1.0625rem;
}
.content-card-legal h5 {
    font-size: 1rem;
}
.content-card-legal h6 {
    font-size: 0.9375rem;
}

.content-card-legal p {
    margin: 0 0 1.25rem;
}

.content-card-legal p:last-child {
    margin-bottom: 0;
}

.content-card-legal a {
    color: var(--td-secondary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.content-card-legal a:hover {
    color: var(--td-primary);
}

.content-card-legal strong,
.content-card-legal b {
    color: var(--td-dark);
    font-weight: 700;
}

.content-card-legal ul,
.content-card-legal ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.content-card-legal li {
    margin-bottom: 0.5rem;
}

.content-card-legal li:last-child {
    margin-bottom: 0;
}

.content-card-legal blockquote {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--td-secondary);
    background: var(--td-gray-100);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--td-gray-600);
}

.content-card-legal blockquote p:last-child {
    margin-bottom: 0;
}

.content-card-legal hr {
    border: none;
    height: 1px;
    background: var(--td-gray-200);
    margin: 2rem 0;
}

.content-card-legal table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
}

.content-card-legal th,
.content-card-legal td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--td-gray-200);
    text-align: left;
}

.content-card-legal th {
    background: var(--td-gray-100);
    font-weight: 700;
    color: var(--td-primary);
}

.content-card-legal img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 1.5rem 0;
}

.content-card-legal pre,
.content-card-legal code {
    font-size: 0.875rem;
    background: var(--td-gray-100);
    border-radius: var(--radius-sm);
}

.content-card-legal code {
    padding: 0.15rem 0.4rem;
}

.content-card-legal pre {
    padding: 1.25rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid var(--td-gray-200);
}

.content-card-legal pre code {
    padding: 0;
    background: none;
}

/* ===================================
       RESPONSIVE
       =================================== */
@media (max-width: 768px) {
    .hero-legal {
        flex-direction: column;
        height: auto;
        min-height: auto;
    }

    .hero-left-legal {
        width: 100%;
        min-height: 320px;
        padding: 2rem 0;
    }

    .hero-right-legal {
        width: 100%;
        height: 220px;
        display: none;
    }

    .hero-content-legal {
        width: 90%;
        max-width: none;
        text-align: center;
        padding: 1.5rem 1rem;
    }

    .hero-subtitle-legal {
        margin-left: auto;
        margin-right: auto;
    }

    .content-section-legal {
        padding: 2.5rem 0 3rem;
    }

    .content-card-legal {
        padding: 1.75rem;
    }
}

@media (max-width: 480px) {
    .hero-content-legal {
        padding: 1rem;
    }

    .content-card-legal {
        padding: 1.25rem;
        font-size: 0.9375rem;
    }
}

/* filter drop down on index pages */

.filters-toggle-tours {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.8rem 1.25rem;
    background: var(--td-white, #fff);
    border: 1.5px solid var(--td-gray-200, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-primary, inherit);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--td-primary, #003939);
    cursor: pointer;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.filters-toggle-tours:hover {
    border-color: var(--td-secondary, #37d4d9);
    box-shadow: 0 0 0 3px rgba(55, 212, 217, 0.1);
}

.filters-toggle-tours.filters-open-tours {
    border-color: var(--td-secondary, #37d4d9);
    background: rgba(55, 212, 217, 0.04);
}

.filters-toggle-arrow-tours {
    font-size: 0.6875rem;
    transition: transform 0.3s ease;
    margin-left: auto;
}

.filters-open-tours .filters-toggle-arrow-tours {
    transform: rotate(180deg);
}

.pagination-tours {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.page-btn-tours {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.625rem;
    border: 1.5px solid var(--td-gray-200, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    background: var(--td-white, #fff);
    color: var(--td-dark, #0f172a);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-primary, inherit);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    text-decoration: none;
}

.page-btn-tours:hover:not(.page-btn-active-tours) {
    border-color: var(--td-secondary, #37d4d9);
    color: var(--td-primary, #003939);
    background: rgba(55, 212, 217, 0.06);
}

.page-btn-active-tours {
    background: var(--td-primary, #003939);
    color: var(--td-white, #fff);
    border-color: var(--td-primary, #003939);
    cursor: default;
}

.page-btn-arrow-tours {
    font-size: 0.75rem;
}

.page-ellipsis-tours {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2.5rem;
    color: var(--td-gray-400, #9ca3af);
    font-size: 0.875rem;
    font-weight: 600;
    user-select: none;
}

.pagination-wrapper {
    display: none;
}

@media (max-width: 768px) {
    .filters-toggle-tours {
        display: flex;
        margin-bottom: 0.75rem;
    }

    .filters-collapsible-tours {
        max-height: 0;
        overflow: hidden;
        transition:
            max-height 0.35s ease,
            opacity 0.25s ease;
        opacity: 0;
    }

    .filters-collapsible-tours.filters-visible-tours {
        max-height: 1200px;
        opacity: 1;
    }

    .pagination-tours {
        gap: 0.25rem;
    }

    .page-btn-tours {
        min-width: 2.25rem;
        height: 2.25rem;
        font-size: 0.8125rem;
    }
}

/* ===================================
               BLOG HERO — SPLIT LAYOUT
               =================================== */
.hero-blog {
    position: relative;
    width: 100%;
    height: 55vh;
    min-height: 400px;
    display: flex;
    padding-top: 72px;
    overflow: hidden;
}

.hero-left-blog {
    position: relative;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.hero-left-bg-blog {
    position: absolute;
    inset: 0;
    background: var(--td-primary);
    z-index: 0;
}

.hero-left-bg-blog::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -20%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(55, 212, 217, 0.06) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.hero-left-bg-blog::after {
    content: "";
    position: absolute;
    bottom: -5%;
    left: -10%;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(55, 212, 217, 0.04) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.hero-right-blog {
    position: relative;
    width: 50%;
    overflow: hidden;
}

.hero-image-blog {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay-blog {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.25);
}

.hero-content-blog {
    position: relative;
    z-index: 2;
    max-width: 480px;
    width: 85%;
    text-align: left;
    padding: 2rem 2rem 2rem 0;
}

.hero-eyebrow-blog {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--td-secondary);
    margin-bottom: 1.25rem;
    padding: 0.4rem 1.25rem;
    border: 1px solid rgba(55, 212, 217, 0.3);
    border-radius: var(--radius-full);
    background: rgba(55, 212, 217, 0.08);
}

.hero-title-blog {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--td-white);
    margin: 0 0 1rem;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.hero-subtitle-blog {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    color: rgba(255, 255, 255, 0.6);
    max-width: 400px;
    margin: 0;
    line-height: 1.65;
    font-weight: 400;
}

/* ===================================
               BLOG GRID SECTION
               =================================== */
.grid-section-blog {
    padding: 4rem 0 5rem;
    background: var(--td-gray-100);
    position: relative;
}

.grid-section-blog::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--td-gray-200),
        transparent
    );
}

/* Toolbar */
.grid-toolbar-blog {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.grid-count-blog {
    font-size: 0.875rem;
    color: var(--td-gray-500);
    margin: 0;
    font-weight: 500;
}

.grid-count-blog span {
    color: var(--td-primary);
    font-weight: 700;
}

.grid-search-blog {
    position: relative;
    width: 280px;
}

.grid-search-blog i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--td-gray-400);
    font-size: 0.8125rem;
    pointer-events: none;
}

.grid-search-input-blog {
    width: 100%;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    border: 1.5px solid var(--td-gray-200);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-family: var(--font-primary);
    color: var(--td-dark);
    background: var(--td-white);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.grid-search-input-blog:focus {
    outline: none;
    border-color: var(--td-secondary);
    box-shadow: 0 0 0 3px rgba(55, 212, 217, 0.12);
}

.grid-search-input-blog::placeholder {
    color: var(--td-gray-400);
}

/* Grid */
.grid-blog {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Blog Cards */
.card-blog {
    background: var(--td-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--td-gray-200);
    transition: all var(--transition-base);
}

.card-blog:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px -8px rgba(0, 57, 57, 0.12);
    border-color: transparent;
}

.card-link-blog {
    display: block;
    text-decoration: none;
    color: inherit;
}

.card-image-blog {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--td-gray-200);
}

.card-image-blog img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.card-blog:hover .card-image-blog img {
    transform: scale(1.06);
}

.card-image-overlay-blog {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(0, 38, 38, 0.45) 0%,
        transparent 55%
    );
}

.card-image-placeholder-blog {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--td-gray-200);
    color: var(--td-gray-400);
    font-size: 2.5rem;
}

.card-body-blog {
    padding: 1.25rem 1.5rem 1.5rem;
}

.card-meta-blog {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
    flex-wrap: wrap;
}

.card-date-blog {
    font-size: 0.75rem;
    color: var(--td-gray-400);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.card-date-blog i {
    font-size: 0.7rem;
    color: var(--td-secondary);
}

.card-author-blog {
    font-size: 0.75rem;
    color: var(--td-gray-400);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.card-author-blog i {
    font-size: 0.7rem;
    color: var(--td-secondary);
}

.card-title-blog {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--td-dark);
    margin: 0 0 0.5rem;
    line-height: 1.35;
    letter-spacing: -0.01em;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    display: box;
    box-orient: vertical;
    line-clamp: 2;

    overflow: hidden;
}

.card-excerpt-blog {
    font-size: 0.8475rem;
    color: var(--td-gray-500);
    line-height: 1.6;
    margin: 0 0 1rem;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    display: box;
    box-orient: vertical;
    line-clamp: 3;

    overflow: hidden;
}

.card-read-more-blog {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--td-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition:
        gap var(--transition-fast),
        color var(--transition-fast);
}

.card-read-more-blog i {
    font-size: 0.7rem;
    transition: transform var(--transition-fast);
}

.card-blog:hover .card-read-more-blog {
    color: var(--td-secondary-dark);
    gap: 0.6rem;
}

.card-blog:hover .card-read-more-blog i {
    transform: translateX(2px);
}

/* ===================================
               EMPTY STATE
               =================================== */
.grid-empty-blog {
    text-align: center;
    padding: 4rem 2rem;
}

.grid-empty-blog i {
    font-size: 2.5rem;
    color: var(--td-gray-300);
    margin-bottom: 1rem;
}

.grid-empty-blog h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--td-dark);
    margin: 0 0 0.5rem;
}

.grid-empty-blog p {
    font-size: 0.9375rem;
    color: var(--td-gray-500);
    margin: 0 0 1.5rem;
}

.grid-empty-btn-blog {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    background: var(--td-primary);
    color: var(--td-white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: background var(--transition-base);
}

.grid-empty-btn-blog:hover {
    background: var(--td-primary-dark);
}

/* ===================================
               PAGINATION
               =================================== */
.pagination-blog {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.page-btn-blog {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.625rem;
    border: 1.5px solid var(--td-gray-200);
    border-radius: var(--radius-md);
    background: var(--td-white);
    color: var(--td-dark);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.page-btn-blog:hover:not(.page-btn-active-blog):not(:disabled) {
    border-color: var(--td-secondary);
    color: var(--td-primary);
    background: rgba(55, 212, 217, 0.06);
}

.page-btn-active-blog {
    background: var(--td-primary);
    color: var(--td-white);
    border-color: var(--td-primary);
}

.page-btn-blog:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.page-btn-arrow-blog {
    font-size: 0.75rem;
}

.page-ellipsis-blog {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2.5rem;
    color: var(--td-gray-400);
    font-size: 0.875rem;
    font-weight: 600;
    user-select: none;
}

/* ===================================
               RESPONSIVE — TABLET
               =================================== */
@media (max-width: 1024px) {
    .grid-blog {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===================================
               RESPONSIVE — MOBILE
               =================================== */
@media (max-width: 768px) {
    .hero-blog {
        flex-direction: column;
        height: auto;
        min-height: auto;
    }

    .hero-left-blog {
        width: 100%;
        min-height: 320px;
        padding: 2rem 0;
    }

    .hero-right-blog {
        width: 100%;
        height: 220px;
        display: none;
    }

    .hero-content-blog {
        width: 90%;
        max-width: none;
        text-align: center;
        padding: 1.5rem 1rem;
    }

    .hero-subtitle-blog {
        margin-left: auto;
        margin-right: auto;
    }

    .grid-section-blog {
        padding: 2.5rem 0 3.5rem;
    }

    .grid-toolbar-blog {
        flex-direction: column;
        align-items: stretch;
    }

    .grid-search-blog {
        width: 100%;
    }

    .grid-blog {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

@media (max-width: 480px) {
    .hero-content-blog {
        padding: 1rem;
    }

    .pagination-blog {
        gap: 0.25rem;
    }

    .page-btn-blog {
        min-width: 2.25rem;
        height: 2.25rem;
        font-size: 0.8125rem;
    }
}

/* ===================================
               HERO — FULL-WIDTH IMAGE BANNER
               =================================== */
.hero-blogshow {
    position: relative;
    width: 100%;
    height: 55vh;
    min-height: 380px;
    max-height: 520px;
    overflow: hidden;
    background: var(--td-primary);
}

.hero-img-blogshow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-gradient-blogshow {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(0, 38, 38, 0.85) 0%,
        rgba(0, 38, 38, 0.4) 45%,
        rgba(0, 38, 38, 0.2) 100%
    );
}

.hero-inner-blogshow {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.hero-inner-blogshow .container-home {
    padding-bottom: 3rem;
    width: 100%;
}

.hero-back-blogshow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--td-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    transition:
        gap var(--transition-fast),
        opacity var(--transition-fast);
    opacity: 0.8;
}

.hero-back-blogshow:hover {
    gap: 0.75rem;
    opacity: 1;
}

.hero-back-blogshow i {
    font-size: 0.7rem;
}

.hero-title-blogshow {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--td-white);
    margin: 0 0 1rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 750px;
}

.hero-meta-blogshow {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.hero-meta-item-blogshow {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hero-meta-item-blogshow i {
    color: var(--td-secondary);
    font-size: 0.75rem;
}

/* ===================================
               ARTICLE LAYOUT
               =================================== */
.article-section-blogshow {
    padding: 4rem 0 5rem;
    background: var(--td-gray-100);
}

.article-layout-blogshow {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}

/* ===================================
               MAIN ARTICLE
               =================================== */
.article-main-blogshow {
    background: var(--td-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--td-gray-200);
    padding: 2.5rem;
    min-width: 0;
}

/* Lead / Summary */
.article-lead-blogshow {
    font-size: 1.125rem;
    color: var(--td-gray-700);
    line-height: 1.75;
    margin: 0 0 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--td-gray-200);
    font-weight: 500;
}

/* Rich-text content from Contentful */
.article-content-blogshow {
    font-size: 1rem;
    color: var(--td-gray-700);
    line-height: 1.8;
}

.article-content-blogshow h1,
.article-content-blogshow h2,
.article-content-blogshow h3,
.article-content-blogshow h4 {
    font-family: var(--font-display);
    color: var(--td-primary);
    margin: 2rem 0 0.75rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.article-content-blogshow h1 {
    font-size: 1.75rem;
}

.article-content-blogshow h2 {
    font-size: 1.5rem;
}

.article-content-blogshow h3 {
    font-size: 1.25rem;
}

.article-content-blogshow h4 {
    font-size: 1.0625rem;
}

.article-content-blogshow p {
    margin: 0 0 1.25rem;
}

.article-content-blogshow img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 1.5rem 0;
}

.article-content-blogshow a {
    color: var(--td-secondary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.article-content-blogshow a:hover {
    color: var(--td-primary);
}

.article-content-blogshow ul,
.article-content-blogshow ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.article-content-blogshow li {
    margin-bottom: 0.5rem;
}

.article-content-blogshow blockquote {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--td-secondary);
    background: var(--td-gray-100);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--td-gray-600);
}

.article-content-blogshow blockquote p:last-child {
    margin-bottom: 0;
}

.article-content-blogshow hr {
    border: none;
    height: 1px;
    background: var(--td-gray-200);
    margin: 2rem 0;
}

.article-content-blogshow table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
}

.article-content-blogshow th,
.article-content-blogshow td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--td-gray-200);
    text-align: left;
}

.article-content-blogshow th {
    background: var(--td-gray-100);
    font-weight: 700;
    color: var(--td-primary);
}

/* ===================================
               FAQS ACCORDION
               =================================== */
.faqs-blogshow {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--td-gray-200);
}

.faqs-heading-blogshow {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--td-primary);
    margin: 0 0 1.5rem;
    letter-spacing: -0.02em;
}

.faqs-list-blogshow {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.faq-item-blogshow {
    border: 1px solid var(--td-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.faq-item-blogshow.faq-open-blogshow {
    border-color: rgba(55, 212, 217, 0.3);
}

.faq-trigger-blogshow {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--td-white);
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-primary);
    transition: background var(--transition-fast);
}

.faq-trigger-blogshow:hover {
    background: var(--td-gray-100);
}

.faq-open-blogshow .faq-trigger-blogshow {
    background: rgba(55, 212, 217, 0.05);
}

.faq-question-blogshow {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--td-dark);
    line-height: 1.4;
}

.faq-icon-blogshow {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--td-secondary-dark);
    transition: transform var(--transition-base);
}

.faq-open-blogshow .faq-icon-blogshow {
    transform: rotate(45deg);
}

.faq-answer-blogshow {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-answer-inner-blogshow {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.9375rem;
    color: var(--td-gray-600);
    line-height: 1.7;
}

.faq-answer-inner-blogshow p {
    margin: 0 0 0.75rem;
}

.faq-answer-inner-blogshow p:last-child {
    margin-bottom: 0;
}

/* ===================================
               SIDEBAR
               =================================== */
.article-sidebar-blogshow {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: calc(var(--header-height, 72px) + 2rem);
}

.sidebar-card-blogshow {
    background: var(--td-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--td-gray-200);
    padding: 1.5rem;
}

.sidebar-card-title-blogshow {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--td-dark);
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Author Card */
.author-card-blogshow {
    background: var(--td-primary);
    border-color: var(--td-primary);
}

.author-top-blogshow {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.author-avatar-blogshow {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(55, 212, 217, 0.3);
}

.author-avatar-placeholder-blogshow {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(55, 212, 217, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--td-secondary);
    font-size: 1rem;
}

.author-label-blogshow {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.125rem;
}

.author-name-blogshow {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--td-white);
    margin: 0;
}

/* Share Card */
.share-links-blogshow {
    display: flex;
    gap: 0.5rem;
}

.share-btn-blogshow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--td-gray-200);
    background: var(--td-white);
    color: var(--td-gray-500);
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.share-btn-blogshow:hover {
    border-color: transparent;
    color: var(--td-white);
}

.share-fb-blogshow:hover {
    background: #1877f2;
}

.share-tw-blogshow:hover {
    background: #1da1f2;
}

.share-wa-blogshow:hover {
    background: #25d366;
}

.share-copy-blogshow:hover {
    background: var(--td-primary);
}

.share-copy-blogshow.copied-blogshow {
    background: var(--td-secondary);
    border-color: var(--td-secondary);
    color: var(--td-primary-dark);
}

/* Back Link */
.sidebar-back-blogshow {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    background: var(--td-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--td-gray-200);
    color: var(--td-primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.sidebar-back-blogshow:hover {
    background: var(--td-primary);
    color: var(--td-white);
    border-color: var(--td-primary);
}

.sidebar-back-blogshow i {
    font-size: 0.75rem;
    transition: transform var(--transition-fast);
}

.sidebar-back-blogshow:hover i {
    transform: translateX(-2px);
}

/* ===================================
               RESPONSIVE — TABLET
               =================================== */
@media (max-width: 1024px) {
    .article-layout-blogshow {
        grid-template-columns: 1fr 280px;
        gap: 2rem;
    }

    .article-main-blogshow {
        padding: 2rem;
    }
}

/* ===================================
               RESPONSIVE — MOBILE
               =================================== */
@media (max-width: 768px) {
    .hero-blogshow {
        height: auto;
        min-height: 320px;
    }

    .hero-inner-blogshow {
        margin-top: 85px;
    }

    .hero-inner-blogshow .container-home {
        padding-bottom: 2rem;
    }

    .hero-title-blogshow {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    .article-section-blogshow {
        padding: 2rem 0 3rem;
    }

    .article-layout-blogshow {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .article-main-blogshow {
        padding: 1.5rem;
    }

    .article-lead-blogshow {
        font-size: 1rem;
    }

    .article-sidebar-blogshow {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-card-blogshow {
        flex: 1;
        min-width: 200px;
    }

    .sidebar-back-blogshow {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hero-blogshow {
        min-height: 280px;
    }

    .article-main-blogshow {
        padding: 1.25rem;
    }

    .article-content-blogshow {
        font-size: 0.9375rem;
    }

    .sidebar-card-blogshow {
        min-width: 100%;
    }
}