/* 
Theme Name: Friseursalon Wollenberg
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team.
Author: Optavo GmbH
Author URI: https://optavo.de/
Template: hello-elementor
Version: 2.1.2
Text Domain: fswb
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

:root {
    --fswb-input-border-color: #d1d5db;
}

.elementor-heading-title {
    text-wrap: balance;
}

/**
 * Forms
 */
.elementor-field-type-acceptance a {
    text-decoration: underline;
}

.elementor-field-group .elementor-field-textual {
    font-size:          1rem;
    line-height:        1.5rem;
    padding:            0.5rem 0.75rem;
    border-width:       1px;
    border-color:       var(--fswb-input-border-color);
    border-radius:      6px;
    background-color:   #ffffff;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

.elementor-field-type-radio .elementor-field-option input,
.elementor-field-type-checkbox .elementor-field-option input {
    flex-shrink: 0;
}

.elementor-field-type-acceptance .elementor-field-option {
    display: flex;
    gap:     .5rem;
}

.elementor-widget-form .elementor-field-group .elementor-field.elementor-acceptance-field {
    color: var(--e-global-color-accent);
}

[type='checkbox'], [type='radio'] {
    display:                    inline-block;
    flex-shrink:                0;
    width:                      1rem;
    height:                     1rem;
    padding:                    0;
    -moz-user-select:           none;
    -webkit-user-select:        none;
    user-select:                none;
    vertical-align:             middle;
    color:                      var(--e-global-color-accent);
    border-width:               1px;
    border-style:               solid;
    border-color:               var(--fswb-input-border-color);
    background-color:           #ffffff;
    background-origin:          border-box;
    -webkit-appearance:         none;
    -moz-appearance:            none;
    appearance:                 none;
    -webkit-print-color-adjust: exact;
    print-color-adjust:         exact;
}

[type='checkbox'] {
    border-radius: 6px;
}

[type='radio'] {
    border-radius: 100%;
}

[type='checkbox']:checked, [type='radio']:checked {
    border-color:        transparent;
    background-color:    currentColor;
    background-repeat:   no-repeat;
    background-position: center;
    background-size:     100% 100%;
}

[type='checkbox']:checked {
    background-image: url('data:image/svg+xml,%3csvg viewBox=\'0 0 16 16\' fill=\'white\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\'/%3e%3c/svg%3e');
}

[type='radio']:checked {
    background-image: url('data:image/svg+xml,%3csvg viewBox=\'0 0 16 16\' fill=\'white\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3ccircle cx=\'8\' cy=\'8\' r=\'3\'/%3e%3c/svg%3e');
}

/**
 * Bento Image Gallery
 */
.bento {
    .gallery {
        display:  grid;
        grid-gap: .75rem;
    }

    .elementor-image-gallery .gallery-item {
        display: flex;
    }

    .elementor-image-gallery .gallery-item img {
        height:          100%;
        border-radius:   .75rem;
        object-fit:      cover;
        object-position: center center;
    }

    .elementor-image-gallery [class*='gallery-columns-'] .gallery-item {
        max-width: none;
    }

    @media (min-width: 768px) {
        .elementor-image-gallery [class*='gallery-columns-'] .gallery-item:first-child {
            grid-column: auto / span 2;
            grid-row:    auto / span 2;
        }

        .gallery {
            display:       grid;
            grid-gap:      .75rem;
            grid-template: repeat(2, minmax(0, 1fr)) / repeat(4, minmax(0, 1fr));
        }
    }

    @media (hover: hover) and (min-width: 768px) {
        a[data-elementor-open-lightbox] {
            position: relative;
        }

        a[data-elementor-open-lightbox]:before,
        a[data-elementor-open-lightbox]:after {
            position:         absolute;
            z-index:          1;
            right:            .5rem;
            bottom:           .5rem;
            display:          inline-block;
            width:            2.5rem;
            height:           2.5rem;
            content:          '';
            transition:       opacity .25s ease-in-out, transform .25s ease-in-out;
            transform-origin: center;
        }

        a[data-elementor-open-lightbox]:before {
            border-radius:    50%;
            background-color: rgba(0, 0, 0, .5);
        }

        a[data-elementor-open-lightbox]:after {
            background-color: #ffffff;
            mask-position:    center;
            mask-repeat:      no-repeat;
            mask-size:        1.5rem;
            mask-image:       url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23000"><path d="M340-540h-40q-17 0-28.5-11.5T260-580q0-17 11.5-28.5T300-620h40v-40q0-17 11.5-28.5T380-700q17 0 28.5 11.5T420-660v40h40q17 0 28.5 11.5T500-580q0 17-11.5 28.5T460-540h-40v40q0 17-11.5 28.5T380-460q-17 0-28.5-11.5T340-500v-40Zm40 220q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>');
        }

        a[data-elementor-open-lightbox]:not(:hover):before,
        a[data-elementor-open-lightbox]:not(:hover):after {
            transform: scale(0);
            opacity:   0;
        }
    }
}

/**
 * Survey
 */
.survey {
    position: relative;

    > form {
        transition: opacity 150ms;
    }

    > form.elementor-form-waiting {
        opacity: .5 !important; /* overwrites inline styling */
    }

    &:has(.elementor-form-waiting)::after {
        position:           absolute;
        width:              2rem;
        height:             2rem;
        margin:             auto;
        content:            '';
        animation:          survey-spin 700ms linear infinite;
        border:             3px solid currentColor;
        border-right-color: transparent;
        border-radius:      50%;
        inset:              0;
    }

    &.elementor-widget-form .elementor-field-group > label {
        font-size:        1.25rem;
        font-weight:      700;
        color:            #000000;
        margin-block-end: .5rem;
    }

    .elementor-field-type-radio .elementor-field-subgroup,
    .elementor-field-type-checkbox .elementor-field-subgroup {
        gap: .75rem;
    }

    .elementor-field-type-radio .elementor-field-option,
    .elementor-field-type-checkbox .elementor-field-option {
        position:      relative;
        display:       flex;
        align-items:   center;
        padding:       1rem;
        transition:    border-color .25s ease-in-out;
        border:        2px solid color-mix(var(--e-global-color-primary), transparent 90%);
        border-radius: 4px;
        gap:           .5rem;
    }

    .elementor-field-type-radio .elementor-field-option:has(:checked),
    .elementor-field-type-checkbox .elementor-field-option:has(:checked) {
        border-color: var(--e-global-color-accent);
    }

    .elementor-field-type-radio .elementor-field-option label:before,
    .elementor-field-type-checkbox .elementor-field-option label:before {
        position: absolute;
        width:    100%;
        height:   100%;
        content:  '';
        cursor:   pointer;
        inset:    0;
    }

    .elementor-message-success {
        display: none;
    }

}

body:not(.elementor-editor-active) .survey-response {
    display: none;
}

/**
 * Coupon Code
 */
.coupon-code {
    font-family:      monospace;
    font-size:        2rem;
    font-weight:      500;
    padding:          1rem;
    text-align:       center;
    border-radius:    .5rem;
    background-color: color-mix(#000, #fff 95%);
    box-shadow:       inset 0 1px 0 rgba(17, 17, 26, .05), inset 0 0 8px rgba(17, 17, 26, .1);
}