/**
 * Frontend CSS for Woo Fields - Styled to match product page design
 */

/* PDF Section Container */
.woo-fields-pdfs-wrapper {
    margin: 2em 0;
    padding: 0;
    clear: both;
}

.woo-fields-pdfs-wrapper h3 {
    font-size: 1.5em;
    font-weight: 500;
    color: #82817c;
    margin-bottom: 1em;
}

/* Accordion Container */
.woo-fields-accordion {
    margin: 0;
    padding: 0;
    border: none;
}

/* Accordion Items */
.woo-fields-accordion-item {
    border: 1px solid #e6e6e6;
    margin-bottom: 0.5em;
    border-radius: 3px;
    overflow: hidden;
}

/* Accordion Headers */
.woo-fields-accordion-header {
    margin: 0;
    padding: 0;
}

.woo-fields-accordion-button {
    display: flex;
    width: 100%;
    padding: 15px 20px;
    text-align: left;
    background-color: #f9f9f9;
    color: #444;
    font-weight: 500;
    font-size: 16px;
    border: none;
    cursor: pointer;
    position: relative;
    justify-content: space-between;
    align-items: center;
    outline: none;
    transition: background-color 0.2s ease;
}

.woo-fields-accordion-button:hover {
    background-color: #f5f5f5;
}

.woo-fields-accordion-button::after {
    content: "+";
    font-size: 20px;
    font-weight: 400;
    color: #777;
}

.woo-fields-accordion-item.active .woo-fields-accordion-button {
    background-color: #f5f5f5;
}

.woo-fields-accordion-item.active .woo-fields-accordion-button::after {
    content: "−";
}

/* Accordion Content */
.woo-fields-accordion-content {
    display: none;
    padding: 15px 20px;
    background-color: #fff;
    border-top: 1px solid #e6e6e6;
}

/* PDF Links */
.woo-fields-pdf-link {
    display: inline-block;
    padding: 10px 15px;
    background-color: #f3f3f3;
    color: #444;
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid #ddd;
    font-size: 14px;
    transition: all 0.2s ease;
}

.woo-fields-pdf-link:hover {
    background-color: #e9e9e9;
    color: #000;
    text-decoration: none;
}

.woo-fields-pdf-link:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23444" viewBox="0 0 16 16"><path d="M5.523 12.424c.14-.082.293-.162.459-.238a7.878 7.878 0 0 1-.45.606c-.28.337-.498.516-.635.572a.266.266 0 0 1-.035.012.282.282 0 0 1-.026-.044c-.056-.11-.054-.216.04-.36.106-.165.319-.354.647-.548zm2.455-1.647c-.119.025-.237.05-.356.078a21.148 21.148 0 0 0 .5-1.05 12.045 12.045 0 0 0 .51.858c-.217.032-.436.07-.654.114zm2.525.939a3.881 3.881 0 0 1-.435-.41c.228.005.434.022.612.054.317.057.466.147.518.209a.095.095 0 0 1 .026.064.436.436 0 0 1-.06.2.307.307 0 0 1-.094.124.107.107 0 0 1-.069.015c-.09-.003-.258-.066-.498-.256zM8.278 6.97c-.04.244-.108.524-.2.829a4.86 4.86 0 0 1-.089-.346c-.076-.353-.087-.63-.046-.822.038-.177.11-.248.196-.283a.517.517 0 0 1 .145-.04c.013.03.028.092.032.198.005.122-.007.277-.038.465z"/><path fill-rule="evenodd" d="M4 0h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4z"/><path d="M4.165 10.958c.33-.314.06-.604.228-.856.243-.363.674-.534 1.28-.534.58 0 1.022.17 1.274.5.25.334.336.73.456 1.244l.123.534c.107.455.2.773.3.948.95.172.23.22.413.22.167 0 .333-.043.592-.122.443-.122.73-.244.996-.368a3.47 3.47 0 0 0 .66-.312c.068-.04.136-.082.206-.127.232-.149.52-.33.872-.424.353-.094.851-.094 1.214.14.363.235.484.537.484.82 0 .362-.21.82-.62 1.016a1.2 1.2 0 0 1-.532.126 1.17 1.17 0 0 1-.485-.102 1.384 1.384 0 0 1-.396-.249c-.17-.149-.3-.35-.405-.622-.082-.215-.193-.458-.435-.68a.87.87 0 0 0-.437-.168c-.17-.016-.397.026-.644.12-.44.17-.853.34-1.207.494a5.735 5.735 0 0 1-1.14.302c-.305.05-.652.07-.964.07-.369 0-.704-.04-.994-.12a2.142 2.142 0 0 1-.697-.318 1.495 1.495 0 0 1-.464-.487c-.124-.21-.186-.453-.186-.693a.478.478 0 0 1 .355-.493c.072-.037.157-.055.252-.055.164 0 .344.052.557.19z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
    vertical-align: middle;
}

/* Section Title - "Product Documents" */
.woo-fields-pdfs-wrapper > h3 {
    font-size: 24px;
    color: #555;
    margin: 30px 0 15px;
    font-weight: 400;
}

/* Main product docs title - "Product Documents" */
.product-documents-title {
    font-size: 24px;
    color: #555;
    margin: 30px 0 15px;
    font-weight: 400;
}

/* No PDFs message */
.woo-fields-no-pdfs {
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    color: #777;
    text-align: center;
    font-style: italic;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .woo-fields-accordion-button {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .woo-fields-accordion-content {
        padding: 12px 15px;
    }
    
    .woo-fields-pdf-link {
        display: block;
        text-align: center;
    }
}