/* ========== CHECKOUT PAGE STYLING ========== */
/* One-column layout with clean tile sections */

/* Checkout container - centered, max-width */
.checkout-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Tiles inherit from .tile1 - already styled in samstyle.css */
/* Just add checkout-specific adjustments */
.checkout-tile {
    margin-bottom: 20px;
}

/* Section headings */
.checkout-tile h3,
.checkout-tile h1 {
    font-family: "Gazpacho", sans-serif;
    font-weight: 400;
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
}

/* Remove default WooCommerce headings (we use our own) */
.woocommerce-checkout #order_review_heading {
    display: none;
}

/* ========== CONTACT INFORMATION TILE ========== */
/* Tile 3 - Olive Green background with white text */
.checkout-billing-section.tile1 {
    background-color: var(--color-2) !important; /* Olive Green */
}

.checkout-order-summary h1,
.checkout-billing-section h1 {
    color: #ffffff !important;
}

/* Hide the "Rechnungsdetails" and "Zusätzliche Informationen" headings */
.checkout-billing-section .woocommerce-billing-fields h3,
.checkout-billing-section .woocommerce-additional-fields h3 {
    display: none;
}

/* Form field wrapper */
.woocommerce-billing-fields__field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Make all form rows full width */
.checkout-billing-section .form-row {
    width: 100% !important;
}

/* Form fields styling */
.checkout-billing-section .form-row input.input-text,
.checkout-billing-section .form-row select,
.checkout-billing-section .form-row textarea {
    width: 100% !important;
    padding: 12px 16px;
    background-color: #8b917a !important;
    border: 2px solid #ffffff !important;
    border-radius: 8px !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    transition: border-color 0.2s ease;
}

.checkout-billing-section .form-row input:focus,
.checkout-billing-section .form-row select:focus,
.checkout-billing-section .form-row textarea:focus {
    outline: none;
    border-color: #ffffff !important;
}

/* Placeholder text color */
.checkout-billing-section .form-row input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Labels */
.checkout-billing-section .form-row label {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff !important;
    margin-bottom: 6px;
    display: block;
}

/* Required asterisk */
.checkout-billing-section .form-row label .required {
    color: #ffffff !important;
}

/* Select2 dropdown styling - closed state */
.checkout-billing-section .select2-container--default .select2-selection--single {
    background-color: #8b917a !important;
    border: 2px solid #ffffff !important;
    border-radius: 8px;
    height: auto;
    padding: 12px 16px;
}

.checkout-billing-section .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: normal;
    padding: 0;
}

.checkout-billing-section .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
}

.checkout-billing-section .select2-container {
    width: 100% !important;
}

/* Select2 dropdown menu - opened state */
.select2-container--default .select2-results__option {
    background-color: var(--color-2) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    padding: 12px 16px !important;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: #8b917a !important;
    color: #ffffff !important;
}

.select2-dropdown {
    background-color: var(--color-2) !important;
    border: 2px solid #ffffff !important;
    border-radius: 8px;
}

.select2-search--dropdown {
    background-color: var(--color-2) !important;
    padding: 8px;
}

.select2-search--dropdown .select2-search__field {
    background-color: #8b917a !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

/* Checkbox styling */
.checkout-billing-section input[type="checkbox"] {
    margin-right: 8px;
}

.checkout-billing-section .checkbox label {
    color: #ffffff !important;
    font-weight: 400;
}

/* ========== GIFT CERTIFICATE SECTION ========== */
/* Style as tile - White background like coupon tile */
.gift-certificate.sc_info_box {
    background-color: #ffffff !important;
    padding: 30px;
    border-radius: 12px;
    margin: 0 auto 20px auto;
    max-width: 800px;
    width: 100%;
}

/* Change h3 to look like h1 */
.gift-certificate h3 {
    font-family: "Gazpacho", sans-serif !important;
    font-weight: 400 !important;
    font-size: 24px !important;
    margin-top: 0;
    margin-bottom: 20px;
    color: #333 !important;
}

/* Input fields - match coupon tile style */
.gift-certificate input[type="text"],
.gift-certificate textarea {
    width: 100% !important;
    padding: 12px 16px;
    background-color: #faf2ee !important;
    border: 2px solid var(--color-3) !important;
    border-radius: 8px;
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #333 !important;
}

.gift-certificate input[type="text"]:focus,
.gift-certificate textarea:focus {
    outline: none !important;
    border-color: var(--color-3) !important;
}

.gift-certificate textarea {
    min-height: 100px;
    resize: vertical;
}

/* Radio buttons and labels */
.gift-certificate input[type="radio"] {
    margin-right: 8px;
}

.gift-certificate label {
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #333 !important;
    cursor: pointer;
}

/* Lists */
.gift-certificate .show_hide_list,
.gift-certificate .single_multi_list {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin: 10px 0;
}

.gift-certificate .single_multi_list {
    padding-left: 25px !important;
    margin-top: 10px;
}

.gift-certificate .single_multi_list li {
    margin: 5px 0;
}

/* Form table spacing */
.gift-certificate .form_table {
    margin: 20px 0;
}

.gift-certificate .email_amount,
.gift-certificate .email_sending_date_time_wrapper,
.gift-certificate .message_row {
    margin-bottom: 15px;
}

/* Amount display */
.gift-certificate .amount {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
}

/* Paragraphs */
.gift-certificate p {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    color: #333;
    margin: 10px 0;
}

/* ========== COUPON SECTION ========== */
/* Tile 2 - White background */
.checkout-coupon-section.tile1 {
    background-color: #ffffff !important;
}

/* Hide default coupon toggle (we show it in our tile) */
.woocommerce-form-coupon-toggle {
    display: none;
}

/* Coupon form inside tile */
.checkout-coupon-section .checkout_coupon {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 0;
    background: none;
    border: none;
}

.checkout-coupon-section .checkout_coupon p {
    flex: 1;
    margin: 0;
}

.checkout-coupon-section input#coupon_code {
    width: 100%;
    padding: 12px 16px;
    background-color: #faf2ee !important;
    border: 2px solid var(--color-3) !important;
    border-radius: 8px;
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
}

.checkout-coupon-section input#coupon_code:focus {
    outline: none !important;
    border-color: var(--color-3) !important;
}

.checkout-coupon-section button.button {
    background-color: var(--color-3);
    color: #fff;
    border: 2px solid var(--color-3);
    padding: 13px 24px;
    border-radius: 8px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: -4px;
}

.checkout-coupon-section button.button:hover {
    background-color: var(--color-1);
    border-color: var(--color-1);
}

/* Available coupons wrapper */
.checkout-coupon-section .available-coupons-wrapper {
    margin-top: 20px;
}

#sc-cc {
    padding: 0 !important;
    margin-left: 32px !important;
}
#coupons_list {
    margin-bottom: 1.5em;
    border: none !important;
    border-radius: 0 !important;
}
.sc-accordion-content.open {
    max-height: none !important;
    overflow: hidden !important;
    background: transparent !important;
}
.checkout-tile.checkout-coupon-section {
    margin: 5px 0 !important;
}

/* Fix Smart Coupons flexbox - stack coupons vertically and left-align */
#sc-cc .sc-coupons-list,
#all_coupon_container.sc-coupons-list {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
}


/* Smart Coupons styling - show available coupons directly */
.checkout-coupon-section .wc-sc-coupons-list,
.checkout-coupon-section .available-coupons,
.checkout-coupon-section .wc_sc_available_coupons {
    display: block !important;
    margin-top: 15px;
}

.checkout-coupon-section .wc-sc-coupon,
.checkout-coupon-section .coupon-container {
    display: block !important;
    margin-bottom: 10px;
}

/* Hide Smart Coupons accordion header (yellow "Abo / Gutschein anwenden") */
#coupons_list .sc-accordion-header {
    display: none !important;
}

/* Force accordion content to always show (remove accordion behavior) */
#coupons_list .sc-accordion-content {
    display: block !important;
    opacity: 1 !important;
    height: auto !important;
}

/* Smart Coupons will be rendered by plugin where it chooses */

/* Remove left margin from Smart Coupons container */
.checkout-coupon-section #sc-cc {
    padding: 0 !important;
    margin-left: 0 !important;
}

/* Remove max-height and scrolling from accordion content */
.checkout-coupon-section .sc-accordion-content.open {
    max-height: none !important;
    overflow-y: visible !important;
    background: transparent !important;
}

/* Show all available coupons (no limit) */

/* Applied coupons display */
.woocommerce-checkout-review-order-table .cart-discount {
    background-color: rgba(222, 173, 255, 0.2);
    border-radius: 8px;
}

.woocommerce-checkout-review-order-table .cart-discount th,
.woocommerce-checkout-review-order-table .cart-discount td {
    padding: 12px 10px;
}

/* ========== PAYMENT SECTION TILE ========== */
/* Lavender background with white text */
.checkout-payment-section.tile1 {
    background-color: var(--color-1) !important; /* Lavender */
}

.checkout-payment-section h1 {
    color: #ffffff !important;
}

/* ========== PAYMENT SECTION TOTALS TABLE ========== */
.checkout-payment-section .woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}

/* Hide cart-subtotal (Zwischensumme) */
.checkout-payment-section .cart-subtotal {
    display: none !important;
}

.checkout-payment-section .woocommerce-checkout-review-order-table tfoot {
    background: transparent !important;
}

.checkout-payment-section .woocommerce-checkout-review-order-table tfoot tr {
    background: var(--color-1) !important;
}

/* Override Enfold's background color for payment section */
.main_color .checkout-payment-section #payment {
    background: var(--color-1) !important;
}
.main_color #payment li {
    background: var(--color-1) !important;
}
#top #payment {
border-radius: 5px;
border-style: none;
border-width: 0px;
}
#top #payment ul.payment_methods li {
border-style: none;
border-width: 0px;
}


.checkout-payment-section .woocommerce-checkout-review-order-table tfoot th,
.checkout-payment-section .woocommerce-checkout-review-order-table tfoot td {
    padding: 12px 0;
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    border: none;
    color: #ffffff !important;
    background: transparent !important;
}

/* Align all amounts to the right */
.checkout-payment-section .woocommerce-checkout-review-order-table tfoot td {
    text-align: right !important;
}

/* Order total row - bigger, no uppercase */
.checkout-payment-section .woocommerce-checkout-review-order-table .order-total th,
.checkout-payment-section .woocommerce-checkout-review-order-table .order-total td {
    font-size: 20px !important;
    font-weight: 600 !important;
    padding-top: 15px;
    text-transform: none !important;
}

.checkout-payment-section .woocommerce-checkout-review-order-table .order-total .amount {
    text-align: right !important;
}

/* Override colours.css strong text color - make it white in payment section */
.main_color .checkout-payment-section strong,
.main_color .checkout-payment-section strong a,
.main_color .checkout-payment-section strong span,
.main_color .checkout-payment-section strong bdi {
    color: #ffffff !important;
}

/* ========== PAYMENT OPTIONS ========== */
.checkout-payment-section ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.checkout-payment-section .payment_method {
    background-color: #f7f7f7;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.checkout-payment-section label {
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #333 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* Payment method description */
.checkout-payment-section .payment_box {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
    border: 1px solid #eee;
}

/* Terms checkbox and privacy policy */
.checkout-payment-section .woocommerce-terms-and-conditions-wrapper,
.checkout-payment-section .woocommerce-privacy-policy-text {
    margin: 20px 0;
}

.checkout-payment-section .woocommerce-terms-and-conditions-wrapper label,
.checkout-payment-section .woocommerce-privacy-policy-text p {
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
}

.checkout-payment-section .woocommerce-privacy-policy-text a {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Place order button */
#place_order {
    width: 100%;
    background-color: #ffffff !important;
    color: var(--color-1) !important;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-family: "Poppins", sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

#place_order:hover {
    background-color: var(--color-4) !important;
    color: var(--color-2) !important;
}

/* ========== CHECKBOXES & RADIO BUTTONS ========== */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
    margin-right: 8px;
}

/* ========== HIDDEN FIELDS (shown via JS toggle) ========== */
/* Initially hide invoice-related fields */
#billing_company_field,
#billing_address_1_field,
#billing_postcode_field,
#billing_city_field,
#billing_vat_number_field {
    display: none;
}

/* JS adds .visible class when invoice checkbox is checked */
#billing_company_field.visible,
#billing_address_1_field.visible,
#billing_postcode_field.visible,
#billing_city_field.visible,
#billing_vat_number_field.visible {
    display: block;
}

/* ========== MOBILE OPTIMIZATION ========== */
@media (max-width: 768px) {
    .checkout-container {
        padding: 10px;
    }

    .checkout-tile h3 {
        font-size: 20px;
    }

    .checkout-coupon-section .checkout_coupon {
        flex-direction: column;
    }

    .checkout-coupon-section button.button {
        width: 100%;
    }
}

/* ========== NOTICES STYLING ========== */
/* Hide "added to cart" notice and "can't add more" errors on checkout (redundant) */
.woocommerce-checkout .woocommerce-message:has(a.button.wc-forward),
.woocommerce-checkout .woocommerce-error:has(a.button.wc-forward) {
    display: none;
}

/* Style other notices better - Tile style with transparent background */
.woocommerce-notices-wrapper {
    max-width: 800px;
    margin: 0 auto 20px auto;
}

.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info {
    background: transparent !important;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 15px;
    border: 2px solid;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 400;
}

/* Success message - Terracotta */
.woocommerce-checkout .woocommerce-message {
    border-color: var(--color-3) !important;
    color: var(--color-3) !important;
}

/* Error message - Red */
.woocommerce-checkout .woocommerce-error {
    border-color: #d9534f !important;
    color: #d9534f !important;
}

/* Info message - Olive Green */
.woocommerce-checkout .woocommerce-info {
    border-color: var(--color-2) !important;
    color: var(--color-2) !important;
}

/* Hide default icons */
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before {
    display: none;
}

/* Style links in notices to match */
.woocommerce-checkout .woocommerce-message a {
    color: var(--color-3) !important;
    text-decoration: underline;
}

.woocommerce-checkout .woocommerce-error a {
    color: #d9534f !important;
    text-decoration: underline;
}

.woocommerce-checkout .woocommerce-info a {
    color: var(--color-2) !important;
    text-decoration: underline;
}

/* ========== ORDER SUMMARY TILE ========== */
/* Terracotta background with white text */
.checkout-order-summary.tile1 {
    background-color: var(--color-3) !important; /* Terracotta */
}

.checkout-order-summary h1 {
    color: #ffffff !important;
}

.checkout-order-summary .shop_table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    margin: 0;
    padding: 0;
    background: transparent !important;
}

/* Hide table header */
.checkout-order-summary .shop_table thead {
    display: none;
}

/* Override Enfold's table row backgrounds completely */
.checkout-order-summary .shop_table tbody {
    background: transparent !important;
}

.checkout-order-summary .shop_table tr,
.checkout-order-summary .shop_table tr:nth-child(odd),
.checkout-order-summary .shop_table tr:nth-child(even),
.main_color .checkout-order-summary .shop_table tr:nth-child(odd),
.main_color .checkout-order-summary .shop_table tr:nth-child(even) {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

.checkout-order-summary .shop_table td,
.checkout-order-summary .shop_table th {
    padding: 12px 0 !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    color: #ffffff !important;
    border: none !important;
    background: transparent !important;
}

.checkout-order-summary .cart-discount td {
    text-align: right !important;
}

.checkout-order-summary .product-name {
    font-weight: 600;
}
td.product-name dl.variation dt {
    font-weight: 400;
}

.checkout-order-summary .product-total {
    text-align: right !important;
    font-weight: 400;
}

/* Hide cart-subtotal (Zwischensumme) */
.checkout-order-summary .cart-subtotal {
    display: none;
}

/* Gesamtsumme row in order summary */
.checkout-order-summary .order-total th,
.checkout-order-summary .order-total td {
    font-size: 20px !important;
    font-weight: 600 !important;
    padding-top: 15px !important;
    text-transform: none !important;
}

.checkout-order-summary .order-total td {
    text-align: right !important;
}

/* Override colours.css strong styling for order summary */
.checkout-order-summary strong,
.checkout-order-summary strong span,
.checkout-order-summary strong bdi,
.main_color .checkout-order-summary strong,
.main_color .checkout-order-summary strong a {
    color: #ffffff !important;
}
.checkout-order-summary .cart-discount td a {
    color: #00000033 !important;
}

/* Remove button styling - matches cart page */
.checkout-order-summary .product-name a.remove {
    color: #ffffff !important;
    background-image: url('../img/remove.svg');
background-color: #CCC;
background-position: center;
background-repeat: no-repeat;
background-size: 18px 18px;

    transition: opacity 0.2s ease;
    margin-left: 8px;
    vertical-align: middle;

display: inline-block;
height: 21px;
width: 21px;
text-indent: -9999px;
border-radius: 0;
border-style: none;
border-width: 0;

}

.checkout-order-summary .product-name a.remove:hover {
    opacity: 0.7;
}

/* ========== PAYMENT SECTION ========== */
/* Hide the cart totals that appear in payment section (we show products separately) */
.checkout-payment-section .shop_table.woocommerce-checkout-review-order-table thead,
.checkout-payment-section .shop_table.woocommerce-checkout-review-order-table tbody {
    display: none;
}

/* Keep the tfoot with totals */
.checkout-payment-section .shop_table.woocommerce-checkout-review-order-table tfoot {
    display: table-footer-group;
}

/* ========== LOADING OVERLAY ========== */
/* Style the loading overlay */
.woocommerce-checkout .blockUI.blockOverlay {
    background-color: var(--color-4) !important; /* Pale Yellow */
    opacity: 0.8 !important;
}

/* Loading spinner */
.woocommerce-checkout .blockUI.blockMsg {
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
}

/* ========== CLEAN UP UNWANTED ELEMENTS ========== */
/* Hide shipping section (not used) */
.woocommerce-shipping-fields {
    display: none;
}

/* Hide generated coupon data container (shows all user coupons, not just applicable) */
#generated_coupon_data_container {
    display: none !important;
}
/* ========== SMART COUPONS - CUSTOM STYLING ========== */
/* Override Smart Coupons default Tailwind/plugin styling */

/* Let Smart Coupons display its native gift certificate messages through hooks */
/* Only hide the ones that appear in wrong locations (Tile 3 handled separately) */

/* Individual coupon card styling */
.checkout-coupon-section .sc-coupon {
    background-color: #faf2ee !important;
    border: 2px solid var(--color-3) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.checkout-coupon-section .sc-coupon:hover {
    background-color: #f5e8e0 !important;
    border-color: var(--color-1) !important;
    transform: none !important;
}

/* Hide the SVG icon */
.checkout-coupon-section .sc-coupon svg {
    display: none !important;
}

/* Coupon text styling */
.checkout-coupon-section .sc-coupon .discount-label,
.checkout-coupon-section .sc-coupon .font-bold {
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--color-3) !important;
    text-transform: none !important;
}

.checkout-coupon-section .sc-coupon .font-mono {
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #666 !important;
    text-transform: none !important;
}

/* Expiry text */
.checkout-coupon-section .sc-coupon .text-xs {
    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
    color: #999 !important;
    filter: none !important;
}

/* Reset Tailwind utility classes */
.checkout-coupon-section .sc-coupon .relative,
.checkout-coupon-section .sc-coupon .flex,
.checkout-coupon-section .sc-coupon .items-center,
.checkout-coupon-section .sc-coupon .space-y-1,
.checkout-coupon-section .sc-coupon .space-x-1 {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.checkout-coupon-section .sc-coupon .leading-tight,
.checkout-coupon-section .sc-coupon .leading-none {
    line-height: 1.4 !important;
}

/* Override plugin CSS variables with our colors */
.checkout-coupon-section .sc-coupon {
    --sc-color1: #333 !important;
    --sc-color2: #faf2ee !important;
    --sc-color3: var(--color-3) !important;
}