/* 
   Arabic Language Styles
   Cairo is used for Arabic text. 
   Icons (FontAwesome, etc.) must use their own font-family.
*/

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

/* Apply Cairo font to the body, but let specific tags override it (like icons) */
body {
    direction: rtl;
    font-family: 'Cairo', 'Montserrat', sans-serif;
}

/* 
   IMPORTANT: Arabic script must have normal letter-spacing.
   We target elements that contain text, but we must EXCLUDE icons.
*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
button,
input,
li {
    letter-spacing: normal !important;
    /* Arabic words must connect */
    word-spacing: normal !important;
}

/* 
   Protect Icons: 
   Ensure icon fonts are not overridden by the Arabic font setting.
*/
.fas,
.far,
.fal,
.fab,
.fa,
.material-icons,
[class^="fa-"],
[class*=" fa-"] {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'FontAwesome', 'Material Icons' !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* 
   Allow English/Latin text in the menu and other areas to keep its spacing.
   We explicitly restore the 1px spacing for menu links that typically contain English.
*/
.menu-item>a {
    letter-spacing: 1px !important;
}

/* Specific elements that might still need text-transform (like English labels) */
.menu-item>a,
.btn,
.button {
    text-transform: uppercase !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.8 !important;
    font-weight: 700;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Heading styles for p tags if substituted */
p.h1,
p.h2,
p.h3,
p.h4,
p.h5,
p.h6 {
    font-family: 'Cairo', sans-serif !important;
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}

p.h1 {
    font-size: 2.5em;
}

p.h2 {
    font-size: 2em;
}

p.h3 {
    font-size: 1.75em;
}

p.h4 {
    font-size: 1.5em;
}

p.h5 {
    font-size: 1.25em;
}

p.h6 {
    font-size: 1em;
}

/* Product card titles and category headings */
.card-title,
h5.card-title {
    font-weight: 400 !important;
    font-size: 1.4rem !important;
}

.gender,
h2.gender {
    font-weight: 500 !important;
}

/* Right align phone number in footer for Arabic */
.site-footer__contact li {
    text-align: right;
}

.site-footer__contact a[dir="ltr"] {
    text-align: right;
    display: inline-block;
}

.profilecontainer p {
    text-align: right;
}

/* Ensure order numbers always display in LTR direction */
[dir="ltr"] {
    direction: ltr !important;
    unicode-bidi: embed;
    display: inline-block;
}

.profilecontainer b {
    float: right;
}

.side-bar1 {
    right: auto !important;
    left: -100% !important;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1) !important;
}

.side-bar1.active {
    left: 0 !important;
    right: auto !important;
}

/* menu-btn1 removed */

.close-btn1 {
    right: auto !important;
    left: 20px !important;
}

@media (max-width: 768px) {
    .close-btn1 {
        left: 15px !important;
        right: auto !important;
    }
}

.right-column {
    text-align: right;
}

.product-description {
    text-align: right;
}

.product-description span {
    text-align: right;
}

.product-description h1 {
    text-align: right;
}

/* Back button RTL support */
.backbutton {
    margin-left: 0 !important;
    margin-right: 4vw !important;
}

.backbutton i {
    transform: scaleX(-1);
    /* Flip icon for RTL */
}

.product-description p {
    text-align: right;
}

.product-colors {
    text-align: right;
}

.product-colors span {
    text-align: right;
}

.product-configuration {
    text-align: right;
}

.cable-config {
    text-align: right;
}

.cable-config span {
    text-align: right;
}

.product-price {
    text-align: right;
}

.product-price h3 {
    text-align: right;
}

/* Fix dropdown menu for RTL - Only target navigation menu items with dropdowns */
header .navigation .menu .menu-item {
    position: relative;
    z-index: 10002;
}

/* Only apply RTL dropdown styles to menu items that have sub-menus */
/* Note: JavaScript will override positioning, so we only set defaults here */
header .navigation .menu .menu-item .sub-menu {
    top: 100%;
    text-align: right;
    z-index: 99999 !important;
    /* Position will be set by JavaScript dynamically */
}

header .navigation .menu .menu-item .sub-menu .sub-item {
    text-align: right;
}

header .navigation .menu .menu-item .sub-menu .sub-item a {
    text-align: right;
    padding: 12px 25px;
}

header .navigation .menu .menu-item .sub-menu .sub-item a:hover {
    padding-right: 30px;
    padding-left: 25px;
}

/* Preserve cart icon styling - ensure it's not affected by RTL dropdown styles */
header .navigation .menu .menu-item>a[href*="cart.php"],
header .navigation .menu .menu-item>a[href*="cart"] {
    position: relative !important;
    text-align: center !important;
    left: auto !important;
    right: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
}

header .navigation .menu .menu-item>a[href*="cart"] .fa-shopping-cart {
    position: relative !important;
    text-align: center !important;
    margin: 0 !important;
    display: inline-block !important;
}

/* Preserve cart count badge positioning - keep consistent across languages */
header .navigation .menu .menu-item>a[href*="cart"] {
    position: relative !important;
    display: inline-block !important;
    padding: 8px !important;
}

header .navigation .menu .menu-item>a[href*="cart"] .fa-shopping-cart {
    font-size: 20px !important;
    display: inline-block !important;
}

header .navigation .menu .menu-item>a[href*="cart"] .count {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 15 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    font-size: 10px !important;
}

/* Preserve user menu item styling */
header .navigation .menu .menu-item.user-menu-item,
header .navigation .menu .menu-item.user-menu-item>a {
    position: relative !important;
    text-align: left !important;
    left: auto !important;
    right: auto !important;
}

/* Language switcher menu item - maintain center alignment */
header .navigation .menu .menu-item#us {
    text-align: center !important;
}

/* Order Confirmation Page - Arabic RTL - High Specificity */
/* Override general profilecontainer rules for order confirmation */
div.profilecontainer.order-confirm-container p {
    text-align: right !important;
    direction: rtl !important;
}

div.profilecontainer.order-confirm-container .points-section {
    text-align: right !important;
    direction: rtl !important;
}

div.profilecontainer.order-confirm-container .points-section form {
    text-align: right !important;
    direction: rtl !important;
}

div.profilecontainer.order-confirm-container .points-section label {
    display: block !important;
    text-align: right !important;
    direction: rtl !important;
    width: 100% !important;
}

div.profilecontainer.order-confirm-container .points-section label p {
    text-align: right !important;
    direction: rtl !important;
    margin: 0 0 8px 0 !important;
    display: block !important;
    width: 100% !important;
}

div.profilecontainer.order-confirm-container .points-section input[type="checkbox"] {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

div.profilecontainer.order-confirm-container .delivery-info-section {
    text-align: right !important;
    direction: rtl !important;
}

div.profilecontainer.order-confirm-container .delivery-info-section h1 {
    text-align: right !important;
    direction: rtl !important;
}

div.profilecontainer.order-confirm-container .delivery-info-section p {
    text-align: right !important;
    direction: rtl !important;
}

div.profilecontainer.order-confirm-container .delivery-info-section strong {
    text-align: right !important;
}

div.profilecontainer.order-confirm-container .total-amount-display {
    text-align: right !important;
    direction: rtl !important;
}

div.profilecontainer.order-confirm-container .total-amount-display div {
    text-align: right !important;
    direction: rtl !important;
}

div.profilecontainer.order-confirm-container .total-amount-display .delivery-price-text {
    text-align: right !important;
    direction: rtl !important;
}

div.profilecontainer.order-confirm-container .total-amount-display strong {
    text-align: right !important;
    direction: rtl !important;
}

div.profilecontainer.order-confirm-container .total-amount-display br {
    display: inline;
}

div.profilecontainer.order-confirm-container .card-body .list-group-item {
    flex-direction: row-reverse !important;
}

div.profilecontainer.order-confirm-container h1 {
    text-align: right !important;
}

div.profilecontainer.order-confirm-container>a button {
    flex-direction: row-reverse !important;
}

/* Order Details Page - RTL Support */
.order-details-container {
    direction: rtl;
}

.order-info-grid {
    direction: rtl;
}

.order-info-card {
    direction: rtl;
    text-align: right;
}

.order-info-card h3 {
    text-align: right;
}

.info-row {
    direction: rtl;
    flex-direction: row-reverse;
}

.info-label {
    text-align: right;
}

.info-value {
    text-align: left;
}

.products-section {
    direction: rtl;
}

.products-section h2 {
    text-align: center;
}

/* Order Details Products Table - RTL Support */
.products-table {
    direction: rtl;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.products-table thead {
    background: transparent;
}

.products-table tbody tr {
    border-bottom: 1px solid var(--zara-border, #e5e5e5);
}

.products-table tbody tr:last-child {
    border-bottom: none;
}

/* HTML order: Image | Product Name | Size | Price */
/* In RTL, columns appear in same order but text flows RTL */

.products-table th {
    direction: rtl;
}

/* Image column (first-child) - centered */
.products-table th:first-child {
    text-align: center !important;
    width: 120px;
}

/* Product Name column (nth-child(2)) - right aligned */
.products-table th:nth-child(2) {
    text-align: right !important;
}

/* Size column (nth-child(3)) - centered */
.products-table th:nth-child(3) {
    text-align: center !important;
    width: 100px;
}

/* Price column (last-child) - right aligned */
.products-table th:last-child {
    text-align: right !important;
    width: 150px;
}

.products-table td {
    direction: rtl;
}

/* Image cell (first-child) - centered */
.products-table td:first-child {
    text-align: center !important;
    padding: 24px 8px !important;
}

/* Product Name cell (nth-child(2)) - right aligned */
.products-table td:nth-child(2) {
    text-align: right !important;
    padding: 24px 16px 24px 20px !important;
}

/* Size cell (nth-child(3)) - centered */
.products-table td:nth-child(3) {
    text-align: center !important;
    padding: 24px 8px !important;
}

/* Price cell (last-child) - right aligned */
.products-table td:last-child {
    text-align: right !important;
    padding: 24px 20px 24px 16px !important;
    white-space: nowrap;
}

/* Specific cell classes for better control */
.product-image-cell {
    text-align: center !important;
    width: 120px;
}

.product-image-cell img {
    margin: 0 auto;
    display: block;
}

.product-name-cell {
    text-align: right !important;
    direction: rtl;
}

.product-name-cell a {
    text-align: right;
    direction: rtl;
    display: block;
}

.product-size-cell {
    text-align: center !important;
    width: 100px;
}

.product-price-cell {
    text-align: right !important;
    width: 150px;
    white-space: nowrap;
    direction: rtl;
}

.quantity-badge {
    margin-right: 0;
    margin-left: 8px;
    display: inline-block;
}