/* Manrope Fonts - All Weights (Manrope only supports 200-800, map 100 to 200) */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope/Manrope-ExtraLight.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope/Manrope-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope/Manrope-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope/Manrope-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope/Manrope-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope/Manrope-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope/Manrope-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope/Manrope-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Custom styles for search page */

/* Fix z-index issues - noUiSlider should be below tom-select dropdowns */
.noUi-base,
.noUi-connects {
    z-index: 1 !important;
}

.noUi-handle {
    z-index: 2 !important;
}

/* Tom-select dropdown should be above sliders */
.ts-dropdown {
    z-index: 1000 !important;
}

.ts-wrapper {
    width: 100%;
}

/* Style tom-select to match original design - exact same as input fields */
.ts-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.ts-wrapper .ts-control {
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: #475569 !important;
    background: white !important;
    box-shadow: none !important;
    min-height: auto !important;
    height: 42px !important;
}

.ts-wrapper.single .ts-control {
    padding: 0.5rem 0.75rem !important;
    display: flex !important;
    align-items: center !important;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
    background: white !important;
    cursor: pointer !important;
}

.ts-wrapper .ts-control .item {
    font-size: 0.875rem !important;
    color: #475569 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.25rem !important;
}

/* Hide caret icon to match input style */
.ts-wrapper.single .ts-control:after {
    display: none !important;
}

/* Style placeholder to match */
.ts-wrapper .ts-control input::placeholder {
    color: #94a3b8 !important;
}

.ts-wrapper .ts-control:focus,
.ts-wrapper.focus .ts-control {
    border-color: var(--primary-color, #3b82f6) !important;
    outline: none !important;
    box-shadow: none !important;
}

.ts-wrapper .ts-dropdown {
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.375rem !important;
    margin-top: 0.25rem !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
    max-height: 15rem !important;
    overflow-y: auto !important;
}

.ts-wrapper .ts-dropdown .option {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
}

.ts-wrapper .ts-dropdown .option:hover,
.ts-wrapper .ts-dropdown .option.active {
    background-color: #f3f4f6 !important;
}

.ts-wrapper .ts-dropdown .option.selected {
    background-color: #e5e7eb !important;
    font-weight: 600 !important;
}

/* Input inside dropdown for search */
.ts-wrapper .ts-dropdown .ts-dropdown-content {
    padding: 0 !important;
}

.ts-wrapper .dropdown-input {
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    width: 100% !important;
}

.ts-wrapper .dropdown-input:focus {
    outline: none !important;
    border-color: var(--primary-color, #3b82f6) !important;
}

/* Make all search inputs same height */
#searchbar input[type="text"] {
    height: 42px !important;
}

/* Ensure filter sliders stay below dropdowns */
.filterslider {
    position: relative;
    z-index: 1;
}

.filter {
    position: relative;
    z-index: 1;
}

/* Hierarchical Destinations Styling */
.destination-option {
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease;
}

/* Indentare progresiva pe nivele */
.destination-level-0 {
    padding-left: 12px !important;
}

.destination-level-1 {
    padding-left: 28px !important;
}

.destination-level-2 {
    padding-left: 44px !important;
}

.destination-level-3 {
    padding-left: 60px !important;
}

/* Stiluri pe tipuri de destinatie */
.destination-country {
    font-weight: 700 !important;
    color: #1f2937 !important;
    background-color: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.destination-sailingarea {
    font-weight: 600 !important;
    color: #374151 !important;
}

.destination-city {
    font-weight: 500 !important;
    color: #4b5563 !important;
}

.destination-marina {
    font-weight: 400 !important;
    color: #6b7280 !important;
}

.destination-count {
    font-size: 0.75rem !important;
    color: #9ca3af !important;
    font-weight: 400 !important;
    margin-left: 4px;
}

.destination-option:hover {
    background-color: #f3f4f6 !important;
}

.ts-dropdown .destination-option.active {
    background-color: #dbeafe !important;
}

/* Mobile Menu Panel Styles */
.da-panel {
    background: transparent;
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.da-panel.da-open {
    transform: translateX(0);
}

.da-ease {
    will-change: transform;
}

/* Alpine.js x-cloak */
[x-cloak] {
    display: none !important;
}

/* Scroll reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
    opacity: 1;
    transform: none;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-left.in {
    opacity: 1;
    transform: none;
}

.reveal-right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-right.in {
    opacity: 1;
    transform: none;
}

/* Animation delays */
.delay-1 {
    transition-delay: 0.08s;
}

.delay-2 {
    transition-delay: 0.16s;
}

.delay-3 {
    transition-delay: 0.24s;
}

.delay-4 {
    transition-delay: 0.32s;
}

/* Rating bar styles for reviews */
.rating-bar {
  --bar-height: 12px;
  --bar-bg: #e5e7eb;
  --bar-fill: #03b8c1;
  --value: 0; /* rating value 0..10 */
  position: relative;
  display: inline-block;
  width: min(48vw, 320px);
  height: var(--bar-height);
  background: var(--bar-bg);
  border-radius: 9999px;
  overflow: hidden;
  vertical-align: middle;
}

.rating-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bar-fill);
  transform-origin: left center;
  transform: scaleX(calc(var(--value) / 10)); /* 0..10 to 0..1 */
  transition: transform 900ms cubic-bezier(.22,1,.36,1);
}

.rating-bar.segmented::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent 9%,
    rgba(0,0,0,.06) 9%,
    rgba(0,0,0,.06) 10%
  );
  opacity: .35;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .rating-bar::before { transition: none !important; }
}