@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/* anti-overflow + przewidywalne boxy */
.container-wtyczka-warsztaty,
.container-wtyczka-warsztaty * {
  box-sizing: border-box;
}

.container-wtyczka-warsztaty{
  padding-left: 12px;
  padding-right: 12px;
}


@media (max-width: 360px) {
  .container-wtyczka-warsztaty { padding: 6px; }

  .container-wtyczka-warsztaty .title,
  .container-wtyczka-warsztaty h1 {
    font-size: 18px;
    line-height: 1.2;
  }

  .container-wtyczka-warsztaty label { font-size: 13px; }

  .container-wtyczka-warsztaty input,
  .container-wtyczka-warsztaty select {
    padding: 10px;
    font-size: 14px;
  }

  .container-wtyczka-warsztaty .calendar-grid { gap: 4px; }
  .container-wtyczka-warsztaty .calendar-day,
  .container-wtyczka-warsztaty .calendar-cell { padding: 6px; font-size: 12px; }
}

.container-wtyczka-warsztaty select{
  width: 100%;
  max-width: 100%;
  padding-right: 44px;      /* miejsce na strzałkę */
  line-height: 1.2;
  text-overflow: ellipsis;  /* ładne ucięcie */
  white-space: nowrap;
  overflow: hidden;
}





.container-wtyczka-warsztaty {
    background-color: #ffffff;
    border-radius: 10px;
    width: 100%;
    padding: 10px;
    padding-left: 12px;
    padding-right: 12px;

    max-width: 1000px;



    transition: opacity 0.5s ease, transform 0.5s ease;
    position: relative; 
    z-index: 1; 
    font-family: 'Montserrat', sans-serif;
}
.container-wtyczka-warsztaty h1,
.container-wtyczka-warsztaty .title{
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-align: left;
    color: #003F6E;
    font-family: 'Montserrat', sans-serif;
}

.container-wtyczka-warsztaty label{
    font-size: 16px;
    margin: 10px 0;
    display: block;
    position: relative;
    font-family: 'Montserrat', sans-serif;
}






.standard-text{
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
}

.notice {
    background-color: #ffeded;
    color: #d8000c;
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-left: 6px solid #d8000c;
    font-size: 1rem;
    border-radius: 5px;
}

.title{
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    text-align: left;
    color: #003F6E;
    font-family: 'Montserrat', sans-serif;
}

.sub-title{
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 40px;
    text-align: left;
    color: #003F6E;
    font-family: 'Montserrat', sans-serif;
}

.sub-title-checkout{
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 40px;
    text-align: left;
    color: #003F6E;
    font-family: 'Montserrat', sans-serif;
}

@media screen and (max-width:768px) {
    .title{
        font-size: 2rem;
    }
    .sub-title{
        font-size: 1.5rem;
    }
    .sub-title-checkout{
        font-size: 1.5rem;
    }
}


.calendar h2 {
    font-size: 20px;
    color: #003F6E;
    margin-bottom: 10px;
    text-align: left;
}

.range-group,
.checkbox-group,
.select-group,
.input-group {
    display: flex;
    flex-direction: column !important;
    margin-bottom: 20px !important;
}



input[type="range"] {
    width: 100%;
}

/* FIX overflow: margin-right tylko dla checkbox/radio, nie dla pól 100% */
.container-wtyczka-warsztaty input[type="checkbox"],
.container-wtyczka-warsztaty input[type="radio"]{
  margin-right: 10px;
}

.container-wtyczka-warsztaty input[type="text"],
.container-wtyczka-warsztaty input[type="email"],
.container-wtyczka-warsztaty input[type="tel"],
.container-wtyczka-warsztaty input[type="number"],
.container-wtyczka-warsztaty select,
.container-wtyczka-warsztaty textarea{
  margin-right: 0 !important;
}


.tooltiptext {
    display: none;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 0px 6px;
    position: absolute;
    z-index: 1;
}

.tooltip-wtyczka .tooltiptext {
    display: block;
}

.total-cost-group {
    text-align: center;
    margin-top: 20px;
}


.container-wtyczka-warsztaty input[type="number"],
.container-wtyczka-warsztaty input[type="range"],
.container-wtyczka-warsztaty select {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-size: 16px;
}

.container-wtyczka-warsztaty input[type="number"]:focus,
.container-wtyczka-warsztaty input[type="range"]:focus,
.container-wtyczka-warsztaty select:focus {
    border-color: #003F6E;
    box-shadow: 0 0 5px rgba(0, 63, 110, 0.5);
    outline: none;
}

.result {
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}
.highlight {
    color: #003F6E;
}
.optional-services {
    margin-top: 20px;
}
.optional-service-item {
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.optional-service-item input {
    margin-right: 10px;
}
.total-cost {
    font-size: 24px;
    color: #003F6E;
    text-align: right;
}
.booking-button {
    margin-top: 20px;
    padding: 12px 20px;
    font-size: 18px;
    color: #fff;
    background-color: #003F6E;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.3s ease;
    width: 100%;
}
.booking-button:hover {
    background-color: #002A4A;
}
.explanation {
    margin-top: 20px;
    font-size: 14px;
    color: #777;
}
.info-icon {
    margin-left: 10px;
    font-size: 16px;
    color: #777;
    cursor: pointer;
    position: relative;
}
.info-icon:hover::after {
    content: attr(data-info);
    position: absolute;
    top: 25px;
    left: 0;
    background: #003F6E;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.detailed-info {
    margin-top: 20px;
    font-size: 14px;
    color: #777;
}
.faq {
    margin-top: 20px;
    font-size: 14px;
    color: #777;
}

.hidden {
    display: none; /* Remove the element from the document flow */
    opacity: 0; /* Make it fully transparent */
    transform: translateY(20px); /* Smoothly move the container down while hiding */
    pointer-events: none; /* Prevent interactions when hidden */
}

.calendar {
    margin-top: 20px;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    opacity: 0;
    display: none;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.calendar.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Main container for the month calendar (FIX overflow) */
.container-wtyczka-warsztaty .calendar-grid{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)); /* kluczowe */
    gap: 6px;                /* było 10px */
    max-width: 100%;
    width: 100%;
    padding: 0;              /* ważne, bo padding potrafi wypchnąć */
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 600px;
}
.container-wtyczka-warsztaty .calendar-day,
.container-wtyczka-warsztaty .calendar-header,
.container-wtyczka-warsztaty .calendar-cell,
.container-wtyczka-warsztaty .calendar-cell-empty{
    min-width: 0;
}


/* Calendar header for days of the week (Mon, Tue, etc.) */
.calendar-header {
    font-weight: bold;
    background-color: #f0f0f0;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    box-shadow: rgba(149, 157, 165, 0.075) 0px 8px 24px;
}

/* Each day cell in the calendar */
.calendar-day {
    background-color: #a0d6d6;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    box-shadow: rgba(149, 157, 165, 0.075) 0px 8px 24px;
    position: relative;
}

/* Empty days (to fill gaps before the 1st of the month or after the last) */
.calendar-empty {
    background-color: transparent;
    box-shadow: none;
    pointer-events: none;
}


.calendar-cell-empty:hover {
    background-color: #c3e6cb00;
}

/* Responsive layout */
@media (max-width: 1024px) {
    .calendar-grid {
        grid-template-columns: repeat(7, 1fr); /* Keep 7 columns on medium screens */
    }
}

@media (max-width: 760px) {
    .calendar-grid {
        grid-template-columns: repeat(7, 1fr); /* Maintain 7 columns on small screens too */
    }
}



.booking-button {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 18px;
    color: #fff;
    background-color: #003F6E;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 50px;
}

.booking-button:hover {
    background-color: #002A4A;
    transform: scale(1.05);
}

.explanation {
    font-size: 14px;
    color: #666;
    margin-top: 20px;
    text-align: center;
}


.container-wtyczka-warsztaty label {
    font-size: 16px;
    margin-bottom: 10px;
    position: relative;
    font-family: 'Montserrat', sans-serif;
}



.range-group,
.checkbox-group,
.total-cost-group {
    margin-bottom: 20px;
}

.range-group input[type="range"] {
    width: 100%;
    margin-top: 10px;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    height: 20px;
    width: 20px;
}

.service-button {
    margin-left: 10px;
    padding: 5px 10px;
    font-size: 14px;
    color: #fff;
    background-color: #003F6E;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.service-button:hover {
    background-color: #002A4A;
    transform: scale(1.05);
}

.total-cost {
    font-size: 20px;
    color: #003F6E;
    font-weight: bold;
    text-align: right;
    font-family: 'Montserrat', sans-serif;
}

.booking-button {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 18px;
    color: #fff;
    background-color: #003F6E;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.booking-button:hover {
    background-color: #002A4A;
    transform: scale(1.05);
}

.explanation {
    font-size: 14px;
    color: #666;
    margin-top: 20px;
    text-align: center;
}

.calendar h2 {
    font-size: 20px;
    color: #003F6E;
    margin-bottom: 10px;
}

.calendar ul {
    list-style: none;
    padding: 0;
}

.calendar li {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #003F6E;
    margin-bottom: 5px;
    border-radius: 5px;
    cursor: pointer; /* Add pointer cursor to indicate clickability */
}

.calendar li.selected {
    background-color: #003F6E;
    color: #fff;
}

.disabled-button{
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 18px;
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    background-color: grey;
    margin-top: 50px;
    cursor: not-allowed;
}



.calendar-header {
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

.calendar-cell,
.calendar-cell-empty {
    padding: 10px;
    text-align: center;
    border: 2px solid transparent;
    cursor: pointer;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}



@media (max-width: 360px) {
   

    .calendar-cell,
    .calendar-cell-empty {
        padding: 5px; /* Reduce padding for smaller screens */
    }
}

.calendar-buttons {
    justify-content: center;
    align-items: center;
    background-color: #003F6E;
    color: white;
    font-size: 16px;
    font-weight: 500;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: rgba(149, 157, 165, 0.075) 0px 8px 24px;
    margin-bottom: 10px;
}

/* Animation on click */
.calendar-buttons:active {
    background-color: #002c51;
    transform: scale(0.95);
}

.arrow {
    font-size: 25px;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

 /* Akordeon FAQ */
 .accordion {
    background-color: #fff;
    color: #003F6E;
    cursor: pointer;
    padding: 20px;
    width: 90%;
    margin:auto;
    text-align: left;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: relative;
    font-weight: 500;
}
.accordion:hover {
    background-color: #f1f1f1;
}
.accordion:after {
    content: '\f078';
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    position: absolute;
    right: 20px;
    font-size: 1rem;
    transition: transform 0.3s ease;
}
.accordion.active:after {
    transform: rotate(180deg);
}
.panel {
    padding: 0 20px;
    background-color: #fff;
    display: none;
    overflow: hidden;
    font-size: 1rem;
    border-radius: 0 0 5px 5px;
    border-top: none;
    line-height: 1.6;
}
.panel p {
    margin: 15px 0;
}

/* Mapka */
.map-container {
    margin-top: 50px;
    text-align: center;
}
.map-container h2 {
    font-size: 2rem;
    color: #003F6E;
    margin-bottom: 30px;
}
.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border: none;
    border-radius: 10px;
}

input[type="range"] {
    width: 100%;
    margin-top: 15px;
    -webkit-appearance: none;
    background: transparent;
}
input[type="range"]:focus {
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #003F6E;
    width: 20px;
    height: 20px;
    position: relative;
    bottom: 5px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
    border: 2px solid #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
input[type="range"]::-webkit-slider-thumb:hover {
    background: #005a9c;
}
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: #ccc;
    border-radius: 5px;
}
/* Dodatkowe style dla innych przeglądarek */
input[type="range"]::-moz-range-thumb {
    background: #003F6E;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: #ccc;
    border-radius: 5px;
}
input[type="range"]::-ms-thumb {
    background: #003F6E;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
input[type="range"]::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type="range"]::-ms-fill-lower {
    background: #ccc;
    border-radius: 5px;
}
input[type="range"]::-ms-fill-upper {
    background: #ccc;
    border-radius: 5px;
}

.slider-value {
    font-size: 1.2rem;
    color: #005a9c;
    font-weight: 600;
    margin-top: 10px;
}

.error-message {
    color: #f44336; /* Red color for the error */
    font-size: 0.9rem;
    margin-top: 5px;
    display: block; /* Ensure it appears as a block element */
  }
  
  .checkbox-container {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start; /* Align them to the start */
  }
  
  .calendar-day.selected-day {
    background-color: #caf0f8; /* Highlight the selected day */
    border: 2px solid #003F6E; /* Optional border for the selected day */
}

.time-slot-container {
    margin-top: 10px;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
}

.time-slot-section {
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Responsive grid columns */
    gap: 10px; /* Space between grid items */
    margin-top: 20px; /* Space above the section */
    padding: 10px;
}





.day-unavailable {
    background-color: rgb(238, 238, 238); /* Light red background */
    color: black; /* Dark red text color */
}

#time-slot-title{
    display: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 700;
}

#month-year-display{
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 20px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
box-shadow: rgba(149, 157, 165, 0.075) 0px 8px 24px;
font-family: 'Montserrat', sans-serif;
}

/* inputy tekstowe (bez checkbox/radio/range) */
.container-wtyczka-warsztaty input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.container-wtyczka-warsztaty textarea{
  width: 100%;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 16px;
  border: 1px solid #003F6E;
}

/* pewniak: checkbox/radio nie dostają width/padding/border od „input” */
.container-wtyczka-warsztaty input[type="checkbox"],
.container-wtyczka-warsztaty input[type="radio"]{
  width: auto !important;
  padding: 0 !important;
  box-sizing: content-box !important;
}


/* FINAL: button */
.container-wtyczka-warsztaty .booking-button{
    display:block;
    width:100%;
    padding: 14px 18px;
    font-size: 18px;
    color:#fff;
    background:#003F6E;
    border:none;
    border-radius: 8px;
    cursor:pointer;
    transition: background-color .2s ease, transform .15s ease;
    margin-top: 24px; /* zamiast 50px */
}
.container-wtyczka-warsztaty .booking-button:hover{
    background:#002A4A;
}
.container-wtyczka-warsztaty .booking-button:active{
    transform: scale(0.98);
}

/* FINAL: calendar cell */
.container-wtyczka-warsztaty .calendar-cell{
    background-color: #caf0f8;
    padding: 10px;
    text-align:center;
    border-radius: 10px;
    cursor:pointer;
    font-weight:700;
    color:#003F6E;
    border:2px solid transparent;
    box-shadow: rgba(149,157,165,.075) 0 8px 24px;
}
.container-wtyczka-warsztaty .calendar-cell:hover{
    background-color:#90e0ef;
}
.container-wtyczka-warsztaty .calendar-cell-empty{
    background: transparent;
    border:2px solid transparent;
    pointer-events:none;
    opacity:.35;
}

@media (max-width: 160px){
  .container-wtyczka-warsztaty { padding: 4px; }
  .container-wtyczka-warsztaty * { font-size: 11px !important; line-height: 1.15; }
  .container-wtyczka-warsztaty .title,
  .container-wtyczka-warsztaty h1 { font-size: 12px !important; }
}


.container-wtyczka-warsztaty input,
.container-wtyczka-warsztaty select,
.container-wtyczka-warsztaty textarea {
  display: block;
  max-width: 100%;
}

@media (max-width: 420px){
  .container-wtyczka-warsztaty select{
    font-size: 14px;
  }
}

@media (max-width: 420px){
  .container-wtyczka-warsztaty .calendar-grid{ gap: 4px; }
  .container-wtyczka-warsztaty .calendar-day,
  .container-wtyczka-warsztaty .calendar-cell{ padding: 6px; font-size: 12px; }
}

/* --- FIX: kalendarz nie może wypychać na prawo --- */
.container-wtyczka-warsztaty{
  margin-left: auto;
  margin-right: auto;
}

.container-wtyczka-warsztaty .calendar{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;   /* ucina elementy uciekające w prawo */
}

.container-wtyczka-warsztaty .calendar-grid{
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow-x: hidden;
}

.container-wtyczka-warsztaty .calendar-grid > *{
  min-width: 0;         /* krytyczne dla gridów na mobile */
}

/* opcjonalnie: usuń „pasek” scrolla wewnątrz kalendarza na telefonie */
@media (max-width: 480px){
  .container-wtyczka-warsztaty .calendar-grid{
    max-height: none;
    overflow-y: visible;
  }
}

/* === HOTFIX: kalendarz nie może wypychać layoutu (S20/S24) === */

/* 1) Zablokuj poziomy overflow tylko w sekcji kalendarza */
.calendar {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

/* 2) Grid musi mieć minmax(0,1fr) + mniejsze przerwy */
.calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3) Każda komórka MUSI móc się zwęzić */
.calendar-grid > * {
  min-width: 0 !important;
}

/* 4) Na wąskich ekranach zmniejsz padding/font, żeby 10–31 nie łamało się na 1 + 0 */
@media (max-width: 420px) {
  .calendar-grid { gap: 4px !important; }

  .calendar-cell,
  .calendar-cell-empty,
  .calendar-day,
  .calendar-header {
    padding: 6px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }
}

/* 5) Upewnij się, że wrapper jest centrowany (nie rusza checkboxów/radio) */
.container-wtyczka-warsztaty {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
}
/* HARD FIX: nie pozwól, żeby cokolwiek wypchnęło layout w poziomie */
.container-wtyczka-warsztaty{
  overflow-x: clip;           /* lepsze niż hidden (nie tworzy scrolla) */
  max-width: 100%;
}

@supports not (overflow: clip){
  .container-wtyczka-warsztaty{ overflow-x: hidden; }
}

/* FIX Android: input nie może rozszerzać layoutu po focus */
.container-wtyczka-warsztaty,
.container-wtyczka-warsztaty * {
  box-sizing: border-box !important;
}

.container-wtyczka-warsztaty {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;  /* blokuje „uciekanie” ekranu */
}

/* jeśli gdzieś masz flex – to jest krytyczne na Androidzie */
.container-wtyczka-warsztaty * {
  min-width: 0;
}

/* twarde ograniczenie szerokości – ale NIE dla checkbox/radio/range */
.container-wtyczka-warsztaty input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.container-wtyczka-warsztaty select,
.container-wtyczka-warsztaty textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* checkbox/radio zawsze normalne */
.container-wtyczka-warsztaty input[type="checkbox"],
.container-wtyczka-warsztaty input[type="radio"]{
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  transform: none !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
  accent-color: #003F6E;
}


/* Android/Chrome potrafi dorzucić własny wygląd/rozmiar na focus */
.container-wtyczka-warsztaty input:focus,
.container-wtyczka-warsztaty select:focus,
.container-wtyczka-warsztaty textarea:focus {
  outline: none;
}

/* jeżeli radio/checkboxy się “psują” po width:100%, to je wykluczamy */
.container-wtyczka-warsztaty input[type="radio"],
.container-wtyczka-warsztaty input[type="checkbox"] {
  width: auto !important;
  max-width: none !important;
}
















/* === Stripe Embedded Checkout: full-bleed tylko na mobile (naprawa uciętej prawej strony) === */
@media (max-width: 520px){

  /* rodzice nie mogą ucinać checkoutu */
  .reservation__calendarBox,
  .container-wtyczka-warsztaty{
    overflow-x: visible !important;
  }

  /* wyciągnij checkout na pełną szerokość viewportu */
  .container-wtyczka-warsztaty #checkout{
    width: 100vw !important;
    max-width: 100vw !important;

    /* centrowanie 100vw względem strony */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /* NIE dodawaj paddingów tutaj – to potrafi znowu „uciąć” */
    padding: 0 !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* iframe musi wypełnić full-bleed */
  .container-wtyczka-warsztaty #checkout iframe[name="embedded-checkout"],
  .container-wtyczka-warsztaty #checkout iframe{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
  }

  /* Stripe wrappery (jeśli są) też nie mogą mieć min-width */
  .container-wtyczka-warsztaty #checkout .HeightObserverProvider,
  .container-wtyczka-warsztaty #checkout .HeightObserverProvider-container,
  .container-wtyczka-warsztaty #checkout [class*="HeightObserverProvider"]{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }
}

/* desktop/tablet – normalnie, bez full-bleed */
@media (min-width: 521px){
  .container-wtyczka-warsztaty #checkout{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}








/* === FIX 360px: numery dni w 1 linii (np. 10, 11, 12) === */
@media (max-width: 360px) {
  .container-wtyczka-warsztaty .calendar-grid{
    gap: 3px !important;
  }

  .container-wtyczka-warsztaty .calendar-day,
  .container-wtyczka-warsztaty .calendar-cell,
  .container-wtyczka-warsztaty .calendar-cell-empty,
  .container-wtyczka-warsztaty .calendar-header{
    padding: 4px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  /* to jest klucz: nie pozwól łamać 10/11/12 na dwie linie */
  .container-wtyczka-warsztaty .calendar-day strong{
    display: inline-block;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
}











/* === miesiąc w 1 linii, bez kropek === */
.container-wtyczka-warsztaty #month-year-display{
  white-space: nowrap;     /* nie zawijaj */
  overflow: visible;       /* bez ucinania */
  text-overflow: unset;
  text-align: center;
  line-height: 1.2;
}

/* zwężamy tylko na mobile */
@media (max-width: 420px){
  .container-wtyczka-warsztaty #month-year-display{
    font-size: 13px;       /* zmniejsz czcionkę */
    padding: 8px 8px;
  }

  /* dajmy środkowi realną szerokość: przyciski nie mogą jej zabierać */
  .container-wtyczka-warsztaty .calendar-buttons{
    padding: 10px 12px;    /* mniejsze przyciski na mobile */
    min-width: 44px;
  }
}








/* === Center: Wybierz godzinę === */
.container-wtyczka-warsztaty #time-slot-title{
  text-align: center !important;
}






/* === KALENDARZ: nawigacja (← miesiąc →) równo z gridem + miesiąc bez łamania === */

/* ten <section style="display:flex;"> w kalendarzu */
.container-wtyczka-warsztaty .calendar section{
  display: grid !important;
  grid-template-columns: 56px 1fr 56px; /* lewy przycisk | miesiąc | prawy przycisk */
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin: 0 0 10px 0;
  padding: 0; /* równo z calendar-grid (który ma padding:0) */
}

/* przyciski: stała szerokość, nie rozjeżdżają układu */
.container-wtyczka-warsztaty .calendar section .calendar-buttons{
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center;
}

/* środek: miesiąc zawsze w 1 linii i wycentrowany względem przycisków */
.container-wtyczka-warsztaty #month-year-display{
  justify-self: center;
  text-align: center;
  white-space: nowrap;     /* klucz: bez łamania “Kwiecień 2026” */
  line-height: 1.1;
  padding: 0 !important;
  margin: 0 !important;
  font-size: clamp(13px, 4.2vw, 16px); /* na 360px automatycznie zmniejszy */
}

/* === GODZINY / BRAK TERMINÓW: centrowanie === */

/* jeśli JS wstawia tekst "Brak wolnych terminów" bez wrappera, to i tak się wycentruje */
.container-wtyczka-warsztaty #time-slot-section{
  justify-items: center;  /* dla grid items */
  text-align: center;     /* dla “gołego” tekstu */
}

/* jeśli masz ten tekst w osobnym elemencie (polecam), to też będzie centrowane */
.container-wtyczka-warsztaty .no-appointments,
.container-wtyczka-warsztaty .no-slots,
.container-wtyczka-warsztaty #no-appointments{
  text-align: center;
  width: 100%;
}









/* --- NAV: 50% mniejsze przyciski i miesiąc --- */
.container-wtyczka-warsztaty .calendar section{
  grid-template-columns: 28px 1fr 28px !important; /* było 56/1fr/56 */
  gap: 8px !important;
}

.container-wtyczka-warsztaty .calendar section .calendar-buttons{
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
}

.container-wtyczka-warsztaty .calendar section .calendar-buttons .arrow{
  font-size: 13px !important; /* było ~25 */
  line-height: 1 !important;
}

.container-wtyczka-warsztaty #month-year-display{
  font-size: clamp(11px, 2.6vw, 13px) !important; /* ~50% mniejsze */
  padding: 0 !important;
}




/* === Kalendarz: strzałki + miesiąc w jednej linii, równo === */
.container-wtyczka-warsztaty .calendar section{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
}

/* lewy i prawy przycisk – jednakowy rozmiar */
.container-wtyczka-warsztaty .calendar section .calendar-buttons{
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
}

/* strzałki w środku */
.container-wtyczka-warsztaty .calendar section .calendar-buttons .arrow{
  font-size: 16px !important;
  line-height: 1 !important;
}

/* miesiąc zawsze na środku i nie łamie się */
.container-wtyczka-warsztaty #month-year-display{
  flex: 1 1 auto !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* Koszt minimalny / maksymalny – mniejsza czcionka na mobile */
@media (max-width: 420px){
  .container-wtyczka-warsztaty .total-cost{
    font-size: 18px !important;   /* było 24px */
    line-height: 1.2 !important;
  }
}


/* Wycentrowanie nagłówka "Wybierz termin" */
.container-wtyczka-warsztaty h2.sub-title{
  text-align: center !important;
}








/* FIX: iPhone 12 Pro Max (i szerokie telefony) nie mogą wchodzić w układ 3-kolumnowy */
@media (max-width: 520px) {

  /* wymuś 1 kolumnę zamiast 1-2-1 */
  .grid-1-2-1{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* upewnij się, że środkowe sekcje rozciągają się na całą szerokość */
  .grid-1-2-1 > *{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* to jest zwykle ten biały box z formularzem */
  .reservation__calendarBox,
  .reservation__calendarBox .container-wtyczka-warsztaty{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}






/* iPhone / Safari: cyfry w kalendarzu nigdy nie mogą się łamać */
.container-wtyczka-warsztaty .calendar-day,
.container-wtyczka-warsztaty .calendar-cell,
.container-wtyczka-warsztaty .calendar-header{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1 !important;
}

/* jeśli cyfra jest w <strong> (u Ciebie tak jest) */
.container-wtyczka-warsztaty .calendar-day strong{
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1 !important;
}

/* twardy bezpiecznik dla szerokich iPhone (12 Pro Max itp.) */
@media (min-width: 390px) and (max-width: 520px){
  .container-wtyczka-warsztaty .calendar-day,
  .container-wtyczka-warsztaty .calendar-cell{
    font-size: 13px !important;     /* minimalnie mniejsze */
    padding: 8px !important;        /* ciut mniej paddingu, żeby komórka była szersza “dla tekstu” */
  }
}





@media (max-width: 380px){
  .total-cost-group .total-cost,
  #costResultMin,
  #costResultMax{
    font-size: 14px !important;   /* było wizualnie za duże */
    line-height: 1.2 !important;
    text-align: center !important;
    word-break: keep-all !important;
    
  }
}






/* === MOBILE <= 380px: 100% centrowanie miesiąca + przyciski na bokach === */
@media (max-width: 380px){

  /* wrapper z prev / month / next */
  .container-wtyczka-warsztaty .calendar section{
    position: relative !important;
    display: block !important;      /* zabija flexa z inline */
    height: 36px !important;
    margin: 0 0 10px 0 !important;
  }

  /* przyciski przyklejone do boków, identyczny rozmiar */
  .container-wtyczka-warsztaty #prev-btn,
  .container-wtyczka-warsztaty #next-btn{
    position: absolute !important;
    top: 0 !important;
    width: 44px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 10px !important;
    z-index: 2 !important;
  }

  .container-wtyczka-warsztaty #prev-btn{ left: 0 !important; }
  .container-wtyczka-warsztaty #next-btn{ right: 0 !important; }

  .container-wtyczka-warsztaty .calendar-buttons .arrow{
    font-size: 16px !important;
    line-height: 1 !important;
  }

  /* miesiąc ZAWSZE w środku (nie “bardziej w prawo”) */
  .container-wtyczka-warsztaty #month-year-display{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: calc(100% - 104px) !important; /* 44 + 44 + ~16 luzu */
    text-align: center !important;

    font-size: 12px !important;
    padding: 0 !important;
    margin: 0 !important;

    white-space: nowrap !important;
    box-shadow: none !important;    /* to potrafi “udawać” przesunięcie */
    z-index: 1 !important;
  }
}



.container-wtyczka-warsztaty label{
  overflow: visible !important;
}










.tooltip-wtyczka {
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-left: 5px;
    color: #fff;
    background-color: #003F6E;
    padding: 0 6px;
    border-radius: 5px;
    font-size: 11px;
    overflow: visible;

}

.tooltip-wtyczka .tooltiptext {
    visibility: hidden;
    background-color: #003F6E;
    color: #fff;
    text-align: left;
    border-radius: 8px;
    padding: 10px 12px;
    position: absolute;
    z-index: 9999;
bottom: calc(100% + 8px);

/* mniejszy dymek */
width: auto;



white-space: normal;
max-width: min(220px, 85vw);
min-width: 120px;

overflow-wrap: normal;
word-break: normal;
hyphens: auto;


left: clamp(12px, 50%, calc(100% - 12px));
transform: translateX(calc(-50% - 80px));


    margin-left: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tooltip-wtyczka .tooltiptext a,
.tooltip-wtyczka .tooltiptext code{
  word-break: break-word;
}



.tooltip-wtyczka:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/* === TOOLTIP DESKTOP (od 501px wzwyż) === */
@media (min-width: 501px){

  .tooltip-wtyczka{
    font-size: 12px; /* opcjonalnie, możesz zostawić 11px */
  }

  .tooltip-wtyczka .tooltiptext{
    /* desktop: stabilnie nad ? bez offsetów */
    left: 50% !important;
    transform: translateX(-50%) !important;

    /* desktop: można dać stały rozmiar albo większy limit */
    width: 320px;
    max-width: 320px;
    min-width: 320px;
  }
}

/* === DESKTOP: szybciej zawijaj długie opisy przy checkboxach === */
@media (min-width: 501px){

  /* jeśli masz układ: .optional-service-item = wiersz z checkbox + tekst */
  .optional-service-item label{
    max-width: 520px;      /* zmniejsz, żeby zawijało szybciej */
    display: inline-block; /* max-width zaczyna działać */
    white-space: normal;
  }

}


@media (min-width: 501px){

  /* === FIX DESKTOP: ? nie ucieka na skrajnie prawo === */
  .optional-service-item{
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex-wrap: wrap;
  }

  .optional-service-item input[type="checkbox"],
  .optional-service-item input[type="radio"]{
    flex: 0 0 auto;
  }

  /* klucz: label nie może zajmować 100% szerokości */
  .optional-service-item label{
    flex: 0 1 auto;
    display: inline;
    max-width: calc(100% - 36px);
    white-space: normal;
  }

  .optional-service-item .tooltip-wtyczka{
    flex: 0 0 auto;
    margin-left: 0 !important;
  }

}


/* === DESKTOP: dymek otwiera się w LEWO od ? (nie wyjeżdża poza prawą krawędź) === */
@media (min-width: 501px){
  .tooltip-wtyczka .tooltiptext{
    left: auto !important;
    right: 0 !important;              /* przyklej do prawej krawędzi ? */
    transform: none !important;       /* bez centrowania */
    max-width: 320px;                 /* możesz dać 320 jeśli chcesz mniejszy */
    width: 320px;
  }
}



@media (min-width: 501px){
  .tooltip-wtyczka .tooltiptext{
    /* kotwiczenie do prawej krawędzi ? */
    right: 0 !important;
    left: auto !important;
    transform: none !important;

    /* WYMUSZAMY wąski dymek */
    width: 160px !important;
    min-width: 0 !important;
    max-width: 160px !important;

    /* może być wyższy */
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
}