/**
 * Clean Sidecart Coupon Implementation
 * Fixes height and overflow issues
 */

/* Reset conflicting overflow rules for coupon area */
html body #wcc-sidecart-container .wcc-sidecart-footer {
    overflow-y: visible; /* Changed from auto to allow form to show */
}

html body #wcc-sidecart-container .wcc-sidecart-footer-bottom {
    overflow: visible;
    transition: padding-bottom 0.3s ease;
}

/* Coupon Section - expandable height */
html body #wcc-sidecart-container .wcc-sidecart-coupon-section {
    display: block;
    margin-bottom: 15px;
    min-height: 38px; /* Default collapsed height */
    transition: min-height 0.3s ease;
    overflow: visible !important; /* Critical: allow overflow */
}

/* When form is active, expand section height */
html body #wcc-sidecart-container .wcc-sidecart-coupon-section.expanded {
    min-height: 90px; /* Enough space for form */
}

/* Toggle button */
html body #wcc-sidecart-container .wcc-sidecart-coupon-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    padding: 8px 0;
    transition: color 0.2s;
}

html body #wcc-sidecart-container .wcc-sidecart-coupon-toggle:hover {
    color: #333;
}

html body #wcc-sidecart-container .wcc-sidecart-coupon-icon {
    font-size: 16px;
}

html body #wcc-sidecart-container .wcc-sidecart-coupon-arrow {
    margin-left: auto;
    transition: transform 0.2s;
}

html body #wcc-sidecart-container .wcc-sidecart-coupon-toggle.active .wcc-sidecart-coupon-arrow {
    transform: rotate(180deg);
}

/* Coupon Form - Clean display toggle */
html body #wcc-sidecart-container form#sidecart-coupon-form,
html body #wcc-sidecart-container .wcc-sidecart-coupon-form {
    display: none;
    flex-direction: row; /* Horizontal layout */
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
}

/* Active state - ensure visibility with multiple selectors for specificity */
html body #wcc-sidecart-container form#sidecart-coupon-form.show,
html body #wcc-sidecart-container .wcc-sidecart-coupon-form.show,
html body #wcc-sidecart-container .wcc-sidecart-coupon-section form.show,
html body #wcc-sidecart-container .wcc-sidecart-footer-bottom form#sidecart-coupon-form.show {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

/* Input field */
html body #wcc-sidecart-container .wcc-sidecart-coupon-input {
    flex: 0 0 60%;
    width: 60%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    background: #fff;
    box-sizing: border-box;
}

html body #wcc-sidecart-container .wcc-sidecart-coupon-input:focus {
    outline: none;
    border-color: #0071a1;
}

/* Apply button */
html body #wcc-sidecart-container .wcc-sidecart-coupon-btn {
    flex: 0 0 calc(40% - 8px);
    width: calc(40% - 8px);
    padding: 12px 16px;
    /* Background, color and border-radius removed - controlled by Elementor */
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    box-sizing: border-box;
}

html body #wcc-sidecart-container .wcc-sidecart-coupon-btn:hover:not(:disabled) {
    /* Hover styles removed - controlled by Elementor */
}

html body #wcc-sidecart-container .wcc-sidecart-coupon-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Adjust footer padding when coupon is active */
html body #wcc-sidecart-container .wcc-sidecart-footer-bottom.coupon-active {
    padding-bottom: 35px; /* Extra space when form is shown */
}

/* Container query für Gutschein unter 350px */
@container (max-width: 350px) {
    html body #wcc-sidecart-container .wcc-sidecart-coupon-form,
    html body #wcc-sidecart-container form#sidecart-coupon-form {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    html body #wcc-sidecart-container .wcc-sidecart-coupon-input {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    html body #wcc-sidecart-container .wcc-sidecart-coupon-btn {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}