/* =========================================================
   MINI CHECKOUT FORM — FULL COMBINED CSS
   (Original + Optimized + Collapse Fix + Success Animation)
   ========================================================= */

/* === BASE CONTAINER === */
.mini-checkout-form {
    margin-top: 12px;
    max-width: 560px;
    width: 100%;
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 14px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16,24,40,0.06);
    display: none;
    overflow: hidden;
    transition: all 300ms cubic-bezier(.2,.9,.2,1);
    transform-origin: top center;
    opacity: 0;
    transform: translateY(-6px) scaleY(0.98);
    z-index: 50;
}

/* OPEN STATE */
.mini-checkout-form.mcf-open {
    display: block;
    opacity: 1;
    transform: translateY(0px) scaleY(1);
}

/* COLLAPSED STATE FORCE HIDE */
.mini-checkout-form.mcf-collapsed,
.mini-checkout-form[aria-hidden="true"] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
    visibility: hidden !important;
}

/* === INNER WRAPPER === */
.mini-checkout-inner {
    position: relative;
}

/* Saved blur effect */
.mini-checkout-inner.mcf-saved {
    filter: blur(0.4px);
    pointer-events: none;
}

/* === ROWS === */
.mcf-row {
    margin-bottom: 8px;
}

.mcf-row label {
    display: block;
    font-size: 13px;
    color: #111827;
    margin-bottom: 6px;
}

.mcf-row input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-sizing: border-box;
    font-size: 14px;
}

/* === ACTIONS === */
.mcf-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}

.mini-submit {
    background: #111827;
    color: #fff;
    border: none;
    padding: 9px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.mini-close {
    background: transparent;
    border: 1px solid #e5e7eb;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}

/* =========================================================
   SUCCESS OVERLAY
   ========================================================= */

.mcf-success {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(255,255,255,0.98);
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(2,6,23,0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms cubic-bezier(.2,.9,.2,1);
}

/* VISIBLE STATE */
.mcf-success.mcf-success-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Hide via accessibility */
.mcf-success[aria-hidden="true"] {
    opacity: 0;
}

/* === TICK ANIMATION === */
.tick-svg {
    width: 46px;
    height: 46px;
}

.tick-circle {
    stroke: #10b981;
    stroke-width: 2;
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    transition: stroke-dashoffset 350ms ease;
}

.tick-check {
    stroke: #10b981;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    transition: stroke-dashoffset 400ms ease 220ms;
    fill: none;
}

.mcf-success.mcf-success-visible .tick-circle {
    stroke-dashoffset: 0;
}

.mcf-success.mcf-success-visible .tick-check {
    stroke-dashoffset: 0;
}

/* =========================================================
   COLLAPSE TAB (shown when form hidden)
   ========================================================= */

.mcf-collapse-tab {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    margin: 10px 0 0 0;
    text-align: center;
    pointer-events: auto;
}

.mcf-collapse-tab .mcf-tab-toggle {
    width: 100% !important;
    display: block !important;
    background: #111827 !important;
    color: #fff !important;
    padding: 11px !important;
    /*border-radius: 8px !important;*/
    /*font-size: 15px !important;*/
    color: rgba(17, 17, 17, 1) !important;
    background: #f7f7f7 !important;
    border-color: rgba(17, 17, 17, 1) !important;
    border-width: 2px;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600 !important;
    text-align: center !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.mcf-collapse-tab .mcf-tab-toggle:hover {
    background: #eaeaea !important;
}

/* Prevent overlap with WooCommerce */
form.cart,
.cart {
    position: relative;
    z-index: 5;
}

.add_to_cart_button,
.single_add_to_cart_button {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.quantity, 
.input-text.qty.text {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 480px) {
    .mini-checkout-form { 
        width: 100%; 
        padding: 12px; 
        border-radius: 8px; 
    }
    .tick-svg { 
        width: 40px; 
        height: 40px; 
    }
}


/* =========================================================
   BETTER STYLING — Continue to Checkout + Place Order Tab
   ========================================================= */

/* --- Spacing from Add to Cart button --- */
.continue-checkout-btn-wrap,
.mcf-continue-checkout,
.mcf-collapse-tab {
    margin-top: 22px !important;
}

/* --- Continue to Checkout Container --- */
.continue-checkout-btn-wrap,
.mcf-continue-checkout {
    text-align: center;
}

/* --- Button Look --- 
.continue-checkout-btn,
.mcf-go-checkout {
    background: #111827 !important;
    color: #fff !important;
    padding: 12px 20px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    width: 100%;
    max-width: 280px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: all .25s ease;
}

.continue-checkout-btn:hover,
.mcf-go-checkout:hover {
    background: #000 !important;
    transform: translateY(-1px);
}

/* --- Collapse Tab (Place Order) --- */
.mcf-collapse-tab {
    text-align: center;
    width: 100%;
}

/*
.mcf-collapse-tab .mcf-tab-toggle {
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    padding: 10px 16px !important;
    font-size: 14px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    cursor: pointer;
    font-weight: 500;
    display: inline-block;
    width: 100%;
    max-width: 300px;
    transition: all .25s ease;
}

.mcf-collapse-tab .mcf-tab-toggle:hover {
    background: #e5e7eb !important;
    transform: translateY(-1px);
}*/
/***/
/* =========================================================
   FULL-WIDTH BUTTONS — match WooCommerce Add to Cart button
   ========================================================= */

/* Remove max-width limitations on wrapper */
.continue-checkout-btn-wrap,
.mcf-continue-checkout,
.mcf-collapse-tab {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 18px !important;
    display: block !important;
}

/* Make the button full width */
.continue-checkout-btn,
.mcf-go-checkout {
    width: 100% !important;
    display: block !important;
    background: #111827 !important;
    color: #fff !important;
    padding: 11px !important;
    /*border-radius: 8px !important;*/
    /*font-size: 15px !important;*/
    color: rgba(17, 17, 17, 1) !important;
    background: #f7f7f7 !important;
    border-color: rgba(17, 17, 17, 1) !important;
    border-width: 2px;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600 !important;
    text-align: center !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Hover effect */
.continue-checkout-btn:hover,
.mcf-go-checkout:hover {
    background: #eaeaea !important;
    /*transform: translateY(-1px);*/
}

/* ===== FULL-WIDTH COLLAPSE / PLACE ORDER TAB ===== /
.mcf-collapse-tab .mcf-tab-toggle {
    width: 100% !important;
    display: block !important;
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Add space ABOVE the Continue to Checkout button */
.continue-checkout-btn-wrap {
    margin-top: 16px !important;
}

/* Add space ABOVE the Place Order tab toggle */
.mcf-collapse-tab {
    margin-top: 16px !important;
}

/* Make sure the buttons inside fill width and have spacing */
.continue-checkout-btn,
.mcf-tab-toggle {
    margin-top: 6px !important; /* internal spacing if needed */
}

.single-product div.product form.cart .button {
        margin-bottom: 10px;
        width: 100%;

    }
}

/* Remove padding when AJAX has added an item */
.single-product div.product form.cart.mcf-no-padding {
    padding: 0 !important;
}

.mcf-hide-tab {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


.mini-checkout-header {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.mini-checkout-subheading {
    font-size: 18px;
    font-weight: normal;
    color: #555;
    margin-bottom: 20px;
}

.mini-phone {
    ime-mode: disabled;
}


/* Polished ShopIsle-style Premium Toast */
.wc-toast {
    position: fixed;
    bottom: 15px;
    right: 15px;
    min-width: 150px;
    max-width: 320px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 18px;
    border-radius: 14px;

    background: rgba(20, 20, 20, 0.72);
    backdrop-filter: blur(14px);

    color: rgba(17, 17, 17, 1) !important;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 15px;
    font-weight: 500;

    box-shadow: 0 8px 32px rgba(0,0,0,0.2);

    opacity: 0;
    transform: translateY(20px);
    transition: all 0.35s ease;
    z-index: 99999;
}

.wc-toast-visible {
    opacity: 1;
    transform: translateY(0);
}

.wc-toast-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* Success theme */
.wc-toast.success {
    background: rgba(40, 167, 69, 0.85);
}

/* Error theme */
.wc-toast.error {
    background: rgba(220, 53, 69, 0.85);
}

.md-cart-not-empty {
    margin-top: 10px !important;
}