/* ==================================================
   Global / Base Styles
================================================== */

html {
    -webkit-text-size-adjust: 100%;
    touch-action: pan-x pan-y pinch-zoom;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
    line-height: 1.5;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font: inherit;
}

button {
    color: inherit;
}

/*
 * iOS Safari zooms the page when a focused text control is smaller than 16px.
 * Keep this mobile-only and text-control-only so compact buttons and controls
 * such as checkboxes, radios, and range inputs retain their existing sizes.
 */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 767px) {
        input:not([type]),
        input[type="text"],
        input[type="search"],
        input[type="email"],
        input[type="password"],
        input[type="url"],
        input[type="tel"],
        input[type="number"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="month"],
        input[type="time"],
        input[type="week"],
        select,
        textarea {
            font-size: 16px !important;
        }
    }
}

img,
svg {
    vertical-align: middle;
}

.app-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 16px;
}

/* Keep accessible labels available to screen readers without showing them visually. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}