/* =============================================
   Elementor Mini Cart Widget - Stylesheet
   ============================================= */

/* --- CSS Custom Property Defaults --- */
.elementor-widget-emc-mini-cart {
    --emc-toggle-icon-color: #333;
    --emc-toggle-icon-hover-color: #000;
    --emc-toggle-text-color: #333;
    --emc-toggle-bg: #fff;
    --emc-toggle-border-color: #e0e0e0;
    --emc-toggle-border-width: 1px;
    --emc-toggle-border-radius: 5px;
    --emc-toggle-icon-size: 20px;

    --emc-badge-text-color: #fff;
    --emc-badge-bg: #e00;

    --emc-cart-bg: #fff;
    --emc-cart-width: 350px;
    --emc-close-icon-size: 20px;
    --emc-close-color: #999;

    --emc-divider-color: #e0e0e0;

    --emc-view-cart-color: #333;
    --emc-view-cart-bg: #ebe9eb;
    --emc-checkout-color: #fff;
    --emc-checkout-bg: #333;
    --emc-button-radius: 3px;

    --emc-empty-msg-color: #999;
    --emc-empty-msg-align: center;

    --emc-main-alignment: right;

    /* Side cart position defaults (right) */
    --emc-side-transform: translateX(100%);
    --emc-side-left: auto;
    --emc-side-right: 0;
}

/* --- Toggle Wrapper --- */
.emc-toggle-wrapper {
    position: relative;
    display: inline-flex;
    justify-content: var(--emc-main-alignment, right);
    width: 100%;
}

/* --- Toggle Button --- */
.emc-toggle-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--emc-toggle-icon-color);
    background: var(--emc-toggle-bg);
    border: var(--emc-toggle-border-width) solid var(--emc-toggle-border-color);
    border-radius: var(--emc-toggle-border-radius);
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
    box-sizing: border-box;
}

.emc-toggle-button:hover,
.emc-toggle-button:focus {
    color: var(--emc-toggle-icon-hover-color);
    text-decoration: none;
}

/* Icon */
.emc-button-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.emc-icon-svg {
    display: inline-flex;
    align-items: center;
}

.emc-icon-svg svg {
    width: var(--emc-toggle-icon-size);
    height: var(--emc-toggle-icon-size);
    fill: currentColor;
}

/* Subtotal text */
.emc-button-text {
    color: var(--emc-toggle-text-color);
    white-space: nowrap;
}

/* Hide subtotal when toggled off */
.emc--show-subtotal- .emc-button-text,
.emc--show-subtotal-no .emc-button-text {
    display: none;
}

/* --- Items Indicator / Badge --- */
.emc-button-icon-qty {
    display: none;
}

/* Bubble badge */
.emc--items-indicator-bubble .emc-button-icon-qty {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--emc-badge-text-color);
    background: var(--emc-badge-bg);
    border-radius: 50%;
    box-sizing: border-box;
}

/* Plain badge */
.emc--items-indicator-plain .emc-button-icon-qty {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--emc-badge-text-color);
}

/* Hide empty indicator */
.emc--empty-indicator-hide .emc-button-icon-qty[data-counter="0"] {
    display: none;
}

/* No indicator */
.emc--items-indicator-none .emc-button-icon-qty {
    display: none;
}


/* =============================================
   Cart Container (shared base)
   ============================================= */
.emc-container {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s;
    z-index: 99999;
}

.emc-container.emc-open {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s;
}

/* --- Overlay (side cart only) --- */
.emc-overlay {
    display: none;
}


/* =============================================
   Side Cart
   ============================================= */
.emc--cart-type-side-cart .emc-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.emc--cart-type-side-cart .emc-overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
}

.emc--cart-type-side-cart .emc-container.emc-open .emc-overlay {
    opacity: 1;
}

.emc--cart-type-side-cart .emc-main {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--emc-side-right);
    left: var(--emc-side-left);
    width: var(--emc-cart-width);
    max-width: 100vw;
    background: var(--emc-cart-bg);
    padding: 20px;
    overflow-y: auto;
    transform: var(--emc-side-transform);
    transition: transform 0.3s ease;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--emc-divider-color);
}

.emc--cart-type-side-cart .emc-container.emc-open .emc-main {
    transform: translateX(0);
}


/* =============================================
   Mini Cart (Dropdown)
   ============================================= */
.emc--cart-type-mini-cart .emc-container {
    position: absolute;
    top: 100%;
    right: 0;
    width: var(--emc-cart-width, 350px);
    max-width: 100vw;
    padding-top: 8px;
}

.emc--cart-type-mini-cart .emc-main {
    background: var(--emc-cart-bg);
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--emc-divider-color);
    border-radius: 4px;
    transform: translateY(-8px);
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

.emc--cart-type-mini-cart .emc-container.emc-open .emc-main {
    transform: translateY(0);
}


/* =============================================
   Close Button
   ============================================= */
.emc-close-button {
    position: relative;
    align-self: flex-end;
    width: var(--emc-close-icon-size);
    height: var(--emc-close-icon-size);
    cursor: pointer;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.emc-close-button::before,
.emc-close-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--emc-close-color);
    transition: background-color 0.2s;
}

.emc-close-button::before {
    transform: rotate(45deg);
}

.emc-close-button::after {
    transform: rotate(-45deg);
}

.emc-close-button:hover::before,
.emc-close-button:hover::after {
    background: #333;
}


/* =============================================
   Cart Content Styling
   (Elementor Pro overrides WC mini-cart template)
   ============================================= */

/* Flex container for reordering: buttons top, products middle, subtotal bottom */
.emc-main .widget_shopping_cart_content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Buttons to top */
.emc-main .elementor-menu-cart__footer-buttons,
.emc-main .woocommerce-mini-cart__buttons {
    order: -1;
}

/* --- Product List --- */
.emc-main .elementor-menu-cart__products,
.emc-main .woocommerce-mini-cart {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Product Card (wcfm-wishlist-tags style) --- */
.emc-main .elementor-menu-cart__product,
.emc-main .woocommerce-mini-cart-item {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin: 0;
    position: relative;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.emc-main .elementor-menu-cart__product:first-child,
.emc-main .woocommerce-mini-cart-item:first-child {
    margin-top: 5px;
}

.emc-main .elementor-menu-cart__product:hover,
.emc-main .woocommerce-mini-cart-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

/* Product thumbnail */
.emc-main .elementor-menu-cart__product-image,
.emc-main .product-thumbnail {
    flex-shrink: 0;
    width: 72px;
    overflow: hidden;
    align-self: stretch;
}

.emc-main .elementor-menu-cart__product-image a,
.emc-main .product-thumbnail a {
    display: block;
    height: 100%;
}

.emc-main .elementor-menu-cart__product-image img,
.emc-main .product-thumbnail img,
.emc-main .woocommerce-mini-cart-item img {
    width: auto;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

/* Product name */
.emc-main .elementor-menu-cart__product-name,
.emc-main .product-name {
    flex: 1;
    padding: 8px 28px 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.emc-main .elementor-menu-cart__product-name a,
.emc-main .product-name a,
.emc-main .woocommerce-mini-cart-item a:not(.remove):not(.remove_from_cart_button):not(.elementor_remove_from_cart_button) {
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85em;
    color: #333;
    display: block;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emc-main .elementor-menu-cart__product-name a:hover,
.emc-main .product-name a:hover {
    color: #007cba;
}

/* Variation data (store info etc.) */
.emc-main .variation {
    font-size: 0.75em;
    color: #888;
    margin: 2px 0 0;
}

.emc-main .variation dt,
.emc-main .variation dd {
    display: inline;
    margin: 0;
    padding: 0;
}

.emc-main .variation dd {
    margin-right: 6px;
}

.emc-main .variation dd p {
    display: inline;
    margin: 0;
}

.emc-main .variation a {
    font-weight: 400 !important;
    font-size: 1em !important;
    color: #888 !important;
}

.emc-main .variation a:hover {
    color: #007cba !important;
}

/* Price & quantity */
.emc-main .elementor-menu-cart__product-price,
.emc-main .product-price {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    flex-shrink: 0;
    font-size: 0.85em;
    font-weight: 600;
    color: #666;
}

/* Hide +/- buttons from Elementor's quantity input */
.emc-main .elementor-menu-cart__product-price .minus,
.emc-main .elementor-menu-cart__product-price .plus {
    display: none;
}

/* Remove button */
.emc-main .elementor-menu-cart__product-remove,
.emc-main .product-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
}

/* Hide the duplicate WC link, show only Elementor's */
.emc-main .elementor-menu-cart__product-remove .remove_from_cart_button {
    display: none;
}

.emc-main .elementor-menu-cart__product-remove a,
.emc-main .product-remove a,
.emc-main .woocommerce-mini-cart-item .remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 0;
    text-decoration: none;
    color: #999 !important;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    border: 1px solid #dee2e6;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    cursor: pointer;
}

.emc-main .elementor-menu-cart__product-remove a::before,
.emc-main .product-remove a::before,
.emc-main .woocommerce-mini-cart-item .remove::before {
    content: '\00D7';
    font-size: 16px;
    line-height: 1;
}

.emc-main .elementor-menu-cart__product-remove a:hover,
.emc-main .product-remove a:hover,
.emc-main .woocommerce-mini-cart-item .remove:hover {
    color: #dc3545 !important;
    background: #fff;
    border-color: #dc3545;
}

/* Hide remove icon when disabled */
.emc--show-remove- .emc-main .elementor-menu-cart__product-remove,
.emc--show-remove-no .emc-main .elementor-menu-cart__product-remove,
.emc--show-remove- .emc-main .product-remove,
.emc--show-remove-no .emc-main .product-remove {
    display: none !important;
}

/* --- Subtotal --- */
.emc-main .elementor-menu-cart__subtotal,
.emc-main .woocommerce-mini-cart__total {
    padding: 12px 0;
    border-top: 2px solid var(--emc-divider-color);
    font-weight: 600;
    flex-shrink: 0;
    margin: 0;
}

/* --- Action Buttons --- */
.emc-main .elementor-menu-cart__footer-buttons,
.emc-main .woocommerce-mini-cart__buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--emc-divider-color);
}

.emc-main .elementor-menu-cart__footer-buttons .elementor-button,
.emc-main .woocommerce-mini-cart__buttons a {
    display: block;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--emc-button-radius);
    transition: opacity 0.2s;
    box-sizing: border-box;
}

.emc-main .elementor-menu-cart__footer-buttons .elementor-button:hover,
.emc-main .woocommerce-mini-cart__buttons a:hover {
    opacity: 0.85;
}

/* View Cart button */
.emc-main .elementor-button--view-cart,
.emc-main .woocommerce-mini-cart__buttons .wc-forward:not(.checkout) {
    color: var(--emc-view-cart-color);
    background: var(--emc-view-cart-bg);
}

/* Checkout button */
.emc-main .elementor-button--checkout,
.emc-main .woocommerce-mini-cart__buttons .checkout {
    color: var(--emc-checkout-color);
    background: var(--emc-checkout-bg);
}

/* Empty message */
.emc-main .woocommerce-mini-cart__empty-message {
    color: var(--emc-empty-msg-color);
    text-align: var(--emc-empty-msg-align);
    padding: 20px 0;
    margin: 0;
}

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 767px) {
    .emc--cart-type-side-cart .emc-main {
        width: 100vw;
        max-width: 100vw;
    }

    .emc--cart-type-mini-cart .emc-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        padding-top: 0;
    }

    .emc--cart-type-mini-cart .emc-main {
        height: 100%;
        border-radius: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
}


/* =============================================
   Cart Page: Stripe/PayPal/Amazon Pay はみ出し防止
   ============================================= */
.wc-proceed-to-checkout {
    overflow: hidden;
}

.wc-proceed-to-checkout #wc-stripe-express-checkout-element {
    max-width: 100%;
    overflow: hidden;
}

.wc-proceed-to-checkout #wc-stripe-express-checkout-element .StripeElement {
    max-width: 100%;
    overflow: hidden;
}

.wc-proceed-to-checkout .ppc-button-wrapper {
    max-width: 100%;
    overflow: hidden;
}

.wc-proceed-to-checkout #pay_with_amazon {
    max-width: 100%;
    overflow: hidden;
}


/* =============================================
   Elementor Editor Preview
   ============================================= */
.elementor-editor-active .emc-container {
    /* Let editor preview function normally */
}