html {
  font-size: 14px;
}

/* AutoLayout child item defaults */
.auto-layout-item {
  min-width: 0;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Suppress browser focus outline on non-interactive elements (Blazor enhanced nav) */
h1:focus, h2:focus, h3:focus, main:focus, section:focus, article:focus, div:focus,
[tabindex="-1"]:focus {
  outline: none;
}

html {
  position: relative;
  min-height: 100%;
}

/* Template Renderer Styles */
.template-container {
  width: 100%;
}

.zone {
  margin-bottom: 2rem;
  padding: 1rem;
}

.zone-header {
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}

.zone-maincontent {
  min-height: 400px;
}

.zone-sidebar {
  background-color: #f8f9fa;
  padding: 1.5rem;
}

.zone-footer {
  background-color: #343a40;
  color: white;
  padding: 2rem 1rem;
  margin-top: 3rem;
}

/* v2.0: Widget spacing uses gap on the content container instead of per-widget
   margin-bottom. This works with display:contents on widget wrappers and
   doesn't break flex/grid layouts. The 1rem default gap matches the old margin. */
[data-zone-content] {
  gap: 1rem;
}

.html-widget {
  line-height: 1.6;
}

.image-widget img {
  max-width: 100%;
  height: auto;
  border-radius: 0.25rem;
}

/* ========================================
   ModernWeb Template Animations
   ======================================== */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

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

.animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-slide-right { animation: slideRight 0.6s ease-out forwards; }
.animate-scale-up { animation: scaleUp 0.5s ease-out forwards; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(220, 38, 38, 0.2);
}

.gradient-bg {
    background: linear-gradient(135deg, #DC2626 0%, #EA580C 50%, #F59E0B 100%);
}

.gradient-text {
    background: linear-gradient(to right, #DC2626, #EA580C, #F59E0B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animation delays */
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-1000 { animation-delay: 1s; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* Custom scrollbar for ModernWeb */
.modernweb-scrollbar::-webkit-scrollbar { width: 10px; }
.modernweb-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }
.modernweb-scrollbar::-webkit-scrollbar-thumb { background: #DC2626; border-radius: 5px; }

/* ========================================
   Shape Widget Styles
   ======================================== */

/* Additional animations for Shape widget */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-25%); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

.animate-bounce { animation: bounce 1s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* Animation duration modifiers */
.animation-duration-slow { animation-duration: 4s; }
.animation-duration-fast { animation-duration: 2s; }

/* Additional animation delays */
.animation-delay-3000 { animation-delay: 3s; }

/* Shape widget base */
.shape-widget {
    pointer-events: none;
}

/* ========================================
   Animated Text Widget Styles
   ======================================== */

/* Base animated text styles */
.animated-text-widget {
    overflow: hidden;
}

.animated-text-content {
    display: inline-block;
}

/* Fade animations - animate immediately */
.anim-fade-up {
    animation: animFadeUp 0.8s ease-out both;
}

.anim-fade-down {
    animation: animFadeDown 0.8s ease-out both;
}

.anim-fade-left {
    animation: animFadeLeft 0.8s ease-out both;
}

.anim-fade-right {
    animation: animFadeRight 0.8s ease-out both;
}

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

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

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

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

/* Typewriter animation */
.anim-typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid currentColor;
    width: 0;
    animation: animTypewriter 3s steps(40) forwards, animBlink 0.75s step-end infinite;
}

@keyframes animTypewriter {
    to { width: 100%; }
}

@keyframes animBlink {
    50% { border-color: transparent; }
}

/* JS Typewriter container — must be inline to nest inside h1/p/span */
.typewriter-container {
    display: inline;
}

/* JS Typewriter cursor */
.typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 0.9em;
    background: currentColor;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: twBlink 0.7s step-end infinite;
}
@keyframes twBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.typewriter-container {
    min-height: 1em;
}

/* Word by word animation */
.anim-word {
    display: inline-block;
    opacity: 0;
    animation: animWordReveal 0.5s ease-out forwards;
    /* animation-delay is set inline per word */
}

@keyframes animWordReveal {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Letter by letter animation */
.anim-letter {
    display: inline-block;
    opacity: 0;
    animation: animLetterReveal 0.3s ease-out forwards;
    /* animation-delay is set inline per letter */
}

@keyframes animLetterReveal {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Highlight animation */
.highlight-text {
    background: linear-gradient(to bottom, transparent 50%, var(--highlight-color, #FEF08A) 50%);
    background-size: 100% 200%;
    background-position: top;
    animation: animHighlight 0.8s ease-out forwards;
}

@keyframes animHighlight {
    to { background-position: bottom; }
}

/* Underline animation */
.underline-text {
    position: relative;
    display: inline-block;
}

.underline-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--underline-color, #6366f1);
    animation: animUnderline 0.8s ease-out forwards;
}

@keyframes animUnderline {
    to { width: 100%; }
}

/* Gradient flow animation */
.gradient-flow-text {
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef, #6366f1);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: animGradientFlow 3s ease infinite;
}

@keyframes animGradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Animation speed modifiers */
.anim-slow { animation-duration: 1.5s !important; }
.anim-fast { animation-duration: 0.4s !important; }

/* Gradient preview animation for editor */
.animate-gradient {
    animation: animGradientFlow 3s ease infinite;
}

/* ========================================
   Particles Widget Styles
   ======================================== */

.particles-widget {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.particles-widget.particles-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.particles-content {
    position: relative;
    z-index: 10;
    min-height: 100%;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background-color: var(--particle-color, #6366f1);
    color: var(--particle-color, #6366f1);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* Particle type variations */
.particle-dot {
    border-radius: 50%;
}

.particle-star {
    background: transparent !important;
    border-radius: 0;
}

.particle-bubble {
    border-radius: 50%;
    background: transparent !important;
    border: 1px solid var(--particle-color, #6366f1);
}

.particle-snow {
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.particle-confetti {
    border-radius: 2px !important;
    width: auto !important;
    aspect-ratio: 2/1;
}

.particle-firefly {
    border-radius: 50%;
    animation-name: particleFirefly !important;
}

/* Particle float animations */
@keyframes particleFloatUp {
    0% {
        transform: translateY(100%) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: var(--particle-opacity, 0.8);
    }
    90% {
        opacity: var(--particle-opacity, 0.8);
    }
    100% {
        transform: translateY(-100vh) translateX(20px);
        opacity: 0;
    }
}

@keyframes particleFloatDown {
    0% {
        transform: translateY(-100%) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: var(--particle-opacity, 0.8);
    }
    90% {
        opacity: var(--particle-opacity, 0.8);
    }
    100% {
        transform: translateY(100vh) translateX(-20px);
        opacity: 0;
    }
}

@keyframes particleFloatLeft {
    0% {
        transform: translateX(100%) translateY(0);
        opacity: 0;
    }
    10% {
        opacity: var(--particle-opacity, 0.8);
    }
    90% {
        opacity: var(--particle-opacity, 0.8);
    }
    100% {
        transform: translateX(-100vw) translateY(20px);
        opacity: 0;
    }
}

@keyframes particleFloatRight {
    0% {
        transform: translateX(-100%) translateY(0);
        opacity: 0;
    }
    10% {
        opacity: var(--particle-opacity, 0.8);
    }
    90% {
        opacity: var(--particle-opacity, 0.8);
    }
    100% {
        transform: translateX(100vw) translateY(-20px);
        opacity: 0;
    }
}

@keyframes particleFirefly {
    0%, 100% {
        opacity: 0.2;
        transform: translateY(0) translateX(0);
    }
    25% {
        opacity: 1;
        transform: translateY(-20px) translateX(10px);
    }
    50% {
        opacity: 0.4;
        transform: translateY(-40px) translateX(-5px);
    }
    75% {
        opacity: 0.9;
        transform: translateY(-60px) translateX(15px);
    }
}

/* ========================================
   FinDateTimePicker - Custom Calendar & Time Picker
   ======================================== */

.fin-dp-wrap {
    position: relative;
}

.fin-dp-range-anchor .fin-dp-wrap .fin-dp-trigger {
    width: 100%;
}

/* Reset Tailwind prose typography inside rendered content blocks */
.prose .fincms-rendered-block h1,
.prose .fincms-rendered-block h2,
.prose .fincms-rendered-block h3,
.prose .fincms-rendered-block h4,
.prose .fincms-rendered-block p,
.prose .fincms-rendered-block div,
.prose .fincms-rendered-block span,
.prose .fincms-rendered-block button,
.prose .fincms-rendered-block img {
    margin: 0;
    padding: 0;
    line-height: normal;
}

.fin-dp-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--fin-dp-border, #d1d5db);
    border-radius: 8px;
    background: var(--fin-dp-bg, #ffffff);
    color: var(--fin-dp-color, #111827);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 44px;
    box-sizing: border-box;
}

.fin-dp-trigger:hover {
    border-color: var(--fin-dp-accent, #4f46e5);
}

.fin-dp-trigger.active {
    border-color: var(--fin-dp-accent, #4f46e5);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fin-dp-accent, #4f46e5) 25%, transparent);
}

.fin-dp-trigger i {
    font-size: 18px;
    color: var(--fin-dp-accent, #4f46e5);
    flex-shrink: 0;
}

.fin-dp-trigger-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fin-dp-label, #6b7280);
    line-height: 1;
}

.fin-dp-trigger-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--fin-dp-color, #111827);
    line-height: 1.3;
    white-space: nowrap;
}

/* Calendar Popup */
.fin-dp-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 9999;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    padding: 20px;
    display: none;
    animation: finDpSlideDown 0.2s ease-out;
}

.fin-dp-popup.open { display: block; }

.fin-dp-popup.above {
    top: auto;
    bottom: calc(100% + 6px);
    animation: finDpSlideUp 0.2s ease-out;
}

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

@keyframes finDpSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dual month layout */
.fin-dp-months {
    display: flex;
    gap: 24px;
}

.fin-dp-month {
    min-width: 260px;
}

/* Month header */
.fin-dp-month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}

.fin-dp-month-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.fin-dp-nav {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f3f4f6;
    color: #374151;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s;
}

.fin-dp-nav:hover { background: #e5e7eb; }
.fin-dp-nav.invisible { visibility: hidden; }

/* Weekday headers */
.fin-dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}

.fin-dp-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    padding: 6px 0;
    text-transform: uppercase;
}

/* Day grid */
.fin-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.fin-dp-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin: 0 auto;
}

.fin-dp-day:hover:not(.disabled):not(.selected) {
    background: #f3f4f6;
}

.fin-dp-day.today:not(.selected) {
    border: 2px solid var(--fin-dp-accent, #4f46e5);
    color: var(--fin-dp-accent, #4f46e5);
    font-weight: 700;
}

.fin-dp-day.selected {
    background: var(--fin-dp-accent, #4f46e5);
    color: #fff;
    font-weight: 700;
}

.fin-dp-day.range-start {
    border-radius: 50% 0 0 50%;
}

.fin-dp-day.range-end {
    border-radius: 0 50% 50% 0;
}

.fin-dp-day.in-range {
    background: color-mix(in srgb, var(--fin-dp-accent, #4f46e5) 12%, transparent);
    color: var(--fin-dp-accent, #4f46e5);
    border-radius: 0;
    font-weight: 600;
}

.fin-dp-day.in-range-preview {
    background: color-mix(in srgb, var(--fin-dp-accent, #4f46e5) 8%, transparent);
    border-radius: 0;
}

.fin-dp-day.disabled {
    color: #d1d5db;
    cursor: default;
    pointer-events: none;
}

.fin-dp-day.empty {
    visibility: hidden;
}

/* Range Date Picker Header */
.fin-dp-range-popup {
    min-width: 580px;
}

/* 3-month range popup (Sixt-style booking bar) */
.fin-dp-range-popup.months-3 {
    min-width: 920px;
}

.fin-dp-range-popup.months-3 .fin-dp-months {
    display: flex;
    gap: 24px;
}

.fin-dp-range-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
}

.fin-dp-range-tab {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    text-align: center;
}

.fin-dp-range-tab:hover {
    background: #f3f4f6;
}

.fin-dp-range-tab.active {
    background: color-mix(in srgb, var(--fin-dp-accent, #4f46e5) 10%, transparent);
    outline: 2px solid var(--fin-dp-accent, #4f46e5);
}

.fin-dp-range-tab-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 2px;
}

.fin-dp-range-tab.active .fin-dp-range-tab-label {
    color: var(--fin-dp-accent, #4f46e5);
}

.fin-dp-range-tab-value {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.fin-dp-range-sep {
    color: #9ca3af;
    font-size: 16px;
    flex-shrink: 0;
}

/* Range anchor for positioning */
.fin-dp-range-anchor {
    position: relative;
}

/* Time Picker Popup */
.fin-dp-time-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 9999;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    padding: 8px;
    width: 140px;
    max-height: 320px;
    overflow-y: auto;
    display: none;
    animation: finDpSlideDown 0.2s ease-out;
}

.fin-dp-time-popup.open { display: block; }

.fin-dp-time-popup.above {
    top: auto;
    bottom: calc(100% + 6px);
}

.fin-dp-time-option {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    text-align: center;
}

.fin-dp-time-option:hover {
    background: #f3f4f6;
}

.fin-dp-time-option.selected {
    background: var(--fin-dp-accent, #4f46e5);
    color: #fff;
    font-weight: 600;
}

/* Scrollbar for time popup */
.fin-dp-time-popup::-webkit-scrollbar { width: 6px; }
.fin-dp-time-popup::-webkit-scrollbar-track { background: transparent; }
.fin-dp-time-popup::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* ── Booking bar grouped date+time (Sixt-style) ── */
.fin-bb-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fin-bb-group-box {
    position: relative;
    display: flex;
    align-items: stretch;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.fin-bb-group-box .fin-bb-sub {
    flex: 1;
    min-width: 0;
    position: relative;
}

.fin-bb-group-box .fin-bb-sub + .fin-bb-sub {
    border-left: 1px solid var(--fin-dp-border, #e5e7eb);
}

.fin-bb-group-box .fin-dp-trigger {
    border: none;
    background: transparent;
    border-radius: 0;
    min-height: 52px;
    box-shadow: none;
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    gap: 8px;
}

.fin-bb-group-box .fin-dp-trigger > div {
    min-width: 0;
    flex: 1;
}

.fin-bb-group-box .fin-dp-trigger-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-bb-group-box .fin-dp-trigger:hover {
    background: color-mix(in srgb, var(--fin-dp-accent, #4f46e5) 5%, transparent);
    border-color: transparent;
}

.fin-bb-group-box .fin-dp-trigger.active {
    background: color-mix(in srgb, var(--fin-dp-accent, #4f46e5) 8%, transparent);
    box-shadow: none;
}

.fin-bb-group-box:has(.fin-dp-trigger.active) {
    border-color: var(--fin-dp-accent, #4f46e5);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fin-dp-accent, #4f46e5) 25%, transparent);
}

@media (max-width: 768px) {
    /* Stack the whole booking bar vertically — location, range, button all full width */
    .booking-bar-widget .booking-bar-fields {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .booking-bar-widget .booking-bar-fields > div {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }

    .fin-bb-range {
        flex-direction: column !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Inside each group, stack date over time */
    .fin-bb-group-box {
        flex-direction: column !important;
    }
    .fin-bb-group-box .fin-bb-sub + .fin-bb-sub {
        border-left: none;
        border-top: 1px solid var(--fin-dp-border, #e5e7eb);
    }

    /* Time popup on mobile: make sure it doesn't get clipped or shoved off-screen */
    .fin-dp-time-popup {
        left: 0;
        right: 0;
        width: auto;
        max-width: 100%;
    }
}

/* Responsive: fixed-positioned full-screen popup on mobile */
@media (max-width: 639px) {
    .fin-dp-months { flex-direction: column; gap: 16px; }

    /* Fixed, centered, scrollable popup so a tall calendar can't go offscreen */
    .fin-dp-popup,
    .fin-dp-range-popup {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        min-width: min(92vw, 360px) !important;
        max-width: 92vw !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        padding: 16px !important;
    }
    .fin-dp-popup.above,
    .fin-dp-range-popup.above {
        /* Ignore .above flip on mobile — always centered */
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
    }

    .fin-dp-range-popup.months-3 .fin-dp-months,
    .fin-dp-range-popup.months-2 .fin-dp-months {
        flex-direction: column;
        gap: 16px;
    }
    .fin-dp-range-header { gap: 6px; }
    .fin-dp-range-tab { padding: 6px 8px; }
    .fin-dp-range-tab-value { font-size: 13px; }

    /* Time popup also fixed-centered on mobile */
    .fin-dp-time-popup {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(80vw, 200px) !important;
        max-height: 70vh !important;
    }
    .fin-dp-time-popup.above {
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Dim the rest of the screen when a picker is open */
    body:has(.fin-dp-popup.open)::before,
    body:has(.fin-dp-range-popup.open)::before,
    body:has(.fin-dp-time-popup.open)::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9998;
        pointer-events: none;
    }
}

/* Tablet: stack 3 months vertically so they don't overflow */
@media (max-width: 999px) and (min-width: 640px) {
    .fin-dp-range-popup.months-3 { min-width: 620px; }
    .fin-dp-range-popup.months-3 .fin-dp-months { flex-wrap: wrap; }
}

/* Booking Modal animations */
@keyframes finModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes finModalSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================================
   Mobile Menu Drawer (MenuWidget)
   ----------------------------------------------------------------------------
   Fixed-position full-height drawer that slides in from the right on mobile.
   Fixes the old buggy absolute-positioned panel that was trapped inside the
   menu widget's nearest positioned ancestor and truncated long menu items.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   All colors, typography, layout, and timing are driven by CSS custom properties
   (--fin-mm-*) with v1.9.15 fallbacks. MenuWidget.razor emits per-widget
   `<style>` blocks that set these variables scoped to .rz-w-{WidgetId}, so each
   MenuWidget instance can be styled independently via the admin editor.
   ---------------------------------------------------------------------------- */

/* Semi-transparent backdrop behind the drawer, covers the viewport. */
.fin-mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    background: var(--fin-mm-backdrop, rgba(0, 0, 0, 0.5));
    backdrop-filter: blur(var(--fin-mm-backdrop-blur, 0));
    -webkit-backdrop-filter: blur(var(--fin-mm-backdrop-blur, 0));
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fin-mm-duration, 250ms) ease, visibility var(--fin-mm-duration, 250ms) ease;
}
.fin-mobile-menu-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

/* The drawer itself. Base rules; slide direction is applied via modifier classes below. */
.fin-mobile-menu-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--fin-mm-width, min(85vw, 360px));
    max-width: 100vw;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background: var(--fin-mm-bg, #ffffff);
    color: var(--fin-mm-text, #111827);
    font-family: var(--fin-mm-font-family, inherit);
    transition: transform var(--fin-mm-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
    overscroll-behavior: contain;
}

/* Slide-direction modifiers — anchor edge + initial/open transforms + box-shadow direction. */
.fin-mobile-menu-drawer.fin-mm-slide-right {
    right: 0;
    transform: translateX(100%);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
}
.fin-mobile-menu-drawer.fin-mm-slide-right.is-open { transform: translateX(0); }

.fin-mobile-menu-drawer.fin-mm-slide-left {
    left: 0;
    transform: translateX(-100%);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.2);
}
.fin-mobile-menu-drawer.fin-mm-slide-left.is-open { transform: translateX(0); }

.fin-mobile-menu-drawer.fin-mm-slide-top {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    max-height: 100vh;
    transform: translateY(-100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.fin-mobile-menu-drawer.fin-mm-slide-top.is-open { transform: translateY(0); }

/* Header area with the close button (top-right of drawer). */
.fin-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px;
    border-bottom: var(--fin-mm-divider, 1px solid rgba(128, 128, 128, 0.15));
    flex-shrink: 0;
}
.fin-mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.fin-mobile-menu-close:hover,
.fin-mobile-menu-close:focus-visible {
    background-color: rgba(128, 128, 128, 0.12);
    outline: none;
}

/* Close button style modifiers — icon only / text only / both. */
.fin-mobile-menu-drawer.fin-mm-close-icon .fin-mm-close-text-label { display: none; }
.fin-mobile-menu-drawer.fin-mm-close-text .fin-mm-close-icon-svg   { display: none; }
.fin-mobile-menu-drawer.fin-mm-close-both .fin-mobile-menu-close   {
    gap: 8px;
    padding: 0 12px;
    width: auto;
}
.fin-mm-close-text-label {
    font-size: 14px;
    font-weight: 500;
}

/* Scrollable menu body between header and footer. */
.fin-mobile-menu-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0 16px;
    -webkit-overflow-scrolling: touch;
}

/* Wrapper for each top-level menu item (and its expanded submenu). */
.fin-mobile-menu-item-group {
    border-bottom: var(--fin-mm-divider, 1px solid rgba(128, 128, 128, 0.08));
}
.fin-mobile-menu-item-group:last-child {
    border-bottom: none;
}

/* Row for item + expand chevron (when item has children). */
.fin-mobile-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-right: 8px;
}

/* Menu links — typography driven by custom props; large touch targets. */
.fin-mobile-menu-drawer .fin-mobile-menu-body a {
    display: block;
    padding: var(--fin-mm-item-padding, 14px 24px);
    font-size: var(--fin-mm-font-size, 16px);
    font-weight: var(--fin-mm-font-weight, 400);
    letter-spacing: var(--fin-mm-letter-spacing, normal);
    text-transform: var(--fin-mm-text-transform, none);
    line-height: 1.4;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease, color 0.15s ease;
    /* Allow long Turkish/German words to wrap instead of overflowing. */
    overflow-wrap: break-word;
    word-break: break-word;
}
.fin-mobile-menu-drawer .fin-mobile-menu-body a:hover,
.fin-mobile-menu-drawer .fin-mobile-menu-body a:focus-visible {
    background-color: rgba(128, 128, 128, 0.08);
    outline: none;
}
/* Active page highlight — uses color-mix() for a tinted background derived from
   the active color. Chrome 111+, Firefox 113+, Safari 16.2+. Older browsers fall
   through to the active color directly, which remains readable. */
.fin-mobile-menu-drawer .fin-mobile-menu-body a[aria-current="page"] {
    background-color: color-mix(in srgb, var(--fin-mm-active, #6366f1) 12%, transparent);
    color: var(--fin-mm-active, #6366f1);
    font-weight: 600;
}
/* When an item is inside a .fin-mobile-menu-row (has children), compensate for
   the chevron button on the right by keeping the link flex-growing. */
.fin-mobile-menu-row > a {
    flex: 1;
    min-width: 0;
}

/* Expand/collapse chevron for parent items. */
.fin-mobile-menu-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease, background-color 0.15s ease, transform 0.2s ease;
    flex-shrink: 0;
}
.fin-mobile-menu-expand:hover,
.fin-mobile-menu-expand:focus-visible {
    opacity: 1;
    background-color: rgba(128, 128, 128, 0.12);
    outline: none;
}
.fin-mobile-menu-expand.is-expanded {
    transform: rotate(180deg);
    opacity: 1;
}

/* Nested submenu indentation + subtle vertical guide line. */
.fin-mobile-menu-submenu {
    padding-left: 16px;
    margin-left: 12px;
    border-left: 2px solid rgba(128, 128, 128, 0.15);
}
.fin-mobile-menu-submenu-nested {
    border-left-color: rgba(128, 128, 128, 0.1);
}
.fin-mobile-menu-submenu a {
    padding: 12px 20px;
    font-size: 15px;
}

/* Footer with optional CTA button, pinned at the bottom of the drawer. */
.fin-mobile-menu-footer {
    flex-shrink: 0;
    padding: 16px;
    border-top: 1px solid rgba(128, 128, 128, 0.15);
}
.fin-mobile-menu-cta {
    display: block;
    width: 100%;
    padding: 14px 20px;
    text-align: center;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.fin-mobile-menu-cta:hover,
.fin-mobile-menu-cta:focus-visible {
    filter: brightness(1.05);
    outline: none;
}
.fin-mobile-menu-cta:active {
    transform: scale(0.98);
}

/* Lock body scroll while the drawer is open. Applied via JS interop
   (see MenuWidget.razor and HamburgerMenuWidget.razor). */
body.fin-mobile-menu-open {
    overflow: hidden;
    touch-action: none;
}


/* ============================================================================
   Hamburger Menu Widget (HamburgerMenuWidget) — Sixt-style slide-in drawer
   ============================================================================
   Standalone hamburger button → slides a full-height drawer with
   title + description per menu item, brand header, and footer links.
   All visual properties are driven by CSS custom properties (--fin-hm-*)
   with sensible defaults. HamburgerMenuWidget.razor emits per-widget
   <style> blocks that set these variables scoped to .rz-w-{WidgetId}.
   ============================================================================ */

/* ─── Hamburger button ─── */
.fin-hamburger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}
.fin-hamburger-btn:hover,
.fin-hamburger-btn:focus-visible {
    background-color: rgba(128, 128, 128, 0.1);
    outline: none;
}
.fin-hm-btn-sm { padding: 6px; }
.fin-hm-btn-sm svg { width: 16px; height: 11px; }
.fin-hm-btn-md { padding: 10px; }
.fin-hm-btn-md svg { width: 20px; height: 14px; }
.fin-hm-btn-lg { padding: 12px; }
.fin-hm-btn-lg svg { width: 24px; height: 17px; }

/* ─── Backdrop ─── */
.fin-hamburger-backdrop {
    position: fixed;
    inset: 0;
    background: var(--fin-hm-backdrop, rgba(0, 0, 0, 0.45));
    backdrop-filter: blur(var(--fin-hm-backdrop-blur, 0));
    -webkit-backdrop-filter: blur(var(--fin-hm-backdrop-blur, 0));
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fin-hm-duration, 400ms) ease;
}
.fin-hamburger-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ─── Drawer ─── */
.fin-hamburger-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--fin-hm-width, 340px);
    max-width: 100vw;
    background: var(--fin-hm-bg, #ffffff);
    color: var(--fin-hm-text, #27272a);
    font-family: var(--fin-hm-font-family, inherit);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Transition both transform and visibility so the drawer is fully invisible
       when closed (no shadow bleed at the edge). visibility:hidden is applied
       when not .is-open; it transitions to visible at the start of the open. */
    transition: transform var(--fin-hm-duration, 400ms) cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear var(--fin-hm-duration, 400ms);
    visibility: hidden;
}
.fin-hamburger-drawer.is-open {
    visibility: visible;
    transition: transform var(--fin-hm-duration, 400ms) cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0s;
}
/* Slide directions */
.fin-hamburger-drawer.fin-hm-slide-left {
    left: 0;
    transform: translateX(-100%);
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.15);
}
.fin-hamburger-drawer.fin-hm-slide-left.is-open { transform: translateX(0); }

.fin-hamburger-drawer.fin-hm-slide-right {
    right: 0;
    transform: translateX(100%);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15);
}
.fin-hamburger-drawer.fin-hm-slide-right.is-open { transform: translateX(0); }

/* ─── Brand header ─── */
.fin-hamburger-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    height: 64px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
    flex-shrink: 0;
}
.fin-hamburger-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: rgba(128, 128, 128, 0.5);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.fin-hamburger-close:hover,
.fin-hamburger-close:focus-visible {
    background-color: rgba(128, 128, 128, 0.1);
    color: inherit;
    outline: none;
}
.fin-hamburger-brand-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}
.fin-hamburger-brand-icon {
    color: var(--fin-hm-active, #C62828);
    font-size: 18px;
}
.fin-hamburger-brand-text {
    font-family: var(--fin-hm-title-font-family, inherit);
    font-weight: var(--fin-hm-title-weight, 700);
    font-size: 17px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ─── Menu body ─── */
.fin-hamburger-body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ─── Menu item ─── */
.fin-hamburger-item {
    margin-bottom: 24px;
}
.fin-hamburger-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.fin-hamburger-item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
    padding: 6px 0;
    transition: color 0.15s ease;
}
.fin-hamburger-item-link:hover {
    color: var(--fin-hm-active, #C62828);
}
.fin-hamburger-item.is-active .fin-hamburger-item-title {
    color: var(--fin-hm-active, #C62828);
}
.fin-hamburger-item-icon {
    font-size: 16px;
    opacity: 0.5;
    flex-shrink: 0;
}
.fin-hamburger-item-title {
    font-family: var(--fin-hm-title-font-family, inherit);
    font-size: var(--fin-hm-title-size, 22px);
    font-weight: var(--fin-hm-title-weight, 700);
    text-transform: var(--fin-hm-title-transform, uppercase);
    letter-spacing: 0.05em;
    line-height: 1.2;
    transition: color 0.15s ease;
}
.fin-hamburger-item-desc {
    font-size: var(--fin-hm-desc-size, 13px);
    color: var(--fin-hm-desc-color, #a1a1aa);
    margin-top: -2px;
    line-height: 1.4;
}

/* ─── Chevron ─── */
.fin-hamburger-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: rgba(128, 128, 128, 0.3);
    cursor: pointer;
    border-radius: 6px;
    font-size: 12px;
    flex-shrink: 0;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.2s ease;
}
.fin-hamburger-chevron:hover {
    color: var(--fin-hm-active, #C62828);
    background-color: rgba(128, 128, 128, 0.08);
}
.fin-hamburger-chevron.is-expanded {
    transform: rotate(90deg);
    color: var(--fin-hm-active, #C62828);
}

/* ─── Submenu ─── */
.fin-hamburger-submenu {
    padding-left: 16px;
    margin-left: 8px;
    margin-top: 8px;
    border-left: 2px solid rgba(128, 128, 128, 0.1);
}
.fin-hamburger-submenu-link {
    display: block;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    opacity: 0.7;
    border-radius: 6px;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.fin-hamburger-submenu-link:hover {
    opacity: 1;
    background-color: rgba(128, 128, 128, 0.06);
}
.fin-hamburger-submenu-link.is-active {
    opacity: 1;
    color: var(--fin-hm-active, #C62828);
    font-weight: 600;
}

/* ─── Footer links ─── */
.fin-hamburger-footer {
    flex-shrink: 0;
    padding: 16px 24px 24px;
    border-top: 1px solid rgba(128, 128, 128, 0.1);
}
.fin-hamburger-footer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.fin-hamburger-footer-link:hover {
    opacity: 1;
    color: var(--fin-hm-active, #C62828);
}
.fin-hamburger-footer-icon {
    width: 24px;
    text-align: center;
    font-size: 16px;
}
.fin-hamburger-footer-icon.fa-whatsapp,
.fin-hamburger-footer-icon.fab.fa-whatsapp {
    color: #25D366;
}

/* ─── Empty state ─── */
.fin-hamburger-empty {
    padding: 32px 16px;
    text-align: center;
    color: rgba(128, 128, 128, 0.5);
    font-size: 14px;
}


/* ============================================================================
   NavbarWidget — Complete navigation bar (Sixt-style)
   ============================================================================ */
.fin-navbar {
    width: 100%;
}
.fin-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    margin: 0 auto;
}
.fin-navbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fin-navbar-right {
    display: flex;
    align-items: center;
    gap: 2px;
}
.fin-navbar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.fin-navbar-link:hover {
    background-color: var(--fin-nav-hover, rgba(255,255,255,0.06));
}
.fin-navbar-link-icon {
    font-size: 13px;
}
.fin-navbar-divider {
    width: 1px;
    height: 20px;
    flex-shrink: 0;
}
.fin-navbar-logo {
    display: flex;
    align-items: center;
}
.fin-navbar-logo img {
    object-fit: contain;
}
/* User menu wrapper (for dropdown positioning) */
.fin-navbar-user-wrap {
    position: relative;
}
.fin-navbar-user {
    border: none;
    background: transparent;
    cursor: pointer;
}

/* User dropdown menu */
.fin-navbar-user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 220px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    z-index: 100;
    padding: 6px 0;
    animation: finNavDropIn 0.15s ease-out;
}
@keyframes finNavDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.fin-navbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: background-color 0.12s ease;
}
.fin-navbar-dropdown-item:hover {
    background-color: #f3f4f6;
}
.fin-navbar-dropdown-item i {
    font-size: 15px;
    color: #9ca3af;
    width: 20px;
    text-align: center;
}
.fin-navbar-dropdown-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}
.fin-navbar-dropdown-logout {
    color: #ef4444;
}
.fin-navbar-dropdown-logout i {
    color: #ef4444;
}

/* User avatar (logged-in state) */
.fin-navbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* ─── Mobile responsive: icons only, text hidden ─── */
@media (max-width: 768px) {
    /* Completely hide links that are marked as mobile-hidden */
    .fin-navbar-hide-mobile { display: none !important; }
    /* Hide link TEXT on all remaining links — only icons show (Sixt mobile pattern) */
    .fin-navbar-link-text { display: none; }
    /* Compact padding for icon-only links */
    .fin-navbar-link {
        padding: 8px 10px;
        border-radius: 50%;
    }
    /* Larger icons on mobile for touch targets */
    .fin-navbar-link-icon {
        font-size: 16px !important;
        opacity: 0.6;
    }
    /* Hide dividers on mobile */
    .fin-navbar-divider { display: none; }
    /* Tighten inner padding */
    .fin-navbar-inner { padding-left: 8px !important; padding-right: 8px !important; }
    .fin-navbar-right { gap: 0; }
    /* Avatar stays full on mobile */
    .fin-navbar-avatar { width: 28px; height: 28px; font-size: 10px; }
}


/* ============================================================================
   BookingLookupWidget — Check My Booking form + result display
   ============================================================================ */
.fin-bl-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    max-width: 640px;
    margin: 0 auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.fin-bl-title {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
}
.fin-bl-subtitle {
    font-size: 15px;
    color: #6b7280;
    margin: 0 0 24px;
    line-height: 1.5;
}
.fin-bl-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.fin-bl-field { display: flex; flex-direction: column; gap: 4px; }
.fin-bl-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
}
.fin-bl-input {
    padding: 13px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: #111827;
    background: #fafafa;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.fin-bl-input:focus {
    border-color: #C62828;
    box-shadow: 0 0 0 3px rgba(198,40,40,0.07);
    background: #fff;
}
.fin-bl-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}
.fin-bl-button:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.fin-bl-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.fin-bl-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.fin-bl-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #991b1b;
    font-size: 14px;
}

/* ─── Booking detail display ─── */
.fin-bl-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.fin-bl-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.fin-bl-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.fin-bl-back:hover { border-color: #9ca3af; color: #111827; }
.fin-bl-section {
    padding: 20px 0;
    border-top: 1px solid #f3f4f6;
}
.fin-bl-section:first-of-type { border-top: none; }
.fin-bl-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fin-bl-section-title i { color: #9ca3af; font-size: 16px; }
.fin-bl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.fin-bl-item { display: flex; flex-direction: column; gap: 2px; }
.fin-bl-item-label { font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; }
.fin-bl-item-value { font-size: 15px; font-weight: 600; color: #111827; }
.fin-bl-item-sub { font-size: 13px; color: #6b7280; }
.fin-bl-price { font-size: 20px; }
.fin-bl-notes { font-size: 14px; color: #6b7280; line-height: 1.6; margin: 0; }

@media (max-width: 640px) {
    .fin-bl-card { padding: 20px 16px; }
    .fin-bl-grid { grid-template-columns: 1fr; }
}