/**
 * Shared frontend presentation overrides for all plugin shortcodes.
 */

/* Make the complete plugin interface slightly bolder without affecting the theme. */
.me-calendars-react-app,
.me-calendars-admin-wrap {
    --font-weight-medium: 600;
    --font-weight-semibold: 700;
    --font-weight-bold: 800;
    --font-weight-extrabold: 850;
    --font-weight-black: 900;
    font-family: "Vazirmatn", "Vazir", Tahoma, Arial, sans-serif !important;
    font-weight: 700;
    text-align: center;
}

/* Use one bold Vazir face across React, form controls and the WordPress admin UI. */
.me-calendars-react-app *,
.me-calendars-react-app *::placeholder,
.me-calendars-admin-wrap *,
.me-calendars-admin-wrap *::placeholder {
    font-family: "Vazirmatn", "Vazir", Tahoma, Arial, sans-serif !important;
    font-weight: 700 !important;
}

.me-calendars-react-app h1,
.me-calendars-react-app h2,
.me-calendars-react-app h3,
.me-calendars-react-app h4,
.me-calendars-react-app h5,
.me-calendars-react-app h6,
.me-calendars-react-app strong,
.me-calendars-react-app b,
.me-calendars-admin-wrap h1,
.me-calendars-admin-wrap h2,
.me-calendars-admin-wrap h3,
.me-calendars-admin-wrap strong,
.me-calendars-admin-wrap b {
    font-weight: 800 !important;
}

/* Keep shortcode content isolated from surrounding WordPress page content. */
.me-calendars-react-app {
    box-sizing: border-box;
    clear: both;
    display: block;
    isolation: isolate;
    margin-block: 1.5rem;
    margin-inline: auto !important;
    max-width: 100% !important;
    min-width: 0;
    overflow: clip;
    position: relative;
    inset-inline: auto !important;
    transform: none !important;
    width: 100% !important;
}

/* Neutralize full-width breakout rules from cached markup or aggressive themes. */
.me-calendars-react-app.alignfull,
.me-calendars-react-app.me-calendars-full-width {
    left: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    right: auto !important;
    width: 100% !important;
}

.me-calendars-react-app .me-calendars-wrapper,
.me-calendars-react-app .me-calendar-section {
    margin-inline: auto !important;
    max-width: 100% !important;
    width: 100% !important;
}

.me-calendars-react-app .me-calendar-section {
    padding-left: clamp(0.75rem, 2vw, 1.5rem) !important;
    padding-right: clamp(0.75rem, 2vw, 1.5rem) !important;
}

.me-calendars-react-app *,
.me-calendars-react-app *::before,
.me-calendars-react-app *::after {
    box-sizing: border-box;
    min-width: 0;
}

.me-calendars-react-app img,
.me-calendars-react-app svg,
.me-calendars-react-app canvas {
    height: auto;
    max-width: 100%;
}

.me-calendars-react-app input,
.me-calendars-react-app select,
.me-calendars-react-app textarea,
.me-calendars-react-app button {
    max-width: 100%;
    text-align: center;
}

/* Keep every section and card visually centered while preserving functional grids. */
.me-calendars-react-app .me-calendar-section,
.me-calendars-react-app [class*="bg-white"][class*="rounded"],
.me-calendars-react-app [class*="bg-slate-50"][class*="rounded"],
.me-calendars-react-app [class*="bg-emerald-50"][class*="rounded"],
.me-calendars-react-app [class*="bg-rose-50"][class*="rounded"],
.me-calendars-admin-wrap {
    text-align: center !important;
}


/* Make the main cards visually stronger with darker borders, richer fills and clearer depth. */
.me-calendars-react-app [class*="bg-white"][class*="rounded"],
.me-calendars-react-app [class*="bg-slate-50"][class*="rounded"],
.me-calendars-react-app [class*="bg-emerald-50"][class*="rounded"],
.me-calendars-react-app [class*="bg-rose-50"][class*="rounded"] {
    border: 1px solid #cbd5e1 !important;
    box-shadow:
        0 14px 30px -22px rgb(15 23 42 / 38%),
        0 8px 16px -12px rgb(15 23 42 / 18%) !important;
}

.me-calendars-react-app [class*="bg-white"][class*="rounded"] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.me-calendars-react-app [class*="bg-slate-50"][class*="rounded"] {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
}

.me-calendars-react-app [class*="bg-emerald-50"][class*="rounded"] {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border-color: #86efac !important;
}

.me-calendars-react-app [class*="bg-rose-50"][class*="rounded"] {
    background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%) !important;
    border-color: #fda4af !important;
}

.me-calendars-react-app [class*="bg-white"][class*="rounded"] h1,
.me-calendars-react-app [class*="bg-white"][class*="rounded"] h2,
.me-calendars-react-app [class*="bg-white"][class*="rounded"] h3,
.me-calendars-react-app [class*="bg-slate-50"][class*="rounded"] h1,
.me-calendars-react-app [class*="bg-slate-50"][class*="rounded"] h2,
.me-calendars-react-app [class*="bg-slate-50"][class*="rounded"] h3,
.me-calendars-react-app [class*="bg-emerald-50"][class*="rounded"] h1,
.me-calendars-react-app [class*="bg-emerald-50"][class*="rounded"] h2,
.me-calendars-react-app [class*="bg-emerald-50"][class*="rounded"] h3,
.me-calendars-react-app [class*="bg-rose-50"][class*="rounded"] h1,
.me-calendars-react-app [class*="bg-rose-50"][class*="rounded"] h2,
.me-calendars-react-app [class*="bg-rose-50"][class*="rounded"] h3 {
    color: #0f172a !important;
}

.me-calendars-react-app h1[class~="flex"],
.me-calendars-react-app h2[class~="flex"],
.me-calendars-react-app h3[class~="flex"],
.me-calendars-react-app h4[class~="flex"] {
    justify-content: center;
}

.me-calendars-react-app label,
.me-calendars-react-app p,
.me-calendars-react-app li,
.me-calendars-react-app dt,
.me-calendars-react-app dd,
.me-calendars-react-app th,
.me-calendars-react-app td {
    text-align: center;
}

/* Center the converter title and subtitle for all six countries. */
.me-calendars-react-app[data-tab="converter"]
    .me-calendar-section
    [class~="pb-4"][class~="border-b"] {
    justify-content: center;
    text-align: center;
}

.me-calendars-react-app[data-tab="converter"]
    .me-calendar-section
    [class~="pb-4"][class~="border-b"] > div {
    width: 100%;
}

.me-calendars-react-app[data-tab="converter"]
    .me-calendar-section
    [class~="pb-4"][class~="border-b"] h2 {
    justify-content: center;
}

/* Remove the working-day / public-holiday / weekend status badge entirely. */
.me-calendars-react-app[data-tab="converter"]
    .me-calendar-section
    [class~="md:text-left"] > [class~="flex-col"] > [class~="mt-1.5"] {
    display: none !important;
}

/* Swap the country label and week-start note in all monthly calendars. */
.me-calendars-react-app[data-tab="calendar"]
    .me-calendar-section
    [class~="px-6"][class~="py-3"][class~="justify-between"][class~="text-xs"] {
    flex-direction: row-reverse;
}

/* Refine the clock without changing the existing slate, white and teal palette. */
.me-calendars-react-app .me-analog-clock {
    border-color: #e2e8f0;
    box-shadow:
        0 18px 30px -18px rgb(15 23 42 / 34%),
        0 7px 14px -8px rgb(15 23 42 / 18%),
        inset 0 0 0 1px rgb(241 245 249 / 90%);
    padding: 0.55rem;
    transition: box-shadow 220ms ease, transform 220ms ease;
}

.me-calendars-react-app .me-analog-clock::before,
.me-calendars-react-app .me-analog-clock::after {
    border: 1px solid #f1f5f9;
    border-radius: 9999px;
    content: "";
    inset: 0.35rem;
    pointer-events: none;
    position: absolute;
}

.me-calendars-react-app .me-analog-clock::after {
    border-color: rgb(226 232 240 / 65%);
    inset: 0.7rem;
}

.me-calendars-react-app .me-analog-clock:hover {
    box-shadow:
        0 22px 36px -18px rgb(15 23 42 / 38%),
        0 9px 18px -9px rgb(15 23 42 / 20%),
        inset 0 0 0 1px rgb(241 245 249 / 95%);
    transform: translateY(-2px);
}

.me-calendars-react-app #analog-clock-svg {
    filter: drop-shadow(0 1px 1px rgb(15 23 42 / 8%));
    position: relative;
    z-index: 1;
}

/* Hijri-first monthly calendar, based on the supplied compact grid reference. */
.me-calendars-react-app[data-tab="calendar"] [class~="lg:col-span-8"] {
    border-color: #94a3b8;
    border-radius: 1rem;
    box-shadow: 0 8px 20px -14px rgb(15 23 42 / 30%);
}

.me-calendars-react-app[data-tab="calendar"]
    [class~="lg:col-span-8"] > div:first-child > div:first-child {
    align-items: stretch;
    display: flex;
    flex-direction: column;
}

.me-calendars-react-app[data-tab="calendar"]
    [class~="lg:col-span-8"] > div:first-child > div:first-child > p {
    display: flex;
    margin-top: 0.35rem;
    width: 100%;
}

.me-calendars-react-app[data-tab="calendar"]
    [class~="lg:col-span-8"] > div:first-child > div:first-child > p > span:first-child {
    display: none;
}

.me-calendars-react-app[data-tab="calendar"] .me-month-grid {
    gap: 0.35rem;
}

.me-calendars-react-app[data-tab="calendar"] .me-calendar-day {
    border-color: #64748b;
    border-radius: 0.65rem;
    min-height: 108px;
    padding: 0.6rem;
}

.me-calendars-react-app[data-tab="calendar"] .me-calendar-day-empty {
    background: rgb(248 250 252 / 52%);
    border: 1px dashed #dbe3ec;
    border-radius: 0.65rem;
    min-height: 108px;
}

.me-calendars-react-app[data-tab="calendar"]
    .me-calendar-day > div:first-child > span:last-child {
    font-size: 1rem;
    font-weight: 900;
}

/* Week-of-year badges (W27, W28, ...) are intentionally omitted everywhere. */
.me-calendars-react-app[data-tab="calendar"]
    .me-calendar-day > div:first-child > span:first-child:not(:last-child) {
    display: none !important;
}

/* Tablet and phone calendar: retain all seven days without crushing content. */
@media (max-width: 767px) {
    .me-calendars-react-app .me-calendar-section {
        padding-inline: 0.75rem !important;
    }

    .me-calendars-react-app[data-tab="calendar"]
        .me-calendar-section
        [class~="lg:col-span-8"] {
        overflow: visible !important;
        width: 100%;
    }

    .me-calendars-react-app[data-tab="calendar"]
        .me-calendar-section
        [class~="lg:col-span-8"] > * {
        min-width: 0;
        width: 100%;
    }

    .me-calendars-react-app[data-tab="converter"]
        [class~="p-6"] {
        padding: 1rem;
    }

    .me-calendars-react-app .me-analog-clock {
        height: 10rem;
        width: 10rem;
    }

    .me-calendars-react-app [class~="md:flex-row"],
    .me-calendars-react-app [class~="sm:flex-row"] {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .me-calendars-react-app input,
    .me-calendars-react-app select,
    .me-calendars-react-app textarea {
        font-size: 16px !important;
        width: 100%;
    }

    .me-calendars-react-app[data-tab="calendar"] .me-month-grid {
        gap: 0.2rem;
    }

    .me-calendars-react-app[data-tab="calendar"] .me-calendar-day,
    .me-calendars-react-app[data-tab="calendar"] .me-calendar-day-empty {
        border-radius: 0.45rem;
        min-height: 76px;
        overflow-wrap: anywhere;
        padding: 0.3rem;
    }

    .me-calendars-react-app[data-tab="calendar"] .me-calendar-day {
        font-size: 0.68rem;
    }

    .me-calendars-react-app[data-tab="calendar"]
        .me-calendar-day > div:first-child > span:last-child {
        font-size: 0.85rem;
    }
}

@media (max-width: 479px) {
    .me-calendars-react-app {
        margin-block: 1rem;
    }

    .me-calendars-react-app .me-calendar-section {
        padding-inline: 0.5rem !important;
    }

    .me-calendars-react-app h1,
    .me-calendars-react-app h2 {
        overflow-wrap: anywhere;
    }

    .me-calendars-react-app {
        font-size: 0.875rem;
    }

    .me-calendars-react-app .me-calendar-section {
        padding-inline: 0.35rem !important;
    }

    .me-calendars-react-app [class~="p-6"],
    .me-calendars-react-app [class~="md:p-6"],
    .me-calendars-react-app [class~="md:p-8"] {
        padding: 0.75rem !important;
    }

    .me-calendars-react-app[data-tab="calendar"] .me-calendar-day,
    .me-calendars-react-app[data-tab="calendar"] .me-calendar-day-empty {
        min-height: 68px;
        padding: 0.2rem;
    }

    .me-calendars-react-app[data-tab="calendar"] [class~="text-[9px]"],
    .me-calendars-react-app[data-tab="calendar"] [class~="text-[8px]"] {
        font-size: 0.55rem !important;
        line-height: 1.15;
    }
}


/* Stronger visual card framing across calendar, holidays and country info widgets. */
.me-calendars-react-app [class*="rounded-"][class*="border"],
.me-calendars-react-app [class*="rounded"][class*="border"],
.me-calendars-react-app [class*="border-slate-200"],
.me-calendars-react-app [class*="border-slate-100"] {
    border-width: 1.5px !important;
}

.me-calendars-react-app [class*="shadow-sm"],
.me-calendars-react-app [class*="shadow-md"],
.me-calendars-react-app [class*="shadow-lg"] {
    box-shadow:
        0 16px 32px -22px rgb(15 23 42 / 30%),
        0 8px 14px -10px rgb(15 23 42 / 16%) !important;
}

.me-calendars-react-app [class*="lg:col-span-8"],
.me-calendars-react-app [class*="lg:col-span-4"] > div,
.me-calendars-react-app [class*="space-y-4"] > [class*="bg-white"],
.me-calendars-react-app [class*="space-y-4"] > [class*="bg-slate-50"] {
    border-color: #94a3b8 !important;
}

.me-calendars-react-app [class*="lg:col-span-4"] [class*="rounded-xl"],
.me-calendars-react-app [class*="lg:col-span-4"] [class*="rounded-2xl"],
.me-calendars-react-app [class*="lg:col-span-4"] [class*="rounded-[24px]"],
.me-calendars-react-app [class*="lg:col-span-4"] [class*="rounded-[28px]"] {
    border-color: #94a3b8 !important;
}

.me-calendars-react-app [class*="lg:col-span-4"] [class*="border-slate-100"],
.me-calendars-react-app [class*="lg:col-span-4"] [class*="border-slate-200/60"],
.me-calendars-react-app [class*="lg:col-span-4"] [class*="border-slate-200"] {
    border-color: #cbd5e1 !important;
}

.me-calendars-react-app [class*="lg:col-span-4"] [class*="bg-white"] [class*="rounded-xl"],
.me-calendars-react-app [class*="lg:col-span-4"] [class*="bg-white"] [class*="rounded-2xl"] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.me-calendars-react-app [class*="overflow-y-auto"] > div,
.me-calendars-react-app [class*="overflow-y-auto"] article,
.me-calendars-react-app [class*="overflow-y-auto"] li {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 1rem !important;
    box-shadow: 0 10px 22px -20px rgb(15 23 42 / 28%) !important;
}

.me-calendars-react-app [class*="grid"] [class*="rounded-lg"],
.me-calendars-react-app [class*="grid"] [class*="rounded-xl"] {
    border-color: #94a3b8 !important;
}


/* === v3 visual refinements requested by client === */

/* Make calendar cells and sidebar/info rectangles bolder and more defined. */
.me-calendars-react-app[data-tab="calendar"] .me-calendar-day,
.me-calendars-react-app[data-tab="calendar"] .me-calendar-day-empty {
    border-width: 2px !important;
    border-color: #94a3b8 !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 10px 20px -18px rgb(15 23 42 / 30%) !important;
}

.me-calendars-react-app[data-tab="calendar"] .me-calendar-day:hover {
    border-color: #64748b !important;
    box-shadow: 0 14px 28px -18px rgb(15 23 42 / 34%) !important;
}

.me-calendars-react-app[data-tab="calendar"] [class*="lg:col-span-4"] > div,
.me-calendars-react-app[data-tab="calendar"] [class*="lg:col-span-4"] [class*="rounded-lg"],
.me-calendars-react-app[data-tab="calendar"] [class*="lg:col-span-4"] [class*="rounded-xl"],
.me-calendars-react-app[data-tab="calendar"] [class*="lg:col-span-4"] [class*="rounded-2xl"],
.me-calendars-react-app[data-tab="calendar"] [class*="lg:col-span-4"] [class*="rounded-[24px]"] {
    border-width: 1.75px !important;
    border-color: #94a3b8 !important;
}

.me-calendars-react-app[data-tab="calendar"] [class*="overflow-y-auto"] > div,
.me-calendars-react-app[data-tab="calendar"] [class*="overflow-y-auto"] article,
.me-calendars-react-app[data-tab="calendar"] [class*="overflow-y-auto"] li,
.me-calendars-react-app[data-tab="calendar"] [class*="space-y-4"] > div,
.me-calendars-react-app[data-tab="calendar"] [class*="space-y-3"] > div {
    border-width: 1.5px !important;
}

/* Make today's date more clearly green and highlighted. */
.me-calendars-react-app[data-tab="calendar"] .me-calendar-day[class*="border-emerald-500"] {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border-color: #16a34a !important;
    box-shadow:
        0 0 0 2px rgb(34 197 94 / 16%),
        0 18px 30px -22px rgb(22 163 74 / 38%) !important;
}

.me-calendars-react-app[data-tab="calendar"] .me-calendar-day[class*="border-emerald-500"] > div:first-child > span:last-child,
.me-calendars-react-app[data-tab="calendar"] .me-calendar-day[class*="border-emerald-500"] [class*="text-emerald-700"] {
    color: #15803d !important;
}

.me-calendars-react-app[data-tab="calendar"] .me-calendar-day[class*="border-emerald-500"] [class*="ring-emerald-500/10"] {
    --tw-ring-color: rgb(34 197 94 / 0.22) !important;
}

/* Desktop layout: move the sidebar to the left and the main calendar to the right. */
@media (min-width: 1024px) {
    .me-calendars-react-app[data-tab="calendar"] [class*="lg:grid-cols-12"] > [class*="lg:col-span-4"] {
        order: 1;
    }

    .me-calendars-react-app[data-tab="calendar"] [class*="lg:grid-cols-12"] > [class*="lg:col-span-8"] {
        order: 2;
    }
}


/* === v4 mobile overflow, timezone and rtl alignment fixes === */

/* Keep holiday labels inside calendar cells on mobile and avoid overflow. */
.me-calendars-react-app[data-tab="calendar"] .me-calendar-day [class*="text-red-600"],
.me-calendars-react-app[data-tab="calendar"] .me-calendar-day [class*="text-rose-600"],
.me-calendars-react-app[data-tab="calendar"] .me-calendar-day [class*="text-rose-500"] {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
    text-align: center !important;
}

.me-calendars-react-app[data-tab="calendar"] .me-calendar-day [class*="text-red-600"] {
    line-height: 1.15 !important;
    font-size: 0.54rem !important;
}

@media (max-width: 640px) {
    .me-calendars-react-app[data-tab="calendar"] .me-calendar-day,
    .me-calendars-react-app[data-tab="calendar"] .me-calendar-day-empty {
        padding: 0.35rem !important;
    }

    .me-calendars-react-app[data-tab="calendar"] .me-calendar-day [class*="text-red-600"] {
        font-size: 0.46rem !important;
        line-height: 1.08 !important;
    }

    .me-calendars-react-app[data-tab="calendar"] .me-calendar-day [class*="text-rose-500"],
    .me-calendars-react-app[data-tab="calendar"] .me-calendar-day [class*="text-slate-600"],
    .me-calendars-react-app[data-tab="calendar"] .me-calendar-day [class*="text-slate-400"] {
        font-size: 0.43rem !important;
    }
}

/* In RTL desktop/tablet, keep the country badge and week-start note right-aligned. */
.me-calendars-react-app[dir="rtl"] [class*="px-6 py-3 bg-[#F8FAFC] border-b border-slate-200 flex justify-between items-center text-xs font-medium text-slate-500"] {
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
}

.me-calendars-react-app[dir="rtl"] [class*="px-6 py-3 bg-[#F8FAFC] border-b border-slate-200 flex justify-between items-center text-xs font-medium text-slate-500"] > * {
    text-align: right !important;
}

/* Today/details cards and top notes should remain right-aligned for Arabic layouts. */
.me-calendars-react-app[dir="rtl"] [class*="md:w-1/4 text-center md:text-left text-xs text-slate-400 font-bold"],
.me-calendars-react-app[dir="rtl"] [class*="text-[10px] font-extrabold text-emerald-700 bg-emerald-50"] {
    text-align: right !important;
}

/* Plain shortcode/mobile calendar fallback: prevent holiday text overflow as well. */
.me-calendars-widget-wrap [id="c-grid"] > div [class*="text-rose-600"],
.me-calendars-widget-wrap [id="c-grid"] > div [class*="text-red-600"] {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-size: 0.5rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
}


/* === v5 layout correction: restore original desktop structure and limit RTL tweaks === */

/* Today tab on desktop: keep the details/clock panel on the LEFT and the main card on the RIGHT. */
@media (min-width: 1024px) {
    .me-calendars-react-app[data-tab="today"][dir="rtl"] [class*="grid grid-cols-1 lg:grid-cols-12"] {
        direction: ltr !important;
    }

    .me-calendars-react-app[data-tab="today"][dir="rtl"] [class*="grid grid-cols-1 lg:grid-cols-12"] > [class*="lg:col-span-4"],
    .me-calendars-react-app[data-tab="today"][dir="rtl"] [class*="grid grid-cols-1 lg:grid-cols-12"] > [class*="lg:col-span-8"] {
        direction: rtl !important;
    }
}

/* In the Today tab, only the two requested texts should move to the right in RTL:
   1) the week-start note
   2) the country badge */
.me-calendars-react-app[data-tab="today"][dir="rtl"] [class*="relative flex flex-col md:flex-row md:items-center md:justify-between pb-6 border-b border-slate-100 gap-4"] {
    direction: ltr !important;
}

.me-calendars-react-app[data-tab="today"][dir="rtl"] [class*="relative flex flex-col md:flex-row md:items-center md:justify-between pb-6 border-b border-slate-100 gap-4"] > * {
    direction: rtl !important;
}

.me-calendars-react-app[data-tab="today"][dir="rtl"] [class*="md:w-1/4 text-center md:text-left text-xs text-slate-400 font-bold"] {
    text-align: right !important;
}

.me-calendars-react-app[data-tab="today"][dir="rtl"] [class*="flex justify-end pt-4"] {
    direction: ltr !important;
    justify-content: flex-end !important;
}

.me-calendars-react-app[data-tab="today"][dir="rtl"] [class*="flex justify-end pt-4"] > * {
    direction: rtl !important;
    text-align: right !important;
}

/* Restore the monthly calendar header row to its natural spacing while keeping RTL text readable. */
.me-calendars-react-app[data-tab="calendar"][dir="rtl"] .me-calendar-section [class~="px-6"][class~="py-3"][class~="justify-between"][class~="text-xs"] {
    justify-content: space-between !important;
    gap: 0.75rem !important;
}

.me-calendars-react-app[data-tab="calendar"][dir="rtl"] .me-calendar-section [class~="px-6"][class~="py-3"][class~="justify-between"][class~="text-xs"] > * {
    text-align: right !important;
}


/* === v6 definitive Today layout and RTL text placement === */

/* Physical desktop order is fixed independently of RTL:
   details/clock column on the left, main date card on the right. */
@media (min-width: 1024px) {
    .me-calendars-react-app[data-tab="today"] [class*="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start"] {
        direction: ltr !important;
    }

    .me-calendars-react-app[data-tab="today"] [class*="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start"] > [class*="lg:col-span-4"],
    .me-calendars-react-app[data-tab="today"] [class*="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start"] > [class*="lg:col-span-8"] {
        direction: rtl !important;
    }
}

/* Only the week-start note and country badge sit on the right in Arabic. */
.me-calendars-react-app[data-tab="today"] .me-week-start-note {
    order: -1 !important;
    text-align: right !important;
}

.me-calendars-react-app[data-tab="today"] .me-week-header-spacer {
    order: 1 !important;
}

.me-calendars-react-app[data-tab="today"] .me-country-badge-row {
    direction: rtl !important;
    justify-content: flex-start !important;
}

.me-calendars-react-app[data-tab="today"] .me-country-badge-row > * {
    text-align: right !important;
}


/* === v8 requested UI corrections for all six countries === */

/* 1) Calendar tab display order must be:
   main calendar first, then upcoming holidays, then country info
   on both desktop and mobile. Keep the main calendar on the left and sidebar on the right. */
.me-calendars-react-app[data-tab="calendar"] [class*="grid grid-cols-1 lg:grid-cols-12 gap-6 transition-all duration-300"] {
    direction: ltr !important;
}

.me-calendars-react-app[data-tab="calendar"] [class*="grid grid-cols-1 lg:grid-cols-12 gap-6 transition-all duration-300"] > [class*="lg:col-span-8"] {
    order: 1 !important;
    direction: rtl !important;
}

.me-calendars-react-app[data-tab="calendar"] [class*="grid grid-cols-1 lg:grid-cols-12 gap-6 transition-all duration-300"] > [class*="lg:col-span-4"] {
    order: 2 !important;
    direction: rtl !important;
}

/* 2) Sidebar section headings remain right aligned in Arabic. */
.me-calendars-react-app[data-tab="calendar"][dir="rtl"] [class*="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col gap-4"] > h3,
.me-calendars-react-app[data-tab="calendar"][dir="rtl"] [class*="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col gap-4"] [class*="border-b border-slate-100 pb-2"] h3,
.me-calendars-react-app[data-tab="calendar"][dir="rtl"] [class*="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col gap-4"] [class*="flex justify-between items-center border-b border-slate-100 pb-2"] h3 {
    width: 100% !important;
    justify-content: flex-end !important;
    text-align: right !important;
}

/* 3) Today details header: icon should sit before the text (on the right side in Arabic). */
.me-calendars-react-app[data-tab="today"][dir="rtl"] [class*="flex items-center justify-between pb-3 border-b-2 border-slate-900"] {
    justify-content: flex-end !important;
    gap: 0.55rem !important;
}

.me-calendars-react-app[data-tab="today"][dir="rtl"] [class*="flex items-center justify-between pb-3 border-b-2 border-slate-900"] > svg,
.me-calendars-react-app[data-tab="today"][dir="rtl"] [class*="flex items-center justify-between pb-3 border-b-2 border-slate-900"] > .lucide {
    order: 1 !important;
    flex: 0 0 auto !important;
}

.me-calendars-react-app[data-tab="today"][dir="rtl"] [class*="flex items-center justify-between pb-3 border-b-2 border-slate-900"] > h3 {
    order: 2 !important;
    margin: 0 !important;
    text-align: right !important;
}

/* 4) Keep the Today main title centered and pull the week-start note slightly away from the frame. */
@media (min-width: 768px) {
    .me-calendars-react-app[data-tab="today"] [class*="relative flex flex-col md:flex-row md:items-center md:justify-between pb-6 border-b border-slate-100 gap-4"] {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: start !important;
        gap: 1rem !important;
    }

    .me-calendars-react-app[data-tab="today"] [class*="relative flex flex-col md:flex-row md:items-center md:justify-between pb-6 border-b border-slate-100 gap-4"] > [class*="hidden md:block md:w-1/4"] {
        display: block !important;
        width: auto !important;
    }

    .me-calendars-react-app[data-tab="today"] [class*="relative flex flex-col md:flex-row md:items-center md:justify-between pb-6 border-b border-slate-100 gap-4"] > [class*="flex-1 text-center"] {
        justify-self: center !important;
        text-align: center !important;
    }

    .me-calendars-react-app[data-tab="today"] [class*="relative flex flex-col md:flex-row md:items-center md:justify-between pb-6 border-b border-slate-100 gap-4"] > [class*="md:w-1/4 text-center md:text-left text-xs text-slate-400 font-bold"] {
        justify-self: end !important;
        text-align: right !important;
        padding-inline-end: 0.7rem !important;
    }
}

/* 5) In the calendar top strip, keep the week-start note slightly away from the right border. */
.me-calendars-react-app[data-tab="calendar"][dir="rtl"] [class*="px-6 py-3 bg-[#F8FAFC] border-b border-slate-200 flex justify-between items-center text-xs font-medium text-slate-500"] > span:last-child {
    padding-inline-end: 0.45rem !important;
}

/* 6) Mobile weekday headers: prevent overflow and make them readable. */
@media (max-width: 640px) {
    .me-calendars-react-app[data-tab="calendar"] [class*="grid grid-cols-7 gap-2 mb-2 text-center"] > div {
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        font-size: 0.54rem !important;
        line-height: 1.05 !important;
        padding-top: 0.28rem !important;
        padding-bottom: 0.28rem !important;
        letter-spacing: 0 !important;
    }

    /* Gregorian label inside each day: make the date readable and hide the repetitive word "الميلادي" on phones. */
    .me-calendars-react-app[data-tab="calendar"] .me-calendar-day [class*="flex justify-between items-end text-[9px] text-slate-400"] > span:first-child {
        font-size: 0.62rem !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        color: #64748b !important;
    }

    .me-calendars-react-app[data-tab="calendar"] .me-calendar-day [class*="flex justify-between items-end text-[9px] text-slate-400"] > span:last-child {
        display: none !important;
    }

    .me-calendars-react-app[data-tab="calendar"] .me-calendar-day [class*="text-[9px] font-bold text-red-600 text-center leading-tight"] {
        font-size: 0.48rem !important;
        line-height: 1.05 !important;
    }
}


/* === v8 restore calendar/sidebar order to the previous desired layout === */
/* Calendar must stay on the LEFT and the two side panels on the RIGHT in desktop view. */
@media (min-width: 1024px) {
    .me-calendars-react-app[data-tab="calendar"] [class*="grid grid-cols-1 lg:grid-cols-12"] > [class*="lg:col-span-8"] {
        order: 1 !important;
    }

    .me-calendars-react-app[data-tab="calendar"] [class*="grid grid-cols-1 lg:grid-cols-12"] > [class*="lg:col-span-4"] {
        order: 2 !important;
    }
}


/* === v9 today details header icon placement === */
/* Move the calendar icon to sit after the Arabic title text (at the right side of the heading). */
.me-calendars-react-app[data-tab="today"] [class*="lg:col-span-4"] > [class*="flex items-center justify-between pb-3 border-b-2 border-slate-900"] {
    position: relative !important;
    justify-content: flex-end !important;
}

.me-calendars-react-app[data-tab="today"] [class*="lg:col-span-4"] > [class*="flex items-center justify-between pb-3 border-b-2 border-slate-900"] h3 {
    width: 100% !important;
    text-align: right !important;
    padding-right: 2rem !important;
}

.me-calendars-react-app[data-tab="today"] [class*="lg:col-span-4"] > [class*="flex items-center justify-between pb-3 border-b-2 border-slate-900"] > svg,
.me-calendars-react-app[data-tab="today"] [class*="lg:col-span-4"] > [class*="flex items-center justify-between pb-3 border-b-2 border-slate-900"] > .lucide,
.me-calendars-react-app[data-tab="today"] [class*="lg:col-span-4"] > [class*="flex items-center justify-between pb-3 border-b-2 border-slate-900"] > [class*="w-5 h-5"] {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}


/* === v10 today header note alignment + mobile date line fix === */

/* Put the week-start note on the same visual row as the country badge in the Today tab. */
@media (min-width: 768px) {
    .me-calendars-react-app[data-tab="today"] [class*="lg:col-span-8"] > [class*="relative flex flex-col md:flex-row md:items-center md:justify-between pb-6 border-b border-slate-100 gap-4"] {
        position: relative !important;
        padding-bottom: 2.8rem !important;
    }

    .me-calendars-react-app[data-tab="today"] [class*="lg:col-span-8"] > [class*="relative flex flex-col md:flex-row md:items-center md:justify-between pb-6 border-b border-slate-100 gap-4"] [class*="md:w-1/4 text-center md:text-left text-xs text-slate-400 font-bold"] {
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        bottom: -1.55rem !important;
        margin: 0 !important;
        width: auto !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    .me-calendars-react-app[data-tab="today"] [class*="lg:col-span-8"] > [class*="flex justify-end pt-4"] {
        padding-top: 0.85rem !important;
    }
}

/* Keep the Gregorian date on one line on mobile inside the blue card. */
@media (max-width: 640px) {
    .me-calendars-react-app[data-tab="today"] [class*="border border-sky-100 bg-[#F0F9FF] rounded-2xl"] {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }

    .me-calendars-react-app[data-tab="today"] [class*="border border-sky-100 bg-[#F0F9FF] rounded-2xl"] > span:last-child {
        white-space: nowrap !important;
        font-size: 1.45rem !important;
        line-height: 1.2 !important;
        display: inline-block !important;
    }
}


/* === v11 precise monthly-calendar title alignment === */
/* Keep the upcoming-holidays title and calendar icon together on the right. */
.me-calendars-react-app[data-tab="calendar"][dir="rtl"] .me-upcoming-holidays-title {
    align-items: center !important;
    direction: rtl !important;
    display: inline-flex !important;
    gap: 0.35rem !important;
    justify-content: flex-start !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
    width: auto !important;
}

.me-calendars-react-app[data-tab="calendar"][dir="rtl"] .me-upcoming-holidays-title > svg {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Only in monthly calendars, right-align the Country Information heading. */
.me-calendars-react-app[data-tab="calendar"][dir="rtl"] .me-country-info-title {
    align-items: center !important;
    direction: rtl !important;
    gap: 0.35rem !important;
    justify-content: flex-start !important;
    text-align: right !important;
    width: 100% !important;
}

.me-calendars-react-app[data-tab="calendar"][dir="rtl"] .me-country-info-title > svg {
    flex: 0 0 auto !important;
    margin: 0 !important;
}


/* === v12 today header centering and note position === */
@media (min-width: 768px) {
    /* Keep the Hijri month/year and Gregorian month/year exactly centered in the box. */
    .me-calendars-react-app[data-tab="today"] [class*="lg:col-span-8"] > [class*="relative flex flex-col md:flex-row md:items-center md:justify-between pb-6 border-b border-slate-100 gap-4"] {
        display: block !important;
        position: relative !important;
        min-height: 5.2rem !important;
        padding-bottom: 1.35rem !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-week-header-spacer {
        display: none !important;
    }

    .me-calendars-react-app[data-tab="today"] [class*="lg:col-span-8"] > [class*="relative flex flex-col md:flex-row md:items-center md:justify-between pb-6 border-b border-slate-100 gap-4"] > [class*="flex-1 text-center"] {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .me-calendars-react-app[data-tab="today"] [class*="lg:col-span-8"] > [class*="relative flex flex-col md:flex-row md:items-center md:justify-between pb-6 border-b border-slate-100 gap-4"] > [class*="flex-1 text-center"] h2,
    .me-calendars-react-app[data-tab="today"] [class*="lg:col-span-8"] > [class*="relative flex flex-col md:flex-row md:items-center md:justify-between pb-6 border-b border-slate-100 gap-4"] > [class*="flex-1 text-center"] p {
        text-align: center !important;
        justify-content: center !important;
    }

    /* Put the week-start note on the right, above the country badge. */
    .me-calendars-react-app[data-tab="today"] .me-week-start-note {
        position: absolute !important;
        top: 0.15rem !important;
        right: 0.75rem !important;
        left: auto !important;
        width: auto !important;
        margin: 0 !important;
        text-align: right !important;
        white-space: nowrap !important;
        padding: 0 !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-country-badge-row {
        justify-content: flex-end !important;
        padding-top: 0.7rem !important;
        padding-right: 0.75rem !important;
        margin-top: 0 !important;
    }
}


/* === v13 monthly calendar: only right-align the Country Information header === */
.me-calendars-react-app[data-tab="calendar"][dir="rtl"] .me-country-info-title {
    display: flex !important;
    width: 100% !important;
    direction: rtl !important;
    text-align: right !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0.35rem !important;
}

.me-calendars-react-app[data-tab="calendar"][dir="rtl"] .me-country-info-title > span {
    text-align: right !important;
}

.me-calendars-react-app[data-tab="calendar"][dir="rtl"] .me-country-info-title > svg {
    flex: 0 0 auto !important;
}


/* === v14 daily header: balanced grid with true centered date title === */
.me-calendars-react-app[data-tab="today"] .me-today-header-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: start !important;
    direction: ltr !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-spacer {
    display: block !important;
    grid-column: 1 !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-title {
    grid-column: 2 !important;
    justify-self: center !important;
    direction: rtl !important;
    text-align: center !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-title h2,
.me-calendars-react-app[data-tab="today"] .me-today-header-title p {
    text-align: center !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-country {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    direction: rtl !important;
    text-align: right !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-country .me-week-start-note {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    text-align: right !important;
    white-space: normal !important;
    padding: 0 !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-country > span {
    text-align: right !important;
}


/* === v15 monthly calendar: definitive RTL alignment for Country Information header only === */
.me-calendars-react-app[data-tab="calendar"]
    [dir="rtl"]
    > [class*="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col gap-4"]
    > h3.me-country-info-title {
    direction: rtl !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: right !important;
    box-sizing: border-box !important;
    padding-inline: 12px !important;
    place-items: normal !important;
    place-content: normal !important;
    margin-inline: unset !important;
}

.me-calendars-react-app[data-tab="calendar"]
    [dir="rtl"]
    > [class*="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col gap-4"]
    > h3.me-country-info-title > span {
    text-align: right !important;
}

.me-calendars-react-app[data-tab="calendar"]
    [dir="rtl"]
    > [class*="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col gap-4"]
    > h3.me-country-info-title > svg {
    flex: 0 0 auto !important;
}


/* === v16 daily header: compact RTL country block in the top-right === */
.me-calendars-react-app[data-tab="today"] .me-today-header-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: start !important;
    direction: ltr !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-spacer {
    grid-column: 1 !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-title {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: start !important;
    direction: rtl !important;
    text-align: center !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-title h2,
.me-calendars-react-app[data-tab="today"] .me-today-header-title p {
    margin-inline: 0 !important;
    text-align: center !important;
}

.me-calendars-react-app[data-tab="today"] [dir="rtl"] .me-today-header-country {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: fit-content !important;
    max-width: 100% !important;
    gap: 6px !important;
    direction: rtl !important;
    text-align: right !important;
}

.me-calendars-react-app[data-tab="today"] [dir="rtl"] .me-today-header-country .me-week-start-note {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.me-calendars-react-app[data-tab="today"] [dir="rtl"] .me-today-header-country > span {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: right !important;
}


/* === v17 Today Details header: keep calendar icon beside the RTL title === */
.me-calendars-react-app[data-tab="today"]
    [class*="lg:col-span-4"][dir="rtl"]
    > [class*="flex items-center justify-between pb-3 border-b-2 border-slate-900"] {
    direction: rtl !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 6px !important;
}

.me-calendars-react-app[data-tab="today"]
    [class*="lg:col-span-4"][dir="rtl"]
    > [class*="flex items-center justify-between pb-3 border-b-2 border-slate-900"]
    > h3 {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: fit-content !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
}

.me-calendars-react-app[data-tab="today"]
    [class*="lg:col-span-4"][dir="rtl"]
    > [class*="flex items-center justify-between pb-3 border-b-2 border-slate-900"]
    > svg {
    order: 1 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}


/* === v18 add natural vertical spacing between week-start note and country badge === */
.me-calendars-react-app[data-tab="today"] [dir="rtl"] .me-today-header-country {
    row-gap: 12px !important;
}


/* === v19 daily header: keep country block inside the header bounds === */
.me-calendars-react-app[data-tab="today"] .me-today-header-grid {
    direction: rtl !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px 22px !important;
    overflow: hidden !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-title {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: start !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    direction: rtl !important;
    text-align: center !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-title h2,
.me-calendars-react-app[data-tab="today"] .me-today-header-title p {
    text-align: center !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-country {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    direction: rtl !important;
    text-align: right !important;
    box-sizing: border-box !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-country .me-week-start-note {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    white-space: nowrap !important;
    text-align: right !important;
    line-height: 1.4 !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-country > span {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    align-self: flex-start !important;
    text-align: right !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-spacer {
    grid-column: 3 !important;
    min-width: 0 !important;
}


/* === v20 daily header: place week-start and country badge on the RIGHT === */
.me-calendars-react-app[data-tab="today"] .me-today-header-grid {
    direction: ltr !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-spacer {
    grid-column: 1 !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-title {
    grid-column: 2 !important;
    justify-self: center !important;
    direction: rtl !important;
    text-align: center !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-country {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: fit-content !important;
    max-width: 100% !important;
    gap: 8px !important;
    direction: rtl !important;
    text-align: right !important;
}

.me-calendars-react-app[data-tab="today"] .me-today-header-country .me-week-start-note,
.me-calendars-react-app[data-tab="today"] .me-today-header-country > span {
    align-self: flex-end !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: right !important;
}

/* === v21 lower the country badge beneath the week-start text === */
.me-calendars-react-app[data-tab="today"] .me-today-header-country {
    row-gap: 14px !important;
}


/* === v23 mobile daily header: prevent title/country overlap === */
@media (max-width: 640px) {
    .me-calendars-react-app[data-tab="today"] .me-today-header-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: start !important;
        row-gap: 12px !important;
        width: 100% !important;
        padding: 14px 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        direction: rtl !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-spacer {
        display: none !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-title {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-title h2,
    .me-calendars-react-app[data-tab="today"] .me-today-header-title p {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-country {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        align-self: start !important;
        align-items: flex-end !important;
        width: fit-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        direction: rtl !important;
        text-align: right !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-country .me-week-start-note,
    .me-calendars-react-app[data-tab="today"] .me-today-header-country > span {
        max-width: 100% !important;
        text-align: right !important;
    }
}


/* === v24 mobile daily title: keep both date labels on single centered lines === */
@media (max-width: 640px) {
    .me-calendars-react-app[data-tab="today"] .me-today-header-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-title h2,
    .me-calendars-react-app[data-tab="today"] .me-today-header-title p {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
}


/* === v25 mobile daily header: stack all header groups in one centered column === */
@media (max-width: 640px) {
    .me-calendars-react-app[data-tab="today"] .me-today-header-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        justify-items: center !important;
        align-items: start !important;
        row-gap: 14px !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-title {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-country {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: center !important;
        align-self: start !important;
        align-items: center !important;
        width: fit-content !important;
        direction: rtl !important;
        text-align: center !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-country .me-week-start-note,
    .me-calendars-react-app[data-tab="today"] .me-today-header-country > span {
        align-self: center !important;
        text-align: center !important;
    }
}


/* === v26 mobile daily header: one true right-aligned vertical column === */
@media (max-width: 640px) {
    .me-calendars-react-app[data-tab="today"] .me-today-header-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        direction: rtl !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        align-self: flex-end !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right !important;
        direction: rtl !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-title h2,
    .me-calendars-react-app[data-tab="today"] .me-today-header-title p {
        width: fit-content !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-country {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        align-self: flex-end !important;
        justify-content: flex-start !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right !important;
        direction: rtl !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-country .me-week-start-note,
    .me-calendars-react-app[data-tab="today"] .me-today-header-country > span {
        align-self: flex-end !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: right !important;
    }
}


/* === v27 mobile daily header: single centered vertical column === */
@media (max-width: 640px) {
    .me-calendars-react-app[data-tab="today"] .me-today-header-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        width: 100% !important;
        text-align: center !important;
        direction: rtl !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        align-self: center !important;
        justify-content: flex-start !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
        direction: rtl !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-title h2,
    .me-calendars-react-app[data-tab="today"] .me-today-header-title p {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-country {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        align-self: center !important;
        justify-content: flex-start !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
        direction: rtl !important;
    }

    .me-calendars-react-app[data-tab="today"] .me-today-header-country .me-week-start-note,
    .me-calendars-react-app[data-tab="today"] .me-today-header-country > span {
        align-self: center !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
}