/*
Theme Name: SAF Schaltanlagen
Author: MSCG GmbH
Author URI: https://www.mscg.de/
Tags: full-site-editing, block-patterns
Text Domain: saf-schaltanlagen
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.4
Version: 1.0.0
*/

/* Styles intended only for the front.*/
:root {
    --swiper-theme-color: var(--wp--preset--color--primary);
    --wp--preset--color--foreground: var(--wp--preset--color--primary);
}

html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

.wp-element-button,
.wpcf7-submit {
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wp-block-list {
	padding-left: 1.2em;
}

.wp-block-list li{
    margin-bottom: .25em;
}

.wp-block-list li:last-child {
    margin-bottom: 0;
}

.divide-x > * {
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: var(--wp--preset--color--primary-light);
    padding-right: 24px;
}

.divide-x > *:last-child {
    border-right-width: 0;
    padding-right: 0;
}

@media (max-width: 781px) {
    .divide-x > * {
        border-right-width: 0;
        padding-right: 0;

        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: var(--wp--preset--color--primary-light);
        padding-bottom: 24px;
    }

    .divide-x > *:last-child {
        border-bottom-width: 0;
        padding-bottom: 0;
    }
}

/* Contact Form 7 */
.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox):not(.wpcf7-radio):not(.wpcf7-file):not(.wpcf7-acceptance),
.woocommerce-cart table.cart input,
.woocommerce-ordering select,
.dhl-preferred-service-content input[type="text"] {
    display: block;
    padding: .9rem 1.1rem;
    background-color: var(--wp--preset--color--base);
    border: 1px solid rgba(32, 7, 7, 0.8);
    border-radius: 4px;
    color: var(--wp--preset--color--contrast);
    box-sizing: border-box; 
    margin: 0;
	width: 100%;
    height: auto;
}

.wpcf7-form-control.wpcf7-checkbox,
.wpcf7-form-control.wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.wpcf7-list-item {
	margin-left: 0;
}

.wpcf7-list-item label {
    display: flex;
    gap: .5em;
    align-items: center;
}

.wpcf7-submit {
	background-color: var(--wp--preset--color--primary);
    border-radius: 9999px;
    border-color: var(--wp--preset--color--transparent);
    border-width: 2px;
    border-style: solid;
    color: var(--wp--preset--color--base);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 500;
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.wpcf7-submit:hover {
	background-color: var(--wp--preset--color--secondary);
    border-color: var(--wp--preset--color--secondary);
}

/* Radio Button */
input[type="radio"] {
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: var(--wp--preset--color--base);
    /* Not removed via appearance */
    margin: 0;

    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid currentColor;
    border-radius: 50%;
    transform: translateY(-0.075em);

    display: grid;
    place-content: center;
}

input[type="radio"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    border-radius: 50%;
    transform: scale(0);
    transition: 100ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--wp--preset--color--primary);
    /* Windows High Contrast Mode */
    background-color: CanvasText;
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

/* Checkbox */
input[type="checkbox"] {
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: var(--wp--preset--color--base);
    /* Not removed via appearance */
    margin: 0;

    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid currentColor;
    border-radius: 0.15em;
    transform: translateY(-0.075em);

    display: grid;
    place-content: center;
}

input[type="checkbox"]::before {
    content: "";
    width: .65em;
    height: .65em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 100ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--wp--preset--color--primary);
    /* Windows High Contrast Mode */
    background-color: CanvasText;
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"]:focus {
    outline: max(2px, .15em) solid currentColor;
    outline-offset: max(2px, .15em);
}

input[type="checkbox"]:disabled {
    --form-control-color: var(--form-control-disabled);

    color: var(--form-control-disabled);
    cursor: not-allowed;
}

/* WooCommerce */
.woocommerce span.onsale {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25em;
}

.woocommerce .quantity .qty {
    width: 5em;
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment,
.woocommerce-checkout .shop_table {
    background-color: var(--wp--preset--color--gray-light) !important;
}

.woocommerce form .form-row .input-checkbox {
    display: block !important;
}

.woocommerce-form__label-for-checkbox {
    display: inline-block;
}

#add_payment_method #payment ul.payment_methods li input,
.woocommerce-cart #payment ul.payment_methods li input, 
.woocommerce-checkout #payment ul.payment_methods li input {
    float: left;
    margin-top: 0.5em;
}

.woocommerce img,
.woocommerce-page img {
	object-fit: contain !important;
}

.wc-block-product-categories-list {
    padding-left: 0.5em;
}

.wc-block-product-categories-list li {
    margin-top: .25em;
}

/* DHL */
.dhl-preferred-service-content .dhl-preferred-service-item .dhl-preferred-delivery-types,
.dhl-preferred-service-content .dhl-preferred-service-item .dhl-preferred-location-types {
    padding-left: 0;
}

.dhl-preferred-service-content .dhl-preferred-service-item .dhl-preferred-delivery-types li,
.dhl-preferred-service-content .dhl-preferred-service-item .dhl-preferred-location-types li {
    display: flex;
    gap: .5em;
}

.dhl-preferred-service-content .dhl-preferred-service-item .woocommerce-help-tip:after {
    top: 3px;
}

.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 0.5em;
}