/*
Theme Name: OilSealThai Custom Theme V42.17.0 (Strict Manufacturer Brand Removal, Zero Supplier Code, 94 Sizes ZF, 216 Sizes TZ)
Theme URI: https://oilsealthai.com
Description: Production Theme for OilSealThai.com featuring Native Support for All Catalogue Models including ZF Oil Seal (94 sizes Trapezoidal Plummer Block Bearing Seal), TZ Oil Seal (216 sizes Double Lip Metal Cased), Dedicated 4-Slot Visual Gallery for ZF & Cassette, Zero-Price Official LINE Inquiry Integration ("สอบถามราคา/ติดต่อ Admin Line :@sealthai"), Complete Supplier Code & Manufacturer Brand Concealment, and Real Click Tracking.
Author: OilSealThai Team
Author URI: https://oilsealthai.com
Template: astra
Version: 42.17.0
*/

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800;900&family=Prompt:wght@300;400;500;600;700&display=swap');

:root {
    --brand-red: #B91C1C;
    --brand-red-dark: #991B1B;
    --brand-dark: #0F172A;
    --brand-navy: #1E293B;
}

body {
    font-family: 'Poppins', 'Prompt', sans-serif;
    color: #1E293B;
    background-color: #F8FAFC;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Poppins', 'Kanit', 'Prompt', sans-serif;
}

/* Hide Astra default elements */
.ast-container, #content, .site-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-header, .site-footer, #masthead, #colophon, .ast-breadcrumbs-wrapper {
    display: none !important;
}

/* HIDE EXACT STOCK NUMBER */
.stock, .stock.in-stock, .stock.out-of-stock, p.stock {
    display: none !important;
}


/* WooCommerce & WordPress Pagination Styles */
.woocommerce-pagination, .page-numbers {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.page-numbers li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: inline-block !important;
}

.page-numbers a, .page-numbers span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0 0.875rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: 1px solid #E2E8F0 !important;
    background-color: #FFFFFF !important;
    color: #1E293B !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.15s ease !important;
}

.page-numbers a:hover {
    background-color: #FEF2F2 !important;
    border-color: #EF4444 !important;
    color: #B91C1C !important;
}

.page-numbers .current {
    background-color: #B91C1C !important;
    border-color: #B91C1C !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 6px -1px rgba(185, 28, 28, 0.2) !important;
}

.page-numbers .dots {
    border: none !important;
    background: transparent !important;
    color: #94A3B8 !important;
    box-shadow: none !important;
}

/* Custom WooCommerce Overrides */
.woocommerce-cart-form-wrapper form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin: 0 !important;
}

.woocommerce-cart-form-wrapper .quantity input.qty {
    width: 4rem !important;
    height: 3rem !important;
    border-radius: 0.75rem !important;
    border: 2px solid #E2E8F0 !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

.woocommerce-cart-form-wrapper button.single_add_to_cart_button {
    flex: 1 !important;
    height: 3rem !important;
    background: #B91C1C !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border-radius: 0.75rem !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 6px -1px rgba(185, 28, 28, 0.2) !important;
    transition: all 0.2s ease !important;
}

.woocommerce-cart-form-wrapper button.single_add_to_cart_button:hover {
    background: #991B1B !important;
    transform: translateY(-1px) !important;
}

/* WooCommerce Cart & Checkout Responsive Thumbnail Styling */
.woocommerce-cart table.cart .product-thumbnail img,
.woocommerce-checkout table.shop_table .product-thumbnail img,
.wc-block-components-product-image img,
.wc-block-components-product-image,
.wc-block-cart-items .wc-block-components-product-image,
.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__image img,
.woocommerce-mini-cart-item img,
.product-thumbnail img {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    object-fit: contain !important;
    background-color: #F8FAFC !important;
    padding: 4px !important;
    border-radius: 10px !important;
    border: 1px solid #E2E8F0 !important;
    display: inline-block !important;
}

/* Prominent BACS and Checkout Bank Box - High Contrast Pure White & Emerald */
.woocommerce-bacs-bank-details,
.wc-bacs-bank-details,
section.woocommerce-bacs-bank-details,
div.woocommerce-bacs-bank-details,
.wcf-bacs-bank-details {
    background: #064E3B !important;
    background: linear-gradient(135deg, #064E3B 0%, #022C22 100%) !important;
    color: #FFFFFF !important;
    padding: 1.5rem !important;
    border-radius: 1.25rem !important;
    border: 2px solid #10B981 !important;
    box-shadow: 0 10px 25px -5px rgba(6, 78, 59, 0.3) !important;
    margin: 1.5rem 0 !important;
    list-style: none !important;
}

/* Headings: Our bank details, Account holder name - Crisp Pure White */
.woocommerce-bacs-bank-details h2,
.woocommerce-bacs-bank-details h3,
.woocommerce-bacs-bank-details h4,
.wc-bacs-bank-details h2,
.wc-bacs-bank-details h3,
.wc-bacs-bank-details h4,
.wc-bacs-bank-details-heading,
.wc-bacs-bank-details-account-name,
section.woocommerce-bacs-bank-details h2,
section.woocommerce-bacs-bank-details h3 {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.wc-bacs-bank-details-heading,
.woocommerce-bacs-bank-details h2 {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding-bottom: 0.5rem !important;
}

.wc-bacs-bank-details-account-name,
.woocommerce-bacs-bank-details h3 {
    font-size: 1rem !important;
    color: #F8FAFC !important;
    margin-bottom: 0.75rem !important;
    font-weight: 600 !important;
}

/* Inner box / card */
.woocommerce-bacs-bank-details ul,
.wc-bacs-bank-details ul,
.woocommerce-bacs-bank-details .bacs_details {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid #10B981 !important;
    border-radius: 1rem !important;
    padding: 1rem 1.25rem !important;
    list-style: none !important;
    margin: 0.75rem 0 0 0 !important;
}

.woocommerce-bacs-bank-details li,
.wc-bacs-bank-details li {
    font-size: 0.95rem !important;
    margin-bottom: 0.5rem !important;
    color: #FFFFFF !important;
    line-height: 1.5 !important;
}

/* Field labels e.g. BANK:, ACCOUNT NUMBER: */
.woocommerce-bacs-bank-details li,
.wc-bacs-bank-details li,
.woocommerce-bacs-bank-details li span,
.wc-bacs-bank-details li span,
.wc-bacs-bank-details dt,
.woocommerce-bacs-bank-details dt {
    color: #A7F3D0 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
}

/* Values e.g. ธนาคารกสิกรไทย, 014-3-19831-6 */
.woocommerce-bacs-bank-details li strong,
.wc-bacs-bank-details li strong,
.woocommerce-bacs-bank-details dd,
.wc-bacs-bank-details dd {
    color: #FFFFFF !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    display: block !important;
    margin-top: 0.2rem !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.woocommerce-bacs-bank-details .account_number strong,
.wc-bacs-bank-details .account_number strong {
    color: #6EE7B7 !important;
    font-family: monospace, Courier, sans-serif !important;
    font-size: 1.3rem !important;
    letter-spacing: 0.08em !important;
}

.woocommerce-order-overview {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 1rem !important;
    padding: 1.25rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    list-style: none !important;
    margin-bottom: 2rem !important;
}

.woocommerce-order-overview li {
    font-size: 0.875rem !important;
    color: #64748B !important;
    border-right: 1px solid #E2E8F0 !important;
    padding-right: 1.5rem !important;
}

.woocommerce-order-overview li strong {
    color: #0F172A !important;
    font-size: 1.125rem !important;
    display: block !important;
    margin-top: 0.25rem !important;
}

.woocommerce-order-overview li.total strong {
    color: #B91C1C !important;
    font-weight: 900 !important;
}



/* ========================================================
   WooCommerce Global Price Styling - Emerald Green (#059669)
   ======================================================== */
.price,
.woocommerce-Price-amount,
.amount,
.product-price,
ins .amount,
.price .amount {
    color: #059669 !important;
    font-weight: 800 !important;
}

del .amount,
del .woocommerce-Price-amount {
    color: #94A3B8 !important;
    font-weight: normal !important;
    font-size: 0.85em !important;
}


/* ========================================================
   SVG & Icon Permanent Constraints (Fixes Giant Icon Flash)
   ======================================================== */
svg {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}

svg.w-3, .w-3 { width: 12px !important; height: 12px !important; }
svg.w-3\.5, .w-3\.5 { width: 14px !important; height: 14px !important; }
svg.w-4, .w-4 { width: 16px !important; height: 16px !important; }
svg.w-5, .w-5 { width: 20px !important; height: 20px !important; }
svg.w-6, .w-6 { width: 24px !important; height: 24px !important; }
svg.w-7, .w-7 { width: 28px !important; height: 28px !important; }
svg.w-8, .w-8 { width: 32px !important; height: 32px !important; }

header svg,
footer svg,
a svg,
button svg,
.btn svg {
    max-width: 28px;
    max-height: 28px;
}

/* ========================================================
   Circular Back to Top Floating Button (Modern Industrial Red)
   ======================================================== */
#oilsealthai-back-to-top {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 10px 25px -4px rgba(220, 38, 38, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background 0.2s ease !important;
    outline: none !important;
    padding: 0 !important;
    -webkit-tap-highlight-color: transparent;
}

#oilsealthai-back-to-top:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    transform: translateY(-4px) scale(1.08) !important;
    box-shadow: 0 15px 30px -4px rgba(220, 38, 38, 0.65), 0 8px 12px -4px rgba(0, 0, 0, 0.15) !important;
}

#oilsealthai-back-to-top:active {
    transform: translateY(0) scale(0.95) !important;
}

#oilsealthai-back-to-top.back-to-top-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(20px) scale(0.8) !important;
}

#oilsealthai-back-to-top.back-to-top-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

#oilsealthai-back-to-top svg,
#oilsealthai-back-to-top .back-to-top-icon {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    stroke: #ffffff !important;
    stroke-width: 2.5 !important;
    transition: transform 0.2s ease !important;
    display: block !important;
}

#oilsealthai-back-to-top:hover svg,
#oilsealthai-back-to-top:hover .back-to-top-icon {
    transform: translateY(-2px) !important;
}

@media (max-width: 640px) {
    #oilsealthai-back-to-top {
        bottom: 20px !important;
        right: 16px !important;
        width: 44px !important;
        height: 44px !important;
    }
    #oilsealthai-back-to-top svg,
    #oilsealthai-back-to-top .back-to-top-icon {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }
}

/* ==========================================================================
   OILSEALTHAI MODERN MOBILE-FIRST ONE PAGE CHECKOUT STYLES
   ========================================================================== */
.oilsealthai-onepage-checkout {
    font-family: 'Poppins', 'Prompt', sans-serif;
}

.oilsealthai-onepage-checkout .woocommerce-NoticeGroup-checkout {
    margin-bottom: 1.5rem;
}

.oilsealthai-onepage-checkout .woocommerce-error {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-left: 4px solid #dc2626 !important;
    color: #991b1b !important;
    border-radius: 1rem !important;
    padding: 1rem 1.25rem !important;
    list-style: none !important;
    font-size: 0.875rem !important;
}

.oilsealthai-onepage-checkout .woocommerce-error li {
    margin: 0.25rem 0 !important;
}

/* Form Row & Input Styling */
.oilsealthai-onepage-checkout .form-row {
    margin-bottom: 1rem !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
}

.oilsealthai-onepage-checkout .form-row label {
    display: block !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    color: #334155 !important;
    margin-bottom: 0.375rem !important;
}

.oilsealthai-onepage-checkout .form-row .required {
    color: #dc2626 !important;
    text-decoration: none !important;
}

.oilsealthai-onepage-checkout .form-row input.input-text,
.oilsealthai-onepage-checkout .form-row textarea,
.oilsealthai-onepage-checkout .form-row select,
.oilsealthai-onepage-checkout .select2-container--default .select2-selection--single {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0.625rem 1rem !important;
    font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
    line-height: 1.5 !important;
    color: #0f172a !important;
    background-color: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 0.75rem !important;
    transition: all 0.2s ease-in-out !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

.oilsealthai-onepage-checkout .form-row textarea {
    min-height: 80px !important;
}

.oilsealthai-onepage-checkout .form-row input.input-text:focus,
.oilsealthai-onepage-checkout .form-row textarea:focus,
.oilsealthai-onepage-checkout .form-row select:focus,
.oilsealthai-onepage-checkout .select2-container--default.select2-container--open .select2-selection--single {
    background-color: #ffffff !important;
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15) !important;
    outline: none !important;
}

.oilsealthai-onepage-checkout .form-row.form-row-first,
.oilsealthai-onepage-checkout .form-row.form-row-last {
    width: 100% !important;
    float: none !important;
}

@media (min-width: 640px) {
    .oilsealthai-onepage-checkout .form-row-first {
        width: 48.5% !important;
        float: left !important;
    }
    .oilsealthai-onepage-checkout .form-row-last {
        width: 48.5% !important;
        float: right !important;
    }
}

/* Payment Gateway Methods */
#payment {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 1.5rem !important;
}

#payment ul.payment_methods {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 1.5rem 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

#payment ul.payment_methods li {
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    padding: 1rem !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    margin: 0 !important;
}

#payment ul.payment_methods li:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

#payment ul.payment_methods li.wc_payment_method input[type="radio"]:checked + label {
    font-weight: 700 !important;
    color: #0f172a !important;
}

#payment ul.payment_methods li label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    cursor: pointer !important;
    margin: 0 !important;
    width: 100% !important;
    padding-left: 0.5rem !important;
}

#payment ul.payment_methods li label img {
    max-height: 28px !important;
    width: auto !important;
    margin-left: auto !important;
}

#payment div.payment_box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
    margin-top: 0.75rem !important;
    font-size: 0.8125rem !important;
    color: #475569 !important;
    line-height: 1.6 !important;
}

#payment div.payment_box::before {
    display: none !important;
}

/* Stripe Elements & Card Inputs */
#stripe-card-element,
.wc-stripe-elements-field,
.StripeElement {
    background-color: #ffffff !important;
    padding: 12px 14px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 0.75rem !important;
    margin-top: 0.5rem !important;
}

#stripe-card-element.StripeElement--focus,
.StripeElement--focus {
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15) !important;
}

/* Place Order Button & Actions */
#payment div.form-row.place-order {
    padding: 0 !important;
    margin: 0 !important;
}

#place_order {
    width: 100% !important;
    min-height: 52px !important;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    font-family: 'Prompt', 'Kanit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.0625rem !important;
    padding: 0.875rem 1.5rem !important;
    border-radius: 1rem !important;
    border: none !important;
    box-shadow: 0 10px 20px -5px rgba(220, 38, 38, 0.4) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    text-transform: none !important;
}

#place_order:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 24px -5px rgba(220, 38, 38, 0.5) !important;
}

#place_order:active {
    transform: translateY(0) !important;
}

/* Terms and Conditions Checkbox */
.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 1rem !important;
    font-size: 0.8125rem !important;
    color: #64748b !important;
}

.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
    accent-color: #b91c1c !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 0.5rem !important;
    vertical-align: middle !important;
}

/* Hide Stripe Express Payment / Payment Request Buttons (Apple Pay & Google Pay) from Contact area */
#wc-stripe-payment-request-wrapper,
#wc-stripe-payment-request-button-separator,
.wc-stripe-payment-request-container,
.wc-block-components-express-payment,
.wc-block-components-express-payment-continue-rule {
    display: none !important;
}

/* Hide SKU display for CASSETTE Oil Seal products on frontend */
.product_cat-cassette .sku_wrapper,
.product_cat-cassette .sku,
.cassette-product .sku_wrapper,
.cassette-product .sku {
    display: none !important;
}