/* ========================================
   TEMAN UMROH - OPTIMIZED GLOBAL CSS
   ======================================== */
/* 
 * Consolidated and optimized CSS for consistent styling
 * - Eliminated duplications
 * - Organized by component type
 * - Consistent spacing and typography
 * - Unified color system
 */


/* ========================================
   GOOGLE FONTS FALLBACK HANDLING
   ======================================== */
/* Fallback for when Google Fonts fails to load */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Inter Regular'), local('Inter-Regular'), var(--font-fallback);
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Inter Bold'), local('Inter-Bold'), var(--font-fallback);
}

/* Ensure fallback fonts are used when Google Fonts fails */
body, html {
    font-family: var(--font-family-base);
}

/* Force fallback for critical elements */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.lead, p, span, div, small, label, a {
    font-family: var(--font-family-base);
}

:root {
    /* Theme Colors - Primary */
    --primary-blue: #0D6EFD;
    --secondary-gray: #6C757D;
    --success-green: #198754;
    --warning-orange: #FFC107;
    --danger-red: #DC3545;
    --info-blue: #0DCAF0;
    --dark-color: #3D2C20;
    --light-color: #F8F9FA;
    --pure-white: #FFFFFF;
    
    /* Primary Color with Alpha */
    --primary-blue-10: rgba(13, 110, 253, 0.1);
    --primary-blue-20: rgba(13, 110, 253, 0.2);
    --primary-blue-25: rgba(13, 110, 253, 0.25);
    --primary-blue-30: rgba(13, 110, 253, 0.3);
    
    /* Secondary Color with Alpha */
    --secondary-gray-10: rgba(108, 117, 125, 0.1);
    --secondary-gray-20: rgba(108, 117, 125, 0.2);
    --secondary-gray-25: rgba(108, 117, 125, 0.25);
    --secondary-gray-30: rgba(108, 117, 125, 0.3);
    
    /* Supporting Colors */
    --charcoal-gray: #1C1C1C;
    --smoke-gray: #F5F5F5;
    --light-gray: #f2f3f8;
    --border-gray: #e3e5e7;
    --sand-beige: #E6D5B8;
    
    /* Gradients */
    --primary-gradient: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-gray) 100%);
    --primary-gradient-reverse: linear-gradient(135deg, var(--secondary-gray) 0%, var(--primary-blue) 100%);
    --primary-gradient-vertical: linear-gradient(180deg, var(--primary-blue) 0%, var(--secondary-gray) 100%);
    --primary-gradient-radial: radial-gradient(circle, var(--primary-blue) 0%, var(--secondary-gray) 100%);
    --success-gradient: linear-gradient(135deg, var(--success-green) 0%, var(--primary-blue) 100%);
    --warning-gradient: linear-gradient(135deg, var(--warning-orange) 0%, var(--danger-red) 100%);
    --danger-gradient: linear-gradient(135deg, var(--danger-red) 0%, var(--dark-color) 100%);
    --dark-gradient: linear-gradient(135deg, var(--dark-color) 0%, var(--charcoal-gray) 100%);
    --light-gradient: linear-gradient(135deg, var(--light-color) 0%, var(--pure-white) 100%);
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    
    /* Border Radius */
    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Typography - Unified Font System with Fallbacks */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --theme-font-family: var(--font-family-base);
    --form-font-family: var(--font-family-base);
    
    /* Fallback fonts for when Google Fonts fails to load */
    --font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-awesome-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'FontAwesome';
    
    /* Font Weights - Consistent Scale */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    
    /* Spacing - Consistent Scale */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Component Sizes - Bootstrap 5.3 Compatible */
    --btn-padding-sm: 0.25rem 0.5rem;
    --btn-padding-md: 0.375rem 0.75rem;
    --btn-padding-lg: 0.5rem 1rem;
    --form-padding-sm: 0.25rem 0.5rem;
    --form-padding-md: 0.375rem 0.75rem;
    --form-padding-lg: 0.5rem 1rem;
}

/* Global Base Styles */
* {
    box-sizing: border-box;
}

/* Typography Base */
html {
    font-family: var(--font-family-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
    font-size: 1rem;
    color: var(--dark-color);
    background-color: var(--light-gray);
}

/* Typography Elements - Unified */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--dark-color);
    margin: 0 0 var(--spacing-md) 0;
}

p, div, small, label {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
    color: var(--dark-color);
}

span {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
    color: var(--dark-color);
}

a {
    font-family: var(--font-family-base);
    text-decoration: none;
    color: inherit;
}

/* Display Typography */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin: 0 0 var(--spacing-md) 0;
}

.lead {
    font-family: var(--font-family-base);
    font-size: 1.25rem;
    font-weight: var(--font-weight-normal);
    color: var(--secondary-gray);
    line-height: 1.6;
}


/* Typography */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: var(--font-weight-extrabold);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--dark-color);
}

.lead {
    font-size: 1.25rem;
    font-weight: var(--font-weight-normal);
    color: var(--secondary-gray);
}

/* ========================================
   GLOBAL BUTTON STYLES - BOOTSTRAP 5.3 COMPATIBLE
   ======================================== */
/* All buttons now use Bootstrap 5.3 original sizing specifications */

/* Button Base - Unified */
.btn {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-normal);
    border-radius: var(--border-radius-md);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Button Sizes - Bootstrap 5.3 Compatible */
.btn-sm {
    padding: var(--btn-padding-sm);
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

.btn {
    padding: var(--btn-padding-md);
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

.btn-lg {
    padding: var(--btn-padding-lg);
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}

/* Button Hover Effect */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--transition-slow);
}

.btn:hover::before {
    left: 100%;
}

/* Primary Button */
.btn-primary {
    background: var(--primary-blue);
    color: var(--pure-white);
    box-shadow: 0 4px 15px var(--primary-blue-30);
    backdrop-filter: blur(10px);
}

.btn-primary:hover {
    background: var(--primary-gradient-reverse);
    color: var(--pure-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--primary-blue-30);
}

/* Outline Primary Button */
.btn-outline-primary {
    border: 1px solid var(--primary-blue);
    color: var(--primary-blue);
    background: linear-gradient(135deg, transparent 0%, var(--secondary-gray-10) 100%);
    backdrop-filter: blur(10px);
}

.btn-outline-primary:hover {
    background: var(--primary-gradient);
    border-color: var(--primary-blue);
    color: var(--pure-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--primary-blue-30);
}

/* Focus States */
.btn:focus {
    box-shadow: 0 0 0 3px var(--primary-blue-25);
    outline: none;
}

.btn-primary:focus {
    box-shadow: 0 0 0 3px var(--primary-blue-25);
}

.btn-outline-primary:focus {
    box-shadow: 0 0 0 3px var(--primary-blue-25);
}

/* Secondary Button */
.btn-secondary {
    background: var(--secondary-gray);
    color: var(--pure-white);
    box-shadow: 0 4px 15px var(--secondary-gray-30);
}

.btn-secondary:hover {
    background: var(--dark-color);
    color: var(--pure-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--secondary-gray-30);
}

/* Outline Secondary Button */
.btn-outline-secondary {
    border: 2px solid var(--secondary-gray);
    color: var(--secondary-gray);
    background: linear-gradient(135deg, transparent 0%, var(--secondary-gray-10) 100%);
}

.btn-outline-secondary:hover {
    background: var(--secondary-gray);
    border-color: var(--secondary-gray);
    color: var(--pure-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--secondary-gray-30);
}

/* Outline Dark Button */
.btn-outline-dark {
    border: 2px solid var(--dark-color);
    color: var(--dark-color);
    background: linear-gradient(135deg, transparent 0%, var(--secondary-gray-10) 100%);
}

.btn-outline-dark:hover {
    background: var(--dark-color);
    border-color: var(--dark-color);
    color: var(--pure-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(33, 37, 41, 0.3);
}

/* Button Variations */
.btn-gradient-primary {
    background: var(--primary-gradient);
    color: var(--pure-white);
    border: none;
    box-shadow: 0 4px 15px var(--primary-blue-30);
}

.btn-gradient-vertical {
    background: var(--primary-gradient-vertical);
    color: var(--pure-white);
    border: none;
    box-shadow: 0 4px 15px var(--primary-blue-30);
}

.btn-gradient-radial {
    background: var(--primary-gradient-radial);
    color: var(--pure-white);
    border: none;
    box-shadow: 0 4px 15px var(--primary-blue-30);
}

.btn-gradient-radial:hover {
    background: var(--primary-gradient);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--primary-blue-30), 0 4px 15px var(--secondary-gray-20);
}

/* White Button Styles */
.btn-white {
    background-color: var(--pure-white);
    color: var(--primary-blue);
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-white:hover {
    background-color: var(--pure-white);
    color: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Outline White Button Styles */
.btn-outline-white {
    border: 2px solid var(--pure-white);
    color: var(--pure-white);
    background: transparent;
}

.btn-outline-white:hover {
    background: var(--pure-white);
    color: var(--primary-blue);
    border-color: var(--pure-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

/* Bootstrap Button Size Classes - Now Available */

/* Global Card Styles */
.card {
    border: 0.75px solid var(--border-gray);
    transition: all var(--transition-normal);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

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

.card-body {
    padding: var(--spacing-xl);
}

/* ========================================
   GLOBAL FORM STYLES - BOOTSTRAP 5.3 COMPATIBLE
   ======================================== */
/* All form elements now use Bootstrap 5.3 original sizing specifications */

/* Form Controls - Unified */
.form-control, .form-select, 
input[type="text"], input[type="email"], input[type="password"], 
input[type="number"], input[type="tel"], input[type="url"], 
input[type="search"], textarea, select {
    border-radius: 0.25rem;
    transition: all var(--transition-normal);
    background: rgba(255, 255, 255, 0.9);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-normal);
    padding: var(--form-padding-md);
    font-size: 0.875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-shadow: none !important;
}

/* Form Size Variants - Bootstrap 5.3 Compatible */
.form-control-sm, .form-select-sm {
    padding: var(--form-padding-sm);
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.form-control-lg, .form-select-lg {
    padding: var(--form-padding-lg);
    font-size: 1.25rem;
    border-radius: 0.3rem;
}

.form-control:focus, .form-select:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, 
input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus, 
input[type="search"]:focus, textarea:focus, select:focus {
    border-color: var(--primary-blue);
    box-shadow: none;
    background: var(--pure-white);
    outline: none;
}

.form-control:hover, .form-select:hover,
input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, 
input[type="number"]:hover, input[type="tel"]:hover, input[type="url"]:hover, 
input[type="search"]:hover, textarea:hover, select:hover {
    border-color: var(--primary-blue);
}

/* Textarea specific styles - Bootstrap 5.3 */
textarea {
    min-height: 200px;
    height: auto;
    resize: vertical;
    padding: var(--form-padding-md);
    line-height: 1.5;
}

/* Textarea size variants */
textarea.form-control-sm {
    padding: var(--form-padding-sm);
    font-size: 0.875rem;
    border-radius: 0.2rem;
}

textarea.form-control-lg {
    padding: var(--form-padding-lg);
    font-size: 1.25rem;
    border-radius: 0.3rem;
}

/* Placeholder styling */
.form-control::placeholder, 
input[type="text"]::placeholder, input[type="email"]::placeholder, 
input[type="password"]::placeholder, input[type="number"]::placeholder, 
input[type="tel"]::placeholder, input[type="url"]::placeholder, 
input[type="search"]::placeholder, textarea::placeholder {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-normal);
}

/* Checkbox and Radio Button Styling - Bootstrap 5.3 */
.form-check-input, input[type="radio"] {
    border: 1px solid var(--primary-blue-20);
    border-radius: 0.2rem;
    transition: all var(--transition-normal);
    background: rgba(255, 255, 255, 0.9);
    font-family: var(--font-family-base);
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    vertical-align: top;
}

.form-check-input:checked, input[type="radio"]:checked {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.form-check-input:focus, input[type="radio"]:focus {
    box-shadow: none;
    outline: none;
}

.form-check-input:hover, input[type="radio"]:hover {
    border-color: var(--primary-blue-30);
}

/* Form check label styling */
.form-check-label {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-normal);
    color: var(--dark-color);
}

/* Switch Button Styling - Precise */
.form-check.form-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    padding: 0.25rem 0;
}

.form-check.form-switch .form-check-input {
    width: 2.75rem;
    height: 1.5rem;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 1.5rem;
    background-image: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form-check.form-switch .form-check-input:before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 1.25rem;
    height: 1.25rem;
    background-color: #ffffff;
    border-radius: 50%;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transform-origin: center;
}

.form-check.form-switch .form-check-input:checked {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.form-check.form-switch .form-check-input:checked:before {
    transform: translateX(1.25rem);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    top: 1px;
    left: 1px;
}

.form-check.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    outline: none;
}

.form-check.form-switch .form-check-input:hover {
    border-color: var(--primary-blue-30);
}

.form-check.form-switch .form-check-input:hover:checked {
    background-color: var(--primary-blue-80);
    border-color: var(--primary-blue-80);
}

.form-check.form-switch .form-check-label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dark-color);
    cursor: pointer;
    line-height: 1.4;
    user-select: none;
}

/* Small Switch Button for Compact Layouts */
.form-check.form-switch .form-check-label.small {
    font-size: 0.75rem;
    font-weight: 400;
}

/* Switch Button in Cards */
.card .form-check.form-switch {
    padding: 0.5rem 0;
}

.card .form-check.form-switch .form-check-label {
    font-size: 0.8rem;
}

/* Disabled State */
.form-check.form-switch .form-check-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-check.form-switch .form-check-input:disabled:before {
    background-color: #f8f9fa;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Perfect Symmetry for Switch Button */
.form-check.form-switch .form-check-input {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.form-check.form-switch .form-check-input:before {
    position: absolute;
    top: 50%;
    left: 1px;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
}

.form-check.form-switch .form-check-input:checked:before {
    transform: translateY(-50%) translateX(1.25rem);
    top: 50%;
    left: 1px;
}

/* Global Navigation Styles */
.navbar-blur { 
    backdrop-filter: saturate(180%) blur(20px); 
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--primary-blue-20);
    transition: all var(--transition-normal);
    z-index: 1030;
}


.navbar-blur.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid var(--primary-blue);
}

/* Fixed navigation default state */
.navbar-blur.fixed-top {
    background-color: var(--pure-white);
    backdrop-filter: saturate(180%) blur(20px);
}

.navbar .container {
    max-width: 1350px;
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
}

.navbar-nav .nav-link {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-normal);
    font-weight: var(--font-weight-medium);
    font-size: 0.875rem;
    font-family: var(--font-family-base);
    color: var(--dark-color);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.navbar-nav .nav-link:hover {
    background-color: var(--primary-blue-20);
    color: var(--primary-blue);
    text-shadow: none;
    transform: translateY(-1px);
}

.navbar-nav .nav-link.active {
    background-color: var(--primary-blue-25);
    color: var(--primary-blue);
    text-shadow: none;
    box-shadow: 0 2px 10px var(--primary-blue-20);
}

.navbar-brand {
    font-size: 1.5rem;
    margin-right: var(--spacing-xxl);
}

.brand-icon {
    width: 45px;
    height: 45px;
    background-color: var(--primary-blue-20);
    backdrop-filter: blur(10px);
    border: 1px solid var(--primary-blue-30);
}

.brand-icon i {
    color: var(--primary-blue);
}

.brand-text {
    font-size: 1.4rem;
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-base);
    color: var(--dark-color);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Global Badge Styles */
.badge {
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-sm) var(--spacing-sm);
}

/* Global Pagination Styles */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-xl) 0;
}

.pagination .page-link {
    border: 1px solid var(--primary-blue-20);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--primary-blue);
    background: rgba(255, 255, 255, 0.9);
    transition: all var(--transition-normal);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.pagination .page-link:hover {
    background: var(--primary-blue-10);
    border-color: var(--primary-blue-30);
    color: var(--primary-blue);
    transform: translateY(-1px);
}

.pagination .page-item.active .page-link {
    background: var(--primary-gradient);
    border-color: var(--primary-blue);
    color: var(--pure-white);
    box-shadow: 0 2px 8px var(--primary-blue-30);
}

.pagination .page-item.disabled .page-link {
    background: rgba(248, 250, 252, 0.9);
    border-color: var(--primary-blue-10);
    color: var(--secondary-gray);
    cursor: not-allowed;
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 3px var(--primary-blue-25);
    outline: none;
}

/* Info Color Styling */
.bg-info {
    background-color: var(--info-blue);
}

.badge.bg-info {
    background-color: var(--info-blue);
    color: var(--pure-white);
}

.alert-info {
    background-color: var(--info-blue-10);
    border-color: var(--info-blue);
    color: var(--info-blue);
}

.text-info {
    color: var(--info-blue);
}

.border-info {
    border-color: var(--info-blue);
}

/* Hero Section */
.hero { 
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23e2e8f0" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    pointer-events: none;
}

.container-narrow { 
    max-width: 1080px; 
}

.hero-slide { 
    border-radius: var(--border-radius-xl); 
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Gallery Items */
.gallery-item img { 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--border-radius-lg);
}

.gallery-item:hover img { 
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Testimonial Cards */
.testimonial-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-xl);
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .navbar .container {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }
    
    .navbar-nav {
        gap: var(--spacing-lg);
    }
}

@media (max-width: 992px) {
    .navbar .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    
    .navbar-brand {
        font-size: 1.3rem;
        margin-right: var(--spacing-md);
    }
    
    .brand-text {
        font-size: 1.2rem;
    }
    
    .brand-icon {
        width: 40px;
        height: 40px;
    }
    
    .navbar-nav .nav-link {
        padding: var(--spacing-sm) var(--spacing-sm);
    }
}

@media (max-width: 768px) {
    .navbar-blur {
        padding: var(--spacing-sm) 0;
    }
    
    .navbar .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    
    .navbar-brand {
        font-size: 1.2rem;
    }
    
    .brand-text {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .navbar .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    .navbar-brand {
        font-size: 1.1rem;
    }
    
    .brand-text {
        font-size: 1rem;
    }
    
    .brand-icon {
        width: 35px;
        height: 35px;
    }
}

/* Navigation Brand Logo Styling */
.navbar-brand img {
    transition: all var(--transition-normal);
    filter: brightness(1);
}

.navbar-brand:hover img {
    filter: brightness(1.1);
    transform: scale(1.02);
}

.navbar-brand .brand-content {
    transition: all var(--transition-normal);
}

.navbar-brand:hover .brand-content {
    transform: translateY(-1px);
}

/* Responsive logo sizing */
@media (max-width: 768px) {
    .navbar-brand img {
        height: 35px;
        max-width: 150px;
    }
}

@media (max-width: 576px) {
    .navbar-brand img {
        height: 30px;
        max-width: 120px;
    }
}

/* Custom Confirmation Modal Styles */
#confirmationModal .modal-content {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

#confirmationModal .modal-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

#confirmationModal .modal-title {
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

#confirmationModal .modal-body {
    background-color: var(--pure-white);
}

#confirmationModal .modal-footer {
    background-color: #f8f9fa;
    padding: var(--spacing-md) var(--spacing-lg);
}

#confirmationModal .btn {
    border-radius: var(--border-radius-md);
    font-size: 0.875rem;
    padding: var(--btn-padding-sm);
    transition: all 0.2s ease-in-out;
}

#confirmationModal .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

#confirmationModal .btn-outline-secondary {
    border-color: var(--secondary-gray);
    color: var(--secondary-gray);
}

#confirmationModal .btn-outline-secondary:hover {
    background-color: var(--secondary-gray);
    border-color: var(--secondary-gray);
    color: var(--pure-white);
}

#confirmationModal .btn-danger {
    background: linear-gradient(135deg, var(--danger-red) 0%, #c82333 100%);
    border: none;
}

#confirmationModal .btn-danger:hover {
    background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
}

/* Animation for modal */
#confirmationModal.fade .modal-dialog {
    transform: scale(0.8);
    transition: transform var(--transition-normal);
}

#confirmationModal.show .modal-dialog {
    transform: scale(1);
}

/* ========================================
   WELCOME PAGE SPECIFIC STYLES
   ======================================== */

/* Hero Section Styles */
.hero-section {
    /* Layout & Positioning */
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-top: -2rem !important;
    padding-top: 1rem !important;
    position: relative;
    top: 0;
    background: var(--pure-white);
    
    /* Height Settings - Easy to modify */
    min-height: 15vh; /* Default height - change this value */
    
    /* Display & Alignment */
    display: flex;
    align-items: center;
}

.hero-content {
    animation: fadeInUp 0.8s ease-out;
}

.hero-image {
    animation: fadeInRight 0.8s ease-out;
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: var(--spacing-sm);
}

/* Hero Badge Styles */
.hero-badge {
    background-color: var(--primary-blue-10);
    color: var(--primary-blue);
    border: 1px solid rgba(var(--primary-blue), 0.2);
    font-family: var(--theme-font-family);
    font-weight: 500;
}

/* Hero Typography */
.hero-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    line-height: 1.2;
}

.hero-description {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
    line-height: 1.6;
}

/* Hero Buttons */
.hero-primary-btn {
    background: var(--primary-gradient);
    color: var(--pure-white);
    font-family: var(--theme-font-family);
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hero-secondary-btn {
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    background: linear-gradient(135deg, transparent 0%, var(--secondary-gray-10) 100%);
    font-family: var(--theme-font-family);
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Section Styles */
.pricing-section {
    background-color: var(--pure-white);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.features-section {
    background-color: var(--pure-white);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.testimonials-section {
    background-color: var(--pure-white);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.cta-section {
    background: var(--primary-blue);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Section Badge Styles */
.section-badge {
    background-color: var(--primary-blue-10);
    color: var(--primary-blue);
    border: 1px solid rgba(var(--primary-blue), 0.2);
    font-family: var(--theme-font-family);
}

.section-badge-success {
    background-color: var(--primary-blue-10);
    color: var(--primary-blue);
    border: 1px solid rgba(var(--success-green), 0.2);
    font-family: var(--theme-font-family);
}

/* Section Typography */
.section-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.section-description {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

.section-description-primary {
    font-family: var(--theme-font-family);
    color: var(--primary-blue);
}

/* Package Card Styles */
.package-price {
    font-family: var(--theme-font-family);
    color: var(--primary-blue);
    font-weight: var(--font-weight-bold);
}

.package-title {
    font-family: var(--theme-font-family);
}

.package-btn {
    background-color: var(--primary-blue);
    color: var(--pure-white);
    border: none;
    font-weight: 500;
    font-family: var(--theme-font-family);
}

/* Feature Card Styles */
.feature-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1rem;
    will-change: transform;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.feature-description {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

/* Testimonial Card Styles */
.testimonial-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1rem;
    background: var(--pure-white);
    border: 1px solid rgba(var(--primary-blue), 0.1);
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(var(--primary-blue), 0.2);
}

.testimonial-card:hover::before {
    opacity: 1;
}

.testimonial-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.testimonial-description {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

.testimonial-content {
    font-family: var(--theme-font-family);
    line-height: 1.6;
    font-style: italic;
}

/* CTA Section Styles */
.cta-content {
    color: var(--pure-white);
}

.cta-title {
    font-family: var(--theme-font-family);
    color: var(--pure-white);
}

.cta-description {
    font-family: var(--theme-font-family);
    color: var(--pure-white);
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: var(--spacing-sm);
}

.cta-white-btn {
    background-color: var(--pure-white);
    color: var(--primary-blue);
    border: none;
    font-weight: 600;
    font-family: var(--theme-font-family);
}

.cta-outline-white-btn {
    border: 2px solid var(--pure-white);
    color: var(--pure-white);
    background-color: transparent;
    font-weight: 600;
    font-family: var(--theme-font-family);
}

/* Pricing Card Styles */
.pricing-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1rem;
    will-change: transform;
}

.pricing-card:hover {
    transform: translateY(-10px);
}

.pricing-card.popular {
    border: 2px solid #ffc107;
    transform: scale(1.05);
}

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.floating-badge {
    animation: float 3s ease-in-out infinite;
}

/* Layout Adjustments - Removed conflicting body padding */

.navbar {
    margin-bottom: 0 !important;
}

main {
    margin-top: 0 !important;
    /* padding-top removed to allow body padding to work */
}

body, html {
    overflow-x: hidden;
}

/* Additional Component Styles */
.hero-row {
    min-height: 70vh;
}

.feature-icon-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon-small i {
    font-size: 16px;
}

/* Dynamic color classes for feature icons - these will inherit inline styles */

.feature-text {
    font-family: 'Inter', system-ui, sans-serif;
    color: #495057;
    font-weight: 500;
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

.empty-state-icon {
    font-size: 4rem;
}

.feature-icon {
    width: 90px;
    height: 90px;
    background-color: var(--primary-blue-10);
}

.feature-icon i {
    font-size: 2.5rem;
    color: var(--primary-blue);
}

.testimonial-rating {
    color: rgb(233, 216, 61);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-section {
        min-height: 80vh; /* Tablet height */
        text-align: center;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
    
    .cta-buttons {
        margin-top: var(--spacing-xl);
    }
    
    .cta-buttons .btn {
        width: 100%;
        margin-bottom: var(--spacing-md);
    }
}

@media (max-width: 576px) {
    .hero-section {
        min-height: 70vh; /* Mobile height */
    }
    
    .feature-card {
        padding: var(--spacing-xl) !important;
    }
    
    .testimonial-card .card-body {
        padding: var(--spacing-xl) !important;
    }
    
    .pricing-card .card-body {
        padding: var(--spacing-xl) !important;
    }
}

/* ========================================
   PACKAGE SHOW PAGE SPECIFIC STYLES
   ======================================== */

/* Package Show Page - Following Pricing List Pattern */

/* Package Show Page - Following Pricing List Pattern */
.package-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    font-weight: var(--font-weight-semibold);
}

.travel-info {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

.travel-info a {
    color: var(--primary-blue);
    text-decoration: none;
}

.travel-info a:hover {
    color: var(--secondary-gray);
    text-decoration: underline;
}

/* Facilities Card Styles - New Clean Layout */
.facilities-card-new {
    background-color: var(--pure-white);
    border: 1px solid var(--border-gray);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.facilities-card-new .card-body {
    padding: 1rem !important;
}

.facilities-title-new {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--dark-color);
    margin-bottom: 1rem;
}

/* Facilities Badge Styling */
.information-badge {
    display: inline-flex;
    align-items: center;
    background: var(--secondary-gray);
    color: #ffffff;
    padding: 0.25rem 1.5rem;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.facilities-list-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    column-gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.facility-item-new {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.facility-item-new:nth-child(odd) {
    border-right: 1px solid #f0f0f0;
    padding-right: 0.5rem;
}

.facility-item-new:nth-child(even) {
    padding-left: 0.5rem;
}

.facility-item-new:nth-last-child(-n+2) {
    border-bottom: none;
}

.facility-item-new:hover {
    background-color: rgba(13, 110, 253, 0.02);
    border-radius: var(--border-radius-sm);
}

.facility-item-new:nth-child(odd):hover {
    padding-left: 0.5rem;
    padding-right: 0.75rem;
}

.facility-item-new:nth-child(even):hover {
    padding-left: 0.75rem;
    padding-right: 0.5rem;
}

.facility-icon-new {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.facility-icon-new i {
    font-size: 1rem;
    color: var(--secondary-gray);
}

.facility-name-new {
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--dark-color);
    line-height: 1.4;
    flex-grow: 1;
}

.facility-cost-new {
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--success-green);
    margin-left: auto;
}

/* Legacy styles for backward compatibility */
.facility-item-list {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(13, 110, 253, 0.1);
    margin-bottom: 0.75rem;
    height: 100%;
}

.facility-item-list:hover {
    background-color: rgba(13, 110, 253, 0.05);
    border-color: rgba(13, 110, 253, 0.2);
    transform: translateX(4px);
}

.facility-icon-list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 1rem;
    flex-shrink: 0;
}

.facility-icon-list i {
    font-size: 1rem;
    color: var(--primary-blue);
}

.facility-content-list {
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
}

.facility-name-list {
    font-weight: 500;
    color: var(--dark-color);
    font-size: 0.95rem;
    line-height: 1.4;
}

.facility-cost {
    font-weight: 500;
    font-size: 0.85rem;
}

/* Ensure equal height columns */
.row .col-md-6 {
    display: flex;
    flex-direction: column;
}

/* Tablet adjustments - Keep 2 columns but adjust spacing */
@media (max-width: 992px) and (min-width: 769px) {
    .facilities-list-new {
        column-gap: 0.75rem;
    }
    
    .facility-item-new:nth-child(odd) {
        padding-right: 0.375rem;
    }
    
    .facility-item-new:nth-child(even) {
        padding-left: 0.375rem;
    }
}

/* Marketplace Product Link Styling */
.marketplace-product-link {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
}

.marketplace-product-link:hover {
    text-decoration: none !important;
    color: inherit !important;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.marketplace-product-link:hover .marketplace-product-card {
    transform: none;
}

.marketplace-product-link:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Responsive adjustments for marketplace product links */
@media (max-width: 768px) {
    .marketplace-product-link:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
}

/* Responsive adjustments for mobile - New Layout */
@media (max-width: 768px) {
    .facilities-badge {
        padding: 0.6rem 1.2rem;
        font-size: 0.8rem;
    }
    
    .facilities-badge i {
        font-size: 0.75rem;
    }
    
    .facilities-list-new {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    .facility-item-new {
        padding: 0.5rem 0;
        border-right: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .facility-item-new:nth-child(odd),
    .facility-item-new:nth-child(even) {
        border-right: none;
        padding-left: 0;
        padding-right: 0;
    }
    
    .facility-item-new:last-child {
        border-bottom: none;
    }
    
    .facility-icon-new {
        width: 20px;
        height: 20px;
        margin-right: 0.5rem;
    }
    
    .facility-icon-new i {
        font-size: 0.9rem;
    }
    
    .facility-name-new {
        font-size: 0.9rem;
    }
    
    .facility-cost-new {
        font-size: 0.8rem;
    }
    
    .facilities-title-new {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
}

/* Legacy responsive adjustments for mobile */
@media (max-width: 768px) {
    .facility-item-list {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .facility-icon-list {
        width: 32px;
        height: 32px;
        margin-right: 0.75rem;
    }
    
    .facility-icon-list i {
        font-size: 0.9rem;
    }
    
    .facility-name-list {
        font-size: 0.9rem;
    }
}

/* Mobile: Single column on small screens */
@media (max-width: 576px) {
    .row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Room Variants Card Styles - Following Pricing List Pattern */
/* All styling now uses Bootstrap classes and follows pricing list pattern */

/* Responsive Design for Package Show Page - Following Pricing List Pattern */
/* All responsive styling now handled by Bootstrap classes */

/* ========================================
   PACKAGES PAGE SPECIFIC STYLES
   ======================================== */

/* Packages Page Global Font Override - Exclude Font Awesome Icons */
.packages-page *:not(i):not([class*="fa-"]):not([class^="fa-"]) {
    font-family: var(--theme-font-family) !important;
}


.packages-page h1, .packages-page h2, .packages-page h3, 
.packages-page h4, .packages-page h5, .packages-page h6 {
    font-family: var(--theme-font-family) !important;
    font-weight: var(--font-weight-bold) !important;
}

.packages-page p, .packages-page span, .packages-page div, 
.packages-page small, .packages-page label {
    font-family: var(--theme-font-family) !important;
    font-weight: var(--font-weight-normal) !important;
}

/* Packages page buttons inherit from global button styles */

.packages-page .badge {
    font-family: var(--font-family-base) !important;
    font-weight: var(--font-weight-normal) !important;
}

/* Packages page form styling - inherits from global styles above */

.packages-page a {
    font-family: var(--theme-font-family) !important;
}

/* Specific overrides for Bootstrap classes */
.packages-page .fw-bold {
    font-weight: var(--font-weight-bold) !important;
}

.packages-page .fw-semibold {
    font-weight: var(--font-weight-bold) !important;
}

.packages-page .fw-normal {
    font-weight: var(--font-weight-normal) !important;
}

.packages-page .text-muted {
    font-family: var(--theme-font-family) !important;
    font-weight: var(--font-weight-normal) !important;
}

.packages-page .text-primary {
    font-family: var(--theme-font-family) !important;
    font-weight: var(--font-weight-bold) !important;
}

/* Card specific styling */
.packages-page .card-title {
    font-family: var(--theme-font-family) !important;
    font-weight: var(--font-weight-bold) !important;
}

.packages-page .card-text {
    font-family: var(--theme-font-family) !important;
    font-weight: var(--font-weight-normal) !important;
}

/* Form specific styling - inherits from global styles above */

/* Pagination specific styling */
.packages-page .pagination .page-link {
    font-family: var(--theme-font-family) !important;
    font-weight: var(--font-weight-normal) !important;
}

.packages-page .pagination-info {
    font-family: var(--theme-font-family) !important;
    font-weight: var(--font-weight-normal) !important;
}

/* Price section styling */
.packages-page .h5, .packages-page .h6 {
    font-family: var(--theme-font-family) !important;
    font-weight: var(--font-weight-bold) !important;
}


/* Empty and error state styling */
.packages-page .empty-state h4,
.packages-page .error-state h4 {
    font-family: var(--theme-font-family) !important;
    font-weight: var(--font-weight-bold) !important;
}

.packages-page .empty-state p,
.packages-page .error-state p {
    font-family: var(--theme-font-family) !important;
    font-weight: var(--font-weight-normal) !important;
}

/* Results section styling */
.packages-page .results-section h4 {
    font-family: var(--theme-font-family) !important;
    font-weight: var(--font-weight-bold) !important;
}

/* Force override for all text elements - inherits from global styles above */

/* Filter Section Styling */
.filter-section {
    position: sticky;
    top: 2rem;
    z-index: 10;
    height: fit-content;
    max-height: calc(100vh - 4rem);
}

.filter-section .card {
    overflow: hidden;
    height: 100%;
}

.filter-section .card-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
}

.filter-section .card-body {
    padding: var(--spacing-md);
    overflow-y: auto;
}

.filter-section .form-label {
    margin-bottom: 0.5rem;
    font-family: var(--theme-font-family-base);
    font-weight: var(--font-weight-medium);
    color: var(--dark-color);
}

.filter-section .badge {
    font-family: var(--theme-font-family-base);
    font-weight: 500;
}

.filter-section h5 {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--dark-color);
    line-height: 1.3;
    font-family: var(--font-family-base);
}

/* Filter section form controls - inherits from global styles above */

/* Filter section inputs inherit from global styles - no special sizing needed */

/* Facilities Container */
.facilities-container {
    background-color: #f8f9fa;
    padding-left: var(--spacing-xl) !important;
    border: 1px solid #e2e8f0;
    max-height: 200px;
    overflow-y: auto;
}

/* Filter Accordion Styling */
.filter-section .accordion {
    border: none;
}

.filter-section .accordion-item {
    border: none;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 0;
}

.filter-section .accordion-item:last-child {
    border-bottom: none;
}

.filter-section .accordion-button {
    background-color: #f8f9fa;
    border: none;
    padding: 0.75rem;
    font-weight: var(--font-weight-medium);
    font-size: 0.9rem;
    color: var(--dark-color);
    box-shadow: none;
    border-radius: 0;
}

.filter-section .accordion-button:not(.collapsed) {
    background-color: var(--primary-blue-30);
    color: var(--dark-color);
    box-shadow: none;
    border-radius: 0;
}

.filter-section .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.filter-section .accordion-button::after {
    width: 1rem;
    height: 1rem;
}

.filter-section .accordion-body {
    padding: 0.75rem;
    background-color: #ffffff;
}

.filter-section .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

.filter-section .form-control,
.filter-section .form-select {
    font-size: 0.9rem;
    border: 1px solid #ced4da;
    padding: 0.5rem 0.75rem;
}

.filter-section .form-control:focus,
.filter-section .form-select:focus {
    border-color: #86b7fe;
}

.filter-section .card-footer {
    border-top: 1px solid #e9ecef;
    background-color: #f8f9fa;
}

.filter-section .btn {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
}

/* Responsive accordion */
@media (max-width: 991.98px) {
    .filter-section {
        position: relative;
        top: auto;
        max-height: none;
        height: auto;
    }
    
    .filter-section .card {
        height: auto;
    }
}

/* Facilities container in accordion */
.facilities-container {
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    padding: 1rem;
    border: 1px solid #e9ecef;
    max-height: 200px;
    overflow-y: auto;
}

.facilities-container .form-check {
    margin-bottom: var(--spacing-sm);
    display: flex !important;
    align-items: center !important;
    padding: var(--spacing-xs) 0;
}

.facilities-container .form-check-label {
    margin-left: var(--spacing-sm) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    font-size: 0.9rem;
    cursor: pointer;
}

.facilities-container .form-check-input {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
}

/* Custom scrollbar for facilities container */
.facilities-container::-webkit-scrollbar {
    width: 6px;
}

.facilities-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.facilities-container::-webkit-scrollbar-thumb {
    background: var(--primary-blue);
    border-radius: 3px;
}

.facilities-container::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-gray);
}

/* Results Section Styling */
.results-section h4 {
    color: var(--dark-color);
    font-weight: 600;
}

.results-section .badge {
    padding: var(--btn-padding-sm);
    border-radius: 2rem;
}

/* Package Cards Styling */
.hover-lift {
    transition: all 0.3s ease;
    border-radius: 1rem;
    overflow: hidden;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

/* ========================================
   HORIZONTAL PACKAGE CARD - CLEAN IMPLEMENTATION
   ======================================== */

.package-card-horizontal {
    display: flex;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    height: 300px;
}

.package-card-horizontal:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Image Section */
.package-card-image {
    flex: 0 0 40%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.package-image {
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: transform 0.3s ease;
}

.banner-modal-trigger {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.package-card-horizontal:hover .package-image {
    transform: scale(1.05);
}

.package-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #6c757d;
    border: 2px dashed #dee2e6;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
}

.package-image-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0,0,0,0.05) 10px,
        rgba(0,0,0,0.05) 20px
    );
    pointer-events: none;
}

.package-image-placeholder i {
    position: relative;
    z-index: 1;
    opacity: 0.7;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    transition: all 0.3s ease;
}

.package-card-horizontal:hover .package-image-placeholder {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    border-color: #adb5bd;
    transform: scale(1.02);
}

.package-card-horizontal:hover .package-image-placeholder i {
    opacity: 0.9;
    transform: scale(1.1);
}

/* Image Badges */
.package-badges {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.package-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    padding: 0.3rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    pointer-events: auto;
}

.discount-badge {
    position: absolute;
    top: 32px;
    left: 8px;
    background: #dc3545;
    color: white;
    padding: 0.3rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    pointer-events: auto;
}

.rating-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: white;
    color: #333;
    padding: 0.3rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
}

.rating-badge i {
    color: #ffc107;
    margin-right: 0.2rem;
}

.favorite-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
}

.favorite-btn:hover {
    background: #f8f9fa;
    transform: scale(1.1);
}

/* Content Section */
.package-card-content {
    flex: 0 0 70%;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.package-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

/* Package Info Grid */
.package-info {
    margin-bottom: 0.5rem;
}

.info-row {
    display: flex;
    margin-bottom: 0.2rem;
}

.info-item {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: #666;
}

.info-item i {
    color:var(--dark-color);
    margin-right: 0.5rem;
    width: 12px;
    text-align: center;
}

/* Facilities */
.package-facilities {
    margin-bottom: 0.5rem;
}

.facilities-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.2rem;
}

.facilities-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-items: center;
}

.facility-tag {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    color: var(--dark-color);
    padding: 0.15rem 0.4rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.facility-expand a {
    color: #666;
    font-size: 0.7rem;
    font-weight: 500;
    text-decoration: none;
}

.facility-expand a:hover {
    color: #333;
}

.additional-facilities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.2rem;
}

/* Pricing */
.package-pricing {
    margin-bottom: 0.5rem;
}

.original-price {
    font-size: 0.75rem;
    color: #999;
    text-decoration: line-through;
    margin-bottom: 0.2rem;
}

.final-price {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

/* Actions */
.package-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.compare-checkbox {
    display: flex;
    align-items: center;
}

.compare-checkbox input {
    margin-right: 0.5rem;
}

.compare-checkbox label {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
    cursor: pointer;
}


/* Responsive Design */
@media (max-width: 768px) {
    .package-card-horizontal {
        flex-direction: column;
        min-height: auto;
    }
    
    .package-card-image {
        flex: 0 0 100px;
        min-height: 100px;
    }
    
    .package-card-content {
        flex: 1;
        padding: 1rem;
    }
    
    .package-title {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    
    .info-row {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .info-item {
        margin-bottom: 0.25rem;
    }
    
    .facilities-tags {
        gap: 0.25rem;
    }
    
    .facility-tag {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }
    
    .package-actions {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .btn-detail {
        width: 100%;
    }
    
    .package-image-placeholder {
        border-radius: 0.4rem;
    }
    
    .package-image-placeholder i {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .package-card-image {
        flex: 0 0 80px;
        min-height: 80px;
    }
    
    .package-card-content {
        padding: 0.75rem;
    }
    
    .package-title {
        font-size: 1rem;
    }
    
    .final-price {
        font-size: 1rem;
    }
    
    .package-type-badge,
    .discount-badge,
    .rating-badge {
        font-size: 0.6rem;
        padding: 0.25rem 0.4rem;
    }
    
    .favorite-btn {
        width: 24px;
        height: 24px;
    }
    
    .package-image-placeholder {
        border-radius: 0.3rem;
    }
    
    .package-image-placeholder i {
        font-size: 2rem;
    }
}

.package-card-title {
    color: var(--dark-color);
    font-size: 1.1rem;
    line-height: 1.4;
    min-height: 2.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.package-card-text {
    color: var(--secondary-gray);
    font-size: 0.9rem;
    min-height: 2.7rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Footer Styling */
.package-card-footer {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.package-card-footer .h5 {
    font-size: 1.25rem;
    line-height: 1.2;
}

/* Package Buttons Container */
.package-buttons {
    gap: var(--spacing-sm);
}

/* Compare Button - inherits from global button styles */
/* All styling inherited from .btn-outline-primary and .btn-primary */

/* Badge styling for compare counter */
#compare-counter {
    background-color: var(--primary-blue);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
}

#compare-btn.btn-primary #compare-counter {
    background-color: white;
    color: var(--primary-blue);
}

/* Filter Action Buttons - inherit from global button styles */

/* Badge styling */
.badge.bg-success {
    background-color: var(--success-green) !important;
    font-size: 0.75rem;
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* Empty State Styling */
.empty-state {
    background-color: #f8f9fa;
    border-radius: 1rem;
    border: 2px dashed #dee2e6;
    padding: var(--spacing-xxl) var(--spacing-xl);
}

.empty-state .empty-icon {
    opacity: 0.6;
}

.empty-state h4 {
    font-family: var(--theme-font-family);
    font-weight: 600;
    color: var(--secondary-gray);
}

.empty-state p {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

.empty-actions {
    margin-top: var(--spacing-xl);
}

/* Error State Styling */
.error-state {
    background-color: #fff3cd;
    border-radius: 1rem;
    border: 2px solid #ffeaa7;
    padding: var(--spacing-xxl) var(--spacing-xl);
}

.error-state .error-icon {
    opacity: 0.8;
}

.error-state h4 {
    font-family: var(--theme-font-family);
    font-weight: 600;
    color: var(--warning-orange);
}

.error-state p {
    font-family: var(--theme-font-family);
    color: var(--warning-orange);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Loading State */
.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Price input styling - inherits from global form styles above */
.price-input {
    font-weight: 500;
    letter-spacing: 0.5px;
    /* Inherits all other styles from global form styles */
}

/* Small input variant for compact forms */
.input-sm {
    padding: var(--spacing-sm) var(--spacing-sm) !important;
    font-size: 0.875rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
    line-height: 1.4 !important;
}

/* Large input variant for prominent forms */
.input-lg {
    padding: var(--spacing-md) var(--spacing-lg) !important;
    font-size: 1.125rem !important;
    height: 3rem !important;
    min-height: 3rem !important;
    line-height: 1.6 !important;
}

/* Sidebar Layout Enhancements */
.packages-page .container-fluid {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Results section spacing */
.results-section {
    padding-left: 0;
}

/* Filter header styling */
.filter-header {
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
}

/* Hidden elements for dynamic content */
.hidden-element {
    display: none;
}

/* Responsive Design for Packages Page */
@media (max-width: 992px) {
    .filter-section .card {
        position: relative;
        top: auto;
    }
    
    .filter-section .card-body {
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 768px) {
    .filter-section .card-header {
        padding: var(--spacing-lg) !important;
    }
    
    /* Button responsive styles inherit from global */
    
    .filter-section .card-body {
        padding: var(--spacing-lg) !important;
    }
    
    .facilities-container .row {
        margin: 0;
    }
    
    .facilities-container .col-12 {
        padding: var(--spacing-xs);
    }
    
    .results-section .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--spacing-md);
    }
    
    .results-section .badge {
        align-self: flex-start;
    }
}

@media (max-width: 576px) {
    .filter-section {
        margin-top: var(--spacing-xl) !important;
    }
    
    .filter-section .row.g-3 > div {
        margin-bottom: var(--spacing-md);
    }
    
    .filter-section .d-flex.justify-content-end {
        justify-content: center !important;
    }
    
    .filter-section .btn {
        flex: 1;
        max-width: 200px;
    }
    
    .package-card-footer {
        min-height: 120px;
    }
    
    .package-card-footer .h5 {
        font-size: 1.1rem;
    }
}

/* Mobile layout adjustments */
@media (max-width: 991.98px) {
    .packages-page .container-fluid {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    .filter-section {
        margin-bottom: var(--spacing-xl);
    }
    
    .results-section {
        padding-left: 0;
    }
}

/* Tablet layout */
@media (min-width: 768px) and (max-width: 991.98px) {
    .filter-section .card-body {
        padding: var(--spacing-lg);
    }
    
    .facilities-container {
        max-height: 250px;
    }
}

/* Desktop layout */
@media (min-width: 992px) {
    .filter-section .card {
        min-height: 600px;
    }
    
    .results-section {
        padding-left: var(--spacing-md);
    }
}

/* ========================================
   GALLERY PAGE SPECIFIC STYLES
   ======================================== */

/* Gallery Section Layout */
.gallery-header {
    background: var(--pure-white);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 0;
    padding-top: 1rem;
}

/* About Header Section Layout */
.about-header {
    background: var(--pure-white);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 0;
    padding-top: 1rem;
}

.gallery-filter {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.gallery-grid {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Gallery Typography */
.gallery-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.gallery-description {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
    font-size: rem;
}

/* About Typography */
.about-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.about-description {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
    font-size: 1rem;
}

/* Blog Header Section Layout */
.blog-header {
    background: var(--pure-white);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 0;
    padding-top: 1rem;
}

/* Blog Typography */
.blog-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.blog-description {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
    font-size: 1rem;
}

/* Travel Info Header Section Layout */
.travel-info-header {
    background: var(--pure-white);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 0;
    padding-top: 1rem;
}

/* Travel Info Typography */
.travel-info-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.travel-info-description {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    font-size: 1rem;
}

.gallery-card-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    font-size: 1rem;
}

.gallery-card-text {
    font-family: var(--theme-font-family);
    font-size: 0.9rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-card-date {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

/* Gallery Badge Styling */
.featured-badge .badge {
    background: var(--warning-orange);
    color: white;
    font-family: var(--theme-font-family);
    font-weight: 500;
}

.youtube-badge .badge {
    background: var(--danger-red);
    color: white;
}

.gallery-category .badge {
    background-color: var(--primary-blue-10);
    color: var(--primary-blue);
    font-family: var(--theme-font-family);
    font-weight: 500;
}

/* Gallery Image Styling */
.gallery-image {
    height: 250px;
}

.gallery-image img {
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-overlay {
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-overlay-btn {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gallery Card Hover Effects */
.gallery-card:hover .gallery-image img {
    transform: scale(1.05);
}

.gallery-card:hover .gallery-overlay {
    opacity: 1 !important;
}

/* New Gallery Layout Styles */
.gallery-card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.gallery-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

.category-badge-overlay .badge {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.875rem;
}

.gallery-play-btn {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
    transition: all 0.3s ease;
}

.gallery-play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.6);
}

.gallery-detail-link {
    color: var(--primary-blue);
    font-weight: 500;
    transition: all 0.3s ease;
}

.gallery-detail-link:hover {
    color: #e55a2b;
    transform: translateX(3px);
}

/* Gallery Separator Lines */
.gallery-separator-line {
    height: 1px;
    background-color: #e0e0e0;
    margin: 2rem 0;
    width: 100%;
}

.gallery-row-separator {
    height: 1px;
    background-color: #e0e0e0;
    margin: 2rem 0;
    width: 100%;
}

.gallery-bottom-separator {
    height: 1px;
    background-color: #e0e0e0;
    margin: 2rem 0 0 0;
    width: 100%;
}

.gallery-content-wrapper {
    position: relative;
}

/* Gallery Show Page Styles */
.gallery-breadcrumbs {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.gallery-breadcrumbs .breadcrumb {
    background: none;
    padding: 0;
}

.gallery-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: #6c757d;
}

.gallery-main-title {
    font-size: 1.2rem;
    color: var(--dark-color);
    line-height: 1.3;
}

.gallery-metadata {
    font-size: 0.9rem;
}

.gallery-metadata .metadata-item i {
    color: var(--primary-blue) !important;
}

/* Gallery metadata in sidebar */
.gallery-metadata.d-flex.flex-column .metadata-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.gallery-metadata.d-flex.flex-column .metadata-item:last-child {
    border-bottom: none;
}

.gallery-metadata .metadata-item span {
    color: #333 !important;
    font-weight: 500;
}

/* Gallery Interactions Container */
.gallery-interactions-container {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    border: 1px solid #e9ecef;
}

.interactions-wrapper {
    width: 100%;
}

.interaction-btn {
    background: none;
    border: none;
    color: #333;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.interaction-btn:hover {
    color: #ff6b35;
    transform: translateY(-1px);
}

.interaction-btn i {
    font-size: 1rem;
}

.download-btn {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
}

.download-btn:hover {
    background-color: #e9ecef;
    color: #ff6b35;
    transform: translateY(-1px);
}

/* Gallery Sidebar Card (Combined) */
.gallery-sidebar-card {
    background-color: white;
    border-radius: var(--border-radius-sm);
    position: sticky;
    top: 2rem;
}

/* Mobile responsive for gallery sidebar */
@media (max-width: 991.98px) {
    .gallery-sidebar-card {
        position: static;
        margin-top: 2rem;
    }
}

.gallery-description-title {
    color: var(--dark-color);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.gallery-description-text {
    color: #6c757d;
    line-height: 1.6;
    font-size: 0.8rem;
    margin-bottom: 1rem;
}


.gallery-tags .badge {
    font-size: 0.85rem;
    font-weight: 500;
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border: 1px solid #e9ecef;
}

.gallery-tags .badge i {
    font-size: 0.75rem;
    opacity: 0.7;
}

.gallery-sidebar-card {
    background-color: white;
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sidebar-label {
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.sidebar-value {
    font-size: 0.9rem;
}

.sidebar-separator {
    height: 1px;
    background-color: #e0e0e0;
    width: 100%;
}

.sidebar-date-container {
    background-color: #fff3cd;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    border: 1px solid #ffeaa7;
}

.sidebar-date-container .sidebar-value i {
    color: #f39c12;
    font-size: 0.8rem;
}

.sidebar-time-container {
    background-color: #d1ecf1;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    border: 1px solid #bee5eb;
}

.sidebar-time-container .sidebar-value i {
    color: #17a2b8;
    font-size: 0.8rem;
}

.status-dot {
    width: 6px;
    height: 6px;
    background-color: #28a745;
    border-radius: 50%;
}

.sidebar-btn {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
}

.btn-gradient {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    background: linear-gradient(135deg, #e55a2b, #e8841a);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.share-video-btn .btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.related-gallery-play-btn {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}

.related-gallery-card:hover .related-gallery-play-btn {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.6);
}

/* Gallery Card Internal Separator */
.gallery-card-separator {
    height: 1px;
    background-color: #e0e0e0;
    width: 100%;
    margin: 0;
}

/* Gallery Filter Button Styling - Consolidated */
.gallery-filter .btn-outline-primary {
    border: 1px solid var(--primary-blue-20) !important;
    color: var(--primary-blue) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s ease !important;
    font-family: var(--theme-font-family) !important;
    font-weight: 500 !important;
}

.gallery-filter .btn-outline-primary:hover {
    background: var(--primary-blue-10) !important;
    border-color: var(--primary-blue-30) !important;
    color: var(--primary-blue) !important;
    transform: translateY(-1px) !important;
}

.gallery-filter .btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem var(--primary-blue-25) !important;
    outline: none !important;
}

/* Gallery Filter Active State - High Specificity */
.gallery-filter .btn-outline-primary.active,
.gallery-filter .btn-outline-primary.active:hover,
.gallery-filter .btn-outline-primary.active:focus,
.gallery-filter .btn-outline-primary.active:active {
    background: var(--primary-blue) !important;
    background-color: var(--primary-blue) !important;
    color: white !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 2px 8px var(--primary-blue-30) !important;
}

/* Gallery Detail Button Styling */
.gallery-card .btn-sm.btn-outline-primary {
    border: 1px solid var(--primary-blue-20) !important;
    color: var(--primary-blue) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s ease !important;
    font-family: var(--theme-font-family) !important;
    font-weight: 500 !important;
}

.gallery-card .btn-sm.btn-outline-primary:hover {
    background: var(--primary-blue-10) !important;
    border-color: var(--primary-blue-30) !important;
    color: var(--primary-blue) !important;
    transform: translateY(-1px) !important;
}

.gallery-card .btn-sm.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem var(--primary-blue-25) !important;
    outline: none !important;
}

/* Gallery Overlay Button Styling */
.gallery-overlay .btn-light {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--primary-blue) !important;
    transition: all 0.3s ease !important;
}

.gallery-overlay .btn-light:hover {
    background: var(--primary-blue) !important;
    color: white !important;
    transform: scale(1.1) !important;
}

/* Gallery Empty State */
.gallery-empty-icon {
    font-size: 4rem;
}

/* Gallery Responsive Design */
@media (max-width: 768px) {
    .gallery-filter .d-flex {
        flex-direction: column;
        align-items: center;
    }
    
    .gallery-filter .btn {
        width: 100%;
        max-width: 200px;
        margin-bottom: 0.5rem;
    }
    
    .gallery-card .card-body {
        padding: 1.5rem !important;
    }
}

/* ========================================
   GALLERY SHOW PAGE SPECIFIC STYLES
   ======================================== */

/* Gallery Detail Content Section */
.gallery-detail-content {
    background-color: var(--pure-white);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Gallery Main Media */
.gallery-main-media:hover .image-overlay {
    opacity: 1 !important;
}

.gallery-main-image {
    max-height: 600px;
    object-fit: cover;
}

.image-overlay {
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 1rem;
}

.image-overlay-btn {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gallery Info Card */
.gallery-info-card {
    border: 0;
    height: 100%;
}

.gallery-info-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.gallery-info-label {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.gallery-info-text {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

.gallery-info-badge {
    background-color: var(--primary-blue-10);
    color: var(--primary-blue);
    font-family: var(--theme-font-family);
    font-weight: 500;
}

.gallery-info-featured-badge {
    background-color: var(--warning-orange);
    color: var(--pure-white);
    font-family: var(--theme-font-family);
    font-weight: 500;
}

.gallery-info-button {
    font-family: var(--theme-font-family);
    font-weight: 500;
}

/* Related Galleries Section */
.related-galleries {
    background-color: #F5F5F5;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.related-galleries-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.related-galleries-description {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

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

.related-gallery-card:hover .gallery-overlay {
    opacity: 1 !important;
}

.related-gallery-image {
    height: 200px;
}

.related-gallery-image img {
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-gallery-overlay {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.related-gallery-overlay-btn {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.related-gallery-category-badge {
    background-color: var(--primary-blue-10);
    color: var(--primary-blue);
    font-family: var(--theme-font-family);
    font-weight: 500;
    font-size: 0.75rem;
}

.related-gallery-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-gallery-date {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

.related-youtube-badge {
    font-size: 0.7rem;
}

/* Image Modal Styles */
.image-modal-content {
    background: rgba(0, 0, 0, 0.9) !important;
}

.image-modal-body img {
    max-height: 80vh;
    object-fit: contain;
}

/* Breadcrumb Styles */
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--secondary-gray);
}

/* Gallery Show Responsive Design */
@media (max-width: 768px) {
    .gallery-detail-content .row {
        flex-direction: column-reverse;
    }
    
    .gallery-info-card {
        margin-bottom: 2rem;
    }
    
    .gallery-meta {
        flex-direction: column;
        gap: 0.5rem !important;
    }
}

/* ========================================
   BLOG INDEX PAGE SPECIFIC STYLES
   ======================================== */

/* Blog Header Section */
.blog-header {
    background: var(--pure-white);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 0;
    padding-top: 1rem;
}

.blog-header-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.blog-header-description {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

/* Blog Search Section */
.blog-search {
    background-color: var(--light-gradient);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.blog-search-input {
    border: 1px solid var(--primary-blue-20) !important;
    border-radius: 25px !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.3s ease !important;
    font-family: var(--theme-font-family) !important;
}

.blog-search-input:focus {
    border-color: var(--primary-blue) !important;
    box-shadow: none !important;
    outline: none !important;
}

.blog-search-input:hover {
    border-color: rgba(13, 110, 253, 0.4) !important;
}

.blog-search-button {
    border-radius: 25px;
    background: var(--primary-gradient);
    border: none;
}

/* Featured Categories Full Width */
.marketplace-categories-section {
    background: #ffffff;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-gray);
}

/* Product Types Filter in Categories Section */
.marketplace-categories-section .btn {
    transition: all 0.3s ease;
    font-weight: 500;
}

.marketplace-categories-section .btn-primary {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.marketplace-categories-section .btn-primary:hover {
    background: linear-gradient(135deg, #218838, #1ea085);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

.marketplace-categories-section .btn-outline-primary {
    border: 2px solid #28a745;
    color: #28a745;
    background: transparent;
}

.marketplace-categories-section .btn-outline-primary:hover {
    background: #28a745;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

/* Search Form Styles */
.search-form .form-control,
.search-form .search-input,
.search-form input[type="text"],
.search-form input[type="date"],
.search-form select {
    box-shadow: none !important;
    border: 1px solid #e0e0e0 !important;
}

.search-form .form-control:focus,
.search-form .search-input:focus,
.search-form input[type="text"]:focus,
.search-form input[type="date"]:focus,
.search-form select:focus {
    box-shadow: none !important;
    border-color: var(--primary-blue) !important;
    outline: none !important;
}

.search-form .form-control:hover,
.search-form .search-input:hover,
.search-form input[type="text"]:hover,
.search-form input[type="date"]:hover,
.search-form select:hover {
    border-color: var(--primary-blue-30) !important;
}

/* Blog Content Section */
.blog-content {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Blog Card Styling */
.blog-card {
    transition: all 0.3s ease;
    border-radius: var(--border-radius-lg) !important;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

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

.blog-card:hover .blog-overlay {
    opacity: 1 !important;
}

.blog-image {
    height: 220px;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    overflow: hidden;
}

/* Featured Blog Card - Horizontal Layout */
.blog-card-featured {
    transition: all 0.3s ease;
    border-radius: var(--border-radius-lg) !important;
    min-height: 100px;
}

.blog-card-featured:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2) !important;
}

.blog-image-featured {
    min-height: 100px;
    border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
    overflow: hidden;
}

.blog-image-featured img {
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.blog-card-featured:hover .blog-overlay {
    opacity: 1 !important;
}

/* Featured Blog Content */
.blog-card-title-featured {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
}

.blog-card-text-featured {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
    font-size: 1rem;
    line-height: 1.6;
}

.blog-category-badge {
    font-family: var(--theme-font-family);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.blog-meta-featured {
    font-family: var(--theme-font-family);
}

.blog-meta-featured small {
    font-size: 0.875rem;
}

.blog-image img {
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-overlay {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.blog-overlay-btn {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Blog Featured Badge */
.blog-featured-badge {
    background-color: var(--primary-blue) !important;
    color: var(--pure-white);
    font-family: var(--theme-font-family);
    font-weight: 500;
}

/* Blog Meta Styling */
.blog-meta {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.author-info {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

.author-avatar {
    width: 30px;
    height: 30px;
    background-color: var(--primary-blue-10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.author-avatar i {
    color: var(--primary-blue);
    font-size: 12px;
}

.author-name {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

.blog-date {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

/* Blog Card Content */
.blog-card .card-body {
    padding: 1.5rem !important;
}

.blog-card-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.1rem;
    line-height: 1.4;
}

.blog-card-text {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-stats {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.blog-stats small {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

/* Blog Button Styling */
.blog-card .btn {
    font-family: var(--theme-font-family) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 25px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
}

.blog-card .btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3) !important;
}

/* Blog Empty State */
.blog-empty-icon {
    font-size: 4rem;
}

/* Blog Responsive Design */
@media (max-width: 1200px) {
    .blog-card .card-body {
        padding: 1.25rem !important;
    }
    
    .blog-image {
        height: 200px;
    }
    
    .blog-card-title-featured {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .blog-card .card-body {
        padding: 1rem !important;
    }
    
    .blog-image {
        height: 180px;
    }
    
    .blog-card .btn {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.8rem !important;
    }
    
    /* Featured Blog Mobile */
    .blog-image-featured {
        min-height: 200px;
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    }
    
    .blog-card-title-featured {
        font-size: 1.2rem;
    }
    
    .blog-meta-featured {
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    .blog-meta-featured > div {
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 576px) {
    .blog-card .card-body {
        padding: 0.875rem !important;
    }
    
    .blog-image {
        height: 160px;
    }
    
    .blog-card .btn {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.7rem !important;
    }
    
    /* Featured Blog Small Mobile */
    .blog-image-featured {
        min-height: 180px;
    }
    
    .blog-card-title-featured {
        font-size: 1.1rem;
    }
    
    .blog-card-text-featured {
        font-size: 0.9rem;
    }
}

/* ========================================
   ADMIN BLOG SHOW PAGE SPECIFIC STYLES
   ======================================== */

/* Admin Blog Detail Card */
.admin-blog-detail-card {
    border: 1px solid var(--primary-blue-10);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.admin-blog-detail-card:hover {
    box-shadow: var(--shadow-md);
}

.admin-blog-detail-card .card-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid var(--primary-blue-10);
    padding: var(--spacing-lg);
}

.admin-blog-detail-card .card-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
}

/* Admin Blog Info Card */
.admin-blog-info-card {
    border: 1px solid var(--primary-blue-10);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.admin-blog-info-card:hover {
    box-shadow: var(--shadow-md);
}

.admin-blog-info-card .card-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid var(--primary-blue-10);
    padding: var(--spacing-lg);
}

.admin-blog-info-card .card-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
}

.admin-blog-info-card .card-body {
    padding: var(--spacing-lg);
}

/* Admin Blog Info Items */
.admin-blog-info-item {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--primary-blue-10);
}

.admin-blog-info-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.admin-blog-info-label {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
}

.admin-blog-info-value {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
    margin-bottom: 0;
}

.admin-blog-info-code {
    font-family: 'Courier New', monospace;
    background-color: var(--primary-blue-10);
    color: var(--primary-blue);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
}

/* Admin Blog Actions Card */
.admin-blog-actions-card {
    border: 1px solid var(--primary-blue-10);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.admin-blog-actions-card:hover {
    box-shadow: var(--shadow-md);
}

.admin-blog-actions-card .card-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid var(--primary-blue-10);
    padding: var(--spacing-lg);
}

.admin-blog-actions-card .card-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
}

.admin-blog-actions-card .card-body {
    padding: var(--spacing-lg);
}

/* Admin Blog Content */
.admin-blog-content {
    font-family: var(--theme-font-family);
    line-height: 1.6;
    color: var(--dark-color);
}

.admin-blog-content h6 {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
}

.admin-blog-content p {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
    margin-bottom: var(--spacing-md);
}

/* Admin Blog Image */
.admin-blog-image {
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.admin-blog-image:hover {
    box-shadow: var(--shadow-md);
    transform: scale(1.02);
}

/* Admin Blog Badge Styling */
.admin-blog-status-badge {
    font-family: var(--theme-font-family);
    font-weight: var(--font-weight-medium);
    font-size: 0.875rem;
}

.admin-blog-featured-badge {
    font-family: var(--theme-font-family);
    font-weight: var(--font-weight-medium);
    font-size: 0.875rem;
}

/* Admin Blog Button Styling */
.admin-blog-action-btn {
    font-family: var(--theme-font-family);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-normal);
    border-radius: var(--border-radius-md);
}

.admin-blog-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* ========================================
   PACKAGE SUBMENU STYLING
   ======================================== */

/* Package Dropdown Menu Styling - Theme Colors */
.navbar-nav .nav-item.dropdown .dropdown-menu {
    border: 1px solid var(--primary-blue-20);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-sm) 0;
    margin-top: var(--spacing-sm);
    background: var(--pure-white);
    min-width: 200px;
    overflow: hidden;
}

/* Force White Background for All Dropdown Menus */
.dropdown-menu {
    background: var(--pure-white) !important;
    background-color: var(--pure-white) !important;
    border: 1px solid var(--primary-blue-20) !important;
}

/* Dropdown Animation */
@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Package Dropdown Items - Theme Colors */
.navbar-nav .nav-item.dropdown .dropdown-item {
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: var(--font-weight-medium);
    color: var(--dark-color);
    transition: all var(--transition-normal);
    border-radius: var(--border-radius-sm);
    margin: 0 var(--spacing-sm);
    position: relative;
    box-sizing: border-box;
    width: calc(100% - var(--spacing-sm) * 2);
    font-size: 0.875rem;
}

/* Package Dropdown Item Hover Effect - Theme Colors */
.navbar-nav .nav-item.dropdown .dropdown-item:hover {
    background-color: var(--primary-blue-20);
    color: var(--primary-blue);
    transform: translateY(-1px);
    margin: 0 var(--spacing-sm);
    border-radius: var(--border-radius-sm);
}

/* Package Dropdown Item Active State - Theme Colors */
.navbar-nav .nav-item.dropdown .dropdown-item.active {
    background-color: var(--primary-blue-25);
    color: var(--primary-blue);
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 2px 10px var(--primary-blue-20);
    margin: 0 var(--spacing-sm);
    border-radius: var(--border-radius-sm);
}

/* Package Dropdown Toggle Styling - Theme Colors */
.navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle {
    position: relative;
    transition: all var(--transition-normal);
}

.navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle:hover {
    background-color: var(--primary-blue-20);
    color: var(--primary-blue);
    text-shadow: none;
    transform: translateY(-1px);
}

.navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle.active {
    background-color: var(--primary-blue-25);
    color: var(--primary-blue);
    text-shadow: none;
    box-shadow: 0 2px 10px var(--primary-blue-20);
}

/* Package Dropdown Arrow Animation - Theme Colors */
.navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle::after {
    transition: transform var(--transition-normal);
    margin-left: var(--spacing-sm);
}

.navbar-nav .nav-item.dropdown.show .nav-link.dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Package Dropdown Divider - Theme Colors */
.navbar-nav .nav-item.dropdown .dropdown-divider {
    margin: var(--spacing-sm) 0;
    border-color: var(--primary-blue-20);
}

/* Package Dropdown Header - Theme Colors */
.navbar-nav .nav-item.dropdown .dropdown-header {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--secondary-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--primary-blue-10);
    margin: 0 var(--spacing-sm);
    border-radius: var(--border-radius-sm);
}

/* Package Dropdown Item Badge - Theme Colors */
.navbar-nav .nav-item.dropdown .dropdown-item .badge {
    font-size: 0.7rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    margin-left: var(--spacing-sm);
    background: var(--primary-blue-10);
    color: var(--primary-blue);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--primary-blue-20);
}

/* Package Dropdown Item Badge Hover - Theme Colors */
.navbar-nav .nav-item.dropdown .dropdown-item:hover .badge {
    background: var(--primary-blue);
    color: var(--pure-white);
    border-color: var(--primary-blue);
}

/* Responsive Package Dropdown - Theme Colors */
@media (max-width: 991.98px) {
    .navbar-nav .nav-item.dropdown .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        margin-top: 0;
        background: var(--pure-white);
        border-radius: var(--border-radius-sm);
        box-shadow: none;
        border: 1px solid var(--primary-blue-20);
    }
    
    .navbar-nav .nav-item.dropdown .dropdown-item {
        padding: var(--spacing-sm) var(--spacing-sm);
        margin: 0 var(--spacing-sm);
        border-radius: var(--border-radius-sm);
    }
    
    .navbar-nav .nav-item.dropdown .dropdown-item:hover {
        background-color: var(--primary-blue-20);
        color: var(--primary-blue);
        transform: none;
        margin: 0 var(--spacing-sm);
        border-radius: var(--border-radius-sm);
    }
    
    .navbar-nav .nav-item.dropdown .dropdown-item.active {
        background-color: var(--primary-blue-25);
        color: var(--primary-blue);
        box-shadow: 0 2px 10px var(--primary-blue-20);
        margin: 0 var(--spacing-sm);
        border-radius: var(--border-radius-sm);
    }
}

/* Package Dropdown Loading State - Theme Colors */
.navbar-nav .nav-item.dropdown .dropdown-item.loading {
    opacity: 0.6;
    pointer-events: none;
}

.navbar-nav .nav-item.dropdown .dropdown-item.loading::after {
    content: '';
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border: 2px solid var(--primary-blue-20);
    border-top: 2px solid var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

.admin-blog-dropdown .dropdown-item {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-normal);
}

.admin-blog-dropdown .dropdown-item:hover {
    background-color: var(--primary-blue-10);
    color: var(--primary-blue);
}

/* Admin Blog Modal */
.admin-blog-modal .modal-content {
    border: 1px solid var(--primary-blue-10);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
}

.admin-blog-modal .modal-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid var(--primary-blue-10);
    padding: var(--spacing-lg);
}

.admin-blog-modal .modal-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
}

.admin-blog-modal .modal-body {
    padding: var(--spacing-lg);
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.admin-blog-modal .modal-footer {
    border-top: 1px solid var(--primary-blue-10);
    padding: var(--spacing-lg);
}

/* Admin Blog Responsive Design */
@media (max-width: 768px) {
    .admin-blog-detail-card .card-header,
    .admin-blog-info-card .card-header,
    .admin-blog-actions-card .card-header {
        padding: var(--spacing-md);
    }
    
    .admin-blog-detail-card .card-body,
    .admin-blog-info-card .card-body,
    .admin-blog-actions-card .card-body {
        padding: var(--spacing-md);
    }
    
    .admin-blog-info-item {
        margin-bottom: var(--spacing-md);
        padding-bottom: var(--spacing-sm);
    }
}

@media (max-width: 576px) {
    .admin-blog-detail-card .card-header,
    .admin-blog-info-card .card-header,
    .admin-blog-actions-card .card-header {
        padding: var(--spacing-sm);
    }
    
    .admin-blog-detail-card .card-body,
    .admin-blog-info-card .card-body,
    .admin-blog-actions-card .card-body {
        padding: var(--spacing-sm);
    }
    
    .admin-blog-action-btn {
        font-size: 0.875rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* ========================================
   BLOG SHOW PAGE SPECIFIC STYLES
   ======================================== */

/* Blog Detail Header Section - Clean Design */
.blog-detail-header {
    background: var(--pure-white);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 0;
}

/* Blog Back Navigation */
.blog-back-nav {
    margin-bottom: 2rem;
}

.blog-back-link {
    color: #6b7280;
    text-decoration: none;
    font-family: var(--theme-font-family);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.blog-back-link:hover {
    color: var(--dark-color);
    text-decoration: none;
}

.blog-back-link i {
    font-size: 0.85rem;
}

/* Blog Header Content */
.blog-header-content {
    max-width: 100%;
}

/* Blog Category Badge */
.blog-category-badge {
    display: inline-block;
    background-color: #000000;
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-family: var(--theme-font-family);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

/* Blog Main Title */
.blog-main-title {
    font-family: var(--theme-font-family);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark-color);
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* Blog Subtitle */
.blog-subtitle {
    font-family: var(--theme-font-family);
    font-size: 1.125rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Blog Author Meta Section */
.blog-author-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.blog-author-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.blog-author-avatar {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-author-initial {
    font-family: var(--theme-font-family);
    font-size: 1rem;
    font-weight: 600;
    color: #6b7280;
}

.blog-author-name {
    font-family: var(--theme-font-family);
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-color);
}

.blog-meta-items {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.blog-meta-item {
    display: flex;
    align-items: center;
    font-family: var(--theme-font-family);
    font-size: 0.9rem;
    color: #6b7280;
}

.blog-meta-item i {
    font-size: 0.8rem;
    margin-right: 0.25rem;
}

.blog-action-icons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.blog-action-btn {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1.1rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.blog-action-btn:hover {
    color: var(--dark-color);
    background-color: #f9fafb;
}

.blog-action-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ========================================
   BLOG SECTION STYLES - ORGANIZED
   ======================================== */

/* Blog Section Titles */
.blog-section-title {
    font-family: var(--theme-font-family);
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
}

.blog-section-subtitle {
    font-family: var(--theme-font-family);
    color: #6b7280;
    font-size: 1rem;
}

/* Blog Article Footer */
.blog-article-footer {
    border-top: 1px solid #e5e7eb;
    padding-top: 2rem;
    margin-top: 3rem;
}

.blog-stat-item {
    display: flex;
    align-items: center;
    font-family: var(--theme-font-family);
    color: #6b7280;
    font-size: 0.9rem;
}

.blog-share-footer {
    margin-top: 0.5rem;
}

/* Blog Related Articles */
.blog-related-section {
    background-color: #f9fafb;
}

.blog-related-card {
    background: white;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.blog-related-image {
    height: 200px;
    overflow: hidden;
    position: relative;
}

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

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

.blog-related-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-related-title {
    font-family: var(--theme-font-family);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    flex-grow: 1;
}

.blog-related-title a {
    color: var(--dark-color);
    transition: color 0.3s ease;
    text-decoration: none;
}

.blog-related-title a:hover {
    color: var(--primary-blue);
}

.blog-related-meta {
    margin-top: auto;
}

.blog-related-meta small {
    font-family: var(--theme-font-family);
    color: #6b7280;
}

/* Blog Navigation Improvements */
.blog-back-nav {
    margin-bottom: 2rem;
}

.blog-back-link {
    color: #6b7280;
    text-decoration: none;
    font-family: var(--theme-font-family);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.blog-back-link:hover {
    color: var(--dark-color);
    text-decoration: none;
}

.blog-back-link i {
    font-size: 0.85rem;
    margin-right: 0.5rem;
}

/* Blog Detail Content Section - Clean Design */
.blog-detail-content {
    background-color: var(--pure-white);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: var(--spacing-xl) 0;
}

/* Blog Article */
.blog-article {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* Blog Content Container */
.blog-content {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* Blog Featured Image */
.blog-featured-image {
    margin-bottom: 3rem;
}

.blog-featured-image img {
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Blog Content Text - Clean Typography */
.blog-content-text {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    line-height: 1.8;
    font-size: 1rem;
    text-align: left;
}

.blog-content-text p {
    margin-bottom: 1.5rem;
    color: #374151;
    text-align: justify;
    text-justify: inter-word;
}

.blog-content-text h1,
.blog-content-text h2,
.blog-content-text h3,
.blog-content-text h4,
.blog-content-text h5,
.blog-content-text h6 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--dark-color);
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.blog-content-text h1 {
    font-size: 2rem;
}

.blog-content-text h2 {
    font-size: 1.75rem;
}

.blog-content-text h3 {
    font-size: 1.5rem;
}

.blog-content-text h4 {
    font-size: 1.25rem;
}

.blog-content-text h5 {
    font-size: 1.125rem;
}

.blog-content-text h6 {
    font-size: 1rem;
}

.blog-content-text ul,
.blog-content-text ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
    text-align: left;
}

.blog-content-text li {
    margin-bottom: 0.5rem;
    color: #374151;
}

.blog-content-text blockquote {
    border-left: 4px solid #e5e7eb;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #6b7280;
    text-align: left;
}

.blog-content-text code {
    background-color: #f3f4f6;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    color: #dc2626;
    word-break: break-word;
}

.blog-content-text pre {
    background-color: #f3f4f6;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    text-align: left;
}

.blog-content-text pre code {
    background-color: transparent;
    padding: 0;
    color: #374151;
}

.blog-content-text img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
    display: block;
}

.blog-content-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
}

.blog-content-text table th,
.blog-content-text table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.blog-content-text table th {
    background-color: #f9fafb;
    font-weight: 600;
}

/* Blog Breadcrumb Styling */
.blog-breadcrumb {
    background-color: transparent;
    padding: 0;
}

.blog-breadcrumb-link {
    color: var(--primary-blue);
    text-decoration: none;
    font-family: var(--theme-font-family);
}

.blog-breadcrumb-active {
    color: var(--secondary-gray);
    font-family: var(--theme-font-family);
}

/* Blog Meta Styling */
.blog-meta-badge {
    font-family: var(--theme-font-family);
    font-weight: 500;
}

.blog-meta-featured-badge {
    background-color: var(--warning-orange);
    color: var(--pure-white);
    font-family: var(--theme-font-family);
    font-weight: 500;
}

.blog-meta-article-badge {
    background-color: var(--primary-blue-10);
    color: var(--primary-blue);
    font-family: var(--theme-font-family);
    font-weight: 500;
}

/* Blog Title Styling */
.blog-detail-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

/* Blog Meta Info Styling */
.blog-meta-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 1rem;
}

.blog-author-info {
    display: flex;
    align-items: center;
}

.blog-author-avatar {
    width: 40px;
    height: 40px;
    background-color: var(--primary-blue-10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-author-avatar i {
    color: var(--primary-blue);
}

.blog-author-label {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

.blog-author-name {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.blog-date-label {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

.blog-date-value {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.blog-stats-label {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

.blog-stats-value {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

/* Blog Featured Image */
.blog-featured-image {
    margin-bottom: 3rem;
}

.blog-featured-image img {
    max-height: 400px;
    object-fit: cover;
}

/* Blog Excerpt Styling */
.blog-excerpt {
    margin-bottom: 3rem;
}

.blog-excerpt-alert {
    background-color: var(--primary-blue-10);
    border-left: 4px solid var(--primary-blue);
}

.blog-excerpt-heading {
    font-family: var(--theme-font-family);
    color: var(--primary-blue);
}

.blog-excerpt-text {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
    line-height: 1.6;
}

/* Blog Content Styling - Legacy (removed duplicate) */

/* Blog Actions Styling */
.blog-actions {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--primary-blue-10);
}

.blog-actions-stats {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.blog-stat-item {
    display: flex;
    align-items: center;
}

.blog-stat-item i {
    color: var(--primary-blue);
}

.blog-stat-item span {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

/* Blog Sidebar Styling */
.blog-sidebar {
    margin-top: 2rem;
}

.sidebar-widget {
    border: 0;
    box-shadow: var(--shadow-lg);
    margin-bottom: 1.5rem;
}

.sidebar-widget .card-header {
    color: var(--pure-white);
    padding: var(--spacing-lg);
}

.sidebar-widget .card-title {
    font-family: var(--theme-font-family);
    margin-bottom: 0;
}

.sidebar-widget .card-body {
    padding: var(--spacing-lg);
}

/* Author Info Widget */
.author-widget-header {
    background-color: var(--primary-blue);
    color: var(--pure-white);
}

.author-widget-avatar {
    width: 80px;
    height: 80px;
    background-color: var(--primary-blue-10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.author-widget-avatar i {
    color: var(--primary-blue);
    font-size: 2rem;
}

.author-widget-name {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.author-widget-description {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

.author-widget-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.author-widget-stat-item {
    text-align: center;
}

.author-widget-stat-value {
    color: var(--primary-blue);
}

.author-widget-stat-label {
    color: var(--secondary-gray);
}

/* Related Blogs Widget */
.related-blogs-header {
    background-color: var(--success-green);
    color: var(--pure-white);
}

.related-blog-item {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--primary-blue-10);
    transition: background-color 0.3s ease;
}

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

.related-blog-item:hover {
    background-color: var(--primary-blue-10);
}

.related-blog-image {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.related-blog-image img {
    object-fit: cover;
}

.related-blog-content {
    flex-grow: 1;
}

.related-blog-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-blog-link {
    color: var(--dark-color);
    text-decoration: none;
}

.related-blog-date {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

/* Recent Blogs Widget */
.recent-blogs-header {
    background-color: var(--warning-orange);
    color: var(--pure-white);
}

.recent-blog-item {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--primary-blue-10);
    transition: background-color 0.3s ease;
}

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

.recent-blog-item:hover {
    background-color: var(--primary-blue-10);
}

.recent-blog-image {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.recent-blog-image img {
    object-fit: cover;
}

.recent-blog-content {
    flex-grow: 1;
}

.recent-blog-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recent-blog-link {
    color: var(--dark-color);
    text-decoration: none;
}

.recent-blog-date {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

/* Blog Show Responsive Design - Legacy (kept for compatibility) */
@media (max-width: 768px) {
    .blog-detail-content .row {
        flex-direction: column-reverse;
    }
    
    .blog-sidebar {
        margin-top: 2rem;
    }
    
    .blog-meta-info {
        flex-direction: column;
        gap: 1rem !important;
    }
    
    .blog-actions {
        flex-direction: column;
        gap: 1rem;
    }
    
    .blog-actions-stats {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}

/* ========================================
   BLOG DETAIL CLEAN DESIGN RESPONSIVE
   ======================================== */

/* Tablet Styles */
@media (max-width: 992px) {
    .blog-main-title {
        font-size: 2rem;
    }
    
    .blog-subtitle {
        font-size: 1rem;
    }
    
    .blog-author-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .blog-meta-items {
        gap: 1rem;
    }
    
    .blog-action-icons {
        align-self: flex-end;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .blog-detail-header {
        padding: var(--spacing-lg) 0;
    }
    
    .blog-detail-content {
        padding: var(--spacing-lg) 0;
    }
    
    .blog-back-nav {
        margin-bottom: 1.5rem;
    }
    
    .blog-main-title {
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    .blog-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }
    
    .blog-category-badge {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .blog-author-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .blog-author-section {
        gap: 0.5rem;
    }
    
    .blog-author-avatar {
        width: 2rem;
        height: 2rem;
    }
    
    .blog-author-initial {
        font-size: 0.9rem;
    }
    
    .blog-author-name {
        font-size: 0.9rem;
    }
    
    .blog-meta-items {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .blog-meta-item {
        font-size: 0.85rem;
    }
    
    .blog-action-icons {
        align-self: flex-start;
        gap: 0.5rem;
    }
    
    .blog-action-btn {
        font-size: 1rem;
        padding: 0.4rem;
    }
    
    .blog-featured-image {
        margin-bottom: 2rem;
    }
    
    .blog-content-text {
        font-size: 1rem;
        line-height: 1.7;
        text-align: left;
    }
    
    .blog-content-text p {
        text-align: left;
        text-justify: none;
    }
    
    .blog-content-text h1 {
        font-size: 1.5rem;
    }
    
    .blog-content-text h2 {
        font-size: 1.375rem;
    }
    
    .blog-content-text h3 {
        font-size: 1.25rem;
    }
    
    .blog-content-text h4 {
        font-size: 1.125rem;
    }
    
    .blog-content-text h5 {
        font-size: 1rem;
    }
    
    .blog-content-text h6 {
        font-size: 0.9rem;
    }
    
    .blog-content-text ul,
    .blog-content-text ol {
        padding-left: 1.5rem;
    }
}

/* Small Mobile Styles */
@media (max-width: 576px) {
    .blog-main-title {
        font-size: 1.5rem;
    }
    
    .blog-subtitle {
        font-size: 0.9rem;
    }
    
    .blog-content-text {
        font-size: 0.95rem;
        text-align: left;
    }
    
    .blog-content-text p {
        text-align: left;
        text-justify: none;
    }
    
    .blog-content-text h1 {
        font-size: 1.375rem;
    }
    
    .blog-content-text h2 {
        font-size: 1.25rem;
    }
    
    .blog-content-text h3 {
        font-size: 1.125rem;
    }
    
    /* Blog Section Responsive */
    .blog-section-title {
        font-size: 1.5rem;
    }
    
    .blog-section-subtitle {
        font-size: 0.9rem;
    }
    
    .blog-related-card {
        margin-bottom: 1rem;
    }
    
    .blog-related-content {
        padding: 1rem;
    }
    
    .blog-related-title {
        font-size: 1rem;
    }
    
    .blog-article-footer {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }
    
    .blog-share-footer {
        margin-top: 1rem;
    }
}

/* About Content Section */
/* Default styling - no special requirements for about-content-section */

.about-content-card {
    border: 0;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

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

.about-content-text {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
    font-weight: var(--font-weight-normal);
    font-size: 1rem;
    line-height: 1.6;
}

/* About CTA Section */
.about-cta-section {
    background: var(--primary-blue);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.about-cta-content {
    color: var(--pure-white);
}

.about-cta-title {
    font-family: var(--theme-font-family);
    color: var(--pure-white);
}

.about-cta-description {
    font-family: var(--theme-font-family);
    color: var(--pure-white);
}

.about-cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: var(--spacing-sm);
}

.about-cta-white-btn {
    background-color: var(--pure-white);
    color: var(--primary-blue);
    border: none;
    font-weight: 600;
    font-family: var(--theme-font-family);
}

.about-cta-outline-white-btn {
    border: 2px solid var(--pure-white);
    color: var(--pure-white);
    background-color: transparent;
    font-weight: 600;
    font-family: var(--theme-font-family);
}

/* About Card Hover Effects */
.about-card {
    transition: all var(--transition-normal);
}

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

/* About Icon Hover Effects */
.about-icon-primary:hover {
    background-color: var(--primary-blue) !important;
}

.about-icon-primary:hover i {
    color: white !important;
}

.about-icon-success:hover {
    background-color: var(--success-green) !important;
}

.about-icon-success:hover i {
    color: white !important;
}

.about-icon-warning:hover {
    background-color: var(--warning-orange) !important;
}

.about-icon-warning:hover i {
    color: white !important;
}

/* About Smooth Animations */
.about-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.about-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* About Responsive Design */
@media (max-width: 768px) {
    .about-cta-buttons {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .about-cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .display-4 {
        font-size: 2.5rem;
    }
    
    .display-5 {
        font-size: 2rem;
    }
    
    .display-6 {
        font-size: 1.75rem;
    }
}

@media (max-width: 576px) {
    .about-cta-buttons {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .about-cta-buttons .btn {
        width: 100%;
        font-size: 0.9rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .display-4 {
        font-size: 2rem;
    }
    
    .display-5 {
        font-size: 1.75rem;
    }
    
    .display-6 {
        font-size: 1.5rem;
    }
}

/* ========================================
   FOOTER WHITE TEXT STYLES
   ======================================== */

/* Footer White Text Override - Background tetap gelap, teks putih */
.footer-white-text {
    color: var(--pure-white) !important;
}

/* Footer Headings - White Text */
.footer-heading {
    color: var(--pure-white) !important;
    font-family: var(--theme-font-family);
    font-weight: var(--font-weight-bold);
}

/* Footer Text Muted - Light Gray Text */
.footer-text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: var(--theme-font-family);
    line-height: 1.6;
}

/* Footer Links - White Text with Hover */
.footer-link {
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: var(--theme-font-family);
    transition: all var(--transition-normal);
    text-decoration: none;
}

.footer-link:hover {
    color: var(--pure-white) !important;
    text-decoration: none;
    transform: translateX(2px);
}

/* Footer Social Links - White with Blue Background */
.footer-social-link {
    color: var(--pure-white) !important;
    font-size: 1.2rem;
    transition: all var(--transition-normal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-social-link:hover {
    color: var(--pure-white) !important;
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
    text-decoration: none;
}

/* Footer Contact Info - White Text */
.footer-contact {
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: var(--theme-font-family);
}

.footer-contact i {
    color: var(--primary-blue) !important;
    width: 16px;
}

/* Footer Divider - Light Border */
.footer-divider {
    border-color: rgba(255, 255, 255, 0.2) !important;
    margin: 2rem 0;
}

/* Footer Contact Divider - Responsive */
.footer-contact-divider {
    border-color: rgba(255, 255, 255, 0.15) !important;
    margin-top: 1.5rem;
    margin-bottom: 0;
    border-width: 1px;
}

/* Show divider only on mobile and tablet */
@media (max-width: 991.98px) {
    .footer-contact-divider {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .footer-contact-divider {
        display: none !important;
    }
}

/* Footer Social Media in Contact Section */
.footer-contact .footer-social-link {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-contact .footer-social-link:hover {
    color: var(--primary-blue) !important;
    background-color: rgba(255, 255, 255, 0.2);
    border-color: var(--primary-blue);
    transform: translateY(-2px);
}

/* Social Media Section in Contact */
.footer-contact .mt-3 .footer-heading {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.footer-contact .mt-3 .d-flex {
    gap: 0.75rem;
}

/* Footer Copyright - Light Gray Text */
.footer-copyright {
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: var(--theme-font-family);
    font-size: 0.9rem;
}

/* Footer Brand Text - White */
.footer-white-text h5 {
    color: var(--pure-white) !important;
    font-family: var(--theme-font-family);
    font-weight: var(--font-weight-bold);
}

/* Footer Logo Hover Effect */
.footer-white-text img {
    transition: all var(--transition-normal);
}

.footer-white-text img:hover {
    transform: scale(1.05);
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

/* Footer Responsive Design */
@media (max-width: 768px) {
    .footer-white-text {
        text-align: center;
    }
    
    .footer-social-link {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .footer-contact {
        text-align: center;
    }
    
    .footer-contact li {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 576px) {
    .footer-social-link {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
}

/* ========================================
   PACKAGE CARD INFORMATION STYLING
   ======================================== */

/* Package Card Information Styling */
.package-info-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.package-info-item i {
    width: 16px;
    text-align: center;
    margin-right: 0.5rem;
}

.package-type-badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
}

.package-details-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.package-detail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f8f9fa;
    min-height: 32px;
}

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

.detail-label {
    font-weight: 600;
    color: #495057;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 90px;
    flex-shrink: 0;
}

.detail-value {
    color: #212529;
    font-weight: 500;
    text-align: right;
    flex: 1;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ========================================
   COMPARE CHECKBOX STYLING - BELOW BANNER
   ======================================== */

/* Compare checkbox container below banner */
.compare-checkbox-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.compare-checkbox-container .form-check {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.compare-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.compare-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6c757d;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.compare-checkbox:checked + .compare-label {
    color: #007bff;
    font-weight: 600;
}

/* ========================================
   FLOATING WHATSAPP BUTTON
   ======================================== */

/* Floating WhatsApp Button Container */
.floating-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
}

/* Show floating WhatsApp button with animation */
.floating-whatsapp.show {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* WhatsApp Button Styling */
.whatsapp-btn {
    width: 50px;
    height: 50px;
    background-color: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    z-index: 10000;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
}

/* WhatsApp Button Hover Effect */
.whatsapp-btn:hover {
    background-color: #20C55A;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    text-decoration: none;
}

/* WhatsApp Button Active Effect */
.whatsapp-btn:active {
    transform: scale(0.95);
}

/* WhatsApp Icon Styling */
.whatsapp-btn i {
    color: white;
    font-size: 24px;
    transition: all 0.3s ease;
}

/* WhatsApp Button Hover Icon Effect */
.whatsapp-btn:hover i {
    transform: scale(1.1);
}

/* Ripple Effect */
.whatsapp-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.whatsapp-btn:active::before {
    width: 120px;
    height: 120px;
}

/* Pulse Animation */
.whatsapp-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 2px solid #25D366;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: whatsapp-pulse 2s infinite;
    pointer-events: none;
    z-index: 9998;
}

/* Pulse Animation Keyframes */
@keyframes whatsapp-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

/* Bounce Animation on Load */
.whatsapp-bounce {
    animation: whatsapp-bounce 0.6s ease-out;
}

@keyframes whatsapp-bounce {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .floating-whatsapp {
        bottom: 15px;
        right: 15px;
    }
    
    .whatsapp-btn {
        width: 45px;
        height: 45px;
    }
    
    .whatsapp-btn i {
        font-size: 22px;
    }
}

@media (max-width: 576px) {
    .floating-whatsapp {
        bottom: 10px;
        right: 10px;
    }
    
    .whatsapp-btn {
        width: 40px;
        height: 40px;
    }
    
    .whatsapp-btn i {
        font-size: 20px;
    }
}

/* Accessibility */
.whatsapp-btn:focus {
    outline: 2px solid #25D366;
    outline-offset: 2px;
}

/* Screen Reader Only Text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Ensure WhatsApp button is always clickable */
.floating-whatsapp * {
    pointer-events: auto;
}

.floating-whatsapp .whatsapp-pulse {
    pointer-events: none;
}

/* Force clickable area */
.whatsapp-btn::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: 10001;
    pointer-events: auto;
}

/* Package Meta Information Styles */
.package-meta {
    padding: 1.5rem;
    margin: 1.5rem 0;
    overflow: hidden;
}

.package-meta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-gradient);
    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
}

.package-meta .row {
    position: relative;
    z-index: 1;
}

.meta-item {
    background: rgba(255, 255, 255, 0.9);
    padding: 0.5rem;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.meta-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-gradient);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.meta-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--primary-blue-20);
    border-color: var(--primary-blue);
    background: rgba(255, 255, 255, 0.95);
}

.meta-item:hover::before {
    opacity: 1;
}

.meta-item i {
    font-size: 1.2rem;
    color: var(--primary-blue);
    background: var(--primary-blue-10);
    padding: 0.5rem;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-normal);
    box-shadow: 0 2px 8px var(--primary-blue-20);
}

.meta-item:hover i {
    background: var(--primary-gradient);
    color: var(--pure-white);
    transform: scale(1.1);
    box-shadow: 0 4px 15px var(--primary-blue-30);
}

.meta-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.meta-label {
    font-weight: var(--font-weight-semibold);
    color: var(--dark-color);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    margin-bottom: 0;
    display: block;
    font-family: var(--font-family-base);
    line-height: 1.2;
}

.meta-value {
    font-weight: var(--font-weight-bold);
    color: var(--primary-blue);
    font-size: 1rem;
    display: block;
    font-family: var(--font-family-base);
    line-height: 1.2;
}

/* Responsive adjustments for package meta */
@media (max-width: 768px) {
    .package-meta {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .meta-item {
        padding: 0.75rem;
        gap: 0.5rem;
    }
    
    .meta-item i {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }
    
    .meta-label {
        font-size: 0.8rem;
    }
    
    .meta-value {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .package-meta .row {
        gap: 0.75rem;
    }
    
    .meta-item {
        padding: 0.6rem;
    }
}

/* Price Details Card Styles */
.price-details-card {
    border: 1px solid var(--primary-blue-10);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    overflow: hidden;
}

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

.price-details-card .card-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid var(--primary-blue-10);
    padding: var(--spacing-lg);
}

.price-details-card .card-title {
    font-family: var(--font-family-base);
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.price-details-card .card-body {
    padding: var(--spacing-lg);
}

.price-detail-card {
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
    height: 100%;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.price-detail-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0 2px 2px 0;
    transition: all var(--transition-normal);
}

.price-detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-blue);
}

.price-detail-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.price-detail-header i {
    font-size: 1.2rem;
}

.price-detail-header h6 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0;
    color: var(--dark-color);
}

.price-detail-content {
    font-family: var(--font-family-base);
    color: var(--dark-color);
    line-height: 1.6;
    font-size: 0.95rem;
}

.price-detail-content p {
    margin-bottom: 0.5rem;
}

.price-detail-content p:last-child {
    margin-bottom: 0;
}

/* Responsive adjustments for price details */
@media (max-width: 768px) {
    .price-details-card .card-header,
    .price-details-card .card-body {
        padding: var(--spacing-md);
    }
    
    .price-detail-card {
        padding: var(--spacing-md);
    }
    
    .price-detail-header {
        margin-bottom: var(--spacing-sm);
    }
}

/* Itinerary List Styles */
.itinerary-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.itinerary-item {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--primary-blue-10);
    border-radius: var(--border-radius-xl);
    padding: 1.25rem;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
}

.itinerary-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary-gradient);
    border-radius: 0 2px 2px 0;
}

.itinerary-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--primary-blue-30);
    border-color: var(--primary-blue);
    background: rgba(255, 255, 255, 0.95);
}

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

.itinerary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.itinerary-title {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--dark-color);
    margin: 0;
    line-height: 1.3;
    font-family: var(--font-family-base);
}

.itinerary-badge {
    background: var(--primary-gradient);
    color: var(--pure-white);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px var(--primary-blue-30);
    font-family: var(--font-family-base);
}

.itinerary-description {
    line-height: 1.6;
    font-family: var(--font-family-base);
}

.itinerary-description p {
    margin: 0;
    font-size: 0.95rem;
    font-weight: var(--font-weight-normal);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .itinerary-item {
        padding: 1rem;
    }
    
    .itinerary-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .itinerary-title {
        font-size: 1rem;
    }
    
    .itinerary-badge {
        font-size: 0.75rem;
        padding: 0.2rem 0.6rem;
    }
}

/* Itinerary Card Styles - New Table Layout */
.itinerary-card-new {
    background-color: var(--pure-white);
    border: 1px solid var(--border-gray);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.itinerary-card-new .card-body {
    padding: 1rem !important;
}

.itinerary-title-new {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--dark-color);
    margin-bottom: 1rem;
}

.itinerary-table-new {
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.itinerary-header-new {
    display: grid;
    grid-template-columns: 120px 1fr;
    background-color: #f8f9fa;
    border-bottom: 2px solid var(--border-gray);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dark-color);
    width: 100%;
    box-sizing: border-box;
}

.itinerary-col-day,
.itinerary-col-desc {
    padding: 0.75rem;
    border-right: 1px solid var(--border-gray);
}

.itinerary-col-desc {
    border-right: none;
}

.itinerary-body-new {
    display: flex;
    flex-direction: column;
}

.itinerary-row-new {
    display: grid;
    grid-template-columns: 120px 1fr;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.itinerary-row-new:last-child {
    border-bottom: none;
}

.itinerary-row-new:hover {
    background-color: rgba(13, 110, 253, 0.02);
}

.itinerary-day-cell,
.itinerary-desc-cell {
    padding: 0.75rem;
    display: flex;
    align-items: center;
    border-right: 1px solid #f0f0f0;
}

.itinerary-desc-cell {
    border-right: none;
}

.itinerary-day-badge {
    background-color: #e9ecef;
    color: var(--dark-color);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--font-family-base);
}

.itinerary-desc-text {
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--dark-color);
    line-height: 1.4;
    white-space: pre-line;
}

/* Responsive adjustments for new itinerary table */
@media (max-width: 768px) {
    .itinerary-header-new {
        grid-template-columns: 100px 1fr;
        font-size: 0.8rem;
    }
    
    .itinerary-row-new {
        grid-template-columns: 100px 1fr;
    }
    
    .itinerary-col-day,
    .itinerary-col-desc,
    .itinerary-day-cell,
    .itinerary-desc-cell {
        padding: 0.5rem;
    }
    
    .itinerary-day-badge {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }
    
    .itinerary-desc-text {
        font-size: 0.9rem;
    }
    
    .itinerary-title-new {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
}

/* Price Details Card Styles - New Layout */
.price-details-card-new {
    background-color: var(--pure-white);
    border: 1px solid var(--border-gray);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.price-details-card-new .card-body {
    padding: 1rem !important;
}

.price-details-title-new {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--dark-color);
    margin-bottom: 1rem;
}

/* Responsive adjustments for price details card */
@media (max-width: 768px) {
    .price-details-title-new {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
}

/* Flight Info Card Styles - New Clean Layout */
.flight-info-card-new {
    background-color: var(--pure-white);
    border: 1px solid var(--border-gray);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.flight-info-card-new .card-body {
    padding: 1rem !important;
}

.flight-info-title-new {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--dark-color);
    margin-bottom: 1rem;
}

.flight-info-list-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    column-gap: 2rem;
}

.flight-info-item-new {
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
}

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

.flight-info-grid-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    column-gap: 2rem;
}

.flight-info-column-new {
    padding: 1rem;
    border: 1px solid #f0f0f0;
    border-radius: var(--border-radius-sm);
    background-color: #fafafa;
}

.flight-info-column-new.departure-column {
    border-left: 4px solid var(--primary-blue);
}

.flight-info-column-new.return-column {
    border-left: 4px solid var(--success-green);
}

.flight-info-header-new {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.flight-info-subtitle-new {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 1rem;
    color: var(--dark-color);
    margin: 0;
}

.flight-route-text-new {
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--secondary-gray);
    margin: 0;
}

.airline-info-new {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.airline-name-new {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dark-color);
    margin: 0;
}

.airline-type-new {
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--secondary-gray);
}

.flight-route-new {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.route-point-new {
    display: flex;
    align-items: center;
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--dark-color);
}

.flight-note-new {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius-sm);
    padding: 0.75rem;
    font-family: var(--font-family-base);
    font-size: 0.9rem;
    color: var(--dark-color);
}

/* Responsive adjustments for flight info */
@media (max-width: 768px) {
    .flight-info-grid-new {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .flight-info-column-new {
        padding: 0.75rem;
    }
    
    .flight-info-title-new {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .flight-info-subtitle-new {
        font-size: 0.95rem;
    }
    
    .flight-route-text-new {
        font-size: 0.85rem;
    }
    
    .airline-name-new {
        font-size: 0.9rem;
    }
    
    .airline-type-new {
        font-size: 0.8rem;
    }
    
    .route-point-new {
        font-size: 0.85rem;
    }
    
    .flight-route-new {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .flight-note-new {
        font-size: 0.85rem;
        padding: 0.5rem;
    }
}

/* Cost Simulation Card Styles - New Layout */
.cost-simulation-card-new {
    background-color: var(--pure-white);
    border: 1px solid var(--border-gray);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.cost-simulation-card-new .card-body {
    padding: 1rem !important;
}

.cost-simulation-title-new,
.addons-title-new {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--dark-color);
    margin-bottom: 1rem;
}

.variants-container-new,
.addons-container-new {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.variant-card-new,
.addon-card-new {
    background-color: #fafafa;
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius-md);
    padding: 1rem;
    position: relative;
}

.variant-badge-new {
    position: absolute;
    top: -8px;
    left: 12px;
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    font-family: var(--font-family-base);
}

.variant-badge-blue {
    background-color: var(--primary-blue);
}

.variant-badge-purple {
    background-color: #6f42c1;
}

.variant-price-new {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.price-amount {
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primary-blue);
    display: inline;
}

.price-per {
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 0.5rem;
    color: var(--secondary-gray) !important;
    display: inline;
}

.variant-input-new,
.addon-input-new {
    margin-bottom: 0.75rem;
}

.input-label {
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--dark-color);
    margin-bottom: 0.25rem;
    display: block;
}

.quantity-input-new,
.addon-quantity-input-new {
    font-family: var(--font-family-base);
    font-size: 0.95rem;
    border: 1px solid #ced4da;
    border-radius: var(--border-radius-sm);
    padding: 0.5rem;
}

.addon-header-new {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.addon-name-new {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 1rem;
    color: var(--dark-color);
    margin: 0;
}

.addon-price-new {
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--secondary-gray);
}

.addon-total-new {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dark-color);
    text-align: right;
}

.discount-card-new {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: var(--border-radius-md);
    padding: 1rem;
}

.discount-header-new {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.discount-title-new {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 1rem;
    color: var(--success-green);
}

.discount-info-new {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.discount-period-new {
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--dark-color);
}

.discount-amount-new {
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 1rem;
    color: var(--success-green);
}

.simulation-actions-new {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.simulation-actions-new .row {
    margin: 0;
}

.simulation-actions-new .col-md-8,
.simulation-actions-new .col-md-4 {
    padding: 0;
}

.simulation-actions-new .btn {
    height: 48px;
    font-weight: 600;
    border-radius: var(--border-radius-md);
    transition: all 0.2s ease;
}

.simulation-actions-new .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.simulation-results-new {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius-md);
    padding: 1rem;
}

.results-header-new {
    margin-bottom: 1rem;
}

.results-title-new {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--dark-color);
    margin: 0;
}

.breakdown-section-new {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.breakdown-item-new {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

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

.breakdown-item-new.total-item-new {
    border-top: 2px solid var(--primary-blue);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

.breakdown-label-new {
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--dark-color);
}

.breakdown-value-new {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dark-color);
}

.breakdown-value--line-through {
    text-decoration: line-through;
}

.simulation-results--hidden {
    display: none;
}

/* Responsive adjustments for cost simulation */
@media (max-width: 768px) {
    .cost-simulation-title-new,
    .addons-title-new {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .variant-card-new,
    .addon-card-new {
        padding: 0.75rem;
    }
    
    .price-amount {
        font-size: 1.1rem;
    }
    
    .addon-header-new {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .discount-info-new {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .breakdown-item-new {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .simulation-actions-new .col-md-8,
    .simulation-actions-new .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .simulation-actions-new .col-md-4:last-child {
        margin-bottom: 0;
    }
}

/* Package Banner Section Styles */
/* Package Detail Page Styles */

.package-detail-page .container-fluid {
    padding-top: 0;
    padding-bottom: 0;
}

.package-banner-section {
    width: 100%;
    margin-bottom: 2rem;
    margin-top: 0;
    padding-top: 0;
}

.package-banner-container {
    height: 80%;
    width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: #f8f9fa;
}

.package-banner-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition-normal);
}

.package-banner-image:hover {
    transform: scale(1.02);
}

.package-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.package-banner-content {
    text-align: center;
    color: white;
    padding: 2rem;
}

.package-banner-title {
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 2.5rem;
    color: white;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.package-banner-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
}

.banner-price-amount {
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 2rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.banner-price-per {
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Responsive adjustments for banner */
@media (max-width: 768px) {
    .package-banner-container {
        height: 300px;
    }
    
    .package-banner-title {
        font-size: 1.8rem;
    }
    
    .banner-price-amount {
        font-size: 1.5rem;
    }
    
    .banner-price-per {
        font-size: 1rem;
    }
    
    .package-banner-content {
        padding: 1rem;
    }
}

/* Package Sidebar Image Styles - New Design */
.package-image-container-new {
    position: relative;
    height: 100%;
    width: 100%;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: #f8f9fa;
}

.package-sidebar-image-new {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition-normal);
}

.package-sidebar-image-new:hover {
    transform: scale(1.05);
}

/* Package Sidebar Placeholder Styles - New Design */
.package-sidebar-placeholder-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    background-color: #fafafa;
    border-radius: var(--border-radius-md);
    border: 1px solid #e9ecef;
    min-height: 300px;
}

.placeholder-icon-new {
    width: 60px;
    height: 60px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.placeholder-icon-new i {
    font-size: 1.5rem;
    color: #6c757d;
}

.placeholder-text-new {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.placeholder-title-new {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 1.1rem;
    color: #495057;
    margin: 0;
    line-height: 1.3;
}

.placeholder-description-new {
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
}

/* Responsive adjustments for package image and placeholder */
@media (max-width: 768px) {
    .package-image-container-new {
        height: 250px;
    }
    
    .package-sidebar-placeholder-new {
        padding: 1.5rem 0.75rem;
        min-height: 250px;
    }
    
    .placeholder-icon-new {
        width: 50px;
        height: 50px;
        margin-bottom: 0.75rem;
    }
    
    .placeholder-icon-new i {
        font-size: 1.25rem;
    }
    
    .placeholder-title-new {
        font-size: 1rem;
    }
    
    .placeholder-description-new {
        font-size: 0.85rem;
    }
}

/* Agent Info Card Styles - New Design */
.agent-info-card-new {
    background-color: var(--pure-white);
    border: 1px solid #e9ecef;
    border-left: 4px solid #ff6b35;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

.agent-info-card-new .card-body {
    padding: 1.5rem !important;
}

.agent-header-new {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.agent-icon-new {
    width: 50px;
    height: 50px;
    background-color: #ff6b35;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.agent-icon-new i {
    font-size: 1.25rem;
    color: white;
}

.agent-info-new {
    flex-grow: 1;
}

.agent-name-new {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--dark-color);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.agent-description-new {
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
}

.agent-contact-new {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.contact-item-new {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

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

.contact-item-new i {
    width: 16px;
    height: 16px;
    color: #6c757d;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.contact-link-new {
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--dark-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-link-new:hover {
    color: #ff6b35;
    text-decoration: underline;
}

.contact-text-new {
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--dark-color);
}

.agent-status-new {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: var(--border-radius-sm);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-icon-new {
    width: 20px;
    height: 20px;
    color: #28a745;
    flex-shrink: 0;
}

.status-icon-new i {
    font-size: 1rem;
}

.status-text-new {
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 0.9rem;
    color: #155724;
}

/* Responsive adjustments for agent info */
@media (max-width: 768px) {
    .agent-info-card-new .card-body {
        padding: 1rem !important;
    }
    
    .agent-header-new {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
    }
    
    .agent-icon-new {
        width: 45px;
        height: 45px;
    }
    
    .agent-icon-new i {
        font-size: 1.1rem;
    }
    
    .agent-name-new {
        font-size: 1.1rem;
    }
    
    .agent-description-new {
        font-size: 0.85rem;
    }
    
    .contact-item-new {
        gap: 0.5rem;
    }
    
    .contact-link-new,
    .contact-text-new {
        font-size: 0.9rem;
    }
    
    .agent-status-new {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .status-text-new {
        font-size: 0.85rem;
    }
}

/* ========================================
   PACKAGE LABEL STYLING
   ======================================== */

/* Package Label Styling */
.package-label {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: white;
    padding: 8px 5px;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    transition: all 0.3s ease;
}

.package-label:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.package-label .label-text {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Alternative Package Label Styles */
.package-label.alternative {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.package-label.alternative:hover {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.package-label.premium {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);
}

.package-label.premium:hover {
    box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
}

/* Package Card Spacing for Label - Top Center */
.package-card-with-label {
    padding-top: 70px !important;
}

.package-card-with-label .card-body {
    padding-top: 1.5rem !important;
}

/* Responsive Package Label */
@media (max-width: 768px) {
    .package-label {
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 12px;
    }
    
    .package-label .label-text {
        font-size: 0.75rem;
    }
    
    .package-card-with-label {
        padding-top: 65px !important;
    }
    
    .package-card-with-label .card-body {
        padding-top: 1.25rem !important;
    }
}

@media (max-width: 576px) {
    .package-label {
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px 10px;
    }
    
    .package-label .label-text {
        font-size: 0.7rem;
    }
    
    .package-card-with-label {
        padding-top: 60px !important;
    }
    
    .package-card-with-label .card-body {
        padding-top: 1rem !important;
    }
}

/* ========================================
   FAQ STYLES
   ======================================== */

/* FAQ Header Styles */
.blog-header-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.blog-header-description {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
}

/* FAQ Accordion Styles */
.accordion-button {
    background: #fff;
    border: none;
    box-shadow: none;
    padding: 1.5rem;
    font-size: 1.1rem;
    font-family: var(--theme-font-family);
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.1) 0%, rgba(108, 117, 125, 0.1) 100%);
    color: var(--primary-blue);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border: none;
}

.accordion-body {
    padding: 1.5rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    font-family: var(--theme-font-family);
}

.accordion-item {
    border-radius: 12px !important;
    overflow: hidden;
}

.accordion-item:first-child {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

.accordion-item:last-child {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* ========================================
   ABOUT PAGE STYLES
   ======================================== */

/* About Content Styles */
.about-content-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.about-content-card {
    border: none;
    border-radius: var(--border-radius-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-content-text {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    font-size: 1rem;
    font-weight: var(--font-weight-normal) !important;
}

/* About Animation Styles */
.about-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.about-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   VISION MISSION VALUES STYLES
   ======================================== */

/* Vision Mission Section */
.vision-mission-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.vision-mission-card {
    background: #F8F9FA;
    border-radius: var(--border-radius-xl);
    padding: 2.5rem;
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.vision-mission-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.vision-mission-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.vision-mission-icon i {
    color: var(--pure-white);
    font-size: 1.5rem;
}

.vision-mission-title {
    font-family: var(--theme-font-family);
    font-weight: 700;
    color: var(--dark-color);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.vision-mission-text {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.vision-mission-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
}

.vision-mission-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    line-height: 1.6;
    font-size: 1rem;
}

.vision-mission-list li:last-child {
    margin-bottom: 0;
}

.vision-mission-list li i {
    color: var(--primary-blue);
    margin-right: 0.75rem;
    margin-top: 0.125rem;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* Values Section */
.values-section {

    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.values-main-title {
    font-family: var(--theme-font-family);
    font-weight: 700;
    color: var(--dark-color);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.values-subtitle {
    font-family: var(--theme-font-family);
    color: var(--secondary-gray);
    font-size: 1.125rem;
    margin-bottom: 0;
}

.value-card {
    background: #F8F9FA;
    border-radius: var(--border-radius-xl);
    padding: 2rem;
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.value-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-blue-10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    position: relative;
    z-index: 2;
}

.value-icon i {
    color: var(--primary-blue);
    font-size: 2rem;
}

.value-title {
    font-family: var(--theme-font-family);
    font-weight: 700;
    color: var(--dark-color);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.value-description {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

/* Responsive Design */
@media (max-width: 768px) {
    .vision-mission-card {
        padding: 2rem;
        margin-bottom: 1.5rem;
    }
    
    .vision-mission-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 1rem;
    }
    
    .vision-mission-icon i {
        font-size: 1.25rem;
    }
    
    .vision-mission-title {
        font-size: 1.25rem;
    }
    
    .values-main-title {
        font-size: 2rem;
    }
    
    .value-card {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .value-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }
    
    .value-icon i {
        font-size: 1.5rem;
    }
    
    .value-title {
        font-size: 1.125rem;
    }
}

@media (max-width: 576px) {
    .vision-mission-section,
    .values-section {
        padding: 3rem 0;
    }
    
    .vision-mission-card {
        padding: 1.5rem;
    }
    
    .value-card {
        padding: 1.25rem;
    }
    
    .values-main-title {
        font-size: 1.75rem;
    }
    
    .values-subtitle {
        font-size: 1rem;
    }
}

/* ========================================
   INLINE STYLES MIGRATION - CSP COMPLIANT
   ======================================== */

/* Toast Container Styles */
.toast-container--fixed {
    z-index: 9999;
}

.toast-message {
    color: #333;
    font-weight: 500;
}

/* Modal Styles */
.modal-title--inter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.modal-message--inter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
}

.modal-button--inter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
}

/* Logo Styles */
.navbar-logo {
    height: 45px;
    max-width: 200px;
    object-fit: contain;
}

.brand-icon--fixed {
    width: 40px;
    height: 40px;
}

.footer-logo {
    height: 100px;
}

/* Gallery Styles */
.gallery-card--animated {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.gallery-card--visible {
    opacity: 1;
    transform: translateY(0);
}

.youtube-iframe {
    object-fit: cover;
}

/* Package Filter Styles */
.filter-label--secondary {
    color: var(--secondary-gray);
    font-size: 0.9rem;
}

.sort-select--min-width {
    min-width: 180px;
}

/* Package Card Styles */
.price-display--hidden {
    display: none;
}

.banner-modal-image {
    max-height: 70vh;
    width: 100%;
    object-fit: contain;
}

/* Admin Styles */
.discount-fields--hidden {
    display: none;
}

.banner-preview--hidden {
    display: none;
}

.banner-preview-image {
    max-height: 200px;
    max-width: 100%;
}

.facility-icon--wrapper {
    width: 40px;
    height: 40px;
}

.facility-icon--premium {
    background-color: #fff3cd;
}

.facility-icon--standard {
    background-color: #e3f2fd;
}

.selected-facilities-summary--hidden {
    display: none;
}

.admin-logo {
    height: 32px;
}

/* Gallery Admin Styles */
.youtube-url-section--hidden {
    display: none;
}

.image-preview--hidden {
    display: none;
}

.image-preview-image {
    max-height: 300px;
}

.youtube-preview--hidden {
    display: none;
}

/* Public Pages Styles */
.feature-icon-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #007bff20;
}

.feature-icon-small i {
    color: #007bff;
}

/* Dynamic feature icon colors */
.feature-icon--dynamic {
    background-color: #007bff20;
}

.feature-icon--dynamic i {
    color: #007bff;
}

.feature-icon--dynamic[data-color] {
    background-color: var(--feature-color, #007bff)20;
}

.feature-icon--dynamic[data-color] i {
    color: var(--feature-color, #007bff);
}

.cta-section--background {
    background-size: cover;
    background-position: center;
}

.cta-section--primary {
    background-color: var(--bs-primary);
}

.cta-section--dynamic .cta-title--dynamic {
    font-size: 2rem;
    color: #ffffff;
}

.cta-section--dynamic .cta-subtitle--dynamic {
    font-size: 1.5rem;
    font-weight: var(--font-weight-normal);
    color: #ffffff;
}

.cta-section--dynamic .cta-description--dynamic {
    color: #ffffff;
}

/* Dynamic color support via data attributes */
.cta-section--dynamic[data-text-color] .cta-title--dynamic {
    color: var(--cta-text-color, #ffffff);
}

.cta-section--dynamic[data-text-color] .cta-subtitle--dynamic {
    color: var(--cta-text-color, #ffffff);
}

.cta-section--dynamic[data-text-color] .cta-description--dynamic {
    color: var(--cta-text-color, #ffffff);
}

.cta-title--white {
    color: #ffffff;
}

.cta-description--white {
    color: #ffffff;
}

/* Package Show Page */
.simulation-results--hidden {
    display: none;
}

.breakdown-item--hidden {
    display: none;
}

.breakdown-value--line-through {
    text-decoration: line-through;
}

/* Gallery Show Page */
.gallery-iframe {
    object-fit: cover;
}

/* Feedback Page */
.feedback-icon--large {
    width: 48px;
    height: 48px;
}

.feedback-icon--small {
    width: 32px;
    height: 32px;
}

.text-truncate--max-width {
    max-width: 200px;
}

/* Travel Info Page */
.travel-card-image {
    height: 200px;
    object-fit: cover;
}

.travel-card-placeholder {
    height: 200px;
}

/* Comparison Remove Button Styling */
.comparison-remove-btn {
    background: none;
    border: none;
    color: var(--secondary-gray);
    font-size: 0.9rem;
    padding: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.comparison-remove-btn:hover {
    background-color: var(--danger-red);
    color: var(--pure-white);
    transform: scale(1.1);
}

.comparison-remove-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

/* Comparison Page */
.comparison-card-header {
    padding: 1.5rem 2rem;
}

.comparison-title {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    font-weight: var(--font-weight-normal);
    font-size: 1rem;
}

.comparison-clear-btn--hidden {
    display: none;
}

.comparison-empty-title {
    font-family: var(--theme-font-family);
    font-weight: 600;
}

.comparison-empty-description {
    font-family: var(--theme-font-family);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

.comparison-table-header {
    width: 200px;
    font-family: var(--theme-font-family);
    color: var(--dark-color);
}

.comparison-package-header {
    width: 300px;
    font-family: var(--theme-font-family);
    font-weight: 600;
    color: var(--dark-color);
}

.comparison-package-title {
    font-family: var(--theme-font-family);
    font-weight: 600;
}

.comparison-package-agent {
    font-family: var(--theme-font-family);
}

.comparison-remove-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
}

.comparison-table-cell {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    font-size: 0.95rem;
}

.comparison-price-label {
    font-family: var(--theme-font-family);
    font-weight: 500;
    font-size: 0.85rem;
}

.comparison-price-value {
    font-family: var(--theme-font-family);
    font-weight: 500;
    font-size: 1.1rem;
}

.comparison-price-per-person {
    font-family: var(--theme-font-family);
    font-size: 0.8rem;
}

.comparison-airline-route {
    font-family: var(--theme-font-family);
    line-height: 1.4;
}

.comparison-airline-route .fw-bold {
    font-size: 0.9rem;
}

.comparison-airline-route .small {
    font-size: 0.75rem;
}

.comparison-hotel-info {
    font-family: var(--theme-font-family);
    line-height: 1.3;
    text-align: left;
}

.hotel-section {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 0.75rem;
    background-color: #f8f9fa;
    text-align: left;
}

.hotel-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark-color);
    margin: 0.25rem 0;
}

.hotel-class {
    font-size: 0.75rem;
    margin: 0.25rem 0;
}

.hotel-distance {
    font-size: 0.7rem;
    margin: 0.25rem 0;
}

.hotel-location {
    font-size: 0.7rem;
    margin: 0.25rem 0;
}

/* Add-ons comparison styles */
.comparison-addons {
    font-family: var(--theme-font-family);
    text-align: left;
}

.addon-item {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 0.5rem;
    background-color: #f8f9fa;
    margin-bottom: 0.5rem;
}

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

.addon-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.addon-price {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--success-color);
    margin-bottom: 0.25rem;
}

.addon-description {
    font-size: 0.75rem;
    color: var(--secondary-gray);
    line-height: 1.3;
}

.addon-types {
    font-size: 0.7rem;
    color: var(--info-color);
    margin-bottom: 0.25rem;
}

/* Simple add-ons display */
.comparison-addons-simple {
    font-family: var(--theme-font-family);
    text-align: left;
}

.addon-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.addon-line:last-child {
    border-bottom: none;
}

.addon-name-simple {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 600;
}

.addon-price-simple {
    font-size: 0.8rem;
    color: var(--primary-blue);
    font-weight: 700;
}

/* Room variants display - similar to add-ons */
.comparison-room-variants {
    font-family: var(--theme-font-family);
    text-align: left;
    color: var(--primary-blue);
}

.room-variant-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.room-variant-line:last-child {
    border-bottom: none;
}

.room-variant-name {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 600;
}

.room-variant-price {
    font-size: 0.8rem;
    color: var(--success-color);
    font-weight: 700;
}

.comparison-quota-cell {
    font-family: var(--theme-font-family);
    font-size: 0.9rem;
}

/* Fixed table layout for comparison */
.comparison-fixed-table {
    table-layout: fixed;
    width: 100%;
}

.comparison-fixed-table td:first-child {
    width: 25%;
}

.comparison-fixed-table td:not(:first-child) {
    width: 25%;
}

.comparison-package-cell {
    font-family: var(--theme-font-family);
    vertical-align: top;
    padding: 1rem 0.75rem;
}

/* Travel Agency Info */
.travel-agency-info {
    font-family: var(--theme-font-family);
    text-align: center;
}

.agent-logo-small {
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.agent-logo-small:hover {
    transform: scale(1.05);
}

.agent-name {
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Simple hotel display - similar to room variants */
.comparison-hotel-simple {
    font-family: var(--theme-font-family);
    text-align: left;
}

.hotel-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.hotel-line:last-child {
    border-bottom: none;
}

.hotel-name-simple {
    font-size: 0.85rem;
    color: var(--primary-blue);
    font-weight: 700;
}

.hotel-class-simple {
    font-size: 0.8rem;
    color: var(--warning-color);
    font-weight: 600;
}

.hotel-distance-simple {
    font-size: 0.75rem;
    color: var(--primary-blue);
    font-weight: 400;
}

.hotel-location-simple {
    font-size: 0.75rem;
    color: var(--success-color);
    font-weight: 500;
}

.comparison-facility-cell {
    font-family: var(--theme-font-family);
    color: var(--dark-color);
    font-size: 0.95rem;
}

.comparison-facility-icon {
    font-size: 1rem;
}

.comparison-no-facilities {
    font-family: var(--theme-font-family);
    font-size: 0.9rem;
}

.comparison-action-cell {
    font-family: var(--theme-font-family);
    font-weight: 500;
    color: var(--dark-color);
    font-size: 0.95rem;
}

.comparison-add-title {
    font-family: var(--theme-font-family);
    font-weight: 600;
    color: var(--dark-color);
}

.comparison-add-description {
    font-family: var(--theme-font-family);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .navbar-logo {
        height: 35px;
        max-width: 150px;
    }
    
    .brand-icon--fixed {
        width: 35px;
        height: 35px;
    }
    
    .footer-logo {
        height: 35px;
    }
    
    .feature-icon-small {
        width: 35px;
        height: 35px;
    }
}

/* ========================================
   PACKAGES PAGE - MINIMALIST DESIGN
   ======================================== */

/* Page Header */


.page-title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    margin-bottom: var(--spacing-sm);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.page-subtitle {
    font-size: 0.8rem;
    color: var(--dark-color);
    font-weight: var(--font-weight-normal);
    margin-bottom: 0;
    line-height: 1.4;
}

/* Control Panel */
.control-panel {
    padding: var(--spacing-sm) 0;
    margin: 0;
}

.control-panel-box {
    background-color: var(--pure-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    border: 1px solid var(--border-gray);
}

/* Sorting Section */
.sorting-section {
    display: flex;
    align-items: center;
}

.sorting-icon {
    color: var(--secondary-gray);
    font-size: 1rem;
}

.sorting-label {
    color: var(--dark-color);
    font-weight: var(--font-weight-normal);
    font-size: 0.875rem;
}

.sorting-dropdown {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
    color: var(--dark-color);
    min-width: 160px;
    transition: all var(--transition-fast);
}

.sorting-dropdown:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.2rem var(--primary-blue-25);
    outline: none;
    background-color: var(--pure-white);
}

.sorting-dropdown:hover {
    border-color: var(--primary-blue);
    background-color: var(--pure-white);
}

/* Compare Button */
.btn-compare {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: var(--dark-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
    font-weight: var(--font-weight-normal);
    transition: all var(--transition-fast);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-compare:hover {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--pure-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-compare .badge {
    background-color: var(--primary-blue) !important;
    color: var(--pure-white) !important;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: var(--border-radius-sm);
}

/* Results Info */
.results-info {
    background-color: #f8f9fa;
    padding: var(--spacing-md) 0;
}

.results-count-badge {
    display: flex;
    justify-content: flex-start;
}

.results-count-badge .badge {
    background-color: var(--pure-white) !important;
    color: var(--dark-color) !important;
    border: 1px solid #dee2e6;
    font-weight: var(--font-weight-medium);
    font-size: 0.85rem;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
}

.results-count-badge .badge i {
    color: var(--primary-blue);
}

/* Package Cards Grid */
#resultGrid {
    margin-top: var(--spacing-sm);
}

#resultGrid .card {
    border: 1px solid var(--border-gray);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    overflow: hidden;
    background-color: var(--pure-white);
}

#resultGrid .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-blue-30);
}

/* Package Card Content */
#resultGrid .card-body {
    padding: var(--spacing-sm);
}

#resultGrid .card-title {
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
}

#resultGrid .card-text {
    color: var(--secondary-gray);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Package Details Grid */
.package-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.package-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.detail-label {
    font-size: 0.75rem;
    color: var(--secondary-gray);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 0.875rem;
    color: var(--dark-color);
    font-weight: var(--font-weight-medium);
}

/* Package Details Single Column - New Layout */
.package-details-single-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.package-detail-single-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
    min-height: 36px;
}

.package-detail-single-item:last-child {
    border-bottom: none;
}

.detail-single-label {
    font-weight: 600;
    color: #495057;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    min-width: 100px;
}

.detail-single-value {
    color: #212529;
    font-weight: 500;
    text-align: right;
    font-size: 0.9rem;
    flex: 1;
    margin-left: 1rem;
}

/* Package Price Clean - No Background */
.package-price-clean {
    font-family: var(--theme-font-family);
    color: var(--primary-blue);
    font-weight: var(--font-weight-bold);
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
}

/* Package Card Body Compact - Reduced Top Padding */
.package-card-body-compact {
    padding-top: 0.75rem !important;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}

/* Package Label Left - Positioned at Top Left */
.package-label-left {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    padding: 8px 16px;
    border-radius: 0 0 25px 0;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    transition: all 0.3s ease;
}

.package-label-left:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.package-label-left .label-text-left {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    color: white;
}

/* Responsive Package Label Left */
@media (max-width: 768px) {
    .package-label-left {
        padding: 6px 12px;
        border-radius: 0 0 20px 0;
    }
    
    .package-label-left .label-text-left {
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .package-label-left {
        padding: 5px 10px;
        border-radius: 0 0 15px 0;
    }
    
    .package-label-left .label-text-left {
        font-size: 0.7rem;
    }
}

/* Package Type Badge */
.package-type-badge {
    font-size: 0.75rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-medium);
}

/* Compare Checkbox Styling */
.compare-checkbox-container {
    background-color: var(--light-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm);
    border: 1px solid var(--border-gray);
}

.compare-checkbox-container .form-check {
    margin-bottom: 0;
}

.compare-checkbox-container .form-check-input {
    border-radius: var(--border-radius-sm);
    border-color: var(--primary-blue);
}

.compare-checkbox-container .form-check-input:checked {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.compare-checkbox-container .form-check-label {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--dark-color);
    margin-left: var(--spacing-xs);
}

/* Package Card Banner */
.package-card-banner {
    object-fit: cover;
    transition: transform var(--transition-normal);
}

#resultGrid .card:hover .package-card-banner {
    transform: scale(1.05);
}

/* Package Price Styling */
.package-price {
    color: var(--pure-white);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    text-align: left;
    margin-top: var(--spacing-md);
}

.package-price .price-label {
    font-size: 0.8rem;
    opacity: 0.9;
    margin-bottom: var(--spacing-xs);
}

.package-price .price-value {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xs);
}

.package-price .price-note {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Package Actions */
.package-actions {
    margin-top: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
}

.package-actions .btn {
    flex: 1;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .page-title {
        font-size: 2.25rem;
    }
    
    .page-subtitle {
        font-size: 0.95rem;
    }
    
    .control-panel-box {
        padding: var(--spacing-md);
    }
    
    .control-panel-box .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--spacing-md);
    }
    
    .sorting-section {
        width: 100%;
        justify-content: space-between;
    }
    
    .sorting-dropdown {
        min-width: 140px;
    }
    
    .compare-section {
        width: 100%;
    }
    
    .btn-compare {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .page-header {
        padding: var(--spacing-xl) 0;
    }
    
    .page-title {
        font-size: 1.875rem;
    }
    
    .page-subtitle {
        font-size: 0.9rem;
    }
    
    .control-panel-box {
        padding: var(--spacing-sm);
    }
    
    .sorting-section {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .sorting-dropdown {
        width: 100%;
        min-width: auto;
    }
    
    .sorting-label,
    .sorting-dropdown,
    .btn-compare {
        font-size: 0.8rem;
    }
}

/* Marketplace Specific Styles */
.marketplace-hero {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 4rem 5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
}

/* Marketplace Hero Carousel Styles */
.marketplace-hero-carousel {
    /* Auto height - will adjust to image aspect ratio (3.25:1) */
    position: relative;
    overflow: hidden;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: var(--border-radius-lg);
    /* Height will be calculated based on width and aspect ratio */
    width: 100%;
}

.marketplace-hero-carousel .carousel {
    height: 100%;
}

.marketplace-hero-carousel .carousel-inner {
    height: 100%;
}

.marketplace-hero-carousel .carousel-item {
    height: 100%;
    position: relative;
}

.marketplace-hero-slide {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Maintain aspect ratio 3.25:1 to match image */
    aspect-ratio: 3.25 / 1;
}

/* Hero image that adjusts to its natural size - 1300x400 (3.25:1 aspect ratio) */
.marketplace-hero-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center;
    /* Maintain aspect ratio 1300:400 = 3.25:1 */
    aspect-ratio: 3.25 / 1;
    /* Ensure image is not cropped */
    background-color: #f8f9fa;
}

/* Hero content overlay */
.marketplace-hero-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    height: 100%;
}

/* Responsive adjustments for different screen sizes */
/* With aspect ratio 3.25:1, height will auto-calculate based on width */
/* Desktop: width ~1200px, height ~369px (auto-calculated) */
/* Medium desktop: width ~992px, height ~305px (auto-calculated) */
/* Tablet: width ~768px, height ~236px (auto-calculated) */

.marketplace-hero-slide-1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.marketplace-hero-slide-2 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.marketplace-hero-slide-3 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.marketplace-hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="rgba(255,255,255,0.1)"><polygon points="0,0 1000,100 1000,0"/></svg>');
    background-size: cover;
    background-position: bottom;
    z-index: 1;
}

.marketplace-hero-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: rgba(0, 0, 0, 0.4); */
    z-index: 1;
}

/* Container styling for hero content */
.marketplace-hero-slide .container {
    position: relative;
    z-index: 2;
    padding-left: 2rem;
    padding-right: 2rem;
}

.marketplace-hero-slide .col-lg-6 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.marketplace-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    color: white;
    text-align: left;
}

.marketplace-hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.95;
    color: white;
    text-align: left;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

.marketplace-hero-btn {
    padding: 0.8rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.95);
    color: #333;
    border: none;
    display: inline-block;
    text-shadow: none;
}

.marketplace-hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    background: white;
    color: #333;
}

/* Carousel Controls */
.marketplace-hero-carousel .carousel-control-prev,
.marketplace-hero-carousel .carousel-control-next {
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.marketplace-hero-carousel .carousel-control-prev {
    left: 20px;
}

.marketplace-hero-carousel .carousel-control-next {
    right: 20px;
}

.marketplace-hero-carousel .carousel-control-prev:hover,
.marketplace-hero-carousel .carousel-control-next:hover {
    background: rgba(0,0,0,0.5);
}

/* Carousel Indicators */
.marketplace-hero-carousel .carousel-indicators {
    bottom: 20px;
    z-index: 3;
}

.marketplace-hero-carousel .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: none;
    margin: 0 5px;
}

.marketplace-hero-carousel .carousel-indicators button.active {
    background: white;
}

/* Travel Agent Card Styles */
.marketplace-agent-card {
    background: #ffffff;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e0e0e0;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}

.marketplace-agent-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: var(--primary-blue);
}

.marketplace-agent-avatar {
    width: 80px;
    height: 80px;
    background: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: white;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.marketplace-agent-card:hover .marketplace-agent-avatar {
    background: var(--primary-gradient);
    transform: scale(1.1);
}

.marketplace-agent-card .card-header {
    border: none;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
}

.marketplace-agent-card .card-header .marketplace-agent-avatar {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.marketplace-agent-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Simple Travel Agent Card Styles */
.marketplace-agent-simple-card {
    background: #ffffff;
    border-radius: var(--border-radius-sm);
    border: var(--border-gray);
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    min-height: 200px;
}

.marketplace-agent-simple-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: var(--primary-blue);
}

.marketplace-agent-logo {
    color: var(--primary-blue);
    transition: all 0.3s ease;
}

.marketplace-agent-logo-img {
    max-width: 120px;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

.marketplace-agent-simple-card:hover .marketplace-agent-logo {
    color: var(--primary-gradient);
    transform: scale(1.1);
}

.marketplace-agent-simple-card:hover .marketplace-agent-logo-img {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.marketplace-agent-simple-card .card-title {
    color: #333;
    font-size: 1.25rem;
    line-height: 1.3;
}

.marketplace-agent-simple-card .badge {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

.marketplace-agent-simple-card .btn {
    font-weight: 600;
    transition: all 0.3s ease;
}

.marketplace-agent-simple-card .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.marketplace-agent-name {
    color: #333;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    line-height: 1.3;
    margin-bottom: 0;
    text-align: center;
    transition: all 0.3s ease;
}

.marketplace-agent-simple-card:hover .marketplace-agent-name {
    color: var(--primary-blue);
    transform: scale(1.05);
}

.marketplace-agent-info {
    border-top: 1px solid #f0f0f0;
    padding-top: 1rem;
}

.marketplace-agent-description {
    border-top: 1px solid #f0f0f0;
    padding-top: 1rem;
}

.marketplace-agent-stats {
    border-top: 1px solid #f0f0f0;
    padding-top: 1rem;
}

.marketplace-agent-stats .badge {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
}

/* Section Card Styles */
.marketplace-section-card {
    background: #ffffff;
    border-radius: var(--border-radius-lg);
    box-shadow: none;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.marketplace-section-card:hover {
    box-shadow: none;
    transform: none;
}

.marketplace-section-card-header {
    background: var(--pure-white);
    padding: 1.5rem 2rem 1.5rem 2rem;
    margin: 0;
    box-sizing: border-box;
}

.marketplace-section-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: none;
}

.marketplace-section-title {
    font-size: 1.5rem !important;
    font-weight: var(--font-weight-normal);
    color: var(--dark-color);
    margin-bottom: 0;
}

.marketplace-section-subtitle {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 0;
    font-weight: 400;
}

.marketplace-section-card-body {
    padding: 1rem;
    background: #ffffff;
    box-sizing: border-box;
}

.marketplace-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

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

.marketplace-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
}

.marketplace-hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.marketplace-category-card {
    background: #ffffff;
    border-radius: var(--border-radius-sm);
    padding: 1rem 1rem;
    text-align: center;
    box-shadow: none;
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid var(--border-gray);
    background: linear-gradient(135deg, transparent 0%, var(--secondary-gray-10) 100%);
    backdrop-filter: blur(10px);
}

.marketplace-category-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--primary-blue);
}

.marketplace-category-icon {
    width: 80px;
    height: 80px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--primary-blue);
    font-size: 2rem;
}

.marketplace-product-card {
    background: #ffffff;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    box-shadow: none;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.marketplace-product-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--primary-blue);
}

.marketplace-product-image {
    position: relative;
    height: 200px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
    min-width: 0;
}

.marketplace-product-image img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    display: block;
    box-sizing: border-box;
    /* Safari specific fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Prevent image overflow */
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

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

.marketplace-product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.marketplace-product-badge.discount {
    background: #dc3545;
}

.marketplace-product-badge.category {
    background: var(--primary-blue);
    top: 10px;
    right: 10px;
    left: auto;
}

.marketplace-product-badge.vip {
    background: #ffc107;
    color: #000;
    bottom: 10px;
    right: 10px;
    top: auto;
}

.marketplace-product-badge.promo {
    background: var(--danger-red);
    bottom: 10px;
    right: 10px;
    top: auto;
}

.marketplace-product-badge.new {
    background: #17a2b8;
    bottom: 10px;
    right: 10px;
    top: auto;
}

.marketplace-product-badge.sold-out {
    background: #dc3545;
    top: 10px;
    right: 10px;
    left: auto;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 3px 6px rgba(220, 53, 69, 0.4);
}

.marketplace-product-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: calc(100% - 200px);
}

.marketplace-product-name {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
    font-size: 1rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 0;
}

.marketplace-package-type {
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 0;
}

.marketplace-product-details {
    margin-bottom: 1rem;
    flex-grow: 0;
}

.marketplace-product-brand {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

/* Unified styling for all product detail items */
.marketplace-product-detail-item {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* Specific colors for different detail types */
.marketplace-product-detail-item.departure-date {
    color: var(--primary-blue);
}

.marketplace-product-detail-item.duration {
    color: var(--primary-blue);
}

.marketplace-product-detail-item.departure-city {
    color: var(--primary-blue);
}

.marketplace-product-condition {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

.marketplace-product-price {
    margin-bottom: 1rem;
    flex-grow: 0;
}

.marketplace-current-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-blue);
}

.marketplace-original-price {
    font-size: 1rem;
    color: #999;
    text-decoration: line-through;
    margin-left: 0.5rem;
}

.marketplace-product-rating {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-grow: 0;
}

.marketplace-stars {
    color: #ffc107;
    margin-right: 0.5rem;
}

.marketplace-stars .fas.fa-star.active {
    color: #ffc107;
}

.marketplace-stars .fas.fa-star:not(.active) {
    color: #ddd;
}

.marketplace-rating-text {
    font-size: 0.85rem;
    color: #666;
}

.marketplace-product-sales {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 0.85rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid #e9ecef;
}

.marketplace-product-sales i {
    margin-right: 0.25rem;
}

/* Marketplace Compare Button */
.marketplace-compare-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 20px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-blue);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
}

.marketplace-product-card:hover .marketplace-compare-btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.marketplace-compare-btn:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(0) scale(1.05);
}

.marketplace-compare-btn i {
    font-size: 0.9rem;
}

/* Marketplace Card Link Styling */
.marketplace-card-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
    height: 100% !important;
    transition: all 0.3s ease !important;
}

/* Marketplace Category Link Styling */
.marketplace-category-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
    height: 100% !important;
    transition: all 0.3s ease !important;
}

.marketplace-category-link:hover {
    text-decoration: none !important;
    color: inherit !important;
    transform: translateY(-2px) !important;
}

.marketplace-category-link:hover .marketplace-category-card {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    border-color: var(--primary-blue) !important;
}

.marketplace-card-link:hover {
    text-decoration: none !important;
    color: inherit !important;
}

.marketplace-card-link:focus {
    text-decoration: none !important;
    color: inherit !important;
    outline: none !important;
}

/* Card hover effect through link */
.marketplace-card-link:hover .marketplace-product-card {
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    border-color: var(--primary-blue) !important;
}

/* Cursor styling */
.marketplace-card-link {
    cursor: pointer !important;
}

/* Prevent text selection on card */
.marketplace-card-link .marketplace-product-card {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}


.marketplace-section-header {
    margin-bottom: 2rem;
}

.marketplace-feature-card {
    padding: 2rem;
    background: #ffffff;
    border-radius: var(--border-radius-sm);
    box-shadow: none;
    height: 100%;
    text-align: center;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.marketplace-feature-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--primary-blue);
}

.marketplace-feature-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-blue-10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--primary-blue);
    font-size: 2rem;
}

.marketplace-feature-title {
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.marketplace-feature-desc {
    color: #666;
    line-height: 1.6;
}

.marketplace-service-item {
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 0;
    box-shadow: none;
    transition: all 0.3s ease;
    text-align: center;
    border: 1px solid #e0e0e0;
}

.marketplace-service-item:hover {
    transform: none;
    box-shadow: none;
    border-color: #28a745;
}

.marketplace-service-icon {
    color: #28a745;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.marketplace-service-text {
    font-weight: 500;
    color: #333;
    margin: 0;
}

.marketplace-payment-item {
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 0;
    box-shadow: none;
    transition: all 0.3s ease;
    text-align: center;
    border: 1px solid #e0e0e0;
}

.marketplace-payment-item:hover {
    transform: none;
    box-shadow: none;
    border-color: #28a745;
}

.marketplace-payment-icon {
    color: #28a745;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.marketplace-payment-text {
    font-weight: 500;
    color: #333;
    margin: 0;
}

.marketplace-help-section {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 3rem 0;
}

.marketplace-help-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
}

.marketplace-help-desc {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 0;
}

/* Scroll horizontal untuk produk */
/* Marketplace Products Navigation */
.marketplace-products-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.marketplace-nav-btn {
    position: absolute;
    margin-left: 1rem;
    margin-right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #28a745;
    color: #28a745;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.marketplace-nav-btn:hover {
    background: #28a745;
    color: #ffffff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.marketplace-nav-prev {
    left: -20px;
}

.marketplace-nav-next {
    right: -20px;
}

.marketplace-products-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 1rem;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.marketplace-products-scroll::-webkit-scrollbar {
    display: none; /* WebKit browsers (Chrome, Safari, Edge) */
}

.marketplace-products-scroll > .d-flex {
    width: max-content;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.marketplace-products-scroll .marketplace-product-link {
    flex-shrink: 0;
    width: 100%;
    max-width: 280px;
    box-sizing: border-box;
}

/* Hide navigation buttons on mobile */
@media (max-width: 768px) {
    .marketplace-nav-btn {
        display: none;
    }
    
    .marketplace-products-scroll {
        padding: 0;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer 10+ */
    }
    
    .marketplace-products-scroll::-webkit-scrollbar {
        display: none; /* WebKit browsers (Chrome, Safari, Edge) */
    }
}

/* Responsive Design for Marketplace */
@media (max-width: 1200px) {
    .marketplace-product-card {
        min-height: 400px;
    }
}

@media (max-width: 992px) {
    .marketplace-product-card {
        min-height: 380px;
    }
}

@media (max-width: 768px) {
    .marketplace-hero h1 {
        font-size: 2rem;
    }
    
    .marketplace-hero p {
        font-size: 1rem;
    }
    
    /* Mobile: width ~768px, height ~236px (auto-calculated from aspect-ratio) */
    
    .marketplace-hero-title {
        font-size: 2rem;
    }
    
    .marketplace-hero-subtitle {
        font-size: 1rem;
    }
    
    .marketplace-hero-carousel .carousel-control-prev,
    .marketplace-hero-carousel .carousel-control-next {
        width: 40px;
        height: 40px;
    }
    
    .marketplace-hero-carousel .carousel-control-prev {
        left: 10px;
    }
    
    .marketplace-hero-carousel .carousel-control-next {
        right: 10px;
    }
    
    
    .marketplace-product-card {
        margin-bottom: 1rem;
        min-height: 350px;
    }
    
    .marketplace-category-card {
        margin-bottom: 1rem;
        padding: 0.5rem 0.5rem;
    }
    
    .marketplace-category-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .marketplace-package-type {
        font-size: 0.85rem;
    }
    
    .marketplace-section-title {
        font-size: 1.2rem !important;
    }
    
    .marketplace-hero-btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    .marketplace-hero-title {
        font-size: 1.5rem !important;
    }
    
    .marketplace-hero-subtitle {
        font-size: 0.875rem !important;
    }
    
    .marketplace-agent-card {
        margin-bottom: 1rem;
    }
    
    .marketplace-agent-avatar {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .marketplace-agent-stats .badge {
        font-size: 0.7rem;
        padding: 0.4rem 0.6rem;
    }
    
    .marketplace-agent-icon {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .marketplace-agent-card .card-header {
        padding: 1.5rem 1rem;
    }
    
    /* Marketplace Feature Card Mobile Optimization */
    @media (max-width: 768px) {
        .marketplace-feature-card {
            padding: 0.75rem !important;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .marketplace-feature-icon {
            width: 40px !important;
            height: 40px !important;
            font-size: 1rem !important;
            margin-bottom: 0.5rem !important;
        }
        
        .marketplace-feature-title {
            font-size: 0.85rem !important;
            margin-bottom: 0.4rem !important;
        }
        
        .marketplace-feature-desc {
            font-size: 0.75rem !important;
            line-height: 1.3 !important;
        }
        
        /* Ensure 2 cards per row in mobile for feature cards */
        .marketplace-section-card-body .col-6 {
            -webkit-box-flex: 0 !important;
            -ms-flex: 0 0 50% !important;
            flex: 0 0 50% !important;
            max-width: 50% !important;
            width: 50% !important;
        }
        
        /* Optimize Travel Agent Cards for mobile */
        .marketplace-agent-simple-card {
            min-height: 150px !important;
        }
        
        .marketplace-agent-simple-card .card-body {
            padding: 1rem !important;
        }
        
        .marketplace-agent-logo-img {
            max-width: 80px !important;
            max-height: 80px !important;
        }
        
        .marketplace-agent-logo i.fa-building {
            font-size: 2.5rem !important;
        }
        
        .marketplace-agent-logo {
            margin-bottom: 0.75rem !important;
        }
        
        .marketplace-agent-name {
            font-size: 0.9rem !important;
        }
        
        /* Make agent cards 2 per row in mobile */
        .row .col-md-6.mb-4 {
            -webkit-box-flex: 0 !important;
            -ms-flex: 0 0 50% !important;
            flex: 0 0 50% !important;
            max-width: 50% !important;
            width: 50% !important;
        }
        
        /* Footer Mobile Optimization */
        .footer-white-text .col-lg-4,
        .footer-white-text .col-lg-2,
        .footer-white-text .col-lg-3 {
            text-align: left !important;
            margin-bottom: 2rem;
        }
        
        .footer-heading {
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
            padding-bottom: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .footer-white-text .footer-text-muted {
            text-align: left !important;
        }
        
        /* Add padding and divider for footer menu items */
        .footer-white-text .list-unstyled li {
            padding: 0.5rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .footer-white-text .list-unstyled li:last-child {
            border-bottom: none;
        }
        
        .footer-white-text .footer-link {
            display: block;
            padding: 0.5rem 0;
        }
        
        /* Hide divider line in Kontak and social media section for mobile */
        .footer-contact-divider {
            display: none !important;
        }
        
        /* Make contact and social media left aligned */
        .footer-white-text .footer-contact {
            text-align: left !important;
        }
        
        .footer-white-text .mt-3 {
            text-align: left !important;
        }
        
        .footer-white-text .d-flex.gap-3 {
            justify-content: flex-start !important;
        }
        
        /* Make contact items aligned properly */
        .footer-contact li {
            text-align: left !important;
            padding: 0.5rem 0;
        }
    }
    
    .marketplace-agent-card .card-header .marketplace-agent-avatar {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .marketplace-product-card {
        min-height: 320px;
    }
    
    /* Small mobile: width ~576px, height ~177px (auto-calculated from aspect-ratio) */
    
    
    .marketplace-hero-title {
        font-size: 1.5rem;
    }
    
    .marketplace-hero-subtitle {
        font-size: 0.9rem;
    }
}
    
    .marketplace-help-actions {
        text-align: center !important;
        margin-top: 1rem;
    }
    
    .marketplace-help-actions .btn {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .marketplace-products-scroll {
        padding-left: 1rem;
        padding-right: 1rem;
    }

/* Package Banner Styling */
.package-banner-container {
    text-align: center;
    margin-bottom: 1rem;
}

.package-banner-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.package-banner-image:hover {
    transform: scale(1.02);
}

/* Package Image Container */
.package-image-container-new {
    margin-top: 0;
}

.package-sidebar-image-new {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Package Sidebar Placeholder */
.package-sidebar-placeholder-new {
    width: 100%;
    height: 250px;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.placeholder-icon-new {
    font-size: 3rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.placeholder-title-new {
    color: #495057;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.placeholder-description-new {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .package-banner-image {
        height: 150px;
    }
    
    .package-sidebar-image-new {
        height: 200px;
    }
    
    .package-sidebar-placeholder-new {
        height: 200px;
        padding: 1.5rem;
    }
    
    .placeholder-icon-new {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
    }
}

/* Price Variants Button Styling */
.price-variants {
    background: rgba(13, 110, 253, 0.05);
    border: 1px solid rgba(13, 110, 253, 0.1);
    border-radius: 12px;
    padding: 1.25rem;
    margin-top: 0.5rem;
}

.variants-subtitle {
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    text-align: center;
}

.variants-buttons {

    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 100%;
    justify-content: flex-start;
}

.variant-button {
    background: var(--pure-white);
    border: 1px solid var(--light-gray);
    border-radius: var(--border-radius-sm);
    padding: 1rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    flex: 0 0 auto;
    min-width: 100px;
    max-width: 600px;
    position: relative;
    overflow: hidden;
}

.variant-button:hover {
    border-color: var(--primary-blue);
    background: rgba(13, 110, 253, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
}

.variant-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.2);
}

.variant-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.variant-button:hover::before {
    opacity: 1;
}

.variant-name {
    color: var(--dark-gray);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
    line-height: 1.1;
}

.variant-price {
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1.1;
}

.variant-more-btn {
    background: #f8f9fa;
    border-color: #e9ecef;
    cursor: not-allowed;
    opacity: 0.7;
}

.variant-more-btn:hover {
    transform: none;
    box-shadow: none;
    border-color: #e9ecef;
    background: #f8f9fa;
}

.variant-more-btn .variant-name {
    color: #6c757d;
    font-style: italic;
}

/* Responsive adjustments for variant buttons */
@media (max-width: 768px) {
    .variants-buttons {
        flex-wrap: wrap;
        gap: 0.4rem;
        justify-content: center;
    }
    
    .variant-button {
        padding: 0.4rem 0.5rem;
        min-height: 40px;
        min-width: 70px;
        max-width: 100px;
    }
    
    .variant-name {
        font-size: 0.7rem;
    }
    
    .variant-price {
        font-size: 0.65rem;
    }
}

@media (max-width: 576px) {
    .price-variants {
        padding: 1rem;
    }
    
    .variants-subtitle {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }
    
    .variants-buttons {
        flex-wrap: wrap;
        gap: 0.3rem;
        justify-content: center;
    }
    
    .variant-button {
        padding: 0.35rem 0.4rem;
        min-height: 38px;
        min-width: 60px;
        max-width: 90px;
    }
    
    .variant-name {
        font-size: 0.65rem;
    }
    
    .variant-price {
        font-size: 0.6rem;
    }
}

/* Variant Cards Styling - No Hover Animation */
.variants-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 100%;
    justify-content: flex-start;
    color: var(--primary-blue);
}

.variant-card {
    border: 1px solid rgba(13, 110, 253, 0.1);
    border-radius: 8px;
    padding: 1.5rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 600px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.variant-card .variant-name {
    color: var(--dark-gray);
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.variant-card .variant-price {
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.2;
}

.variant-more-card {
    border: 1px solid var(--primary-blue);
    opacity: 0.8;
    box-shadow: 0 2px 6px rgba(108, 117, 125, 0.1);
}

.variant-more-card .variant-name {
    color: #6c757d;
    font-style: italic;
}

/* Responsive adjustments for variant cards */
@media (max-width: 768px) {
    .variants-cards {
        flex-wrap: wrap;
        gap: 0.6rem;
    }
    
    .variant-card {
        min-width: 120px;
        padding: 1.2rem 1rem;
        min-height: 65px;
    }
    
    .variant-card .variant-name {
        font-size: 0.8rem;
    }
    
    .variant-card .variant-price {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .variants-cards {
        gap: 0.5rem;
    }
    
    .variant-card {
        min-width: 100px;
        padding: 1rem 0.8rem;
        min-height: 55px;
    }
    
    .variant-card .variant-name {
        font-size: 0.75rem;
    }
    
    .variant-card .variant-price {
        font-size: 0.7rem;
    }
}

/* Hotel Accommodation Card Styling - Simple Layout */
.accommodation-card {
    border: 1px solid var(--light-gray);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: #fff;
}

/* Ensure accommodation items stack vertically */
.accommodation-card .facilities-list-new {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.accommodation-card .facility-item-new {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.accommodation-card .facility-item-new:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-blue);
}

.accommodation-card .facility-item-new:last-child {
    margin-bottom: 0;
}

.accommodation-card .facility-icon-new {
    margin-right: 1rem;
    flex-shrink: 0;
}

.accommodation-card .facility-name-new {
    flex: 1;
    font-weight: 600;
    color: var(--dark-gray);
    margin-bottom: 0.25rem;
    display: block;
}

.accommodation-card .facility-cost-new {
    display: block;
    margin-bottom: 0.25rem;
}

.facility-location-new {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.facility-location-new i {
    font-size: 0.7rem;
}

/* Hotel specific icon colors */
.facility-item-new .facility-icon-new i.fa-kaaba {
    color: var(--primary-blue);
}

.facility-item-new .facility-icon-new i.fa-mosque {
    color: var(--primary-blue);
}

/* Responsive adjustments for accommodation */
@media (max-width: 768px) {
    .accommodation-card .facility-item-new {
        padding: 0.875rem;
        margin-bottom: 0.5rem;
    }
    
    .accommodation-card .facility-icon-new {
        margin-right: 0.875rem;
    }
}

@media (max-width: 576px) {
    .accommodation-card .facilities-list-new {
        gap: 0.75rem;
    }
    
    .accommodation-card .facility-item-new {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
    }
    
    .accommodation-card .facility-icon-new {
        margin-right: 0.75rem;
    }
}

/* Agent Logo Styles */
.agent-logo {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.agent-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.marketplace-agent-logo-img {
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.marketplace-agent-logo-img:hover {
    transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .agent-logo {
        max-height: 60px !important;
        max-width: 100px !important;
    }
    
    .agent-avatar {
        min-height: 60px;
        padding: 0.75rem;
    }
}