/* =======================
   Booking UI – cleaned & organized
   ======================= */

/* Design tokens (scoped) */
.sb-app {
  /* Colors */
  --cultured-white-greyscale-cw-100: #FEFDFC;
  --cultured-white-greyscale-cw-200: #F6F4F0;
  --cultured-white-greyscale-cw-300: #DBD9D5;
  --cultured-white-greyscale-cw-950: #191818;
  --green-700: #0C3328;
  --green-800: #0E3B2E;

  /* Corners */
  --Corners-Medium: 0.5rem;

  /* Typography */
  --font-family-base: 'Satoshi-Variable', sans-serif;
  --font-family-head: 'Sentient-Variable', serif;
  --Typography-Font-Size-Base: var(--font-base, 1.278rem);
  --Typography-Font-Size-Small: var(--font-small, 1.039rem);
  --Typography-Line-Hight-Base: var(--line-height-body, 1.611rem);
  --Typography-Line-Hight-Small: var(--line-height-body, 1.306rem);

  /* App frame */
  max-width: 1280px;
  background: transparent;

}

/* Headings use the head font */
.sb-app h1,
.sb-app h2,
.sb-app h3,
.sb-app h4,
.sb-app h5,
.sb-app h6 { font-family: var(--font-family-head); }

/* Title */
.sb-tagline h4 {
  font-weight: bold;
  font-size: var(--font-h4, 1.94rem);
  
  line-height: 1.25;
  color: var(--cultured-white-greyscale-cw-950);
}

/* Layout */
.sb-row { display: flex; gap: var(--Padding-Small, 20px); flex-wrap: wrap; }
.sb-col { flex: 1 1 360px; min-width: 320px; }
.sb-hidden { display: none !important; }

/* Labels */
.sb-label {
  color: var(--cultured-white-greyscale-cw-950, #191818);
  text-align: left;
  font-size: var(--Typography-Font-Size-Small, 1.16875rem);
  font-weight: 700;
  line-height: var(--Typography-Line-Hight-Small, 1.46875rem);
  display: block;              /* enable vertical margins */
  width: 100%;
  margin-top: var(--Padding-3XSmall);
  margin-bottom: var(--Padding-6XSmall);
  font-family: var(--font-family-base);
}

/* Notes under labels (time info and generic notes) */
.sb-vrijeme-desc.note,
.note {
  color: var(--cultured-white-greyscale-cw-950, #191818);
  font-size: var(--Typography-Font-Size-Small, 1.16875rem);
  line-height: var(--Typography-Line-Hight-Small, 1.46875rem);
  font-family: var(--font-family-base);
  display: grid;
  justify-content: flex-start;
  margin-bottom: var (--Padding-6XSmall);
  
}

/* Inputs */
.sb-input, .sb-select, .sb-text,
input[type="email"].sb-input,
input[type="tel"].sb-input {
  width: 100%;
  padding: var(--Padding-5XSmall);
  border-radius: var(--Corners-Medium, 0.5rem);
  border: 1px solid var(--cultured-white-greyscale-cw-300, #DBD9D5);
  background: var(--cultured-white-greyscale-cw-100, #FEFDFC);
  font-size: var(--Typography-Font-Size-Base, 1.4375rem);
  font-style: normal;
  line-height: var(--Typography-Line-Hight-Base, 1.8125rem); /* 126.087% */
  margin-bottom: var(--Padding-6XSmall);
  font-family: var(--font-family-base);
}

.sb-input:focus, .sb-select:focus, .sb-text:focus,
input[type="email"].sb-input:focus,
input[type="tel"].sb-input:focus {
  border-radius: var(--Corners-Medium, 0.5rem);
  border: 1px solid var(--cultured-white-greyscale-cw-950, #191818);
  background: var(--cultured-white-greyscale-cw-100, #FEFDFC);
  outline: none;
  color: var(--cultured-white-greyscale-cw-950, #191818);
}

/* Buttons */
.sb-btn {
  background: var(--green-700);
  font-size: var(--font-base);
  color: var(--cultured-white-greyscale-cw-200, #FEFDFC);
  padding: var(--Padding-5XSmall) var(--Padding-Small);
  border-radius: var(--Corners-Medium, 0.5rem);
  cursor: pointer;
  font-weight: 500;
  transition: background .3s ease, transform .2s ease;
  text-align: center;
  font-weight: 500;
  min-width: 10.5rem;
  border: 0;
  font-family: var(--font-family-base);
}
.sb-btn:hover:not(:disabled) { background: var(--green-800); transform: translateY(-1px); }
.sb-btn:disabled { opacity: .5; cursor: not-allowed; }

.nav-buttons { display:flex; gap: var(--Padding-2XSmall); justify-content:space-between; margin-top:var(--Padding-2XSmall); }
.nav-buttons .sb-btn:first-child { background:var(--cultured-white-greyscale-cw-300, #DBD9D5); color: var(--cultured-white-greyscale-cw-950, #191818); }
.nav-buttons .sb-btn:first-child:hover { background:#DBD9D5; }

/* Calendar */
.sb-calendar { background: var(--cultured-white-greyscale-cw-100); padding: var(--Padding-4XSmall); border-radius: var(--Corners-Medium);border: 1px solid var(--cultured-white-greyscale-cw-300); margin-bottom: var(--Padding-2XSmall); }
.sb-cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap: var(--Padding-4XSmall, 0.5rem); }
.sb-cal-header button { padding: var(--Padding-6XSmall) var(--Padding-2XSmall); border-radius:var(--Corners-Medium); background:#0C3328; color:#FEFDFC; cursor:pointer; font-weight:700; transition:background .3s ease, transform .2s ease; }
.sb-cal-header button:hover { background:#0E3B2E; transform: translateY(-1px); }
.sb-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap: var(--Padding-7XSmall, 0.313rem); }
.sb-day-name { text-align:center; font-size:var(--font-small); color:#353433; font-weight:500; padding: var(--Padding-7XSmall, 0.313rem) 0; }
.sb-date {
  background:#FEFDFC; border:1px solid var(--cultured-white-greyscale-cw-300); padding: var(--Padding-5XSmall); text-align:center;
  border-radius:var(--Corners-Medium); cursor:pointer; user-select:none; transition:all .25s ease;
}
.sb-date:hover:not(.disabled):not(.selected) { background:#F6F4F0; transform: translateY(-1px); }
.sb-date.disabled { opacity:.35; cursor:not-allowed; }
.sb-date.selected { background:#0C3328; color:#FEFDFC; border-color:transparent; box-shadow:0 6px 18px rgba(12,51,40,.15); }

/* Times */
.sb-times { display:grid; grid-template-columns: repeat(5, 1fr); gap: var(--Padding-6XSmall); flex-wrap:wrap; margin-top:var(--Padding-6XSmall); margin-bottom: var(--Padding-2XSmall); }
.sb-time {font-size: var(--font-base); padding: var(--Padding-6XSmall); border-radius:var(--Corners-Medium, 0.5rem); background:var(--cultured-white-greyscale-cw-100); cursor:pointer; border:1px solid var(--cultured-white-greyscale-cw-300); user-select:none; transition:all .25s ease;}
.sb-time:hover:not(.selected) { background: #F6F4F0; transform: translateY(-1px); }
.sb-time.selected { background:#0C3328; color:#FEFDFC; border-color:transparent; box-shadow:0 6px 18px rgba(12,51,40,.15); }

.sb-options-inline { display:flex; gap: var(--Padding-6XSmall); flex-wrap:wrap; margin-top:var(--Padding-6XSmall);margin-bottom:var(--Padding-2XSmall) }
label.sb-chip {font-size: var(--font-base); padding: var(--Padding-6XSmall); border-radius:var(--Corners-Medium, 0.5rem); background:var(--cultured-white-greyscale-cw-100); cursor:pointer; border:1px solid var(--cultured-white-greyscale-cw-300); user-select:none; transition:all .25s ease;}
label.sb-chip:hover:not(.selected) { background: #F6F4F0; transform: translateY(-1px); }
label.sb-chip.selected { background:#0C3328; color:#FEFDFC; border-color:transparent; box-shadow:0 6px 18px rgba(12,51,40,.15); }

/* Hide native radio inside trajanje chips (accessible) */
label.sb-chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* sb-box-row radio highlight */
.sb-box-row:has(input[type="radio"]:checked),
.sb-box-row:has(input[type="checkbox"]:checked),
.sb-box-row.selected {
  background: var(--green-700);          
  border-color: var(--cultured-white-greyscale-cw-300);
  color: #FEFDFC;
}
.sb-box-row:has(input:checked) .sb-row-label,
.sb-box-row:has(input:checked) .sb-row-price,
.sb-box-row.selected .sb-row-label,
.sb-box-row.selected .sb-row-price { color: #FEFDFC; }

/* Improve label alignment inside sb-box-row */
.sb-box-row .sb-row-label {
  display: flex;
  align-items: center;
  gap: var(--Padding-3XSmall, 0.625rem);
  font-style: var(--font-family-base)
}

/* Addons sections */
.sb-addons { display:flex; flex-direction:column; align-items:stretch; gap: var(--Padding-4XSmall, 0.5rem); }
.sb-addons .section-title {
  display:flex; align-items:center; line-height:var(--Typography-Line-Hight-Small);
  font-weight:700; font-size:var(--Typography-Font-Size-Small); font-family: var(--font-family-base);
  color:var(--cultured-white-greyscale-cw-950); padding-top: var(--Padding-3XSmall, 0.625rem); padding-bottom: var(--Padding-6XSmall, 0.375rem);
}

/* Boxed list groups */
.sb-box {
  width:100%; max-width:100%; box-sizing:border-box;
  border:1px solid var(--cultured-white-greyscale-cw-300);
  border-radius:var(--Corners-Medium);
  overflow: hidden; /* Clip rows to the box radius so corners don’t “fade” */
  position: relative;
}
.sb-box-row {
  cursor:pointer; display:flex; align-items:center; gap: var(--Padding-Small, 1rem);
  padding: var(--Padding-6XSmall); 
  border-bottom:1px solid var(--cultured-white-greyscale-cw-300);
  background:var(--cultured-white-greyscale-cw-100);
  width:100%; box-sizing:border-box;
  /* Make whole row look like label */
  font-size: var(--font-base, 1rem);
  color: var(--cultured-white-greyscale-cw-950);
}

.sb-box-row:first-child {
  border-top-left-radius: var(--Corners-Medium);
  border-top-right-radius: var(--Corners-Medium);
}
.sb-box-row:last-child {
  border-bottom-left-radius: var (--Corners-Medium);
  border-bottom-right-radius: var(--Corners-Medium);
}

.sb-box-row:last-child { border-bottom:none; }
.sb-box-left { display:flex; align-items:center; gap: var(--Padding-8XSmall, 0.25rem); flex:1; }
.sb-box-right{ margin-left:auto; display:flex; align-items:center; gap: var(--Padding-7XSmall, 0.313rem); }

.sb-row-label{ font-size: var(--font-base); color: var(--cultured-white-greyscale-cw-950); }
.sb-row-price{ font-weight:500; }

/* Optional label styling inside addons */
.sb-addons label { display:block; cursor:pointer; }
.sb-addon-note { font-size:14px; color:#666; }

/* Summary card */
.sb-summary {
  display:flex; flex-direction:column; gap: var(--Padding-4XSmall, 0.5rem);
  align-self:stretch; padding: var(--Padding-4XSmall, 0.5rem);
  border-radius:var(--Corners-Medium);
  border:1px solid var(--cultured-white-greyscale-cw-300);
  background:var(--cultured-white-greyscale-cw-100);
  max-width:29.3125rem; box-sizing:border-box; position:sticky; top:140px;
}

.sb-summary h5, .sb-summary .sb-summary-title{
  color:var(--cultured-white-greyscale-cw-950); text-align:left; font-weight:700;
  font-size:var(--font-base); line-height:var(--Typography-Line-Hight-Base);
  width:100%; margin:0 0 var(--Padding-4XSmall, 0.5rem) 0;
}
.sb-price { font-weight:800; color:#0C3328; }

.sb-summary-list { margin:0; padding:0; width:100%; }
.sb-summary-row{
  display:flex; padding: var(--Padding-4XSmall, 0.5rem) 0; align-items:center; gap: var(--Padding-4XSmall, 0.5rem);
  align-self:stretch; border-bottom:1px solid var(--cultured-white-greyscale-cw-300);
  background:var(--cultured-white-greyscale-cw-100);
}
.sb-summary-row:last-child{ border-bottom:none; padding-bottom:0px; }
.sb-summary-label{
  color:var(--cultured-white-greyscale-cw-950);
  font-size:var(--Typography-Font-Size-Small);
  font-weight:550; line-height:var(--Typography-Line-Hight-Small);
}
.sb-summary-value, .sb-summary-price{
  color:var(--cultured-white-greyscale-cw-950); text-align:right;
  font-size:var(--Typography-Font-Size-Small); font-weight:500; line-height:var(--Typography-Line-Hight-Small);
  flex:1 0 0; margin-left:auto;
}
/* Usluge row as stacked block */
.sb-summary-row.usluge-row{ flex-direction:column; align-items:flex-start; gap: var(--Padding-8XSmall, 0.25rem); padding-bottom: var(--Padding-XSmall, 0.875rem); border-bottom:none; }
/* Dividers */
.sb-summary-divider{ width:100%; height:1px; background:var(--cultured-white-greyscale-cw-300); }
.sb-summary-divider.dotted{ border-bottom:1px dashed var(--cultured-white-greyscale-cw-300); background:transparent; height:0; }
.sb-summary-divider.solid{ height:2px; background:var(--cultured-white-greyscale-cw-950); border:none; }
/* Total row */
.sb-summary-row.sb-summary-total .sb-summary-label,
.sb-summary-row.sb-summary-total .sb-summary-price{
  font-size:var(--Typography-Font-Size-Base); font-weight:700; line-height:var(--Typography-Line-Hight-Base);
}

/* Tooltip */
.tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  color: var(--cultured-white-greyscale-cw-950);
  z-index: 10;
}
.tooltip .icon-info {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
  opacity: .9;
}
.tooltip:hover .icon-info { opacity: 1; }

/* Arrow (bigger “spear” and offset higher) */
.tooltip::before {
  content: '';
  position: fixed; /* escape any overflow ancestors */
  border: 9px solid transparent;
  border-top-color: rgba(25,24,24,.95);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  left: var(--tip-x, 0px);
  top: calc(var(--tip-y, 0px) - 6px);
  transform: translate(-50%, 0);
}

/* Bubble – allow it to extend outside rows/sections */
.tooltip::after {
  content: attr(data-tooltip);
  position: fixed; /* escape containers */
  background: rgba(25,24,24,.95);
  color: #FEFDFC;
  padding: var(--Padding-7XSmall,.313rem) var(--Padding-4XSmall,.5rem);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.35;
  max-width: 36ch;         /* “spears out” more */
  white-space: normal;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
  transition: opacity .15s ease;
  left: calc(var(--tip-x, 0px) - 50vw + 50vw);   /* keep as px */
  top: calc(var(--tip-y, 0px) - 100%);           /* bubble above */
  transform: translate(-50%, -8px);
}

/* Position the fixed tooltip relative to the trigger */
.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
}

/* Allow overflow so the trigger isn’t clipped */
.sb-section, .sb-col, .sb-addons, .sb-box-row { overflow: visible; } /* keep others */

/* Tooltip trigger (SVG icon) */
.tooltip { display:inline-flex; align-items:center; justify-content:center; cursor:help; color: var(--cultured-white-greyscale-cw-950, #191818); }
.tooltip .icon-info { width: 1.125rem; height: 1.125rem; display:block; }

/* Keep icon visible on selected (green) rows */
.sb-box-row.selected .tooltip { color:#FEFDFC; }

/* Global tooltip layer (inside .sb-app to inherit vars) */
#sb-tooltip-layer { position: fixed; inset: 0; pointer-events: none; z-index: 999999; }
.sb-tip {
  position: fixed;
  max-width: 44ch;
  background: rgba(25,24,24,.96);
  color: #FEFDFC;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.35;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  pointer-events: none;
}
.sb-tip::after {
  content:"";
  position: absolute;
  left: 50%;
  width: 0; height: 0;
  border: 8px solid transparent;
  transform: translateX(-50%);
}
.sb-tip[data-pos="above"]::after { bottom: -16px; border-top-color: rgba(25,24,24,.96); }
.sb-tip[data-pos="below"]::after { top: -16px;    border-bottom-color: rgba(25,24,24,.96); }

/* Wizard – pill buttons like screenshot (only above left column) */
.sb-app .sb-row .sb-col:first-child > .wizard-nav{
  display:grid; grid-template-columns: repeat(3, 1fr); justify-content: space-between; gap: var(--Padding-2XSmall); margin-bottom: var(--Padding-2XSmall); background:transparent; overflow:visible; width:100%;
}
.sb-app .wizard-step{
  display:inline-flex; align-items:center; justify-content:space-between; 
  padding: var(--Padding-5XSmall) var(--Padding-2XSmall); border-radius:var(--Corners-Medium); border:1px solid var(--cultured-white-greyscale-cw-300);
  background:var(--cultured-white-greyscale-cw-100, #FEFDFC); font-weight:500;
  font-size: var(--font-base);
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-family-base);
}
.sb-app .wizard-step::before{ content: attr(data-step); font-weight:500; color:var(--cultured-white-greyscale-cw-950); }
.sb-app .wizard-step.active{ background:var(--green-700); color:#FEFDFC; border-color:transparent; }
.sb-app .wizard-step.active::before{ color:#FEFDFC; }

/* Wizard steps – disabled state */
.sb-app .wizard-step[disabled] {
  opacity: .8;
  cursor: not-allowed;
  pointer-events: none;
}

/* Mobile sticky summary (styled like .sb-summary) */
.sb-sticky-summary {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: none; /* shown on mobile via MQ + JS */
  background: var(--cultured-white-greyscale-cw-100, #FEFDFC);
  padding: 0px var(--Padding-XSmall);
  padding-bottom: calc(var(--Padding-3XSmall) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  box-shadow: 0 -10px 30px rgba(25, 24, 24, .08);
}
.sb-sticky-summary.sb-hidden { display: none !important; }

.sb-sticky-summary .sb-sticky-card {
  max-width: 1280px; margin: 0 auto;
  background: var(--cultured-white-greyscale-cw-100);
  padding: var(--Padding-4XSmall);
  padding-bottom: 0px;
}

/* Rows, same rhythm as .sb-summary */
.sb-sticky-summary .ss-row {
  display: flex; align-items: center;
  gap: var(--Padding-4XSmall, 0.5rem);
  padding: var(--Padding-8XSmall, 0.5rem) 0;
  align-self: stretch;
  border-bottom: 1px solid var(--cultured-white-greyscale-cw-300);
  background: var(--cultured-white-greyscale-cw-100);
}
.sb-sticky-summary .ss-row:last-of-type { border-bottom: none; }
.sb-sticky-summary .ss-label {
  color: var(--cultured-white-greyscale-cw-950);
  font-size: var(--Typography-Font-Size-Small);
}
.sb-sticky-summary .ss-value {
  color: var(--cultured-white-greyscale-cw-950);
  margin-left: auto; font-weight: 500; text-align: right;
  font-size: var(--Typography-Font-Size-Small); 
}

.sb-sticky-summary .ss-row.total .ss-label,
.sb-sticky-summary .ss-row.total .ss-value {
  font-size: var(--Typography-Font-Size-Small); 
  font-weight: 700;
}

/* Show only on mobile */
@media (max-width: 880px) { .sb-sticky-summary { display: block; } }

/* Responsive */
@media (max-width: 880px) {
  .sb-row { flex-direction: column; gap: 0; }
  .sb-col { min-width: 0; width: 100%; padding: 0; }
  .sb-calendar { width: 100%; min-width: 0; padding: var(--Padding-4XSmall, 0.5rem); border-radius: 8px; box-sizing: border-box; }
  .sb-cal-header { flex-direction: row; gap: var(--Padding-8XSmall, 0.25rem); margin-bottom: var(--Padding-4XSmall, 0.5rem); }
  .sb-cal-grid { gap: var(--Padding-8XSmall, 0.25rem); }
  .sb-date {font-size: var(--font-base); padding: var(--Padding-4XSmall, 0.5rem) 0; font-size: 1rem; }
  .sb-summary { position: static; top: unset; margin-top: 16px; padding: var(--Padding-3XSmall, 0.625rem); border-radius: 8px; max-width: 100%; }
  .sb-sticky-summary { display: block; }
}
@media (max-width: 480px) {
  .sb-calendar { padding: var(--Padding-4XSmall, 0.5rem); }
  .sb-date { padding: var(--Padding-7XSmall, 0.313rem) 0; font-size: .95rem; }
  .sb-summary { padding: var(--Padding-4XSmall, 0.5rem); }
}

/* Success / confirmation screen */
.sb-payment-success {
  max-width: 80rem;
  margin: 0 auto;
  padding: var(--Padding-Medium);
}
.sb-payment-success .sb-success-row {
  display: flex;
  gap: var(--Padding-3XLarge, 4rem);
  align-items: stretch;
}
.sb-success-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--Padding-Medium);
  border-radius: var(--Corners-Medium);
  border: 1px solid var(--cultured-white-greyscale-cw-300);
  background: var(--cultured-white-greyscale-cw-100, #FEFDFC);
}
.sb-success-card .sb-success-title {
  color: var(--cultured-white-greyscale-cw-950);
  font-weight: 700;
  margin: 0;
}
.sb-success-card .sb-success-text {
  color: var(--cultured-white-greyscale-cw-950);
  font-size: var(--Typography-Font-Size-Base, 1.125rem);
  line-height: var(--Typography-Line-Hight-Base, 1.5rem);
  max-width: 48ch;
}
.sb-success-actions { display: block; gap: var(--Padding-2XSmall); }

.sb-payment-success .sb-final-summary {
  width: 29.3125rem; /* match .sb-summary max width */
  flex: 0 0 auto;
}

/* Success / confirmation layout */
.sb-payment-success { max-width: 80rem; margin: 0 auto; padding: var(--Padding-Medium); }
.sb-payment-success .sb-success-row {
  display: flex;
  flex-direction: column;            /* mobile/tablet stack */
  gap: var(--Padding-Large, 1.25rem);
}
.sb-payment-success .sb-success-card { flex: 1 1 auto; }
.sb-payment-success .sb-final-summary { flex: 1 1 auto; }

/* Desktop: side-by-side */
@media (min-width: 992px) {
  .sb-payment-success .sb-success-row {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--Padding-Medium);
  }
  .sb-payment-success .sb-success-card { flex: 1 1 auto; }

  /* Match earlier step summary width (same as .sb-summary max-width: 29.3125rem) */
  .sb-payment-success .sb-final-summary {
    flex: 0 0 29.3125rem;
    width: 29.3125rem;
    max-width: 29.3125rem;
    align-self: stretch;
  }
}

/* Responsive */
@media (max-width: 880px) {
  .sb-payment-success { padding: var(--Padding-2XSmall); }
  .sb-payment-success .sb-success-row { flex-direction: column; gap: var(--Padding-Small); }
  .sb-payment-success .sb-final-summary { width: 100%; }
}