/*-- Use For Custom Styling --*/

/* FORCE GRID LAYOUT FOR PRODUCTS */
#js-grid-mosaic-flat.modern-grid,
.modern-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.modern-grid .product-card {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

/* Global NewRudaw Font Application - Exclude Font Awesome Icons */
body, body *:not([class*="fa-"]):not(.fa):not([class^="fa "]) {
    font-family: 'NewRudaw-Bold', Arial, sans-serif !important;
}

/* Ensure Font Awesome icons use their proper font */
.fa, [class^="fa-"], [class*=" fa-"] {
    font-family: 'FontAwesome' !important;
}

/* Override specific font styles to use NewRudaw */
.font-style-1,
.font-style-1-u,
.font-style-2,
h1, h2, h3, h4, h5, h6,
p, span, a, li, div,
.nav-item,
.navbar-nav,
.btn {
    font-family: 'NewRudaw-Bold', Arial, sans-serif !important;
}

/* Light font for titles and headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'NewRudaw-Light', Arial, sans-serif !important;
}
.navlinks-outer {
    direction: rtl !important;
    text-align: right !important;
}

/* Ensure proper spacing and alignment for RTL */
.navbar-nav > li {
    float: right !important;
}

.navbar-nav > li > a {
    direction: rtl !important;
    text-align: right !important;
}

/* Fix for mobile menu in RTL */
.navbar-toggle {
    float: left !important;
}

/* Additional RTL fixes */
.container .row {
    direction: ltr; /* Keep content LTR but allow navbar to be RTL */
}

.navbar-header {
    float: left !important;
}

/* Ensure logo stays on the left */
.navbar-brand {
    float: left !important;
    direction: ltr !important;
}

/* Mobile navbar toggle fixes */
@media (max-width: 767px) {
    /* Make navbar collapse display as column on mobile */
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
        background-color: #fff !important;
        padding: 10px 15px !important;
        margin-top: 10px !important;
        border-radius: 5px !important;
    }

    .navbar-collapse.in {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Navigation items as column */
    .navlinks-outer {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        direction: rtl !important;
        text-align: right !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar-nav {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .nav-tab {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #eee !important;
    }

    .nav-tab:last-child {
        border-bottom: none !important;
    }

    .nav-tab a {
        display: block !important;
        width: 100% !important;
        padding: 12px 15px !important;
        text-align: right !important;
        direction: rtl !important;
        color: #333 !important;
        text-decoration: none !important;
        border-radius: 0 !important;
        transition: background-color 0.3s ease !important;
    }

    .nav-tab a:hover {
        background-color: #f8f9fa !important;
        color: #007bff !important;
    }

    /* Toggle button positioning */
    .navbar-toggle {
        float: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        border: 1px solid #ddd !important;
        background-color: #fff !important;
        order: 1 !important;
    }

    .navbar-toggle:hover,
    .navbar-toggle:focus {
        background-color: #f8f9fa !important;
    }

    /* Toggle button spans */
    .navbar-toggle span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        border-radius: 1px !important;
        background-color: #333 !important;
        margin: 4px 0 !important;
    }

    /* Header adjustments for mobile */
    .navbar-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    .navbar-brand {
        float: none !important;
        margin: 0 !important;
        order: -1 !important; /* Ensure logo appears first (left side) */
        margin-left: 0 !important;
        margin-right: auto !important;
        align-self: flex-start !important;
    }

    /* Keep toggle button on the right */
    .navbar-toggle {
        order: 1 !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        align-self: flex-end !important;
    }
}

/* ===== Homepage product grid visibility fixes =====
   These rules are intentionally scoped and loaded in custom.css (after
   vendor/style.css) so they override global plugin rules (eg. .cbp > *).
   Target only our grid by id/class to avoid affecting cubeportfolio instances.
*/
#js-grid-mosaic-flat,
.modern-grid,
#js-grid-mosaic-flat *,
.modern-grid * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
}

.modern-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
}

.modern-grid .product-card,
#js-grid-mosaic-flat .product-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    overflow: visible !important;
    min-height: 1px !important;
}

.product-card.force-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.product-image,
.product-image img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* If cubeportfolio wraps our grid with .cbp or .cbp-ready, make sure
   only our modern-grid is forced visible and not all .cbp children. */
.cbp .modern-grid,
.cbp-ready .modern-grid {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
}

/* ===== Clean product card styling (homepage) =====
   Provides tidy 3x2 grid, consistent card heights, image cropping, and title truncation.
   Scoped to #js-grid-mosaic-flat/.modern-grid to avoid global impact.
*/
#js-grid-mosaic-flat.modern-grid,
.modern-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 25px !important;
    align-items: stretch !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 1200px !important;
}

.modern-grid .product-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(6, 21, 38, 0.08);
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    display: flex;
    flex-direction: column;
    min-height: 380px; /* ensures two-row visual balance */
}

.modern-grid .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(6, 21, 38, 0.12);
}

.modern-grid .card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.modern-grid .card-image {
    width: 100%;
    height: 230px;
    overflow: hidden;
    background: #f6f8fb;
    display: block;
}

.modern-grid .card-image img.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* crop to fill card area */
    display: block;
}

.modern-grid .card-content {
    padding: 18px 16px;
    text-align: center;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modern-grid .product-name {
    font-size: 18px;
    font-weight: 700;
    color: #013a4a;
    margin: 0;
    line-height: 1.25;
    max-height: 3.6rem; /* ~2 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Hover overlay and CTA polish */
.modern-grid .card-image { position: relative; }
.modern-grid .card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.18) 100%);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.modern-grid .product-card:hover .card-image::after { opacity: 1; }

.modern-grid .card-content { padding: 18px 20px; }
.modern-grid .product-link { color: inherit; text-decoration: none; }
.modern-grid .product-link:hover { color: #014467; text-decoration: underline; }

.modern-grid .product-desc { color: #6b7280; font-size: 13px; margin-top: 6px; }

.modern-grid .card-footer { padding-top: 14px; border-top: 1px solid #f1f5f9; }
.modern-grid .product-price { color: #0b6b5a; }
.modern-grid .view-btn { padding: 8px 14px; }

/* Slightly larger image area for better perception */
.modern-grid .card-image { height: 260px; }

@media (max-width: 991px) {
    .modern-grid .card-image { height: 220px; }
}


.modern-grid .category-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    right: auto;
    z-index: 3;
}

/* Make sure the badge sits above image area */
.modern-grid .card-image { position: relative; }

/* Responsive: 2 columns for tablet, 1 for small phones */
@media (max-width: 1200px) {
    .modern-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
    .modern-grid .card-image { height: 200px; }
}

@media (max-width: 991px) {
    .modern-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
        gap: 20px !important;
    }
    .modern-grid .card-image { height: 200px; }
}

@media (max-width: 768px) {
    .modern-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    .modern-grid .card-image { height: 180px; }
}

@media (max-width: 480px) {
    .modern-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .modern-grid .card-image { height: 200px; }
    .modern-grid .product-card { min-height: auto; }
}

/* Small utilities for card content */
.modern-grid .card-link { display: block; text-decoration: none; color: inherit; }
.modern-grid .product-desc { color: #556; font-size: 14px; margin-top: 8px; }
.modern-grid .card-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; }
.modern-grid .product-price { color: #1a7a6b; font-weight: 700; font-size: 15px; }
.modern-grid .view-btn { background: linear-gradient(135deg,#014467,#02235a); color: #fff; padding: 8px 12px; border-radius: 999px; text-decoration: none; font-size: 13px; }
.modern-grid .view-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(1,68,103,0.18); }
/* Additional responsive fixes */
@media (max-width: 480px) {
    .navbar-collapse {
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding: 10px 0 !important;
    }

    .nav-tab a {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}

/* ===== Enhanced Product Card Styling (New Design) =====
   Improved card layout with better image linking and hover effects
*/
.modern-grid .card-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
}

.modern-grid .image-link {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.modern-grid .card-image {
    height: 280px;
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #f8f9fa;
}

.modern-grid .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

.modern-grid .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(1, 68, 103, 0.85);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
}

.modern-grid .product-card:hover .image-overlay {
    opacity: 1;
}

.modern-grid .product-card:hover .product-image {
    transform: scale(1.08);
}

.modern-grid .overlay-content {
    text-align: center;
    color: white;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modern-grid .product-card:hover .overlay-content {
    transform: translateY(0);
}

.modern-grid .view-icon {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
}

.modern-grid .view-text {
    font-size: 16px;
    font-weight: 600;
    display: block;
}

.modern-grid .product-info {
    flex: 1;
    margin-bottom: 15px;
}

.modern-grid .product-title-link {
    color: #014467;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s ease;
}

.modern-grid .product-title-link:hover {
    color: #99ae3b;
    text-decoration: none;
}

.modern-grid .product-desc {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 8px;
    text-align: center;
    direction: rtl;
}

.modern-grid .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.modern-grid .product-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 15px;
}

.modern-grid .product-price {
    color: #99ae3b;
    font-weight: 700;
    font-size: 16px;
}

.modern-grid .price-label {
    font-size: 12px;
    color: #666;
    margin-left: 5px;
}

.modern-grid .price-value {
    font-weight: 700;
    color: #99ae3b;
}

.modern-grid .btn-details {
    background: linear-gradient(135deg, #014467, #02235a);
    color: white;
    padding: 10px 16px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(1, 68, 103, 0.2);
}

.modern-grid .btn-details:hover {
    background: linear-gradient(135deg, #99ae3b, #8cbb28);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(153, 174, 59, 0.3);
    color: white;
    text-decoration: none;
}

.modern-grid .btn-details i {
    transition: transform 0.3s ease;
}

.modern-grid .btn-details:hover i {
    transform: translateX(-3px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .modern-grid .card-image {
        height: 220px;
    }

    .modern-grid .view-icon {
        font-size: 24px;
    }

    .modern-grid .view-text {
        font-size: 14px;
    }

    .modern-grid .product-actions {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .modern-grid .btn-details {
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .modern-grid .card-image {
        height: 200px;
    }

    .modern-grid .card-content {
        padding: 15px;
    }

    .modern-grid .product-name {
        font-size: 16px;
    }

    .modern-grid .product-desc {
        font-size: 13px;
    }
}