/* ═══════════════════════════════════════════════════════════════
   Global South Jobs — Frontend Styles
   ═══════════════════════════════════════════════════════════════ */

.gsj-job-listing,
.gsj-register-form,
.gsj-login-form,
.gsj-submit-job,
.gsj-employer-dashboard,
.gsj-my-account {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Job Cards hover effect */
.gsj-job-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gsj-job-card:hover {
    border-color: #86efac !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Focus styles */
.gsj-register-form input:focus,
.gsj-login-form input:focus,
.gsj-submit-job input:focus,
.gsj-submit-job select:focus,
.gsj-submit-job textarea:focus {
    border-color: #166534;
    box-shadow: 0 0 0 3px rgba(22,101,52,0.1);
    outline: none;
}

/* Button hover */
.gsj-register-form button:hover,
.gsj-login-form button:hover,
.gsj-submit-job button:hover {
    background: #15803d !important;
}

/* Stats bar responsive */
.gsj-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 640px) {
    .gsj-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Job grid responsive */
#gsj-jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
@media (max-width: 640px) {
    #gsj-jobs-grid {
        grid-template-columns: 1fr;
    }
}

/* Form grid responsive */
@media (max-width: 640px) {
    .gsj-submit-job form > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    .gsj-register-form div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Table responsive */
.gsj-employer-dashboard table {
    min-width: 600px;
}

/* Loading skeleton */
@keyframes gsj-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.gsj-loading {
    animation: gsj-pulse 1.5s ease-in-out infinite;
    background: #f3f4f6;
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE JOB PAGE + PAYWALL STYLES
   ═══════════════════════════════════════════════════════════════ */

.gsj-single-job {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Paywall overlay animation */
.gsj-paywall-overlay {
    animation: gsj-fadeIn 0.3s ease;
}
@keyframes gsj-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Paywall blur content */
.gsj-paywall-blur {
    transition: filter 0.3s ease;
}

/* Paywall button hover */
.gsj-paywall-overlay button:hover {
    background: #15803d !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22,101,52,0.3);
}
.gsj-paywall-overlay button {
    transition: all 0.2s ease;
}

/* Apply section */
.gsj-apply-section {
    transition: all 0.2s ease;
}

/* Single job description styling */
.gsj-job-description h1,
.gsj-job-description h2,
.gsj-job-description h3,
.gsj-job-description h4 {
    color: #111827;
    margin: 20px 0 8px;
    font-weight: 700;
}
.gsj-job-description h1 { font-size: 1.375rem; }
.gsj-job-description h2 { font-size: 1.25rem; }
.gsj-job-description h3 { font-size: 1.125rem; }
.gsj-job-description h4 { font-size: 1rem; }
.gsj-job-description p {
    margin: 0 0 12px;
}
.gsj-job-description ul,
.gsj-job-description ol {
    margin: 0 0 12px;
    padding-left: 24px;
}
.gsj-job-description li {
    margin-bottom: 6px;
}

/* Stripe modal overlay */
#gsj-stripe-modal {
    animation: gsj-fadeIn 0.2s ease;
}
#gsj-stripe-modal input:focus {
    border-color: #166534;
    box-shadow: 0 0 0 3px rgba(22,101,52,0.1);
    outline: none;
}
#gsj-stripe-modal button:hover {
    background: #15803d !important;
}

/* Single job responsive */
@media (max-width: 640px) {
    .gsj-single-job > div:first-of-type {
        padding: 20px !important;
    }
    .gsj-single-job h1 {
        font-size: 1.25rem !important;
    }
    .gsj-paywall-overlay {
        padding: 20px !important;
    }
    .gsj-paywall-overlay h3 {
        font-size: 1rem !important;
    }
}

/* Notification toast animation */
@keyframes gsj-slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes gsj-slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}