@use 'sprucecss/scss/spruce' as *;

.l-checkout {
  &__inner {
    display: grid;
    gap: spacer-clamp('l', 'xl');
    grid-template-columns: minmax(0, 1fr);

    @include breakpoint('md') {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }
  }

  &__column {
    display: flex;
    flex-direction: column;
    gap: spacer-clamp('l', 'xl');
  }

  &__title {
    margin-block: 0;
  }

  &__form {
    @include layout-stack('m');
  }

  &__billing,
  &__summary,
  &__payment {
    @include layout-stack('m');
  }

  &__summary {
    block-size: 100%;
    display: flex;
    flex-direction: column;
  }

  &__order {
    margin-block-start: auto;
    padding-top: spacer('m');
    @include layout-stack('xs');

    .form-group--submit {
      margin-block-start: spacer('m');
    }
  }
}

<div class="l-checkout">
    <div class="container">
        <form class="l-checkout__inner">
            <div class="l-checkout__column">
                <div class="l-checkout__billing">
                    <h2 class="l-checkout__title">Billing information</h2>
                    <div class="l-checkout__form">
                        <div class="form-row--mixed">
                            <div class="form-group">
                                <label class="form-label" for="name">Name</label>
                                <input class="form-control" type="text" id="name"/>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="email">Email</label>
                                <input class="form-control" type="text" id="email"/>
                            </div>
                        </div>
                        <div class="form-row--mixed">
                            <div class="form-group">
                                <label class="form-label" for="country">Country</label>
                                <input class="form-control" type="text" id="country"/>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="zip">ZIP code</label>
                                <input class="form-control" type="text" id="zip"/>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="city">City</label>
                                <input class="form-control" type="text" id="city"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="address">Address</label>
                            <input class="form-control" type="text" id="address"/>
                        </div>
                    </div>
                </div>
                <div class="l-checkout__payment">
                    <h2 class="l-checkout__title">Payment method</h2>
                    <div class="payment-card">
    <label class="form-check">
        <input class="form-check__control" type="radio" name="payment-type" value="stripe" checked="checked" aria-label="Stripe"/>
    </label>
    <div class="payment-card__caption"><img class="payment-card__logo" src="/img/ui/stripe-logo.svg" alt="Stripe" height="67" width="28"/>
        <p class="payment-card__description">You will be redirect to Stripe to complete the payment.</p>
    </div>
</div>
<div class="payment-card">
    <label class="form-check">
        <input class="form-check__control" type="radio" name="payment-type" value="paypal" aria-label="PayPal"/>
    </label>
    <div class="payment-card__caption"><img class="payment-card__logo" src="/img/ui/paypal-logo.svg" alt="Stripe" height="104" width="28"/>
        <p class="payment-card__description">You will be redirect to PayPal to complete the payment.</p>
    </div>
</div>
                </div>
            </div>
            <div class="l-checkout__column">
                <div class="l-checkout__summary">
                    <h2 class="l-checkout__title">Order summary</h2>
                    <div class="order-card">
    <div class="order-card__data">
        <h3 class="order-card__title">
            <a class="order-card__link" href="#">WooCommerce SimplePay integration for 3 websites</a>
        </h3>
        <div class="order-card__meta">
            50 €
        </div>
        <div class="number-group" x-cloak x-data="{ quantity: 2, min: 1, max: 99 }" x-init="$watch('quantity', (value) => { quantity = value < min ? min : (value > max ? max : value) })">
            <button class="btn btn--primary btn--sm btn--icon number-group__decrement" type="button" data-action="decrement" aria-label="Decrement quantity" @click="quantity = Math.max(min, --quantity)">
                <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
            </button>
            <input class="number-group__input" x-model="quantity" type="number" :min="min" :max="max"/>
            <button class="btn btn--primary btn--sm btn--icon number-group__increment" type="button" data-action="increment" aria-label="Increment quantity" @click="quantity = Math.min(max, ++quantity)">
                <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <line class="vertical-line" x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
            </button>
        </div>
    </div>
    <button class="btn btn--primary btn--sm btn--icon order-card__remove" type="button" aria-label="Delete product">
        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
    </button>
</div>
<div class="order-card">
    <div class="order-card__data">
        <h3 class="order-card__title">
            <a class="order-card__link" href="#">Root SEO extension for 1 website</a>
        </h3>
        <div class="order-card__meta">
            100 €
        </div>
        <div class="number-group" x-cloak x-data="{ quantity: 1, min: 1, max: 99 }" x-init="$watch('quantity', (value) => { quantity = value < min ? min : (value > max ? max : value) })">
            <button class="btn btn--primary btn--sm btn--icon number-group__decrement" type="button" data-action="decrement" aria-label="Decrement quantity" @click="quantity = Math.max(min, --quantity)">
                <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
            </button>
            <input class="number-group__input" x-model="quantity" type="number" :min="min" :max="max"/>
            <button class="btn btn--primary btn--sm btn--icon number-group__increment" type="button" data-action="increment" aria-label="Increment quantity" @click="quantity = Math.min(max, ++quantity)">
                <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <line class="vertical-line" x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
            </button>
        </div>
    </div>
    <button class="btn btn--primary btn--sm btn--icon order-card__remove" type="button" aria-label="Delete product">
        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
    </button>
</div>
                    <div class="l-checkout__order">
                        <p>Total: <strong class="lead">150 €</strong>
                        </p>
                        <label class="form-check">
                            <input class="form-check__control" type="checkbox" value="true" name="privacy"/>
                            <span class="form-label form-check__label">I accept the <a href="#" target="_blank">privacy policy</a> and the <a href="#">terms and conditions</a>.</span>
                        </label>
                        <div class="form-group--submit">
                            <button class="btn btn--primary btn--lg btn--block btn--primary-shadow" type="submit">
                                <svg class="btn__icon" aria-hidden="true" focusable="false" role="img" height="24" style="fill-rule:evenodd;clip-rule:evenodd;fill:currentColor;overflow:visible;" viewBox="0 0 24 24" width="24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M24,4.8l0,14.4c0,0.66 -0.235,1.225 -0.705,1.695c-0.47,0.47 -1.035,0.705 -1.695,0.705l-19.2,0c-0.66,0 -1.225,-0.235 -1.695,-0.705c-0.47,-0.47 -0.705,-1.035 -0.705,-1.695l-0,-14.4c-0,-0.66 0.235,-1.225 0.705,-1.695c0.47,-0.47 1.035,-0.705 1.695,-0.705l19.2,0c0.66,0 1.225,0.235 1.695,0.705c0.47,0.47 0.705,1.035 0.705,1.695Zm-21.6,2.4l19.2,0l0,-2.4l-19.2,0l0,2.4Zm0,4.8l0,7.2l19.2,0l0,-7.2l-19.2,0Zm0,7.2l0,-14.4l0,14.4Z"></path>
                                </svg> Pay 150 €
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>