/**
 * Custom Checkout Page Redesign for backend.kehastuudio.ee/kassa
 *
 * This CSS hides the header and footer on the checkout page
 * and applies the kehastuudio.ee color palette
 */

/* ===================================
   CHECKOUT PAGE SPECIFIC STYLES
   =================================== */

/* Target only the checkout page */
body.woocommerce-checkout {
    /* Apply teal/turquoise background color matching kehastuudio.ee */
    background-color: #6B9E9A !important;
    background-image: linear-gradient(135deg, #6B9E9A 0%, #7AAFA9 100%) !important;
}

/* Hide the main header/navigation on checkout page */
body.woocommerce-checkout .site-header,
body.woocommerce-checkout header.header,
body.woocommerce-checkout header[role="banner"],
body.woocommerce-checkout .main-navigation,
body.woocommerce-checkout #masthead,
body.woocommerce-checkout .header-wrapper {
    display: none !important;
}

/* Hide the footer on checkout page */
body.woocommerce-checkout .site-footer,
body.woocommerce-checkout footer.footer,
body.woocommerce-checkout footer[role="contentinfo"],
body.woocommerce-checkout #colophon {
    display: none !important;
}

/* Hide sticky buttons/widgets on checkout */
body.woocommerce-checkout .sticky-buttons,
body.woocommerce-checkout #sticky-navigation {
    display: none !important;
}

/* Adjust the main content area */
body.woocommerce-checkout .site-content,
body.woocommerce-checkout #content,
body.woocommerce-checkout main {
    padding-top: 0 !important;
    margin-top: 0 !important;
    max-width: 100% !important;
}

/* Style the checkout form container */
body.woocommerce-checkout .woocommerce {
    max-width: 1200px;
    margin: 40px auto;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Add a subtle logo/branding at the top */
body.woocommerce-checkout .woocommerce::before {
    content: "Kehastuudio";
    display: block;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #6B9E9A;
    margin-bottom: 30px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Breadcrumbs styling */
body.woocommerce-checkout .woocommerce-breadcrumb {
    background-color: transparent !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
    color: #666 !important;
}

/* Alert/notification messages styling */
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error {
    border-left-color: #6B9E9A !important;
    background-color: #f0f8f7 !important;
}

/* Button styling to match the new design */
body.woocommerce-checkout button.button,
body.woocommerce-checkout .button,
body.woocommerce-checkout input[type="submit"],
body.woocommerce-checkout #place_order {
    background-color: #6B9E9A !important;
    color: #ffffff !important;
    border: none !important;
    padding: 15px 30px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

body.woocommerce-checkout button.button:hover,
body.woocommerce-checkout .button:hover,
body.woocommerce-checkout input[type="submit"]:hover,
body.woocommerce-checkout #place_order:hover {
    background-color: #5A8D88 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(107, 158, 154, 0.3) !important;
}

/* Form field styling */
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout textarea,
body.woocommerce-checkout select {
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    padding: 12px !important;
    transition: border-color 0.3s ease !important;
}

body.woocommerce-checkout input[type="text"]:focus,
body.woocommerce-checkout input[type="email"]:focus,
body.woocommerce-checkout input[type="tel"]:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-checkout select:focus {
    border-color: #6B9E9A !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(107, 158, 154, 0.1) !important;
}

/* Checkout headings */
body.woocommerce-checkout h1,
body.woocommerce-checkout h2,
body.woocommerce-checkout h3 {
    color: #333 !important;
    font-weight: 600 !important;
}

/* Payment method icons styling */
body.woocommerce-checkout .payment_methods img {
    max-height: 30px;
    vertical-align: middle;
}

/* Order review table styling */
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    border: 1px solid #eee !important;
    border-radius: 8px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body.woocommerce-checkout .woocommerce {
        margin: 20px;
        padding: 20px;
    }

    body.woocommerce-checkout .woocommerce::before {
        font-size: 24px;
        margin-bottom: 20px;
    }
}

/* Hide the "Back to Top" link */
body.woocommerce-checkout a[href="javascript:void(0)"] {
    display: none !important;
}

/* Ensure chat widgets don't interfere */
body.woocommerce-checkout iframe[title*="chat"],
body.woocommerce-checkout .chat-widget {
    z-index: 999 !important;
}

/* Clean up any remaining unwanted elements */
body.woocommerce-checkout .breadcrumb-trail {
    background: transparent !important;
}

/* Mobile cart widget - hide on checkout */
body.woocommerce-checkout .widget_shopping_cart {
    display: none !important;
}

/* Additional theme-specific header hiding */
body.woocommerce-checkout .header-ftc,
body.woocommerce-checkout .header-layout3,
body.woocommerce-checkout .header-layout,
body.woocommerce-checkout .header-nav,
body.woocommerce-checkout .header-content,
body.woocommerce-checkout .header-mobile-social {
    display: none !important;
}

/* Hide breadcrumb wrapper section */
body.woocommerce-checkout .breadcrumb-wrapper,
body.woocommerce-checkout .page-header,
body.woocommerce-checkout .entry-header,
body.woocommerce-checkout .breadcrumbs-container,
body.woocommerce-checkout .woocommerce-breadcrumb-wrapper {
    display: none !important;
}

/* Hide theme-specific breadcrumb */
body.woocommerce-checkout .ftc-breadcrumb {
    display: none !important;
}