/* ====================== Pure Leisure Invoice - Style ====================== */

#pli_form_root {
    max-width: 1100px !important;
    margin: 40px auto !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 30px rgba(31, 90, 90, 0.15) !important;
    padding: 35px !important;
    font-family: 'Poppins', sans-serif !important;
    color: #1F3A5F !important;
}

#pli_form_root h2 {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #1F5A5A !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 25px !important;
}

#pli_form_root h3,
#pli_form_root h4 {
    font-weight: 600 !important;
    color: #1F5A5A !important;
}

.pli-flex {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.pli-col {
    flex: 1 !important;
    min-width: 250px !important;
    display: flex !important;
    flex-direction: column !important;
}

.pli-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1F3A5F !important;
    margin-bottom: 6px !important;
}

.pli-input,
.pli-textarea,
select.pli-input {
    background: #f9fbfc !important;
    border: 1px solid #cddbe1 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    color: #1F3A5F !important;
}

.pli-input:focus,
.pli-textarea:focus,
select.pli-input:focus {
    border-color: #1F5A5A !important;
    box-shadow: 0 0 0 3px rgba(31, 90, 90, 0.15) !important;
    background: #ffffff !important;
}

.pli-textarea {
    width: 100% !important;
    min-height: 120px !important;
    resize: vertical !important;
}

.pli-btn {
    background: linear-gradient(135deg, #1F5A5A, #2A7A75) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.pli-btn:hover {
    background: linear-gradient(135deg, #D1A74E, #E8C97A) !important;
    color: #1F3A5F !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(209, 167, 78, 0.3) !important;
}

.pli-btn.ghost {
    background: transparent !important;
    color: #1F5A5A !important;
    border: 1px solid #1F5A5A !important;
}

.pli-print-btn {
    background-color: #1F5A5A !important;
}

.pli-print-btn:hover {
    background-color: #2A7A75 !important;
}

input[type="checkbox"] {
    accent-color: #1F5A5A !important;
}

/* Flatpickr */
.flatpickr-months .flatpickr-month {
    background: #1F5A5A !important;
}

.flatpickr-day.selected {
    background: #1F5A5A !important;
}


/* Print Button */
.pli-print-btn {
    position: fixed !important;
    top: 15px !important;
    right: 15px !important;
    background-color: #1F5A5A !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 18px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;
}

.pli-print-btn:hover {
    background-color: #2A7A75 !important;
}

/* Responsive */
@media (max-width: 768px) {
    #pli_form_root {
        padding: 25px !important;
        margin: 20px 10px !important;
    }
    .pli-flex {
        flex-direction: column !important;
    }
    .pli-col {
        width: 100% !important;
    }
    .pli-btn {
        width: 100% !important;
    }
    .pli-print-btn {
        top: 10px !important;
        right: 10px !important;
        padding: 8px 14px !important;
        font-size: 14px !important;
    }
}