/* Product Offers Plugin Styles v1.5 - Responsive & Professional */

:root {
    --po-primary-color: #4f46e5; /* Indigo-600 */
    --po-primary-hover-color: #4338ca; /* Indigo-700 */
    --po-border-color: #e5e7eb; /* Gray-200 */
    --po-text-dark: #1f2937; /* Gray-800 */
    --po-text-medium: #6b7280; /* Gray-500 */
    --po-text-light: #9ca3af; /* Gray-400 */
    --po-bg-light: #f9fafb; /* Gray-50 */
    --po-winner-bg: #ecfdf5; /* Green-50 */
    --po-winner-border: #10b981; /* Green-500 */
}

.po-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin-bottom: 2rem;
}

.po-module {
    border: 1px solid var(--po-border-color);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    background: #fff;
    overflow: hidden;
}

.po-module-title {
    font-size: 1.25rem;
    font-weight: 600;
    padding: 1rem 1.5rem;
    margin: 0;
    border-bottom: 1px solid var(--po-border-color);
    color: var(--po-text-dark);
}

/* --- Price Table Styles --- */
.po-table { width: 100%; border-collapse: collapse; }
.po-table tbody tr { transition: background-color 0.2s ease-in-out; }
.po-table tbody tr:hover { background-color: var(--po-bg-light); }
.po-table td { padding: 1rem 1.5rem; vertical-align: middle; border: none; border-top: 1px solid var(--po-border-color); }
.po-table tr:first-child td { border-top: none; }
.po-winner { background-color: var(--po-winner-bg); border-left: 4px solid var(--po-winner-border); }
.po-winner:hover { background-color: #dcfce7; }
.po-merchant-cell a { display: flex; align-items: center; text-decoration: none; font-weight: 600; color: var(--po-text-dark); }
.po-merchant-logo { height: 24px; width: auto; margin-right: 0.75rem; object-fit: contain; }
.po-price-cell a { font-size: 1.25rem; font-weight: 700; color: var(--po-text-dark); text-decoration: none; }
.po-winner .po-price-cell a { color: var(--po-winner-border); }
.po-button-cell { width: 150px; text-align: right; padding-right: 1.5rem; }
.po-button { display: block; width: 100%; background-color: var(--po-primary-color); color: #fff !important; font-weight: 600; text-decoration: none; padding: 0.75rem 1rem; border-radius: 0.375rem; transition: background-color 0.2s ease-in-out; border: none; cursor: pointer; text-align: center; white-space: nowrap; }
.po-button:hover { background-color: var(--po-primary-hover-color); }
.po-winner .po-button { background-color: var(--po-winner-border); }
.po-winner .po-button:hover { background-color: #059669; }

/* --- Price History & Stats Styles (V1.5) --- */
.po-chart-container { position: relative; height: 250px; padding: 1.5rem; }
.po-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 1rem; border-top: 1px solid var(--po-border-color); background-color: var(--po-bg-light); gap: 1rem; }
.po-stat-item { padding: 0.5rem; text-align: center; }
.po-stat-title { display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 500; color: var(--po-text-medium); margin-bottom: 0.25rem; text-transform: uppercase; }
.po-stat-title svg { width: 14px; height: 14px; margin-right: 0.375rem; color: var(--po-text-medium); }
.po-stat-price { font-size: 1.25rem; font-weight: 700; color: var(--po-text-dark); line-height: 1.2; }
.po-stat-price-current { color: var(--po-winner-border); }
.po-stat-source { font-size: 0.8rem; font-weight: 500; color: var(--po-text-medium); }
.po-stat-date { font-size: 0.75rem; color: var(--po-text-light); }

/* --- Responsive Styles (V1.5) --- */
@media (max-width: 1024px) {
    .po-stats-grid { grid-template-columns: 1fr; }
    .po-stat-item { text-align: left; padding: 1rem 0; }
    .po-stat-item:not(:last-child) { border-bottom: 1px solid var(--po-border-color); }
    .po-stat-title { justify-content: flex-start; }
}

@media (max-width: 768px) {
    .po-button-cell { width: auto; }
    .po-button { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
    .po-price-cell a { font-size: 1.1rem; }
    .po-table td { padding: 0.75rem; }
}

/* --- Price Alert Form Styles (V1.6) --- */
.po-alert-body { padding: 1.5rem; }
.po-alert-subtitle { font-size: 0.95rem; color: var(--po-text-medium); margin-top: 0; margin-bottom: 1.5rem; }
.po-alert-inputs { display: flex; flex-wrap: wrap; gap: 1rem; }
.po-alert-input {
    border: 1px solid var(--po-border-color);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    flex: 1; /* Make inputs grow */
}
.po-alert-price-group { display: flex; align-items: center; border: 1px solid var(--po-border-color); border-radius: 0.375rem; padding-left: 1rem; flex: 1; }
.po-alert-price-group span { font-size: 1rem; color: var(--po-text-medium); }
.po-alert-price-input { border: none; padding-left: 0.5rem; }
.po-alert-input:focus, .po-alert-price-input:focus { outline: 2px solid var(--po-primary-color); outline-offset: 2px; }
.po-alert-button { flex-shrink: 0; /* Prevent button from shrinking */ }
.po-alert-messages { margin-top: 1rem; font-weight: 500; }
.po-alert-loading { color: var(--po-text-medium); }
.po-alert-success { color: var(--po-winner-border); }
.po-alert-error { color: #ef4444; /* Red-500 */ }

/* Responsive */
@media (max-width: 768px) {
    .po-alert-inputs { flex-direction: column; }
}

/* --- Push Notification Button Styles (V2.3) --- */
.po-push-button {
    width: 100%;
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f97316; /* Orange-500 */
}

.po-push-button:hover {
    background-color: #ea580c; /* Orange-600 */
}

.po-push-button svg {
    margin-right: 0.5rem;
}

.po-alert-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.5rem 0;
    color: var(--po-text-light);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}

.po-alert-separator::before,
.po-alert-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--po-border-color);
}

.po-alert-separator:not(:empty)::before {
    margin-right: .5em;
}

.po-alert-separator:not(:empty)::after {
    margin-left: .5em;
}