/* Styles for Easy Invoice Frontend - Panel and General */

html, body {
    /* height: 100%; */ /* REMOVED: Allow natural height */
    margin: 0;
    padding: 0;
    /* overflow: hidden; */ /* REMOVED: Allow body scroll by default */
    overflow-x: hidden; /* Prevent horizontal scrollbars on body */
    background-color: #f8f9fc; 
}

/* New class to be added to body when panel is active */
body.body-panel-active {
    overflow: hidden; /* Hide main browser scrollbar */
}

.easy-invoice-app { 
    /* height: 100%; */ /* REMOVED: Default height */
    /* display: flex; */ /* REMOVED: Default display */
    /* flex-direction: column; */ /* REMOVED */
    transition: margin-right 0.3s ease-in-out; /* Add transition here */
}

/* Styles for .easy-invoice-app when panel is active */
body.body-panel-active .easy-invoice-app {
    height: 100vh;
    overflow-y: auto; /* This becomes the main content scrollbar */
    margin-right: 450px; /* Adjust to panel's max-width */
}

/* Slide-Out Payment Panel */
.easy-invoice-payment-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh; /* Use vh for consistency */
    width: 100%; 
    max-width: 450px; 
    background-color: #ffffff;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    transform: translateX(100%); 
    transition: transform 0.3s ease-in-out;
    z-index: 1050; 
    display: flex;
    flex-direction: column;
}

.easy-invoice-payment-panel.is-open {
    transform: translateX(0); 
}

/* Main content area - no longer directly handles scroll or margin shift */
.easy-invoice-main-content-area {
    /* flex-grow: 1; */ /* REMOVED */
    /* min-height: 0; */ /* REMOVED */
    /* overflow-y: auto; */ /* REMOVED */
    /* transition: margin-right 0.3s ease-in-out; */ /* REMOVED - handled by .easy-invoice-app */
}

/* .easy-invoice-main-content-area.panel-is-open { */
    /* margin-right: 450px; */ /* REMOVED - handled by .easy-invoice-app */
/* } */


/* This class might be fully redundant now for overflow control */
body.easy-invoice-panel-open-body-no-scroll {
    /* styles previously here are now handled by body.body-panel-active or default body */
}

/* Panel Sections Styling */
.easy-invoice-panel-header {
    padding: 1.25rem; 
    border-bottom: 1px solid #e5e7eb; 
    display: flex; 
    align-items: center;
    justify-content: space-between;
}

.easy-invoice-panel-body { /* This is the scrollable part OF THE PANEL */
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem; 
}

.easy-invoice-panel-footer {
    padding: 1.25rem; 
    border-top: 1px solid #e5e7eb; 
    background-color: #f9fafb; 
}

/* Payment Method Entry Styling */
.payment-method-entry {
    /* Basic styling, can be enhanced by Tailwind in HTML */
    /* border: 1px solid #d1d5db; 
    border-radius: 0.375rem; 
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; */
}

.payment-method-entry.selected-gateway {
    border-color: #4f46e5; 
    box-shadow: 0 0 0 2px #4f46e5;
}

/* Basic Button styles */
.easy-invoice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem; 
    font-size: 0.875rem; 
    font-weight: 500; 
    border-radius: 0.375rem; 
    border: 1px solid transparent;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    cursor: pointer;
    text-decoration: none;
}

.easy-invoice-btn-primary {
    background-color: #4f46e5; 
    color: white;
}
.easy-invoice-btn-primary:hover {
    background-color: #4338ca; 
}

.easy-invoice-btn-secondary {
    background-color: #ffffff;
    color: #374151; 
    border-color: #d1d5db; 
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.easy-invoice-btn-secondary:hover {
    background-color: #f9fafb; 
}

/* Alert Message Styling */
.payment-message .alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.875rem;
}

.payment-message .alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.payment-message .alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.payment-message .alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.payment-message .alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

/* Ensure your Tailwind classes in the HTML take precedence if desired, 
   or integrate Tailwind more directly if setting up from scratch. 
   These are fallback/base styles. */