/* --- Modal Styling (Base) --- */
.rahi-modal-wrapper{
    position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.85); /* Darker backdrop */
    z-index:10000;display:flex;align-items:center;justify-content:center;
    visibility:hidden;opacity:0;transition:all .3s
}
.rahi-modal-wrapper.active{visibility:visible;opacity:1}
.rahi-modal-content{
    background-color:#fff;width:95%;max-width:650px;max-height:95vh; /* Larger max width */
    border-radius:12px;display:flex;flex-direction:column;
    transform:scale(0.95);transition:transform .3s ease-out;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.rahi-modal-wrapper.active .rahi-modal-content{transform:scale(1)}
.rahi-modal-header{padding:15px 20px;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center}
.rahi-modal-header h3{margin:0;font-size:20px;font-weight:700}.rahi-close-btn{border:none;background:none;font-size:28px;cursor:pointer;color:#999}
.rahi-modal-body{padding:20px;overflow-y:auto;flex-grow:1}

/* --- Form Heading and Separator --- */
.rahi-modal-body h4 {
    font-size: 16px;
    font-weight: 700;
    color: #0a8041; /* Primary Color */
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 5px;
    margin: 20px 0 15px 0;
}
.rahi-modal-body h4:first-of-type {
    margin-top: 0;
}
.rahi-modal-body hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 20px 0;
}
.small-text {
    font-size: 13px;
    color: #666;
    margin-top: -10px;
    margin-bottom: 15px;
}


/* --- Form Styling (General) --- */
.rahi-form-group {
    margin-bottom: 15px;
}
.rahi-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 14px;
    color: #333;
}
.rahi-form-group input:not([type="checkbox"]):not([type="radio"]),
.rahi-form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px; /* Slightly more rounded */
    box-sizing: border-box;
    font-size: 15px;
    transition: border-color 0.2s;
}
.rahi-form-group input:focus,
.rahi-form-group textarea:focus {
    border-color: #0a8041;
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 128, 65, 0.1);
}

/* --- Responsive Grid Layout for Form Fields --- */
.rahi-form-row {
    display: grid;
    grid-template-columns: 1fr; /* Default to 1 column on mobile */
    gap: 15px;
}

/* Desktop/Tablet (Min 600px) - 2 Columns */
@media (min-width: 600px) {
    .rahi-form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* --- Submit Button --- */
.rahi-submit-btn {
    width: 100%;
    background-color: #0a8041; 
    color: #fff;
    border: none;
    padding: 14px; /* Larger padding */
    border-radius: 8px;
    font-size: 18px; /* Larger font */
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 15px;
}
.rahi-submit-btn:hover:not([disabled]) {
    background-color: #086b35;
}
.rahi-submit-btn[disabled] {
    opacity: 0.8;
    cursor: wait;
}

/* --- Image Uploader Field (UPDATED GRID FOR PROFESSIONAL LOOK) --- */
.rahi-image-uploader-field {
    /* Grid: Label | File Info & Preview | Button | Remove */
    display: grid;
    /* Desktop Grid: Label (80px) | File Info/Preview (1fr) | Button (auto) | Remove Button (auto) */
    grid-template-columns: 80px 1fr auto auto; 
    gap: 15px; /* Gap increased */
    align-items: center;
    border: 1px solid #ddd; /* Better visible border */
    background-color: #fcfcfc; /* Light background */
    padding: 10px;
    border-radius: 8px; /* Rounded corners */
    margin-bottom: 15px;
}
.rahi-image-uploader-field label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 0;
    grid-column: 1 / 2;
    color: #555;
}

/* Container for Preview and Text */
.rahi-file-info-container {
    grid-column: 2 / 3;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
}

.rahi-image-preview {
    width: 50px; /* Smaller icon size */
    height: 50px;
    border: 1px solid #eee;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 4px;
}
.rahi-image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.rahi-image-preview span {
    font-size: 12px; 
    color: #999;
    text-align: center;
    padding: 2px;
}

/* Hidden Inputs */
.rahi-native-file-input { 
    display: none;
}
.rahi-image-url-field {
    display: none;
}

/* Custom Styled Label (Upload Trigger - Select/Camera button) */
.rahi-upload-trigger {
    grid-column: 3 / 4; 
    padding: 10px 15px; 
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #0a8041;
    color: #fff !important;
    transition: background-color 0.2s;
    height: 40px; 
    position: relative; 
    z-index: 10;
}
.rahi-upload-trigger:hover {
    background-color: #086b35;
}

/* Position of Remove Button */
.rahi-remove-image {
    grid-column: 4 / 5;
    padding: 10px;
    font-size: 12px;
    width: 40px; /* Fixed width for a small square button */
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #f4f4f4;
    color: #a00;
    border: 1px solid #e0e0e0;
}


/* --- Mobile Adjustments (Max 599px) --- */
@media (max-width: 599px) {
    .rahi-image-uploader-field {
        /* Mobile Layout: 2 columns, stacking File Info, Buttons */
        grid-template-columns: 1fr auto; 
        grid-template-rows: auto auto; 
        gap: 10px 15px;
        padding: 15px;
    }
    /* File Label and Info takes the full width */
    .rahi-image-uploader-field label:not(.rahi-upload-trigger) {
        grid-column: 1 / 3; 
        grid-row: 1 / 2;
        margin-bottom: 5px;
    }
    
    .rahi-file-info-container {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    
    /* Buttons side by side */
    .rahi-upload-trigger {
        grid-column: 2 / 3; 
        grid-row: 2 / 3;
        font-size: 13px;
        padding: 8px 10px;
        height: 40px;
    }
    .rahi-remove-image {
        grid-column: 3 / 4; /* New column needed */
        grid-row: 2 / 3;
        font-size: 13px;
        padding: 8px;
        width: 40px;
        height: 40px;
    }
}
/* --- Message Box / Widget Button Styling (No Change) --- */
.rahi-message-box {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
}
.rahi-message-box.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.rahi-message-box.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.rahi-seller-trigger-btn {
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}
.rahi-style-primary {
    background-color: #0a8041;
    color: #fff;
    border: 2px solid #0a8041;
}
.rahi-style-secondary {
    background-color: #fff;
    color: #0a8041;
    border: 2px solid #0a8041;
}
.rahi-style-primary:hover { background-color: #086b35; }
.rahi-style-secondary:hover { background-color: #e9f5e9; }