@import url('https://fonts.cdnfonts.com/css/shrikhand');
@import url('https://fonts.cdnfonts.com/css/montserrat');
@import url('https://fonts.cdnfonts.com/css/reenie-beanie');

@font-face {
    font-family: "DuperWeb W03 Regular";
    src: url("./DuperWeb_W03_Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-title: 'Shrikhand', sans-serif;
    --font-menu: "DuperWeb W03 Regular", sans-serif; 
    --font-default: 'Montserrat', sans-serif;
    
    --color-black: #484848;
    --color-bluelight: #5fb9f7;
    --color-brown: #885c5b;
    --color-graylight: #f2f2f2;
    --color-graymedium: #dadada;
    --color-green: #198754;
    --color-greenlight: #ccffcc;
    --color-orange: #f39e79;
    --color-orangelight: #f3dfd6;    
    --color-purple: #ab6df6;
    --color-purplelight: #dccbf5;    
    --color-red: #dc3545;
    --color-redmedium: #f56e6b;    
    --color-redlight: #ffcccc;
    --color-white: #ffffff;    
    --color-yellow: #f4c784;
}

.text-title {
    font-family: var(--font-title);
    color: var(--color-white);
    -webkit-text-stroke: 2px var(--color-brown); 
}
.text-subtitle {
    font-family: var(--font-menu);
    color: var(--color-brown);
}

/* footer to bottom */
body {
    height: 100%;
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

/* mobile */
body {
    display: grid;
    grid-template-areas: 
    'header'
    'main'
    'footer';

    font-family: var(--font-default);
}

.menu {
    margin-top: 5px;
}
.menu ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu ul li {
    margin: 5px;
}
.menu ul li a {
    text-decoration: none;
    color: var(--color-white);
    background-color: var(--color-orange);
    padding: 15px;
    border: 2px var(--color-white) solid;
    border-radius: 30px;
    text-transform: uppercase;

    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-menu);
    position: relative;
}
.menu ul li a:hover {
    background-color: var(--color-purple);
}
.menu ul li a.active {
    background-color: var(--color-purple);
    color: var(--color-white);
}
.menu ul li a i {
    line-height: 20px;
}
.menu ul li a span {
    font-size: 15px;
    margin-top: 5px;
    line-height: 20px;
}

header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;

    background-color: var(--color-orangelight);
    color: var(--color-white);
    padding: 10px;

    grid-area: header;

    position: sticky;
    top: 0;
    z-index: 100;    
}
header h1 {
    white-space: nowrap;
    margin: 0;
    font-size: 40px;
}
header h1 p {
    margin: 0;
}
header a {
    text-decoration: none;
    color: var(--color-white);
}
header #logo {
    width: 60px;
}

.info {
    background-color: var(--color-orange);
    color: var(--color-black);
    border-radius: 10px;
    text-align: center;
}
.info #banners .carousel-inner {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

main {
    /*
    background-image: url("../img/bg.jpg");
    */
    
    grid-area: main;
}
main section {
    background-color: var(--color-white);
}
main section > h2 {
    background-color: var(--color-orange);
    padding: 10px;
    border-radius: 10px;
    color: var(--color-white);
    text-transform: uppercase;
    font-size: 18px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

main .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /*1fr*/;
    gap: 10px;
    place-items: start;
}
@media (min-width: 576px) {
    main .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 768px) {
    main .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 992px) {
    main .gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 1200px) {
    main .gallery {
        grid-template-columns: repeat(5, 1fr);
    }
}
@media (min-width: 1400px) {
    main .gallery {
        grid-template-columns: repeat(5, 1fr);
    }
}

main a {
    text-decoration: none;
    color: var(--color-orange);
}
main a:hover {
    text-decoration: none;
    color: var(--color-purple);
}
main .gallery-item {
    display: flex;
    flex-direction: column;

    background-color:var(--color-white);
    border: 1px var(--color-graymedium) solid;
    color: var(--color-black);
    border-radius: 10px;
    padding: 10px;
    /*
    height: 360px;
    */
    /*
    max-width: 260px;
    */

    transition: all .1s;

    position: relative;
}
main .gallery-item img {
    width: 100%;
    border: 0;
    border-radius: 10px;

    /* filter: grayscale(100%); */
    transition: .1s ease-out;
}

main a:hover .gallery-item img {
    /* filter: grayscale(0%); */
}
main a:hover .gallery-item {
    background-color: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.1);

    z-index: 2;
}
main .gallery-item p {
    margin-top: 5px;
    font-weight: 500;
    min-height: 3em;
    max-height: 3em;
    overflow: hidden;    
}

#contact-info li a:hover * {
    color: var(--color-purple) !important;
}

.cart-total_items-quantity,
.cart-total_items-price {
    width: 30px;
}

nav.breadcrumb {
    background-color: var(--color-orange);
    padding: 5px;
    border-radius: 10px;
    color: var(--color-white);
    font-size: 15px;
    margin-bottom: 10px;
}
nav.breadcrumb ol {
    margin-bottom: 0 !important;
}
nav.breadcrumb ol li a,
nav.breadcrumb ol li.active {
    border-radius: var(--bs-border-radius);
    padding: 0 8px;
    color: var(--color-white) !important;
}
nav.breadcrumb ol li a:hover {
    background-color: var(--color-purple);
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: var(--color-orange);
    color: var(--color-white);
    padding: 10px;

    grid-area: footer;
}
footer a {
    color: var(--color-white);
}
footer a:hover {
    color: var(--color-purple);
}
footer p {
    margin: 0px;
    text-align: center;
}

/* tablet */
@media (min-width: 576px) {
    body {
        grid-template-areas: 
        'header'
        'main'
        'footer';
        grid-template-columns: 1fr;        
    }

    header {
        flex-direction: row;
    }
    header #logo {
        width: 150px;
    }

    .menu {
        display: block;
        margin-top: 0px;
        margin-left: 20px;
    }
    .menu ul li a {
        text-align: center;
    }
    .menu ul li a span {
        font-size: 20px;
    }
}

/* desktop */
@media (min-width: 992px) {
    body {
        grid-template-areas: 
        'header main'
        'header main'
        'header footer';
        grid-template-columns: 250px 1fr;
    }

    header {
        flex-direction: column;
        align-items: center;
        justify-content: start;

        position: fixed;
        width: 250px;
        height: 100%;
    }

    .menu {
        display: block;
        margin-top: 5px;
        margin-left: 0;
    }
    .menu ul {
        flex-direction: column;
    }
    .menu ul li a {
        display: block;
        text-align: left;
    }
}

form label {
    font-weight: 500;
}

.form-section {
    padding: 20px;
    border: 1px var(--color-graymedium) solid;
    border-radius: var(--bs-border-radius);
    background-color: var(--color-white);
}

@media (min-width: 576px) {
    .max-w-md {
        max-width: 200px;
    }
}

hr {
    color: var(--color-graymedium);
    opacity: 1;
}

table tr.active td {
    background-color: var(--color-orangelight) !important;
    color: var(--color-brown) !important;
}

.blink {
    animation: blink 1.5s infinite;
}
@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Cart */
.Cart .cart-item {
    border: 1px var(--color-graymedium) solid;
    border-bottom: 0;
    padding: 20px;
}
.Cart .cart-item:first-child {
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
}
.Cart .cart-item:last-child {
    border: 1px var(--color-graymedium) solid;
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);    
}
.Cart .cart-item:nth-child(odd) {
    background: var(--color-graylight);
}
.Cart .cart-item:nth-child(even) {
    background: var(--color-white);
}
.Cart .cart-item img {
    width: 100px;
    height: 100px;
    border: 0;
    border-radius: 4px;
/*    filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));*/
}
.Cart .cart-item-quantity {
    width: 35px;
}

.Cart .Card {
    width: 66px;
    height: 100px;
    border-radius: 7px;    
}
.Cart .Card > *, 
.Cart .Card:hover .Card-form {
    display: none !important;
}
.Cart .Card:hover {
    transform: none;
}

/* Card */
.Card {
    background-color: var(--color-white);
    background-size: cover !important;
    background-position: center !important;
    padding: 10px;
    border: 1px var(--color-graymedium) solid;
    margin: 10px;
    width: 165px;
    height: 254px;
    border-radius: 18px;
    transition: all .1s;
}
@media (min-width: 576px) {
    .Card {
        width: 183px;
        height: 280px;
        border-radius: 20px;
    }
}
.Card:hover {
    background-color: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.1);
}
.Card:hover .badge {
    background-color: var(--color-purple);
}
.Card:hover .Card-form {
    display: flex !important;
}
.Card .Card-form {
    display: none !important;
}
.Card .badge {
    background-color: var(--color-orange);
    color: var(--color-white);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.Card button {
    border: 0 !important;
}
.Card[data-background="1"] {
    background: url("../img/card-back1.jpg");
}
.Card[data-background="2"] {
    background: url("../img/card-back2.jpg");
}
.Card[data-background="3"] {
    background: url("../img/card-back3.jpg");
}

/* Card-3d */
.Card-3d {
    position: relative;
    width: 66px;
    height: 100px;
    margin: 0 20px 20px 0;
    padding: 0 20px 20px 0;
}
.Card-3d .Card {
    transition: all 0.8s ease;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.Card-3d:hover .Card:first-child {
    transform: rotateY(180deg);
}
.Card-3d .Card:nth-child(2) {
    transform: rotateY(-180deg);
}
.Card-3d:hover .Card:nth-child(2) {
    transform: rotateY(0deg);
}

.dialog {
    position: relative;
    background-color: var(--color-graylight) !important;
    border-radius: 20px;
    padding: 20px !important;
    color: var(--color-black) !important;
}
.dialog:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -10px;
    border-width: 10px;
    border-style: solid;
}
.dialog.dialog-left:before {
    right: -20px;
    border-color: transparent transparent transparent var(--color-graylight);
}
.dialog.dialog-right:before {
    left: -20px;
    border-color: transparent var(--color-graylight) transparent transparent;
}
@media (max-width: 768px) {
    .dialog.dialog-md.dialog-left:before {
        right: 0;
    }
    .dialog.dialog-md.dialog-right:before {
        left: 0;
    }    
}
.dialog.dialog-warning {
    background-color: var(--bs-warning-bg-subtle) !important;
    color: var(--bs-warning-text-emphasis) !important;
}
.dialog.dialog-left.dialog-warning:before {
    border-left-color: var(--bs-warning-bg-subtle);
}
.dialog.dialog-right.dialog-warning:before {
    border-right-color: var(--bs-warning-bg-subtle);    
}


/* Bootstrap */
.btn {
    border-radius: 30px;
}
.btn.btn-primary {
    background-color: var(--color-orange);
    border: 1px var(--color-white) solid !important;
}
.btn.btn-primary:hover,
.btn.btn-primary.active {
    background-color: var(--color-purple);
}
.btn.btn-primary:active {
    background-color: var(--color-bluelight) !important;
}

.dropdown-item.active {
    background-color: var(--color-orange);    
}
.dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid var(--bs-border-color);
}
@media (min-width: 992px) {
    .libraries-bs-dropdown-lg-start .dropdown-menu {
        left: 0 !important;
        transform: none !important;
        top: 100% !important;
        margin-top: .125rem !important;
    }
}

.text-bg-danger {
    background-color: var(--color-redmedium) !important;
}
.text-bg-warning {
/*    background-color: var(--color-yellow) !important;*/
    color: var(--color-white) !important;
}

.accordion .accordion-header .accordion-button {
    font-weight: 500;
}
.accordion .accordion-header .accordion-button:not(.collapsed) {
    background-color: var(--color-orange);
    color: var(--color-white);
}
.accordion .accordion-header .accordion-button:hover {
    background-color: var(--color-purple);
    color: var(--color-white);
}
.accordion .accordion-body {
    background-color: var(--color-orangelight);
    color: var(--color-brown);    
}

.form-check-input:checked {
    border-color: var(--color-graymedium) !important;
    background-color: var(--color-orange) !important;    
}

.tooltip-danger {
    --bs-tooltip-bg: RGBA(var(--bs-danger-rgb),var(--bs-bg-opacity,1));
    --bs-tooltip-color: #fff;
    opacity: 1 !important;
}
.tooltip-success {
    --bs-tooltip-bg: RGBA(var(--bs-success-rgb),var(--bs-bg-opacity,1));
    --bs-tooltip-color: #fff;
    opacity: 1 !important;
}
.tooltip-warning {
    --bs-tooltip-bg: RGBA(var(--bs-warning-rgb),var(--bs-bg-opacity,1));
    --bs-tooltip-color: #fff;
    opacity: 1 !important;
}


.feedback-success,
.feedback-success .toast-close {
    background: var(--color-greenlight) !important;
    color: var(--color-green) !important;
}

.feedback-error,
.feedback-error .toast-close {
    background: var(--color-redlight) !important;
    color: var(--color-red) !important;
}

.bootbox .modal-footer {
    justify-content: center;
}

.stamp {
    font-size: 30px;
    font-weight: 700;
    color: #555;
    border: 5px solid #555;
    display: inline-block;
    padding: 0 15px;
    text-transform: uppercase;
    font-family: 'Courier';
    -webkit-mask-image: url('../img/stamp.png');
    -webkit-mask-size: 944px 604px;
    mix-blend-mode: multiply;
    -webkit-mask-position: 13rem 6rem;
    transform: rotate(-15deg);
    border-radius: 0;
    opacity: 0.7;
}
.stamp.stamp-success {
    color: #5cb85c;
    border-color: #5cb85c;
}    
.stamp.stamp-warning {
    color: #f0ad4e;
    border-color: #f0ad4e;
}
.stamp.stamp-danger {
    color: #d9534f;
    border-color: #d9534f;
}

@media (min-width: 992px) {
    .libraries-bs-w-lg-auto {
        width: auto !important;
    }
}

.libraries-search-container {
    background-color: var(--color-orangelight);
    color: var(--color-brown);
    border-radius: 10px;
}
.libraries-search-container {
    input,
    select,
    .btn.btn-light {
        border: 1px var(--color-brown) solid !important;
        color: var(--color-brown) !important;
    }
}

.select2-selection {
    border: 1px var(--color-brown) solid !important;
    color: var(--color-brown) !important;
}
.select2-results__options {
    overflow-x: hidden;
}
.select2-results__option--selected {
    background-color: var(--color-orange) !important;
}
.select2-selection__rendered,
.select2-selection__placeholder {
    color: var(--color-brown) !important;
}
.select2-selection__clear {
    margin: 0 -6px;
}

.libraries-select2:has(img),
.libraries-select2:has(i) {
    display: flex;
    align-items: center;
    gap: 5px;
}
.libraries-select2 img {
    width: 25px;
    border-radius: 100%;
}
.libraries-select2 span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.Colorpicker {
    width: 25px;
    height: 25px;
    box-shadow: 0 0 0 1px var(--bs-border-color);
    border: 2px solid var(--bs-body-bg);
    border-radius: 50%;
    display: inline-block;
}
button.Colorpicker {
    cursor: pointer;    
}
.Colorpicker.active::after {
    position: absolute;
    content: '✔';
    margin: -13px 0px 0 -7px;
    font-size: 18px;
    color: var(--bs-body-bg);
}
.Colorpicker.active.light::after {
    color: var(--color-black);
}

.Colorpicker.active.dark::after {
    color: var(--color-white);
}

.Loader {
    position: relative;
}
.Loader .Loader-content {
    transition: 0.1s ease-out;
}
.Loader.Loader-isLoading .Loader-content {
    filter: grayscale(100%);
    pointer-events: none;
}
.Loader.Loader-isLoading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    background-image: url('../img/yuu-pensativo.png');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
    animation: Loader-spin 1s linear infinite;
}
.Loader.Loader-fullscreen.Loader-isLoading::after {
    position: fixed;
    z-index: 9999;
}
@keyframes Loader-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.Note {
    padding: 20px;
    box-shadow: 0px 0px 15px 3px var(--color-graymedium);
    word-wrap: break-word;
    border: 1px var(--bs-border-color) solid;
    width: 250px;
    min-height: 400px;
}
.Note.Note-left {
   transform: rotate(-2deg); 
}
.Note.Note-right {
   transform: rotate(2deg); 
}
.Note .Note-body {
    height: 150px;
    overflow-y: auto;
}
.Note-handwritten {
    font-family: 'Reenie Beanie', sans-serif;
    font-size: 30px;
    line-height: 20px;
}
.Note-bg {
    background-image: url('../img/bg-note.jpg');
}

/* lightbox */
.lightbox-carousel,
.carousel-inner {
    border-radius: var(--bs-border-radius);
}

/* jQuery */
.ui-slider .ui-widget-header {
    background: var(--color-orange);
}
.ui-slider .ui-slider-handle {
    outline: 0;
}
.ui-slider .ui-slider-handle.ui-state-active {
    border: 1px solid var(--color-graymedium) !important;
    background: var(--color-purple) !important;
}

.transform-none {
    transform: none !important;
}

.libraries-bs-collapse[data-bs-toggle="collapse"]:after {
    font-family: 'Font Awesome 7 Free';
    font-weight: 900;
    float: right;
    content: "\f106";
}
.libraries-bs-collapse[data-bs-toggle="collapse"].collapsed:after {
    content: "\f107";
}

/* select2 */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--color-orange) !important; 
}