/**
 *  Style definitions for the product order page.
 *
 *  @copyright  2025 Vinacles BV
 *  @author     Anouar Jaama
 *  @author     Clyde Semeleer
 */
@layer components {
    article.order-page {
        @apply grid grid-cols-1;
    }

    form.vinacles-form {
        @apply grid grid-cols-1 gap-y-4;
    }

    form.vinacles-form h3 {
        @apply mt-[3ch];
        font-family: 'Vinacles', sans-serif;
    }

    form.vinacles-form h4 {
        @apply font-medium text-lg;
    }

    form.vinacles-form div.main-details {
        @apply grid grid-cols-2 gap-x-[3ch] items-start;
    }

    form.vinacles-form div.main-details h3 {
        @apply mt-0;
    }

    form.vinacles-form div#is_business_input {
        @apply grid grid-cols-[max-content_max-content] gap-x-4;
    }

    form.vinacles-form .nice-form-group {
        @apply whitespace-normal;
    }

    form.vinacles-form div.two-fields-grid {
        @apply grid grid-cols-2 gap-x-[3ch] items-start;
    }

    form.vinacles-form div.three-fields-grid {
        @apply grid grid-cols-3 gap-x-[3ch] items-start;
    }

    form.vinacles-form div.street-fields {
        @apply grid grid-cols-[1fr_150px] gap-x-[3ch] items-start;
    }

    form.vinacles-form div.address-fields {
        @apply grid grid-cols-[100px_1fr_1fr] gap-x-[3ch] items-start;
    }

    form.vinacles-form div.checkout-bottom-summary {
        @apply grid grid-cols-3 gap-x-[3ch] my-[3ch] items-start;
    }

    form.vinacles-form div.checkout-bottom-summary > div:first-of-type {
        @apply pr-12;
    }

    form.vinacles-form div.product-specific fieldset.nice-form-group > div,
    form.vinacles-form div.product-specific div.nice-form-group > div {
        @apply grid grid-cols-1;
    }

    article.order-page.checkout div.main-details:first-of-type > div:nth-child(2) {
        @apply bg-[#f8fbfe] px-[3ch] border-l border-r border-[#0f4a8a];
    }

    article.order-page div.order-overview {
        @apply grid grid-cols-[min-content_1fr];
    }

    article.order-page div.order-overview > div:nth-child(2n+2) {
        @apply text-right;
    }

    article.order-page div.order-overview > div.top-line {
        @apply border-t border-[#0f4a8a] mt-1 pt-1;
    }

    /* Responsive max-sm */
    @screen max-sm {
        form.vinacles-form div.main-details {
            @apply block;
        }

        form.vinacles-form div.main-details div.right {
            @apply mt-[1ch];
        }

        form.vinacles-form div.two-fields-grid,
        form.vinacles-form div.three-fields-grid {
            @apply block;
        }
    }

    /* 480px–800px */
    @media (min-width: 480px) and (max-width: 800px) {
        form.vinacles-form div.main-details {
            @apply block;
        }

        form.vinacles-form div.main-details div.right {
            @apply mt-[1.5ch];
        }

        form.vinacles-form div.three-fields-grid {
            @apply block;
        }
    }

    /* 800px–1200px */
    @media (min-width: 800px) and (max-width: 1200px) {

    }

    /* max-1000px */
    @media (max-width: 1000px) {
        form.vinacles-form div.checkout-top-summary {
            @apply grid-cols-1 gap-y-4;
        }

        form.vinacles-form div.checkout-bottom-summary {
            @apply grid-cols-1 gap-y-4;
        }

        form.vinacles-form div.checkout-bottom-summary > div:first-of-type {
            @apply pr-0;
        }

        article.order-page.checkout div.main-details:first-of-type > div:nth-child(2) {
            @apply py-4 border-t border-b border-[#0f4a8a] border-l-0 border-r-0;
        }
    }
}