: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);
   /* Shared visual treatment for floating photo previews (map and text links). */
   --site-image-preview-background: #fff;
   --site-image-preview-border: 1px solid rgba(31, 41, 51, 0.16);
   --site-image-preview-radius: var(--site-radius-md);
   --site-image-preview-shadow: 0 2px 8px rgba(31, 41, 51, 0.28);
   --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 */
   --site-reading-font-size: clamp(1.12rem, 0.98rem + 0.45vw, 1.28rem);
}

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

/* Override the higher-specificity legacy link color with the active portal
   theme instead of leaving trip-description links permanently dark blue. */
.description_link {
   color: var(--site-link-color);
}

.description_link:hover,
.description_link:focus {
   color: var(--site-link-hover-color);
}

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: var(--brand-ink,#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: var(--brand-bright,#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: var(--brand-ink,#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 > a,
nav ul ul li > p > a,
nav ul ul li > .submenu {
   border: 0;
   color: var(--brand-heading-2,#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: var(--brand-heading-2,#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 {
   align-items: flex-start;
   display: flex;
   flex-wrap: wrap;
   gap: var(--site-space-xs);
}

.site-trip-group-grid .trip_group_div_pic {
   border-radius: var(--site-radius-sm);
   transition: box-shadow 180ms ease, transform 180ms ease;
}

.site-trip-group-grid .trip_group_div_pic a {
   border-radius: inherit;
   display: block;
}

.site-trip-group-grid .trip_group_pic {
   display: block;
   float: none;
   height: auto;
   max-width: 100%;
   object-fit: contain;
   transition: filter 260ms ease;
   width: auto;
}

.site-trip-group-grid .trip_group_div_pic:focus-within {
   box-shadow: 0 8px 20px rgba(31, 41, 51, 0.24);
   transform: translateY(-2px);
}

.site-trip-group-grid .trip_group_div_pic:focus-within .trip_group_pic {
   filter: saturate(1.08) contrast(1.04);
}

@media (hover: hover) {
   .site-trip-group-grid .trip_group_div_pic:hover {
      box-shadow: 0 8px 20px rgba(31, 41, 51, 0.24);
      transform: translateY(-2px);
   }

   .site-trip-group-grid .trip_group_div_pic:hover .trip_group_pic {
      filter: saturate(1.08) contrast(1.04);
   }
}

.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);
   font-size: var(--font-size-md);
   line-height: 1.5;
}

.page-booking-hotels .hotel_row .div_hotel_content > a {
   font-size: var(--font-size-md);
   line-height: 1.5;
}

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

.page-booking-hotels .hotel_row {
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   margin: 0;
   padding: var(--site-space-md) 0 var(--site-space-lg);
}

.page-booking-hotels .hotel_row .div_hotel_data {
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   font-size: var(--font-size-base);
   line-height: 1.5;
}

#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: var(--brand-ink,#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: var(--brand-ink,#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: var(--brand-ink,#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: var(--site-accent-soft);
   border: 1px solid color-mix(in srgb, var(--site-accent-color) 30%, var(--site-border-color));
   border-radius: var(--site-radius-sm);
   box-shadow: none;
   box-sizing: border-box;
   color: var(--brand-ink,#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 color-mix(in srgb, var(--site-accent-color) 18%, transparent);
   outline: 0;
}

#search_hotel_table .booking-date-display:hover,
#search_hotel_table .booking-date-display:focus {
   background: var(--site-accent-tint);
}

#search_hotel_table .ui-datepicker-trigger,
#search_hotel_table img {
   align-self: center;
   background: var(--site-accent-color);
   border-radius: 2px;
   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_date_undefined input[type='checkbox'] {
   accent-color: var(--site-accent-color);
}

#div_hotels_header_search button[type='submit'] {
   align-items: center;
   background: linear-gradient(180deg, var(--brand-bright,#0b71d9), var(--brand-link,#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, var(--brand-bright-2,#0d82f4), var(--brand-link,#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: var(--brand-ink,#102a43);
   font-family: var(--site-font-family);
   padding: 0.7rem;
   z-index: 10000 !important;
}

.ui-datepicker .ui-datepicker-header {
   background: transparent;
   border: 0;
   color: var(--brand-ink,#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: var(--brand-ink,#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: var(--brand-heading-2,#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));
   grid-template-rows: 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 {
   /* Absolute so the photo fills the card without dictating its height - the
      card height then comes from the grid (matching the reservation box), like
      the caption which is also absolute. Keeps both columns equal height. */
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   height: 100%;
   width: 100%;
   object-fit: cover;
   transition: filter 260ms ease;
}

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

/* Portal-configured destination cards can use mixed-case names with
   descenders (for example "Ang Thong"). Give that final line enough room so
   glyphs do not get clipped by the single-line ellipsis container. */
.hotel-header-cards--promotional .hotel-header-card__name {
   line-height: 1.35;
}

.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: var(--site-image-preview-background);
   border: var(--site-image-preview-border);
   border-radius: var(--site-image-preview-radius);
   box-shadow: var(--site-image-preview-shadow);
   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: var(--static-map-marker-hover-border-width, 1px);
   border-radius: var(--static-map-marker-hover-radius, var(--site-image-preview-radius));
   box-shadow: 0
      var(--static-map-marker-hover-shadow-y, 2px)
      var(--static-map-marker-hover-shadow-blur, 8px)
      rgba(31, 41, 51, 0.28);
}

.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: var(--brand-ink,#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,
#div_main_results .i9,
#div_main_results .i10,
#div_main_results .i11,
#div_main_results .i12,
#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 {
   border-bottom: 1px solid var(--site-border-color);
   margin: var(--site-space-lg) 0;
   padding: 0 0 var(--site-space-sm);
   text-align: left;
}

#about_us_main_menu ul {
   display: flex;
   flex-wrap: wrap;
   font-size: var(--font-size-md);
   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 {
   color: var(--site-text-color);
   display: block;
   font-weight: 600;
   padding: 0.42rem 0.7rem;
   text-decoration: none;
   transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

#about_us_main_menu a:hover {
   color: var(--brand-accent-dark);
   box-shadow: inset 0 -2px 0 var(--brand-accent);
}

#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: transparent;
   box-shadow: inset 0 -2px 0 var(--brand-accent);
   color: var(--brand-accent-dark);
}

.about-us-menu-toggle {
   display: none;
}

.img_map_viewer {
   background: var(--site-image-preview-background);
   border: var(--site-image-preview-border);
   border-radius: var(--site-image-preview-radius);
   box-shadow: var(--site-image-preview-shadow);
   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.32;
   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.32;
   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%;
}

/* Shared title / photo / excerpt list used by thematic pages and the map's
   nearby trips. Keep it here so both sections always change together. */
.trip-list-item {
   align-items: flex-start;
   background: transparent;
   border: 0;
   border-bottom: 1px solid var(--site-border-color);
   border-radius: 0;
   box-shadow: none;
   display: grid;
   gap: var(--site-space-sm) var(--site-space-md);
   grid-template-areas:
      "title title"
      "image description";
   grid-template-columns: auto minmax(0, 1fr);
   grid-template-rows: auto minmax(110px, max-content);
   margin-bottom: var(--site-space-md);
   padding: 0 0 var(--site-space-md);
}

.trip-list-item > .div_trip_data:empty {
   display: none;
}

.trip-list-item .div_trip_title {
   grid-area: title;
}

.trip-list-item .div_trip_title h3 {
   font-size: var(--font-size-lg);
   margin: 0;
}

.trip-list-item .div_trip_img {
   float: none;
   grid-area: image;
   justify-self: start;
   padding-right: 0;
   width: auto;
}

.trip-list-item .trip_img {
   background: var(--site-image-preview-background);
   border: var(--site-image-preview-border);
   border-radius: var(--site-image-preview-radius);
   box-shadow: var(--site-image-preview-shadow);
   display: block;
   height: auto !important;
   margin: 0;
   transition: filter 180ms ease, transform 180ms ease;
   width: auto;
}

.trip-list-item .div_trip_img a:hover .trip_img,
.trip-list-item .div_trip_img a:focus-visible .trip_img {
   filter: saturate(1.08) contrast(1.04);
   transform: scale(1.035);
}

.trip-list-item .paragraph_trip_review {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
   display: -webkit-box;
   font-size: var(--site-reading-font-size);
   grid-area: description;
   line-height: 1.55;
   line-clamp: 4;
   margin: 0;
   overflow: hidden;
   padding: 0;
   text-align: left;
}

.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: 0;
   border-left: 0;
   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;
}

.page-search-results h2::after {
   display: none;
}

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

.page-search-results h3 {
   border-left: 0;
   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.75rem;
   padding-left: 0;
   text-transform: none;
}

.page-search-results h3 a {
   font-weight: inherit;
}

.page-search-results #div_main_results h2.search-result-branch__heading {
   align-items: center;
   display: flex;
   gap: var(--site-space-sm);
}

.page-search-results #div_main_results .search-result-branch__heading > a {
   flex: 1 1 auto;
   min-width: 0;
}

.page-search-results #div_main_results .search-result-branch__toggle {
   align-items: center;
   appearance: none;
   background: transparent !important;
   border: 0 !important;
   border-radius: 0 !important;
   box-shadow: none !important;
   color: var(--site-link-color);
   cursor: pointer;
   display: inline-flex;
   flex: 0 0 auto;
   height: 2rem;
   justify-content: center;
   margin: -0.35rem 0;
   padding: 0;
   text-transform: none;
   width: 2rem;
}

.page-search-results #div_main_results .search-result-branch__toggle > span {
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 6px solid currentColor;
   height: 0;
   transition: transform 160ms ease;
   width: 0;
}

.page-search-results #div_main_results .search-result-branch__toggle[aria-expanded='false'] > span {
   transform: rotate(-90deg);
}

.page-search-results #div_main_results .search-result-branch__toggle:hover,
.page-search-results #div_main_results .search-result-branch__toggle:focus-visible {
   background: transparent !important;
   box-shadow: none !important;
   color: var(--site-link-hover-color);
   outline: none;
   transform: none !important;
}

.page-search-results #div_main_results .search-result-branch__items.is-collapsed {
   display: none;
}

.page-search-results #div_main_results .search-result-branch__items + :is(h2, h3) {
   border-top: 1px solid var(--site-border-color);
   padding-top: var(--site-space-md);
}

.page-search-results h3:hover,
.page-search-results h3:focus-within {
   background: transparent;
   transform: none;
}

.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,
.page-search-results #div_main_results .i9 a,
.page-search-results #div_main_results .i10 a,
.page-search-results #div_main_results .i11 a,
.page-search-results #div_main_results .i12 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 .webcam-location,
.page-webcam .div_cam {
   display: none;
}

.page-webcam .webcam-location--ready {
   display: block;
}

.page-webcam .div_cam.webcam-preview--ready {
   display: block;
}

.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;
   font-size: var(--font-size-sm);
   margin: 0;
   padding: var(--site-space-sm);
   width: 100%;
}

.page-webcam .webcam-location-cameras {
   display: flex;
   flex-wrap: wrap;
   gap: var(--site-space-md);
}

.page-webcam .webcam-location-cameras .div_cam {
   flex: 1 1 20rem;
}

@media (min-width: 736px) {
   .page-webcam .webcam-location--ready {
      display: inline-block;
      margin: 0 var(--site-space-md) var(--site-space-md) 0;
      vertical-align: top;
      width: calc(50% - var(--site-space-md));
   }
}

.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 .webcam-location--ready {
      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-contact #social {
   display: grid;
   border-top: 1px solid var(--site-border-color);
   gap: var(--site-space-md);
   margin-top: var(--site-space-lg);
   padding: var(--site-space-lg) 0 var(--site-space-md);
}

.page-about-us-contact #social p.contact-social-link {
   align-items: center;
   display: grid;
   gap: var(--site-space-sm);
   grid-template-columns: 2.1rem minmax(0, 1fr);
   margin: 0;
   padding: 0;
}

.page-about-us-contact #social .contact-social-link img {
   margin: 0;
   padding: 0;
}

.page-about-us-contact #social .contact-social-link__icon {
   border-radius: 50%;
   display: flex;
   justify-self: center;
   line-height: 0;
   transition: filter 160ms ease, transform 160ms ease;
}

.page-about-us-contact #social .contact-social-link__icon:hover,
.page-about-us-contact #social .contact-social-link__icon:focus-visible {
   filter: saturate(1.12) contrast(1.04);
   transform: scale(1.1);
}

.page-about-us-contact #social .contact-social-link__content {
   display: grid;
   gap: 0.15rem;
   min-width: 0;
}

.page-about-us-contact #social .contact-social-link__label {
   color: var(--site-muted-text-color);
   font-size: var(--font-size-sm);
   font-weight: 700;
   letter-spacing: 0.03em;
   text-transform: uppercase;
}

.page-about-us-contact #social .contact-social-link a {
   min-width: 0;
   overflow-wrap: anywhere;
}

.page-about-us-contact .contact-direct-link {
   align-items: center;
   display: grid;
   gap: var(--site-space-sm);
   grid-template-columns: 3.05rem minmax(0, 1fr);
}

.page-about-us-contact .contact-direct-link__icon {
   border-radius: 50%;
   display: block;
   line-height: 0;
   transition: transform 160ms ease;
}

.page-about-us-contact .contact-direct-link__icon:hover,
.page-about-us-contact .contact-direct-link__icon:focus-visible {
   transform: scale(1.08);
}

.page-about-us-contact .contact-direct-link__icon svg {
   background-color: color-mix(in srgb, var(--brand-accent) 12%, #fff);
   border: 1px solid var(--site-border-color);
   border-radius: 50%;
   color: #263746;
   box-sizing: border-box;
   display: block;
   height: 2.75rem;
   justify-self: center;
   padding: 0.6rem;
   fill: none;
   stroke: #263746;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 1.8;
   width: 2.75rem;
}

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

/* Thematic pages use the same readable title / photo / excerpt pattern as
   the map lists.  The legacy .trip_div grid was still overriding that
   pattern here, leaving the excerpt in a narrow third column on desktop and
   stacking the title below the photo on phones. */
.page-thematic-page .trip-list-item {
   align-items: start;
   background: transparent;
   border: 0;
   border-bottom: 1px solid var(--site-border-color);
   border-radius: 0;
   box-shadow: none;
   display: grid;
   gap: 0.45rem var(--site-space-md);
   grid-template-areas:
      "title title"
      "image description";
   grid-template-columns: auto minmax(0, 1fr);
   margin: 0 0 var(--site-space-md);
   padding: 0 0 var(--site-space-md);
}

.page-thematic-page .trip-list-item .div_trip_title {
   grid-area: title;
}

.page-thematic-page .trip-list-item .div_trip_title h3 {
   font-size: var(--font-size-lg);
   margin: 0;
}

/* A thematic result is a single linked unit.  Avoid the old, inconsistent
   underline hover and use the same small movement for every title/photo. */
.page-thematic-page .trip-list-item .div_trip_title a,
.page-thematic-page .trip-list-item .div_trip_img a {
   display: inline-block;
   text-decoration: none;
   transition: color var(--site-transition-fast), transform var(--site-transition-fast);
}

.page-thematic-page .trip-list-item:hover .div_trip_title a,
.page-thematic-page .trip-list-item:hover .div_trip_img a,
.page-thematic-page .trip-list-item .div_trip_title a:hover,
.page-thematic-page .trip-list-item .div_trip_img a:hover {
   text-decoration: none;
   transform: translateX(0.2rem);
}

.page-thematic-page .trip-list-item .div_trip_img {
   grid-area: image;
   margin: 0;
}

.page-thematic-page .trip-list-item .trip_img {
   border: 0;
   border-radius: var(--site-radius-sm);
   box-shadow: none;
   height: auto !important;
   object-fit: contain;
   width: auto;
}

.page-thematic-page .trip-list-item .paragraph_trip_review {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
   color: var(--site-text-color);
   display: -webkit-box;
   font-size: var(--site-reading-font-size);
   grid-area: description;
   line-clamp: 4;
   margin: 0;
}

/* The largest-cities page is a compact ranked data list rather than the
   usual thematic photo-and-description list. */
.page-thematic-page .thematic-city-ranking__row {
   align-items: center;
   column-gap: var(--site-space-sm);
   grid-template-areas: "number image title data";
   grid-template-columns: 2.4rem 4.5rem minmax(0, 1fr) max-content;
   grid-template-rows: auto;
   margin-bottom: 0;
   min-height: 3.6rem;
   padding: 0.45rem 0;
}

.page-thematic-page .thematic-city-ranking__row .div_trip_id {
   color: var(--site-muted-text-color);
   font-variant-numeric: tabular-nums;
   grid-area: number;
   padding: 0;
   text-align: right;
   width: auto;
}

.page-thematic-page .thematic-city-ranking__row .div_trip_img {
   align-items: center;
   display: flex;
   justify-content: center;
   width: 4.5rem;
}

.page-thematic-page .thematic-city-ranking__row .trip_img {
   height: auto !important;
   margin: 0;
   max-height: 2.75rem;
   object-fit: contain;
   width: auto;
}

.page-thematic-page .thematic-city-ranking__row .div_trip_title h3 {
   font-size: var(--font-size-md);
}

.page-thematic-page .thematic-city-ranking__row .div_trip_data {
   align-self: center;
   color: var(--site-text-color);
   font-variant-numeric: tabular-nums;
   font-weight: 700;
   grid-area: data;
   padding: 0;
   text-align: right;
}

.page-thematic-page .thematic-city-ranking__row .clear_both {
   display: none;
}

@media (max-width: 735px) {
   .page-thematic-page .trip-list-item .paragraph_trip_review {
      -webkit-line-clamp: 4;
      line-clamp: 4;
   }

   .page-thematic-page .thematic-city-ranking {
      max-width: calc(100vw - var(--site-space-md) - var(--site-space-md));
   }

   .page-thematic-page .thematic-city-ranking__row {
      column-gap: 0.45rem;
      grid-template-columns: 1.8rem 3.5rem minmax(0, 1fr) max-content;
   }

   .page-thematic-page .thematic-city-ranking__row .div_trip_img {
      width: 3.5rem;
   }

   .page-thematic-page .thematic-city-ranking__row .trip_img {
      max-height: 2.25rem;
   }
}

/* best.php cards: title first, then photo with the available description
   beside it. The browser clamps by rendered lines instead of PHP characters. */
.page-best .trip_div,
.page-best .trip_div_best {
   align-items: start;
   grid-template-areas:
      "title title"
      "image description";
   grid-template-columns: 80px minmax(0, 1fr);
   grid-template-rows: auto 84px;
   row-gap: var(--site-space-sm);
}

.page-best .div_trip_title {
   grid-area: title;
}

.page-best .div_trip_title h3 {
   margin: 0 0 var(--site-space-xs);
}

.page-best .div_trip_img {
   grid-area: image;
}

.page-best .trip_animation {
   border-radius: var(--site-radius-sm);
   display: block;
   height: 80px;
   width: 80px;
}

.page-best .paragraph_trip_review {
   align-self: start;
   grid-area: description;
   line-height: 1.35;
   margin: 0;
   -webkit-line-clamp: 4;
   line-clamp: 4;
}

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

.site-header__options-wrap {
   grid-column: 2;
   grid-row: 1;
}

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

.site-header__options-toggle-checkbox,
.site-header__options-toggle-label {
   display: none;
}

#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: 0;
}

#div_parents > span {
   align-items: center;
   background: var(--site-accent-soft);
   border: 0;
   border-left: 3px solid color-mix(in srgb, var(--site-accent-color) 62%, transparent);
   display: inline-flex;
   flex-wrap: wrap;
   gap: 0.35rem 0.5rem;
   line-height: 1.3;
   padding: 0.42rem 0.75rem;
}

#div_parents a {
   border-bottom: 1px solid transparent;
   color: var(--brand-link,#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 {
   border-bottom-color: currentColor;
   color: var(--site-link-hover-color);
   text-decoration: none;
}

#div_main_trip_data {
   align-items: center;
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   display: grid;
   gap: 1.4rem;
   grid-template-columns: auto minmax(0, 1fr) auto;
   min-height: 0;
   padding: var(--site-space-sm) 0;
}

#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: var(--brand-link,#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: 0;
   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: var(--site-space-lg);
   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: 0 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: var(--brand-ink,#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-toggle,
.page-trip #trip_menu_div .trip-menu-nearby-toggle {
   display: none;
}

.page-trip #trip_menu_div .trip-menu-card {
   align-items: center;
   border-bottom: 1px solid #edf2f7;
   color: var(--brand-heading-2,#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: var(--brand-heading-2,#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 {
   align-items: center;
   border-bottom: 1px solid #edf2f7;
   color: var(--brand-heading-2,#0f3f68);
   display: flex;
   font-size: var(--font-size-md);
   gap: 0.35rem;
   min-height: 3.05rem;
   padding: 0.5rem 0.8rem;
   position: relative;
   transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.page-trip #trip_menu_div .trip_menu_item_name {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   line-height: 1.35;
   min-width: 0;
   overflow: hidden;
   overflow-wrap: anywhere;
   text-overflow: ellipsis;
}

.page-trip #trip_menu_div .trip_menu_item_meta {
   align-items: center;
   display: inline-flex;
   flex: 0 0 auto;
   gap: 0.28rem;
   margin-left: auto;
}

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

/* The thematic-type icons beside a trip's breadcrumb are links as well.
   Give them the same quiet visual acknowledgement as the other trip links. */
.page-trip #div_thematic_pages_small a {
   display: inline-block;
}

.page-trip #div_thematic_pages_small img {
   transform-origin: center bottom;
   transition: filter 160ms ease, transform 160ms ease;
}

.page-trip #div_thematic_pages_small a:hover img,
.page-trip #div_thematic_pages_small a:focus-visible img {
   filter: brightness(1.04);
   transform: translateY(-2px) scale(1.06);
}

.page-trip #trip_menu_div .ladybug_inline {
   display: inline-block;
   margin-left: 0;
   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: var(--brand-heading-2,#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: var(--brand-heading-2,#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: var(--site-reading-font-size);
   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: 0 0 1.35rem;
}

.page-trip #div_main_data_description p:last-child {
   margin-bottom: 0;
}

.page-trip .trip-description-toggle {
   display: none;
}

.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_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: 0;
   box-shadow: none;
   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: var(--brand-link,#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: var(--brand-heading-2,#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: var(--brand-heading-2,#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: var(--brand-soft,#7ebbf3);
}

.page-trip #div_other_sights {
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   margin-bottom: var(--site-space-xl);
   padding: 0;
}

.page-trip #div_other_sights > a {
   display: block;
   text-decoration: none;
}

.page-trip .other_sights_heading {
   align-items: center;
   background: color-mix(in srgb, var(--site-accent-color) 8%, transparent);
   border: 0;
   border-radius: 0;
   display: flex;
   gap: var(--site-space-lg);
   margin-bottom: var(--site-space-md);
   padding: 0 0 var(--site-space-sm) 0.35rem;
   padding-top: 0.35rem;
}

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

.page-trip .div_sights_pic_nearby {
   align-items: center;
   background: transparent;
   border: 0;
   border-radius: 0;
   display: flex;
   float: none;
   gap: var(--site-space-md);
   margin-left: var(--site-space-lg);
   padding: var(--site-space-sm) 0;
   width: auto;
}

.page-trip .div_sights_pic__image {
   align-items: center;
   display: flex;
   flex: 0 0 auto;
   justify-content: center;
   width: 9rem;
}

.page-trip #div_other_sights > .div_sights_pic_nearby > .div_sights_pic__details {
   font-size: var(--font-size-md);
   line-height: 1.42;
   padding: 0;
   text-align: left;
}

.page-trip .div_sights_pic__link {
   display: block;
   text-decoration: none;
   transition: color 160ms ease, transform 160ms ease;
}

.page-trip .div_sights_pic__link:hover,
.page-trip .div_sights_pic__link:focus-visible {
   text-decoration: none;
   transform: translateX(0.2rem);
}

.page-trip .div_sights_pic__name {
   font-weight: 600;
}

.page-trip .div_sights_pic__distance {
   color: var(--site-muted-text-color);
   font-size: var(--font-size-sm);
   margin-left: 0.35rem;
}

.page-trip #div_booking_hotels > h2:first-child {
   margin-top: var(--site-space-xl);
}

.page-trip #div_other_sights > .nearby_sights_note {
   align-items: flex-start;
   background: var(--site-soft-surface-color);
   border-radius: var(--site-radius-sm);
   color: var(--site-muted-text-color);
   display: flex;
   gap: 0.45rem;
   margin: var(--site-space-md) 0 0;
   padding: 0.55rem 0.7rem;
}

.page-trip #div_other_sights > .nearby_sights_note::before {
   color: var(--site-accent-color);
   content: "ⓘ";
   flex: 0 0 auto;
   font-size: 1rem;
   line-height: 1.3;
}

#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);
   box-sizing: border-box;
   transform: none;
   transition: background-color 160ms ease;
}

#div_hotel_regions > div:hover,
#div_hotel_regions > div.active {
   background: var(--site-soft-surface-color);
   box-shadow: var(--site-card-shadow);
   margin: 0;
   padding: var(--site-space-md);
   transform: none;
}

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

@media (min-width: 1000px) {
   #div_hotel_regions {
      grid-template-columns: repeat(7, minmax(0, 1fr));
      width: 100%;
   }
}

.page-booking-hotels #all_accomodations,
.page-booking-hotels #hotels_sort,
.page-booking-hotels .hotels_navigation {
   align-items: center;
   background: transparent;
   border: 0;
   border-bottom: 1px solid var(--site-border-color);
   border-radius: 0;
   box-shadow: none;
   display: flex;
   flex-wrap: wrap;
   gap: var(--site-space-sm);
   margin: 0 0 var(--site-space-md);
   min-height: 2.4rem;
   padding: 0 0 var(--site-space-sm);
   font-size: 1rem;
}

.page-booking-hotels #hotels_sort {
   max-width: 100%;
   border-top: 2px solid color-mix(in srgb, var(--site-accent-color) 45%, var(--site-border-color));
   margin-top: var(--site-space-lg);
   padding-top: var(--site-space-md);
   width: fit-content;
}

.page-booking-hotels .hotels_navigation {
   justify-content: flex-end;
}

.page-booking-hotels .hotel-page-link {
   align-items: center;
   display: inline-flex;
   font-size: var(--font-size-md);
   font-weight: 700;
   gap: 0.45rem;
   line-height: 1.35;
   padding: 0.35rem 0;
   text-decoration: none;
}

.page-booking-hotels .hotel-page-link:hover,
.page-booking-hotels .hotel-page-link:focus-visible {
   color: var(--site-link-hover-color);
   text-decoration: underline;
   text-underline-offset: 0.2em;
}

.page-booking-hotels .hotel-page-link--previous::before,
.page-booking-hotels .hotel-page-link--next::after {
   font-size: 1.3em;
   line-height: 1;
}

.page-booking-hotels .hotel-page-link--previous::before {
   content: "\2190";
}

.page-booking-hotels .hotel-page-link--next::after {
   content: "\2192";
}

.page-booking-hotels #hotels_sort label {
   color: var(--brand-ink, #12324d);
   font-size: 1rem;
   font-weight: 700;
   white-space: nowrap;
}

.page-booking-hotels #hotel_sort_select {
   appearance: auto;
   background: var(--site-surface-color);
   border: 1px solid var(--site-border-color);
   border-radius: var(--site-radius-sm);
   color: var(--site-text-color);
   cursor: pointer;
   font: inherit;
   min-height: 2.5rem;
   padding: 0.35rem 2rem 0.35rem 0.7rem;
}

.page-booking-hotels #hotel_sort_select:focus-visible {
   outline: 2px solid var(--site-accent-color);
   outline-offset: 2px;
}

.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-booking-hotels .hotels_navigation .is-disabled {
   pointer-events: none;
   visibility: hidden;
}

.description_link_image.pointShowImage {
   background: var(--site-image-preview-background);
   border: var(--site-image-preview-border);
   border-radius: var(--site-image-preview-radius);
   box-shadow: var(--site-image-preview-shadow);
   display: block;
   padding: 0;
   position: absolute;
   visibility: visible;
   z-index: 4000;
}

/* Not-found page: keep the message calm, but readable enough to act on. */
.page-404 h1 {
   font-size: clamp(2rem, 3.2vw, 2.55rem);
   line-height: 1.15;
   margin-bottom: var(--site-space-lg);
}

.page-404 #page404 {
   border-left: 4px solid var(--site-accent-color);
   color: var(--site-text-color);
   max-width: 52rem;
   padding: var(--site-space-md) 0 var(--site-space-sm) var(--site-space-lg);
}

.page-404 #page404 p {
   font-size: var(--font-size-md);
   line-height: 1.65;
   margin: 0 0 var(--site-space-md);
   padding: 0;
}

@media (max-width: 735px) {
   /* The sidebar inherits an old inner gutter on phones.  Match the width
      and left edge of the primary Izleti selector directly above it. */
   .page-trip #trip_menu_div {
      margin-left: calc(-1 * var(--site-space-md));
      margin-right: calc(-1 * var(--site-space-md));
      width: calc(100% + (2 * var(--site-space-md)));
   }

   .page-trip #trip_menu_div .trip-menu-card-list:not(.trip-menu-card-list--expanded) .trip-menu-card:nth-child(n + 2) {
      display: none;
   }

   .page-trip #trip_menu_div .trip-menu-card-toggle {
      align-items: center;
      -webkit-appearance: none;
      appearance: none;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0;
      box-shadow: none !important;
      color: var(--brand-accent-dark);
      cursor: pointer;
      display: flex;
      grid-column: 3;
      justify-content: center;
      margin: -0.38rem -0.78rem -0.38rem 0;
      min-height: 2.8rem;
      padding: 0;
      text-align: left;
      width: 2.8rem;
   }

   .page-trip #trip_menu_div .trip-menu-card-toggle:hover,
   .page-trip #trip_menu_div .trip-menu-card-toggle:focus,
   .page-trip #trip_menu_div .trip-menu-card-toggle:focus-visible {
      box-shadow: none;
      outline: 0;
      transform: none;
   }

   .page-trip #trip_menu_div .trip-menu-card--toggle {
      grid-template-columns: 60px minmax(0, 1fr) 2.8rem;
   }

   .page-trip #trip_menu_div .trip-menu-card-toggle::after {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid currentColor;
      content: '';
      height: 0;
      transition: transform 160ms ease;
      width: 0;
   }

   .page-trip #trip_menu_div .trip-menu-card-toggle--expanded::after {
      transform: rotate(180deg);
   }

   .page-trip #trip_menu_div .trip-menu-nearby-list:not(.trip-menu-nearby-list--expanded) li:nth-child(n + 2) {
      display: none;
   }

   .page-trip #trip_menu_div .trip-menu-nearby-item--toggle {
      position: relative;
   }

   .page-trip #trip_menu_div .trip-menu-nearby-item--toggle > a {
      padding-right: 3.5rem;
   }

   .page-trip #trip_menu_div .trip-menu-nearby-toggle {
      -webkit-appearance: none;
      appearance: none;
      align-items: center;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0;
      box-shadow: none !important;
      color: var(--brand-accent-dark);
      cursor: pointer;
      display: flex;
      height: 100%;
      justify-content: center;
      outline: 0;
      padding: 0;
      position: absolute;
      right: 0;
      top: 0;
      width: 2.8rem;
   }

   .page-trip #trip_menu_div .trip-menu-nearby-toggle::after {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid currentColor;
      content: '';
      height: 0;
      transition: transform 160ms ease;
      width: 0;
   }

   .page-trip #trip_menu_div .trip-menu-nearby-toggle--expanded::after {
      transform: rotate(180deg);
   }

   /* Keep all lower content on the same edge as the expanded trip list. */
   .page-trip #main_google_map_div,
   .page-trip #div_index_pics,
   .page-trip #div_photos,
   .page-trip #div_trip_videos,
   .page-trip #div_trail {
      margin-left: calc(-1 * var(--site-space-md));
      margin-right: calc(-1 * var(--site-space-md));
      width: calc(100% + (2 * var(--site-space-md)));
   }

   /* Booking's embedded map has its own inner gutter.  Bleed the iframe by
      that gutter so the visible map aligns with the OSM map and section edge. */
   #div_booking_hotels [id^="bookingAffiliateWidget_"] iframe {
      margin-left: calc(-1 * var(--site-space-sm));
      transform: scaleX(1.04);
      transform-origin: left top;
      width: calc(100% + (4 * var(--site-space-sm)));
   }
}

.page-404 #page404 a {
   text-underline-offset: 0.16em;
}

.page-hotel-view #hotel_view {
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   margin: var(--site-space-lg) 0;
   padding: 0;
}

.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 #hotel_view .table_trip_address,
.page-hotel-view #hotel_view .div_trip_address,
.page-hotel-view #hotel_view .paragraph_trip_review,
.page-hotel-view #hotel_view #more_info {
   font-size: var(--font-size-md);
   line-height: 1.6;
}

.page-hotel-view #hotel_view .paragraph_trip_review {
   margin: var(--site-space-md) 0 var(--site-space-lg);
}

.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 #hotel_view .div_hotel_data {
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   font-size: var(--font-size-md);
   line-height: 1.5;
   margin: 0;
   width: 220px;
}

.page-hotel-view #hotel_view .div_hotel_data_inner {
   padding: 0;
}

.page-hotel-view #hotel_view .div_reservation {
   display: inline-block;
   margin-top: var(--site-space-md);
   padding: 0.55rem 1.1rem;
   width: auto;
}

.page-hotel-view .hotel-maps {
   align-items: stretch;
   display: grid;
   gap: var(--site-space-lg);
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.page-hotel-view #div_google_map_slovenia {
   margin-top: 0;
}

.page-search-results #div_main_results {
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   margin: var(--site-space-lg) 0;
   padding: 0;
}

.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,
.page-search-results #div_main_results .i9,
.page-search-results #div_main_results .i10,
.page-search-results #div_main_results .i11,
.page-search-results #div_main_results .i12 {
   background: transparent;
   border: 0;
   border-radius: 0;
   font-size: var(--font-size-md);
   margin: 0 0 0 1.5rem;
   padding: 0.5rem 0;
   transition: color 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,
.page-search-results #div_main_results .i9:hover,
.page-search-results #div_main_results .i9:focus-within,
.page-search-results #div_main_results .i10:hover,
.page-search-results #div_main_results .i10:focus-within,
.page-search-results #div_main_results .i11:hover,
.page-search-results #div_main_results .i11:focus-within,
.page-search-results #div_main_results .i12:hover,
.page-search-results #div_main_results .i12:focus-within {
   background: transparent;
   transform: none;
}

/* 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;
   font-size: 0.97rem;
   margin-left: 2.25rem;
}

.page-search-results #div_main_results .i4 {
   font-weight: 700;
}

.page-search-results #div_main_results .i5 {
   font-weight: 700;
}

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

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

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

.page-search-results #div_main_results .i9 {
   background: transparent;
   font-size: var(--font-size-sm);
   margin-left: 5.25rem;
}

.page-search-results #div_main_results .i10 {
   background: transparent;
   font-size: var(--font-size-sm);
   margin-left: 6rem;
}

.page-search-results #div_main_results .i11 {
   background: transparent;
   font-size: var(--font-size-sm);
   margin-left: 6.75rem;
}

.page-search-results #div_main_results .i12 {
   background: transparent;
   font-size: var(--font-size-sm);
   margin-left: 7.5rem;
}

.page-search-results #div_main_results h2,
.page-search-results #div_main_results h3,
.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,
.page-search-results #div_main_results .i9,
.page-search-results #div_main_results .i10,
.page-search-results #div_main_results .i11,
.page-search-results #div_main_results .i12 {
   transition: color 160ms ease, transform 160ms ease;
}

.page-search-results #div_main_results h2:hover,
.page-search-results #div_main_results h2:focus-within,
.page-search-results #div_main_results h3:hover,
.page-search-results #div_main_results h3:focus-within,
.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,
.page-search-results #div_main_results .i9:hover,
.page-search-results #div_main_results .i9:focus-within,
.page-search-results #div_main_results .i10:hover,
.page-search-results #div_main_results .i10:focus-within,
.page-search-results #div_main_results .i11:hover,
.page-search-results #div_main_results .i11:focus-within,
.page-search-results #div_main_results .i12:hover,
.page-search-results #div_main_results .i12:focus-within {
   transform: translateX(3px);
}

/* The list needs a separator only when it returns from a detailed entry to
   a higher-level place, not under every clickable row. */
.page-search-results #div_main_results :is(.i, .i4, .i5, .i6, .i7, .i8, .i9, .i10, .i11, .i12) + :is(h2, h3),
.page-search-results #div_main_results :is(.i, .i4, .i5, .i6, .i7, .i8, .i9, .i10, .i11, .i12) + .search_best + :is(h2, h3) {
   border-top: 1px solid var(--site-border-color);
   padding-top: var(--site-space-md);
}

.page-search-results #div_main_results :is(.i5, .i6, .i7, .i8, .i9, .i10, .i11, .i12) + .i4,
.page-search-results #div_main_results :is(.i6, .i7, .i8, .i9, .i10, .i11, .i12) + .i5,
.page-search-results #div_main_results :is(.i7, .i8, .i9, .i10, .i11, .i12) + .i6,
.page-search-results #div_main_results :is(.i8, .i9, .i10, .i11, .i12) + .i7,
.page-search-results #div_main_results :is(.i9, .i10, .i11, .i12) + .i8,
.page-search-results #div_main_results :is(.i10, .i11, .i12) + .i9,
.page-search-results #div_main_results :is(.i11, .i12) + .i10,
.page-search-results #div_main_results .i12 + .i11,
.page-search-results #div_main_results :is(.i5, .i6, .i7, .i8, .i9, .i10, .i11, .i12) + .search_best + .i4,
.page-search-results #div_main_results :is(.i6, .i7, .i8, .i9, .i10, .i11, .i12) + .search_best + .i5,
.page-search-results #div_main_results :is(.i7, .i8, .i9, .i10, .i11, .i12) + .search_best + .i6,
.page-search-results #div_main_results :is(.i8, .i9, .i10, .i11, .i12) + .search_best + .i7,
.page-search-results #div_main_results :is(.i9, .i10, .i11, .i12) + .search_best + .i8,
.page-search-results #div_main_results :is(.i10, .i11, .i12) + .search_best + .i9,
.page-search-results #div_main_results :is(.i11, .i12) + .search_best + .i10,
.page-search-results #div_main_results .i12 + .search_best + .i11 {
   border-top: 1px solid var(--site-border-color);
   margin-top: var(--site-space-sm);
   padding-top: var(--site-space-md);
}

/* Make the hierarchy visible at a glance: top-level place groups get a
   stronger separator, while separators between nested places stay quiet. */
.page-search-results #div_main_results > h2:not(:first-child) {
   border-top: 2px solid color-mix(in srgb, var(--site-accent-color) 32%, var(--site-border-color));
   padding-top: var(--site-space-md);
}

.page-search-results #div_main_results :is(.i, .i4, .i5, .i6, .i7, .i8, .i9, .i10, .i11, .i12) + h3,
.page-search-results #div_main_results :is(.i, .i4, .i5, .i6, .i7, .i8, .i9, .i10, .i11, .i12) + .search_best + h3 {
   border-top-color: color-mix(in srgb, var(--site-border-color) 55%, transparent);
}

.page-search-results .search_best {
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;
   margin-bottom: var(--site-space-xs);
   overflow: hidden;
   padding: var(--site-space-xs) 0;
}

/* 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.5rem;
   width: calc(100% - 1.5rem);
}

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

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

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

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

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

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

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

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

/* Skip the photo strips entirely on narrow screens - not worth the mobile
   data for a row of small thumbnails, and it sidesteps lazy-load entirely. */
@media (max-width: 735px) {
   .page-main .site-trip-group-grid .trip_group_div_pic {
      width: calc((100% - (var(--site-space-xs) * 2)) / 3);
   }

   .page-main .site-trip-group-grid .trip_group_pic {
      height: auto;
      width: 100%;
   }

   .page-search-results .search_best {
      display: none;
   }
}

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

.page-main #main_page_text {
   color: var(--site-text-color);
   font-size: var(--font-size-lg);
   line-height: 1.75;
   margin: 0 0 var(--site-space-lg);
   padding: 0;
   width: auto;
}

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

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

.page-main .trip_group {
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   padding: var(--site-space-sm) 0 var(--site-space-lg);
}

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

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

/* Article and blog index: calm reading-sized list instead of the inherited
   compact Verdana/bullet styling. The same treatment serves every language. */
.page-articles #div_main_content {
   margin-left: 0;
   margin-right: 0;
   max-width: none;
}

.page-articles #div_main_content > h1 + #div_articles {
   margin-top: var(--site-space-md);
}

.page-articles #div_articles {
   font-family: var(--site-font-family);
   font-size: var(--font-size-md);
   line-height: 1.45;
   margin: var(--site-space-md) 0 var(--site-space-xl);
}

.page-articles #div_articles .articles_list,
.page-trip #div_trip_articles_list ul,
.page-trip-highlights #div_trip_articles_list ul,
.page-sitemap #sitemap_ul {
   display: grid;
   gap: 0;
   list-style: none;
   margin: 0;
   padding: 0;
}

.page-articles #div_articles .articles_list li,
.page-trip #div_trip_articles_list li,
.page-trip-highlights #div_trip_articles_list li,
.page-sitemap .sitemap_item {
   border: 0;
   border-bottom: 1px solid var(--site-border-color);
   background: transparent;
   border-radius: 0;
   font-size: inherit;
   margin: 0;
   padding: 0;
}

.page-articles #div_articles .articles_list li:first-child,
.page-trip #div_trip_articles_list li:first-child,
.page-trip-highlights #div_trip_articles_list li:first-child,
.page-sitemap .sitemap_item:first-child {
   border-top: 1px solid var(--site-border-color);
}

.page-articles #div_articles .articles_list a,
.page-trip #div_trip_articles_list a,
.page-trip-highlights #div_trip_articles_list a,
.page-sitemap .sitemap_item a {
   color: var(--site-link-color);
   display: block;
   font-weight: 600;
   padding: 0.7rem 0.85rem;
   text-decoration: none;
   transition: background-color 160ms ease, color 160ms ease, padding-left 160ms ease;
}

.page-trip #div_trip_articles_list .trip-article-date {
   color: var(--site-muted-text-color);
   font-size: var(--font-size-sm);
   font-weight: 500;
   white-space: nowrap;
}

.page-articles #div_articles .articles_list a:hover,
.page-articles #div_articles .articles_list a:focus-visible,
.page-trip #div_trip_articles_list a:hover,
.page-trip #div_trip_articles_list a:focus-visible,
.page-trip-highlights #div_trip_articles_list a:hover,
.page-trip-highlights #div_trip_articles_list a:focus-visible,
.page-sitemap .sitemap_item a:hover,
.page-sitemap .sitemap_item a:focus-visible {
   background: var(--site-accent-soft);
   color: var(--site-link-hover-color);
   padding-left: 1.1rem;
}

/* Contextual articles use the same quiet list as /articles, rather than a
   second stack of cards inside an outer card. */
.page-trip #div_trip_articles {
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   margin: var(--site-space-lg) 0;
   padding: 0;
}

.page-trip #div_trip_articles h2 {
   margin: 0 0 var(--site-space-md);
}

.page-trip #div_trip_articles_list {
   font-size: var(--font-size-md);
   margin-left: 0;
}

/* Same "image left, content right" recipe as the shared trip-list-item -
   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-list item stays side-by-side at every width with a small 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;
   background: transparent;
   border: 0;
   border-bottom: 1px solid var(--site-border-color);
   border-radius: 0;
   box-shadow: none;
   column-gap: var(--site-space-md);
   display: grid;
   grid-template-columns: 110px minmax(0, 1fr) max-content;
   grid-template-rows: auto auto;
   margin-bottom: var(--site-space-md);
   padding: 0 0 var(--site-space-md);
   row-gap: 0.9rem;
}

/* Keep the trip name as the entry point and the date as quiet metadata on
   the same row.  The photo and excerpt below follow the shared list layout. */
.page-news .div_news_date {
   color: var(--site-muted-text-color);
   display: inline-block;
   font-size: var(--font-size-xs);
   grid-column: 3;
   grid-row: 1;
   margin: 0;
   padding: 0.18rem 0 0.18rem var(--site-space-sm);
   text-align: right;
   width: fit-content;
}

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

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

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

/* News entries without prose use their extra photographs as the content of
   the right-hand column.  The base thumbnail rule is block-level, so make
   this deliberate mini-gallery a wrapping row instead of a vertical stack. */
.page-news .div_news_description_pics {
   align-items: flex-start;
   display: flex;
   flex-wrap: wrap;
   gap: var(--site-space-sm);
}

.page-news .div_news_description_pics a {
   display: block;
}

@media (max-width: 735px) {
   /* The first three are enough to communicate a photo-only update on a
      phone; retaining the rest makes the news feed needlessly tall. */
   .page-news .div_news_description_pics a:nth-of-type(n + 4) {
      display: none;
   }
}

@media (max-width: 430px) {
   /* Alongside the lead image, the remaining column only fits one natural
      thumbnail at narrow phone widths. */
   .page-news .div_news_description_pics a:nth-of-type(n + 2) {
      display: none;
   }
}

/* Match .trip-list-item .paragraph_trip_review: 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;
}

#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: center;
   text-transform: uppercase;
}

#div_footer_top5 > h2::after,
.footer-top-trips__title::after {
   left: 50%;
   transform: translateX(-50%);
}

.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: transparent;
   border: 0;
   border-radius: 0;
   color: var(--site-text-color);
   display: block;
   float: none;
   overflow: visible;
   padding: 8px 0 10px;
   text-align: center;
   text-decoration: none;
   transition: color 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 {
   box-shadow: none;
   color: var(--site-link-color);
   text-decoration: none;
   transform: none;
}

#div_footer_top5 .div_trip img,
.footer-top-trips__item img {
   background: var(--site-image-preview-background);
   border: var(--site-image-preview-border);
   border-radius: var(--site-image-preview-radius);
   box-shadow: var(--site-image-preview-shadow);
   display: block;
   height: auto;
   margin: 0 auto 10px;
   max-height: 80px;
   max-width: 100%;
   object-fit: contain;
   transition: filter 180ms ease, transform 180ms ease;
   width: auto;
}

#div_footer_top5 .div_trip:hover img,
#div_footer_top5 .div_trip:focus-visible img,
.footer-top-trips__item:hover img,
.footer-top-trips__item:focus-visible img,
.top-trips-panel__item:hover img,
.top-trips-panel__item:focus-visible img {
   filter: saturate(1.08) contrast(1.04);
   transform: scale(1.035);
}

.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: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   margin: var(--site-space-lg) 0;
   padding: 0;
}

.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: transparent;
   border: 0;
   border-radius: 0;
   color: var(--site-text-color);
   display: block;
   overflow: visible;
   padding: 8px 0 10px;
   text-align: center;
   text-decoration: none;
   transition: color 160ms ease;
}

.top-trips-panel__item:hover,
.top-trips-panel__item:focus-visible {
   color: var(--site-link-color);
   transform: none;
}

.top-trips-panel__item img {
   background: var(--site-image-preview-background);
   border: var(--site-image-preview-border);
   border-radius: var(--site-image-preview-radius);
   box-shadow: var(--site-image-preview-shadow);
   display: block;
   height: auto;
   margin: 0 auto 10px;
   max-height: 80px;
   max-width: 100%;
   object-fit: contain;
   transition: filter 180ms ease, transform 180ms ease;
   width: auto;
}

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

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

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

   .top-trips-panel__item img {
      max-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: var(--site-space-xl) 0 var(--site-space-sm);
}

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

#div_booking_hotels [id^="bookingAffiliateWidget_"] {
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   /* Booking's SDK gives its iframe z-index:9999 inline.  Contain that
      third-party layer so it cannot paint above site dialogs/lightboxes. */
   isolation: isolate;
   overflow: hidden;
   position: relative;
   z-index: 0;
}

.page-trip .div_trip_municipalites {
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   font-size: var(--font-size-md);
   line-height: 1.6;
   margin: var(--site-space-sm) 0;
   padding: 0;
}

.page-trip .div_trip_municipalites .title,
.page-trip .div_trip_municipalites #settlements_top,
.page-trip .div_trip_municipalites #settlements {
   font-size: inherit;
   line-height: inherit;
}

/* The 380px is only a loading placeholder (with the shimmer). Once Booking's
   responsive iframe is in, drop it so the card hugs the map instead of leaving
   an empty strip below it on narrow/mobile widths. The JS in
   booking_affiliate_widget.js does the same for browsers without :has(). */
#div_booking_hotels [id^="bookingAffiliateWidget_"]:not(:has(iframe)) {
   min-height: 380px;
}

#div_booking_hotels [id^="bookingAffiliateWidget_"] iframe {
   border: 0;
   border-radius: 0;
   display: block;
   width: 100%;
   z-index: 0 !important;
}

/* Booking's SDK pins the widget container to an inline height: 360px, but on
   narrow widths its map only fills ~270px, leaving an empty strip inside the
   iframe. Override that height (!important beats the inline style) with a 4:3
   box so the responsive map fills the whole container. */
@media (max-width: 735px) {
   :root {
      --site-reading-font-size: var(--font-size-md);
   }

   .page-booking-hotels #hotels_sort {
      width: 100%;
   }

   .page-booking-hotels #hotel_sort_select {
      flex: 1 1 auto;
      min-width: 0;
   }

   .page-booking-hotels .hotels_navigation span {
      padding-right: 0;
   }

   .page-booking-hotels #div_main_data_description {
      column-count: 1;
      column-rule: 0;
   }

   .page-booking-hotels .hotel-regions-title,
   .page-booking-hotels #div_hotel_regions {
      display: none;
   }

   #div_booking_hotels [id^="bookingAffiliateWidget_"] {
      height: auto !important;
      min-height: 0;
      aspect-ratio: 4 / 3;
      max-height: 340px;
   }

   #div_booking_hotels [id^="bookingAffiliateWidget_"] iframe {
      height: 100% !important;
   }
}

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

@media (prefers-reduced-motion: reduce) {
   .site-trip-group-grid .trip_group_div_pic,
   .site-trip-group-grid .trip_group_pic {
      transition: none;
   }

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

/* Public articles no longer have the old ad sidebar. Use that space for a
   comfortable reading column and keep every photo at its native ratio. */
.page-article {
   --article-reading-width: 1120px;
}

.page-article #div_article {
   margin: 0 auto var(--site-space-xl);
   max-width: var(--article-reading-width);
}

.page-article #article_header {
   align-items: center;
   background: var(--site-accent-soft);
   border-bottom: 1px solid var(--site-accent-tint);
   border-radius: var(--site-radius-md);
   color: var(--site-muted-text-color);
   display: flex;
   font-family: var(--site-font-family);
   font-size: var(--font-size-sm);
   font-weight: 600;
   justify-content: space-between;
   margin: calc(var(--site-space-xl) + var(--site-space-sm)) auto 0;
   max-width: var(--article-reading-width);
   padding: 0.7rem 1rem;
}

.page-article #article_date {
   float: none;
   font-size: inherit;
   margin: 0;
}

.page-article h1 {
   margin: 2rem auto 2.25rem;
   max-width: var(--article-reading-width);
}

.page-article .div_article_text {
   font-size: var(--site-reading-font-size);
   line-height: 1.7;
   margin: var(--site-space-lg) 0;
}

.page-article .div_article_photo_inline {
   margin: 0 var(--site-space-md) var(--site-space-sm) 0;
}

.page-article .img_article_photo {
   background: var(--site-image-preview-background);
   border: var(--site-image-preview-border);
   border-radius: var(--site-image-preview-radius);
   box-shadow: var(--site-image-preview-shadow);
   height: auto;
   max-width: min(100%, 16rem);
   object-fit: contain;
   transition: filter 180ms ease, transform 180ms ease;
   width: auto;
}

.page-article .article-photo-link {
   display: block;
   text-align: center;
}

.page-article img.div_article_photo_big {
   background: var(--site-image-preview-background);
   border: var(--site-image-preview-border);
   border-radius: var(--site-image-preview-radius);
   box-shadow: var(--site-image-preview-shadow);
   display: block;
   height: auto;
   margin: var(--site-space-lg) auto var(--site-space-sm);
   max-width: 100%;
   object-fit: contain;
   transition: filter 180ms ease, transform 180ms ease;
   width: auto !important;
}

.page-article .photos_index_group:hover img,
.page-article .photos_index_group:focus-visible img {
   filter: saturate(1.08) contrast(1.04);
   transform: scale(1.015);
}

.page-article .img_article_title {
   background: transparent;
   border: 0;
   border-radius: 0;
   color: var(--site-muted-text-color);
   display: block;
   font-family: var(--site-font-family);
   font-size: var(--site-reading-font-size);
   font-weight: 600;
   line-height: 1.35;
   margin: 0 auto var(--site-space-lg);
   padding: 0;
   text-align: center;
}

.page-article #p_text_bottom {
   border-top: 1px solid var(--site-border-color);
   margin: var(--site-space-xl) auto var(--site-space-lg);
   max-width: var(--article-reading-width);
   padding-top: var(--site-space-lg);
   text-align: center;
}

.page-article #p_text_bottom a {
   align-items: center;
   background: var(--site-accent-soft);
   border: 1px solid var(--site-accent-tint);
   border-radius: var(--site-radius-md);
   color: var(--site-link-color);
   display: inline-flex;
   font-family: var(--site-font-family);
   font-size: var(--font-size-md);
   font-weight: 700;
   gap: 0.45rem;
   padding: 0.65rem 1rem;
   text-decoration: none;
   transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.page-article #p_text_bottom a::before {
   content: "\2190";
   font-size: 1.15em;
}

.page-article #p_text_bottom a:hover,
.page-article #p_text_bottom a:focus-visible {
   background: var(--site-accent-tint);
   color: var(--site-link-hover-color);
   transform: translateX(-2px);
}

@media (min-width: 736px) {
   .page-article h1 {
      margin-top: 3rem;
   }
}

@media (max-width: 735px) {
   .page-article #article_header {
      align-items: flex-start;
      flex-direction: column;
      gap: 0.25rem;
   }

   .page-article .div_article_text {
      line-height: 1.6;
   }

   .page-article .div_article_photo_inline {
      float: left !important;
      margin: 0 var(--site-space-md) var(--site-space-sm) 0 !important;
   }

   .page-article .img_article_photo {
      margin: 0;
      max-width: min(45vw, 16rem) !important;
   }
}

/* Trip highlights page (trip_highlights.php): a magazine-style article of the
   best sights. The legacy stylesheet reserved a 370px right margin for a
   sidebar that isn't on this layout and used heavy drop shadows + white photo
   borders; normalize it to the modern design. Scoped to .page-trip-highlights
   so article.php is untouched. */
.page-trip-highlights #div_article.highlight_article {
   margin: 0;
   max-width: none;
   line-height: 1.7;
}

.page-trip-highlights .div_article_text {
   margin: var(--site-space-md) 0;
   text-align: left;
   font-family: var(--site-font-family);
   font-size: var(--font-size-md);
   line-height: 1.7;
}

.page-trip-highlights picture {
   display: block;
   text-align: center;
}

.page-trip-highlights .div_article_photo_big {
   display: block;
   width: auto;
   max-width: 100%;
   height: auto;
   margin: var(--site-space-md) auto;
   border: 0;
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
}

.page-trip-highlights .div_article_photo_big_leaflet {
   display: block;
   width: 100%;
   margin: var(--site-space-md) 0;
   border: 0;
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
}

.page-trip-highlights .div_article_photo_big_portrait {
   width: auto;
   max-width: 60%;
   margin: var(--site-space-md) auto;
   border: 0;
   border-radius: var(--site-radius-lg);
   box-shadow: var(--site-card-shadow);
   display: block;
}

.page-trip-highlights .img_article_photo {
   padding: 0;
   border: 0;
   border-radius: var(--site-radius-md);
   box-shadow: var(--site-card-shadow);
}

.page-trip-highlights .highlight_photo_title {
   margin: 0.4rem 0 var(--site-space-md);
   color: var(--site-muted-text-color);
   font-size: var(--font-size-sm);
   text-align: center;
}

#div_trip_articles.highlight_trip_list {
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   margin-top: var(--site-space-lg);
   padding: 0;
}

.page-trip-highlights #div_trip_articles_list {
   margin-left: 0;
}

@media (max-width: 735px) {
   /* The compact dropdown already names the active secondary page. */
   #about_us_main_menu + h1 {
      display: none;
   }

   .page-trip-highlights .div_article_photo_big_portrait {
      max-width: 100%;
   }
}

@media (max-width: 735px) {

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

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

   .trip-list-item .paragraph_trip_review {
      -webkit-line-clamp: 4;
      line-clamp: 4;
   }

   #div_footer_top5,
   .footer-top-trips {
      margin-bottom: var(--site-space-sm);
      padding: var(--site-space-xs) 0;
      width: 100%;
   }

   #div_footer_top5 > h2,
   .footer-top-trips__title {
      margin-bottom: var(--site-space-xs);
   }

   .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 {
      max-height: 46px;
      margin-bottom: 5px;
   }

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

   #footer_offer {
      padding-top: var(--site-space-xs);
   }

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

   .site-header__options-wrap {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      order: 2;
      position: relative;
   }

   .site-header__options-toggle-checkbox {
      cursor: pointer;
      height: 40px;
      margin: 0;
      opacity: 0;
      position: absolute;
      right: 0;
      top: 0;
      width: 40px;
      z-index: 2;
   }

   .site-header__options-toggle-label {
      align-items: center;
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.32);
      border-radius: 999px;
      color: #fff;
      display: flex;
      height: 40px;
      justify-content: center;
      width: 40px;
   }

   #div_options,
   .site-header__options {
      align-items: flex-end;
      background: var(--brand-header-to);
      border: 1px solid rgba(96, 184, 255, 0.4);
      border-radius: var(--site-radius-md);
      box-shadow: 0 16px 32px rgba(0, 20, 50, 0.35);
      display: none;
      flex-direction: column;
      gap: 0.7rem;
      padding: 0.85rem;
      position: absolute;
      right: 0;
      top: calc(100% + 0.5rem);
      width: max-content;
      z-index: 5;
   }

   .site-header__options-toggle-checkbox:checked ~ #div_options,
   .site-header__options-toggle-checkbox:checked ~ .site-header__options {
      display: flex;
   }

   #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 > a,
   nav ul ul li > p > a,
   nav ul ul li > .submenu {
      font-size: var(--font-size-sm);
      line-height: 1.25;
      padding: 0.52rem 0.95rem;
   }

   nav ul ul li > p {
      padding: 0;
   }

   #top_menu_hotels > ul,
   #top_menu_trips > ul,
   #top_menu_sights > ul {
      display: none;
   }

   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);
      padding-bottom: var(--site-space-sm);
      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: 0;
      min-height: 0;
      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_table .td_value {
      width: 100%;
   }

   #search_hotel_table .booking-date-display {
      flex: 1 1 auto;
      min-width: 0;
      width: auto;
   }

   .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 {
      margin-left: 0;
      margin-right: 0;
      width: auto;
   }

   .page-trip #div_main_trips {
      margin-left: 1rem;
      margin-right: 1rem;
      width: auto;
   }

   /* Keep the trip lists and media at their established inset, while the
      map and the introductory description align with the wider header cards. */
   .page-trip #main_map_div,
   .page-trip .trip-description-shell {
      margin-left: -1rem;
      margin-right: -1rem;
   }

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

   /* Title on its own full-width row on top, photo below it - side by side
      the photo squeezes the title column so hard that even short names
      like "Hrvaska" break mid-word ("HRVASK / A"). */
   #div_main_trip_data {
      align-items: start;
      display: grid;
      gap: 0.6rem;
      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
      padding: 0.5rem 0;
   }

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

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

   #main_pic_small {
      height: auto;
      margin: 0;
      width: auto;
   }

   .trip_main_title {
      font-size: clamp(1.65rem, 6.4vw, 2.15rem);
      font-weight: 800;
      letter-spacing: 0.04em;
      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;
   }

   .page-best .trip_div,
   .page-best .trip_div_best {
      display: grid;
   }

   .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-photos #div_photos {
      margin-top: var(--site-space-sm);
   }

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

   .page-trip .trip-description-shell.is-collapsed #div_main_data_description {
      margin-bottom: 0;
      max-height: var(--trip-description-collapsed-height);
      overflow: hidden;
   }

   .page-trip .trip-description-shell.is-collapsible .trip-description-toggle {
      align-items: center;
      background: transparent;
      border: 0;
      box-shadow: none;
      color: var(--site-link-color);
      cursor: pointer;
      display: inline-flex;
      gap: 0.45rem;
      justify-content: flex-end;
      line-height: 1;
      margin: 0 0 var(--site-space-lg);
      min-height: 1.4rem;
      padding: 0;
      width: 100%;
   }

   .page-trip .trip-description-shell.is-collapsible .trip-description-toggle[hidden] {
      display: none;
   }

   .page-trip .trip-description-shell.is-collapsible .trip-description-toggle:hover,
   .page-trip .trip-description-shell.is-collapsible .trip-description-toggle:focus-visible {
      color: var(--site-link-hover-color);
      transform: none;
   }

   .page-trip .trip-description-toggle__ellipsis {
      font-size: 1.35rem;
      font-weight: 700;
      line-height: 1;
   }

   .page-trip .trip-description-toggle__caret {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid currentColor;
      height: 0;
      width: 0;
   }

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

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

   .page-booking-hotels .hotel_row .div_hotel_data_inner {
      padding: 0;
   }

   .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-hotel-view .hotel-maps {
      grid-template-columns: minmax(0, 1fr);
   }

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

/* Very narrow phones: the checkin/checkout date fields don't have room to
   sit side by side without the calendar icon overlapping the date text, so
   stack each on its own row instead. */
@media (max-width: 359px) {
   #search_hotel_table {
      grid-template-columns: minmax(0, 1fr);
   }
}

@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;
      min-height: var(--hotels-header-height);
   }

   .hotel-header-card {
      min-height: var(--hotels-header-height);
   }

   .hotel-header-card:not(:first-child) {
      display: none;
   }
}

/* 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;
}

/* ===================================================================
   Mobile trip header + collapsible tab menu (JS/trip_menu.js).
   The current-selection toggle button is hidden on desktop; on phones it
   replaces the tall stacked tab list, and the hero photo + subtitle are
   hidden to save vertical space.
   =================================================================== */
.trip-menu-toggle {
   display: none;
}

@media (max-width: 735px) {
   /* The secondary site menu uses the same compact current-selection control
      as the trip menu instead of occupying several rows above page content. */
   #about_us_main_menu {
      border-bottom: 0;
      margin: var(--site-space-md) 0 var(--site-space-lg);
      padding: 0;
   }

   .about-us-menu-toggle {
      align-items: center;
      background: color-mix(in srgb, var(--site-text-color) 3%, #ffffff);
      border: 1px solid color-mix(in srgb, var(--site-text-color) 14%, var(--site-border-color));
      border-radius: var(--site-radius-sm);
      box-shadow: 0 1px 3px rgba(31, 41, 51, 0.12);
      color: var(--brand-heading-2, #0f4c81);
      cursor: pointer;
      display: flex;
      font-family: var(--site-font-family);
      font-size: var(--font-size-sm);
      font-weight: 700;
      justify-content: space-between;
      letter-spacing: 0.04em;
      min-height: 3rem;
      padding: 0.6rem 1.05rem;
      text-align: left;
      text-transform: uppercase;
      width: 100%;
   }

   .about-us-menu-toggle:hover,
   .about-us-menu-toggle:focus-visible {
      background: color-mix(in srgb, var(--site-text-color) 8%, #ffffff);
      border-color: color-mix(in srgb, var(--site-text-color) 24%, var(--site-border-color));
      box-shadow: 0 0 0 2px rgba(95, 108, 123, 0.16);
      color: var(--site-text-color);
   }

   .about-us-menu-toggle__caret {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid currentColor;
      height: 0;
      transition: transform 160ms ease;
      width: 0;
   }

   #about_us_main_menu.is-open .about-us-menu-toggle__caret {
      transform: rotate(180deg);
   }

   #about_us_main_menu ul {
      border: 0;
      border-radius: 0;
      display: none;
      margin-top: var(--site-space-sm);
      overflow: visible;
   }

   #about_us_main_menu.is-open ul {
      display: block;
   }

   #about_us_main_menu ul li a {
      border-bottom: 1px solid var(--site-border-color);
      font-size: var(--font-size-sm);
      padding: 0.72rem 0.85rem;
      transition: background-color 160ms ease, color 160ms ease, padding-left 160ms ease;
   }

   #about_us_main_menu ul li:first-child a {
      border-top: 1px solid var(--site-border-color);
   }

   #about_us_main_menu ul li a:hover,
   #about_us_main_menu ul li a:focus-visible {
      background: var(--site-accent-soft);
      color: var(--site-link-hover-color);
      padding-left: 1.1rem;
      box-shadow: none;
   }

   #about_us_main_menu ul li:last-child a {
      border-bottom: 0;
   }

   #about_us_main_menu ul li.active a,
   #about_us_main_menu ul li.active span a {
      background: var(--site-accent-soft);
      box-shadow: inset 3px 0 0 var(--site-accent-color);
      color: var(--brand-accent-dark);
   }

   /* Free up vertical space on phones. */
   .trip-header-media,
   #div_trip_subname {
      display: none;
   }

   /* Collapse the tab list behind a single current-selection button. */
   #div_trip_menu {
      position: relative;
      border-bottom: 0;
      margin: 0.6rem 0 1.1rem;
      width: auto;
   }

   .trip-menu-toggle {
      align-items: center;
      background: color-mix(in srgb, var(--site-text-color) 3%, #ffffff);
      border: 1px solid color-mix(in srgb, var(--site-text-color) 14%, var(--site-border-color));
      border-radius: var(--site-radius-sm);
      box-shadow: 0 1px 3px rgba(31, 41, 51, 0.12);
      color: var(--brand-heading-2, #0f4c81);
      cursor: pointer;
      display: flex;
      font-family: var(--site-font-family);
      font-size: var(--font-size-sm);
      font-weight: 700;
      gap: 0.5rem;
      justify-content: space-between;
      letter-spacing: 0.04em;
      min-height: 3rem;
      padding: 0.6rem 1.05rem;
      text-transform: uppercase;
      width: 100%;
   }

   .trip-menu-toggle:hover,
   .trip-menu-toggle:focus-visible {
      background: color-mix(in srgb, var(--site-text-color) 8%, #ffffff);
      border-color: color-mix(in srgb, var(--site-text-color) 24%, var(--site-border-color));
      box-shadow: 0 0 0 2px rgba(95, 108, 123, 0.16);
      color: var(--site-text-color);
   }

   .trip-menu-toggle:hover {
      transform: none;
   }

   .trip-menu-toggle__caret {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid currentColor;
      flex: 0 0 auto;
      height: 0;
      transition: transform 160ms ease;
      width: 0;
   }

   #div_trip_menu.is-open .trip-menu-toggle__caret {
      transform: rotate(180deg);
   }

   #div_trip_menu ul {
      border: 1px solid var(--site-border-color);
      border-radius: var(--site-radius-md);
      display: none;
      margin-top: 0.4rem;
      overflow: hidden;
   }

   #div_trip_menu.is-open ul {
      display: block;
   }

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

   #div_trip_menu li.active a {
      background: var(--site-accent-soft);
   }
}

/* Illustrated static map rendered as a Leaflet image-overlay (map_viewer.php).
   Shares the OSM maps' photo-marker/zoom logic. */
.static-map-illustrated {
   width: 100%;
   border-radius: var(--site-radius-md);
   overflow: hidden;
}
.booking-affiliate-fallback {
  display: flex;
  justify-content: center;
  margin: 1rem 0 1.5rem;
}

.booking-affiliate-fallback a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.65rem 1.15rem;
  border-radius: 0.7rem;
  background: linear-gradient(135deg, var(--brand-bright, #1688c8), var(--brand-accent, #15628f));
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0.45rem 1rem rgba(15, 74, 109, 0.2);
}

.booking-affiliate-fallback a:hover,
.booking-affiliate-fallback a:focus-visible {
  color: #fff;
  transform: translateY(-1px);
}