* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
}

body {
    font-family: -apple-system, 'IRANSans', system-ui, sans-serif;
}

/* Footer */
/*.footer {
    background: linear-gradient(180deg, #1F2937 0%, #111827 100%);
    color: var(--white);
    padding-top: 40px;
    margin-top: 60px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}*/

/* Newsletter Section */
/*.newsletter-section {
    background: var(--primary);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 32px;
    border-radius: 16px;
    margin-bottom: 40px;
    text-align: center;
    position: relative;
    top: -60px;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.newsletter-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
}

.newsletter-subtitle {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 20px;
}

.newsletter-form {
    display: flex;
    gap: 12px;
    max-width: 400px;
    margin: 0 auto;
}

.newsletter-input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
}

.newsletter-btn {
    padding: 12px 24px;
    background: var(--gray-900);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}*/

/* Footer Grid */
/*.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    margin-bottom: 40px;
}

.footer-column h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--white);
}

.footer-links {
    list-style: none;
}

    .footer-links li {
        margin-bottom: 12px;
    }

    .footer-links a {
        color: var(--gray-300);
        text-decoration: none;
        font-size: 14px;
        transition: color 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        .footer-links a:hover {
            color: var(--primary);
        }*/

/* App Download */
/*.app-download {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.app-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--white);
    text-decoration: none;
    transition: all 0.3s;
}

    .app-badge:hover {
        background: rgba(255, 255, 255, 0.2);
    }

.app-badge-icon {
    width: 20px;
    height: 20px;
}

.app-badge-text {
    display: flex;
    flex-direction: column;
}

.app-badge-small {
    font-size: 10px;
    opacity: 0.8;
}

.app-badge-large {
    font-size: 14px;
    font-weight: 600;
}*/

/* Working Hours */
/*.working-hours {
    background: rgba(255, 255, 255, 0.05);
    padding: 16px;
    border-radius: 12px;
    margin-top: 16px;
}

.working-hours-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.working-hours-list {
    font-size: 13px;
}

.working-hours-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    color: var(--gray-300);
}

    .working-hours-item.active {
        color: var(--primary);
        font-weight: 500;
    }*/

/* Contact Info */
/*.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.contact-icon {
    width: 40px;
    height: 40px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.contact-info {
    flex: 1;
}

.contact-label {
    font-size: 11px;
    color: var(--gray-400);
    margin-bottom: 2px;
}

.contact-value {
    font-size: 14px;
    color: var(--gray-200);
}*/

/* Social Media */
/*.social-links {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.social-link {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-300);
    transition: all 0.3s;
    text-decoration: none;
}

    .social-link:hover {
        background: var(--primary);
        color: var(--white);
        transform: translateY(-2px);
    }*/

/* Trust Badges */
/*.trust-badges {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin: 32px 0;
    justify-content: center;
}

.trust-badge {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trust-badge-icon {
    width: 32px;
    height: 32px;
    color: var(--primary);
}

.trust-badge-text {
    display: flex;
    flex-direction: column;
}

.trust-badge-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
}

.trust-badge-subtitle {
    font-size: 11px;
    color: var(--gray-400);
}*/

/* Footer Bottom */
/*.footer-bottom {
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.copyright {
    font-size: 13px;
    color: var(--gray-400);
}

.payment-methods {
    display: flex;
    gap: 8px;
}

.payment-method {
    width: 40px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--gray-300);
}*/

/* Mobile Responsive */
/*@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-btn {
        width: 100%;
    }

    .app-download {
        flex-direction: column;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}*/

/* Icons */
/*svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}*/










* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/*body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: linear-gradient(135deg, #f0f4ea 0%, #ffffff 100%);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    padding-bottom: 80px;
}
*/
/* محتوای دمو */
.demo-section {
    padding: 40px 20px;
    text-align: center;
}

    .demo-section h1 {
        color: #aebc80;
        font-size: 28px;
        margin-bottom: 10px;
        font-weight: 800;
    }

/* فوتر ترکیبی */
.mega-footer {
    position: relative;
    margin-top: 40px;
}

/* بخش 1: Quick Info Cards */
.info-cards-section {
    padding: 0 16px 20px;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.info-card {
    text-align: center;
    text-align: -webkit-center;
    background: #ffffff;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .info-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(174, 188, 128, 0.1) 0%, transparent 70%);
        transition: transform 0.6s ease;
        transform: scale(0);
    }

    .info-card:active::before {
        transform: scale(1);
    }

    .info-card:active {
        transform: scale(0.96);
    }

.card-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #aebc80 0%, #99aa66 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

    .card-icon svg {
        width: 18px;
        height: 18px;
        fill: white;
    }

.card-title {
    font-size: 12px;
    color: #8b9966;
    margin-bottom: 4px;
}

.card-value {
    font-size: 14px;
    color: #2d3428;
    font-weight: 700;
}

/* بخش 2: Tab Navigation */
.tab-section {
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -5px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

.tab-header {
    display: flex;
    background: linear-gradient(180deg, #fafbf8 0%, #ffffff 100%);
    padding: 8px;
    gap: 8px;
}

.tab-btn {
    flex: 1;
    padding: 12px 8px;
    background: transparent;
    border: none;
    border-radius: 12px;
    font-size: 12px;
    color: #8b9966;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}

    .tab-btn svg {
        width: 20px;
        height: 20px;
        fill: #8b9966;
        transition: all 0.3s ease;
    }

    .tab-btn.active {
        background: #aebc80;
        color: white;
    }

        .tab-btn.active svg {
            fill: white;
        }

        .tab-btn.active span {
            color: white !important;
        }

.tab-indicator {
    position: absolute;
    bottom: 0;
    height: 3px;
    background: #aebc80;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-content {
    padding: 20px;
    min-height: 150px;
    position: relative;
    overflow: hidden;
}

.tab-panel {
    display: none;
    animation: slideIn 0.3s ease;
}

    .tab-panel.active {
        display: block;
    }

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* محتوای تب‌ها */
.contact-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8faf5;
    border-radius: 12px;
    transition: all 0.2s ease;
}

    .contact-item:active {
        background: rgba(174, 188, 128, 0.2);
    }

.contact-icon {
    width: 32px;
    height: 32px;
    background: #aebc80;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .contact-icon svg {
        width: 16px;
        height: 16px;
        fill: white;
    }

.contact-text {
    flex: 1;
}

.contact-label {
    font-size: 11px;
    color: #8b9966;
}

.contact-value {
    font-size: 14px;
    color: #2d3428;
    font-weight: 600;
    text-decoration: none;
}

/* بخش 3: Bottom Fixed Bar */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2d3428;
    padding: 8px;
    display: flex;
    justify-content: space-around;
    z-index: 1000;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.15);
}

.bar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: #c5cdbf;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 12px;
    position: relative;
}

    .bar-btn svg {
        width: 22px;
        height: 22px;
        fill: #c5cdbf;
        transition: all 0.2s ease;
    }

    .bar-btn span {
        font-size: 10px;
        font-weight: 500;
    }

    .bar-btn:active {
        background: rgba(174, 188, 128, 0.2);
    }

        .bar-btn:active svg {
            fill: #aebc80;
            transform: scale(1.1);
        }

        .bar-btn:active span {
            color: #aebc80;
        }

/* Floating Action Button */
.fab-container {
    position: fixed;
    bottom: 90px;
    left: 20px;
    z-index: 999;
}

.fab {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #aebc80 0%, #99aa66 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(174, 188, 128, 0.4);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

    .fab::before {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: rgba(174, 188, 128, 0.2);
        animation: pulse 2s infinite;
    }

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.15);
        opacity: 0;
    }
}

.fab:active {
    transform: scale(0.9);
}

.fab svg {
    width: 24px;
    height: 24px;
    fill: white;
}

/* Quick Actions Menu */
.quick-actions {
    position: fixed;
    bottom: 160px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

    .quick-actions.open {
        opacity: 1;
        transform: scale(1);
        pointer-events: all;
    }

.action-btn {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .action-btn:active {
        transform: scale(0.9);
        background: #aebc80;
    }

    .action-btn svg {
        width: 20px;
        height: 20px;
        fill: #8b9966;
    }

    .action-btn:active svg {
        fill: white;
    }

/* Bottom Sheet Modal */
.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 24px 24px 0 0;
    padding: 24px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2000;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
}

    .bottom-sheet.open {
        transform: translateY(0);
    }

.sheet-handle {
    width: 40px;
    height: 4px;
    background: #d4d8cc;
    border-radius: 2px;
    margin: 0 auto 20px;
}

.sheet-title {
    font-size: 18px;
    color: #2d3428;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.sheet-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1999;
}

    .overlay.open {
        opacity: 1;
        pointer-events: all;
    }

/* Social Links */
.social-section {
    padding: 16px;
    border-top: 1px solid rgba(174, 188, 128, 0.15);
    display: flex;
    justify-content: center;
    gap: 12px;
}

.social-btn {
    width: 40px;
    height: 40px;
    background: #f8faf5;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .social-btn:active {
        background: #aebc80;
        transform: scale(0.9);
    }

    .social-btn svg {
        width: 20px;
        height: 20px;
        fill: #8b9966;
    }

    .social-btn:active svg {
        fill: white;
    }


























/* ==========================================================================
   Bottom navigation (mobile) — floating pill bar
   The active item expands into a colored pill (icon + label). The pill itself
   is a single element (.nav-highlight) that travels between items, driven by
   NavBar.js, so switching items reads as one continuous motion.
   ========================================================================== */

.daroo-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90000;
    padding: 10px 12px calc(10px + var(--safe-bottom, 0px));
    pointer-events: none;
    border-top: 0 !important;
    /* No backdrop of its own — the bar itself is the only visible surface,
       otherwise a white band shows up above it. */
    background: transparent;
}

.khone-nav {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 460px;
    margin: 0 auto;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 27px;
    /* Frosted glass: the page keeps showing through, blurred. */
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 8px 28px rgba(58, 70, 61, .14), 0 1px 2px rgba(58, 70, 61, .05), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* Browsers without backdrop-filter (older Android WebView) would show the bar
   almost transparent, so fall back to a solid-ish surface there. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .khone-nav {
        background: rgba(255, 255, 255, .95);
        border-color: rgba(87, 99, 89, .12);
    }
}

/* The travelling pill. Position/width are written by NavBar.js. */
.nav-highlight {
    position: absolute;
    top: 6px;
    left: 0;
    width: 0;
    height: 42px;
    border-radius: 21px;
    background: linear-gradient(135deg, #aaba79 0%, #7d9052 55%, #667a45 100%);
    box-shadow: 0 6px 16px rgba(122, 140, 86, .45);
    opacity: 0;
    transform: translate3d(0, 0, 0);
    will-change: transform, width;
    pointer-events: none;
    z-index: 0;
}

.nav-ghesmat {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 12px;
    margin: 0;
    border: 0;
    background: transparent;
    border-radius: 21px;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: padding .42s cubic-bezier(.34, 1.25, .5, 1), transform .18s ease;
}

    .nav-ghesmat.faal {
        padding: 0 14px;
    }

    .nav-ghesmat:active {
        transform: scale(.93);
    }

.nav-icon {
    position: relative;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* The icons are the project's own line SVGs, drawn in near-black. Loaded as
       <img> they can't be recolored directly, so brightness(0) flattens them to
       black and invert() lifts them to grey (idle) or white (on the pill). */
    .nav-icon img {
        width: 22px;
        height: 22px;
        display: block;
        filter: brightness(0) invert(38%);
        transition: filter .3s ease, transform .42s cubic-bezier(.34, 1.25, .5, 1);
    }

.nav-ghesmat.faal .nav-icon img {
    filter: brightness(0) invert(100%);
    transform: scale(1.04);
}

.matn-nav {
    max-width: 0;
    margin-inline-start: 0;
    opacity: 0;
    font-family: var(--text-font, inherit);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width .42s cubic-bezier(.34, 1.25, .5, 1), margin-inline-start .42s cubic-bezier(.34, 1.25, .5, 1), opacity .26s ease .06s;
}

.nav-ghesmat.faal .matn-nav {
    max-width: 96px;
    margin-inline-start: 7px;
    opacity: 1;
}

/* Unread chat counter, anchored to the chat icon. */
.nav-badge {
    position: absolute;
    top: -5px;
    inset-inline-end: -7px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #d94040;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-ghesmat.faal .nav-badge {
    border-color: #7d9052;
}

/* The chat script toggles .hidden on the badge; don't depend on the chat
   stylesheet being loaded for that to work. */
.nav-badge.hidden {
    display: none;
}

/* ---------------------------------------------------------------------------
   Clearance for other bottom-anchored UI.
   This file is only loaded by the two layouts that render the navbar, so these
   rules can't leak into the standalone pages (new ticket, checkout, map) that
   have no bar to clear. Selectors are kept specific enough to win over the
   page stylesheets, which are linked from partials further down the body.
   --------------------------------------------------------------------------- */

/* Sticky action bars (save profile / address / password) and the ticket
   message box used to sit exactly under the navbar. */
body .page-actions,
body .message-input-bar {
    bottom: calc(var(--nav-h, 66px) + var(--safe-bottom, 0px));
}

body .toast,
body .fab {
    bottom: calc(var(--nav-h, 66px) + var(--safe-bottom, 0px) + 12px);
}

/* First paint and viewport changes must not animate. */
.khone-nav.no-anim .nav-ghesmat,
.khone-nav.no-anim .nav-icon svg,
.khone-nav.no-anim .matn-nav,
.khone-nav.no-anim .nav-highlight {
    transition: none !important;
}

@media (min-width: 420px) {
    .matn-nav {
        font-size: 13px;
    }

    .nav-ghesmat.faal .matn-nav {
        max-width: 110px;
    }
}

/* Narrow phones: keep five items on one line. */
@media (max-width: 359px) {
    .nav-ghesmat {
        padding: 0 9px;
    }

        .nav-ghesmat.faal {
            padding: 0 11px;
        }

    .matn-nav {
        font-size: 11px;
    }

    .nav-ghesmat.faal .matn-nav {
        max-width: 80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-ghesmat,
    .nav-icon svg,
    .matn-nav,
    .nav-highlight {
        transition-duration: .01ms !important;
    }
}

















/*Finish Footer*/



body {
    font-family: 'IRANSans', 'Vazir', Tahoma, Arial, sans-serif;
    background: #f5f5f7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    padding: 40px;
    text-align: center;
    color: #666;
}

footer {
    background: #ffffff;
    border-top: 8px solid #f0f0f1;
}

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

/* بخش بالای فوتر */
.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #e0e0e2;
}

.back-to-top {
    background: white;
    border: 1px solid #e0e0e2;
    color: #424750;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
}

    .back-to-top:hover {
        background: #f0f0f2;
        transform: translateY(-2px);
    }

/* بخش اکوردیون */
.footer-accordion {
    padding: 20px 0;
}

/* آیتم‌های اکوردیون - حالت عمودی */
.accordion-item {
    border-bottom: 1px solid #e0e0e2;
    width: 100%;
}

.accordion-header {
    padding: 6px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #424750;
    transition: color 0.3s ease;
}

    .accordion-header:hover {
        color: #ef4056;
    }

.accordion-icon {
    font-size: 18px;
    transition: transform 0.3s ease;
    color: #a1a3a8;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
    color: #ef4056;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.accordion-item.active .accordion-content {
    max-height: 1000px;
    padding-bottom: 20px;
}

.accordion-content ul {
    list-style: none;
    padding-right: 0;
}

    .accordion-content ul li {
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f2;
    }

        .accordion-content ul li:last-child {
            border-bottom: none;
        }

        .accordion-content ul li a {
            color: #81858b;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s ease;
            display: block;
            padding-right: 20px;
        }

            .accordion-content ul li a:hover {
                color: #ef4056;
                padding-right: 25px;
            }

/* بخش توضیحات با Show More */
.footer-description-section {
    padding: 2px 0 30px;
}

.footer-description {
    position: relative;
    display: flex;
    justify-content: center;
}

    .footer-description h3 {
        font-size: 18px;
        font-weight: 700;
        color: #424750;
        margin-bottom: 20px;
    }

.description-content {
    font-size: 13px;
    line-height: 1.9;
    color: #81858b;
    text-align: justify;
}

.description-preview {
    display: block;
}

.description-full {
    display: none;
    margin-top: 15px;
}

    .description-full.show {
        display: block;
        animation: fadeIn 0.5s ease;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gradient-overlay {
    position: relative;
}

    .gradient-overlay::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(to bottom, transparent, #ffffff);
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .gradient-overlay.expanded::after {
        opacity: 0;
    }

.show-more-btn {
    background: #afbca1;
    color: white;
    border: none;
    position: absolute;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 14px;
    bottom: -15px;
    justify-self: center;
    justify-self: anchor-center;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .show-more-btn:hover {
        background: #afbca1;
        transform: scale(1.05);
    }

    .show-more-btn.less {
        background: #424750;
    }

/* بخش پایین فوتر */
.footer-bottom {
    padding: 10px 0;
    text-align: center;
}

.footer-copyright {
    font-size: 11px;
    color: #a1a3a8;
}

/* نشان‌ها و گواهی‌ها */
.certificates {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.certificate-item {
    width: 60px;
    height: 60px;
    background: white;
    border: 1px solid #e0e0e2;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .certificate-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

/* ریسپانسیو برای دسکتاپ */
@media (min-width: 768px) {
    .accordion-content ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 40px;
    }

        .accordion-content ul li {
            border-bottom: none;
            padding: 8px 0;
        }

    .description-content {
        font-size: 15px;
        line-height: 2.4;
    }
}

@media (min-width: 1024px) {
    .accordion-content ul {
        grid-template-columns: repeat(3, 1fr);
    }
}