/* Voxel Gmail Offers Frontend Styles */

.vgo-container {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.vgo-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.vgo-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.vgo-container h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.4em;
    color: #333;
}

.vgo-button {
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    height: auto;
    margin: 5px 5px 5px 0;
    padding: 10px 20px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--vgo-radius);
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.vgo-button-primary {
    background: var(--vgo-primary-light);
    border-color: var(--vgo-primary-light);
    color: #fff;
}

.vgo-button-primary:hover,
.vgo-button-primary:focus {
    background: #005a87;
    border-color: #005a87;
    color: #fff;
}

.vgo-button-secondary {
    background: #f0f0f1;
    border-color: #dcdcde;
    color: #50575e;
}

.vgo-button-secondary:hover,
.vgo-button-secondary:focus {
    background: #e6e6e7;
    border-color: #dcdcde;
    color: #3c434a;
}

.vgo-button-danger {
    background: #d63638;
    border-color: #d63638;
    color: #fff;
}

.vgo-button-danger:hover,
.vgo-button-danger:focus {
    background: #b02a2c;
    border-color: #b02a2c;
    color: #fff;
}

/* Disconnect Gmail Link - Subtle styling */
.vgo-disconnect-link {
    color: #d63638;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px dotted transparent;
    transition: all 0.3s ease;
}

.vgo-disconnect-link:hover {
    color: #b02a2c;
    border-bottom-color: #b02a2c;
    text-decoration: none;
}

.vgo-form-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.vgo-form-table th,
.vgo-form-table td {
    padding: 12px 0;
    vertical-align: top;
    text-align: left;
}

.vgo-form-table th {
    width: 180px;
    font-weight: 600;
    color: #444;
}

.vgo-form-table input[type="text"],
.vgo-form-table input[type="email"],
.vgo-form-table input[type="password"],
.vgo-form-table select {
    width: 100%;
    max-width: 400px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: var(--vgo-radius);
    box-sizing: border-box;
}

.vgo-form-table input[type="file"] {
    padding: 5px 0;
}

.vgo-notice {
    border-left: 4px solid #00a32a; /* Success color */
    padding: 10px 15px;
    margin-bottom: 15px;
    background-color: #f0fff4;
}

.vgo-notice-error {
    border-left-color: #d63638; /* Error color */
    background-color: #fff5f5;
}

.vgo-notice-warning {
    border-left-color: #ffb900; /* Warning color */
    background-color: #fffaf0;
}

.vgo-email-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vgo-email-item {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #fff;
}

.vgo-email-item strong {
    display: block;
    margin-bottom: 5px;
    color: #333;
}

.vgo-email-item p {
    margin: 0 0 10px 0;
    font-size: 0.95em;
    color: #555;
}

.vgo-product-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.vgo-product-item {
    display: inline-block;
    background-color: #eef7ff;
    color: #005a87;
    padding: 5px 10px;
    border-radius: 3px;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 0.9em;
}

.vgo-product-item.matched {
    background-color: #e4f7e5;
    color: #1e7e34;
}

.vgo-product-item.not-found {
    background-color: #fdeaea;
    color: #b02a2c;
}

.vgo-product-list-manage ul {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}

.vgo-product-list-manage li {
    margin-bottom: 5px;
}

.vgo-product-list-manage label[for="vgo_product_csv"] {
    white-space: nowrap;
    margin-right: 10px; /* Space before the button */
    -webkit-appearance: none; /* Remove default Safari styling */
    appearance: none; /* Standard property */
}

.vgo-product-list-manage label[for="vgo_product_csv"]:hover {
    cursor: pointer;
}

.vgo-label {
    display: inline-block;
    background-color: #eee;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.85em;
    margin-left: 5px;
}

.vgo-product-list-editable li {
    display: flex; /* Use flexbox to align item and button */
    justify-content: space-between; /* Push button to the right */
    align-items: center; /* Vertically align */
    padding: 5px 0;
    border-bottom: 1px solid #eee; /* Separator */
}

.vgo-product-list-editable li:last-child {
    border-bottom: none; /* No border on the last item */
}

.vgo-product-list-editable .vgo-delete-form {
    display: inline; /* Keep form from taking block space */
    margin-left: 10px; /* Space between name and button */
}

.vgo-button-delete {
    background: #f8d7da; /* Light red background */
    color: #721c24; /* Dark red text */
    border: 1px solid #f5c6cb;
    padding: 2px 6px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 3px;
}

.vgo-button-delete:hover {
    background: #f5c6cb;
    color: #721c24;
}

/* Recent Email List Styles */
ul.vgo-email-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.vgo-email-list {
    margin-top: 15px;
}

/* Google Sign-In Button Styles */
#vgo-google-signin-container {
    margin: 15px 0;
    padding: 10px 0;
}

#vgo-google-signin-container .g_id_signin {
    margin-bottom: 10px;
}

/* Ensure Google button doesn't conflict with our styles */
#vgo-google-signin-container iframe {
    max-width: 100%;
}

/* Loading state styling */
#vgo-google-signin-container p {
    margin: 10px 0;
    padding: 10px;
    background-color: #f0f8ff;
    border: 1px solid #b3d9ff;
    border-radius: var(--vgo-radius);
    color: #0066cc;
}

/* Fallback button styling for noscript */
noscript .vgo-button {
    margin-top: 10px;
}


/* Frontend connect UI styles (moved from inline <style> in shortcode) */
#vgo-google-signin-container {
    margin: 20px 0;
    text-align: left;
}

.vgo-google-oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    background: #fff;
    color: #3c4043;
    font-family: 'Google Sans', Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 200px;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
}
.vgo-google-oauth-btn:hover {
    background: #f8f9fa;
    border-color: #dadce0;
    box-shadow: 0 1px 3px 0 rgba(60,64,67,.30), 0 4px 8px 3px rgba(60,64,67,.15);
    color: #3c4043;
    text-decoration: none;
}
.vgo-google-oauth-btn:active {
    background: #f1f3f4;
    border-color: #dadce0;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
}
.vgo-google-oauth-btn svg { flex-shrink: 0; }

.vgo-connection-actions { margin-top: 15px; display: flex; flex-wrap: wrap; align-items: center; }

.vgo-settings-status {
    margin-top: 20px;
    padding: 15px;
    background: #f0f0f0;
    border-radius: 4px;
    border-left: 4px solid #007cba;
}
.vgo-settings-status p { margin: 0 0 8px 0; font-weight: 500; }
#vgo-settings-display { color: #666; font-size: 0.9em; }

/* Modal */
.vgo-modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index:9999; display:flex; align-items:center; justify-content:center; }
.vgo-modal-content { background:#fff; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,0.3); max-width:600px; width:90%; max-height:80vh; overflow:hidden; display:flex; flex-direction:column; }
.vgo-modal-header { padding:20px; border-bottom:1px solid #ddd; display:flex; justify-content:space-between; align-items:center; }
.vgo-modal-header h3 { margin:0; color:#333; }
.vgo-modal-close { background:none; border:none; font-size:24px; cursor:pointer; color:#666; padding:0; width:30px; height:30px; display:flex; align-items:center; justify-content:center; }
.vgo-modal-close:hover { color:#333; }
.vgo-modal-body { padding:20px; flex:1; overflow-y:auto; }
.vgo-modal-description { margin-bottom:20px; color:#666; font-style:italic; }
.vgo-modal-footer { padding:20px; border-top:1px solid #ddd; display:flex; justify-content:flex-end; gap:10px; }

/* Settings blocks */
.vgo-drafts-setting { background:#f8f9fa; border:1px solid #dee2e6; border-radius:6px; padding:15px; margin-bottom:20px; }
.vgo-setting-label { display:flex; align-items:center; margin-bottom:8px; cursor:pointer; }
.vgo-setting-label input[type="checkbox"] { margin-right:10px; transform: scale(1.2); }
.vgo-setting-description { margin:0; color:#6c757d; font-size:0.9em; line-height:1.4; }

/* Notifications */
.vgo-notifications-section { border-top:1px solid #dee2e6; padding-top:20px; margin-bottom:20px; }
.vgo-notifications-section h4 { margin:0 0 10px 0; color:#495057; }
.vgo-notification-settings { background:#f8f9fa; border:1px solid #dee2e6; border-radius:6px; padding:15px; }
.vgo-notification-group { margin-bottom:20px; }
.vgo-notification-group h5 { margin:0 0 10px 0; color:#495057; font-size:14px; font-weight:600; }
.vgo-notification-group .vgo-setting-label { margin-bottom:8px; }
.vgo-notification-group .vgo-setting-description { color:#6c757d; font-size:13px; }
.vgo-notifications-disabled { background-color:#fff2f2; border-color:#d63638; }

/* Labels */
.vgo-labels-section { border-top:1px solid #dee2e6; padding-top:20px; }
.vgo-labels-section h4 { margin:0 0 10px 0; color:#495057; }
.vgo-section-description { margin:0 0 15px 0; color:#6c757d; font-size:0.9em; }
.vgo-labels-list { max-height:300px; overflow-y:auto; border:1px solid #ddd; border-radius:4px; padding:15px; }
.vgo-label-item { margin-bottom:10px; padding:8px; border-radius:4px; transition: background-color 0.2s; }
.vgo-label-item:hover { background-color:#f8f9fa; }
.vgo-label-item label { margin:0; cursor:pointer; display:flex; align-items:center; }
.vgo-label-item input[type="checkbox"] { margin-right:8px; }

/* Attachment modes */
.vgo-attachment-setting { margin:20px 0; padding:15px 0; border-top:1px solid #dee2e6; }
.vgo-attachment-setting h4 { margin:0 0 15px 0; color:#495057; font-size:14px; font-weight:600; }
.vgo-attachment-modes { display:flex; flex-direction:column; gap:12px; }
.vgo-attachment-mode-option { display:flex; align-items:flex-start; padding:12px; border:2px solid #dee2e6; border-radius:6px; cursor:pointer; transition: all 0.2s ease; background:#fff; }
.vgo-attachment-mode-option:hover { border-color:#adb5bd; background:#f8f9fa; }
.vgo-attachment-mode-option input[type="radio"] { margin:2px 12px 0 0; flex-shrink:0; }
.vgo-attachment-mode-option input[type="radio"]:checked { accent-color:#0d6efd; }
.vgo-attachment-mode-option:has(input[type="radio"]:checked) { border-color:#0d6efd; background:#e7f1ff; }
.vgo-attachment-mode-content { flex:1; }
.vgo-attachment-mode-content strong { display:block; margin-bottom:4px; color:#212529; font-size:14px; font-weight:600; }
.vgo-attachment-mode-content p { margin:0; color:#6c757d; font-size:13px; line-height:1.4; }

/* Misc */
.vgo-loading { text-align:center; padding:20px; color:#666; }