/*
 * Baron Boutique - Enhanced Measurement Accordion
 * Merged styles to make the measurement section highly visible and user-friendly.
 */

/* Main container for the accordion */
.wcpa_accordion {
    border: none; /* We will control the border on the header itself */
    margin-bottom: 25px; /* Added more space below for better separation */
}

/* Informational "Step 1" label added above the header text */
.wcpa_accordion_header::before {
    content: 'STEP 1: MEASUREMENTS REQUIRED';
    display: block;
    font-weight: bold;
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    text-align: center; /* Center the label for a cleaner look */
}

/* The main clickable header */
.wcpa_accordion_header {
    background-color: #f0f3f5 !important; /* White background to stand out */
    border: 2px dashed #cccccc;           /* Prominent dashed border */
    font-size: 14px;
    font-weight: bold;                    /* Make text bold for importance */
    color: #000000;
    padding: 10px;                        /* Slightly increase padding */
    cursor: pointer;
    position: relative;
    margin: 0;                            /* Keep margin at 0 */
    text-align: center;                   /* Center the "Enter Your Measurements" text */
    transition: all 0.3s ease;            /* Smooth transition for hover effects */
}

/* Hover effect to signal interactivity */
.wcpa_accordion_header:hover {
    border-color: #000000;
    background-color: #f8f8f8 !important;
}

/* The Plus (+) and Minus (-) icon on the right */
.wcpa_accordion_header::after {
    content: '+';
    font-size: 24px;                      /* Make icon slightly larger */
    font-weight: bold;
    color: #000000 !important;            /* Ensure it's black */
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

/* Style for the header when the accordion is open (active) */
.wcpa_accordion_header.active {
    border-style: solid;  /* Change border to solid when open */
    border-color: #000000;
}

/* Change the icon to a minus (-) when the accordion is open */
.wcpa_accordion_header.active::after {
    content: '-';
    transform: translateY(-50%) scaleX(1.5);
}

/* The content area holding the measurement fields */
.wcpa_accordion_content {
    padding: 15px;
    display: none;                        /* Initially hide the content */
    max-height: 450px;                    /* Increased max-height for longer forms */
    overflow-y: auto;                     /* Enable vertical scrolling if content exceeds max-height */
    border: 1px solid #e0e0e0;            /* Add a subtle border around the content */
    border-top: none;                     /* Remove the top border to connect with the header */
}