/* Custom CSS for Athr Cafe */

html, body {
    scroll-behavior: smooth;
}

/* Default Arabic Font */
html.lang-ar body {
    font-family: 'Tajawal', sans-serif;
    direction: rtl;
}

/* English Font */
html.lang-en body {
    font-family: 'Montserrat', sans-serif;
    direction: ltr;
}

/* Language Visibility Logic */
html.lang-ar .en-only {
    display: none !important;
}

html.lang-en .ar-only {
    display: none !important;
}

/* Make sure elements with .en-only but missing ar-only display properly when lang-en */
html.lang-en .en-only {
    display: inline-block; /* or block depending on context, handled below */
}

/* Specific display overrides for inline vs block */
span.en-only {
    display: inline;
}

div.en-only, p.en-only, h1.en-only, h2.en-only, h3.en-only, h4.en-only, h5.en-only, h6.en-only {
    display: block;
}

/* Ensure font overrides work for specific spans */
.font-\[\'Tajawal\'\] {
    font-family: 'Tajawal', sans-serif !important;
}

.font-\[\'Montserrat\'\] {
    font-family: 'Montserrat', sans-serif !important;
}

/* Form Styles Override */
input[type="date"], input[type="time"] {
    direction: ltr; /* Keeps the icon formatting consistent */
    text-align: right;
}

html.lang-en input[type="date"], html.lang-en input[type="time"] {
    text-align: left;
}

/* Navbar smooth transition */
#navbar {
    transition: background-color 0.3s ease, padding 0.3s ease;
}

.navbar-scrolled {
    background-color: rgba(244, 239, 234, 0.95) !important; /* athr-sand with higher opacity */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}