/* Glavni okvir plugina */
.fe-booking-wrapper {
    margin: 60px auto 30px;
    max-width: 1200px;
    background: #ffffff;
    padding: 32px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    overflow-x: hidden;
}

/* Raspored kolona za desktop (3 kolone) */
.fe-form-grid {
    display: grid;
    grid-template-columns: minmax(auto, max-content) 1fr 1fr;
    gap: 40px;
}

/* Kalendar - lijeva kolona */
.fe-col-1 {
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    max-width: 340px;
    box-sizing: border-box;
}

.fe-calendar-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1f2937;
    margin-bottom: 20px;
    text-align: center;
}

/* Prikaz odabranog datuma */
.fe-summary-display {
    font-weight: 600;
    font-size: 1rem;
    color: #1f2937;
    margin-top: 15px;
    text-align: center;
}

/* Dodatni stilovi za Flatpickr kalendar */
.flatpickr-calendar {
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: none;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
    background: #1f2937 !important;
    border-color: #1f2937 !important;
    color: #ffffff !important;
}

.flatpickr-day.inRange {
    background: #e5e7eb !important;
    border-color: #e5e7eb !important;
    box-shadow: none !important;
}

/* Stilovi za druge kolone */
.fe-col-2, .fe-col-3 {
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
}

.fe-form-section-title {
    font-weight: 600;
    font-size: 1.125rem;
    color: #374151;
    margin-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
}

.fe-form-group {
    margin-bottom: 24px;
}

.fe-form-group label {
    display: block;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 8px;
}

.fe-form-group input,
.fe-form-group select,
.fe-form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    color: #1f2937;
    box-sizing: border-box;
}

/* Inputi za imena i bilješke */
.fe-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Gumb za rezervaciju */
.fe-booking-form button[type="submit"] {
    width: 100%;
    padding: 14px;
    background: #1f2937;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.125rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.fe-booking-form button[type="submit"]:hover {
    background: #374151;
}

.fe-price-summary {
    background: #eef2ff;
    padding: 16px;
    border-radius: 8px;
    font-size: 1rem;
    color: #374151;
    font-weight: 500;
    margin-top: 24px;
    text-align: center;
}

.fe-price-summary strong {
    font-weight: 700;
    color: #1f2937;
}

/* Responsive stilovi */
/* Prilagodbe za srednje zaslone (tablete, landscape telefoni) */
@media (max-width: 1024px) {
  .fe-form-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* Prilagodbe za manje zaslone (mobilni telefoni) */
@media (max-width: 768px) {
    .fe-booking-wrapper {
        padding: 16px;
        margin: 30px auto 15px;
    }

    .fe-col-1, .fe-col-2, .fe-col-3 {
        padding: 15px;
    }

    .fe-calendar-title {
        font-size: 1.1rem;
    }

    .fe-summary-display {
        font-size: 0.9rem;
    }
}

/* Rješenje za problem s Flatpickr kalendarom na mobilnim uređajima */
/* Uklanjanje horizontalnih scrollbar-a */
.fe-booking-wrapper {
    overflow-x: hidden;
}

/* Uklonili smo flexbox pravila za centriranje kako bi kalendar bio lijevo poravnat */
.fe-col-1 {
    /* prijašnji stilovi: display: flex; flex-direction: column; align-items: center; */
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Sam kalendar sada zauzima 100% širine svog kontejnera, bez centriranja */
.fe-col-1 .flatpickr-calendar {
    width: 100% !important;
    max-width: 320px;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    /* Uklonili smo margin: 0 auto; da bi ostao lijevo poravnat */
}

/* Poravnavanje teksta "Odabrali ste datum" */
.fe-summary-display {
    text-align: center;
    margin-top: 15px;
}


/* === Focus Excursions: Emphasize total and align CTA === */
/* Mobile-first: make the "Ukupno za platiti" clearly prominent */
.fe-submit-block {
    display: block;
    margin-top: 24px;
}

.fe-price-display {
    font-size: 1.375rem; /* ~22px for mobile */
    line-height: 1.3;
    font-weight: 700;
    color: #111827;
    margin-bottom: 16px;
}

/* Keep the button visually separated */
.fe-submit-button {
    display: inline-block;
}

/* Desktop/tablet: place total on the left and button on the right, aligned vertically */
@media (min-width: 768px) {
    .fe-submit-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .fe-price-display {
        margin: 0;
        font-size: 1.125rem; /* ~28px on larger screens */
        text-align: left;
    }
    .fe-submit-button {
        margin-left: auto; /* ensure it hugs the right side */
    }
}



/* Inline help for transfer inputs */
.fe-inline-help{margin-left:8px; opacity:.75; font-size:12px;}

/* Admin: gumb za kopiranje retka */
.fe-duplicate{margin-left:6px;}

#fe-location-wrap { transition: all .2s ease; }


/* === Layout hardening after transfer/location toggle === */
.fe-form-grid { grid-auto-flow: row; align-items: start; }
.fe-col-1, .fe-col-2, .fe-col-3 { min-width: 0; }

/* Make select/inputs consistent widths */
.fe-form-field select,
.fe-form-field input[type="text"],
.fe-form-field input[type="email"],
.fe-form-field input[type="number"],
.fe-form-field textarea { width: 100%; box-sizing: border-box; }

/* Align "Mjesto polaska" with other fields */
#fe-location-wrap { margin-top: 12px; }
#fe-location-wrap label { display: block; margin-bottom: 6px; }

/* Responsive: stack nicely on small screens and avoid overflow */
@media (max-width: 1024px) {
  .fe-form-grid { grid-template-columns: 1fr; gap: 24px; }
  .fe-col-1 { max-width: 100%; }
}

@media (max-width: 640px) {
  .fe-form-field { margin-bottom: 14px; }
}


/* === Mobile calendar clipping fix === */
@media (max-width: 640px) {
  .fe-booking-wrapper { overflow-x: visible; }
  .fe-col-1 { overflow: visible; }
  /* Make inline flatpickr occupy container width without overflowing */
  .flatpickr-calendar,
  .flatpickr-calendar.inline {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .flatpickr-days,
  .flatpickr-days .dayContainer {
    width: 100% !important;
    max-width: 100% !important;
  }
  .flatpickr-day {
    width: auto !important;
    max-width: none !important;
    flex: 1 0 14.2857%;
  }
}


/* === Extended calendar clipping fix for larger phones / phablets === */
@media (max-width: 900px) {
  .fe-booking-wrapper, .fe-col-1 { overflow: visible; }
  /* Ensure the inline flatpickr scales to container width */
  #fe-date, .fe-flatpickr-input { width: 100%; max-width: 100%; }
  .flatpickr-calendar, .flatpickr-calendar.inline {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .flatpickr-innerContainer { display: block; }
  .flatpickr-days { width: 100% !important; max-width: 100% !important; }
  .flatpickr-days .dayContainer {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 2.4rem;
    width: 100% !important;
    max-width: 100% !important;
  }
  .flatpickr-day {
    width: auto !important;
    max-width: none !important;
    line-height: 2.4rem;
    height: 2.4rem;
    justify-self: stretch;
  }
}

/* === v6.i1 Aesthetic fixes: iPhone calendar clipping + desktop section spacing === */

/* 1) Prevent glyph clipping in Flatpickr day cells on iOS (Safari/iPhone).
   - Use flex centering instead of relying on line-height equal to height.
   - Allow overflow so tall glyphs like č, ž, Ć won't be cut.
   - Improve text rendering on WebKit.
*/
.flatpickr-days,
.flatpickr-days .dayContainer {
  overflow: visible !important;
}

.flatpickr-day {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important; /* keep a natural line box */
  height: 2.4rem !important;   /* keep the visual box size */
  box-sizing: border-box !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Narrow iOS-targeted tweak (feature-detect WebKit touch) */
@supports (-webkit-touch-callout: none) {
  .flatpickr-day {
    line-height: 1.25 !important;
  }
}

/* 2) Desktop spacing for section headings ("Detalji rezervacije", "Kontakt i informacije").
   Add a bit more breathing room from the top and below the title.
*/
.fe-col-2 .fe-column-title,
.fe-col-3 .fe-column-title {
  margin-top: 0.5rem;   /* space from the top edge of the card */
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

@media (min-width: 1024px) {
  .fe-col-2, .fe-col-3 {
    padding-top: 28px; /* extra top padding on larger screens */
  }
  .fe-col-2 .fe-column-title,
  .fe-col-3 .fe-column-title {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    font-weight: 600;
  }
}

/* Ensure labels/fields beneath titles don't collapse upwards */
.fe-col-2 .fe-form-field:first-of-type,
.fe-col-3 .fe-form-field:first-of-type {
  margin-top: 6px;
}

/* === v6.i2 Remove white calendar background, show on gray === */
.fe-col-1 .flatpickr-calendar {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.fe-col-1 .flatpickr-innerContainer {
  background: transparent !important;
}

/* === v6.i2: Remove white background under calendar and increase heading spacing === */

/* Ensure the calendar sits on the grey card background of .fe-col-1 */
.fe-booking-wrapper .fe-col-1 {
  background: #f9fafb !important;
}

/* Flatten Flatpickr internals to transparent so no inner white panels appear */
.fe-booking-wrapper .fe-col-1 .flatpickr-calendar,
.fe-booking-wrapper .fe-col-1 .flatpickr-calendar.inline,
.fe-booking-wrapper .fe-col-1 .flatpickr-innerContainer,
.fe-booking-wrapper .fe-col-1 .flatpickr-months,
.fe-booking-wrapper .fe-col-1 .flatpickr-weekdays,
.fe-booking-wrapper .fe-col-1 .flatpickr-days,
.fe-booking-wrapper .fe-col-1 .flatpickr-days .dayContainer {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Keep day cells readable while avoiding any white behind them */
.fe-booking-wrapper .fe-col-1 .flatpickr-day {
  background: transparent !important;
}
.fe-booking-wrapper .fe-col-1 .flatpickr-day.selected,
.fe-booking-wrapper .fe-col-1 .flatpickr-day.startRange,
.fe-booking-wrapper .fe-col-1 .flatpickr-day.endRange {
  background: #969799 !important; /* tvoj željeni sivi marker */
  color: #ffffff !important;
  border-color: #969799 !important;
}

/* Extra breathing room for section titles on larger screens */
.fe-booking-wrapper .fe-col-2 .fe-column-title,
.fe-booking-wrapper .fe-col-3 .fe-column-title {
  margin-top: 1rem !important;      /* više odmaknuto od vrha kartice */
  margin-bottom: 1rem !important;   /* više zraka iznad prvog polja */
  line-height: 1.35 !important;
}
@media (min-width: 1024px) {
  .fe-booking-wrapper .fe-col-2,
  .fe-booking-wrapper .fe-col-3 {
    padding-top: 32px !important;
  }
  .fe-booking-wrapper .fe-col-2 .fe-form-field:first-of-type,
  .fe-booking-wrapper .fe-col-3 .fe-form-field:first-of-type {
    margin-top: 10px !important;
  }
}

/* Safety: prevent any overflow clipping around the calendar on iOS */
.fe-booking-wrapper .fe-col-1 .flatpickr-days,
.fe-booking-wrapper .fe-col-1 .flatpickr-days .dayContainer {
  overflow: visible !important;
}

/* === v6.i3: Responsive calendar width (95% of screen), iOS clipping fixes === */

/* Allow horizontal overflow to be visible so nothing gets cut off on iOS */
@media (max-width: 1024px) {
  .fe-booking-wrapper {
    overflow-x: visible !important;
  }
  .fe-col-1 {
    overflow: visible !important;
  }
}

/* Force the Flatpickr calendar to size to 95% of the viewport width on phones/tablets */
@media (max-width: 1024px) {
  .fe-col-1 .flatpickr-calendar,
  .fe-col-1 .flatpickr-calendar.inline {
    width: 85vw !important;
    max-width: 85vw !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  /* Ensure internal containers fill the calendar width */
  .fe-col-1 .flatpickr-days,
  .fe-col-1 .flatpickr-days .dayContainer {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Day cells: use flex basis for 7 equal columns without fixed pixel width */
  .fe-col-1 .flatpickr-day {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    flex: 1 0 calc(100% / 7) !important;
    height: 2.4rem !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
}

/* Extra safety: apply WebKit-specific tweaks to avoid right-edge clipping on iPhone */
@supports (-webkit-touch-callout: none) {
  .fe-col-1 .flatpickr-calendar,
  .fe-col-1 .flatpickr-calendar.inline {
    -webkit-text-size-adjust: 100%;
  }
  .fe-col-1 .flatpickr-day {
    line-height: 1.25 !important;
  }
}

/* === v6.i4: Constrain calendar header/arrows inside box, fix section title spacing === */

/* Ensure month navigation (arrows, month, year) stays within the calendar box */
.fe-col-1 .flatpickr-months {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
  max-width: 85vw !important;
  margin: 0 auto !important;
}

/* Prevent arrows from overflowing off screen */
.fe-col-1 .flatpickr-months .flatpickr-prev-month,
.fe-col-1 .flatpickr-months .flatpickr-next-month {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  margin: 0 4px !important;
}

/* Section titles: add breathing room above and below on larger screens */
.fe-col-2 .fe-column-title,
.fe-col-3 .fe-column-title {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
  display: block;
}

@media (min-width: 1024px) {
  .fe-col-2, .fe-col-3 {
    padding-top: 36px !important;
  }
  .fe-col-2 .fe-column-title,
  .fe-col-3 .fe-column-title {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .fe-col-2 .fe-form-field:first-of-type,
  .fe-col-3 .fe-form-field:first-of-type {
    margin-top: 12px !important;
  }
}

/* === v6.i4: Keep month nav arrows inside box + larger section-title spacing on large screens === */

/* Make the month header a flex row so prev/next don't escape to the edges */
.fe-col-1 .flatpickr-months {
  display: block !important; /* container of .flatpickr-month */
}
.fe-col-1 .flatpickr-months .flatpickr-month {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  position: relative !important;
  padding: 8px 10px !important;  /* inner padding so arrows don't touch edges */
  box-sizing: border-box !important;
}

/* Convert arrows to inline (not absolute) so they stay inside */
.fe-col-1 .flatpickr-prev-month,
.fe-col-1 .flatpickr-next-month {
  position: static !important;
  order: 0;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
}
/* Slight hitbox background on hover for UX */
.fe-col-1 .flatpickr-prev-month:hover,
.fe-col-1 .flatpickr-next-month:hover {
  background: rgba(0,0,0,0.05);
}

/* Keep current month/year centered and truncating elegantly */
.fe-col-1 .flatpickr-current-month {
  order: 1;
  flex: 1 1 auto !important;
  text-align: center !important;
  min-width: 0; /* enable text ellipsis */
}
.fe-col-1 .flatpickr-current-month .cur-month,
.fe-col-1 .flatpickr-current-month .numInputWrapper {
  display: inline-block;
  vertical-align: middle;
}

/* Ensure the whole calendar remains within 85vw on mobile */
@media (max-width: 1024px) {
  .fe-col-1 .flatpickr-calendar,
  .fe-col-1 .flatpickr-calendar.inline {
    width: 85vw !important;
    max-width: 85vw !important;
  }
}

/* Extra: prevent any accidental horizontal overflow due to header elements */
@media (max-width: 1024px) {
  .fe-col-1 .flatpickr-months,
  .fe-col-1 .flatpickr-months .flatpickr-month {
    overflow: hidden !important;
  }
}

/* ===== Section titles spacing on large screens ===== */
@media (min-width: 1200px) {
  .fe-booking-wrapper .fe-col-2 .fe-column-title,
  .fe-booking-wrapper .fe-col-3 .fe-column-title {
    margin-top: 1.25rem !important;     /* više zraka iznad naslova */
    margin-bottom: 1.25rem !important;  /* više zraka ispod naslova */
    line-height: 1.35 !important;
  }
  .fe-booking-wrapper .fe-col-2 .fe-form-field:first-of-type,
  .fe-booking-wrapper .fe-col-3 .fe-form-field:first-of-type {
    margin-top: 14px !important;
  }
}

/* Safety for ultra-wide desktops */
@media (min-width: 1536px) {
  .fe-booking-wrapper .fe-col-2 .fe-column-title,
  .fe-booking-wrapper .fe-col-3 .fe-column-title {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
}

/* === v6.i5: Remove prev/next arrows; use month dropdown === */
.fe-col-1 .flatpickr-prev-month,
.fe-col-1 .flatpickr-next-month {
  display: none !important;
}
/* Ensure header doesn't reserve space for hidden arrows */
.fe-col-1 .flatpickr-months .flatpickr-month {
  justify-content: center !important; /* center title/select since arrows are gone */
  padding-left: 6px !important;
  padding-right: 6px !important;
}
/* Keep the month/year select compact on small screens */
@media (max-width: 480px) {
  .fe-col-1 .flatpickr-current-month .numInputWrapper input,
  .fe-col-1 .flatpickr-current-month .flatpickr-monthDropdown-months {
    font-size: 0.95rem !important;
  }
}

/* === v6.i6: Lock horizontal scroll/drag on mobile within plugin scope === */
@media (max-width: 1024px) {
  /* Contain any accidental horizontal overflow */
  .fe-booking-wrapper {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    touch-action: pan-y !important;            /* allow vertical scroll, suppress horizontal pan */
    overscroll-behavior-x: contain !important; /* prevent side-swipe rubber-banding */
    box-sizing: border-box !important;
  }

  /* Ensure inner cols/cards never exceed the viewport width */
  .fe-booking-wrapper .fe-col-1,
  .fe-booking-wrapper .fe-col-2,
  .fe-booking-wrapper .fe-col-3 {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Calendar already set to 85vw; re-assert centering and no transforms */
  .fe-booking-wrapper .fe-col-1 .flatpickr-calendar,
  .fe-booking-wrapper .fe-col-1 .flatpickr-calendar.inline {
    width: 85vw !important;
    max-width: 85vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important; right: 0 !important;
    transform: none !important;
  }
}

/* === v6.i7: Slightly narrower calendar (85vw) + micro padding to avoid right-edge clipping === */
@media (max-width: 1024px) {
  .fe-booking-wrapper .fe-col-1 .flatpickr-days .dayContainer {
    padding-right: 2px !important; /* tiny breathing room for selection ring */
    box-sizing: border-box !important;
  }
  .fe-booking-wrapper .fe-col-1 .flatpickr-day {
    /* keep overflow visible for any outline/glow while ensuring cell fits */
    overflow: visible !important;
  }
}

/* === v6.i8: Calendar set to 85vw for iPhone safe fit === */
@media (max-width: 1024px) {
  .fe-booking-wrapper .fe-col-1 .flatpickr-calendar,
  .fe-booking-wrapper .fe-col-1 .flatpickr-calendar.inline {
    width: 85vw !important;
    max-width: 85vw !important;
  }
  .fe-booking-wrapper .fe-col-1 .flatpickr-days .dayContainer {
    padding-right: 4px !important; /* slightly more padding */
  }
}


/* === FEI Services (frontend) === */
.fe-extra-services { margin-top: 16px; }
.fe-extra-services h3 { margin-bottom: 10px; }
.fe-extra-services-list { display: grid; gap: 8px; }
.fe-extra-service { display: flex; align-items: center; gap: 10px; }
.fe-svc-title { font-weight: 500; }
.fe-svc-price { opacity: .7; }


/* FE Services visibility guard:
   Hide global placements; show only inside plugin middle column */
.fe-extra-services { display: none; }
.fe-col-2 .fe-extra-services { display: block; }