/*
 * Your global styles here
 */
html,
body {
    height: 100%;
}

html {
    background: white;
}

body {
    margin: 0;
}


/* iOS Safari zooms the whole page when a text field with a font-size under 16px takes focus, and
   leaves it zoomed (the case / subscription / withdrawal modals ended up magnified once the
   keyboard opened). Keeping every typed-into control at 16px on touch screens stops the zoom
   without disabling pinch-zoom for accessibility. !important because component styles are
   attribute-scoped and would otherwise win; this site-wide file also reaches the inputs inside
   lightning-input / lightning-combobox. */
@media (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* UAT-265: Arabic notifications tray opens towards the page, not off the left edge.
   The tray belongs to the platform notifications component, so blomLayout.css cannot reach it;
   the layout's .rtl class is on an ancestor, which is why this lives in the site-wide styles.
   Mirrors the user-menu dropdown (anchored to the left edge of its trigger). Desktop only: on
   mobile the bell sits in its own header bar. */
@media (min-width: 1025px) {
    .layout-container.rtl .header-slot-notifications [class*="tray" i],
    .layout-container.rtl .header-slot-notifications [class*="dropdown" i] {
        right: auto !important;
        left: 0 !important;
    }

    /* The tray renders left-to-right inside the Arabic page: the title / "Mark all as read" order and
       the icon-then-text order of each notification were mirrored wrongly. direction is inherited,
       so setting it on the tray container flips every row inside it. */
    .layout-container.rtl .header-slot-notifications [class*="tray" i],
    .layout-container.rtl .header-slot-notifications [class*="dropdown" i],
    .layout-container.rtl .header-slot-notifications [class*="dropdown" i] *,
    .layout-container.rtl .header-slot-notifications [class*="tray" i] * {
        direction: rtl !important;
    }

    /* Each notification row is [avatar][text]. Set it as an explicit rtl flex row so the icon sits on
       the right with the text after it, and put the icon's gap on its left. */
    .layout-container.rtl .header-slot-notifications .notification-content:has(> .notification-avatar) {
        display: flex !important;
        flex-direction: row !important;
        direction: rtl !important;
    }

    .layout-container.rtl .header-slot-notifications .notification-content > .notification-avatar {
        position: static !important;
        float: none !important;
        flex: 0 0 auto;
        margin-right: 0 !important;
        margin-left: 12px !important;
    }

    .layout-container.rtl .header-slot-notifications .notification-content > .notification-content {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* "2 hours ago" is always English (the component formats it itself), so keep it left-to-right,
       otherwise the bullet and the number land on the wrong side of the words. */
    .layout-container.rtl .header-slot-notifications span:has(> .notification-age) {
        display: block;
        direction: ltr !important;
        text-align: right;
    }
}