/* ========================================
   LAYOUTS.CSS - Essential Custom Layout Styles
   ======================================== */

/* ========================================
   FONT FACE DECLARATIONS
   ======================================== */
@font-face {
    font-family: 'Vazir';
    src: url('/font/Vazir.woff2') format('woff2'),
        url('/font/Vazir.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Vazir';
    src: url('/font/Vazir-Bold.woff2') format('woff2'),
        url('/font/Vazir-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Vazir';
    src: url('/font/Vazir-Light.woff2') format('woff2'),
        url('/font/Vazir-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Vazir';
    src: url('/font/Vazir-Medium.woff2') format('woff2'),
        url('/font/Vazir-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ======================================== */
/* RTL Variables */
[dir="rtl"] {
    --text-align: right;
    --flex-direction: row-reverse;
}

[dir="ltr"] {
    --text-align: left;
    --flex-direction: row;
}

/* ========================================
   CUSTOM UTILITY CLASSES
   ======================================== */
.vazir {
    font-family: 'Vazir' !important;
}

.logo-h {
    height: 30px !important;
}

/* Custom container utilities */
.container-75 {
    padding: 0 75px;
    max-width: 1440px;
    margin: 0 auto;
}

.container-40 {
    padding: 0 40px;
    max-width: 1500px;
    margin: 0 auto;
}

/* Buttons */
.rounded-btn {
    border-radius: 10px;
}

/* Link styles */
a {
    color: #333;
}

a[target]:not(.btn) {
    text-decoration: none !important;
}

/* Blur override */
.blur {
    --tw-blur: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.search-input-group {
    position: relative;
}

.search-input-group .search-input {
    height: 48px;
    border-radius: 50px !important;
    padding-left: 1rem;
}

.search-input-group .search-button {
    border-radius: 50px !important;
    position: absolute;
    right: 6px;
    top: 6px;
    bottom: 6px;
    z-index: 4;
    box-shadow: none !important;
}

.search-input-group .search-input:focus {
    z-index: 0;
}

.search-input-group .search-button {
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    z-index: 1;
}

[dir="rtl"] .search-input-group .search-button {
    right: auto;
    left: 6px;
}

.search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.logo-main2 {
    display: block !important;
}

.logo-white2 {
    display: none !important;
}

.top-navigation2 {
    padding: 15px 0 10px 0;
    background-color: #fff;
    z-index: 100;
}

.nav-links-bar2 {
    padding: 0 0 10px 0 !important;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

.nav-link2 {
    color: #212529 !important;
}

.company-name {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.categories-dropdown-top {
    top: 100px !important;
}

/* ========================================
   RESPONSIVE DESIGN - CUSTOM BREAKPOINTS
   ======================================== */

/* Mobile responsive */
@media (max-width: 768px) {
    /* Custom container responsive */
    .container-40 {
        padding: 0 20px;
        margin: 0 auto;
    }

    .container-75 {
        padding: 0 37.5px;
    }
}

/* Small mobile */
@media (max-width: 576px) {
    .container-75 {
        padding: 0 14px;
    }
}

/* ========================================
   ACCESSIBILITY & SPECIAL MODES
   ======================================== */

/* Input icons */
.input-icon {
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: #6c757d;
}

[dir="rtl"] .input-icon {
    right: auto;
    left: 1rem;
}

.mobile-menu-content.d-none {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.mobile-menu-content:not(.d-none) {
    max-height: 500px; /* Adjust as needed */
    transition: max-height 0.3s ease-in;
}