/**
 *  Generic style definitions for the webshop.
 *
 *  @copyright  2025 Vinacles BV
 *  @author     Anouar Jaama
 *  @author     Jeroen van Vliet
 *  @author     Clyde Semeleer
 */
@layer components {
    a {
        @apply no-underline bg-transparent;
        text-decoration-thickness: initial;
        text-decoration-style: initial;
        text-decoration-color: initial;
    }

    a.checkout {
        @apply cursor-pointer bg-green-600 text-white rounded;
        border-radius: inherit;
        border: none;
    }
    a.checkout:hover {
        @apply bg-white text-green-600 border border-green-600 cursor-pointer no-underline;
    }

    button.checkout {
        @apply cursor-pointer bg-orange-600 text-white rounded border border-orange-600 no-underline;
        border-radius: inherit;
    }
    button.checkout:hover {
        @apply bg-white text-orange-600 border border-orange-600 cursor-pointer no-underline;
    }

    a#shoppingcart {
        @apply mt-4 cursor-pointer bg-transparent text-orange-600 rounded border border-orange-600 no-underline;
        background-color: #ff1a1a00; /* rgba(255,26,26,0) */
        border-radius: inherit;
    }
    a#shoppingcart:hover {
        @apply bg-white text-orange-500 border border-orange-500 cursor-pointer no-underline;
        color: #ff501a8a; /* rgba(255,80,26,0.54) */
        border-color: #ff501a8a;
    }

    .ellipsis {
        white-space: inherit;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    @media (max-width: 480px) {
        .ellipsis {
            white-space: nowrap;
        }
    }

    div#cart-panel {
        min-width: 30rem;
        font-family: 'Vinacles', sans-serif !important;
    }
    @media (max-width: 480px) {
        div#cart-panel {
            min-width: inherit;
        }
    }

    ul[role="list"] > li:nth-child(even) {
        background-color: #f2f2f2;
    }

    .default-font {
        font-family: 'HelveticaNeue', sans-serif;
    }

    body {
        font-family: 'HelveticaNeue', sans-serif;
        color: var(--color-vinacles-text) !important;
        line-height: 30px;
        font-weight: 300;
    }

    .container {
        @apply w-full px-4 mx-auto;
        max-width: 100%;
    }
    @media (min-width: 576px) {
        .container {
            max-width: 540px;
        }
    }
    @media (min-width: 768px) {
        .container {
            max-width: 720px;
        }
    }
    @media (min-width: 992px) {
        .container {
            max-width: 960px;
        }
    }
    @media (min-width: 1200px) {
        .container {
            max-width: 1140px;
        }
        .container--wide {
            max-width: 1600px;
        }
    }

    .row {
        @apply flex flex-wrap -mx-4;
    }
    .column {
        @apply relative px-4 w-full;
    }
    .column.col-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .column.col-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .column.col-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .column.col-6 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 30px;
    }

    section.centered {
        @apply my-20 text-center;
    }
    section.centered h1 {
        color: var(--color-vinacles-orange);
        font-size: 20px;
        font-family: 'Vinacles', sans-serif;
        margin-bottom: 10px;
        line-height: 30px;
    }
    section.centered h2 {
        font-weight: 200;
        font-size: 55px;
        margin-bottom: 30px;
    }

    /* Buttons */
    a.button, button#form_submit, input#submit_input {
        @apply inline-block text-[14px] px-8 py-1.5 transition-colors duration-200 ease-in;
        background: var(--color-vinacles-orange) !important;
        color: var(--color-background) !important;
        border: 1px solid var(--color-vinacles-orange) !important;
        font-family: 'Vinacles', sans-serif;
    }

    a.button:hover, button#form_submit:hover, input#submit_input:hover {
        @apply no-underline cursor-pointer;
        background: var(--color-background);
        color: var(--color-vinacles-orange);
    }

    .hidden {
        @apply hidden;
    }

    div.page-header {
        @apply relative bg-center bg-no-repeat bg-cover grid place-items-center min-h-[335px];
        background-image: url('../images/DSC00028.jpg');
    }
    div.page-header::before {
        content: '';
        @apply absolute top-0 left-0 w-full h-full opacity-80 bg-center bg-no-repeat bg-cover;
        background-image: url('../images/Vinacles_RGB_Verloop_1.svg');
        z-index: 0;
    }
    div.page-header > h1 {
        @apply relative text-white font-light font-sans z-10;
        font-weight: 200;
        font-size: 80px;
    }

    @media (max-width: 575px) {
        div.page-header {
            min-height: 100px;
        }
        div.page-header > h1 {
            font-size: 30px;
            line-height: 42px;
        }
    }
    @media (min-width: 576px) {
        div.page-header {
            min-height: 150px;
        }
        div.page-header > h1 {
            font-size: 32px;
            line-height: 44px;
        }
    }
    @media (min-width: 768px) {
        div.page-header {
            min-height: 150px;
        }
        div.page-header > h1 {
            font-size: 30px;
            line-height: 42px;
        }
    }
    @media (min-width: 992px) {
        div.page-header {
            min-height: 200px;
        }
        div.page-header > h1 {
            font-size: 48px;
            line-height: 56px;
        }
    }
    @media (min-width: 1200px) {
        div.page-header {
            min-height: 335px;
        }
        div.page-header > h1 {
            font-size: 80px;
            line-height: 80px;
        }
    }
}

/* Extra small helpers outside @layer */
.details > p {
    margin-bottom: 1rem;
}

article.shop-page.order-page.please-wait-parent {
    margin-left: 1rem;
}

#checkoutForm > .nice-form-group.form-group {
    display: block;
}

#form_submit {
    margin-bottom: 2rem;
}

#checkoutForm > .nice-form-group.form-group > #form_submit {
    margin-top: 0;
}

.confirmation-page > form > .nice-form-group.form-group {
    display: block;
}