/*
Theme Name: Lithium Marketing Child
Template:   lithium-main
Description:  Theme enfant pour Lithium Marketing
Author: Lithium Marketing
Version: 1.0
*/
:root{
    --mobile-text-align:left;
    --mobile-flex-justify:flex-start;
}

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#loader.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Spinner */
#loader .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ccc;
    border-top: 5px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#dropzone														{ max-width: 35rem;  margin: auto; box-sizing: border-box; background: #ccc;
   /* outline: 2px dashed #fcb131;  border:2rem solid #fff; */ position: relative;}

#dropzone.background											{ outline: none; }
#dropzone:before												{ padding-top: 125%;}


#dropzone.wide													{ max-width: 42.75rem}
#dropzone.wide:before											{ padding-top: 80%;}

#dropzone .img-parts											{ position: absolute; /*top: -2rem; left: -2rem; padding: 2rem;*/  width: 100%;
    height: 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; }
#apb_backgrounds												{ z-index: 1;}
#apb_pictures													{ z-index: 2;}
#apb_frames														{ z-index: 3;}

#dropzone .info													{ display: inline-block;}
#dropzone.picture												{ /*background: none;*/}
#dropzone.picture .info											{ display: none;}
#dropzone .h1													{ width: 100%;}

#dropzone.hcollapse												{ border-width: 1.5rem; }
#dropzone .h1.hcollapse											{ font-size: 1.8rem; }
#dropzone .h1.hcollapse .txt									{ display: none}


#dropzone .dropzoneinfo											{ position: absolute;  top: -4rem; left: 0; display: block; width: 100%;
    text-align: center; z-index: 4;}

#dropzone .dropzoneinfo	small:not(:empty) +small:not(:empty):before { content: '+ '}
#dropzone .dropzoneinfo.hcollapse								{ display: none; }



#dropzone .dropzonebtt											{ position: absolute;  bottom: -4rem; left: 0; display: block; width: 100%;
    text-align: center; z-index: 4 }

#dropzone .dropzonebtt a										{ opacity: 0.5; transition: all .4s ease 0s; }
#dropzone.complete .dropzonebtt a								{ cursor:pointer; opacity: 1; }
#dropzone .dropzonebtt.hcollapse span							{ display: none;}

.hidden{
    display: none;
}

.table-n{
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}
.grid-5															{ width: 5%; }
.grid-10														{ width: 10%; }
.grid-12														{ width: 12.5%; }
.grid-15														{ width: 15%; }
.grid-16														{ width: 16.66666%; }
.grid-20														{ width: 20%; }
.grid-25														{ width: 25%; }
.grid-30														{ width: 30%; }
.grid-33														{ width: 33.33333%; }
.grid-35														{ width: 35%; }
.grid-40														{ width: 40%; }
.grid-45														{ width: 45%; }
.grid-50														{ width: 50%; }
.grid-55														{ width: 55%; }
.grid-60														{ width: 60%; }
.grid-65														{ width: 65%; }
.grid-66														{ width: 66.66666%; }
.grid-70														{ width: 70%; }
.grid-75														{ width: 75%; }
.grid-80														{ width: 80%; }
.grid-85														{ width: 85%; }
.grid-90														{ width: 90%; }
.grid-95														{ width: 95%; }
.grid-100														{ width: 100%; float: none; }

#checkout #cartdata,
#checkout #shippingdata,
#checkout #paymentsdata,
#checkout #confirm													{ display: none;}

#checkout.cart #cartdata,
#checkout.shipping #shippingdata,
#checkout.paiement #paymentsdata,
#checkout.confimr #confirm											{ display: block;}