/* Checkout layout & minimal styles */

.checkout-layout {
    display: flex;
    column-gap: 80px;
    row-gap: 36px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1080px;
}

/* Hide global site header on checkout; we render a custom minimal header */
body.woocommerce-checkout header{
    display: none;
}

/* Minimal checkout header */
.checkout-header{
    width: 100%;
}
.checkout-header-inner{
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.checkout-header-left{
    display: flex;
    align-items: center;
    gap: 12px;
}
.checkout-header-right{
    display: flex;
    align-items: center;
}
.checkout-back-link{
    /* Reuse .close-button base; just ensure proper clickable area */
    padding: 8px 0;
}

/* Match regular header responsiveness */
@media (max-width: 1024px){
    .checkout-header-inner{
        padding: 14px;
    }
    /* Scale logo similarly to mobile header */
    .checkout-header-left .site-logo{
        display: block;
        height: 20px;
    }
    .checkout-header-left img{
        height: 20px;
        width: auto;
        display: block;
    }
}

.checkout-layout.empty-cart{
    margin: 64px auto 32px;
}

.checkout-col-left {
    width: 100%;
    max-width: 500px;
}

.checkout-col-right {
	width: 100%;
	max-width: 500px;
    position: sticky;
    top: 120px;
}

.woocommerce-billing-fields__field-wrapper{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Two-column layout for first/last rows; wide rows span full */
.woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-billing-fields__field-wrapper .form-row-last{
    flex: 0 0 calc(50% - 10px);
}
.woocommerce-billing-fields__field-wrapper .form-row-wide{
    flex: 0 0 calc(50% - 10px);
}

.woocommerce form .form-row{
    margin: 0;
    padding: 0;
}

div.checkout-layout h3.checkout-section-title{
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 31px;
    margin: 0 0 20px;
}

.intl-shipping-notice{
    text-align: center;
    margin-bottom: 0;
    font-size: 13px;
}

.woocommerce-shipping-fields__field-wrapper span.optional{
    display: none;
}

.woocommerce h1.checkout-entry-title{
    font-weight: 400;
    font-size: 36px;
    line-height: 47px;
}

@media (max-width: 768px){
    .woocommerce h1.checkout-entry-title{
        font-size: 26px;
        line-height: 34px;
    }
}

@media (max-width: 1119px){
    .woocommerce h1.checkout-entry-title{
        max-width: 500px;
    }
}


.checkout-layout .input-default{
    width: 100%;
}

@media (max-width: 768px){
    .woocommerce-billing-fields__field-wrapper .form-row-first,
    .woocommerce-billing-fields__field-wrapper .form-row-last,
    .woocommerce-billing-fields__field-wrapper .form-row-wide{
        flex: 0 0 100%;
    }
}

.checkout-section.checkout-summary{
    padding: 24px 32px 32px;
    background: var(--osnovy-gray-5);
    border-radius: 20px;
}

.woocommerce table.shop_table{
    border: none !important;
    border-radius: 0px;
    margin: 0 0 24px 0;
    border-collapse: separate;
    border-spacing: 0 8px; /* vertical gap between rows */
}

.woocommerce table.shop_table td{
    padding: 0;
}

.woocommerce table.shop_table tbody{
    border: none !important;
}

.woocommerce table .woocommerce-Price-currencySymbol{
    font-size: 12px;
}

.woocommerce table.shop_table .order-total .woocommerce-Price-currencySymbol{
    font-size: 14px;
}

/* Kill WooCommerce default borders inside totals table */
.checkout-section.checkout-summary .shop_table,
.checkout-section.checkout-summary .shop_table thead,
.checkout-section.checkout-summary .shop_table tbody,
.checkout-section.checkout-summary .shop_table tfoot,
.checkout-section.checkout-summary .shop_table tr,
.checkout-section.checkout-summary .shop_table th,
.checkout-section.checkout-summary .shop_table td{
    border: none !important;
}
.checkout-section.checkout-summary .shop_table tfoot th,
.checkout-section.checkout-summary .shop_table tfoot td{
    border-top: none !important;
}

.woocommerce table.shop_table .product-quantity{
    font-weight: 400 !important;
}

.woocommerce table.shop_table .cart_item{
    border: none;
}

.woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th{
    padding: 0;
    font-weight: 400;
}

.checkout-section.checkout-summary .shop_table .order-total th, .checkout-section.checkout-summary .shop_table .order-total td strong span{
    font-weight: 500 !important;
}

.checkout-section.checkout-summary .shop_table .order-total {
    font-size: 16px;
}
.checkout-section.checkout-summary .shop_table .order-total th,
.checkout-section.checkout-summary .shop_table .order-total td{
    padding-top: 16px; /* tables ignore margin on tr; add padding on cells */
}

.checkout-section.checkout-summary .shop_table .cart_item td:last-child, .checkout-section.checkout-summary .shop_table tfoot td{
    text-align: right;
}

#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment{
    background-color: unset;
}

#add_payment_method #payment ul.payment_methods, .woocommerce-cart #payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods{
    border-bottom: none;
}

#add_payment_method #payment div.form-row, .woocommerce-cart #payment div.form-row, .woocommerce-checkout #payment div.form-row{
    padding: 0;
}

.woocommerce-checkout-payment div.woocommerce-privacy-policy-text p{
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.01em;
    color: var(--osnovy-gray-50);
    margin: 12px 0 0;
}

.woocommerce-checkout-payment div.woocommerce-privacy-policy-text p a{
    color: var(--osnovy-gray-50);
    text-decoration: underline;
}

.checkout.woocommerce-checkout{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 64px;
}

#add_payment_method #payment div.form-row, .woocommerce-cart #payment div.form-row, .woocommerce-checkout #payment div.form-row{
    display: flex;
    flex-direction: column;
}
	
.preorder-notice{
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	line-height: 20px;
	text-align: center;
	background-color: var(--osnovy-gray-5);
	padding: 16px 20px;
	border-radius: 20px;
	margin-bottom: 16px;
}

/* Shipping methods list under country */
.osnovy-shipping-methods{
    margin-top: 12px;
}
.osnovy-shipping-methods ul{ list-style: none; margin: 0; padding: 0; }
.osnovy-shipping-methods li{ margin-bottom: 8px; }
.osnovy-shipping-methods label{ display: flex; align-items: center; gap: 8px; cursor: pointer; }

.woocommerce-checkout-payment .payment-subline{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.woocommerce-checkout-payment img.payment-icons{
    height: 24px;
    vertical-align: middle;
    max-width: auto;
    width: auto;
}

.newsletter-optin{
    margin-bottom: 24px;
}

.woocommerce form .form-row .required{
    display: none;
}

/* Select2 overrides on checkout to match .input-default */
.checkout-layout .select2-container{
	width: 100% !important;
}

.checkout-layout .select2-container--default .select2-selection--single{
	/* Mirror .input-default */
	background: var(--osnovy-white) !important;
	border: 1.4px solid var(--osnovy-gray-5) !important;
	border-radius: 100px !important;
	padding: 10px 40px 10px 16px;
	min-height: 40px;
	display: flex;
	align-items: center;
	box-shadow: none !important;
}

.checkout-layout .select2-container--default.select2-container--open .select2-selection--single,
.checkout-layout .select2-container--default.select2-container--focus .select2-selection--single{
	border-color: var(--osnovy-gray-30) !important;
	outline: none;
}

.checkout-layout .select2-container .select2-selection__rendered{
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'IBM Plex Serif', serif;
	font-size: 13px;
	line-height: 17px;
	color: var(--osnovy-black);
}

.np-shipping-price .woocommerce-Price-currencySymbol{
    font-size: 12px;
}

.checkout-layout .select2-container .select2-selection__placeholder{
	color: var(--osnovy-gray-30) !important;
}

.checkout-layout .select2-container .select2-selection__arrow{
	right: 16px !important;
	height: 100% !important;
}

.checkout-layout .select2-container .select2-selection__arrow b{
	border-color: var(--osnovy-gray-30) transparent transparent transparent !important;
}

.checkout-layout .select2-container.select2-container--open,
body.woocommerce-checkout .select2-container.select2-container--open{
	z-index: 10000; /* keep above panels */
    max-width: 500px;
}

/* Dropdown panel styling */
.checkout-layout .select2-dropdown,
body.woocommerce-checkout .select2-dropdown{
	border: 1.4px solid var(--osnovy-gray-5) !important;
	border-radius: 22px !important; /* match NP modal radius */
    box-shadow: none !important;
    /* fade/slide animation base */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.checkout-layout .select2-container.select2-container--open .select2-dropdown--below,
body.woocommerce-checkout .select2-container.select2-container--open .select2-dropdown--below{
	/* Mirror .np-modal sizing/spacing */
	margin-top: 10px;
	box-shadow: 0px 6px 10px rgba(0,0,0,0.15) !important;
	border-radius: 22px !important;
    min-width: calc(100% - 24px);
	box-sizing: border-box;
	overflow: hidden; /* clip rounded corners */
}

/* Animate in when open */
.checkout-layout .select2-dropdown.is-open,
body.woocommerce-checkout .select2-dropdown.is-open{
    opacity: 1;
    transform: translateY(0);
}

/* Animate out on close (JS adds .is-closing briefly) */
.checkout-layout .select2-dropdown.is-closing,
body.woocommerce-checkout .select2-dropdown.is-closing{
    opacity: 0 !important;
    transform: translateY(-6px) !important;
}

.checkout-layout .select2-results__options,
body.woocommerce-checkout .select2-results__options{
	font-family: 'IBM Plex Serif', serif;
	font-size: 13px;
	line-height: 17px;
}

/* Search field inside dropdown */
/* When Select2 appends the dropdown to <body>, make sure it's styled on checkout */
.checkout-layout .select2-search--dropdown .select2-search__field,
body.woocommerce-checkout .select2-search--dropdown .select2-search__field{
	border: 1.4px solid var(--osnovy-gray-5) !important;
	border-radius: 100px !important;
	padding: 8px 12px !important;
	font-family: 'IBM Plex Serif', serif !important;
	font-size: 13px !important;
	line-height: 17px !important;
	outline: none !important;
	box-shadow: none !important; /* kill default blue glow */
}

.checkout-layout .select2-search--dropdown,
body.woocommerce-checkout .select2-search--dropdown{
	padding: 12px !important; /* match NP modal inner spacing */
}

.checkout-layout .select2-search--dropdown .select2-search__field:focus,
body.woocommerce-checkout .select2-search--dropdown .select2-search__field:focus{
	border-color: var(--osnovy-gray-30) !important;
}

/* Option states */
.checkout-layout .select2-results__option,
body.woocommerce-checkout .select2-results__option{
	padding: 12px 16px !important; /* like .sort-option */
	cursor: pointer;
}

.checkout-layout .select2-container--default .select2-results__option--highlighted[aria-selected],
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected]{
	background-color: var(--osnovy-gray-5) !important;
	color: var(--osnovy-black) !important;
}
.checkout-layout .select2-container--default .select2-results__option[aria-selected="true"],
body.woocommerce-checkout .select2-container--default .select2-results__option[aria-selected="true"]{
	background-color: var(--osnovy-gray-5) !important;
	color: var(--osnovy-black) !important;
}

/* No-results message */
body.woocommerce-checkout .select2-results__message{
	font-family: 'IBM Plex Serif', serif !important;
	font-size: 13px !important;
	color: var(--osnovy-black) !important;
    padding: 12px 16px !important;
}

.footer-newsletter{
    display: none;
}

.woocommerce form .form-row label{
    padding: 0 0 0 5px;
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 17px;
    margin-bottom: 10px;
}

.woocommerce-checkout .checkout .checkout-inline-error-message{
    display: none;
}

.woocommerce-checkout .gift-toggle{
    margin-top: 20px;
    margin-bottom: 24px;
}

.checkout-section.checkout-contact{
    margin-bottom: 72px;
}

.instock-first-toggle{
    margin: 24px 0;
}

.checkout-coupon{
    border: 1px solid var(--osnovy-gray-5);
    padding: 16px 20px;
    border-radius: 20px;
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.checkout-coupon.open{
    gap: 16px;
    padding-bottom: 24px;
}

/* Animated reveal for coupon form */
.checkout-coupon #coupon-form-wrap{
    overflow: hidden;
    max-height: 0px;
    opacity: 0;
    transition: max-height 280ms ease, opacity 220ms ease;
}
.checkout-coupon.open #coupon-form-wrap{
    max-height: 240px; /* enough to show the fields */
    opacity: 1;
}

.coupon-header{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

div.coupon-header h3.checkout-section-title{
    margin: 0 !important;
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.01em;
    padding: 6px 0;
}

@media (max-width: 768px){
    div.coupon-header h3.checkout-section-title{
        font-size: 16px;
        line-height: 21px;
    }
}

.checkout_coupon.woocommerce-form-coupon{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkout_coupon.woocommerce-form-coupon p.form-row{
    width: 100%;
}

.coupon-inline-message.error{
    padding: 16px 20px;
    border-radius: 20px;
    background-color: var(--osnovy-error-bg);
    color: var(--osnovy-black);
    font-size: 13px;
    line-height: 17px;
    font-weight: 400;
    font-family: 'IBM Plex Serif';
    font-style: normal;
    text-align: center;
}

.coupon-inline-message.success{
    background-color: var(--osnovy-gray-5);
    color: var(--osnovy-black);
    font-size: 13px;
    line-height: 17px;
    font-weight: 400;
    font-family: 'IBM Plex Serif';
    font-style: normal;
    text-align: center;
    padding: 16px 20px;
    border-radius: 20px;
}

.woocommerce form .form-row .optional, .np-field label .optional{
    color: var(--osnovy-gray-30);
    margin-left: 10px;
}

.checkout-section.checkout-order, .checkout-section.checkout-shipping{
    margin-bottom: 72px;
}

body.woocommerce-checkout .osnovy-footer .alignfull{
    padding-top: 180px;
}

.np-field{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.np-field label{
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 17px;
    color: var(--osnovy-black);
    padding: 0 0 0 5px;
}

.np-accordion{
    margin-top: 16px !important;
}

.np-accordion .accordion-content{
    display: flex;
    row-gap: 10px;
    flex-direction: column;
}

@media (max-width: 768px){
    .checkout-layout{
       gap: 24px;
    }

    div.checkout-layout h3.checkout-section-title{
        font-size: 20px;
        line-height: 26px;
    }

    .checkout-section.checkout-order, .checkout-section.checkout-shipping, .checkout-section.checkout-contact{
        margin-bottom: 56px;
    }

    .checkout-section.checkout-summary{
        padding: 24px 24px 32px;
    }

    .checkout.woocommerce-checkout{
        margin-top: 0;
    }
}

.checkout-cart-items-wrapper{
    margin-bottom: 24px;
}

/* Hide iOS spinner arrows on phone inputs */
input[type="tel"][data-numeric="true"],
input[type="tel"][pattern^="\\+[0-9]"],
input[type="tel"][inputmode="tel"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="tel"][data-numeric="true"]::-webkit-inner-spin-button,
input[type="tel"][data-numeric="true"]::-webkit-outer-spin-button,
input[type="tel"][pattern^="\\+[0-9]"]::-webkit-inner-spin-button,
input[type="tel"][pattern^="\\+[0-9]"]::-webkit-outer-spin-button,
input[type="tel"][inputmode="tel"]::-webkit-inner-spin-button,
input[type="tel"][inputmode="tel"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Also target by ID */
#billing_phone,
#recipient_phone {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

#billing_phone::-webkit-inner-spin-button,
#billing_phone::-webkit-outer-spin-button,
#recipient_phone::-webkit-inner-spin-button,
#recipient_phone::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Show "+" as pseudo-element for phone fields - always visible */
/* Add padding to make room for the "+" */
#billing_phone,
#recipient_phone {
    padding-left: 24px;
}

/* Target form-row wrapper that contains phone fields */
.woocommerce-billing-fields__field-wrapper .form-row:has(#billing_phone),
.woocommerce-billing-fields__field-wrapper .form-row:has(#recipient_phone) {
    position: relative;
}

/* Always show "+" pseudo-element for phone fields */
.woocommerce-billing-fields__field-wrapper .form-row:has(#billing_phone)::before,
.woocommerce-billing-fields__field-wrapper .form-row:has(#recipient_phone)::before {
    content: '+';
    position: absolute;
    left: 17px;
    bottom: 6.5px;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--osnovy-black);
    z-index: 1;
    font-size: 13px;
    line-height: 1;
    margin-top: 1px;
}

/* Fallback for browsers that don't support :has() - use class-based approach */
.woocommerce-billing-fields__field-wrapper .form-row.phone-field-empty::before,
.woocommerce-billing-fields__field-wrapper .form-row.phone-field-filled::before {
    content: '+';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
    z-index: 1;
    font-size: 16px;
    line-height: 1;
    margin-top: 1px;
}