/* Start Root */
:root {
    --page-width: 1320px;

    --bg-main-color: #354f52;
    --bg-main-gradient: linear-gradient(135deg, #354f52 0%, #1d6e78 100%);
    --bg-main-hover: #2a3f42;
    --text-main-color: #2f3e46;
    --icon-main-color: #52796f;
    --text-paragraph: #374151;
    --bg-dark: #1a2e30;
    --bg-dark-2: #0e1f21;
    --bg-dark-3: #243638;
    --first-color: #5585b5;
    --second-color: #53a8b6;
    --third-color: #79c2d0;
    --fourth-color: #d4eef1;
    --text-secondary: #6b7280;
    --bg-card: #ffffff;
    --bg-card-alt: #f8fafc;
    --bg-section: #fafcff;
    --border-color: #eaeaea;
    --border-color-focus: #79c2d0;
    --shadow-xs: 0 1px 2px rgba(47, 62, 70, .05);
    --shadow-sm: 0 1px 4px rgba(47, 62, 70, .07);
    --shadow-md: 0 2px 10px rgba(47, 62, 70, .07);
    --shadow-lg: 0 4px 18px rgba(47, 62, 70, .08);
    --shadow-xl: 0 8px 28px rgba(47, 62, 70, .10);
    --shadow-card: 0 1px 3px rgba(47, 62, 70, .03), 0 0 0 1px rgba(47, 62, 70, .02);
    --shadow-card-hover: 0 6px 20px rgba(47, 62, 70, .10), 0 2px 8px rgba(47, 62, 70, .05);
    --shadow-brand: 0 4px 14px rgba(53, 79, 82, .22);
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-xxl: 30px;
    --radius-pill: 100px;
    --t-fast: all 0.15s ease;
    --t: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --t-spring: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    --margin-top: 1.5rem;
}

html {
    scroll-behavior: smooth;
}

/* Custom scrollbar — branded teal */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--icon-main-color);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bg-main-color);
}

body {
    /* background-color: #f0f4f5; */
    background-color: #fafeff;
    color: var(--text-main-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* End Root */


a {
    color: var(--text-main-color);
    transition: var(--t-fast);
}

dl,
ol,
ul {
    padding: 0;
    margin: 0;
}


.layout-fluid .container,
.layout-fluid [class*=" container-"],
.layout-fluid [class^=container-] {
    padding-left: 3rem;
    padding-right: 3rem;
    max-width: var(--page-width);
}


.has_offer {
    text-decoration: line-through;
    color: var(--text-secondary);
    font-weight: 500;
}

.selling_status {
    position: absolute;
    top: 15px;
    left: -7px;
    z-index: 999;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    rotate: 325deg;
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-sm);
}

.selling_status span {
    font-size: 1rem;
    min-width: 5rem;
}

.mobile_categories_links_area {
    display: none;
}

#languages_app a {
    padding: 0.75rem;
    font-size: 1rem;
    transition: var(--t);
}

#languages_app a.btn_custom {
    background: var(--bg-main-color);
    color: var(--aous-aw-white);
}

.lg_modal {
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-card);
}

.lg_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.375rem;
    border-bottom: 1px solid var(--border-color);
}

.lg_header_title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-main-color);
}

.lg_close {
    opacity: 0.4;
}

.lg_close:hover {
    opacity: 1;
}

.lg_body {
    padding: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.lg_item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main-color);
    text-decoration: none;
    transition: background var(--t-fast);
    cursor: pointer;
}

.lg_item:hover {
    background: var(--bg-section);
    color: var(--text-main-color);
}

.lg_item_active {
    background: var(--fourth-color);
    color: var(--bg-main-color);
    font-weight: 700;
}

.lg_item_active:hover {
    background: var(--fourth-color);
}

.lg_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    flex-shrink: 0;
    transition: var(--t-fast);
}

.lg_item_active .lg_dot {
    background: var(--bg-main-color);
    border-color: var(--bg-main-color);
}

.lg_item_label {
    flex: 1;
}

.lg_check {
    display: flex;
    align-items: center;
    margin-inline-start: auto;
}

.lg_check svg {
    --aous-aw-icon-size: 0.9rem;
    color: var(--bg-main-color);
}

.header_title {
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.header_title h1 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0;
    color: var(--text-main-color);
}

.header_title h3 {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.app.blur_active {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
    transition: filter 0.35s ease;
}

.header_page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.header_page h1 {
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0;
    color: var(--text-main-color);
}

.header_page h1 svg {
    --aous-aw-icon-size: 1.6rem;
    color: var(--icon-main-color);
}

html[dir="rtl"] .header_page svg {
    rotate: 180deg;
}

html[dir="rtl"] .header_page h1 svg {
    rotate: 0deg;
}

.header_page .main_category_tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header_page .main_category_tools a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--bg-section);
    transition: var(--t);
}

.header_page .main_category_tools a:hover {
    background: var(--border-color);
    color: var(--text-main-color);
}

.silder_action {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.silder_action a {
    background-color: var(--bg-section);
    border-radius: 50%;
    padding: 0.35rem;
    opacity: 0.4;
    pointer-events: none;
    transition: var(--t);
}

.silder_action a.active {
    opacity: 1;
    pointer-events: auto;
    box-shadow: var(--shadow-sm);
}

.silder_action a svg {
    --aous-aw-icon-size: 1.5rem;
    color: var(--icon-main-color);
}

.silder_action a.active svg {
    color: var(--text-main-color);
}

.pagination {
    justify-content: end;
}

.pg_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0.25rem 0.25rem;
    gap: 1rem;
}

.pg_info {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.pg_info_sep {
    margin-inline: 0.2rem;
    opacity: 0.4;
}

.pg_controls {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pg_btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main-color);
    text-decoration: none;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    flex-shrink: 0;
}

.pg_btn:hover {
    background: var(--bg-main-color);
    border-color: var(--bg-main-color);
    color: white;
    text-decoration: none;
}

.pg_btn svg {
    --aous-aw-icon-size: 1rem;
}

.pg_btn_disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
}

.pg_num {
    min-width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    padding-inline: 0.4rem;
}

.pg_num:hover {
    background: var(--bg-section);
    color: var(--text-main-color);
    text-decoration: none;
}

.pg_num_active {
    background: var(--bg-main-color);
    color: white;
    border-color: var(--bg-main-color);
    font-weight: 700;
}

.pg_num_active:hover {
    background: var(--bg-main-color);
    color: white;
}

.pg_dots {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding-inline: 0.2rem;
    letter-spacing: 0.05em;
    user-select: none;
}

.sm_block {
    display: none;
}

.shared_area .input-icon-addon .copied {
    background: white;
    margin-right: 1rem;
}

.shared_area .list-group-item {
    background: var(--bg-section);
    border-radius: var(--radius-pill);
    color: var(--text-main-color) !important;
    border: none;
    transition: var(--t);
}

.shared_area .list-group-item:hover {
    background: var(--border-color);
}

.shared_area .list-group-item svg {
    color: var(--icon-main-color);
}

.open_mobile_links {
    display: none;
}

html[dir="rtl"] .form-floating>.form-control-plaintext~label,
html[dir="rtl"] .form-floating>.form-control:focus~label,
html[dir="rtl"] .form-floating>.form-control:not(:placeholder-shown)~label,
html[dir="rtl"] .form-floating>.form-select~label {
    transform: scale(.85) translateY(-0.5rem) translateX(4rem);
}

/* Buttons */
.btn-primary,
.bg-custom {
    background: var(--bg-main-gradient);
    background-image: var(--bg-main-gradient);
    border: none;
    box-shadow: var(--shadow-brand);
    transition: var(--t);
}

.btn-primary:hover,
.bg-custom:hover {
    background: var(--bg-main-hover);
    background-image: linear-gradient(135deg, #162d4a 0%, #0c6070 100%);
    box-shadow: var(--shadow-brand);
    transform: translateY(-1px);
}

.btn-primary:active,
.bg-custom:active {
    transform: translateY(0);
    box-shadow: var(--shadow-brand);
}

/* Chat */
.chat-bubble {
    background: var(--bg-section);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
}

.chat-bubble-me {
    background: var(--bg-main-gradient);
    color: white;
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
}

.chat-bubble-date {
    color: var(--aous-aw-muted);
    font-size: 0.75rem;
}

.chat-bubble-me .chat-bubble-date {
    color: rgba(255, 255, 255, .65);
}

.tick_icon {
    color: var(--icon-main-color);
}

.smart_tags_area .smart_tag_content {
    border-color: var(--border-color);
    margin-bottom: 0.5rem;
}


.bar_area {
    border-bottom: none;
    padding-block: 0.5rem;
    background: var(--bg-dark);
}

.bar_area .bar_content .left span {
    color: white;
}

.bar_area .dropdown-menu {
    inset: 7px auto auto 0px !important;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.bar_area .bar_content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bar_area .bar_content .right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.bar_area .bar_content .right a {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    transition: var(--t-fast);
}

.bar_area .bar_content .right a:hover {
    color: rgba(255, 255, 255, 0.95);
}

.bar_area .bar_content .right a img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    aspect-ratio: 3 / 2;
}

.bar_area .bar_content .right .dropdown-toggle:after {
    display: none;
}

.bar_area .bar_content .left span {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.nh_pulse_dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    flex-shrink: 0;
    position: relative;
}

.nh_pulse_dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(74, 222, 128, .35);
    animation: nh_pulse 2s ease-in-out infinite;
}

@keyframes nh_pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .8;
    }

    50% {
        transform: scale(1.7);
        opacity: 0;
    }
}

.bar_area .bar_content .left {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}


.with_badge {
    position: relative;
}

.with_badge .badge {
    position: absolute;
    top: -3px;
    right: -3px;
}

.bar_area .bar_content .left a {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: white;
    transition: var(--t-fast);
    font-weight: 600;
}

.bar_area .bar_content .left a:hover {
    color: rgba(255, 255, 255, 0.95);
}

.header_area {
    padding-block: 0.7rem;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 500;
    transition: box-shadow 0.25s ease, padding 0.25s ease;
}


.header_content {
    display: grid;
    grid-template-columns: 8% 50% 38%;
    align-items: center;
    gap: 2%;
}

.header_content .logo_content a {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-main-color);
}

.header_content .logo_content img {
    width: 6.5rem;
    object-fit: contain;
}

.nh_mobile_bar {
    display: none;
    align-items: center;
    gap: 0.6rem;
}

.nh_lang_pill_sm img {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50%;
    object-fit: cover !important;
}

.nh_help_sm {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--t-fast);
}

.nh_help_sm:hover {
    color: var(--bg-main-color);
}

.header_content .search_area {
    position: relative;
}

.header_content .search_area .search_shell {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding-inline: 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    background:
        radial-gradient(circle at top right, rgb(48 78 91 / 9%), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transition: box-shadow var(--t), border-color var(--t), transform var(--t-fast);
}

.header_content .search_area .search_shell:focus-within {
    border-color: rgba(58, 143, 160, 0.55);
}

.header_content .search_area .search_shell_hint,
.header_content .search_area .search_shell_meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.3rem;
    padding-inline: 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.header_content .search_area .search_shell_hint {
    color: var(--bg-main-color);
    background: rgba(247, 251, 252);
}

.header_content .search_area .search_shell_meta {
    width: 2.25rem;
    color: var(--text-secondary);
    background: rgba(148, 163, 184, 0.12);
    padding: 0.25rem;
}

.header_content .search_area .search_input_wrap {
    position: relative;
}

.header_content .search_area input {
    border: 0;
    background: transparent;
    padding-block: 0.85rem;
    font-size: 0.96rem;
    padding-left: 0.4rem;
    padding-right: 2.4rem;
    color: var(--text-main-color);
    border-radius: var(--radius-pill);
    transition: var(--t);
}

.header_content .search_area input:focus {
    background: transparent;
    box-shadow: none;
    outline: none;
}

.header_content .search_area input::placeholder {
    color: color-mix(in srgb, var(--text-secondary) 85%, white);
}

.header_content .search_area .input-icon-addon {
    right: 6px;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(58, 143, 160, 0.14), rgba(59, 130, 246, 0.16));
}

html[dir="rtl"] .header_content .search_area .input-icon-addon {
    right: auto;
    left: 6px;
}

.header_content .search_area svg {
    --aous-aw-icon-size: 1.2rem;
    stroke-width: 1.85;
    color: var(--icon-main-color);
}

.header_content .search_area .search_suggestions {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    border-radius: 1.5rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.18);
    z-index: 1000;
    padding: 0.9rem;
    max-height: 70vh;
    overflow-y: auto;
}

body.search_active::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 28, 46, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 400;
}

.header_content .search_area .search_result_item {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem;
    border: 1px solid transparent;
    border-radius: 1.15rem;
    transition: var(--t-fast);
}

.header_content .search_area .search_result_item:last-child {
    margin-bottom: 0;
}

.header_content .search_area .search_result_item h4 {
    font-size: 0.96rem;
    font-weight: 700;
    margin-bottom: 0.18rem;
    color: var(--text-main-color);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.header_content .search_area .search_result_item p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.header_content .search_area .search_result_visual {
    position: relative;
}

.header_content .search_area .search_result_visual::after {
    content: "";
    position: absolute;
    inset: auto 12% -10% 12%;
    height: 14px;
    background: rgba(15, 23, 42, 0.12);
    filter: blur(12px);
    border-radius: 999px;
}

.header_content .search_area .search_result_item img {
    width: 4.6rem;
    height: 4.6rem;
    object-fit: cover;
    border-radius: 1rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
}

.header_content .search_area .search_result_item:hover {
    background: rgba(248, 250, 252, 0.95);
    border-color: rgba(203, 213, 225, 0.95);
    transform: translateY(-1px);
}

.header_content .search_area .search_result_copy {
    min-width: 0;
}

.header_content .search_area .search_result_arrow {
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--bg-main-color);
    background: rgba(53, 79, 82, 0.08);
    font-size: 1rem;
    font-weight: 700;
}

.header_content .search_area .search_placeholder {
    padding: 0.4rem;
}

.header_content .search_area .search_placeholder_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
    padding: 0.55rem 0.7rem 0.35rem;
}

.header_content .search_area .search_placeholder p,
.header_content .search_area .search_results_head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main-color);
    margin: 0;
}

.header_content .search_area .search_placeholder_head span,
.header_content .search_area .search_results_head span {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.header_content .search_area .search_results_head {
    justify-content: space-between;
    margin-bottom: 0.7rem;
    padding: 0.55rem 0.7rem 0.35rem;
}

.header_content .search_area .search_results_head strong {
    font-size: 1rem;
    color: var(--bg-main-color);
}

.header_content .search_area .search_placeholder ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.header_content .search_area .search_placeholder li {
    padding: 0;
}

.header_content .search_area .popular_search_item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.62rem 0.95rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main-color);
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.96), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(226, 232, 240, 0.95);
    transition: var(--t-fast);
}

.header_content .search_area .popular_search_item:hover {
    color: var(--bg-main-color);
    border-color: rgba(58, 143, 160, 0.35);
    background: rgba(58, 143, 160, 0.08);
    transform: translateY(-1px);
}

.no_results_found_search {
    padding-block: 3.4rem;
    text-align: center;
}

.no_results_found_search svg {
    --aous-aw-icon-size: 2.5rem;
    stroke-width: 1.5;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.no_results_found_search span {
    display: block;
    font-size: 1rem;
    color: var(--text-paragraph);
}

.no_results_found_search span:first-of-type {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.header_content .other_content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.nh_tools {
    gap: 0.75rem;
}

.nh_actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nh_actions a:first-of-type {
    display: none;
}

.nh_circle_btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    transition: background var(--t-fast);
    flex-shrink: 0;
}

.nh_circle_btn:hover {
    background: var(--bg-section);
    text-decoration: none;
}

.nh_circle_btn span:not(.item_count):not(.badge):not(.nh_dot_badge) {
    display: none;
}

.nh_icon_wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nh_circle_btn svg {
    --aous-aw-icon-size: 1.45rem;
    stroke-width: 1.75;
    color: var(--text-main-color);
    transition: color var(--t-fast);
}

.nh_circle_btn:hover svg {
    color: var(--bg-main-color);
}

.nh_dot_badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    min-width: unset !important;
    border: 2px solid white;
}

.header_content .other_content .action_tools .badge_content {
    position: relative;
}

.header_content .other_content .action_tools .badge_content .item_count {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 99;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding-inline: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--bg-main-gradient);
    color: white;
    border: 2px solid white;
}

html[dir="rtl"] .header_content .other_content .action_tools .badge_content .item_count {
    right: auto;
    left: -4px;
}

.nh_account_pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem 0.35rem 0.35rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: border-color var(--t-fast), background var(--t-fast);
    margin-inline-start: 0.25rem;
    background: var(--bg-card);
}

.nh_account_pill:hover {
    border-color: var(--bg-main-color);
    background: var(--bg-section);
    text-decoration: none;
}

.nh_account_avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-main-gradient);
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nh_account_pill .nh_icon_wrap svg {
    --aous-aw-icon-size: 1.2rem;
    stroke-width: 1.75;
    color: var(--text-main-color);
}

.nh_account_name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main-color);
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nh_sep {
    width: 1px;
    height: 1.75rem;
    background: var(--border-color);
    flex-shrink: 0;
}

.header_content .other_content .action_new_ad .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    background: var(--bg-main-gradient) !important;
    color: white !important;
    border: none !important;
    box-shadow: var(--shadow-brand) !important;
    overflow: hidden;
    white-space: nowrap;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.header_content .other_content .action_new_ad .btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 35%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-20deg);
    animation: nh_sweep 3.5s ease-in-out infinite;
}

@keyframes nh_sweep {
    0% {
        left: -60%;
    }

    55%,
    100% {
        left: 130%;
    }
}

.header_content .other_content .action_new_ad .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(53, 79, 82, .4) !important;
}

.header_content .other_content .action_new_ad .btn svg {
    --aous-aw-icon-size: 0.95rem;
    flex-shrink: 0;
}

.header_content .other_content .between_line {
    width: 1px;
    height: 2rem;
    background-color: var(--border-color);
    flex-shrink: 0;
}


.mobile_navbar {
    display: none;
}

.mobile_navbar .menu_action_link {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.navbar_area {
    padding-block: 0;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
}

.navbar_area .container {
    padding-left: 0;
}

.navbar_area .navbar_content {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.navbar_area .navbar_content a {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding-block: 1rem;
    display: inline-block;
    color: var(--text-secondary);
    position: relative;
    transition: var(--t-fast);
}

.navbar_area .navbar_content a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--bg-main-gradient);
    transition: var(--t);
    border-radius: 2px;
}

.navbar_area .navbar_content a:hover {
    color: var(--text-main-color);
}

.navbar_area .navbar_content a:hover::after {
    width: 100%;
}

.navbar_area .navbar_content .categories_area {
    position: relative;
    min-width: 17rem;
}

.navbar_area .navbar_content .categories_area .menu_action_link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1rem;
    cursor: pointer;
}

.navbar_area .navbar_content .categories_area .menu_action_link::after {
    display: none;
}

.navbar_area .navbar_content .categories_area .link_title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: black;
}

.navbar_area .navbar_content .categories_area svg {
    --aous-aw-icon-size: 1.4rem;
    color: black;
}

.navbar_area .navbar_content .links_area {
    display: flex;
    align-items: center;
    gap: 3rem;
}


.body_area {
    display: grid;
    grid-template-columns: 285px 1fr;
    column-gap: 2rem;
}

.single_category_area .body_area {
    grid-template-columns: 324px 1fr;
}


.product_card {
    position: relative;
    background: var(--bg-card);
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    transition: var(--t);
}

.product_card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: transparent;
    transform: translateY(-4px);
}

.slider_content .product_card .product_content {
    display: block;
    width: 13rem;
}

.product_card .product_content .add_to_watchlist {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    padding: 0.55rem;
    border-radius: 50%;
    z-index: 99;
    box-shadow: var(--shadow-md);
    transition: var(--t-spring);
}

.product_card .product_content .add_to_watchlist:hover {
    transform: scale(1.1);
    background: white;
}

html[dir="rtl"] .product_card .product_content .add_to_watchlist {
    left: 14px;
    top: 14px;
    right: unset;
}

.product_card .product_content .add_to_watchlist svg {
    --aous-aw-icon-size: 1.2rem;
    stroke-width: 1.75;
    transition: var(--t-fast);
    color: var(--text-main-color);
}

.product_card .product_content .add_to_watchlist:hover svg {
    stroke-width: 2.2;
    color: #ef4444;
}

.product_card .product_content .img_content {
    margin-bottom: 0.85rem;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.product_card .product_content .img_content img {
    object-fit: cover;
    border-radius: var(--radius-md);
    transition: var(--t-slow);
    max-height: 11rem;
    height: 11rem;
    width: 100%;
    display: block;
}

.product_card .product_content:hover .img_content img {
    transform: scale(1.05);
}

.product_card .product_content .product_text {
    min-height: 3.5rem;
    color: var(--text-main-color);
}

.product_card .product_content .product_text .product_title {
    display: block;
    text-wrap: auto;
    width: 97%;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

.product_card .product_content .product_text .product_place {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product_card .product_content .product_text .product_place span {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.product_card .product_content .product_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.product_card .product_content .product_info .product_price_content span {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main-color);
    letter-spacing: -0.02em;
}

.product_card .product_content .product_info .product_price_content span small {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.product_card .product_content .product_info .communications_icons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.product_card .product_content .product_info .communications_icons svg {
    --aous-aw-icon-size: 1.1rem;
}

.product_card .product_content .product_icons {
    display: flex;
    align-items: center;
}


.body_area .right_area .hero_area {
    margin-top: var(--margin-top);
}

.body_area .right_area .hero_area .carousel-caption-background {
    display: none !important;
}

.body_area .right_area .hero_area .carousel-inner .carousel-item {
    position: relative;
    height: 32rem;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.body_area .right_area .hero_area .carousel-inner .carousel-item img {
    object-fit: cover;
    height: 100%;
    transition: transform 0.8s ease;
}

.body_area .right_area .hero_area .carousel-inner .carousel-item:hover img {
    transform: scale(1.03);
}

.body_area .right_area .hero_area .carousel-inner .carousel-item::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(15, 28, 46, 0.80) 0%,
            rgba(15, 28, 46, 0.30) 60%,
            transparent 100%);
    z-index: 9;
}

.body_area .right_area .hero_area .carousel-inner .carousel-item .text_content {
    position: absolute;
    top: 25%;
    width: 55%;
    left: 10%;
    z-index: 99;
}

.body_area .right_area .hero_area .carousel-inner .carousel-item .text_content h1 {
    line-height: 1.15;
    font-size: 2.6rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .2);
}

.body_area .right_area .hero_area .carousel-inner .carousel-item .text_content p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0.75rem;
    line-height: 1.6;
}

.body_area .right_area .hero_area .carousel-inner .carousel-item .carousel_action_btn {
    padding: 0.8rem 2rem;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    margin-top: 1.5rem;
    letter-spacing: 0.02em;
    background: white;
    color: var(--text-main-color);
    box-shadow: var(--shadow-lg);
    transition: var(--t);
}

.body_area .right_area .hero_area .carousel-inner .carousel-item .carousel_action_btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}


.categories_web_area {
    position: relative;
}

.categories_web_area .categories_web_lisl {
    display: flex;
    align-items: center;
    gap: 1rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    padding: 0;
}

.categories_web_area .categories_web_lisl::-webkit-scrollbar {
    display: none;
}

.categories_web_area .categories_web_lisl a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding-inline: 0.75rem;
    padding-block: 1rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    transition: var(--t-fast);
    white-space: nowrap;
}

.categories_web_area .categories_web_lisl a:hover {
    color: var(--text-main-color);
}

.categories_web_area .categories_web_lisl a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--bg-main-gradient);
    transition: var(--t);
    border-radius: 2px;
}

.categories_web_area .categories_web_lisl a:hover::after,
.categories_web_area .categories_web_lisl a.active_cat::after {
    width: 100%;
}

.categories_web_area .categories_web_lisl a svg {
    --aous-aw-icon-size: 1.15rem;
    color: var(--icon-main-color);
}

.products_area {
    margin-top: 1rem;
    margin-bottom: 5rem;
}

.products_area .products_content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 1.25rem;
    column-gap: 0.75rem;
}

.categories_links {
    position: relative;
    margin-top: var(--margin-top);
    background-color: white;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    scrollbar-width: thin;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: var(--t);
    z-index: 99;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.categories_links.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.categories_links>li {
    position: relative;
}

.categories_links>li svg {
    --aous-aw-icon-size: 1.2rem;
}

.categories_links>li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.7rem;
    padding-left: 1rem;
    padding-right: 0.75rem;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-color);
    transition: var(--t-fast);
    color: var(--text-main-color);
}

.categories_links>li a img {
    width: 2.5rem;
    object-fit: cover;
}

html[dir="rtl"] .categories_links>li a {
    font-weight: 600;
}

.categories_links>li a.active {
    background: var(--bg-main-gradient);
    color: white;
}

html[dir="rtl"] .categories_links>li a.active {
    font-weight: 700;
}

.categories_links .sub_menu li a {
    padding-block: 1rem;
    font-size: 0.88rem;
}

.categories_links>li a svg {
    color: var(--icon-main-color);
    stroke-width: 1.25;
    --aous-aw-icon-size: 1.2rem;
}

.categories_links>li .title_content a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.categories_links>li a:hover {
    background-color: var(--bg-section);
    color: var(--text-main-color);
}

.categories_links>li .back_btn {
    display: none;
}

.categories_links>li .sub_menu {
    position: absolute;
    top: 0;
    right: -18rem;
    width: 100%;
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transform: translateX(8px);
    transition: var(--t);
    overflow: hidden;
}

html[dir="rtl"] .categories_links>li .sub_menu {
    left: -18rem;
    right: auto;
    transform: translateX(-8px);
}

.categories_links>li:hover .sub_menu {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}



.mc_section {
    padding: 2.5rem 0;
}

.mc_grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.mc_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

.mc_icon_wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-md);
    background: var(--bg-section);
    flex-shrink: 0;
    transition: background var(--t-fast);
}

.mc_card:hover .mc_icon_wrap {
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
}

.mc_icon_wrap svg {
    --aous-aw-icon-size: 2.25rem;
    color: var(--bg-main-color);
    transition: color var(--t-fast);
}

.mc_card:hover .mc_icon_wrap svg {
    color: #fff;
}

.mc_name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main-color);
    max-width: 100%;
}

.mc_count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    padding: 0.1rem 0.55rem;
    border-radius: var(--radius-pill);
    line-height: 1.6;
}



.products_cards .product_card {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 0.85rem;
    background-color: white;
    box-shadow: var(--shadow-card);
    transition: var(--t);
    transform: none;
}

.products_cards .product_card:hover {
    background: white;
    box-shadow: var(--shadow-card-hover);
    border-color: transparent;
    transform: translateX(4px);
}

.single_category_area .header_title {
    padding-top: 0.5rem;
}

.single_category_area .products_cards .product_card .img_content img {
    height: 10rem;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.products_cards .product_card .image_content {
    position: relative;
}

.products_cards .product_card .image_content img {
    mix-blend-mode: multiply;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.single_category_area .products_cards .product_card .info_content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.products_cards .product_card .info_content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.products_cards .product_card .info_content .info_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.store_details_area .products_cards .product_card .info_content .info_header {
    display: block;
}

.store_details_area .products_cards .product_card .info_content .info_header .info_place {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.products_cards .product_card .info_content .info_header .info_price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.products_cards .product_card .info_content .info_header span:last-of-type {
    color: var(--text-secondary);
    display: inline-block;
    font-size: 0.78rem;
}

.products_cards .product_card .info_content p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.products_cards .product_card .price_content {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: -0.02em;
    color: var(--text-main-color);
}

.single_category_area .products_cards .product_card .price_content .info_price {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.products_cards .product_card .price_content .communications_icons {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}



.pd_page {
    padding-top: 1rem;
    padding-bottom: 4rem;
}

/* Breadcrumb */
.pd_breadcrumb {
    margin-bottom: 1.25rem;
}

.pd_breadcrumb .breadcrumb a {
    font-size: 0.88rem;
    color: var(--text-secondary);
    transition: var(--t-fast);
}

.pd_breadcrumb .breadcrumb a:hover {
    color: var(--text-main-color);
}

.pd_breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: var(--text-secondary);
    font-size: 0.88rem;
}

/* Grid */
.pd_grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.5rem;
    align-items: start;
}

/* Shared Card */
.pd_card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1rem;
    margin-bottom: 1rem;
}

.pd_card:last-child {
    margin-bottom: 0;
}

.pd_card_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-color);
}

.pd_card_header h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-main-color);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pd_card_header h3 svg {
    --aous-aw-icon-size: 1.25rem;
    color: var(--icon-main-color);
}

.pd_gallery_card {
    padding: 0;
    overflow: hidden;
}

.pd_main_image {
    position: relative;
    background: var(--bg-section);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
}

.pd_main_image .carousel-inner {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.pd_main_image .carousel-item img {
    width: 100%;
    height: 28rem;
    object-fit: contain;
    mix-blend-mode: multiply;
    display: block;
}

.pd_main_image .carousel-control-prev,
.pd_main_image .carousel-control-next {
    width: 3rem;
    opacity: 0;
    transition: var(--t-fast);
}

.pd_main_image:hover .carousel-control-prev,
.pd_main_image:hover .carousel-control-next {
    opacity: 1;
}

.pd_main_image .carousel-control-prev-icon,
.pd_main_image .carousel-control-next-icon {
    background-color: rgba(47, 62, 70, 0.5);
    border-radius: 50%;
    padding: 1.1rem;
    background-size: 55%;
}

.pd_zoom_hint {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    padding: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: var(--t-fast);
    cursor: zoom-in;
}

html[dir="rtl"] .pd_zoom_hint {
    right: auto;
    left: 0.75rem;
}

.pd_zoom_hint svg {
    --aous-aw-icon-size: 1.2rem;
    color: var(--text-main-color);
}

.pd_zoom_hint:hover {
    background: white;
    box-shadow: var(--shadow-md);
}

.pd_status_badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
}

html[dir="rtl"] .pd_status_badge {
    left: auto;
    right: 0.75rem;
}

.pd_status_badge .badge {
    font-size: 0.78rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill);
}

/* Thumbnails */
.pd_thumbs {
    display: flex;
    gap: 0.5rem;
    padding: 0.85rem;
    overflow-x: auto;
    scrollbar-width: none;
    background: #fff;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.pd_thumbs::-webkit-scrollbar {
    display: none;
}

.pd_thumb {
    flex-shrink: 0;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: var(--t-fast);
    padding: 0;
    opacity: 0.65;
}

.pd_thumb:hover,
.pd_thumb.active {
    border-color: var(--bg-main-color);
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(53, 79, 82, 0.2);
}

.pd_title_card {
    padding: 1.75rem;
}

.pd_title_row {
    margin-bottom: 1.1rem;
}

.pd_title {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-main-color);
    line-height: 1.3;
    margin-bottom: 0.65rem;
}

.pd_meta_badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.pd_badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.pd_badge_category {
    background: var(--fourth-color);
    color: var(--bg-main-color);
}

.pd_badge_condition {
    background: var(--bg-section);
    color: var(--text-secondary);
}

.pd_badge_negotiable {
    background: #fef3c7;
    color: #92400e;
}

/* Price */
.pd_price_row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: var(--bg-section);
    border-radius: var(--radius-md);
    margin-bottom: 1.1rem;
    border: 1px solid var(--border-color);
}

.pd_price_main {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text-main-color);
    line-height: 1;
}

.pd_price_giveaway {
    font-size: 1.6rem;
    color: #16a34a;
}

.pd_price_old {
    font-size: 1rem;
    color: var(--text-secondary);
    text-decoration: line-through;
}

.pd_discount_badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: #fef2f2;
    color: #dc2626;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
}

.pd_discount_badge svg {
    --aous-aw-icon-size: 0.9rem;
}

/* Stats row */
.pd_stats_row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.pd_stat {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.pd_stat svg {
    --aous-aw-icon-size: 1rem;
    color: var(--icon-main-color);
    flex-shrink: 0;
}

.pd_details_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.pd_detail_item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background: var(--bg-section);
    border-radius: var(--radius-sm);
}

.pd_detail_label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    font-weight: 500;
}

.pd_detail_value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main-color);
}

.pd_description {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-paragraph);
}

.pd_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pd_tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.9rem;
    background: var(--bg-section);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-pill);
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: var(--t-fast);
}

.pd_tag svg {
    --aous-aw-icon-size: 0.85rem;
    color: var(--icon-main-color);
}

.pd_tag:hover {
    background: var(--fourth-color);
    border-color: var(--icon-main-color);
    color: var(--text-main-color);
}

.pd_right {
    position: relative;
}

.pd_sticky_sidebar {
    position: sticky;
    top: 5rem;
}


.pd_cta_buttons {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
    overflow: hidden;
}

.pd_btn_primary {
    padding-block: 0.75rem !important;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--radius-xxl) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--t);
}

.pd_btn_primary svg {
    --aous-aw-icon-size: 1.2rem;
}

.pd_btn_outline {
    padding-block: 0.75rem !important;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-xxl) !important;
    border: 1.5px solid var(--border-color);
    color: var(--text-main-color);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--t);
}

.pd_btn_outline:hover {
    border-color: var(--bg-main-color);
    background: var(--fourth-color);
    color: var(--text-main-color);
}

.pd_btn_outline svg {
    --aous-aw-icon-size: 1.1rem;
    color: var(--icon-main-color);
}

.pd_btn_ghost {
    padding-block: 0.75rem !important;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: var(--radius-pill);
    border: none;
    color: var(--text-secondary);
    background: var(--bg-section);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: var(--t-fast);
}

.pd_btn_ghost:hover {
    background: var(--border-color);
    color: var(--text-main-color);
}

.pd_btn_ghost svg {
    --aous-aw-icon-size: 1rem;
}

.pd_btn_danger {
    padding-block: 0.75rem !important;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: var(--radius-pill) !important;
    border: 1.5px solid #fecaca;
    color: #dc2626;
    background: #fff5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: var(--t-fast);
    margin-bottom: 1rem;
}

.pd_btn_danger:hover {
    background: #fef2f2;
    border-color: #dc2626;
    color: #dc2626;
}

.pd_btn_danger svg {
    --aous-aw-icon-size: 1rem;
}

/* Seller Card */
.pd_seller_card {
    padding: 1.25rem;
}

.pd_seller_header {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.pd_seller_avatar {
    --aous-aw-avatar-size: 3.25rem;
    border-radius: var(--radius-md) !important;
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: var(--shadow-brand);
}

.pd_seller_info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.pd_seller_name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: var(--t-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd_seller_name:hover {
    color: var(--bg-main-color);
}

.pd_seller_name svg {
    --aous-aw-icon-size: 1rem;
}

.pd_seller_type,
.pd_seller_since {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.pd_seller_type svg,
.pd_seller_since svg {
    --aous-aw-icon-size: 0.9rem;
    color: var(--icon-main-color);
    flex-shrink: 0;
}

.pd_visit_store {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    padding: 0.6rem;
    background: var(--bg-section);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bg-main-color);
    transition: var(--t-fast);
}

.pd_visit_store:hover {
    background: var(--fourth-color);
    color: var(--bg-main-color);
}

.pd_visit_store svg {
    --aous-aw-icon-size: 1rem;
}

html[dir="rtl"] .pd_visit_store svg {
    rotate: 180deg;
}

/* Tips Card */
.pd_tips_card {
    padding: 1rem 1.25rem;
}

.pd_tips_toggle {
    cursor: pointer;
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
    user-select: none;
}

.pd_tips_toggle.pd_card_header {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
}

.pd_tips_toggle h3 svg {
    color: #f59e0b;
}

.pd_tips_chevron svg {
    --aous-aw-icon-size: 1rem;
    color: var(--text-secondary);
    transition: var(--t-fast);
}

#pd_tips_body {
    margin-top: 0.85rem;
}

.pd_tips_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pd_tips_list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.83rem;
    color: var(--bg-dark-2);
    line-height: 1.5;
    padding: 0.45rem 0.65rem;
    background: #fffbeb;
    border-radius: var(--radius-sm);
}

.pd_tips_list li::before {
    content: '•';
    color: #f59e0b;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

/* Ad ID Card */
.pd_adid_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.1rem;
    margin-bottom: 0.65rem;
}

.pd_adid_label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.pd_adid_value {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main-color);
    background: var(--bg-section);
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
}

/* Related / Sidebar Products */
.pd_related_card {
    padding-bottom: 0;
}

.pd_related_list {
    display: flex;
    flex-direction: column;
}

.pd_related_item {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-color);
    transition: var(--t-fast);
}

.pd_related_item:last-child {
    border-bottom: none;
    padding-bottom: 0.5rem;
}

.pd_related_item:hover {
    background: var(--bg-section);
    border-radius: var(--radius-md);
    padding-inline: 0.5rem;
}

.pd_related_img {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center;
    background-color: var(--bg-section);
    flex-shrink: 0;
}

.pd_related_info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.pd_related_cat {
    font-size: 0.72rem;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

.pd_related_title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-main-color);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.pd_related_price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main-color);
    letter-spacing: -0.02em;
}

.pd_similar_section {
    margin-top: 3rem;
}

.pd_similar_section .random_products {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    margin-top: 1rem;
}


.sidebar_products_area {
    margin-top: 3rem;
}

.sidebar_products_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.sidebar_products_area .sidebar_product_details {
    display: grid;
    align-items: center;
    grid-template-columns: 35% 1fr;
    gap: 0.85rem;
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    background: white;
    box-shadow: var(--shadow-card);
    transition: var(--t);
}

.sidebar_products_area .sidebar_product_details:hover {
    box-shadow: var(--shadow-md);
    border-color: transparent;
    transform: translateY(-2px);
}

.sidebar_products_area .sidebar_product_details .product_image img {
    mix-blend-mode: multiply;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.sidebar_products_area .sidebar_product_details .product_details .product_sub_category {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sidebar_products_area .sidebar_product_details .product_details .product_title {
    font-size: 0.88rem;
    font-weight: 500;
    display: block;
    color: var(--text-main-color);
}

.sidebar_products_area .sidebar_product_details .product_details .product_other_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar_products_area .sidebar_product_details .product_details .product_other_info span {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sidebar_products_area .sidebar_product_details .product_details .product_other_info svg {
    --aous-aw-icon-size: 1.1rem;
}

html[dir="rtl"] .arrow_icon {
    rotate: 180deg !important;
}


/* Page layout */
.st_page {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 2rem;
    margin-top: 2rem;
    align-items: start;
}

.st_sidebar {
    position: sticky;
    top: 0.5rem;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
}

/* Cover banner */
.st_cover {
    height: 105px;
    position: relative;
    overflow: hidden;
}

.st_cover_bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #354f52 0%, #2b4347 45%, #1a2e30 100%);
}

/* Subtle dot pattern overlay */
.st_cover_bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 55%, rgba(255, 255, 255, 0.07) 0%, transparent 45%),
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 38%);
}

/* Diagonal lines pattern */
.st_cover_bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-45deg,
            transparent,
            transparent 18px,
            rgba(255, 255, 255, 0.018) 18px,
            rgba(255, 255, 255, 0.018) 36px);
}

/* Profile body (below cover) */
.st_profile_body {
    padding: 0 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.st_avatar_wrap {
    position: relative;
    margin-top: -34px;
    margin-bottom: 0.7rem;
}

.st_avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #354f52 0%, #52777c 100%);
    border: 3px solid var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.st_verified_dot {
    position: absolute;
    bottom: 3px;
    right: 0;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--bg-main-color);
    border: 2.5px solid var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

html[dir="rtl"] .st_verified_dot {
    right: auto;
    left: 0;
}

.st_verified_dot svg {
    width: 10px;
    height: 10px;
    color: white;
}

.st_name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin: 0 0 0.45rem;
    line-height: 1.3;
}

.st_badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1.15rem;
}

.st_badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.67rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 2rem;
    letter-spacing: 0.02em;
}

.st_badge_verified {
    background: rgba(53, 79, 82, 0.1);
    color: var(--bg-main-color);
}

.st_badge_verified svg {
    width: 11px;
    height: 11px;
    color: var(--bg-main-color);
}

.st_badge_type {
    background: var(--bg-section);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.st_stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    background: var(--bg-section);
    border-radius: var(--radius-lg);
    padding: 0.9rem 0.75rem;
    margin-bottom: 1.15rem;
}

.st_stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    flex: 1;
}

.st_stat strong {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main-color);
    line-height: 1;
}

.st_stat span {
    font-size: 0.66rem;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
}

.st_stat_sep {
    width: 1px;
    height: 30px;
    background: var(--border-color);
    flex-shrink: 0;
}

.st_info_list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.st_info_list li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-align: start;
}

.st_info_list li svg {
    --aous-aw-icon-size: 1.05rem;
    color: var(--bg-main-color);
    flex-shrink: 0;
    opacity: 0.7;
}

.st_info_list li span {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.4;
}

.st_comms {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
    width: 100%;
}

.st_comm_btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    color: var(--comm-color, var(--text-secondary));
    transition: var(--t);
}

.st_comm_btn:hover {
    background: var(--comm-color, var(--bg-main-color));
    border-color: transparent;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.st_comm_btn svg {
    --aous-aw-icon-size: 1.45rem;
}

.st_actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.st_actions_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.st_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.84rem;
    font-weight: 600;
    transition: var(--t);
    white-space: nowrap;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    line-height: 1;
}

.st_btn svg {
    --aous-aw-icon-size: 1rem;
}

.st_btn_follow {
    background: var(--bg-main-gradient);
    color: white;
    box-shadow: 0 3px 12px rgba(53, 79, 82, 0.28);
}

.st_btn_follow:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(53, 79, 82, 0.38);
    color: white;
}

.st_btn_follow.is_followed {
    background: var(--bg-section);
    color: var(--text-secondary);
    box-shadow: none;
    border-color: var(--border-color);
}

.st_btn_follow.is_followed:hover {
    transform: none;
    box-shadow: none;
}

.st_btn_ghost {
    background: var(--bg-section);
    color: var(--text-main-color);
    border-color: var(--border-color);
}

.st_btn_ghost:hover {
    background: var(--bg-main-color);
    color: white;
    border-color: var(--bg-main-color);
    transform: translateY(-1px);
}

.st_btn_primary {
    background: var(--bg-main-color);
    color: white;
}

.st_btn_primary:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: white;
}

.st_btn_primary.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Report link */
.st_report_link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    opacity: 0.55;
    transition: opacity 0.2s, color 0.2s;
}

.st_report_link:hover {
    color: #dc3545;
    opacity: 1;
}

.st_report_link svg {
    --aous-aw-icon-size: 0.9rem;
}

.st_products {
    min-width: 0;
}


.ft_footer {
    background: var(--bg-dark);
    padding-inline: 11.5rem;
    padding-top: 4rem;
    padding-bottom: 0;
    margin-top: 4rem;
}

.ft_main {
    display: grid;
    grid-template-columns: 1.4fr 3fr;
    gap: 5rem;
    padding-bottom: 3.5rem;
}

.ft_brand {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ft_brand_mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    margin-bottom: 0.35rem;
}

.ft_brand_name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
}

.ft_brand_tagline {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.65;
    margin: 0 0 0.5rem;
}

.ft_socials ul {
    display: flex;
    gap: 0.55rem;
    margin-top: 0.25rem;
}

.ft_socials ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}

.ft_socials ul li a:hover {
    background: var(--bg-main-color);
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
}

.ft_socials ul li a svg {
    --aous-aw-icon-size: 1.05rem;
}

.ft_cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.ft_col_title {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 1.25rem;
}

.ft_col ul {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.ft_col ul li a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    font-weight: 400;
    transition: color var(--t-fast), padding-inline-start var(--t-fast);
    display: inline-block;
}

.ft_col ul li a:hover {
    color: rgba(255, 255, 255, 0.9);
    padding-inline-start: 5px;
}

.ft_divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
}

.ft_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0 2rem;
    gap: 1.5rem;
}

.ft_copy {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.ft_copy b {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
}

.ft_meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}

.ft_lang {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    font-weight: 600;
    transition: color var(--t-fast);
    text-decoration: none;
}

.ft_lang:hover {
    color: rgba(255, 255, 255, 0.85);
}

.ft_lang svg {
    --aous-aw-icon-size: 1rem;
}

.ft_legal {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.ft_legal li a {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    transition: color var(--t-fast);
    display: inline-flex;
    align-items: center;
}

.ft_legal li a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.ft_legal li a svg {
    --aous-aw-icon-size: 1.1rem;
}


.shared_navbar .content_navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shared_navbar .content_navbar .links_content a {
    font-size: 1rem;
    font-weight: 600;
}

.shared_navbar .content_navbar .logo_content img {
    width: 6rem;
    object-fit: contain;
}

html[dir="rtl"] .shared_navbar .links_content .link_area {
    margin-left: 1rem;
}

.shared_navbar .links_content .link_area {
    margin-left: unset;
    margin-right: 1rem;
}

.shared_navbar .content_navbar .links_content .link_area img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    aspect-ratio: 3 / 2;
}


.au_page {
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    position: relative;
}

.au_page::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #f0f9fa 0%, #eaf4f6 50%, #f4f0fa 100%);
    z-index: -1;
}

.au_page::after {
    content: '';
    position: fixed;
    top: -15%;
    inset-inline-end: -8%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(53, 79, 82, .07) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.au_card {
    width: 100%;
    max-width: 480px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2.25rem;
    box-shadow: 0 8px 40px rgba(53, 79, 82, .1), 0 1px 3px rgba(0, 0, 0, .05);
    position: relative;
}

.au_brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 2rem;
}

.au_brand_logo {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--bg-main-gradient);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: var(--shadow-brand);
}

.au_brand_name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main-color);
    letter-spacing: -0.02em;
}

.au_head {
    margin-bottom: 1.75rem;
}

.au_head_icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--fourth-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.au_head_icon svg {
    --aous-aw-icon-size: 1.375rem;
    color: var(--bg-main-color);
}

.au_head_icon_success {
    background: #dcfce7;
}

.au_head_icon_success svg {
    color: #16a34a;
}

.au_title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-main-color);
    margin: 0 0 0.35rem;
    line-height: 1.2;
}

.au_sub {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.au_form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.au_field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.au_label_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.au_label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-main-color);
}

.au_forgot {
    font-size: 0.78rem;
    color: var(--bg-main-color);
    font-weight: 500;
    text-decoration: none;
    transition: opacity var(--t-fast);
}

.au_forgot:hover {
    opacity: 0.75;
}

.au_input_wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.au_input_wrap>svg {
    position: absolute;
    inset-inline-start: 0.875rem;
    --aous-aw-icon-size: 1rem;
    color: var(--text-secondary);
    pointer-events: none;
    flex-shrink: 0;
}

.au_input {
    width: 100%;
    padding: 0.7rem 0.875rem 0.7rem 2.5rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--text-main-color);
    background: var(--bg-card);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    outline: none;
}

html[dir="rtl"] .au_input {
    padding: 0.7rem 2.5rem 0.7rem 0.875rem;
}

.au_input:focus {
    border-color: var(--bg-main-color);
    box-shadow: 0 0 0 3px rgba(53, 79, 82, .1);
}

.au_input::placeholder {
    color: var(--text-secondary);
    opacity: 0.55;
}

.au_gender_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}

.au_gender_opt {
    cursor: pointer;
}

.au_gender_opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.au_gender_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-section);
    transition: var(--t-fast);
    cursor: pointer;
}

.au_gender_opt input:checked+.au_gender_inner {
    border-color: var(--bg-main-color);
    background: var(--fourth-color);
    color: var(--bg-main-color);
}

.au_submit {
    width: 100%;
    padding-block: 0.85rem !important;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--radius-pill) !important;
    letter-spacing: 0.01em;
    margin-top: 0.5rem;
    transition: var(--t);
    background: var(--bg-main-hover);
    background-image: linear-gradient(135deg, #162d4a 0%, #0c6070 100%) !important;
    box-shadow: var(--shadow-brand);
}

.au_submit:hover {
    transform: translateY(-2px);
}

.au_sep {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 1.25rem 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.au_sep::before,
.au_sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.au_footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    margin-top: 0.5rem;
}

.au_link_btn {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border-color);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main-color);
    text-decoration: none;
    transition: var(--t-fast);
    background: var(--bg-card);
}

.au_link_btn:hover {
    border-color: var(--bg-main-color);
    color: var(--bg-main-color);
}

.au_back_link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--t-fast);
}

.au_back_link:hover {
    color: var(--text-main-color);
}

.au_back_link svg {
    --aous-aw-icon-size: 0.875rem;
}



.nf_form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 760px;
}

.nf_card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.nf_card_header {
    padding: 1.1rem 1.35rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-section);
}

.nf_card_header h3 {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin: 0 0 0.1rem;
}

.nf_card_header p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.nf_card_body {
    padding: 1.35rem;
}

.nf_grid_2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}

.nf_span_2 {
    grid-column: 1 / -1;
}

.nf_field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.nf_label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main-color);
}

.nf_field_hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0 0 0.35rem;
}

.nf_tags_checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.nf_tag_checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1.5px solid var(--border-color);
    border-radius: 2rem;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-main-color);
    transition: all 0.2s ease;
    user-select: none;
}

.nf_tag_checkbox input[type="checkbox"] {
    display: none;
}

.nf_tag_checkbox:has(input:checked) {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: #fff;
}

/* Branded focus for all form controls */
.nf_form .form-control {
    border-radius: var(--radius-md);
    border-color: var(--border-color);
    font-size: 0.88rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.nf_form .form-control:focus {
    border-color: var(--bg-main-color);
    box-shadow: 0 0 0 3px rgba(53, 79, 82, 0.12);
    outline: none;
}

.nf_type_group {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.nf_type_option {
    position: relative;
    cursor: pointer;
}

.nf_type_option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nf_type_option span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.35rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border-color);
    background: var(--bg-section);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: var(--t);
    user-select: none;
}

.nf_type_option input[type="radio"]:checked+span {
    background: var(--bg-main-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 3px 12px rgba(53, 79, 82, 0.28);
}

.nf_type_option:hover span {
    border-color: var(--bg-main-color);
    color: var(--bg-main-color);
}

.nf_type_option input[type="radio"]:checked+span:hover {
    color: white;
}

.nf_upload_zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: var(--bg-section);
    text-align: center;
}

.nf_main_img_wrapper {
    display: flex;
}

.current_images_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.current_image_item {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

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

.current_image_delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: rgba(220, 38, 38, 0.85);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
}

.current_image_delete:hover {
    background: rgb(220, 38, 38);
    color: #fff;
}

.nf_upload_zone:hover {
    border-color: var(--bg-main-color);
    background: rgba(53, 79, 82, 0.04);
}

.nf_upload_icon svg {
    --aous-aw-icon-size: 2rem;
    color: var(--bg-main-color);
    opacity: 0.6;
}

.nf_upload_text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.nf_file_input {
    display: none;
}

.nf_submit_row {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.1rem;
}

.nf_submit_btn {
    padding: 0.65rem 2.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}


.send_message .seller_content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.send_message .seller_content .shop_details .shop_name a {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.send_message .seller_content .shop_details .shop_name a img {
    width: 1.65rem;
}

.chat_area {
    max-height: 50vh;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}



.list_scrolling {
    margin-bottom: 1rem;
}

.list_scrolling ul {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    width: 100%;
    padding: 0;
}

.list_scrolling ul::-webkit-scrollbar {
    display: none;
}

.list_scrolling ul li a {
    padding: 0.55rem 1rem;
    display: inline-block;
    font-size: 0.88rem;
    font-weight: 500;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    transition: var(--t-fast);
}

.list_scrolling ul li a:hover {
    background-color: var(--bg-section);
    color: var(--text-main-color);
    border-color: var(--border-color);
}

.list_scrolling ul li a.active {
    background: var(--bg-main-gradient);
    color: white;
    border-color: transparent;
    box-shadow: var(--shadow-brand);
}

.filter_button {
    display: none;
}

.filter_products_area {
    position: sticky;
    top: 0;
    z-index: 99;
    margin-block: 1rem;
    padding: 0.5rem;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 24%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 1.5rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: stretch;
    gap: 0.55rem;
    overflow: visible;
}

.fo_bar.fo_mobile {
    position: static;
    flex-direction: column;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.fo_intro {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 15.5rem;
    padding: 0.8rem 0.95rem;
    border-radius: 1.15rem;
    background: linear-gradient(135deg, rgba(53, 79, 82, 0.08), rgba(96, 165, 250, 0.1));
    border: 1px solid rgba(203, 213, 225, 0.85);
}

.fo_intro_icon {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-main-color);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}

.fo_intro_icon svg {
    --aous-aw-icon-size: 1.2rem;
}

.fo_intro_copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fo_intro_copy strong {
    font-size: 0.92rem;
    color: var(--text-main-color);
    line-height: 1.2;
}

.fo_intro_copy span {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.fo_mobile_header {
    padding: 0.5rem 0 1rem;
}

.fo_mobile_title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin-bottom: 0.25rem;
}

.fo_mobile_sub {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0;
}

.fo_group {
    flex: 1;
    position: relative;
}

.fo_group:not(:last-child)::after {
    display: none;
}

.fo_mobile .fo_group {
    flex: none;
}

.fo_mobile .fo_group::after {
    display: none;
}

.fo_group_price {
    flex: 1.2;
}

.fo_pill {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.8rem 0.9rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(226, 232, 240, 0.95);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
    border-radius: 1.15rem;
    text-align: start;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.fo_group:first-child .fo_pill {
    border-radius: 1.15rem;
}

.fo_group:last-child .fo_pill {
    border-radius: 1.15rem;
}

html[dir="rtl"] .fo_group:first-child .fo_pill {
    border-radius: 1.15rem;
}

html[dir="rtl"] .fo_group:last-child .fo_pill {
    border-radius: 1.15rem;
}

.fo_pill:hover,
.fo_pill[aria-expanded="true"] {
    background: rgba(248, 250, 252, 0.98);
    border-color: rgba(58, 143, 160, 0.28);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.fo_mobile .fo_pill {
    border-radius: var(--radius-md) !important;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    padding: 0.7rem 0.875rem;
}

.fo_mobile .fo_pill:hover,
.fo_mobile .fo_pill[aria-expanded="true"] {
    border-color: var(--border-color-focus);
    background: var(--bg-card);
}

.fo_pill::after {
    display: none;
}

.fo_pill_icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(53, 79, 82, 0.08), rgba(96, 165, 250, 0.12));
    color: var(--bg-main-color);
    flex-shrink: 0;
}

.fo_pill_icon svg {
    --aous-aw-icon-size: 1rem !important;
}

.fo_pill svg {
    --aous-aw-icon-size: 0.875rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform var(--t-fast);
}

.fo_pill[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.fo_pill_inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
    overflow: hidden;
    flex: 1;
}

.fo_pill_label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.fo_pill_val {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.fo_pill_val.fo_val_active {
    color: var(--bg-main-color);
}

.fo_menu {
    padding: 0.55rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 1.2rem;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.14);
    min-width: 220px;
    max-height: 45vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    margin-top: 0.45rem !important;
    inset: auto auto auto 0 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
}

html[dir="rtl"] .fo_menu {
    inset: auto 0 auto auto !important;
}

.fo_item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.68rem 0.78rem;
    border-radius: 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main-color);
    text-decoration: none;
    transition: background var(--t-fast), transform var(--t-fast), color var(--t-fast);
    cursor: pointer;
    white-space: nowrap;
}

.fo_item:hover {
    background: rgba(241, 245, 249, 0.95);
    color: var(--bg-main-color);
    transform: translateX(2px);
}

.fo_item.active {
    background: var(--fourth-color);
    color: var(--bg-main-color);
    font-weight: 700;
}

.fo_item_dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    flex-shrink: 0;
    transition: var(--t-fast);
}

.fo_item.active .fo_item_dot {
    background: var(--bg-main-color);
    border-color: var(--bg-main-color);
}

.fo_price_menu {
    min-width: 310px;
}

.fo_price_sort {
    margin-bottom: 0.35rem;
}

.fo_price_sep {
    height: 1px;
    background: rgba(226, 232, 240, 0.95);
    margin: 0.7rem 0;
}

.fo_price_range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 0.25rem 0.25rem 0;
}

.fo_price_field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fo_price_label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

.fo_price_input {
    border: 1.5px solid var(--border-color);
    border-radius: 0.85rem;
    padding: 0.58rem 0.7rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main-color);
    background: var(--bg-card);
    width: 100%;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.fo_price_input:focus {
    outline: none;
    border-color: var(--bg-main-color);
    box-shadow: 0 0 0 3px rgba(53, 79, 82, .08);
}

.fo_price_actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding: 0 0.25rem 0.25rem;
}

.fo_apply_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.62rem 1rem;
    border-radius: var(--radius-pill);
    background: var(--bg-main-color);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    flex: 1;
    justify-content: center;
    transition: var(--t-fast);
}

.fo_apply_btn:hover {
    opacity: 0.88;
}

.fo_apply_btn svg {
    --aous-aw-icon-size: 0.8rem;
}

.fo_clear_btn {
    padding: 0.62rem 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--bg-section);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: var(--t-fast);
}

.fo_clear_btn:hover {
    background: var(--border-color);
    color: var(--text-main-color);
}



.helper_links_page {
    padding-top: 4rem;
    width: 65%;
}

.helper_links_page li {
    font-size: 1rem;
    line-height: 1.7;
}

.helper_links_page .section_text {
    margin-bottom: 4rem;
    width: 100%;
}

.helper_links_page .section_text span,
.helper_links_page .section_text p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-paragraph);
}

.helper_links_page .section_text ul {
    list-style: disc;
    padding-inline: 2rem;
    margin-bottom: 1rem;
}

.helper_links_page .section_text ul li {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}



.categories_card_links_area {
    margin-top: 0.5rem;
    margin-bottom: 0;
    display: none;
}

.categories_card_links_area .categories_card_links_content {
    display: flex;
    overflow-x: scroll;
    white-space: nowrap;
    gap: 1.25rem;
    scrollbar-width: none;
    padding-block: 0.5rem;
}

.categories_card_links_area .categories_card_links_content::-webkit-scrollbar {
    display: none;
}

.categories_card_links_area .categories_card_links_content a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: white;
    border: 1px solid var(--border-color);
    min-width: 7rem;
    box-shadow: var(--shadow-card);
    transition: var(--t);
}

.categories_card_links_area .categories_card_links_content a:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: transparent;
}

.categories_card_links_area .categories_card_links_content a img {
    object-fit: cover;
    height: 4.5rem;
}


.scrolling_area {
    padding-block: 1rem;
    margin-top: 2.5rem;
}

.scrolling_area .products_content {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
}

.scrolling_area .products_content::-webkit-scrollbar {
    display: none;
}


.message_card {
    background: linear-gradient(135deg, var(--fourth-color) 0%, #dbeafe 100%);
    padding: 1.25rem 1.75rem;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(59, 130, 246, .15);
}

.message_card .body_content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.message_card .body_content .icon_img svg {
    --aous-aw-icon-size: 3rem;
    color: var(--icon-main-color);
}

.message_card .body_content .text_content span {
    display: block;
}

.message_card .body_content .text_content span.text_title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--text-main-color);
}


.communications_area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.communications_area .method_communication {
    margin-bottom: 0.5rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: white;
    box-shadow: var(--shadow-card);
    transition: var(--t-fast);
}

.communications_area .method_communication:hover {
    border-color: var(--icon-main-color);
    background: var(--fourth-color);
}

.communications_area .method_communication .method_header h3 {
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    font-weight: 600;
}

.communications_area .method_communication .method_header .form-check {
    padding-left: 0;
    justify-content: space-between;
}

.communications_area .method_communication .method_header .form-check .form-check-input:checked {
    background-color: var(--bg-main-color);
    border-color: var(--bg-main-color);
}

html[dir="rtl"] .communications_area .method_communication .method_header .form-check {
    grid-template-columns: 96% 2%;
    padding-right: 0;
}

.explanatory_message {
    margin-bottom: 1.5rem;
}

.explanatory_message ul {
    list-style: disc;
    padding-left: 1rem;
}


.custom_cards {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.custom_cards .custom_card {
    position: relative;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    margin-bottom: 0;
    height: 14rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: var(--t-slow);
}

.custom_cards .custom_card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.custom_cards .custom_card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(15, 28, 46, 0.75) 0%,
            rgba(15, 28, 46, 0.40) 70%,
            transparent 100%);
    width: 100%;
    height: 100%;
}

.custom_cards .custom_card .card_content {
    position: relative;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    z-index: 999;
}

.custom_cards .custom_card .card_content .title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
}

.custom_cards .custom_card .card_content .title svg {
    --aous-aw-icon-size: 2rem;
    opacity: .8;
}

html[dir="rtl"] .custom_cards .custom_card .card_content svg {
    rotate: 180deg;
}

html[dir="rtl"] .custom_cards .custom_card .card_content .title svg {
    rotate: 0deg;
}

.custom_cards .custom_card .card_content .description {
    display: block;
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
    opacity: .85;
    line-height: 1.5;
}

.custom_cards .custom_card .card_content a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: white;
    background: rgba(255, 255, 255, .15);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(8px);
    width: fit-content;
    transition: var(--t-fast);
}

.custom_cards .custom_card .card_content a:hover {
    background: rgba(255, 255, 255, .25);
}


.about_us_area .header_page h1 {
    margin-bottom: 0.5rem;
    color: var(--text-main-color);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.about_us_area h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main-color);
}

.about_us_area p {
    color: var(--text-paragraph);
    line-height: 1.75;
}

.about_us_area .section_text {
    margin-bottom: 2rem;
}



.search_screen_area {
    padding-top: 2rem;
}

.search_screen_area .products_body {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 1.5rem;
    column-gap: 1rem;
}

.search_screen_area .products_body .search_product {
    background-color: white;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    transition: var(--t);
}

.search_screen_area .products_body .search_product:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: transparent;
}

.search_screen_area .products_body .search_product a {
    display: block;
}

.search_screen_area .products_body .search_product img {
    min-height: 12rem;
    object-fit: cover;
    border-radius: var(--radius-md);
    transition: var(--t-slow);
    width: 100%;
}

.search_screen_area .products_body .search_product:hover img {
    transform: scale(1.04);
}

.search_screen_area .products_body .search_product .product_content {
    display: flex;
    flex-direction: column;
    padding-top: 0.6rem;
}

.search_screen_area .products_body .search_product .product_content .product_title_text {
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    min-height: 3.5rem;
    color: var(--text-main-color);
    line-height: 1.4;
}

.search_screen_area .products_body .search_product .product_content .product_title_price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.search_screen_area .header_search_value {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

.search_screen_area .header_search_value .search_title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-main-color);
    letter-spacing: -0.03em;
}

.search_screen_area .header_search_value .highlight_search_value {
    color: var(--icon-main-color);
    font-weight: 700;
}

.search_screen_area .header_search_value .search_subtitle {
    color: var(--text-secondary);
    margin-top: 0.4rem;
    font-size: 0.92rem;
}


.pd_cta_card .remove_from_watchlist {
    position: static;
}

.remove_from_watchlist {
    position: absolute;
    top: 13px;
    right: 13px;
    --aous-aw-bg-opacity: 1;
    background-color: rgba(var(--aous-aw-pinterest-rgb), var(--aous-aw-bg-opacity)) !important;
    color: white;
    padding: 0.55rem;
    border-radius: 50%;
    z-index: 99;
    box-shadow: var(--shadow-md);
    transition: var(--t-spring);
}

.remove_from_watchlist:hover {
    color: white;
    transform: scale(1.1);
}

html[dir="rtl"] .remove_from_watchlist {
    left: 13px;
    top: 13px;
    right: unset;
}

.remove_from_watchlist svg {
    --aous-aw-icon-size: 1.2rem;
    stroke-width: 1.75;
    transition: var(--t-fast);
    opacity: 0.9;
}

.remove_from_watchlist:hover svg {
    stroke-width: 2.2;
    opacity: 1;
}


.last_seen {
    margin-top: 2rem;
}


.account_status_area {
    width: 45rem;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    min-height: 25rem;
    justify-content: center;
}

.account_status_area svg {
    --aous-aw-icon-size: 3rem;
    color: var(--icon-main-color);
}

.account_status_area p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-paragraph);
    margin: 0;
}


/* Scrollable row */
.fs_cards_row {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.75rem 0.5rem 1.5rem;
}

.fs_cards_row::-webkit-scrollbar {
    display: none;
}

.fs_card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 225px;
    max-width: 225px;
    padding: 2rem 1.1rem 1.4rem;
    background: linear-gradient(160deg, #2b4347 0%, #1a2e30 100%);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    gap: 0.45rem;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease,
        border-color 0.3s ease;
}

.fs_card:hover {
    transform: translateY(-9px) scale(1.025);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(83, 119, 124, 0.45);
    text-decoration: none;
}

/* Subtle radial glow at top of card */
.fs_card::before {
    content: '';
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 80px;
    background: radial-gradient(ellipse at center,
            rgba(82, 119, 124, 0.45) 0%,
            transparent 70%);
    pointer-events: none;
}

/* Animated shimmer sweep */
.fs_card_shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg,
            transparent 40%,
            rgba(255, 255, 255, 0.055) 50%,
            transparent 60%);
    pointer-events: none;
    animation: fs_card_sweep 4s ease-in-out infinite;
}

@keyframes fs_card_sweep {
    0% {
        left: -60%;
    }

    40% {
        left: 160%;
    }

    100% {
        left: 160%;
    }
}

/* Avatar */
.fs_avatar_wrap {
    position: relative;
    margin-bottom: 0.5rem;
}

.fs_avatar_ring {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(rgba(255, 255, 255, 0.7) 0deg,
            rgba(255, 255, 255, 0.08) 120deg,
            rgba(255, 255, 255, 0.7) 240deg,
            rgba(255, 255, 255, 0.08) 360deg);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: fs_ring_rotate 6s linear infinite;
}

@keyframes fs_ring_rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.fs_card:hover .fs_avatar_ring {
    transform: scale(1.1) rotate(0deg);
    animation-play-state: paused;
}

.fs_avatar_inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #3d6265 0%, #2b4a4e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    overflow: hidden;
    /* counter-rotate so inner stays upright */
    animation: fs_inner_counter 6s linear infinite;
}

@keyframes fs_inner_counter {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

.fs_card:hover .fs_avatar_inner {
    animation-play-state: paused;
}

/* Verified dot */
.fs_verified_dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4a7c80;
    border: 2px solid #1a2e30;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
    z-index: 1;
}

html[dir="rtl"] .fs_verified_dot {
    right: auto;
    left: 2px;
}

.fs_verified_dot svg {
    width: 10px;
    height: 10px;
    color: white;
}

/* Text */
.fs_name {
    font-size: 0.87rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
    letter-spacing: 0.01em;
}

.fs_type {
    font-size: 0.71rem;
    color: rgba(255, 255, 255, 0.42);
    display: block;
    letter-spacing: 0.03em;
}

/* CTA pill */
.fs_cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.65rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2rem;
    padding: 0.35rem 0.9rem;
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.fs_card:hover .fs_cta {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.32);
}

.fs_cta .arrow_icon {
    width: 12px;
    height: 12px;
    transition: transform 0.25s ease;
}

.fs_card:hover .fs_cta .arrow_icon {
    transform: translateX(3px);
}

html[dir="rtl"] .fs_card:hover .fs_cta .arrow_icon {
    transform: translateX(-3px);
}


.line_effect::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    width: 3px;
    top: -10px;
    bottom: -10px;
    left: -40px;
    transform: rotate(25deg);
    box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 20px;
    filter: blur(8px);
    transition: 1s;
    animation: 1.5s ease-in-out 0s infinite normal none running customEffectFrame;
}

@keyframes customEffectFrame {
    0% {
        left: -40px;
    }

    100% {
        left: calc(100% + 2px);
    }
}


.not_found_screen_area {
    padding-block: 6rem;
    text-align: center;
}

.not_found_screen_area img {
    width: 18rem;
    opacity: 0.85;
}


.dropzone_area {
    cursor: pointer;
    transition: var(--t);
    border-radius: var(--radius-lg);
    pointer-events: none;
}

.dropzone_area.bg-light.border-primary {
    background-color: #f0f9ff !important;
    border-color: var(--icon-main-color) !important;
}

.preview_item img {
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.remove_preview {
    border-radius: 50%;
    line-height: 1;
}


/* Container card */
.conversations_card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* Each conversation row */
.conversations_card .conversation_item {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.18s ease;
}

.conversations_card .conversation_item:last-of-type {
    border-bottom: none;
}

/* Unread highlight */
.conversations_card .conversation_item.unread_messages {
    background: rgba(53, 79, 82, 0.04);
}

.conversations_card .conversation_item .link_action {
    display: grid;
    align-items: center;
    gap: 1rem;
    grid-template-columns: 52px 1fr auto;
    padding: 0.9rem 1.1rem;
    text-decoration: none;
    transition: background 0.18s ease;
}

.conversations_card .conversation_item .link_action:hover {
    background: rgba(53, 79, 82, 0.05);
    text-decoration: none;
}

/* Product image */
.conversations_card .conversation_item .link_action .icon_item .avatar {
    width: 52px !important;
    height: 52px !important;
    border-radius: var(--radius-lg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: var(--bg-section) !important;
    display: block;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

.conversations_card .conversation_item .cv_row {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    text-decoration: none;
    align-items: center;
    transition: background 0.18s ease;
}

.conversations_card .conversation_item .cv_row:hover {
    background: rgba(53, 79, 82, 0.05);
    text-decoration: none;
}

.cv_thumb_wrap {
    position: relative;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
}

.cv_thumb {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    border: 1px solid var(--border-color);
    background: var(--bg-section);
    display: block;
}

.cv_unread_dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--bg-card);
    animation: cv_dot_pulse 2s ease-in-out infinite;
}

html[dir="rtl"] .cv_unread_dot {
    right: auto;
    left: -3px;
}

@keyframes cv_dot_pulse {

    0%,
    100% {
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.08);
    }
}

.cv_content {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

/* Top: title + time */
.cv_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cv_title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.conversation_item.unread_messages .cv_title {
    font-weight: 700;
}

.cv_time {
    font-size: 0.69rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.conversation_item.unread_messages .cv_time {
    color: var(--bg-main-color);
    font-weight: 700;
}

/* Middle: who you're chatting with */
.cv_from {
    display: flex;
    align-items: center;
    gap: 0.22rem;
    font-size: 0.76rem;
    color: var(--bg-main-color);
    font-weight: 600;
}

.cv_from svg {
    --aous-aw-icon-size: 0.82rem;
    opacity: 0.65;
    flex-shrink: 0;
}

.cv_from .tick_icon {
    --aous-aw-icon-size: 0.8rem;
}

/* Bottom: preview + badge */
.cv_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cv_preview {
    font-size: 0.77rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.conversation_item.unread_messages .cv_preview {
    color: var(--text-main-color);
    font-weight: 500;
}

.cv_read_icon {
    --aous-aw-icon-size: 0.88rem;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Unread badge */
.conversations_card .conversation_item .messages_count {
    background: var(--bg-main-gradient);
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    border-radius: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.67rem;
    font-weight: 700;
    box-shadow: var(--shadow-brand);
    flex-shrink: 0;
    animation: cv_badge_pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cv_badge_pop {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}


.msg_product_bar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: var(--t);
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-card);
}

.msg_product_bar:hover {
    border-color: var(--bg-main-color);
    box-shadow: var(--shadow-card-hover);
    text-decoration: none;
}

.msg_product_img {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.msg_product_info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.msg_product_title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg_product_id {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.msg_product_status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
}

.msg_product_status_label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

.msg_product_arrow {
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform var(--t);
}

.msg_product_bar:hover .msg_product_arrow {
    transform: translateX(3px);
}

html[dir="rtl"] .msg_product_bar:hover .msg_product_arrow {
    transform: translateX(-3px);
}

.msg_product_arrow .arrow_icon {
    width: 16px;
    height: 16px;
}

.msg_chat_area {
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    max-height: 58vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    margin-bottom: 0;
}

.msg_chat_inner {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.msg_row {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    max-width: 80%;
}

.msg_row_in {
    align-self: flex-start;
}

.msg_row_out {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.msg_avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-main-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    text-decoration: none;
    transition: transform var(--t);
    align-self: flex-end;
}

.msg_avatar:hover {
    transform: scale(1.08);
}

.msg_avatar_me {
    background: linear-gradient(135deg, #52777c 0%, #354f52 100%);
    cursor: default;
}

.msg_avatar_me:hover {
    transform: none;
}

.msg_bubble_wrap {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.msg_row_out .msg_bubble_wrap {
    align-items: flex-end;
}

.msg_sender_name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bg-main-color);
    padding-inline-start: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.msg_sender_name .tick_icon {
    --aous-aw-icon-size: 0.75rem;
}

.msg_bubble {
    padding: 0.65rem 0.95rem;
    border-radius: 18px;
    font-size: 0.88rem;
    line-height: 1.55;
    word-break: break-word;
    max-width: 100%;
    position: relative;
}

.msg_bubble_in {
    background: var(--bg-card);
    color: var(--text-main-color);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
    box-shadow: var(--shadow-sm);
}

html[dir="rtl"] .msg_bubble_in {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 4px;
}

.msg_bubble_out {
    background: linear-gradient(135deg, #354f52 0%, #2b4347 100%);
    color: rgba(255, 255, 255, 0.95);
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 10px rgba(53, 79, 82, 0.3);
}

html[dir="rtl"] .msg_bubble_out {
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 4px;
}

.msg_time {
    font-size: 0.67rem;
    color: var(--text-secondary);
    padding-inline: 0.5rem;
}

.msg_row_out .msg_time {
    color: var(--text-secondary);
}

.msg_reply_bar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    padding: 0.85rem 1.1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    margin-bottom: 1rem;
}

.msg_reply_bar_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.msg_reply_hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.msg_reply_hint svg {
    --aous-aw-icon-size: 0.9rem;
    opacity: 0.5;
}

.msg_reply_btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.5rem !important;
    background: var(--bg-main-gradient) !important;
    color: white !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.87rem !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 3px 12px rgba(53, 79, 82, 0.3) !important;
    transition: var(--t) !important;
    text-decoration: none;
}

.msg_reply_btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(53, 79, 82, 0.4) !important;
    color: white !important;
}

.msg_reply_btn .arrow_icon {
    width: 15px;
    height: 15px;
}

.rp_header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-section);
}

.rp_to {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.rp_to_avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-main-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.rp_to_info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.rp_to_label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
}

.rp_to_name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rp_to_name:hover {
    color: var(--bg-main-color);
}

.rp_to_name .tick_icon {
    --aous-aw-icon-size: 0.9rem;
}

.rp_body {
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rp_field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rp_label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main-color);
}

.rp_textarea {
    border-radius: var(--radius-md);
    border-color: var(--border-color);
    font-size: 0.88rem;
    resize: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rp_textarea:focus {
    border-color: var(--bg-main-color);
    box-shadow: 0 0 0 3px rgba(53, 79, 82, 0.12);
    outline: none;
}

.rp_notice {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    background: var(--bg-section);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
}

.rp_notice svg {
    --aous-aw-icon-size: 0.9rem;
    flex-shrink: 0;
    opacity: 0.5;
    margin-top: 1px;
}

.rp_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.35rem;
    background: var(--bg-section);
    gap: 0.75rem;
}

.rp_cancel {
    font-size: 0.84rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    transition: var(--t);
}

.rp_cancel:hover {
    background: var(--bg-main-color);
    color: white;
    border-color: var(--bg-main-color);
}

.rp_send_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.5rem;
    background: var(--bg-main-gradient);
    color: white;
    font-size: 0.87rem;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--t);
    box-shadow: var(--shadow-brand);
}

.rp_send_btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(53, 79, 82, 0.38);
    color: white;
}

.rp_send_btn svg {
    --aous-aw-icon-size: 0.95rem;
}


/* Grid */
.fl_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 1rem;
}

/* Card */
.fl_card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem 1rem;
    gap: 0.35rem;
    transition: var(--t-spring);
    overflow: hidden;
    position: relative;
}

/* Store link — wraps avatar + text */
.fl_card_link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    width: 100%;
}

.fl_card_link:hover {
    text-decoration: none;
}

/* Avatar */
.fl_avatar_wrap {
    position: relative;
    margin-bottom: 0.3rem;
}

.fl_avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--bg-main-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    box-shadow: var(--shadow-brand);
    transition: transform var(--t-spring);
}

.fl_card:hover .fl_avatar {
    transform: scale(1.07);
}

.fl_verified {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-main-color);
    border: 2px solid var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
}

html[dir="rtl"] .fl_verified {
    right: auto;
    left: 1px;
}

.fl_verified svg {
    width: 10px;
    height: 10px;
    color: white;
}

/* Text */
.fl_name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main-color);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

.fl_type {
    font-size: 0.72rem;
    color: var(--bg-main-color);
    font-weight: 600;
    display: block;
}

.fl_code {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: block;
    letter-spacing: 0.04em;
}

/* Unfollow button */
.fl_unfollow_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    padding: 0.32rem 0.85rem;
    background: var(--bg-section);
    text-decoration: none;
    transition: var(--t);
    width: 100%;
}

.fl_unfollow_btn svg {
    --aous-aw-icon-size: 0.85rem;
    flex-shrink: 0;
}

.fl_unfollow_btn:hover {
    background: #fff2f2;
    border-color: #dc3545;
    color: #dc3545;
}


.wanted_products_area .header_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* Section header with left accent bar */
.header_page h1 {
    position: relative;
}

html[dir="rtl"] .header_page h1 {
    padding-left: 0;
    padding-right: 0.9rem;
}

html[dir="rtl"] .header_page h1::before {
    left: auto;
    right: 0;
}

/* Message card — brand tint */
.message_card {
    background: linear-gradient(135deg, var(--fourth-color) 0%, rgba(53, 79, 82, .08) 100%);
    border: 1px solid rgba(53, 79, 82, .15);
}

/* Search keyword highlight */
.search_screen_area .header_search_value .highlight_search_value {
    color: var(--bg-main-color);
}

/* App store buttons hover shadow */
.web_footer .app_stores a:hover img {
    box-shadow: var(--shadow-brand);
}


/* Consistent section spacing */
.home_section {
    margin-top: 3rem;
}

/* Hero carousel dots */
.hero_area .carousel-indicators {
    bottom: 1rem;
    gap: 0.35rem;
    margin: 0;
    justify-content: center;
}

.hero_area .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.25s ease;
    flex-shrink: 0;
    opacity: 1;
    margin: 0;
}

.hero_area .carousel-indicators .active {
    width: 24px;
    border-radius: 99px;
    background: #fff;
}

/* New products grid */
.new_products_area .products_content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

/* Recommended by us grid */
.recommended_by_us_area .products_content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}


/* Make hero taller */
.body_area .right_area .hero_area .carousel-inner .carousel-item {
    height: 36rem;
}

/* Richer overlay gradient */
.body_area .right_area .hero_area .carousel-inner .carousel-item::after {
    background: linear-gradient(135deg,
            rgba(14, 31, 33, 0.85) 0%,
            rgba(14, 31, 33, 0.35) 55%,
            transparent 100%);
}

/* Hero text refinements */
.body_area .right_area .hero_area .carousel-inner .carousel-item .text_content h1 {
    font-size: 2.8rem;
}


/* hr between sections — lighter */
.exclusive_offers+hr,
.main_category_with_products hr,
.last_seen+hr {
    border: none;
    margin-block: 0;
    opacity: 1;
}

.scrolling_area .header_page {
    margin-bottom: 1rem;
}

.most_popular_categories {
    margin-bottom: 0;
}

.sidebar_products_area.home_section {
    margin-top: 2.5rem;
}

.sidebar_products_area .sidebar_products_list {
    margin-top: 1rem;
}

/* Modal shell */
.rm_modal {
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.rm_header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
    border-bottom: 1px solid #fde8e8;
    position: relative;
}

.rm_header_icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rm_header_icon svg {
    --aous-aw-icon-size: 1.25rem;
    color: #dc3545;
}

.rm_header_text {
    flex: 1;
    min-width: 0;
}

.rm_header_text h5 {
    font-size: 1rem;
    font-weight: 700;
    color: #c0392b;
    margin: 0 0 0.2rem;
}

.rm_header_text p {
    font-size: 0.8rem;
    color: #e57373;
    margin: 0;
    line-height: 1.4;
}

.rm_close {
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.5;
}

.rm_body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Info note */
.rm_info_note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: rgba(53, 79, 82, 0.05);
    border: 1px solid rgba(53, 79, 82, 0.1);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    font-size: 0.81rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.rm_info_note svg {
    --aous-aw-icon-size: 1.1rem;
    color: var(--bg-main-color);
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.75;
}

.rm_reasons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.rm_reason {
    position: relative;
    cursor: pointer;
}

.rm_reason input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rm_reason_card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-section);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    user-select: none;
}

.rm_reason:hover .rm_reason_card {
    border-color: #f1a7a7;
    background: #fff8f8;
}

.rm_reason input[type="radio"]:checked+.rm_reason_card {
    border-color: #dc3545;
    background: #fff2f2;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Radio dot */
.rm_reason_dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
}

.rm_reason_dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #dc3545;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rm_reason input[type="radio"]:checked+.rm_reason_card .rm_reason_dot {
    border-color: #dc3545;
}

.rm_reason input[type="radio"]:checked+.rm_reason_card .rm_reason_dot::after {
    transform: translate(-50%, -50%) scale(1);
}

.rm_reason_label {
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--text-main-color);
    line-height: 1.3;
}

.rm_field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rm_label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main-color);
}

.rm_textarea {
    border-radius: var(--radius-md);
    border-color: var(--border-color);
    font-size: 0.87rem;
    resize: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rm_textarea:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
    outline: none;
}

.rm_confirm {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
}

.rm_check_input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rm_check_box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
}

.rm_check_box::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 5px;
    height: 9px;
    border: 2px solid white;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rm_check_input:checked~.rm_check_box {
    background: #dc3545;
    border-color: #dc3545;
}

.rm_check_input:checked~.rm_check_box::after {
    transform: rotate(45deg) scale(1);
}

.rm_confirm_text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.rm_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--bg-section);
    gap: 0.75rem;
}

.rm_footer_center {
    justify-content: center;
}

.rm_cancel_btn {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    transition: var(--t);
}

.rm_cancel_btn:hover {
    background: var(--bg-main-color);
    border-color: var(--bg-main-color);
    color: white;
}

.rm_submit_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.5rem;
    background: #dc3545;
    color: white;
    font-size: 0.87rem;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--t);
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(220, 53, 69, 0.3);
}

.rm_submit_btn:hover {
    background: #c0392b;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(220, 53, 69, 0.38);
}

.rm_submit_btn svg {
    --aous-aw-icon-size: 0.95rem;
}

.myad_list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}

.myad_row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    transition: background var(--t-fast);
}

.myad_row:last-child {
    border-bottom: none;
}

.myad_row:hover {
    background: var(--bg-section);
    text-decoration: none;
}

.myad_thumb_wrap {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-section);
}

.myad_thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.myad_info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.myad_title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.myad_meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.myad_price {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bg-main-color);
}

.myad_dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-secondary);
    flex-shrink: 0;
}

.myad_id {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.myad_badges {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.myad_type_pill {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
}

.myad_badges .badge {
    font-size: 0.67rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: var(--radius-pill);
}

.myad_arrow {
    flex-shrink: 0;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.myad_arrow svg {
    --aous-aw-icon-size: 1rem;
}

html[dir="rtl"] .myad_arrow svg {
    rotate: 180deg;
}

.addt_toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    margin-bottom: 1.25rem;
}

.addt_back_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: var(--bg-section);
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.addt_back_btn svg {
    --aous-aw-icon-size: 0.9rem;
}

.addt_back_btn:hover {
    color: var(--text-main-color);
    border-color: var(--bg-main-color);
    background: var(--bg-card);
    text-decoration: none;
}

.addt_toolbar_center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.addt_toolbar_title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.addt_toolbar_badges {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.addt_toolbar_badges .badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
}

.addt_toolbar_actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.addt_tool_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--t);
    border: 1.5px solid transparent;
    white-space: nowrap;
}

.addt_tool_btn svg {
    --aous-aw-icon-size: 0.9rem;
    flex-shrink: 0;
}

.addt_tool_btn span {
    display: inline;
}

.addt_tool_primary {
    background: var(--bg-main-gradient);
    color: white;
    box-shadow: var(--shadow-brand);
}

.addt_tool_primary:hover {
    color: white;
    box-shadow: 0 6px 20px rgba(53, 79, 82, .35);
}

.addt_tool_ghost {
    background: var(--bg-section);
    border-color: var(--border-color);
    color: var(--text-main-color);
}

.addt_tool_ghost:hover {
    border-color: var(--bg-main-color);
    color: var(--bg-main-color);
    background: var(--bg-card);
    text-decoration: none;
}

.addt_tool_danger {
    background: #fff5f5;
    border-color: #fecaca;
    color: #dc2626;
    padding: 0.45rem 0.75rem;
}

.addt_tool_danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: white;
}

.addt_card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

.addt_card_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.addt_field {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.addt_field:nth-child(odd):not(.addt_span2) {
    border-inline-end: 1px solid var(--border-color);
}

.addt_field:last-child,
.addt_field:nth-last-child(2):not(.addt_span2) {
    border-bottom: none;
}

.addt_span2 {
    grid-column: span 2;
    border-inline-end: none !important;
}

.addt_label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
}

.addt_value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main-color);
}

.addt_mono {
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--bg-main-color);
}

.addt_price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bg-main-color);
}

.addt_link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--bg-main-color);
    text-decoration: none;
}

.addt_link:hover {
    text-decoration: underline;
}

.addt_link svg {
    --aous-aw-icon-size: 0.85rem;
    flex-shrink: 0;
}

.addt_desc {
    line-height: 1.7;
    color: var(--text-paragraph);
    font-weight: 400;
    white-space: pre-wrap;
}

.addt_media_strip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.addt_media_main {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}

.addt_media_main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.addt_media_thumbs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.addt_media_thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

.addt_media_thumb a img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    display: block;
}

.addt_media_thumb .addt_thumb_del {
    position: absolute;
    inset: 0;
    background: rgba(220, 53, 69, 0.80);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--t-fast);
    color: white;
}

.addt_media_thumb:hover .addt_thumb_del {
    opacity: 1;
}

.psa_alert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
}

.psa_warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.psa_danger {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #881337;
}

.psa_icon_wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.6);
}

.psa_icon_wrap svg {
    --aous-aw-icon-size: 1.25rem;
}

.psa_body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.psa_title {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
}

.psa_msg {
    font-size: 0.8125rem;
    line-height: 1.55;
    opacity: 0.85;
}

.psa_note {
    display: block;
    margin-top: 0.5rem;
    font-style: italic;
    font-weight: 500;
    opacity: 1;
}

.psa_date {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    margin-top: 0.375rem;
    opacity: 0.7;
}

.psa_date svg {
    --aous-aw-icon-size: 0.75rem;
}


.ss_modal_content {
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.ss_modal_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.ss_modal_title_wrap {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.ss_modal_icon_wrap {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--bg-section);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-main-color);
    flex-shrink: 0;
}

.ss_modal_icon_wrap svg {
    --aous-aw-icon-size: 1rem;
}

.ss_modal_title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-main-color);
}

.ss_close_btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--t-fast);
    padding: 0;
}

.ss_close_btn:hover {
    background: var(--border-color);
    color: var(--text-main-color);
}

.ss_close_btn svg {
    --aous-aw-icon-size: 0.875rem;
}

.ss_modal_body {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ss_options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ss_opt {
    cursor: pointer;
    display: block;
}

.ss_opt input[type="radio"] {
    display: none;
}

.ss_opt_inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    transition: var(--t-fast);
}

.ss_opt:hover .ss_opt_inner {
    border-color: var(--border-color-focus);
    background: var(--bg-card-alt);
}

.ss_opt_active .ss_opt_inner {
    border-color: var(--bg-main-color);
    background: rgba(53, 79, 82, 0.05);
}

.ss_opt_dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
    transition: var(--t-fast);
    position: relative;
}

.ss_opt_active .ss_opt_dot {
    border-color: var(--bg-main-color);
    background: var(--bg-main-color);
}

.ss_opt_active .ss_opt_dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
}

.ss_opt_label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main-color);
}

.ss_warning_wrap {
    margin-top: 0.25rem;
}

.ss_modal_footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card-alt);
}

.ss_cancel_btn {
    padding: 0.5rem 1.125rem;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--t-fast);
}

.ss_cancel_btn:hover {
    background: var(--bg-section);
    color: var(--text-main-color);
}

.ss_confirm_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-md);
    border: none;
    background: var(--bg-main-color);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--t-fast);
}

.ss_confirm_btn:hover {
    background: var(--bg-main-hover);
}

.ss_confirm_btn svg {
    --aous-aw-icon-size: 0.875rem;
}

.pi_profile_card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    margin-bottom: 1.25rem;
}

.pi_avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--bg-main-gradient);
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-brand);
}

.pi_profile_info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pi_name_row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.pi_name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-main-color);
}

.pi_verified_icon {
    --aous-aw-icon-size: 1.125rem;
}

.pi_pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pi_pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bg-section);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.pi_pill_mono {
    font-family: monospace;
    letter-spacing: 0.03em;
}

.pi_store_link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bg-main-color);
    text-decoration: none;
    transition: var(--t-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.pi_store_link:hover {
    background: var(--bg-main-color);
    border-color: var(--bg-main-color);
    color: #fff;
}

.pi_store_link svg {
    --aous-aw-icon-size: 0.875rem;
}

.pi_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.pi_field {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.pi_field_icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--bg-section);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--icon-main-color);
}

.pi_field_icon svg {
    --aous-aw-icon-size: 1rem;
}

.pi_field_body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pi_field_label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

.pi_field_value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main-color);
}

.psa_info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a5f;
}

.psa_info::before {
    background: #3b82f6;
}

.dz_card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1.5px solid #fecdd3;
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.08);
}

.dz_icon_wrap {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: #fff1f2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ef4444;
}

.dz_icon_wrap svg {
    --aous-aw-icon-size: 1.25rem;
}

.dz_body {
    flex: 1;
}

.dz_title {
    font-size: 1rem;
    font-weight: 700;
    color: #881337;
    margin: 0 0 0.25rem;
}

.dz_desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
}

.dz_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-md);
    background: #ef4444;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--t-fast);
    flex-shrink: 0;
    white-space: nowrap;
}

.dz_btn:hover {
    background: #dc2626;
    color: #fff;
}

.dz_btn svg {
    --aous-aw-icon-size: 0.875rem;
}

.ntf_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
}

.ntf_toolbar_title {
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-main-color);
}

.ntf_tabs {
    display: flex;
    gap: 0.375rem;
    background: var(--bg-section);
    padding: 0.25rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
}

.ntf_tab {
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--t-fast);
}

.ntf_tab:hover {
    color: var(--text-main-color);
}

.ntf_tab_active {
    background: var(--bg-card);
    color: var(--bg-main-color);
    font-weight: 700;
    box-shadow: var(--shadow-xs);
}

.ntf_list {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.ntf_item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--t-fast);
    position: relative;
}

.ntf_item:last-child {
    border-bottom: none;
}

.ntf_item:hover {
    background: var(--bg-card-alt);
}

.ntf_item_unread {
    background: rgba(53, 79, 82, 0.03);
}

.ntf_item_unread::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--bg-main-color);
    border-radius: 0 2px 2px 0;
}

.ntf_icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ntf_icon svg {
    --aous-aw-icon-size: 1.1rem;
}

.ntf_ic_blue {
    background: #eff6ff;
    color: #3b82f6;
}

.ntf_ic_teal {
    background: rgba(53, 79, 82, .1);
    color: var(--bg-main-color);
}

.ntf_ic_green {
    background: #f0fdf4;
    color: #22c55e;
}

.ntf_ic_red {
    background: #fff1f2;
    color: #ef4444;
}

.ntf_ic_amber {
    background: #fffbeb;
    color: #f59e0b;
}

.ntf_ic_gray {
    background: var(--bg-section);
    color: var(--text-secondary);
}

.ntf_body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.ntf_title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-main-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ntf_desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.ntf_meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    flex-shrink: 0;
}

.ntf_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bg-main-color);
}

.ntf_time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.ntf_link_btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: var(--t-fast);
}

.ntf_link_btn:hover {
    background: var(--bg-main-color);
    border-color: var(--bg-main-color);
    color: #fff;
}

.ntf_link_btn svg {
    --aous-aw-icon-size: 0.75rem;
}

.nd_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 0.75rem;
}

.nd_icon_wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-section);
    border: 1.5px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.nd_icon_wrap svg {
    --aous-aw-icon-size: 1.75rem;
}

.nd_title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main-color);
}

.nd_message {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 380px;
    line-height: 1.6;
}

.nd_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.75rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    margin-top: 0.5rem;
    transition: opacity var(--t-fast), transform var(--t-fast);
    box-shadow: 0 4px 14px rgba(83, 168, 182, 0.28);
}

.nd_btn:hover {
    opacity: 0.88;
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}

.prf_layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.75rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
    align-items: start;
}

.prf_sidebar {
    position: sticky;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.prf_user_card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.125rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.prf_user_avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bg-main-gradient);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-brand);
}

.prf_user_info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.prf_user_name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prf_tick {
    --aous-aw-icon-size: 1rem;
    flex-shrink: 0;
}

.prf_user_type {
    font-size: 0.73rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.prf_nav {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    padding: 0.5rem;
    gap: 0.125rem;
}

.prf_nav_link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--t-fast);
    position: relative;
}

.prf_nav_link:hover {
    background: var(--bg-section);
    color: var(--text-main-color);
}

.prf_nav_link.active {
    background: rgba(53, 79, 82, 0.05);
    color: var(--bg-main-color);
    font-weight: 700;
}

.prf_nav_link.active .prf_nav_icon {
    color: var(--bg-main-color);
}

.prf_nav_icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-section);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: var(--t-fast);
}

.prf_nav_link:hover .prf_nav_icon {
    background: var(--border-color);
    color: var(--text-main-color);
}

.prf_nav_icon svg {
    --aous-aw-icon-size: 1.5rem;
}

.prf_nav_sep {
    height: 1px;
    background: var(--border-color);
    margin: 0.375rem 0.5rem;
}

.prf_nav_logout {
    color: #ef4444;
}

.prf_nav_logout:hover {
    background: #fff1f2;
    color: #dc2626;
}

.prf_nav_logout .prf_nav_icon {
    color: #ef4444;
}

.prf_nav_logout:hover .prf_nav_icon {
    background: #fecdd3;
    color: #dc2626;
}

.prf_main {
    min-width: 0;
}

.wl_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.wl_card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    position: relative;
    display: flex;
    flex-direction: column;
}

.wl_img_wrap {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg-section);
}

.wl_img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.wl_card:hover .wl_img_wrap img {
    transform: scale(1.04);
}

.wl_body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.wl_title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main-color);
    text-decoration: none;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wl_price {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--bg-main-color);
}

.wl_remove {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.5rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--t-fast);
    backdrop-filter: blur(4px);
}

.wl_remove svg {
    --aous-aw-icon-size: 0.875rem;
}

.wl_card:hover .wl_remove {
    opacity: 1;
}

.sc_method {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 0.75rem;
}

.sc_method:last-child {
    margin-bottom: 0;
}

.sc_method_head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sc_method_icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-section);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-main-color);
    flex-shrink: 0;
}

.sc_method_icon svg {
    --aous-aw-icon-size: 1rem;
}

.sc_method_title {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main-color);
}

.sc_switch_wrap {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    flex-shrink: 0;
}

.sc_switch_input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sc_switch {
    width: 42px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--border-color);
    transition: background var(--t-fast);
    position: relative;
}

.sc_switch::after {
    content: '';
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: inset-inline-start var(--t-fast);
}

.sc_switch_input:checked+.sc_switch {
    background: var(--bg-main-color);
}

.sc_switch_input:checked+.sc_switch::after {
    inset-inline-start: calc(100% - 21px);
}

.sc_method_input {
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.psa_list {
    margin: 0;
    padding-inline-start: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.psa_list li {
    font-size: 0.8125rem;
    line-height: 1.55;
}

.myad_total_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--bg-main-color);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    margin-inline-start: 0.4rem;
    vertical-align: middle;
}

.ac_page {
    padding-bottom: 4rem;
}

.ac_hero {
    background: var(--bg-main-gradient);
    padding: 3.5rem 0 5rem;
    margin-bottom: -3rem;
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    border-radius: var(--radius-md);
}

.ac_hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(121, 194, 208, 0.25) 0%, transparent 65%),
        radial-gradient(ellipse at 20% 80%, rgba(29, 110, 120, 0.3) 0%, transparent 55%);
}

.ac_hero_title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem;
    position: relative;
}

.ac_hero_sub {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    position: relative;
}

.ac_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    position: relative;
}

.ac_card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: var(--t);
}

.ac_card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.ac_card_head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--t-fast);
}

.ac_card_head:hover {
    background: var(--bg-card-alt);
}

.ac_card_icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.ac_card:nth-child(6n+1) .ac_card_icon {
    background: linear-gradient(135deg, #354f52, #1d6e78);
}

.ac_card:nth-child(6n+2) .ac_card_icon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.ac_card:nth-child(6n+3) .ac_card_icon {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.ac_card:nth-child(6n+4) .ac_card_icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.ac_card:nth-child(6n+5) .ac_card_icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.ac_card:nth-child(6n+0) .ac_card_icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.ac_card_meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ac_card_name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-main-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac_card_count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.ac_card_arrow {
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform var(--t-fast);
}

.ac_card_arrow svg {
    --aous-aw-icon-size: 1rem;
}

.ac_card_head:hover .ac_card_arrow {
    transform: translateX(3px);
}

html[dir="rtl"] .ac_card_head:hover .ac_card_arrow {
    transform: translateX(-3px);
}

.ac_subs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.875rem 1.25rem;
}

.ac_sub_pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.625rem;
    border-radius: var(--radius-pill);
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    font-size: 0.775rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--t-fast);
}

.ac_sub_pill:hover {
    background: var(--bg-main-color);
    border-color: var(--bg-main-color);
    color: #fff;
}

.ac_sub_count {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.65;
}

.ac_sub_pill:hover .ac_sub_count {
    opacity: 1;
}

.sc_page {
    padding-bottom: 4rem;
}

.sc_hero {
    background: var(--bg-main-gradient);
    padding: 2.5rem 0 3rem;
    position: relative;
    overflow: hidden;
}

.sc_hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(121, 194, 208, .2) 0%, transparent 60%),
        radial-gradient(ellipse at 15% 80%, rgba(29, 110, 120, .25) 0%, transparent 55%);
}

.sc_hero_body {
    position: relative;
}

.sc_hero_label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
    letter-spacing: 0.08em;
    margin-bottom: 0.375rem;
}

.sc_hero_title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.sc_tabs_wrap {
    margin: 0 0 1.5rem;
    overflow: hidden;
}

.sc_tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 1rem 0 0.5rem;
    scrollbar-width: none;
}

.sc_tabs::-webkit-scrollbar {
    display: none;
}

.sc_tab {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    font-size: 0.8375rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--t-fast);
    flex-shrink: 0;
}

.sc_tab:hover {
    border-color: var(--border-color-focus);
    color: var(--text-main-color);
}

.sc_tab.active {
    background: var(--bg-main-color);
    border-color: var(--bg-main-color);
    color: #fff;
    font-weight: 700;
}

.sc_layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.sc_sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sc_filter_card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.sc_filter_section {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.sc_filter_section:last-child {
    border-bottom: none;
}

.sc_filter_label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.sc_cat_nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.sc_cat_link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.8375rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--t-fast);
}

.sc_cat_link svg {
    --aous-aw-icon-size: 0.875rem;
    flex-shrink: 0;
}

.sc_cat_link:hover {
    background: var(--bg-section);
    color: var(--text-main-color);
}

.sc_cat_active {
    color: var(--bg-main-color);
    font-weight: 700;
}

.sc_sub_list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sc_sub_link {
    display: block;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--t-fast);
    border-inline-start: 2px solid transparent;
}

.sc_sub_link:hover {
    background: var(--bg-section);
    color: var(--text-main-color);
}

.sc_sub_link.active {
    background: rgba(53, 79, 82, .07);
    color: var(--bg-main-color);
    font-weight: 600;
}

.sc_tags_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.sc_tag {
    display: inline-flex;
    padding: 0.275rem 0.625rem;
    border-radius: var(--radius-pill);
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    font-size: 0.775rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--t-fast);
}

.sc_tag:hover {
    background: var(--bg-main-color);
    border-color: var(--bg-main-color);
    color: #fff;
}

.sc_cta_card {
    background: var(--bg-main-gradient);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.sc_cta_card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 90% 10%, rgba(255, 255, 255, .12) 0%, transparent 60%);
}

.sc_cta_title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    position: relative;
    line-height: 1.35;
}

.sc_cta_desc {
    font-size: 0.775rem;
    color: rgba(255, 255, 255, .7);
    position: relative;
    line-height: 1.5;
}

.sc_cta_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--bg-main-color);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    position: relative;
    margin-top: 0.25rem;
    transition: var(--t-fast);
    align-self: flex-start;
}

.sc_cta_btn:hover {
    background: var(--fourth-color);
    color: var(--bg-main-color);
}

.sc_cta_btn svg {
    --aous-aw-icon-size: 0.875rem;
}

.sc_main {
    min-width: 0;
}

.sc_products_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.125rem;
}

.sc_loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 4rem 0;
}

.sc_loading span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg-main-color);
    animation: sc_bounce 0.9s ease-in-out infinite;
    opacity: 0.6;
}

.sc_loading span:nth-child(2) {
    animation-delay: 0.15s;
}

.sc_loading span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes sc_bounce {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.pc_card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: var(--t);
}

.pc_card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.pc_img_wrap {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--bg-section);
    flex-shrink: 0;
}

.pc_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.pc_card:hover .pc_img {
    transform: scale(1.05);
}

.pc_sold_badge {
    position: absolute;
    top: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 2;
}

.pc_wanted_badge {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    background: rgba(59, 130, 246, .9);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.pc_wanted_badge svg {
    --aous-aw-icon-size: 0.7rem;
}

.pc_body {
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.pc_meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.pc_place {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

.pc_date {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.pc_title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin: 0;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.pc_desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.pc_footer {
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.pc_price_wrap {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.pc_price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bg-main-color);
}

.pc_price_old {
    font-size: 0.775rem;
    color: var(--text-secondary);
    text-decoration: line-through;
}

.pc_free {
    color: #22c55e;
}

.pc_negotiable {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.pd_similar_header {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;
}

.pd_similar_title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.pd_similar_title svg {
    --aous-aw-icon-size: 1.25rem;
    color: var(--bg-main-color);
}

.sm_modal {
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-card);
}

.sm_header {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.375rem 1.5rem 1.125rem;
    border-bottom: 1px solid var(--border-color);
}

.sm_header_icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: var(--fourth-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sm_header_icon svg {
    --aous-aw-icon-size: 1.1rem;
    color: var(--bg-main-color);
}

.sm_header_text {
    flex: 1;
}

.sm_header_text h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin: 0 0 0.2rem;
}

.sm_header_text p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
}

.sm_close {
    margin-inline-start: auto;
    flex-shrink: 0;
    opacity: 0.5;
}

.sm_close:hover {
    opacity: 1;
}

.sm_body {
    padding: 1.375rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sm_seller_row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--bg-section);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.sm_seller_avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--bg-main-color);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sm_seller_details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sm_seller_name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.sm_seller_name:hover {
    color: var(--bg-main-color);
}

.sm_seller_name svg {
    --aous-aw-icon-size: 0.9rem;
}

.sm_seller_type {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.sm_field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sm_label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-main-color);
}

.sm_textarea,
.sm_input {
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main-color);
    font-size: 0.9rem;
    padding: 0.625rem 0.875rem;
    transition: border-color var(--t-fast);
    resize: none;
}

.sm_textarea:focus,
.sm_input:focus {
    border-color: var(--bg-main-color);
    box-shadow: 0 0 0 3px rgba(53, 79, 82, .1);
    outline: none;
}

.sm_note {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.sm_footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-section);
}

.sm_footer_center {
    justify-content: center;
}

.sm_cancel_btn {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    transition: var(--t-fast);
}

.sm_cancel_btn:hover {
    background: var(--bg-card);
    color: var(--text-main-color);
}

.sm_submit_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.375rem;
    border-radius: var(--radius-pill);
    background: var(--bg-main-color);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: var(--t-fast);
}

.sm_submit_btn:hover {
    background: var(--bg-main-color-hover, #2a4042);
    color: #fff;
}

.sm_submit_btn svg {
    --aous-aw-icon-size: 0.9rem;
}

.wn_page {
    padding-bottom: 4rem;
}

.wn_hero {
    background: linear-gradient(135deg, var(--bg-dark-3) 0%, var(--bg-dark) 50%, var(--bg-dark-2) 100%);
    padding: 2.5rem 0 3rem;
    position: relative;
    overflow: hidden;
}

.wn_hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(99, 102, 241, .25) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 20%, rgba(139, 92, 246, .2) 0%, transparent 50%);
}

.wn_hero_body {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.wn_hero_icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
}

.wn_hero_icon svg {
    --aous-aw-icon-size: 1.5rem;
    color: #fff;
}

.wn_hero_label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .5);
    letter-spacing: 0.08em;
    margin-bottom: 0.3rem;
}

.wn_hero_title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.375rem;
    line-height: 1.2;
}

.wn_hero_sub {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, .55);
    margin: 0;
    line-height: 1.5;
}

.wn_cats_wrap {
    overflow: hidden;
    margin: 1.5rem 0;
}

.wn_cats {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.25rem 0 0.75rem;
    scrollbar-width: none;
}

.wn_cats::-webkit-scrollbar {
    display: none;
}

.wn_cat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    font-size: 0.8375rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--t-fast);
    flex-shrink: 0;
}

.wn_cat svg {
    --aous-aw-icon-size: 0.9rem;
    flex-shrink: 0;
}

.wn_cat:hover {
    border-color: var(--border-color-focus);
    color: var(--text-main-color);
}

.wn_cat_active {
    background: var(--bg-dark);
    border-color: var(--bg-dark);
    color: #fff;
    font-weight: 700;
}

.wn_cat_active:hover {
    color: #fff;
}

.wn_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.wn_toolbar_info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wn_toolbar_title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wn_toolbar_sep {
    color: var(--text-secondary);
    font-weight: 400;
}

.wn_toolbar_cat {
    color: var(--text-secondary);
    font-weight: 500;
}

.wn_count_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.wn_back_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--t-fast);
}

.wn_back_btn:hover {
    border-color: var(--border-color-focus);
    color: var(--text-main-color);
}

.wn_back_btn svg {
    --aous-aw-icon-size: 0.875rem;
}

.wn_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.125rem;
}

.wn_pagination {
    margin-top: 2rem;
}

.sh_modal {
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-card);
}

.sh_header {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.375rem 1.5rem 1.125rem;
    border-bottom: 1px solid var(--border-color);
}

.sh_header_icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: var(--fourth-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sh_header_icon svg {
    --aous-aw-icon-size: 1.1rem;
    color: var(--bg-main-color);
}

.sh_header_text {
    flex: 1;
}

.sh_header_text h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin: 0 0 0.2rem;
}

.sh_header_text p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
}

.sh_close {
    flex-shrink: 0;
    opacity: 0.45;
    margin-top: 2px;
}

.sh_close:hover {
    opacity: 1;
}

.sh_body {
    padding: 1rem 1.25rem 1.375rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sh_platforms {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sh_platform {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--t-fast);
    cursor: pointer;
}

.sh_platform:hover {
    background: var(--bg-section);
}

.sh_platform_icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sh_platform_icon svg {
    --aous-aw-icon-size: 1.2rem;
    color: #fff;
}

.sh_ic_facebook {
    background: #1877F2;
}

.sh_ic_whatsapp {
    background: #25D366;
}

.sh_ic_messenger {
    background: linear-gradient(135deg, #0084FF 0%, #a033ff 100%);
}

.sh_ic_email {
    background: #EA4335;
}

.sh_platform_name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main-color);
}

.sh_arrow {
    --aous-aw-icon-size: 0.9rem;
    color: var(--text-secondary);
}

.sh_copy_wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    cursor: pointer;
}

.sh_copy_label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

.sh_copy_row {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--t-fast);
}

.sh_copy_wrap:hover .sh_copy_row {
    border-color: var(--bg-main-color);
}

.sh_copy_input {
    flex: 1;
    border: none;
    background: var(--bg-section);
    padding: 0.65rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    min-width: 0;
    outline: none;
    cursor: pointer;
}

.sh_copy_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 1rem;
    background: var(--bg-main-color);
    border: none;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity var(--t-fast);
}

.sh_copy_btn:hover {
    opacity: 0.85;
}

.sh_copy_btn svg {
    --aous-aw-icon-size: 0.9rem;
}

.sh_copied_text {
    font-size: 0.8rem;
}

.sp_section {
    padding: 2.5rem 0;
}

.sp_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 0 0.25rem;
}

.sp_header_left {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.sp_header_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--bg-dark-3) 0%, var(--bg-dark) 50%, var(--bg-dark-2) 100%);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(83, 168, 182, 0.35);
}

.sp_header_icon svg {
    --aous-aw-icon-size: 1.2rem;
    color: #fff;
}

.sp_title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin: 0 0 0.1rem;
    line-height: 1.2;
}

.sp_sub {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
}

.sp_card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    text-decoration: none;
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
    position: relative;
}

.sp_card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: #53a8b6;
    text-decoration: none;
}

.sp_img_wrap {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--bg-section);
}

.sp_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.sp_card:hover .sp_img {
    transform: scale(1.04);
}

.sp_badge {
    position: absolute;
    top: 0.6rem;
    inset-inline-start: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--second-color) 0%, var(--second-color) 100%);
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(83, 168, 182, 0.4);
}

.sp_badge svg {
    --aous-aw-icon-size: 0.75rem;
    color: #fff;
}

.sp_body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.875rem;
    flex: 1;
}

.sp_cat {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bg-main-color);
    letter-spacing: 0.05em;
}

.sp_name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-main-color);
    line-height: 1.35;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sp_price_row {
    margin-top: auto;
    padding-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.sp_price_wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.sp_price {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--second-color);
}

.sp_price_old {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: line-through;
}

.sp_price_free {
    font-size: 0.9rem;
    font-weight: 700;
    color: #10b981;
}

.sp_negotiable {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
}

.csh_page {
    padding: 3rem 0 4rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.csh_hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--bg-dark-3) 0%, var(--bg-dark) 50%, var(--bg-dark-2) 100%);
    position: relative;
    overflow: hidden;
}

.csh_hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(83, 168, 182, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.csh_hero_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(83, 168, 182, 0.35);
}

.csh_hero_icon svg {
    --aous-aw-icon-size: 2rem;
    color: #fff;
}

.csh_hero_title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 1rem;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.csh_hero_sub {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 520px;
    line-height: 1.7;
    margin: 0 0 2rem;
}

.csh_hero_actions {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
    justify-content: center;
}

.csh_btn_primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity var(--t-fast), transform var(--t-fast);
    box-shadow: 0 4px 16px rgba(83, 168, 182, 0.35);
}

.csh_btn_primary:hover {
    opacity: 0.88;
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}

.csh_btn_primary svg {
    --aous-aw-icon-size: 1.1rem;
}

.csh_btn_outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.csh_btn_outline:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}

.csh_btn_outline svg {
    --aous-aw-icon-size: 1.1rem;
}

.csh_steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.csh_step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    position: relative;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.csh_step_num {
    position: absolute;
    top: 1rem;
    inset-inline-start: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bg-main-color);
    letter-spacing: 0.08em;
    opacity: 0.6;
}

.csh_step_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-md);
    background: var(--bg-section);
    margin-bottom: 1rem;
    transition: background var(--t-fast);
}

.csh_step:hover .csh_step_icon {
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
}

.csh_step_icon svg {
    --aous-aw-icon-size: 1.6rem;
    color: var(--bg-main-color);
    transition: color var(--t-fast);
}

.csh_step:hover .csh_step_icon svg {
    color: #fff;
}

.csh_step_title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin: 0 0 0.5rem;
}

.csh_step_text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.csh_step_arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    margin-top: 3.5rem;
    flex-shrink: 0;
}

.csh_step_arrow svg {
    --aous-aw-icon-size: 1.25rem;
    color: var(--border-color);
}

.csh_section_title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin: 0 0 1.5rem;
    letter-spacing: -0.02em;
}

.csh_types_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.csh_type_card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 2rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    position: relative;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.csh_type_badge {
    position: absolute;
    top: 1.25rem;
    inset-inline-end: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
}

.csh_type_badge svg {
    --aous-aw-icon-size: 0.7rem;
    color: #fff;
}

.csh_type_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
}

.csh_type_icon_private {
    background: var(--bg-section);
}

.csh_type_icon_private svg {
    --aous-aw-icon-size: 1.5rem;
    color: var(--text-secondary);
}

.csh_type_icon_business {
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
    box-shadow: 0 4px 12px rgba(83, 168, 182, 0.3);
}

.csh_type_icon_business svg {
    --aous-aw-icon-size: 1.5rem;
    color: #fff;
}

.csh_type_name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin: 0.25rem 0 0;
}

.csh_type_text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.csh_type_link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bg-main-color);
    text-decoration: none;
    margin-top: 0.5rem;
    transition: gap var(--t-fast);
}

.csh_type_link:hover {
    gap: 0.6rem;
    color: var(--bg-main-color);
    text-decoration: none;
}

.csh_type_link svg {
    --aous-aw-icon-size: 1rem;
}

.csh_type_link_featured {
    color: var(--bg-main-color);
}

.csh_benefits_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.csh_benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.875rem;
    padding: 1.75rem 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    transition: border-color var(--t-fast), transform var(--t-fast);
}

.csh_benefit_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: var(--bg-section);
    flex-shrink: 0;
    transition: background var(--t-fast);
}

.csh_benefit:hover .csh_benefit_icon {
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
}

.csh_benefit_icon svg {
    --aous-aw-icon-size: 1.4rem;
    color: var(--bg-main-color);
    transition: color var(--t-fast);
}

.csh_benefit:hover .csh_benefit_icon svg {
    color: #fff;
}

.csh_benefit_text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

.in_page {
    padding: 3rem 0 4rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.in_hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.in_hero_private {
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
}

.in_hero_business {
    background: linear-gradient(135deg, var(--bg-dark-3) 0%, var(--bg-dark) 50%, var(--bg-dark-2) 100%);
}

.in_hero_business::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(83, 168, 182, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.in_hero_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    margin-bottom: 1.5rem;
}

.in_hero_icon svg {
    --aous-aw-icon-size: 2rem;
    color: #fff;
}

.in_hero_title {
    font-size: 2.4rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 1rem;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.in_hero_sub {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 520px;
    line-height: 1.7;
    margin: 0 0 2rem;
}

.in_hero_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--t-fast), transform var(--t-fast);
}

.in_hero_btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}

.in_hero_btn_dark {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.in_hero_btn svg {
    --aous-aw-icon-size: 1.1rem;
}

.in_body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.in_two_col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.in_section {
    padding: 1.75rem 2rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
}

.in_section_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-md);
    background: var(--bg-section);
    margin-bottom: 1rem;
}

.in_section_icon svg {
    --aous-aw-icon-size: 1.4rem;
    color: var(--bg-main-color);
}

.in_section_title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin: 0 0 0.65rem;
}

.in_section_text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.in_features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
    margin-top: 0.5rem;
}

.in_feature {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    background: var(--bg-section);
    border: 1px solid var(--border-color);
}

.in_feature_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    flex-shrink: 0;
}

.in_feature_icon svg {
    --aous-aw-icon-size: 1.1rem;
    color: var(--bg-main-color);
}

.in_feature_text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    padding-top: 0.3rem;
}

.in_info_card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius-lg);
    border: 1.5px solid;
}

.in_info_card_warn {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.25);
}

.in_info_card_neutral {
    background: rgba(83, 168, 182, 0.06);
    border-color: rgba(83, 168, 182, 0.25);
}

.in_info_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.in_info_card_warn .in_info_icon {
    background: rgba(245, 158, 11, 0.12);
}

.in_info_card_warn .in_info_icon svg {
    --aous-aw-icon-size: 1.2rem;
    color: #f59e0b;
}

.in_info_card_neutral .in_info_icon {
    background: rgba(83, 168, 182, 0.12);
}

.in_info_card_neutral .in_info_icon svg {
    --aous-aw-icon-size: 1.2rem;
    color: var(--bg-main-color);
}

.in_info_title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin: 0 0 0.4rem;
}

.in_info_text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

.in_cta_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
    flex-wrap: wrap;
}

.in_cta_card_business {
    background: linear-gradient(135deg, var(--bg-dark-3) 0%, var(--bg-dark-2) 100%);
}

.in_cta_left {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
}

.in_cta_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.in_cta_icon svg {
    --aous-aw-icon-size: 1.5rem;
    color: #fff;
}

.in_cta_title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.3rem;
}

.in_cta_text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.55;
}

.in_cta_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--bg-main-color);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity var(--t-fast), transform var(--t-fast);
}

.in_cta_btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--bg-main-color);
}

.in_cta_btn_business {
    color: var(--bg-dark-2);
}

.in_cta_btn svg {
    --aous-aw-icon-size: 1rem;
}

.ab_page {
    padding: 3rem 0 4rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.ab_hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--bg-dark-3) 0%, var(--bg-dark) 50%, var(--bg-dark-2) 100%);
    position: relative;
    overflow: hidden;
}

.ab_hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(83, 168, 182, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.ab_hero_mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(83, 168, 182, 0.35);
}

.ab_hero_title {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 1rem;
    letter-spacing: -0.03em;
}

.ab_hero_sub {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 600px;
    line-height: 1.75;
    margin: 0;
}

.ab_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.ab_card {
    padding: 2rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.ab_card_wide {
    grid-column: 1 / -1;
}

.ab_card_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: var(--bg-section);
    flex-shrink: 0;
    transition: background var(--t-fast);
}

.ab_card:hover .ab_card_icon {
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
}

.ab_card_icon svg {
    --aous-aw-icon-size: 1.4rem;
    color: var(--bg-main-color);
    transition: color var(--t-fast);
}

.ab_card:hover .ab_card_icon svg {
    color: #fff;
}

.ab_card_title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin: 0;
}

.ab_card_text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0;
}

.ct_page {
    padding: 3rem 0 4rem;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 2rem;
    align-items: start;
}

.ct_info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ct_info_hero {
    padding: 2rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--bg-dark-3) 0%, var(--bg-dark) 50%, var(--bg-dark-2) 100%);
    position: relative;
    overflow: hidden;
}

.ct_info_hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(83, 168, 182, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.ct_info_icon_wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.12);
    margin-bottom: 1rem;
}

.ct_info_icon_wrap svg {
    --aous-aw-icon-size: 1.5rem;
    color: #fff;
}

.ct_info_title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem;
}

.ct_info_sub {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.6;
}

.ct_channels {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ct_channel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    text-decoration: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

html[dir="rtl"] .ct_channel:hover {
    transform: translateX(-3px);
}

.ct_channel_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.ct_channel_phone {
    background: rgba(83, 168, 182, 0.1);
}

.ct_channel_phone svg {
    --aous-aw-icon-size: 1.3rem;
    color: var(--bg-main-color);
}

.ct_channel_whatsapp {
    background: rgba(37, 211, 102, 0.1);
}

.ct_channel_whatsapp svg {
    --aous-aw-icon-size: 1.3rem;
    color: #25D366;
}

.ct_channel_email {
    background: rgba(234, 67, 53, 0.1);
}

.ct_channel_email svg {
    --aous-aw-icon-size: 1.3rem;
    color: #EA4335;
}

.ct_channel_body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ct_channel_label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
}

.ct_channel_val {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main-color);
}

.ct_channel_arrow {
    flex-shrink: 0;
}

.ct_channel_arrow svg {
    --aous-aw-icon-size: 1rem;
    color: var(--text-secondary);
}

.ct_form_wrap {
    padding: 2rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
}

.ct_form_title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin: 0 0 1.75rem;
}

.ct_form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ct_form_row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.ct_field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ct_label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.ct_input_wrap {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-section);
    overflow: hidden;
    transition: border-color var(--t-fast);
}

.ct_input_wrap:focus-within {
    border-color: var(--bg-main-color);
    background: var(--bg-card);
}

.ct_input_wrap svg {
    --aous-aw-icon-size: 1rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-inline-start: 0.875rem;
}

.ct_input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.75rem 0.875rem;
    font-size: 0.9rem;
    color: var(--text-main-color);
    outline: none;
    min-width: 0;
}

.ct_input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

.ct_textarea {
    width: 100%;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-section);
    padding: 0.875rem;
    font-size: 0.9rem;
    color: var(--text-main-color);
    outline: none;
    resize: vertical;
    min-height: 130px;
    transition: border-color var(--t-fast);
    font-family: inherit;
}

.ct_textarea:focus {
    border-color: var(--bg-main-color);
    background: var(--bg-card);
}

.ct_textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

.ct_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
    border: none;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--t-fast), transform var(--t-fast);
    box-shadow: 0 4px 16px rgba(83, 168, 182, 0.3);
    align-self: flex-start;
}

.ct_submit:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

.ct_submit svg {
    --aous-aw-icon-size: 1.1rem;
}

.sr_page {
    padding: 2.5rem 0 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sr_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 2rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    gap: 1rem;
}

.sr_header_left {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sr_query_wrap {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.sr_query_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
    flex-shrink: 0;
}

.sr_query_icon svg {
    --aous-aw-icon-size: 1.3rem;
    color: #fff;
}

.sr_query_title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-main-color);
    margin: 0;
    letter-spacing: -0.02em;
}

.sr_query_val {
    color: var(--bg-main-color);
}

.sr_count {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    padding-inline-start: 3.625rem;
}

.sr_hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--bg-dark-3) 0%, var(--bg-dark) 50%, var(--bg-dark-2) 100%);
    position: relative;
    overflow: hidden;
}

.sr_hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(83, 168, 182, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.sr_hero_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    margin-bottom: 1.5rem;
}

.sr_hero_icon svg {
    --aous-aw-icon-size: 2rem;
    color: #fff;
}

.sr_hero_title {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 0.75rem;
    letter-spacing: -0.03em;
}

.sr_hero_sub {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    max-width: 440px;
    line-height: 1.65;
}

.sr_grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.sr_card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

.sr_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--bg-main-color);
    text-decoration: none;
}

.sr_img_wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--bg-section);
}

.sr_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.sr_card:hover .sr_img {
    transform: scale(1.05);
}

.sr_body {
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.sr_name {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main-color);
    line-height: 1.4;
    flex: 1;
}

.sr_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.sr_price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main-color);
    letter-spacing: -0.02em;
}

.sr_footer svg {
    --aous-aw-icon-size: 1.1rem;
    color: var(--text-secondary);
}

.sr_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5rem 2rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1.5px dashed var(--border-color);
    gap: 0.75rem;
}

.sr_empty_wrap {
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1.5px dashed var(--border-color);
    overflow: hidden;
}

.sl_page {
    padding: 3rem 0 4rem;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.sl_hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
    position: relative;
    overflow: hidden;
}

.sl_hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 55% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.sl_hero_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    margin-bottom: 1.5rem;
}

.sl_hero_icon svg {
    --aous-aw-icon-size: 2rem;
    color: #fff;
}

.sl_hero_title {
    font-size: 2.4rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 1rem;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.sl_hero_sub {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 500px;
    line-height: 1.7;
    margin: 0 0 2rem;
}

.sl_hero_actions {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
    justify-content: center;
}

.sl_steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sl_step {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
}

.sl_step_left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 2.75rem;
}

.sl_step_num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--bg-section);
    border: 2px solid var(--border-color);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--bg-main-color);
    letter-spacing: 0.05em;
    flex-shrink: 0;
    transition: background var(--t-fast), border-color var(--t-fast);
    z-index: 1;
}

.sl_step:hover .sl_step_num {
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
    border-color: transparent;
    color: #fff;
}

.sl_step_num_final {
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
    border-color: transparent;
    color: #fff;
}

.sl_step_line {
    flex: 1;
    width: 2px;
    background: var(--border-color);
    margin: 0.35rem 0;
}

.sl_step_card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    flex: 1;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.sl_step_last .sl_step_card {
    border-color: var(--bg-main-color);
    background: linear-gradient(135deg, rgba(83, 168, 182, 0.04) 0%, rgba(53, 79, 82, 0.04) 100%);
}

.sl_step_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-md);
    background: var(--bg-section);
    flex-shrink: 0;
    transition: background var(--t-fast);
}

.sl_step:hover .sl_step_icon {
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
}

.sl_step_icon svg {
    --aous-aw-icon-size: 1.3rem;
    color: var(--bg-main-color);
    transition: color var(--t-fast);
}

.sl_step:hover .sl_step_icon svg {
    color: #fff;
}

.sl_step_icon_final {
    background: linear-gradient(135deg, var(--bg-main-color) 0%, var(--second-color) 100%);
}

.sl_step_icon_final svg {
    color: #fff;
}

.sl_step_title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-main-color);
    margin: 0 0 0.4rem;
}

.sl_step_text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

.sl_benefits {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}


/* --- How It Works Section --- */
.hiw_section {
    margin-top: calc(var(--margin-top) * 2.5);
    margin-bottom: calc(var(--margin-top) * 1.5);
    position: relative;
}

.hiw_inner {
    position: relative;
    z-index: 1;
}

.hiw_header {
    text-align: center;
    margin-bottom: 3rem;
}

.hiw_eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 1rem;
    background: var(--fourth-color);
    color: var(--bg-main-color);
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
}

.hiw_eyebrow svg {
    --aous-aw-icon-size: 0.95rem;
}

.hiw_title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main-color);
    line-height: 1.2;
    margin: 0 0 0.65rem;
    letter-spacing: -0.02em;
}

.hiw_sub {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.65;
}

/* Steps grid */
.hiw_steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: start;
    gap: 0;
}

.hiw_connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 3.5rem;
}

.hiw_connector_line {
    width: 3.5rem;
    height: 2px;
    background: linear-gradient(90deg, var(--third-color), var(--fourth-color));
    border-radius: 2px;
    position: relative;
}

.hiw_connector_line::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--third-color);
}

html[dir="rtl"] .hiw_connector_line::after {
    right: auto;
    left: -1px;
}

/* Individual step */
.hiw_step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    border-radius: var(--radius-xl);
    transition: var(--t);
    position: relative;
}

.hiw_step:hover {
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}

.hiw_step_top {
    position: relative;
    margin-bottom: 1.25rem;
}

.hiw_step_num {
    position: absolute;
    top: -1.1rem;
    right: -1.1rem;
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--fourth-color);
    line-height: 1;
    z-index: 0;
    letter-spacing: -0.04em;
    user-select: none;
    transition: color var(--t);
}

.hiw_step:hover .hiw_step_num {
    color: rgba(83, 168, 182, 0.18);
}

html[dir="rtl"] .hiw_step_num {
    right: auto;
    left: -1.1rem;
}

.hiw_step_icon {
    position: relative;
    z-index: 1;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--fourth-color) 0%, rgba(83, 168, 182, 0.2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--t);
    box-shadow: 0 4px 16px rgba(83, 168, 182, 0.2);
}

.hiw_step:hover .hiw_step_icon {
    background: var(--bg-main-gradient);
    box-shadow: var(--shadow-brand);
    transform: scale(1.08) rotate(-3deg);
}

.hiw_step_icon svg {
    --aous-aw-icon-size: 1.75rem;
    color: var(--bg-main-color);
    transition: color var(--t-fast);
}

.hiw_step:hover .hiw_step_icon svg {
    color: #fff;
}

.hiw_step_title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main-color);
    margin: 0 0 0.5rem;
}

.hiw_step_text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
    max-width: 16rem;
}

/* CTA row */
.hiw_cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.hiw_cta_primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 2rem;
    background: var(--bg-main-gradient);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--t);
    box-shadow: var(--shadow-brand);
}

.hiw_cta_primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(53, 79, 82, 0.35);
}

.hiw_cta_secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 2rem;
    background: var(--bg-card);
    color: var(--text-main-color);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--t);
}

.hiw_cta_secondary:hover {
    color: var(--bg-main-color);
    border-color: var(--third-color);
    background: var(--fourth-color);
    transform: translateY(-2px);
}

.hiw_cta_primary svg,
.hiw_cta_secondary svg {
    --aous-aw-icon-size: 1rem;
}


/* --- App Download Card --- */
.app_card_section {
    margin-top: calc(var(--margin-top) * 4);
    margin-bottom: calc(var(--margin-top) * 2);
}

.app_card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 3rem 3.5rem;
    background: var(--bg-dark);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.app_card::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(83, 168, 182, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.app_card::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: 30%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(53, 79, 82, 0.5) 0%, transparent 70%);
    pointer-events: none;
}

.app_card_text {
    position: relative;
    z-index: 1;
    flex: 1;
}

.app_card_eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.85rem;
    background: rgba(83, 168, 182, 0.18);
    border: 1px solid rgba(83, 168, 182, 0.3);
    color: var(--third-color);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    margin-bottom: 1rem;
}

.app_card_eyebrow svg {
    --aous-aw-icon-size: 0.9rem;
}

.app_card_title {
    font-size: 1.9rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 0.65rem;
}

.app_card_title span {
    background: linear-gradient(90deg, var(--third-color), var(--fourth-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.app_card_sub {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 2rem;
    line-height: 1.65;
    max-width: 420px;
}

.app_card_btns {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.app_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: var(--t);
    border: 1.5px solid transparent;
}

.app_btn_apple {
    background: #fff;
    color: #111;
    border-color: #fff;
}

.app_btn_apple:hover {
    background: var(--fourth-color);
    border-color: var(--fourth-color);
    color: var(--bg-main-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}

.app_btn_google {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
}

.app_btn_google:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    transform: translateY(-3px);
}

.app_btn svg {
    --aous-aw-icon-size: 1.5rem;
    flex-shrink: 0;
}

.app_btn_label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.app_btn_label small {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.7;
}

.app_btn_label strong {
    font-size: 0.95rem;
    font-weight: 700;
}

/* Phone mockup */
.app_card_visual {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.app_phone {
    width: 90px;
    height: 160px;
    background: linear-gradient(160deg, #243638 0%, #0e1f21 100%);
    border-radius: 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    gap: 5px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app_phone:hover {
    transform: translateY(-10px) rotate(-1deg);
}

.app_phone_large {
    width: 110px;
    height: 200px;
    border-radius: 22px;
}

.app_phone_large:hover {
    transform: translateY(-10px) rotate(1deg);
}

.app_phone_notch {
    width: 30px;
    height: 5px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    flex-shrink: 0;
}

.app_phone_screen {
    flex: 1;
    width: 100%;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--bg-main-color) 0%, #1d6e78 100%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 5px;
    overflow: hidden;
}

.app_phone_bar {
    height: 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.28);
}

.app_phone_bar:nth-child(2) {
    width: 70%;
    opacity: 0.5;
}

.app_phone_bar:nth-child(3) {
    width: 50%;
    opacity: 0.35;
}

.app_phone_card_mock {
    margin-top: 4px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
}

.app_phone_card_mock+.app_phone_card_mock {
    height: 22px;
    opacity: 0.6;
}

/* --- Scroll Reveal --- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-d1 {
    transition-delay: 0.08s;
}

.reveal-d2 {
    transition-delay: 0.16s;
}

.reveal-d3 {
    transition-delay: 0.24s;
}



/* --- Back to Top Button --- */
.back_to_top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-pill);
    background: var(--bg-main-gradient);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    box-shadow: var(--shadow-brand);
    opacity: 0;
    transform: translateY(14px) scale(0.85);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    pointer-events: none;
}

.back_to_top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.back_to_top:hover {
    box-shadow: 0 8px 26px rgba(53, 79, 82, 0.40);
    transform: translateY(-3px) scale(1.07);
}

.back_to_top svg {
    --aous-aw-icon-size: 1.25rem;
}

html[dir="rtl"] .back_to_top {
    right: auto;
    left: 2rem;
}


/* --- Hero Search Bar --- */
.hero_search_wrap {
    margin-top: 1.5rem;
    position: relative;
    max-width: 88%;
}

.hero_search_wrap form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    padding: 0.38rem 0.38rem 0.38rem 1.3rem;
    gap: 0.5rem;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.hero_search_wrap form:focus-within {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.48);
}

.hero_search_wrap input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    min-width: 0;
}

.hero_search_wrap input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.hero_search_btn {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.2rem;
    background: #fff;
    color: var(--bg-main-color);
    border: none;
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--t);
    flex-shrink: 0;
    text-decoration: none;
}

.hero_search_btn:hover {
    background: var(--fourth-color);
    color: var(--bg-main-color);
    transform: scale(1.03);
}

.hero_search_btn svg {
    --aous-aw-icon-size: 1rem;
}


.pd_floating_card {
    --pd-floating-progress: 0%;
    position: fixed;
    top: 0.5rem;
    left: 50%;
    z-index: 1040;
    width: min(1224px, calc(100% - 2rem));
    background:
        radial-gradient(circle at top right, rgba(17, 24, 39, 0.05), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 1.65rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16), 0 6px 18px rgba(15, 23, 42, 0.06);
    padding: 0.75rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 1.5rem)) scale(0.96);
    transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s ease;
    overflow: hidden;
}

.pd_floating_card.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}

.pd_floating_progress {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bg-main-color), #60a5fa 72%, #22c55e);
    width: var(--pd-floating-progress);
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.24);
    transition: width 0.18s ease;
}

.pd_floating_inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.88fr) auto;
    gap: 1.1rem;
    align-items: center;
}

.pd_floating_product {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    min-width: 0;
}

.pd_floating_visual {
    position: relative;
    flex-shrink: 0;
}

.pd_floating_visual::after {
    content: "";
    position: absolute;
    inset: auto 10% -12% 10%;
    height: 18px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.12);
    filter: blur(14px);
    z-index: 0;
}

.pd_floating_thumb {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.15rem;
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(135deg, #fff, var(--bg-section));
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    position: relative;
    z-index: 1;
}

.pd_floating_status {
    position: absolute;
    right: -0.35rem;
    bottom: -0.3rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.69rem;
    font-weight: 800;
    line-height: 1;
    border: 2px solid #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
    white-space: nowrap;
}

.pd_floating_status_success,
.pd_floating_status_green {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.pd_floating_status_warning,
.pd_floating_status_yellow {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.pd_floating_status_danger,
.pd_floating_status_red {
    background: linear-gradient(135deg, #dc2626, #f43f5e);
}

.pd_floating_status_primary,
.pd_floating_status_blue {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.pd_floating_product_meta,
.pd_floating_seller_meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pd_floating_label {
    font-size: 0.73rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.pd_floating_title,
.pd_floating_seller_name {
    color: var(--text-main-color);
    font-weight: 800;
    line-height: 1.35;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pd_floating_title {
    font-size: 1rem;
    margin-bottom: 0.45rem;
}

.pd_floating_meta_row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
}

.pd_floating_meta_chip,
.pd_floating_tag {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-width: 0;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
}

.pd_floating_meta_chip {
    color: var(--text-secondary);
    background: rgba(148, 163, 184, 0.12);
}

.pd_floating_meta_chip svg {
    --aous-aw-icon-size: 0.85rem;
    color: var(--icon-main-color);
    flex-shrink: 0;
}

.pd_floating_price_row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.55rem;
}

.pd_floating_price {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bg-main-color);
    letter-spacing: -0.02em;
}

.pd_floating_price_old {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-decoration: line-through;
    font-weight: 700;
}

.pd_floating_tag {
    color: var(--bg-main-color);
    background: rgba(53, 79, 82, 0.1);
}

.pd_floating_tag_warm {
    color: #92400e;
    background: #fef3c7;
}

.pd_floating_seller {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.8rem 1rem;
    border-inline: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.72), rgba(255, 255, 255, 0.92));
    transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}

.pd_floating_seller:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.pd_floating_avatar {
    --aous-aw-avatar-size: 3.25rem;
    border-radius: 1rem !important;
    flex-shrink: 0;
    box-shadow: var(--shadow-brand);
}

.pd_floating_seller_name {
    font-size: 0.96rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pd_floating_seller_name svg {
    --aous-aw-icon-size: 0.95rem;
    flex-shrink: 0;
}

.pd_floating_seller_type {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd_floating_seller_since {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bg-main-color);
    margin-top: 0.12rem;
}

.pd_floating_actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    justify-content: flex-end;
}

.pd_floating_btn {
    min-width: 9.5rem;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    white-space: nowrap;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}

.pd_floating_btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.12);
}

.pd_floating_btn svg {
    --aous-aw-icon-size: 1.05rem;
}

@media (max-width: 1199.98px) {
    .pd_floating_inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pd_floating_seller {
        grid-column: 1 / -1;
        border-inline: 0;
        border-top: 1px solid rgba(226, 232, 240, 0.95);
        border-radius: 0;
        padding: 0.85rem 0 0;
        background: transparent;
    }
}