.wp-block-woocommerce-checkout .codela-kvkk-wrap--blocks,
.wc-block-checkout .codela-kvkk-wrap--blocks {
    margin: 0 0 16px;
    color: #2f2f2f;
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small, 14px);
    line-height: 1.4;
}

.wp-block-woocommerce-checkout .codela-kvkk-wrap--blocks .codela-contract-box,
.wc-block-checkout .codela-kvkk-wrap--blocks .codela-contract-box {
    overflow: hidden;
    margin: 0 0 12px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #fff;
}

.wp-block-woocommerce-checkout .codela-kvkk-wrap--blocks .codela-contract-box:last-child,
.wc-block-checkout .codela-kvkk-wrap--blocks .codela-contract-box:last-child {
    margin-bottom: 0;
}

.wp-block-woocommerce-checkout .codela-kvkk-wrap--blocks .codela-contract-label,
.wc-block-checkout .codela-kvkk-wrap--blocks .codela-contract-label {
    padding: 12px 16px;
    border-bottom: 1px solid #d5d5d5;
    background: #fff;
    color: #2f2f2f;
    font-size: var(--wp--preset--font-size--small, 14px);
    font-weight: 500;
    line-height: 1.4;
}

.wp-block-woocommerce-checkout .codela-kvkk-wrap--blocks .codela-contract-scroll,
.wc-block-checkout .codela-kvkk-wrap--blocks .codela-contract-scroll {
    box-sizing: border-box;
    max-height: 180px;
    overflow-y: auto;
    padding: 12px 16px;
    background: #fff;
    color: #50575e;
    font-size: var(--wp--preset--font-size--small, 14px);
    line-height: 1.5;
}

.wp-block-woocommerce-checkout .codela-kvkk-wrap--blocks .codela-contract-scroll p,
.wc-block-checkout .codela-kvkk-wrap--blocks .codela-contract-scroll p {
    margin: 0 0 .85em;
}

.wp-block-woocommerce-checkout .codela-kvkk-wrap--blocks .codela-contract-scroll p:last-child,
.wc-block-checkout .codela-kvkk-wrap--blocks .codela-contract-scroll p:last-child {
    margin-bottom: 0;
}

/* ── Each agreement renders as: label text (left) + on/off SWITCH (right) ──── */
/* The native checkbox is restyled as a custom switch with a real round knob.
   Styling targets WooCommerce's stable wrapper classes so it survives renders. */

/* WooCommerce's server render and hydrated React render do not always use the
   same outer field class. Target the permanent field identity as well, so the
   very first frame already has the final switch design. */
:where(.wp-block-woocommerce-checkout, .wc-block-checkout)
.wc-block-components-checkbox:has(
    input:is(
        [id*="ms_accept"],
        [id*="ob_accept"],
        [name*="ms_accept"],
        [name*="ob_accept"]
    )
) {
    display: flex !important;
    align-items: center;
    gap: 12px;
}

:where(.wp-block-woocommerce-checkout, .wc-block-checkout)
.wc-block-components-checkbox:has(
    input:is(
        [id*="ms_accept"],
        [id*="ob_accept"],
        [name*="ms_accept"],
        [name*="ob_accept"]
    )
) .wc-block-components-checkbox__label {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
}

:where(.wp-block-woocommerce-checkout, .wc-block-checkout)
.wc-block-components-checkbox:has(
    input:is(
        [id*="ms_accept"],
        [id*="ob_accept"],
        [name*="ms_accept"],
        [name*="ob_accept"]
    )
) .wc-block-components-checkbox__mark {
    display: none !important;
}

:where(.wp-block-woocommerce-checkout, .wc-block-checkout)
input[type="checkbox"]:is(
    [id*="ms_accept"],
    [id*="ob_accept"],
    [name*="ms_accept"],
    [name*="ob_accept"]
) {
    order: 2;
    margin: 0 0 0 auto !important;
    flex: 0 0 auto;
    position: relative !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #cbd5e1 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .2s ease;
}

:where(.wp-block-woocommerce-checkout, .wc-block-checkout)
input[type="checkbox"]:is(
    [id*="ms_accept"],
    [id*="ob_accept"],
    [name*="ms_accept"],
    [name*="ob_accept"]
)::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: left .2s ease;
}

:where(.wp-block-woocommerce-checkout, .wc-block-checkout)
input[type="checkbox"]:is(
    [id*="ms_accept"],
    [id*="ob_accept"],
    [name*="ms_accept"],
    [name*="ob_accept"]
):checked {
    background: #16a34a !important;
}

:where(.wp-block-woocommerce-checkout, .wc-block-checkout)
input[type="checkbox"]:is(
    [id*="ms_accept"],
    [id*="ob_accept"],
    [name*="ms_accept"],
    [name*="ob_accept"]
):checked::before {
    left: 19px;
}

.wc-block-components-address-form__codela-ms_accept,
.wc-block-components-address-form__codela-ob_accept {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.wc-block-components-address-form__codela-ms_accept > label,
.wc-block-components-address-form__codela-ob_accept > label {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* Label text — plain black; only the agreement name is the link. */
.wc-block-components-address-form__codela-ms_accept .wc-block-components-checkbox__label,
.wc-block-components-address-form__codela-ob_accept .wc-block-components-checkbox__label {
    color: inherit;
    text-decoration: none;
}

.codela-kvkk-link {
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.codela-kvkk-link:hover {
    opacity: .75;
}

/* "Show agreement" link/button injected under each contract switch. */
.codela-kvkk-toggle {
    display: inline-block;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2271b1;
    font-size: var(--wp--preset--font-size--small, 13px);
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.codela-kvkk-toggle:hover {
    opacity: .75;
}

.codela-kvkk-toggle:disabled {
    opacity: .65;
    cursor: progress;
    text-decoration: none;
}

.codela-kvkk-toggle[data-preview-state="error"] {
    color: #b45309;
}

/* Hide WooCommerce's checkmark glyph — the switch knob replaces it. */
.wc-block-components-address-form__codela-ms_accept .wc-block-components-checkbox__mark,
.wc-block-components-address-form__codela-ob_accept .wc-block-components-checkbox__mark {
    display: none !important;
}

/* The native checkbox IS the switch (pure CSS, no injected DOM). The knob is a
   ::before pseudo-element → a real round circle with smooth edges. */
.wc-block-components-address-form__codela-ms_accept input[type="checkbox"],
.wc-block-components-address-form__codela-ob_accept input[type="checkbox"] {
    order: 2;
    margin: 0 0 0 auto !important;
    flex: 0 0 auto;
    position: relative !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #cbd5e1 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .2s ease;
}

.wc-block-components-address-form__codela-ms_accept input[type="checkbox"]::before,
.wc-block-components-address-form__codela-ob_accept input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: left .2s ease;
}

.wc-block-components-address-form__codela-ms_accept input[type="checkbox"]:checked,
.wc-block-components-address-form__codela-ob_accept input[type="checkbox"]:checked {
    background: #16a34a !important;
}

.wc-block-components-address-form__codela-ms_accept input[type="checkbox"]:checked::before,
.wc-block-components-address-form__codela-ob_accept input[type="checkbox"]:checked::before {
    left: 19px;
}

.wc-block-components-address-form__codela-ms_accept input[type="checkbox"]:focus-visible,
.wc-block-components-address-form__codela-ob_accept input[type="checkbox"]:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* ── Expandable agreement content ────────────────────────────────────────── */
.wp-block-woocommerce-checkout .codela-kvkk-content,
.wc-block-checkout .codela-kvkk-content {
    box-sizing: border-box;
    grid-column: 1 / -1;
    width: 100%;
    margin: 8px 0 14px;
    max-height: 220px;
    overflow-y: auto;
    padding: 12px 16px;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    background: #fff;
    color: #50575e;
    font-size: var(--wp--preset--font-size--small, 13px);
    line-height: 1.55;
}

.wp-block-woocommerce-checkout .codela-kvkk-content[hidden],
.wc-block-checkout .codela-kvkk-content[hidden] {
    display: none;
}

.wp-block-woocommerce-checkout .codela-kvkk-content p,
.wc-block-checkout .codela-kvkk-content p {
    margin: 0 0 .85em;
}

.wp-block-woocommerce-checkout .codela-kvkk-content p:last-child,
.wc-block-checkout .codela-kvkk-content p:last-child {
    margin-bottom: 0;
}

/* ── Gift-wrap + "add order note" checkboxes → matching on/off switches ───── */
.wc-block-components-address-form__codela-gift_wrap,
.wc-block-checkout__add-note .wc-block-components-checkbox {
    display: flex !important;
    align-items: center;
    gap: 12px;
}

.wc-block-components-address-form__codela-gift_wrap > label,
.wc-block-checkout__add-note .wc-block-components-checkbox > label {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.wc-block-components-address-form__codela-gift_wrap .wc-block-components-checkbox__mark,
.wc-block-checkout__add-note .wc-block-components-checkbox__mark {
    display: none !important;
}

.wc-block-components-address-form__codela-gift_wrap input[type="checkbox"],
.wc-block-checkout__add-note .wc-block-components-checkbox input[type="checkbox"] {
    order: 2;
    margin: 0 0 0 auto !important;
    flex: 0 0 auto;
    position: relative !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #cbd5e1 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .2s ease;
}

.wc-block-components-address-form__codela-gift_wrap input[type="checkbox"]::before,
.wc-block-checkout__add-note .wc-block-components-checkbox input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: left .2s ease;
}

.wc-block-components-address-form__codela-gift_wrap input[type="checkbox"]:checked,
.wc-block-checkout__add-note .wc-block-components-checkbox input[type="checkbox"]:checked {
    background: #16a34a !important;
}

.wc-block-components-address-form__codela-gift_wrap input[type="checkbox"]:checked::before,
.wc-block-checkout__add-note .wc-block-components-checkbox input[type="checkbox"]:checked::before {
    left: 19px;
}

/* ── Hide WooCommerce's native single-address card when OUR multi-address
      picker is present (otherwise two address cards stack on top of each other). */
.wc-block-components-address-address-wrapper:has( #codela-cp-blocks-picker ) > .wc-block-components-address-card-wrapper {
    display: none !important;
}