/* ==========================================================================
   Na'oom B2B Website - Base Styles
   ========================================================================== */

/* ========== CSS Reset ========== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-normal);
    color: var(--color-dark);
    background-color: var(--color-white);
    direction: rtl;
    text-align: start;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* LTR Override */
[dir="ltr"] {
    direction: ltr;
}

[dir="ltr"] body {
    text-align: left;
}

/* ========== Typography ========== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-dark);
}

h1 {
    font-size: var(--text-5xl);
}

h2 {
    font-size: var(--text-4xl);
}

h3 {
    font-size: var(--text-3xl);
}

h4 {
    font-size: var(--text-2xl);
}

p {
    margin-bottom: var(--space-4);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

strong {
    font-weight: var(--font-semibold);
}

/* ========== Lists ========== */
ul,
ol {
    list-style: none;
}

/* ========== Images ========== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========== Forms ========== */
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

/* ========== Tables ========== */
table {
    border-collapse: collapse;
    width: 100%;
}

/* ========== Layout Utilities ========== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.section {
    padding-block: var(--space-20);
}

.section--sm {
    padding-block: var(--space-12);
}

.section--lg {
    padding-block: var(--space-24);
}

/* ========== Grid System ========== */
.grid {
    display: grid;
    gap: var(--space-6);
}

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
}

/* ========== Flexbox Utilities ========== */
.flex {
    display: flex;
}

.flex--center {
    justify-content: center;
    align-items: center;
}

.flex--between {
    justify-content: space-between;
    align-items: center;
}

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

.flex--wrap {
    flex-wrap: wrap;
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-6 {
    gap: var(--space-6);
}

.gap-8 {
    gap: var(--space-8);
}

/* ========== Text Utilities ========== */
.text-center {
    text-align: center;
}

.text-start {
    text-align: start;
}

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-gray {
    color: var(--color-gray);
}

.text-white {
    color: var(--color-white);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-xl {
    font-size: var(--text-xl);
}

.font-medium {
    font-weight: var(--font-medium);
}

.font-semibold {
    font-weight: var(--font-semibold);
}

.font-bold {
    font-weight: var(--font-bold);
}

/* ========== Background Utilities ========== */
.bg-white {
    background-color: var(--color-white);
}

.bg-light {
    background-color: var(--color-light);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-secondary-light {
    background-color: var(--color-secondary-lighter);
}

/* ========== Spacing Utilities ========== */
.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

.mb-8 {
    margin-bottom: var(--space-8);
}

.mb-12 {
    margin-bottom: var(--space-12);
}

.mt-4 {
    margin-top: var(--space-4);
}

.mt-6 {
    margin-top: var(--space-6);
}

.mt-8 {
    margin-top: var(--space-8);
}

/* ========== Visibility ========== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}

/* ========== Additional Utilities ========== */
.w-full {
    width: 100%;
}

.opacity-80 {
    opacity: 0.8;
}

.underline {
    text-decoration: underline;
}

.cursor-default {
    cursor: default;
}

/* ========== Product Modal ========== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border-radius: 8px;
    width: 90%;
    max-width: 900px;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

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

.close-modal {
    color: #aaa;
    position: absolute;
    top: 10px;
    left: 15px;
    /* RTL layout default */
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s;
}

[dir="ltr"] .close-modal {
    left: auto;
    right: 15px;
}

.close-modal:hover,
.close-modal:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-body {
    display: flex;
    flex-direction: column;
}

.modal-image {
    width: 100%;
    max-height: 60vh;
    background-color: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.modal-image img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
}

.modal-info {
    padding: 20px;
    text-align: start;
}

.modal-info h2 {
    margin-bottom: 10px;
    color: var(--color-primary);
}

.modal-info p {
    margin-bottom: 8px;
    color: #555;
}

.modal-info .btn {
    margin-top: 15px;
}

@media (min-width: 768px) {
    .modal-body {
        flex-direction: row;
    }

    .modal-image {
        width: 50%;
        max-height: 500px;
    }

    .modal-image img {
        max-height: 500px;
    }

    .modal-info {
        width: 50%;
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}