:root {
   /* =====================================================================
      BRAND ACCENT — refined "Adriatic" blue (HR-CRO / Croatia).
      To create the green "Slovenia" sister site, change ONLY the values in
      THIS block. Everything else derives from these via var()/color-mix().
      Green preset (commented) is provided below for convenience.
      ===================================================================== */
   --brand-accent: #15628f;          /* primary accent (links, buttons, bars) */
   --brand-accent-strong: #0f4a6d;   /* darker accent (hover / gradients)     */
   --brand-header-from: #0e5a86;     /* header gradient start                 */
   --brand-header-to: #0b3d60;       /* header gradient end                   */
   --brand-heading: #0f3a57;         /* section / h1 / h2 text                */

   /* Green (Slovenia) preset — swap the four lines above for these:
      --brand-accent: #2f8f4e;
      --brand-accent-strong: #216b3a;
      --brand-header-from: #2c854a;
      --brand-header-to: #1c5a32;
      --brand-heading: #1c4a2c;
   */

   --site-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
   --site-text-color: #1f2933;
   --site-muted-text-color: #5f6c7b;
   --site-link-color: var(--brand-accent);
   --site-link-hover-color: var(--brand-accent-strong);
   --site-accent-color: var(--brand-accent);
   --site-accent-dark-color: var(--brand-accent-strong);
   --site-accent-soft: color-mix(in srgb, var(--brand-accent) 9%, #ffffff);
   --site-accent-tint: color-mix(in srgb, var(--brand-accent) 16%, #ffffff);
   --site-page-background: #f2f6fa;
   --site-soft-surface-color: #f6f9fc;
   --site-surface-color: #ffffff;
   --site-border-color: #dbe4ec;
   --site-soft-shadow: 0 10px 30px rgba(15, 42, 66, 0.08);
   --site-card-shadow: 0 4px 16px rgba(15, 42, 66, 0.07);
   --site-radius-sm: 4px;
   --site-radius-md: 6px;
   --site-radius-lg: 8px;
   --site-space-xs: 4px;
   --site-space-sm: 8px;
   --site-space-md: 16px;
   --site-space-lg: 24px;
   --site-space-xl: 32px;
   --hotels-header-height: 305px;

   /* Type scale — small set of steps instead of one-off sizes per component.
      Values picked from the most common sizes already in use, so this is a
      consolidation of what existed, not a new arbitrary scale. Everything
      from ~0.78rem to ~1.35rem should round to one of these. */
   --font-size-2xs: 0.78rem;  /* tiny meta text, small badges */
   --font-size-xs: 0.82rem;   /* captions, secondary labels */
   --font-size-sm: 0.95rem;   /* compact UI text, table cells */
   --font-size-base: 1rem;    /* default body text */
   --font-size-md: 1.08rem;   /* slightly emphasized body text, form labels */
   --font-size-lg: 1.18rem;   /* sub-headings, prominent labels */
   --font-size-xl: 1.35rem;   /* small standalone titles */
}

html {
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
   box-sizing: border-box;
}

*, *::before, *::after {
   box-sizing: inherit;
}

body {
   background:
      radial-gradient(circle at top left, color-mix(in srgb, var(--brand-accent) 8%, transparent), transparent 34rem),
      var(--site-page-background);
   color: var(--site-text-color);
   font-family: var(--site-font-family);
   font-size: 16px;
   line-height: 1.55;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
}

input,
select,
textarea,
button {
   font: inherit;
}

a {
   color: var(--site-link-color);
   text-decoration-color: rgba(15, 76, 129, 0.28);
   text-underline-offset: 0.16em;
   transition: color 160ms ease, text-decoration-color 160ms ease;
}

a:hover,
a:focus {
   color: var(--site-link-hover-color);
   text-decoration-color: rgba(8, 59, 102, 0.7);
}

img {
   max-width: 100%;
}

p,
li {
   line-height: 1.55;
}

h1,
h2,
h3 {
   color: var(--brand-heading);
   line-height: 1.25;
}

h1 {
   font-size: clamp(1.9rem, 3.4vw, 2.6rem);
   font-weight: 800;
   letter-spacing: 0.005em;
   margin: var(--site-space-lg) 0 var(--site-space-lg);
   text-shadow: none;
}

h2 {
   background: none;
   border: 0;
   border-bottom: 1px solid var(--site-border-color);
   box-shadow: none;
   color: var(--brand-heading);
   font-size: var(--font-size-xl);
   font-weight: 700;
   letter-spacing: 0.01em;
   margin: var(--site-space-xl) 0 var(--site-space-lg);
   padding: 0 0 0.55rem;
   position: relative;
   text-shadow: none;
}

h2::after {
   background: var(--site-accent-color);
   bottom: -1px;
   content: "";
   height: 3px;
   left: 0;
   position: absolute;
   width: 2.75rem;
}

h3 {
   font-size: var(--font-size-md);
   letter-spacing: 0.01em;
}

#div_footer_content,
#footer_copyright,
#div_autocomplete ul li p,
#map_info,
#div_other_sights > div > div,
.from_small,
.leaflet_button {
   font-size: var(--font-size-sm);
}

.trip_count {
   border: 0;
   border-radius: 999px;
   box-sizing: border-box;
   display: inline-block;
   font-size: var(--font-size-xs);
   font-weight: 700;
   line-height: 1.2;
   margin-left: 0.25rem;
   padding: 0.04rem 0.28rem;
   vertical-align: 0.06em;
}

input,
select,
textarea,
button {
   font: inherit;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
select,
textarea {
   background-color: #fff;
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-sm);
   color: var(--site-text-color);
   min-height: 2rem;
   padding: 0.35rem 0.55rem;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
   border-color: var(--site-link-color);
   box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.14);
   outline: none;
}

button,
input[type="submit"],
.submit_button {
   cursor: pointer;
}

button,
input[type="submit"],
.submit_button,
.leaflet_button {
   border: 1px solid rgba(8, 59, 102, 0.18);
   border-radius: var(--site-radius-sm);
   transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

button:hover,
input[type="submit"]:hover,
.submit_button:hover,
.leaflet_button:hover {
   transform: translateY(-1px);
}

button:focus,
input[type="submit"]:focus,
.submit_button:focus,
.leaflet_button:focus {
   box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.16);
   outline: none;
}

.normal_paragraph {
   line-height: 1.65;
}

#div_trip_articles,
.div_trip_municipalites,
#div_other_sights,
#trip_menu_div,
#div_booking_reservation {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
}

#div_trip_articles,
.div_trip_municipalites,
#div_other_sights {
   margin: var(--site-space-lg) 0;
   padding: var(--site-space-lg);
}

#div_trip_articles h2,
.div_trip_municipalites .title,
#div_other_sights .other_sights_heading {
   margin-top: 0;
}

#div_trip_articles_list ul {
   display: grid;
   gap: var(--site-space-sm);
   list-style: none;
   margin: 0;
   padding: 0;
}

#div_trip_articles_list li {
   background: var(--site-soft-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-sm);
   padding: 0.55rem 0.75rem;
}

#div_trip_articles_list li::before {
   content: none;
}

#trip_menu_div {
   overflow: hidden;
}

.trip_menu_title {
   background: linear-gradient(135deg, var(--site-accent-color), var(--site-accent-dark-color));
   color: #fff;
   letter-spacing: 0.06em;
   text-shadow: none;
}

#trip_menu_div li a {
   border-radius: var(--site-radius-sm);
   transition: background-color 160ms ease, color 160ms ease;
}

#trip_menu_div li a:hover,
#trip_menu_div li.active a {
   background: #e7f0f7;
   color: var(--site-link-hover-color);
}

#div_page_inner {
   background: rgba(255, 255, 255, 0.96);
   border: 1px solid rgba(216, 225, 234, 0.85);
   border-radius: 0 0 var(--site-radius-lg) var(--site-radius-lg);
   box-shadow: var(--site-soft-shadow);
   max-width: 1320px;
   width: min(94vw, 1320px);
}

#div_all {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

#div_page {
   background: transparent;
   flex: 1 0 auto;
   padding-bottom: 0;
}

#div_footer {
   background: color-mix(in srgb, var(--brand-accent) 6%, #eef1f6);
   border-top: 1px solid var(--site-border-color);
   bottom: auto;
   color: var(--site-muted-text-color);
   flex-shrink: 0;
   margin-top: var(--site-space-lg);
   position: relative;
}

#div_footer_content {
   padding: var(--site-space-lg) 0 var(--site-space-md);
}

#div_footer a {
   color: var(--site-muted-text-color);
   text-decoration: none;
}

#div_footer a:hover,
#div_footer a:focus {
   color: var(--site-accent-color);
   text-decoration: underline;
}

#footer_offer,
#footer_copyright {
   text-align: center;
}

#footer_offer {
   font-size: var(--font-size-md);
   padding-top: var(--site-space-sm);
}

#footer_offer a {
   color: var(--site-link-color);
   font-weight: 600;
}

#footer_copyright {
   color: var(--site-muted-text-color);
   font-size: var(--font-size-sm);
}

.footer_par {
   margin: 0.25rem 0;
}

nav {
   background: rgba(255, 255, 255, 0.98);
   border-bottom: 1px solid #d5e1ec;
   box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
   font-size: 1rem;
   position: relative;
   text-align: center;
}

nav > ul {
   align-items: stretch;
   display: flex;
   gap: 0;
   justify-content: flex-start;
   list-style: none;
   margin: 0 auto;
   max-width: 1320px;
   padding-left: 0;
   width: min(94vw, 1320px);
}

nav > ul::after {
   content: none;
}

nav > ul > li {
   background: transparent;
   border-radius: var(--site-radius-sm) var(--site-radius-sm) 0 0;
   color: #102a43;
   flex: 0 0 auto;
   float: none;
   padding: 0;
   position: relative;
   transition: background-color 160ms ease, color 160ms ease;
   width: auto;
}

nav p {
   margin: 0;
}

nav > ul > li > span > a {
   align-items: center;
   border: 0;
   color: #0f2f4a;
   display: flex;
   font-size: var(--font-size-md);
   font-weight: 500;
   justify-content: center;
   letter-spacing: 0.01em;
   line-height: 1.25;
   min-height: 2.85rem;
   padding: 0 1.35rem;
   position: relative;
   text-decoration: none;
   text-shadow: none;
   text-transform: uppercase;
}

nav > ul > li.active,
nav > ul > li:hover {
   background: #f7fbff;
   box-shadow: none;
   filter: none;
}

nav > ul > li.active > span > a,
nav > ul > li > span > a:hover,
nav > ul > li:hover > span > a {
   background: #0b71d9;
   color: #fff;
}

nav > ul > li.active > span > a::after,
nav > ul > li:hover > span > a::after {
   background: var(--site-accent-color);
   bottom: 0;
   content: "";
   height: 2px;
   left: 0;
   position: absolute;
   right: 0;
}

nav ul ul {
   background: #fff;
   border: 1px solid #d5e1ec;
   border-radius: 0 0 var(--site-radius-sm) var(--site-radius-sm);
   box-shadow: 0 18px 35px rgba(15, 23, 42, 0.14);
   display: block;
   left: 0;
   max-width: min(27rem, calc(100vw - 2rem));
   min-width: 18rem;
   padding: 0.35rem 0;
   top: 100%;
   width: max-content;
   z-index: 3000;
}

nav ul ul li {
   background: transparent;
   border: 0;
   border-bottom: 1px solid #edf2f7;
   box-shadow: none;
   color: #102a43;
   float: none;
   min-width: 100%;
   padding: 0;
   text-transform: none;
   width: 100%;
}

nav ul ul li:last-child {
   border-bottom: 0;
}

nav ul ul ul {
   border-radius: var(--site-radius-md);
   left: 100%;
   max-height: 70vh;
   overflow-y: auto;
   top: -1px;
   width: max-content;
}

nav ul ul li p,
nav ul ul li a,
nav .submenu {
   border: 0;
   color: #0f4c81;
   display: block;
   font-size: 1rem;
   line-height: 1.35;
   margin: 0;
   padding: 0.72rem 1rem;
   text-shadow: none;
   white-space: normal;
}

nav ul ul li a:hover,
nav ul ul li p:hover,
nav ul ul li:hover > p > a,
nav ul ul li:hover > .submenu {
   background: #f3f8fd;
   color: #083b66;
   text-decoration: none;
   text-shadow: none;
}

nav ul ul li:hover {
   background: transparent;
}

nav ul ul li:hover a {
   color: var(--site-link-color);
}

.trip_group,
.hotel_row,
.div_news_trip,
.div_news_site,
.search_pic_div,
.div_trip_id {
   border-radius: var(--site-radius-md);
}

.trip_group,
.hotel_row,
.div_news_trip,
.div_news_site {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   box-shadow: var(--site-card-shadow);
}

.trip_group {
   padding: var(--site-space-lg);
   margin-bottom: var(--site-space-lg);
}

.site-trip-group-grid {
   display: grid;
   gap: var(--site-space-lg);
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
   margin-top: var(--site-space-md);
}

.site-trip-group-grid .trip_group {
   float: none;
   margin: 0;
   width: auto;
}

.site-trip-group-grid .trip_group_photos {
   display: grid;
   gap: var(--site-space-xs);
   grid-template-columns: repeat(3, minmax(0, 1fr));
}

.site-trip-group-grid .trip_group_div_pic {
   overflow: hidden;
   border-radius: var(--site-radius-sm);
}

.site-trip-group-grid .trip_group_pic {
   display: block;
   float: none;
   height: 120px;
   object-fit: cover;
   width: 100%;
}

.trip_group_title {
   border-bottom-color: var(--site-border-color);
   font-family: Arial, Helvetica, sans-serif;
   letter-spacing: -0.02em;
}

.trip_group_description,
.paragraph_trip_review,
.div_news_description,
.description {
   color: var(--site-text-color);
   line-height: 1.6;
}

.hotel_row {
   align-items: flex-start;
   display: flex;
   gap: var(--site-space-md);
   padding: var(--site-space-md);
   margin-bottom: var(--site-space-md);
   border-top: 0;
}

.hotel_row .img_hotel {
   flex: 0 0 180px;
   float: none;
   padding-right: 0;
}

.hotel_row .img_hotel a {
   display: block;
}

.hotel_row .trip_pic {
   display: block;
   height: 135px;
   object-fit: cover;
   width: 100%;
}

.hotel_row .div_hotel_content_data {
   display: flex;
   flex: 1 1 auto;
   gap: var(--site-space-md);
   margin-left: 0;
   min-width: 0;
}

.hotel_row .div_hotel_content {
   flex: 1 1 auto;
   float: none;
   width: auto;
}

.hotel_row .div_hotel_title {
   margin-bottom: var(--site-space-sm);
}

.hotel_row .div_hotel_title h3 {
   font-size: var(--font-size-lg);
}

.hotel_row .div_trip_address,
.table_trip_address {
   color: var(--site-muted-text-color);
}

.hotel_row .paragraph_trip_review {
   padding: var(--site-space-sm) 0;
}

.hotel_row .div_hotel_data,
#hotel_view .div_hotel_data {
   background: #f5f8fb;
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-md);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
   float: none;
}

.hotel_row .div_hotel_data {
   flex: 0 0 220px;
   width: auto;
}

#hotel_view .div_hotel_data {
   box-sizing: border-box;
   margin: 0 0 var(--site-space-md) var(--site-space-md);
   width: 230px;
}

.div_hotel_data_inner {
   padding: var(--site-space-md);
}

.div_hotel_param_value {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 2px var(--site-space-sm);
}

.div_hotel_param,
.div_hotel_value {
   float: none;
}

.div_reservation {
   background: var(--brand-accent) !important;
   border-radius: var(--site-radius-sm);
   box-shadow: none !important;
   box-sizing: border-box;
   margin: var(--site-space-md) 0 0;
   padding: 0.6rem 0.5rem;
   transition: background-color 160ms ease;
   width: 100%;
}

.div_reservation:hover {
   background: var(--brand-accent-strong) !important;
}

.link_reservation {
   display: block;
   font-weight: 700;
   text-align: center;
   white-space: normal;
}

#div_booking_reservation {
   overflow: visible;
   padding: var(--site-space-sm);
}

#div_booking_reservation div,
#div_booking_reservation input,
#div_booking_reservation select,
#div_booking_reservation button {
   box-sizing: border-box;
}

#div_booking_reservation button {
   display: block;
   margin-left: 0;
   width: 100%;
}

#div_hotels_header_full {
   background:
      linear-gradient(180deg, rgba(233, 242, 250, 0.96), rgba(248, 251, 254, 0.96));
   border-bottom: 1px solid rgba(216, 225, 234, 0.9);
}

#div_hotels_header {
   align-items: stretch;
   display: grid;
   gap: var(--site-space-md);
   grid-template-columns: minmax(25rem, 27rem) repeat(3, minmax(0, 1fr));
   height: auto !important;
   min-height: 0;
   padding: var(--site-space-md) 0;
   width: min(94vw, 1320px);
}

#div_hotels_header::after {
   clear: both;
   content: "";
   display: table;
}

#div_hotels_header_search {
   background:
      linear-gradient(90deg, rgba(11, 113, 217, 0.08), rgba(255, 255, 255, 0) 46%),
      #fff;
   border: 1px solid var(--site-border-color);
   border-top: 4px solid var(--site-accent-color);
   box-shadow: 0 8px 22px rgba(31, 41, 51, 0.12);
   color: #11375a;
   float: none;
   min-height: var(--hotels-header-height);
   overflow: visible;
   width: auto;
   min-width: 0;
}

#div_hotels_header_search_inner {
   height: 100%;
   padding: 1rem 1.15rem;
}

#div_hotels_header_search form {
   display: flex;
   flex-direction: column;
   gap: 0.48rem;
   height: 100%;
}

.hotel-search-heading {
   margin: 0 0 0.85rem;
}

.hotel-search-heading h2 {
   background: transparent;
   border: 0;
   box-shadow: none;
   color: #12324d;
   font-size: var(--font-size-lg);
   font-weight: 800;
   letter-spacing: 0.055em;
   line-height: 1.15;
   margin: 0;
   padding: 0 0 0.5rem;
   text-transform: uppercase;
}

.hotel-search-heading h2::after {
   background: var(--site-accent-color);
   border-radius: 999px;
   bottom: 0;
   content: "";
   height: 3px;
   left: 0;
   position: absolute;
   width: 2.2rem;
}

#search_hotel_table {
   display: grid;
   gap: 0.34rem;
   width: 100%;
}

.search-hotel-field {
   align-items: center;
   display: grid;
   gap: 0.55rem;
   grid-template-columns: 7.1rem minmax(0, 1fr);
}

#search_hotel_table .td_label {
   color: #12324d;
   font-size: var(--font-size-sm);
   font-weight: 700;
   padding-right: 0;
   text-align: left;
   white-space: nowrap;
   width: auto;
}

#search_hotel_table .td_value {
   align-items: center;
   display: flex;
   gap: 0.35rem;
   min-width: 0;
}

#destination,
#search_hotel_table select {
   background: #f8fbfe;
   border: 1px solid rgba(17, 55, 90, 0.2);
   border-radius: var(--site-radius-sm);
   box-sizing: border-box;
   color: #102a43;
   font-family: inherit;
   font-size: var(--font-size-sm);
   min-height: 1.9rem;
}

#destination {
   min-height: 2.15rem;
   padding: 0.25rem 0.45rem;
   width: 100%;
}

#search_hotel_table .day {
   flex: 0 0 3.75rem;
}

#search_hotel_table .month {
   flex: 1 1 auto;
   min-width: 5.4rem;
}

#search_hotel_table .checkin .day,
#search_hotel_table .checkin .month,
#search_hotel_table .checkout .day,
#search_hotel_table .checkout .month {
   display: none;
}

#search_hotel_table .booking-date-display {
   background: #f8fbfe;
   border: 1px solid rgba(17, 55, 90, 0.2);
   border-radius: var(--site-radius-sm);
   box-shadow: none;
   box-sizing: border-box;
   color: #102a43;
   cursor: pointer;
   flex: 0 0 9.9rem;
   font-family: inherit;
   font-size: var(--font-size-sm);
   line-height: 1.25;
   min-height: 2.15rem;
   min-width: 9.9rem;
   padding: 0.32rem 0.45rem;
   text-align: center;
   white-space: nowrap;
   width: 9.9rem;
}

#search_hotel_table .booking-date-display:hover,
#destination:hover,
#destination:focus,
#search_hotel_table .booking-date-display:focus {
   border-color: var(--site-link-color);
   box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.14);
   outline: 0;
}

#search_hotel_table .ui-datepicker-trigger,
#search_hotel_table img {
   align-self: center;
   flex: 0 0 auto;
   height: auto;
   max-height: none;
   max-width: none;
   width: auto;
}

#div_date_undefined {
   align-items: center;
   display: flex;
   gap: 0.35rem;
   line-height: 1.25;
   margin-left: calc(7.1rem + 0.55rem);
   margin-top: 0.18rem;
}

#div_date_undefined label {
   font-size: var(--font-size-sm);
}

#div_hotels_header_search button[type='submit'] {
   align-items: center;
   background: linear-gradient(180deg, #0b71d9, #0757ad);
   border: 0;
   border-radius: var(--site-radius-sm);
   box-shadow: 0 5px 14px rgba(31, 41, 51, 0.22);
   color: #fff;
   display: flex;
   font-size: var(--font-size-sm);
   font-weight: 700;
   justify-content: center;
   letter-spacing: 0.08em;
   align-self: center;
   margin: auto 0.5rem 1rem;
   min-height: 2.45rem;
   padding: 0.56rem 0.75rem;
   text-align: center;
   text-transform: uppercase;
   width: calc(100% - 1rem);
}

#div_hotels_header_search button[type='submit']:hover,
#div_hotels_header_search button[type='submit']:focus {
   background: linear-gradient(180deg, #0d82f4, #0757ad);
}

.ui-datepicker {
   background: #fff;
   border: 1px solid #d4e0eb;
   border-radius: var(--site-radius-md);
   box-shadow: 0 16px 36px rgba(31, 41, 51, 0.16);
   color: #102a43;
   font-family: var(--site-font-family);
   padding: 0.7rem;
   z-index: 10000 !important;
}

.ui-datepicker .ui-datepicker-header {
   background: transparent;
   border: 0;
   color: #12324d;
   font-weight: 700;
   padding: 0 0 0.4rem;
   position: relative;
}

.ui-datepicker .ui-datepicker-title {
   font-size: var(--font-size-sm);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.03em;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
   background: var(--site-soft-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-sm);
   cursor: pointer;
   height: 1.9rem;
   top: -0.15rem;
   transition: background-color 140ms ease, border-color 140ms ease;
   width: 1.9rem;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
   background: var(--site-accent-tint);
   border-color: var(--brand-accent);
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
   margin: -8px 0 0 -8px ;
}

.ui-datepicker .ui-datepicker-group {
   padding: 0 0.5rem;
}

.ui-datepicker th {
   color: #5f6c7b;
   font-size: var(--font-size-xs);
   font-weight: 700;
   padding: 0.35rem 0.2rem;
   text-transform: uppercase;
}

.ui-datepicker td {
   padding: 1px;
}

.ui-datepicker td a,
.ui-datepicker td span {
   border: 1px solid transparent;
   border-radius: var(--site-radius-sm);
   color: #12324d;
   font-size: var(--font-size-sm);
   padding: 0.35rem 0;
   text-align: center;
   transition: background-color 140ms ease, color 140ms ease;
}

.ui-datepicker td a.ui-state-hover,
.ui-datepicker td a:hover {
   background: var(--site-accent-tint);
   border-color: var(--brand-accent);
   color: #083b66;
}

.ui-datepicker td a.ui-state-active {
   background: var(--site-accent-color);
   border-color: var(--site-accent-color);
   color: #fff;
   font-weight: 700;
}

.hotel-header-cards {
   align-self: stretch;
   display: grid;
   gap: var(--site-space-md);
   grid-column: span 3;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   min-height: var(--hotels-header-height);
   margin: 0;
}

.hotel-header-card {
   background: #fff;
   border: 1px solid rgba(255, 255, 255, 0.95);
   box-shadow: 0 8px 22px rgba(31, 41, 51, 0.18);
   height: auto;
   min-width: 0;
   margin: 0;
   padding: 0;
   overflow: hidden;
   position: relative;
   transition: box-shadow 180ms ease, transform 180ms ease;
}

.hotel-header-card a {
   color: #fff;
   display: block;
   height: 100%;
   line-height: 1.22;
   position: relative;
   text-decoration: none;
}

.hotel-header-card img {
   display: block;
   height: 100%;
   object-fit: cover;
   transition: filter 260ms ease;
   width: 100%;
}

.hotel-header-card__caption {
   background: linear-gradient(0deg, rgba(7, 20, 33, 0.9), rgba(7, 20, 33, 0.08));
   bottom: 0;
   box-sizing: border-box;
   color: #fff;
   display: block;
   font-size: 1rem;
   left: 0;
   padding: 2rem 0.9rem 0.75rem;
   position: absolute;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
   transition: background 180ms ease;
   width: 100%;
}

.hotel-header-card:hover,
.hotel-header-card:focus-within {
   box-shadow: 0 12px 28px rgba(31, 41, 51, 0.25);
   transform: translateY(-2px);
}

.hotel-header-card:hover img,
.hotel-header-card:focus-within img {
   filter: saturate(1.08) contrast(1.04);
}

.hotel-header-card:hover .hotel-header-card__caption,
.hotel-header-card:focus-within .hotel-header-card__caption {
   background: linear-gradient(0deg, rgba(7, 20, 33, 0.96), rgba(7, 20, 33, 0.18));
}

.hotel-header-card__place,
.hotel-header-card__name {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.hotel-header-card__place {
   font-weight: 700;
}

.hotel_row::after,
.trip_group::after,
.div_news_trip::after,
.div_news_site::after {
   clear: both;
   content: "";
   display: table;
}

.trip_pic,
.trip_img,
.news_pic,
.search_pic,
.trip_group_pic,
.main_pic {
   border-radius: var(--site-radius-sm);
}

.search_pic,
.trip_pic,
.trip_img {
   box-shadow: 0 4px 14px rgba(31, 41, 51, 0.18);
}

#panoramic_pics {
   background: transparent;
   border: 1px solid rgba(213, 225, 236, 0.9);
   box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
   line-height: 0;
   overflow: hidden;
   position: relative;
}

#panoramic_pics::after {
   background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 32%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.10), transparent 18%, transparent 82%, rgba(15, 23, 42, 0.08));
   content: '';
   inset: 0;
   opacity: 0.75;
   pointer-events: none;
   position: absolute;
   transition: opacity 180ms ease;
   z-index: 2;
}

#panoramic_pics > div,
#panoramic_pics > div > a {
   display: block;
   line-height: 0;
}

#panoramic_pics > div > a {
   height: 100%;
   position: relative;
}

.panoramic_size_reference {
   display: block;
   line-height: 0;
}

.panoramic_pics_img {
   border-radius: 0;
   box-shadow: none;
   display: block;
   filter: saturate(1.02) contrast(1.02);
   height: 100%;
   object-fit: cover;
   transition: filter 220ms ease;
   width: 100%;
}

.panoramic-pics-caption {
   background: linear-gradient(0deg, rgba(7, 20, 33, 0.9), rgba(7, 20, 33, 0.08));
   bottom: 0;
   box-sizing: border-box;
   color: #fff;
   font-size: 1rem;
   left: 0;
   line-height: 1.3;
   padding: 2rem 0.9rem 0.75rem;
   position: absolute;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
   width: 100%;
   z-index: 3;
}

.panoramic-pics-caption__place,
.panoramic-pics-caption__name {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.panoramic-pics-caption__place {
   font-weight: 700;
}

.panoramic-pics-caption__name {
   margin-top: 0.15rem;
}

#panoramic_pics:hover::after {
   opacity: 0.45;
}

#panoramic_pics:hover .panoramic_pics_img {
   filter: saturate(1.08) contrast(1.04);
}

@media (max-width: 735px) {
   #panoramic_pics {
      display: none;
   }
}

.static-map-photo-marker {
   background: transparent;
   border: 0;
   overflow: visible;
   transition: z-index 160ms ease;
}

.static-map-photo-marker__link {
   display: block;
   line-height: 0;
   transition: transform 160ms ease;
}

.static-map-photo-marker__image {
   max-height: 100% !important;
   max-width: 100% !important;
}

.static-map-photo-marker img {
   background: #fff;
   border: 1px solid #fff;
   border-radius: var(--site-radius-sm);
   box-shadow: 0 2px 8px rgba(31, 41, 51, 0.35);
   display: block;
   height: 100%;
   object-fit: cover;
   width: 100%;
}

.static-map-photo-marker--best img {
   border-color: #ffd35a;
}

.static-map-photo-marker:hover {
   z-index: 1200 !important;
}

.static-map-photo-marker:hover .static-map-photo-marker__link {
   transform: scale(var(--static-map-marker-hover-scale, 2.1));
   transform-origin: center center;
}

.static-map-photo-marker:hover .static-map-photo-marker__link img {
   border-width: calc(1px / var(--static-map-marker-hover-scale, 2.1));
}

.static-map-photo-marker--hotel:hover .static-map-photo-marker__link {
   transform: scale(1.8);
}

.static-map-photo-marker__link--hotel {
   cursor: pointer;
}

.static-map-photo-marker__link--current {
   cursor: default;
}

.static-map-hotel-popup-container .leaflet-popup-content-wrapper {
   border-radius: var(--site-radius-sm);
   box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
   overflow: hidden;
   padding: 0;
}

.static-map-hotel-popup-container .leaflet-popup-content {
   margin: 0;
   width: 390px !important;
}

.static-map-hotel-popup-container .leaflet-popup-tip {
   box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.static-map-hotel-popup {
   align-items: center;
   background: #fff;
   color: var(--site-text-color);
   display: grid;
   gap: 0.65rem;
   grid-template-columns: 170px minmax(0, 1fr);
   padding: 0.65rem;
   text-decoration: none;
}

.static-map-hotel-popup:hover {
   color: var(--site-text-color);
   text-decoration: none;
}

.static-map-hotel-popup__image {
   border-radius: var(--site-radius-sm);
   display: block;
   height: 118px;
   max-height: 118px !important;
   max-width: 170px !important;
   object-fit: cover;
   width: 170px;
}

.static-map-hotel-popup__content {
   display: grid;
   gap: 0.32rem;
   min-width: 0;
}

.static-map-hotel-popup__name {
   color: #102a43;
   display: -webkit-box;
   font-size: 1rem;
   line-height: 1.18;
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
}

.static-map-hotel-popup__city {
   color: var(--site-muted-text-color);
   font-size: var(--font-size-sm);
   line-height: 1.2;
}

.leaflet-control-attribution {
   background: rgba(255, 255, 255, 0.82) !important;
   color: rgba(31, 41, 51, 0.72) !important;
   font-size: 0.72rem !important;
   line-height: 1.25 !important;
   padding: 1px 4px !important;
}

.leaflet-control-attribution a {
   color: rgba(15, 76, 129, 0.78) !important;
   text-decoration: none;
}

.leaflet-popup-content,
.leaflet-tooltip {
   font-size: var(--font-size-sm);
   line-height: 1.4;
}

#div_autocomplete,
#div_autocomplete ul li p,
#map_info,
.nearby_sights_note,
#settlements,
.trip_menu_childs_ul,
#div_hotel_regions,
#div_main_results .i6,
#div_main_results .i7,
#div_main_results .i8,
#p_review_remark {
   font-size: var(--font-size-sm);
   line-height: 1.45;
}

#footer_copyright {
   font-size: var(--font-size-sm);
   line-height: 1.45;
}

/* Secondary page nav (about_us_main_menu.php) shown on sitemap/about/contact/
   advertising/terms/news pages - used to be float:left uppercase 8pt links
   with a hard PHP-variable gradient pill for the active item and a yellow
   hover color, with zero relation to the rest of the design system. */
#about_us_main_menu {
   background: var(--site-soft-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-md);
   margin: var(--site-space-lg) 0;
   padding: var(--site-space-md);
   text-align: left;
}

#about_us_main_menu ul {
   display: flex;
   flex-wrap: wrap;
   font-size: var(--font-size-sm);
   gap: var(--site-space-sm);
   list-style: none;
   margin: 0;
   padding: 0;
   position: static;
   z-index: auto;
}

#about_us_main_menu ul li {
   color: var(--site-text-color);
   float: none;
   padding: 0;
   text-transform: none;
}

#about_us_main_menu a {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-sm);
   color: var(--site-text-color);
   display: block;
   font-weight: 600;
   padding: 0.5rem 0.9rem;
   text-decoration: none;
   transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

#about_us_main_menu a:hover {
   background: var(--site-soft-surface-color);
   border-color: var(--brand-accent);
   color: var(--site-text-color);
}

#about_us_main_menu li:hover {
   background: transparent;
   color: inherit;
   cursor: pointer;
}

#about_us_main_menu li.active a,
#about_us_main_menu li.active span a {
   background: var(--brand-accent);
   border-color: var(--brand-accent);
   color: #fff;
}

.img_map_viewer {
   background: #fff;
   border-radius: var(--site-radius-sm);
   box-shadow: 0 2px 8px rgba(31, 41, 51, 0.28);
   display: block;
   line-height: 0;
   object-fit: cover;
}

.img_map_viewer_best {
   box-shadow: 0 3px 12px rgba(31, 41, 51, 0.38);
}

a > .img_map_viewer {
   display: block;
}

.search_pic_div {
   padding: var(--site-space-sm);
   transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#div_index_pics {
   align-items: start;
   display: grid;
   gap: var(--site-space-md);
   grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
   margin-top: var(--site-space-md);
}

#div_index_pics > h2,
#div_index_pics > h3,
#div_index_pics > .clear_left,
#div_index_pics > .clear_both,
#div_index_pics > .clear_both_bottom {
   grid-column: 1 / -1;
}

#div_index_pics .search_pic_div,
#div_photos .search_pic_div {
   background: transparent;
   border: 0;
   border-radius: var(--site-radius-md);
   float: none;
   margin: 0;
   min-width: 0;
   overflow: hidden;
   position: relative;
   width: auto;
}

#div_index_pics .search_pic_div:hover {
   float: none;
   margin: 0;
   width: auto;
}

#div_index_pics .search_pic,
#div_photos .search_pic {
   background: transparent !important;
   border: 0;
   border-radius: var(--site-radius-sm) !important;
   box-shadow: none;
   display: block;
   height: auto;
   margin: 0 auto;
   max-height: 120px;
   max-width: 100%;
   object-fit: contain;
   padding: 0;
   transition: none;
   width: auto;
}

#div_index_pics .search_pic_div > a:first-child,
#div_photos .search_pic_div > a:first-child {
   border-radius: var(--site-radius-sm);
   display: block;
   line-height: 0;
   margin-bottom: var(--site-space-sm);
   overflow: visible;
   text-align: center;
}

#div_index_pics .search_pic_portrait {
   background: transparent !important;
   object-fit: contain;
}

#div_photos .search_pic_portrait {
   background: transparent !important;
   object-fit: contain;
}

#div_index_pics .search_pic_id {
   background: rgba(22, 32, 42, 0.86);
   border-radius: 999px;
   box-shadow: 0 2px 8px rgba(31, 41, 51, 0.16);
   color: #fff;
   font-size: 0.68rem;
   left: 50%;
   line-height: 1.2;
   max-width: calc(100% - 16px);
   padding: 4px 8px;
   top: 8px;
   transform: translateX(-50%);
   width: auto;
   z-index: 2;
}

#div_index_pics .search_pic_id p {
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

#div_index_pics .search_description,
#div_index_pics .search_description2,
#div_index_pics .search_description3,
#div_index_pics .search_description_neutral,
#div_photos .search_description,
#div_photos .search_description2,
#div_photos .search_description3,
#div_photos .search_description_neutral {
   box-sizing: border-box;
   font-size: var(--font-size-xs);
   line-height: 1.28;
   margin: 0;
   min-height: 2.9em;
   overflow: hidden;
   padding: 0 0.2rem;
   text-overflow: ellipsis;
}

#div_index_pics .search_description p,
#div_index_pics .search_description_header,
#div_photos .search_description p,
#div_photos .search_description_header {
   display: -webkit-box;
   line-height: 1.28;
   margin: 0;
   max-height: 2.7em;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
}

#div_index_pics .search_description a,
#div_index_pics .search_description_header a,
#div_photos .search_description a,
#div_photos .search_description_header a {
   display: inline;
}

#div_index_pics .search_description_fixed_short,
#div_photos .search_description_fixed_short {
   height: auto;
}

#div_index_pics .search_description2,
#div_index_pics .search_description3 {
   color: var(--site-muted-text-color);
}

.search_pic_div:hover {
   background-color: #eef4f9;
   box-shadow: 0 4px 14px rgba(31, 41, 51, 0.08);
   transform: translateY(-1px);
}

#map_text {
   color: var(--site-text-color);
   font-family: var(--site-font-family);
   font-size: clamp(1.12rem, 0.98rem + 0.45vw, 1.28rem);
   line-height: 1.5;
   margin: 0 0 var(--site-space-md);
}

/* Taller aspect ratio than the legacy 16:9 (CSS/default.php) so the
   photo-declutter algorithm has more real vertical pixels to spread
   markers into without shrinking them - lets more photos stay visible
   at the same marker size instead of trading size for count. */
.page-trip-map #big_google_map_div {
   padding-bottom: 75%;
}

#div_best_trips {
   margin-top: var(--site-space-lg);
}

.best-trips-grid {
   display: flex;
   flex-direction: column;
   gap: var(--site-space-md);
   margin-top: var(--site-space-sm);
}

.best-trip-card {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-sm);
   display: flex;
   gap: var(--site-space-sm);
   overflow: hidden;
   padding: var(--site-space-sm);
   transition: box-shadow 160ms ease, transform 160ms ease;
}

.best-trip-card:hover {
   box-shadow: 0 4px 14px rgba(31, 41, 51, 0.1);
   transform: translateY(-1px);
}

.best-trip-card__image-link {
   flex: 0 0 auto;
   line-height: 0;
}

.best-trip-card__image {
   border-radius: var(--site-radius-sm);
   display: block;
   height: 84px;
   object-fit: cover;
   width: 110px;
}

.best-trip-card__body {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
   min-width: 0;
}

.best-trip-card__title {
   font-size: clamp(1.12rem, 0.98rem + 0.45vw, 1.28rem);
   font-weight: 700;
   line-height: 1.25;
   margin: 0;
}

.best-trip-card__title a {
   color: var(--brand-heading);
   text-decoration: none;
}

.best-trip-card__description {
   color: var(--site-muted-text-color);
   display: -webkit-box;
   font-size: clamp(1.12rem, 0.98rem + 0.45vw, 1.28rem);
   line-height: 1.35;
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
}

.div_news_title {
   font-weight: 700;
}

.div_news_date,
.div_news_pic,
.div_news_title,
.div_news_description,
.div_news_description_pics {
   float: none;
   margin-left: 0;
   width: auto;
}

.div_news_pic {
   line-height: 1;
}

.div_news_description,
.div_news_description_pics {
   height: auto;
   max-height: none;
   overflow: visible;
}

.div_news_description .description {
   height: auto;
   min-height: 0;
   overflow: visible;
   padding-right: var(--site-space-md);
}

.top-sight-items {
   display: grid;
   gap: var(--site-space-sm);
   grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.top-sight-card {
   align-items: center;
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-md);
   display: grid;
   gap: var(--site-space-sm);
   grid-template-columns: 86px minmax(0, 1fr);
   padding: var(--site-space-sm);
   transition: box-shadow 160ms ease, transform 160ms ease;
}

.top-sight-card:hover {
   box-shadow: 0 4px 14px rgba(31, 41, 51, 0.1);
   transform: translateY(-1px);
}

.top-sight-card__image {
   display: block;
   overflow: hidden;
   border-radius: var(--site-radius-sm);
}

.top-sight-card .trip_pic {
   box-shadow: none;
   display: block;
   height: 64px;
   object-fit: cover;
   padding: 0;
   width: 86px;
}

.top-sight-card__title {
   font-size: var(--font-size-sm);
   margin: 0;
}

.page-search-results h2 {
   background: none;
   border-bottom: 2px solid var(--site-accent-color);
   border-left: 5px solid var(--site-accent-color);
   color: var(--brand-heading);
   font-size: var(--font-size-xl);
   margin: var(--site-space-lg) 0 var(--site-space-sm);
   padding-bottom: var(--site-space-xs);
   padding-left: 0.6rem;
}

.page-search-results h2:first-child {
   margin-top: 0;
}

.page-search-results h3 {
   border-left: 3px solid var(--site-accent-color);
   color: var(--site-text-color);
   font-size: var(--font-size-lg);
   font-weight: 700;
   margin: var(--site-space-md) 0 var(--site-space-xs) 0.6rem;
   padding-left: 0.9rem;
   text-transform: none;
   transition: background-color 160ms ease, transform 160ms ease;
}

.page-search-results h3:hover,
.page-search-results h3:focus-within {
   background: #f4f9fe;
   transform: translateX(3px);
}

.page-search-results h2 a,
.page-search-results h3 a,
.page-search-results #div_main_results .i a,
.page-search-results #div_main_results .i4 a,
.page-search-results #div_main_results .i5 a,
.page-search-results #div_main_results .i6 a,
.page-search-results #div_main_results .i7 a,
.page-search-results #div_main_results .i8 a {
   text-decoration: none;
}

.page-about-us #about_us_div,
.page-about-us-contact #about_us_contact,
.page-about-us-advertising #about_us_advertising,
.page-terms-of-use #terms_of_use,
.page-privacy-policy #privacy_policy_cookies,
.page-sell-photos #sell_photos,
.page-reports-stats #reports_stats {
   font-size: clamp(1.12rem, 0.98rem + 0.45vw, 1.28rem);
   line-height: 1.65;
   margin: var(--site-space-lg) 0;
   overflow-wrap: anywhere;
   padding: var(--site-space-md) 0 0;
}

.page-about-us #about_us_div p,
.page-about-us-contact #about_us_contact p,
.page-about-us-advertising #about_us_advertising p,
.page-terms-of-use #terms_of_use p,
.page-privacy-policy #privacy_policy_cookies p {
   margin: 0 0 var(--site-space-md);
}

/* Override legacy CSS/default.php rules (#sell_photos p/div { font-size: 14px })
   which directly target these tags and so beat the inherited clamp() above -
   an inherited value always loses to any rule matching the element itself,
   regardless of the ancestor rule's specificity. */
.page-sell-photos #sell_photos p,
.page-sell-photos #sell_photos div {
   font-size: clamp(1.12rem, 0.98rem + 0.45vw, 1.28rem);
}

.page-privacy-policy #table_cookie {
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-sm);
   display: block;
   font-size: var(--font-size-sm);
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
}

.page-privacy-policy #table_cookie th {
   background-color: var(--site-soft-surface-color);
   color: var(--site-text-color);
   white-space: nowrap;
}

.page-privacy-policy #table_cookie td {
   border-top: 1px solid var(--site-border-color);
}

.page-about-us blockquote {
   border-left: 4px solid var(--site-accent-color);
   color: var(--site-muted-text-color);
   margin: var(--site-space-md) 0;
   padding: var(--site-space-sm) var(--site-space-md);
}

.page-about-us #pic_div_wide_left,
.page-about-us #pic_div_wide_right {
   padding-bottom: 0;
}

.page-about-us .pic {
   border-radius: var(--site-radius-md);
   display: block;
   margin-bottom: var(--site-space-sm);
   padding-bottom: 0;
   width: 100%;
}

.page-about-us #about_us_div ul {
   margin: var(--site-space-md) 0 0;
}

.page-about-us #about_us_div li {
   line-height: 1.8;
}

.page-about-us #inner_div_ladybugs_links {
   box-sizing: border-box;
   float: left;
   padding-right: var(--site-space-lg);
   width: 60%;
}

.page-about-us #inner_div_testimonial {
   box-sizing: border-box;
   float: right;
   font-style: italic;
   margin-top: 0;
   width: 40%;
}

@media (max-width: 735px) {
   .page-about-us #pic_div_wide_left,
   .page-about-us #pic_div_wide_right {
      display: none;
   }

   .page-about-us #inner_div_ladybugs_links,
   .page-about-us #inner_div_testimonial {
      float: none;
      padding-right: 0;
      width: 100%;
   }
}

.page-webcam h3 {
   clear: both;
}

.page-webcam .div_cam {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-md);
   box-shadow: var(--site-card-shadow);
   box-sizing: border-box;
   float: left;
   font-size: var(--font-size-sm);
   margin: 0 var(--site-space-md) var(--site-space-md) 0;
   padding: var(--site-space-sm);
   width: 320px;
}

.page-webcam .div_cam img,
.page-webcam .div_cam .cam {
   border-radius: var(--site-radius-sm);
   display: block;
   width: 100%;
}

.page-webcam .div_cam_description {
   color: var(--site-muted-text-color);
   font-size: var(--font-size-sm);
   margin: var(--site-space-sm) 0 0;
}

@media (max-width: 735px) {
   .page-webcam .div_cam {
      float: none;
      margin-right: 0;
      width: 100%;
   }
}

.page-about-us-contact #social p {
   align-items: center;
   display: flex;
   gap: var(--site-space-sm);
   overflow-wrap: anywhere;
}

.page-about-us-contact #social img {
   flex: 0 0 auto;
}

.page-about-us-advertising h1 + p {
   font-size: clamp(1.12rem, 0.98rem + 0.45vw, 1.28rem);
}

.page-about-us-advertising #about_us_advertising {
   display: grid;
   gap: var(--site-space-lg);
   grid-template-columns: minmax(0, 1fr) auto;
}

.page-about-us-advertising #ads_left,
.page-about-us-advertising #ads_right {
   float: none;
}

.page-about-us-advertising #ads_right img,
.page-terms-of-use #pic_links img {
   border-radius: var(--site-radius-md);
   box-shadow: 0 4px 16px rgba(31, 41, 51, 0.08);
   max-width: 100%;
}

.page-about-us-advertising .ad_price {
   background: #edf7ed;
   border-radius: var(--site-radius-sm);
   color: #27632a;
   display: block;
   font-weight: 700;
   margin: 0 0 var(--site-space-sm);
   padding: 0.2rem 0.55rem;
   width: fit-content;
}

.page-links .links_list,
.page-links .links_list_compact {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   list-style: none;
   margin: 0 0 var(--site-space-md);
   padding: var(--site-space-sm) var(--site-space-lg);
}

.page-links .links_item {
   border-bottom: 1px solid var(--site-border-color);
   line-height: 1.5;
   padding: var(--site-space-sm) 0;
}

.page-links .links_item:last-child {
   border-bottom: 0;
}

.page-links .partner_logo {
   border-radius: var(--site-radius-sm);
   display: block;
   margin: var(--site-space-sm) 0 var(--site-space-md);
   max-width: 100%;
   width: 200px;
}

.page-sitemap #sitemap_ul {
   font-size: clamp(1.12rem, 0.98rem + 0.45vw, 1.28rem);
   list-style: none;
   margin: var(--site-space-md) 0;
   padding: 0;
}

.page-sitemap .sitemap_item {
   border-bottom: 1px solid var(--site-border-color);
   line-height: 1.5;
   margin: 0;
   padding: var(--site-space-sm) 0;
}

.page-sitemap .sitemap_item:last-child {
   border-bottom: 0;
}

.page-terms-of-use #pic_links {
   display: grid;
   gap: var(--site-space-lg);
   grid-template-columns: repeat(2, minmax(0, 1fr));
   margin: var(--site-space-lg) 0;
}

.page-terms-of-use .terms_example_col {
   background: #f8fafc;
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-md);
   padding: var(--site-space-md);
}

.trip_div,
.trip_div_best {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-md);
   box-shadow: 0 4px 16px rgba(31, 41, 51, 0.06);
   display: grid;
   gap: var(--site-space-md);
   grid-template-columns: auto 155px minmax(0, 1fr) auto;
   margin-bottom: var(--site-space-md);
   padding: var(--site-space-md);
}

.trip_div .div_trip_id,
.trip_div_best .div_trip_id,
.trip_div .div_trip_img,
.trip_div_best .div_trip_img,
.trip_div .div_trip_data,
.trip_div_best .div_trip_data {
   float: none;
   margin: 0;
   padding: 0;
}

.trip_div .div_trip_id,
.trip_div_best .div_trip_id {
   color: var(--site-muted-text-color);
   font-weight: 700;
   padding-top: var(--site-space-sm);
   width: auto;
}

.trip_div .div_trip_img,
.trip_div_best .div_trip_img {
   width: auto;
}

.trip_div .trip_img,
.trip_div_best .trip_img {
   display: block;
   height: 90px !important;
   object-fit: cover;
   width: 145px;
}

.trip_div .div_trip_title,
.trip_div_best .div_trip_title {
   min-width: 0;
}

.trip_div .div_trip_title h3,
.trip_div_best .div_trip_title h3 {
   font-size: var(--font-size-md);
   margin-bottom: var(--site-space-sm);
}

.trip_div .paragraph_trip_review,
.trip_div_best .paragraph_trip_review {
   color: var(--site-text-color);
   display: -webkit-box;
   font-family: var(--site-font-family);
   font-size: var(--font-size-sm);
   line-height: 1.5;
   overflow: hidden;
   padding: 0;
   text-align: left;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
}

.trip_div .paragraph_trip_review img,
.trip_div_best .paragraph_trip_review img {
   margin-left: 0.35rem;
   opacity: 0.6;
   vertical-align: middle;
}

.trip_div .div_trip_data,
.trip_div_best .div_trip_data {
   align-self: start;
   color: var(--site-muted-text-color);
   text-align: right;
}

#div_header {
   background:
      radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 32%),
      linear-gradient(135deg, var(--brand-header-from) 0%, var(--brand-header-to) 100%);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

#div_header_content {
   align-items: center;
   display: grid;
   gap: 0.55rem var(--site-space-lg);
   grid-template-columns: max-content minmax(18rem, 25rem);
   justify-content: space-between;
   margin: 0 auto;
   max-width: 1320px;
   padding: 0.85rem 0;
   width: 92%;
}

#div_titles {
   float: none;
   grid-column: 1;
   grid-row: 1 / span 2;
   min-width: 0;
   width: auto;
}

#div_options,
.site-header__options {
   align-items: flex-end;
   display: flex;
   flex-direction: column;
   float: none;
   gap: 0.6rem;
   grid-column: 2;
   grid-row: 1;
   justify-content: flex-start;
   margin: 0;
   width: auto;
}

#div_search,
.site-header__search {
   float: none;
   grid-column: 2;
   grid-row: 2;
   justify-self: end;
   margin: 0;
   position: relative;
   text-align: right;
   width: min(25rem, 100%);
}

#div_top_title {
   left: auto;
   position: relative;
}

#header_title {
   align-items: center;
   color: #fff;
   display: inline-flex;
   font-family: var(--site-font-family);
   font-size: clamp(2.15rem, 3.7vw, 2.9rem);
   font-weight: 800;
   letter-spacing: 0.025em;
   line-height: 1.05;
   padding-bottom: 0;
   text-shadow: 0 2px 12px rgba(0, 26, 71, 0.22);
   white-space: nowrap;
}

#header_title:hover {
   color: #fff;
   text-decoration: none;
}

.logo_symbol {
   flex: 0 0 auto;
   margin-right: 0.75rem;
   vertical-align: middle;
}

#div_subtitle {
   color: rgba(255, 255, 255, 0.85);
   font-family: var(--site-font-family);
   font-size: clamp(0.98rem, 1.6vw, 1.16rem);
   font-weight: 500;
   letter-spacing: 0.02em;
   margin-top: 0.7rem;
   padding-bottom: 0;
}

#div_subtitle a {
   color: inherit;
   text-decoration: none;
}

#div_subtitle a:hover {
   color: #fff;
}

#div_search form,
.site-header-search-form {
   align-items: stretch;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.24);
   border-radius: var(--site-radius-md);
   box-shadow: none;
   box-sizing: border-box;
   display: grid;
   gap: 0.4rem;
   grid-template-columns: minmax(12rem, 1fr) auto;
   justify-content: stretch;
   padding: 0.22rem;
   width: 100%;
}

#div_search form {
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.2);
}

#div_fb_rss,
.site-header__social {
   align-items: center;
   display: flex;
   gap: 0.6rem;
   justify-content: flex-end;
   margin: 0;
   padding: 0;
   text-align: right;
}

#div_fb_rss a,
.site-header__social-link {
   align-items: center;
   background: transparent;
   border: 0;
   box-shadow: none;
   display: inline-flex;
   height: 32px;
   justify-content: center;
   opacity: 0.8;
   padding-left: 0;
   transition: opacity 160ms ease, transform 160ms ease;
   width: 32px;
}

#div_fb_rss a:hover,
.site-header__social-link:hover {
   opacity: 1;
   transform: translateY(-1px);
}

#div_fb_rss img,
.site-header__social-link img {
   display: block;
   flex: 0 0 auto;
   max-width: none;
}

#div_flags,
.site-header__flags {
   display: flex;
   gap: 0.5rem;
   justify-content: flex-end;
   margin: 0;
   order: 2;
   padding: 0;
   text-align: right;
}

#div_flags a,
.site-header__flags a {
   align-items: center;
   background: transparent;
   border: 0;
   display: inline-flex;
   line-height: 0;
   opacity: 0.86;
   padding: 0.08rem;
   transition: opacity 160ms ease, transform 160ms ease;
}

#div_flags a:hover,
.site-header__flags a:hover {
   opacity: 1;
   transform: translateY(-1px);
}

.lang_flag {
   border: 0;
   display: block;
   margin: 0;
}

#div_fb_rss,
.site-header__social {
   order: 1;
}

#text_search_field {
   background: rgba(255, 255, 255, 0.97);
   border: 1px solid rgba(255, 255, 255, 0.7);
   border-radius: var(--site-radius-sm);
   box-shadow: none;
   box-sizing: border-box;
   font-size: 1rem;
   min-height: 2.35rem;
   min-width: 0;
   padding: 0.45rem 0.75rem;
   width: 100%;
}

#text_search_field:focus {
   border-color: #ffffff;
   box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
   outline: none;
}

#div_search input[type="image"].search {
   display: none;
}

.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;
}

#div_search .site-header-search-button {
   align-items: center;
   background: #ffffff;
   border: 0;
   border-radius: var(--site-radius-sm);
   box-shadow: none;
   color: var(--brand-accent-strong);
   cursor: pointer;
   display: inline-flex;
   flex: 0 0 auto;
   height: auto;
   justify-content: center;
   min-height: 0;
   min-width: 2.75rem;
   padding: 0 0.7rem;
   transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
   width: auto;
}

#div_search .site-header-search-button:hover,
#div_search .site-header-search-button:focus {
   background: color-mix(in srgb, var(--brand-accent) 12%, #ffffff);
   box-shadow: none;
   outline: 0;
   transform: translateY(-1px);
}

#div_search .site-header-search-button__icon {
   display: block;
}

.site-header-search-input {
   min-width: 0;
}

#div_autocomplete {
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-md);
   box-shadow: var(--site-soft-shadow);
   margin-top: var(--site-space-xs);
   overflow: hidden;
}

#div_autocomplete a {
   color: var(--site-text-color);
   display: block;
}

#div_autocomplete li {
   border-bottom: 1px solid #edf2f7;
   padding: var(--site-space-xs);
}

#div_autocomplete li:last-child {
   border-bottom: 0;
}

#div_autocomplete ul li p {
   display: block;
   line-height: 40px;
   min-height: 40px;
   overflow: hidden;
   padding-left: 54px;
   text-overflow: ellipsis;
   white-space: nowrap;
}

#div_autocomplete ul li:hover,
#div_autocomplete ul li.selected {
   background-color: #e7f0f7;
}

#div_autocomplete ul li:hover a,
#div_autocomplete ul li.selected a {
   color: var(--site-link-hover-color);
   text-decoration: none;
}

#div_main_trip_data_and_menu {
   background: none;
   margin: 1.2rem 0 0;
   padding-bottom: 0;
}

#div_parents {
   color: #5b7186;
   font-size: var(--font-size-md);
   margin: 1.25rem 0 1rem;
   padding-left: 1.3rem;
}

#div_parents > span {
   align-items: center;
   background: rgba(255, 255, 255, 0.66);
   border: 0;
   border-left: 3px solid rgba(11, 113, 217, 0.34);
   display: inline-flex;
   flex-wrap: wrap;
   gap: 0.35rem 0.5rem;
   line-height: 1.3;
   padding: 0.42rem 0.75rem;
}

#div_parents a {
   color: #0b4f8a;
   flex-shrink: 0;
   font-weight: 650;
   text-decoration: none;
   white-space: nowrap;
}

#div_parents .breadcrumb-separator {
   background: transparent;
   border: 0;
   color: #7a8fa3;
   display: inline;
   flex-shrink: 0;
   font-weight: 700;
   margin: 0 0.1rem;
   padding: 0;
   white-space: nowrap;
}

#div_parents a:hover,
#div_parents a:focus {
   color: var(--site-link-hover-color);
   text-decoration: underline;
}

#div_main_trip_data {
   align-items: center;
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   display: grid;
   gap: 1.4rem;
   grid-template-columns: auto minmax(0, 1fr) auto;
   min-height: 0;
   padding: 1.1rem 1.45rem;
}

#div_main_trip_data > .clear_both {
   display: none;
}

.trip-header-media {
   align-items: center;
   align-self: center;
   display: flex;
   min-width: 0;
   place-self: center start;
}

#main_pic_small {
   align-self: center;
   border: 0;
   border-radius: var(--site-radius-md);
   box-shadow: none;
   display: block;
   float: none;
   height: auto;
   margin: 0;
   padding: 0;
   width: auto;
}

#div_main_trip_title {
   float: none;
   margin: 0;
   min-width: 0;
   text-align: left;
}

.trip_main_title {
   color: #0b4f8a;
   font-size: clamp(2rem, 3.1vw, 2.55rem);
   font-weight: 750;
   letter-spacing: 0.03em;
   line-height: 1.15;
   margin: 0;
   overflow-wrap: anywhere;
   text-shadow: none;
}

#div_trip_subname {
   color: var(--site-muted-text-color);
   font-size: var(--font-size-md);
   line-height: 1.35;
   margin-top: 0.35rem;
}

#google_small_map,
#region_small_map {
   float: none;
   height: 100px;
   margin: 0;
   position: relative;
   width: 260px;
}

.trip-header-map-group {
   align-items: center;
   display: flex;
   gap: var(--site-space-sm);
   justify-content: flex-end;
}

.trip-header-map-group #google_small_map:empty,
.trip-header-map-group #region_small_map:empty {
   display: none;
}

.trip_small_map,
#region_small_map img {
   border-radius: var(--site-radius-md);
   height: 100%;
   overflow: hidden;
   width: 100%;
}

#google_small_map,
#region_small_map {
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-md);
   overflow: hidden;
}

#div_trip_menu_delimiter {
   display: none;
}

.page-trip #div_main_trips {
   align-items: start;
   column-gap: clamp(1.25rem, 2.6vw, 2rem);
   display: grid;
   grid-template-columns: minmax(23rem, 26rem) minmax(0, 1fr);
   row-gap: var(--site-space-lg);
}

.page-trip #main_left_div,
.page-trip #main_right_div {
   background: transparent;
   border-top: 0;
   float: none;
   left: auto;
   margin: 0;
   padding-top: 0;
   position: relative;
   top: auto;
   width: auto;
}

.page-trip #main_left_div {
   align-self: start;
   display: flex;
   flex-direction: column;
   gap: var(--site-space-sm);
   position: relative;
   top: auto;
}

.page-trip #div_index_pics,
.page-trip #div_photos,
.page-trip #div_trip_videos,
.page-trip #div_trail {
   grid-column: 1 / -1;
   justify-self: stretch;
   margin-top: 0;
   text-align: left;
   width: 100%;
}

.page-trip #div_index_pics > h2,
.page-trip #div_photos > h2,
.page-trip #div_trip_videos > h2,
.page-trip #div_trail > h2 {
   margin: var(--site-space-sm) 0 var(--site-space-md);
}

.page-trip #div_trip_videos {
   display: flex;
   flex-wrap: wrap;
   gap: var(--site-space-md);
}

.page-trip #div_trip_videos > h2 {
   flex: 1 0 100%;
}

.page-trip #div_trip_videos iframe {
   border-radius: var(--site-radius-sm);
   max-width: 100%;
}

.page-trip #div_photos {
   display: flex;
   flex-direction: column;
}

.page-trip #div_photos > h2,
.page-trip #div_photos > h3,
.page-trip #div_photos > .clear_left,
.page-trip #div_photos > .clear_both,
.page-trip #div_photos > .clear_both_bottom {
   grid-column: 1 / -1;
}

.page-trip #div_index_pics .search_pic_div {
   overflow: visible;
   text-align: center;
}

.page-trip #trip_menu_div {
   background: #fff;
   border: 1px solid #dbe6ef;
   border-radius: var(--site-radius-lg);
   box-shadow: 0 10px 28px rgba(31, 41, 51, 0.05);
   font-size: var(--font-size-md);
   margin: 0;
   padding: 0;
}

.page-trip #trip_menu_div .trip_menu_title {
   background: linear-gradient(90deg, #edf7ff, #ffffff);
   border-left: 3px solid var(--site-accent-color);
   border-top: 1px solid var(--site-border-color);
   color: #12324d;
   font-size: var(--font-size-md);
   font-weight: 700;
   letter-spacing: 0.06em;
   margin: 0;
   padding: 0.62rem 1rem;
   text-transform: uppercase;
}

.page-trip #trip_menu_div .trip_menu_title:first-child {
   border-top: 0;
}

.page-trip #trip_menu_div .trip-menu-card-list {
   display: grid;
}

.page-trip #trip_menu_div .trip-menu-card {
   align-items: center;
   border-bottom: 1px solid #edf2f7;
   color: #0f3f68;
   cursor: pointer;
   display: grid;
   gap: 0.45rem;
   grid-template-columns: 60px minmax(0, 1fr);
   margin-bottom: 0;
   min-height: 2.8rem;
   padding: 0.38rem 0.78rem;
   transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.page-trip #trip_menu_div .trip-menu-card:last-child {
   border-bottom: 0;
}

.page-trip #trip_menu_div .trip-menu-card:hover,
.page-trip #trip_menu_div .trip-menu-card:focus-within {
   background: #f4f9fe;
   color: #083b66;
   text-decoration: none;
   transform: translateX(2px);
}

.page-trip #trip_menu_div .trip-menu-card__pic {
   min-width: 0;
}

.page-trip #trip_menu_div .trip-menu-card__pic img {
   border: 1px solid #d9e4ee;
   box-shadow: none;
}

.page-trip #trip_menu_div .trip_count {
   background: #0b8f30;
   border-radius: 999px !important;
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
   color: #fff;
   font-size: var(--font-size-2xs);
   line-height: 1;
   min-width: 1.35rem;
   padding: 0.18rem 0.4rem;
   text-align: center;
}

.page-trip #trip_menu_div .trip-menu-card__title {
   font-weight: 500;
   line-height: 1.32;
   min-width: 0;
}

.facebook-page-plugin-container {
   margin: 0;
   padding: 0 var(--site-space-sm);
}

#fb_social_plugin,
.facebook-page-plugin {
   display: block;
   max-width: 100%;
   width: 300px;
}

.page-trip .small_landscape_pic,
.page-trip .small_portrait_pic {
   background: #fff;
   border-radius: var(--site-radius-sm);
   box-shadow: 0 2px 8px rgba(31, 41, 51, 0.12);
   display: block;
   height: 42px;
   margin: 0;
   object-fit: cover;
   width: 58px;
}

.page-trip .small_portrait_pic {
   object-fit: contain;
}

.page-trip .trip_menu_ul,
.page-trip .trip_menu_parents_ul,
.page-trip .trip_menu_childs_ul {
   margin: 0;
   padding: 0;
}

.page-trip #trip_menu_div li {
   border-bottom: 0;
   line-height: 1.5;
   margin-bottom: 0;
}

.page-trip #trip_menu_div li:last-child {
   border-bottom: 0;
}

.page-trip #trip_menu_div li a {
   border-bottom: 1px solid #edf2f7;
   color: #0f3f68;
   display: block;
   font-size: var(--font-size-md);
   min-height: 3.05rem;
   overflow: hidden;
   padding: 0.5rem 0.8rem;
   position: relative;
   text-overflow: ellipsis;
   transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
   white-space: nowrap;
}

.page-trip #trip_menu_div .trip_menu_sight_icon {
   height: auto;
   margin-left: 0.35rem;
   max-height: none;
   vertical-align: -0.28em;
   width: 30px;
}

.page-trip #trip_menu_div .ladybug_inline {
   display: inline-block;
   margin-left: 0.28rem;
   vertical-align: -0.12em;
}

.page-trip #trip_menu_div .ladybug_inline img {
   height: 1.1em;
   max-height: none;
   vertical-align: middle;
   width: 1.1em;
}

.page-trip #trip_menu_div li a.trip_menu_indent_0 {
   padding-left: 0.8rem;
}

.page-trip #trip_menu_div li a.trip_menu_indent_10 {
   padding-left: 1.25rem;
}

.page-trip #trip_menu_div li a.trip_menu_indent_20 {
   padding-left: 1.7rem;
}

.page-trip #trip_menu_div li a.trip_menu_indent_30 {
   padding-left: 2.15rem;
}

.page-trip #trip_menu_div li a.trip_menu_indent_40 {
   padding-left: 2.6rem;
}

.page-trip #trip_menu_div li a.trip_menu_indent_50 {
   padding-left: 3.05rem;
}

.page-trip #trip_menu_div li a.trip_menu_indent_60 {
   padding-left: 3.5rem;
}

.page-trip #trip_menu_div li a.trip_menu_indent_70 {
   padding-left: 3.95rem;
}

.page-trip #trip_menu_div li a.trip_menu_indent_80 {
   padding-left: 4.4rem;
}

.page-trip #trip_menu_div li a:hover,
.page-trip #trip_menu_div li a:focus {
   background: #f4f9fe;
   color: #083b66;
   text-decoration: none;
   transform: translateX(2px);
}

.page-trip #trip_menu_div li.active a {
   background: #eef7ff;
   box-shadow: inset 3px 0 var(--site-accent-color);
   color: #083b66;
   font-weight: 650;
   text-decoration: none;
}

.page-trip #trip_menu_div .trip_menu_parents_ul li a,
.page-trip #trip_menu_div .trip_menu_ul li a,
.page-trip #trip_menu_div .trip_menu_childs_ul li a {
   min-height: 2.55rem;
   padding-bottom: 0.38rem;
   padding-top: 0.38rem;
}

.page-trip .trip_menu_delimiter {
   background: #dbe6ef;
   height: 1px;
   margin: var(--site-space-sm) 0;
}

.page-trip #div_main_data_description {
   color: #1f2933;
   column-gap: 2.25rem;
   column-rule: 1px solid var(--site-border-color);
   font-size: clamp(1.12rem, 0.98rem + 0.45vw, 1.28rem);
   line-height: 1.78;
   margin: var(--site-space-md) 0 var(--site-space-lg);
   padding: clamp(1rem, 2vw, 1.45rem) 0 0;
}

.page-trip #div_main_data_description p {
   margin-top: 0;
}

.page-trip .main_pic_div {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
   margin: 0 0 var(--site-space-lg);
   overflow: hidden;
   width: 100%;
}

.page-trip .main_pic_div .image_center {
   background: #10151c;
   line-height: 0;
   overflow: hidden;
   text-align: center;
}

.page-trip .main_pic {
   border-radius: 0;
   box-shadow: none;
   display: inline-block;
   filter: saturate(1.02) contrast(1.02);
   height: auto;
   margin: 0;
   max-height: min(70vh, 640px);
   max-width: 100%;
   padding: 0;
   transition: filter 220ms ease;
   width: auto;
}

.page-trip .main_pic_div:hover .main_pic {
   filter: saturate(1.08) contrast(1.04);
}

.page-trip .main_pic_description {
   background: var(--site-soft-surface-color);
   border-top: 1px solid var(--site-border-color);
   color: var(--site-muted-text-color);
   font-size: 1rem;
   line-height: 1.45;
   margin: 0;
   padding: 0.7rem 0.95rem;
   width: 100%;
}

.page-trip .main_pic_unique_id {
   color: #8896a6;
   font-size: var(--font-size-xs);
   margin: 0.25rem 0 0;
}

.page-trip .main_pic_description_full_div_visible {
   background: var(--site-surface-color);
   border-top: 1px solid var(--site-border-color);
   line-height: 1.65;
   padding: var(--site-space-lg);
}

.page-trip #main_google_map_div {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   margin: 0 0 var(--site-space-lg);
   overflow: hidden;
   position: relative;
}

.page-trip #main_map_div_content.js-static-leaflet-map {
   height: clamp(18rem, 48vw, 30rem);
   min-height: 20rem;
   padding-bottom: 0;
   width: 100%;
}

.page-trip #main_map_div_content img:not(.leaflet-tile):not(.static-map-photo-marker__image):not(.static-map-hotel-popup__image) {
   max-height: 30px !important;
   max-width: 60px !important;
}

.page-trip #main_map_div_content .leaflet-marker-icon:not(.leaflet-zoom-hide):not(.static-map-photo-marker) {
   max-height: 30px !important;
   max-width: 60px !important;
}

.page-trip #main_map_div_content .leaflet-marker-icon.static-map-photo-marker--hotel {
   max-height: 25px !important;
   max-width: 33px !important;
}

.page-trip #main_map_div_content .static-map-photo-marker:hover .static-map-photo-marker__link {
   transform: scale(var(--static-map-marker-hover-scale, 2.1));
}

.page-trip #main_map_div_content .static-map-photo-marker--hotel:hover .static-map-photo-marker__link {
   transform: none;
}

.page-trip #main_google_map_div .p_center {
   background: var(--site-surface-color);
   border-top: 1px solid var(--site-border-color);
   margin: 0;
   padding: 0.75rem 1rem;
}

.page-trip #main_google_map_div .trip-map-cta {
   background: var(--site-soft-surface-color);
   border-top: 1px solid var(--site-border-color);
   margin: 0;
   padding: 0.7rem 0.85rem 0.5rem;
   text-align: center;
}

.page-trip #main_google_map_div .trip-map-cta a {
   align-items: center;
   color: var(--site-link-color);
   display: inline-flex;
   font-size: var(--font-size-md);
   font-weight: 700;
   gap: 0.45rem;
   letter-spacing: 0.01em;
   line-height: 1.25;
   text-decoration: none;
   white-space: nowrap;
}

.page-trip #main_google_map_div .trip-map-cta a::after {
   content: '›';
   font-size: 1.45rem;
   content: "\203A";
   line-height: 0.8;
   transition: transform 160ms ease;
}

.page-trip #main_google_map_div .trip-map-cta a:hover,
.page-trip #main_google_map_div .trip-map-cta a:focus {
   color: #005fc0;
   text-decoration: none;
}

.page-trip #main_google_map_div .trip-map-cta a:hover::after,
.page-trip #main_google_map_div .trip-map-cta a:focus::after {
   transform: translateX(3px);
}

#div_trip_menu {
   background: #fff;
   border: 0;
   border-bottom: 1px solid #d8e1ea;
   box-shadow: none;
   font-family: var(--site-font-family);
   font-size: 1rem;
   margin: 1rem 0 1.55rem;
   overflow: visible;
   padding: 0;
}

#div_trip_menu ul {
   display: flex;
   flex-wrap: wrap;
   gap: 0;
   list-style: none;
   margin: 0;
   padding: 0;
}

#div_trip_menu li {
   background: transparent;
   box-shadow: none;
   flex: 1 1 9.5rem;
   float: none;
   list-style: none;
   margin: 0;
   text-align: center;
   width: auto;
}

#div_trip_menu li a {
   align-items: center;
   background: transparent;
   border: 0;
   box-shadow: none;
   color: #0f4c81;
   display: flex;
   font-size: var(--font-size-md);
   font-weight: 520;
   justify-content: center;
   letter-spacing: 0.04em;
   min-height: 2.7rem;
   padding: 0.55rem 0.9rem;
   position: relative;
   text-align: center;
   text-shadow: none;
   text-transform: uppercase;
   transition: background-color 160ms ease, color 160ms ease;
   white-space: nowrap;
}

#div_trip_menu li.active a,
#div_trip_menu li a:hover,
#div_trip_menu li a:focus {
   background: #f5faff;
   box-shadow: none;
   color: #083b66;
   text-decoration: none;
   text-shadow: none;
}

#div_trip_menu li.active a::after,
#div_trip_menu li a:hover::after {
   background: var(--site-accent-color);
   bottom: -1px;
   content: "";
   height: 2px;
   left: 0;
   position: absolute;
   right: 0;
}

#div_trip_menu li a:hover::after {
   background: #7ebbf3;
}

.page-trip #div_other_sights {
   background: var(--site-surface-color);
   padding: var(--site-space-lg);
}

.page-trip .other_sights_heading {
   align-items: center;
   background: var(--site-soft-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-md);
   display: flex;
   gap: var(--site-space-sm);
   margin-bottom: var(--site-space-md);
   padding: var(--site-space-sm) var(--site-space-md);
}

.page-trip .other_sights_icon {
   flex: 0 0 auto;
   padding: 0;
   vertical-align: middle;
}

.page-trip .div_sights_pic_nearby {
   background: var(--site-soft-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-md);
   float: none;
   padding: var(--site-space-sm);
   width: auto;
}

.page-trip #div_other_sights > div {
   display: grid;
   gap: var(--site-space-sm);
   grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.page-trip #div_other_sights > div > div {
   font-size: var(--font-size-sm);
   line-height: 1.42;
   padding: 0;
}

#div_hotel_regions {
   display: grid;
   gap: var(--site-space-md);
   grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
   margin: var(--site-space-lg) 0;
}

#div_hotel_regions > div {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-md);
   box-shadow: var(--site-card-shadow);
   float: none;
   margin: 0;
   padding: var(--site-space-md);
   transition: box-shadow 160ms ease, transform 160ms ease;
}

#div_hotel_regions > div:hover,
#div_hotel_regions > div.active {
   background: var(--site-soft-surface-color);
   box-shadow: 0 8px 22px rgba(31, 41, 51, 0.1);
   transform: translateY(-2px);
}

#div_hotel_regions img {
   border-radius: var(--site-radius-sm);
   display: block;
   margin: 0 auto var(--site-space-sm);
}

.page-booking-hotels #all_accomodations {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   padding: var(--site-space-md);
}

.page-booking-hotels #hotels_sort,
.page-booking-hotels .hotels_navigation {
   align-items: center;
   background: var(--site-soft-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: none;
   display: flex;
   flex-wrap: wrap;
   gap: var(--site-space-sm);
   margin: var(--site-space-lg) 0 var(--site-space-md);
   padding: var(--site-space-sm);
}

.page-booking-hotels #hotels_sort span,
.page-booking-hotels .hotels_navigation span {
   border-radius: 999px;
   margin: 0;
   padding: 0.45rem 0.75rem;
}

.page-booking-hotels #hotels_sort .active,
.page-booking-hotels .hotels_navigation .active {
   background: var(--site-accent-color);
   color: #fff;
}

.page-hotel-view #hotel_view,
.page-hotels #hotels_view {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   margin: var(--site-space-lg) 0;
   padding: var(--site-space-lg);
}

.page-hotel-view #div_hotel_all_content {
   border-top: 0;
   display: grid;
   gap: var(--site-space-lg);
   grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
   padding-top: 0;
}

.page-hotel-view #div_left_view {
   float: none;
   width: auto;
}

.page-hotel-view #img_hotel_view {
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   display: block;
   max-width: 100%;
}

.page-hotel-view #div_google_map_detail,
.page-hotel-view #div_google_map_slovenia {
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   float: none;
   overflow: hidden;
   width: 100%;
}

.page-hotel-view #div_google_map_slovenia {
   margin-top: var(--site-space-md);
}

.page-search-results #div_main_results {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   margin: var(--site-space-lg) 0;
   padding: var(--site-space-lg);
}

.page-search-results #div_main_results .i,
.page-search-results #div_main_results .i4,
.page-search-results #div_main_results .i5,
.page-search-results #div_main_results .i6,
.page-search-results #div_main_results .i7,
.page-search-results #div_main_results .i8 {
   background: var(--site-soft-surface-color);
   border: 1px solid var(--site-border-color);
   border-left: 3px solid var(--site-accent-color);
   border-radius: var(--site-radius-sm);
   font-size: var(--font-size-md);
   margin: 0 0 var(--site-space-xs) 1.8rem;
   padding: 0.45rem 0.65rem;
   transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.page-search-results #div_main_results .i:hover,
.page-search-results #div_main_results .i:focus-within,
.page-search-results #div_main_results .i4:hover,
.page-search-results #div_main_results .i4:focus-within,
.page-search-results #div_main_results .i5:hover,
.page-search-results #div_main_results .i5:focus-within,
.page-search-results #div_main_results .i6:hover,
.page-search-results #div_main_results .i6:focus-within,
.page-search-results #div_main_results .i7:hover,
.page-search-results #div_main_results .i7:focus-within,
.page-search-results #div_main_results .i8:hover,
.page-search-results #div_main_results .i8:focus-within {
   background: #f4f9fe;
   border-left-color: var(--site-accent-color);
   transform: translateX(3px);
}

/* Indent + lighten each nesting level so it reads as a tree (region >
   place > sight > detail) instead of a flat stack of equal-weight rows.
   i4 sits one clear step to the right of its h3 place heading (which has
   its own 0.9rem inset), everything deeper steps in further still. */
.page-search-results #div_main_results .i5 {
   background: transparent;
   border-left-color: #cbd8e3;
   font-size: 0.97rem;
   margin-left: 2.7rem;
}

.page-search-results #div_main_results .i6 {
   background: transparent;
   border-left-color: #cbd8e3;
   font-size: var(--font-size-sm);
   margin-left: 3.6rem;
}

.page-search-results #div_main_results .i7 {
   background: transparent;
   border-left-color: #cbd8e3;
   font-size: var(--font-size-sm);
   margin-left: 4.5rem;
}

.page-search-results #div_main_results .i8 {
   background: transparent;
   border-left-color: #cbd8e3;
   font-size: var(--font-size-sm);
   margin-left: 5.4rem;
}

.page-search-results .search_best {
   background: #edf7ed;
   border: 1px solid #bad7ba;
   border-radius: var(--site-radius-md);
   box-shadow: 0 2px 8px rgba(31, 41, 51, 0.06);
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;
   margin-bottom: var(--site-space-xs);
   overflow: hidden;
   padding: var(--site-space-sm);
}

/* The unstyled <img> thumbnails this renders (app/trip_data_helpers.php
   GetBestPhotosForTripId()) had no size rule anywhere, so they rendered
   at their native _small.jpg dimensions - 8 of those side by side is
   wider than the (now indented, narrower) card, and with nothing to
   wrap or crop them the strip just overflowed past the card's right
   edge. Fixing the size here instead of touching the shared image
   markup, since other callers of the same function may rely on the
   unstyled default. */
.page-search-results .search_best .tbPhoto {
   border-radius: var(--site-radius-sm);
   flex: 0 0 auto;
   height: 68px;
   object-fit: cover;
   padding-right: 0 !important;
   width: 90px;
}

/* Line up each photo strip with the indent level of the place/sight it
   belongs to (it's always the element rendered immediately before it),
   so it reads as "these photos are inside that row" instead of always
   starting flush at the container's left edge.
   width:calc(100% - <margin>) is required here, not just cosmetic -
   .search_best is a block-level flex container, and (verified live)
   its width:auto resolves to the full available content width without
   actually subtracting its own margin-left, so without an explicit
   width it overflows past the card's right edge by margin-left minus
   whatever padding buffer is left, on every width tested. */
.page-search-results h2 + .search_best {
   margin-left: 0.6rem;
   width: calc(100% - 0.6rem);
}

.page-search-results h3 + .search_best {
   margin-left: 1.5rem;
   width: calc(100% - 1.5rem);
}

.page-search-results #div_main_results .i + .search_best,
.page-search-results #div_main_results .i4 + .search_best {
   margin-left: 1.8rem;
   width: calc(100% - 1.8rem);
}

.page-search-results #div_main_results .i5 + .search_best {
   margin-left: 2.7rem;
   width: calc(100% - 2.7rem);
}

.page-search-results #div_main_results .i6 + .search_best {
   margin-left: 3.6rem;
   width: calc(100% - 3.6rem);
}

.page-search-results #div_main_results .i7 + .search_best {
   margin-left: 4.5rem;
   width: calc(100% - 4.5rem);
}

.page-search-results #div_main_results .i8 + .search_best {
   margin-left: 5.4rem;
   width: calc(100% - 5.4rem);
}

.page-main h1,
.page-news h1,
.page-top-sights h1 {
   max-width: 56rem;
}

.page-main #main_page_text {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   color: var(--site-text-color);
   font-size: var(--font-size-md);
   line-height: 1.75;
   margin: 0 0 var(--site-space-lg);
   padding: var(--site-space-lg);
   width: auto;
}

.page-main #right {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   padding: var(--site-space-md);
}

.page-main #right:empty {
   display: none;
}

.page-main #left {
   min-width: 0;
}

.page-main .trip_group h2 {
   margin-top: 0;
}

.page-main .trip_group_description {
   margin-bottom: var(--site-space-md);
}

.page-news #div_news {
   margin-top: var(--site-space-lg);
}

/* Same "image left, content right" card recipe as the interactive map's
   best-trips list (.best-trip-card) - unified look, own classes since the
   source markup differs (date meta row instead of a title+description
   body wrapper). Grid placement means the PHP output order (date, pic,
   title, description) doesn't need to change to get pic-left visually.
   Deliberately no mobile "stack into one column" breakpoint - .best-
   trip-card stays side-by-side at every width with a small fixed image,
   so this does too, to actually look unified rather than just similar
   down to a point and then diverging. */
.page-news .div_news_trip,
.page-news .div_news_site {
   align-items: start;
   border-radius: var(--site-radius-lg);
   column-gap: var(--site-space-md);
   display: grid;
   grid-template-columns: 110px minmax(0, 1fr);
   grid-template-rows: auto auto auto;
   margin-bottom: var(--site-space-md);
   padding: var(--site-space-md);
   row-gap: 0.3rem;
}

/* Date sits above the photo (its own column-1 row), not next to the title -
   the title/description column is sized to line up with the photo only. */
.page-news .div_news_date {
   background: var(--site-soft-surface-color);
   border-radius: 999px;
   color: var(--site-muted-text-color);
   display: inline-block;
   font-size: var(--font-size-xs);
   grid-column: 1;
   grid-row: 1;
   margin-bottom: 0.3rem;
   padding: 0.3rem 0.6rem;
   text-align: center;
   width: fit-content;
}

.page-news .div_news_pic {
   align-self: start;
   grid-column: 1;
   grid-row: 2 / span 2;
}

.page-news .div_news_title {
   font-size: clamp(1.12rem, 0.98rem + 0.45vw, 1.28rem);
   grid-column: 2;
   grid-row: 2;
   line-height: 1.35;
}

.page-news .div_news_description,
.page-news .div_news_description_pics {
   grid-column: 2;
   grid-row: 3;
}

/* Match .best-trip-card__description: clamp to a few lines instead of
   showing the full paragraph, so the text column stays roughly as tall as
   the photo next to it instead of running on much longer. */
.page-news .div_news_description .description {
   display: -webkit-box;
   font-size: clamp(1.12rem, 0.98rem + 0.45vw, 1.28rem);
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
}

.page-news .news_pic,
.page-news .news_symbol_pic {
   border-radius: var(--site-radius-sm);
   box-shadow: 0 3px 10px rgba(31, 41, 51, 0.12);
   display: block;
   height: 84px !important;
   object-fit: cover;
   width: 110px;
}

.page-top-sights .div_thematic_page_name_background {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   margin: var(--site-space-lg) 0 var(--site-space-md);
   padding: var(--site-space-md);
}

.page-top-sights .h3_thematic_page_menu_featured {
   align-items: center;
   display: flex;
   gap: var(--site-space-sm);
   margin: 0;
}

.page-top-sights .div_thematic_page_images {
   background: var(--site-soft-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   margin-bottom: var(--site-space-xl);
   padding: var(--site-space-md);
}

.page-top-sights .div_float_trips,
.page-top-sights .div_float_map {
   float: none;
   width: auto;
}

#div_footer_top5,
.footer-top-trips {
   background: transparent;
   border: 0;
   box-shadow: none;
   color: var(--site-text-color);
   display: block;
   margin: 0 auto var(--site-space-lg);
   max-width: 900px;
   padding: var(--site-space-md) 0;
   width: min(900px, 100%);
}

#div_footer_top5 > h2,
.footer-top-trips__title {
   letter-spacing: 0.03em;
   margin: 0 0 var(--site-space-md);
   text-align: left;
   text-transform: uppercase;
}

.footer-top-trips__row {
   display: grid;
   gap: 0.75rem;
   grid-template-columns: repeat(5, minmax(0, 1fr));
}

#div_footer_top5 .div_trip,
.footer-top-trips__item {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-md);
   color: var(--site-text-color);
   display: block;
   float: none;
   overflow: hidden;
   padding: 8px 8px 14px;
   text-align: center;
   text-decoration: none;
   transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#div_footer_top5 .div_trip:hover,
#div_footer_top5 .div_trip:focus-visible,
.footer-top-trips__item:hover,
.footer-top-trips__item:focus-visible {
   border-color: color-mix(in srgb, var(--brand-accent) 40%, var(--site-border-color));
   box-shadow: var(--site-card-shadow);
   color: var(--site-text-color);
   text-decoration: none;
   transform: translateY(-3px);
}

#div_footer_top5 .div_trip img,
.footer-top-trips__item img {
   border-radius: var(--site-radius-sm);
   display: block;
   height: 80px;
   margin: 0 auto 10px;
   object-fit: cover;
   width: 100%;
}

.footer-top-trips__label {
   font-size: calc(var(--font-size-sm) - 1px);
   line-height: 1.25;
   margin-top: 8px;
}

/* "Top trips" panel shown above the photo index on root/region trip pages
   (top_trips.php). Same underlying data and card recipe as the NAJ 5 footer
   panel above - kept as separate classes since this one lives mid-content,
   not in the footer. Used to be a dark green/yellow, grayscale-photo 2012
   block with zero relation to the rest of the design system. */
.top-trips-panel {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   margin: var(--site-space-lg) 0;
   padding: var(--site-space-lg);
}

.top-trips-panel__title {
   margin-top: 0;
}

.top-trips-panel__row {
   display: grid;
   gap: var(--site-space-md);
   grid-template-columns: repeat(5, minmax(0, 1fr));
   margin-top: var(--site-space-sm);
}

.top-trips-panel__item {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-md);
   color: var(--site-text-color);
   display: block;
   overflow: hidden;
   padding: 8px 8px 14px;
   text-align: center;
   text-decoration: none;
   transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.top-trips-panel__item:hover,
.top-trips-panel__item:focus-visible {
   border-color: color-mix(in srgb, var(--brand-accent) 40%, var(--site-border-color));
   box-shadow: var(--site-card-shadow);
   transform: translateY(-3px);
}

.top-trips-panel__item img {
   border-radius: var(--site-radius-sm);
   display: block;
   height: 80px;
   margin: 0 auto 10px;
   object-fit: cover;
   width: 100%;
}

.top-trips-panel__label {
   display: block;
   font-size: calc(var(--font-size-sm) - 1px);
   line-height: 1.25;
   margin-top: 8px;
}

@media (max-width: 735px) {
   .top-trips-panel {
      padding: var(--site-space-md);
   }

   .top-trips-panel__row {
      gap: 0.35rem;
   }

   .top-trips-panel__item {
      padding: 5px 5px 7px;
   }

   .top-trips-panel__item img {
      height: 46px;
      margin-bottom: 5px;
   }

   .top-trips-panel__label {
      font-size: var(--font-size-2xs);
      line-height: 1.15;
      margin-top: 5px;
   }
}

/* Booking.com affiliate widget mount point. The widget itself is an external
   iframe that loads asynchronously once scrolled into view, so this container
   is styled as a card with a reserved height and a soft loading shimmer —
   without it, the area reads as a broken empty gap until the iframe paints. */
#div_booking_hotels {
   margin: 0 0 var(--site-space-sm);
}

#div_booking_hotels h2 {
   margin-bottom: var(--site-space-lg);
}

#div_booking_hotels [id^="bookingAffiliateWidget_"] {
   background:
      linear-gradient(100deg, var(--site-soft-surface-color) 30%, #eef2f7 45%, var(--site-soft-surface-color) 60%)
      var(--site-soft-surface-color);
   background-size: 250% 100%;
   animation: site-widget-shimmer 1.8s ease-in-out infinite;
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   min-height: 380px;
   overflow: hidden;
}

#div_booking_hotels [id^="bookingAffiliateWidget_"] iframe {
   border: 0;
   display: block;
   width: 100%;
}

@keyframes site-widget-shimmer {
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
   #div_booking_hotels [id^="bookingAffiliateWidget_"] {
      animation: none;
   }

   .site-lightbox,
   .site-lightbox__image {
      transition: none;
   }

   .site-lightbox__spinner {
      animation-duration: 1400ms;
   }
}

/* "Pika" (ladybug) place-rating icon — site mascot used as a beauty/priority
   rating. Replaces the old low-res pixelated GIF with the real artwork at a
   sane inline size. */
.pika-icon {
   height: 1.05em;
   margin-right: 0.1em;
   vertical-align: -0.15em;
   width: 1.05em;
}

.pika-icon--small {
   height: 1.1em;
   vertical-align: -0.18em;
   width: 1.1em;
}

/* Repeated rating icons (ladybugs, hotel stars) must move as one atomic
   group — otherwise adjacent <img> icons can split across a line wrap
   even with no whitespace between them, leaving one stranded alone. */
.icon-cluster {
   display: inline-block;
   white-space: nowrap;
}

/* Photo lightbox (JS/site_lightbox.js) - replaces the old jQuery Colorbox
   plugin (2011-era default black theme, no relation to the design system).
   Vanilla JS, no new dependency added; site-wide default hidden via [hidden]
   with an explicit override since author styles otherwise beat the
   attribute's UA display:none at equal specificity. */
.site-lightbox {
   align-items: center;
   bottom: 0;
   display: flex;
   justify-content: center;
   left: 0;
   opacity: 0;
   pointer-events: none;
   position: fixed;
   right: 0;
   top: 0;
   transition: opacity 220ms ease;
   z-index: 4000;
}

.site-lightbox[hidden] {
   display: none;
}

.site-lightbox--open {
   opacity: 1;
   pointer-events: auto;
}

.site-lightbox__backdrop {
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   background: rgba(8, 14, 20, 0.92);
   bottom: 0;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
}

.site-lightbox__stage {
   max-height: 82vh;
   max-width: min(92vw, 1400px);
   position: relative;
   z-index: 1;
}

.site-lightbox__image {
   border-radius: var(--site-radius-md);
   box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
   display: block;
   max-height: 82vh;
   max-width: min(92vw, 1400px);
   opacity: 0;
   transform: scale(0.98);
   transition: opacity 200ms ease, transform 200ms ease;
}

.site-lightbox__image--loaded {
   opacity: 1;
   transform: scale(1);
}

.site-lightbox__spinner {
   animation: site-lightbox-spin 800ms linear infinite;
   border: 3px solid rgba(255, 255, 255, 0.25);
   border-radius: 50%;
   border-top-color: #fff;
   height: 40px;
   left: 50%;
   opacity: 0;
   pointer-events: none;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   transition: opacity 150ms ease;
   width: 40px;
}

.site-lightbox__spinner--active {
   opacity: 1;
}

@keyframes site-lightbox-spin {
   to { transform: translate(-50%, -50%) rotate(360deg); }
}

.site-lightbox__footer {
   bottom: calc(var(--site-space-lg) * 1.2);
   left: 0;
   pointer-events: none;
   position: absolute;
   right: 0;
   text-align: center;
   z-index: 1;
}

.site-lightbox__caption {
   color: #fff;
   font-size: var(--font-size-md);
   font-weight: 600;
   margin: 0 auto 0.3rem;
   max-width: 90vw;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.site-lightbox__counter {
   color: rgba(255, 255, 255, 0.72);
   font-size: var(--font-size-xs);
   letter-spacing: 0.03em;
   margin: 0;
}

.site-lightbox__control {
   align-items: center;
   background: rgba(20, 26, 33, 0.55);
   border: 0;
   border-radius: 999px;
   color: #fff;
   cursor: pointer;
   display: flex;
   height: 44px;
   justify-content: center;
   position: absolute;
   transition: background-color 160ms ease, transform 160ms ease;
   width: 44px;
   z-index: 2;
}

.site-lightbox__control[hidden] {
   display: none;
}

.site-lightbox__control:hover,
.site-lightbox__control:focus-visible {
   background: rgba(20, 26, 33, 0.85);
}

.site-lightbox__close {
   right: var(--site-space-md);
   top: var(--site-space-md);
}

.site-lightbox__prev {
   left: var(--site-space-md);
   top: 50%;
   transform: translateY(-50%);
}

.site-lightbox__prev:hover {
   transform: translateY(-50%) translateX(-2px);
}

.site-lightbox__next {
   right: var(--site-space-md);
   top: 50%;
   transform: translateY(-50%);
}

.site-lightbox__next:hover {
   transform: translateY(-50%) translateX(2px);
}

html.site-lightbox-open {
   overflow: hidden;
}

@media (max-width: 735px) {
   .site-lightbox__control {
      height: 40px;
      width: 40px;
   }

   .site-lightbox__close {
      right: var(--site-space-sm);
      top: var(--site-space-sm);
   }

   .site-lightbox__prev {
      left: var(--site-space-xs);
   }

   .site-lightbox__next {
      right: var(--site-space-xs);
   }

   .site-lightbox__footer {
      bottom: var(--site-space-md);
   }

   .site-lightbox__caption {
      font-size: var(--font-size-sm);
   }
}

/* Public article body (article.php). Still using the pre-rewrite
   Verdana/12pt/180% styling from the legacy stylesheet - nothing in the
   modern layer had ever touched it. */
.div_article_text {
   color: var(--site-text-color);
   font-family: var(--site-font-family);
   font-size: var(--font-size-md);
   line-height: 1.7;
   text-align: left;
}

.div_article_photo_inline {
   border-radius: var(--site-radius-md);
   overflow: hidden;
}

.img_article_photo {
   border-radius: var(--site-radius-md);
   display: block;
}

@media (max-width: 735px) {

   body {
      font-size: 16px;
      overflow-x: hidden;
   }

   .best-trips-grid {
      grid-template-columns: 1fr;
   }

   #div_footer_top5,
   .footer-top-trips {
      width: 100%;
   }

   .footer-top-trips__row {
      display: grid;
      gap: 0.35rem;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      width: 100%;
   }

   #div_footer_top5 .div_trip,
   .footer-top-trips__item {
      padding: 5px 5px 7px;
   }

   #div_footer_top5 .div_trip img,
   .footer-top-trips__item img {
      height: 46px;
      margin-bottom: 5px;
   }

   .footer-top-trips__label {
      font-size: var(--font-size-2xs);
      line-height: 1.15;
   }

   #div_page {
      width: 100%;
      margin-top: 0;
   }

   #div_page_inner {
      padding-left: var(--site-space-md);
      padding-right: var(--site-space-md);
      box-shadow: none;
      width: 100%;
   }

   .page-main #right {
      float: none;
      margin: 0 0 var(--site-space-lg);
      width: auto;
   }

   .page-main #left {
      margin-right: 0;
   }

   /* Site header: title/subtitle left, social/flags top-right, search full-width below. */
   #div_header_content {
      align-items: start;
      box-sizing: border-box;
      display: grid;
      gap: 0.7rem 0.6rem;
      grid-template-columns: minmax(0, 1fr) auto;
      margin: 0;
      max-width: 100%;
      overflow: visible;
      padding: 0.9rem var(--site-space-md) 0.95rem;
      width: 100%;
   }

   #div_titles {
      grid-column: 1;
      grid-row: 1;
      justify-self: stretch;
      min-width: 0;
      width: auto;
   }

   #div_options,
   .site-header__options {
      align-items: flex-end;
      flex-direction: column;
      gap: 0.5rem;
      grid-column: 2;
      grid-row: 1;
      justify-content: flex-start;
      justify-self: end;
      order: 2;
   }

   #div_fb_rss,
   .site-header__social,
   #div_flags,
   .site-header__flags {
      justify-content: flex-end;
      width: auto;
   }

   #header_title {
      font-size: clamp(1.6rem, 5vw, 2rem);
      letter-spacing: 0;
      line-height: 1.08;
      max-width: 100%;
      white-space: normal;
   }

   .logo_symbol {
      height: 50px;
      margin-right: 0.48rem;
      transform: scale(0.8);
      transform-origin: left center;
      width: 50px;
   }

   #div_subtitle {
      font-size: 1rem;
      letter-spacing: 0.025em;
      line-height: 1.25;
      margin-top: 0.15rem;
      margin-bottom: 0.5rem;
      max-width: 100%;
   }

   #div_search,
   .site-header__search {
      box-sizing: border-box;
      grid-column: 1 / -1;
      grid-row: 2;
      justify-self: stretch;
      max-width: 100%;
      order: 3;
      overflow: visible;
      padding: 0;
      text-align: left;
      width: 100%;
   }

   #div_search form,
   .site-header-search-form {
      gap: 0.35rem;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      box-sizing: border-box;
      max-width: 100%;
      position: static;
      padding: 0.18rem;
      width: 100%;
   }

   #text_search_field,
   .site-header-search-input {
      display: block;
      font-size: 1rem;
      min-height: 2.5rem;
      min-width: 0;
      padding: 0.48rem 0.65rem;
      width: 100%;
   }

   #div_search .site-header-search-button {
      align-items: center;
      background: #ffffff;
      bottom: auto;
      box-shadow: none;
      color: var(--brand-accent-strong);
      display: inline-flex;
      justify-content: center;
      position: static;
      right: auto;
      top: auto;
      min-height: 2.5rem;
      min-width: 2.5rem;
      padding: 0 0.6rem;
      width: auto;
      z-index: 2;
   }

   /* Primary navigation: full-width stacked links. */
   nav {
      overflow: visible;
   }

   nav ul {
      justify-content: flex-start;
      width: max-content;
   }

   nav > ul {
      display: block;
      min-width: 0;
      width: 100%;
   }

   nav > ul > li,
   nav > ul > li:last-child {
      display: block;
      width: 100%;
   }

   nav > ul > li > span > a {
      border-bottom: 1px solid #d8e1ea;
      justify-content: flex-start;
      min-height: 2.65rem;
      padding: 0.62rem 1.05rem;
      text-align: left;
   }

   nav ul ul {
      padding: 0.2rem 0;
      min-width: min(20rem, calc(100vw - 2rem));
   }

   nav ul ul li p,
   nav ul ul li a,
   nav ul ul li .submenu {
      font-size: var(--font-size-sm);
      line-height: 1.25;
      padding: 0.52rem 0.95rem;
   }

   nav ul li {
      min-width: 10rem;
   }

   nav ul ul li {
      min-width: 100%;
   }

   /* Hotel search widget (top-of-page reservation card). */
   #div_hotels_header {
      display: grid;
      gap: 1rem;
      grid-template-columns: minmax(0, 1fr);
      width: min(92vw, 36rem);
   }

   #div_hotels_header_search,
   #div_hotels_header_search_inner,
   #div_hotels_header_search form {
      height: auto;
   }

   #div_hotels_header_search {
      margin-bottom: var(--site-space-md);
      width: 100%;
   }

   #search_hotel_table {
      display: grid;
      grid-template-columns: 1fr 1fr;
   }

   .search-hotel-field {
      align-items: stretch;
      gap: 0.32rem;
      grid-template-columns: minmax(0, 1fr);
   }

   .search-hotel-field:first-child {
      grid-column: 1 / -1;
   }

   #search_hotel_table .td_label {
      white-space: normal;
   }

   #div_date_undefined {
      margin-left: 0;
   }

   #div_hotels_header_search button[type='submit'] {
      margin: 0.7rem 0 0;
      width: 100%;
   }

   .hotel-header-cards {
      display: none;
   }

   /* Trip page: location banner, tab menu, sidebar. */
   #div_main_trip_data_and_menu,
   #div_parents,
   #div_trip_menu,
   .page-trip #div_main_trips {
      margin-left: 1rem;
      margin-right: 1rem;
      width: auto;
   }

   #div_parents {
      font-size: 1rem;
      padding-left: 0;
   }

   #div_main_trip_data {
      align-items: center;
      display: grid;
      gap: 0.85rem;
      grid-template-columns: auto minmax(0, 1fr);
      min-height: 0;
      padding: 0.85rem 1rem;
   }

   .trip-header-media {
      display: block;
      grid-column: 1;
      grid-row: 1;
   }

   #main_pic_small {
      height: auto;
      margin: 0 0 var(--site-space-sm);
      width: auto;
   }

   #div_main_trip_title {
      grid-column: 2;
      grid-row: 1;
   }

   .trip_main_title {
      font-size: clamp(1.4rem, 6.4vw, 2.15rem);
      line-height: 1.15;
      overflow-wrap: anywhere;
   }

   .trip-header-map-group {
      display: none;
   }

   #div_trip_menu ul {
      display: block;
      overflow: visible;
   }

   #div_trip_menu li {
      display: block;
      width: 100%;
   }

   #div_trip_menu li a {
      border-bottom: 1px solid var(--site-border-color);
      font-size: var(--font-size-sm);
      justify-content: flex-start;
      min-height: 3rem;
      min-width: 0;
      padding-left: 1.05rem;
      padding-right: 1.05rem;
      text-align: left;
   }

   .trip_div,
   .trip_div_best {
      display: block;
   }

   .trip_div .div_trip_id,
   .trip_div_best .div_trip_id,
   .trip_div .div_trip_img,
   .trip_div_best .div_trip_img,
   .trip_div .div_trip_data,
   .trip_div_best .div_trip_data {
      margin-bottom: var(--site-space-sm);
      text-align: left;
   }

   .trip_group,
   .hotel_row,
   .div_news_trip,
   .div_news_site {
      border-radius: 0;
      box-shadow: none;
   }

   .page-trip #div_main_trips {
      display: block;
   }

   .page-trip #main_left_div {
      margin-bottom: 1.2rem;
      position: static;
   }

   /* On the dedicated photos tab, skip straight to photos instead of the
      best-trips/all-trips sidebar. */
   .page-trip-photos #main_left_div {
      display: none;
   }

   .page-trip #div_main_data_description {
      column-count: 1;
      font-size: var(--font-size-md);
      line-height: 1.72;
   }

   .page-trip #trip_menu_div,
   .page-trip .main_pic_div,
   #div_trip_menu,
   .page-trip #div_trip_articles,
   .page-trip .div_trip_municipalites,
   .page-trip #div_other_sights {
      border-radius: var(--site-radius-md);
      box-shadow: none;
   }

   .page-trip #main_google_map_div .trip-map-cta {
      bottom: 0.6rem;
      left: 0.7rem;
      max-width: none;
      right: 0.7rem;
      transform: none;
      width: auto;
   }

   .page-trip #main_google_map_div .trip-map-cta a {
      font-size: var(--font-size-sm);
      justify-content: center;
      white-space: normal;
      width: 100%;
   }

   .hotel_row,
   .hotel_row .div_hotel_content_data {
      display: block;
   }

   .hotel_row .img_hotel {
      margin-bottom: var(--site-space-md);
   }

   .hotel_row .div_hotel_data {
      margin-top: var(--site-space-md);
      width: 100%;
   }

   .page-about-us-advertising #about_us_advertising,
   .page-terms-of-use #pic_links {
      display: block;
   }

   .page-hotel-view #div_hotel_all_content {
      display: block;
   }

   .page-about-us-advertising #ads_right {
      margin-bottom: var(--site-space-lg);
   }
}

@media (min-width: 736px) and (max-width: 1180px) {

   #div_hotels_header {
      grid-template-columns: minmax(21rem, 24rem) minmax(0, 1fr);
   }

   .hotel-header-cards {
      grid-column: auto;
      grid-template-columns: minmax(0, 1fr);
      height: auto;
   }

   .hotel-header-card {
      height: 8.8rem;
   }

   .hotel-header-card__caption {
      padding-top: 1.8rem;
   }
   #div_header_content,
   nav > ul,
   #div_hotels_header,
   #div_page_inner {
      width: min(94vw, 1180px);
   }

   #div_hotels_header {
      grid-template-columns: minmax(23rem, 25rem) repeat(3, minmax(0, 1fr));
   }

   .hotel-header-cards {
      grid-column: span 3;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      min-height: var(--hotels-header-height);
   }

   .page-trip #div_main_trips {
      grid-template-columns: minmax(21rem, 23rem) minmax(0, 1fr);
   }
}

/* sell_slovenia.php ("buy a spot on the map" advertising page) - not active
   on hr-cro.com but live on the sister site (kraji.eu), so still worth
   modernizing. The interactive map itself (#map_full's absolutely
   positioned, percentage-coordinate .js-important-map-part overlay grid) is
   left structurally untouched - only spacing/typography/card treatment
   changes here, nothing that affects the JS hit-testing/positioning. Green
   = free, red = reserved are functional status colors, not decoration, so
   they're kept (just smoothed out) rather than swapped for the brand blue. */

.page-important-on-map #sell_slovenia_offer_link {
   display: inline-block;
   font-size: var(--font-size-base);
   font-weight: 700;
   margin: var(--site-space-md) 0;
}

.page-important-on-map #sell_slovenia_offer {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   color: var(--site-text-color);
   font-size: var(--font-size-base);
   line-height: 1.6;
   margin: var(--site-space-md) 0;
   padding: var(--site-space-lg);
}

.page-important-on-map #sell_slovenia_offer > p span {
   font-size: inherit;
}

.page-important-on-map #sell_slovenia_offer .title {
   color: var(--brand-heading);
   font-size: var(--font-size-lg);
   font-weight: 700;
   padding: var(--site-space-md) 0 var(--site-space-xs);
}

.page-important-on-map #sell_slovenia_offer ul,
.page-important-on-map #sell_slovenia_offer ol {
   margin: var(--site-space-xs) 0 var(--site-space-md) var(--site-space-lg);
}

.page-important-on-map #sell_slovenia_offer li {
   margin: 0.3rem 0;
}

.page-important-on-map #sell_slovenia_offer img {
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-sm);
   margin: var(--site-space-sm) var(--site-space-md) var(--site-space-sm) 0;
   max-width: 100%;
}

.page-important-on-map #map_full {
   box-shadow: var(--site-card-shadow);
   margin: var(--site-space-md) 0;
}

.page-important-on-map #map_popup {
   background: var(--site-text-color);
   border: 0;
   border-radius: var(--site-radius-md);
   box-shadow: var(--site-card-shadow);
   overflow: hidden;
}

.page-important-on-map #map_popup > .trip_name {
   background: #1c7a3c;
   color: #fff;
   font-weight: 700;
   padding: var(--site-space-sm);
}

.page-important-on-map #map_popup > .trip_price {
   background: #145c2c;
   color: #fff;
   padding: 0.4rem var(--site-space-sm);
}

.page-important-on-map #map_popup > .all_links {
   background: #0f4a22;
   color: rgba(255, 255, 255, 0.85);
   font-size: var(--font-size-2xs);
   padding: 0.35rem var(--site-space-sm);
}

.page-important-on-map #map_popup > .company_name {
   font-size: var(--font-size-base);
   font-weight: 700;
   padding: var(--site-space-sm);
}

.page-important-on-map #map_popup > .company_data {
   font-size: var(--font-size-sm);
   padding: 0 var(--site-space-sm) var(--site-space-sm);
}

.page-important-on-map .map_part,
.page-important-on-map .map_part_active,
.page-important-on-map .map_part_reservation {
   transition: opacity 160ms ease;
}

.page-important-on-map #sell_slovenia_legend {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: var(--site-space-xs) var(--site-space-md);
   margin: var(--site-space-md) 0;
}

.page-important-on-map #sell_slovenia_legend > div {
   float: none;
}

.page-important-on-map #sell_slovenia_legend > div p {
   margin: 0;
}

.page-important-on-map #sell_slovenia_legend #green,
.page-important-on-map #sell_slovenia_legend #red {
   border-radius: var(--site-radius-sm);
   margin: 0;
}

.page-important-on-map .div_company {
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   margin: var(--site-space-md) 0;
   padding: var(--site-space-lg);
}

.page-important-on-map .div_company .trip_name {
   font-size: var(--font-size-sm);
   text-align: left;
}

.page-important-on-map .div_company .company_name {
   color: var(--brand-heading);
   font-size: var(--font-size-xl);
}

.page-important-on-map .div_company .description_short {
   font-size: var(--font-size-md);
   line-height: 1.5;
}

.page-important-on-map .div_company .description {
   font-size: var(--font-size-base);
   line-height: 1.6;
}