/* =====================================================
   TEMPLATE.CSS — hamid_j6_v1
   Joomla 6 + Bootstrap 5.3 RTL Safe
   Slot-Based Header Version
   ===================================================== */


/* =====================================================
   1) GLOBAL BASE
   ===================================================== */

html {
    box-sizing: border-box;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: #f7f7f7;
    color: #333333;
    font-size: 16px;
    line-height: 1.8;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

a {
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.75;
}

.site-wrapper,
.hamid-site-wrapper {
    width: 100%;
    min-height: 100vh;
}


/* =====================================================
   2) BOOTSTRAP LAYOUT SAFETY
   ===================================================== */

.container,
.container-fluid,
.hamid-container,
.hamid-container-fluid {
    position: relative;
}

.row,
.hamid-row {
    align-items: stretch;
}

.row > [class*="col-"],
.hamid-row > [class*="col-"] {
    min-width: 0;
}


/* =====================================================
   3) SECTION BASE
   ===================================================== */

.hamid-section,
.module-position-wrapper {
    width: 100%;
}

.hamid-section-feature-top,
.hamid-section-middle-top,
.hamid-section-middle,
.hamid-section-position-middle,
.hamid-section-main,
.hamid-section-feature-bottom {
    margin-block-end: 24px;
}


/* =====================================================
   4) WRAPPER SUPPORT
   ===================================================== */

.top-1-wrapper,
.top-menu-slots-wrapper,
.header-tools-wrapper,
.menu-top-2-wrapper,
.slideshow-1-wrapper,
.slideshow-2-wrapper,
.top-2-wrapper,
.position-0-wrapper,
.middle-top-wrapper,
.slideshow-3-wrapper,
.middle-wrapper,
.position-middle-wrapper,
.feature-top-wrapper,
.breadcrumbs-wrapper,
.main-wrapper,
.feature-bottom-wrapper,
.footer-wrapper,
.footer-widgets-wrapper,
.footer-main-wrapper {
    width: 100%;
}


/* =====================================================
   5) HEADER
   ===================================================== */

.header,
.hamid-header {
    background: #ffffff;
    border-block-end: 1px solid #eeeeee;
    z-index: 1020;
}

.logo-position,
.slot-1-position,
.slot-2-position,
.slot-3-position,
.slot-4-position,
.slot-5-position,
.hamid-pos-logo,
.hamid-pos-slot-1,
.hamid-pos-slot-2,
.hamid-pos-slot-3,
.hamid-pos-slot-4,
.hamid-pos-slot-5 {
    min-width: 0;
}


/* =====================================================
   6) TOP MENU + LEFT SLOTS
   ===================================================== */

.hamid-section-top-menu-slots .container-fluid,
.top-menu-slots-wrapper .container-fluid {
    padding-inline: 0;
}

.hamid-section-top-menu-slots .row,
.top-menu-slots-wrapper .row {
    margin-inline: 0;
}

.hamid-top-menu-slots-row {
    direction: rtl;
    width: 100%;
    margin-inline: 0;
}

.menu-top-1-position,
.hamid-pos-menu-top-1 {
    padding: 0;
}

.slot-1-position,
.slot-2-position,
.hamid-pos-slot-1,
.hamid-pos-slot-2 {
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-width: 120px;
    max-width: 180px;
}

.hamid-section-top-menu-slots .slot-1-position,
.hamid-section-top-menu-slots .slot-2-position {
    padding-block: 0;
}

.hamid-section-top-menu-slots .module,
.hamid-section-top-menu-slots .moduletable,
.top-menu-slots-wrapper .module,
.top-menu-slots-wrapper .moduletable {
    height: 100%;
}

.hamid-pos-menu-top-1 > .module,
.hamid-pos-menu-top-1 > .moduletable,
.menu-top-1-position > .module,
.menu-top-1-position > .moduletable {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}


/* =====================================================
   7) NAVIGATION BASE
   ===================================================== */

.navbar,
.hamid-navbar {
    width: 100%;
    min-height: 100%;
    border-radius: 6px;
    background: #f9f9f9;
    padding: 10px;
}

.navbar.bg-dark,
.hamid-navbar.bg-dark {
    background: linear-gradient(90deg,#14B8C4,#0EA5B7);
}

.navbar-nav {
    width: 100%;
}

.navbar-nav li {
    margin-inline: 10px;
}

.navbar-nav li a,
.navbar-nav .nav-link {
    font-weight: 500;
}

.navbar-toggler,
.hamid-navbar-toggler {
    border: none;
    box-shadow: none;
}


/* =====================================================
   8) MODULE BASE
   ===================================================== */

.module,
.moduletable,
[class*="moduletable"] {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 10px;
}

.module h3,
.moduletable h3,
.module .module-title,
.moduletable .module-title {
    margin: 0 0 12px;
    padding: 0 0 10px;
    color: #222222;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    border-block-end: 1px solid #eeeeee;
}


/* =====================================================
   9) POSITION BASE — MODULES STACK VERTICALLY
   ===================================================== */

.hamid-position,
.module-position {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hamid-position > .module,
.hamid-position > .moduletable,
.module-position > .module,
.module-position > .moduletable,
.hamid-position > [class*="moduletable"],
.module-position > [class*="moduletable"] {
    width: 100%;
    margin: 0;
}


/* =====================================================
   10) FULL WIDTH / SIMPLE POSITIONS
   ===================================================== */

.hamid-section-slideshow-1 .container-fluid,
.slideshow-1-wrapper .container-fluid {
    padding-inline: 0;
}

.hamid-section-slideshow-1 .row,
.slideshow-1-wrapper .row {
    margin-inline: 0;
}

.hamid-pos-slideshow-1,
.slideshow-1-position {
    padding: 0;
}

.hamid-pos-menu-top-2 > .module,
.hamid-pos-menu-top-2 > .moduletable,
.hamid-pos-slideshow-1 > .module,
.hamid-pos-slideshow-1 > .moduletable,
.hamid-pos-slideshow-2 > .module,
.hamid-pos-slideshow-2 > .moduletable,
.menu-top-2-position > .module,
.menu-top-2-position > .moduletable,
.slideshow-1-position > .module,
.slideshow-1-position > .moduletable,
.slideshow-2-position > .module,
.slideshow-2-position > .moduletable {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.hamid-pos-slideshow-1,
.hamid-pos-slideshow-2,
.slideshow-1-position,
.slideshow-2-position {
    overflow: hidden;
}


/* =====================================================
   11) HEADER TOOLS
   ===================================================== */

.header-tools-row,
.hamid-header-tools-row {
    align-items: center;
}

.header-tools-row > [class*="col-"],
.hamid-header-tools-row > [class*="col-"] {
    display: flex;
    align-items: center;
}

.header-logo-col {
    justify-content: flex-start;
    text-align: right;
}

.header-slot-3-col,
.header-slot-4-col {
    justify-content: center;
    text-align: center;
}

.header-slot-5-col {
    justify-content: flex-end;
    text-align: left;
}

.hamid-section-header-tools .module,
.hamid-section-header-tools .moduletable,
.header-tools-wrapper .module,
.header-tools-wrapper .moduletable {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.hamid-section-header-tools h3,
.hamid-section-header-tools .module-title,
.header-tools-wrapper h3,
.header-tools-wrapper .module-title {
    display: none;
}


/* =====================================================
   12) ACTIVE INDEX POSITIONS
   ===================================================== */

.hamid-pos-top-1,
.hamid-pos-menu-top-1,
.hamid-pos-slot-1,
.hamid-pos-slot-2,
.hamid-pos-logo,
.hamid-pos-slot-3,
.hamid-pos-slot-4,
.hamid-pos-slot-5,
.hamid-pos-menu-top-2,
.hamid-pos-slideshow-1,
.hamid-pos-slideshow-2,
.hamid-pos-slideshow-3,
.hamid-pos-top-2,
.hamid-pos-position-0,
.hamid-pos-middle-top-1,
.hamid-pos-middle-top-2,
.hamid-pos-middle-1,
.hamid-pos-middle-2,
.hamid-pos-position-middle-1,
.hamid-pos-position-middle-2,
.hamid-pos-position-1,
.hamid-pos-position-2,
.hamid-pos-breadcrumbs,
.hamid-pos-sidebar-right,
.hamid-pos-sidebar-left,
.hamid-pos-content-area,
.hamid-pos-main-top,
.hamid-pos-main-bottom,
.hamid-pos-position-5,
.hamid-pos-position-6,
.hamid-pos-bottom-1,
.hamid-pos-bottom-2,
.hamid-pos-bottom-3,
.hamid-pos-footer {
    min-width: 0;
}

.top-1-position,
.menu-top-1-position,
.slot-1-position,
.slot-2-position,
.logo-position,
.slot-3-position,
.slot-4-position,
.slot-5-position,
.menu-top-2-position,
.slideshow-1-position,
.slideshow-2-position,
.slideshow-3-position,
.top-2-position,
.position-0-position,
.middle-top-1-position,
.middle-top-2-position,
.middle-1-position,
.middle-2-position,
.position-middle-1-position,
.position-middle-2-position,
.position-1-position,
.position-2-position,
.breadcrumbs-position,
.sidebar-right-position,
.sidebar-left-position,
.content-area-position,
.main-top-position,
.main-bottom-position,
.position-5-position,
.position-6-position,
.bottom-1-position,
.bottom-2-position,
.bottom-3-position,
.footer-position {
    min-width: 0;
}


/* =====================================================
   13) MAIN CONTENT
   ===================================================== */

.hamid-pos-content-area,
.content-area-position {
    background: transparent;
    border-radius: 10px;
}

.sidebar-right-position > .module,
.sidebar-right-position > .moduletable,
.sidebar-left-position > .module,
.sidebar-left-position > .moduletable,
.hamid-pos-sidebar-right > .module,
.hamid-pos-sidebar-right > .moduletable,
.hamid-pos-sidebar-left > .module,
.hamid-pos-sidebar-left > .moduletable {
    background: #ffffff;
    border-radius: 10px;
}

.component-position,
.hamid-component,
.main-top-position,
.main-bottom-position,
.hamid-pos-main-top,
.hamid-pos-main-bottom {
    width: 100%;
}

.component-position,
.hamid-component {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    padding: 20px;
}


/* =====================================================
   14) FOOTER
   ===================================================== */

.footer-wrapper,
.hamid-section-footer {
    background: #222222;
    color: #dddddd;
}

.footer-wrapper .module,
.footer-wrapper .moduletable,
.hamid-section-footer .module,
.hamid-section-footer .moduletable {
    background: transparent;
    color: #dddddd;
    border-color: rgba(255, 255, 255, 0.25);
}

.footer-wrapper a,
.hamid-section-footer a {
    color: #dddddd;
}

.footer-main-wrapper,
.hamid-section-footer-main {
    background: #111111;
    color: #bbbbbb;
    border-block-start: 1px solid #333333;
    padding-block: 20px;
    text-align: center;
}


/* =====================================================
   15) FORM & LOGIN STABILITY
   ===================================================== */

form {
    max-width: 100%;
}

.form-control,
.form-select {
    max-width: 100%;
    box-sizing: border-box;
}

.input-group {
    width: 100%;
}

.input-group > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.btn {
    max-width: 100%;
    white-space: normal;
}


/* =====================================================
   16) TABLE / CONTENT SAFETY
   ===================================================== */

table {
    max-width: 100%;
}

.table-responsive {
    overflow-x: auto;
}

.component-position table,
.hamid-component table,
.module table,
.moduletable table {
    max-width: 100%;
}

.component-position,
.hamid-component,
.module,
.moduletable {
    overflow-wrap: anywhere;
}


/* =====================================================
   17) RESPONSIVE
   ===================================================== */

@media (max-width: 991.98px) {
    .hamid-top-menu-slots-row {
        flex-wrap: nowrap !important;
        gap: 0;
    }

    .menu-top-1-position {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
    }

    .slot-1-position,
    .slot-2-position,
    .hamid-pos-slot-1,
    .hamid-pos-slot-2 {
        flex: 0 0 auto;
        width: auto;
        max-width: 180px;
        min-width: 120px;
    }

    .navbar-nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .navbar-nav li {
        margin-block: 0;
        margin-inline: 10px;
        white-space: nowrap;
    }

    .slot-1-position,
    .slot-2-position {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 15px;
    }

    .module,
    .moduletable,
    .component-position,
    .hamid-component {
        padding: 14px;
    }

    .hamid-top-menu-slots-row {
        flex-wrap: nowrap !important;
    }

    .menu-top-1-position {
        flex: 1 1 auto;
        min-width: 0;
    }

    .slot-1-position,
    .slot-2-position {
        flex: 0 0 auto;
        width: auto;
        max-width: 160px;
        min-width: 110px;
    }

    .header-tools-wrapper,
    .hamid-section-header-tools {
        text-align: center;
    }

    .header-tools-row > [class*="col-"],
    .hamid-header-tools-row > [class*="col-"],
    .header-logo-col,
    .header-slot-3-col,
    .header-slot-4-col,
    .header-slot-5-col {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .module,
    .moduletable,
    .component-position,
    .hamid-component {
        padding: 12px;
        border-radius: 8px;
    }

    .hamid-top-menu-slots-row {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .menu-top-1-position {
        flex: 1 1 auto;
        min-width: 180px;
    }

    .slot-1-position,
    .slot-2-position {
        flex: 0 0 auto;
        width: auto;
        max-width: 150px;
        min-width: 100px;
    }
}