/* 
    Woocomerce styles for Secho Tema by Optiflowz
*/

.select2-container .select2-selection--single {
    height: auto !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.woocommerce-Price-currencySymbol::before {
    background-color: var(--secho-bg) !important;
    color: var(--secho-text) !important;
    display: grid !important;
    align-content: center !important;
    height: 100% !important;
}

#add_payment_method #payment ul.payment_methods li img,
.woocommerce-cart #payment ul.payment_methods li img,
.woocommerce-checkout #payment ul.payment_methods li img {
    width: min(300px, 80%) !important;
    margin-top: 6px;
}
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
    padding: 12px !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    margin: 0 !important;
    margin-top: 20px !important;
    display: block !important;
}
#add_payment_method #payment div.payment_box p,
.woocommerce-cart #payment div.payment_box p,
.woocommerce-checkout #payment div.payment_box p {
    margin: 0 !important;
    color: var(--secho-text) !important;
}

.payment_box.payment_method_msu br {
    display: none !important;
}

#add_payment_method #payment ul.payment_methods li label,
.woocommerce-cart #payment ul.payment_methods li label,
.woocommerce-checkout #payment ul.payment_methods li label {
    color: var(--secho-text) !important;
    font-size: 20px !important;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
    border-radius: 8px !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--secho-text) !important;
}

.woocommerce form .form-row .input-text::placeholder,
.woocommerce form .form-row select::placeholder {
    color: var(--secho-dim) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    color: var(--secho-text) !important;
}

.select2-container--default .select2-selection--single {
    border-radius: 8px !important;
    border: none !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
    display: none !important;
}

#payment {
    border: none !important;
    background: linear-gradient(135deg, rgba(150, 160, 200, 0.2), rgba(150, 160, 200, 0.1)) !important;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
    background-color: var(--secho-orange) !important;
    border-radius: calc(infinity * 1px) !important;
    transition: all 160ms ease-in-out !important;
}

.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover {
    background: var(--secho-orange-light) !important;
    color: #fff;
    transform: translateY(-1px);
}

li.wc_payment_method {
    border-radius: 12px !important;
    padding-inline: 6px;
    padding-bottom: 6px;
    transition: background 200ms ease-in-out !important;
}
li.wc_payment_method:has(input[type="radio"]:checked) {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.woocommerce-checkout #payment li.wc_payment_method div.payment_box {
	display: block !important;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	margin-top: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
    transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1),
        margin 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.woocommerce-checkout #payment li.wc_payment_method:has(input[type="radio"]:checked) div.payment_box {
	max-height: 300px;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	margin-top: 20px !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
    transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1),
        margin 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--secho-muted) !important;
}

.woocommerce-error a,
.woocommerce-info a,
.woocommerce-message a {
    font-weight: 500 !important;
}

.woocommerce-error a strong,
.woocommerce-info a strong,
.woocommerce-message a strong {
    font-weight: 500 !important;
    font-style: italic !important;
    color: var(--secho-orange-dark) !important;
}