/*==================================
Font Variable
==================================*/

:root {
    --uc-primary-font: 'Urbanist', sans-serif;
}

:root {
    --uc-secondary-font: 'Arial', sans-serif;
}

:root {
    --uc-text-font: 'Roboto', sans-serif;;
}

:root {
    --uc-accent-font: 'Urbanist', sans-serif;
}

:root {
    --uc-general-font: 'Roboto', sans-serif;;
}



/*==================================
Theme Color All Codes Variable
==================================*/

:root {
    --uc-primary-color: #aa8453;
    /* theme primary color */
}

:root {
    --uc-secondary-color: #313145;
    /* theme secondary color */
}

:root {
    --uc-white-color: #fff;
    /* theme white font color */
}

:root {
    --uc-light-color: #f5f5f5;
    /* theme light gray color */
}

:root {
    --uc-light-gray-color: #f8f8f8;
    /* theme gray color */
}

:root {
    --uc-gray-color: #c0c0c0;
    /* theme gray color */
}

:root {
    --uc-dark-color: #12171f;
    /* theme dark color ok*/
}

:root {
    --uc-accent-color: #aa8453;
    /* theme accent color ok*/
}

:root {
    --uc-footer-color: #12171f;
    /* theme dark color ok*/
}

:root {
    --uc-primary-opacity-color: rgba(170, 132, 83, .8);
    /* theme secondary color */
}

:root {
    --uc-secondary-opacity-color: rgba(49, 49, 69, .8);
    /* theme secondary color */
}

:root {
    --uc-dark-opacity-color: rgba(24, 26, 29, .8);
    /* theme dark opacity color */
}

:root {
    --uc-white-opacity-color: rgba(255, 255, 255, 0.5);
    /* theme light color */
}

:root {
    --uc-default-color: #787878;
    /* theme gray color */
}

:root {
    --uc-text-gray-color: #b1b1b1;
    /* theme gray color */
}

:root {
    --uc-text-color2: #9b9b9b;
    /* text light color */
}

:root {
    --uc-text-color3: #c3c3c3;
    /* theme text gray color */
}

:root {
    --uc-text-color4: #ededed;
}

:root {
    --uc-primary-color-rgba: 170, 132, 83;
}

:root {
    --uc-secondary-color-rgba: 49, 49, 69;
}

:root {
    --uc-dark-color-rgba: 24, 26, 29;
}

/* Shared site header actions */
.wishlist-btn {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-grid;
    place-items: center;
    margin-left: 14px;
    padding: 0;
    border: 1px solid rgba(18, 32, 42, .2);
    border-radius: 50%;
    color: #172832;
    background: rgba(18, 32, 42, .06);
    text-decoration: none;
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}

.header-absolute .wishlist-btn {
    color: #fff;
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .1);
}

.wishlist-btn::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid currentColor;
    border-radius: inherit;
    opacity: 0;
    animation: shared-wishlist-ring 2.4s ease-out infinite;
}

.wishlist-btn:hover,
.wishlist-btn:focus-visible {
    color: #fff;
    border-color: #e64d67;
    background: #e64d67;
    transform: translateY(-2px);
}

.wishlist-btn .bi { font-size: 18px; line-height: 1; animation: shared-wishlist-beat 1.8s ease-in-out infinite; }

.main-header .navbar .user-panel .login-btn {
    position: relative;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    padding: 0 17px;
    border: 1px solid rgba(18, 32, 42, .2);
    border-radius: 24px;
    color: #172832;
    background: rgba(18, 32, 42, .06);
    backdrop-filter: blur(8px);
    text-decoration: none;
    transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.header-absolute .navbar .user-panel .login-btn {
    color: #fff;
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .1);
}

.main-header .navbar .user-panel .login-btn::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -75%;
    width: 42%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: rotate(20deg);
    animation: shared-login-shine 3.8s ease-in-out infinite;
}

.main-header .navbar .user-panel .login-btn:hover,
.main-header .navbar .user-panel .login-btn:focus-visible {
    color: #fff;
    border-color: var(--uc-primary-color);
    background: var(--uc-primary-color);
    box-shadow: 0 8px 24px rgba(var(--uc-primary-color-rgba), .32);
    transform: translateY(-2px);
}

.login-btn i, .login-btn span { position: relative; }
.login-btn i { transition: transform .25s ease; }
.login-btn:hover i { transform: scale(1.15) rotate(-6deg); }

@keyframes shared-wishlist-beat {
    0%, 45%, 100% { transform: scale(1); }
    12% { transform: scale(1.16); }
    24% { transform: scale(1); }
    32% { transform: scale(1.1); }
}

@keyframes shared-wishlist-ring {
    0%, 55% { opacity: 0; transform: scale(.85); }
    70% { opacity: .35; }
    100% { opacity: 0; transform: scale(1.35); }
}

@keyframes shared-login-shine {
    0%, 58% { left: -75%; }
    82%, 100% { left: 135%; }
}

@media screen and (max-width: 991px) {
    .wishlist-btn { margin: 12px 15px 18px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .wishlist-btn, .wishlist-btn::after, .wishlist-btn .bi,
    .main-header .navbar .user-panel .login-btn::before { animation: none !important; transition: none !important; }
}

/* Shared dealer registration modal */
.dealer-modal .modal-dialog { max-width: 820px; }
.dealer-modal .modal-content {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 24px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 30px 90px rgba(6,18,29,.34);
}
.dealer-modal .modal-body { position: relative; padding: 36px 38px 38px; }
.dealer-modal .btn-close {
    position: absolute; top: 18px; right: 18px; z-index: 3;
    width: 38px; height: 38px; padding: 0; border-radius: 50%;
    background-size: 12px; opacity: .55;
    transition: transform .25s ease, background-color .25s ease, opacity .25s ease;
}
.dealer-modal .btn-close:hover { opacity: 1; background-color: #f1f3f5; transform: rotate(90deg); }
.dealer-modal-heading { max-width: 620px; margin: 0 auto 23px; text-align: center; }
.dealer-modal-kicker {
    display: block; margin-bottom: 10px; color: #a26725;
    font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
}
.dealer-modal-heading h2 {
    margin: 0 0 7px; color: #0e202a;
    font-size: clamp(26px, 2.7vw, 34px); font-weight: 800; letter-spacing: -.035em;
}
.dealer-modal-heading h2 span { color: #a66729; }
.dealer-modal-heading p { margin: 0; color: #62707a; font-size: 15px; }
.dealer-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dealer-card {
    --card-color: #a66729; --card-soft: #faf4eb;
    position: relative; display: flex; flex-direction: column; align-items: center;
    min-height: 400px; overflow: hidden; padding: 23px 22px 18px;
    border: 1px solid #e4e7e8; border-radius: 18px; color: #12242e;
    background: linear-gradient(155deg, #fff 20%, #fcfcfb 100%);
    text-align: center; text-decoration: none;
    box-shadow: 0 8px 22px rgba(16,36,46,.07);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.dealer-card.land { --card-color: #1e6b52; --card-soft: #edf6f1; }
.dealer-card::before {
    content: ""; position: absolute; width: 180px; height: 180px; top: -115px; right: -105px;
    border-radius: 50%; background: var(--card-soft); transition: transform .45s ease;
}
.dealer-card:hover, .dealer-card:focus-visible {
    color: #12242e; border-color: var(--card-color);
    box-shadow: 0 22px 44px rgba(16,36,46,.14); transform: translateY(-7px);
}
.dealer-card:hover::before { transform: scale(1.5); }
.dealer-icon {
    position: relative; width: 82px; height: 82px; flex: 0 0 82px;
    display: grid; place-items: center; margin-bottom: 12px; border-radius: 50%;
    color: var(--card-color); background: var(--card-soft); font-size: 38px;
    transition: transform .35s ease;
}
.dealer-card:hover .dealer-icon { transform: scale(1.06) rotate(-4deg); }
.dealer-card h3 { margin: 0 0 8px; font-size: 23px; line-height: 1.12; font-weight: 800; letter-spacing: -.03em; }
.dealer-card > p { max-width: 290px; margin: 0 0 12px; color: #66737c; font-size: 14px; line-height: 1.45; }
.dealer-types { width: 100%; margin: auto 0 14px; padding-top: 12px; border-top: 1px solid #e8e2da; }
.dealer-types small {
    display: block; margin-bottom: 10px; color: var(--card-color);
    font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.dealer-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.dealer-tags span {
    min-width: 82px; padding: 5px 12px; border-radius: 99px;
    color: var(--card-color); background: var(--card-soft); font-size: 12px; font-weight: 600;
}
.dealer-action {
    width: 100%; min-height: 49px; display: flex; align-items: center; justify-content: center; gap: 10px;
    border-radius: 11px; color: #fff; background: var(--card-color); font-size: 14px; font-weight: 700;
}
.dealer-action i { transition: transform .25s ease; }
.dealer-card:hover .dealer-action i { transform: translateX(5px); }

@media (max-width: 767px) {
    .dealer-modal .modal-dialog { margin: 14px; }
    .dealer-modal .modal-content { border-radius: 19px; }
    .dealer-modal .modal-body { max-height: calc(100svh - 28px); overflow-y: auto; padding: 39px 16px 18px; }
    .dealer-modal .btn-close { top: 10px; right: 10px; }
    .dealer-modal-heading { margin-bottom: 20px; padding: 0 8px; }
    .dealer-modal-kicker { font-size: 10px; }
    .dealer-modal-heading p { font-size: 14px; line-height: 1.45; }
    .dealer-options { grid-template-columns: 1fr; gap: 14px; }
    .dealer-card { min-height: auto; padding: 20px 16px 16px; }
    .dealer-icon { width: 76px; height: 76px; flex-basis: 76px; font-size: 36px; }
    .dealer-card h3 { font-size: 22px; }
    .dealer-action { min-height: 50px; }
}
