/*
|--------------------------------------------------------------------------
| AQARK R28-R22 Visual Refinement
|--------------------------------------------------------------------------
|
| White-first real estate marketplace refinement.
| No logo artwork change.
| Presentation only.
|
*/

/* ============================================================
   DESIGN REFINEMENT TOKENS
   ============================================================ */

:root {
    --aq-r22-bg: #ffffff;
    --aq-r22-soft: #f7f9fc;
    --aq-r22-soft-2: #fbfcfd;

    --aq-r22-text: #101828;
    --aq-r22-muted: #667085;
    --aq-r22-subtle: #98a2b3;

    --aq-r22-border: #e4e7ec;
    --aq-r22-border-soft: #eef1f5;

    --aq-r22-primary: #1686d9;
    --aq-r22-primary-soft: #eef8ff;

    --aq-r22-radius-sm: 10px;
    --aq-r22-radius: 14px;
    --aq-r22-radius-lg: 18px;
    --aq-r22-radius-xl: 24px;

    --aq-r22-shadow-xs:
        0 1px 2px rgba(16,24,40,.025);

    --aq-r22-shadow-sm:
        0 3px 10px rgba(16,24,40,.045);

    --aq-r22-shadow:
        0 12px 34px rgba(16,24,40,.075);

    --aq-r22-content:
        1440px;
}


/* ============================================================
   GLOBAL RHYTHM
   ============================================================ */

body.aq-ui {
    background:
        var(--aq-r22-bg);

    color:
        var(--aq-r22-text);
}

body.aq-ui main {
    isolation:
        isolate;
}

body.aq-ui h1,
body.aq-ui h2,
body.aq-ui h3 {
    color:
        var(--aq-r22-text);

    line-height:
        1.18;
}

body.aq-ui p {
    color:
        inherit;
}


/* ============================================================
   PUBLIC HEADER
   ============================================================ */

body[data-aqark-reference-layout="public"] > #app > header,
body[data-aqark-reference-layout="public"] header.aq-public-header {
    min-height:
        72px;

    border-bottom:
        1px solid
        var(--aq-r22-border-soft) !important;

    background:
        rgba(255,255,255,.985) !important;

    box-shadow:
        var(--aq-r22-shadow-xs) !important;

    color:
        var(--aq-r22-text) !important;
}

body[data-aqark-reference-layout="public"] header
a:not([class*="bg-"]) {
    color:
        var(--aq-r22-text);
}

body[data-aqark-reference-layout="public"] header
a:hover {
    color:
        var(--aq-r22-primary);
}

body[data-aqark-reference-layout="public"] header
nav {
    min-height:
        72px;
}

body[data-aqark-reference-layout="public"] header
[class*="max-w-"] {
    width:
        min(
            calc(100% - 32px),
            var(--aq-r22-content)
        );

    margin-inline:
        auto;
}


/* ============================================================
   PUBLIC MAIN CONTAINER
   ============================================================ */

body[data-aqark-reference-layout="public"]
main {
    width:
        100%;

    overflow:
        hidden;

    background:
        #fff;
}

body[data-aqark-reference-layout="public"]
main > section {
    padding-block:
        clamp(44px, 6vw, 84px);
}

body[data-aqark-reference-layout="public"]
main > section:nth-of-type(even) {
    background:
        var(--aq-r22-soft-2);
}


/* ============================================================
   HOMEPAGE / HERO
   ============================================================ */

body[data-aqark-reference-layout="public"]
main > section:first-of-type {
    position:
        relative;

    padding-top:
        clamp(46px, 7vw, 96px);

    padding-bottom:
        clamp(42px, 6vw, 78px);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbff 100%
        );
}

body[data-aqark-reference-layout="public"]
main > section:first-of-type::before {
    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    top:
        -240px;

    inset-inline-end:
        -180px;

    border-radius:
        999px;

    background:
        rgba(22,134,217,.055);

    pointer-events:
        none;
}

body[data-aqark-reference-layout="public"]
main > section:first-of-type h1 {
    max-width:
        900px;

    margin-inline:
        auto;

    font-size:
        clamp(36px, 5vw, 58px);

    font-weight:
        800;

    line-height:
        1.08;

    letter-spacing:
        -.04em;
}

html[dir="rtl"]
body[data-aqark-reference-layout="public"]
main > section:first-of-type h1 {
    letter-spacing:
        0;
}

body[data-aqark-reference-layout="public"]
main > section:first-of-type p {
    max-width:
        760px;

    margin-inline:
        auto;

    color:
        var(--aq-r22-muted);

    font-size:
        clamp(15px, 1.4vw, 18px);
}


/* ============================================================
   SEARCH BOXES / FILTER AREAS
   ============================================================ */

body[data-aqark-reference-layout="public"]
main form {
    accent-color:
        var(--aq-r22-primary);
}

body[data-aqark-reference-layout="public"]
main form[class*="bg-white"],

body[data-aqark-reference-layout="public"]
main div[class*="bg-white"][class*="shadow"] {
    border:
        1px solid
        var(--aq-r22-border-soft);

    box-shadow:
        var(--aq-r22-shadow-sm);
}

body[data-aqark-reference-layout="public"]
main input,

body[data-aqark-reference-layout="public"]
main select {
    min-height:
        46px;

    border-color:
        var(--aq-r22-border) !important;

    background:
        #fff;

    color:
        var(--aq-r22-text);
}

body[data-aqark-reference-layout="public"]
main input::placeholder {
    color:
        var(--aq-r22-subtle);
}


/* ============================================================
   PUBLIC BUTTONS
   ============================================================ */

body[data-aqark-reference-layout="public"]
button,

body[data-aqark-reference-layout="public"]
main a[class*="px-"] {
    min-height:
        42px;

    border-radius:
        var(--aq-r22-radius-sm);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background-color .16s ease,
        border-color .16s ease;
}

body[data-aqark-reference-layout="public"]
button:hover,

body[data-aqark-reference-layout="public"]
main a[class*="px-"]:hover {
    transform:
        translateY(-1px);
}


/* ============================================================
   PUBLIC SECTION TITLES
   ============================================================ */

body[data-aqark-reference-layout="public"]
main section h2 {
    margin-bottom:
        10px;

    font-size:
        clamp(25px, 3vw, 34px);

    font-weight:
        780;
}

body[data-aqark-reference-layout="public"]
main section h2 + p {
    color:
        var(--aq-r22-muted);
}


/* ============================================================
   PROPERTY / PROJECT / AGENCY CARDS
   ============================================================ */

body[data-aqark-reference-layout="public"]
main article,

body[data-aqark-reference-layout="public"]
main [class*="rounded-2xl"][class*="border"],

body[data-aqark-reference-layout="public"]
main [class*="rounded-xl"][class*="border"] {
    border-color:
        var(--aq-r22-border-soft) !important;

    border-radius:
        var(--aq-r22-radius-lg) !important;

    background:
        #fff;

    box-shadow:
        var(--aq-r22-shadow-xs);
}

body[data-aqark-reference-layout="public"]
main article {
    overflow:
        hidden;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

body[data-aqark-reference-layout="public"]
main article:hover {
    transform:
        translateY(-4px);

    border-color:
        #d6dce5 !important;

    box-shadow:
        var(--aq-r22-shadow);
}

body[data-aqark-reference-layout="public"]
main article img {
    transition:
        transform .4s ease;
}

body[data-aqark-reference-layout="public"]
main article:hover img {
    transform:
        scale(1.018);
}


/* ============================================================
   PROPERTY PRICE EMPHASIS
   ============================================================ */

body[data-aqark-reference-layout="public"]
main article
[class*="font-bold"],

body[data-aqark-reference-layout="public"]
main article
[class*="font-black"] {
    color:
        var(--aq-r22-text);
}


/* ============================================================
   FOOTER
   ============================================================ */

body[data-aqark-reference-layout="public"]
footer {
    margin-top:
        0;

    padding-top:
        clamp(46px, 5vw, 72px);

    border-top:
        1px solid
        var(--aq-r22-border-soft) !important;

    background:
        #fafbfc !important;
}

body[data-aqark-reference-layout="public"]
footer a {
    transition:
        color .16s ease;
}

body[data-aqark-reference-layout="public"]
footer a:hover {
    color:
        var(--aq-r22-primary);
}


/* ============================================================
   DASHBOARD WHITE-FIRST SHELL
   ============================================================ */

body[data-aqark-reference-layout="dashboard"],
body[data-aqark-reference-layout="admin"] {
    background:
        var(--aq-r22-soft);
}

body[data-aqark-reference-layout="dashboard"] > header,
body[data-aqark-reference-layout="admin"] > header {
    min-height:
        68px;

    padding-top:
        10px !important;

    padding-bottom:
        10px !important;

    border-bottom:
        1px solid
        var(--aq-r22-border-soft) !important;

    background:
        rgba(255,255,255,.985) !important;

    color:
        var(--aq-r22-text) !important;

    box-shadow:
        var(--aq-r22-shadow-xs) !important;

    backdrop-filter:
        blur(16px);
}

body[data-aqark-reference-layout="dashboard"] > header a,
body[data-aqark-reference-layout="admin"] > header a {
    color:
        var(--aq-r22-text) !important;
}

body[data-aqark-reference-layout="dashboard"] > header
[class*="text-white"],

body[data-aqark-reference-layout="admin"] > header
[class*="text-white"] {
    color:
        var(--aq-r22-text) !important;
}


/* ============================================================
   DASHBOARD COUNTRY / STATUS BADGES
   ============================================================ */

body[data-aqark-reference-layout="dashboard"] > header
[class*="bg-slate-800"],

body[data-aqark-reference-layout="admin"] > header
[class*="bg-slate-800"] {
    border:
        1px solid
        var(--aq-r22-border);

    background:
        var(--aq-r22-soft) !important;

    color:
        var(--aq-r22-muted) !important;
}


/* ============================================================
   DASHBOARD CONTENT AREA
   ============================================================ */

body[data-aqark-reference-layout="dashboard"]
main,

body[data-aqark-reference-layout="admin"]
main {
    width:
        100%;

    min-width:
        0;
}

body[data-aqark-reference-layout="dashboard"]
main > [class*="max-w-"],

body[data-aqark-reference-layout="admin"]
main > [class*="max-w-"] {
    width:
        min(
            calc(100% - 32px),
            var(--aq-r22-content)
        );

    margin-inline:
        auto;
}


/* ============================================================
   DASHBOARD PAGE TITLES
   ============================================================ */

body[data-aqark-reference-layout="dashboard"]
main h1,

body[data-aqark-reference-layout="admin"]
main h1 {
    color:
        var(--aq-r22-text);

    font-size:
        clamp(26px, 3vw, 34px);

    font-weight:
        780;

    letter-spacing:
        -.025em;
}

html[dir="rtl"]
body[data-aqark-reference-layout="dashboard"]
main h1,

html[dir="rtl"]
body[data-aqark-reference-layout="admin"]
main h1 {
    letter-spacing:
        0;
}


/* ============================================================
   DASHBOARD CARDS
   ============================================================ */

body[data-aqark-reference-layout="dashboard"]
main [class*="bg-white"],

body[data-aqark-reference-layout="admin"]
main [class*="bg-white"] {
    border-color:
        var(--aq-r22-border-soft);

    background:
        #fff;
}

body[data-aqark-reference-layout="dashboard"]
main [class*="rounded-xl"],

body[data-aqark-reference-layout="dashboard"]
main [class*="rounded-2xl"],

body[data-aqark-reference-layout="admin"]
main [class*="rounded-xl"],

body[data-aqark-reference-layout="admin"]
main [class*="rounded-2xl"] {
    border-radius:
        var(--aq-r22-radius-lg);

    box-shadow:
        var(--aq-r22-shadow-xs);
}


/* ============================================================
   DASHBOARD KPI CARDS
   ============================================================ */

body[data-aqark-reference-layout="dashboard"]
main [class*="grid"]
> [class*="bg-white"],

body[data-aqark-reference-layout="admin"]
main [class*="grid"]
> [class*="bg-white"] {
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

body[data-aqark-reference-layout="dashboard"]
main [class*="grid"]
> [class*="bg-white"]:hover,

body[data-aqark-reference-layout="admin"]
main [class*="grid"]
> [class*="bg-white"]:hover {
    transform:
        translateY(-2px);

    box-shadow:
        var(--aq-r22-shadow-sm);
}


/* ============================================================
   DASHBOARD NAVIGATION
   ============================================================ */

body[data-aqark-reference-layout="dashboard"]
nav a,

body[data-aqark-reference-layout="admin"]
nav a {
    border-radius:
        var(--aq-r22-radius-sm);

    font-weight:
        600;
}

body[data-aqark-reference-layout="dashboard"]
nav a:hover,

body[data-aqark-reference-layout="admin"]
nav a:hover {
    background:
        var(--aq-r22-primary-soft);

    color:
        var(--aq-r22-primary) !important;
}


/* ============================================================
   DASHBOARD TABS
   ============================================================ */

body[data-aqark-reference-layout="dashboard"]
[role="tablist"],

body[data-aqark-reference-layout="admin"]
[role="tablist"] {
    gap:
        4px;

    padding:
        4px;

    border:
        1px solid
        var(--aq-r22-border-soft);

    border-radius:
        var(--aq-r22-radius);

    background:
        #f3f5f8;
}

body[data-aqark-reference-layout="dashboard"]
[role="tab"],

body[data-aqark-reference-layout="admin"]
[role="tab"] {
    min-height:
        40px;

    padding-inline:
        16px;

    border-radius:
        var(--aq-r22-radius-sm);

    color:
        var(--aq-r22-muted);
}

body[data-aqark-reference-layout="dashboard"]
[role="tab"][aria-selected="true"],

body[data-aqark-reference-layout="admin"]
[role="tab"][aria-selected="true"] {
    background:
        #fff;

    color:
        var(--aq-r22-text);

    box-shadow:
        var(--aq-r22-shadow-xs);
}


/* ============================================================
   TABLES
   ============================================================ */

body[data-aqark-reference-layout="dashboard"]
table,

body[data-aqark-reference-layout="admin"]
table {
    width:
        100%;

    background:
        #fff;
}

body[data-aqark-reference-layout="dashboard"]
thead,

body[data-aqark-reference-layout="admin"]
thead {
    background:
        #f8fafc;
}

body[data-aqark-reference-layout="dashboard"]
th,

body[data-aqark-reference-layout="admin"]
th {
    padding:
        13px 16px;

    color:
        var(--aq-r22-muted);

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        none;

    letter-spacing:
        .01em;
}

body[data-aqark-reference-layout="dashboard"]
td,

body[data-aqark-reference-layout="admin"]
td {
    padding:
        14px 16px;

    border-color:
        var(--aq-r22-border-soft);

    color:
        var(--aq-r22-text);
}

body[data-aqark-reference-layout="dashboard"]
tbody tr:hover,

body[data-aqark-reference-layout="admin"]
tbody tr:hover {
    background:
        #fafcff;
}


/* ============================================================
   FORMS
   ============================================================ */

body[data-aqark-reference-layout="dashboard"]
input,

body[data-aqark-reference-layout="dashboard"]
select,

body[data-aqark-reference-layout="dashboard"]
textarea,

body[data-aqark-reference-layout="admin"]
input,

body[data-aqark-reference-layout="admin"]
select,

body[data-aqark-reference-layout="admin"]
textarea {
    min-height:
        44px;

    border-color:
        var(--aq-r22-border) !important;

    border-radius:
        var(--aq-r22-radius-sm);

    background:
        #fff;
}


/* ============================================================
   DASHBOARD BUTTONS
   ============================================================ */

body[data-aqark-reference-layout="dashboard"]
button,

body[data-aqark-reference-layout="admin"]
button {
    min-height:
        40px;

    border-radius:
        var(--aq-r22-radius-sm);

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

body[data-aqark-reference-layout="dashboard"]
button:hover,

body[data-aqark-reference-layout="admin"]
button:hover {
    transform:
        translateY(-1px);
}


/* ============================================================
   MOBILE PUBLIC
   ============================================================ */

@media (max-width: 900px) {
    body[data-aqark-reference-layout="public"]
    header {
        min-height:
            64px;
    }

    body[data-aqark-reference-layout="public"]
    header nav {
        min-height:
            64px;
    }

    body[data-aqark-reference-layout="public"]
    main > section {
        padding-block:
            42px;
    }

    body[data-aqark-reference-layout="public"]
    main > section:first-of-type {
        padding-top:
            40px;

        padding-bottom:
            44px;
    }

    body[data-aqark-reference-layout="public"]
    main > section:first-of-type h1 {
        font-size:
            clamp(32px, 8vw, 44px);
    }
}


/* ============================================================
   MOBILE DASHBOARD
   ============================================================ */

@media (max-width: 900px) {
    body[data-aqark-reference-layout="dashboard"],
    body[data-aqark-reference-layout="admin"] {
        background:
            #fff;
    }

    body[data-aqark-reference-layout="dashboard"] > header,
    body[data-aqark-reference-layout="admin"] > header {
        min-height:
            60px;

        padding-inline:
            14px !important;
    }

    body[data-aqark-reference-layout="dashboard"]
    main > [class*="max-w-"],

    body[data-aqark-reference-layout="admin"]
    main > [class*="max-w-"] {
        width:
            min(
                calc(100% - 24px),
                var(--aq-r22-content)
            );
    }

    body[data-aqark-reference-layout="dashboard"]
    [role="tablist"],

    body[data-aqark-reference-layout="admin"]
    [role="tablist"] {
        overflow-x:
            auto;

        -webkit-overflow-scrolling:
            touch;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 640px) {
    body[data-aqark-reference-layout="public"]
    main > section {
        padding-block:
            36px;
    }

    body[data-aqark-reference-layout="public"]
    main section h2 {
        font-size:
            25px;
    }

    body[data-aqark-reference-layout="public"]
    main article {
        border-radius:
            14px !important;
    }

    body[data-aqark-reference-layout="dashboard"]
    main h1,

    body[data-aqark-reference-layout="admin"]
    main h1 {
        font-size:
            27px;
    }

    body[data-aqark-reference-layout="dashboard"]
    th,

    body[data-aqark-reference-layout="dashboard"]
    td,

    body[data-aqark-reference-layout="admin"]
    th,

    body[data-aqark-reference-layout="admin"]
    td {
        padding:
            11px 12px;
    }
}


/* ============================================================
   RTL
   ============================================================ */

html[dir="rtl"]
body[data-aqark-reference-layout="public"],

html[dir="rtl"]
body[data-aqark-reference-layout="dashboard"],

html[dir="rtl"]
body[data-aqark-reference-layout="admin"] {
    text-align:
        start;
}

html[dir="rtl"]
body[data-aqark-reference-layout="dashboard"]
table,

html[dir="rtl"]
body[data-aqark-reference-layout="admin"]
table {
    direction:
        rtl;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

body.aq-ui a:focus-visible,
body.aq-ui button:focus-visible,
body.aq-ui input:focus-visible,
body.aq-ui select:focus-visible,
body.aq-ui textarea:focus-visible {
    outline:
        2px solid
        var(--aq-r22-primary);

    outline-offset:
        2px;
}

@media (prefers-reduced-motion: reduce) {
    body.aq-ui *,
    body.aq-ui *::before,
    body.aq-ui *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            .001ms !important;

        animation-duration:
            .001ms !important;
    }
}