html {
    scroll-behavior: smooth;
}

:root {
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 48px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    /* Shared design tokens */
    /* Colors */
    --color-000000: #000000;
    --color-00000005: #00000005;
    --color-00000014: #00000014;
    --color-0000001a: #0000001a;
    --color-008236: #008236;
    --color-00a63e: #00a63e;
    --color-030213: #030213;
    --color-082119: #082119;
    --color-08221a: #08221a;
    --color-08231a: #08231a;
    --color-0a0a0a: #0a0a0a;
    --color-0b1613: #0b1613;
    --color-0d542b: #0d542b;
    --color-0d6a53: #0d6a53;
    --color-0ec04f: #0ec04f;
    --color-0f172a: #0f172a;
    --color-0fc183: #0fc183;
    --color-101114: #101114;
    --color-101828: #101828;
    --color-110e0e: #110e0e;
    --color-111111: #111111;
    --color-111215: #111215;
    --color-111827: #111827;
    --color-13161c: #13161c;
    --color-151515: #151515;
    --color-151b22: #151b22;
    --color-155dfc: #155dfc;
    --color-16a34a: #16a34a;
    --color-171717: #171717;
    --color-17191e: #17191e;
    --color-181a20: #181a20;
    --color-193cb8: #193cb8;
    --color-1a1a1a: #1a1a1a;
    --color-1c1f24: #1c1f24;
    --color-1c398e: #1c398e;
    --color-1d4ed8: #1d4ed8;
    --color-1e1f22: #1e1f22;
    --color-1f2329: #1f2329;
    --color-1f232a: #1f232a;
    --color-1f252e: #1f252e;
    --color-1f2937: #1f2937;
    --color-20312c: #20312c;
    --color-21262d: #21262d;
    --color-222831: #222831;
    --color-22c55e: #22c55e;
    --color-231f20: #231f20;
    --color-23262b: #23262b;
    --color-23272e: #23272e;
    --color-23282f: #23282f;
    --color-232a33: #232a33;
    --color-23463f: #23463f;
    --color-24765d: #24765d;
    --color-252525: #252525;
    --color-252a31: #252a31;
    --color-252a32: #252a32;
    --color-256f59: #256f59;
    --color-262626: #262626;
    --color-262a33: #262a33;
    --color-27a75e: #27a75e;
    --color-292d35: #292d35;
    --color-29303a: #29303a;
    --color-2a2f36: #2a2f36;
    --color-2a3038: #2a3038;
    --color-2a3138: #2a3138;
    --color-2b2f34: #2b2f34;
    --color-2b2f35: #2b2f35;
    --color-2b3139: #2b3139;
    --color-2d2f34: #2d2f34;
    --color-2d3138: #2d3138;
    --color-2d3239: #2d3239;
    --color-2e3036: #2e3036;
    --color-2e3338: #2e3338;
    --color-2e333b: #2e333b;
    --color-2e343b: #2e343b;
    --color-2e8a6e: #2e8a6e;
    --color-2e8a6e0d: #2e8a6e0d;
    --color-2e8a6e66: #2e8a6e66;
    --color-2e8a6e80: #2e8a6e80;
    --color-2f2f2f: #2f2f2f;
    --color-2f3136: #2f3136;
    --color-2f3339: #2f3339;
    --color-2f343a: #2f343a;
    --color-2f343b: #2f343b;
    --color-2f353c: #2f353c;
    --color-2f3540: #2f3540;
    --color-2f363d: #2f363d;
    --color-2f363f: #2f363f;
    --color-2f3640: #2f3640;
    --color-2f3741: #2f3741;
    --color-2f3742: #2f3742;
    --color-2f5650: #2f5650;
    --color-303239: #303239;
    --color-30343b: #30343b;
    --color-30363d: #30363d;
    --color-303743: #303743;
    --color-333944: #333944;
    --color-334155: #334155;
    --color-339371: #339371;
    --color-343330: #343330;
    --color-343a42: #343a42;
    --color-3459d4: #3459d4;
    --color-364153: #364153;
    --color-373a41: #373a41;
    --color-374151: #374151;
    --color-393e47: #393e47;
    --color-3b3b3b: #3b3b3b;
    --color-3b4048: #3b4048;
    --color-3b4451: #3b4451;
    --color-3d4350: #3d4350;
    --color-3e444d: #3e444d;
    --color-3f67bd: #3f67bd;
    --color-404040: #404040;
    --color-40444c: #40444c;
    --color-444b56: #444b56;
    --color-475569: #475569;
    --color-48505c: #48505c;
    --color-4889d5: #4889d5;
    --color-49505b: #49505b;
    --color-4a515d: #4a515d;
    --color-4a525f: #4a525f;
    --color-4a5565: #4a5565;
    --color-4b5563: #4b5563;
    --color-4c5159: #4c5159;
    --color-4f5764: #4f5764;
    --color-515864: #515864;
    --color-516170: #516170;
    --color-525b67: #525b67;
    --color-535a65: #535a65;
    --color-585f67: #585f67;
    --color-5b6472: #5b6472;
    --color-5c6470: #5c6470;
    --color-5d6470: #5d6470;
    --color-5d6570: #5d6570;
    --color-5d6673: #5d6673;
    --color-5d6674: #5d6674;
    --color-5e6875: #5e6875;
    --color-5e6f6a: #5e6f6a;
    --color-5f6773: #5f6773;
    --color-606060: #606060;
    --color-606877: #606877;
    --color-616670: #616670;
    --color-65a391: #65a391;
    --color-666f7c: #666f7c;
    --color-667085: #667085;
    --color-6a7282: #6a7282;
    --color-6b7280: #6b7280;
    --color-6c7279: #6c7279;
    --color-6d7480: #6d7480;
    --color-6e7682: #6e7682;
    --color-6f7482: #6f7482;
    --color-707780: #707780;
    --color-707986: #707986;
    --color-717182: #717182;
    --color-737373: #737373;
    --color-767676: #767676;
    --color-787f89: #787f89;
    --color-79818c: #79818c;
    --color-7a828f: #7a828f;
    --color-7b3306: #7b3306;
    --color-7b818d: #7b818d;
    --color-7b828c: #7b828c;
    --color-7b828d: #7b828d;
    --color-7b8290: #7b8290;
    --color-7c7c7c: #7c7c7c;
    --color-7c8087: #7c8087;
    --color-7c8490: #7c8490;
    --color-7c8591: #7c8591;
    --color-7d8491: #7d8491;
    --color-7d8591: #7d8591;
    --color-7d8592: #7d8592;
    --color-7e8491: #7e8491;
    --color-7e8592: #7e8592;
    --color-7f1d1d: #7f1d1d;
    --color-7f6915: #7f6915;
    --color-7f8690: #7f8690;
    --color-7f8793: #7f8793;
    --color-80868f: #80868f;
    --color-818894: #818894;
    --color-818995: #818995;
    --color-838a95: #838a95;
    --color-848b95: #848b95;
    --color-878e99: #878e99;
    --color-87909c: #87909c;
    --color-888f97: #888f97;
    --color-894b00: #894b00;
    --color-8a9099: #8a9099;
    --color-8a909a: #8a909a;
    --color-8a909b: #8a909b;
    --color-8a919b: #8a919b;
    --color-8a919c: #8a919c;
    --color-8b919b: #8b919b;
    --color-8b919d: #8b919d;
    --color-8b929d: #8b929d;
    --color-8d939a: #8d939a;
    --color-8d949d: #8d949d;
    --color-8d96a2: #8d96a2;
    --color-8e949e: #8e949e;
    --color-8ebcae: #8ebcae;
    --color-8ec2b1: #8ec2b1;
    --color-8f97a3: #8f97a3;
    --color-8fc3b2: #8fc3b2;
    --color-93989f: #93989f;
    --color-949aa3: #949aa3;
    --color-94a3b8: #94a3b8;
    --color-969daa: #969daa;
    --color-973c00: #973c00;
    --color-98a2b3: #98a2b3;
    --color-99a1af: #99a1af;
    --color-9aa0a8: #9aa0a8;
    --color-9aa1ac: #9aa1ac;
    --color-9ca3af: #9ca3af;
    --color-9ca4af: #9ca4af;
    --color-9ca4b3: #9ca4b3;
    --color-9fbfae: #9fbfae;
    --color-a1a9b3: #a1a9b3;
    --color-a3a3a3: #a3a3a3;
    --color-a3abba: #a3abba;
    --color-a4a9b1: #a4a9b1;
    --color-a8adb7: #a8adb7;
    --color-b0b5be: #b0b5be;
    --color-b3cdf8: #b3cdf8;
    --color-b42318: #b42318;
    --color-b4ccf6: #b4ccf6;
    --color-b7e7c2: #b7e7c2;
    --color-b8d7ff: #b8d7ff;
    --color-b91c1c: #b91c1c;
    --color-b9f8cf: #b9f8cf;
    --color-bccdc5: #bccdc5;
    --color-bdd8cf: #bdd8cf;
    --color-bedbff: #bedbff;
    --color-c2410c: #c2410c;
    --color-c4c4c4: #c4c4c4;
    --color-c8c8c8: #c8c8c8;
    --color-c9c9c9: #c9c9c9;
    --color-cbcbcb: #cbcbcb;
    --color-cbcfd5: #cbcfd5;
    --color-cbd5e1: #cbd5e1;
    --color-cccccc: #cccccc;
    --color-ccd0d6: #ccd0d6;
    --color-cdd1d8: #cdd1d8;
    --color-ced8d5: #ced8d5;
    --color-cfd4d8: #cfd4d8;
    --color-cfd4db: #cfd4db;
    --color-d0e3dc: #d0e3dc;
    --color-d11c1c: #d11c1c;
    --color-d1d1d1: #d1d1d1;
    --color-d1d5db: #d1d5db;
    --color-d1d5dc: #d1d5dc;
    --color-d1d6dd: #d1d6dd;
    --color-d3d4d8: #d3d4d8;
    --color-d3d9e0: #d3d9e0;
    --color-d4183d: #d4183d;
    --color-d4d4d4: #d4d4d4;
    --color-d4d7dd: #d4d7dd;
    --color-d4d8de: #d4d8de;
    --color-d4e7df: #d4e7df;
    --color-d5d9df: #d5d9df;
    --color-d5dae0: #d5dae0;
    --color-d5dae1: #d5dae1;
    --color-d5dbe1: #d5dbe1;
    --color-d5e8e0: #d5e8e0;
    --color-d6dae0: #d6dae0;
    --color-d6dbe1: #d6dbe1;
    --color-d6e8e1: #d6e8e1;
    --color-d7d7d7: #d7d7d7;
    --color-d7dae0: #d7dae0;
    --color-d7dbe1: #d7dbe1;
    --color-d7dce3: #d7dce3;
    --color-d7e7e1: #d7e7e1;
    --color-d8d8d8: #d8d8d8;
    --color-d8dbe1: #d8dbe1;
    --color-d8dce3: #d8dce3;
    --color-d8dde2: #d8dde2;
    --color-d8dde3: #d8dde3;
    --color-d8dde4: #d8dde4;
    --color-d97706: #d97706;
    --color-d9d9d9: #d9d9d9;
    --color-d9dde2: #d9dde2;
    --color-d9dde3: #d9dde3;
    --color-d9dde4: #d9dde4;
    --color-d9dee4: #d9dee4;
    --color-d9e4f4: #d9e4f4;
    --color-d9e7e0: #d9e7e0;
    --color-dadde2: #dadde2;
    --color-dbdbdb: #dbdbdb;
    --color-dbe6f4: #dbe6f4;
    --color-dbe9e4: #dbe9e4;
    --color-dbeafe: #dbeafe;
    --color-dc2626: #dc2626;
    --color-dce1e7: #dce1e7;
    --color-dce9e4: #dce9e4;
    --color-dcfce7: #dcfce7;
    --color-ddcd89: #ddcd89;
    --color-dde1e6: #dde1e6;
    --color-dde1e7: #dde1e7;
    --color-ddebe5: #ddebe5;
    --color-ddf5e9: #ddf5e9;
    --color-dedede: #dedede;
    --color-dee2e7: #dee2e7;
    --color-dee2e8: #dee2e8;
    --color-dfe4ea: #dfe4ea;
    --color-dfece7: #dfece7;
    --color-e0f2ed: #e0f2ed;
    --color-e1e4e9: #e1e4e9;
    --color-e2cd00: #e2cd00;
    --color-e2e5e8: #e2e5e8;
    --color-e2e6ea: #e2e6ea;
    --color-e2e6ec: #e2e6ec;
    --color-e2e8f0: #e2e8f0;
    --color-e39400: #e39400;
    --color-e3d07a: #e3d07a;
    --color-e4e7eb: #e4e7eb;
    --color-e5d05d: #e5d05d;
    --color-e5e5e5: #e5e5e5;
    --color-e5e7eb: #e5e7eb;
    --color-e5e8ed: #e5e8ed;
    --color-e6e7ea: #e6e7ea;
    --color-e7000b: #e7000b;
    --color-e7e9ee: #e7e9ee;
    --color-e8ebef: #e8ebef;
    --color-e8ebf0: #e8ebf0;
    --color-e9f7f1: #e9f7f1;
    --color-eaf8ee: #eaf8ee;
    --color-eafaf4: #eafaf4;
    --color-ebd56f: #ebd56f;
    --color-ebecf0: #ebecf0;
    --color-ebeef3: #ebeef3;
    --color-ebf8f2: #ebf8f2;
    --color-ececec: #ececec;
    --color-eceef1: #eceef1;
    --color-eceff2: #eceff2;
    --color-ecfbf5: #ecfbf5;
    --color-ecfdf5: #ecfdf5;
    --color-edf2ef: #edf2ef;
    --color-edf5f2: #edf5f2;
    --color-edf7f2: #edf7f2;
    --color-edf9f4: #edf9f4;
    --color-eef0f3: #eef0f3;
    --color-eef1f3: #eef1f3;
    --color-ef4444: #ef4444;
    --color-efefef: #efefef;
    --color-efeff0: #efeff0;
    --color-eff1f4: #eff1f4;
    --color-eff6ff: #eff6ff;
    --color-f04438: #f04438;
    --color-f0f7ff: #f0f7ff;
    --color-f0faf5: #f0faf5;
    --color-f0faf7: #f0faf7;
    --color-f0fdf4: #f0fdf4;
    --color-f13838: #f13838;
    --color-f1f2f4: #f1f2f4;
    --color-f1f3f6: #f1f3f6;
    --color-f1faf6: #f1faf6;
    --color-f2de5f: #f2de5f;
    --color-f2f3f4: #f2f3f4;
    --color-f2f3f5: #f2f3f5;
    --color-f2fdf8: #f2fdf8;
    --color-f3db08: #f3db08;
    --color-f3efcc: #f3efcc;
    --color-f3f0dc: #f3f0dc;
    --color-f3f3f5: #f3f3f5;
    --color-f3f4f6: #f3f4f6;
    --color-f3faf7: #f3faf7;
    --color-f3fff9: #f3fff9;
    --color-f4f0da: #f4f0da;
    --color-f4f5f5: #f4f5f5;
    --color-f4f5f6: #f4f5f6;
    --color-f4f5f7: #f4f5f7;
    --color-f4faf7: #f4faf7;
    --color-f5d800: #f5d800;
    --color-f5f5f5: #f5f5f5;
    --color-f5f5f6: #f5f5f6;
    --color-f5f6f7: #f5f6f7;
    --color-f5f6f8: #f5f6f8;
    --color-f5fbf8: #f5fbf8;
    --color-f6dd08: #f6dd08;
    --color-f6f6f7: #f6f6f7;
    --color-f7f7f8: #f7f7f8;
    --color-f8e000: #f8e000;
    --color-f8f8f8: #f8f8f8;
    --color-f8f8f9: #f8f8f9;
    --color-f8f9f9: #f8f9f9;
    --color-f8f9fa: #f8f9fa;
    --color-f8fafb: #f8fafb;
    --color-f8fafc: #f8fafc;
    --color-f9fafb: #f9fafb;
    --color-f9fafc: #f9fafc;
    --color-faf9ef: #faf9ef;
    --color-fafafa: #fafafa;
    --color-fafafb: #fafafb;
    --color-fca5a5: #fca5a5;
    --color-fcd34d: #fcd34d;
    --color-fdd800: #fdd800;
    --color-fecaca: #fecaca;
    --color-fecdd3: #fecdd3;
    --color-fee2e2: #fee2e2;
    --color-fee5e5: #fee5e5;
    --color-fee685: #fee685;
    --color-fef2f2: #fef2f2;
    --color-fef3c6: #fef3c6;
    --color-fef3c7: #fef3c7;
    --color-fef4e0: #fef4e0;
    --color-fef9c2: #fef9c2;
    --color-fff085: #fff085;
    --color-fff1f2: #fff1f2;
    --color-fffbeb: #fffbeb;
    --color-ffffff: #ffffff;

    /* Functional color values */
    --color-rgb-0-0-0-0pct: rgb(0 0 0 / 0%);
    --color-rgb-0-0-0-1pct: rgb(0 0 0 / 1%);
    --color-rgb-0-0-0-10pct: rgb(0 0 0 / 10%);
    --color-rgb-0-0-0-12pct: rgb(0 0 0 / 12%);
    --color-rgb-0-0-0-15pct: rgb(0 0 0 / 15%);
    --color-rgb-0-0-0-16pct: rgb(0 0 0 / 16%);
    --color-rgb-0-0-0-2pct: rgb(0 0 0 / 2%);
    --color-rgb-0-0-0-20pct: rgb(0 0 0 / 20%);
    --color-rgb-0-0-0-3pct: rgb(0 0 0 / 3%);
    --color-rgb-0-0-0-38pct: rgb(0 0 0 / 38%);
    --color-rgb-0-0-0-4pct: rgb(0 0 0 / 4%);
    --color-rgb-0-0-0-40pct: rgb(0 0 0 / 40%);
    --color-rgb-0-0-0-5pct: rgb(0 0 0 / 5%);
    --color-rgb-0-0-0-50pct: rgb(0 0 0 / 50%);
    --color-rgb-0-0-0-55pct: rgb(0 0 0 / 55%);
    --color-rgb-0-0-0-56pct: rgb(0 0 0 / 56%);
    --color-rgb-0-0-0-6pct: rgb(0 0 0 / 6%);
    --color-rgb-0-0-0-60pct: rgb(0 0 0 / 60%);
    --color-rgb-0-0-0-62pct: rgb(0 0 0 / 62%);
    --color-rgb-0-0-0-70pct: rgb(0 0 0 / 70%);
    --color-rgb-0-0-0-72pct: rgb(0 0 0 / 72%);
    --color-rgb-0-0-0-8pct: rgb(0 0 0 / 8%);
    --color-rgb-0-0-0-80pct: rgb(0 0 0 / 80%);
    --color-rgb-0-0-0-85pct: rgb(0 0 0 / 85%);
    --color-rgb-14-122-95-22pct: rgb(14 122 95 / 22%);
    --color-rgb-148-163-184-35pct: rgb(148 163 184 / 35%);
    --color-rgb-15-23-42-0pct: rgb(15 23 42 / 0%);
    --color-rgb-15-23-42-10pct: rgb(15 23 42 / 10%);
    --color-rgb-15-23-42-20pct: rgb(15 23 42 / 20%);
    --color-rgb-15-23-42-22pct: rgb(15 23 42 / 22%);
    --color-rgb-15-23-42-24pct: rgb(15 23 42 / 24%);
    --color-rgb-15-23-42-30pct: rgb(15 23 42 / 30%);
    --color-rgb-15-23-42-32pct: rgb(15 23 42 / 32%);
    --color-rgb-15-23-42-34pct: rgb(15 23 42 / 34%);
    --color-rgb-15-23-42-45pct: rgb(15 23 42 / 45%);
    --color-rgb-15-23-42-52pct: rgb(15 23 42 / 52%);
    --color-rgb-15-23-42-55pct: rgb(15 23 42 / 55%);
    --color-rgb-15-23-42-66pct: rgb(15 23 42 / 66%);
    --color-rgb-15-23-42-70pct: rgb(15 23 42 / 70%);
    --color-rgb-15-23-42-8pct: rgb(15 23 42 / 8%);
    --color-rgb-17-24-39-3pct: rgb(17 24 39 / 3%);
    --color-rgb-17-24-39-58pct: rgb(17 24 39 / 58%);
    --color-rgb-190-233-215-36pct: rgb(190 233 215 / 36%);
    --color-rgb-2-6-23-38pct: rgb(2 6 23 / 38%);
    --color-rgb-200-231-216-33pct: rgb(200 231 216 / 33%);
    --color-rgb-211-238-227-84pct: rgb(211 238 227 / 84%);
    --color-rgb-211-242-228-72pct: rgb(211 242 228 / 72%);
    --color-rgb-220-38-38-12pct: rgb(220 38 38 / 12%);
    --color-rgb-226-232-240-85pct: rgb(226 232 240 / 85%);
    --color-rgb-229-229-229-30pct: rgb(229 229 229 / 30%);
    --color-rgb-23-23-23-16pct: rgb(23 23 23 / 16%);
    --color-rgb-23-23-23-20pct: rgb(23 23 23 / 20%);
    --color-rgb-23-23-23-50pct: rgb(23 23 23 / 50%);
    --color-rgb-236-236-240-50pct: rgb(236 236 240 / 50%);
    --color-rgb-236-236-240-70pct: rgb(236 236 240 / 70%);
    --color-rgb-241-245-249-75pct: rgb(241 245 249 / 75%);
    --color-rgb-242-253-248-70pct: rgb(242 253 248 / 70%);
    --color-rgb-243-219-8-24pct: rgb(243 219 8 / 24%);
    --color-rgb-248-224-0-10pct: rgb(248 224 0 / 10%);
    --color-rgb-248-250-252-92pct: rgb(248 250 252 / 92%);
    --color-rgb-255-255-255-0pct: rgb(255 255 255 / 0%);
    --color-rgb-255-255-255-0-03: rgb(255 255 255 / 0.03);
    --color-rgb-255-255-255-10pct: rgb(255 255 255 / 10%);
    --color-rgb-255-255-255-12pct: rgb(255 255 255 / 12%);
    --color-rgb-255-255-255-20pct: rgb(255 255 255 / 20%);
    --color-rgb-255-255-255-25pct: rgb(255 255 255 / 25%);
    --color-rgb-255-255-255-30pct: rgb(255 255 255 / 30%);
    --color-rgb-255-255-255-50pct: rgb(255 255 255 / 50%);
    --color-rgb-255-255-255-55pct: rgb(255 255 255 / 55%);
    --color-rgb-255-255-255-58pct: rgb(255 255 255 / 58%);
    --color-rgb-255-255-255-7pct: rgb(255 255 255 / 7%);
    --color-rgb-255-255-255-75pct: rgb(255 255 255 / 75%);
    --color-rgb-255-255-255-8pct: rgb(255 255 255 / 8%);
    --color-rgb-255-255-255-80pct: rgb(255 255 255 / 80%);
    --color-rgb-255-255-255-82pct: rgb(255 255 255 / 82%);
    --color-rgb-255-255-255-85pct: rgb(255 255 255 / 85%);
    --color-rgb-255-255-255-88pct: rgb(255 255 255 / 88%);
    --color-rgb-255-255-255-95pct: rgb(255 255 255 / 95%);
    --color-rgb-255-255-255-96pct: rgb(255 255 255 / 96%);
    --color-rgb-255-255-255-97pct: rgb(255 255 255 / 97%);
    --color-rgb-4-8-14-32pct: rgb(4 8 14 / 32%);
    --color-rgb-4-8-14-6pct: rgb(4 8 14 / 6%);
    --color-rgb-4-8-14-90pct: rgb(4 8 14 / 90%);
    --color-rgb-46-138-110-10pct: rgb(46 138 110 / 10%);
    --color-rgb-46-138-110-16pct: rgb(46 138 110 / 16%);
    --color-rgb-46-138-110-18pct: rgb(46 138 110 / 18%);
    --color-rgb-46-138-110-20pct: rgb(46 138 110 / 20%);
    --color-rgb-46-138-110-22pct: rgb(46 138 110 / 22%);
    --color-rgb-46-138-110-25pct: rgb(46 138 110 / 25%);
    --color-rgb-46-138-110-26pct: rgb(46 138 110 / 26%);
    --color-rgb-46-138-110-28pct: rgb(46 138 110 / 28%);
    --color-rgb-46-138-110-30pct: rgb(46 138 110 / 30%);
    --color-rgb-46-138-110-32pct: rgb(46 138 110 / 32%);
    --color-rgb-46-138-110-50pct: rgb(46 138 110 / 50%);
    --color-rgb-46-138-110-52pct: rgb(46 138 110 / 52%);
    --color-rgb-46-138-110-55pct: rgb(46 138 110 / 55%);
    --color-rgb-46-138-110-58pct: rgb(46 138 110 / 58%);
    --color-rgb-46-138-110-70pct: rgb(46 138 110 / 70%);
    --color-rgb-46-138-110-75pct: rgb(46 138 110 / 75%);
    --color-rgb-46-138-110-80pct: rgb(46 138 110 / 80%);
    --color-rgba-0-0-0-0-00: rgba(0, 0, 0, 0.00);
    --color-rgba-0-0-0-0-02: rgba(0, 0, 0, 0.02);
    --color-rgba-0-0-0-0-04: rgba(0, 0, 0, 0.04);
    --color-rgba-0-0-0-0-05: rgba(0, 0, 0, 0.05);
    --color-rgba-0-0-0-0-06: rgba(0, 0, 0, 0.06);
    --color-rgba-0-0-0-0-07: rgba(0, 0, 0, 0.07);
    --color-rgba-0-0-0-0-08: rgba(0, 0, 0, 0.08);
    --color-rgba-0-0-0-0-1: rgba(0, 0, 0, 0.1);
    --color-rgba-0-0-0-0-2: rgba(0, 0, 0, 0.2);
    --color-rgba-0-0-0-0-5: rgba(0, 0, 0, 0.5);
    --color-rgba-10-10-10-0-7: rgba(10, 10, 10, 0.7);
    --color-rgba-148-163-184-0-62: rgba(148, 163, 184, 0.62);
    --color-rgba-15-23-42-0-38: rgba(15, 23, 42, 0.38);
    --color-rgba-196-196-196-0: rgba(196, 196, 196, 0);
    --color-rgba-203-213-225-0-78: rgba(203, 213, 225, 0.78);
    --color-rgba-203-213-225-0-92: rgba(203, 213, 225, 0.92);
    --color-rgba-204-204-204-0: rgba(204, 204, 204, 0);
    --color-rgba-226-232-240-0-88: rgba(226, 232, 240, 0.88);
    --color-rgba-229-229-229-0-3: rgba(229, 229, 229, 0.3);
    --color-rgba-229-231-235-0-35: rgba(229, 231, 235, 0.35);
    --color-rgba-23-23-23-0-1: rgba(23, 23, 23, 0.1);
    --color-rgba-23-23-23-0-5: rgba(23, 23, 23, 0.5);
    --color-rgba-232-232-232-0-6: rgba(232, 232, 232, 0.6);
    --color-rgba-24-26-32-0-08: rgba(24, 26, 32, 0.08);
    --color-rgba-248-224-0-0-2: rgba(248, 224, 0, 0.2);
    --color-rgba-248-250-252-0-52: rgba(248, 250, 252, 0.52);
    --color-rgba-248-250-252-0-55: rgba(248, 250, 252, 0.55);
    --color-rgba-255-255-255-0-2: rgba(255, 255, 255, 0.2);
    --color-rgba-35-31-32-0-14: rgba(35, 31, 32, 0.14);
    --color-rgba-35-31-32-0-85: rgba(35, 31, 32, 0.85);
    --color-rgba-46-138-110-0-05: rgba(46, 138, 110, 0.05);
    --color-rgba-46-138-110-0-15: rgba(46, 138, 110, 0.15);
    --color-rgba-46-138-110-0-2: rgba(46, 138, 110, 0.2);
    --color-rgba-46-138-110-0-3: rgba(46, 138, 110, 0.3);

    /* Border radius */
    --radius-0: 0;
    --radius-0-0-8px-8px: 0 0 8px 8px;
    --radius-10-24px: 10.24px;
    --radius-10-88px: 10.88px;
    --radius-10px: 10px;
    --radius-11-52px: 11.52px;
    --radius-11px: 11px;
    --radius-12-16px: 12.16px;
    --radius-12-48px: 12.48px;
    --radius-12-8px: 12.8px;
    --radius-12px: 12px;
    --radius-13-6px: 13.6px;
    --radius-13-76px: 13.76px;
    --radius-13px: 13px;
    --radius-14-4px: 14.4px;
    --radius-14-72px: 14.72px;
    --radius-14px: 14px;
    --radius-15-2px: 15.2px;
    --radius-16-4px: 16.4px;
    --radius-16px: 16px;
    --radius-17-699px: 17.699px;
    --radius-17-6px: 17.6px;
    --radius-17-92px: 17.92px;
    --radius-18px: 18px;
    --radius-18px-18px-0-0: 18px 18px 0 0;
    --radius-20px: 20px;
    --radius-21-12px: 21.12px;
    --radius-22px: 22px;
    --radius-22px-22px-0-0: 22px 22px 0 0;
    --radius-24px: 24px;
    --radius-2px: 2px;
    --radius-4px: 4px;
    --radius-50pct: 50%;
    --radius-5px: 5px;
    --radius-6-374px: 6.374px;
    --radius-6-8px: 6.8px;
    --radius-6px: 6px;
    --radius-7-2px: 7.2px;
    --radius-7-68px: 7.68px;
    --radius-7px: 7px;
    --radius-8-32px: 8.32px;
    --radius-8-64px: 8.64px;
    --radius-8-8px: 8.8px;
    --radius-8-96px: 8.96px;
    --radius-8px: 8px;
    --radius-9-28px: 9.28px;
    --radius-9-6px: 9.6px;
    --radius-9-92px: 9.92px;
    --radius-96px: 96px;
    --radius-999px: 999px;
    --radius-9px: 9px;
    --radius-inherit: inherit;
}

.kyc-properties-correction {
    margin-inline: auto;
    max-width: 640px;
    text-align: center;
}

.kyc-properties-correction__icon {
    align-items: center;
    background: var(--color-fef3c7);
    border-radius: var(--radius-999px);
    color: var(--color-d97706);
    display: inline-flex;
    height: 96px;
    justify-content: center;
    margin-bottom: 14px;
    width: 96px;
}

.kyc-properties-correction__icon svg {
    height: 48px;
    width: 48px;
}

.kyc-properties-correction__copy h2 {
    color: var(--color-101828);
    font-size: 48px;
    line-height: 1.1;
    margin: 0 0 8px;
}

.kyc-properties-correction__copy p {
    color: var(--color-6a7282);
    font-size: 22px;
    line-height: 1.35;
    margin: 0 auto;
    max-width: 620px;
}

.kyc-properties-correction__issues {
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-10px);
    margin: 30px auto 0;
    max-width: 640px;
    overflow: hidden;
    text-align: right;
}

.kyc-properties-correction__issues header {
    align-items: center;
    background: var(--color-fffbeb);
    border-bottom: 1px solid var(--color-fef3c6);
    color: var(--color-973c00);
    display: flex;
    font-size: 20px;
    font-weight: 700;
    min-height: 52px;
    padding: 0 16px;
}

.kyc-properties-correction__issues ul {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 16px;
    justify-content: flex-start;
}

.kyc-properties-correction__issues li {
    align-items: center;
    color: var(--color-364153);
    display: flex;
    font-size: 14px;
    gap: 10px;
    justify-content: flex-end;
}

.kyc-properties-correction__issues li svg {
    color: var(--color-f04438);
    flex: 0 0 auto;
    height: 16px;
    width: 16px;
}

.kyc-properties-correction__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 22px;
}

.kyc-properties-correction__actions .kyc-properties-btn {
    min-height: 36px;
    min-width: 220px;
}

.doc-correction-page {
    background: var(--color-f9fafb);
    min-height: 100vh;
}

.doc-correction-shell {
    padding: 32px 0 64px;
}

.doc-correction-state {
    direction: rtl;
    margin-inline: auto;
    max-width: 1152px;
}

.doc-correction-hero {
    margin: 32px auto 24px;
    max-width: 1152px;
    text-align: center;
}

.doc-correction-hero__icon {
    align-items: center;
    background: var(--color-rgba-248-224-0-0-2);
    border-radius: var(--radius-999px);
    color: var(--color-2e8a6e);
    display: inline-flex;
    height: 64px;
    justify-content: center;
    margin-bottom: 12px;
    width: 64px;
}

.doc-correction-hero__icon img {
    height: 32px;
    width: 32px;
}

.doc-correction-hero h1 {
    color: var(--color-101828);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.75px;
    line-height: 36px;
    margin: 0 0 12px;
}

.doc-correction-hero p {
    color: var(--color-4a5565);
    font-size: 16px;
    line-height: 24px;
    margin: 0 auto;
    max-width: 616px;
}

.doc-correction-issues-card {
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-10px);
    margin: 0 auto;
    max-width: 672px;
    overflow: hidden;
}

.doc-correction-issues-card header {
    align-items: center;
    background: var(--color-fffbeb);
    border-bottom: 1px solid var(--color-fef3c6);
    color: var(--color-973c00);
    display: flex;
    font-size: 20px;
    font-weight: 700;
    gap: 8px;
    justify-content: flex-start;
    min-height: 54px;
    padding: 0 16px;
}

.doc-correction-issues-card header svg {
    height: 16px;
    width: 16px;
}

.doc-correction-issues-card ul {
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 16px;
}

.doc-correction-issues-card li {
    align-items: center;
    color: var(--color-364153);
    display: flex;
    font-size: 14px;
    gap: 12px;
    justify-content: flex-start;
}

.doc-correction-issues-card li svg {
    color: var(--color-f04438);
    height: 16px;
    width: 16px;
}

.doc-correction-issues-choice__options {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 24px auto 0;
    max-width: 672px;
}

.doc-correction-choice-card {
    background: var(--color-ffffff);
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-10px);
    padding: 22px;
    text-align: center;

    display: flex;
    flex-direction: column;
}

.doc-correction-choice-card.is-featured {
    background: var(--color-rgba-46-138-110-0-05);
    border-color: var(--color-2e8a6e);
}

.doc-correction-choice-card__icon {
    align-items: center;
    border-radius: var(--radius-10px);
    display: inline-flex;
    height: 48px;
    justify-content: center;
    margin-bottom: 14px;
    width: 48px;

    align-self: flex-start;
}

.doc-correction-choice-card__icon.is-blue {
    background: var(--color-dbeafe);
    color: var(--color-1d4ed8);
}

.doc-correction-choice-card__icon.is-green {
    background: var(--color-rgba-46-138-110-0-2);
    color: var(--color-2e8a6e);
}

.doc-correction-choice-card__icon svg {
    height: 24px;
    width: 24px;
}

.doc-correction-choice-card h3 {
    color: var(--color-101828);
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 8px;
}

.doc-correction-choice-card p {
    color: var(--color-4a5565);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.doc-correction-choice-card__meta {
    display: grid;
    gap: 8px;
    margin: 16px 0 12px;
    padding: 12px;

    border-radius: var(--radius-10px);
    border: 1.4px solid var(--color-rgba-46-138-110-0-3);
    background: var(--color-ffffff);
}

.doc-correction-choice-card__meta div {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.doc-correction-choice-card__meta span {
    color: var(--color-4a5565);
    font-size: 14px;
}

.doc-correction-choice-card__meta strong {
    color: var(--color-2e8a6e);
    font-size: 18px;
}

.doc-correction-link-btn {
    background: transparent;
    border: 0;
    color: var(--color-0a0a0a);
    cursor: pointer;
    display: block;
    font-family: inherit;
    font-size: 14px;
    margin: 24px auto 0;
    padding: 4px 10px;
}

.doc-correction-offers__includes {
    background: var(--color-eff6ff);
    border: 1.4px solid var(--color-bedbff);
    border-radius: var(--radius-10px);
    margin-bottom: 24px;
    padding: 17.4px;
}

.doc-correction-offers__includes-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: flex-start;
}

.doc-correction-offers__includes-head img {
    flex: 0 0 auto;
    height: 20px;
    margin-top: 3px;
    width: 20px;
}

.doc-correction-offers__includes header {
    color: var(--color-1c398e);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 28px;
    margin-bottom: 0;
    text-align: right;
}

.doc-correction-offers__includes ul {
    color: var(--color-193cb8);
    display: grid;
    gap: 4px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.doc-correction-offers__includes ul li {
    color: var(--color-193cb8);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
}

.doc-correction-offers__includes ul li::before {
    content: "�";
    margin-inline-end: 6px;
}

.doc-correction-offers__grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.doc-correction-provider-btn {
    background: transparent;
    border: 0;
    padding: 0;
    text-align: right;
}

.doc-correction-provider-card {
    background: var(--color-ffffff);
    border: 1.4px solid var(--color-e5e7eb);
    border-radius: var(--radius-10px);
    cursor: pointer;
    min-height: 327px;
    padding: 21.4px;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.doc-correction-provider-card.is-selected {
    background: var(--color-rgba-46-138-110-0-05);
    border-color: var(--color-2e8a6e);
    padding: 24px;
}

.doc-correction-provider-card__head {
    display: grid;
    gap: 4px;
}

.doc-correction-provider-card__head h3 {
    color: var(--color-101828);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.45px;
    line-height: 28px;
    margin: 0;
    text-align: right;
}

.doc-correction-provider-card__rating {
    align-items: center;
    display: inline-flex;
    gap: 4px;
    justify-content: flex-end;
    margin-inline-end: auto;
    width: fit-content;
}

.doc-correction-provider-card__rating img {
    flex: 0 0 auto;
    height: 16px;
    width: 16px;
}

.doc-correction-provider-card__rating strong {
    color: var(--color-101828);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    margin: 0;
}

.doc-correction-provider-card__rating span {
    color: var(--color-4a5565);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.doc-correction-provider-card__stats {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
}

.doc-correction-provider-card__stat {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
}

.doc-correction-provider-card__stat img {
    flex: 0 0 auto;
    height: 16px;
    width: 16px;
}

.doc-correction-provider-card__stat span {
    color: var(--color-4a5565);
    font-size: 14px;
    line-height: 20px;
}

.doc-correction-provider-card__description {
    color: var(--color-4a5565);
    font-size: 14px;
    line-height: 20px;
    margin: 16px 0 0;
    text-align: right;
}

.doc-correction-provider-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    margin-top: 12px;
}

.doc-correction-provider-card__tags span {
    background: var(--color-f5f5f5);
    border: 1.4px solid transparent;
    border-radius: var(--radius-6-8px);
    color: var(--color-171717);
    font-size: 12px;
    line-height: 16px;
    padding: 3.4px 9.4px;
}

.doc-correction-provider-card__foot {
    align-items: center;
    border-top: 1.4px solid var(--color-e5e5e5);
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    min-height: 73px;
    padding-top: 12px;
}

.doc-correction-provider-card__foot div {
    display: grid;
    gap: 2px;
}

.doc-correction-provider-card__foot span {
    color: var(--color-4a5565);
    font-size: 14px;
    line-height: 20px;
}

.doc-correction-provider-card__fee p {
    align-items: flex-end;
    display: flex;
    gap: 4px;
    margin: 0;
}

.doc-correction-provider-card__fee strong {
    color: var(--color-101828);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.doc-correction-provider-card__fee small {
    color: var(--color-4a5565);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.doc-correction-provider-card__eta {
    justify-items: end;
}

.doc-correction-provider-card__eta strong {
    color: var(--color-2e8a6e);
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
}

.doc-correction-offers__actions {
    align-items: center;
    border-top: 1.4px solid var(--color-e5e5e5);
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
    min-height: 61px;
    padding-top: 12px;
}

.doc-correction-offers__continue-btn {
    align-items: center;
    display: inline-flex;
    gap: 34px;
    justify-content: center;
    padding-inline: 12px;
}

.doc-correction-btn__icon {
    flex: 0 0 auto;
    height: 16px;
    transform: scaleX(-1);
    width: 16px;
}

.doc-correction-payment {
    margin-inline: auto;
    max-width: 670px;
}

.doc-correction-payment__head h1 {
    color: var(--color-1a1a1a);
    font-size: 16px;
    margin: 0;
    text-align: right;
}

.doc-correction-payment__head p {
    color: var(--color-6b7280);
    font-size: 16px;
    margin: 4px 0 14px;
    text-align: right;
}

.doc-correction-payment__provider {
    background: var(--color-ffffff);
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-10px);
    margin-bottom: 12px;
    overflow: hidden;
}

.doc-correction-payment__provider>header {
    align-items: center;
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
    display: flex;
    justify-content: space-between;
    min-height: 84px;
    padding: 0 24px;
}

.doc-correction-payment__provider>header h3 {
    font-size: 18px;
    margin: 0 0 2px;
}

.doc-correction-payment__provider>header p {
    font-size: 14px;
    margin: 0;
}

.doc-correction-payment__provider-body {
    padding: 18px 24px;
}

.doc-correction-payment__provider-row {
    align-items: center;
    border-bottom: 1px solid var(--color-e5e5e5);
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
}

.doc-correction-payment__provider-row span {
    color: var(--color-4a5565);
    font-size: 16px;
}

.doc-correction-payment__provider-row strong {
    color: var(--color-101828);
    font-size: 18px;
}

.doc-correction-payment__provider-meta {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
}

.doc-correction-payment__provider-meta div {
    display: grid;
    gap: 2px;
}

.doc-correction-payment__provider-meta span {
    color: var(--color-4a5565);
    font-size: 14px;
}

.doc-correction-payment__provider-meta strong {
    color: var(--color-101828);
    font-size: 16px;
}

.doc-correction-payment__provider-includes {
    background: var(--color-f9fafb);
    border-radius: var(--radius-10px);
    padding: 14px;
}

.doc-correction-payment__provider-includes strong {
    color: var(--color-101828);
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
}

.doc-correction-payment__provider-includes ul {
    color: var(--color-4a5565);
    display: grid;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.doc-correction-field {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.doc-correction-field>span {
    color: var(--color-1a1a1a);
    font-size: 14px;
}

.doc-correction-field input {
    background: var(--color-f9fafb);
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-10px);
    color: var(--color-111827);
    font-family: inherit;
    font-size: 14px;
    min-height: 36px;
    padding: 8px 12px;
}

.doc-correction-field input:focus {
    border-color: var(--color-2e8a6e);
    outline: 0;
}

.doc-correction-choice {
    border: 0;
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
}

.doc-correction-choice legend {
    color: var(--color-1a1a1a);
    font-size: 14px;
    margin-bottom: 2px;
    text-align: right;
}

.doc-correction-choice label {
    align-items: center;
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-12px);
    cursor: pointer;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    min-height: 54px;
    padding: 0 16px;
}

.doc-correction-grid {
    display: grid;
    gap: 12px;
}

.doc-correction-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.doc-correction-field__error {
    color: var(--color-dc2626);
    font-size: 12px;
}

.doc-correction-payment__actions {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.doc-correction-payment__secure {
    color: var(--color-6b7280);
    font-size: 14px;
    margin: 14px 0 0;
    text-align: center;
}

.doc-correction-processing {
    margin-inline: auto;
    max-width: 520px;
    text-align: center;
}

.doc-correction-processing__icon {
    align-items: center;
    border: 2px solid var(--color-2e8a6e);
    border-radius: var(--radius-999px);
    color: var(--color-2e8a6e);
    display: inline-flex;
    height: 80px;
    justify-content: center;
    margin-bottom: 12px;
    width: 80px;
}

.doc-correction-processing__icon svg {
    height: 34px;
    width: 34px;
}

.doc-correction-processing h2 {
    color: var(--color-1a1a1a);
    font-size: 36px;
    line-height: 1.2;
    margin: 0;
}

.doc-correction-processing p {
    color: var(--color-6b7280);
    font-size: 24px;
    margin: 8px 0 0;
}

.doc-correction-processing__sub {
    color: var(--color-c9c9c9);
}

.doc-correction-processing-stepper {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 22px 0;
}

.doc-correction-processing-stepper__item {
    align-items: center;
    display: grid;
    gap: 8px;
    justify-items: center;
}

.doc-correction-processing-stepper__badge {
    align-items: center;
    border-radius: var(--radius-999px);
    color: var(--color-99a1af);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.doc-correction-processing-stepper__item.is-complete .doc-correction-processing-stepper__badge {
    background: var(--color-171717);
    color: var(--color-ffffff);
}

.doc-correction-processing-stepper__item.is-active .doc-correction-processing-stepper__badge {
    background: var(--color-rgba-23-23-23-0-5);
    color: var(--color-ffffff);
}

.doc-correction-processing-stepper__item.is-pending .doc-correction-processing-stepper__badge {
    background: var(--color-f3f4f6);
}

.doc-correction-processing-stepper__item strong {
    color: var(--color-171717);
    font-size: 12px;
}

.doc-correction-success {
    margin-inline: auto;
    max-width: 720px;
    text-align: center;
}

.doc-correction-success__icon {
    align-items: center;
    background: var(--color-dcfce7);
    border-radius: var(--radius-999px);
    color: var(--color-16a34a);
    display: inline-flex;
    height: 74px;
    justify-content: center;
    margin-bottom: 12px;
    width: 74px;
}

.doc-correction-success__icon svg {
    height: 34px;
    width: 34px;
}

.doc-correction-success h2 {
    color: var(--color-101828);
    font-size: 36px;
    line-height: 1.2;
    margin: 0 0 8px;
}

.doc-correction-success p {
    color: var(--color-4a5565);
    font-size: 18px;
    margin: 0 auto;
    max-width: 620px;
}

.doc-correction-success__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.doc-correction-btn {
    border: 1px solid transparent;
    border-radius: var(--radius-6-8px);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    min-height: 36px;
    min-width: 140px;
    padding: 0 14px;
}

.doc-correction-btn--primary {
    background: var(--color-2e8a6e);
    color: var(--color-fafafa);
}

.doc-correction-btn--primary:disabled {
    cursor: default;
    opacity: 0.5;
}

.doc-correction-btn--ghost {
    background: var(--color-rgba-229-229-229-0-3);
    border-color: var(--color-e5e5e5);
    color: var(--color-0a0a0a);
}

.doc-correction-btn--wide {
    width: 100%;
}

@media (max-width: 1200px) {
    .doc-correction-shell {
        padding: 24px 0 56px;
    }

    .doc-correction-state,
    .doc-correction-payment {
        max-width: 960px;
    }

    .doc-correction-offers__grid {
        grid-template-columns: 1fr;
    }

    .kyc-properties-correction__copy h2 {
        font-size: 40px;
    }

    .kyc-properties-correction__copy p {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .doc-correction-shell {
        padding: 18px 0 48px;
    }

    .doc-correction-hero h1 {
        font-size: 24px;
    }

    .doc-correction-hero p {
        font-size: 14px;
    }

    .doc-correction-issues-choice__options,
    .doc-correction-grid--2,
    .doc-correction-payment__provider-meta,
    .doc-correction-success__actions,
    .kyc-properties-correction__actions {
        grid-template-columns: 1fr;
        display: grid;
    }

    .doc-correction-offers__actions {
        flex-direction: column;
        gap: 10px;
    }

    .doc-correction-btn {
        width: 100%;
    }

    .doc-correction-processing h2 {
        font-size: 28px;
    }

    .doc-correction-processing p {
        font-size: 18px;
    }

    .doc-correction-processing-stepper {
        grid-template-columns: 1fr;
    }

    .doc-correction-success h2,
    .kyc-properties-correction__copy h2 {
        font-size: 28px;
    }

    .doc-correction-success p,
    .kyc-properties-correction__copy p {
        font-size: 16px;
    }
}

input,
textarea,
select {
    box-sizing: border-box;
}

/* Profile Page */
.profile-page {
    background: var(--color-ececec);
    min-height: 100vh;
}

.profile-main-section {
    padding: 72px 0 54.4px;
}

.profile-layout {
    /* display: grid;
    grid-template-columns: 318px minmax(0, 1fr); */
    gap: 21.6px;
    align-items: start;
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
}

.profile-form-card {
    grid-column: 2;
    border: 1px solid var(--color-c8c8c8);
    border-radius: var(--radius-16px);
    background: white;
    padding: var(--space-4);
    flex-grow: 1;
}

.profile-form-card__head {
    margin-bottom: var(--space-3);
    text-align: right;
}

.profile-form-card__head h1 {
    margin: 0;
    color: var(--color-0a0a0a);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
}

.profile-form-card__head p {
    margin: var(--space-2) 0 0;
    white-space: pre-line;

    color: var(--color-737373);
    text-align: right;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
}

.profile-field {
    display: grid;
    gap: var(--space-1);
}

.profile-field span {
    color: var(--color-0a0a0a);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0;
}

.profile-input {
    width: 100%;
    min-height: 40px;
    border-radius: var(--radius-8px);
    color: var(--color-737373);
    font-size: var(--font-size-sm);
    padding: 0 var(--space-3);

    border: 1px solid var(--color-e5e5e5);

    background: var(--color-f9fafb);
}

.profile-input::placeholder {
    color: var(--color-949aa3);
}

.profile-input:focus {
    outline: 2px solid var(--color-rgb-46-138-110-25pct);
    outline-offset: 1px;
}

.profile-phone-hint {
    margin: var(--space-2) 0 0;
    color: var(--color-8d949d);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    text-align: right;
}

.profile-divider {
    border: 0;
    border-top: 1px solid var(--color-d7d7d7);
    margin: var(--space-4) 0;
}

.profile-security {
    display: grid;
    gap: var(--space-3);
}

.profile-security h2 {
    margin: 0;

    color: var(--color-0a0a0a);
    font-size: var(--font-size-lg);
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
}

.profile-security-row {
    min-height: 52px;
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-10px);
    background: var(--color-f9fafb);
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.profile-inline-btn {
    min-height: 36px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-8px);
    border: 1px solid var(--color-e5e5e5);
    background: var(--color-rgba-229-229-229-0-3);

    color: var(--color-0a0a0a);
    text-align: center;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}

.profile-toggle {
    width: 44px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.profile-toggle__track {
    width: 44px;
    height: 24px;
    border-radius: var(--radius-999px);
    border: 1px solid var(--color-d5d9df);
    background: var(--color-e5e7eb);
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.profile-toggle__thumb {
    position: absolute;
    top: 1px;
    inset-inline-start: 1px;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-999px);
    background: var(--color-ffffff);
    box-shadow: 0 1px 3px var(--color-rgba-0-0-0-0-2);
    transition: inset-inline-start 0.2s ease;
}

.profile-toggle.is-enabled .profile-toggle__track {
    border-color: var(--color-2e8a6e);
    background: var(--color-2e8a6e);
}

.profile-toggle.is-enabled .profile-toggle__thumb {
    inset-inline-start: calc(100% - 21px);
}

.profile-toggle:focus-visible .profile-toggle__track {
    outline: 2px solid var(--color-2e8a6e);
    outline-offset: 2px;
}

.profile-security-copy {
    text-align: right;
    display: grid;
    gap: var(--space-1);
}

.profile-security-copy strong {
    color: var(--color-0a0a0a);
    text-align: right;
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
}

.profile-security-copy small {
    color: var(--color-6a7282);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.5;
}

.profile-actions {
    margin-top: var(--space-4);
    width: fit-content;
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.profile-btn {
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: var(--radius-8px);
    font-weight: 500;
    padding: 0 var(--space-4);

    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 400;
}

.profile-btn--save {
    border-color: var(--color-2e8a6e);
    background: var(--color-2e8a6e);

    color: var(--color-fafafa);
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-btn--cancel {
    border-color: transparent;
    background: transparent;
    color: var(--color-30363d);
}

.profile-sidebar {
    grid-column: 1;
    display: grid;
    gap: var(--space-4);
    min-width: 280px;
}

.profile-summary-card,
.profile-quick-nav {
    border: 1px solid var(--color-c8c8c8);
    border-radius: var(--radius-16px);
    background: white;
    overflow: hidden;
    position: relative;
}

.profile-summary-header-2,
.profile-summary-header {
    height: 76.8px;
    background: var(--color-2e8a6e);
}

.profile-summary-body {
    padding: 0 13.6px 13.6px;
    text-align: center;
}

.profile-summary-avatar-wrap {
    position: relative;
    width: fit-content;
    margin: -21.6px auto 0;
}

.profile-summary-avatar {
    width: 72.8px;
    height: 72.8px;
    border-radius: var(--radius-999px);
    overflow: hidden;
    border: 3px solid var(--color-efefef);
    display: inline-flex;
}

.profile-summary-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-summary-online-dot {
    position: absolute;
    bottom: 4.8px;
    inset-inline-start: 0;
    width: 13.44px;
    height: 13.44px;
    border-radius: var(--radius-999px);
    border: 2px solid var(--color-efefef);
    background: var(--color-0ec04f);
}

.profile-summary-online-verified-dot {
    position: absolute;
    bottom: 4.8px;
    inset-inline-start: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-999px);
    border: 2px solid var(--color-efefef);
    background: #23b400;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.profile-summary-online-verified-dot::after {
    content: "";
    width: 3.6px;
    height: 6.4px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) translate(-0.4px, -0.4px);
    box-sizing: border-box;
}


.profile-summary-body h3 {
    margin: 8.8px 0 0;
    color: var(--color-222831);
    font-size: 20px;
    font-weight: 400;
}

.profile-summary-body p {
    margin: 1.28px 0 0;
    color: var(--color-8a909a);
    font-size: 14px;
    font-weight: 400;
}

.profile-summary-status {
    margin-top: 7.2px;
    min-height: 24.8px;
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-999px);
    background: transparent;
    color: var(--color-5f6773);
    font-size: 17px;
    padding: 0 9.28px;
    display: inline-flex;
    align-items: center;
}

.profile-balance {
    margin-top: 11.2px;
    min-height: 48.8px;
    border: 2px solid var(--color-e5e7eb);
    border-radius: var(--radius-24px);
    background: var(--color-f9fafb);
    padding: 8px 16px;
    align-items: center;
    gap: 0;
    margin-left: 0;
    padding-left: 11px;
    display: flex;
    justify-content: space-between;
}

.profile-balance__label {
    color: var(--color-818894);
    font-size: 12px;
    font-weight: 400;
}

.profile-balance strong {
    color: var(--color-2f363d);
    font-size: 20px;
    font-weight: 400;
    white-space: nowrap;
    display: block;
    line-height: 14px;
}

.profile-balance button {
    min-height: 30.4px;
    border: 1px solid var(--color-2b2f35);
    border-radius: var(--radius-999px);
    background: var(--color-2b2f35);
    color: var(--color-ffffff);
    font-size: 16px;
    font-weight: 500;
    padding: 4px 13px;
    display: flex;
    justify-content: space-between;
    padding-left: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;

}

.profile-quick-nav {
    padding: 11.52px;
}

.profile-quick-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7.2px;
}

.profile-quick-nav__item a {
    min-height: 53.6px;
    border-radius: var(--radius-10px);
    padding: 5.6px 9.28px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-2a3138);
}

.profile-quick-nav__item.is-active a {
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
    border-radius: var(--radius-8px);
    box-shadow:
        0 4px 6px -1px var(--color-rgba-0-0-0-0-1),
        0 2px 4px -2px var(--color-rgba-0-0-0-0-1);
}

.profile-quick-nav__arrow {
    font-size: 22px;
    line-height: 1;

    width: 13.001px;
}

.profile-quick-nav__copy {
    flex: 1;
    text-align: right;
    display: grid;
}

.profile-quick-nav__copy strong {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}

.profile-quick-nav__copy small {
    color: var(--color-8e949e);

    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.profile-quick-nav__item.is-active .profile-quick-nav__copy small {
    color: var(--color-rgb-255-255-255-75pct);
}

.profile-quick-nav__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-9px);

    color: var(--color-7d8491);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    border-radius: var(--radius-10px);
    background: var(--color-f3f4f6);
}

.profile-quick-nav__item.is-active .profile-quick-nav__icon {
    background: var(--color-rgba-255-255-255-0-2);
    color: var(--color-ffffff);
}

.profile-quick-nav__icon svg {
    width: 20px;
    height: 20px;
}

.profile-logout-wrap {
    margin-top: 8px;
    border-top: 1px solid var(--color-d8d8d8);
    padding-top: 8.8px;
}

.profile-logout {
    min-height: 46.4px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7.2px;
    font-size: 26px;
    font-weight: 500;

    color: var(--color-e7000b);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}

.profile-logout__icon {
    width: 19.2px;
    height: 19.2px;
    display: inline-flex;
}

.profile-logout__icon svg {
    width: 100%;
    height: 100%;
}

/* My Appointments */
.appointments-panel {
    border: 1px solid var(--color-c8c8c8);
    border-radius: var(--radius-16px);
    background: var(--color-ffffff);
    padding: 16px;
    flex-grow: 1;
    /* min-height: 672px; */
    direction: rtl;
}

.appointments-panel__head {
    text-align: right;
}

.appointments-panel__head h1 {
    margin: 0;

    color: var(--color-0a0a0a);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 12px;
}

.appointments-panel__head p {
    margin: 5.6px 0 0;

    color: var(--color-737373);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}

.appointments-panel__list {
    margin-top: 17.6px;
    display: grid;
    gap: 13.6px;
}

.appointment-card {
    min-height: 116px;
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-12px);
    background: var(--color-ffffff);
    padding: 13.6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14.4px;
}

.appointment-card,
.progress-application-card {
    direction: rtl;
}

.appointment-card__visual {
    width: 51.2px;
    height: 51.2px;
    border-radius: var(--radius-10px);
    background: var(--color-ececec);
    color: var(--color-1f232a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    font-size: var(--font-size-2xl);
    font-weight: 500;
}

.appointment-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.appointment-card__body {
    min-width: 0;
    flex: 1;
    text-align: right;

    display: flex;
    flex-direction: column;
}

.appointment-card__status {
    min-height: 20px;
    border-radius: var(--radius-6px);
    padding: 0 11.2px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    align-self: flex-end;
}

.appointment-card__status.is-upcoming {
    background: var(--color-f0f7ff);
    border: 1px solid var(--color-b8d7ff);
    color: var(--color-4889d5);
}

.appointment-card__status.is-confirmed {
    background: var(--color-eaf8ee);
    border: 1px solid var(--color-b7e7c2);
    color: var(--color-27a75e);
}

.appointment-card__body h2 {
    margin: var(--space-2) 0 0;

    color: var(--color-0a0a0a);
    text-align: right;
    font-size: var(--font-size-lg);
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
}

.appointment-card__meta {
    margin-top: var(--space-1);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-2) var(--space-3);

    color: var(--color-4a5565);
    text-align: right;
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
}

.appointment-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.appointment-card__meta svg {
    width: 14.4px;
    height: 14.4px;
    color: var(--color-707780);
}

.appointment-card__actions {
    margin-top: var(--space-2);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.appointment-card__btn {
    min-height: 36px;
    border-radius: var(--radius-7px);
    border: 1px solid transparent;
    padding: 0 var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.appointment-card__btn--meeting {
    border-color: transparent;
    background: var(--color-e0f2ed);
    color: var(--color-2e8a6e);
}

.appointment-card__btn--reschedule {
    border-color: transparent;
    background: var(--color-fef4e0);
    color: var(--color-e39400);
}

.appointment-card__btn--cancel {
    border-color: transparent;
    background: var(--color-fee5e5);
    color: var(--color-d11c1c);
}

.appointment-card__btn--placeholder-link {
    pointer-events: none;
}

/* My Progress */
.progress-panel {
    display: grid;
    gap: 16px;
    flex-grow: 1;
    direction: rtl;
}

.progress-stage-card {
    border: 1px solid var(--color-e5e7eb);
    background: var(--color-f5f5f5);
    padding: 24px;

    border-radius: var(--radius-16-4px);
    background: var(--color-ffffff);
    box-shadow:
        0 4px 6px -1px var(--color-rgba-0-0-0-0-1),
        0 2px 4px -2px var(--color-rgba-0-0-0-0-1);
}

.progress-applications-card {
    border: 1px solid var(--color-cccccc);
    border-radius: var(--radius-16px);
    background: var(--color-f5f5f5);
    padding: var(--space-6);
}

.progress-stage-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.progress-stage-card__copy h1 {
    margin: 0;
    color: var(--color-222831);
    font-size: var(--font-size-3xl);
    font-weight: 600;
    line-height: 1.2;
}

.progress-stage-card__copy p {
    margin: var(--space-2) 0 0;
    color: var(--color-8a909a);
    font-size: var(--font-size-lg);
    line-height: 1.5;
}

.progress-stage-card__meta {
    flex-shrink: 0;
}

.progress-stage-card__meta span {
    color: var(--color-171717);
    font-size: var(--font-size-xl);
    font-weight: 400;
    line-height: 1.4;
}

.progress-stage-card__status {
    text-align: right;
    display: grid;
    gap: var(--space-1);
    max-width: 384px;
}

.progress-stage-card__status-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.progress-stage-card__status strong {
    color: var(--color-0a0a0a);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.5;
}

.progress-stage-card__status span {
    color: var(--color-737373);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.5;
}

.progress-stage-card__status b {
    width: fit-content;
    min-height: 24px;
    border: 1px solid var(--color-fef3c7);
    border-radius: var(--radius-6-8px);
    background: var(--color-fef9c2);
    color: var(--color-894b00);
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: 1.4;
    padding: var(--space-1) var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.progress-stage-card>.progress-bar {
    margin-top: 24px;
    height: 8px;
    border-radius: var(--radius-999px);
    background: var(--color-d4d4d4);
    overflow: hidden;
}

.progress-stage-card>.progress-bar span {
    border-radius: var(--radius-999px);
    background: var(--color-2e8a6e);
}

.progress-bar {
    margin-top: 11.2px;
    height: 6.72px;
    border-radius: var(--radius-999px);
    background: var(--color-d8d8d8);
    overflow: hidden;
}

.progress-bar span {
    height: 100%;
    display: block;
    background: var(--color-2e8a6e);
    border-radius: var(--radius-inherit);
}

.progress-bar--sm {
    margin-top: 5.6px;
    height: 5.44px;
}

.progress-stage-card__steps {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.progress-stage-chip {
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-10px);
    background: var(--color-f9fafb);
    padding: var(--space-3);
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-stage-chip__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-999px);
    background: var(--color-e5e7eb);
    color: var(--color-6a7282);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.progress-stage-chip__icon svg {
    width: 16px;
    height: 16px;
}

.progress-stage-chip.is-done {
    border-color: var(--color-dcfce7);
    background: var(--color-f0fdf4);
}

.progress-stage-chip.is-done .progress-stage-chip__icon {
    background: var(--color-b9f8cf);
    color: var(--color-0d542b);
}

.progress-stage-chip.is-done .progress-stage-chip__copy strong {
    color: var(--color-0d542b);
}

.progress-stage-chip.is-done .progress-stage-chip__copy small {
    color: var(--color-008236);
}

.progress-stage-chip.is-pending {
    opacity: 0.6;
}

.progress-stage-chip__copy {
    text-align: right;
    display: grid;
    gap: var(--space-1);
}

.progress-stage-chip__copy strong {
    color: var(--color-101828);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.4;
}

.progress-stage-chip__copy small {
    color: var(--color-6a7282);
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: 1.4;
}

.progress-stage-card__action {
    margin-top: 24px;
    margin-inline-start: auto;
    width: min(166px, 100%);
    min-height: 36px;
    border: 0;
    border-radius: var(--radius-8px);
    background: var(--color-171717);
    color: var(--color-fafafa);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 20px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.progress-applications-card__head {
    text-align: right;
    display: grid;
    justify-items: start;
    gap: var(--space-2);
}

.progress-applications-card__title {
    display: inline-flex;
    align-items: center;
    gap: 6.08px;
}

.progress-applications-card__title img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.progress-applications-card__head h2 {
    margin: 0;
    color: var(--color-0a0a0a);
    font-size: var(--font-size-xl);
    font-weight: 500;
    line-height: 1.3;
}

.progress-applications-card__head p {
    margin: 0;
    color: var(--color-737373);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.5;
}

.progress-applications-card__list {
    margin-top: var(--space-5);
    display: grid;
    gap: var(--space-4);
}

.progress-application-card {
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-16px);
    background: var(--color-ffffff);
    padding: var(--space-5);
    display: grid;
    gap: var(--space-4);
}

.progress-application-card__thumb {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-10px);
    overflow: hidden;
    flex-shrink: 0;
}

.progress-application-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.progress-application-card__body {
    min-width: 0;
    flex: 1;
    display: grid;
    justify-items: start;
    gap: var(--space-3);
}

.progress-application-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.progress-application-card__copy {
    text-align: right;
}

.progress-application-card__copy h3 {
    margin: 0;
    color: var(--color-0a0a0a);
    font-size: var(--font-size-lg);
    font-weight: 400;
    line-height: 1.5;
}

.progress-application-card__copy p {
    margin: 0;
    color: var(--color-6a7282);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.5;
}

.progress-application-card__status {
    min-height: 24px;
    border: 0;
    border-radius: var(--radius-8px);
    background: var(--color-171717);
    color: var(--color-fafafa);
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: 1.4;
    padding: var(--space-1) var(--space-2);
    white-space: nowrap;
}

.progress-application-card__tracker {
    margin-top: 0;
    text-align: right;
    display: grid;
    gap: 8px;
}

.progress-application-card__tracker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9.6px;
}

.progress-application-card__tracker-stage {
    color: var(--color-4a5565);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.progress-application-card__tracker-step {
    color: var(--color-0a0a0a);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.progress-application-card .progress-bar--sm {
    margin-top: 0;
    height: 8px;
    background: var(--color-rgb-23-23-23-20pct);
    border-radius: var(--radius-999px);
}

.progress-application-card .progress-bar--sm span {
    background: var(--color-2e8a6e);
    border-radius: var(--radius-20px);
}

.progress-application-card__steps {
    margin-top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.progress-application-card__steps span {
    color: var(--color-99a1af);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: right;
    white-space: nowrap;
}

.progress-application-card__steps span.is-active {
    color: var(--color-171717);
}

/* My Payments */
.payments-panel {
    border: 1px solid var(--color-cccccc);
    border-radius: var(--radius-16-4px);
    background: var(--color-ffffff);
    padding: 25px;
    flex-grow: 1;
    min-width: 0;
    min-height: auto;
    box-sizing: border-box;
    direction: rtl;
}

.payments-panel__head {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.payments-panel__copy {
    text-align: right;
    display: grid;
    gap: var(--space-1);
}

.payments-panel__copy h1 {
    margin: 0;
    color: var(--color-0a0a0a);
    font-size: var(--font-size-xl);
    font-weight: 500;
    line-height: 1.3;
}

.payments-panel__copy p {
    margin: 0;
    color: var(--color-737373);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.5;
}

.payments-panel__download {
    width: 111px;
    min-height: 32px;
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-8px);
    background: var(--color-rgb-229-229-229-30pct);
    color: var(--color-0a0a0a);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 20px;
    padding: 0 var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.payments-list {
    margin-top: var(--space-6);
    display: grid;
    gap: var(--space-4);
}

.payment-record {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-16px);
    background: var(--color-ffffff);
    min-height: 82px;
    padding: var(--space-3) var(--space-4);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    direction: rtl;
    text-align: right;
}

.payment-record__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-999px);
    background: var(--color-f0fdf4);
    color: var(--color-00a63e);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.payment-record__icon svg {
    width: 20px;
    height: 20px;
}

.payment-record__body {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 0;
}

.payment-record__body strong {
    color: var(--color-101828);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.5;
}

.payment-record__meta {
    color: var(--color-6a7282);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.payment-record__meta .dot {
    color: var(--color-6a7282);
}

.payment-record__amount {
    margin-inline-start: auto;
    display: grid;
    justify-items: start;
    text-align: left;
    gap: var(--space-1);
    flex-shrink: 0;
}

.payment-record__amount strong {
    color: var(--color-101828);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.5;
}

.payment-record__status {
    min-height: 24px;
    border-radius: var(--radius-8px);
    border: 0;
    background: var(--color-dcfce7);
    color: var(--color-008236);
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: 16px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Payments modal */
.payments-modal-root {
    position: fixed;
    inset: 0;
    z-index: 275;
    display: grid;
    place-items: center;
    padding: 16px;
}

.payments-modal-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    background: var(--color-rgb-15-23-42-34pct);
    backdrop-filter: blur(4px);
}

.payments-modal-shell {
    position: relative;
    width: min(860px, 100%);
    border-radius: var(--radius-14px);
    border: 1px solid var(--color-d8dde4);
    background: var(--color-f6f6f7);
    box-shadow: 0 24px 58px -40px var(--color-rgb-15-23-42-70pct);
    padding: var(--space-5) var(--space-5) var(--space-4);
    direction: rtl;
}

.payments-modal-close {
    position: absolute;
    top: 8.8px;
    inset-inline-start: 8.8px;
    width: 28.8px;
    height: 28.8px;
    border: none;
    border-radius: var(--radius-8px);
    background: transparent;
    color: var(--color-818995);
    font-size: 21.6px;
    line-height: 1;
}

.payments-modal__head {
    text-align: center;
}

.payments-modal__head h2 {
    margin: 0;
    color: var(--color-232a33);
    font-size: var(--font-size-4xl);
    font-weight: 600;
    line-height: 1.15;
}

.payments-modal__head p {
    margin: var(--space-2) auto 0;
    max-width: 608px;
    color: var(--color-8a909b);
    font-size: var(--font-size-lg);
    line-height: 1.5;
}

.payments-modal__plans {
    margin-top: var(--space-4);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.payments-plan-card {
    min-height: 224px;
    border: 1px solid var(--color-d5dae1);
    border-radius: var(--radius-14px);
    background: var(--color-fafafb);
    padding: var(--space-5) var(--space-4) var(--space-4);
    display: grid;
    justify-items: center;
    align-content: start;
    text-align: center;
    position: relative;
}

.payments-plan-card.is-featured {
    border-color: var(--color-2d3138);
    box-shadow: inset 0 0 0 1px var(--color-2d3138);
}

.payments-plan-card__badge {
    position: absolute;
    top: -9.28px;
    left: 50%;
    transform: translateX(-50%);
    min-height: 24px;
    border-radius: var(--radius-999px);
    background: var(--color-1e1f22);
    color: var(--color-ffffff);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 0 var(--space-2);
    display: inline-flex;
    align-items: center;
}

.payments-plan-card__icon {
    width: 38.4px;
    height: 38.4px;
    border-radius: var(--radius-999px);
    border: 1px solid var(--color-dee2e8);
    background: var(--color-f3f4f6);
    color: var(--color-13161c);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.payments-plan-card__icon svg {
    width: 16px;
    height: 16px;
}

.payments-plan-card h3 {
    margin: var(--space-3) 0 0;
    color: var(--color-2b3139);
    font-size: var(--font-size-2xl);
    font-weight: 500;
    line-height: 1.2;
}

.payments-plan-card strong {
    margin-top: 2.56px;
    color: var(--color-1f232a);
    font-size: 48px;
    font-weight: 500;
    line-height: 1.15;
}

.payments-plan-card small {
    color: var(--color-9aa1ac);
    font-size: var(--font-size-sm);
    margin-top: var(--space-1);
    line-height: 1.5;
}

.payments-plan-card b {
    margin-top: var(--space-1);
    color: var(--color-2a3038);
    font-size: var(--font-size-3xl);
    font-weight: 500;
    line-height: 1.2;
}

.payments-plan-card__cta {
    margin-top: var(--space-3);
    width: 100%;
    min-height: 32px;
    border: 1px solid var(--color-d8dce3);
    border-radius: var(--radius-999px);
    background: var(--color-ebecf0);
    color: var(--color-5c6470);
    font-size: var(--font-size-md);
    font-weight: 500;
}

.payments-modal__footnote {
    margin: var(--space-4) 0 0;
    color: var(--color-a1a9b3);
    text-align: center;
    font-size: var(--font-size-xs);
}

@media (max-width: 1200px) {


    .profile-sidebar {
        width: min(100%, 352px);
        margin-inline-start: auto;
    }

    .progress-stage-card__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payments-panel__head {
        flex-direction: column;
        align-items: flex-end;
    }

    .payments-modal__plans {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .profile-main-section {
        padding: 16px 0 32px;
    }

    .profile-layout {
        flex-direction: column;
        gap: 12px;
    }

    .profile-sidebar {
        order: -1;
        width: 100%;
        margin-inline-start: 0;
        gap: 8px;

        margin-top: 36px;

    }

    .profile-form-card,
    .appointments-panel,
    .progress-panel,
    .payments-panel {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .profile-summary-card {
        border: 0;
        border-radius: var(--radius-0);
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }


    .profile-summary-header-2,
    .profile-summary-header {
        height: 67px;
        border-radius: var(--radius-0);


        position: absolute;
        top: 62px;
        width: 100%;
        right: 0;
    }

    .profile-summary-body {
        padding: 0 0 8px;
    }

    .profile-summary-avatar-wrap {
        margin: -32px auto 0;
    }

    .profile-summary-avatar {
        width: 72px;
        height: 72px;
        border-width: 6px;
    }

    .profile-summary-online-dot {
        width: 14px;
        height: 14px;
        bottom: 1.28px;
        inset-inline-start: 1.28px;
        border-width: 2px;
    }

    .profile-summary-online-verified-dot {
        width: 14px;
        height: 14px;
        bottom: 1.28px;
        inset-inline-start: 1.28px;
        border-width: 2px;
    }

    .profile-summary-online-verified-dot::after {
        width: 3.8px;
        height: 6.8px;
        border-right-width: 2px;
        border-bottom-width: 2px;
    }

    .profile-summary-body h3 {
        margin-top: 8.8px;
        font-size: 18px;
        line-height: 20px;
        font-weight: 700;
    }

    .profile-summary-body p {
        font-size: 12px;
        line-height: 16px;
    }

    .profile-summary-status {
        margin-top: 8px;
        min-height: 32px;
        font-size: 12px;
        line-height: 16px;
        padding: 0 24px;
    }

    .profile-summary-status img {
        width: 16px;
        height: 16px;
    }

    .profile-balance {
        margin-top: 15.2px;
        min-height: 76px;
        border-width: 1px;
        border-radius: var(--radius-16px);
        background: var(--color-ffffff);
        box-shadow: 0 3px 14px 0 var(--color-rgba-0-0-0-0-07);
        padding: 8px 16px;

        justify-items: end;


    }

    .profile-balance__label {
        font-size: 11px;
        line-height: 16px;
    }

    .profile-balance strong {
        font-size: 22px;
        line-height: 1.1;
    }

    .profile-balance button {
        min-height: 32px;
        font-size: 16px;
        font-weight: 500;
        padding: 0 10px;
        width: fit-content;

    }

    .profile-quick-nav {
        padding: 0;
        border: 0;
        border-radius: var(--radius-0);
        position: relative;
        background: transparent;
        box-shadow: none;
        isolation: isolate;
        overflow: unset;
        margin-bottom: 22px;
    }

    .profile-quick-nav::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0px;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        background: white;
        box-shadow: 0 2px 8px 0 var(--color-rgba-0-0-0-0-05);
        z-index: -1;
    }

    .profile-quick-nav__list {
        display: flex;
        gap: 0;
    }

    .profile-quick-nav__item {
        flex: 1;
        min-width: 0;
    }

    .profile-quick-nav__item a {
        min-height: 48px;
        border-radius: var(--radius-0);
        justify-content: center;
        padding: 4px 1.6px;
    }

    .profile-quick-nav__copy {
        text-align: center;
    }

    .profile-quick-nav__copy strong {
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        white-space: nowrap;
        color: var(--color-b0b5be);
    }

    .profile-quick-nav__icon,
    .profile-quick-nav__copy small,
    .profile-quick-nav__arrow,
    .profile-logout-wrap {
        display: none;
    }

    .profile-quick-nav__item.is-active a {
        background: transparent;
        color: var(--color-2e8a6e);
        box-shadow: none;
        position: relative;
    }

    .profile-quick-nav__item.is-active a::after {
        content: "";
        position: absolute;
        inset-inline: 4px;
        bottom: 0;
        height: 3px;
        border-radius: var(--radius-2px);
        background: var(--color-2e8a6e);
    }

    .profile-quick-nav__item.is-active .profile-quick-nav__copy strong {
        color: var(--color-2e8a6e);
        font-weight: 700;
    }

    .profile-form-card {
        border-color: var(--color-e5e7eb);
        border-radius: var(--radius-14px);
        box-shadow: 0 2px 10px 0 var(--color-rgba-0-0-0-0-04);
        padding: 8px 0 0;
    }

    .profile-form-card__head {
        padding: 0 20px;
        margin-bottom: 0;
    }

    .profile-form-card__head h1 {
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
    }

    .profile-form-card__head p {
        font-size: 11px;
        line-height: 16px;
        margin-top: 2px;
    }

    .profile-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 4px;
    }

    .profile-field {
        border-top: 1px solid var(--color-e5e7eb);
        padding: 10px 20px;
        gap: 0;
    }

    .profile-field:first-child {
        border-top: 0;
    }

    .profile-field span {
        margin-bottom: 0;
        font-size: 10px;
        line-height: 16px;
        color: var(--color-b0b5be);
    }

    .profile-input {
        min-height: 20px;
        border: 0;
        border-radius: var(--radius-0);
        background: transparent;
        color: var(--color-17191e);
        font-size: 13px;
        line-height: 20px;
        padding: 0;
    }

    .profile-input::placeholder {
        color: var(--color-b0b5be);
    }

    .profile-input:focus {
        outline: none;
    }

    .profile-phone-hint {
        margin: 2px 20px 0;
        color: var(--color-d11c1c);
        font-size: 9px;
        line-height: 14px;
    }

    .profile-divider {
        margin: 12px 20px;
    }

    .profile-security {
        gap: 8px;
        padding: 0 20px;
    }

    .profile-security h2 {
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
    }

    .profile-security-row {
        min-height: 64px;
        border-radius: var(--radius-14px);
        padding: 8px 12px;
    }

    .profile-security-copy strong {
        font-size: 13px;
        line-height: 20px;
        font-weight: 700;
    }

    .profile-security-copy small {
        font-size: 10px;
        line-height: 14px;
    }

    .profile-inline-btn {
        min-height: 34px;
        border-radius: var(--radius-10px);
        font-size: 10px;
        font-weight: 600;
        line-height: 16px;
        padding: 0 16px;
    }

    .profile-toggle {
        width: 48px;
        height: 28px;
    }

    .profile-toggle__track {
        width: 48px;
        height: 28px;
    }

    .profile-toggle__thumb {
        top: 1px;
        inset-inline-start: 1px;
        width: 24px;
        height: 24px;
    }

    .profile-toggle.is-enabled .profile-toggle__thumb {
        inset-inline-start: calc(100% - 25px);
    }

    .profile-actions {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-top: 16px;
        margin-inline-start: 0;
        padding: 0 20px 20px;
        flex-direction: column;
        gap: 12px;
    }

    .profile-btn {
        width: 100%;
        max-width: 100%;
        min-height: 52px;
        border-radius: var(--radius-14px);
        font-size: 15px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .profile-btn--save {
        order: 1;
    }

    .profile-btn--cancel {
        order: 2;
        border-color: var(--color-e5e7eb);
        background: var(--color-f5f6f7);
        color: var(--color-616670);
    }

    .appointments-panel {
        min-height: auto;
        border: 0;
        border-radius: var(--radius-0);
        background: transparent;
        padding: 0;
    }

    .appointments-panel__head h1 {
        font-size: 24px;
        font-weight: 700;
        line-height: 20px;
        margin-bottom: 0;
    }

    .appointments-panel__head p {
        margin-top: 2px;
        font-size: 11px;
        line-height: 16px;
    }

    .appointments-panel__list {
        margin-top: 12px;
        gap: 12px;
    }

    .appointment-card {
        min-height: 0;
        border-radius: var(--radius-16px);
        box-shadow: 0 3px 12px 0 var(--color-rgba-0-0-0-0-07);
        padding: 16px;
        display: grid;
        gap: 8px;
    }

    .appointment-card__visual {
        display: none;
    }

    .appointment-card__body {
        gap: 0;
    }

    .appointment-card__status {
        min-height: 22px;
        border-radius: var(--radius-12px);
        font-size: 10px;
        line-height: 14px;
        padding: 0 12px;
    }

    .appointment-card__body h2 {
        margin-top: 6px;
        font-size: 13px;
        line-height: 20px;
        font-weight: 700;
    }

    .appointment-card__meta {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--color-e5e7eb);
        font-size: 10px;
        line-height: 16px;
        gap: 4px 12px;
    }

    .appointment-card__meta svg {
        width: 16px;
        height: 16px;
    }

    .appointment-card__actions {
        width: 100%;
        margin-top: 8px;
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

    .appointment-card__btn {
        min-height: 36px;
        border-radius: var(--radius-10px);
        font-size: 10px;
        line-height: 16px;
        font-weight: 600;
        padding: 0 16px;
        flex: 1 1 auto;
    }

    .progress-panel {
        gap: 12px;
    }

    .progress-stage-card {
        padding: 14px 16px;
        border: 1px solid var(--color-e5e7eb);
        border-radius: var(--radius-14px);
        box-shadow: 0 3px 12px 0 var(--color-rgba-0-0-0-0-07);
    }

    .progress-stage-card__head {
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
    }

    .progress-stage-card__status {
        max-width: none;
        flex: 1;
    }

    .progress-stage-card__status strong {
        font-size: 13px;
        font-weight: 700;
        line-height: 20px;
    }

    .progress-stage-card__status span {
        font-size: 10px;
        line-height: 14px;
    }

    .progress-stage-card__status b {
        min-height: 22px;
        border-radius: var(--radius-12px);
        font-size: 10px;
        line-height: 14px;
        padding: 0 10px;
    }

    .progress-stage-card__meta span {
        color: var(--color-2e8a6e);
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
    }

    .progress-stage-card>.progress-bar {
        margin-top: 10px;
        height: 8px;
    }

    .progress-stage-card__steps {
        margin-top: 10px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .progress-stage-chip {
        border: 0;
        border-radius: var(--radius-0);
        background: transparent;
        padding: 4px 2px;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .progress-stage-chip__icon {
        width: 16px;
        height: 16px;
        background: transparent;
    }

    .progress-stage-chip__icon svg {
        width: 14px;
        height: 14px;
    }

    .progress-stage-chip__copy {
        text-align: center;
        gap: 0;
    }

    .progress-stage-chip__copy strong {
        font-size: 8px;
        line-height: 12px;
        font-weight: 600;
    }

    .progress-stage-chip__copy small {
        font-size: 8px;
        line-height: 12px;
    }

    .progress-stage-card__action {
        width: 100%;
        min-height: 44px;
        border-radius: var(--radius-12px);
        margin-top: 12px;
        margin-inline-start: 0;
        font-size: 14px;
        font-weight: 700;
        padding: 0;
    }

    .progress-applications-card {
        padding: 16px;
        border: 1px solid var(--color-e5e7eb);
        border-radius: var(--radius-16px);
        background: var(--color-ffffff);
        box-shadow: 0 3px 12px 0 var(--color-rgba-0-0-0-0-07);
    }

    .progress-applications-card__head {
        gap: 2px;
    }

    .progress-applications-card__head h2 {
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
    }

    .progress-applications-card__head p {
        font-size: 11px;
        line-height: 16px;
    }

    .progress-applications-card__list {
        margin-top: 12px;
        gap: 12px;
    }

    .progress-application-card {
        padding: 12px;
        gap: 10px;
        border-radius: var(--radius-16px);
    }

    .progress-application-card__top {
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }

    .progress-application-card__thumb {
        width: 50px;
        height: 50px;
        max-width: none;
        border-radius: var(--radius-8px);
    }

    .progress-application-card__body {
        width: 100%;
        justify-items: start;
        gap: 6px;
    }

    .progress-application-card__copy h3 {
        font-size: 12px;
        line-height: 18px;
        font-weight: 700;
    }

    .progress-application-card__copy p {
        font-size: 10px;
        line-height: 14px;
    }

    .progress-application-card__status {
        min-height: 22px;
        border-radius: var(--radius-11px);
        font-size: 9px;
        line-height: 14px;
        padding: 0 10px;
    }

    .progress-application-card__tracker {
        gap: 4px;
    }

    .progress-application-card__tracker-row {
        width: 100%;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .progress-application-card__tracker-stage,
    .progress-application-card__tracker-step {
        font-size: 10px;
        line-height: 14px;
    }

    .progress-application-card .progress-bar--sm {
        height: 4px;
    }

    .progress-application-card__steps {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .progress-application-card__steps span {
        text-align: center;
        white-space: normal;
        font-size: 8px;
        line-height: 12px;
    }

    .progress-application-card__steps span.is-active {
        font-weight: 700;
    }

    .payments-panel {
        padding: 16px;
    }

    .payments-panel__head {
        align-items: flex-start;
        gap: 12px;
    }

    .payments-panel__copy h1 {
        font-size: 24px;
        line-height: 20px;
        font-weight: 700;
    }

    .payments-panel__copy p {
        font-size: 11px;
        line-height: 16px;
    }

    .payments-panel__download {
        width: auto;
        min-height: 32px;
        padding: 0 12px;
        font-size: 12px;
        line-height: 16px;
    }

    .payment-record {
        min-height: 72px;
        padding: 8px 12px;
        gap: 12px;
    }

    .payment-record__icon {
        width: 40px;
        height: 40px;
    }

    .payment-record__icon svg {
        width: 16px;
        height: 16px;
    }

    .payment-record__body strong {
        font-size: 13px;
        line-height: 20px;
    }

    .payment-record__meta {
        font-size: 10px;
        line-height: 14px;
    }

    .payment-record__amount {
        margin-inline-start: 0;
        text-align: right;
    }

    .payment-record__amount strong {
        font-size: 13px;
        line-height: 20px;
    }

    .payment-record__status {
        font-size: 10px;
        line-height: 14px;
        padding: 4px 8px;
    }

    .payments-modal-shell {
        padding: 14.4px 12.8px 12px;
    }

    .payments-plan-card {
        min-height: auto;
    }
}


@media (min-width:769px) {
    .profile-summary-header {
        display: none;
    }

    .
}

@media (max-width:769px) {
    .profile-summary-header-2 {
        display: none;
    }

    .
}

html[dir="rtl"] body {
    font-family: "Cairo", sans-serif;
}

html body {
    margin: 0;
}

.site-ui-scroll-locked,
body.site-ui-scroll-locked {
    overflow: hidden;
}

.guest-landing {
    direction: rtl;
    color: var(--color-111827);
}

.guest-container {
    margin-inline: auto;
    /* width: min(1240px, 100% - 32px); */
    width: min(1520px, 100% - 32px);
}

.section-title {
    margin: 0 0 32px;
    text-align: center;
    color: var(--color-181a20);
    font-size: clamp(21.6px, 2vw, 32px);
    line-height: 1.3;
    font-weight: 700;
}

.section-title--light {
    color: var(--color-f8fafc);
}

.guest-navbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--color-rgb-255-255-255-95pct);
    border-bottom: 1px solid var(--color-rgb-15-23-42-8pct);
    backdrop-filter: blur(4px);
}

.guest-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    gap: 16px;
}

.guest-navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.guest-navbar__links {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
}

.guest-navbar__link {
    color: var(--color-181a20);
    text-decoration: none;
    font-size: var(--font-size-lg);
    font-weight: 500;
    transition: color 160ms ease;
}

.guest-navbar__link.active,
.guest-navbar__link:hover {
    color: var(--color-2e8a6e);
}

.guest-navbar__actions {
    display: inline-flex;
    align-items: center;
    gap: 24px;
}

.guest-navbar--guest {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--color-ffffff);
    border-bottom: 1px solid var(--color-e6e7ea);
    box-shadow:
        0 0 4px var(--color-rgb-0-0-0-4pct),
        0 8px 16px var(--color-rgb-0-0-0-8pct);
}

.guest-navbar__inner--guest {
    /* min-height: 112px; */
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    /* padding-block: 24px; */
    padding-top: 24px;
    padding-bottom: 24px;
}

.guest-navbar__inner--guest .guest-navbar__links {
    justify-self: center;
    gap: var(--space-7);
}

.guest-navbar__inner--guest .guest-navbar__link {
    font-size: var(--font-size-lg);
    font-weight: 400;
}

.guest-navbar--guest .guest-navbar__link.active {
    font-weight: 700;
}

.guest-navbar__cta {
    border-radius: var(--radius-16px);
    min-height: 54px;
    padding: var(--space-3) 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-md);
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}

.guest-navbar__cta--primary {
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.guest-navbar__cta--secondary {
    background: var(--color-ffffff);
    color: var(--color-2e8a6e);
    border-color: var(--color-2e8a6e);
}

.guest-navbar__mobile-signup,
.guest-navbar__mobile-toggle {
    display: none;
}

.guest-navbar__mobile-signup {
    border: 1px solid var(--color-2e8a6e);
    border-radius: var(--radius-16px);
    background: var(--color-ffffff);
    color: var(--color-2e8a6e);
    min-height: 28px;
    padding: 2px 12px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.guest-navbar__mobile-toggle {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-8px);
    background: transparent;
    color: var(--color-343330);
    align-items: center;
    justify-content: center;
}

.guest-navbar__mobile-toggle svg {
    width: 24px;
    height: 24px;
}

.hero-section {
    position: relative;
    min-height: 620px;
    background: linear-gradient(135deg, var(--color-606060) 0%, var(--color-2f2f2f) 42%, var(--color-151515) 100%);
    overflow: hidden;
}

.hero-section .img_cover {
    position: absolute;
    width: 100%;
    height: 100%;
}

.hero-section .img_cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(145deg,
            var(--color-rgb-255-255-255-12pct) 0%,
            var(--color-rgb-255-255-255-0pct) 65%),
        repeating-linear-gradient(90deg,
            var(--color-rgb-255-255-255-0pct),
            var(--color-rgb-255-255-255-0pct) 43px,
            var(--color-rgb-255-255-255-7pct) 44px,
            var(--color-rgb-255-255-255-7pct) 45px);
    opacity: 0.4;
}

.hero-section__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            var(--color-rgb-0-0-0-12pct) 0%,
            var(--color-rgb-0-0-0-56pct) 100%);
}

.hero-section__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22.4px;
    padding-top: 49.6px;
}

.hero-section__copy {
    width: 100%;
    text-align: start;
    color: var(--color-ffffff);
}

.hero-section__copy h1 {
    margin: 0;
    font-size: 64px;
    font-weight: 700;

    color: var(--color-000000);
}

.hero-section__copy p {
    margin: 12px 0 0;
    color: var(--color-rgb-255-255-255-85pct);
    font-size: 40px;
    font-weight: 600;
}

.hero-search {
    width: 100%;
    background: var(--color-f7f7f8);
    border-radius: var(--radius-17-92px);
    padding: 15.2px 18.88px 16px;
    border: 1px solid var(--color-e5e7eb);
    box-shadow: 0 20px 32px -26px var(--color-rgb-0-0-0-60pct);
}

.hero-search__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 16px;
    align-items: end;
}

.hero-search__field {
    display: flex;
    flex-direction: column;
    gap: 7.36px;
    font-size: 14.4px;
    color: var(--color-334155);
}

.hero-search__field .hero-search__title {
    font-size: 20px;
    color: var(--color-231f20);
    font-weight: 400;
    line-height: 1.25;
}

.hero-search__control {
    min-height: 48.8px;
    border-radius: var(--radius-14-72px);
    background: var(--color-efeff0);
    padding: 6.4px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8.32px;
}

.hero-search__control input {
    border: none;
    background: transparent;
    width: 100%;
    padding: 0;
    color: var(--color-6b7280);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.25;
}

.hero-search__control input::placeholder {
    color: var(--color-80868f);
}

.hero-search__control input:focus {
    outline: none;
}

.hero-search__chevron {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-a4a9b1);
    flex-shrink: 0;
}

.hero-search__chevron svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-search__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9.6px;
    min-height: 48.8px;
    align-self: end;
    cursor: pointer;
}

.hero-search__toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.hero-search__toggle-track {
    width: 80px;
    height: 39.2px;
    border-radius: var(--radius-999px);
    background: var(--color-cfd4d8);
    position: relative;
    flex-shrink: 0;
    transition: background-color 180ms ease;
}

.hero-search__toggle-knob {
    position: absolute;
    top: 4.16px;
    right: 4.16px;
    width: 30.88px;
    height: 30.88px;
    border-radius: var(--radius-50pct);
    background: var(--color-ffffff);
    box-shadow: 0 2px 6px var(--color-rgb-0-0-0-15pct);
    transition: transform 180ms ease;
}

.hero-search__toggle input:checked+.hero-search__toggle-track {
    background: var(--color-2e8a6e);
}

.hero-search__toggle input:checked+.hero-search__toggle-track .hero-search__toggle-knob {
    transform: translateX(-40.8px);
}

.hero-search__toggle-text {
    color: var(--color-110e0e);
    font-size: 20px;
    white-space: nowrap;
    font-weight: 400;
}

.hero-search__control:focus-within {
    outline: 2px solid var(--color-rgb-14-122-95-22pct);
    outline-offset: 1px;
}

.hero-search__footer {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 14.4px;
}

.hero-search__slider {
    display: flex;
    flex-direction: column;
    gap: 6.72px;
    color: var(--color-334155);
}

.hero-search__slider-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 11.2px;
}

.hero-search__slider-meta label {
    color: var(--color-1c1f24);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
}

.hero-search__slider-tag {
    min-height: 32px;
    padding: 4.48px 12.48px;
    border-radius: var(--radius-999px);
    background: var(--color-2e8a6e66);
    color: var(--color-0a0a0a);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-search__slider input[type="range"] {
    --slider-progress: 60%;
    width: 100%;
    height: 16px;
    border-radius: var(--radius-999px);
    cursor: pointer;
    touch-action: pan-x;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(to left,
            var(--color-2e8a6e) var(--slider-progress),
            var(--color-e5e7eb) var(--slider-progress));
}

.hero-search__slider input[type="range"]::-webkit-slider-runnable-track {
    height: 16px;
    border-radius: var(--radius-999px);
    background: transparent;
}

.hero-search__slider input[type="range"]::-moz-range-track {
    height: 16px;
    border-radius: var(--radius-999px);
    background: transparent;
}

.hero-search__slider input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: 0;
    border-radius: var(--radius-50pct);
    border: 2px solid var(--color-2e8a6e);
    background: var(--color-f7f7f8);
    cursor: pointer;
}

.hero-search__slider input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-2e8a6e);
    border-radius: var(--radius-50pct);
    background: var(--color-f7f7f8);
    cursor: pointer;
}

.hero-search__slider-scale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-1f2937);
    font-size: clamp(15.2px, 1.15vw, 30.4px);
    font-weight: 500;
    line-height: 1.2;
}

.hero-search__submit {
    min-width: 460px;
    min-height: 49.6px;
    border-radius: var(--radius-14-72px);
    color: var(--color-110e0e);
    font-size: clamp(16.8px, 1.35vw, 33.28px);
    font-weight: 500;
    padding: 8px 20.8px;
}

.hero-search--desktop {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.hero-search-compact {
    display: none;
}

.hero-search-compact__filter {
    border: 0;
    background: var(--color-ffffff);
    color: var(--color-343330);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;

    border-radius: var(--radius-16px);

    padding: 7px !important;

    border: 1px solid var(--color-rgba-0-0-0-0-00);
    background: var(--color-ffffff);
    box-shadow: 0 0 4px 0 var(--color-rgba-0-0-0-0-04), 0 4px 8px 0 var(--color-rgba-0-0-0-0-06);

}

.hero-search-compact__filter img {
    width: 24px;
    height: 24px;
}


.hero-search-compact__field {
    min-height: 19px;
    border-radius: var(--radius-16px);
    background: var(--color-ffffff);
    box-shadow:
        0 0 4px var(--color-rgb-0-0-0-4pct),
        0 4px 8px var(--color-rgb-0-0-0-6pct);
    padding: 9px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1 1 auto;
}

.hero-search-compact__placeholder {
    color: var(--color-767676);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: start;
    width: 100%;

}

.hero-search-compact__icon {
    width: 24px;
    height: 24px;
    color: var(--color-343330);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-search-compact__icon svg {
    width: 100%;
    height: 100%;
}

.mobile-bottom-sheet-root {
    position: fixed;
    inset: 0;
    z-index: 140;
}

.mobile-bottom-sheet-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: var(--color-rgb-2-6-23-38pct);
}

.mobile-bottom-sheet-panel {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    max-height: min(88vh, 780px);
    overflow-y: auto;
    border-radius: var(--radius-22px-22px-0-0);
    background: var(--color-ffffff);
    box-shadow: 0 -14px 28px var(--color-rgb-15-23-42-22pct);
    padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
    direction: rtl;
}

.mobile-bottom-sheet__handle {
    width: 52px;
    height: 5px;
    border-radius: var(--radius-999px);
    background: var(--color-d4d8de);
    margin: 4px auto 12px;
}

.hero-filters-sheet .hero-search--sheet {
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--radius-0);
    box-shadow: none;
    background: transparent;
}

.hero-filters-sheet .hero-search__row {
    grid-template-columns: 1fr;
    gap: 12px;
}

.hero-filters-sheet .hero-search__field .hero-search__title {
    font-size: 16px;
}

.hero-filters-sheet .hero-search__control {
    min-height: 46.4px;
}

.hero-filters-sheet .hero-search__control input {
    font-size: 17px;
}

.hero-filters-sheet .hero-search__toggle {
    justify-content: flex-start;
}

.hero-filters-sheet .hero-search__footer {
    grid-template-columns: 1fr;
    gap: 11.2px;
}

.hero-filters-sheet .hero-search__submit {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.hero-steps {
    width: 100%;
    /* display: grid; */
    /* grid-template-columns: repeat(5, minmax(0, 1fr)); */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 77px;
    margin-top: 19.2px;
    padding-bottom: 170px;
}

.hero-step-card {
    position: relative;
    height: 200px;
    padding: 26px 19px;
    text-align: center;
    border: 1px solid var(--color-e2e8f0);
    display: flex;
    flex-direction: column;
    width: 242px;
    /* justify-content: center; */
    justify-content: flex-start;

    border-radius: var(--radius-17-699px);
    background: var(--color-ffffff);
    box-shadow:
        0 0 4px 0 var(--color-rgba-0-0-0-0-04),
        0 8px 16px 0 var(--color-rgba-0-0-0-0-08);
}

/* 
.hero-step-card::after {
    content: "";
    position: absolute;
    top: 56px;
    right: calc(100% - 1px);
    width: clamp(58px, 5vw, 86px);
    height: 3px;
    border-radius: var(--radius-999px);
    z-index: 1;
    background: linear-gradient(
        90deg,
        var(--color-rgba-35-31-32-0-14) 0%,
        var(--color-rgba-35-31-32-0-85) 100%
    );
    -webkit-mask: repeating-linear-gradient(
        90deg,
        var(--color-000000) 0 8px,
        transparent 8px 14px
    );
    mask: repeating-linear-gradient(90deg, var(--color-000000) 0 8px, transparent 8px 14px);
    opacity: 0.78;
    pointer-events: none;
} */

.hero-step-card .icon_container {
    content: "";
    position: absolute;
    top: 56px;
    right: calc(100% - 5px);
    width: 8px;
    height: 3px;
    border-radius: var(--radius-999px);
    z-index: -1;
    opacity: 0.78;
    pointer-events: none;
}

.hero-step-card .icon_container img {
    width: 1000%;
    height: auto;
    object-fit: cover;
}

.hero-step-card:last-child .icon_container {
    display: none;
}

.hero-step-card__number {
    width: -moz-fit-content;
    position: absolute;
    left: 6px;
    bottom: -28px;
    color: var(--color-dedede);
    font-size: 76px;
    font-weight: 400;
    opacity: 0.7;
}

.hero-step-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: var(--radius-8px);
    margin-bottom: 12px;
}

.hero-step-card__icon img {
    position: relative;
    z-index: 66;
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
}

.hero-step-card h3 {
    margin: 0;
    color: var(--color-181a20);
    line-height: 1.45;
    font-size: 24px;
    font-weight: 400;
    text-align: start;
}

.property-nav-section {
    padding: 54.4px 0;
    background: var(--color-ffffff);
}

.property-nav-grid {
    display: flex;
    /* gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    grid-auto-rows: 1fr; */
    justify-content: space-around;
}

.property-nav-card {
    /* background: var(--color-ffffff); */
    /* border: 1px solid var(--color-e2e8f0); */
    border-radius: var(--radius-12px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    gap: 12px;
    height: 100%;
    padding: 17px;
    text-align: right;
    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.property-nav-card:hover {
    box-shadow: 0 10px 24px 0 var(--color-rgba-24-26-32-0-08);
}

.property-nav-card__media {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.property-nav-card .media-placeholder--icon {
    width: 40px;
    height: 40px;
    min-height: unset;
    display: block;
    object-fit: contain;
}

.property-nav-card__title {
    margin: 0;
    color: var(--color-181a20);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.property-nav-card__title-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.property-nav-card__subtitle {
    margin: 0;
    width: 103px;
    color: var(--color-181a20);
    font-size: 10px;
    font-weight: 400;
    line-height: 19px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.property-nav-card__cta {
    margin-top: auto;
    align-self: flex-end;
    color: var(--color-181a20);
    border-radius: var(--radius-12px);
}

.property-nav-card__cta svg {
    color: black;
    width: 15px;
    height: 15.059px;
    margin: 8px;
    transition: all 0.3s ease-in-out;
}

.property-nav-card__cta:hover svg {
    color: white;
}

.media-placeholder {
    width: 100%;
    border: 1px dashed var(--color-9ca3af);
    border-radius: var(--radius-12-8px);
    background: linear-gradient(140deg, var(--color-f8fafc) 0%, var(--color-e2e8f0) 100%);
    color: var(--color-475569);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13.6px;
    min-height: 88px;
}

.media-placeholder--icon {
    min-height: 110px;

}


.media-placeholder--property {
    min-height: 150px;
}

.media-placeholder--area {
    min-height: 210px;
}



@media (max-width: 992px) {
    .property-nav-section .container {
        padding-inline: 24px;
    }

    .property-nav-card {
        height: 154px;
        min-height: 154px;
    }

    .property-nav-card__cta {
        display: none !important;
    }
}




@media screen and (min-width: 768px) {
    .mobile {
        display: none !important;
    }
}


@media screen and (max-width: 768px) {
    .desktop {
        display: none !important;
    }
}

.sale-option-section {
    /* background:
linear-gradient(180deg, var(--color-111827) 0%, var(--color-181a20) 100%),
repeating-linear-gradient(
  45deg,
  var(--color-rgb-255-255-255-0-03),
  var(--color-rgb-255-255-255-0-03) 10px,
  transparent 10px,
  transparent 22px
  ); */
    position: relative;
    z-index: 0;
    padding: 44px 0;
}

.guest-footer .img_container,
.sale-option-section .img_container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 100%;

    img {
        height: 100%;
        width: 100%;

        object-fit: cover;
    }
}

.sale-option-grid {
    /* display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; */

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

.home-page #sale-options .sale-option-swiper {
    display: none;
}

.home-page #sale-options .sale-option-swiper .swiper-wrapper {
    align-items: stretch;
}

.home-page #sale-options .sale-option-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.home-page #sale-options .sale-option-swiper .swiper-slide .sale-option-card {
    width: 100%;
    height: 100%;
}

.home-page #sale-options .sale-option-swiper__pagination {
    position: static;
    margin-top: 12px;
    text-align: center;
}

.sale-option-card {
    /* border-top: 1px solid var(--color-rgb-255-255-255-25pct); */
    padding-top: 13.6px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.sale-option-card__icon img {
    width: 84px;
    height: 82px;
}

.sale-option-card__icon {
    display: inline-block;
    color: var(--color-0fc183);
    margin-bottom: 7.2px;
}

.sale-option-card h3 {
    margin: 0;
    color: var(--color-0fc183);
    font-size: 32px;
    font-weight: 600;
}

.sale-option-card p {
    margin: 7.2px 0 0;
    color: var(--color-rgb-241-245-249-75pct);
    font-size: 20px;
    line-height: 1.6;
    max-width: 249px;
}

@media (max-width: 992px) {
    .home-page #sale-options .sale-option-grid--desktop {
        display: none;
    }

    .home-page #sale-options .sale-option-swiper {
        display: block;
        overflow: visible;
    }

    .home-page #sale-options .container {
        overflow: hidden;
    }

    .home-page #sale-options .sale-option-section__title {
        margin-bottom: 15.2px;
        font-size: clamp(21.6px, 5.1vw, 28px);
        line-height: 1.35;
    }

    .home-page #sale-options .sale-option-swiper .sale-option-card {
        padding: 16px;
        gap: 8px;
        border-radius: var(--radius-12px);
        align-items: flex-start;
    }

    .home-page #sale-options .sale-option-swiper .sale-option-card__icon {
        margin-bottom: 0;
    }

    .home-page #sale-options .sale-option-swiper .sale-option-card__icon img {
        width: 32px;
        height: 32px;
    }

    .home-page #sale-options .sale-option-swiper .sale-option-card h3 {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.35;
        color: var(--color-2e8a6e);
    }

    .home-page #sale-options .sale-option-swiper .sale-option-card p {
        margin: 0;
        max-width: 100%;
        font-size: 10px;
        line-height: 1.5;
        color: var(--color-rgb-248-250-252-92pct);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}

.tailored-properties-section {
    padding: 92.8px 0 48px;
    background: var(--color-ffffff);
}

.tailored-properties-section .container {
    /* width: min(1260px, 100% - 32px); */
}

.tailored-properties-section .section-title {
    color: var(--color-231f20);
    margin-bottom: 32px;
    font-size: 40px;
    font-weight: 600;
}

.tailored-properties__mobile-heading {
    display: none;
}

.tailored-properties__mobile-title {
    margin: 0;
}

.tailored-properties__mobile-link {
    text-decoration: none;
}

.property-offer-card__actions--home-tailored .property-offer-card__favorite--action {
    display: none;
}

.property-offer-card__actions--home-tailored .property-offer-card__actions-cta {
    min-width: 0;
}

.landing-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12.8px;
    margin-bottom: 29.6px;
}

.landing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-16px);
    border: 1px solid transparent;

    cursor: pointer;
    text-decoration: none;
    transition: all 160ms ease;
}

.landing-tabs .landing-tabs__item {
    min-height: 47.2px;
    min-width: fit-content;
    border-radius: var(--radius-12-48px);
    padding: 9.92px 17.28px;
    background: var(--color-f3f4f6);
    font-size: 24px;
    font-weight: 500;
    /* justify-content: space-between; */
    gap: 11px;
}

.landing-tabs .landing-tabs__item.activeTab {
    background: var(--color-2e8a6e);
}

.landing-tabs__item-label {
    line-height: 1;
}

.landing-tabs__item-icon {
    width: 17.28px;
    height: 17.28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.landing-tabs__item-icon svg {
    width: 100%;
    height: 100%;
}

.landing-button--sm {
    min-height: 36.8px;
    padding: 0px;

    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: center;

    width: 193px;
    height: 54px;
}

.landing-button--md {
    min-height: 43.2px;
    padding: 8.96px 19.2px;
    font-size: 15.04px;
}

.landing-button--primary {
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.landing-button--primary:hover {
    background: var(--color-0d6a53);
}

.landing-button--secondary {
    border-color: var(--color-2e8a6e);
    color: var(--color-2e8a6e);
    background: var(--color-ffffff);
}

.landing-button--secondary:hover {
    background: var(--color-ecfdf5);
}

.landing-button--outline {
    border: 1px solid var(--color-181a20);
    color: var(--color-2e8a6e);
    background: transparent;
}

.landing-button--outline:hover {
    border-color: transparent !important;
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.landing-button--tab {
    border-color: var(--color-cbd5e1);
    color: var(--color-181a20);
    background: var(--color-ffffff);
}

.landing-button--tab:hover {
    border-color: var(--color-94a3b8);
}

.landing-button--tabActive {
    border-color: var(--color-2e8a6e);
    background: var(--color-2e8a6e);
    color: var(--color-0b1613);
}

.tailored-properties-section .landing-button--tab {
    border-color: transparent;
    color: var(--color-181a20);
    background: var(--color-f3f4f6);
}

.tailored-properties-section .landing-button--tab:hover {
    border-color: var(--color-ffffff);
    background: var(--color-ffffff);
}

.tailored-properties-section .landing-button--tabActive {
    border-color: var(--color-2e8a6e);
    background: var(--color-2e8a6e);
    color: white;
}

.tailored-properties-section .landing-button--tabActive .landing-tabs__item-icon img,
.tailored-properties-section .landing-tabs .landing-tabs__item.activeTab .landing-tabs__item-icon img {
    filter: brightness(0) invert(1);
}

.property-items-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Tablet: 2 cards per row */
@media (min-width: 768px) {
    .property-items-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 cards per row */
@media (min-width: 1024px) {
    .property-items-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .results-page .property-items-grid.cards-grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.property-offer-card {
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-22px);
    border: 1px solid var(--color-d1d1d1);
    background: var(--color-ffffff);
    box-shadow: 0 6px 18px -14px var(--color-rgb-15-23-42-10pct), 0 2px 6px var(--color-rgb-15-23-42-0pct);
}

.property-offer-card__media {
    position: relative;
    overflow: hidden;
    height: 250px;
    width: 100%;
    border-bottom: 1px solid var(--color-e8ebef);
}

.property-offer-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* filter: grayscale(1); */
    transform: scale(1.06);
    transform-origin: center;
}

.property-offer-card__favorite {
    position: absolute;
    top: var(--space-4);
    inset-inline-end: var(--space-4);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-999px);
    border: none;
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 4px 10px var(--color-rgb-15-23-42-24pct);
}

.property-offer-card__favorite svg {
    width: var(--font-size-lg);
    height: var(--font-size-lg);
}

.property-offer-card__badges {
    position: absolute;
    top: var(--space-4);
    inset-inline-start: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: calc(100% - 80px);
    flex-wrap: wrap;

    box-shadow: 0px 2px 4px 0px var(--color-00000014);

    box-shadow: 0px 0px 6px 0px var(--color-00000005);
}

.property-offer-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    border-radius: var(--radius-999px);
    padding: 0 var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

.property-offer-card__badge img {
    width: var(--font-size-md);
    height: var(--font-size-md);
    flex-shrink: 0;
}

.property-offer-card__badge--finance {
    background: var(--color-f8e000);
    border-color: var(--color-e2cd00);
    color: var(--color-231f20);
}

.property-offer-card__badge--initiative {
    background: var(--color-f4f5f5);
    border-color: var(--color-d9e7e0);
    color: var(--color-2e8a6e);
}

.property-offer-card__badge--green {
    background: var(--color-2e8a6e);
    border-color: transparent;
    color: white;
}

.property-offer-card__body {
    background: var(--color-ffffff);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: auto;
    flex: 1;


}


.property-offer-card__actions.property-offer-card__actions--home-tailored {
    margin-top: auto;
}

.property-offer-card__title {
    margin: 0;
    text-align: start;
    color: var(--color-1f2937);
    line-height: 1.42;
    font-size: 24px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media and (min-width:992px) {

    .property-offer-card__title svg {
        display: none;

    }
}

.property-offer-card__date {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    color: var(--color-7c8087);
    font-weight: 400;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.property-offer-card__date img {
    width: var(--font-size-md);
    height: var(--font-size-md);
    flex-shrink: 0;
}

.property-offer-card__facts {
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2) 6px;
    color: var(--color-7c8087);
    font-size: var(--font-size-sm);
    font-weight: 400;
    justify-items: start;
    line-height: 1.5;
}

.property-offer-card__facts li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.property-offer-card__facts img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.property-offer-card__price-block {
    display: grid;
    gap: var(--space-1);
}

.property-offer-card__label {
    margin: 0;
    color: var(--color-888f97);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.4;
}

.property-offer-card__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    color: var(--color-2e8a6e);
    margin-top: 2px;
}

.property-offer-card__price-value {
    font-size: var(--font-size-2xl);
    line-height: 1.08;
    font-weight: 400;
}

.property-offer-card__price-suffix {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-717182);
}

.property-offer-card__progress {
    border-radius: var(--radius-8px);
    background: var(--color-f9fafc);
    margin-top: 0;
    padding: 5px 10px;
}

.property-offer-card__terms {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    color: var(--color-000000);
    font-size: var(--font-size-sm);
    font-weight: 400;
    margin-top: 0;
    line-height: 1.5;
    margin-bottom: 0;
}

.property-offer-card__terms-icon {
    width: 12px;
    height: var(--font-size-md);
    flex-shrink: 0;
}

.property-offer-card__terms strong {
    margin-inline-end: 2.4px;
    color: #a3a3a3;
}

.property-offer-card__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-999px);
    background: var(--color-2e8a6e);
}

.property-offer-card__cta {
    min-height: 37px;
    margin-top: var(--space-1);
    border-radius: var(--radius-10px);
    border: 1px solid var(--color-2e8a6e);
    background: var(--color-ffffff);
    color: var(--color-2e8a6e);
    text-decoration: none;
    font-size: var(--font-size-md);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 160ms ease;
    width: 100%;
}

button.property-offer-card__cta {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
}

.property-offer-card__cta:hover {
    background: var(--color-2e8a6e);
    color: var(--color-f5fbf8);
}

.property-offer-card__cta--active {
    background: var(--color-2e8a6e);
    color: var(--color-f5fbf8);
}

.tailored-properties__pagination {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    gap: 7.04px;
}

.tailored-properties__page {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-9-28px);
    border: 1px solid var(--color-2e8a6e);
    background: transparent;
    color: var(--color-231f20);
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
}

.tailored-properties__page--active {
    background: var(--color-2e8a6e);
    color: white;
}

@media (max-width: 720px) {
    .home-page #tailored-properties {
        padding: 40px 0 28.8px;
        overflow-x: hidden;
    }

    .home-page #tailored-properties .section-title {
        display: none;
    }

    .home-page #tailored-properties .tailored-properties__mobile-heading {
        width: min(500px, 100%);
        margin: 0 auto 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .home-page #tailored-properties .tailored-properties__mobile-title {
        color: var(--color-231f20);
        font-size: 16px;
        font-weight: 400;
        line-height: 1;
    }

    .home-page #tailored-properties .tailored-properties__mobile-link {
        color: var(--color-2e8a6e);
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
    }

    .home-page #tailored-properties .tailored-properties__tabs {
        width: min(500px, 100%);
        margin: 0 auto 16px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .home-page #tailored-properties .tailored-properties__tab,
    .home-page #tailored-properties .tailored-properties__tab.landing-button--tabActive,
    .home-page #tailored-properties .tailored-properties__tab.landing-button--tab {
        width: 100%;
        height: auto;
        min-height: 0;
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: var(--radius-0);
        background: transparent;
        color: var(--color-231f20);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }

    .home-page #tailored-properties .tailored-properties__tab .landing-tabs__item-icon {
        width: 100%;
        height: 52px;
        border-radius: var(--radius-16px);
        background: var(--color-f3f4f6);
        border: 1px solid transparent;
    }

    .home-page #tailored-properties .tailored-properties__tab .landing-tabs__item-icon img {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }

    .home-page #tailored-properties .tailored-properties__tab .landing-tabs__item-label {
        min-height: 26px;
        display: inline-flex;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        text-align: center;
        color: var(--color-231f20);
        font-size: 10px;
        font-weight: 400;
        line-height: 1.3;
        white-space: normal;
    }

    .home-page #tailored-properties .tailored-properties__tab.activeTab .landing-tabs__item-icon {
        background: var(--color-2e8a6e);
        border-color: var(--color-2e8a6e);
    }

    .home-page #tailored-properties .tailored-properties__grid {
        width: min(500px, 100%);
        margin-inline: auto;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored {
        border-radius: var(--radius-16px);
        border: 1px solid var(--color-rgb-0-0-0-40pct);
        box-shadow:
            0 0 4px var(--color-rgb-0-0-0-1pct),
            0 2px 4px var(--color-rgb-0-0-0-3pct);
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__media {
        height: 151px;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__favorite--media {
        display: none;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__badges {
        top: 8px;
        inset-inline-start: 8px;
        max-width: calc(100% - 16px);
        gap: 8px;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__badge {
        min-height: 30px;
        padding: 2px 14px;
        font-size: 10px;
        gap: 4px;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__badge img {
        width: 16px;
        height: 16px;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__body {
        padding: var(--space-4);
        gap: var(--space-3);
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__title {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--color-231f20);
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__date,
    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__facts {
        font-size: 14px;
        line-height: 1.2;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__date {
        gap: 7px;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__date img,
    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__facts img {
        width: 16px;
        height: 16px;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__facts {
        gap: 8px 12px;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__label {
        font-size: 12px;
        color: var(--color-717182);
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__price-value {
        font-size: 20px;
        line-height: 1.2;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__price-suffix {
        font-size: 14px;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__progress {
        display: none;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__terms {
        margin-top: 0;
        background: var(--color-f9fafc);
        border-radius: var(--radius-4px);
        padding: var(--space-2);
        justify-content: flex-start;
        gap: var(--space-2);
        font-size: var(--font-size-sm);
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__terms-icon {
        width: 8px;
        height: 10px;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__dot {
        width: 8px;
        height: 8px;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__actions--home-tailored {
        margin-top: 2px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__favorite--action {
        position: static;
        inset: auto;
        display: inline-flex;
        width: 32px;
        height: 32px;
        border-radius: var(--radius-8px);
        border: 1px solid var(--color-2e8a6e);
        background: var(--color-ffffff);
        color: var(--color-2e8a6e);
        box-shadow: none;
        flex-shrink: 0;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__favorite--action svg {
        width: 16px;
        height: 16px;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__actions-cta {
        flex: 1 1 auto;
        min-width: 0;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__cta--home-tailored {
        width: 100%;
        min-height: 36px;
        margin-top: 0;
        border-radius: var(--radius-8px);
        border-color: var(--color-2e8a6e);
        background: var(--color-2e8a6e);
        color: var(--color-ffffff);
        font-size: 16px;
        font-weight: 500;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__cta--home-tailored:hover {
        background: var(--color-2e8a6e);
        color: var(--color-ffffff);
    }

    .home-page #tailored-properties .tailored-properties__pagination {
        display: none;
    }
}

.popular-areas-section {
    padding: 57.6px 0 38.4px;
    background: var(--color-ffffff);
}

.popular-showcase__title {
    color: var(--color-2e8a6e);
    margin-bottom: 30.4px;
    font-size: 40px;
    font-weight: 600;
}

.popular-showcase__head-link {
    display: none;
}

.popular-showcase__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18.4px;
}

.popular-showcase-swiper {
    display: block;
    width: 100%;
}

.popular-showcase-swiper .swiper-wrapper {
    align-items: stretch;
}

.popular-showcase-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.popular-showcase-swiper .swiper-slide .popular-showcase__card {
    width: 100%;
    height: 100%;
}

.popular-showcase-swiper__pagination {
    position: static;
    margin-top: 14px;
    text-align: center;
}

.popular-showcase__card {
    position: relative;
    display: block;
    border-radius: var(--radius-21-12px);
    overflow: hidden;
    aspect-ratio: 0.83;
    text-decoration: none;
    box-shadow: 0 14px 40px -28px var(--color-rgb-0-0-0-80pct);
    isolation: isolate;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.popular-showcase__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transform: scale(1.02);
    transition: transform 180ms ease;
}

.popular-showcase__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            var(--color-rgb-4-8-14-6pct) 15%,
            var(--color-rgb-4-8-14-32pct) 58%,
            var(--color-rgb-4-8-14-90pct) 100%);
}

.popular-showcase__content {
    position: absolute;
    inset-inline: 18.4px;
    bottom: 19.2px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4.8px;
    color: var(--color-ffffff);
    z-index: 1;
}

.popular-showcase__name {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 0.98;
}

.popular-showcase__price {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--color-rgb-255-255-255-88pct);
    line-height: 1.25;
}

.popular-showcase__cta {
    margin-top: 4.48px;
    display: inline-flex;
    align-items: center;
    gap: 5.6px;
    color: var(--color-f8e000);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.popular-showcase__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px -26px var(--color-rgb-0-0-0-85pct);
}

.popular-showcase__card:hover .popular-showcase__image {
    transform: scale(1.06);
}

.popular-showcase__card--jada .popular-showcase__image {
    object-position: 28% 52%;
}

.popular-showcase__card--new-cairo .popular-showcase__image {
    object-position: 42% 44%;
}

.popular-showcase__card--zayed-city .popular-showcase__image {
    object-position: 58% 40%;
}

.popular-showcase__card--shorouq .popular-showcase__image {
    object-position: 72% 46%;
}

.partners-section {
    padding: 120px 0;
}

@media (max-width: 992px) {
    .home-page #popular-areas {
        overflow-x: hidden;
    }

    .home-page #popular-areas .popular-showcase__head {
        width: min(500px, 100%);
        margin: 0 auto 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .home-page #popular-areas .popular-showcase__title {
        margin: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 1;
        color: var(--color-231f20);
    }

    .home-page #popular-areas .popular-showcase__head-link {
        display: inline-flex;
        align-items: center;
        color: var(--color-2e8a6e);
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        text-decoration: none;
    }

    .home-page #popular-areas .popular-showcase-swiper {
        width: min(500px, 100%);
        margin-inline: auto;
    }

    .home-page #popular-areas .popular-showcase-swiper .popular-showcase__card {
        border-radius: var(--radius-16px);
        aspect-ratio: 193 / 231;
        box-shadow: 0 12px 24px -18px var(--color-rgb-0-0-0-72pct);
    }

    .home-page #popular-areas .popular-showcase-swiper .popular-showcase__content {
        inset-inline: 10px;
        bottom: 10px;
        gap: 4px;
    }

    .home-page #popular-areas .popular-showcase-swiper .popular-showcase__name {
        font-size: 19px;
        line-height: 1.05;
    }

    .home-page #popular-areas .popular-showcase-swiper .popular-showcase__price {
        font-size: 11px;
        line-height: 1.35;
    }

    .home-page #popular-areas .popular-showcase-swiper .popular-showcase__cta {
        margin-top: 2px;
        font-size: 11px;
        gap: 4px;
    }

    .partners-section {
        padding: 40px 0;
    }
}


.partners-section .section-title {
    color: var(--color-2e8a6e);
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 28.5px;
}

.partners-swiper {
    width: 100%;
}

.partners-swiper .swiper-wrapper {
    align-items: center;
}

.partners-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-page .swiper-pagination-bullet {
    background: var(--color-a8adb7);
    opacity: 1;
}

.home-page .swiper-pagination-bullet-active {
    background: var(--color-2e8a6e);
}

.partners-swiper__image {
    width: 100%;
    height: 62px;
    object-fit: contain;
    display: block;
    max-width: 84px;

}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8.8px;
}

.partner-placeholder {
    border-radius: var(--radius-11-52px);
    border: 1px dashed var(--color-94a3b8);
    background: var(--color-ffffff);
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-181a20);
    font-size: 13.6px;
    text-transform: capitalize;
}

.home-page #calculator.calculator-section {
    padding: 0 0 200px;
}

.home-page #calculator .calculator-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-radius: var(--radius-17-6px);
    overflow: hidden;
    border: 1px solid var(--color-ced8d5);
    min-height: 420px;
}

.home-page #calculator .calculator-form-wrap {
    background: var(--color-339371);
    padding: 71px 23px;
    display: flex;
    flex-direction: column;
    gap: 22.72px;
    color: var(--color-ebf8f2);
}

.home-page #calculator .calculator-control {
    display: grid;
    gap: 10.88px;
}

.home-page #calculator .calculator-control h3 {
    margin: 0;
    color: var(--color-f0faf5);
    font-size: clamp(20.8px, 1.7vw, 32px);
    font-weight: 500;
    line-height: 1.3;
}

.home-page #calculator .calculator-control__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.home-page #calculator .calculator-control__highlight {
    color: var(--color-f6dd08);
    font-size: clamp(18.4px, 1.4vw, 26.4px);
    font-weight: 700;
    white-space: nowrap;
}

.home-page #calculator .calculator-field {
    min-height: 52.8px;
    border-radius: var(--radius-13-76px);
    border: 1px solid var(--color-rgb-190-233-215-36pct);
    background: var(--color-rgb-255-255-255-10pct);
    padding: 8.96px 14.72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 11.52px;
}

.home-page #calculator .calculator-field__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24.8px;
    color: var(--color-rgb-211-242-228-72pct);
    font-size: 23.2px;
    font-weight: 700;
}

.home-page #calculator .calculator-field__icon svg {
    width: 20.8px;
    height: 20.8px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-page #calculator .calculator-field__value,
.home-page #calculator .calculator-field__input {
    color: var(--color-f2fdf8);
    font-size: clamp(24.8px, 1.95vw, 33.6px);
    font-weight: 500;
    line-height: 1.15;
}

.home-page #calculator .calculator-field__input {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    text-align: end;
    direction: ltr;
    padding: 0;
    outline: none;
}

.home-page #calculator .calculator-field__input::placeholder {
    color: var(--color-rgb-242-253-248-70pct);
}

.home-page #calculator .calculator-range {
    --calculator-progress: 0%;
    width: 100%;
    height: 9.92px;
    border-radius: var(--radius-999px);
    appearance: none;
    -webkit-appearance: none;
    direction: rtl;
    cursor: grab;
    touch-action: pan-x;
    background: linear-gradient(to left,
            var(--color-f3db08) var(--calculator-progress),
            var(--color-rgb-200-231-216-33pct) var(--calculator-progress));
    transition: box-shadow 140ms ease;
}

.home-page #calculator .calculator-range:active {
    cursor: grabbing;
}

.home-page #calculator .calculator-range:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-rgb-243-219-8-24pct);
}

.home-page #calculator .calculator-range::-webkit-slider-runnable-track {
    height: 9.92px;
    border-radius: var(--radius-999px);
    background: transparent;
}

.home-page #calculator .calculator-range::-moz-range-track {
    height: 9.92px;
    border-radius: var(--radius-999px);
    background: transparent;
}

.home-page #calculator .calculator-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: calc((9.92px - 16px) / 2);
    border-radius: var(--radius-50pct);
    border: 1px solid var(--color-2e8a6e);
    background: var(--color-ffffff);
    box-shadow: 0 2px 8px var(--color-rgb-0-0-0-16pct);
}

.home-page #calculator .calculator-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-50pct);
    border: 1px solid var(--color-2e8a6e);
    background: var(--color-ffffff);
    box-shadow: 0 2px 8px var(--color-rgb-0-0-0-16pct);
}

.home-page #calculator .calculator-control__labels {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--color-rgb-211-238-227-84pct);
    font-size: clamp(16.32px, 1.08vw, 20.48px);
    line-height: 1.35;
}

.home-page #calculator .calculator-summary {
    background: var(--color-ffffff);
    padding: 32px 24.8px 24.8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.home-page #calculator .calculator-summary__title {
    margin: 0;

    color: var(--color-717182);
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    /* 100% */
}

.home-page #calculator .calculator-summary__value {
    margin: 6.4px 0 1.6px;
    color: var(--color-2e8a6e);
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5.76px;
}

.home-page #calculator .calculator-summary__value span {
    font-size: clamp(46.4px, 4.9vw, 69.6px);
    font-weight: 500;
    line-height: 1;
}

.home-page #calculator .calculator-summary__value small {
    color: var(--color-6f7482);
    font-size: clamp(24.8px, 1.75vw, 32.8px);
    font-weight: 400;
    line-height: 1.3;
}

.home-page #calculator .calculator-summary__note {
    margin: 0;

    color: var(--color-717182);
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 106.667% */
}

.home-page #calculator .calculator-summary__cta {
    margin-top: 17.6px;
    width: 224px;
    height: 36px;
    border-radius: var(--radius-8px);
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 140ms ease;

    font-size: 16px;
    font-style: normal;
}

.home-page #calculator .calculator-summary__cta:hover {
    background: var(--color-24765d);
}

.guest-footer {
    color: var(--color-e2e8f0);
    padding: 41.6px 0 16px;
    position: relative;
    z-index: 1;
}

.guest-footer__grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}

.guest-footer .img_container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guest-footer__links-grid {
    display: contents;
}

.guest-footer__brand-copy {
    margin: 0;
}

.guest-footer__item-link {
    display: inline-flex;
    align-items: center;
    gap: 7.2px;
}

.guest-footer__item-link img {
    display: none;
    flex-shrink: 0;
}

.guest-footer h3 {
    margin: 0 0 10.4px;
    color: var(--color-ffffff);
    font-size: 24px;
    font-weight: 400;
}

.guest-footer li,
.guest-footer a {
    margin: 0;
    color: var(--color-rgb-226-232-240-85pct);
    font-size: 18px;
    line-height: 1.7;
    text-decoration: none;
}

.guest-footer p {
    font-size: 18px;
    color: var(--color-a3a3a3);
}

.guest-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.guest-footer__socials {
    display: inline-flex;
    gap: 7.2px;
    margin-top: 14.4px;
}

.guest-footer__socials a {
    width: 40px;
    height: 40px;
    /* border: 1px solid var(--color-rgb-148-163-184-35pct); */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.52px;
    /* color: var(--color-ffffff); */

    border-radius: var(--radius-12px);
    background: var(--color-262626);
}

.guest-footer__socials a img {
    width: 20px;
    height: 20px;
}

.guest-footer__copyright {
    margin: 25.6px 0 0;
    text-align: center;
    font-size: 12.8px !important;

    border-radius: var(--radius-12px);

    color: var(--color-404040);
    text-align: center;
    font-size: 32px;
    font-weight: 400;
}

@media (max-width: 992px) {

    .guest-footer p {
        font-size: 16px;
    }

    .guest-footer {
        background: var(--color-1a1a1a);
        padding: 32px 16px 24px;
    }

    .guest-footer .img_container {
        display: none;
    }

    .guest-footer .container.guest-footer__inner {
        width: 100%;
        max-width: none;
        padding-inline: 0;
        display: block;
    }

    .guest-footer__brand {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .guest-footer__brand>img {
        width: 146px;
        height: auto;
    }

    .guest-footer__brand-copy p {
        max-width: 349px;
        color: var(--color-a3a3a3);
        font-size: 13px;
        line-height: 21px;
        text-align: right;
    }

    .guest-footer__socials {
        margin-top: 0;
        gap: 8px;
    }

    .guest-footer__socials a {
        width: 32px;
        height: 32px;
        border-radius: var(--radius-10px);
    }

    .guest-footer__socials a img {
        width: 16px;
        height: 16px;
    }

    .guest-footer__links-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 24px 20px;
        margin-top: 24px;
    }

    .guest-footer__column {
        min-width: 0;
    }

    .footer__column h3,
    .guest-footer h3 {
        margin: 0 0 9px;
        font-size: 16px !important;
        font-weight: 500;
        line-height: 24px;
    }

    .guest-footer__column ul {
        display: grid;
        gap: 9px;
        justify-items: start;

    }

    .guest-footer li,
    .guest-footer a {
        font-size: 13px;
        line-height: 19.5px;
    }

    .guest-footer__item-link {
        color: var(--color-a3a3a3);
    }

    .guest-footer__column--contact {
        grid-column: 1 / -1;
        margin-top: 4px;
    }

    .guest-footer__column--contact .guest-footer__item-link {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    .guest-footer__column--contact .guest-footer__item-link img {
        display: inline-flex;
        width: 14px;
        height: 14px;
    }

    .guest-footer__column--contact .guest-footer__item-link span {
        white-space: nowrap;
    }

    .guest-footer__copyright {
        margin: 24px 0 0;
        padding-top: 17px;
        border-top: 1.098px solid var(--color-262626);
        color: var(--color-404040);
        font-size: 12px !important;
        font-weight: 400;
        line-height: 18px;
        text-align: center;
    }
}

@media (max-width: 992px) {
    .hero-search__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-search__toggle {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .hero-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    .tailored-properties-section .container {
        /* width: min(1040px, 100% - 22.4px); */
    }

    .landing-tabs__item {
        min-width: 205px;
    }

    .popular-showcase__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .partners-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .guest-navbar__inner {
        flex-wrap: wrap;
        justify-content: center;
        padding-block: 11.2px;
    }

    .hero-search__row {
        grid-template-columns: 1fr;
    }

    .hero-search__footer {
        grid-template-columns: 1fr;
    }

    .hero-search__submit {
        width: 100%;
        min-width: 0;
    }

    .hero-search__toggle {
        justify-content: flex-start;
    }

    .hero-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-step-card::after {
        display: none;
    }

    .property-nav-grid,
    .sale-option-grid {
        grid-template-columns: 1fr 1fr;
        display: grid;
        gap: 16px;

        grid-template-columns: 1fr 1fr;
    }

    .landing-tabs__item {
        min-width: 0;
        flex: 1 1 calc(50% - 12.8px);
    }

    .home-page #calculator .calculator-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .home-page #calculator .calculator-form-wrap {
        padding: 25.6px 20.8px 19.2px;
    }

    .home-page #calculator .calculator-summary {
        padding: 28.8px 20.8px 23.2px;
    }

    .guest-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .guest-container {
        width: calc(100% - 19.2px);
    }

    .tailored-properties-section {
        padding: 38.4px 0 35.2px;
    }

    .tailored-properties-section .section-title {
        margin-bottom: 24px;
    }

    .hero-section {
        min-height: 580px;
    }

    .hero-section__copy h1 {
        line-height: 1.25;
    }

    .hero-search {
        padding: 12.8px 12.8px 14.08px;
    }

    .hero-search__control {
        min-height: 44.8px;
    }

    .hero-search__toggle-track {
        width: 70.4px;
        height: 34.4px;
    }

    .hero-search__toggle-knob {
        width: 26.08px;
        height: 26.08px;
    }

    .hero-search__toggle input:checked+.hero-search__toggle-track .hero-search__toggle-knob {
        transform: translateX(-35.2px);
    }

    .hero-search__slider-meta {
        flex-wrap: wrap;
    }

    .sale-option-grid,
    .popular-showcase__grid,
    .partners-grid,
    .guest-footer__grid {
        grid-template-columns: 1fr;
    }

    .property-items-grid> :only-child {
        width: min(500px, 100%);
        justify-self: start;
    }

    .property-items-grid> :only-child .property-offer-card,
    .property-items-grid> :only-child .skeleton--full {
        width: 100%;
    }

    .landing-tabs__item {
        width: 100%;
        flex: 1 1 100%;
        font-size: 16px;
    }

    .property-offer-card__media {
        height: 210px;
    }

    .property-offer-card__badges {
        gap: var(--space-2);
    }

    .property-offer-card__badge {
        min-height: 28px;
        padding: 0 10px;
        font-size: var(--font-size-xs);
    }

    .property-offer-card__badge img {
        width: 12.8px;
        height: 12.8px;
    }

    .property-offer-card__body {
        padding: var(--space-4);
        gap: var(--space-3);
    }

    .property-offer-card__title {
        font-size: clamp(16px, 21px, 24px);
    }

    .property-offer-card__date,
    .property-offer-card__facts {
        font-size: 14px;
    }

    .property-offer-card__label {
        font-size: var(--font-size-xs);
    }

    .property-offer-card__price-value {
        font-size: 18px;
    }

    .property-offer-card__price-suffix {
        font-size: var(--font-size-sm);
    }

    .property-offer-card__progress {}

    .property-offer-card__terms {
        font-size: var(--font-size-sm);
        gap: var(--space-2);
    }

    .property-offer-card__cta {
        min-height: 39.2px;
        font-size: 14px;
    }

    .popular-showcase__title {
        margin-bottom: 21.6px;
        font-size: clamp(27.2px, 6vw, 36.8px);
    }

    .popular-showcase__card {
        aspect-ratio: 1.05;
    }

    .home-page #calculator.calculator-section {
        padding: 0 0 40px;
    }

    .home-page #calculator .calculator-grid {
        width: min(344px, 100%);
        margin-inline: auto;
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: var(--radius-16px);
        box-shadow:
            0 0 6px var(--color-rgb-0-0-0-2pct),
            0 2px 4px var(--color-rgb-0-0-0-8pct);
    }

    .home-page #calculator .calculator-form-wrap {
        background: var(--color-2e8a6e);
        padding: 5px 13px;
        gap: 6px;
    }

    .home-page #calculator .calculator-control {
        gap: 4px;
    }

    .home-page #calculator .calculator-control h3 {
        font-size: 10px;
        line-height: 19px;
    }

    .home-page #calculator .calculator-control__highlight {
        font-size: 10px;
        line-height: 19px;
    }

    .home-page #calculator .calculator-field {
        min-height: 31px;
        border-radius: var(--radius-6-374px);
        border: 0.455px solid var(--color-rgb-255-255-255-20pct);
        padding: 6px 8px;
        gap: 8px;
    }

    .home-page #calculator .calculator-field__icon {
        min-width: 16px;
        font-size: 16px;
    }

    .home-page #calculator .calculator-field__icon svg {
        width: 16px;
        height: 16px;
    }

    .home-page #calculator .calculator-field__value,
    .home-page #calculator .calculator-field__input {
        font-size: 10px;
        line-height: 19px;
    }

    .home-page #calculator .calculator-range {
        height: 8px;
    }

    .home-page #calculator .calculator-range::-webkit-slider-runnable-track {
        height: 8px;
    }

    .home-page #calculator .calculator-range::-moz-range-track {
        height: 8px;
    }

    .home-page #calculator .calculator-range::-webkit-slider-thumb {
        width: 15.2px;
        height: 15.2px;
        margin-top: calc((8px - 15.2px) / 2);
    }

    .home-page #calculator .calculator-range::-moz-range-thumb {
        width: 15.2px;
        height: 15.2px;
    }

    .home-page #calculator .calculator-control__labels {
        color: var(--color-rgb-255-255-255-50pct);
        font-size: 10px;
        line-height: 19px;
    }

    .home-page #calculator .calculator-summary {
        min-height: 183px;
        padding: 16px 12px;
        gap: 10px;
    }

    .home-page #calculator .calculator-summary__title {
        font-size: 10px;
        line-height: 19px;
    }

    .home-page #calculator .calculator-summary__value {
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    .home-page #calculator .calculator-summary__value span {
        font-size: 24px;
        line-height: 45px;
    }

    .home-page #calculator .calculator-summary__value small {
        font-size: 10px;
        line-height: 19px;
    }

    .home-page #calculator .calculator-summary__note {
        max-width: 156px;
        font-size: 8px;
        line-height: 15px;
    }

    .home-page #calculator .calculator-summary__cta {
        width: 153px;
        height: 27px;
        min-width: 153px;
        min-height: 27px;
        margin-top: 0;
        font-size: 10px;
        line-height: 19px;
    }
}

@media (max-width: 992px) {
    .hero-section {
        /* min-height: 355px; */
        min-height: fit-content;
        background: var(--color-111111);
        padding-bottom: 24px;
    }

    .hero-section .img_cover {
        inset: 0;
    }

    .hero-section .img_cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero-section::before {
        opacity: 0.16;
    }

    .hero-section__overlay {
        background: linear-gradient(180deg, var(--color-rgb-255-255-255-8pct) 0%, var(--color-rgb-0-0-0-62pct) 100%);
    }

    .hero-section__content {
        gap: 16px;
    }

    .hero-section__copy {
        width: min(500px, 100%);
        text-align: center;
    }

    .hero-section__copy h1 {
        color: var(--color-000000);
        font-size: 32px;
        line-height: 1.2;
        font-weight: 700;
    }

    .hero-section__copy p {
        color: var(--color-ffffff);
        font-size: 20px;
        line-height: 1.35;
        font-weight: 600;
    }

    .hero-search--desktop {
        display: none;
    }

    .hero-search-compact {
        width: min(500px, 100%);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .hero-filters-sheet .hero-search--sheet {
        display: block;
    }

    .hero-filters-sheet .hero-search__slider-meta {
        flex-wrap: wrap;
    }

    .hero-steps {
        display: none;
    }
}

.results-page {
    background: var(--color-ffffff);
}

.guest-kyc-progress-section {
    padding: 16.8px 0 0;
}

.guest-kyc-progress-section--details {
    padding-top: 15.2px;
}

.guest-kyc-progress-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.guest-kyc-progress-title {
    margin: 0;
    color: var(--color-23282f);
    font-size: 23px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.guest-kyc-progress-track {
    border: 1px solid var(--color-e4e7eb);
    border-radius: var(--radius-14-4px);
    background: var(--color-f8f9fa);
    min-height: 56px;
    padding: 9.6px 16px 7.2px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
    align-items: start;
}

.guest-kyc-progress-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6.72px;
}

.guest-kyc-progress-step::before {
    content: "";
    position: absolute;
    top: 13.12px;
    inset-inline-start: 63.5%;
    width: calc(100% - 32.64px);
    height: 2.56px;
    border-radius: var(--radius-999px);
    background: var(--color-d9dde2);
}

.guest-kyc-progress-step:last-child::before {
    content: none;
}

.guest-kyc-progress-step__bullet {
    width: 25.92px;
    height: 25.92px;
    border-radius: var(--radius-999px);
    border: 1px solid var(--color-d7dae0);
    background: var(--color-d4d7dd);
    color: var(--color-ffffff);
    font-size: 11.68px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.guest-kyc-progress-step__bullet svg {
    width: 16.667px;
    height: 16.667px;

    border: 1.667px solid white;
    border-radius: var(--radius-50pct);
}

.guest-kyc-progress-step__label {
    margin: 0;
    color: var(--color-1f2329);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

.guest-kyc-progress-step.is-active .guest-kyc-progress-step__bullet {
    border-color: var(--color-65a391);
    background: var(--color-65a391);
    color: var(--color-ffffff);
}

.guest-kyc-progress-step.is-complete .guest-kyc-progress-step__bullet {
    border: 2px solid var(--color-2e8a6e);
    background: var(--color-2e8a6e);
    color: white;
}

.guest-kyc-progress-step.is-complete::before {
    background: var(--color-1e1f22);
}

.guest-kyc-progress-step.is-complete .guest-kyc-progress-step__label {
    color: var(--color-2e8a6e);
}

.results-catalog-section {
    padding: 40px 0 62.4px;
}

.results-mobile-filter-trigger {
    display: none;
}

.results-mobile-filter-trigger svg {
    width: 16px;
    height: 16px;
}

.results-catalog-layout {
    gap: 24px;
    align-items: start;
    width: 100%;
    display: flex;
}

.results-filters-panel {
    background: var(--color-ffffff);
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-15-2px);
    padding: var(--space-4);
    display: grid;
    gap: var(--space-3);
    position: sticky;
    top: 96px;
    width: 350px;


}

.results-filters-panel__title {
    margin: 0;
    color: var(--color-171717);
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.results-filter-group {
    display: grid;
    gap: var(--space-2);
    margin-top: 16px;
}

.results-filter-label {
    color: var(--color-2b2f34);
    font-size: 16px;
    font-weight: 700;
}

.results-filter-control {
    position: relative;
}

.results-filter-control::after {
    content: "?";
    position: absolute;
    inset-inline-start: 9.6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-9aa0a8);
    pointer-events: none;
}

.results-filter-control select,
.results-filter-control input {
    width: 100% !important;
    min-height: 34.4px !important;
    border-radius: var(--radius-7-2px) !important;
    border: 1px solid var(--color-e5e7eb) !important;
    background: var(--color-f3f4f6) !important;
    color: var(--color-585f67) !important;
    font-size: 13.12px !important;
    padding: 5.76px 11.2px 5.76px 23.2px !important;
    appearance: none !important;
    direction: rtl;
}

.results-filter-group--budget {
    border: 1px solid var(--color-f2de5f);
    border-radius: var(--radius-9-92px);
    background: var(--color-faf9ef);
    padding: 8.32px 8.8px;
}

.results-budget-range {
    --results-slider-progress: 10%;
    width: 100%;
    height: 10.4px;
    border-radius: var(--radius-999px);
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(to left,
            var(--color-2e8a6e) var(--results-slider-progress),
            var(--color-e5e7eb) var(--results-slider-progress));
    cursor: pointer;
}

.results-budget-range::-webkit-slider-runnable-track {
    height: 10.4px;
    border-radius: var(--radius-999px);
    background: transparent;
}

.results-budget-range::-moz-range-track {
    height: 10.4px;
    border-radius: var(--radius-999px);
    background: transparent;
}

.results-budget-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 13.12px;
    height: 13.12px;
    margin-top: -1px;
    border-radius: var(--radius-50pct);
    border: 1px solid var(--color-2e8a6e);
    background: var(--color-ffffff);
}

.results-budget-range::-moz-range-thumb {
    width: 13.12px;
    height: 13.12px;
    border-radius: var(--radius-50pct);
    border: 1px solid var(--color-2e8a6e);
    background: var(--color-ffffff);
}

.results-budget-meta {
    margin-top: 4.48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-5d6470);
    font-size: 12.48px;
}

.results-budget-value {
    color: var(--color-2e8a6e);
    font-weight: 700;
}

.results-budget-note {
    margin: 0;
    color: var(--color-7a828f);
    font-size: 11.52px;
    line-height: 1.35;
}

.results-bedroom-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5.44px;
}

.results-bedroom-options button {
    min-width: 32.8px;
    min-height: 31.2px;
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-7-2px);
    background: var(--color-f7f7f8);
    color: var(--color-3d4350);
    font-size: 12.48px;
    font-weight: 700;
}

.results-advanced-toggle {
    background: var(--color-2e8a6e);
    color: var(--color-f5fbf8);
    border-radius: 6px;
    border: 1px solid var(--color-2e8a6e);
    text-decoration: none;
    font-size: var(--font-size-md);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 160ms ease;
    width: 100%;
    padding: 6px;
}

.results-reset-btn {
    min-height: 36px;
    border: 1px solid var(--color-e5e7eb);
    border-radius: 12px;
    background: #ffcbc6;
    color: #323232;
    font-size: 13.12px;
    font-weight: 700;
    position: absolute;
    top: 5px;
    left: 4px;
    min-width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

.results-filters-sheet {
    display: grid;
    gap: 11.52px;
}

.results-catalog-content {
    display: grid;
    gap: 13.12px;
}

.results-catalog-heading {
    padding-inline: 1.6px;
}

.results-catalog-heading h1 {
    margin: 0;
    color: var(--color-111827);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.3;
}

.results-catalog-heading p {
    margin: var(--space-1) 0 0;
    color: var(--color-6b7280);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.results-cards-grid {
    gap: var(--space-4);
}

.results-card-actions {
    margin-top: var(--space-2);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
}

.results-card-actions__cta {
    min-width: 0;
}

.results-page .property-offer-card__cta {
    margin-top: 0;
}

.results-card-actions .property-offer-card__cta {
    width: 100%;
}

.results-compare-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 37px;
    color: var(--color-231f20);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 700;
    width: 92px;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: var(--radius-10px);
    border: 1.098px solid var(--color-rgba-0-0-0-0-1);
    background: var(--color-ffffff);
}

button.results-compare-btn {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
}

.results-compare-btn--selected {
    border-color: var(--color-2e8a6e);
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.property-offer-card--compare-selected {
    border-color: var(--color-rgb-46-138-110-55pct);
    box-shadow:
        0 6px 18px -14px var(--color-rgb-46-138-110-70pct),
        0 2px 8px var(--color-rgb-46-138-110-26pct);
}

@media (max-width: 1320px) {
    .results-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {

    .details-page .guest-kyc-progress-track,
    .results-page .guest-kyc-progress-track,
    .compare-page .guest-kyc-progress-track {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(120px, max-content);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 9.92px;
        padding: 9.6px 12px 8px;
    }

    .results-page .guest-kyc-progress-step,
    .compare-page .guest-kyc-progress-step {
        min-width: 120px;
    }

    .results-page .guest-kyc-progress-step__label,
    .compare-page .guest-kyc-progress-step__label {
        white-space: normal;
        min-height: 26.4px;
    }

    .results-page .results-catalog-section {
        padding: 16px 0 38.4px;
    }

    .results-page .results-mobile-filter-trigger {
        width: 100%;
        min-height: 42.4px;
        margin-bottom: 10.4px;
        border: 1px solid var(--color-2e8a6e);
        border-radius: var(--radius-12px);
        background: var(--color-2e8a6e);
        color: var(--color-ffffff);
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        padding: 7.2px 12px;
        font-size: 16px;
        font-weight: 500;
    }

    .results-page .results-catalog-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .results-page .results-filters-panel--desktop {
        display: none;
    }

    .results-page .results-catalog-heading {
        padding-inline: 0;
    }

    .results-page .results-catalog-heading h1 {
        font-size: var(--font-size-md);
    }

    .results-page .results-catalog-heading p {
        font-size: var(--font-size-sm);
    }

    .results-page .results-filters-sheet .results-filters-panel__title {
        font-size: var(--font-size-md);
    }

    .results-page .results-filters-sheet .results-filter-group {
        gap: var(--space-2);
    }

    .results-page .results-filters-sheet .results-filter-label {
        font-size: var(--font-size-sm);
    }

    .results-page .results-filters-sheet .results-filter-control select {
        min-height: 40px;
        font-size: var(--font-size-sm);
    }

    .results-page .results-filters-sheet .results-budget-range {
        height: 12px;
    }

    .results-page .results-filters-sheet .results-budget-meta {
        font-size: var(--font-size-sm);
    }

    .results-page .results-filters-sheet .results-bedroom-options button {
        min-width: 36px;
        min-height: 36px;
        font-size: var(--font-size-sm);
    }

    .results-page .results-filters-sheet .results-advanced-toggle {
        font-size: var(--font-size-sm);
    }

    .results-page .results-filters-sheet .results-reset-btn {
        min-height: 40px;
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 1024px) {
    .guest-kyc-progress-wrap {
        grid-template-columns: 1fr;
    }

    .guest-kyc-progress-title {
        font-size: 23.2px;
    }

    .results-catalog-layout {
        grid-template-columns: 1fr;
    }

    .results-filters-panel {
        position: static;
    }
}

@media (max-width: 760px) {
    .guest-kyc-progress-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 14.4px;
    }

    .results-page .guest-kyc-progress-track,
    .compare-page .guest-kyc-progress-track {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(120px, max-content);
        row-gap: 0;
    }

    .guest-kyc-progress-step:nth-child(3n)::before {
        content: none;
    }

    .results-page .guest-kyc-progress-step:nth-child(3n)::before,
    .compare-page .guest-kyc-progress-step:nth-child(3n)::before {
        content: "";
    }

    .guest-kyc-progress-step__label {
        white-space: normal;
        min-height: unset;
        font-size: 10px;
    }

    .results-page .guest-kyc-progress-step__label,
    .compare-page .guest-kyc-progress-step__label {
        min-height: 22px;
    }

    .results-cards-grid {
        grid-template-columns: 1fr;
    }
}

.compare-page {
    background: var(--color-ffffff);
    direction: rtl;
}

.compare-main-section {
    padding: 39.2px 0 54.4px;
}

.compare-shell {
    display: grid;
    gap: 16px;
}

.compare-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.compare-share-btn {
    min-height: 48px;
    color: var(--color-0a0a0a);
    text-decoration: none;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;

    border-radius: var(--radius-8px);
    border: 1.098px solid var(--color-rgba-0-0-0-0-1);
    background: var(--color-ffffff);
}

.compare-share-btn svg,
.compare-share-btn img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.compare-heading {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    color: inherit;
}

.compare-heading__copy {
    display: grid;
    justify-items: end;
}

.compare-heading__copy h1 {
    margin: 0;
    color: var(--color-0a0a0a);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
}

.compare-heading__copy p {
    margin: 5px 0 0;
    color: var(--color-717182);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    width: 100%;
}

.compare-heading__arrow {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-171717);
}

.compare-heading__arrow svg,
.compare-heading__arrow img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.compare-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.compare-property-card {
    border: 1.1px solid var(--color-rgb-0-0-0-10pct);
    border-radius: var(--radius-14px);
    background: var(--color-ffffff);
    overflow: hidden;
    min-height: 682px;
    display: flex;
    flex-direction: column;
}

.compare-property-card__media {
    position: relative;
    height: 192px;
    overflow: hidden;
}

.compare-property-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compare-property-card__media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, var(--color-rgb-0-0-0-38pct) 0%, var(--color-rgb-0-0-0-0pct) 56%);
}

.compare-property-card__remove {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-96px);
    background: var(--color-rgb-255-255-255-82pct);
    color: var(--color-4b5563);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.compare-property-card__badges {
    position: absolute;
    right: 8px;
    top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: calc(100% - 56px);
}

.compare-property-card__badge {
    min-height: 28px;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    box-shadow:
        0 0 6px var(--color-rgb-0-0-0-2pct),
        0 2px 4px var(--color-rgb-0-0-0-8pct);
    font-size: var(--font-size-sm);
    font-weight: 400;
    white-space: nowrap;
}

.compare-property-card__badge img {
    width: 13px;
    height: 13px;
    object-fit: contain;
}

.compare-property-card__badge--initiative {
    background: var(--color-ffffff);
    color: var(--color-2e8a6e);
}

.compare-property-card__badge--green {
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.compare-property-card__badge--finance {
    background: var(--color-fdd800);
    color: var(--color-231f20);
}

.compare-property-card__body {
    padding: var(--space-4);
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.compare-property-card__head h3 {
    margin: 0;
    color: var(--color-0a0a0a);
    font-size: var(--font-size-xl);
    font-weight: 400;
    line-height: 1.34;
    text-align: right;
}

.compare-property-card__location {
    margin: var(--space-1) 0 0;
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    color: var(--color-717182);
    font-size: var(--font-size-sm);
    font-weight: 400;
    text-align: start;
    line-height: 1.5;
}

.compare-property-card__location img {
    width: 16px;
    height: 16px;
}

.compare-property-card__divider {
    height: 1px;
    background: var(--color-rgb-0-0-0-10pct);
}

.compare-property-card__facts,
.compare-property-card__pricing {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
}

.compare-property-card__facts li,
.compare-property-card__pricing li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    direction: ltr;
}

.compare-property-card__fact-value,
.compare-property-card__price-value {
    color: var(--color-0a0a0a);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.15;
    text-align: start;
}

.compare-property-card__fact-value.is-highlight {
    color: var(--color-2e8a6e);
}

.compare-property-card__fact-meta {
    color: var(--color-717182);
    font-size: var(--font-size-sm);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    white-space: nowrap;
}

.compare-property-card__fact-meta img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.compare-property-card__price-label {
    color: var(--color-717182);
    font-size: var(--font-size-sm);
    font-weight: 400;
    text-align: right;
}

@media (max-width: 1320px) {
    .compare-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .compare-main-section {
        padding-top: 25.6px;
    }

    .compare-topbar {
        align-items: flex-end;
        flex-direction: column;
    }
}

@media (max-width: 760px) {
    .compare-main-section {
        padding: 28px 0 35.2px;
    }

    .compare-shell {
        gap: 20px;
    }

    .compare-topbar {
        align-items: stretch;
        gap: 12px;
    }

    .compare-heading {
        gap: 12px;
    }

    .compare-heading__arrow {
        width: 24px;
        height: 24px;
    }

    .compare-heading__arrow img {
        width: 24px;
        height: 24px;
    }

    .compare-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .compare-share-btn {
        width: 100%;
        min-height: 36px;
        padding: 0;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    .compare-share-btn img {
        width: 24px;
        height: 24px;
    }

    .compare-heading__copy h1 {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .compare-heading__copy p {
        margin-top: 0;
        font-size: 14px;
        line-height: 20px;
    }

    .compare-property-card {
        position: relative;
        min-height: 0;
    }

    .compare-property-card__media {
        height: 160px;
    }

    .compare-property-card__media-overlay {
        background: linear-gradient(0deg,
                var(--color-rgb-0-0-0-50pct) 0%,
                var(--color-rgb-0-0-0-0pct) 56%);
    }

    .compare-property-card__badges {
        display: none;
    }

    .compare-property-card__remove {
        width: auto;
        min-width: fit-content;
        height: 28px;
        border-radius: var(--radius-8px);
        padding: 4px 10px;
        background: var(--color-rgb-255-255-255-80pct);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        color: var(--color-030213);
    }



    .compare-property-card__remove img {
        width: 16px;
        height: 16px;
    }

    .compare-property-card__body {
        padding: 12px 16px 16px;
        gap: 8px;
    }

    .compare-property-card__head {
        position: absolute;
        inset-inline-start: 12px;
        inset-inline-end: 12px;
        top: 108px;
        z-index: 3;
    }

    .compare-property-card__head h3 {
        color: var(--color-ffffff);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .compare-property-card__location {
        margin: -2px 0 0;
        justify-content: flex-start;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        color: var(--color-rgb-255-255-255-80pct);
        text-align: right;
        gap: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .compare-property-card__location img {
        display: none;
    }

    .compare-property-card__divider {
        display: none;
    }

    .compare-property-card__pricing {
        order: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .compare-property-card__facts {
        order: 1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .compare-property-card__facts li {
        display: flex;
        direction: rtl;
        justify-content: center;
        align-items: center;
        gap: 6px;
        min-height: 0;
        min-width: 0;
        padding: 0;
        border-radius: var(--radius-0);
        background: transparent;
    }

    .compare-property-card__facts .compare-property-card__fact-meta span {
        display: none;
    }

    .compare-property-card__facts .compare-property-card__fact-meta {
        width: auto;
        justify-content: center;
        gap: 0;
    }

    .compare-property-card__facts .compare-property-card__fact-value {
        width: auto;
        justify-content: center;
        font-size: 14px;
        line-height: 18px;
        white-space: nowrap;
    }

    .compare-property-card__facts .compare-property-card__fact-value span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .compare-property-card__pricing li {
        display: flex;
        direction: rtl;
        justify-content: flex-start;
        align-items: flex-end;
        flex-direction: column;
        gap: 2px;
        min-height: 44px;
        min-width: 0;
        padding: 6px 8px;
        border-radius: var(--radius-10px);
        background: var(--color-rgb-236-236-240-50pct);
    }

    .compare-property-card__pricing li:nth-child(1) {
        order: 1;
        grid-column: 1 / -1;
    }

    .compare-property-card__pricing li:nth-child(4) {
        order: 2;
        grid-column: 1;
    }

    .compare-property-card__pricing li:nth-child(2) {
        order: 3;
        grid-column: 2;
    }

    .compare-property-card__pricing li:nth-child(3) {
        order: 4;
        grid-column: 1 / -1;
    }

    .compare-property-card__fact-meta,
    .compare-property-card__price-label {
        font-size: 12px;
        line-height: 16px;
        color: var(--color-717182);
    }

    .compare-property-card__fact-value,
    .compare-property-card__price-value {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
        color: var(--color-0a0a0a);
        min-width: 0;
    }

    .compare-property-card__price-value,
    .compare-property-card__fact-value {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
    }

    .compare-property-card__fact-value.is-highlight,
    .compare-property-card__pricing li.is-accent .compare-property-card__price-value {
        color: var(--color-2e8a6e);
    }

    .compare-property-card__fact-meta {
        justify-content: flex-end;
        gap: 4px;
    }

    .compare-property-card__pricing .compare-property-card__price-label,
    .compare-property-card__pricing .compare-property-card__price-value {
        width: 100%;
    }

    .compare-property-card__pricing .compare-property-card__price-value span {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        display: block;
        max-width: 100%;
    }

    .compare-property-card__fact-meta img,
    .compare-property-card__value-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .compare-property-card__pricing .compare-property-card__price-value img {
        display: none;
    }
}

@media (max-width: 360px) {
    .compare-property-card__facts {
        gap: 6px;
    }

    .compare-property-card__facts .compare-property-card__fact-value {
        font-size: 13px;
        line-height: 16px;
    }

    .compare-property-card__fact-meta img,
    .compare-property-card__value-icon {
        width: 14px;
        height: 14px;
    }

    .compare-property-card__pricing {
        gap: 6px;
    }

    .compare-property-card__pricing li {
        min-height: 42px;
        padding: 6px;
    }

    .compare-property-card__price-label {
        font-size: 11px;
        line-height: 14px;
    }

    .compare-property-card__price-value {
        font-size: 13px;
        line-height: 18px;
    }
}

@media (min-width: 1280px) {
    .compare-page--pixel .guest-kyc-progress-section {
        padding-top: 32px;
    }

    .compare-page--pixel .guest-kyc-progress-wrap {
        gap: 43px;
    }

    .compare-page--pixel .guest-kyc-progress-title {
        color: var(--color-0a0a0a);
        font-size: 24px;
        font-weight: 400;
    }

    .compare-page--pixel .guest-kyc-progress-track {
        background: var(--color-ffffff);
        border: 1.098px solid var(--color-rgb-0-0-0-10pct);
        border-radius: var(--radius-16px);
        box-shadow:
            0 0 4px var(--color-rgb-0-0-0-4pct),
            0 8px 16px var(--color-rgb-0-0-0-8pct);
        gap: 8px;
        min-height: 80px;
        padding: 12px 39px;
    }

    .compare-page--pixel .guest-kyc-progress-step {
        gap: 8px;
    }

    .compare-page--pixel .guest-kyc-progress-step::before {
        background: var(--color-e5e7eb);
        height: 4px;
        /* inset-inline-end: calc(50% + 16px); */
        inset-inline-end: 0;
        top: 14px;
        width: calc(100% - 32px);
    }

    .compare-page--pixel .guest-kyc-progress-step__bullet {
        background: var(--color-rgb-23-23-23-16pct);
        border: 0;
        font-size: 14px;
        height: 32px;
        width: 32px;
    }

    .compare-page--pixel .guest-kyc-progress-step__label {
        color: var(--color-171717);
        font-size: 12px;
        font-weight: 700;
        line-height: 16px;
    }

    .compare-page--pixel .guest-kyc-progress-step.is-active .guest-kyc-progress-step__bullet {
        background: var(--color-rgb-46-138-110-50pct);
        border: 0;
    }

    .compare-page--pixel .guest-kyc-progress-step.is-complete .guest-kyc-progress-step__bullet {
        background: var(--color-2e8a6e);
        border: 0;
        color: var(--color-ffffff);
    }

    .compare-page--pixel .guest-kyc-progress-step.is-complete .guest-kyc-progress-step__bullet svg {
        height: 20px;
        width: 20px;
    }

    .compare-page--pixel .guest-kyc-progress-step.is-complete::before {
        background: var(--color-171717);
    }

    .compare-page--pixel .compare-main-section {
        padding: 60px 0 32px;
    }

    .compare-page--pixel .compare-shell {
        gap: 20px;
    }

    .compare-page--pixel .compare-topbar {
        min-height: 71px;
    }

    .compare-page--pixel .compare-share-btn {
        gap: 16px;
        min-height: 40px;
        padding: 8px 16px;
    }

    .compare-page--pixel .compare-share-btn img {
        height: 24px;
        object-fit: contain;
        width: 24px;
    }

    .compare-page--pixel .compare-heading__arrow {
        height: 32px;
        width: 32px;
    }

    .compare-page--pixel .compare-heading__arrow img {
        height: 32px;
        object-fit: contain;
        width: 32px;
    }

    .compare-page--pixel .compare-heading__copy h1 {
        font-size: 24px;
        font-weight: 400;
        line-height: normal;
    }

    .compare-page--pixel .compare-heading__copy p {
        margin-top: 0;
    }

    .compare-page--pixel .compare-cards-grid {
        gap: 16px;
    }

    .compare-page--pixel .compare-property-card {
        border: 1.098px solid var(--color-rgb-0-0-0-10pct);
        min-height: 682px;
    }

    .compare-page--pixel .compare-property-card__media {
        height: 192px;
    }

    .compare-page--pixel .compare-property-card__remove {
        background: var(--color-rgb-255-255-255-80pct);
        height: 28px;
        left: 8px;
        top: 8px;
        width: 28px;
    }

    .compare-page--pixel .compare-property-card__remove img {
        height: 16px;
        width: 16px;
    }

    .compare-page--pixel .compare-property-card__badges {
        right: 8px;
        top: 8px;
    }

    .compare-page--pixel .compare-property-card__badge {
        min-height: 30px;
    }

    .compare-page--pixel .compare-property-card__badge img {
        height: 16px;
        width: 16px;
    }

    .compare-page--pixel .compare-property-card__head h3 {
        font-size: 20px;
        font-weight: 400;
        line-height: normal;
    }

    .compare-page--pixel .compare-property-card__location {
        font-size: 16px;
        margin-top: 0;
    }

    .compare-page--pixel .compare-property-card__location img,
    .compare-page--pixel .compare-property-card__fact-meta img,
    .compare-page--pixel .compare-property-card__value-icon {
        height: 14px;
        object-fit: contain;
        width: 14px;
    }

    .compare-page--pixel .compare-property-card__fact-value,
    .compare-page--pixel .compare-property-card__price-value {
        align-items: center;
        display: inline-flex;
        gap: 8px;
    }

    .compare-page--pixel .compare-property-card__pricing li.is-accent .compare-property-card__price-value {
        color: var(--color-2e8a6e);
    }
}

.details-page {
    background: white;
}

.details-main-section {
    padding: 33.6px 0 60.8px;
}

.details-page .guest-kyc-progress-section--details+.details-main-section {
    padding-top: 19.2px;
}

.details-back-link {
    display: inline-flex;
    align-items: center;
    gap: 5.76px;
    color: var(--color-374151);
    text-decoration: none;
    font-size: 17.28px;
    font-weight: 600;
}

.details-gallery {
    margin-top: 16px;
    display: grid;
    gap: 8.32px;
}

.details-gallery__main-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-14-72px);
    background: var(--color-e5e7eb);
    min-height: 360px;
}

.details-gallery__main-image {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    display: block;
}

.details-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 37.6px;
    height: 37.6px;
    border: 1px solid var(--color-rgb-255-255-255-55pct);
    border-radius: var(--radius-999px);
    background: var(--color-rgb-15-23-42-32pct);
    color: var(--color-ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    backdrop-filter: blur(2px);
    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

.details-gallery__nav:hover {
    background: var(--color-rgb-15-23-42-52pct);
    border-color: var(--color-rgb-255-255-255-75pct);
}

.details-gallery__nav--prev {
    inset-inline-end: 11.52px;
}

.details-gallery__nav--next {
    inset-inline-start: 11.52px;
}

.details-gallery__counter {
    position: absolute;
    inset-inline-end: 11.52px;
    top: 10.88px;
    min-height: 25.6px;
    padding: 1.92px 9.92px;
    border-radius: var(--radius-999px);
    background: var(--color-rgb-17-24-39-58pct);
    color: var(--color-ffffff);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.details-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8.32px;
}

.details-gallery__thumb {
    border: 2px solid transparent;
    border-radius: var(--radius-12-16px);
    overflow: hidden;
    padding: 0;
    background: var(--color-ffffff);
    min-height: 155px;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.details-gallery__thumb img {
    width: 100%;
    height: 100%;
    min-height: 155px;
    object-fit: cover;
    display: block;
}

.details-gallery__thumb.is-active {
    border-color: var(--color-2e8a6e);
    box-shadow: 0 8px 16px -14px var(--color-rgb-46-138-110-75pct);
}

.details-layout {
    margin-top: 13.6px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 12.48px;
    align-items: start;
}

.details-content-col {
    display: grid;
    gap: 11.52px;
}

.details-content-col article,
.details-sidebar-col article {
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-13-6px);
    background: var(--color-ffffff);
}

.details-head-card {
    padding: 11.2px 14.72px;
}

.kyc-properties-choice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 14px;
}

.kyc-properties-label-text {
    font-weight: 500;
    color: #374151;
}

.kyc-properties-choice-group {
    display: flex;
    align-items: center;
    gap: 18px;
}

.kyc-properties-choice-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    color: #374151;
}

.kyc-properties-choice-group input[type="radio"] {
    accent-color: var(--color-2e8a6e);
    width: 16px;
    height: 16px;
    border-radius: 33554400px;
    border: 1px solid #E5E5E5;
    background: rgba(229, 229, 229, 0.30);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    appearance: none;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.kyc-properties-choice-group input[type="radio"]:checked {
    border: 1px solid #E5E5E5;
    background: rgba(229, 229, 229, 0.30);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.kyc-properties-choice-group input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.667px;
    height: 6.667px;
    background: var(--color-2e8a6e);
    border-radius: 50%;
}

.details-badge {
    min-height: 24px;
    padding: 1.28px 9.28px;
    border-radius: var(--radius-999px);
    background: var(--color-2e8a6e);
    color: var(--color-eafaf4);
    font-size: 11.52px;
    font-weight: 700;
    white-space: nowrap;
}

.details-head-card h1 {
    margin: 0;
    color: var(--color-151b22);
    font-size: 20.48px;
    font-weight: 700;
    line-height: 1.35;
}

.details-head-card__location {
    margin: 5.6px 0 0;
    color: var(--color-6b7280);
    font-size: 13.6px;
    display: inline-flex;
    align-items: center;
    gap: 4.8px;
}

.details-price-strip {
    padding: 5.12px;
    border-color: var(--color-rgb-46-138-110-55pct);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5.6px;
}

.details-price-strip__item {
    min-height: 53.6px;
    border-radius: var(--radius-8-8px);
    background: var(--color-f8f9f9);
    padding: 5.76px 7.68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.56px;
}

.details-price-strip__item span {
    color: var(--color-7b8290);
    font-size: 11.84px;
    font-weight: 600;
}

.details-price-strip__item strong {
    color: var(--color-1f2937);
    font-size: 14.72px;
    font-weight: 700;
}

.details-facts-card,
.details-description-card,
.details-trust-card,
.details-nearby-card {
    padding: 12.8px 14.4px;
}

.details-facts-card h2,
.details-description-card h2,
.details-trust-card h2,
.details-nearby-card h2 {
    margin: 0;
    color: var(--color-171717);
    font-size: 16.32px;
    font-weight: 700;
}

.details-facts-grid {
    margin-top: 11.2px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5.76px;
}

.details-facts-grid div {
    min-height: 68px;
    border-radius: var(--radius-9-6px);
    background: var(--color-f8f9f9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.2px;
    text-align: center;
    padding: 5.6px;
}

.details-facts-grid img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.details-facts-grid span {
    color: var(--color-6b7280);
    font-size: 11.52px;
    font-weight: 600;
}

.details-facts-grid strong {
    color: var(--color-1f2937);
    font-size: 13.76px;
    font-weight: 700;
}

.details-built-year {
    margin: 8.96px 0 0;
    color: var(--color-7d8592);
    font-size: 12.48px;
}

.details-description-card p {
    margin: 7.2px 0 0;
    color: var(--color-6b7280);
    font-size: 14.08px;
    line-height: 1.65;
}

.details-trust-card {
    border-color: var(--color-rgb-46-138-110-52pct);
}

.details-trust-card ul {
    margin: 9.28px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6.72px;
}

.details-trust-card li {
    color: var(--color-2f3742);
    font-size: 13.76px;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    gap: 6.72px;
}

.details-trust-card li::before {
    content: "?";
    width: 16px;
    height: 16px;
    border-radius: var(--radius-50pct);
    background: var(--color-edf9f4);
    color: var(--color-2e8a6e);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10.56px;
    font-weight: 700;
    flex-shrink: 0;
}

.details-legal-box {
    margin-top: 11.52px;
    border-radius: var(--radius-8-96px);
    background: var(--color-f3f4f6);
    padding: 8.8px 9.92px;
    display: grid;
    gap: 2.88px;
}

.details-legal-box span {
    color: var(--color-7d8491);
    font-size: 12.32px;
    font-weight: 600;
}

.details-legal-box strong {
    color: var(--color-2f3742);
    font-size: 13.6px;
    font-weight: 700;
}

.details-nearby-grid {
    margin-top: 9.92px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5.76px;
}

.details-nearby-grid div {
    min-height: 77.6px;
    border-radius: var(--radius-10-24px);
    background: var(--color-f9fafb);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.4px;
    text-align: center;
    padding: 5.44px;
}

.details-nearby-grid img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.details-nearby-grid strong {
    color: var(--color-1f2937);
    font-size: 13.76px;
    font-weight: 700;
}

.details-nearby-grid span {
    color: var(--color-6b7280);
    font-size: 11.52px;
}

.details-sidebar-col {
    display: grid;
    gap: 11.2px;
}

.details-calculator-card {
    padding: 12.48px;
    display: grid;
    gap: 7.2px;
}

.details-calculator-card h2 {
    margin: 0;
    color: var(--color-111827);
    font-size: 16.32px;
    font-weight: 700;
}

.details-calc-currency {
    width: fit-content;
    min-height: 23.2px;
    padding: 0.8px 7.36px;
    border-radius: var(--radius-7-68px);
    border: 1px solid var(--color-e5e7eb);
    background: var(--color-f8fafc);
    color: var(--color-444b56);
    font-size: 10.88px;
    font-weight: 700;
}

.details-calculator-card label {
    color: var(--color-525b67);
    font-size: 12.48px;
    font-weight: 700;
}

.details-calculator-card input[type="range"] {
    --details-calc-progress: 50%;
    width: 100%;
    height: 10.4px;
    border-radius: var(--radius-999px);
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(to left,
            var(--color-2e8a6e) var(--details-calc-progress),
            var(--color-e5e7eb) var(--details-calc-progress));
}

.details-calculator-card input[type="range"]::-webkit-slider-runnable-track {
    height: 10.4px;
    border-radius: var(--radius-999px);
    background: transparent;
}

.details-calculator-card input[type="range"]::-moz-range-track {
    height: 10.4px;
    border-radius: var(--radius-999px);
    background: transparent;
}

.details-calculator-card input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 13.76px;
    height: 13.76px;
    margin-top: -1px;
    border-radius: var(--radius-50pct);
    border: 1px solid var(--color-2e8a6e);
    background: var(--color-ffffff);
}

.details-calculator-card input[type="range"]::-moz-range-thumb {
    width: 13.76px;
    height: 13.76px;
    border-radius: var(--radius-50pct);
    border: 1px solid var(--color-2e8a6e);
    background: var(--color-ffffff);
}

.details-calc-value {
    color: var(--color-111827);
    font-size: 13.6px;
    font-weight: 700;
}

.details-calculator-card select {
    width: 100%;
    min-height: 32px;
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-8px);
    background: var(--color-f8fafc);
    color: var(--color-374151);
    font-size: 12.8px;
    padding: 5.76px 9.28px;
}

.details-monthly-box {
    border-radius: var(--radius-8-96px);
    background: var(--color-edf5f2);
    padding: 9.92px;
    display: grid;
    gap: 2.4px;
}

.details-monthly-box span {
    color: var(--color-5d6674);
    font-size: 11.84px;
}

.details-monthly-box strong {
    color: var(--color-2e8a6e);
    font-size: 16px;
    font-weight: 700;
}

.details-monthly-box small {
    color: var(--color-707986);
    font-size: 11.2px;
}

.details-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5.76px;
}

.details-mini-grid div {
    min-height: 52px;
    border-radius: var(--radius-8-96px);
    background: var(--color-f3f4f6);
    padding: 7.04px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.4px;
}

.details-mini-grid span {
    color: var(--color-7d8592);
    font-size: 11.2px;
}

.details-mini-grid strong {
    color: var(--color-1f2937);
    font-size: 12.48px;
    font-weight: 700;
}

.details-plan-summary {
    border: 1px solid var(--color-f2de5f);
    border-radius: var(--radius-8-96px);
    background: var(--color-faf9ef);
    padding: 8.32px;
    display: grid;
    gap: 3.2px;
}

.details-plan-summary h3 {
    margin: 0;
    color: var(--color-1f2937);
    font-size: 12.48px;
    font-weight: 700;
}

.details-plan-summary p {
    margin: 0;
    color: var(--color-4b5563);
    font-size: 11.52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.details-plan-summary strong {
    color: var(--color-111827);
    font-weight: 700;
}

.details-booking-card {
    padding: 9.92px;
}

.details-booking-card button {
    width: 100%;
    min-height: 35.2px;
    border: 1px solid var(--color-2e8a6e);
    border-radius: var(--radius-7-68px);
    background: var(--color-2e8a6e);
    color: var(--color-f3fff9);
    font-size: 14.72px;
    font-weight: 700;
}

.details-booking-card p {
    margin: 7.2px 0 0;
    text-align: center;
    color: var(--color-7b8290);
    font-size: 11.52px;
}

@media (max-width: 1180px) {
    .details-layout {
        grid-template-columns: 1fr;
    }

    .details-sidebar-col {
        order: -1;
    }
}

@media (max-width: 880px) {

    .details-gallery__main-wrap,
    .details-gallery__main-image {
        min-height: 270px;
    }

    .details-price-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .details-facts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .details-nearby-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .details-main-section {
        padding-top: 19.2px;
    }

    .details-gallery__thumbs {
        grid-template-columns: 1fr;
    }

    .details-gallery__main-wrap,
    .details-gallery__main-image {
        min-height: 220px;
    }

    .details-head-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .details-price-strip,
    .details-facts-grid,
    .details-mini-grid {
        grid-template-columns: 1fr;
    }
}

body.auth-modal-open {
    overflow: hidden;
}

.auth-modal-root {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: grid;
    place-items: center;
    padding: 16px;
}

.auth-modal-root[hidden] {
    display: none !important;
}

.auth-modal-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    background: var(--color-rgb-15-23-42-22pct);
    backdrop-filter: blur(5px);
}

.auth-modal-shell {
    position: relative;
    width: min(402px, 100%);
}

.auth-modal-shell--wide {
    width: min(1055px, 100%);
}

.auth-modal-step {
    display: none;
}

.auth-modal-step.is-active {
    display: block;
}

.auth-modal-card {
    position: relative;
    background: var(--color-ffffff);
    border-radius: var(--radius-17-6px);
    border: 1px solid var(--color-e5e7eb);
    box-shadow: 0 28px 56px -36px var(--color-rgb-15-23-42-55pct);
}

.auth-modal-card--compact {
    padding: 21.6px 18.4px 17.6px;
}

.auth-modal-card--wide {
    padding: 28.8px 34.4px 20.8px;
}

.auth-modal-logo {
    width: 88px;
    height: auto;
    margin: 0 auto 6.72px;
    display: block;
}

.auth-modal-card h2 {
    margin: 0;
    color: var(--color-1f2937);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 20px;
}

.auth-modal-card>p {
    margin: 5.76px 0 0;
    color: var(--color-6b7280);
    font-size: 14.08px;
    line-height: 1.45;
}

.auth-modal-form {
    margin-top: 13.12px;
    display: grid;
    gap: 6.08px;
    text-align: start;
}

.auth-modal-form label {
    color: var(--color-374151);
    font-size: 12.32px;
    font-weight: 700;
    text-align: start;
}

.auth-modal-form label b {
    color: var(--color-ef4444);
    font-weight: 700;
}

.auth-modal-form input {
    min-height: 33.6px;
    border-radius: var(--radius-8-8px);
    border: 1px solid var(--color-e5e7eb);
    background: var(--color-f8fafc);
    color: var(--color-111827);
    padding: 4.48px 10.56px;
    font-size: 12.8px;
}

.auth-modal-form input::placeholder {
    color: var(--color-9ca3af);
}

.auth-modal-form input:focus {
    outline: 2px solid var(--color-rgb-46-138-110-28pct);
}

.auth-modal-form button {
    margin-top: 4.8px;
    min-height: 33.92px;
    border: 1px solid var(--color-2e8a6e);
    border-radius: var(--radius-8-8px);
    background: var(--color-2e8a6e);
    color: var(--color-ecfdf5);
    font-size: 13.76px;
    font-weight: 700;
}

.auth-modal-helper {
    margin: 11.52px 0 0;
    color: var(--color-6b7280);
    text-align: center;
    font-size: 12.48px;
    font-weight: 600;
}

.auth-modal-helper button {
    border: none;
    background: transparent;
    color: var(--color-2e8a6e);
    font-size: 12.48px;
    font-weight: 700;
    padding: 0;
}

.auth-modal-back {
    margin: 13.44px auto 0;
    border: none;
    background: transparent;
    color: var(--color-374151);
    font-size: 12.48px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6.08px;
}

.auth-otp-box {
    margin-top: 13.44px;
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-12-8px);
    overflow: hidden;
    background: var(--color-ffffff);
    text-align: center;
}

.auth-otp-box h3 {
    margin: 0;
    padding-top: 12.8px;
    color: var(--color-111827);
    font-size: 28px;
    font-weight: 700;
}

.auth-otp-box p {
    margin: 6.08px auto 0;
    max-width: 85%;
    color: var(--color-6b7280);
    font-size: 12.48px;
    line-height: 1.5;
}

.auth-otp-inputs {
    margin: 11.52px auto 0;
    display: flex;
    justify-content: center;
    direction: ltr;
}

.auth-otp-inputs input {
    width: 29.44px;
    height: 29.44px;
    border: 1px solid var(--color-e5e7eb);
    border-inline-start-width: 0;
    background: var(--color-f9fafb);
    color: var(--color-111827);
    text-align: center;
    font-size: 15.68px;
    font-weight: 700;
}

.auth-otp-inputs input:first-child {
    border-inline-start-width: 1px;
    border-top-left-radius: 4.8px;
    border-bottom-left-radius: 4.8px;
}

.auth-otp-inputs input:last-child {
    border-top-right-radius: 4.8px;
    border-bottom-right-radius: 4.8px;
}

.auth-otp-inputs input:focus {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--color-rgb-46-138-110-32pct);
}

.auth-otp-box small {
    margin-top: 11.2px;
    display: block;
    color: var(--color-9ca3af);
    font-size: 11.2px;
}

.auth-otp-resend {
    margin-top: 8.8px;
    border: none;
    background: transparent;
    color: var(--color-111827);
    font-size: 12.16px;
    font-weight: 700;
}

.auth-otp-change {
    margin-top: 10.24px;
    width: 100%;
    min-height: 37.6px;
    border: none;
    border-top: 1px solid var(--color-e5e7eb);
    background: var(--color-ffffff);
    color: var(--color-6b7280);
    font-size: 12.48px;
    font-weight: 700;
}

.auth-terms {
    margin-top: 0.96px;
    display: inline-flex;
    align-items: center;
    gap: 5.44px;
    color: var(--color-9ca3af) !important;
    font-size: 11.2px !important;
    font-weight: 600 !important;
}

.auth-terms input {
    width: 13.12px;
    height: 13.12px;
    min-height: auto;
    margin: 0;
    accent-color: var(--color-2e8a6e);
}

.auth-close-btn {
    border: none;
    background: transparent;
    cursor: pointer;
}

.auth-modal-shell--signup-flow {
    width: min(608px, 100%);
}

.auth-modal-step--login-retouch .auth-modal-card--login-retouch {
    align-items: center;
    border: none;
    border-radius: var(--radius-16px);
    display: flex;
    justify-content: center;
    padding: 24px;
}

.auth-modal-step--login-retouch .auth-login-retouch {
    display: grid;
    gap: 16px;
    width: min(446px, 100%);
}

.auth-modal-step--login-retouch .auth-login-retouch-head {
    display: grid;
    gap: 16px;
    justify-items: center;
    text-align: center;
}

.auth-modal-step--login-retouch .auth-login-retouch-brand {
    display: block;
    height: 48px;
    width: 162px;
}

.auth-modal-step--login-retouch .auth-login-retouch-title {
    color: var(--color-1a1a1a);
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    margin: 0;
}

.auth-modal-step--login-retouch .auth-login-retouch-subtitle {
    color: var(--color-6b7280);
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    margin: 0;
}

.auth-modal-step--login-retouch .auth-login-retouch-form {
    display: grid;
    gap: 16px;
    margin: 0;
    width: 100%;
}

.auth-modal-step--login-retouch .auth-login-retouch-field {
    display: grid;
    gap: 8px;
    width: 100%;
}

.auth-modal-step--login-retouch .auth-login-retouch-label {
    align-items: center;
    color: var(--color-1a1a1a);
    display: inline-flex;
    font-size: 14px;
    font-weight: 400;
    gap: 1px;
    justify-content: flex-start;
    line-height: 14px;
    width: 100%;
}

.auth-modal-step--login-retouch .auth-login-retouch-required {
    color: var(--color-ef4444);
    font-size: 14px;
    line-height: 14px;
}

.auth-modal-step--login-retouch .auth-login-retouch-input {
    background: var(--color-f9fafb);
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-10px);
    color: var(--color-231f20);
    font-size: 14px;
    font-weight: 400;
    height: 36px;
    line-height: 20px;
    padding: 4px 12px;
    text-align: right;
    width: 100%;
}

.auth-modal-step--login-retouch .auth-login-retouch-input::placeholder {
    color: var(--color-6b7280);
}

.auth-modal-step--login-retouch .auth-login-retouch-input:focus {
    outline: 2px solid var(--color-rgb-46-138-110-26pct);
}

.auth-modal-step--login-retouch .auth-login-retouch-input--phone {
    direction: ltr;
    text-align: right;
}

.auth-modal-step--login-retouch .auth-login-retouch-submit {
    background: var(--color-2e8a6e);
    border: 1px solid var(--color-2e8a6e);
    border-radius: var(--radius-10px);
    color: var(--color-ffffff);
    font-size: 16px;
    font-weight: 500;
    height: 40px;
    line-height: normal;
    margin: 0;
    width: 100%;
}

.auth-modal-step--login-retouch .auth-login-retouch-helper {
    align-items: center;
    display: inline-flex;
    gap: 0;
    justify-content: center;
    margin: 8px 0 0;
    width: 100%;
}

.auth-modal-step--login-retouch .auth-login-retouch-helper span {
    color: var(--color-6b7280);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.auth-modal-step--login-retouch .auth-login-retouch-helper button {
    background: transparent;
    border: none;
    color: var(--color-2e8a6e);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    padding: 0;
}

.auth-modal-step--signup-retouch .auth-modal-card--signup-flow,
.auth-modal-step--otp-retouch .auth-modal-card--signup-flow {
    align-items: center;
    border: none;
    border-radius: var(--radius-16px);
    display: flex;
    justify-content: center;
    /* min-height: 638px; */
    padding: 24px;
}

.auth-modal-step--signup-retouch .auth-signup-retouch {
    display: grid;
    gap: 16px;
    width: min(446px, 100%);
}

.auth-modal-step--signup-retouch .auth-signup-flow-head,
.auth-modal-step--otp-retouch .auth-signup-flow-head {
    display: grid;
    gap: 16px;
    justify-items: center;
    text-align: center;
}

.auth-modal-step--signup-retouch .auth-signup-flow-brand,
.auth-modal-step--otp-retouch .auth-signup-flow-brand {
    display: block;
    height: 48px;
    width: 162px;
}

.auth-modal-step--signup-retouch .auth-signup-flow-title,
.auth-modal-step--otp-retouch .auth-signup-flow-title {
    color: var(--color-231f20);
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
}

.auth-modal-step--signup-retouch .auth-signup-flow-subtitle,
.auth-modal-step--otp-retouch .auth-signup-flow-subtitle {
    color: var(--color-6b7280);
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-form {
    display: grid;
    gap: 16px;
    margin: 0;
    width: 100%;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-field {
    display: grid;
    gap: 8px;
    width: 100%;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-label {
    align-items: center;
    color: var(--color-231f20);
    display: inline-flex;
    font-size: 16px;
    font-weight: 400;
    gap: 1px;
    justify-content: flex-start;
    line-height: 24px;
    width: 100%;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-required {
    color: var(--color-d4183d);
    font-size: 16px;
    line-height: 24px;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-input {
    background: var(--color-f9fafb);
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-10px);
    color: var(--color-231f20);
    font-size: 14px;
    font-weight: 400;
    height: 36px;
    line-height: 20px;
    padding: 4px 12px;
    text-align: right;
    width: 100%;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-input::placeholder {
    color: var(--color-6b7280);
}

.auth-modal-step--signup-retouch .auth-signup-retouch-input:focus {
    outline: 2px solid var(--color-rgb-46-138-110-26pct);
}

.auth-modal-step--signup-retouch .auth-signup-retouch-input-shell {
    align-items: center;
    background: var(--color-f3f3f5);
    border: 1px solid var(--color-rgb-0-0-0-0pct);
    border-radius: var(--radius-16px);
    display: flex;
    gap: 10px;
    height: 36px;
    padding: 4px 12px;
    width: 100%;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-input-shell .auth-signup-retouch-input {
    background: transparent;
    border: none;
    border-radius: var(--radius-0);
    flex: 1;
    height: auto;
    min-height: 0;
    outline: none;
    padding: 0;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-input-shell .auth-signup-retouch-input:focus {
    outline: none;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-calendar {
    color: var(--color-343330);
    cursor: pointer;
    display: block;
    flex: 0 0 auto;
    height: 24px;
    width: 24px;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-input--date::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    display: none;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-input--phone {
    direction: ltr;
    text-align: right;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-terms {
    align-items: center;
    color: var(--color-6b7280);
    display: inline-flex;
    font-size: 14px;
    font-weight: 400;
    gap: 8px;
    justify-content: flex-start;
    line-height: 20px;
    width: 100%;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-terms input {
    accent-color: var(--color-2e8a6e);
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-4px);
    box-shadow: 0 1px 2px 0 var(--color-rgb-0-0-0-5pct);
    flex: 0 0 auto;
    height: 16px;
    margin: 0;
    min-height: 0;
    width: 16px;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-submit {
    background: var(--color-2e8a6e);
    border: 1px solid var(--color-2e8a6e);
    border-radius: var(--radius-10px);
    color: var(--color-ffffff);
    font-size: 16px;
    font-weight: 500;
    height: 40px;
    line-height: normal;
    margin: 0;
    width: 100%;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-back {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-10px);
    color: var(--color-343330);
    direction: rtl;
    display: inline-flex;
    font-size: 24px;
    font-weight: 400;
    gap: 17px;
    justify-content: center;
    line-height: 32px;
    margin: 0 auto;
    padding: 8px 12px;
}

.auth-modal-step--signup-retouch .auth-signup-retouch-back img {
    display: block;
    flex: 0 0 auto;
    height: 32px;
    width: 32px;
}

.auth-modal-step--otp-retouch .auth-otp-retouch {
    display: grid;
    gap: 16px;
    width: min(560px, 100%);
}

.auth-modal-step--otp-retouch .auth-signup-flow-head {
    margin-inline: auto;
    width: min(446px, 100%);
}

.auth-modal-step--otp-retouch .auth-otp-retouch-panel {
    background: var(--color-ffffff);
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-16-4px);
    overflow: hidden;
}

.auth-modal-step--otp-retouch .auth-otp-retouch-intro {
    display: grid;
    gap: 16px;
    margin-inline: auto;
    padding: 24px 24px 0;
    text-align: center;
    width: min(446px, 100%);
}

.auth-modal-step--otp-retouch .auth-otp-retouch-intro h3 {
    color: var(--color-231f20);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    margin: 0;
}

.auth-modal-step--otp-retouch .auth-otp-retouch-intro p {
    color: var(--color-737373);
    display: inline-flex;
    font-size: 16px;
    font-weight: 400;
    gap: 0;
    justify-content: center;
    line-height: 24px;
    margin: 0;
}

.auth-modal-step--otp-retouch .auth-otp-retouch-intro p span {
    color: var(--color-231f20);
    margin-inline-start: 4px;
}

.auth-modal-step--otp-retouch .auth-otp-retouch-body {
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 24px 105px;
}

.auth-modal-step--otp-retouch .auth-otp-retouch-inputs {
    direction: ltr;
    display: flex;
    gap: 4px;
    justify-content: center;
}

.auth-modal-step--otp-retouch .auth-otp-retouch-digit {
    background: var(--color-rgb-229-229-229-30pct);
    border: none;
    border-bottom: 1px solid var(--color-e5e5e5);
    color: var(--color-231f20);
    font-size: 16px;
    font-weight: 400;
    height: 36px;
    line-height: 20px;
    padding: 0;
    text-align: center;
    width: 36px;
}

.auth-modal-step--otp-retouch .auth-otp-retouch-digit:first-child {
    border-bottom-left-radius: 6.8px;
    border-top-left-radius: 6.8px;
}

.auth-modal-step--otp-retouch .auth-otp-retouch-digit:last-child {
    border-bottom-right-radius: 6.8px;
    border-top-right-radius: 6.8px;
}

.auth-modal-step--otp-retouch .auth-otp-retouch-digit:focus {
    outline: 2px solid var(--color-rgb-46-138-110-26pct);
    outline-offset: -1px;
}

.auth-modal-step--otp-retouch .auth-otp-retouch-expire {
    color: var(--color-6a7282);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

.auth-modal-step--otp-retouch .auth-otp-retouch-resend {
    background: transparent;
    border: none;
    color: var(--color-171717);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    padding: 0;
}

.auth-modal-step--otp-retouch .auth-otp-retouch-foot {
    align-items: center;
    border-top: 1px solid var(--color-e5e5e5);
    display: flex;
    justify-content: center;
    margin-inline: auto;
    min-height: 85px;
    width: min(446px, 100%);
}

.auth-modal-step--otp-retouch .auth-otp-retouch-change {
    background: transparent;
    border: none;
    border-radius: var(--radius-6-8px);
    color: var(--color-6a7282);
    font-size: 16px;
    font-weight: 400;
    height: 36px;
    line-height: 20px;
    margin: 0;
    min-width: 178px;
    padding: 8px 16px;
}

@media (max-width: 920px) {
    .auth-modal-step--login-retouch .auth-modal-card--login-retouch {
        min-height: auto;
    }

    .auth-modal-step--signup-retouch .auth-modal-card--signup-flow,
    .auth-modal-step--otp-retouch .auth-modal-card--signup-flow {
        min-height: auto;
    }

    .auth-modal-step--otp-retouch .auth-otp-retouch-body {
        padding-inline: 64px;
    }
}

@media (max-width: 760px) {
    .auth-modal-shell--signup-flow {
        width: min(560px, 100%);
    }

    .auth-modal-step--login-retouch .auth-modal-card--login-retouch {
        padding: 20px 16px;
    }

    .auth-modal-step--login-retouch .auth-login-retouch-head {
        gap: 12px;
    }

    .auth-modal-step--login-retouch .auth-login-retouch-brand {
        height: 44px;
        width: 149px;
    }

    .auth-modal-step--login-retouch .auth-login-retouch-title {
        font-size: 15px;
        line-height: 20px;
    }

    .auth-modal-step--login-retouch .auth-login-retouch-subtitle {
        font-size: 15px;
        line-height: 22px;
    }

    .auth-modal-step--login-retouch .auth-login-retouch-form {
        gap: 12px;
    }

    .auth-modal-step--login-retouch .auth-login-retouch-label {
        font-size: 13px;
    }

    .auth-modal-step--login-retouch .auth-login-retouch-helper span,
    .auth-modal-step--login-retouch .auth-login-retouch-helper button {
        font-size: 13px;
    }

    .auth-modal-step--signup-retouch .auth-modal-card--signup-flow,
    .auth-modal-step--otp-retouch .auth-modal-card--signup-flow {
        padding: 20px 16px;
    }

    .auth-modal-step--signup-retouch .auth-signup-flow-head,
    .auth-modal-step--otp-retouch .auth-signup-flow-head {
        gap: 12px;
    }

    .auth-modal-step--signup-retouch .auth-signup-flow-brand,
    .auth-modal-step--otp-retouch .auth-signup-flow-brand {
        height: 44px;
        width: 149px;
    }

    .auth-modal-step--signup-retouch .auth-signup-flow-title,
    .auth-modal-step--signup-retouch .auth-signup-flow-subtitle,
    .auth-modal-step--otp-retouch .auth-signup-flow-title,
    .auth-modal-step--otp-retouch .auth-signup-flow-subtitle {
        font-size: 15px;
        line-height: 24px;
    }

    .auth-modal-step--signup-retouch .auth-signup-retouch-form {
        gap: 12px;
    }

    .auth-modal-step--signup-retouch .auth-signup-retouch-label {
        font-size: 15px;
    }

    .auth-modal-step--signup-retouch .auth-signup-retouch-back {
        font-size: 22px;
        gap: 12px;
        line-height: 30px;
    }

    .auth-modal-step--signup-retouch .auth-signup-retouch-back img {
        height: 30px;
        width: 30px;
    }

    .auth-modal-step--otp-retouch .auth-otp-retouch-panel {
        border-radius: var(--radius-14px);
    }

    .auth-modal-step--otp-retouch .auth-otp-retouch-intro {
        padding-inline: 16px;
    }

    .auth-modal-step--otp-retouch .auth-otp-retouch-intro h3 {
        font-size: 22px;
        line-height: 30px;
    }

    .auth-modal-step--otp-retouch .auth-otp-retouch-intro p {
        font-size: 15px;
        line-height: 22px;
    }

    .auth-modal-step--otp-retouch .auth-otp-retouch-body {
        padding: 20px 16px;
    }

    .auth-modal-step--otp-retouch .auth-otp-retouch-digit {
        height: 34px;
        width: 34px;
    }

    .auth-modal-step--otp-retouch .auth-otp-retouch-foot {
        min-height: 76px;
        width: calc(100% - 32px);
    }
}

@media (max-width: 480px) {
    .auth-modal-step--login-retouch .auth-modal-card--login-retouch {
        padding: 16px 12px;
    }

    .auth-modal-step--login-retouch .auth-login-retouch-brand {
        height: 40px;
        width: 136px;
    }

    .auth-modal-step--login-retouch .auth-login-retouch-title {
        font-size: 14px;
        line-height: 18px;
    }

    .auth-modal-step--login-retouch .auth-login-retouch-subtitle {
        font-size: 14px;
        line-height: 20px;
    }

    .auth-modal-step--login-retouch .auth-login-retouch-input {
        font-size: 13px;
        height: 34px;
    }

    .auth-modal-step--login-retouch .auth-login-retouch-submit {
        height: 38px;
    }

    .auth-modal-step--login-retouch .auth-login-retouch-helper span,
    .auth-modal-step--login-retouch .auth-login-retouch-helper button {
        font-size: 13px;
    }

    .auth-modal-step--signup-retouch .auth-modal-card--signup-flow,
    .auth-modal-step--otp-retouch .auth-modal-card--signup-flow {
        padding: 16px 12px;
    }

    .auth-modal-step--signup-retouch .auth-signup-flow-brand,
    .auth-modal-step--otp-retouch .auth-signup-flow-brand {
        height: 40px;
        width: 136px;
    }

    .auth-modal-step--signup-retouch .auth-signup-flow-title,
    .auth-modal-step--signup-retouch .auth-signup-flow-subtitle,
    .auth-modal-step--otp-retouch .auth-signup-flow-title,
    .auth-modal-step--otp-retouch .auth-signup-flow-subtitle {
        font-size: 14px;
        line-height: 22px;
    }

    .auth-modal-step--signup-retouch .auth-signup-retouch-label {
        font-size: 14px;
        line-height: 20px;
    }

    .auth-modal-step--signup-retouch .auth-signup-retouch-input {
        font-size: 13px;
        height: 34px;
    }

    .auth-modal-step--signup-retouch .auth-signup-retouch-terms {
        font-size: 13px;
    }

    .auth-modal-step--signup-retouch .auth-signup-retouch-submit {
        height: 38px;
    }

    .auth-modal-step--signup-retouch .auth-signup-retouch-back {
        font-size: 20px;
    }

    .auth-modal-step--signup-retouch .auth-signup-retouch-back img {
        height: 28px;
        width: 28px;
    }

    .auth-modal-step--otp-retouch .auth-otp-retouch-intro h3 {
        font-size: 20px;
        line-height: 28px;
    }

    .auth-modal-step--otp-retouch .auth-otp-retouch-intro p {
        font-size: 14px;
        line-height: 20px;
    }

    .auth-modal-step--otp-retouch .auth-otp-retouch-digit {
        height: 30px;
        width: 30px;
    }

    .auth-modal-step--otp-retouch .auth-otp-retouch-expire {
        font-size: 13px;
    }

    .auth-modal-step--otp-retouch .auth-otp-retouch-resend,
    .auth-modal-step--otp-retouch .auth-otp-retouch-change {
        font-size: 14px;
    }
}

.auth-modal-step--account-type .auth-modal-card--account-type {
    align-items: center;
    border: none;
    border-radius: var(--radius-24px);
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px 80px;
    text-align: center;
}

.auth-modal-step--account-type .auth-account-type__head {
    display: grid;
    gap: 16px;
    justify-items: center;
}

.auth-modal-step--account-type .auth-account-type__title {
    color: var(--color-1a1a1a);
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
    margin: 0;
}

.auth-modal-step--account-type .auth-account-type__subtitle {
    color: var(--color-6b7280);
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    margin: 0;
}

.auth-modal-step--account-type .auth-account-type__meta {
    color: var(--color-6b7280);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

.auth-modal-step--account-type .auth-close-btn--account-type {
    align-items: center;
    border-radius: var(--radius-999px);
    color: var(--color-231f20);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    inset-inline-start: 40px;
    padding: 0;
    position: absolute;
    top: 40px;
    width: 40px;
}

.auth-modal-step--account-type .auth-close-btn--account-type img {
    display: block;
    height: 24px;
    width: 24px;
}

.auth-modal-step--account-type .auth-role-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    width: 100%;
}

.auth-modal-step--account-type .auth-role-card {
    align-items: center;
    border-radius: var(--radius-24px);
    border: 1px solid;
    column-gap: 15px;
    /* display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 56px; */
    min-height: 149px;
    padding: 24px;
    text-align: right;

    display: flex;
}

.auth-modal-step--account-type .auth-role-card--buyer {
    background: var(--color-rgb-46-138-110-10pct);
    border-color: var(--color-2e8a6e);
}

.auth-modal-step--account-type .auth-role-card--seller {
    background: var(--color-rgb-248-224-0-10pct);
    border-color: var(--color-fdd800);
}

.auth-modal-step--account-type .auth-role-card__arrow {
    align-items: center;
    color: var(--color-2e8a6e);
    display: inline-flex;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.auth-modal-step--account-type .auth-role-card__arrow::before {
    background: currentColor;
    content: "";
    display: block;
    height: 15px;
    mask: url("../icons/auth-modal/arrow-left.svg") center / 18px 15px no-repeat;
    -webkit-mask: url("../icons/auth-modal/arrow-left.svg") center / 18px 15px no-repeat;
    width: 18px;
}

.auth-modal-step--account-type .auth-role-card--seller .auth-role-card__arrow {
    color: var(--color-fdd800);
}

.auth-modal-step--account-type .auth-role-card__content {
    /* display: grid; */
    gap: 4px;
    /* justify-items: end; */
    /* margin-inline-start: auto; */
    /* max-width: 278px; */
    width: 100%;
    display: flex;
    flex-direction: column;
}

.auth-modal-step--account-type .auth-role-card--buyer .auth-role-card__content {
    /* max-width: 273px; */
}

.auth-modal-step--account-type .auth-role-card__content strong {
    color: var(--color-231f20);
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
}

.auth-modal-step--account-type .auth-role-card__content small {
    color: var(--color-231f20);
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
}

.auth-modal-step--account-type .auth-role-card__icon {
    align-items: center;
    display: inline-flex;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.auth-modal-step--account-type .auth-role-card__icon-ring {
    align-items: center;
    background: var(--color-ffffff);
    border-radius: var(--radius-999px);
    border: 1px solid currentColor;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.auth-modal-step--account-type .auth-role-card__icon img {
    display: block;
    height: 24px;
    object-fit: contain;
    width: 24px;
}

.auth-modal-step--account-type .auth-role-card--buyer .auth-role-card__icon-ring {
    color: var(--color-2e8a6e);
}

.auth-modal-step--account-type .auth-role-card--seller .auth-role-card__icon-ring {
    color: var(--color-fdd800);
}

.auth-modal-step--account-type .auth-account-type__foot {
    display: grid;
    gap: 8px;
    justify-items: center;
}

.auth-modal-step--account-type .auth-modal-helper--center,
.auth-modal-step--account-type .auth-account-type__helper {
    color: var(--color-6b7280);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

.auth-modal-step--account-type .auth-login-link {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-10px);
    color: var(--color-1a1a1a);
    direction: ltr;
    display: inline-flex;
    font-size: 24px;
    font-weight: 400;
    gap: 8px;
    line-height: 20px;
    margin: 0;
    padding: 10px 12px;
}

.auth-modal-step--account-type .auth-login-link img {
    display: block;
    flex: 0 0 auto;
    height: 32px;
    transform: rotate(180deg) scaleY(-1);
    width: 32px;
}

.auth-modal-step--account-type .auth-login-link span {
    direction: rtl;
}

@media (max-width: 1120px) {
    .auth-modal-step--account-type .auth-modal-card--account-type {
        padding-inline: 48px;
    }
}

@media (max-width: 920px) {
    .auth-modal-step--account-type .auth-modal-card--account-type {
        gap: 30px;
        min-height: auto;
        padding: 32px 28px;
    }

    .auth-modal-step--account-type .auth-account-type__title {
        font-size: 28px;
        line-height: 36px;
    }

    .auth-modal-step--account-type .auth-account-type__subtitle {
        font-size: 18px;
        line-height: 26px;
    }

    .auth-modal-step--account-type .auth-account-type__meta {
        font-size: 15px;
        line-height: 22px;
    }

    .auth-modal-step--account-type .auth-role-grid {
        gap: 16px;
    }

    .auth-modal-step--account-type .auth-role-card {
        border-radius: var(--radius-18px);
        column-gap: 12px;
        grid-template-columns: 20px minmax(0, 1fr) 52px;
        min-height: 130px;
        padding: 18px;
    }

    .auth-modal-step--account-type .auth-role-card__content strong {
        font-size: 18px;
    }

    .auth-modal-step--account-type .auth-role-card__content small {
        font-size: 15px;
        line-height: 24px;
    }

    .auth-modal-step--account-type .auth-role-card__icon {
        height: 52px;
        width: 52px;
    }

    .auth-modal-step--account-type .auth-role-card__icon-ring {
        height: 44px;
        width: 44px;
    }

    .auth-modal-step--account-type .auth-role-card__icon img {
        height: 22px;
        width: 22px;
    }

    .auth-modal-step--account-type .auth-account-type__helper {
        font-size: 15px;
        line-height: 22px;
    }

    .auth-modal-step--account-type .auth-login-link {
        font-size: 22px;
    }

    .auth-modal-step--account-type .auth-login-link img {
        height: 30px;
        width: 30px;
    }
}

@media (max-width: 760px) {
    .auth-modal-step--account-type .auth-modal-card--account-type {
        border-radius: var(--radius-20px);
        gap: 24px;
        padding: 24px 18px 20px;
    }

    .auth-modal-step--account-type .auth-close-btn--account-type {
        inset-inline-end: 16px;
        top: 16px;
    }

    .auth-modal-step--account-type .auth-account-type__head {
        gap: 12px;
    }

    .auth-modal-step--account-type .auth-account-type__title {
        font-size: 26px;
        line-height: 34px;
    }

    .auth-modal-step--account-type .auth-account-type__subtitle {
        font-size: 17px;
        line-height: 24px;
    }

    .auth-modal-step--account-type .auth-account-type__meta {
        font-size: 14px;
        line-height: 21px;
    }

    .auth-modal-step--account-type .auth-role-grid {
        gap: 12px;
        grid-template-columns: 1fr;
    }

    .auth-modal-step--account-type .auth-role-card {
        border-radius: var(--radius-16px);
        column-gap: 10px;
        grid-template-columns: 20px minmax(0, 1fr) 48px;
        min-height: 122px;
        padding: 16px;
    }

    .auth-modal-step--account-type .auth-role-card__content {
        max-width: none;
    }

    .auth-modal-step--account-type .auth-role-card__content strong {
        font-size: 18px;
    }

    .auth-modal-step--account-type .auth-role-card__content small {
        font-size: 14px;
        line-height: 22px;
    }

    .auth-modal-step--account-type .auth-role-card__icon {
        height: 48px;
        width: 48px;
    }

    .auth-modal-step--account-type .auth-role-card__icon-ring {
        height: 40px;
        width: 40px;
    }

    .auth-modal-step--account-type .auth-role-card__icon img {
        height: 20px;
        width: 20px;
    }

    .auth-modal-step--account-type .auth-account-type__helper {
        font-size: 14px;
        line-height: 20px;
    }

    .auth-modal-step--account-type .auth-login-link {
        font-size: 22px;
        padding: 8px 10px;
    }

    .auth-modal-step--account-type .auth-login-link img {
        height: 28px;
        width: 28px;
    }
}

.buyer-action-modal-root {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: grid;
    place-items: center;
    padding: 16px;
}

.buyer-action-modal-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    background: var(--color-rgb-15-23-42-30pct);
    backdrop-filter: blur(8px);
}

.buyer-action-modal-shell {
    position: relative;
    width: min(560px, 100%);
    border: 1px solid var(--color-d8dde4);
    border-radius: var(--radius-12px);
    background: var(--color-ffffff);
    box-shadow: 0 32px 62px -38px var(--color-rgb-15-23-42-66pct);
    padding: 16px 14px 14px;
    display: grid;
    gap: 12px;
}

.buyer-action-modal-shell--unlock {
    width: min(500px, 100%);
}

.buyer-action-modal-shell--finance {
    width: min(540px, 100%);
}

.buyer-action-modal-close {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--radius-6px);
    background: transparent;
    color: var(--color-8a919c);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.buyer-action-modal-head {
    display: grid;
    gap: 3px;
}

.buyer-action-modal-head--center {
    text-align: start;
}

.buyer-action-modal-head h2 {
    margin: 0;
    color: var(--color-231f20);

    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    /* 100% */
}

.buyer-action-modal-head p {
    margin: 0;
    color: var(--color-8a919c);
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 16px;
}

.buyer-action-modal-subtitle {
    color: var(--color-606877) !important;
    font-size: 15px !important;
    font-weight: 600;
}

.buyer-action-modal-unlock-card {
    border-radius: var(--radius-10px);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 10px;

    background: var(--color-f5f5f5);
}

.buyer-action-modal-unlock-copy {
    display: grid;
    gap: 2px;
}

.buyer-action-modal-unlock-copy strong {
    color: var(--color-252a32);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.buyer-action-modal-unlock-copy small {
    color: var(--color-8b919d);
    font-size: 12px;
    line-height: 1.45;
}

.buyer-action-modal-unlock-icon {
    width: 48px;
    height: 48px;
    border: 1px solid var(--color-d1d6dd);
    border-radius: var(--radius-50pct);
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--color-rgba-23-23-23-0-1);
}

.buyer-action-modal-unlock-icon img {
    width: 24px;
    height: 24px;
}

.buyer-action-modal-banks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.buyer-action-modal-bank {
    min-height: 90px;
    border: 1px solid var(--color-d9dde4);
    border-radius: var(--radius-9px);
    background: var(--color-ffffff);
    padding: 8px;
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    transition:
        border-color 130ms ease,
        background-color 130ms ease;
}

.buyer-action-modal-bank.is-selected {
    border-color: var(--color-2e8a6e);
    background: var(--color-f1faf6);
}

.buyer-action-modal-bank-check {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 14px;
    height: 14px;
    border: 1px solid var(--color-9ca4af);
    border-radius: var(--radius-2px);
    color: var(--color-ffffff);
    background: var(--color-ffffff);
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.buyer-action-modal-bank.is-selected .buyer-action-modal-bank-check {
    border-color: var(--color-2e8a6e);
    background: var(--color-2e8a6e);
}

.buyer-action-modal-bank-logo {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-50pct);
    border: 1px solid var(--color-e1e4e9);
    background: var(--color-f8fafb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.buyer-action-modal-bank-logo img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.buyer-action-modal-bank-logo span {
    color: var(--color-5b6472);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.buyer-action-modal-bank-name {
    color: var(--color-303743);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

.buyer-action-modal-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
}

.buyer-action-modal-actions--unlock {
    justify-self: flex-end;
}

.buyer-action-modal-btn {
    min-height: 34px;
    min-width: 96px;
    border: 1px solid transparent;
    border-radius: var(--radius-8px);
    padding: 0 14px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.buyer-action-modal-btn--primary {
    border-color: var(--color-2e8a6e);
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.buyer-action-modal-btn--ghost {
    border-color: var(--color-d5dae0);
    background: var(--color-f5f6f8);
    color: var(--color-2f3540);
}

.buyer-action-modal-btn:disabled {
    border-color: var(--color-d6dbe1);
    background: var(--color-d6dbe1);
    color: var(--color-7f8793);
    cursor: not-allowed;
}

@media (max-width: 767px) {

    .buyer-action-modal-shell,
    .buyer-action-modal-shell--unlock,
    .buyer-action-modal-shell--finance {
        width: min(100%, 100% - 4.8px);
        padding: 14px 11px 12px;
    }

    .buyer-action-modal-head h2 {
        font-size: 24px;
    }

    .buyer-action-modal-banks-grid {
        grid-template-columns: 1fr;
    }
}

.asking-modal-root {
    position: fixed;
    inset: 0;
    z-index: 265;
    display: grid;
    place-items: center;
    padding: 12px;
}

.asking-modal-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    background: var(--color-rgb-15-23-42-30pct);
    backdrop-filter: blur(8px);
}

.asking-modal-shell {
    position: relative;
    width: min(420px, 100%);
    border: 1px solid var(--color-d4e7df);
    border-radius: var(--radius-16px);
    background: var(--color-ffffff);
    box-shadow:
        0 30px 52px -34px var(--color-rgb-15-23-42-52pct),
        0 10px 18px -12px var(--color-rgb-46-138-110-22pct);
    padding: 24px 22px 20px;
    display: grid;
    justify-items: center;
    gap: 14px;
    direction: rtl;
    overflow: hidden;
}

.asking-modal-shell::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 8px;
    background: var(--color-2e8a6e);
    box-shadow: inset 0 -1px 0 var(--color-rgb-255-255-255-30pct), 0 1px 2px var(--color-rgb-46-138-110-25pct);
    border-radius: var(--radius-0-0-8px-8px);
}

.asking-modal-shell--danger {
    border-color: var(--color-d7e7e1);
}

.asking-modal-close {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-d5e8e0);
    border-radius: var(--radius-8px);
    background: var(--color-f3faf7);
    color: var(--color-2e8a6e);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease;
}

.asking-modal-close svg {
    width: 14px;
    height: 14px;
}

.asking-modal-close:hover {
    border-color: var(--color-2e8a6e);
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.asking-modal-icon {
    width: 58px;
    height: 58px;
    border: 1px solid transparent;
    border-radius: var(--radius-999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.asking-modal-icon svg {
    width: 24px;
    height: 24px;
}

.asking-modal-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.asking-modal-icon--danger {
    background: white;
    color: var(--color-d11c1c);
    border-color: var(--color-2e8a6e);

}

.asking-modal-icon--warning {
    background: var(--color-f0faf7);
    color: var(--color-e39400);
    border-color: var(--color-rgb-46-138-110-22pct);
}

.asking-modal-icon--info {
    background: var(--color-e9f7f1);
    color: var(--color-2e8a6e);
    border-color: var(--color-rgb-46-138-110-28pct);
}

.asking-modal-copy {
    justify-items: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.asking-modal-copy h2 {
    margin: 0;
    color: var(--color-20312c);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.asking-modal-copy p {
    margin: 0;
    color: var(--color-5e6f6a);
    font-size: 14px;
    line-height: 1.7;
}

.asking-modal-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    direction: ltr;
}

.asking-modal-btn {
    min-height: 40px;
    min-width: 102px;
    border: 1px solid transparent;
    border-radius: var(--radius-10px);
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease,
        box-shadow 140ms ease;
}

.asking-modal-btn--primary {
    border-color: var(--color-2e8a6e);
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
    box-shadow: 0 8px 16px -10px var(--color-rgb-46-138-110-70pct);
}

.asking-modal-btn--primary:hover {
    border-color: var(--color-256f59);
    background: var(--color-256f59);
}

.asking-modal-btn--ghost {
    border-color: var(--color-d0e3dc);
    background: var(--color-f4faf7);
    color: var(--color-2f5650);
}

.asking-modal-btn--ghost:hover {
    border-color: var(--color-bdd8cf);
    background: var(--color-edf7f2);
    color: var(--color-23463f);
}

@media (max-width: 767px) {
    .asking-modal-shell {
        width: min(100%, 100% - 4.8px);
        padding: 20px 14px 14px;
    }

    .asking-modal-copy h2 {
        font-size: 22px;
    }

    .asking-modal-actions {
        justify-content: stretch;
    }

    .asking-modal-btn {
        flex: 1 1 0;
    }
}

.guest-navbar--logged {
    position: sticky;
    top: 0;
    z-index: 70;
    background: var(--color-rgb-255-255-255-96pct);
    border-bottom: 1px solid var(--color-e5e7eb);
    backdrop-filter: blur(4px);
    display: flex;
}

.guest-navbar__inner--logged {
    min-height: 86.4px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 19.2px;
}

.guest-navbar__inner--logged .guest-navbar__links {
    justify-self: center;
    gap: var(--space-7);
}

.guest-navbar__inner--logged .guest-navbar__link {
    font-size: var(--font-size-lg);
    font-weight: 400;
}

.guest-navbar__inner--logged .guest-navbar__link.active {
    font-weight: 700;
}

.logged-navbar__user-tools {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}


.logged-navbar__verify {
    border-radius: var(--radius-999px);
    border: 1px solid var(--color-fff085);
    background: var(--color-fef9c2);
    color: var(--color-231f20);
    font-size: var(--font-size-md);
    font-weight: 500;
    padding: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    cursor: pointer;
}

.logged-navbar__verify .arrow_icon {
    background-color: var(--color-231f20);
    color: white;
}

.arrow_icon {
    background-color: var(--color-ffffff);
    display: flex;
    width: 24px;
    height: 24px;

    border-radius: var(--radius-50pct);
}

.arrow_icon img {
    margin: auto;
    object-fit: contain;
}

.logged-navbar__verify-icon {
    width: 24.96px;
    height: 24.96px;
    border-radius: var(--radius-50pct);
    background: var(--color-ffffff);
    border: 1px solid var(--color-ddcd89);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    line-height: 1;
}

.logged-navbar__icon-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-999px);
    background: transparent;
    color: var(--color-1f2937);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logged-navbar__icon-btn svg {
    width: 23.68px;
    height: 23.68px;
}

.logged-navbar__coins {
    min-width: 48px;
    min-height: 48px;
    border-radius: var(--radius-999px);
    color: var(--color-364153);

    border: 1px solid var(--color-e5e7eb);
    background: var(--color-f9fafb);

    font-size: var(--font-size-xl);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
}

.logged-navbar__coins span {
    font-size: var(--font-size-md);
}

.logged-navbar__coins img {
    width: 16px;
    height: 16px;
}

.logged-navbar__profile-wrap {
    position: relative;
}

.logged-navbar__profile {
    border: 1px solid transparent;
    border-radius: var(--radius-14px);
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-111827);
    padding: var(--space-1) 6px;
    cursor: pointer;
    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

.logged-navbar__profile:hover {
    background: var(--color-f8f8f9);
    border-color: var(--color-e2e5e8);
}

.logged-navbar__profile:focus-visible {
    outline: 2px solid var(--color-rgb-46-138-110-30pct);
    outline-offset: 2px;
}

.logged-navbar__profile-arrow {
    width: 17.28px;
    height: 17.28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logged-navbar__profile-arrow svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 180ms ease;
}

.logged-navbar__profile-arrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 180ms ease;
}

.logged-navbar__profile-arrow.is-open svg {
    transform: rotate(180deg);
}

.logged-navbar__profile-arrow.is-open img {
    transform: rotate(180deg);
}

.logged-navbar__profile-meta {
    display: grid;
    text-align: start;
}

.logged-navbar__profile-meta strong {
    line-height: 1.2;
    font-size: var(--font-size-lg);
    font-style: normal;
    font-weight: 400;
}

.logged-navbar__profile-meta small {
    color: var(--color-6b7280);
    font-weight: 600;
    font-size: var(--font-size-xs);
}

.logged-navbar__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-999px);
    overflow: hidden;
    border: 2px solid var(--color-ffffff);
    box-shadow: 0 0 0 1px var(--color-d1d5db);
}

.logged-navbar__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logged-profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: min(238px, calc(100vw - 32px));
    border-radius: var(--radius-12px);
    border: 1px solid var(--color-cbcbcb);
    background: var(--color-ffffff);
    box-shadow:
        0 10px 24px -12px var(--color-rgb-0-0-0-55pct),
        0 2px 6px var(--color-rgb-0-0-0-12pct);
    padding: 8px 0;
    z-index: 120;
}

.logged-profile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.logged-profile-menu__item--divider {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--color-d4d4d4);
}

.logged-profile-menu__link {
    min-height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    text-decoration: none;
    color: var(--color-252525);
    font-size: 16px;
    font-weight: 400;
    transition: background-color 140ms ease, color 140ms ease;
}

.logged-profile-menu__link:hover {
    /* color: var(--color-rgb-255-255-255-58pct); */
}

.logged-profile-menu__link:focus-visible {
    outline: 2px solid var(--color-rgb-46-138-110-30pct);
    outline-offset: -2px;
}

.logged-profile-menu__link.is-danger {
    color: var(--color-f13838);
}

.logged-profile-menu__icon {
    width: 20px;
    height: 20px;
    color: var(--color-6c7279);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logged-profile-menu__link.is-danger .logged-profile-menu__icon {
    color: var(--color-8d939a);
}

.logged-profile-menu__icon svg {
    width: 100%;
    height: 100%;
}

.logged-navbar__mobile-leading,
.logged-navbar__mobile-toggle,
.logged-mobile-menu-backdrop,
.logged-mobile-nav-menu {
    display: none;
}

.logged-navbar__mobile-leading {
    align-items: center;
    gap: 8px;
}

.logged-navbar__mobile-avatar-btn {
    border: none;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logged-navbar__mobile-avatar-btn:focus-visible {
    outline: 2px solid var(--color-rgb-46-138-110-30pct);
    outline-offset: 2px;
    border-radius: var(--radius-999px);
}

.logged-navbar__icon-btn--mobile {
    width: 32px;
    height: 32px;
}

.logged-navbar__icon-btn--mobile svg {
    width: 21.6px;
    height: 21.6px;
}

.logged-navbar__mobile-toggle {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-8px);
    background: transparent;
    color: var(--color-3b3b3b);
    align-items: center;
    justify-content: center;
}

.logged-navbar__mobile-toggle svg {
    width: 24px;
    height: 24px;
}

.logged-mobile-menu-backdrop {
    border: 0;
    padding: 0;
    background: var(--color-rgb-2-6-23-38pct);
    position: fixed;
    inset: 0;
    z-index: 95;
    height: 100vh;
}

.logged-mobile-nav-menu {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: 70vw;
    max-width: 70vw;
    height: 100vh;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
    border-radius: var(--radius-0);
    border: 0;
    background: var(--color-ffffff);
    box-shadow: 10px 0 24px -18px var(--color-rgb-0-0-0-55pct);
    z-index: 110;
    padding: 12.8px 0;
    direction: rtl;
    display: flex;
    flex-direction: column;
}

.logged-mobile-nav-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.logged-mobile-nav-menu__main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.logged-mobile-nav-menu__footer {
    margin-top: auto;
    flex-shrink: 0;
    border-top: 1px solid var(--color-e5e7eb);
    background: var(--color-ffffff);
    margin-bottom: 44px;
}

.logged-mobile-nav-menu__close {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--color-111827);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin: 0 12px 3.2px;
    border-radius: var(--radius-8px);
    position: absolute;
}

.logged-mobile-nav-menu__close svg {
    width: 20px;
    height: 20px;
}

.logged-mobile-nav-menu__logo {
    display: flex;
    justify-content: center;
    padding: 4px 14.4px 12.8px;
    margin-bottom: 5.6px;
    border-bottom: 1px solid var(--color-e5e7eb);
}

.logged-mobile-nav-menu__logo img {
    width: 112px;
    height: auto;
}

.logged-mobile-nav-menu__item--profile {
    padding-top: 4.8px;
}

.logged-mobile-nav-menu__link {
    min-height: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    color: var(--color-252525);
    font-size: 20px;
    font-weight: 400;
    border: 0;
    background: transparent;
    text-align: start;
    font-family: inherit;
    cursor: pointer;
    transition:
        background-color 140ms ease,
        color 140ms ease;
}

.logged-mobile-nav-menu__link.active,
.logged-mobile-nav-menu__link:hover {
    color: var(--color-2e8a6e);
}

.logged-mobile-nav-menu__link:focus-visible {
    outline: 2px solid var(--color-rgb-46-138-110-30pct);
    outline-offset: -2px;
}

.logged-mobile-nav-menu__icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-6c7279);
    flex-shrink: 0;
}

.logged-mobile-nav-menu__icon svg {
    width: 100%;
    height: 100%;
}

.logged-mobile-nav-menu__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.explore-page {
    background: var(--color-ffffff);
}

.explore-main-section {
    padding: 16px 0 62.4px;
}

.explore-breadcrumbs {
    display: inline-flex;
    align-items: center;
    gap: 5.6px;
    color: var(--color-6b7280);
    font-size: 13.44px;
    font-weight: 600;
}

.explore-breadcrumbs a {
    color: var(--color-111827);
    text-decoration: none;
}

.explore-toolbar {
    margin-top: 11.52px;
    background: var(--color-ffffff);
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-14-72px);
    padding: 11.52px;
    display: flex;
    align-items: center;
    gap: 8.8px;
}

.explore-toolbar__search {
    flex: 1;
    min-width: 240px;
    min-height: 37.6px;
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-8-64px);
    background: var(--color-f8fafc);
    padding: 4.48px 9.6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6.4px;
}

.explore-toolbar__search input {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--color-111827);
    font-size: 13.44px;
}

.explore-toolbar__search input:focus {
    outline: none;
}

.explore-toolbar__search span {
    color: var(--color-9ca3af);
    font-size: 16px;
}

.explore-toolbar__chips {
    display: inline-flex;
    align-items: center;
    gap: 5.6px;
    padding: 3.2px;
    border-radius: var(--radius-8-32px);
    background: var(--color-f4f5f6);
}

.explore-toolbar__chips button {
    min-height: 32px;
    border: 1px solid transparent;
    border-radius: var(--radius-7-2px);
    background: transparent;
    color: var(--color-4b5563);
    font-size: 12.16px;
    font-weight: 700;
    padding: 3.2px 10.4px;
}

.explore-toolbar__chips .is-active {
    background: var(--color-2e8a6e);
    color: var(--color-ecfdf5);
}

.explore-toolbar__filter-btn {
    width: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.explore-toolbar__filter-btn svg {
    width: 16px;
    height: 16px;
}

.explore-toolbar__map-btn,
.explore-toolbar__search-btn {
    min-height: 37.6px;
    border-radius: var(--radius-8-32px);
    border: 1px solid var(--color-d1d5db);
    background: var(--color-ffffff);
    color: var(--color-374151);
    font-size: 12.48px;
    font-weight: 700;
    padding: 4.48px 12px;
    white-space: nowrap;
}

.explore-toolbar__search-btn {
    border-color: var(--color-2e8a6e);
    background: var(--color-2e8a6e);
    color: var(--color-ecfdf5);
    min-width: 120px;
}

.explore-mobile-filter-trigger {
    display: none;
}

.explore-mobile-filter-trigger svg {
    width: 16px;
    height: 16px;
}

.explore-filters-sheet {
    display: grid;
    gap: var(--space-3);
}

.explore-layout {
    margin-top: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 14.4px;
    align-items: start;
    grid-template-rows: auto;
}

.explore-layout.is-reversed {
    grid-template-columns: 290px minmax(0, 1fr);
}

.explore-layout .explore-listing-col,
.explore-layout .explore-filters-col {
    grid-row: 1;
}

.explore-layout.is-reversed .explore-filters-col {
    grid-column: 1;
}

.explore-layout.is-reversed .explore-listing-col {
    grid-column: 2;
    min-width: 0;
}

.explore-listing-col {
    display: grid;
    gap: var(--space-3);
}

.explore-listing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.explore-listing-head h1 {
    margin: 0;
    color: var(--color-111827);
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.explore-listing-head p {
    margin: 0;
    color: var(--color-6b7280);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.explore-page .explore-cards-grid {
    --explore-card-width: 358px;
    --explore-card-gap: 24px;
    gap: var(--explore-card-gap);
    grid-template-columns: repeat(var(--explore-grid-columns, 3), var(--explore-card-width));
    width: min(100%, var(--explore-grid-width, 1122px));
    max-width: 1122px;
    justify-content: start;
}

.explore-page .explore-cards-grid>* {
    width: var(--explore-card-width);
    max-width: 100%;
    min-width: 0;
}

.explore-page .explore-cards-grid:empty {
    width: 100%;
    max-width: 100%;
}

.explore-card .property-offer-card__media {
    height: 186px;
}

.explore-card .property-offer-card__media img {
    transform: scale(1.06);
}

.explore-card .property-offer-card__body {
    gap: 4.48px;
}

.explore-card .property-offer-card__title {
    font-size: 16px;
}

.explore-card-price-box {
    margin-top: 3.2px;
    border: 1px solid var(--color-f2de5f);
    border-radius: var(--radius-7-2px);
    background: var(--color-faf9ef);
    padding: 5.28px 7.36px;
    display: grid;
    gap: 0.64px;
}

.explore-card .property-offer-card__price-value {
    font-size: 17.6px;
}

.explore-card .property-offer-card__total {
    font-size: 11.2px;
}

.explore-card .property-offer-card__progress {

    margin-top: 3.2px;
    background: var(--color-ddf5e9);
}

.explore-card .property-offer-card__terms {
    font-size: 11.52px;
    gap: 5.44px;
}

.explore-card .property-offer-card__cta {
    min-height: 29.12px;
}

.explore-load-more {
    margin: 3.2px auto 0;
    min-height: 34.4px;
    border: 1px solid var(--color-d1d5db);
    border-radius: var(--radius-7-68px);
    background: var(--color-ffffff);
    color: var(--color-374151);
    font-size: 12.48px;
    font-weight: 700;
    padding: 3.2px 16px;
}

.explore-filters-col {
    background: var(--color-ffffff);
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-15-2px);
    padding: 13.6px;
    display: grid;
    gap: 11.52px;
    position: sticky;
    top: 96px;
}

.explore-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.explore-filters-head h2 {
    margin: 0;
    color: var(--color-111827);
    font-size: 15.68px;
    font-weight: 700;
}

.explore-filters-head button {
    border: none;
    background: transparent;
    color: var(--color-6b7280);
    font-size: 11.84px;
    font-weight: 700;
}

.explore-filter-group {
    display: grid;
    gap: 5.12px;
}

.explore-filter-group:last-of-type {
    border-bottom: none;
}

.explore-filter-group h3 {
    margin: 0;
    color: var(--color-2b2f34);
    font-size: 13.76px;
    font-weight: 700;
}

.explore-filter-group label {
    color: var(--color-4b5563);
    font-size: 11.84px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5.12px;
}

.explore-filter-group input[type="checkbox"] {
    width: 12.16px;
    height: 12.16px;
    accent-color: var(--color-2e8a6e);
}

.explore-filter-group select {
    min-height: 32px;
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-7-2px);
    background: var(--color-ffffff);
    color: var(--color-374151);
    font-size: 12.16px;
    font-weight: 600;
    padding: 3.2px 8.96px;
}

.explore-budget-range {
    --explore-budget-progress: 80%;
    width: 100%;
    height: 10.4px;
    border-radius: var(--radius-999px);
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(to left,
            var(--color-2e8a6e) var(--explore-budget-progress),
            var(--color-e5e7eb) var(--explore-budget-progress));
    cursor: pointer;
}

.explore-budget-range::-webkit-slider-runnable-track {
    height: 10.4px;
    border-radius: var(--radius-999px);
    background: transparent;
}

.explore-budget-range::-moz-range-track {
    height: 10.4px;
    border-radius: var(--radius-999px);
    background: transparent;
}

.explore-budget-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 13.44px;
    height: 13.44px;
    margin-top: -1px;
    border-radius: var(--radius-50pct);
    border: 1px solid var(--color-2e8a6e);
    background: var(--color-ffffff);
}

.explore-budget-range::-moz-range-thumb {
    width: 13.44px;
    height: 13.44px;
    border-radius: var(--radius-50pct);
    border: 1px solid var(--color-2e8a6e);
    background: var(--color-ffffff);
}

.explore-budget-meta {
    margin-top: 4.48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-5d6470);
    font-size: 12.48px;
}

.explore-budget-meta span:last-child {
    color: var(--color-2e8a6e);
    font-weight: 700;
}

.explore-filters-panel__title {
    margin: 0;
    color: var(--color-171717);
    font-size: 18.88px;
    font-weight: 700;
}

.explore-switch-row {
    justify-content: space-between;
    padding-inline-end: 3.2px;
}

.explore-switch-row input[type="checkbox"] {
    width: 30.4px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-d1d5db);
    border-radius: var(--radius-999px);
    position: relative;
}

.explore-switch-row input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 1.6px;
    right: 1.92px;
    width: 12.8px;
    height: 12.8px;
    border-radius: var(--radius-999px);
    background: var(--color-ffffff);
    transition: transform 160ms ease;
}

.explore-switch-row input[type="checkbox"]:checked {
    background: var(--color-2e8a6e);
}

.explore-switch-row input[type="checkbox"]:checked::before {
    transform: translateX(-13.76px);
}

.explore-apply-btn {
    min-height: 35.2px;
    border: 1px solid var(--color-2e8a6e);
    border-radius: var(--radius-7-68px);
    background: var(--color-2e8a6e);
    color: var(--color-ecfdf5);
    font-size: 12.8px;
    font-weight: 700;
}

@media (max-width: 1400px) {

    .logged-navbar__profile-meta strong {
        font-size: 20.48px;
    }

    .logged-navbar__profile-meta small {
        font-size: 15.2px;
    }
}

@media (max-width: 1200px) {
    .explore-toolbar {
        flex-wrap: wrap;
    }

    .explore-layout {
        grid-template-columns: 1fr;
    }

    .explore-filters-col {
        position: static;
    }

    .explore-page .explore-cards-grid {
        grid-template-columns: repeat(var(--explore-grid-columns-tablet, 2), var(--explore-card-width));
        width: min(100%, var(--explore-grid-width-tablet, 740px));
        max-width: 740px;
    }
}

@media (max-width: 900px) {
    .explore-page .explore-cards-grid {
        grid-template-columns: repeat(var(--explore-grid-columns-tablet, 2), var(--explore-card-width));
        width: min(100%, var(--explore-grid-width-tablet, 740px));
        max-width: 740px;
    }
}

@media (max-width: 620px) {
    .logged-navbar__user-tools {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .logged-navbar__verify {
        width: 100%;
        justify-content: center;
    }

    .logged-profile-menu {
        width: min(238px, calc(100vw - 16px));
    }

    .logged-profile-menu__link {
        font-size: 18px;
    }

    .explore-toolbar__search,
    .explore-toolbar__chips,
    .explore-toolbar__map-btn,
    .explore-toolbar__search-btn {
        width: 100%;
    }

    .explore-page .explore-cards-grid {
        --explore-card-width: 360.97px;
        grid-template-columns: minmax(0, 1fr);
        width: min(100%, var(--explore-card-width));
        max-width: var(--explore-card-width);
    }

    .explore-page .explore-cards-grid>* {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .explore-main-section {
        padding: 12.8px 0 38.4px;
    }

    .explore-breadcrumbs {
        display: none;
    }

    .explore-toolbar {
        margin-top: 0;
        padding: 9.6px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .explore-toolbar__search {
        width: 100%;
        min-width: 0;
        min-height: 40px;
    }

    .explore-toolbar__search input {
        font-size: 14.72px;
    }

    .explore-toolbar__chips {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        white-space: nowrap;
        padding: 3.52px;
        scrollbar-width: none;
    }

    .explore-toolbar__chips::-webkit-scrollbar {
        display: none;
    }

    .explore-toolbar__chips button {
        flex-shrink: 0;
        min-height: 33.6px;
        padding-inline: 12px;
    }

    .explore-toolbar__filter-btn {
        width: 35.2px;
        min-height: 33.6px;
        border: 1px solid var(--color-d1d5db);
        border-radius: var(--radius-8-32px);
        background: var(--color-ffffff);
        flex-shrink: 0;
    }

    .explore-toolbar__map-btn {
        width: 100%;
        min-height: 40px;
    }

    .explore-mobile-filter-trigger {
        margin-top: var(--space-2);
        width: 100%;
        min-height: 42.4px;
        border: 1px solid var(--color-2e8a6e);
        border-radius: var(--radius-12px);
        background: var(--color-ffffff);
        color: var(--color-2e8a6e);
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-sm);
        font-weight: 700;
    }

    .explore-layout {
        margin-top: var(--space-3);
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .explore-filters-col--desktop {
        display: none;
    }

    .explore-filters-sheet .explore-filters-panel__title {
        font-size: var(--font-size-md);
    }

    .explore-filters-sheet .explore-filter-group {
        gap: var(--space-2);
    }

    .explore-filters-sheet .explore-filter-group h3 {
        font-size: var(--font-size-md);
    }

    .explore-filters-sheet .explore-filter-group label {
        font-size: var(--font-size-sm);
        gap: var(--space-2);
    }

    .explore-filters-sheet .explore-filter-group input[type="checkbox"] {
        width: 15.2px;
        height: 15.2px;
    }

    .explore-filters-sheet .explore-budget-range {
        height: 12px;
    }

    .explore-filters-sheet .explore-budget-meta {
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 992px) {
    .guest-navbar--guest {
        background: var(--color-ffffff);
        border-bottom: 1px solid var(--color-e6e7ea);
        box-shadow:
            0 0 6px var(--color-rgb-0-0-0-2pct),
            0 2px 4px var(--color-rgb-0-0-0-8pct);
    }

    .guest-navbar__inner--guest {
        display: flex;
        align-items: center;
        justify-content: space-between;
        direction: ltr;
        min-height: 61px;
        padding-block: 0;
        gap: 8px;
        margin: 0;
    }

    .guest-navbar__inner--guest .guest-navbar__links,
    .guest-navbar__inner--guest .guest-navbar__actions {
        display: none;
    }

    .guest-navbar__inner--guest .guest-navbar__brand {
        margin-inline: auto;
    }

    .guest-navbar__inner--guest .guest-navbar__brand img {
        width: 99px;
        height: auto;
    }

    .guest-navbar__mobile-signup,
    .guest-navbar__mobile-toggle {
        display: inline-flex;
        flex-shrink: 0;
    }
}

@media (max-width: 1200px) {
    .guest-navbar--logged {
        background: var(--color-ffffff);
        border-bottom: 1px solid var(--color-e6e7ea);
        box-shadow:
            0 0 6px var(--color-rgb-0-0-0-2pct),
            0 2px 4px var(--color-rgb-0-0-0-8pct);


        justify-content: center;
    }

    .guest-navbar__inner--logged,
    .details-page--pixel .guest-navbar--logged .guest-navbar__inner--logged {
        display: flex;
        align-items: center;
        justify-content: space-between;
        direction: ltr;
        min-height: 61px;
        padding-block: 0;
        gap: 8px;
        margin: 0;
    }

    .guest-navbar__inner--logged .guest-navbar__links,
    .guest-navbar__inner--logged .logged-navbar__user-tools {
        display: none;
    }

    .guest-navbar__inner--logged .guest-navbar__brand {
        margin-inline: auto;
        pointer-events: auto;
    }

    .guest-navbar__inner--logged .guest-navbar__brand img {
        width: 99px;
        height: auto;
    }

    .logged-navbar__mobile-leading {
        display: inline-flex;
    }

    .logged-navbar__mobile-leading .logged-navbar__avatar {
        width: 32px;
        height: 32px;
        border: none;
        box-shadow: none;
    }

    .logged-navbar__mobile-toggle {
        display: inline-flex;
        cursor: pointer;
        flex-shrink: 0;
    }

    .logged-mobile-menu-backdrop {
        display: block;
    }

    .logged-mobile-nav-menu {
        display: flex;
    }

    .logged-mobile-nav-menu__link {
        font-size: 18px;
    }
}

.test-dev {
    min-height: 300px;
}

.test-dev.searching {
    background-color: var(--color-1f2937);
}

/* KYC Page */
.kyc-page {
    background: white;
    min-height: 100vh;
    padding-bottom: 99.2px;
}

.kyc-main-section {
    padding: 35.2px 0 32px;
}

.kyc-payment-screen,
.kyc-intro-screen,
.kyc-identity-screen {
    display: grid;
    place-items: center;
}

.kyc-screen-head {
    width: min(622px, 100%);
    text-align: start;
    margin-bottom: 11.2px;
}

.kyc-screen-head h1 {
    margin: 0;
    color: var(--color-2d2f34);
    font-weight: 700;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

.kyc-screen-head__icon {
    width: 20.8px;
    height: 20.8px;
    color: var(--color-303239);
    display: inline-flex;
}

.kyc-screen-head__icon svg {
    width: 100%;
    height: 100%;
}

.kyc-screen-head p {
    margin: 4.48px 0 0;
    color: var(--color-787f89);
    font-size: 16px;
    font-weight: 400;
}

.kyc-payment-card {
    width: min(622px, 100%);
    display: grid;
    gap: 8.96px;
}

.kyc-payment-summary {
    overflow: hidden;

    border-radius: var(--radius-16px);
    border: 1.111px solid var(--color-e5e7eb);
    background: var(--color-f5f5f5);
}

.kyc-payment-summary__row {
    min-height: 51.2px;
    padding: 6.72px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-2f3136);

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.kyc-payment-summary__row+.kyc-payment-summary__row {
    border-top: 1px solid var(--color-d3d4d8);
}

.kyc-payment-summary__row strong {
    color: var(--color-2f3136);

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.kyc-payment-summary__row strong.is-accent {
    color: var(--color-2e8a6e);
    font-size: 20px;
    font-weight: 600;
}

.kyc-field {
    display: grid;
    gap: 3.2px;
}

.kyc-field>span:first-child,
.kyc-fieldset legend {
    color: var(--color-373a41);
    font-size: 15.2px;
    font-weight: 700;
}

.kyc-field>span:first-child b,
.kyc-fieldset legend span {
    color: var(--color-dc2626);
}

.kyc-field__control {
    min-height: 43.52px;
    border: 1px solid var(--color-d8dbe1);
    border-radius: var(--radius-14-72px);
    background: var(--color-f9fafb);
    display: flex;
    align-items: center;
    gap: 7.36px;
    padding: 0 12px;
    flex-grow: 1;
}

.kyc-field__control input {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--color-1f2937);
    font-size: 18.4px;
    font-weight: 500;
}

.kyc-field__control input::placeholder {
    color: var(--color-8a909a);
}

.kyc-field__control input:focus {
    outline: none;
}

.kyc-field__control:focus-within {
    border-color: var(--color-8ec2b1);
    box-shadow: 0 0 0 2px var(--color-rgb-46-138-110-18pct);
}

.kyc-field__control--with-icon {
    gap: 5.6px;
}

.kyc-field__prefix {
    width: 19.2px;
    height: 19.2px;
    color: var(--color-4c5159);
    flex-shrink: 0;
}

.kyc-field__prefix svg {
    width: 100%;
    height: 100%;
}

.kyc-fieldset {
    margin: 0;
    padding: 0;
    border: none;
    display: grid;
    gap: 6.4px;
}

.kyc-method-option {
    min-height: 43.52px;
    border: 1px solid var(--color-d8dbe1);
    border-radius: var(--radius-14-72px);
    padding: 0 12.16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.kyc-method-option__label {
    display: inline-flex;
    align-items: center;
    gap: 5.44px;
    color: var(--color-30343b);
    font-size: 17.6px;
}

.kyc-method-option__icon {
    width: 17.28px;
    height: 17.28px;
    color: var(--color-2f3339);
    display: inline-flex;
}

.kyc-method-option__icon svg {
    width: 100%;
    height: 100%;
}

.kyc-method-option input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-2e8a6e);
}

.kyc-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9.28px;
}

.kyc-pay-submit {
    margin-top: 5.12px;
    min-height: 48px;
    border: none;
    border-radius: var(--radius-14-4px);
    background: var(--color-2e8a6e);
    color: var(--color-08221a);
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8.8px;
}

.kyc-pay-submit p {
    margin: 0;
    margin-right: auto;
}

.kyc-pay-submit__icon {
    width: 21.6px;
    height: 21.6px;
    margin-right: auto;
    border-radius: var(--radius-999px);
    background: var(--color-ffffff);
    color: var(--color-231f20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kyc-pay-submit__icon svg {
    width: 15.2px;
    height: 15.2px;
}

.kyc-pay-secure {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5.76px;
    color: var(--color-23262b);
    font-size: 21.6px;
    font-weight: 600;
}

.kyc-pay-secure__icon {
    width: 18.88px;
    height: 18.88px;
    display: inline-flex;
    color: var(--color-2e3036);
}

.kyc-pay-secure__icon svg {
    width: 100%;
    height: 100%;
}

.kyc-intro-card {
    width: min(620px, 100%);
    border: 1px solid var(--color-ccd0d6);
    padding: 21.6px 20.8px 18.4px;

    border-radius: var(--radius-16px);
    border: 1px solid var(--color-cccccc);
    background: var(--color-ffffff);
}

.kyc-intro-logo {
    width: 118.4px;
    display: block;
    margin: 0 auto;
}

.kyc-intro-card h1 {
    margin: 7.2px 0 0;
    text-align: center;
    color: var(--color-252a32);
    font-size: 32.8px;
    font-weight: 700;
    line-height: 1.3;
}

.kyc-intro-card>p {
    margin: 4.48px auto 0;
    text-align: center;
    color: var(--color-7f8690);
    font-size: 15.2px;
    line-height: 1.5;
    max-width: 96%;
}

.kyc-intro-time {
    margin-top: 14.72px;
    border: 1px solid var(--color-b3cdf8);
    border-radius: var(--radius-11-52px);
    background: var(--color-d9e4f4);
    padding: 8.32px 10.56px;
    text-align: center;
}

.kyc-intro-time .icon {
    margin-left: 10px;
    width: 40px;
    height: 40px;
}

.kyc-intro-time .icon img {
    width: 40px;
    height: 40px;
    display: inline-flex;
    opacity: 0.5;
}

.kyc-intro-time h2 {
    margin: 0;
    color: var(--color-193cb8);
    font-size: 15.2px;
    font-weight: 700;
}

.kyc-intro-time p {
    margin: 2.56px 0 0;
    color: var(--color-3f67bd);
    font-size: 12.8px;
    font-weight: 600;
}

.kyc-intro-features {
    margin-top: 13.12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9.28px;
}

.kyc-intro-feature {
    min-height: 117.6px;
    padding: 8px 10.56px;
}

.kyc-intro-feature__icon {
    width: 29.6px;
    height: 29.6px;
    border-radius: var(--radius-8-64px);
    background: var(--color-dce9e4);
    color: var(--color-2e8a6e);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kyc-intro-feature__icon svg,
.kyc-intro-feature__icon img {
    width: 26px;
    height: 26px;
}

.kyc-intro-feature h3 {
    margin: 6.08px 0 0;
    color: var(--color-23272e);
    font-size: 28px;
    font-weight: 700;
}

.kyc-intro-feature p {
    margin: 3.2px 0 0;
    color: var(--color-848b95);
    font-size: 12.16px;
    line-height: 1.4;
}

.kyc-intro-required {
    margin-top: 11.2px;
    border-radius: var(--radius-10-88px);
    background: var(--color-f9fafb);
    padding: 9.92px 12.48px;
}

.kyc-intro-required h2 {
    margin: 0;
    color: var(--color-2d3138);
    font-size: 31.2px;
    font-weight: 700;
}

.kyc-intro-required ul {
    margin: 4.48px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1.92px;
    color: var(--color-5d6570);
    font-size: 12.8px;
}

.kyc-intro-required li {
    display: inline-flex;
    align-items: center;
    gap: 3.84px;
}

.kyc-intro-required li::before {
    color: #2e8b69;
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-size: 1rem;
    font-weight: 900;
    margin-top: .2rem;
}

.kyc-intro-notice {
    margin-top: 11.2px;
    border: 1px solid var(--color-ebd56f);
    border-radius: var(--radius-10-88px);
    background: var(--color-f4f0da);
    padding: 8.96px 12.48px;
}

.kyc-intro-notice h2 {
    margin: 0;
    color: var(--color-7f6915);
    font-size: 12.8px;
    font-weight: 700;
}

.kyc-intro-notice h3 {
    margin: 3.2px 0 0;
    color: var(--color-333944);
    font-size: 16px;
    font-weight: 700;
}

.kyc-intro-notice p {
    margin: 3.52px 0 0;
    color: var(--color-6d7480);
    font-size: 11.52px;
}

.kyc-intro-start {
    margin-top: 11.52px;
    width: 100%;
    min-height: 35.2px;
    border: none;
    border-radius: var(--radius-9-92px);
    background: var(--color-2e8a6e);
    color: var(--color-08231a);
    font-size: 16px;
    font-weight: 700;
}

.kyc-stepper {
    width: 100%;
    min-height: 94.4px;
    border-bottom: 1px solid var(--color-d8dde2);
    display: grid;
    grid-template-columns: repeat(var(--kyc-stepper-columns, 7),
            minmax(0, 1fr));
    gap: 8.8px;
    align-items: center;
    padding: 0 20px !important;


    display: flex !important;
    justify-content: space-around;
}

#dynamicKycStepper {
    justify-content: space-evenly;
}

.kyc-stepper__item {
    display: grid;
    justify-items: center;
    gap: 2.88px;
    color: var(--color-8d96a2);
}

.kyc-stepper__number {
    width: 37.6px;
    height: 37.6px;
    border-radius: var(--radius-999px);
    background: var(--color-e2e6ec);
    color: var(--color-87909c);
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kyc-stepper__copy h3 {
    margin: 0;
    text-align: center;
    font-size: 14.08px;
    font-weight: 700;
}

.kyc-stepper__copy p {
    margin: 1.28px 0 0;
    text-align: center;
    font-size: 11.84px;
    font-weight: 600;
}

.kyc-stepper__item.is-active .kyc-stepper__number {
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.kyc-stepper__item.is-active .kyc-stepper__copy h3,
.kyc-stepper__item.is-active .kyc-stepper__copy p {
    color: var(--color-3b4451);
}

.kyc-identity-card {
    margin-top: 150.4px;
    width: min(720px, 100%);
    border: 1px solid var(--color-cbcfd5);
    border-radius: var(--radius-16px);
    background: var(--color-ffffff);
    padding: 19.2px 23.2px 22.4px;
}

.kyc-identity-card h1 {
    margin: 0;
    color: var(--color-292d35);
    font-size: 31.2px;
    font-weight: 700;
}

.kyc-identity-card>p {
    margin: 3.2px 0 0;
    color: var(--color-7b828c);
    font-size: 16.8px;
}

.kyc-identity-field {
    margin-top: 13.12px;
    display: grid;
    gap: 3.84px;
}

.kyc-identity-field label {
    color: var(--color-30343b);
    font-size: 20px;
    font-weight: 700;
}

.kyc-identity-field label b,
.kyc-identity-radio-group legend b {
    color: var(--color-dc2626);
}

.kyc-identity-field input {
    min-height: 41.6px;
    border: 1px solid var(--color-d7dbe1);
    border-radius: var(--radius-14-4px);
    background: var(--color-f9fafb);
    color: var(--color-1f2937);
    font-size: 16.32px;
    padding: 0 12px;
}

.kyc-identity-field input::placeholder {
    color: var(--color-8a9099);
}

.kyc-identity-field input:focus {
    outline: none;
    border-color: var(--color-8fc3b2);
    box-shadow: 0 0 0 2px var(--color-rgb-46-138-110-16pct);
}

.kyc-identity-field small {
    color: var(--color-7b818d);
    font-size: 14.72px;
}

.kyc-identity-radio-group {
    margin: 11.84px 0 0;
    border: none;
    padding: 0;
    display: grid;
    gap: 3.84px;
}

.kyc-identity-radio-group legend {
    color: var(--color-30343b);
    font-size: 20px;
    font-weight: 700;
}

.kyc-identity-radio-group__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7.68px;
}

.kyc-identity-radio-group label {
    min-height: 40px;
    border-radius: var(--radius-14-4px);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6.72px;
    color: var(--color-3b4048);
    font-size: 17.28px;
    font-weight: 600;
}

.kyc-identity-radio-group input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-2e8a6e);
}

.kyc-identity-error {
    color: var(--color-b91c1c);
    font-size: 13.12px;
    font-weight: 600;
}

.kyc-action-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    background: var(--color-rgb-255-255-255-96pct);
    border-top: 1px solid var(--color-d6dae0);
    backdrop-filter: blur(4px);
}

.kyc-action-bar__inner {
    width: min(1520px, 100% - 32px);
    margin-inline: auto;
    min-height: 71.2px;
    /* display: grid; */
    /* grid-template-columns: 1fr auto 1fr; */
    /* align-items: center; */
    gap: 12px;

    display: flex;
    justify-content: space-between;
}

.kyc-action-bar__start {
    display: inline-flex;
    align-items: center;
    gap: 9.28px;
    justify-self: start;
}

.kyc-action-bar__primary {
    min-height: 34.4px;
    border-radius: var(--radius-7-68px);
    padding: 4.8px 16px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6.08px;

    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

.kyc-action-bar__primary--filled {
    background: var(--color-2e8a6e);
    border-color: var(--color-2e8a6e);
    color: var(--color-082119);
}

.kyc-action-bar__primary--ghost {
    background: var(--color-111215);
    border-color: var(--color-111215);
    color: var(--color-f9fafb);
}

.kyc-action-bar__arrow {
    width: 15.2px;
    height: 15.2px;
    display: inline-flex;
}

.kyc-action-bar__arrow svg {
    width: 100%;
    height: 100%;
}

.kyc-action-bar__draft {
    border: none;
    background: transparent;
    color: var(--color-6d7480);
    font-size: 20px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4.8px;
}

.kyc-action-bar__draft-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
}

.kyc-action-bar__draft-icon svg {
    width: 100%;
    height: 100%;
}

.kyc-action-bar__progress {
    margin: 0;
    color: var(--color-8a9099);
    font-size: 18.88px;
    font-weight: 700;
}

.kyc-action-bar__exit {
    min-height: 33.6px;
    min-width: 89.6px;
    justify-self: end;
    border: 1px solid var(--color-dadde2);
    border-radius: var(--radius-8px);
    background: var(--color-f5f5f5);
    color: var(--color-2a2f36);
    font-size: 18.56px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3.84px;
}

.kyc-action-bar__exit-icon {
    width: 15.2px;
    height: 15.2px;
    display: inline-flex;
}

.kyc-action-bar__exit-icon svg {
    width: 100%;
    height: 100%;
}

@media (max-width: 1180px) {
    .kyc-stepper {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .kyc-identity-card {
        margin-top: 19.2px;
    }
}

@media (max-width: 900px) {

    .kyc-field-grid,
    .kyc-intro-features,
    .kyc-identity-radio-group__items {
        grid-template-columns: 1fr;
    }

    .kyc-stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kyc-screen-head h1 {
        font-size: 24px;
    }

    .kyc-screen-head p {
        font-size: 16px;
    }

    .kyc-intro-card h1 {
        font-size: 28.8px;
    }

    .kyc-intro-feature h3,
    .kyc-intro-required h2,
    .kyc-intro-notice h3,
    .kyc-identity-card h1 {
        font-size: 20.8px;
    }

    .kyc-action-bar__inner {
        grid-template-columns: 1fr;
        gap: 7.2px;
        padding: 9.6px 0;
    }

    .kyc-action-bar__start,
    .kyc-action-bar__exit {
        justify-self: stretch;
    }

    .kyc-action-bar__start {
        justify-content: space-between;
    }

    .kyc-action-bar__exit {
        width: 100%;
    }

    .kyc-action-bar__progress {
        text-align: center;
    }
}

/* KYC Wizard Refresh */
.kyc-page {
    min-height: 100vh;
    padding-bottom: 88px;
}

.kyc-main-section {
    padding: 0 0 32px;
}

.kyc-payment-screen,
.kyc-intro-screen {
    width: 100%;
    display: grid;
    place-items: center;
    padding-top: 92px;
}

.kyc-screen-head {
    width: min(720px, 100%);
    margin: 0 0 12px;
    text-align: start;
}

.kyc-screen-head h1 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-2e3338);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.kyc-screen-head p {
    margin: 8px 0 0;
    color: var(--color-8b919b);
    font-size: 16px;
    line-height: 1.45;
}

.kyc-screen-head__icon,
.kyc-screen-head__icon img {
    width: 24px;
    height: 24px;
    display: inline-flex;
}

.kyc-payment-card {
    width: min(720px, 100%);
    display: grid;
    gap: 12px;
}

.kyc-payment-summary {
    border-radius: var(--radius-16px);
    border: 1px solid var(--color-dadde2);
    background: var(--color-f1f2f4);
    overflow: hidden;
}

.kyc-payment-summary__row {
    min-height: 70px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-2f343a);
    font-size: 16px;
    font-weight: 500;
}

.kyc-payment-summary__row+.kyc-payment-summary__row {
    border-top: 1px solid var(--color-d6dae0);
    font-size: 18px;
}

.kyc-payment-summary__row strong {
    color: var(--color-2f343a);
    font-weight: 500;
}

.kyc-payment-summary__row .is-accent {
    color: var(--color-2e8a6e);
}

.kyc-field {
    display: grid;
    gap: 5px;
}

.kyc-field>span:first-child,
.kyc-fieldset legend {
    color: var(--color-40444c);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.kyc-field>span:first-child b,
.kyc-fieldset legend span {
    color: var(--color-dc2626);
}

.kyc-coupon-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kyc-coupon-icon,
.kyc-coupon-icon img {
    width: 32px;
    height: 32px;
    display: inline-flex;
}

.kyc-field__control {
    min-height: 36px;
    border-radius: var(--radius-16px);
    border: 1px solid var(--color-d8dde3);
    background: var(--color-eceef1);
    padding: 0 14px;
    display: flex;
    align-items: center;
}

.kyc-field__control input {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--color-2f343a);
    font-size: 16px;
    font-weight: 500;
}

.kyc-field__control input::placeholder {
    color: var(--color-969daa);
}

.kyc-field__control input:focus {
    outline: none;
}

.kyc-field__control:focus-within,
.kyc-wizard-field input:focus,
.kyc-wizard-field select:focus {
    border-color: var(--color-8ebcae);
    box-shadow: 0 0 0 2px var(--color-rgb-46-138-110-16pct);
}

.kyc-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 8px;
}

.kyc-method-option {
    min-height: 58px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

    color: var(--color-2f343a);
    font-size: 24px;
    font-weight: 500;
    cursor: pointer;

    border-radius: var(--radius-16px);
    border: 1.111px solid var(--color-e5e7eb);
}

.kyc-method-option input {
    width: 19px;
    height: 19px;
    accent-color: var(--color-2e8a6e);
}

.kyc-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.kyc-pay-submit {
    min-height: 56px;
    border: 0;
    border-radius: var(--radius-16px);
    background: var(--color-2e8a6e);
    color: white;
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.kyc-pay-submit__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-999px);
    background: var(--color-edf2ef);
    color: var(--color-2e343b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kyc-pay-submit__icon svg {
    width: 20px;
    height: 20px;
}

.kyc-pay-secure {
    margin: 6px 0 0;
    text-align: center;
    color: var(--color-252a31);
    font-size: 16px;
    font-weight: 400;
}

.kyc-intro-card {
    width: min(860px, 100%);
    border-radius: var(--radius-16px);
    border: 1px solid var(--color-cccccc);
    background: var(--color-ffffff);
    padding: 26px 28px 24px;
}

.kyc-intro-logo {
    width: 112px;
    display: block;
    margin: 0 auto;
}

.kyc-intro-card h1 {
    margin: 10px 0 0;
    color: var(--color-2f343b);
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}

.kyc-intro-card>p {
    margin: 8px auto 0;
    text-align: center;
    color: var(--color-8a919b);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.52;
    max-width: 92%;
}

.kyc-intro-time {
    margin-top: 18px;
    border: 1px solid var(--color-bedbff);
    border-radius: var(--radius-14px);
    background: var(--color-eff6ff);
    padding: 11px 16px;
    color: var(--color-193cb8);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.kyc-intro-time h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.kyc-intro-time p {
    margin: 5px 0 0;
    font-size: 14px;
    font-weight: 400;
}

.kyc-intro-features {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.kyc-intro-feature {
    padding: 14px 16px;

    border-radius: var(--radius-16px);
    border: 1.111px solid var(--color-e5e7eb);
}

.kyc-intro-feature__icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-12px);
    background: var(--color-ddebe5);
    display: inline-flex;
}

.kyc-intro-feature h3 {
    margin: 10px 0 0;
    color: var(--color-2a2f36);
    font-size: 18px;
    font-weight: 400;
}

.kyc-intro-feature p {
    margin: 6px 0 0;
    color: var(--color-838a95);
    font-size: 14px;
    font-wight: 400;
    line-height: 1.45;
}

.kyc-intro-required {
    margin-top: 14px;
    border-radius: var(--radius-14px);
    background: var(--color-f9fafb);
    padding: 14px 16px;
}

.kyc-intro-required h2 {
    margin: 0;
    color: var(--color-364153);
    font-size: 16px;
    font-weight: 500;
}

.kyc-intro-required ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 3px;

    color: var(--color-364153);
    text-align: start;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 150% */
}

.kyc-intro-required li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}



.kyc-intro-notice {
    margin-top: 14px;
    border-radius: var(--radius-14px);
    border: 1px solid var(--color-e3d07a);
    background: var(--color-f3f0dc);
    padding: 14px 16px;
}

.kyc-intro-notice h2 {
    margin: 0;
    color: var(--color-231f20);
    font-size: 16px;
    font-weight: 400;
}

.kyc-intro-notice h3 {
    margin: 8px 0 0;

    color: var(--color-364153);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 23px;
    /* 83.333% */
}

.kyc-intro-notice p {
    margin: 8px 0 0;
    color: var(--color-364153);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.kyc-intro-start {
    margin-top: 16px;
    width: 100%;
    min-height: 56px;
    border-radius: var(--radius-16px);
    border: 0;
    background: var(--color-2e8a6e);
    color: white;
    font-size: 16px;
    font-weight: 500;
}

.kyc-wizard-screen {
    width: 100%;
}

.kyc-stepper {
    width: 100%;
    min-height: 122px;
    border-top: 1px solid var(--color-eceff2);
    border-bottom: 1px solid var(--color-d8dde3);
    background: var(--color-f9fafb);
    display: grid;
    grid-template-columns: repeat(var(--kyc-stepper-columns, 7),
            minmax(0, 1fr));
    gap: 10px;
    background: unset;
    align-items: center;
    padding: 0;
}

.kyc-stepper__item {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    color: var(--color-a3abba);
}

.kyc-stepper__number {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-999px);
    border: 1px solid var(--color-dfe4ea);
    background: var(--color-e8ebf0);
    color: var(--color-9ca4b3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    font-weight: 700;
    flex-shrink: 0;
}

.kyc-stepper__copy h3 {
    margin: 0;
    text-align: right;
    color: var(--color-99a1af);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.15;
}

.kyc-stepper__copy p {
    margin: 4px 0 0;
    text-align: right;
    color: var(--color-6a7282);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.kyc-stepper__item.is-active .kyc-stepper__number,
.kyc-stepper__item.is-complete .kyc-stepper__number {
    background: var(--color-2e8a6e);
    border-color: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.kyc-stepper__item.is-active .kyc-stepper__copy h3,
.kyc-stepper__item.is-active .kyc-stepper__copy p,
.kyc-stepper__item.is-complete .kyc-stepper__copy h3,
.kyc-stepper__item.is-complete .kyc-stepper__copy p {
    color: var(--color-2f353c);
}

.kyc-wizard-card {
    width: min(980px, 100%);
    margin: 72px auto 30px;
    border-radius: var(--radius-18px);
    border: 1px solid var(--color-cfd4db);
    padding: 26px 32px 30px;
}

.kyc-step-1 {
    /* min-height: 820px; */
}

/* .kyc-step-2 {
    min-height: 920px;
}

.kyc-step-3 {
    min-height: 760px;
}

.kyc-step-4 {
    min-height: 1380px;
}

.kyc-step-5 {
    min-height: 1180px;
}

.kyc-step-6 {
    min-height: 860px;
}

.kyc-step-7 {
    min-height: 1240px;
} */

.kyc-step-4,
.kyc-step-5,
.kyc-step-7 {
    width: min(1020px, 100%);
}

.kyc-step-body {
    display: grid;
    gap: 12px;
}

.kyc-step-4-body,
.kyc-step-5-body,
.kyc-step-7-body {
    gap: 16px;
}

.kyc-wizard-head {
    margin-bottom: 2px;
    text-align: right;
}

.kyc-wizard-head h1 {
    margin: 0;
    color: var(--color-2d3239);
    font-size: var(--font-size-xl);
    font-weight: 400;
    line-height: 1.3;
}

.kyc-wizard-head p {
    margin: 8px 0 0;
    color: var(--color-717182);
    font-size: var(--font-size-sm);
    line-height: 1.48;
}

.kyc-step1-badge {
    margin-top: var(--space-3);
    min-height: 44px;
    border-radius: var(--radius-999px);
    border: 1px solid var(--color-d5dbe1);
    background: var(--color-eef1f3);
    color: var(--color-49505b);
    font-size: var(--font-size-3xl);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-4);
}

.kyc-wizard-field {
    display: grid;
    gap: var(--space-2);
}

.kyc-wizard-field>span:first-child,
.kyc-wizard-choice legend,
.kyc-section-card h2,
.kyc-inline-title,
.kyc-check-card__head span {
    color: var(--color-393e47);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 4px;
}

.kyc-wizard-field>span:first-child b,
.kyc-wizard-choice legend b,
.kyc-check-card__head b {
    color: var(--color-dc2626);
}

.kyc-wizard-field input,
.kyc-wizard-field select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--color-d8dde3);
    border-radius: var(--radius-10px);
    background: var(--color-eceef1);
    color: var(--color-2f343b);
    font-size: var(--font-size-sm);
    font-weight: 400;
    padding: 0 12px;
}

.kyc-wizard-field input::placeholder,
.kyc-wizard-field select {
    color: var(--color-969daa);
}

.kyc-wizard-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25L7 9.25L11 5.25' stroke='%23969daa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-inline-start: 14px;
    font-weight: 600;
    color: #000000;
}

.kyc-wizard-field small {
    color: var(--color-8f97a3);
    font-size: var(--font-size-sm);
    line-height: 1.35;
}

.kyc-wizard-field--icon .kyc-field-wrap {
    position: relative;
    display: block;
}

.kyc-field-wrap__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    color: var(--color-515864);
    display: inline-flex;
    pointer-events: none;
}

.kyc-field-wrap__icon svg {
    width: 100%;
    height: 100%;
}

.kyc-field-wrap input {
    padding-inline-start: 38px;
}

.kyc-wizard-grid {
    display: grid;
    gap: var(--space-3);
}

.kyc-wizard-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kyc-wizard-choice {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: var(--space-2);
    margin-top: 8px;
    padding: 20px;
    border-radius: 11px;
    border: 1px dotted #bcbcbc;
}

.kyc-choice-row,
.kyc-choice-grid,
.kyc-choice-stack {
    display: grid;
    gap: var(--space-2);
}

.kyc-choice-row {
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: start;
}

.kyc-choice-row--inline {
    grid-template-columns: repeat(2, minmax(0, 160px));
}

.kyc-choice-row--purpose {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kyc-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kyc-choice-stack {
    grid-template-columns: 1fr;
}

.kyc-choice-pill {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-3e444d);
    font-size: var(--font-size-sm);
    font-weight: 400;
    cursor: pointer;
    justify-content: flex-end;
    flex-direction: row-reverse;
}

.kyc-choice-pill input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-2e8a6e);
}

.kyc-radio-group {
    display: grid;
    gap: var(--space-2);
}

.kyc-radio-group--card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kyc-radio-group--card.v2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.kyc-radio-option-card.v2 {
    justify-content: flex-start;
}

.kyc-radio-group--inline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-inline-end: 2px;
}

.kyc-radio-option-card,
.kyc-radio-option-inline {
    display: flex;
    align-items: center;
    color: var(--color-3e444d);
    font-size: var(--font-size-sm);
    font-weight: 400;
    cursor: pointer;
}

.kyc-radio-option-card {
    min-height: 42px;
    border: 1px solid var(--color-d3d9e0);
    border-radius: var(--radius-8px);
    background: transparent !important;
    padding: 0 var(--space-3);
    justify-content: space-between;
    gap: var(--space-3);
}

.kyc-radio-option-card:focus-within {
    border-color: var(--color-8ebcae);
    box-shadow: 0 0 0 2px var(--color-rgb-46-138-110-16pct);
}

.kyc-radio-option-inline {
    gap: var(--space-2);
}

.kyc-radio-option-card input[type="radio"],
.kyc-radio-option-inline input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--color-2e8a6e);
    flex-shrink: 0;
}

.kyc-subsection {
    display: grid;
    gap: var(--space-3);
}

.kyc-info-banner {
    border-radius: var(--radius-13px);
    border: 1px solid var(--color-b4ccf6);
    background: var(--color-dbe6f4);
    color: var(--color-3459d4);
    padding: var(--space-3) 14px;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.kyc-info-banner__icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    flex-shrink: 0;
}

.kyc-info-banner__icon svg {
    width: 100%;
    height: 100%;
}

.kyc-info-banner h2 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.kyc-info-banner p {
    margin: 3px 0 0;
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.4;
}

.kyc-section-card {
    border-radius: var(--radius-16px);
    border: 1px solid var(--color-d9dde3);
    padding: var(--space-4);
    display: grid;
    gap: var(--space-3);
}

.kyc-section-card h2 {
    margin: 0;
}

.kyc-section-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.kyc-chip-button {
    min-height: 34px;
    border-radius: var(--radius-999px);
    border: 1px solid var(--color-d8dde3);
    background: var(--color-f2f3f5);
    color: var(--color-4a515d);
    font-size: var(--font-size-md);
    font-weight: 600;
    padding: 0 var(--space-3);
}

.kyc-loan-entry {
    border-radius: var(--radius-14px);
    border: 1px solid var(--color-dce1e7);
    background: var(--color-ffffff);
    padding: var(--space-3);
    display: grid;
    gap: var(--space-2);
}

.kyc-entry-label {
    margin: 0;
    color: var(--color-535a65);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.kyc-inline-summary {
    min-height: 52px;
    border-radius: var(--radius-14px);
    background: var(--color-eceef1);
    padding: 0 var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-48505c);
    font-size: var(--font-size-lg);
}

.kyc-inline-summary strong {
    font-weight: 600;
}

.kyc-wizard-divider {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--color-d9dde2);
    margin: 4px 0;
}

.kyc-inline-title {
    margin: 0;
}

.kyc-summary-panel {
    border-radius: var(--radius-14px);
    background: var(--color-dfece7);
    padding: var(--space-4);
    /* display: grid; */
    gap: var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kyc-summary-panel2 {
    display: flex;
    flex-direction: column;
    background: var(--color-dfece7);

    border-radius: var(--radius-14px);
    padding: var(--space-4);
    gap: var(--space-3);
}

.kyc-summary-panel h2 {
    margin: 0;
    color: var(--color-2f353c);
    font-size: var(--font-size-3xl);
    font-weight: 700;
}

.kyc-summary-panel2 h2 {
    font-size: var(--font-size-lg);
    margin: 0;
    font-weight: 400;
}

.kyc-summary-panel__grid2,
.kyc-summary-panel__grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-5);
}

.kyc-summary-panel__grid {
    display: flex;
    justify-content: space-between;
}

.kyc-summary-panel__labels,
.kyc-summary-panel__values {
    display: grid;
    gap: var(--space-2);
}

.kyc-summary-panel__labels span {
    color: var(--color-231f20);
    font-size: var(--font-size-md);
    font-weight: 400;
}

.kyc-summary-panel__values span {
    color: var(--color-2e8a6e);
    font-size: var(--font-size-md);
    font-weight: 400;
}

.kyc-summary-panel__separator {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--color-bccdc5);
    margin: 0;
}

.kyc-summary-panel__separator--value {
    border-top-color: var(--color-9fbfae);
}

.kyc-summary-panel__hint {
    margin: 0;
    color: var(--color-7c7c7c);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.4;
}

.kyc-legal-list {
    display: grid;
    gap: var(--space-3);
}

.kyc-check-card {
    border-radius: var(--radius-14px);
    border: 1px solid var(--color-d9dde3);
    background: var(--color-f4f5f6);
    padding: var(--space-3) 14px;
    display: grid;
    gap: var(--space-2);
    cursor: pointer;
}

.kyc-check-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: fit-content;
    flex-direction: row-reverse;
}

.kyc-check-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-2e8a6e);
}

.kyc-check-card p {
    margin: 0;
    color: var(--color-7d8591);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.kyc-action-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    border-top: 1px solid var(--color-d7dce3);
    background: var(--color-rgb-255-255-255-97pct);
    backdrop-filter: blur(4px);
    direction: ltr;
}

.kyc-action-bar__inner {
    width: min(1520px, 100% - 32px);
    margin-inline: auto;
    min-height: 76px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
}

.kyc-action-bar__left {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.kyc-action-bar__center {
    justify-self: center;
}

.kyc-action-bar__right {
    justify-self: end;
}

.kyc-action-bar__primary {
    min-height: 40px;
    border-radius: var(--radius-10px);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 500;
    padding: 0 16px;
}

.kyc-action-bar__primary--filled {
    background: var(--color-2e8a6e);
    border-color: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.kyc-action-bar__primary--ghost {
    background: var(--color-101114);
    border-color: var(--color-101114);
    color: var(--color-ffffff);
}

.kyc-action-bar__arrow {
    width: 18px;
    height: 18px;
    display: inline-flex;
}

.kyc-action-bar__arrow svg {
    width: 100%;
    height: 100%;
}

.kyc-action-bar__draft {
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);

    color: var(--color-4a5565);
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.kyc-action-bar__draft-icon {
    width: 17px;
    height: 17px;
    display: inline-flex;
}

.kyc-action-bar__draft-icon svg {
    width: 100%;
    height: 100%;
}

.kyc-action-bar__progress {
    margin: 0;
    color: var(--color-8f97a3);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.kyc-action-bar__exit {
    padding: 6px var(--space-3);
    background: var(--color-f5f5f6);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border-radius: var(--radius-8px);
    border: 1px solid var(--color-e5e5e5);

    background: var(--color-rgba-229-229-229-0-3);
    color: var(--color-0a0a0a);
    text-align: center;
    font-family: "Cairo", sans-serif;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
}

.kyc-action-bar__exit-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
}

.kyc-action-bar__exit-icon svg {
    width: 100%;
    height: 100%;
}

@media (max-width: 1320px) {
    .kyc-stepper {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .kyc-wizard-card,
    .kyc-step-4,
    .kyc-step-5,
    .kyc-step-7 {
        width: min(920px, 100%);
    }
}

@media (max-width: 980px) {
    .kyc-page {
        padding-bottom: 118px;
    }

    .kyc-intro-card {
        box-sizing: border-box;
    }

    .kyc-payment-screen,
    .kyc-intro-screen {
        padding-top: 34px;
    }

    .kyc-screen-head h1 {
        font-size: 23px;
    }

    .kyc-screen-head p,
    .kyc-field>span:first-child,
    .kyc-payment-summary__row,
    .kyc-field__control input,
    .kyc-method-option,
    .kyc-pay-submit,
    .kyc-pay-secure,
    .kyc-intro-card>p,
    .kyc-intro-required ul,
    .kyc-intro-notice p,
    .kyc-stepper__copy p,
    .kyc-wizard-head p,
    .kyc-wizard-field>span:first-child,
    .kyc-wizard-choice legend,
    .kyc-choice-pill,
    .kyc-radio-option-card,
    .kyc-radio-option-inline,
    .kyc-wizard-field input,
    .kyc-wizard-field select,
    .kyc-wizard-field small,
    .kyc-info-banner p,
    .kyc-section-card h2,
    .kyc-inline-title,
    .kyc-summary-panel__labels span,
    .kyc-summary-panel__values span,
    .kyc-summary-panel__hint,
    .kyc-check-card__head span,
    .kyc-check-card p,
    .kyc-action-bar__primary,
    .kyc-action-bar__draft,
    .kyc-action-bar__progress,
    .kyc-action-bar__exit {
        font-size: 16px;
    }

    .kyc-intro-card h1,
    .kyc-wizard-head h1,
    .kyc-stepper__copy h3,
    .kyc-step1-badge,
    .kyc-summary-panel h2,
    .kyc-intro-feature h3,
    .kyc-intro-required h2,
    .kyc-intro-notice h3 {
        font-size: 24px;
    }

    .kyc-stepper__number {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .kyc-field__control,
    .kyc-method-option,
    .kyc-pay-submit,
    .kyc-intro-start,
    .kyc-wizard-field input,
    .kyc-wizard-field select,
    .kyc-choice-pill,
    .kyc-radio-option-card {
        min-height: 42px;
        border-radius: var(--radius-8px);
    }

    .kyc-field-grid,
    .kyc-wizard-grid--2,
    .kyc-choice-grid,
    .kyc-radio-group--card,
    .kyc-choice-row--purpose {
        grid-template-columns: 1fr;
    }

    .kyc-intro-features {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .kyc-intro-feature {
        box-sizing: border-box;
        min-width: 0;
        padding: 12px;
        min-height: 0;
        height: 100%;
    }

    .kyc-intro-feature__icon {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-10px);
    }

    .kyc-intro-feature h3 {
        font-size: 16px;
        line-height: 22px;
        margin-top: 8px;
    }

    .kyc-intro-feature p {
        font-size: 13px;
        line-height: 1.4;
        margin-top: 4px;
    }

    .kyc-intro-time {
        margin-top: 14px;
    }

    .kyc-intro-features {
        margin-top: 14px;
    }

    .kyc-intro-required {
        margin-top: 14px;
    }

    .kyc-intro-notice {
        margin-top: 14px;
    }

    .kyc-intro-start {
        margin-top: 14px;
    }

    .kyc-intro-feature {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .kyc-radio-group--inline {
        gap: 12px;
    }

    .kyc-stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kyc-wizard-card {
        margin-top: 26px;
        padding: 16px;
    }

    .kyc-action-bar__inner {
        min-height: 104px;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px 0;
    }

    .kyc-action-bar__left,
    .kyc-action-bar__center,
    .kyc-action-bar__right {
        width: 100%;
        justify-self: stretch;
    }

    .kyc-action-bar__left {
        justify-content: space-between;
    }

    .kyc-action-bar__right .kyc-action-bar__exit {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .kyc-intro-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .kyc-intro-feature {
        padding: 10px;
    }

    .kyc-intro-feature__icon {
        width: 36px;
        height: 36px;
    }

    .kyc-intro-feature h3 {
        font-size: 15px;
        line-height: 20px;
        margin-top: 6px;
    }

    .kyc-intro-feature p {
        font-size: 12px;
        line-height: 1.35;
        margin-top: 3px;
    }
}

.kyc-step1-date-icon {
    display: none;
}

/* KYC Wizard Mobile Pixel Scope */
@media (max-width: 980px) {
    .kyc-page:has(.kyc-wizard-screen) {
        padding-bottom: 116px;
        background:
            linear-gradient(180deg, var(--color-ffffff) 0%, var(--color-f9fafb) 100%),
            linear-gradient(90deg, var(--color-ffffff) 0%, var(--color-ffffff) 100%);
    }

    .kyc-page:has(.kyc-wizard-screen) .kyc-main-section {
        padding: 0 0 24px;
        overflow: hidden;
    }

    .kyc-page:has(.kyc-wizard-screen) .kyc-main-section>.container {
        padding-inline: 0;
    }

    .kyc-page .kyc-stepper {
        display: flex;
        flex-direction: row;
        direction: rtl;
        align-items: center;
        justify-content: flex-start;
        min-height: 75px;
        padding: 11px 16px;
        gap: 0;
        border-top: 1.098px solid var(--color-rgb-0-0-0-10pct);
        border-bottom: 1.098px solid var(--color-rgb-0-0-0-10pct);
        background: var(--color-ffffff);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        scroll-padding-inline: 16px;
    }

    .kyc-page .kyc-stepper::-webkit-scrollbar {
        display: none;
    }

    .kyc-page .kyc-stepper__item {
        position: relative;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-start;
        gap: 7.992px;
        min-width: 81.993px;
        flex: 0 0 auto;
        padding-inline-end: 42px;
        color: var(--color-99a1af);
        scroll-snap-align: start;
    }

    .kyc-page .kyc-stepper__item::after {
        content: "";
        position: absolute;
        inset-inline-end: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 4px;
        border-radius: var(--radius-999px);
        background: var(--color-e5e7eb);
    }

    .kyc-page .kyc-stepper__item:last-child {
        padding-inline-end: 0;
    }

    .kyc-page .kyc-stepper__item:last-child::after {
        display: none;
    }

    .kyc-page .kyc-stepper__number {
        width: 31.984px;
        height: 31.984px;
        border: 0;
        border-radius: var(--radius-999px);
        background: var(--color-f3f4f6);
        color: var(--color-99a1af);
        font-size: 16px;
        font-weight: 400;
    }

    .kyc-page .kyc-stepper__copy h3 {
        margin: 0;
        color: var(--color-99a1af);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-align: right;
        white-space: nowrap;
    }

    .kyc-page .kyc-stepper__copy p {
        display: none;
    }

    .kyc-page .kyc-stepper__item.is-active .kyc-stepper__number,
    .kyc-page .kyc-stepper__item.is-complete .kyc-stepper__number {
        background: var(--color-2e8a6e);
        color: var(--color-ffffff);
    }

    .kyc-page .kyc-stepper__item.is-active .kyc-stepper__copy h3,
    .kyc-page .kyc-stepper__item.is-complete .kyc-stepper__copy h3 {
        color: var(--color-101828);
    }

    .kyc-page .kyc-wizard-screen {
        padding-top: 24px;
    }

    .kyc-page .kyc-wizard-card {
        width: calc(100% - 32px);
        margin: 0 auto;
        padding: 24px 16px;
        border-radius: var(--radius-16px);
        border: 1.098px solid var(--color-cccccc);
        background: var(--color-ffffff);
        box-shadow: none;
    }

    .kyc-page .kyc-wizard-card.kyc-step-1-0 {
        padding: 32px 16px;
    }

    .kyc-page .kyc-wizard-card.kyc-step-1 {
        padding: 17px;
    }

    .kyc-page .kyc-step-body {
        gap: 24px;
    }

    .kyc-page .kyc-step1-personal-fields {
        display: grid;
        gap: 16px;
    }

    .kyc-page .kyc-step1-personal-fields .kyc-wizard-grid--2 {
        gap: 16px;
    }

    .kyc-page .kyc-wizard-head {
        margin-bottom: 0;
    }

    .kyc-page .kyc-wizard-head h1 {
        color: var(--color-231f20);
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
    }

    .kyc-page .kyc-wizard-head p {
        margin-top: 8px;
        color: var(--color-7c7c7c);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.45;
    }

    .kyc-page .kyc-wizard-head--step1-personal h1 {
        font-size: 18px;
        font-weight: 500;
        line-height: 27px;
    }

    .kyc-page .kyc-wizard-head--step1-personal p {
        font-size: 13px;
        line-height: 21px;
    }

    .kyc-page .kyc-step-body .kyc-wizard-choice,
    .kyc-page .kyc-step-body .kyc-wizard-field {
        gap: 8px;
    }

    .kyc-page .kyc-step-body .kyc-wizard-field>span:first-child,
    .kyc-page .kyc-step-body .kyc-wizard-choice legend {
        color: var(--color-231f20);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .kyc-page .kyc-step-body .kyc-wizard-field>span:first-child b,
    .kyc-page .kyc-step-body .kyc-wizard-choice legend b {
        color: var(--color-d4183d);
    }

    .kyc-page .kyc-step-body .kyc-wizard-field input,
    .kyc-page .kyc-step-body .kyc-wizard-field select {
        min-height: 36px;
        border-radius: var(--radius-8px);
        border: 1.098px solid transparent;
        background: var(--color-f3f3f5);
        color: var(--color-717182);
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        padding-inline: 12px;
    }

    .kyc-page .kyc-step-body .kyc-wizard-field input::placeholder,
    .kyc-page .kyc-step-body .kyc-wizard-field select {
        color: var(--color-717182);
    }

    .kyc-page .kyc-step-body .kyc-wizard-field small {
        color: var(--color-6a7282);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

    .kyc-page .kyc-step-first-mobile--personal .kyc-wizard-field small {
        font-size: 13px;
        line-height: 19.5px;
    }

    .kyc-page .kyc-step-body .kyc-wizard-grid--2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .kyc-page .kyc-step-body .kyc-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .kyc-page .kyc-step-6-body .kyc-choice-row--purpose {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .kyc-page .kyc-step-body .kyc-choice-row--inline {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 24px;
    }

    .kyc-page .kyc-step-body .kyc-choice-grid .kyc-choice-pill,
    .kyc-page .kyc-step-6-body .kyc-choice-row--purpose .kyc-choice-pill {
        min-height: 42px;
        border: 1.111px solid var(--color-e5e7eb);
        border-radius: var(--radius-16px);
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row-reverse;
        gap: 8px;
        font-size: 14px;
        font-weight: 400;
        color: var(--color-231f20);
        background: var(--color-ffffff);
    }

    .kyc-page .kyc-step-body .kyc-choice-row--inline .kyc-choice-pill {
        min-height: auto;
        border: 0;
        border-radius: var(--radius-0);
        padding: 0;
        justify-content: flex-end;
        background: transparent;
    }

    .kyc-page .kyc-step-body .kyc-choice-pill input[type="radio"],
    .kyc-page .kyc-step-body .kyc-radio-option-inline input[type="radio"] {
        width: 16px;
        height: 16px;
        accent-color: var(--color-2e8a6e);
    }

    .kyc-page .kyc-step-body .kyc-radio-group--card {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .kyc-page .kyc-step-body .kyc-radio-option-card {
        min-height: 42px;
        border: 1.111px solid var(--color-e5e7eb);
        border-radius: var(--radius-16px);
        padding: 0 12px;
        justify-content: space-between;
        color: var(--color-231f20);
        font-size: 14px;
        font-weight: 400;
        background: var(--color-ffffff);
    }

    .kyc-page .kyc-step-body .kyc-radio-group--inline {
        justify-content: flex-start;
        gap: 24px;
        flex-wrap: wrap;
    }

    .kyc-page .kyc-step-body .kyc-radio-option-inline {
        gap: 8px;
        color: var(--color-231f20);
        font-size: 14px;
        font-weight: 400;
        line-height: 14px;
    }

    .kyc-page .kyc-step-body:not(.kyc-step-first-mobile) .kyc-wizard-field input[type="date"] {
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='3.5' y='4.5' width='13' height='12' rx='2' stroke='%23343330' stroke-width='1.5'/%3E%3Cpath d='M6.5 2.8V5.6M13.5 2.8V5.6M3.5 8.2H16.5' stroke='%23343330' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: left 10px center;
        padding-inline-start: 40px;
        position: relative;
    }

    .kyc-page .kyc-step-body:not(.kyc-step-first-mobile) .kyc-wizard-field input[type="date"]::-webkit-calendar-picker-indicator {
        opacity: 0;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .kyc-page .kyc-step-first-mobile .kyc-step1-date-icon {
        position: absolute;
        inset-inline-start: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        color: var(--color-343330);
        display: inline-flex;
        pointer-events: none;
    }

    .kyc-page .kyc-step-first-mobile .kyc-step1-date-icon svg {
        width: 100%;
        height: 100%;
    }

    .kyc-page .kyc-step-first-mobile .kyc-field-wrap--date input[type="date"] {
        position: relative;
        padding-inline-start: 44px;
    }

    .kyc-page .kyc-step-first-mobile .kyc-field-wrap--date input[type="date"]::-webkit-calendar-picker-indicator {
        opacity: 0;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .kyc-page .kyc-step-4-body .kyc-section-card,
    .kyc-page .kyc-step-5-body .kyc-section-card {
        border-color: var(--color-e5e7eb);
        border-width: 1.111px;
        border-radius: var(--radius-16px);
        padding: 16px;
        gap: 16px;
    }

    .kyc-page .kyc-step-5-body .kyc-loan-entry {
        border-color: var(--color-e5e7eb);
        border-width: 1.111px;
        border-radius: var(--radius-16px);
        background: var(--color-ffffff);
        padding: 16px;
        gap: 16px;
    }

    .kyc-page .kyc-step-5-body .kyc-inline-summary {
        min-height: 54px;
        border-radius: var(--radius-16px);
        background: var(--color-f9fafb);
        padding: 0 16px;
        font-size: 16px;
    }

    .kyc-page .kyc-step-4-body .kyc-summary-panel,
    .kyc-page .kyc-step-5-body .kyc-summary-panel2 {
        border-radius: var(--radius-16px);
        padding: 16px;
    }

    .kyc-page .kyc-step-7-body .kyc-legal-list {
        gap: 16px;
    }

    .kyc-page .kyc-step-7-body .kyc-check-card {
        border: 1.111px solid var(--color-e5e7eb);
        border-radius: var(--radius-16px);
        padding: 16px;
        background: var(--color-ffffff);
    }

    .kyc-page .kyc-step-7-body .kyc-check-card p {
        color: var(--color-7c7c7c);
        font-size: 14px;
        line-height: 1.45;
    }

    .kyc-page .kyc-step-7-body .kyc-info-banner {
        border-radius: var(--radius-12px);
        border-width: 1.111px;
        padding: 8px 16px;
    }

    .kyc-page:has(.kyc-wizard-screen) .kyc-action-bar {
        border-top: 1.098px solid var(--color-e5e5e5);
        background: var(--color-ffffff);
        box-shadow: 0 -4px 6px var(--color-rgb-0-0-0-10pct);
    }

    .kyc-page:has(.kyc-wizard-screen) .kyc-action-bar__inner {
        width: min(392.937px, 100%);
        min-height: 61px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .kyc-page:has(.kyc-wizard-screen) .kyc-action-bar__left,
    .kyc-page:has(.kyc-wizard-screen) .kyc-action-bar__right {
        width: auto;
        justify-self: auto;
    }

    .kyc-page:has(.kyc-wizard-screen) .kyc-action-bar__center {
        display: none;
    }

    .kyc-page:has(.kyc-wizard-screen) .kyc-action-bar__left {
        justify-content: flex-start;
        gap: 10px;
    }

    .kyc-page:has(.kyc-wizard-screen) .kyc-action-bar__primary {
        min-height: 33px;
        border-radius: var(--radius-6-8px);
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
        padding: 0 15px;
    }

    .kyc-page:has(.kyc-wizard-screen) .kyc-action-bar__arrow {
        width: 20px;
        height: 20px;
    }

    .kyc-page:has(.kyc-wizard-screen) .kyc-action-bar__draft {
        font-size: 13px;
        line-height: 18px;
        color: var(--color-6a7282);
        gap: 4px;
    }

    .kyc-page:has(.kyc-wizard-screen) .kyc-action-bar__draft-icon {
        width: 16px;
        height: 16px;
    }

    .kyc-page:has(.kyc-wizard-screen) .kyc-action-bar__right .kyc-action-bar__exit {
        width: auto;
        min-height: 35px;
        min-width: 78px;
        padding: 0 12px;
        border-radius: var(--radius-6-8px);
        border: 1.098px solid var(--color-e5e5e5);
        background: var(--color-rgb-229-229-229-30pct);
        color: var(--color-231f20);
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }

    .kyc-page:has(.kyc-wizard-screen) .kyc-action-bar__exit-icon {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 360px) {
    .kyc-page .kyc-stepper {
        padding-inline: 10px;
    }

    .kyc-page .kyc-stepper__item {
        min-width: 76px;
        padding-inline-end: 32px;
    }

    .kyc-page .kyc-stepper__item::after {
        width: 24px;
    }

    .kyc-page .kyc-wizard-card {
        width: calc(100% - 20px);
    }

    .kyc-page:has(.kyc-wizard-screen) .kyc-action-bar__inner {
        padding-inline: 10px;
    }

    .kyc-page:has(.kyc-wizard-screen) .kyc-action-bar__left {
        gap: 6px;
    }
}

/* Property Details Pixel-Perfect (page-scoped) */
.details-page--pixel {
    /* overflow-x: hidden; */
}

.details-page--pixel .container {
    /* width: min(1320px, 100% - 32px); */
}

.details-page--pixel .guest-kyc-progress-section--details {
    padding-top: 14px;
}

.details-page--pixel .guest-kyc-progress-wrap {
    /* grid-template-columns: minmax(0, 1fr) auto; */
    gap: 18px;
}

.details-page--pixel .guest-kyc-progress-title {
    font-size: 24px;
    font-weight: 400;
}

.details-page--pixel .guest-kyc-progress-track {
    min-height: 60px;
    border-radius: var(--radius-16px);
    padding: 10px 16px 8px;
    background: var(--color-f8f9fa);
    border-color: var(--color-dde1e7);
}

.details-page--pixel .guest-footer {
    margin-top: 86px;
}

.details-page--pixel .pd-main-section {
    padding: 20px 0 64px;
}

.details-page--pixel .pd-shell {
    display: grid;
    gap: 14px;
}

.details-page--pixel .pd-back-link {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-0a0a0a);
    text-decoration: none;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
}

.details-page--pixel .pd-back-link span[aria-hidden="true"] {
    font-size: 40px;
    line-height: 1;
}

.details-page--pixel .pd-gallery {
    display: grid;
    gap: 10px;
}

.details-page--pixel .pd-gallery__hero {
    height: 358px;
    border-radius: var(--radius-14px);
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--color-e2e6ea);
    background: var(--color-f4f5f6);
}

.details-page--pixel .pd-gallery__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 10px) / 2);
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    direction: ltr;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-y pinch-zoom;
    cursor: grab;
}

.details-page--pixel .pd-gallery__grid::-webkit-scrollbar {
    display: none;
}

.details-page--pixel .pd-gallery__grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.details-page--pixel .pd-gallery__thumb {
    height: 190px;
    border-radius: var(--radius-14px);
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--color-e2e6ea);
    background: var(--color-f4f5f6);
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.details-page--pixel .pd-gallery__thumb-btn {
    user-select: none;
    -webkit-user-select: none;
}

.details-page--pixel .pd-gallery__thumb img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.details-page--pixel .pd-gallery img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.details-page--pixel .pd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 14px;
    align-items: start;
}

.details-page--pixel .pd-content,
.details-page--pixel .pd-sidebar {
    min-width: 0;
    display: grid;
    gap: var(--space-6);
}

.details-page--pixel .pd-card {
    border-radius: var(--radius-14px);
    box-shadow: 0 1px 2px var(--color-rgb-17-24-39-3pct);
}

.details-page--pixel .pd-property-head {
    padding: var(--space-4);
}

.details-page--pixel .pd-property-head__chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
}

.details-page--pixel .pd-chip {
    min-height: 32px;
    border-radius: var(--radius-999px);
    padding: 0 var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1;
}

.details-page--pixel .pd-chip--verified {
    background: var(--color-f5d800);
    color: var(--color-23262b);
}

.details-page--pixel .pd-chip--finance {
    background: var(--color-2e8a6e);
    color: var(--color-ecfbf5);
}

.details-page--pixel .pd-chip--initiative {
    border: 1px solid var(--color-d8dde3);
    background: var(--color-f8f9fa);
    color: var(--color-4f5764);
}

.details-page--pixel .pd-property-head h1 {
    margin: var(--space-3) 0 0;
    color: var(--color-262a33);
    font-size: var(--font-size-2xl);
    font-weight: 600;
    line-height: 1.3;
}

.details-page--pixel .pd-property-head__location {
    margin: var(--space-2) 0 0;
    color: var(--color-717182);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.35;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.details-page--pixel .pd-property-head__location img {
    width: 16px;
    height: 16px;
}

.details-page--pixel .pd-price-strip {
    padding: 2px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1.1px solid var(--color-2e8a6e);
    background: var(--color-2e8a6e0d);
}

.details-page--pixel .pd-price-strip__item {
    min-height: 96px;
    padding: 10px var(--space-3);
    text-align: center;
    display: grid;
    align-content: center;
    gap: var(--space-2);
}

.details-page--pixel .pd-price-strip__item:first-child {
    border-inline-start: none;
}

.details-page--pixel .pd-price-strip__item span {
    color: var(--color-717182);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.1;
}

.details-page--pixel .pd-price-strip__item strong {
    color: var(--color-1f252e);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.12;
}

.details-page--pixel .pd-price-strip__item:first-child strong {
    color: var(--color-2e8a6e);
    font-weight: 700;
}

.details-page--pixel .pd-facts {
    padding: var(--space-4);
    background-color: var(--color-ffffff);
    border: 1.1px solid var(--color-0000001a);
}

.details-page--pixel .pd-facts h2,
.details-page--pixel .pd-about h2,
.details-page--pixel .pd-verify h2,
.details-page--pixel .pd-nearby h2,
.details-page--pixel .pd-trust-card h2,
.details-page--pixel .pd-calc-card h2 {
    margin: 0;
    color: var(--color-0a0a0a);
    font-size: var(--font-size-xl);
    font-weight: 500;
    line-height: 1.2;
}

.details-page--pixel .pd-facts__grid {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.details-page--pixel .pd-facts__item {
    min-height: 88px;
    text-align: center;
    display: grid;
    justify-items: flex-start;
    align-content: center;
    gap: 4px;
}

.details-page--pixel .pd-facts__item img {
    width: 24px;
    height: 24px;
}

.details-page--pixel .pd-facts__item span {
    color: var(--color-878e99);
    font-size: var(--font-size-sm);
    line-height: 1.2;
    font-weight: 400;
}

.details-page--pixel .pd-facts__item strong {
    color: var(--color-29303a);
    font-size: var(--font-size-md);
    font-weight: 600;
    line-height: 1.1;
}

.details-page--pixel .pd-facts__year {
    margin: var(--space-1) 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--color-e5e8ed);
    color: var(--color-717182);
    font-size: var(--font-size-sm);
    text-align: start;
    font-weight: 400;
}

.details-page--pixel .pd-about {
    padding: var(--space-4);
}

.details-page--pixel .pd-about p {
    margin: var(--space-3) 0 0;
    color: var(--color-7b828d);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.details-page--pixel .pd-verify {
    padding: var(--space-4);
    border: 1.1px solid var(--color-2e8a6e80);
    border-color: var(--color-rgb-46-138-110-58pct);
}

.details-page--pixel .pd-verify__list {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
}

.details-page--pixel .pd-verify__list li {
    color: var(--color-0a0a0a);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.details-page--pixel .pd-verify__list li::before {
    content: none;
}

.details-page--pixel .pd-verify__list li img {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    object-fit: contain;
}

.details-page--pixel .pd-verify__legal {
    margin-top: var(--space-4);
    border-radius: var(--radius-10px);
    background: var(--color-f1f3f6);
    padding: var(--space-3) 14px;
    display: grid;
    gap: var(--space-2);
}

.details-page--pixel .pd-verify__legal span {
    color: var(--color-0a0a0a);
    font-size: var(--font-size-md);
}

.details-page--pixel .pd-verify__legal strong {
    color: var(--color-717182);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.details-page--pixel .pd-nearby {
    padding: var(--space-4);
}

.details-page--pixel .pd-nearby__grid {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.details-page--pixel .pd-nearby__item {
    min-height: 98px;
    text-align: start;
    display: flex;
    justify-items: center;
    align-items: center;
    gap: var(--space-4);
}

.details-page--pixel .pd-nearby__item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.details-page--pixel .pd-nearby__item strong {
    color: var(--color-2e333b);
    font-size: var(--font-size-md);
    font-weight: 400;
}

.details-page--pixel .pd-nearby__item span {
    color: var(--color-7f8793);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.3;
}

.details-page--pixel .pd-sidebar {
    position: relative;
}

.details-page--pixel .pd-trust-card {
    padding: var(--space-4);
    text-align: center;
    background: var(--color-f4f5f7);
}

.details-page--pixel .pd-trust-card__icon {
    width: 28px;
    height: 28px;
    margin: 0 auto;
    display: inline-flex;
}

.details-page--pixel .pd-trust-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.details-page--pixel .pd-trust-card h2 {
    margin-top: var(--space-3);
    font-size: var(--font-size-lg);
    color: var(--color-516170);
}

.details-page--pixel .pd-trust-card p {
    margin: var(--space-2) 0 0;
    color: var(--color-7c8591);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.details-page--pixel .pd-action-card {
    padding: var(--space-3);
}

.details-page--pixel .pd-action-card__buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.details-page--pixel .pd-action-btn {
    min-height: 42px;
    border-radius: var(--radius-8px);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: 0 var(--space-2);
}

.details-page--pixel .pd-action-btn img {
    width: 14px;
    height: 14px;
}

.details-page--pixel .pd-action-btn--ghost {
    background: var(--color-93989f);
    border-color: var(--color-93989f);
    color: var(--color-f2f3f4);
}

.details-page--pixel .pd-action-btn--primary {
    background: var(--color-2e8a6e);
    border-color: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.details-page--pixel .pd-action-card p {
    margin: var(--space-2) 0 0;
    text-align: center;
    color: var(--color-8b929d);
    font-size: var(--font-size-sm);
}

.details-page--pixel .pd-calc-card {
    padding: var(--space-4);
    display: grid;
    gap: var(--space-3);
    background: var(--color-f5f6f8);
}

.details-page--pixel .pd-calc-tabs {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.details-page--pixel .pd-calc-tabs span {
    min-height: 26px;
    border-radius: var(--radius-8px);
    border: 1px solid var(--color-d5dae0);
    color: var(--color-7c8490);
    background: var(--color-eff1f4);
    font-size: var(--font-size-sm);
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
}

.details-page--pixel .pd-calc-tabs .is-active {
    color: var(--color-2f3640);
    background: var(--color-ffffff);
    border-color: var(--color-cfd4db);
}

.details-page--pixel .pd-calc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--color-5d6673);
    font-size: var(--font-size-sm);
}

.details-page--pixel .pd-calc-row strong {
    color: var(--color-2f3540);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.details-page--pixel .pd-calc-range {
    --pd-calc-progress: 20%;
    width: 100%;
    height: 12px;
    border-radius: var(--radius-999px);
    appearance: none;
    -webkit-appearance: none;
    direction: rtl;
    cursor: grab;
    touch-action: pan-x;
    background: linear-gradient(to left,
            var(--color-2e8a6e) var(--pd-calc-progress),
            var(--color-dde1e6) var(--pd-calc-progress));
    transition: box-shadow 140ms ease;
}

.details-page--pixel .pd-calc-range:active {
    cursor: grabbing;
}

.details-page--pixel .pd-calc-range:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-rgb-46-138-110-20pct);
}

.details-page--pixel .pd-calc-range::-webkit-slider-runnable-track {
    height: 12px;
    border-radius: var(--radius-999px);
    background: transparent;
}

.details-page--pixel .pd-calc-range::-moz-range-track {
    height: 12px;
    border-radius: var(--radius-999px);
    background: transparent;
}

.details-page--pixel .pd-calc-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -2px;
    border-radius: var(--radius-50pct);
    border: 1.5px solid var(--color-2e8a6e);
    background: var(--color-ffffff);
    box-shadow: 0 1px 2px var(--color-rgb-15-23-42-20pct);
}

.details-page--pixel .pd-calc-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-50pct);
    border: 1.5px solid var(--color-2e8a6e);
    background: var(--color-ffffff);
    box-shadow: 0 1px 2px var(--color-rgb-15-23-42-20pct);
}

.details-page--pixel .pd-calc-amount {
    margin-top: -2px;
    color: var(--color-666f7c);
    font-size: 18px;
    font-weight: 700;
}

.details-page--pixel .pd-calc-row--select {
    min-height: 34px;
    border: 1px solid var(--color-d8dde4);
    border-radius: var(--radius-8px);
    background: var(--color-eef0f3);
    padding: 0 10px;
}

.details-page--pixel .pd-calc-monthly {
    border-radius: var(--radius-10px);
    background: var(--color-dbe9e4);
    padding: var(--space-3);
    display: grid;
    justify-items: start;
}

.details-page--pixel .pd-calc-monthly span {
    color: var(--color-5e6875);
    font-size: var(--font-size-sm);
}

.details-page--pixel .pd-calc-monthly strong {
    color: var(--color-2e8a6e);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
}

.details-page--pixel .pd-calc-monthly small {
    color: var(--color-79818c);
    font-size: var(--font-size-xs);
}

.details-page--pixel .pd-calc-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.details-page--pixel .pd-calc-stats div {
    border-radius: var(--radius-8px);
    background: var(--color-e7e9ee);
    padding: var(--space-2);
    text-align: center;
    display: grid;
    gap: 2px;
}

.details-page--pixel .pd-calc-stats span {
    color: var(--color-7e8592);
    font-size: var(--font-size-xs);
}

.details-page--pixel .pd-calc-stats strong {
    color: var(--color-0a0a0a);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.details-page--pixel .pd-calc-summary {
    border: 1px solid var(--color-e5d05d);
    border-radius: var(--radius-10px);
    background: var(--color-f3efcc);
    padding: var(--space-3);
}

.details-page--pixel .pd-calc-summary h3 {
    margin: 0;
    color: var(--color-343a42);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.details-page--pixel .pd-calc-summary ul {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.details-page--pixel .pd-calc-summary li {
    color: var(--color-0a0a0a);
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

.details-page--pixel .pd-calc-capacity {
    border-radius: var(--radius-10px);
    background: var(--color-ebeef3);
    padding: var(--space-3);
}

.details-page--pixel .pd-calc-capacity h3 {
    margin: 0;
    color: var(--color-4a525f);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.details-page--pixel .pd-calc-capacity p {
    margin: 5px 0 0;
    color: var(--color-6e7682);
    font-size: 14px;
    line-height: 1.45;
}

.details-page--pixel .pd-calc-capacity strong {
    color: var(--color-2f3741);
    font-weight: 700;
}

.details-page--pixel .pd-calc-capacity small {
    margin-top: 6px;
    display: block;
    color: var(--color-8b929d);
    font-size: 10px;
    line-height: 1.45;
}

/* >= 1440 */

@media (min-width: 1440px) {
    .details-page--pixel .container {
        /* width: min(1370px, 100% - 32px); */
    }

    .details-page--pixel .pd-layout {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 16px;
    }

    .details-page--pixel .pd-gallery__hero {
        height: 384px;
    }

    .details-page--pixel .pd-gallery__thumb {
        height: 196px;
    }
}

/* 1200 - 1439 */
@media (min-width: 1200px) and (max-width: 1439px) {
    .details-page--pixel .container {
        /* width: min(1260px, 100% - 32px); */
    }

    .details-page--pixel .pd-layout {
        grid-template-columns: minmax(0, 1fr) 348px;
    }

    /* .details-page--pixel .pd-property-head h1 {
        font-size: 34px;
    }

    .details-page--pixel .pd-price-strip__item strong {
        font-size: 30px;
    } */
}

/* 992 - 1199 */
@media (min-width: 992px) and (max-width: 1199px) {
    .details-page--pixel .container {
        /* width: min(1050px, 100% - 25.6px); */
    }

    .details-page--pixel .pd-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 12px;
    }

    .details-page--pixel .pd-gallery__hero {
        height: 300px;
    }

    .details-page--pixel .pd-gallery__thumb {
        height: 160px;
    }

    /* .details-page--pixel .pd-back-link {
        font-size: 30px;
    }

    .details-page--pixel .pd-property-head h1 {
        font-size: 30px;
    }

    .details-page--pixel .pd-price-strip__item span {
        font-size: 21px;
    }

    .details-page--pixel .pd-price-strip__item strong {
        font-size: 26px;
    }

    .details-page--pixel .pd-facts h2,
    .details-page--pixel .pd-about h2,
    .details-page--pixel .pd-verify h2,
    .details-page--pixel .pd-nearby h2 {
        font-size: 25px;
    }

    .details-page--pixel .pd-facts__item span,
    .details-page--pixel .pd-nearby__item span {
        font-size: 20px;
    }

    .details-page--pixel .pd-facts__item strong,
    .details-page--pixel .pd-nearby__item strong {
        font-size: 25px;
    } */
}

/* 768 - 991 */
@media (min-width: 768px) and (max-width: 991px) {
    .details-page--pixel .container {
        /* width: min(100%, 100% - 22.4px); */
    }

    .details-page--pixel .pd-main-section {
        padding-top: 14px;
    }

    .details-page--pixel .pd-layout {
        grid-template-columns: 1fr;
    }

    .details-page--pixel .pd-sidebar {
        order: 2;
    }

    .details-page--pixel .pd-content {
        order: 1;
    }

    .details-page--pixel .pd-gallery__hero {
        height: 286px;
    }

    .details-page--pixel .pd-gallery__grid {
        grid-auto-columns: 100%;
    }

    .details-page--pixel .pd-gallery__thumb {
        height: 156px;
    }

    .details-page--pixel .pd-back-link {
        font-size: 26px;
    }

    .details-page--pixel .pd-property-head h1 {
        font-size: 28px;
    }

    .details-page--pixel .pd-property-head__location,
    .details-page--pixel .pd-facts__item span,
    .details-page--pixel .pd-facts__year,
    .details-page--pixel .pd-about p,
    .details-page--pixel .pd-verify__list li,
    .details-page--pixel .pd-nearby__item span {
        font-size: 19px;
    }

    .details-page--pixel .pd-price-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .details-page--pixel .pd-price-strip__item {
        border-inline-start: none;
        border-top: 1px solid var(--color-dee2e7);
    }

    .details-page--pixel .pd-price-strip__item:nth-child(-n + 2) {
        border-top: none;
    }

    .details-page--pixel .pd-facts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* < 768 */
@media (max-width: 767px) {
    .details-page--pixel .container {
        /* width: min(100%, 100% - 16px); */
    }

    .details-page--pixel .guest-kyc-progress-wrap {
        grid-template-columns: 1fr;
    }

    .details-page--pixel .guest-kyc-progress-title {
        font-size: 18px;
    }

    .details-page--pixel .pd-main-section {
        padding-top: 10px;
    }

    .details-page--pixel .pd-back-link {
        font-size: 21px;
    }

    .details-page--pixel .pd-back-link span[aria-hidden="true"] {
        font-size: 25px;
    }

    .details-page--pixel .pd-gallery__hero {
        height: 214px;
        border-radius: var(--radius-10px);
    }

    .details-page--pixel .pd-gallery__grid {
        grid-auto-columns: 100%;
    }

    .details-page--pixel .pd-gallery__thumb {
        height: 170px;
        border-radius: var(--radius-10px);
    }

    .details-page--pixel .pd-layout {
        grid-template-columns: 1fr;
    }

    .details-page--pixel .pd-property-head,
    .details-page--pixel .pd-facts,
    .details-page--pixel .pd-about,
    .details-page--pixel .pd-verify,
    .details-page--pixel .pd-nearby,
    .details-page--pixel .pd-trust-card,
    .details-page--pixel .pd-action-card,
    .details-page--pixel .pd-calc-card {
        padding: 11px;
    }

    .details-page--pixel .pd-chip {
        min-height: 28px;
        font-size: 14px;
        padding: 0 10px;
    }

    .details-page--pixel .pd-property-head h1 {
        font-size: 22px;
    }

    .details-page--pixel .pd-property-head__location,
    .details-page--pixel .pd-price-strip__item span,
    .details-page--pixel .pd-facts__item span,
    .details-page--pixel .pd-facts__year,
    .details-page--pixel .pd-about p,
    .details-page--pixel .pd-verify__list li,
    .details-page--pixel .pd-verify__legal span,
    .details-page--pixel .pd-nearby__item span {
        font-size: 14px;
    }

    .details-page--pixel .pd-price-strip {
        grid-template-columns: 1fr;
    }

    .details-page--pixel .pd-price-strip__item {
        min-height: 74px;
        border-inline-start: none;
        border-top: 1px solid var(--color-dee2e7);
    }

    .details-page--pixel .pd-price-strip__item:first-child {
        border-top: none;
    }

    .details-page--pixel .pd-price-strip__item strong {
        font-size: 16px;
    }

    .details-page--pixel .pd-facts h2,
    .details-page--pixel .pd-about h2,
    .details-page--pixel .pd-verify h2,
    .details-page--pixel .pd-nearby h2 {
        font-size: 20px;
    }

    .details-page--pixel .pd-facts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .details-page--pixel .pd-facts__item strong,
    .details-page--pixel .pd-nearby__item strong {
        font-size: 18px;
    }

    .details-page--pixel .pd-nearby__grid {
        grid-template-columns: 1fr;
    }

    .details-page--pixel .pd-action-card__buttons,
    .details-page--pixel .pd-calc-stats {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 450px) {
    .details-page--pixel .pd-gallery__grid {
        grid-auto-columns: clamp(116px, 39vw, 146px);
    }

    .details-page--pixel .pd-gallery__thumb {
        height: 64px;
    }
}

/* Property Details mobile alignment (<= 992px) */
@media (max-width: 992px) {
    .details-page--pixel {
        overflow-x: clip;
    }

    .details-page--pixel .pd-main-section .container {
        width: auto;
        max-width: 100%;
    }

    .details-page--pixel .pd-main-section {
        padding: 14px 0 40px;
    }

    .details-page--pixel .pd-shell {
        padding-inline: 16px;
        gap: 14px;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .details-page--pixel .pd-layout {
        grid-template-columns: 1fr;
        gap: 14px;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .details-page--pixel .pd-content,
    .details-page--pixel .pd-sidebar {
        min-width: 0;
        max-width: 100%;
        gap: 14px;
        box-sizing: border-box;
    }

    .details-page--pixel .pd-card {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .details-page--pixel .pd-content {
        order: 1;
    }

    .details-page--pixel .pd-sidebar {
        order: 2;
    }

    .details-page--pixel .pd-card {
        border-radius: var(--radius-16px);
    }

    .details-page--pixel .guest-footer {
        margin-top: 32px;
    }

    .details-page--pixel .pd-back-link {
        font-size: 14px;
        line-height: 1.5;
        gap: 8px;
    }

    .details-page--pixel .pd-back-link span[aria-hidden="true"] {
        font-size: 20px;
    }

    .details-page--pixel .pd-property-head,
    .details-page--pixel .pd-facts,
    .details-page--pixel .pd-about,
    .details-page--pixel .pd-verify,
    .details-page--pixel .pd-nearby,
    .details-page--pixel .pd-trust-card,
    .details-page--pixel .pd-action-card,
    .details-page--pixel .pd-calc-card {
        padding: 12px;
    }

    .details-page--pixel .pd-property-head__top {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .details-page--pixel .pd-property-head__meta {
        min-width: 0;
    }

    .details-page--pixel .pd-property-head h1 {
        margin: 0;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.5;
    }

    .details-page--pixel .pd-property-head__location {
        margin: 8px 0 0;
        font-size: 14px;
        line-height: 1.5;
        gap: 6px;
        display: flex;
        align-items: flex-start;
    }

    .details-page--pixel .pd-property-head__location span {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .details-page--pixel .pd-property-head__location img {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        margin-top: 1px;
    }

    .details-page--pixel .pd-property-head__tag-wrap {
        width: 100%;
    }

    .details-page--pixel .pd-property-head__chips {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 8px;
    }

    .details-page--pixel .pd-property-head .property-offer-card__badge {
        min-height: 28px;
        padding-inline: 12px;
        border-radius: var(--radius-999px);
        gap: 6px;
    }

    .details-page--pixel .pd-property-head .property-offer-card__badge span {
        font-size: 13px;
        font-weight: 400;
        line-height: 1.5;
    }

    .details-page--pixel .pd-property-head .property-offer-card__badge img {
        width: 20px;
        height: 20px;
    }

    .details-page--pixel .pd-price-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 10px;
        padding: 16px 12px;
        border-radius: var(--radius-16px);
    }

    .details-page--pixel .pd-price-strip__item {
        min-height: 0;
        padding: 0;
        border: none;
        text-align: start;
        align-content: start;
        gap: 2px;
    }

    .details-page--pixel .pd-price-strip__item span {
        font-size: 13px;
        line-height: 1.5;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .details-page--pixel .pd-price-strip__item strong {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .details-page--pixel .pd-price-strip__item:first-child strong {
        font-weight: 400;
        color: var(--color-2e8a6e);
    }

    .details-page--pixel .pd-facts h2,
    .details-page--pixel .pd-about h2,
    .details-page--pixel .pd-verify h2,
    .details-page--pixel .pd-nearby h2,
    .details-page--pixel .pd-trust-card h2,
    .details-page--pixel .pd-calc-card h2 {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
    }

    .details-page--pixel .pd-facts__grid {
        margin-top: 12px;
        padding-top: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
    }

    .details-page--pixel .pd-facts__item {
        min-height: 0;
        text-align: start;
        justify-items: start;
        align-content: start;
        gap: 6px;
    }

    .details-page--pixel .pd-facts__item>.flex {
        width: 100%;
        align-items: center;
        gap: 8px;
    }

    .details-page--pixel .pd-facts__item img {
        width: 20px;
        height: 20px;
    }

    .details-page--pixel .pd-facts__item span {
        font-size: 13px;
        line-height: 1.5;
    }

    .details-page--pixel .pd-facts__item strong {
        font-size: 16px;
        line-height: 1.4;
    }

    .details-page--pixel .pd-facts__year {
        margin-top: 12px;
        padding-top: 12px;
        font-size: 13px;
        line-height: 1.5;
    }

    .details-page--pixel .pd-about p {
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.75;
    }

    .details-page--pixel .pd-verify__list {
        margin-top: 10px;
        gap: 10px;
    }

    .details-page--pixel .pd-verify__list li {
        font-size: 13px;
        line-height: 1.6;
        gap: 8px;
        align-items: flex-start;
    }

    .details-page--pixel .pd-verify__list li img {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        margin-top: 2px;
    }

    .details-page--pixel .pd-verify__legal {
        margin-top: 12px;
        border-radius: var(--radius-10px);
        padding: 10px;
        gap: 4px;
    }

    .details-page--pixel .pd-verify__legal span {
        font-size: 13px;
        line-height: 1.5;
    }

    .details-page--pixel .pd-verify__legal strong {
        font-size: 14px;
        line-height: 1.6;
    }

    .details-page--pixel .pd-nearby__grid {
        margin-top: 10px;
        padding-top: 0;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .details-page--pixel .pd-nearby__item {
        min-height: 0;
        gap: 8px;
        align-items: flex-start;
    }

    .details-page--pixel .pd-nearby__item .flex {
        min-width: 0;
    }

    .details-page--pixel .pd-nearby__item img {
        width: 20px;
        height: 20px;
        margin-top: 2px;
    }

    .details-page--pixel .pd-nearby__item strong {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
    }

    .details-page--pixel .pd-nearby__item span {
        font-size: 13px;
        line-height: 1.5;
    }

    .details-page--pixel .pd-trust-card {
        text-align: start;
    }

    .details-page--pixel .pd-trust-card__icon {
        width: 24px;
        height: 24px;
        margin-inline: 0;
    }

    .details-page--pixel .pd-trust-card h2 {
        margin-top: 8px;
        font-size: 16px;
        line-height: 1.5;
    }

    .details-page--pixel .pd-trust-card p {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.6;
    }

    .details-page--pixel .pd-action-card__buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .details-page--pixel .pd-action-card__buttons>* {
        min-width: 0;
    }

    .details-page--pixel .pd-action-btn {
        min-height: 40px;
        padding-inline: 8px;
        gap: 6px;
        font-size: 14px;
    }

    .details-page--pixel .pd-action-btn img {
        width: 14px;
        height: 14px;
    }

    .details-page--pixel .pd-action-card p {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.5;
    }

    .details-page--pixel .pd-calc-card {
        gap: 10px;
    }

    .details-page--pixel .pd-calc-tabs {
        gap: 6px;
    }

    .details-page--pixel .pd-calc-tabs span {
        min-height: 26px;
        font-size: 12px;
        padding-inline: 10px;
    }

    .details-page--pixel .pd-calc-row {
        font-size: 13px;
        line-height: 1.5;
    }

    .details-page--pixel .pd-calc-row strong {
        font-size: 13px;
    }

    .details-page--pixel .pd-calc-amount {
        font-size: 16px;
    }

    .details-page--pixel .pd-calc-monthly {
        border-radius: var(--radius-10px);
        padding: 10px;
    }

    .details-page--pixel .pd-calc-monthly span {
        font-size: 14px;
    }

    .details-page--pixel .pd-calc-monthly strong {
        font-size: 18px;
        line-height: 1.3;
    }

    .details-page--pixel .pd-calc-monthly small {
        font-size: 11px;
        line-height: 1.5;
    }

    .details-page--pixel .pd-calc-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .details-page--pixel .pd-calc-stats>div {
        min-width: 0;
    }

    .details-page--pixel .pd-calc-stats span {
        font-size: 10px;
        line-height: 1.4;
    }

    .details-page--pixel .pd-calc-stats strong {
        font-size: 12px;
        line-height: 1.4;
    }

    .details-page--pixel .pd-calc-summary h3 {
        font-size: 15px;
        line-height: 1.5;
    }

    .details-page--pixel .pd-calc-summary li {
        font-size: 14px;
        line-height: 1.6;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .details-page--pixel .pd-calc-capacity h3 {
        font-size: 12px;
        line-height: 1.5;
    }

    .details-page--pixel .pd-calc-capacity p {
        font-size: 11px;
        line-height: 1.6;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .details-page--pixel .pd-calc-capacity small {
        font-size: 10px;
        line-height: 1.5;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* Appointment modal flow */
.appointment-modal-root {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: grid;
    place-items: center;
    padding: 12px;
}

.appointment-modal-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    background: var(--color-rgb-0-0-0-20pct);
    backdrop-filter: blur(5px);
}

.appointment-modal-shell {
    position: relative;
    width: min(512px, 100%);
    border-radius: var(--radius-10px);
    border: 1px solid var(--color-rgb-0-0-0-10pct);
    background: var(--color-ffffff);
    box-shadow:
        0 10px 15px -3px var(--color-rgb-0-0-0-10pct),
        0 4px 6px -4px var(--color-rgb-0-0-0-10pct);
    overflow: hidden;
    direction: rtl;
}

.appointment-modal-shell--booking {
    /* min-height: 787px; */
}

.appointment-modal-shell--success {
    min-height: 460px;
}

.appointment-modal-head {
    min-height: 86px;
    background: linear-gradient(90deg, var(--color-2e8a6e) 0%, var(--color-rgb-46-138-110-80pct) 100%);
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    position: relative;
}

.appointment-modal-close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 16px;
    height: 16px;
    border: none;
    padding: 0;
    background: transparent;
    color: var(--color-rgb-0-0-0-70pct);
}

.appointment-modal-close svg {
    width: 100%;
    height: 100%;
    display: block;
    color: white;
}

.appointment-modal-head__copy {
    display: grid;
    justify-items: start;
    gap: 8px;
    width: 100%;
}

.appointment-modal-head__copy h2 {
    margin: 0;
    color: var(--color-ffffff);
    font-size: 18px;
    line-height: 18px;
    font-weight: 600;
}

.appointment-modal-head__copy p {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--color-rgb-255-255-255-80pct);
    font-size: 14px;
    line-height: 20px;
}

.appointment-modal-head__copy p span:first-child {
    width: 14px;
    height: 14px;
    color: inherit;
    display: inline-flex;
}

.appointment-modal-head__copy p span:first-child svg {
    width: 100%;
    height: 100%;
    display: block;
}

.appointment-modal-body {
    width: 470px;
    max-width: calc(100% - 24px);
    margin-inline: auto;
}

.appointment-modal-body--booking {
    margin-top: 36px;
    margin-bottom: 20px;
    display: grid;
    gap: 20px;
}

.appointment-booking-section {
    display: grid;
    gap: 8px;
}

.appointment-booking-label {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: var(--color-0a0a0a);
}

.appointment-booking-label span {
    width: 16px;
    height: 16px;
    color: var(--color-2e8a6e);
    display: inline-flex;
}

.appointment-booking-label span svg {
    width: 100%;
    height: 100%;
    display: block;
}

.appointment-booking-label strong {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.appointment-booking-calendar-wrap {
    display: flex;
    justify-content: center;
}

.appointment-booking-calendar {
    width: 250px;
    max-width: 100%;
}

.appointment-booking-calendar .guest-flux-calendar {
    width: 250px;
    max-width: 100%;
    border: 1px solid var(--color-rgb-0-0-0-10pct);
    border-radius: var(--radius-10px);
    background: var(--color-ffffff);
}

.appointment-booking-calendar .guest-flux-date-picker--fallback {
    width: 250px;
    max-width: 100%;
    height: 36px;
    border: 1px solid var(--color-rgb-0-0-0-10pct);
    border-radius: var(--radius-10px);
    background: var(--color-ffffff);
    font-size: 14px;
    color: var(--color-0a0a0a);
    text-align: right;
}

.appointment-slot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.appointment-slot-btn {
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: var(--radius-10px);
    background: var(--color-rgb-236-236-240-70pct);
    color: var(--color-0a0a0a);
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    padding: 8px 4px;
}

.appointment-slot-btn.is-selected {
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.appointment-modal-input {
    width: 100%;
    height: 36px;
    border: none;
    border-radius: var(--radius-8px);
    background: var(--color-f3f3f5);
    color: var(--color-0a0a0a);
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    padding: 0 12px;
}

.appointment-modal-input::placeholder {
    color: var(--color-717182);
}

.appointment-modal-input:focus {
    outline: 2px solid var(--color-rgb-46-138-110-20pct);
    outline-offset: 1px;
}

.appointment-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
}

.appointment-modal-btn {
    height: 36px;
    border-radius: var(--radius-8px);
    font-size: 14px;
    line-height: 20px;
    padding: 8px 16px;
}

.appointment-modal-btn--secondary {
    width: 95px;
    border: 1px solid var(--color-rgb-0-0-0-10pct);
    background: var(--color-ffffff);
    color: var(--color-0a0a0a);
}

.appointment-modal-btn--primary {
    flex: 1 1 auto;
    border: 1px solid transparent;
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
    font-size: 16px;
    font-weight: 500;
}

.appointment-modal-btn--primary:disabled {
    background: var(--color-cdd1d8);
    color: var(--color-7e8491);
    cursor: not-allowed;
}

.appointment-booking-footnote {
    margin: 0;
    color: var(--color-717182);
    text-align: center;
    font-size: 12px;
    line-height: 16px;
}

.appointment-modal-body--success {
    margin-top: 40px;
    margin-bottom: 20px;
    min-height: 316px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.appointment-success-badge {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-999px);
    background: var(--color-rgb-46-138-110-10pct);
    color: var(--color-2e8a6e);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.appointment-success-badge svg {
    width: 40px;
    height: 40px;
}

.appointment-modal-body--success h3 {
    margin: 20px 0 0;
    color: var(--color-0a0a0a);
    font-size: 30px;
    line-height: 24px;
    font-weight: 500;
}

.appointment-success-datetime {
    margin: 10px 0 0;
    color: var(--color-717182);
    text-align: center;
    font-size: 14px;
    line-height: 20px;
}

.appointment-success-notice {
    width: 100%;
    margin-top: 20px;
    border-radius: var(--radius-14px);
    background: var(--color-rgb-236-236-240-50pct);
    padding: 12px;
    display: grid;
    gap: 4px;
}

.appointment-success-notice p {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-0a0a0a);
    text-align: center;
    font-size: 14px;
    line-height: 20px;
}

.appointment-success-notice p span:first-child {
    width: 14px;
    height: 14px;
    color: var(--color-2e8a6e);
    display: inline-flex;
    flex: 0 0 14px;
}

.appointment-success-notice p span:first-child svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 991px) {
    .appointment-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .appointment-modal-shell {
        width: calc(100vw - 24px);
    }

    .appointment-modal-shell--booking {
        min-height: initial;
    }

    .appointment-modal-shell--success {
        min-height: initial;
    }

    .appointment-modal-body--booking {
        margin-top: 24px;
        margin-bottom: 16px;
        gap: 16px;
    }

    .appointment-modal-body--success {
        margin-top: 28px;
        margin-bottom: 16px;
    }

    .appointment-modal-btn--secondary {
        width: auto;
    }
}

/* ==================== KYC Properties ==================== */
.kyc-properties-page {
    min-height: 100vh;
    direction: rtl;
}

.kyc-properties-main {
    padding: 0px 0 120px;
}

.kyc-properties-phase[hidden] {
    display: none !important;
}

.kyc-properties-flow-shell {
    align-items: start;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
}

.kyc-properties-flow-shell--result {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, .95fr);
}

.kyc-properties-listing-hero,
.kyc-properties-result-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 32px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
    padding: 32px;
}

.kyc-properties-listing-hero__eyebrow,
.kyc-properties-result-card__eyebrow,
.kyc-properties-service-card__eyebrow {
    color: var(--color-2e8a6e);
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
}

.kyc-properties-listing-hero h1,
.kyc-properties-result-card h2 {
    color: var(--color-101828);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
}

.kyc-properties-listing-hero>p,
.kyc-properties-result-card>p {
    color: var(--color-475467);
    font-size: 17px;
    line-height: 1.8;
    margin: 16px 0 0;
    max-width: 740px;
}

.kyc-properties-listing-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.kyc-properties-listing-hero__meta span {
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    color: var(--color-344054);
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
}

.kyc-properties-listing-hero__meta strong {
    color: var(--color-101828);
}

.kyc-properties-listing-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.kyc-properties-listing-progress {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 28px;
}

.kyc-properties-listing-progress article,
.kyc-properties-result-card__meta article {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 22px;
    display: grid;
    gap: 4px;
    padding: 18px 20px;
}

.kyc-properties-listing-progress strong,
.kyc-properties-result-card__meta strong {
    color: var(--color-101828);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.kyc-properties-listing-progress span,
.kyc-properties-result-card__meta span {
    color: var(--color-667085);
    font-size: 13px;
    font-weight: 600;
}

.kyc-properties-listing-side,
.kyc-properties-result-services {
    display: grid;
    gap: 18px;
}

.kyc-properties-service-card {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 28px;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.06);
    padding: 24px;
}

.kyc-properties-service-card--accent {
    background: linear-gradient(180deg, rgba(238, 251, 246, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
    border-color: rgba(46, 138, 110, 0.18);
}

.kyc-properties-service-card--neutral {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.kyc-properties-service-card h2 {
    color: var(--color-101828);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
}

.kyc-properties-service-card p {
    color: var(--color-475467);
    font-size: 15px;
    line-height: 1.8;
    margin: 12px 0 0;
}

.kyc-properties-service-card__list,
.kyc-properties-service-card__steps {
    color: var(--color-344054);
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0 20px 0 0;
}

.kyc-properties-service-card__list li,
.kyc-properties-service-card__steps li {
    font-size: 14px;
    line-height: 1.7;
}

.kyc-properties-service-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.kyc-properties-service-card__link {
    align-items: center;
    background: var(--color-101828);
    border-radius: 999px;
    color: var(--color-ffffff);
    display: inline-flex;
    font-size: 14px;
    font-weight: 800;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    text-decoration: none;
}

.kyc-properties-service-card__link--muted {
    background: rgba(15, 23, 42, 0.06);
    color: var(--color-101828);
}

.kyc-properties-phase--wizard .kyc-stepper {
    margin-bottom: 24px;
}

.kyc-properties-card .kyc-step-panel+.kyc-step-panel {
    /* border-top: 1px solid rgba(226, 232, 240, 0.9); */
    /* margin-top: 32px; */
    /* padding-top: 32px; */
}

.kyc-status-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.kyc-properties-result-card {
    text-align: right;
}

.kyc-properties-result-card__icon {
    align-items: center;
    background: rgba(46, 138, 110, 0.12);
    border-radius: 999px;
    color: var(--color-2e8a6e);
    display: inline-flex;
    height: 88px;
    justify-content: center;
    margin-bottom: 16px;
    width: 88px;
}

.kyc-properties-result-card__icon svg {
    height: 38px;
    width: 38px;
}

.kyc-properties-result-card__meta {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 24px;
}

.kyc-properties-result-card .kyc-properties-legal-processing {
    margin-top: 28px;
    max-width: 100%;
}

.kyc-properties-result-card .kyc-properties-legal-processing__copy {
    width: min(398px, 100%);
}

@media (max-width: 991.98px) {

    .kyc-properties-flow-shell,
    .kyc-properties-flow-shell--result {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {

    .kyc-properties-listing-hero,
    .kyc-properties-result-card,
    .kyc-properties-service-card {
        border-radius: 24px;
        padding: 22px 18px;
    }

    .kyc-properties-listing-hero h1,
    .kyc-properties-result-card h2 {
        font-size: 30px;
    }

    .kyc-properties-listing-hero>p,
    .kyc-properties-result-card>p,
    .kyc-properties-service-card p {
        font-size: 15px;
    }

    .kyc-properties-listing-hero__actions,
    .kyc-properties-service-card__actions {
        flex-direction: column;
    }

    .kyc-properties-listing-hero__actions .kyc-action-bar__primary,
    .kyc-properties-service-card__link {
        width: 100%;
    }

    .kyc-properties-listing-progress,
    .kyc-properties-result-card__meta {
        grid-template-columns: 1fr;
    }

    .kyc-properties-listing-hero__meta span {
        width: 100%;
        justify-content: center;
    }

    .kyc-properties-result-card .kyc-properties-legal-processing__stepper {
        width: 100%;
    }

    .kyc-properties-choice-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .kyc-properties-choice-group {
        justify-content: space-between;
    }
}

.kyc-properties-state-wrap {
    padding-top: 120px;
}

.kyc-properties-stepper {
    background: var(--color-ffffff);
    border-bottom: 1px solid var(--color-e5e5e5);
    margin-bottom: 24px;
}

.kyc-properties-stepper__inner {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
    padding: 22px 0;
}

.kyc-properties-stepper__item {
    align-items: center;
    border-bottom: 2px solid var(--color-e5e7eb);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-bottom: 8px;
}

.kyc-properties-stepper__badge {
    align-items: center;
    background: var(--color-f3f4f6);
    border-radius: var(--radius-999px);
    color: var(--color-9ca3af);
    display: inline-flex;
    font-size: 14px;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.kyc-properties-stepper__copy {
    text-align: right;
}

.kyc-properties-stepper__copy strong {
    color: var(--color-6a7282);
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.kyc-properties-stepper__copy small {
    color: var(--color-9ca3af);
    display: block;
    font-size: 11px;
    line-height: 1.3;
}

.kyc-properties-stepper__item.is-active {
    border-bottom-color: var(--color-2e8a6e);
}

.kyc-properties-stepper__item.is-active .kyc-properties-stepper__badge,
.kyc-properties-stepper__item.is-complete .kyc-properties-stepper__badge {
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.kyc-properties-stepper__item.is-active .kyc-properties-stepper__copy strong,
.kyc-properties-stepper__item.is-complete .kyc-properties-stepper__copy strong {
    color: var(--color-101828);
}

.kyc-properties-card {
    background: var(--color-ffffff);
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-16px);
    box-shadow: 0 1px 3px var(--color-rgba-0-0-0-0-1);
    padding: var(--space-6);
    margin-top: var(--space-6);
}

.kyc-properties-card__head {
    margin-bottom: var(--space-4);
    text-align: right;
}

.kyc-properties-card__head h1 {
    color: var(--color-101828);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 var(--space-2);
}

.kyc-properties-card__head p {
    color: var(--color-6a7282);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.5;
}

.kyc-properties-card__body {
    display: grid;
    gap: var(--space-4);
}

.kyc-properties-form {
    display: grid;
    gap: var(--space-3);
}

.kyc-properties-grid {
    display: grid;
    gap: var(--space-4);
}

.kyc-properties-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kyc-properties-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kyc-properties-row-flex {
    display: flex;
    gap: var(--space-4);
    align-items: stretch;
}

.kyc-properties-grid--3 .kyc-properties-field,
.kyc-properties-row-flex .kyc-properties-field {
    flex: 1;
    min-width: 0;
}

.kyc-properties-field {
    display: grid;
    gap: var(--space-2);
}

.kyc-properties-field>span {
    color: var(--color-0a0a0a);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
    text-align: start;
    display: block;
    margin-bottom: 8px;
}

.kyc-properties-field input,
.kyc-properties-field select,
.kyc-properties-field textarea {
    background: var(--color-rgba-229-229-229-0-3);
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-8px);
    color: var(--color-0a0a0a);
    font-family: inherit;
    font-size: 14px;
    min-height: 40px;
    padding: 8px 12px;
    text-align: right;
    width: 100%;
}

.kyc-properties-field textarea {
    min-height: 88px;
    resize: vertical;
}

.kyc-properties-field input:focus,
.kyc-properties-field select:focus,
.kyc-properties-field textarea:focus {
    border-color: var(--color-2e8a6e);
    box-shadow: 0 0 0 2px var(--color-rgba-46-138-110-0-15);
    outline: none;
}

.kyc-properties-field__error {
    color: var(--color-dc2626);
    font-size: 12px;
    line-height: 1.4;
    text-align: right;
}

.kyc-properties-validation-summary {
    background: var(--color-fff1f2);
    border: 1px solid var(--color-fecdd3);
    border-radius: var(--radius-10px);
    color: var(--color-b42318);
    font-size: 14px;
    padding: 10px 12px;
    text-align: right;
}

.kyc-properties-choice {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
}

.kyc-properties-choice legend {
    color: var(--color-0a0a0a);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2);
    padding: 0 6px;
}

.kyc-properties-choice label {
    align-items: center;
    color: var(--color-364153);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--font-size-sm);
    gap: var(--space-2);
}

.kyc-properties-choice input[type="radio"] {
    accent-color: var(--color-2e8a6e);
    width: 16px;
    height: 16px;
    border-radius: 33554400px;
    border: 1px solid #E5E5E5;
    background: rgba(229, 229, 229, 0.30);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    appearance: none;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.kyc-properties-choice input[type="radio"]:checked {
    border: 1px solid #E5E5E5;
    background: rgba(229, 229, 229, 0.30);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.kyc-properties-choice input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.667px;
    height: 6.667px;
    background: var(--color-2e8a6e);
    border-radius: 50%;
}

.kyc-properties-form--condition {
    gap: 18px;
}

.kyc-properties-choice--utilities {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
}

.kyc-properties-choice--utilities legend {
    margin-bottom: 0;
}

.kyc-properties-choice--utilities .kyc-properties-utilities-row {
    flex: 1 1 auto;
}

.kyc-properties-utilities-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: flex-start;
}

.kyc-properties-choice--utilities label,
.kyc-properties-choice__inline label {
    flex-direction: row-reverse;
}

.kyc-properties-choice--utilities input[type="checkbox"] {
    accent-color: var(--color-2e8a6e);
    height: 20px;
    width: 20px;
    border: 2px solid #e5e7eb;
    border-radius: 4px;
    appearance: none;
    background: white;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.kyc-properties-choice--utilities input[type="checkbox"]:checked {
    border-color: var(--color-2e8a6e);
    background: var(--color-2e8a6e);
}

.kyc-properties-choice--utilities input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

.kyc-properties-services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.kyc-properties-services-grid label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #374151;
    border: unset;
}

.kyc-properties-services-grid label:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

.kyc-properties-services-grid input[type="checkbox"] {
    height: 20px;
    width: 20px;
    border: 2px solid #e5e7eb;
    border-radius: 4px;
    appearance: none;
    background: white;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.kyc-properties-services-grid input[type="checkbox"]:checked {
    border-color: var(--color-2e8a6e);
    background: var(--color-2e8a6e);
}

.kyc-properties-services-grid input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

.kyc-properties-services-grid input[type="checkbox"]:checked+span {
    color: var(--color-2e8a6e);
    font-weight: 500;
}

.kyc-properties-counter-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kyc-properties-counter-field {
    display: grid;
    gap: 8px;
}

.kyc-properties-counter-field>span {
    color: var(--color-0a0a0a);
    font-size: 14px;
    font-weight: 500;
    text-align: right;
}

.kyc-properties-counter-field__control {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
}

.kyc-properties-counter-field__control input {
    background: var(--color-rgba-229-229-229-0-3);
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-8px);
    color: var(--color-0a0a0a);
    font-family: inherit;
    font-size: 15px;
    min-height: 40px;
    padding: 8px 12px;
    text-align: center;
    width: 100%;
}

.kyc-properties-counter-field__control input:focus {
    border-color: var(--color-2e8a6e);
    box-shadow: 0 0 0 2px var(--color-rgba-46-138-110-0-15);
    outline: none;
}


button#checkEligibilityBtn {
    gap: 8px;
    background: #2E8A6E;
    background-color: #2E8A6E;
    align-self: center;

    padding: 8px 16px;
    border-radius: 16px;


    .arrow_icon {
        width: 32px;
        height: 32px;

        img {
            width: 54%;
            height: 100%;

        }
    }
}

.kyc-properties-counter-field__button {
    align-items: center;
    background: var(--color-rgba-229-229-229-0-3);
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-8px);
    color: var(--color-0a0a0a);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 20px;
    height: 40px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 40px;
}

.kyc-properties-counter-field__button:hover {
    border-color: var(--color-cbd5e1);
}

.kyc-properties-counter-field__button:focus-visible {
    border-color: var(--color-2e8a6e);
    box-shadow: 0 0 0 2px var(--color-rgba-46-138-110-0-15);
    outline: none;
}

.kyc-properties-choice--condition-status {
    border-top: 1px solid var(--color-e5e7eb);
    border-radius: 0;
    border-inline: 0;
    border-bottom: 0;
    padding-inline: 0;
    padding-top: 18px;
}

.kyc-properties-choice__inline {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    justify-content: flex-end;
}

.kyc-properties-choice--stacked {
    display: grid;
    gap: 8px;
}

.kyc-properties-choice--slots {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kyc-properties-choice--slots button {
    background: var(--color-rgba-229-229-229-0-3);
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-8px);
    color: var(--color-0a0a0a);
    cursor: pointer;
    font-family: inherit;
    min-height: 38px;
}

.kyc-properties-choice--slots button.is-active {
    background: var(--color-2e8a6e);
    border-color: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.kyc-properties-checklist {
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-10px);
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 14px;
}

.kyc-properties-check {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.kyc-properties-check span {
    color: var(--color-111827);
    font-size: 14px;
}

.kyc-properties-check b {
    color: var(--color-dc2626);
    font-weight: 700;
}

.kyc-properties-card--declarations {
    border-color: var(--color-d9d9d9);
    padding: 28px 24px 20px;
}

.kyc-properties-card--declarations .kyc-properties-card__head {
    margin-bottom: 16px;
}

.kyc-properties-card--declarations .kyc-properties-card__head h1 {
    font-size: 20px;
    line-height: 1.3;
}

.kyc-properties-card--declarations .kyc-properties-card__head p {
    font-size: 16px;
}

.kyc-properties-form--declarations {
    gap: 14px;
}

.kyc-properties-declarations {
    display: grid;
    gap: var(--space-4);
}

.kyc-properties-declaration-card {
    align-items: flex-start;
    background: var(--color-f8f8f8);
    border: 1px solid var(--color-dbdbdb);
    border-radius: var(--radius-14px);
    cursor: pointer;
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
}

.kyc-properties-declaration-card.is-invalid {
    border-color: var(--color-fca5a5);
}

.kyc-properties-declaration-card__toggle {
    display: inline-flex;
    flex-shrink: 0;
}

.kyc-properties-declaration-card__toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-ffffff);
    border: 1.5px solid var(--color-2e8a6e);
    border-radius: var(--radius-5px);
    cursor: pointer;
    height: 20px;
    margin: 2px 0 0;
    position: relative;
    width: 20px;
}

.kyc-properties-declaration-card__toggle input[type="checkbox"]::after {
    border: 2px solid var(--color-ffffff);
    border-right: 0;
    border-top: 0;
    content: "";
    height: 5px;
    inset-inline-start: 4px;
    position: absolute;
    top: 4px;
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
    width: 9px;
}

.kyc-properties-declaration-card__toggle input[type="checkbox"]:checked {
    background: var(--color-2e8a6e);
    border-color: var(--color-2e8a6e);
}

.kyc-properties-declaration-card__toggle input[type="checkbox"]:checked::after {
    transform: rotate(-45deg) scale(1);
}

.kyc-properties-declaration-card__copy {
    display: grid;
    gap: var(--space-2);
    text-align: right;
}

.kyc-properties-declaration-card__copy strong {
    color: var(--color-111827);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.kyc-properties-declaration-card__copy small {
    color: var(--color-7d8591);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.kyc-properties-declaration-card.is-optional .kyc-properties-declaration-card__copy strong {
    color: var(--color-374151);
    font-weight: 600;
}

.kyc-properties-field__error--declaration {
    margin-top: -6px;
    padding-inline: 6px;
}

.kyc-properties-docs {
    display: grid;
    gap: var(--space-3);
}

.kyc-properties-doc-row {
    align-items: center;
    background: var(--color-ffffff);
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-10px);
    display: flex;
    justify-content: space-between;
    min-height: 76px;
    padding: var(--space-3) var(--space-4);
}

.kyc-properties-doc-row.is-error {
    border-color: var(--color-fca5a5);
}

.kyc-properties-doc-row__meta {
    align-items: center;
    display: flex;
    gap: var(--space-4);
    min-width: 50%;
}

.kyc-properties-doc-row__copy {
    display: grid;
    gap: var(--space-1);
    text-align: right;
}

.kyc-properties-doc-row__title {
    align-items: center;
    color: var(--color-101828);
    display: flex;
    font-size: 16px;
    justify-content: flex-end;
    line-height: 1.5;
    margin: 0;
}

.kyc-properties-doc-row__badge {
    background: var(--color-fee2e2);
    border-radius: var(--radius-4px);
    color: var(--color-ef4444);
    font-size: 12px;
    line-height: 16px;
    min-width: 37px;
    padding: 4px 8px;
    text-align: center;
}

.kyc-properties-doc-row__sub {
    color: var(--color-6a7282);
    font-size: 12px;
    line-height: 16px;
    margin: 0;
}

.kyc-properties-doc-row__icon {
    align-items: center;
    border-radius: var(--radius-10px);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.kyc-properties-doc-row__icon svg {
    height: 20px;
    width: 20px;
}

.kyc-properties-doc-row__icon.is-uploaded {
    background: var(--color-dcfce7);
    color: var(--color-22c55e);
}

.kyc-properties-doc-row__icon.is-pending {
    background: var(--color-f3f4f6);
    color: var(--color-9ca3af);
}

.kyc-properties-doc-row__actions {
    align-items: center;
    display: flex;
    direction: ltr;
    justify-content: flex-start;
    min-width: 160px;
}

.kyc-properties-doc-row__uploaded {
    align-items: center;
    display: flex;
    direction: ltr;
    gap: var(--space-3);
}

.kyc-properties-doc-row__uploaded-state {
    align-items: center;
    color: var(--color-00a63e);
    display: inline-flex;
    font-size: 12px;
    gap: 4px;
    line-height: 16px;
}

.kyc-properties-doc-row__uploaded-state svg {
    height: 16px;
    width: 16px;
}

.kyc-properties-doc-row__remove {
    background: transparent;
    border: 0;
    color: var(--color-e7000b);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    padding: 6px 10px;
}

.kyc-properties-doc-row__upload {
    align-items: center;
    background: var(--color-rgba-229-229-229-0-3);
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-8px);
    color: var(--color-0a0a0a);
    cursor: pointer;
    display: inline-flex;
    direction: rtl;
    font-family: inherit;
    font-size: var(--font-size-sm);
    gap: var(--space-3);
    height: 32px;
    justify-content: center;
    width: 98px;
}

.kyc-properties-doc-row__upload svg {
    height: 16px;
    width: 16px;
}

.kyc-properties-btn {
    border: 1px solid transparent;
    border-radius: var(--radius-12px);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-sm);
    min-height: 38px;
    padding: 0 var(--space-4);
}

.kyc-properties-btn--primary {
    background: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.kyc-properties-btn--ghost {
    background: var(--color-rgba-229-229-229-0-3);
    border-color: var(--color-e5e5e5);
    color: var(--color-111827);
}

.kyc-properties-btn--wide {
    width: 100%;
}

.kyc-properties-inline-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-2);
}

.kyc-upload-placeholder,
.field-error {
    color: var(--color-ef4444);
    display: block;
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
}

.kyc-upload-chip {
    align-items: center;
    background: var(--color-f9fafb);
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-10px);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 12px;
    width: 100%;
}

.kyc-upload-chip--modal {
    margin-top: 18px;
}

.kyc-upload-chip__meta {
    display: grid;
    gap: 4px;
    text-align: right;
}

.kyc-upload-chip__meta strong {
    color: var(--color-111827);
    font-size: 13px;
    line-height: 1.4;
}

.kyc-upload-chip__meta small {
    color: var(--color-6b7280);
    font-size: 12px;
    line-height: 1.5;
}

.kyc-upload-chip__remove {
    background: transparent;
    border: 0;
    color: var(--color-b42318);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    padding: 0;
}

.kyc-properties-photo-summary-card {
    background: var(--color-ffffff);
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-16px);
    display: grid;
    gap: 16px;
    padding: 18px;
}

.kyc-properties-photo-summary-card__head {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.kyc-properties-photo-summary-card__copy {
    display: grid;
    gap: 6px;
    text-align: right;
}

.kyc-properties-photo-summary-card__copy h3 {
    color: var(--color-101828);
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
}

.kyc-properties-photo-summary-card__copy p {
    color: var(--color-6b7280);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.kyc-properties-photo-summary-card__progress {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.kyc-properties-photo-summary-card__progress strong {
    color: var(--color-2e8a6e);
    font-size: 15px;
    line-height: 1.4;
}

.kyc-properties-photo-summary-card__progress span {
    color: var(--color-6b7280);
    font-size: 13px;
    line-height: 1.5;
}

.kyc-properties-photo-summary-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}

.kyc-properties-photo-summary-item {
    align-items: flex-end;
    background: var(--color-ffffff);
    border: 1px solid var(--color-d1d5dc);
    border-radius: var(--radius-12px);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 88px;
    padding: 14px 16px;
    text-align: right;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.kyc-properties-photo-summary-item:hover {
    border-color: var(--color-98a2b3);
}

.kyc-properties-photo-summary-item:focus-visible {
    border-color: var(--color-2e8a6e);
    box-shadow: 0 0 0 2px var(--color-rgba-46-138-110-0-15);
    outline: none;
}

.kyc-properties-photo-summary-item strong {
    color: var(--color-101828);
    font-size: 14px;
    line-height: 1.5;
}

.kyc-properties-photo-summary-item small {
    color: var(--color-6b7280);
    font-size: 12px;
    line-height: 1.5;
}

.kyc-properties-photo-summary-item.is-required:not(.has-file) {
    border-color: var(--color-fecaca);
    background: var(--color-fef2f2);
}

.kyc-properties-photo-summary-item.has-file {
    border-color: var(--color-b7ebd3);
    background: var(--color-f0fdf4);
}

.kyc-properties-photo-summary-item.has-file small {
    color: var(--color-2e8a6e);
    font-weight: 700;
}

.kyc-properties-photo-summary-item.has-error {
    border-color: var(--color-f87171);
}

.kyc-properties-status-card {
    border: 1px solid var(--color-b9f8cf);
    border-radius: var(--radius-16px);
    margin-inline: auto;
    max-width: 860px;
    padding: 28px var(--space-7);
    text-align: center;
}

.kyc-properties-status-card.is-success {
    background: var(--color-f0fdf4);
}

.kyc-properties-status-card.is-info {
    background: var(--color-eff6ff);
    border-color: var(--color-bedbff);
}

.kyc-properties-status-card.is-warning {
    background: var(--color-fffbeb);
    border-color: var(--color-fcd34d);
}

.kyc-properties-status-card.is-danger {
    background: var(--color-fef2f2);
    border-color: var(--color-fecaca);
}

.kyc-properties-status-card__icon {
    background: var(--color-dcfce7);
    border-radius: var(--radius-999px);
    color: var(--color-2e8a6e);
    display: inline-flex;
    height: 70px;
    justify-content: center;
    margin-bottom: 12px;
    padding: 16px;
    width: 70px;
}

.kyc-properties-status-card.is-info .kyc-properties-status-card__icon {
    background: var(--color-dbeafe);
    color: var(--color-1d4ed8);
}

.kyc-properties-status-card.is-warning .kyc-properties-status-card__icon,
.kyc-properties-status-card.is-danger .kyc-properties-status-card__icon {
    background: var(--color-fee2e2);
    color: var(--color-b42318);
}

.kyc-properties-status-card__icon svg {
    height: 100%;
    width: 100%;
}

.kyc-properties-status-card__copy h2 {
    color: var(--color-101828);
    font-size: var(--font-size-3xl);
    line-height: 1.2;
    margin: 0 0 var(--space-2);
}

.kyc-properties-status-card__copy p {
    color: var(--color-364153);
    font-size: var(--font-size-md);
    margin: 0;
}

.kyc-properties-status-card__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-4);
}

.kyc-properties-processing-tracker {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.kyc-properties-processing-tracker__item {
    align-items: center;
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-10px);
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    min-height: 42px;
    padding: var(--space-2) var(--space-3);
}

.kyc-properties-processing-tracker__item span {
    background: var(--color-e5e7eb);
    border-radius: var(--radius-50pct);
    display: inline-block;
    height: 10px;
    width: 10px;
}

.kyc-properties-processing-tracker__item.is-active span {
    background: var(--color-2e8a6e);
}

.kyc-properties-processing-tracker__item.is-complete span {
    background: var(--color-16a34a);
}

.kyc-properties-processing-tracker__item strong {
    color: var(--color-111827);
    font-size: var(--font-size-sm);
}

.kyc-properties-payment-card {
    margin-inline: auto;
    max-width: 760px;
}

.kyc-properties-payment-summary {
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-12px);
    display: grid;
    margin-bottom: var(--space-3);
}

.kyc-properties-payment-summary>div {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 10px var(--space-3);
}

.kyc-properties-payment-summary>div+div {
    border-top: 1px solid var(--color-e5e7eb);
}

.kyc-properties-payment-summary span {
    color: var(--color-111827);
    font-size: 14px;
}

.kyc-properties-payment-summary strong {
    color: var(--color-2e8a6e);
    font-size: 16px;
}

.kyc-properties-payment-secure {
    color: var(--color-6b7280);
    font-size: var(--font-size-sm);
    margin: 10px 0 0;
    text-align: center;
}

.kyc-properties-issue-list {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.kyc-properties-issue-list li {
    background: var(--color-f9fafb);
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-10px);
    padding: 10px 12px;
}

.kyc-properties-issue-list strong {
    color: var(--color-101828);
    display: block;
    font-size: var(--font-size-md);
    margin-bottom: var(--space-1);
}

.kyc-properties-issue-list p {
    color: var(--color-6a7282);
    font-size: var(--font-size-sm);
    margin: 0;
}

.kyc-properties-reasons-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0 18px 0 0;
}

.kyc-properties-reasons-list li {
    color: var(--color-7f1d1d);
    font-size: 14px;
}

.kyc-properties-consultation-layout {
    align-items: start;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 340px 1fr;
}

.kyc-properties-consultation-why {
    background: var(--color-eff6ff);
    border: 1px solid var(--color-bedbff);
    border-radius: var(--radius-16px);
    padding: var(--space-5);
}

.kyc-properties-consultation-why h3 {
    color: var(--color-193cb8);
    font-size: var(--font-size-xl);
    margin: 0 0 var(--space-3);
    text-align: right;
}

.kyc-properties-consultation-why ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0 18px 0 0;
}

.kyc-properties-consultation-why li {
    color: var(--color-193cb8);
    font-size: 14px;
}

.kyc-properties-consultation-form {
    display: grid;
    gap: var(--space-3);
}

.kyc-properties-consultation-calendar {
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-12px);
    padding: var(--space-3);
}

.kyc-properties-consultation-calendar__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.kyc-properties-consultation-calendar__head span {
    color: var(--color-111827);
    font-size: 13px;
}

.kyc-properties-consultation-calendar__head strong {
    color: var(--color-111827);
    font-size: 14px;
}

.kyc-properties-consultation-calendar__days {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.kyc-properties-consultation-calendar__days button {
    background: var(--color-ffffff);
    border: 1px solid var(--color-e5e7eb);
    border-radius: var(--radius-8px);
    color: var(--color-111827);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    min-height: 30px;
}

.kyc-properties-consultation-calendar__days button.is-selected {
    background: var(--color-2e8a6e);
    border-color: var(--color-2e8a6e);
    color: var(--color-ffffff);
}

.kyc-properties-modal-root {
    inset: 0;
    position: fixed;
    z-index: 2500;
}

.kyc-properties-modal-backdrop {
    background: var(--color-rgba-0-0-0-0-5);
    border: 0;
    cursor: pointer;
    inset: 0;
    position: absolute;
    width: 100%;
}

.kyc-properties-modal-shell {
    background: var(--color-ffffff);
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-12px);
    box-shadow:
        0 10px 15px var(--color-rgba-0-0-0-0-1),
        0 4px 6px var(--color-rgba-0-0-0-0-08);
    left: 50%;
    max-width: calc(100% - 24px);
    padding: 24px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.kyc-properties-modal-close {
    background: transparent;
    border: 0;
    color: var(--color-6b7280);
    cursor: pointer;
    font-size: 30px;
    inset-inline-end: 14px;
    position: absolute;
    top: 6px;
}

.kyc-properties-modal-head {
    margin-bottom: 12px;
    text-align: right;
}

.kyc-properties-modal-head h2 {
    color: var(--color-111827);
    font-size: 26px;
    margin: 0 0 4px;
}

.kyc-properties-modal-head p {
    color: var(--color-6b7280);
    font-size: 14px;
    margin: 0;
}

.kyc-properties-modal-summary {
    align-items: center;
    background: var(--color-f5f5f5);
    border-radius: var(--radius-10px);
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    margin-bottom: 14px;
    padding: 12px;
}

.kyc-properties-modal-summary__icon {
    background: var(--color-rgba-23-23-23-0-1);
    border-radius: var(--radius-999px);
    color: var(--color-111827);
    display: inline-flex;
    height: 44px;
    padding: 10px;
    width: 44px;
}

.kyc-properties-modal-summary p {
    color: var(--color-4a5565);
    font-size: 14px;
    margin: 0;
}

.kyc-properties-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.kyc-properties-upload-modal {
    background: var(--color-ffffff);
    border: 1.098px solid var(--color-e5e5e5);
    border-radius: var(--radius-10px);
    box-shadow:
        0 10px 15px var(--color-rgba-0-0-0-0-1),
        0 4px 6px var(--color-rgba-0-0-0-0-08);
    left: 50%;
    max-height: calc(100vh - 40px);
    max-width: calc(100% - 24px);
    overflow: auto;
    padding: 16px 24px 24px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.kyc-properties-upload-modal .kyc-properties-modal-close {
    color: var(--color-rgba-10-10-10-0-7);
    font-size: 22px;
    inset-inline-end: 18px;
    line-height: 1;
    top: 10px;
}

.kyc-properties-upload-modal__head {
    margin-bottom: 14px;
    text-align: right;
}

.kyc-properties-upload-modal__head h2 {
    color: var(--color-101828);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.72px;
    line-height: 32px;
    margin: 0;
}

.kyc-properties-upload-modal__head p {
    color: var(--color-4a5565);
    font-size: 14px;
    line-height: 20px;
    margin: 8px 0 0;
}

.kyc-properties-upload-progress {
    background: var(--color-f9fafb);
    border: 1.098px solid var(--color-e5e7eb);
    border-radius: var(--radius-10px);
    margin-bottom: 14px;
    padding: 16px 17px;
}

.kyc-properties-upload-progress__labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.kyc-properties-upload-progress__labels strong {
    color: var(--color-2e8a6e);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.kyc-properties-upload-progress__labels span {
    color: var(--color-364153);
    font-size: 14px;
    line-height: 20px;
}

.kyc-properties-upload-progress__bar {
    background: var(--color-e5e7eb);
    border-radius: var(--radius-999px);
    height: 8px;
    overflow: hidden;
}

.kyc-properties-upload-progress__bar span {
    background: var(--color-2e8a6e);
    display: block;
    height: 100%;
}

.kyc-properties-upload-modal__body {
    min-height: 402px;
}

.kyc-properties-upload-modal__stage {
    display: grid;
    gap: 12px;
}

.kyc-properties-upload-modal__types-title {
    color: var(--color-364153);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    text-align: right;
}

.kyc-properties-upload-modal__types-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kyc-properties-upload-modal__empty {
    color: var(--color-6a7282);
    font-size: 13px;
    grid-column: 1 / -1;
    margin: 0;
    text-align: center;
}

.kyc-properties-upload-modal__type-card {
    align-items: center;
    background: var(--color-ffffff);
    border: 1.098px solid var(--color-d1d5dc);
    border-radius: var(--radius-10px);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    gap: 8px;
    justify-content: center;
    min-height: 110px;
    padding: 12px 10px;
    text-align: center;
}

.kyc-properties-upload-modal__type-card.is-active {
    background: var(--color-f8fafc);
    border-color: var(--color-98a2b3);
}

.kyc-properties-upload-modal__type-icon {
    align-items: center;
    background: var(--color-f3f4f6);
    border-radius: var(--radius-999px);
    color: var(--color-667085);
    display: inline-flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.kyc-properties-upload-modal__type-icon svg {
    height: 24px;
    width: 24px;
}

.kyc-properties-upload-modal__type-label {
    color: var(--color-101828);
    font-size: 14px;
    line-height: 20px;
}

.kyc-properties-upload-modal__type-status {
    color: var(--color-6b7280);
    font-size: 12px;
    line-height: 16px;
}

.kyc-properties-upload-modal__type-card.has-file {
    background: var(--color-f0fdf4);
    border-color: var(--color-b7ebd3);
}

.kyc-properties-upload-modal__type-card.has-file .kyc-properties-upload-modal__type-status {
    color: var(--color-2e8a6e);
    font-weight: 700;
}

.kyc-properties-upload-modal__back-row {
    align-items: center;
    background: #f3f4f6;
    border: 0;
    border-radius: var(--radius-6-8px);
    color: var(--color-0a0a0a);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 14px;
    justify-content: space-between;
    line-height: 20px;
    padding: 6px 12px;
    text-align: right;
}

.kyc-properties-upload-modal__back-row:hover {
    background: var(--color-rgba-229-231-235-0-35);
}

.kyc-properties-upload-modal__back-icon {
    align-items: center;
    color: var(--color-0a0a0a);
    display: inline-flex;
    height: 16px;
    justify-content: center;
    width: 16px;
}

.kyc-properties-upload-modal__back-icon svg {
    height: 16px;
    width: 16px;
}

.kyc-properties-upload-modal__selected-row {
    align-items: center;
    background: var(--color-f9fafb);
    border: 1.098px solid var(--color-e5e7eb);
    border-radius: var(--radius-10px);
    display: flex;
    gap: 12px;
    min-height: 62px;
    padding: 0 17px;
}

.kyc-properties-upload-modal__selected-icon {
    color: var(--color-98a2b3);
    display: inline-flex;
    height: 24px;
    width: 24px;
}

.kyc-properties-upload-modal__selected-icon svg {
    height: 24px;
    width: 24px;
}

.kyc-properties-upload-modal__selected-row strong {
    color: var(--color-101828);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.36px;
    line-height: 28px;
}

.kyc-properties-upload-modal__detail-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kyc-properties-upload-modal__upload-card {
    align-items: center;
    border: 1.098px solid var(--color-d1d5dc);
    border-radius: var(--radius-10px);
    display: flex;
    flex-direction: column;
    /* min-height: 366px; */
    padding: 24px 18px;
    text-align: center;
}

.kyc-properties-upload-modal__upload-icon {
    align-items: center;
    background: var(--color-f3f4f6);
    border-radius: var(--radius-999px);
    color: var(--color-667085);
    display: inline-flex;
    height: 64px;
    justify-content: center;
    margin-bottom: 12px;
    width: 64px;
}

.kyc-properties-upload-modal__upload-icon svg {
    height: 32px;
    width: 32px;
}

.kyc-properties-upload-modal__upload-card h4 {
    color: var(--color-101828);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

.kyc-properties-upload-modal__upload-card p {
    color: var(--color-6a7282);
    font-size: 12px;
    line-height: 16px;
    margin: 8px 0 0;
    max-width: 145px;
}

.kyc-properties-upload-modal__upload-preview {
    width: 100%;
}

.kyc-properties-upload-modal__upload-note {
    color: var(--color-6b7280);
    font-size: 12px;
    line-height: 1.6;
    margin: 16px 0 0;
    text-align: center;
}

.kyc-properties-upload-modal__upload-actions {
    display: grid;
    gap: 8px;
    margin-top: 30px;
    max-width: 157px;
    width: 100%;
}

.kyc-properties-upload-modal__action-btn {
    align-items: center;
    border-radius: var(--radius-6-8px);
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
}

.kyc-properties-upload-modal__action-icon {
    display: inline-flex;
    height: 16px;
    width: 16px;
}

.kyc-properties-upload-modal__action-icon svg {
    height: 16px;
    width: 16px;
}

.kyc-properties-upload-modal__detail-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

.kyc-properties-upload-modal__guidelines-card {
    background: var(--color-eff6ff);
    border: 1.098px solid var(--color-bedbff);
    border-radius: var(--radius-10px);
    display: grid;
    gap: 12px;
    /* min-height: 260px; */
    height: fit-content;
    padding: 16px;
}

.kyc-properties-upload-modal__guidelines-head {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
}

.kyc-properties-upload-modal__guidelines-icon {
    color: var(--color-155dfc);
    display: inline-flex;
    height: 20px;
    width: 20px;
}

.kyc-properties-upload-modal__guidelines-icon svg {
    height: 20px;
    width: 20px;
}

.kyc-properties-upload-modal__guidelines-head h4 {
    color: var(--color-1c398e);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.35px;
    line-height: 20px;
    margin: 0;
}

.kyc-properties-upload-modal__guidelines-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0 16px 0 0;
}

.kyc-properties-upload-modal__guidelines-list li {
    color: var(--color-193cb8);
    font-size: 12px;
    line-height: 16px;
    text-align: right;
}

.kyc-properties-upload-modal__tip-card {
    align-items: flex-start;
    background: var(--color-fffbeb);
    border: 1.098px solid var(--color-fee685);
    border-radius: var(--radius-10px);
    color: var(--color-7b3306);
    display: flex;
    gap: 8px;
    /* min-height: 94px; */
    height: fit-content;
    padding: 16px;
}

.kyc-properties-upload-modal__tip-icon {
    display: inline-flex;
    flex: 0 0 auto;
    height: 20px;
    width: 20px;
}

.kyc-properties-upload-modal__tip-icon svg {
    height: 20px;
    width: 20px;
}

.kyc-properties-upload-modal__tip-card p {
    color: var(--color-7b3306);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    margin: 0;
    text-align: right;
}

.kyc-properties-upload-modal__foot {
    align-items: center;
    border-top: 1.098px solid var(--color-e5e5e5);
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 10px;
}

.kyc-properties-upload-modal__footer-status {
    color: var(--color-4a5565);
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    text-align: right;
}

.kyc-properties-upload-modal__footer-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.kyc-properties-upload-modal__footer-actions .kyc-properties-btn {
    border-radius: var(--radius-6-8px);
    min-height: 36px;
    padding: 0 17px;
}

.kyc-properties-upload-modal__submit.is-disabled,
.kyc-properties-upload-modal__submit:disabled {
    background: var(--color-d1d5dc);
    border-color: var(--color-d1d5dc);
    color: var(--color-98a2b3);
    cursor: not-allowed;
}

@media (max-width: 1200px) {
    .kyc-properties-stepper__inner {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .kyc-properties-consultation-layout {
        grid-template-columns: 1fr;
    }

    .kyc-properties-upload-modal {
        width: 94vw;
    }

    .kyc-properties-card--declarations .kyc-properties-card__head h1 {
        font-size: 28px;
    }

    .kyc-properties-declaration-card {
        min-height: 82px;
    }

    .kyc-properties-declaration-card__copy strong {
        font-size: 19px;
    }

    .kyc-properties-doc-row {
        padding-inline: 14px;
    }
}

@media (max-width: 980px) {
    .kyc-properties-main {
        padding: 0 0 116px;
        overflow: hidden;
    }

    .kyc-properties-photo-summary-card__head {
        align-items: stretch;
        flex-direction: column;
    }

    .kyc-properties-photo-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kyc-properties-page .kyc-stepper {
        display: flex;
        flex-direction: row;
        direction: rtl;
        align-items: center;
        justify-content: flex-start;
        min-height: 75px;
        padding: 11px 16px;
        gap: 0;
        border-top: 1.098px solid var(--color-rgb-0-0-0-10pct);
        border-bottom: 1.098px solid var(--color-rgb-0-0-0-10pct);
        background: var(--color-ffffff);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        scroll-padding-inline: 16px;
    }

    .kyc-properties-page .kyc-stepper::-webkit-scrollbar {
        display: none;
    }

    .kyc-properties-page .kyc-stepper__item {
        position: relative;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-start;
        gap: 7.992px;
        min-width: 81.993px;
        flex: 0 0 auto;
        padding-inline-end: 42px;
        color: var(--color-99a1af);
        scroll-snap-align: start;
    }

    .kyc-properties-page .kyc-stepper__item::after {
        content: "";
        position: absolute;
        inset-inline-end: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 4px;
        border-radius: var(--radius-999px);
        background: var(--color-e5e7eb);
    }

    .kyc-properties-page .kyc-stepper__item:last-child {
        padding-inline-end: 0;
    }

    .kyc-properties-page .kyc-stepper__item:last-child::after {
        display: none;
    }

    .kyc-properties-page .kyc-stepper__number {
        width: 31.984px;
        height: 31.984px;
        border: 0;
        border-radius: var(--radius-999px);
        background: var(--color-f3f4f6);
        color: var(--color-99a1af);
        font-size: 16px;
        font-weight: 400;
    }

    .kyc-properties-page .kyc-stepper__copy h3 {
        margin: 0;
        color: var(--color-99a1af);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-align: right;
        white-space: nowrap;
    }

    .kyc-properties-page .kyc-stepper__copy p {
        display: none;
    }

    .kyc-properties-page .kyc-stepper__item.is-active .kyc-stepper__number,
    .kyc-properties-page .kyc-stepper__item.is-complete .kyc-stepper__number {
        background: var(--color-2e8a6e);
        color: var(--color-ffffff);
    }

    .kyc-properties-page .kyc-stepper__item.is-active .kyc-stepper__copy h3,
    .kyc-properties-page .kyc-stepper__item.is-complete .kyc-stepper__copy h3 {
        color: var(--color-101828);
    }

    .kyc-properties-card {
        width: 100%;
        margin: 24px auto 0;
        border-radius: var(--radius-16px);
        border: 1.098px solid var(--color-cccccc);
        box-shadow: none;
        padding: 24px 16px;
    }

    .kyc-properties-card__head {}

    .kyc-properties-card__head h1 {
        color: var(--color-101828);
        font-size: 20px;
        font-weight: 700;
        line-height: 28px;
        margin-bottom: 8px;
    }

    .kyc-properties-card__head p {
        color: var(--color-6a7282);
        font-size: 14px;
        line-height: 20px;
    }

    .kyc-properties-card__body {
        gap: 24px;
    }

    .kyc-properties-form,
    .kyc-properties-form--step1 {
        gap: 16px;
    }

    .kyc-properties-grid,
    .kyc-properties-grid--2,
    .kyc-properties-grid--3,
    .kyc-properties-choice--slots {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .kyc-properties-field {
        gap: 8px;
    }

    .kyc-properties-field>span {
        color: var(--color-0a0a0a);
        font-size: 14px;
        font-weight: 400;
        line-height: 14px;
    }

    .kyc-properties-field input,
    .kyc-properties-field select,
    .kyc-properties-field textarea {
        min-height: 36px;
        border-radius: var(--radius-6-8px);
        border: 1px solid var(--color-e5e5e5);
        background: var(--color-rgba-229-229-229-0-3);
        color: var(--color-0a0a0a);
        font-size: 14px;
        line-height: 20px;
        padding: 4px 12px;
    }

    .kyc-properties-field textarea {
        min-height: 88px;
    }

    .kyc-properties-field input::placeholder,
    .kyc-properties-field textarea::placeholder {
        color: var(--color-737373);
    }

    .kyc-properties-choice {
        gap: 12px;
        border-radius: var(--radius-10px);
        border-color: var(--color-e5e5e5);
    }

    .kyc-properties-choice legend {
        margin-bottom: 0;
        color: var(--color-0a0a0a);
        font-size: 14px;
        line-height: 14px;
    }

    .kyc-properties-choice label {
        color: var(--color-0a0a0a);
        font-size: 14px;
        gap: 8px;
    }

    .kyc-properties-choice input[type="radio"] {
        width: 18px;
        height: 18px;
    }

    .kyc-properties-choice input[type="radio"]:checked::after {
        width: 6px;
        height: 6px;
    }

    .kyc-properties-choice--utilities input[type="checkbox"],
    .kyc-properties-services-grid input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    .kyc-properties-choice--utilities input[type="checkbox"]:checked::after,
    .kyc-properties-services-grid input[type="checkbox"]:checked::after {
        font-size: 12px;
    }

    .kyc-properties-services-grid {
        flex-wrap: wrap;
        gap: 12px;
    }

    .kyc-properties-services-grid label {
        padding: 10px 12px;
        font-size: 13px;
    }

    .kyc-properties-utilities-row,
    .kyc-properties-choice__inline {
        gap: 10px 16px;
    }

    .kyc-properties-counter-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .kyc-properties-utilities-row {
        justify-content: space-between;
    }

    .kyc-properties-counter-field__control {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        gap: 8px;
    }

    .kyc-properties-counter-field__button,
    .kyc-properties-counter-field__control input {
        min-height: 36px;
        height: 36px;
    }

    .kyc-properties-choice--slots button {
        min-height: 42px;
        border-radius: var(--radius-16px);
    }

    .kyc-properties-card--declarations {
        padding: 24px 16px;
    }

    .kyc-properties-card--declarations .kyc-properties-card__head h1 {
        font-size: 20px;
        line-height: 28px;
    }

    .kyc-properties-card--declarations .kyc-properties-card__head p {
        font-size: 14px;
        line-height: 20px;
    }

    .kyc-properties-declarations {
        gap: 16px;
    }

    .kyc-properties-declaration-card {
        min-height: 0;
        padding: 16px;
        border-radius: var(--radius-10px);
        border-color: var(--color-e5e5e5);
        background: var(--color-f9fafb);
    }

    .kyc-properties-declaration-card__toggle input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-top: 0;
        border-radius: var(--radius-4px);
    }

    .kyc-properties-declaration-card__toggle input[type="checkbox"]::after {
        inset-inline-start: 3px;
        top: 3px;
        width: 7px;
        height: 4px;
    }

    .kyc-properties-declaration-card__copy strong {
        font-size: 14px;
        line-height: 19.25px;
    }

    .kyc-properties-declaration-card__copy small {
        color: var(--color-6a7282);
        font-size: 12px;
        line-height: 16px;
    }

    .kyc-properties-doc-row {
        align-items: flex-start;
        display: grid;
        gap: 12px;
        min-height: 0;
        padding: 12px 16px;
        border-radius: var(--radius-10px);
    }

    .kyc-properties-doc-row__meta {
        width: 100%;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
    }

    .kyc-properties-doc-row__title {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 14px;
        line-height: 20px;
    }

    .kyc-properties-doc-row__sub {
        font-size: 12px;
        line-height: 16px;
    }

    .kyc-properties-doc-row__actions {
        justify-content: flex-end;
        min-width: 0;
        width: 100%;
    }

    .kyc-properties-doc-row__upload {
        min-height: 36px;
        height: auto;
    }

    .kyc-properties-page .kyc-action-bar {
        border-top: 1.098px solid var(--color-e5e5e5);
        background: var(--color-ffffff);
        box-shadow: 0 -4px 6px var(--color-rgb-0-0-0-10pct);
    }

    .kyc-properties-page .kyc-action-bar__inner {
        min-height: 61px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .kyc-properties-page .kyc-action-bar__left,
    .kyc-properties-page .kyc-action-bar__right {
        width: auto;
        justify-self: auto;
    }

    .kyc-properties-page .kyc-action-bar__center,
    .kyc-properties-page .kyc-action-bar__progress {
        display: none;
    }

    .kyc-properties-page .kyc-action-bar__left {
        justify-content: flex-start;
        gap: 10px;
    }

    .kyc-properties-page .kyc-action-bar__primary {
        min-height: 33px;
        border-radius: var(--radius-6-8px);
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
        padding: 0 15px;
    }

    .kyc-properties-page .kyc-action-bar__arrow {
        width: 20px;
        height: 20px;
    }

    .kyc-properties-page .kyc-action-bar__draft {
        font-size: 13px;
        line-height: 18px;
        color: var(--color-6a7282);
        gap: 4px;
    }

    .kyc-properties-page .kyc-action-bar__draft-icon {
        width: 16px;
        height: 16px;
    }

    .kyc-properties-page .kyc-action-bar__right .kyc-action-bar__exit {
        width: auto;
        min-height: 35px;
        min-width: 78px;
        padding: 0 12px;
        border-radius: var(--radius-6-8px);
        border: 1.098px solid var(--color-e5e5e5);
        background: var(--color-rgb-229-229-229-30pct);
        color: var(--color-231f20);
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }

    .kyc-properties-page .kyc-action-bar__exit-icon {
        width: 20px;
        height: 20px;
    }

    .kyc-properties-status-card {
        width: min(360px, calc(100% - 32px));
        padding: 24px 16px;
        border-radius: var(--radius-16px);
    }

    .kyc-properties-status-card__copy h2 {
        font-size: 24px;
        line-height: 1.3;
    }

    .kyc-properties-status-card__copy p {
        font-size: 14px;
        line-height: 20px;
    }

    .kyc-properties-inline-actions,
    .kyc-properties-status-card__actions,
    .kyc-properties-modal-actions {
        flex-direction: column;
    }

    .kyc-properties-btn {
        width: 100%;
        min-height: 36px;
        border-radius: var(--radius-6-8px);
    }

    .kyc-properties-consultation-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .kyc-properties-upload-modal,
    .kyc-properties-modal-shell {
        width: min(360px, calc(100vw - 16px));
        padding: 24px 16px 16px;
        border-radius: var(--radius-10px);
    }

    .kyc-properties-upload-modal {
        max-height: calc(100vh - 16px);
    }

    .kyc-properties-upload-modal__head h2 {
        font-size: 24px;
        line-height: 32px;
    }

    .kyc-properties-upload-modal__head p {
        font-size: 14px;
        line-height: 20px;
    }

    .kyc-properties-upload-progress {
        padding: 16px;
        border-radius: var(--radius-10px);
    }

    .kyc-properties-upload-modal__body {
        min-height: 0;
    }

    .kyc-properties-upload-modal__types-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .kyc-properties-upload-modal__type-card {
        min-height: 110px;
    }

    .kyc-properties-upload-modal__detail-grid {
        grid-template-columns: 1fr;
    }

    .kyc-properties-upload-modal__upload-card,
    .kyc-properties-upload-modal__guidelines-card {
        min-height: 0;
        padding: 16px;
    }

    .kyc-properties-upload-modal__foot {
        align-items: stretch;
        gap: 10px;
    }

    .kyc-properties-upload-modal__footer-actions {}

    .kyc-properties-upload-modal__footer-actions .kyc-properties-btn {
        flex: 1 1 0;
    }
}

.kyc-properties-post-upload-processing {
    background: var(--color-ffffff);
    border: 1.111px solid var(--color-e5e7eb);
    border-radius: var(--radius-10px);
    left: 50%;
    max-width: calc(100% - 24px);
    padding: 48px 24px 24px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 446px;
}

.kyc-properties-post-upload-processing__icon {
    align-items: center;
    border: 3px solid var(--color-rgb-46-138-110-25pct);
    border-radius: var(--radius-999px);
    color: var(--color-2e8a6e);
    display: inline-flex;
    height: 80px;
    justify-content: center;
    margin-bottom: 20px;
    width: 80px;
}

.kyc-properties-post-upload-processing__icon svg {
    height: 40px;
    width: 40px;
}

.kyc-properties-post-upload-processing h2 {
    color: var(--color-1a1a1a);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.kyc-properties-post-upload-processing p {
    color: var(--color-6b7280);
    font-size: 16px;
    line-height: 1.5;
    margin: 8px auto 0;
    max-width: 385px;
}

.kyc-properties-post-upload-processing__bar {
    background: var(--color-rgb-46-138-110-20pct);
    border-radius: var(--radius-999px);
    height: 8px;
    margin-top: 20px;
    overflow: hidden;
}

.kyc-properties-post-upload-processing__bar span {
    background: var(--color-2e8a6e);
    display: block;
    height: 100%;
    transition: width 2500ms linear;
    width: 0;
}

.kyc-properties-post-upload-processing small {
    color: var(--color-6b7280);
    display: block;
    font-size: 14px;
    margin-top: 8px;
}

.kyc-properties-post-upload-success {
    background: var(--color-f0fdf4);
    border: 1px solid var(--color-b9f8cf);
    border-radius: var(--radius-16px);
    left: 50%;
    max-width: calc(100% - 24px);
    padding: 33px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 736px;
}

.kyc-properties-post-upload-success__icon {
    align-items: center;
    background: var(--color-dcfce7);
    border-radius: var(--radius-999px);
    color: var(--color-2e8a6e);
    display: inline-flex;
    height: 80px;
    justify-content: center;
    margin-bottom: 18px;
    width: 80px;
}

.kyc-properties-post-upload-success__icon svg {
    height: 40px;
    width: 40px;
}

.kyc-properties-post-upload-success h2 {
    color: var(--color-2e8a6e);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.35;
    margin: 0;
}

.kyc-properties-post-upload-success p {
    color: var(--color-364153);
    font-size: 16px;
    line-height: 1.5;
    margin: 12px auto 0;
    max-width: 670px;
}

.kyc-properties-post-upload-success__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 24px;
}

.kyc-properties-post-upload-success__actions .kyc-properties-btn {
    border-radius: var(--radius-16px);
    min-height: 36px;
}

.kyc-properties-legal-processing {
    direction: rtl;
    display: grid;
    justify-items: center;
    margin-inline: auto;
    max-width: 446px;
    row-gap: 13px;
    text-align: center;
}

.kyc-properties-legal-processing__icon {
    align-items: center;
    border: 2px solid var(--color-2e8a6e);
    border-radius: var(--radius-999px);
    color: var(--color-2e8a6e);
    display: inline-flex;
    height: 80px;
    justify-content: center;
    width: 80px;
}

.kyc-properties-legal-processing__icon svg {
    height: 40px;
    width: 40px;
}

.kyc-properties-legal-processing h2 {
    color: var(--color-1a1a1a);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    margin: 0;
}

.kyc-properties-legal-processing__copy {
    width: 398px;
}

.kyc-properties-legal-processing__description,
.kyc-properties-legal-processing__sub {
    color: var(--color-6a7282);
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

.kyc-properties-legal-processing__sub {
    color: var(--color-c9c9c9);
}

.kyc-properties-legal-processing__stepper {
    align-items: flex-start;
    display: flex;
    height: 56px;
    justify-content: space-between;
    margin-top: 0;
    position: relative;
    width: 364px;
}

.kyc-properties-legal-processing__step {
    align-items: center;
    display: grid;
    position: relative;
    row-gap: 8px;
}

.kyc-properties-legal-processing__step--submitted {
    width: 59px;
}

.kyc-properties-legal-processing__step--review {
    width: 78px;
}

.kyc-properties-legal-processing__step--result {
    width: 35px;
}

.kyc-properties-legal-processing__step:not(:last-child)::before {
    background: var(--color-e5e7eb);
    border-radius: var(--radius-999px);
    content: "";
    height: 4px;
    left: -80px;
    position: absolute;
    top: 14px;
    width: 64px;
}

.kyc-properties-legal-processing__step.is-complete:not(:last-child)::before {
    background: var(--color-171717);
}

.kyc-properties-legal-processing__badge {
    align-items: center;
    background: var(--color-f3f4f6);
    border-radius: var(--radius-999px);
    color: var(--color-99a1af);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    height: 32px;
    justify-content: center;
    line-height: 20px;
    width: 32px;
}

.kyc-properties-legal-processing__step.is-complete .kyc-properties-legal-processing__badge {
    background: var(--color-171717);
    color: var(--color-ffffff);
}

.kyc-properties-legal-processing__step.is-complete .kyc-properties-legal-processing__badge svg {
    height: 20px;
    width: 20px;
}

.kyc-properties-legal-processing__step.is-active .kyc-properties-legal-processing__badge {
    background: var(--color-rgb-23-23-23-50pct);
    color: var(--color-ffffff);
}

.kyc-properties-legal-processing__step strong {
    color: var(--color-171717);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}

.kyc-properties-legal-processing__step.is-pending strong {
    color: var(--color-99a1af);
}

.kyc-properties-legal-needs-fix {
    margin-inline: auto;
    max-width: 448px;
    text-align: center;
}

.kyc-properties-legal-needs-fix__icon {
    align-items: center;
    background: var(--color-fef3c6);
    border-radius: var(--radius-999px);
    color: var(--color-d97706);
    display: inline-flex;
    height: 96px;
    justify-content: center;
    margin-bottom: 16px;
    width: 96px;
}

.kyc-properties-legal-needs-fix__icon svg {
    height: 48px;
    width: 48px;
}

.kyc-properties-legal-needs-fix__copy h2 {
    color: var(--color-101828);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}

.kyc-properties-legal-needs-fix__copy p {
    color: var(--color-6a7282);
    font-size: 16px;
    line-height: 1.5;
    margin: 8px 0 0;
}

.kyc-properties-legal-needs-fix__issues {
    background: var(--color-ffffff);
    border: 1px solid var(--color-e5e5e5);
    border-radius: var(--radius-10px);
    margin-top: 24px;
    overflow: hidden;
    text-align: right;
}

.kyc-properties-legal-needs-fix__issues header {
    align-items: center;
    background: var(--color-fffbeb);
    border-bottom: 1px solid var(--color-fef3c6);
    color: var(--color-973c00);
    display: flex;
    font-size: 16px;
    font-weight: 700;
    justify-content: flex-start;
    min-height: 49px;
    padding: 0 16px;
}

.kyc-properties-legal-needs-fix__issues ul {
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 16px;
}

.kyc-properties-legal-needs-fix__issues li {
    align-items: center;
    color: var(--color-364153);
    display: flex;
    font-size: 14px;
    gap: 12px;
    justify-content: flex-start;
}

.kyc-properties-legal-needs-fix__issues li svg {
    color: var(--color-f04438);
    height: 16px;
    width: 16px;
}

.kyc-properties-legal-needs-fix__actions {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

.kyc-properties-legal-needs-fix__actions .kyc-properties-btn {
    border-radius: var(--radius-6-8px);
    flex: 1 1 0;
    min-height: 36px;
}

.doc-correction-processing {
    padding-bottom: 16px;
}

.doc-correction-processing-stepper {
    gap: 86px;
    grid-template-columns: repeat(3, minmax(0, max-content));
    justify-content: center;
}

.doc-correction-processing-stepper__item {
    position: relative;
}

.doc-correction-processing-stepper__item:not(:last-child)::before {
    background: var(--color-e5e7eb);
    border-radius: var(--radius-999px);
    content: "";
    height: 4px;
    right: calc(100% + 8px);
    position: absolute;
    top: 14px;
    width: 64px;
}

.doc-correction-processing-stepper__item.is-complete:not(:last-child)::before {
    background: var(--color-171717);
}

@media (max-width: 980px) {
    .kyc-properties-post-upload-processing {
        width: min(360px, calc(100vw - 16px));
        padding: 32px 16px 20px;
    }

    .kyc-properties-post-upload-processing h2 {
        font-size: 28px;
    }

    .kyc-properties-post-upload-success {
        padding: 24px 16px;
        width: min(360px, calc(100vw - 16px));
    }

    .kyc-properties-post-upload-success h2 {
        font-size: 22px;
    }

    .kyc-properties-post-upload-success__actions {
        flex-direction: column;
    }

    .kyc-properties-legal-processing {
        max-width: min(446px, 100%);
        row-gap: 10px;
    }

    .kyc-properties-legal-processing h2 {
        font-size: 22px;
        line-height: 30px;
    }

    .kyc-properties-legal-processing__copy {
        width: min(398px, 100%);
    }

    .kyc-properties-legal-processing__description,
    .kyc-properties-legal-processing__sub {
        font-size: 14px;
        line-height: 22px;
    }

    .kyc-properties-legal-processing__stepper {
        width: min(364px, 100%);
    }

    .kyc-properties-legal-processing__step--submitted {
        width: 52px;
    }

    .kyc-properties-legal-processing__step--review {
        width: 74px;
    }

    .kyc-properties-legal-processing__step--result {
        width: 35px;
    }

    .kyc-properties-legal-processing__step:not(:last-child)::before {
        left: -52px;
        width: 40px;
    }

    .kyc-properties-legal-needs-fix__copy h2 {
        font-size: 24px;
    }

    .kyc-properties-legal-needs-fix__actions {
        flex-direction: column;
    }

    .doc-correction-processing-stepper {
        grid-template-columns: 1fr;
    }

    .doc-correction-processing-stepper__item:not(:last-child)::before {
        display: none;
    }
}

@media (max-width: 360px) {
    .kyc-properties-page .kyc-stepper {
        padding-inline: 10px;
    }

    .kyc-properties-page .kyc-stepper__item {
        min-width: 76px;
        padding-inline-end: 32px;
    }

    .kyc-properties-page .kyc-stepper__item::after {
        width: 24px;
    }

    .kyc-properties-card,
    .kyc-properties-status-card,
    .kyc-properties-upload-modal,
    .kyc-properties-modal-shell {
        width: 100%;
    }

    .kyc-properties-page .kyc-action-bar__inner {
        padding-inline: 10px;
    }

    .kyc-properties-page .kyc-action-bar__left {
        gap: 6px;
    }
}



/* @media (min-width: 1536px) {
    .container {
        max-width: 1520px;
    }
}

@media (max-width: 767px) {
    .container {
        width: 100%;
        max-width: 100%;
        padding-inline: 16px;
        box-sizing: border-box;
    }
} */



/* Mobile */
@media (max-width: 767px) {
    .container {
        width: 100%;
        max-width: 100%;
        padding-inline: 16px;
        box-sizing: border-box;
    }

    .kyc-properties-photo-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Desktop / large tablets (from smaller to bigger) */

/* >= 768px */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

/* >= 992px */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

/* >= 1200px */
@media (min-width: 1200px) {
    .container {
        max-width: 1150px;
    }
}

/* >= 1400px */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* keep bigger screens exactly as you already have */
@media (min-width: 1536px) {
    .container {
        max-width: 1390px;
    }
}

@media (min-width: 1760px) {
    .container {
        max-width: 1520px;
    }
}


/* ===== Skeleton (Glass) ===== */
.skeleton {
    position: relative;
}

.skeleton--stack {
    display: grid;
    gap: 12px;
}

.skeleton--inline {
    display: inline-grid;
    width: fit-content;
    gap: 12px;
}

.skeleton--full {
    width: 100%;
}

.skeleton-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-22px);
    border: 1px solid var(--color-d9dee4);
    background: var(--color-f5f5f5);
    box-shadow:
        0 6px 18px -14px var(--color-rgb-15-23-42-45pct),
        0 2px 6px var(--color-rgb-15-23-42-8pct);
    isolation: isolate;
}

.skeleton-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -42%;
    width: 42%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-rgba-204-204-204-0), var(--color-rgba-232-232-232-0-6) 54.574%, var(--color-rgba-196-196-196-0));
    pointer-events: none;
    z-index: 2;
    animation: skeleton-card-lens 2.2s ease-in-out infinite;
}

.skeleton-surface {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--color-c4c4c4);
    z-index: 1;
}

.skeleton-card__media-wrap {
    position: relative;
}

.skeleton-card__media-top {
    position: absolute;
    top: var(--space-4);
    inset-inline: var(--space-4);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.skeleton-card__badge-row {
    display: inline-flex;
    gap: var(--space-2);
    max-width: calc(100% - 80px);
    flex-wrap: wrap;
}

.skeleton-card__media {
    width: 100%;
    height: 250px;
    border-bottom: 1px solid var(--color-e8ebef);
}

.skeleton-card__body {
    background: var(--color-f5f5f5);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.skeleton-facts-grid {
    margin: var(--space-1) 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2) 6px;
}

.skeleton-glass {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--color-rgba-203-213-225-0-92);
    background: linear-gradient(135deg, var(--color-rgba-226-232-240-0-88), var(--color-rgba-203-213-225-0-78) 48%, var(--color-rgba-148-163-184-0-62));
    box-shadow: inset 0 1px 0 var(--color-rgba-248-250-252-0-55), 0 10px 22px -16px var(--color-rgba-15-23-42-0-38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: skeleton-pulse 2.2s ease-in-out infinite;
}

.skeleton-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 12%, var(--color-rgba-248-250-252-0-52) 48%, transparent 84%);
    transform: translateX(110%);
    animation: skeleton-shine 2.4s ease-in-out infinite;
}

.skeleton-media {
    width: 100%;
    height: 172px;
    border-radius: var(--radius-14px);
}

.skeleton-title {
    width: 64%;
    height: 30px;
    border-radius: var(--radius-10px);
}

.skeleton-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.skeleton-row--actions {
    margin-top: var(--space-1);
    gap: var(--space-3);
}

.skeleton-fact {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    white-space: nowrap;
    min-width: 0;
}

.skeleton-price {
    display: grid;
    gap: var(--space-1);
}

.skeleton-pill {
    border-radius: var(--radius-999px);
}

.skeleton-pill--badge-a {
    width: 104px;
    height: 32px;
}

.skeleton-pill--badge-b {
    width: 120px;
    height: 32px;
}

.skeleton-circle {
    flex-shrink: 0;
    border-radius: var(--radius-999px);
}

.skeleton-circle--favorite {
    width: 39px;
    height: 39px;
}

.skeleton-circle--location {
    width: 16px;
    height: 16px;
}

.skeleton-circle--fact {
    width: 16px;
    height: 16px;
}

.skeleton-circle--tiny {
    width: 10px;
    height: 10px;
}

.skeleton-circle--icon {
    width: 44px;
    height: 44px;
}

.skeleton-circle--avatar {
    width: 56px;
    height: 56px;
}

.skeleton-line {
    height: 14px;
    border-radius: var(--radius-999px);
}

.skeleton-line--full {
    width: 100%;
}

.skeleton-line--location {
    width: 62%;
    height: 16px;
}

.skeleton-line--fact {
    width: 72%;
    height: 16px;
}

.skeleton-line--label {
    width: 22%;
    height: 12px;
}

.skeleton-line--price {
    width: 48%;
    height: 34px;
    border-radius: var(--radius-10px);
}

.skeleton-line--term-a {
    width: 34%;
    height: 12px;
}

.skeleton-line--term-b {
    width: 24%;
    height: 12px;
}

.skeleton-line--w96 {
    width: 96%;
}

.skeleton-line--w88 {
    width: 88%;
}

.skeleton-line--w80 {
    width: 80%;
}

.skeleton-line--w72 {
    width: 72%;
}

.skeleton-line--w64 {
    width: 64%;
}

.skeleton-progress {
    width: 100%;
    height: 28.48px;
    border-radius: var(--radius-7-2px);
}

.skeleton-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-999px);
}

.skeleton-button {
    width: 100%;
    min-height: 44px;
    border-radius: var(--radius-9-92px);
}

.skeleton-row--compare-actions .skeleton-button {
    flex: 1 1 auto;
}

.skeleton-button--compare {
    flex: 0 0 92px;
    border-radius: var(--radius-10px);
}

.skeleton-card--home-tailored .skeleton-square--favorite-action {
    display: none;
}

.skeleton-row--terms {
    margin-top: -11px;
    gap: 8.64px;
}

.skeleton-square--favorite-action {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-8px);
    flex-shrink: 0;
}

.skeleton-button--home-tailored {
    flex: 1 1 auto;
    min-width: 0;
}

.skeleton-text {
    display: grid;
    gap: 10px;
}

@keyframes skeleton-pulse {

    0%,
    100% {
        opacity: 0.98;
    }

    50% {
        opacity: 0.78;
    }
}

@keyframes skeleton-shine {
    100% {
        transform: translateX(-110%);
    }
}

@keyframes skeleton-card-lens {
    0% {
        left: -42%;
    }

    100% {
        left: 100%;
    }
}

@media (min-width: 640px) {
    .skeleton-media {
        height: 188px;
    }
}

@media (min-width: 1024px) {
    .skeleton-media {
        height: 214px;
    }
}

@media (max-width: 992px) {
    .home-page #tailored-properties .skeleton-card--home-tailored {
        border-radius: var(--radius-16px);
        border: 1px solid var(--color-rgb-0-0-0-10pct);
        box-shadow:
            0 0 6px var(--color-rgb-0-0-0-2pct),
            0 2px 4px var(--color-rgb-0-0-0-8pct);
    }

    .home-page #tailored-properties .skeleton-card--home-tailored .skeleton-card__media {
        height: 151px;
    }

    .home-page #tailored-properties .skeleton-card--home-tailored .skeleton-circle--favorite {
        display: none;
    }

    .home-page #tailored-properties .skeleton-card--home-tailored .skeleton-card__body {
        padding: var(--space-4);
        gap: var(--space-3);
    }

    .home-page #tailored-properties .skeleton-card--home-tailored .skeleton-title {
        height: 20px;
        border-radius: var(--radius-8px);
    }

    .home-page #tailored-properties .skeleton-card--home-tailored .skeleton-line--location,
    .home-page #tailored-properties .skeleton-card--home-tailored .skeleton-line--fact {
        height: 12px;
    }

    .home-page #tailored-properties .skeleton-card--home-tailored .skeleton-line--label {
        height: 10px;
    }

    .home-page #tailored-properties .skeleton-card--home-tailored .skeleton-line--price {
        height: 22px;
    }

    .home-page #tailored-properties .skeleton-card--home-tailored .skeleton-progress {
        display: none;
    }

    .home-page #tailored-properties .skeleton-card--home-tailored .skeleton-row--terms {
        margin-top: 0;
        background: var(--color-f9fafc);
        border-radius: var(--radius-4px);
        padding: 8px;
        justify-content: flex-start;
        gap: 8px;
    }

    .home-page #tailored-properties .skeleton-card--home-tailored .skeleton-circle--tiny {
        width: 8px;
        height: 10px;
        border-radius: var(--radius-999px);
    }

    .home-page #tailored-properties .skeleton-card--home-tailored .skeleton-dot {
        width: 8px;
        height: 8px;
    }

    .home-page #tailored-properties .skeleton-card--home-tailored .skeleton-row--home-tailored-actions {
        margin-top: 2px;
        gap: 12px;
    }

    .home-page #tailored-properties .skeleton-card--home-tailored .skeleton-square--favorite-action {
        display: inline-flex;
    }

    .home-page #tailored-properties .skeleton-card--home-tailored .skeleton-button--home-tailored {
        min-height: 36px;
        border-radius: var(--radius-8px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .skeleton-glass,
    .skeleton-glass::after,
    .skeleton-card::after {
        animation: none;
    }
}

/* Home typography parity (Figma) */
@media (min-width: 993px) {
    .home-page .hero-section__copy h1 {
        font-size: 52px;
        font-weight: 700;
    }

    .home-page .hero-section__copy p {
        font-size: 30px;
        font-weight: 600;
    }

    .home-page .hero-search__field .hero-search__title {
        font-size: 20px;
        font-weight: 400;
    }

    .home-page .hero-search__control input {
        font-size: 20px;
        font-weight: 400;
    }

    .home-page .hero-search__toggle-text {
        font-size: 20px;
        font-weight: 400;
    }

    .home-page .hero-search__slider-meta label {
        font-size: 20px;
        font-weight: 400;
    }

    .home-page .hero-search__slider-tag {
        font-size: 16px;
        font-weight: 400;
    }

    .home-page .hero-search__submit {
        font-size: 18px;
        font-weight: 400;
    }

    .home-page .hero-step-card h3 {
        font-size: 24px;
        font-weight: 400;
    }

    .home-page .hero-step-card__number {
        font-size: 96px;
        font-weight: 400;
    }

    .home-page .property-nav-card__title {
        font-size: 32px;
        font-weight: 600;
    }

    .home-page .property-nav-card__subtitle {
        font-size: 20px;
        font-weight: 500;
    }

    .home-page .property-nav-card__cta {
        font-size: 20px;
        font-weight: 400;
        gap: 12px;
    }

    .home-page .sale-option-section__title {
        font-size: 32px;
        font-weight: 600;
    }

    .home-page .sale-option-card h3 {
        font-size: 24px;
        font-weight: 600;
    }

    .home-page .sale-option-card p {
        font-size: 18px;
        font-weight: 500;
    }

    .home-page #tailored-properties .section-title {
        font-size: 32px;
        font-weight: 600;
    }

    .home-page #tailored-properties .tailored-properties__tab .landing-tabs__item-label {
        font-size: 18px;
        font-weight: 400;
    }

    .home-page #tailored-properties .tailored-properties__tab.activeTab .landing-tabs__item-label {
        font-size: 18px;
        font-weight: 500;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__title {
        font-size: 21px;
        font-weight: 600;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__date,
    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__facts {
        font-size: 16px;
        font-weight: 400;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__label {
        font-size: 16px;
        font-weight: 400;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__price-value {
        font-size: 24px;
        font-weight: 400;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__price-suffix {
        font-size: 14px;
        font-weight: 400;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__terms {
        font-size: 17px;
        font-weight: 400;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__terms strong {
        font-size: 14px;
        font-weight: 400;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__cta--home-tailored,
    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__cta {
        font-size: 16px;
        font-weight: 500;
    }

    .home-page #tailored-properties .tailored-properties__page,
    .home-page #tailored-properties .tailored-properties__page--active {
        font-size: 13px;
        font-weight: 800;
    }

    .home-page #popular-areas .popular-showcase__title {
        font-size: 32px;
        font-weight: 600;
    }

    .home-page #popular-areas .popular-showcase__name {
        font-size: 26px;
        font-weight: 700;
    }

    .home-page #popular-areas .popular-showcase__price {
        font-size: 16px;
        font-weight: 500;
    }

    .home-page #popular-areas .popular-showcase__cta {
        font-size: 16px;
        font-weight: 500;
    }

    .home-page .partners-section .section-title {
        font-size: 40px;
        font-weight: 600;
    }

    .home-page #calculator .calculator-control h3 {
        font-size: 20px;
        font-weight: 600;
    }

    .home-page #calculator .calculator-control__highlight {
        font-size: 18px;
        font-weight: 400;
    }

    .home-page #calculator .calculator-field__value,
    .home-page #calculator .calculator-field__input {
        font-size: 20px;
        font-weight: 400;
    }

    .home-page #calculator .calculator-control__labels {
        font-size: 16px;
        font-weight: 600;
    }

    .home-page #calculator .calculator-summary__title {
        font-size: 20px;
        font-weight: 400;
    }

    .home-page #calculator .calculator-summary__value span {
        font-size: 64px;
        font-weight: 400;
    }

    .home-page #calculator .calculator-summary__value small {
        font-size: 18px;
        font-weight: 400;
    }

    .home-page #calculator .calculator-summary__note {
        font-size: 15px;
        font-weight: 400;
    }

    .home-page #calculator .calculator-summary__cta {
        font-size: 16px;
        font-weight: 500;
    }

    .footer__column h3,
    .home-page .guest-footer h3 {
        font-size: 24px !important;
        font-weight: 400;
    }

    .home-page .guest-footer li,
    .home-page .guest-footer a,
    .home-page .guest-footer p {
        font-weight: 400;
    }

    .home-page .guest-footer__copyright {
        font-size: 14px;
        font-weight: 400;
    }
}

/* Home property-nav desktop alignment (Figma node 755:22531) */
@media (min-width: 993px) {
    .home-page .property-nav-section {
        padding: 120px 0;
    }

    .home-page .property-nav-card {
        width: 70%;
        /* min-height: 433px; */
        height: auto;
        padding: 30px;
        border-radius: var(--radius-16px);
        box-shadow: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 18px;
        text-align: center;
    }

    .home-page .property-nav-card:hover {
        box-shadow: 0 10px 40px 0 var(--color-rgba-24-26-32-0-08);
    }

    .home-page .property-nav-card__media {
        width: 100%;
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .home-page .property-nav-card .media-placeholder--icon {
        width: 150px;
        height: 150px;
        object-fit: contain;
    }

    .home-page .property-nav-card__title {
        width: 100%;
        margin: 0;
        justify-content: center;
        gap: 0;
        font-size: 32px;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
    }

    .home-page .property-nav-card__title-arrow {
        display: none;
    }

    .home-page .property-nav-card__subtitle {
        width: 100%;
        max-width: 504px;
        margin: 0 auto;
        color: var(--color-181a20);
        font-size: 20px;
        font-weight: 500;
        line-height: 1.45;
        text-align: center;
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
        -webkit-box-orient: initial;
    }

    .home-page .property-nav-card__cta {
        margin-top: auto;
        align-self: center;
        width: 183px;
        min-height: 55px;
        height: 55px;
        border-radius: var(--radius-12px);
        border-color: var(--color-181a20);
        background: var(--color-ffffff);
        color: var(--color-181a20);
    }

    .home-page .property-nav-card__cta svg {
        width: 15px;
        height: 16px;
        margin: 0;
        color: currentColor;
    }

    .home-page .property-nav-card:hover .property-nav-card__cta {
        border-color: transparent;
        background: var(--color-2e8a6e);
        color: var(--color-ffffff);
    }

    .home-page .property-nav-grid>.property-nav-card {
        max-width: 42%;
        justify-self: center;
        border-radius: var(--radius-16px);
        border-color: transparent;
    }
}

@media (max-width: 992px) {
    .logged-navbar__verify {
        font-size: 13px;
        font-weight: 500;
    }

    .home-page .hero-section__copy h1 {
        font-size: 32px;
        font-weight: 700;
    }

    .home-page .hero-section__copy p br {
        display: none;
    }

    .home-page .hero-section__copy p {
        font-size: 19px;
        font-weight: 600;
    }

    .home-page .hero-search-compact__placeholder {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }

    .home-page .hero-search-compact {
        gap: 6px;
    }

    .home-page .hero-search-compact__field {
        padding: 8px 12px;
        gap: 6px;
    }

    .home-page .hero-search-compact__icon {
        width: 20px;
        height: 20px;
    }

    .home-page .hero-search-compact__filter {
        width: 36px;
        height: 36px;
        padding: 6px !important;
        border-radius: var(--radius-14px);
    }

    .home-page .hero-search-compact__filter img {
        width: 20px;
        height: 20px;
    }

    .home-page .mobile-bottom-sheet-panel.hero-filters-sheet {
        max-height: min(82vh, 720px);
        padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
        border-radius: var(--radius-18px-18px-0-0);
    }

    .home-page .hero-filters-sheet .mobile-bottom-sheet__handle {
        width: 44px;
        height: 4px;
        margin: 2px auto 10px;
    }

    .home-page .hero-filters-sheet .hero-search__row {
        gap: 10px;
    }

    .home-page .hero-filters-sheet .hero-search__field {
        gap: 6px;
    }

    .home-page .hero-filters-sheet .hero-search__field .hero-search__title {
        font-size: 14px;
        line-height: 1.25;
    }

    .home-page .hero-filters-sheet .hero-search__control {
        min-height: 44px;
        padding: 5px 10px;
        border-radius: var(--radius-12px);
        gap: 6px;
    }

    .home-page .hero-filters-sheet .hero-search__control input {
        font-size: 15px;
        line-height: 1.25;
    }

    .home-page .hero-filters-sheet .hero-search__chevron {
        width: 20px;
        height: 20px;
    }

    .home-page .hero-filters-sheet .hero-search__toggle {
        min-height: 44px;
        gap: 8px;
    }

    .home-page .hero-filters-sheet .hero-search__toggle-track {
        width: 68px;
        height: 34px;
    }

    .home-page .hero-filters-sheet .hero-search__toggle-knob {
        top: 4px;
        right: 4px;
        width: 26px;
        height: 26px;
    }

    .home-page .hero-filters-sheet .hero-search__toggle input:checked+.hero-search__toggle-track .hero-search__toggle-knob {
        transform: translateX(-34px);
    }

    .home-page .hero-filters-sheet .hero-search__toggle-text {
        font-size: 14px;
    }

    .home-page .hero-filters-sheet .hero-search__footer {
        margin-top: 10px;
        gap: 10px;
    }

    .home-page .hero-filters-sheet .hero-search__slider {
        gap: 6px;
    }

    .home-page .hero-filters-sheet .hero-search__slider-meta {
        gap: 8px;
    }

    .home-page .hero-filters-sheet .hero-search__slider-meta label {
        font-size: 15px;
        line-height: 1.25;
    }

    .home-page .hero-filters-sheet .hero-search__slider-tag {
        min-height: 28px;
        padding: 4px 10px;
        font-size: 13px;
    }

    .home-page .hero-filters-sheet .hero-search__slider input[type="range"] {
        height: 14px;
    }

    .home-page .hero-filters-sheet .hero-search__slider input[type="range"]::-webkit-slider-runnable-track {
        height: 14px;
    }

    .home-page .hero-filters-sheet .hero-search__slider input[type="range"]::-moz-range-track {
        height: 14px;
    }

    .home-page .hero-filters-sheet .hero-search__slider input[type="range"]::-webkit-slider-thumb {
        width: 14px;
        height: 14px;
    }

    .home-page .hero-filters-sheet .hero-search__slider input[type="range"]::-moz-range-thumb {
        width: 14px;
        height: 14px;
    }

    .home-page .hero-filters-sheet .hero-search__slider-scale {
        font-size: 12px;
    }

    .home-page .hero-filters-sheet .hero-search__submit {
        min-height: 44px;
        font-size: 15px;
        padding: 10px 16px;
        border-radius: var(--radius-12px);
    }

    .home-page .property-nav-card {
        padding: 16px;
        border-radius: var(--radius-12px);
        border: 1px solid var(--color-e2e8f0);
        background: var(--color-ffffff);
        box-shadow: 0 0 6px 0 var(--color-rgba-0-0-0-0-02), 0 2px 4px 0 var(--color-rgba-0-0-0-0-08);
        height: fit-content;
        min-height: fit-content;
    }

    .home-page .property-nav-card__title {
        font-size: 16px;
        font-weight: 700;
    }

    .home-page .property-nav-card__subtitle {
        font-size: 10px;
        font-weight: 400;
    }

    .home-page #tailored-properties .tailored-properties__mobile-title {
        font-size: 16px;
        font-weight: 400;
    }

    .home-page #tailored-properties .tailored-properties__mobile-link {
        font-size: 12px;
        font-weight: 500;
    }

    .home-page #tailored-properties .tailored-properties__tab .landing-tabs__item-label {
        font-size: 10px;
        font-weight: 400;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__title {
        font-size: 16px;
        font-weight: 600;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__date,
    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__facts {
        font-size: 14px;
        font-weight: 400;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__badge {
        font-size: 10px;
        font-weight: 400;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__label {
        font-size: 12px;
        font-weight: 400;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__price-value {
        font-size: 20px;
        font-weight: 400;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__price-suffix {
        font-size: 14px;
        font-weight: 400;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__terms {
        font-size: 14px;
        font-weight: 400;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__terms strong {
        font-size: 12px;
        font-weight: 400;
    }

    .home-page #tailored-properties .property-offer-card--home-tailored .property-offer-card__cta--home-tailored {
        font-size: 16px;
        font-weight: 500;
    }

    .home-page #popular-areas .popular-showcase__title {
        font-size: 16px;
        font-weight: 400;
    }

    .home-page #popular-areas .popular-showcase__head-link {
        font-size: 12px;
        font-weight: 500;
    }

    .home-page #popular-areas .popular-showcase__name {
        font-size: 19px;
        font-weight: 700;
    }

    .home-page #popular-areas .popular-showcase__price {
        font-size: 11px;
        font-weight: 500;
    }

    .home-page #popular-areas .popular-showcase__cta {
        font-size: 11px;
        font-weight: 500;
    }

    .home-page #calculator .calculator-control h3 {
        font-size: 10px;
        font-weight: 600;
    }

    .home-page #calculator .calculator-control__highlight {
        font-size: 10px;
        font-weight: 400;
    }

    .home-page #calculator .calculator-field__value,
    .home-page #calculator .calculator-field__input {
        font-size: 10px;
        font-weight: 400;
    }

    .home-page #calculator .calculator-control__labels {
        font-size: 10px;
        font-weight: 600;
    }

    .home-page #calculator .calculator-summary__title {
        font-size: 10px;
        font-weight: 400;
    }

    .home-page #calculator .calculator-summary__value span {
        font-size: 24px;
        font-weight: 400;
    }

    .home-page #calculator .calculator-summary__value small {
        font-size: 10px;
        font-weight: 400;
    }

    .home-page #calculator .calculator-summary__note {
        font-size: 8px;
        font-weight: 400;
    }

    .home-page #calculator .calculator-summary__cta {
        font-size: 10px;
        font-weight: 500;
    }

    .home-page #sale-options .sale-option-swiper .sale-option-card h3 {
        font-size: 14px;
        font-weight: 600;
    }

    .home-page #sale-options .sale-option-swiper .sale-option-card p {
        font-size: 10px;
        font-weight: 400;
    }

    .home-page #sale-options .sale-option-section__title {
        font-size: 16px;
        font-weight: 400;
    }

    .home-page .partners-section .section-title {
        font-size: 16px;
        font-weight: 400;
    }
}

/* ==================== KYC Eligibility Modal ==================== */
.kyc-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.kyc-modal-container.show {
    opacity: 1;
    visibility: visible;
}

.kyc-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.kyc-modal-content {
    position: relative;
    background: #ffffff;
    padding: 48px 40px 40px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;


    border-radius: 16.4px;
    border: 1px solid #B9F8CF;
    background: #F0FDF4;
}

.kyc-modal-container.show .kyc-modal-content {
    transform: scale(1) translateY(0);
}

.kyc-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kyc-modal-close:hover {
    background: #f3f4f6;
}

.kyc-modal-icon-success {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: rgba(46, 138, 110, 0.1);
    border-radius: 50%;
    margin: 0 auto 24px;
}

.kyc-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 32px;
    line-height: 1.4;
}

.kyc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    min-height: 48px;
}

.kyc-btn-primary {
    background: #2E8A6E;
    color: white;
}

.kyc-btn-primary:hover {
    background: #236b54;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46, 138, 110, 0.3);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .kyc-modal-container {
        padding: 16px;
    }

    .kyc-modal-content {
        padding: 40px 24px 32px;
        border-radius: 20px;
    }

    .kyc-modal-icon-success {
        width: 64px;
        height: 64px;
        margin-bottom: 20px;
    }

    .kyc-modal-title {
        font-size: 18px;
        margin-bottom: 24px;
    }

    .kyc-btn {
        padding: 12px 20px;
        font-size: 15px;
        min-height: 44px;
    }
}

/* ===================================
   AUTH COMPONENTS STYLES
   =================================== */

/* Auth Modal Layout */
.auth-modal-root {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.auth-modal-backdrop {
    background: rgba(15, 23, 42, 0.48);
}

.auth-modal-shell--signup-flow,
.auth-modal-shell {
    width: min(840px, 100%);
}

/* Auth Card Container */
.auth-modal-card.auth-modal-card--signup-flow,
.auth-modal-card.auth-modal-card--wide {
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfb 100%);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 36px;
    box-shadow: 0 32px 90px rgba(15, 23, 42, 0.18);
    margin: 0 auto;
    max-width: 100%;
    padding: 2.25rem 2rem 1.85rem;
}

/* Auth Main Layout */
.auth-login-retouch {
    display: grid;
    gap: 1rem;
}

.auth-login-retouch-head {
    display: grid;
    gap: .6rem;
    justify-items: center;
    margin-bottom: .25rem;
    text-align: center;
}

.auth-login-retouch-brand {
    display: block;
    margin: 0 auto;
    max-width: 190px;
    width: 100%;
}

.auth-login-retouch-title {
    color: #1f2937;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    font-weight: 800;
    margin: 0;
}

.auth-login-retouch-subtitle {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.9;
    margin: 0;
    max-width: 520px;
}

/* Auth Forms */
.auth-login-retouch-form,
.seller-enable-grid {
    display: grid;
    gap: 1rem;
    margin-top: .4rem;
}

.auth-login-retouch-field,
.seller-enable-grid label {
    color: #1f2937;
    display: grid;
    font-size: 1rem;
    font-weight: 700;
    gap: .55rem;
    text-align: right;
}

.auth-login-retouch-label {
    color: #111827;
    font-size: 16px;
    font-weight: 400;
}

/* Auth Inputs */
.auth-login-retouch-input,
.seller-enable-grid input {
    color: #0f172a;
    min-height: 36px;
    /* padding: .95rem 1rem; */
    padding: 4px 12px;

    transition: all 0.2 ease-in-out;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
}

.auth-login-retouch-input::placeholder,
.seller-enable-grid input::placeholder {
    color: #94a3b8;
}

.auth-login-retouch-input:focus,
.seller-enable-grid input:focus {
    background: #fff;
    border-color: rgba(79, 146, 117, .9);
    box-shadow: 0 0 0 .2rem rgba(79, 146, 117, .12);
    outline: 0;
}

/* Auth Buttons */
.auth-login-retouch-submit,
.auth-social-btn,
.seller-verify-btn {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    font-size: 16px;
    font-weight: 500;
    justify-content: center;
    min-height: 40px;
    text-align: center;
    width: 100%;
}

.auth-login-retouch-submit {
    background: #4f9275;
    border: 0;
    color: #fff;
    margin-top: .15rem;
    text-decoration: none;
}

.auth-login-retouch-submit:hover {
    background: #2e8a6e;
}

.auth-social-btn,
.seller-verify-btn {
    background: #fff;
    border: 1px solid rgba(203, 213, 225, .9);
    color: #1f2937;
    gap: .55rem;
    text-decoration: none;
}

.auth-social-btn::before {
    color: #db4437;
    content: "\f1a0";
    font-family: "Font Awesome 6 Brands";
    font-size: 1.1rem;
}

/* Auth Helper Messages */
.auth-helper-note,
.seller-helper-note,
.auth-helper-error,
.seller-helper-error {
    border-radius: 14px;
    font-size: .92rem;
    margin: 0;
    min-height: 0;
    padding: .8rem .95rem;
}

.auth-helper-note,
.seller-helper-note {
    background: rgba(46, 138, 110, 0.08);
    color: #2e8a6e;
}

.auth-helper-error,
.seller-helper-error {
    background: rgba(180, 35, 24, 0.08);
    color: #b42318;
}

.auth-helper-note:empty,
.seller-helper-note:empty,
.auth-helper-error:empty,
.seller-helper-error:empty {
    display: none;
}

/* Auth Helper Links */
.auth-login-retouch-helper {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: center;
    margin-top: .25rem;
}

.auth-login-retouch-helper span {
    color: #64748b;
}

.auth-login-retouch-helper button,
.auth-login-retouch-helper .btn-link {
    background: transparent;
    border: 0;
    color: #2e8a6e;
    font-weight: 800;
    text-decoration: none;
}

.auth-login-retouch-helper button:hover,
.auth-login-retouch-helper .btn-link:hover {
    text-decoration: underline;
}

/* Seller Enablement Specific */
.seller-enable-inline {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) 150px 150px;
}

.seller-enable-status {
    color: #2e8a6e;
    font-size: .88rem;
    font-weight: 800;
}

/* OTP Specific Styles */
.otp-input-container {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin: 1rem 0;
}

.otp-input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    color: #1f2937;
    transition: all 0.2s ease;
    outline: none;
    direction: ltr;
    unicode-bidi: embed;
}

.otp-input:focus {
    border-color: #4f9275;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(79, 146, 117, 0.1);
}

.otp-input.filled {
    border-color: #4f9275;
    background: #fff;
}

.otp-timer-container {
    text-align: center;
    margin: 1rem 0;
}

.otp-timer-text {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
}

.otp-timer-text #otp-timer {
    color: #4f9275;
    font-weight: 600;
}

.otp-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    gap: 1rem;
}

.otp-action-link {
    background: none;
    border: none;
    color: #4f9275;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0.5rem 0;
    transition: color 0.2s ease;
}

.otp-action-link:hover {
    color: #2e8a6e;
}

.otp-action-link:disabled {
    color: #94a3b8;
    cursor: not-allowed;
    text-decoration: none;
}

/* Auth Mobile Responsive */
@media (max-width: 767.98px) {

    .auth-modal-card.auth-modal-card--signup-flow,
    .auth-modal-card.auth-modal-card--wide {
        border-radius: 28px;
        padding: 1.5rem 1.15rem 1.25rem;
    }

    .seller-enable-inline {
        grid-template-columns: 1fr;
    }
}

/* Required Field Star Styling */
.required-star {
    color: #EF4444;
    margin-right: 4px;
    font-weight: bold;
}

.auth-page {
    display: flex;
    min-height: 80vh;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
}

.auth-page::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(4px);
    z-index: -1;
    background: url(../imgs/hero-bg.png);
    filter: blur(1px);
}

.auth-page>div {
    width: 100%;
}





/*=======================================================================*/
/*=======================================================================*/
/*=======================================================================*/
/*=======================================================================*/
/* ==================== Details Page Gallery Styles ==================== */
/*=======================================================================*/
/*=======================================================================*/
/*=======================================================================*/





.details-page--pixel .pd-gallery__hero {
    position: relative;
}

.details-page--pixel .pd-gallery__hero-button {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    display: block;
    background: transparent;
    cursor: zoom-in;
}

.details-page--pixel .pd-gallery__zoom-trigger {
    position: absolute;
    inset-block-end: 12px;
    inset-inline-end: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid #e2e6ea;
    border-radius: 999px;
    background: rgb(255 255 255 / 95%);
    color: #1f2937;
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1;
    padding: var(--space-2) var(--space-3);
}

.details-page--pixel .pd-gallery__zoom-trigger-symbol {
    font-size: var(--font-size-lg);
    line-height: 1;
}

.details-page--pixel .pd-gallery__thumb {
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.details-page--pixel .pd-gallery__thumb-btn {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    display: block;
    background: transparent;
    cursor: pointer;
}

.details-page--pixel .pd-gallery__thumb.is-active {
    border: 1px solid #2e8a6e;
    box-shadow: 0 0 0 1px #2e8a6e inset;
}

.details-page--pixel .pd-gallery__zoom-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgb(15 23 42 / 82%);
}

.details-page--pixel .pd-gallery__zoom-panel {
    width: min(1120px, 100%);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.details-page--pixel .pd-gallery__zoom-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.details-page--pixel .pd-gallery__zoom-control {
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1;
    min-height: 38px;
    min-width: 38px;
    padding: 0 var(--space-3);
}

.details-page--pixel .pd-gallery__zoom-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.details-page--pixel .pd-gallery__zoom-control--close {
    border-color: #ef4444;
    color: #b91c1c;
}

.details-page--pixel .pd-gallery__zoom-stage {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid rgb(226 230 234 / 24%);
    background: #0b1220;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    cursor: grab;
}

.details-page--pixel .pd-gallery__zoom-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    transform-origin: center center;
    transition: transform 0.15s ease-out;
    user-select: none;
    pointer-events: none;
}

.details-page--pixel .pd-gallery__hero-button:focus-visible,
.details-page--pixel .pd-gallery__zoom-trigger:focus-visible,
.details-page--pixel .pd-gallery__thumb-btn:focus-visible,
.details-page--pixel .pd-gallery__zoom-control:focus-visible {
    outline: 2px solid #2e8a6e;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .details-page--pixel .pd-gallery__zoom-modal {
        padding: 12px;
    }

    .details-page--pixel .pd-gallery__zoom-panel {
        max-height: calc(100vh - 24px);
    }

    .details-page--pixel .pd-gallery__zoom-control {
        min-height: 34px;
        min-width: 34px;
        font-size: var(--font-size-xs);
        padding: 0 10px;
    }

    .details-page--pixel .pd-gallery__zoom-stage {
        padding: 10px;
    }
}

.details-page--pixel .pd-calc-tabs button {
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #667085;
    font-weight: 700;
    flex: 1;
    font-size: 11px;
    padding: 8px 0px;
    border-radius: 7px;
}

.details-page--pixel .pd-calc-tabs button.is-active {
    background: #0f172a;
    color: #fff;
}

.details-page--pixel .pd-trust-card--unverified {
    background: #fff8f1;
    border-color: #fed7aa;
}

.details-page--pixel .pd-trust-card--unverified h2 {
    color: #9a3412;
}

.details-page--pixel .pd-trust-card--unverified p {
    color: #7c2d12;
}

.autoComplete_wrapper {
    width: 100% !important;
}

.hero-search .autoComplete_wrapper>input {
    border: none !important;
}

.autoComplete_wrapper>input {
    width: 100% !important;
    border-radius: 9px;

}

.results-filter-control::after {
    display: none;
}