@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url(icons/font-awesome/fontawesome-all.min.css);

/*Aquí variables general d'estils*/
:root {
    --gris-fosc: #d9d9d9;
    --gris-clar: #f2f2f2;
    --vermell-error: #d60000;
    --verd-ok: #428500;
    --groc-warning: #ff9d00;
    --blanc: #ffffff;
    --negre: #000000;
    --font-default: 'Rubik';
}

body{
    font-family: var(--font-default), sans-serif;
    min-height: 100vh;
}

#loadingSpinner{
    width: 8.5rem;
}

#main-content{
    margin-bottom:50px;
    padding-top: 65px !important;
}

.input-group button{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

/*resum del proces de compra plana index*/
#divCistella{
    background-color:var(--negre);
    color:var(--blanc);
    cursor:pointer;
}

/*secció grup activ, seleccio activ (bloc agrupat per element)*/
.blocActiv{
    border: 1px solid #ccc;
    border-radius: 5px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#modalSugerenciaArt .blocActiv{
    gap: 0px;
}


.blocArtBtn{
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.articleInput .input-group {
    max-width: 120px
}

.blockError{
    font-weight: 400;
}

#resumSelectArt{
    flex-direction: column;
    display: flex;
}

#resumSelectArt .imageResumContainer{
    width: 50%;
}

#resumSelectArt .decripResumAct{
    display:grid;
    width: 100%;
}

#resumSelectArt img{
    max-width: 100%;
}

#tabla_horarios img{
    width: 16px;
    height: 16px;
}

/*mida button (per exemple idioma castellano i check més petit no cap)*/    
.botonCss{
    border: 1px solid #ccc;
    border-radius: 5px !important;
    width:120px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.botonGranCss{
    border: 1px solid #ccc;
    border-radius: 5px !important;
    width:160px;
}

.horarios{
    display: grid !important;
    gap: 5px;
    justify-content: center;
    grid-template-columns: repeat(7, auto);
}

.ui-datepicker .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-radius: 10% !important;
}

/*mida button on indica els horaris de les sessions*/    
.botonSessions{
    border: 1px solid #ccc;
    border-radius: 5px !important;
    width:150px;
    height:50px;
    /*float:left;/*para evitar que al hacer filtro haga salto linea*/
    margin:2px;
    padding:4px;
    cursor:pointer;
}

/*mida requadre que mostra tarifes*/

/*input tarifa*/
.iNumPers,.iNumArt{
    text-align:center;
}
    
.info{
    cursor:pointer;
}

#resumSelectArt .deleteCompra{
    cursor:pointer;
    padding-right: 0px !important;
}

#resumSelectArt .preu-linia{
    padding-right: 0px !important;
}

#resumSelectArt .separador{
    border-top: 1px solid var(--negre);
    margin: 0px;
}

#resumSelectArt .separadorClar{
    border-top: 1px solid var(--gris-fosc);
    margin: 10px 0px;
}

#resumSelectArt .total{
    padding:10px;
}

#resumSelectArt .total .preu{
    padding-right: 0px !important;
}

.suggerenciaCarrito select {
    width: 100%;
    height: 100%;
    border: none;
    padding-left: 5%;
}

.suggerenciaCarrito .descrip {
    padding-right: 5px;
    height: 40px;
    border: 1px solid #ddd;
    padding: 0px !important;
}

.suggerenciaCarrito .unidades {
    height: 40px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 0px !important;
}

.iIconArtic{
    cursor:pointer;
}

#lista_articulos{
    padding-right: 9rem;
    padding-left: 9rem;
}

#modalNom{
    font-size: 21px !important;
    font-weight: 400 !important;
}

#modalImg{
    width: 100%;
}

#seccioLOPD label{
    display: inline;
}
    
/*HEADER*/
header{
    position: fixed;
    width: 100%;
    background-color:var(--blanc);
    z-index:9;
}

#divHeader{
    height: 65px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.capsaleraLogo{
    display: flex;
    height: 65px;
    align-items: center;
}

.capsaleraLogo a{
    height: 65px;
    display: flex;
    align-items: center;
}

.capsaleraLogo a img{
    height: 70%;
}

#divIdioma{
  display: inline-block;
  vertical-align: bottom;
  float: none;
  text-align: right;
  gap: 5px;
}
/*FI HEADER*/
    
/*FOOTER*/

#footer{
    position: fixed;
    width: 100%;
    bottom: 0;
    background-color:var(--gris-fosc);
    z-index:9;
}

.img-graphic-social{
    width: 25px;
}

#copyright {
  color: #424242;
  font-size: 12px;
  font-weight: bold;
}
/*FI FOOTER*/

/*LOPD y checks (factura)*/

#bBizum img {
  margin-top: 10px !important;
  max-width: 100%;
  height: 30px;
}

#bTargeta img {
  margin-top: 10px !important;
}

.btn-pagament{
    border: 1px solid var(--negre);
    background: none;
    color: var(--negre);
    width: 250px;
    height: 105px;
}

.btn-pagament-marcat {
    border: 1px solid var(--verd-ok) !important;
    background: none;
    color: var(--verd-ok) !important;
}

#bBizum h4, #bTargeta h4{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*COOKIES*/
.spanCookies {
    padding-left: 0px;   
}

.spanCookies a{
    text-decoration:underline;
    cursor:pointer;
    font-weight:bold;
    color:black !important;    
}

.spanCookies a:hover{
    text-decoration:none;
}

.avisCookiesConfig{
    display:none;
}

#textCookie{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
}

.seccioPrivacitat {
  border: 1px solid var(--negre);
  padding: 5px;
  /*background-color: var(--gris-fosc);*/
} 

.btn-cookie-marcat{
    color: var(--blanc);
    background: var(--verd-ok) ;
}

.btn-cookie-marcat:hover{
    color: var(--gris-fosc);
    background: var(--verd-ok) ;
}

/*Pàgina política de cookies*/
#main-container-cookies{
    color: var(--negre);
    padding-top: 6rem !important;
}

.cookie-table th, .cookie-table td {
    padding: 10px;
}
.cookie-table th {
    font-weight: bold;
    background: #353434;
    color: var(--blanc);
}

.cookie-table tbody {
    background: var(--gris-fosc);
    color: var(--negre);
    font-size: 0.85rem !important;
}

/*FI COOKIES*/
    
#cosPlana{
    margin:30px;
}

/*gris*/    
.modul-info {
    background-color: var(--gris-fosc);
}

/*gris clar*/
.detallCompra{
    background-color: var(--gris-clar);
    margin-bottom:5px;
    /*display:none;*//*inicialment tot tancat*/
}

/*verd*/
.modul-info-verd {
    background-color: var(--verd-ok);
    color:var(--blanc);
}

/*taronja*/
.modul-info-especial {
    background-color: var(--groc-warning);
}

.modul-info-error {
    background-color: var(--vermell-error);
    color:var(--blanc);
}

.modul-info-especial .iconInfo,.modul-info-error .iconInfo,.modul-info-verd .iconInfo{
    float:right;
    cursor:pointer;
}

/*secció calendari,...*/
.fonsGris {
    background-color: var(--gris-fosc);
}

.fonsGrisClar {
    background-color: #f6f6f6;
}

/*INICI - Secció articles suggerits*/

.articleDesc{
    padding-left: 1.5rem;
}

.articleContainer{
    gap: 0px;
    flex-direction: row;
    border: 1px solid #ccc;
    border-radius: 5px !important;
    display: flex;
    align-items: center;
}

.leyenda-info:hover{
    cursor: pointer;
}

.articleFoto img{
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 190px;
}

.opcioMarcadaCont{
    height: 15px;
}

/* FI - Secció articles suggerits*/
.modul-error {
    background-color: var(--groc-warning);
    display:none;
}

.modul-error:after{
    content:"\f071";
    float:inline-end;
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;    
}

.info-ciclo-list {
    color: black !important;
}

.avis{
    border: 1px solid var(--negre);
    padding:5px;
    background-color:var(--gris-fosc);
    max-height: 90px;
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: 12px;
}

.titleNotes{
    font-weight:bold !important;
}

.seccioLOPD label{
    padding-left:5px;
}

#checkSLOPD1,#checkSLOPD2,#checkSLOPD3,#checkSLOPD4{
    padding-bottom:5px;    
}

#iframeBanc{
    width:100%
}

/*renovacio*/

.compraExit{
    font-size: 1.5rem !important;
}

.divLocalizador{
    border: 1px solid #ECECEC;
    background-color: #F5F5F5;
    padding: 4px;
    font-weight: 500;
    width: 200px;
    margin: auto;
}

.capsalResum > div:first-child {
    border-top: 1px solid #6c757d;
}

.dadesPagam {
    border-bottom: 1px solid #6c757d;
}

#bannerComprovant {
    width: 100vw;
    padding-top: 0;
}

#bannerComprovant img {
    width: 100%;
}

/* -- MEDIA QUERIES SECTION -- */
@media (min-width: 1001px) and (max-width: 1150px) {
/*Styles for little laptos or big tablets*/
/*Serveix per quadrar petits elements que no s'acaben de veure bé en aquests tamanys intermitjos*/

    .horarios{
        grid-template-columns: repeat(6, auto);
    }
    
    #lista_articulos {
        padding-right: 7rem;
        padding-left: 7rem;
    }
    
    .articleDesc{
        align-items: center;
    }
    
    .articleInput .input-group {
        max-width: 120px
    }
    
}

/* -- MEDIA QUERIES SECTION -- */
@media (min-width: 1001px) and (max-width: 1190px) {
/*Styles for little laptos or big tablets*/
/*Serveix per quadrar petits elements que no s'acaben de veure bé en aquests tamanys intermitjos*/
    .articleContainer .col-lg-4 {
        width: 30% !important;
    }
    
    .articleContainer .col-lg-2 {
        width: 20% !important;
    }
    
    .articleFoto img {
        max-width: 90% !important;
    }
    
    .articleDesc {
        align-items: start;
    }
}

@media (min-width: 768px) and (max-width: 1000px) {
  /* Styles for tablets in portrait orientation */
    
    #lista_articulos{
        padding-right: 0;
        padding-left: 0;
    }
    
    .articleInput .input-group {
        max-width: 120px
    }
    
    .articleFoto img{
        max-width: 190px;
        max-height: 150px;
    }
    
    .horarios{
        grid-template-columns: repeat(4, auto);
    }
    
    .ui-datepicker .ui-state-default, .ui-widget-content .ui-state-default {
        padding: 10px 0 !important;
        max-width: 50px !important;
        max-height: 60px !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        font-size: 1.25em !important;
    }
    
    /*INICI - secció articles tablet*/
    .articleContainer{
        padding-right: 1rem;
        padding-left: 1rem;
    }
    /*FI - secció articles tablet*/
    
}

@media (min-width: 481px) and (max-width: 767px) {
    #lista_articulos {
        padding-right: 2rem;
        padding-left: 2rem;
    }
    
    .articleDesc {
        align-items: center;
    }
}

/*Mobile queries*/
@media (max-width: 480px) {
    /* Styles for mobile phones in portrait orientation */
        
    #main-content {
        margin-bottom: 90px;
    }
    
    #cosPlana{
        margin: 0px 0px;
    }
    
    #resumSelectArt .imageResumContainer{
        display: none;
    }
    
    #lista_articulos{
        padding-right: 0;
        padding-left: 0;
    }
    
    .horarios{
        grid-template-columns: repeat(2, auto);
    }
    
    .ui-datepicker .ui-state-default, .ui-widget-content .ui-state-default {
        max-width: 40px !important;
        min-width: 30px;
        max-height: 40px !important;
        font-size: 1.15em !important;
    }
    
    .botonSessions{
        width:120px;
    }
    
    #peuCopyright{
        flex-direction: column-reverse;
        gap: 20px 0px;
        padding-top: .7rem !important;
        padding-bottom: .7rem !important;
    }
    
    /*INICI - secció articles movil*/
    .articleContainer{
        gap: 15px;
        flex-direction: column;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .articleDesc{
        align-items: center;
        padding-left: 0;
    }
    
    .articleInput .input-group {
        max-width: 120px
    }
    
    .articleFoto img{
        max-width: 300px;
        max-height: 190px;
    }
    
    /*FI - secció articles movil*/
    
    .btn-pagament{
        min-width: 250px;
        width: 100%;
        margin-top: 15px;
    }
    
    #bannerComprovant {
        padding-top: 5rem;
    }
}