/* -------------------------------------------- */
/* MAIN HEADER */
/* -------------------------------------------- */
#masthead{
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}


/* -------------------------------------------- */
/* BUTTON */
/* -------------------------------------------- */
.wlg-button-outline{
    padding: 11px;
    border: 2px solid var(--ast-global-color-0) !important;
    background-color: white !important;
    color: var(--ast-global-color-0) !important;
}

.wlg-button-outline:hover{
    background-color: #f1f1f1 !important;
}

.wlg-btn-outline{
    display: block;
    height: 50px;
    position: relative;
    overflow: visible;
    left: auto;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    border-radius: 18px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    background-color: white !important;
    color: var(--ast-global-color-0) !important;
    border: 2px solid var(--ast-global-color-0) !important;
    font-size: 0.8rem;
}

.wlg-btn-outline:hover{
    background-color: #f1f1f1 !important;
}


/* -------------------------------------------- */
/* FORM */
/* -------------------------------------------- */
.wlg-form-row{
    margin: 7px 0;
}

/* -------------------------------------------- */
/* HIDE "lieferzeit nicht angegeben" label */
/* -------------------------------------------- */
.delivery-time-nicht-angegeben {

    display: none;
}


/* -------------------------------------------- */
/* CHECKOUT */
/* -------------------------------------------- */

#wlg-checkout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 5px 0;
    padding: 10px;
    border-radius: 15px;
}

.wlg-checkout-section {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 5px;
    padding: 20px;
    background-color: white;
}

.wlg-checkout-product-archive {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

#wlg-greetings{
    margin-top: 50px;
    margin-bottom: 50px;
}

/* ---------------------------- */
/* PRODUCT CARD */
/* ---------------------------- */

.wlg-checkout-product {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    border-radius: 10px;
    padding: 0;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px;
}

/* LEFT IMAGE COLUMN */
.wlg-checkout-product .product-image {
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}

.wlg-checkout-product .product-image img {
    width: 200px;
    height: 150px;
    object-fit: cover;
}

/* CENTER INFO COLUMN */
.wlg-checkout-product .product-info {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wlg-checkout-product .product-info p {
    margin: 0;
    font-size: small;
    line-height: normal;
}

/* RIGHT DELETE COLUMN */
.wlg-checkout-product .product-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.wlg-checkout-product .delete-btn {
    padding: 15px;
    border: none;
    background: none;
}

.wlg-checkout-product .delete-btn i {
    color: red;
    font-size: 1.2rem;
}

.wlg-checkout-product .delete-btn:hover {
    cursor: pointer;
}

.wlg-checkout-product .delete-btn:hover i {
    color: gray;
}

/* ---------------------------- */
/* ACCESSORIES */
/* ---------------------------- */

.wlg-checkout-accessory {
    padding: 10px 0;
    display: flex;
    align-items: center;
}

.wlg-checkout-accessory p {
    margin: 0 20px;
}

.wlg-checkout-accessory a {
    text-decoration: underline;
}

/* ---------------------------- */
/* CONTACT */
/* ---------------------------- */

.wlg-checkout-section textarea {
    resize: vertical;
}

.wlg-checkout-contact-container {
    display: grid;
    gap: 10px;
}

.wlg-checkout-contact-container .row {
    display: grid;
    grid-auto-flow: column;
    gap: 10px;
}

.wlg-checkout-contact-container .field {
    display: grid;
}

.wlg-checkout-contact-container .field p {
    margin: 0 !important;
}

.wlg-checkout-contact-container .field input {
    border-radius: 5px !important;
}

.wlg-checkout-contact-container .field .val-error {
    border-color: red;
}

.wlg-checkout-additional-container p {
    margin: 0 !important;
}

.wlg-checkout-additional-container label{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.wlg-checkout-additional-container a {
    text-decoration: underline;
}

.wlg-checkout-greeting {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------------------------- */
/* VOUCHERS */
/* ---------------------------- */

.wlg-checkout-voucher #wlg_voucher_items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.wlg-checkout-voucher #wlg_voucher_items .wlg_voucher {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.wlg-checkout-voucher #wlg_voucher_items .delete-voucher-btn {
    padding: 10px 15px;
}

.wlg-checkout-voucher #wlg_voucher_items .delete-voucher-btn:hover {
    cursor: pointer;
}

.wlg-checkout-voucher #wlg_voucher_items input {
    border-radius: 5px !important;
    padding: 5px 8px;
    width: 100%;
}

.wlg-checkout-discount-code {
        display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

.wlg-checkout-discount-code h4{
    margin-bottom: 5px;
}

.wlg-checkout-discount-code input{
    border-radius: 5px !important;
}


/* ---------------------------- */
/* RESPONSIVENESS */
/* ---------------------------- */

@media (max-width: 600px) {
    .wlg-checkout-product {
        /* flex-direction: column; */
        overflow: hidden;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .wlg-checkout-product .product-image img {
        width: 100%;
        height: auto;
    }

    .wlg-checkout-product .product-image {
        flex: 3;
        align-content: center;
        background: lightgray;
        border-radius: 10px 0 0 0;
    }

    .wlg-checkout-product .product-info {
        padding: 15px;
        flex: 4;
        padding: 5px;
    }

    .wlg-checkout-product .product-info h6{
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .wlg-checkout-product .product-info p strong{
        display: inline-block;
        width: 100%;
    }

    .wlg-checkout-product .product-delete {
        padding: 0;
        padding: 5px;
        justify-content: left;
        position: absolute;
    }

    .wlg-checkout-product .product-delete button{
        position: relative;
        left: 0;
        top: 0;
        background: white;
        width: 40px;
        height: 40px;
        padding: 12px;
    }

    
}




/* -------------------------------------------- */
/* WORKFLOW */
/* -------------------------------------------- */
#wlg-workflow{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 5px 0;
    padding: 10px;
    border-radius: 15px;
}

.wlg-workflow-section{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	border-radius: 5px;
    padding: 20px;
    background-color: white;
}

.wlg-workflow-header{
    display: flex;
    justify-content: space-between;
}

.wlg-workflow-header h4{
    background: indigo;
    padding: 3px 10px;
    border-radius: 7px;
    color: white;
}

.wlg-workflow-section .wlg-address{
    position: relative;
}

.wlg-workflow-section .wlg-address p{
    padding: 0;
    margin: 0;
}

.wlg-workflow-section-content{
    display: flex;
    gap: 20px;
    flex-direction: row;
    align-content: space-between;
    justify-content: space-between;
}

.wlg-workflow-product-archive{
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;
    margin-top: 20px;
}

.wlg-workflow-product-archive p{
    padding: 0;
    margin: 0;
}

.wlg-workflow-product{
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    position: relative;
}

.wlg-workflow-product .small-text{
    font-size: 14px;
}

.wlg-workflow-admin{
    width: 100%;
    padding: 10px;
    margin-top: 20px;
}

.wlg-workflow-admin button{
    font-size: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.wlg-edit-pen{
    background: transparent;
    color: gray;
    margin: 0;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
}

.wlg-edit-pen:hover{
    background: transparent;
    color: gray;
    margin: 0;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
}

/* WORKFLOW MODAL */
.wlg-workflow-section .wlg-modal-content .wlg-header{
    box-shadow: none;
}
.wlg-workflow-section .wlg-modal-content .wlg-content{
    box-shadow: none;
}
.wlg-workflow-section .wlg-modal-content .wlg-footer{
    display: flex;
    justify-content: space-between;
}
.wlg-workflow-section .wlg-modal-content .wlg-footer button{
    font-size: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    width: 100px;
}
.wlg-workflow-section .wlg-modal-content .wlg-content textarea{
    min-height: 160px;
    width: 100%;
}

/* WORKFLOW MODAL */
.wlg-workflow-contact-container{
    grid-auto-flow: row;
    display: grid;
    gap: 10px;
}

.wlg-workflow-contact-container .row{
    grid-auto-flow: column;
    display: grid;
    gap: 10px;
}

.wlg-workflow-contact-container .field{
    display: grid;
}

.wlg-workflow-contact-container .field p{
    margin: 0 !important;
}

.wlg-workflow-contact-container .field input{
    border-radius: 5px !important;
}

/* disabled */
.wlg-workflow-contact-container.disabled .field p{
    display: none;
}

.wlg-workflow-contact-container.disabled .field input{
    border-radius: 5px !important;
    padding: 0;
    border: none;
    pointer-events: none;
}

.wlg-workflow-contact-container.disabled .field input[value=""]{
    display: none;
}

.wlg-workflow-options{
    margin: 20px 0;
    display: flex;
    gap: 5px;
}

.wlg-workflow-options p{
    margin: 0;
    padding: 5px 15px;
    border-radius: 9px;
    background-color: cornflowerblue;
    color: white;
}

/* offer */
.wlg-offer{
    width: 100%;
}

.wlg-workflow-contact-container{
    width: 100%;
    gap: 5px;
}

.wlg-workflow-contact-container.disabled{
    justify-content: start;
}

.wlg-offer .edit-header{
    display: flex;
}

.wlg-offer .edit-btn{
    padding: 0px 10px;
    border-radius: 5px;
    
}

.wlg-offer .edit-btn:hover{
    background-color: #2af2e8;
    color: black;
    cursor: pointer;
}

.wlg-offer .table-wrapper{
    border: lightgray solid 1px;
    border-radius: 10px;
    width: 100%;
}

.wlg-offer .table-wrapper table{
    margin: 0;
    border-style: none;
    width: 100%;
}

.wlg-offer .table-wrapper tbody tr:hover{
    background-color: lightgray;
}

.wlg-offer .table-wrapper th, td {
    border-style: none;
    padding: 3px;
    vertical-align: top;
    text-align: left;
}

.wlg-offer .table-wrapper th {
    margin: 0;
    padding: 0;
    padding-left: 5px;
}

.wlg-offer .table-wrapper table input{
    padding: 0 5px;
    border: transparent solid 1px;
    border-radius: 10px;
}

.wlg-offer .table-wrapper table input:hover{
    padding: 0 5px;
    border: gray solid 1px;
}

.wlg-workflow-position-archive.disabled input{
    border-radius: 5px !important;
    padding: 0;
    border: none;
    pointer-events: none;
}

.wlg-workflow-position-sum .offer-total{
    border-radius: 5px !important;
    padding: 0;
    border: none;
    pointer-events: none;
    width: 100px;
    padding: 0 5px;
    text-align: right;
    font-weight: bold;
    margin-top: 20px;
}

.wlg-workflow-section:has(.wlg-offer.enabled) {
    background: aliceblue;
}

.wlg-offer .table-wrapper .cell{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wlg-offer .table-wrapper .cell div{
    display: flex;
    width: 100%;
}

.wlg-offer .table-wrapper .cell div input{
    width: 100%;
}

.wlg-workflow-position-archive.disabled button{
    display: none;
}

.wlg-tabs button{
    background: lightgray;
    border: none;
    border-radius: 0;
}

.wlg-tabs button.active{
    background: gray;
}

/* modal product select */
#select-position-modal .wlg-tab{
    min-width: 100px;
}

#select-position-modal .wlg-tab .row{
    display: flex;
    flex-direction: row;
}

#select-position-modal .wlg-tab .field{
    display: flex;
    flex-direction: column;
}

#select-position-modal .wlg-tab input{
    padding: 3px 10px;
    border: 1px lightgray solid;
    max-width: 100%;
}

#select-position-modal .wlg-footer{
    margin-top: 20px;
}

.mobile-pos-wrapper{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-pos-container{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px;
    border-radius: 10px;
    border: 1px lightgray solid;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.mobile-pos-container h6{
    padding: 0px;
    margin: 0px;
}

.mobile-pos-container p{
    padding: 0px;
    margin: 0px;
}

#mobile-pos-add-button{
    margin-top: 10px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: coral;
    padding: 5px;
}

.wlg-workflow-position-action .offer-save-btn{
    margin-top: 20px;
    padding: 10px 20px;
}

.wlg-workflow-position-action.disabled .offer-save-btn{
    display: none;
}

/*  */
.customer-offer-confirm-container .wlg-workflow-content button{
    margin: 8px 0px;
}


/* -------------------------------------------- */
/* CALENDAR */
/* -------------------------------------------- */

/* date-picker and modal */
.wlg-date-picker{
    border: 1px solid lightgray;
    border-radius: 8px;
    padding: 3px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.wlg-date-picker input{
    border: none;
    padding: 2px;
    margin: 0px;
    width: 100%;
}

.wlg-date-picker button{
    margin: 0;
    padding: 0;
    height: 30px;
    width: 30px;
    border-radius: 5px;
    float: right;
}


/* The Modal (background) */
.wlg-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

body.modal-open {
    overflow: hidden;
}

/* Modal Content */
.wlg-modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    /* width: 80%; */
    display: flex;
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    border-radius: 15px;
    /* min-height: 572px; */
    max-height: 95%;
    overflow-y: auto;
}

.wlg-modal-content .wlg-header{
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
}

.wlg-modal-content .wlg-preview-date{
    display: flex;
    flex-direction: row;
    border: 1px solid lightgray;
    align-items: center;
}

.wlg-modal-content .wlg-preview-date div{
    padding: 5px;
}

.wlg-modal-content .wlg-preview-date input{
    padding: 0;
    border-color: Transparent !important;
    border-radius: 7px !important;
    padding: 0 10px;
    width: 130px;
}

.wlg-modal-content .wlg-preview-date input.active{
    background-color: #2af2e8;
}


.wlg-modal .wlg-close-modal {
    align-self: flex-end;
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
}

.wlg-calendar{
    /* width: 375px; */
    margin-left: auto;
    margin-right: auto;
}

.wlg-calendar .wlg-next, .wlg-last{
    display: flex;
    align-items: center;
}

.wlg-calendar .wlg-next:hover, .wlg-last:hover{
    background-color: var(--ast-global-color-1);
    color: white;
    cursor: pointer;
}

.wlg-calendar-header{
    display: flex;
    justify-content: space-between;
}

.wlg-calendar-header select{
    border: none;
}

.wlg-calendar-header select:hover{
    cursor: pointer;
}


.wlg-calendar-footer{
    margin-top: 20px;
    text-align: center;
}

.wlg-calendar-footer label{
    font-weight: bold;
}

.wlg-calendar .wlg-selector-timeslot{
    margin-bottom: 20px;
    font-weight: bold;
    border: none;
    background: #e7e7e7;
}

.wlg-calendar .wlg-selector-timeslot:hover{
    cursor: pointer;
}

.wlg-calendar-footer button{
    width: 100%;
    padding: 11px !important;
}

.wlg-calendar-month{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
    gap: 10px;
    min-height: 200px;
}

.wlg-loading-overlay{
    background-color: gray;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.6;
    z-index: 100000000;
    border-radius: 10px;
    display: none;
}

.wlg-calendar-month span{
    /* border: 1px solid lightblue; */
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    line-height: 45px;
    width: 45px;
}

.wlg-calendar-month .day:hover{
    background-color: var(--ast-global-color-1);
    color: white;
    cursor: pointer;
}

.wlg-calendar-month .last, .next{
    color: lightgray;
}

.wlg-calendar-month .ofr{
    color: indianred;
}

.wlg-calendar-month .ofr:hover{
    background-color: white;
    color: indianred;
    cursor: default;
}

.wlg-calendar-month .active{
    background-color: var(--ast-global-color-1);
    color: white;
}

.wlg-calendar-month .between{
    background-color: var(--ast-global-color-1);
    opacity: 0.3;
}

.wlg-calendar-month .blocked-between{
    background-color: indianred;
    opacity: 0.3;
}

.wlg-calendar-month .blocked{
    background-color: indianred;
    color: lightgray;
}


/* -------------------------------------------- */
/* MOBILE */
/* -------------------------------------------- */
@media only screen and (max-width: 600px) {
    .wlg-calendar{
        width: 100%;
    }
    .wlg-calendar-month{
        gap: 8px;
    }
    .wlg-calendar-month span{
        /* line-height: 30px;
        width: 30px; */
        width: auto;
        max-width: 45px;
    }
    .wlg-modal-content{
        width: 95%;
    }

    /* CHECKOUT */
    #wlg-checkout{
        padding: 0;
    }
    .wlg-checkout-section{
        box-shadow: none;
        padding: 15px;
    }
    .wlg-checkout-contact-container .row{
        grid-auto-flow: initial;
    }
    .ast-container:has(> .wlg-checkout) {
        padding: 5px;
    }
    .wlg-checkout-accessory p{
        max-width: 65%;
        padding-right: 0;
        margin-right: 0;
    }

    .ast-container:has(#wlg-checkout){
        padding-left: 8px;
        padding-right: 8px;
    }
    
    /* WORKFLOW */
    .wlg-workflow-section{
        box-shadow: none;
    }
    .wlg-workflow-header{
        flex-direction: column;
    }
    .wlg-workflow-section-content{
        flex-direction: column;
    }
    .wlg-workflow-admin button{
        width: 100%;
    }
    .ast-container:has(#wlg-workflow) {
        padding: 0;
    }
    .wlg-workflow-contact-container{
        justify-content: normal !important;
    }
    .wlg-workflow-contact-container .row{
        grid-auto-flow: initial;
    }
    

    /* WORKFLOW OFFER */
    .wlg-offer .edit-header{
        justify-content: space-between;
        font-size: 21px;
    }

    /* WORKFLOW OFFER CUSTOMER */
    .customer-offer-confirm-container .wlg-workflow-content button{
        width: 100%;
    }

   

}


/* KA KANN WAHRSCHEINLICH GELÖSCHT WERDEN // TEST LÄUFT */
.calendar {
    display: flex;
    flex-flow: column;
}
.calendar .header .month-year {
    font-size: 20px;
    font-weight: bold;
    color: #636e73;
    padding: 20px 0;
}
.calendar .days {
    display: flex;
    flex-flow: wrap;
}
.calendar .days .day_name {
    width: calc(100% / 7);
    border-right: 1px solid #2c7aca;
    padding: 20px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    color: #818589;
    color: #fff;
    background-color: #448cd6;
}
.calendar .days .day_name:nth-child(7) {
    border: none;
}
.calendar .days .day_num {
    display: flex;
    flex-flow: column;
    width: calc(100% / 7);
    border-right: 1px solid #e6e9ea;
    border-bottom: 1px solid #e6e9ea;
    padding: 15px;
    font-weight: bold;
    color: #7c878d;
    cursor: pointer;
    min-height: 100px;
}
.calendar .days .day_num span {
    display: inline-flex;
    width: 30px;
    font-size: 14px;
}
.calendar .days .day_num .event {
    margin-top: 10px;
    font-weight: 500;
    font-size: 14px;
    padding: 3px 6px;
    border-radius: 4px;
    background-color: #f7c30d;
    color: #fff;
    word-wrap: break-word;
}
.calendar .days .day_num .event.green {
    background-color: #51ce57;
}
.calendar .days .day_num .event.blue {
    background-color: #518fce;
}
.calendar .days .day_num .event.red {
    background-color: #ce5151;
}
.calendar .days .day_num:nth-child(7n+1) {
    border-left: 1px solid #e6e9ea;
}
.calendar .days .day_num:hover {
    background-color: #fdfdfd;
}
.calendar .days .day_num.ignore {
    background-color: #fdfdfd;
    color: #ced2d4;
    cursor: inherit;
}
.calendar .days .day_num.selected {
    background-color: #f1f2f3;
    cursor: inherit;
}

/* -------------------------------------------- */
/* CART */
/* -------------------------------------------- */
#wlg-cart{
    /*display: none;*/
    position: relative;
    font-size: 19px;
}

#wlg-cart a{
    padding: 10px;
    display: flex;
    align-items: center;
    color: #0D5C47;
}

#wlg-cart span{
    position: absolute;
    top: -1px;
    right: -6px;

    background: #0D5C47;
    padding-left: 7px;
    padding-right: 7px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 50px;
    color: white;
    font-size: 11px;
    padding-top: 2px;
    padding-bottom: 1px;
    margin: 0;
    line-height: 1.5;
}

#wlg-cart span:empty{
    background: transparent;
    color: transparent;
}

#wlg-cart a svg{
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.2s ease-in;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

/* add to card button */
.wlg-add-to-card-btn{
    display: block;
    min-width: 220px;
    height: 50px;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: visible;
    left: auto;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    border-radius: 18px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    transition: right 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}

.wlg-btn-wrapper{
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    width: 200px;
}

.wlg-add-to-card-btn .wlg-update-text{
    display: none;
}

.wlg-add-to-card-btn span,
.wlg-add-to-card-btn .icon {
    display: block;
    height: 100%;
    text-align: center;
    align-content: center;
    position: absolute;
    top: 0;
}

.wlg-add-to-card-btn span {
    width: 75%;
    line-height: inherit;
    text-transform: uppercase;
    right: 0;
    font-size: 0.8rem;
    text-align: left;
    transition: right 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}

.wlg-add-to-card-btn .icon {
    width: 25%;
    left: 0;
    transition: right 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}

.button .icon .fa {
  font-size: 30px;
  vertical-align: middle;
  transition: right 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4), height 0.25s ease;
}

.wlg-add-to-card-btn .icon .fa-check {
  display: none;
}

.wlg-add-to-card-btn.success span,
.wlg-add-to-card-btn:hover span {
    margin-left: 10px;
    right: -100%;
    position: relative;
    opacity: 0.3;
}

.wlg-add-to-card-btn.success .icon,
.wlg-add-to-card-btn:hover .icon {
    width: 100%;
    position: absolute;
    left: 0;
}

/* class success */
.wlg-add-to-card-btn.success {
    background: green;
}
.wlg-add-to-card-btn.success .icon .fa-cart-flatbed {
    display: none;
}
.wlg-add-to-card-btn.success .icon .fa-check {
    display: inline-block;
    font-size: 20px;
}

/* class added */
.wlg-add-to-card-btn.added .wlg-add-to-cart-text{
    display: none;
}
.wlg-add-to-card-btn.added .wlg-update-text{
    display: block;
}

/* -------------------------------------------- */
/* NEW PRODUCT CART BOX */
/* -------------------------------------------- */
#product-quote-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 5px 0;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 15px;
    max-width: 450px;
}

#product-quote-form .time-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}

#product-quote-form .time-row.hidden{
    display: none;
}

#product-quote-form .time-label {
  font-weight: 600;
  flex: 1;
}

#product-quote-form .time-control {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  min-width: 230px;
}

#product-quote-form .time-display {
  display: inline-block;
  width: 140px;
  text-align: center;
}

#product-quote-form .btn.small {
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f7f7f7;
  width: 36px;
  height: 36px;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
  color: #7c8085;
}

#product-quote-form .btn.small:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#product-quote-form .btn.small:hover:not(:disabled) {
  background: #e0e0e0;
}

#product-quote-form .info-text {
  margin: 0;
}

#product-quote-form .info-text p {
    line-height: 1.5;
    margin: 0;
    padding: 0;
    font-size: 0.8em;
}

#product-quote-form .info-text p:nth-child(1) {
    line-height: 1.5;
    margin: 0;
    padding: 0;
    font-size: 1em;
}

#product-quote-form .info-text a {
    font-weight: bold;
    text-decoration: underline;
}

#product-quote-form .button-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

#product-quote-form .button{
    flex: 1;
}

#product-quote-form .preis-box {
  background: #f9fbfa;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px;
  margin-top: 20px;
  text-align: center;
  font-size: 0.9rem;
}

#product-quote-form .preis-box strong {
  color: var(--ast-global-color-1);
  font-size: 1.1rem;
}

#product-quote-form .product-qty,
#product-quote-form .wlg-variation {
    display: flex;
    align-items: center;
    gap: 10px;
}

#product-quote-form .product-qty.hidden {
    display: none;
}

#product-quote-form .product-qty select,
#product-quote-form .wlg-variation select{
    flex: 1;
    border: 1px solid lightgray;
    border-radius: 8px;
}

#product-quote-form .product-qty label,
#product-quote-form .wlg-variation label{
    min-width: 75px;
}


@media only screen and (max-width: 600px) {

    #product-quote-form .time-row {
        flex-direction: column;
    }
    
    #product-quote-form .button-row{
        flex-direction: column;
    }

}

/* -------------------------------------------- */
/* rental calendar modal */
/* -------------------------------------------- */
#loan-period-new-modal .wlg-calendar{
    min-width: 330px;
}
#loan-period-new-modal .wlg-calendar .wlg-grid{
    display: block;
    margin-bottom: 50px;
}

/* Grid Setup */
#loan-period-new-modal .wlg-calendar .wlg-grid .days,
#loan-period-new-modal .wlg-calendar .wlg-grid .day-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

#loan-period-new-modal .wlg-calendar .wlg-grid .day-header {
    height: 45px;
    text-align: center;
    align-content: center;
    background: lightgray;
    border-radius: 10px;
    margin-bottom: 5px;
}

/* Quadratische Tage */
#loan-period-new-modal .wlg-calendar .wlg-grid .day {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    text-align: center;
    align-content: center;
    font-weight: 700;
}

/* Header NICHT quadratisch machen */
#loan-period-new-modal .wlg-calendar .wlg-grid .dow {
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
    /* aspect-ratio entfernen! */
}

#loan-period-new-modal .wlg-calendar .wlg-grid .day:hover{
    background-color: var(--ast-global-color-1);
    color: white;
    cursor: pointer;
}

.wlg-calendar-month .last, .next{
    color: lightgray;
}

#loan-period-new-modal .wlg-calendar .day.active{
    background-color: var(--ast-global-color-1);
    color: white;
}

#loan-period-new-modal .wlg-calendar .day.between{
    background-color: var(--ast-global-color-1);
    opacity: 0.3;
    color: white;
}

#loan-period-new-modal .wlg-calendar .day.blocked-between{
    background-color: indianred;
    opacity: 0.3;
}

#loan-period-new-modal .wlg-calendar .day.blocked{
    background-color: indianred;
    color: lightgray;
}

#loan-period-new-modal .wlg-calendar .day.partially-free {
    background: #bf7a20;
    color: white;
}

#loan-period-new-modal .wlg-calendar .day.partially-free.active {
    background-color: var(--ast-global-color-1);
    color: white;
}

#loan-period-new-modal .wlg-calendar .wlg-header button{
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f7f7f7;
    width: 36px;
    height: 36px;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s;
    padding: 0;
    color: #7c8085;
}

#loan-period-new-modal .wlg-calendar .wlg-header select{
    border: none;
}

.wlg-calendar-legend span {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 4px; /* abgerundete Ecken */
}

.wlg-legend-blocked {
    background-color: indianred;
}

.wlg-legend-partial {
    background-color: #bf7a20;
}

.wlg-legend-free {
    background-color: green;
}

/* Optional: Legende insgesamt ein bisschen gepolstert */
.wlg-calendar-legend {
    margin-top: 10px;
    display: flex;
    gap: 15px;
    font-size: 0.9em;
    align-items: center;
}


@media only screen and (max-width: 600px) {

    #loan-period-new-modal .wlg-calendar{
        min-width: 0;
    }

    #loan-period-new-modal .wlg-calendar .wlg-grid .days,
    #loan-period-new-modal .wlg-calendar .wlg-grid .day-header{
        gap: 5px;
    }

}


/* -------------------------------------------- */
/* CONTACT FORM                                  */
/* -------------------------------------------- */

#wlg-contact-form {
    display: grid;
    gap: 12px;
}

.wlg-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wlg-contact-field {
    display: grid;
    gap: 4px;
}

.wlg-contact-field label {
    font-weight: 600;
    font-size: 0.9em;
    margin: 0;
}

.wlg-contact-field input,
.wlg-contact-field textarea {
    border: 1px solid #ccc;
    border-radius: 5px !important;
    padding: 8px 10px;
    width: 100%;
    font-size: 1em;
}

.wlg-contact-field textarea {
    resize: vertical;
}

.wlg-contact-field input.val-error,
.wlg-contact-field textarea.val-error {
    border-color: red;
}

.wlg-contact-privacy {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wlg-contact-privacy input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

.wlg-contact-privacy label {
    font-size: 0.9em;
    margin: 0;
    cursor: pointer;
}

.wlg-contact-privacy a {
    text-decoration: underline;
}

#wlg-contact-message {
    padding: 10px;
    border-radius: 5px;
    background-color: #fff3f3;
    border: 1px solid red;
    font-size: 0.9em;
}

.wlg-contact-success {
    padding: 20px;
    border-radius: 8px;
    background-color: #f0faf4;
    border: 1px solid #4caf82;
}

.wlg-contact-success h4 {
    margin: 0 0 8px 0;
    color: #1a6b42;
}

.wlg-contact-success p {
    margin: 0;
}

.wlg-contact-error {
    color: red;
    font-size: 0.9em;
    margin: 0;
}

@media only screen and (max-width: 600px) {
    .wlg-contact-row {
        grid-template-columns: 1fr;
    }
}