/* ----------------------------------------------------------------
   Custom CSS
   Add all your Custom Styled CSS here for New Styles or
   Overwriting Default Theme Styles for Better Handling Updates
----------------------------------------------------------------- */

/* ===============================================================
   1) GLOBAL – fontovi & varijable
   =============================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@300;400;600&display=swap');

:root {
  --ana-teal: #2eb6c4;        /* glavna tirkizna */
  --ana-teal-dark: #20939f;
  --ana-text: #4a4a4a;        /* siva za tekst */
  --ana-light-grey: #f5f7f8;  /* svijetla pozadina blokova */
  --ana-border: #dde3e6;
}

*:focus,
*:focus-visible{
	outline: none !important;
	box-shadow: none !important;
}

/* ===============================================================
   2) CJENIK – page title + page-menu + tabs
   =============================================================== */

/* Page title sitno dotjeraj */
#page-title h1 { margin-bottom: .25rem; }
#paxtxt { opacity: .75; font-size: .95rem; }

/* Page-menu: ujednači razmake i inpute */
#page-menu-wrap{
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
#page-menu .page-menu-row .row{
  margin: 0;
  gap: .5rem 0;
}

/* Label (lead) */
#page-menu label.lead,
#page-menu .lead{
  font-size: 1.05rem !important;
  opacity: .85;
  line-height: 1;
}

/* Input group addon */
#page-menu .input-group-text{
  padding: .25rem .5rem;
  border-radius: 0;
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.02);
}

/* Form controls */
#page-menu input.form-control,
#page-menu .form-control{
  height: 38px;
  line-height: 38px;
  padding: 0 .5rem;
  border-color: rgba(0,0,0,.14) !important;
  background: #fff;
}

#page-menu input.form-control:focus,
#page-menu .form-control:focus{
  border-color: rgba(30,111,136,.45) !important;
  box-shadow: 0 0 0 .2rem rgba(30,111,136,.12);
}

/* Refresh gumb (ikonica, ne link) */
#refresh.btn-link{
  text-decoration: none;
  opacity: .75;
  transition: opacity .15s ease, transform .15s ease;
}
#refresh.btn-link:hover{
  opacity: 1;
  transform: rotate(-10deg);
}

/* (ako je refresh button .btn u page-menu) */
#page-menu .btn#refresh{
  line-height: 1;
  font-size: 1.15rem !important;
  opacity: .75;
}
#page-menu .btn#refresh:hover{ opacity: 1; }

/* Radio “soft pills” */
.radio-style-1-label{
  border: 1px solid rgba(0,0,0,.12);
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(0,0,0,.02);
  margin: 0 .25rem 0 0;
  line-height: 1.2;
  transition: all .15s ease;
}

/* compact varijanta (malo stisnuto) */
.radio-style-1-label{
  padding: .20rem .55rem !important;
  margin: 0 .15rem 0 0 !important;
}

.radio-style:checked + .radio-style-1-label{
  border-color: rgba(30,111,136,.35);
  background: rgba(30,111,136,.10);
  color: #12576E;
}

/* Tabs: smiri rubove, uskladi tipografiju */
.tabs.tabs-bordered .tab-nav{
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.tabs.tabs-bordered .tab-nav li a{
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .82rem;
  padding: 14px 16px;
}
.ui-tabs-active a,
.tabs .tab-nav li.ui-tabs-active a{
  color: #12576E !important;
}


/* ===============================================================
   3) CJENIK – output tablice (klik redovi, headeri, sekcije)
   =============================================================== */

#output_div .table{ margin-bottom: 1.25rem; }

/* Table header */
#output_div .table thead th,
#output_div table tr:first-child th{
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0,0,0,.15);
}

/* Borders */
#output_div .table td,
#output_div .table th{
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Klikabilni redovi */
#output_div .clickable-row{ cursor: pointer; }
#output_div .clickable-row:hover td{
  background: rgba(30,111,136,.06);
}

/* Brojevi – tabular */
#output_div td{ font-variant-numeric: tabular-nums; }

/* Aktivna sezona (smiri bootstrap success) */
#output_div td.table-success,
#output_div th.table-success{
  background-color: rgba(25,135,84,.10) !important;
}

/* Sekcijski naslov (Noćenje, Polupansion...) */
#output_div table tr > td[colspan="5"].text-start.fw-bold{
  background: rgba(0,0,0,.02);
  border-top: 1px solid rgba(0,0,0,.10);
  border-bottom: 1px solid rgba(0,0,0,.10);
  padding: 10px 12px;
  font-size: .95rem;
  letter-spacing: .02em;
}

/* Divider + “ostale usluge” unutar tablice */
#output_div .divider{
  margin: 4px 0 6px;
  opacity: .6;
}
#output_div h4{
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
}
/* ===== CJENIK PAGE – polish u tvom duhu (bez promjene identiteta) ===== */

			/* page title */
			#page-title h1{ line-height:1.1; }
			#paxtxt{ opacity:.8; }

			/* page-menu (compact + prozračno na lg) */
			#page-menu-wrap{
				padding: 6px 0;
				border-bottom: 1px solid rgba(0,0,0,.06);
			}
			#page-menu .input-group-text{
				padding: .25rem .5rem;
				border-radius: 0;
				border-color: rgba(0,0,0,.14);
				background: rgba(0,0,0,.02);
			}
			#page-menu .form-control{
				height: 32px;
				padding: 0 .5rem;
				border-color: rgba(0,0,0,.14) !important;
			}
			#page-menu .btn#refresh{
				line-height: 1;
				font-size: 1.15rem !important;
				opacity: .75;
			}
			#page-menu .btn#refresh:hover{ opacity: 1; }
			#page-menu .lead{
				font-size: 1rem !important;
				opacity: .8;
				line-height: 1;
				white-space: nowrap;
			}

			/* radio pills – manji i uredniji */
			.radio-style-1-label{
				padding: .20rem .55rem !important;
				margin: 0 .15rem 0 0 !important;
				border-radius: 999px;
				border: 1px solid rgba(0,0,0,.12);
				background: rgba(0,0,0,.02);
				line-height: 1.2;
			}
			.radio-style:checked + .radio-style-1-label{
				background: rgba(30,111,136,.10);
				border-color: rgba(30,111,136,.35);
				color: #12576E;
			}

			@media (min-width: 992px){
				#page-menu-wrap{ padding: 10px 0; }
				#page-menu .form-control{ height: 36px; }
				#page-menu .input-group-text{ padding: .35rem .6rem; }
				.radio-style-1-label{ padding: .25rem .65rem !important; }
			}

			/* tabs: mirniji header + bolji rhythm */
			#tab-2 .tab-nav{
				background: transparent;
				border-bottom: 1px solid rgba(0,0,0,.08);
			}
			#tab-2 .tab-nav li a{
				font-weight: 600;
				letter-spacing: .03em;
				text-transform: uppercase;
				font-size: .82rem;
				padding: 14px 16px;
			}
			#tab-2 .tab-container{ padding-top: 12px; }

			/* output tables: elegantnije */
			#output_div .table{ margin-bottom: 1.25rem; }
			#output_div .table thead th,
			#output_div .table tr:first-child th{
				font-size: .8rem;
				letter-spacing: .04em;
				text-transform: uppercase;
				border-bottom: 1px solid rgba(0,0,0,.15);
			}
			#output_div td{
				font-variant-numeric: tabular-nums;
			}
			#output_div .clickable-row{ cursor: pointer; }
			#output_div .clickable-row:hover td{
				background: rgba(0,0,0,.025);
			}
			#output_div td.table-success,
			#output_div th.table-success{
				background-color: rgba(25,135,84,.10) !important;
			}

			/* Sezone: bolji izgled liste */
			.cjenik-sezone .small.d-flex{
				padding: .35rem .25rem;
				border-bottom: 1px dashed rgba(0,0,0,.10);
			}
			.cjenik-sezone .small.d-flex:hover{
				background: rgba(0,0,0,.02);
			}
			.cjenik-sezone a{
				display: inline-block;
				margin-top: .5rem;
			}


/* ===============================================================
   4) SEZONE DESNO – rhythm + “legend look”
   =============================================================== */
/* ===============================
   SEZONE – ČISTA LEGENDA
   =============================== */

.cjenik-sezone{
	font-size: .9rem;
}

/* tablica bez “tabličnog” izgleda */
.sezone-table{
	border-collapse: separate;
	border-spacing: 0 4px; /* whitespace između redova */
}

.sezones-table tr,
.sezone-table td{
	border: 0;
}

.sezone-table td{
	padding: .35rem .25rem;
	vertical-align: middle;
}

/* stupci */
.sezona-code{
	width: 36px;
	text-align: center;
}

.sezona-dates{
	letter-spacing: .02em;
	color: #4A6F7C; /* tvoj muted */
	white-space: nowrap;
}

/* i-circled malo smiri */
.sezona-code .i-circled{
	transform: scale(.9);
	opacity: .9;
}

/* highlight aktivne sezone – samo diskretna pozadina */
.sezone-table tr.table-success{
	background: rgba(25,135,84,.10);
}

/* nema hover efekata – referentna legenda */


/* ===============================================================
   5) FACT SHEET – wrapper + hero + sekcije + layout
   =============================================================== */

.fact-sheet{
  max-width: 960px;
  margin: 0 auto;
  padding: 30px;
  padding-top: 5px !important;

  font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ana-text);
  line-height: 1.6;
  background: #ffffff;
}

/* HERO */
.fact-sheet-hero{ margin-bottom: 20px; }

.fact-sheet-hero-image{
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  margin-bottom: 30px;
  object-fit: cover;
}

/* Title block (default) */
.fact-sheet-title-block{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ana-teal) !important;
}
.fact-sheet-title-block h1{
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  font-size: 36px;
  margin: 0 0 5px;
}
.fact-sheet-title-block .subtitle{
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 400;
  margin: 6px 0 0;
}

/* HERO refinement (split/editorial) */
.fact-sheet-hero.hero-split{
  display: grid;
  grid-template-columns: 40% 60%;
  column-gap: 24px;
  align-items: start;
  padding-bottom: 7px;
  margin-bottom: 0;
}

.hero-left h1{
  font-family: 'Montserrat', sans-serif;
  font-size: 42px;
  font-weight: 100;
  letter-spacing: 0.25em;
  margin-bottom: 0 !important;
  line-height: normal;
}
.hero-left .subtitle{
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 0 !important;
}
.hero-left .fact-sheet-meta,
.hero-right{
  letter-spacing: normal !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin-right: 30px !important;
}
.hero-left .fact-sheet-meta p,
.hero-right p{
  letter-spacing: normal !important;
  margin-bottom: 6px;
}
.hero-left .fact-sheet-meta .label,
.hero-right .label{
  letter-spacing: normal !important;
  font-weight: 600;
  opacity: 0.9;
}

/* Kontakt / meta */
.fact-sheet-meta{
  margin-top: 0;
  text-align: right;
  font-size: 13px;
  color: var(--ana-text);
}
.fact-sheet-meta p{ margin: 0; padding: 0; }
.fact-sheet-meta span.label{
  font-weight: 600;
  text-transform: none;
}

/* Intro */
.fact-sheet-intro{
  margin-top: 32px;
  font-size: 15px;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Sekcije */
.fact-sheet-section{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--ana-border);
}
.fact-sheet-section:first-of-type{ border-top: none; }

.fact-sheet-section h2{
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ana-teal-dark) !important;
  margin: 0 0 18px;
}
.fact-sheet-section h3{
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ana-teal-dark) !important;
  margin: 0 0 18px;
}

/* Dva stupca */
.fact-sheet-columns{
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 40px;
}

/* Lijevi stupac */
.fact-sheet-col-left p{
  margin: 0 0 36px;
  font-size: 14px;
}
.fact-sheet-room-title{
  font-weight: 600;
  font-size: 15px;
  margin: 7px 0 3px;
}

/* Desni stupac */
.fact-sheet-col-right{
  background: var(--ana-light-grey);
  border-radius: 6px;
  padding: 18px 20px 20px;
  font-size: 14px;
  border: 1px solid var(--ana-border);
}
.fact-sheet-col-right h3{
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ana-teal-dark) !important;
  margin: 0 0 10px;
}

/* Liste u fact-sheetu */
.fact-sheet-list{
  list-style: none;
  padding-left: 0;
  margin: 0 0 12px;
}
.fact-sheet-list li{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
}
.fact-sheet-list li::before{
  content: "▪";
  font-size: 10px;
  line-height: 1.6;
  color: var(--ana-teal-dark) !important;
  margin-top: 3px;
}

/* Lokacija & politike */
.fact-sheet-two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 0;
}
.fact-sheet-two-col h3{
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ana-teal-dark) !important;
  margin-bottom: 10px;
}

/* Usklađivanje “fancy-title” h4 s fact-sheet stilom */
.fancy-title.title-border h4,
.fact-sheet-section h4{
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ana-teal-dark);
  margin: 0 0 10px;
}

/* Usklađivanje listi u sekcijama */
.fact-sheet-section ul{
  margin: 0 0 14px;
  padding-left: 0;
}
.fact-sheet-section ul li{
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
  list-style: none;
}
.fact-sheet-section ul li::before{
  content: "▪";
  font-size: 10px;
  color: var(--ana-teal-dark);
  margin-top: 4px;
}
.fact-sheet-section ul ul li::before{ color: var(--ana-teal); }


/* ===============================================================
   6) RULES BLOK (fact-sheet)
   =============================================================== */

.fact-sheet--rules{
  margin-top: 22px;
  padding: 24px 24px;
  background: var(--ana-light-grey);
  border-radius: 6px;
  border: 1px solid var(--ana-border);
}

.fact-sheet-rules-title{
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ana-teal-dark) !important;
  text-align: center;
  margin: 0 0 4px;
}
.fact-sheet-rules-subtitle{
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--ana-text);
  margin: 0 0 16px;
}

.fact-sheet-rules-text{
  font-size: 14px;
  line-height: 1.7;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
  white-space: normal;
}

.fact-sheet-rules-text h2{
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ana-teal-dark) !important;
  margin: 20px 0 10px;
}
.fact-sheet-rules-text h2:first-child{ margin-top: 0; }

.fact-sheet-rules-text h3{
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin: 10px 0 4px;
  color: var(--ana-teal-dark);
}

.fact-sheet-rules-text p{ margin: 0 0 8px; }
.fact-sheet-rules-text ul{
  margin: 0 0 10px 18px;
  padding: 0;
}
.fact-sheet-rules-text hr{
  border: 0;
  border-top: 1px solid var(--ana-border);
  margin: 20px 0;
}


/* ===============================================================
   7) TABLICE U FACT-SHEETU (themed)
   =============================================================== */

.fact-sheet-section table{
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 0;
  font-size: 14px;

  border: 1px solid var(--ana-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--ana-light-grey);
}

.fact-sheet-section table thead th{
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;

  color: var(--ana-teal-dark) !important;
  background: var(--ana-light-grey);
  padding: 5px 7px;

  border-bottom: 1px solid rgba(32,147,159,0.35);
  text-align: left;
}

.fact-sheet-section table tbody td{
  padding: 5px 7px;
  border-bottom: 1px solid rgba(221,227,230,0.7);
}

.fact-sheet-section table th + th,
.fact-sheet-section table td + td{
  border-left: 1px solid rgba(221,227,230,0.5);
}

.fact-sheet-section table tbody tr:last-child td{ border-bottom: none; }

.fact-sheet-section table td:last-child,
.fact-sheet-section table th:last-child{
  text-align: right;
  white-space: nowrap;
}


/* ===============================================================
   8) RESPONSIVE
   =============================================================== */

@media (max-width: 768px){
  .fact-sheet{ padding: 30px 16px 40px; }
  .fact-sheet-columns{ grid-template-columns: 1fr; gap: 24px; }
  .fact-sheet-two-col{ grid-template-columns: 1fr; gap: 20px; }
  .fact-sheet-title-block h1{ font-size: 24px; }
}


/* ===============================================================
   9) PRINT – keep colours & backgrounds, don't touch layout
   =============================================================== */
@media print{
  *{
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .fact-sheet{
    background: #ffffff !important;
    color: var(--ana-text) !important;
    box-shadow: none !important;
  }

  .fact-sheet-col-right,
  .fact-sheet--rules{
    background: var(--ana-light-grey) !important;
    border-color: var(--ana-border) !important;
  }

  .fact-sheet-section h2,
  .fact-sheet-col-right h3,
  .fact-sheet-two-col h3,
  .fact-sheet-rules-title{
    color: var(--ana-teal-dark) !important;
  }

  a[href]:after{ content: "" !important; }

  img{
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid !important;
  }

  .fact-sheet-section,
  .fact-sheet--rules,
  .fact-sheet-rules-text{
    page-break-inside: avoid;
    break-inside: avoid;
  }
}