/**
 * Brand Protector Frontend Styles
 * Minimal, theme-friendly styling for shortcodes
 * Only loaded when "Use Theme Styling" is disabled
 */

/* ============================
   Component Containers
   ============================ */

.bp-wallet-balance,
.bp-brands-list,
.bp-brand-form,
.bp-run-scan,
.bp-scan-runs-table,
.bp-findings-table,
.bp-packs-generator,
.bp-account-panel {
    background: #ffffff;
    padding: 2em;
    border-radius: 8px;
    margin-bottom: 2em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Ensure text is dark and readable */
.bp-wallet-balance,
.bp-brands-list,
.bp-brand-form,
.bp-run-scan,
.bp-scan-runs-table,
.bp-findings-table,
.bp-packs-generator,
.bp-account-panel,
.bp-wallet-balance *:not(.bp-button):not(.bp-status):not(.bp-error):not(.bp-success),
.bp-brands-list *:not(.bp-button):not(.bp-status):not(.bp-error):not(.bp-success),
.bp-brand-form *:not(.bp-button):not(.bp-status):not(.bp-error):not(.bp-success),
.bp-run-scan *:not(.bp-button):not(.bp-status):not(.bp-error):not(.bp-success),
.bp-scan-runs-table *:not(.bp-button):not(.bp-status):not(.bp-error):not(.bp-success),
.bp-findings-table *:not(.bp-button):not(.bp-status):not(.bp-error):not(.bp-success),
.bp-packs-generator *:not(.bp-button):not(.bp-status):not(.bp-error):not(.bp-success),
.bp-account-panel *:not(.bp-button):not(.bp-status):not(.bp-error):not(.bp-success) {
    color: #333;
}

/* ============================
   Utility Classes
   ============================ */

.bp-loading {
    padding: 1em;
    text-align: center;
    color: #666;
    font-style: italic;
}

.bp-error {
    padding: 1em;
    background: #fee;
    border: 1px solid #fcc;
    border-radius: 4px;
    color: #c33 !important;
    margin-bottom: 1em;
}

.bp-success {
    padding: 1em;
    background: #efe;
    border: 1px solid #cfc;
    border-radius: 4px;
    color: #155724 !important;
    margin-bottom: 1em;
}

.bp-empty {
    color: #999;
    font-style: italic;
}

.bp-warning-box {
    padding: 1em;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-left: 4px solid #ffc107;
    border-radius: 4px;
    color: #856404 !important;
    margin-bottom: 1.5em;
}

.bp-info-box {
    padding: 1em;
    background: #d1ecf1;
    border: 1px solid #0dcaf0;
    border-left: 4px solid #0dcaf0;
    border-radius: 4px;
    color: #055160 !important;
    margin-bottom: 1.5em;
}

.bp-info-box p {
    margin: 0;
}

/* ============================
   Buttons
   ============================ */

.bp-button {
    display: inline-block;
    padding: 0.6em 1.2em;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background 0.2s;
}

.bp-button:hover {
    background: #005a87;
}

.bp-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.bp-button-primary {
    background: #0073aa;
}

.bp-button-secondary {
    background: #666;
}

.bp-button-secondary:hover {
    background: #444;
}

.bp-button-small {
    padding: 0.3em 0.6em;
    font-size: 0.9em;
}

.bp-button-delete {
    padding: 0.2em 0.5em;
    background: #c33;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
}

.bp-button-delete:hover {
    background: #a11;
}

/* ============================
   Forms
   ============================ */

.bp-form {
    max-width: 600px;
}

.bp-form-section {
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 1px solid #ddd;
}

.bp-form-section:last-child {
    border-bottom: none;
}

.bp-form-section h3,
.bp-form-section h4 {
    margin-top: 0;
    margin-bottom: 1em;
}

.bp-form-field {
    margin-bottom: 1em;
}

.bp-form-field label {
    display: block;
    margin-bottom: 0.3em;
    font-weight: 600;
}

.bp-form-field input[type="text"],
.bp-form-field select,
.bp-form-field textarea {
    width: 100%;
    padding: 0.5em;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    background: #fff;
    color: #333;
}

.bp-form-field input[type="text"]:-webkit-autofill,
.bp-form-field input[type="text"]:-webkit-autofill:hover,
.bp-form-field input[type="text"]:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    -webkit-text-fill-color: #333;
    transition: background-color 5000s ease-in-out 0s;
}

.bp-form-field input:focus,
.bp-form-field select:focus,
.bp-form-field textarea:focus {
    outline: none;
    border-color: #0073aa;
}

.bp-form-field input[readonly] {
    background: #f5f5f5;
    color: #666;
    cursor: not-allowed;
}

.bp-field-note {
    margin: 0.5em 0 0 0;
    font-size: 0.9em;
    color: #666;
    font-style: italic;
}

.bp-form-actions {
    margin-top: 1.5em;
}

.bp-form-status {
    margin-left: 1em;
    font-weight: 600;
}

.bp-form-status.bp-error {
    color: #c33;
}

.bp-form-status.bp-success {
    color: #3c3;
}

/* ============================
   Wallet Balance
   ============================ */

.bp-wallet-balance {
    padding: 1em;
    background: #f9f9f9;
    border-radius: 4px;
    margin-bottom: 1em;
}

.bp-balance-amount,
.bp-cost-info,
.bp-afford-status {
    margin-bottom: 0.5em;
}

.bp-label {
    font-weight: 600;
    margin-right: 0.5em;
}

.bp-afford-status {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.bp-can-afford .bp-status-text {
    color: #3c3;
}

.bp-cannot-afford .bp-status-text {
    color: #c33;
}

/* ============================
   Brands List
   ============================ */

.bp-brands-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bp-brand-item {
    margin-bottom: 0.5em;
}

.bp-brand-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8em;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.bp-brand-item a:hover {
    background: #f0f0f0;
}

.bp-brand-item.bp-current a {
    background: #0073aa;
    border-color: #0073aa;
    border-left: 5px solid #005177;
    color: #ffffff;
}

.bp-brand-item.bp-current a .bp-brand-name {
    color: #ffffff;
    font-weight: 700;
}

.bp-brand-selected {
    display: inline-block;
    font-size: 0.85em;
    padding: 0.3em 0.8em;
    border-radius: 3px;
    font-weight: 700;
    background: #ffffff;
    color: #0073aa;
    margin-left: 0.5em;
}

.bp-brand-status {
    font-size: 0.9em;
    padding: 0.2em 0.5em;
    border-radius: 3px;
}

.bp-approval-badge {
    display: inline-block;
    font-size: 0.85em;
    padding: 0.3em 0.6em;
    border-radius: 3px;
    margin: 0 0.3em;
    font-weight: 600;
}

.bp-approval-pending {
    background: #fcf3cf;
    color: #7d6608;
}

.bp-approval-approved {
    background: #d4edda;
    color: #155724;
}

.bp-approval-rejected {
    background: #f8d7da;
    color: #721c24;
}

.bp-approval-info {
    background: #d1ecf1;
    color: #0c5460;
}

/* ============================
   Top-up Modal
   ============================ */
.bp-topup-trigger { display:inline-block; margin:1em 0; }
.bp-topup-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    z-index: 999999; /* raised to ensure overlay sits above other panels */
    align-items: center;
    justify-content: center;
}
.bp-topup-modal-overlay[aria-hidden="false"] {
    /* Ensure flex centering when shown (override inline display:block from jQuery.show()) */
    display: flex !important;
}
.bp-topup-modal {
    width: 90%;
    max-width: 1000px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    display: flex;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2147483647; /* max safe z-index to ensure it's above everything */
}
.bp-topup-modal,
.bp-topup-modal * {
    /* Force readable text colour in modal */
    color: #000 !important;
}
.bp-topup-left { width: 45%; padding: 1.5em; border-right: 1px solid #eee; background:#fafafa; }
.bp-topup-right { width: 55%; padding: 1.5em; }
.bp-payment-method { padding: .8em; border:1px solid #e6e6e6; border-radius:6px; margin-bottom:.8em; background:#fff; display:flex; align-items:center; gap:.8em; }
.bp-payment-method.selected { border-color:#2ecc71; box-shadow: 0 2px 6px rgba(46,204,113,0.08); }
.bp-topup-amounts .bp-amount { border:1px solid #e6e6e6; padding:1em; border-radius:6px; margin-bottom:0.8em; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.bp-topup-amounts .bp-amount.selected { border-color:#0073aa; background:#f0f7fb; }
.bp-topup-modal .bp-modal-close { position:absolute; right:12px; top:12px; background:#fff; border:1px solid #ddd; border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.bp-topup-footer { padding: 1em 1.5em; border-top: 1px solid #eee; text-align:right; background:#fff; }
.bp-topup-modal .bp-topup-legend { font-weight:700; margin-bottom:.5em; }
.bp-topup-custom { display:flex; gap:.5em; align-items:center; }
.bp-topup-price { font-weight:700; font-size:1.1em; color:#333; }

.bp-status-active {
    background: #efe;
    color: #3c3;
}

.bp-status-inactive {
    background: #eee;
    color: #999;
}

.bp-create-brand-link {
    margin-top: 1em;
}

.bp-limit-notice {
    margin: 0.5em 0 0 0;
    padding: 0.75em;
    background: #fcf3cf;
    border-left: 3px solid #f39c12;
    color: #7d6608;
    font-size: 0.9em;
    border-radius: 3px;
}

.bp-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================
   Brand Form - Aliases & Allowlist
   ============================ */

.bp-aliases-list,
.bp-allowlist-items {
    margin-bottom: 1em;
}

.bp-alias-item,
.bp-allowlist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 0.5em;
}

.bp-alias-name,
.bp-allowlist-domain {
    flex: 1;
    font-weight: 600;
}

.bp-allowlist-reason {
    flex: 2;
    color: #666;
    font-size: 0.9em;
    margin-left: 1em;
}

.bp-add-alias,
.bp-add-allowlist {
    display: flex;
    gap: 0.5em;
    margin-top: 1em;
}

.bp-add-alias input,
.bp-add-allowlist input {
    flex: 1;
}

/* ============================
   Run Scan
   ============================ */

.bp-run-scan {
    padding: 1.5em;
    background: #f9f9f9;
    border-radius: 4px;
}

.bp-brand-selector {
    margin: 1.5em 0;
}

.bp-brand-selector label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 600;
}

.bp-brand-selector select {
    width: 100%;
    max-width: 400px;
    padding: 0.6em;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
}

.bp-no-brands-warning {
    padding: 2em;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    text-align: center;
}

.bp-no-brands-warning p {
    margin: 0.5em 0;
}

.bp-no-brands-warning strong {
    font-size: 1.2em;
    color: #856404;
}

.bp-scan-estimate {
    padding: 1em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 1em 0;
}

.bp-estimate-item {
    margin-bottom: 0.5em;
}

.bp-scan-actions {
    margin-top: 1.5em;
}

.bp-button-loader {
    color: #fff;
}

.bp-scan-status {
    margin-top: 1em;
}

/* ============================
   Tables
   ============================ */

.bp-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.bp-table th,
.bp-table td {
    padding: 0.8em;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.bp-table th {
    background: #f5f5f5;
    font-weight: 600;
}

.bp-table tr:hover {
    background: #f9f9f9;
}

.bp-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
}

.bp-table-header h3 {
    margin: 0;
}

.bp-table-filters {
    display: flex;
    gap: 0.5em;
}

.bp-table-filters select {
    padding: 0.5em;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.bp-no-results {
    padding: 2em;
    text-align: center;
    color: #999;
}

/* Status badges */
.bp-status {
    padding: 0.3em 0.6em;
    border-radius: 3px;
    font-size: 0.9em;
    font-weight: 600;
}

.bp-status-pending { background: #fef9e7; color: #f39c12; }
.bp-status-running { background: #e8f5e9; color: #4caf50; }
.bp-status-completed { background: #e3f2fd; color: #2196f3; }
.bp-status-failed { background: #ffebee; color: #f44336; }
.bp-status-cancelled { background: #f5f5f5; color: #999; }
.bp-status-new { background: #fff3e0; color: #ff9800; }
.bp-status-confirmed { background: #fce4ec; color: #e91e63; }
.bp-status-false_positive { background: #f5f5f5; color: #999; }
.bp-status-takedown_requested { background: #e1f5fe; color: #03a9f4; }
.bp-status-google_delisted { background: #f3e5f5; color: #9c27b0; }
.bp-status-confirmed_removed { background: #e8f5e9; color: #4caf50; }

/* ============================
   Bulk Actions
   ============================ */

.bp-bulk-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    background: #f0f8ff;
    border: 1px solid #b3d9ff;
    border-radius: 4px;
    margin-bottom: 1em;
}

.bp-bulk-controls {
    display: flex;
    gap: 0.5em;
}

.bp-bulk-controls select {
    padding: 0.5em;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.bp-selected-count {
    font-weight: 600;
}

/* ============================
   Packs Generator
   ============================ */

.bp-packs-generator {
    padding: 1.5em;
    background: #f9f9f9;
    border-radius: 4px;
}

.bp-pack-config {
    margin-bottom: 2em;
}

.bp-pack-results {
    padding: 1.5em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.bp-pack-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid #ddd;
}

.bp-pack-header h4 {
    margin: 0;
}

.bp-pack-stats {
    display: flex;
    gap: 1em;
}

.bp-pack-urls textarea {
    width: 100%;
    min-height: 300px;
    padding: 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
    resize: vertical;
}

.bp-pack-actions-secondary {
    display: flex;
    gap: 0.5em;
    margin-top: 1em;
}

/* ============================
   Account Panel
   ============================ */

.bp-account-panel {
    padding: 1.5em;
    background: #f9f9f9;
    border-radius: 4px;
}

.bp-account-header {
    margin-bottom: 1.5em;
}

.bp-account-header h3 {
    margin: 0 0 0.5em 0;
}

.bp-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.bp-username {
    font-weight: 600;
    font-size: 1.1em;
}

.bp-user-email {
    color: #666;
    font-size: 0.9em;
}

.bp-account-wallet {
    margin-bottom: 1.5em;
}

.bp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1em;
    margin-bottom: 1.5em;
}

.bp-stat-item {
    text-align: center;
    padding: 1em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.bp-stat-value {
    display: block;
    font-size: 2em;
    font-weight: 600;
    color: #0073aa;
}

.bp-stat-label {
    display: block;
    margin-top: 0.3em;
    color: #666;
    font-size: 0.9em;
}

.bp-account-navigation {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.bp-nav-link {
    display: block;
    padding: 0.8em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.bp-nav-link:hover {
    background: #f0f0f0;
}

/* ============================
   Brand Links Management
   ============================ */

.bp-selected-brand {
    background: #f0f0f1;
    padding: 0.75em 1em;
    border-left: 3px solid #2271b1;
    margin-bottom: 1em;
    font-size: 0.95em;
}

.bp-selected-brand .bp-brand-name {
    font-weight: 600;
    color: #2271b1;
}

.bp-brand-links h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
}

.bp-brand-links .bp-links-description {
    color: #666;
    margin-bottom: 1.5em;
    font-size: 0.95em;
}

.bp-add-link-form {
    margin-bottom: 1.5em;
}

.bp-add-link-form .bp-form-actions {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-top: 0.5em;
}

.bp-add-link-form .bp-form-status {
    margin: 0;
    font-size: 0.9em;
}

.bp-links-list {
    min-height: 40px;
}

.bp-link-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6em 0.8em;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 0.5em;
}

.bp-link-url {
    flex: 1;
    word-break: break-all;
    color: #0073aa;
    font-size: 0.95em;
}

/* ============================
   Responsive
   ============================ */

@media (max-width: 768px) {
    .bp-table-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1em;
    }

    .bp-bulk-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 1em;
    }

    .bp-pack-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1em;
    }

    .bp-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Scan results panel */
.bp-scan-results {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

.bp-scan-results-header {
    margin-bottom: 12px;
    font-size: 1.05em;
}

.bp-scan-result {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.bp-scan-result:last-child {
    border-bottom: 0;
}

.bp-scan-result-title {
    margin-bottom: 4px;
    font-weight: 600;
}

.bp-scan-result-url {
    margin-bottom: 6px;
    word-break: break-all;
}

.bp-scan-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 13px;
    color: #666;
}