/* ============================================
   YOUNA - Container Styles
   ============================================ */

.ahz-content-container {
    pointer-events: auto;
    z-index: var(--z-content);
    position: fixed !important;
    left: calc(var(--sal) + 0.5rem);
    right: calc(var(--sar) + 0.5rem);
    width: calc(100% - var(--sal) - var(--sar) - 1rem);
    top: calc(70px + var(--sat));
    bottom: calc(30px + var(--sab));
    height: auto;
    /* Scroll only within the content area */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    contain: layout paint style;
    transition: all 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-black) transparent;
    /* Merged inner container visuals */
    border-radius: 0.75rem;
    padding: 1rem;
    border: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    max-width: 95%;
}

#contact {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.cards-section {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* Common content container with safe area support */
.ahz-content-container-safe-area {
    left: var(--sal);
    right: var(--sar);
    width: calc(100% - var(--sal) - var(--sar));
}

/* Common scrollable container */
.scrollable-container {
    top: 80px;
    bottom: 160px;
    overflow-y: auto;
}

/* Common max-width containers */
.max-width-98 {
    max-width: 98%;
}

.max-width-85 {
    max-width: 85%;
}

.contact-content-container {
    /* Padding removed to match videos page style */
}

.ahz-content-container::-webkit-scrollbar {
    width: 6px;
}

.ahz-content-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.ahz-content-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary-black), var(--light-silver));
    border-radius: 3px;
}

.ahz-content-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--light-silver), var(--primary-black));
}

/* ============================================
   Responsive Design
   ============================================ */

/* Mobile: < 768px */
@media (max-width: 767px) {
    .ahz-content-container {
        left: calc(var(--sal) + 0.25rem);
        right: calc(var(--sar) + 0.25rem);
        width: calc(100% - var(--sal) - var(--sar) - 0.5rem);
        top: calc(70px + var(--sat));
        bottom: calc(30px + var(--sab));
        padding: 1rem;
        max-width: 96%;
    }

    .contact-content-container {
        padding-left: calc(var(--sal) + 0.2rem);
        padding-right: calc(var(--sar) + 0.2rem);
    }
}

/* Extra small mobile: < 480px */
@media (max-width: 479px) {
    .ahz-content-container {
        left: calc(var(--sal) + 0.125rem);
        right: calc(var(--sar) + 0.125rem);
        width: calc(100% - var(--sal) - var(--sar) - 0.25rem);
        padding: 0.5rem;
        max-width: 100%;
    }
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .ahz-content-container {
        left: calc(var(--sal) + 0.25rem);
        right: calc(var(--sar) + 0.25rem);
        width: calc(100% - var(--sal) - var(--sar) - 0.5rem);
        top: calc(70px + var(--sat));
        bottom: calc(35px + var(--sab));
        padding: 1rem;
        max-width: 96%;
    }

    .contact-content-container {
        padding-left: calc(var(--sal) + 0.2rem);
        padding-right: calc(var(--sar) + 0.2rem);
    }
}

/* Desktop: ≥ 1024px */
@media (min-width: 1024px) {
    .ahz-content-container {
        top: calc(100px + var(--sat));
        left: calc(var(--sal) + 1rem);
        right: calc(var(--sar) + 1rem);
        width: calc(100% - var(--sal) - var(--sar) - 2rem);
        bottom: calc(40px + var(--sab));
        padding: 1.5rem;
        max-width: 85%;
    }

    .contact-content-container {
        padding-left: calc(var(--sal) + 8rem);
        padding-right: calc(var(--sar) + 8rem);
    }
}

/* Large screens: ≥ 1440px */
@media (min-width: 1440px) {
    .ahz-content-container {
        max-width: 85%;
        margin: 0 auto;
    }
}

/* Touch Targets - Mobile */
@media (max-width: 767px) {
    .card-action-btn,
    .category-filter-btn,
    .pagination-btn,
    .ahz-mobile-nav-item {
        min-height: 44px;
        min-width: 44px;
    }

    .contact-content-container {
        padding-left: 1rem; 
        padding-right: 1rem;
    }
}