/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #4A90E2;
    --primary-dark: #357ABD;
    --secondary: #50C878;
    --danger: #E74C3C;
    --warning: #F39C12;
    --dark: #2C3E50;
    --light: #ECF0F1;
    --white: #FFFFFF;
    --gray: #95A5A6;
    --shadow: 0 2px 10px rgba(0,0,0,0.1);
    --radius: 8px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: var(--dark);
    line-height: 1.6;
}

/* Loading Spinner */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Toast Notifications */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--dark);
    color: var(--white);
    padding: 15px 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 9998;
    animation: slideIn 0.3s ease;
}

.toast.success { background: var(--secondary); }
.toast.error { background: var(--danger); }
.toast.warning { background: var(--warning); }

@keyframes slideIn {
    from { transform: translateX(400px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Navigation */
.nav {
    background: var(--white);
    box-shadow: var(--shadow);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary);
}

.nav-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--dark);
}

.nav-menu {
    position: fixed;
    top: 60px;
    right: -100%;
    width: 250px;
    height: calc(100vh - 60px);
    background: var(--white);
    box-shadow: var(--shadow);
    transition: right 0.3s ease;
    list-style: none;
    padding: 20px 0;
}

.nav-menu.active {
    right: 0;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    display: block;
    padding: 15px 20px;
    color: var(--dark);
    text-decoration: none;
    transition: background 0.2s;
}

.nav-menu a:hover {
    background: var(--light);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Pages */
.page {
    display: none;
}

.page.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hero Section */
.hero {
    text-align: center;
    color: var(--white);
    margin-bottom: 30px;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.subtitle {
    font-size: 1.2rem;
    margin-bottom: 15px;
    opacity: 0.9;
}

.description {
    font-size: 1rem;
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto;
}

/* Cards */
.card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}

.card h2, .card h3 {
    margin-bottom: 20px;
    color: var(--dark);
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--dark);
}

.form-group label .required {
    color: #d32f2f;
    font-weight: 700;
}

.form-group input[required],
.form-group textarea[required],
.form-group select[required] {
    /* Mark as required for CSS */
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--light);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
}

.form-group small {
    display: block;
    margin-top: 5px;
    color: var(--gray);
    font-size: 0.875rem;
}

textarea {
    resize: vertical;
    font-family: inherit;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-secondary {
    background: var(--light);
    color: var(--dark);
}

.btn-secondary:hover {
    background: var(--gray);
    color: var(--white);
}

.btn-danger {
    background: var(--danger);
    color: var(--white);
}

.btn-success {
    background: var(--secondary);
    color: var(--white);
}

/* Divider */
.divider {
    text-align: center;
    margin: 20px 0;
    color: var(--gray);
    position: relative;
}

.divider::before,
.divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: var(--light);
}

.divider::before { left: 0; }
.divider::after { right: 0; }

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.stat-card {
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary);
    margin: 10px 0;
}

/* Pricing Grid */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    grid-auto-rows: minmax(400px, 1fr);
}

.pricing-card {
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pricing-card.featured {
    border: 3px solid var(--primary);
}

.price {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary);
    margin: 15px 0;
}

.savings {
    display: block;
    color: var(--secondary);
    font-weight: 600;
    margin-bottom: 15px;
}

.badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--primary);
    color: var(--white);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ECS List */
.ec-item {
    padding: 15px;
    border: 2px solid var(--light);
    border-radius: var(--radius);
    margin-bottom: 15px;
}

.ec-item h4 {
    margin-bottom: 10px;
    color: var(--dark);
}

.ec-item p {
    margin-bottom: 5px;
    color: var(--gray);
}

.ec-item .btn {
    margin-top: 10px;
}

/* Info Text */
.info-text {
    background: var(--light);
    padding: 15px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--dark);
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content {
    background: var(--white);
    padding: 30px;
    border-radius: var(--radius);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.modal .close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: var(--gray);
}

.modal .close:hover {
    color: var(--dark);
}

.modal-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--light);
}

.modal-actions button {
    margin-bottom: 10px;
}

/* User List Styles */
.user-item {
    padding: 15px;
    border: 2px solid var(--light);
    border-radius: var(--radius);
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.user-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

.user-item h4 {
    margin-bottom: 5px;
    color: var(--dark);
}

.user-item p {
    margin: 5px 0;
    color: var(--gray);
    font-size: 0.9rem;
}

.user-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 5px;
}

.badge-active {
    background: var(--secondary);
    color: var(--white);
}

.badge-trial {
    background: var(--warning);
    color: var(--white);
}

.badge-expired {
    background: var(--danger);
    color: var(--white);
}

.badge-blocked {
    background: var(--dark);
    color: var(--white);
}

.badge-ec {
    background: var(--primary);
    color: var(--white);
}

.badge-auto-created {
    background: var(--light);
    color: var(--dark);
}

/* Request Status Badges (for EC access requests) */
.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 5px;
    margin-right: 5px;
}

.badge-approved {
    background: var(--secondary);
    color: var(--white);
}

.badge-pending {
    background: var(--warning);
    color: var(--dark);
}

.badge-declined {
    background: var(--danger);
    color: var(--white);
}

/* Responsive Design */
@media (min-width: 768px) {
    .nav-toggle {
        display: none;
    }

    .nav-menu {
        position: static;
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        box-shadow: none;
        padding: 0;
    }

    .nav-menu li {
        margin-left: 20px;
    }

    .nav-menu a {
        padding: 10px 15px;
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(400px, 1fr);
    }

    .action-buttons {
        flex-direction: row;
    }

    .btn {
        width: auto;
    }
}

@media (min-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(400px, 1fr);
    }

    .hero h1 {
        font-size: 3rem;
    }
}

/* Print Styles */
@media print {
    .nav, .btn, .action-buttons {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   v3 additions: site footer (compliance links), legal pages, plan descriptions
   --------------------------------------------------------------------------- */
.site-footer {
    margin-top: 40px;
    padding: 24px 16px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    text-align: center;
    color: #475569;
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 12px;
}

.footer-links a {
    color: #4A90E2;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-note {
    margin: 0;
    color: #64748b;
    font-size: 0.82rem;
}

.card.legal {
    text-align: left;
    line-height: 1.6;
    max-width: 760px;
    margin: 0 auto;
}

.card.legal h3 {
    margin-top: 20px;
    margin-bottom: 6px;
}

.card.legal p {
    margin: 0 0 12px 0;
    color: #334155;
}

.plan-desc {
    color: #64748b;
    font-size: 0.85rem;
    margin: 8px 0 16px 0;
}

/* Activity Log Styles */
.date-picker-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.activityTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: var(--white);
}

.activityTable thead {
    background-color: #f5f5f5;
    border-bottom: 2px solid var(--light);
}

.activityTable thead th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: var(--dark);
}

.activityTable tbody tr {
    border-bottom: 1px solid var(--light);
    transition: background-color 0.2s;
}

.activityTable tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.activityTable tbody tr:hover {
    background-color: #f0f0f0;
}

.activityTable td {
    padding: 12px;
    color: var(--dark);
}

.badge-info {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #e3f2fd;
    color: #1976d2;
    font-size: 0.85rem;
    font-weight: 600;
}

.badge-success {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #e8f5e9;
    color: #388e3c;
    font-size: 0.85rem;
    font-weight: 600;
}

.badge-warning {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #fff3e0;
    color: #f57c00;
    font-size: 0.85rem;
    font-weight: 600;
}

.badge-error {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #ffebee;
    color: #d32f2f;
    font-size: 0.85rem;
    font-weight: 600;
}

.usersTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 0.95rem;
}

.usersTable thead {
    background-color: #f5f5f5;
    border-bottom: 2px solid var(--light);
}

.usersTable thead th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: var(--dark);
}

.usersTable tbody tr {
    border-bottom: 1px solid var(--light);
    transition: background-color 0.2s;
    cursor: pointer;
}

.usersTable tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.usersTable tbody tr:hover {
    background-color: #e8f4f8;
}

.usersTable td {
    padding: 12px;
    color: var(--dark);
}

.usersTable .btn-sm {
    padding: 4px 8px;
    font-size: 0.85rem;
}

/* Responsive Design for Activity Log */
@media (max-width: 600px) {
    .date-picker-group {
        grid-template-columns: 1fr;
    }

    .activityTable {
        font-size: 0.9rem;
    }

    .activityTable thead th,
    .activityTable td {
        padding: 8px;
    }

    .activityTable {
        display: block;
        overflow-x: auto;
    }
}


/* Utility Classes */
.hidden {
    display: none !important;
}

.btn-warning {
    background: var(--warning);
    color: var(--white);
}

.btn-warning:hover {
    background: #D68910;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-success {
    background: var(--secondary);
    color: var(--white);
}

.btn-success:hover {
    background: #45B870;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-danger:hover {
    background: #C0392B;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* Modal Enhancements */
.modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal.hidden {
    display: none !important;
}

.modal-content {
    background-color: var(--white);
    padding: 30px;
    border-radius: var(--radius);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow);
    position: relative;
}

/* Table Styles */
.usersTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.usersTable th {
    background: var(--light);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--primary);
}

.usersTable td {
    padding: 12px;
    border-bottom: 1px solid var(--light);
}

.usersTable tr:hover {
    background: #F9F9F9;
}

/* Search Input */
.search-input {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--light);
    border-radius: var(--radius);
    font-size: 1rem;
    margin-bottom: 15px;
    transition: border-color 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
}

/* Info Text */
.info-text {
    padding: 15px;
    background: #E3F2FD;
    border-left: 4px solid var(--primary);
    border-radius: 4px;
    margin-bottom: 20px;
    color: var(--dark);
}

/* Admin Sections */
.admin-only {
    border-left: 4px solid var(--primary);
}

/* Action Buttons Container */
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Responsive adjustments for new features */
@media (min-width: 768px) {
    .modal-content {
        width: 70%;
        max-width: 700px;
    }
    
    .action-buttons {
        flex-direction: row;
    }
    
    .action-buttons .btn {
        width: auto;
        flex: 1;
    }
}


/* ============================================================
   RTL (Arabic) support - applied when <html dir="rtl">
   ============================================================ */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select { text-align: right; direction: rtl; }
/* Keep phone/number/email/date fields left-aligned (they are LTR data) */
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="date"] { direction: ltr; text-align: right; }
html[dir="rtl"] .form-group label,
html[dir="rtl"] .form-group small,
html[dir="rtl"] .info-text,
html[dir="rtl"] .description,
html[dir="rtl"] .subtitle { text-align: right; }
/* Tables */
html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; }
/* Nav mirrors to the right */
html[dir="rtl"] .nav-menu { flex-direction: row-reverse; }
/* Flip any explicit left/right margins used for spacing */
html[dir="rtl"] .nav-brand { margin-right: 0; margin-left: auto; }
/* Toasts/modals stay centered (no change needed). */


/* How It Works - FAQ styling */
.faq-q {
    font-weight: 600;
    margin-top: 18px;
    margin-bottom: 4px;
}
.faq-a {
    margin-top: 0;
    color: #444;
}

/* Login OTP helper hint - guides unregistered users to Register without the
   API revealing whether a number is registered (account-enumeration safe). */
.otp-hint {
    margin-top: 12px;
    font-size: 0.9rem;
    color: #666;
    text-align: center;
}

/* Language toggle - always visible, pinned to the BOTTOM-LEFT corner.
   The top corners are occupied by the hero title (home), the nav logout
   link (desktop) and the hamburger menu (mobile), so the toggle lives at
   the bottom where no content sits and never overlaps anything. */
.lang-toggle {
    position: fixed; bottom: 16px; left: 16px; top: auto; right: auto; z-index: 10000;
    background: #4a90d9; color: #fff; border: none; border-radius: 20px;
    padding: 8px 16px; font-size: 14px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.lang-toggle:hover { background: #3a7bc0; }
html[dir="rtl"] .lang-toggle { left: auto; right: 16px; }

/* PWA install button - sits just above the language toggle, same corner.
   Green so it reads as a primary action; hidden until install is available. */
.install-btn {
    position: fixed; bottom: 60px; left: 16px; top: auto; right: auto; z-index: 10000;
    background: #27ae60; color: #fff; border: none; border-radius: 20px;
    padding: 8px 16px; font-size: 14px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.install-btn:hover { background: #1e8e4f; }
.install-btn.hidden { display: none; }
html[dir="rtl"] .install-btn { left: auto; right: 16px; }

@media (max-width: 767px) {
    .lang-toggle {
        bottom: 14px; left: 14px; right: auto;
        padding: 7px 14px; font-size: 13px;
    }
    html[dir="rtl"] .lang-toggle { left: auto; right: 14px; }
    .install-btn {
        bottom: 56px; left: 14px; right: auto;
        padding: 7px 14px; font-size: 13px;
    }
    html[dir="rtl"] .install-btn { left: auto; right: 14px; }
}