@tailwind base;
@tailwind components;
@tailwind utilities;
 
:root {
  --kolor-szary: #e7e7e7;
  --kolor-szary2:rgb(88, 88, 88);
  --kolor-szary3:rgb(143, 143, 143);
  --kolor-fioletowy: #b53389;
  --kolor-bialy: #ffffff;
  --bs-primary: #b53389;           
  --bs-primary-rgb: 181, 51, 137;  

        --fala-glowna-kolor1: #851c70bb;
        --fala-glowna-kolor2: #b5338a2f;
        --fala-glowna-kolor3: #e9682ca4;
        --fala-glowna-ramka-kolor1: #851c70ec;
        --fala-glowna-ramka-kolor2: #b5338ad0;
        --fala-glowna-ramka-kolor3: #e9682c;
        --fala-subtelna-kolor1: #6d095936;
        --fala-subtelna-kolor2: #e9682c3d;
}

.btn-outline-primary {
  --bs-btn-color: #b53389;
  --bs-btn-border-color: #b53389;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b53389;
  --bs-btn-hover-border-color: #b53389;
  --bs-btn-focus-shadow-rgb: 181, 51, 137;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b53389;
  --bs-btn-active-border-color: #b53389;
  --bs-btn-disabled-color: #b53389;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #b53389;
}

.dropdown-menu{
  --bs-dropdown-bg:#fff;
  --bs-dropdown-border-color:#b53389;

  --bs-dropdown-link-color:#51374b;
  --bs-dropdown-link-hover-color:#b53389;
  --bs-dropdown-link-hover-bg:#fff1f2;

  --bs-dropdown-link-active-color:#b53389;
  --bs-dropdown-link-active-bg:#fce7f3;
}

 .gradient-nad {
  background-color: rgba(255,255,255,0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.45);
  background-clip: padding-box;
 }

.gradient-m{
  background: linear-gradient(135deg, #b5338a49, #a2037d59 45%, #e9682c41);
 }

 


/* [class^="fi-"],
[class*=" fi-"] {
  font-size: 14px !important;
  padding: 4px 2px !important;
}  */

.wave{
  --grad1:#f17e4879; --grad2:#e9681eab; --grad3:#e9682c;
  background: linear-gradient(180deg,var(--grad1),var(--grad2) 55%,var(--grad3));
}


.wave-head {
  --h: 140px;
  height: var(--h);
 position: relative;
 background-color: rgba(255,255,255,0.95);
 border:1px solid rgba(255,255,255,.55);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 160" preserveAspectRatio="none"><path fill="black" d="M0,0 H1440 V110 C1140,60 900,160 720,110 C480,60 240,160 0,110 Z"/></svg>') bottom left / 100% 100% no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 160" preserveAspectRatio="none"><path fill="black" d="M0,0 H1440 V110 C1140,60 900,160 720,110 C480,60 240,160 0,110 Z"/></svg>') bottom left / 100% 100% no-repeat;

}

/* Strzałka */
.arrow-wave{
  width:38px;height:38px;border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;
   background-color: rgba(255,255,255,.3);
}


.nice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.nice-list li {
  --bullet: 22px; 
  --dot: 12px;    
  position: relative;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1.5rem;   
  box-shadow: 0 0px 4px rgba(0,0,0,0.15);
  padding: 0.7rem 1.25rem 0.7rem calc(var(--bullet) + 1.5rem);

  /* padding: 0.8rem 2.5rem; */
}

/* Duże koło */
.nice-list li::before {
  content: "";
  position: absolute;
  left: 0.75rem; 
  top: 50%;
  width: var(--bullet);
  height: var(--bullet);
  transform: translateY(-50%); 
  border-radius: 50%;
  background: rgba(181, 51, 137, 0.05);
  border: 1px solid #b5338ace;         
  box-shadow: 0 2px 4px rgba(0,0,0,.2); 
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}


.nice-list li::after {
  content: "";
  position: absolute;
  left: calc(0.75rem + (var(--bullet) - var(--dot)) / 2); 
  top: 50%;
  transform: translateY(-50%);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: #b5338ace;
}

/* .nice-list li {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1.2rem;   
  box-shadow: 0 0px 4px rgba(0,0,0,0.15);
  padding: 0.8rem 2.5rem;
  margin-bottom: 0.8rem;
} */

.m-lista > span {
  display: block; /* zamiast inline-block, żeby rozciągnęło się na całą szerokość */
  width: 100%;
  background: linear-gradient(135deg, #7a1f5c, #e65ba78a);
  border-radius: 1.2rem;
  color: #fff;
  font-weight: 500;
  font-size: 1.05rem;
  padding: 10px 16px;
  margin-bottom: 1rem; 
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

  /* .MLista.MLista--main > li::marker { color: #e9682c; }
  .M-MyślnikLista > li::marker { color: #495057; }
  .MLista, .M-MyślnikLista { list-style-type: "– "; padding-left: 1.25rem; } */

    .wave-card__background-wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60%;
        z-index: 3; 
        opacity: 0.25;
    }

    .wave-card__background-wave--blurry-clone {
        position: absolute;
        bottom: 2px; /* Lekko obniżona */
        left: 0;
        width: 100%;
        height: 60%;
        z-index: 2; /* Pod główną falą */
        opacity: 0.5;
        filter: blur(5px);
    }
    
    .wave-card__background-wave--subtle {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 70%;
        z-index: 1; 
        filter: drop-shadow(0px -10px 6px rgba(243, 78, 49, 0.3)); 
        opacity:0.3;
    }
    
    .wave-card__content {
        position: relative;
        z-index: 4; /* Treść musi być nad wszystkimi falami */
    }
    /* Pozostałe style bez zmian */
    .wave-card__image {
        border-radius: 0.75rem;
        box-shadow: 0 5px 20px rgba(116, 49, 5, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.8);
        max-width: 100px;
    }
    .wave-card__text {
        color: #343a40;
        line-height: 1.7;
        font-size: 1rem;
    }

/*Tabele*/

.dropdown .dropdown-menu { display: none; }
 .dropdown-menu.show { display: block !important; }

 .fi-ta,
.fi-ta-ctn{
  background-color: #ffffffb7 !important;
 }

.fi-ta-text{
  padding: 8px 10px !important;
  
}
.fi-table-header {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem; 
}

.fi-ta-group-header{
  /* border: 1px solid #a2037e !important; 
  background-color: #a2037e !important; */
  color: #a2037e !important;
  background: linear-gradient(135deg, #b5338a49, #a2037d59 45%, #e9682c41);
  padding-bottom: 10px!important;
  padding-top: 10px!important;
  margin-top: 15px !important;
}

.inactive-row {
    background-color: #ececec !important; 
    color: #d3d3d3d8 !important;          
}
  

.mb-color{
  background: linear-gradient(135deg, #b5338a49, #a2037d59 45%, #e9682c41);
}
.mbm-color{
background: linear-gradient(to right, #a2037e 0%,  #b53389 51%,  #e9692c 100%);
}
.m-ramka {
    border: 1px solid #a2037e !important; 
}

/*Tabele koniec*/
.fc {
  background-color: #f8f9faad !important; /* jasnoszare tło */
}

.m-color2{
  background-color:#e9692c;
}

.fc .fc-event {
    background-color: #a2037e;
    border: none ;
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    padding: 10px 15px;
    border-radius: 4px;
    margin-top: 5px; 
}
.fc-day-sat, .fc-day-sun {
    background-color: #f9f9f9; 
}

.fc .fc-daygrid-day.fc-day-sun,
.fc .fc-daygrid-day.fc-day-sat,
.fc .fc-daygrid-day.fc-holiday {
    background-color: #f9f9f96e!important;
    border-radius: 0 !important;
    opacity: 1 !important;
}


.fc .fc-bg-event {
    border-radius: 0 !important;
    margin-top: 0px !important; 
}
.fc .fc-daygrid-day {
    background-color: #ffffff6b;
}


.fc .fc-day-today {
    background-color: #e9682c7c !important;
}

.fc .fc-view-harness {
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    overflow: hidden; 
    background: #ffffff59;  
}


.fc .fc-button-primary {
    background-color: #b53389;
    border-color: #b53389;
    color: #fff;
}


.fc .fc-button-primary:hover,
.fc .fc-button-primary:focus {
    background-color: #a2037e;
    border-color: #a2037e;
    color: #fff;
}


.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: #e9692c;
    border-color: #e9692c;
    color: #fff;
}

.fc-daygrid-body td:nth-child(6),  
.fc-daygrid-body td:nth-child(7),  
.fc-col-header-cell:nth-child(6),  
.fc-col-header-cell:nth-child(7)   
{
    width: 4% !important;
    min-width: 4% !important;
    max-width: 4% !important;
    padding: 0;
    font-size: 0.8em;
}

.fc-daygrid-body td:nth-child(1),
.fc-daygrid-body td:nth-child(2),
.fc-daygrid-body td:nth-child(3),
.fc-daygrid-body td:nth-child(4),
.fc-daygrid-body td:nth-child(5),
.fc-col-header-cell:nth-child(1),
.fc-col-header-cell:nth-child(2),
.fc-col-header-cell:nth-child(3),
.fc-col-header-cell:nth-child(4),
.fc-col-header-cell:nth-child(5)
{
    width: 18.4% !important;
}

@media (max-width: 576px) {
    .fc-toolbar-title {
        font-size: 1rem !important; 
    }
}


.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.fi-ta-header{
  padding: 20px 10px !important;
}

.fi-ta-cell .fi-ta-actions {
  display: flex !important;
  /* flex-direction: column !important; */
  gap: 0.5rem !important;             
  align-items: flex-start !important; 
}

.f-text-mini span {
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #4b5563; 
    white-space: pre-wrap;
}

.fi-checkbox-input {
  width: 1.2rem !important;       
  height: 1.2rem !important;
  border: 1px solid #d1d5db !important;
  background-color: #531677 !important;
  color: #4b5563;
  border-radius: 0.25rem; 
}

.zostawcol .collapse:not(.show) {
    visibility: collapse;
}

.zostawcol .collapse.show {
    visibility: visible !important;
}


/*
[type=checkbox]:checked, [type=radio]:checked{
  background-color: #59018b !important;
}


[type=checkbox], [type=radio] {
  border: 1px solid #d1d5db !important;  
}
 */


/* Styl podstawowy dla inputów Filament 
.fi-input,
.fi-select,
.fi-textarea,
.choices,
.fi-select-input,
.choices__input[type="search"]*/
.fi-input-wrp,
.form-control   {
  border: 1px solid #d1d5db !important;      
  border-radius: 0.375rem !important;      
  /* padding: 5px 6px !important;        */
  box-shadow: none !important;
  background: #ffffff !important; 
  font-size: 15px !important;              
  /*width: 100% !important;*/
  box-sizing: border-box; 
 /* margin-top: 0 !important;*/
  /* overflow: hidden !important; */
}


html {
    font-size: 100% !important;
}


 /* Definicja wyglądu całego linku */
    .table-course-link {
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        transition: all 0.2s ease-in-out;
    }

    /* Styl podświetlenia po najechaniu na link */
    .table-course-link:hover {
        background-color: #a2037d0a;
        color: #aa0283c0 !important;
        box-shadow: 0 0 4px #5c014827;
        /* width: 100%; */
    }

    /* Wygląd kontenera na obrazek */
    .table-thumbnail-container {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        overflow: hidden;
    }

    /* Wygląd samego obrazka i ikony kalendarza */
    .table-thumbnail-img,
    .table-session-icon {
        transition: transform 0.3s ease-in-out;
    }
    .table-thumbnail-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Efekt powiększenia obrazka i ikony po najechaniu na link */
    .table-course-link:hover .table-thumbnail-img,
    .table-course-link:hover .table-session-icon {
        transform: scale(1.2);
    }


  .title-v4-container {
      height: 80px; 
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      padding: 0 24px 0 0;
  }

  .title-v4-bg-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
  }

  .title-v4-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px); 
      z-index: 2;
  }
  
  .title-v4-content {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 20px;
      width: 100%;
      height: 100%;
  }

  .title-v4-thumbnail {
      width: 15%;
      height: 80px;
      object-fit: cover;
      flex-shrink: 0;
      box-shadow: 5px 0px 15px -5px rgba(0, 0, 0, 0.4);
  }

  .title-v4-text {
      font-size: 1.4rem;
      font-weight: 600;
      color: #b53389;
      margin: 0;
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

  @media (max-width: 576px) {
  img.kosz-item {

    height: 130px !important;   /* mniejsze, nadal cover */
    margin-bottom: 20px;
  }
}

/* Małe tablety (opcjonalnie) */
@media (min-width: 577px) and (max-width: 768px) {
  img.kosz-item {
    height: 160px !important;
    margin-bottom: 20px;
  }
}

ul.mm-lista.ps-3 { padding-left: 4px !important; }
  /* .mm-lista .ps-3{
    padding-inline-start: 0px !important;
    background-color: green;
    padding-right: 0px !important;
  } */

.fi-ac-btn-action,
.fi-btn {
  background-image: linear-gradient(to right, #a2037e 0%,  #b53389 51%,  #e9692c 100%);
  /* color:            white !important; */
}

.fi-btn .fi-btn-icon {
  fill: rgb(207, 207, 207);
}

input[type="radio"]:checked ~ .fi-btn {
  background-image: linear-gradient(to right, #a2037e 0%,  #b53389 51%,  #e9692c 100%);
  color:      #ffffff !important;
}


input[type="radio"]:not(:checked) + label.fi-btn{
  background-image: none   !important;
  color:            #a2037e !important;
  border:           1px solid #e9692c !important;
}


input[type="radio"]:not(:checked) + label.fi-btn .fi-btn-icon {
  fill: #a2037e !important;
}

input[type="radio"]:checked ~ .fi-btn .fi-btn-icon{
    fill: #ffffff !important;
}

.fc .fc-button-primary:disabled {
    background-color: #e9692c;
    border-color: #e9692c;
    color: white;
}

.border-m {
  border: 1px solid #b53389;
  border-radius: 5px !important;
}

.okrag-m{
    border: 1px solid #ececec; 
    background-color:#f3f5f5; 
    width: 40px; 
    height: 40px;

}
.color-m{
    color:#b53389;
}

.color-p{
    color:#e9692c;
}


  .container{
    max-width: 1380px;
  }

  [wire\:snapshot] {
    padding: 0.25rem !important;  /* p-2 zamiast p-4 */
  }

  .no-mr [wire\:snapshot] {
    padding: 0 !important;
}

  /* a dalej już tak jak pisałaś: wewnątrz formularza ZmianaOdst */
  .ZmianaOdst .gap-y-2 {
    row-gap: 0.25rem !important;  /* gap-y-1 */
  }

  .ZmianaOdst {
    row-gap: 0.85rem !important;  /* gap-y-1 */
  }

  .fi-fo-field-wrp-label span {
      color:#7c0360 !important; 
      font-size: 0.85rem !important;
  }

  .fi-fo-field-wrp .grid.gap-y-2 {
    row-gap: 0.15rem !important; 
}

.rep-sections .fi-fo-repeater-item-header,
.rep-lessons  .fi-fo-repeater-item-header{
  background: #f3f4f6;    /* delikatne szare tło */
  border-radius: .5rem;
  padding: .5rem .75rem;
}

/* opcjonalnie: lekki obrys dla jeszcze lepszej widoczności */
.rep-sections .fi-fo-repeater-item-header,
.rep-lessons  .fi-fo-repeater-item-header{
  border: 1px solid #e5e7eb;
}




/* .fi-fo-toggle {
  position: relative !important;
  display: inline-flex !important;
  height: 26px !important;           
  width: 50px !important;          
  flex-shrink: 0 !important;
  cursor: pointer !important;
  border: 1px solid #e5e7eba2 !important;
  border-radius: 9999px !important;    
  outline: none !important;
  transition-property: background-color, border-color, color, fill, stroke, box-shadow, opacity, transform !important;
  transition-duration: 50ms !important;
  transition-timing-function: ease-in-out !important;
  background-color: #a1a5a8 !important;    
  box-shadow: 0 0px 5px 0 rgb(0 0 0 / 0.3) !important;
  margin-top: 2px !important;
  margin-left: 18px;
}


.moja > div {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem; 
}

.Kol_1 > div {
    display: flex;
    align-items: center;
    gap: 0.5rem; 
}

.Kol_1 > div > *:first-child {
    flex: 0 1 auto;
}


.Kol_1 > div > *:not(:first-child) {
    flex: 1 1 0;
    min-width: 0;
}

.fi-fo-toggle:disabled {
  pointer-events: none !important;
  opacity: 0.7 !important;
}

 .fi-fo-toggle > span > span {
  position: absolute !important;
  height: 20px !important;          
  width: 20px !important;            
  transform: translateX(0) !important;  
  border-radius: 9999px !important; 
  align-items: center !important;
  box-shadow: 0 0px 3px 0 rgb(0 0 0 / 0.8) !important;
  transition-duration: 50ms !important;
  transition-property: opacity !important;
  justify-content: center !important;
  border: 1px solid #d1d5db !important;
  transition: 0.2s;
  background-size: 200% auto;
} 


.fi-fo-toggle > span > span:first-child {
  top: 0px; right: 0px; bottom: 0; left: 2px;
  transition-timing-function: ease-out !important;
  background-color: #2f57ef !important; 
}

.fi-fo-toggle > span > span:last-child {
  top: 0px; right: 0; bottom: 0; left: 25px;
  transition-timing-function: ease-in !important;
  background-color: #c664ff !important; 
} */





.moj-dymek {
  position: relative;
  cursor: pointer;
  
}

.moj-dymek::after {
  display: block;
  box-sizing: border-box;
  /* ZMIANA: Dodajemy !important, aby wymusić pokazanie treści */
  content: attr(title) !important;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #331e2e !important;
  color: #ffffff !important;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  z-index: 9999;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  visibility: hidden;
  opacity: 0;
  /*transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;*/
}

.moj-dymek:hover::after {
  visibility: visible;
  opacity: 1;
}

.big-icon svg {
    width: 24px;
    height: 24px;
    color: #c4c4c4;
}

.big-icon2 svg {
    width: 22px !important;
    height: 22px !important;
}