/* Premium SaaS Components (Green & Black Palette + Full RTL Support) */

/* Brand Logo Sizing - Cropped Tight & Extra Prominent */
.brand-logo-img {
    height: 52px;
    max-height: 60px;
    width: auto;
    object-fit: contain;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px) {
    .brand-logo-img {
        height: 72px;
        max-height: 80px;
    }
}

/* Cards & Panels */
.glass-panel {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card, .card-saas {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-card:hover, .card-saas:hover {
    box-shadow: var(--shadow-card);
    border-color: rgba(37, 53, 43, 0.18);
    transform: translateY(-4px);
}

/* Dark SaaS Card */
.card-dark-saas {
    background: var(--gradient-hero-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    color: #FFFFFF;
    box-shadow: var(--shadow-dark-card);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-dark-saas:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-lime-glow);
    transform: translateY(-4px);
}

/* Buttons (Electric Lime & Deep Dark Forest) */
.btn-primary-lime, .btn-solid, .btn-orange {
    background-color: var(--color-primary);
    color: var(--color-dark) !important;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    padding: 14px 32px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(183, 243, 77, 0.35);
}
.btn-primary-lime:hover, .btn-solid:hover, .btn-orange:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lime-glow);
    color: var(--color-dark) !important;
}

.btn-dark-slate, .btn-navy, .btn-primary-gradient {
    background-color: var(--color-dark);
    color: #FFFFFF !important;
    border: 1px solid var(--color-dark);
    border-radius: var(--radius-pill);
    padding: 14px 32px;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(37, 53, 43, 0.25);
}
.btn-dark-slate:hover, .btn-navy:hover, .btn-primary-gradient:hover {
    background-color: #1A261F;
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    color: #FFFFFF !important;
}

.btn-glass, .btn-outline-navy {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(37, 53, 43, 0.15);
    color: var(--color-dark) !important;
    border-radius: var(--radius-pill);
    padding: 14px 32px;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-glass:hover, .btn-outline-navy:hover {
    background: #FFFFFF;
    border-color: var(--color-dark);
    transform: translateY(-2px);
}

/* Language Switcher Pill */
.btn-lang-toggle {
    background: var(--color-dark);
    color: var(--color-primary);
    border: 1px solid rgba(183, 243, 77, 0.3);
    border-radius: var(--radius-pill);
    padding: 7px 16px;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-lang-toggle:hover {
    background: #1A261F;
    border-color: var(--color-primary);
    transform: scale(1.03);
}

/* Badges */
.badge-pill-accent, .badge-lime, .badge-foodics {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    border-radius: var(--radius-pill);
    background-color: rgba(183, 243, 77, 0.28);
    color: #1E2B23;
    border: 1px solid rgba(139, 195, 74, 0.4);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.01em;
}

.badge-dark-pill, .badge-orange-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    border-radius: var(--radius-pill);
    background-color: var(--color-dark);
    color: var(--color-primary);
    border: 1px solid rgba(183, 243, 77, 0.3);
    font-weight: 700;
    font-size: 13px;
}

/* Navbar */
.navbar-glass {
    background: rgba(248, 250, 252, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.navbar-glass.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-soft);
}

/* Accordions for FAQ */
.accordion-item {
    border: 1px solid rgba(37, 53, 43, 0.1) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    margin-bottom: 12px;
}
.accordion-button {
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--color-dark) !important;
    background-color: #FFFFFF !important;
    padding: 18px 22px !important;
}
.accordion-button:not(.collapsed) {
    background-color: #F8FAFC !important;
    box-shadow: none !important;
    color: var(--color-dark) !important;
}
.accordion-button:focus {
    box-shadow: none !important;
}

/* Form Controls */
.form-control, .form-select {
    border-radius: var(--radius-md) !important;
    border: 1px solid #E2E8F0 !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    color: var(--color-text-main) !important;
    background-color: #FFFFFF !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-dark) !important;
    box-shadow: 0 0 0 4px rgba(183, 243, 77, 0.4) !important;
    outline: none !important;
}

/* Typography Utility */
.font-display-lg { font-size: var(--fs-display-lg); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
.font-headline-xl { font-size: var(--fs-headline-xl); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; }
.font-headline-lg { font-size: var(--fs-headline-lg); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.font-body-lg { font-size: var(--fs-body-lg); line-height: 1.6; font-weight: 400; color: var(--color-text-muted); }
.font-body-md { font-size: var(--fs-body-md); line-height: 1.5; font-weight: 400; }
.font-label-md { font-size: var(--fs-label-md); line-height: 1.4; font-weight: 600; }
.font-caption { font-size: var(--fs-caption); line-height: 1.4; font-weight: 500; }

/* RTL Adjustments */
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end { text-align: left !important; }
[dir="rtl"] .material-symbols-outlined { transform: scaleX(-1); }
[dir="rtl"] .btn-primary-lime .material-symbols-outlined, 
[dir="rtl"] .btn-dark-slate .material-symbols-outlined,
[dir="rtl"] .btn-orange .material-symbols-outlined { transform: rotate(180deg); }