@charset "UTF-8";
/*****************************************************
// Botuni
******************************************************/

/* sticky progress */
.stickyBar{ position:sticky; top:0; z-index:1000; background:transparent; backdrop-filter:saturate(1.2) blur(8px); }
.progress-container{ height:6px; background:rgba(255,255,255,.08); }
.progress-bar{ height:100%; width:0; background:linear-gradient(90deg, #3dd2ff, #7cf59b); transition:width .12s linear; }
@media (prefers-color-scheme:light){
	.progress-container { height:6px; background:#f6fbff; }
	.progress-bar{ background:linear-gradient(90deg, #007dbc, #0fbf62); }
}




.button-container { display: flex; align-items: center; justify-content: center; gap: 15px; padding-bottom: 0; margin-top: 0; }
button, .button { padding: 22px 40px; font-size: 16px; border: 0; cursor: pointer; transition: all .3s ease; }
button:focus-visible, .button:focus-visible { outline: 2px solid #0592c2; outline-offset: 2px; }
.btn-big-red{ background-color:#C63702; background-image: linear-gradient(167deg, rgba(255,255,255,.1) 50%, rgba(0,0,0,0) 55%), linear-gradient(to bottom, rgba(255,255,255,.15), rgba(0,0,0,0)); border-radius: 50px 50px 190px 190px; box-shadow: 0 0 0 1px #C63702 inset, 0 0 0 2px rgba(255,255,255,.15) inset, 0 8px 0 0 #AD3002, 0 8px 0 1px rgba(0,0,0,.4), 0 8px 8px 1px rgba(0,0,0,.5); color:#fff; position:relative; top:-13px; font-family:"Poppins",sans-serif; text-transform:uppercase; font-size:27px; font-weight:800; height:62px; line-height:62px; text-align:center; text-shadow:0 1px 3px rgba(0,0,0,.5); display:inline-block; padding:0 26px; transition:.15s; }
.btn-big-red:hover{ background-color:#D13902; box-shadow: 0 0 0 1px #C63702 inset, 0 0 0 2px rgba(255,255,255,.15) inset, 0 10px 0 0 #AD3002, 0 10px 0 1px rgba(0,0,0,.4), 0 10px 8px 1px rgba(0,0,0,.6); top:-2px; }
.btn-big-red:active{ transform: translateY(10px); }
.btn-big-red.radius-12{ border-radius: 12px; }

.btn-small-group{ display:flex; flex-direction:column; gap:10px; margin-top:5px; }
.btn-small-red{ background-color:#C63702; background-image: linear-gradient(167deg, rgba(255,255,255,.1) 50%, rgba(0,0,0,0) 55%), linear-gradient(to bottom, rgba(255,255,255,.15), rgba(0,0,0,0)); border-radius:6px; box-shadow: 0 0 0 1px #C63702 inset, 0 0 0 2px rgba(255,255,255,.15) inset, 0 4px 0 0 #AD3002, 0 4px 0 1px rgba(0,0,0,.4), 0 4px 4px 1px rgba(0,0,0,.5); color:#fff; font-family:"Poppins",sans-serif; font-size:14px; font-weight:800; height:27px; line-height:17px; text-align:center; text-shadow:0 1px 1px rgba(0,0,0,.5); display:block; width:100%; min-width:36px; padding:5px 10.5px; transition:.15s; }
.btn-small-red:hover { background-color:#D13902; box-shadow: 0 0 0 1px #C63702 inset, 0 0 0 2px rgba(255,255,255,.15) inset, 0 5px 0 0 #AD3002, 0 5px 0 1px rgba(0,0,0,.4), 0 5px 4px 1px rgba(0,0,0,.6); transform: translateY(-1px); }

/* Uses your exisdting :root CTA vars:  --cta-bg, --cta-color, --cta-border, --cta-shadow, --cta-icon-bg, --cta-icon-border, etc. */
/* Back button variant — arrow left, compact sizing */
.btn-cta.btn-back { justify-content: flex-start; font-size: 1.1rem; /* slightly smaller than booking CTA */  /* max-width: 340px;  keep compact; remove if you want it fluid and set display: block;*/ display: block; margin-bottom: 2rem; }
.btn-cta.btn-back.back-small { max-width: 280px; }
.btn-cta.btn-back .btn-cta__icon { order: -1; border-left: none; border-right: 2px solid var(--cta-icon-border); border-radius: 8px 0 0 8px; padding: .8rem 1.6rem; font-size: 1.5rem !important; background: var(--cta-icon-bg); }
.btn-cta.btn-back .btn-cta__label { padding: 1rem .9rem; font-weight: 700; text-transform: none;       /* sentence case for back */ }

/* Optional: tiny size variant if you ever need it inline */
.btn-cta.btn-back--small { font-size: 1rem; max-width: 280px; }
.btn-cta.btn-back--small .btn-cta__icon { padding: .6rem 1.2rem; font-size: 1.2rem !important; }
.btn-cta.btn-back--small .btn-cta__label { padding: .8rem .8rem; }






/*****************************************************
// Forma
******************************************************/
form { display: flex; flex-wrap: wrap; gap: 1rem; }
#contactForm { flex: 1 1 55%; }
#contactForm .form-group.half { flex: 1 1 calc(50% - 0.5rem); }
#contactForm label { display:block; margin-bottom:.4rem; font-weight:600; font-size:.9rem; text-align:left;
}
#contactForm input,
#contactForm select,
#contactForm textarea{ font-family:"Poppins",sans-serif; color:#3e5b9f; font-size:1rem; line-height:1.25; font-weight:600; text-transform:uppercase; width:100%; height:50px; padding:1.2rem .55rem 1rem .55rem; background:#fff; border-radius:8px; border:2px solid rgba(155,208,223,.8);
}
#contactForm textarea{ min-height:220px; max-height:250px; padding:1.3rem .8rem !important; }

#contactForm select{ appearance:none; background-clip:padding-box; border-radius:8px; padding:.8rem .55rem .3rem .8rem; background:   rgba(255,255,255,.9)   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="%230592c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')   no-repeat right .8rem center / 12px 8px;
}
select::-ms-expand{ display:none; }
#contactForm select:hover { border-color: rgba(148,163,184,.8); }
#contactForm select:focus { outline: none; border-color: rgba(155,208,223,.8); box-shadow: 0 0 0 3px rgba(5,146,194,.18);
}
#contactForm select option:disabled{ font-style:italic; color:#666; background:#f2f2f2; font-weight:bold; font-size:.8rem; text-transform:uppercase;
}
#contactForm select option { background:#fff; color:#3e5b9f; font-size:.75rem; font-weight:700; }

#contactForm .terms-note{ font-weight:700; display:inline-flex; gap:.5rem; align-items:flex-start; }
#contactForm .terms-note input[type="checkbox"]{ margin:0 .5rem 0 0; width:18px; height:18px; }
#contactForm .terms-note a{ color:#3e5b9f; text-decoration:underline; transition: opacity .6s ease; }
#contactForm .terms-note a:hover{ color:#0592c2; text-decoration:none; }

input[type="checkbox"]{ width:18px !important; height:18px !important; }

#contactForm button{ padding:1.35rem 2.5rem; background:#3e5b9f; color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:1rem; font-weight:800; text-transform:uppercase; margin-top:1rem; flex:1 1 100%; max-width:none; transition: filter .15s ease;
}
#contactForm button:hover{ background:#0056b3; }
#contactForm button:focus-visible{ outline:2px solid #0592c2; outline-offset:2px; }

#contactForm .invalid{ border-color:#e53935; outline:2px solid #dc3545; outline-offset:2px; border-radius:5px; }
#contactForm .invalid:focus{ box-shadow:0 0 0 3px rgba(229,57,53,.15); }
#contactForm .error-message{ color:#e53935; font-size:.9rem !important; margin-top:.25rem; }

.form-alert{ display:none; padding:12px 14px; border-radius:8px; margin:10px 0 18px; font-weight:600; }
.form-alert.show{ display:block; }
.form-alert.info{ background:#eef4ff; border:1px solid #cfe1ff; }
.form-alert.success{ background:#e9f9ef; border:1px solid #b9e7c6; }
.form-alert.error{ background:#fdecea; border:1px solid #f5c2c0; }
.field-error{ font-size:.875rem; margin-top:6px; color:#b00020; }
.invalid ~ .field-error, .form-group .field-error[style*="display: block"]{ display:block; }
input.invalid, select.invalid, textarea.invalid{ border-color:#b00020; }

.spinner{ width:18px; height:18px; border:2px solid rgba(0,0,0,.2); border-top-color: rgba(37,211,102,1); border-radius:50%; display:inline-block; vertical-align:middle; margin-left:10px; animation: spin .7s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spinner{ animation: none; } }

@media (max-width: 768px) { #contactForm .form-group.half { flex: 1 1 100%; } }

/* nicer select focus */
.form-group select:focus-visible{ outline:none; border-color:#0592c2; box-shadow:0 0 0 3px rgba(5,146,194,.18);
}
.form-group select.invalid{ border-color:#d33; box-shadow:0 0 0 2px rgba(211,51,51,.15); }

/* Floating labels */
.floating-label{ position:relative; margin-top:1.5rem; width:100%; }
.floating-label label{ position:absolute; top:.6rem; left:.75rem; z-index:1; color:#3e5b9f; background:#fff; padding:.25rem; font-size:1rem !important; text-transform:uppercase; transition: all .15s ease; pointer-events:none;
}
.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label,
.floating-label textarea:focus + label,
.floating-label textarea:not(:placeholder-shown) + label,
.floating-label select:focus + label,
.floating-label select:not([value=""]) + label{ top:-.9rem; left:.5rem; font-size:.8rem !important; font-weight:600; color:#3e5b9f; padding:.25rem .45rem; background:#fff; border-radius:8px;
}
.floating-label input,
.floating-label textarea,
.floating-label select{ padding-top:1.25rem; }
.floating-label select:invalid{ color: rgba(0,0,0,.6); }

/* Dynamic fields */
#dynamic-fields-container { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; }
@media (max-width:768px){ #dynamic-fields-container { flex-wrap:wrap; } }
.kid-ages-wrapper{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:.5rem; }
.kid-ages-wrapper .form-group.half{ flex:1 1 calc(50% - .5rem); min-width:200px; }

/* Quantity controls */
#contactForm .quantity-wrapper{ display:inline-flex; align-items:center; gap:2px; width:fit-content; padding:0 .5rem; border:2px solid rgba(155,208,223,.8); border-radius:999px; background:#f9f9fb;
}
#contactForm .quantity-wrapper input[type="number"]{ width:36px; text-align:center; border:0; font-weight:700; font-size:1.1rem; padding:0; margin:0 4px; background:transparent; appearance:textfield;
}
#contactForm .quantity-wrapper input[type=number]::-webkit-outer-spin-button,
#contactForm .quantity-wrapper input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#contactForm button.qty-btn{ margin:0; padding:0; font-size:1.3rem; font-weight:800; width:35px; height:35px; border:0; border-radius:50%; background: rgba(155,208,223,.8); color:#3e5b9f; display:flex; align-items:center; justify-content:center; transition: background .2s, transform .1s;
}
#contactForm button.qty-btn:hover{ background:#3e5b9f; color:rgba(155,208,223,.8); transform:scale(1.05); }
#contactForm button.qty-btn:active{ background:#3e5b9f; color:rgba(155,208,223,.8); }

.quantity-group label{ font-size:.75rem; font-weight:600; text-transform:uppercase; margin-bottom:2px; }
.guest-counts{ display:flex; gap:1rem; width:100%; flex-wrap:nowrap; }
.guest-counts .form-group.half{ flex:1 1 calc(50% - .5rem); min-width:120px; }

#kidAgesContainer{ width:100%; display:flex; gap:1rem; margin-top:.5rem; }

/* Dates row */
.date-row{ display:flex; gap:1rem; width:100%; flex-wrap:wrap; }
.date-row .form-group.half{ flex:1 1 calc(50% - .5rem); }

/* Radios */
.form-group-grouped{ display:flex; flex-wrap:wrap; gap:1rem; }
.radio-group{ display:flex; flex-direction:column; gap:.75rem; margin:1rem 0; }
.radio-group.horizontal{ flex-direction:row; gap:1rem; }
.radio-option{ display:flex; align-items:center; position:relative; cursor:pointer; font-weight:600; font-size:1rem; color:#333; padding-left:2rem; user-select:none; }
.radio-option input[type="radio"]{ opacity:0; position:absolute; left:0; }
.radio-option .custom-radio{ position:absolute; left:0; top:50%; transform:translateY(-50%); height:1.2rem; width:1.2rem; border-radius:50%; border:2px solid #3e5b9f; background:rgba(155,208,223,.8); transition:all .2s ease; }
.radio-option input[type="radio"]:checked + .custom-radio::after{ content:""; position:absolute; top:3px; left:2px; width:11px; height:10px; border-radius:50%; background:#3e5b9f;
}
.radio-option:hover .custom-radio{ border-color:#007bff; }

/* Fieldset semantics */
.radio-fieldset{ border:0; margin:0; padding:0; }
.radio-fieldset > legend{ font:inherit; padding:0; margin-bottom:.35rem; }

/* Two-col rows */
.form-row.two-cols{ display:flex; flex-wrap:wrap; gap:1rem; margin:0 0 -1rem; width:100%; padding:1rem 0; border-bottom:2px solid #ccc; }
.form-row.two-cols .form-group.half{ flex:1 1 calc(50% - .5rem); }
@media (max-width:768px){ .form-row.two-cols .form-group.half{ flex:1 1 100%; } }

/* Booking form panel trigger */
:root{ --cta-bg: rgba(155,208,223,.8); --cta-color: #0592c2; --cta-border: rgba(155,208,223,.6); --cta-shadow: 0 -25px 85px rgba(0,114,186,.4); --cta-icon-bg: rgba(155,208,223,1); --cta-icon-border: rgba(255,255,255,.45); --cta-open-bg: #0592c2; --cta-open-color: #fff; --cta-open-icon-bg: #037b98; --cta-open-icon-border: #036a85; }

.btn-cta-wrap { min-width: 280px; display:flex; gap:1rem; justify-content:flex-end; margin-bottom:1rem; }
.btn-cta { font-family:"Asap Condensed",sans-serif; width:100%; display:inline-flex; align-items:stretch; gap:.75rem; border-radius:8px; border:0 solid var(--cta-border); background:var(--cta-bg); color:var(--cta-color); text-transform:uppercase; font-weight:800; font-size:1.3rem; text-decoration:none; cursor:pointer; box-shadow:var(--cta-shadow); padding:0; transition: filter .2s, transform .2s, background-color .2s, color .2s, border-color .2s; }
.btn-cta__label{ padding:1rem .9rem; line-height:1; display:inline-flex; align-items:center; }
.btn-cta__icon{position: relative;margin-left:auto; display:inline-flex; align-items:center; justify-content:center; padding:.8rem 2.3rem; font-size:2rem !important; border-left:2px solid var(--cta-icon-border); background:var(--cta-icon-bg); border-radius:0 8px 8px 0; }
.btn-cta:hover{ filter:brightness(.95); color:#037b98; transform:scale(1.03); text-decoration:none; }
.btn-cta.is-open{ background:var(--cta-open-bg); color:var(--cta-open-color); border-color:var(--cta-open-bg); }
.btn-cta.is-open .btn-cta__icon{ background:var(--cta-open-icon-bg); border-left-color:var(--cta-open-icon-border); color:#fff; }
.btn-cta.js-panel-toggle{ transition: transform .08s ease; }
.btn-cta.js-panel-toggle:active{ transform: scale(1.1); }
button.js-panel-toggle[type="submit"][disabled]{ opacity:.6; cursor:not-allowed; }

@media print { .btn-cta-wrap, .js-panel-toggle{ display:none !important; } }

/* Panel layout */
.panel-content{ display:flex; align-items:stretch; gap:8rem; }
.panel-aside{ flex:0 0 450px; display:flex; flex-direction:column; gap:0; padding:2rem; background: rgba(155,208,223,.4); border-radius:20px;
}
.panel-main{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.panel-main .form-body{ display:block; }
.aside-block{ padding:0; }

.aside-title, .aside-subtitle{ position:relative; color:#037b98; margin:.5rem 0; padding-left:3.5rem; line-height:1.2; text-align:left; font-weight:800; text-transform:uppercase;
}
.aside-title::before, .aside-subtitle::before{ position:absolute; width:2.8rem; height:2.8rem; left:0; top:50%; transform:translateY(-50%); font-family:"Font Awesome 6 Free"; font-weight:900; line-height:1; display:inline-block; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:#037b98; background:rgba(155,208,223,.3); border:1px solid rgba(155,208,223,.4);
}
.aside-title::before{ content:"\f073"; font-size:.85em; }
.aside-subtitle::before{ content:"\f0eb"; font-size:1.6rem; }
.aside-list{ color:#0592c2; margin:0; padding-left:0; text-align:left; }
.aside-text{ color:#0592c2; font: 400 1.4rem/2rem "Asap Condensed", sans-serif; text-align:left; margin:1rem 0; }

/* Contact panel */
.panel-contact{ background: rgba(155,208,223,0); border: 2px solid rgba(155,208,223,.6); 
box-shadow: 0 -25px 85px rgba(0,114,186,.4); 
margin-top:0; color:#0592c2; text-align:center; font-weight:600; padding: 3rem 3rem; border-radius:16px; width:auto; height:auto; transition: color .2s, transform .2s;
}
.panel-contact[hidden]{ display:none !important; }
.panel-contact.is-animating{ transition: height 280ms cubic-bezier(.2,.7,.2,1), opacity 280ms cubic-bezier(.2,.7,.2,1), transform 280ms cubic-bezier(.2,.7,.2,1); will-change: height, opacity, transform;
}
.panel-contact.is-open{ padding: 50px 100px 100px; }

.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:0; }
.panel-head h3{ margin:20px 0; font-size:1.15rem; }

.panel-close{ appearance:none; display:inline-grid; place-items:center; padding:0; width:60px; height:60px; color:#0592c2; background: rgba(155,208,223,.6); border:2px solid rgba(155,208,223,.6); border-radius:50%; transition: transform 200ms ease;
}
.panel-close i{ font-size:2.5rem; line-height:1; }
.panel-close:hover, .panel-close:focus-visible{ transform: rotate(180deg); outline: 2px solid #0592c2; outline-offset: 2px; background: rgba(0,0,0,.06); color:#037b98; text-decoration:none;
}

@media (max-width: 900px){ .panel-content{ flex-direction:column; gap:2rem; } .panel-aside{ flex-basis:auto; }
}
@media (prefers-reduced-motion: reduce){ .panel-close, .panel-close:hover, .panel-close:focus-visible{ transition:none !important; transform:none !important; } .panel-contact.is-animating{ transition:none !important; }
}

/* Contact buttons */
.contact-row{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1rem; }
.contact-text{ flex:2 1 300px; }
.contact-icons{ display:flex; gap:1rem; justify-content:center; margin:3rem 0; }
.contact-icons button, .contact-icons a { display: block; align-items: center; text-align: center;justify-content:center; padding:.6rem; background: rgba(155,208,223,.6); color:#0592c2; font-weight:800; border:2px solid rgba(155,208,223,.6); border-radius:8px; cursor:pointer; box-shadow: 0 -25px 85px rgba(0,114,186,.4); text-decoration:none; transition: color .2s, transform .2s, box-shadow .2s; }
.contact-icons button:hover, .contact-icons a:hover{ color:#037b98; transform:scale(1.1); }
.contact-icons button:focus-visible, .contact-icons a:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(5,146,194,.35); }
.contact-icons span{ font-family:"Asap Condensed",sans-serif; display:block; margin-top:1rem; font-size:13px !important; font-weight:800; text-transform:uppercase; }

/* brand accents */
.contact-btn.whatsapp{ border-color: rgba(37,211,102,.28); }
.contact-btn.whatsapp i{ color:#25D366; }
.contact-btn.viber{ border-color: rgba(115,96,242,.28); }
.contact-btn.viber i{ color:#7360F2; }
.contact-btn.phone i{ color:#037b98; }

@media (max-width:600px){ .contact-actions{ grid-template-columns:1fr; } }
@media print { .contact-icons{ display:none !important; }
}

/*****************************************************
// Error poruke
******************************************************/
.error-message{ text-align:center; padding:2rem; background:#fee; border:1px solid #fcc; border-radius:8px; color:#c33; margin:2rem 0; }
.error-message h3{ margin:0 0 1rem; font-size:1.5rem; }
.error-message p{ margin:0; font-size:1rem; }