/**
 * Import Design Variables
 * This file contains all design tokens (spacing, colors, typography, etc.)
 * Import this at the top of your CSS files to use design variables
 */
@import url('designs/variables.css');
@import url('designs/spacing.css');
@import url('designs/typography.css');
@import url('designs/colors.css');
@import url('designs/borders.css');
@import url('designs/sizes.css');
@import url('designs/shadows.css');
@import url('designs/transitions.css');
@import url('designs/z-index.css');
@import url('designs/misc.css');
@import url('designs/autocomplete.css');
@import url('page_resource/module-search-autocomplete.css');
@import url('designs/datepicker.css');
@import url('designs/xdsoft_datetimepicker.css');
@import url('designs/dropdown.css');
@import url('designs/traveler_dropdown.css');
/* @import url('designs/toast-bar.css'); */
@import url('material-icons.css');

 /* TMX Icon Styles */
 .tmx-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    fill: currentColor;
    vertical-align: middle;
  }
  .iconcmn .tmx-icon:not(.tmx-icon-sm):not(.tmx-icon-md):not(.tmx-icon-lg):not(.tmx-icon-xl) {
    width: 18px;
    height: 18px;
  }
  /* Size variations via CSS classes - Higher specificity */
  .tmx-icon.tmx-icon-sm,
  .tmx-icon-sm.tmx-icon {
    width: 16px !important;
    height: 16px !important;
  }
  .tmx-icon.tmx-icon-md,
  .tmx-icon-md.tmx-icon {
    width: 24px !important;
    height: 24px !important;
  }
  .tmx-icon.tmx-icon-lg,
  .tmx-icon-lg.tmx-icon {
    width: 32px !important;
    height: 32px !important;
  }
  .tmx-icon.tmx-icon-xl,
  .tmx-icon-xl.tmx-icon {
    width: 48px !important;
    height: 48px !important;
  }
  .material-icons.tmx-icon-replace {
    display: none;
  }

/* Material Icons with size attribute - JavaScript will apply the size */

/* Note: Size styling is handled via JavaScript in template_v3.php */

/* Bootstrap Icons styling */
.bi {
    display: inline-block;
    vertical-align: -.125em;
}

/* Dark Mode Styles for Custom Components */

[data-bs-theme="dark"] {
    /* Override body background - uses light-dark() variables automatically */
    --bs-body-bg: var(--color-bg-primary);
    --bs-body-color: var(--color-text-primary);
}


/* Theme Toggle Icons Styles */
.theme-toggle-wrapper {
    display: flex;
    align-items: center;
}

.theme-icons {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    padding: var(--spacing-1);
    border-radius: var(--border-radius-md);
    transition: var(--transition-colors);
}

.theme-icon-sun,
.theme-icon-moon {
    font-size: var(--icon-size-md);
    color: var(--color-text-primary);
    transition: var(--transition-colors);
    display: inline-block;
}

.theme-icon-sun {
    color: var(--color-primary-primary);
    display: inline-block;
}

.theme-icon-moon {
    color: var(--color-text-muted);
    display: none;
}

[data-bs-theme="dark"] .theme-icon-sun {
    color: var(--color-text-muted);
    display: none;
}

[data-bs-theme="dark"] .theme-icon-moon {
    color: var(--color-primary-primary);
    display: inline-block;
}

.mobile i {
    font-size: var(--font-size-sm);
}
/* Material Icons styling */
.material-icons {
    font-family: 'Material Icons';
    font-weight: var(--font-weight-normal);
    font-style: normal;
    line-height: var(--line-height-none);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   HEADER STYLES
   ============================================ */

/* Header Container */
.topssec {
    background-color: var(--color-bg-primary-lighter);
    border-top: var(--border-width-thin) var(--border-style-solid) var(--color-positive-primary);
    padding: var(--spacing-2) var(--spacing-0);
}

.topssec .space-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
}


/* Logo Styles */
.topssec .logo {
    display: flex;
    align-items: start;
    justify-content: start;
    gap: var(--spacing-3);
    text-decoration: none;
    color: var(--color-white);
}

/* Light theme - white logo (SVG and images) */
.topssec .logo img,
.topssec .logo svg,
.topssec .logo .ful_logo {
    height: auto;
    max-height: var(--size-lg);
    width: auto;
    transition: filter 0.3s ease;
}

.mobile_logo{ display: none; }

/* Dark theme - normal logo colors */
[data-bs-theme="dark"] .topssec .logo img,
[data-bs-theme="dark"] .topssec .logo svg,
[data-bs-theme="dark"] .topssec .logo .ful_logo {
    filter: none;
}

.topssec .logo .logoName {
    margin: var(--spacing-0);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
}

/* Dark theme - logo text uses normal text color */
[data-bs-theme="dark"] .topssec .logo,
[data-bs-theme="dark"] .topssec .logo .logoName {
    color: var(--color-text-primary);
}

/* Navigation Links - Hidden by default, use burger menu instead */
.header-nav {
    display: none;
    align-items: center;
    flex: 1;
    justify-content: center;
    background:none;
    box-shadow: none;
}

.header-nav .nav-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    list-style: none;
    margin: var(--spacing-0);
    padding: var(--spacing-0);
}

.header-nav .nav-links li {
    margin: var(--spacing-0);
}

.header-nav .nav-links .nav-link {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    padding: var(--spacing-2) var(--spacing-0);
    transition: var(--transition-colors);
    background: none;
    border: none;
    cursor: pointer;
}

.header-nav .nav-links .nav-link:hover {
    color: var(--color-positive-primary);
}

.header-nav .nav-links .nav-link.active {
    color: var(--color-positive-primary);
}

.header-nav .nav-links .nav-link-blue {
    color: var(--color-positive-primary);
}

.header-nav .nav-links .nav-link-blue:hover {
    color: var(--color-positive-obsidian);
}

/* Logo + sticky module cluster (MMT-style on scroll) */
.header-brand-cluster {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    min-width: 0;
    flex: 1 1 auto;
}

.header-sticky-modules {
    display: none;
    min-width: 0;
    flex: 1 1 auto;
    max-width: min(720px, calc(100vw - 560px));
}

.header-sticky-modules__list {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    justify-content: center;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}


.header-sticky-modules__list::-webkit-scrollbar {
    display: none;
}

.header-sticky-modules__item {
    flex: 0 0 auto;
}

.header-sticky-modules__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
    padding: 6px 0px 4px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text-secondary);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.header-sticky-modules__link:hover {
    color: var(--color-info);
    background: color-mix(in srgb, var(--color-info) 8%, transparent);
    text-decoration: none;
}

.header-sticky-modules__link.is-active {
    color: var(--color-info);
}

.header-sticky-modules__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    line-height: 1;
}

.header-sticky-modules__icon .tmx-icon {
    width: 24px;
    height: 24px;
}

.header-sticky-modules__label {
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    color: var(--color-text-primary);
    text-overflow: ellipsis;
    max-width: 100%;
}

.topssec.is-scrolled {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--border-color-light);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}

.topssec.is-scrolled .header-sticky-modules {
    display: block;
}

.topssec.is-scrolled .logo img,
.topssec.is-scrolled .logo svg,
.topssec.is-scrolled .logo .ful_logo {
    max-height: 36px;
}

body.header-is-fixed .fromtopmargin {
    padding-top: var(--sticky-header-height, 64px);
}

@media (max-width: 1199px) {
    .header-sticky-modules {
        max-width: min(560px, calc(100vw - 400px));
    }

    .header-sticky-modules__link {
        min-width: 64px;
        max-width: 88px;
        padding-inline: 8px;
    }

    .header-sticky-modules__label {
        font-size: 12px;
    }
}

@media (max-width: 991px) {
    .header-sticky-modules {
        display: none !important;
    }
}

/* Right Menu Container */
.ritsude {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.right_menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.ritsude .burger-menu-btn {
    margin-left: var(--spacing-2);
}

.ritsude .burger-menu-btn.active {
  display: none;
 }

.main_sec {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

/* Customer Support Section */
.customer-support-section {
    display: flex;
    align-items: center;
}

.customer-support-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    text-decoration: none;
    color: var(--color-text-primary);
    padding: var(--spacing-1) var(--spacing-1);
    background: transparent;
}

.customer-support-link:hover {
    text-decoration: none;
}

.customer-support-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.support-label {
    font-size: var(--font-size-sm);
    padding: 0px 0px !important;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}


.customer-support-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.support-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-warning);
    display: flex;
    align-items: center;
    justify-content: center;
}

.support-headphone-icon {
    font-size: 20px;
    color: var(--color-text-warning-light);
    line-height: 1;
}

.support-label-icon,
.phone-number-icon {
    font-size: 14px;
    margin-right: 4px;
    vertical-align: middle;
    opacity: 0.7;
}

.support-label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.support-number {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Customer Support Dropdown */
.customer-support-dropdown {
    position: relative;
}

/* Bridge to prevent gap between trigger and dropdown */
.customer-support-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--spacing-2);
    background: transparent;
    z-index: 1049;
}

.customer-support-link.dropdown-toggle {
    cursor: pointer;
    position: relative;
}

.support-chevron {
    font-size: 12px;
    color: var(--color-info);
    margin-left: var(--spacing-1);
    transition: transform 0.2s ease;
}

.customer-support-link.dropdown-toggle[aria-expanded="true"] .support-chevron,
.customer-support-dropdown:hover .support-chevron {
    transform: rotate(180deg);
}

.support-dropdown-menu {
    position: absolute;
    top: 130%;
    right: 0;
    z-index: 1050;
    min-width: 280px;
    margin-top: 0;
    padding: var(--spacing-0);
    background: var(--color-bg-primary);
    border: 1px solid rgba(0, 169, 214, 0.2);
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: none;
    list-style: none;
    margin-left: var(--spacing-0);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.support-dropdown-menu.show,
.customer-support-dropdown:hover .support-dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    z-index: 1050;
    transform: translateY(0) !important;
    min-height: 130px !important;
    max-height: 400px !important;
    overflow-y: auto;
    pointer-events: auto;
}

.support-dropdown-item {
    margin: var(--spacing-0);
    padding: var(--spacing-2);
    list-style: none;
    width: 100%;
    margin-bottom: var(--spacing-0);
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-sm);
    border-bottom: 1px solid rgba(0, 169, 214, 0.15);
}

.support-dropdown-item:last-child {
    border-bottom: none;
}

.support-dropdown-item:last-child {
    margin-bottom: var(--spacing-0);
}

.support-item-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-0);
}

.support-item-icon {
    font-size: 18px;
    color: var(--color-info);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.support-item-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.support-item-link {
    display: block;
    padding-left: calc(28px + var(--spacing-2)) !important;
    color: var(--color-info) !important;
    text-decoration: none;
    font-size: var(--font-size-sm);
    word-break: break-word;
    line-height: 1.4;
}

.support-item-link:hover {
    color: var(--color-info-dark);
    background: none !important;
    text-decoration: none;
}

.support-item-link:focus {
    outline: 2px solid var(--color-primary-primary);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

[data-bs-theme="dark"] .support-dropdown-menu {
    background: var(--color-bg-primary);
    border-color: rgba(0, 169, 214, 0.25);
}

[data-bs-theme="dark"] .support-dropdown-item {
    background: var(--color-bg-primary);
    border-color: rgba(0, 169, 214, 0.2);
}

/* Signin Dropdown */
.signin-dropdown-wrapper {
    position: relative;
}

.signin-dropdown-wrapper::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--spacing-2);
    background: transparent;
    z-index: 1049;
}

.signin-dropdown-toggle {
    cursor: pointer;
}

/* Logged-in account chip (header) */
.signin-account-chip {
    display: inline-flex !important;
    align-items: center;
    gap: var(--spacing-2);
    max-width: min(220px, 42vw);
    padding: 5px 10px 5px 5px;
    border-radius: var(--border-radius-full);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-info) 10%, var(--color-bg-primary)) 0%,
        var(--color-bg-primary) 72%
    );
    border: var(--border-width-thin) solid color-mix(in srgb, var(--color-info) 20%, var(--border-color-light));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-info) 10%, transparent);
    color: var(--color-text-primary) !important;
    text-decoration: none !important;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.signin-account-chip:hover,
.signin-account-chip:focus,
.signin-account-chip.show,
.signin-account-chip[aria-expanded="true"] {
    color: var(--color-text-primary) !important;
    text-decoration: none !important;
    border-color: color-mix(in srgb, var(--color-info) 34%, var(--border-color-light));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-info) 14%, transparent);
    transform: translateY(-1px);
}

.signin-account-chip__avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-full);
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--color-info) 22%, var(--color-bg-primary));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-info) 12%, transparent);
    background: var(--color-bg-secondary);
}

.signin-account-chip__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.signin-account-chip__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    line-height: 1.1;
}

.signin-account-chip__greeting {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
}

.signin-account-chip__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signin-account-chip__caret {
    flex-shrink: 0;
    margin-left: 2px;
    font-size: 0.75rem;
    color: var(--color-info);
    transition: transform var(--transition-fast);
}

.signin-account-chip.show .signin-account-chip__caret,
.signin-account-chip[aria-expanded="true"] .signin-account-chip__caret {
    transform: rotate(180deg);
}

.signin-dropdown-menu {
    position: absolute;
    top: 130%;
    right: 0;
    z-index: 1050;
    min-width: 280px;
    left: inherit;
    margin-top: 0;
    padding: var(--spacing-0);
    background: var(--color-bg-primary);
    border: 1px solid rgba(0, 169, 214, 0.2);
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: none;
    list-style: none;
    margin-left: var(--spacing-0);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.signin-dropdown-menu.show,
.signin-dropdown-wrapper:hover .signin-dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    z-index: 1050;
    transform: translateY(0) !important;
    min-height: auto;
    max-height: min(420px, calc(100vh - 72px)) !important;
    overflow-y: auto;
    pointer-events: auto;
}

.signin-dropdown-menu--account {
    min-width: 300px;
    max-height: min(420px, calc(100vh - 72px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--spacing-1);
}

.signin-dropdown-item {
    margin: var(--spacing-0);
    padding: var(--spacing-0);
    list-style: none;
    width: 100%;
    border-bottom: 1px solid rgba(0, 169, 214, 0.15);
}

.signin-dropdown-item:last-child {
    border-bottom: none;
}

.signin-dropdown-item--logout {
    margin-top: var(--spacing-1);
    border-top: 1px solid var(--border-color-light);
    border-bottom: none;
}

.signin-item-link--logout:hover {
    background: color-mix(in srgb, var(--color-error) 8%, var(--color-bg-primary));
}

.signin-item-link--logout:hover .signin-item-icon--logout {
    background: var(--color-error);
}

.signin-item-link--logout:hover .signin-item-icon--logout .material-icons {
    color: var(--color-white);
}

.signin-item-link--logout:hover .signin-item-label {
    color: var(--color-error);
}

.signin-item-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.signin-item-link:hover {
    background-color: rgba(0, 169, 214, 0.05);
    color: var(--color-text-primary);
    text-decoration: none;
}

.signin-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(0, 169, 214, 0.1);
    border-radius: var(--border-radius-md);
    flex-shrink: 0;
}

.signin-item-icon .material-icons {
    font-size: 18px;
    color: var(--color-info);
}

.signin-item-link:hover .signin-item-icon {
    background: var(--color-info);
}

.signin-item-link:hover .signin-item-icon .material-icons {
    color: var(--color-white);
}

.signin-item-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    flex: 1;
}

.signin-item-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.2;
}

.signin-item-subtext {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.2;
}

.signin-item-link:hover .signin-item-label {
    color: var(--color-info);
}

[data-bs-theme="dark"] .signin-dropdown-menu {
    background: var(--color-bg-primary);
    border-color: rgba(0, 169, 214, 0.25);
}

[data-bs-theme="dark"] .signin-dropdown-item {
    border-color: rgba(0, 169, 214, 0.2);
}

[data-bs-theme="dark"] .signin-item-link:hover {
    background-color: rgba(0, 169, 214, 0.1);
}

/* Currency Selector */
.currency-selector,
.currency-dropdown-wrapper {
    position: relative;
}

.currency-dropdown-wrapper::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--spacing-2);
    background: transparent;
    z-index: 1049;
}

.currency-selector .topa,
.currency-dropdown-toggle {
    display: flex;
    align-items: center;
    background: rgba(48, 134, 239, 0.1);
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--border-radius-md);
    transition: all 0.2s ease;
    cursor: pointer;
}

.currency-selector .topa:hover,
.currency-dropdown-toggle:hover {
    text-decoration: none;
    background: rgba(48, 134, 239, 0.2);
}

.currency-arrow-icon {
    font-size: 18px !important;
    color: var(--color-info);
    margin-left: var(--spacing-1);
    transition: transform 0.2s ease;
}

.currency-dropdown-wrapper:hover .currency-arrow-icon,
.currency-selector .dropdown-menu.open ~ .topa .currency-arrow-icon {
    transform: rotate(180deg);
}

.currency-selector .dropdown-menu,
.currency-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    z-index: 1050;
    width: 172px;
    min-width: 172px;
    max-width: calc(100vw - 24px);
    max-height: 360px;
    overflow: hidden;
    margin-top: 0;
    padding: 0;
    background-color: var(--color-bg-primary);
    border: 1px solid light-dark(rgba(15, 23, 42, 0.08), rgba(148, 163, 184, 0.2));
    border-radius: 14px;
    box-shadow: 0 14px 36px light-dark(rgba(15, 23, 42, 0.14), rgba(0, 0, 0, 0.36));
    display: none;
    list-style: none;
    margin-left: var(--spacing-0);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.currency-dropdown-search-wrap {
    list-style: none;
    margin: 0;
    padding: 8px 8px 6px;
    flex-shrink: 0;
    border-bottom: 1px solid light-dark(rgba(15, 23, 42, 0.06), rgba(148, 163, 184, 0.12));
}

.currency-dropdown-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: light-dark(#f8fafc, rgba(148, 163, 184, 0.08));
    border: 1px solid light-dark(rgba(15, 23, 42, 0.08), rgba(148, 163, 184, 0.16));
    min-height: 38px;
}

.currency-dropdown-search .material-icons {
    font-size: 18px !important;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.currency-dropdown-search__input {
    border: none;
    background: transparent;
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-primary);
    outline: none;
}

.currency-dropdown-search__input::placeholder {
    color: var(--color-text-muted);
}

.currency-dropdown-scroll-host {
    list-style: none;
    width:100%;
    margin: 0;
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: light-dark(#cbd5e1, #475569) transparent;
}

.currency-dropdown-scroll-host::-webkit-scrollbar {
    width: 5px;
}

.currency-dropdown-scroll-host::-webkit-scrollbar-thumb {
    background: light-dark(#cbd5e1, #475569);
    border-radius: 999px;
}

.currency-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 6px;
}

.currency-dropdown-empty {
    margin: 0;
    padding: 14px 12px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--color-text-muted);
}

.currency-dropdown-empty.hide {
    display: none;
}

.currency-selector .dropdown-menu li.currency_li.currency-li-hidden {
    display: none !important;
}

.currency-selector .dropdown-menu::-webkit-scrollbar,
.currency-dropdown-menu::-webkit-scrollbar {
    width: 5px;
}

.currency-selector .dropdown-menu::-webkit-scrollbar-thumb,
.currency-dropdown-menu::-webkit-scrollbar-thumb {
    background: light-dark(#cbd5e1, #475569);
    border-radius: 999px;
}

.currency-selector .dropdown-menu.open,
.currency-dropdown-menu.open,
.currency-dropdown-wrapper:hover .currency-dropdown-menu {
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.side_curency {
    color: var(--color-info);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    line-height: 1.2;
    margin-left: auto;
}

/* Currency Dropdown List Items */
.currency-selector .dropdown-menu li.currency_li {
    margin: var(--spacing-0);
    padding: 0 0 4px;
    list-style: none;
    width: 100%;
    display: flex;
}

.currency-selector .dropdown-menu li.currency_li:last-child {
    padding-bottom: 0;
}

.currency-selector .dropdown-menu li.currency_li a.app-preferred-currency {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 10px;
    color: var(--color-text-primary) !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid transparent;
    background: none;
    width: 100%;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    min-height: 40px;
    border-radius: 10px;
}

.currency-selector .dropdown-menu li.currency_li .curncy_img,
.currency-selector .dropdown-menu li.currency_li .curr_flagd {
    display: none !important;
}

.currency-selector .dropdown-menu li.currency_li .name_currency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 24px;
    padding: 0 8px;
    border-radius: 8px;
    background: light-dark(#eef2f7, rgba(148, 163, 184, 0.14));
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.currency-selector .dropdown-menu li.currency_li a:hover {
    background-color: light-dark(#f8fafc, rgba(148, 163, 184, 0.08)) !important;
    border-color: light-dark(rgba(15, 23, 42, 0.06), rgba(148, 163, 184, 0.12)) !important;
    color: var(--color-text-primary) !important;
    text-decoration: none !important;
}

.currency-selector .dropdown-menu li.currency_li a:focus {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary) !important;
    text-decoration: none !important;
    outline: none;
}

.currency-selector .dropdown-menu li.currency_li.active a {
    background: color-mix(in srgb, var(--color-success-primary) 14%, var(--color-bg-primary)) !important;
    border-color: color-mix(in srgb, var(--color-success-primary) 24%, transparent) !important;
    color: var(--color-success-obsidian) !important;
    font-weight: var(--font-weight-semibold);
}

.currency-selector .dropdown-menu li.currency_li.active .name_currency {
    background: color-mix(in srgb, var(--color-success-primary) 18%, var(--color-bg-primary));
    color: var(--color-success-primary);
}

.currency-selector .dropdown-menu li.currency_li.active .side_curency {
    color: var(--color-success-primary);
}

.currency-selector .dropdown-menu li a,
.currency-selector .dropdown-menu li .topa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-text-primary) !important;
    text-decoration: none !important;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    transition: var(--transition-colors);
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.currency-selector .dropdown-menu li a:hover,
.currency-selector .dropdown-menu li .topa:hover,
.currency-dropdown-menu li a:hover {
    background-color: rgba(0, 169, 214, 0.08);
    color: var(--color-text-primary) !important;
    text-decoration: none !important;
    border-radius: var(--border-radius-sm);
}

.currency-selector .dropdown-menu li a:focus,
.currency-selector .dropdown-menu li .topa:focus {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary) !important;
    text-decoration: none !important;
    outline: none;
}

.currency-selector .dropdown-menu li.active a,
.currency-selector .dropdown-menu li.active .topa {
    background-color: color-mix(in srgb, var(--color-success-primary) 12%, var(--color-bg-primary));
    color: var(--color-success-obsidian) !important;
    font-weight: var(--font-weight-medium);
}

/* Currency Flag Images in Dropdown */
.currency-selector .dropdown-menu .flag_images {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-right: var(--spacing-1);
}

.currency-selector .dropdown-menu .flags {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-none);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Currency Text Content */
.currency-selector .dropdown-menu .currency-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    gap: var(--spacing-0);
}

.currency-selector .dropdown-menu .currency-code {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

.currency-selector .dropdown-menu .currency-name {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    line-height: var(--line-height-tight);
}

/* Language Selector */
.language-selector,
.language-dropdown-wrapper {
    position: relative;
}

.language-dropdown-wrapper::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--spacing-2);
    background: transparent;
    z-index: 1049;
}

.language-dropdown-toggle {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text-primary);
    padding: var(--spacing-1) var(--spacing-1);
    border-radius: var(--border-radius-md);
    transition: all 0.2s ease;
    cursor: pointer;
    background: rgba(48, 134, 239, 0.1);
}

.language-dropdown-toggle:hover {
    text-decoration: none;
    background: rgba(48, 134, 239, 0.2);
}

.language-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.language-icon .material-icons {
    font-size: 20px;
    color: var(--color-info);
}

.language-code {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 var(--spacing-0);
}

.language-arrow-icon {
    font-size: 16px !important;
    color: var(--color-info);
    margin-left: var(--spacing-1);
    transition: transform 0.2s ease;
}

.language-dropdown-wrapper:hover .language-arrow-icon,
.language-dropdown-menu.open ~ .topa .language-arrow-icon {
    transform: rotate(180deg);
}

.language-dropdown-menu {
    position: absolute;
    top: 150%;
    right: 0;
    z-index: 1050;
    width: 150px;
    margin-top: 0;
    padding: var(--spacing-0);
    background: var(--color-bg-primary);
    border: 1px solid rgba(0, 169, 214, 0.2);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px rgba(0, 169, 214, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    display: none;
    list-style: none;
    margin-left: var(--spacing-0);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.language-dropdown-menu.open,
.language-dropdown-wrapper:hover .language-dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.language-dropdown-item {
    margin: var(--spacing-0);
    padding: var(--spacing-0);
    list-style: none;
    width: 100%;
    border-bottom: 1px solid rgba(0, 169, 214, 0.15);
}

.language-dropdown-item:last-child {
    border-bottom: none;
}

.language-item-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.language-item-link:hover {
    background-color: rgba(0, 169, 214, 0.08);
    color: var(--color-text-primary);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
}

.language-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(0, 169, 214, 0.1);
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
}

.language-flag {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-info);
}

.language-item-link:hover .language-item-icon {
    background: var(--color-info);
}

.language-item-link:hover .language-flag {
    color: var(--color-white);
}

.language-item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.language-item-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: 1.2;
}

.language-item-link:hover .language-item-label {
    color: var(--color-info);
}

[data-bs-theme="dark"] .language-dropdown-menu {
    background: var(--color-bg-primary);
    border-color: rgba(0, 169, 214, 0.25);
}

[data-bs-theme="dark"] .language-dropdown-item {
    border-color: rgba(0, 169, 214, 0.2);
}

[data-bs-theme="dark"] .language-item-link:hover {
    background-color: rgba(0, 169, 214, 0.1);
}

/* Scrollbar Styling for Dropdown */
.currency-selector .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.currency-selector .dropdown-menu::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-sm);
}

.currency-selector .dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--color-text-muted);
    border-radius: var(--border-radius-sm);
}

.currency-selector .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

/* ============================================
   MOBILE APP-STYLE CURRENCY DROPDOWN
   ============================================ */

/* Currency Dropdown Overlay (Mobile) */
.currency-dropdown-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(4px);
}

.currency-dropdown-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Currency Bottom Sheet (Mobile) */
.currency-bottom-sheet {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 80vh;
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-2xl) var(--border-radius-2xl) 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.currency-bottom-sheet.active {
    bottom: 0;
}

/* Bottom Sheet Header */
.currency-bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-4);
    border-bottom: var(--border-width-thin) var(--border-style-solid) var(--color-border-primary);
    position: sticky;
    top: 0;
    background: var(--color-bg-primary);
    z-index: 10;
}

.currency-bottom-sheet-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: var(--spacing-0);
}

.currency-bottom-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-full);
    cursor: pointer;
    color: var(--color-text-primary);
    transition: var(--transition-all);
}

.currency-bottom-sheet-close:hover {
    background: var(--color-bg-secondary);
    color: var(--color-primary-primary);
    transform: rotate(90deg);
}

.currency-bottom-sheet-close i {
    font-size: var(--font-size-xl);
}

/* Bottom Sheet Content */
.currency-bottom-sheet-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-2) var(--spacing-0);
    -webkit-overflow-scrolling: touch;
}

.currency-bottom-sheet-content .currency-selector .dropdown-menu {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: var(--spacing-0);
    max-height: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: var(--spacing-0);
}

/* Mobile Currency List Items */
@media (max-width: 767px) {
    /* Create overlay when dropdown is open */
    body.currency-dropdown-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        animation: fadeIn 0.3s ease forwards;
        backdrop-filter: blur(4px);
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    .search-result{
        margin-top: 0px !important;
    }
    .splmodify{ height: 100% !important; float: left; min-height: 100%;
        width: 100%;}
    .currency-selector .dropdown-menu,
    .currency-selector .currency-dropdown-menu,
    .currency-dropdown-wrapper .currency-dropdown-menu {
        position: fixed;
        top: auto !important;
        bottom: -100%;
        left: 0;
        right: 0;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 82vh;
        margin: var(--spacing-0);
        border-radius: 20px 20px 0 0;
        border: none;
        border-top: var(--border-width-thin) var(--border-style-solid) var(--color-border-primary);
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22);
        transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 9999;
        padding-top: var(--spacing-0);
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        transform: none !important;
    }

    .currency-selector .dropdown-menu.open,
    .currency-selector .currency-dropdown-menu.open,
    .currency-dropdown-wrapper .currency-dropdown-menu.open {
        bottom: 0 !important;
        transform: none !important;
    }

    /* Add header to mobile dropdown using first list item as header */
    .currency-selector .dropdown-menu::before,
    .currency-selector .currency-dropdown-menu::before {
        content: 'Select Currency';
        display: block;
        padding: 16px 18px 12px;
        border-bottom: var(--border-width-thin) var(--border-style-solid) var(--color-border-primary);
        font-size: 18px;
        font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
        background: var(--color-bg-primary);
        position: sticky;
        top: 0;
        z-index: 10;
        margin-bottom: 0;
    }

    .currency-dropdown-search-wrap {
        padding: 12px 16px 10px;
    }

    .currency-dropdown-search {
        min-height: 48px;
        padding: 12px 14px;
        border-radius: 12px;
    }

    .currency-dropdown-search .material-icons {
        font-size: 22px !important;
    }

    .currency-dropdown-search__input {
        font-size: 16px;
    }

    .currency-dropdown-list {
        padding: 8px 12px 12px;
    }

    .currency-selector .dropdown-menu li.currency_li {
        padding-bottom: 6px;
    }

    /* Mobile Currency Items - Larger Touch Targets */
    .currency-selector .dropdown-menu li.currency_li a.app-preferred-currency,
    .currency-selector .dropdown-menu li a,
    .currency-selector .dropdown-menu li .topa {
        min-height: 54px;
        padding: 12px 16px;
        font-size: 16px;
        border-radius: 12px;
        margin: var(--spacing-0);
        gap: 14px;
    }

    .currency-selector .dropdown-menu li.currency_li .name_currency {
        min-width: 52px;
        height: 30px;
        padding: 0 12px;
        font-size: 13px;
        border-radius: 9px;
    }

    .currency-selector .dropdown-menu li.currency_li .side_curency,
    .side_curency {
        font-size: 18px;
        font-weight: var(--font-weight-bold);
    }

    .currency-selector .dropdown-menu li a:active,
    .currency-selector .dropdown-menu li .topa:active,
    .currency-selector .dropdown-menu li.currency_li a.app-preferred-currency:active {
        background-color: var(--color-bg-secondary);
        transform: scale(0.99);
    }

    /* Larger flag images on mobile */
    .currency-selector .dropdown-menu .flag_images {
        width: 32px;
        height: 32px;
    }

    .currency-selector .dropdown-menu .flags {
        font-size: var(--font-size-xl);
    }

    /* Better spacing for currency text */
    .currency-selector .dropdown-menu .currency-code {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
    }

    .currency-selector .dropdown-menu .currency-name {
        font-size: var(--font-size-sm);
    }

    .currency-dropdown-empty {
        font-size: 15px;
        padding: 16px 12px 20px;
    }

    /* Active state with checkmark */
    .currency-selector .dropdown-menu li.active a::after,
    .currency-selector .dropdown-menu li.active .topa::after,
    .currency-selector .dropdown-menu li.currency_li.active a.app-preferred-currency::after {
        content: '✓';
        margin-left: 8px;
        color: var(--color-success-primary);
        font-size: 18px;
        font-weight: var(--font-weight-bold);
    }

    /* Scrollbar for mobile */
    .currency-selector .dropdown-menu::-webkit-scrollbar,
    .currency-dropdown-scroll-host::-webkit-scrollbar {
        width: 4px;
    }

    .currency-selector .dropdown-menu::-webkit-scrollbar-thumb,
    .currency-dropdown-scroll-host::-webkit-scrollbar-thumb {
        background: var(--color-text-muted);
        border-radius: var(--border-radius-full);
    }
}

.reglognorml {
    display: flex;
    align-items: center;
    gap: var(--spacing-0);
}

.flag_images {
    display: flex;
    align-items: center;
}

.flags {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
}
.dropdown-toggle:after { display: none; }
.down_arr {
    font-size: var(--font-size-sm);
    position: relative;
    color: var(--color-text-primary);
    margin-left: var(--spacing-0);
}

/* Register Button */
.register-btn-wrapper .register-btn {
    text-decoration: none;
    display: inline-block;
}

.register-button {
    background-color:none;
    border: var(--border-width-medium) var(--border-style-solid) var(--color-info);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-1) var(--spacing-4);
    transition: var(--transition-colors);
    cursor: pointer;
}


.register-text {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

/* Signin Button */
.signin-btn-wrapper .logindown {
    text-decoration: none;
    display: inline-block;
}

.signin-button {
    background-color: var(--color-info);
    border: var(--border-width-medium) var(--border-style-solid) var(--color-info);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-1) var(--spacing-2);
    transition: var(--transition-colors);
    cursor: pointer;
}

.signin-text {
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Autocomplete and Datepicker styles are now in separate files:
   - _autocomplete.scss
   - _datepicker.scss
   These are imported at the top of this file.
*/

/* Theme Toggle - Already styled above */

/* ============================================
   RESPONSIVE HEADER STYLES
   ============================================ */

/* Burger Menu Button - mobile only */
.burger-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(48, 134, 239, 0.1);
    border: 1px solid color-mix(in srgb, var(--color-info) 18%, var(--border-color-light));
    border-radius: 10px;
    cursor: pointer;
    padding: 9px 8px;
    position: relative;
    transition: var(--transition-all);
}

.burger-menu-btn:focus {
    outline: 2px solid var(--color-primary-primary);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

.burger-line {
    width: 100%;
    height: 2px;
    background: var(--color-text-primary);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-all);
    transform-origin: center;
}

.burger-menu-btn.active .burger-line:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.burger-menu-btn.active .burger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.burger-menu-btn.active .burger-line:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--color-text-primary) 45%, transparent);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile Menu Panel */
.mobile-menu-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(360px, 88vw);
    height: 100vh;
    height: 100dvh;
    background: var(--color-bg-primary);
    border-left: 1px solid color-mix(in srgb, var(--color-info) 12%, var(--border-color-light));
    box-shadow: -12px 0 40px color-mix(in srgb, var(--color-info) 10%, transparent),
        -4px 0 16px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    overflow: hidden;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.mobile-menu-panel.active {
    right: 0;
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-3);
    border-bottom: 1px solid var(--border-color-light);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-info) 6%, var(--color-bg-primary)) 0%,
        var(--color-bg-primary) 100%);
    flex-shrink: 0;
}

.mobile-menu-logo {
    display: flex;
    align-items: center;
    min-width: 0;
}

.mobile-menu-logo img {
    height: 36px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

.mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: var(--transition-all);
}

.mobile-menu-close:hover {
    background: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-white);
}

.mobile-menu-close i {
    font-size: 22px;
}

.mobile-menu-nav {
    flex: 1;
    min-height: 0;
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-5);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-info) 35%, transparent) transparent;
}

.mobile-menu-nav::-webkit-scrollbar {
    width: 5px;
}

.mobile-menu-nav::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-info) 35%, transparent);
    border-radius: 999px;
}

.mobile-menu-section__label {
    margin: 0 0 var(--spacing-3);
    padding: 0 var(--spacing-1);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.mobile-menu-section__label--account {
    margin-top: var(--spacing-4);
    padding-top: 0;
    border-top: none;
    color: color-mix(in srgb, var(--color-text-secondary) 85%, transparent);
    letter-spacing: 0.08em;
}

.mobile-menu-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: var(--spacing-4) 0 var(--spacing-3);
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-info) 18%, transparent);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-info) 8%, var(--color-bg-primary)) 0%,
        color-mix(in srgb, var(--color-info) 3%, var(--color-bg-primary)) 100%);
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease;
}

.mobile-menu-profile:active {
    background: color-mix(in srgb, var(--color-info) 12%, var(--color-bg-primary));
}

.mobile-menu-profile__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--color-info) 25%, transparent);
    background: var(--color-bg-secondary);
}

.mobile-menu-profile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mobile-menu-profile__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 5px;
}

.mobile-menu-profile__greeting {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.mobile-menu-profile__name {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.mobile-menu-profile__chevron {
    flex-shrink: 0;
    font-size: 14px;
    color: color-mix(in srgb, var(--color-text-secondary) 70%, transparent);
}

.mobile-menu-action-item__icon--avatar {
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    border: 1px solid color-mix(in srgb, var(--color-info) 15%, transparent);
}

.mobile-menu-action-item__icon--avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mobile-nav-links {
    list-style: none;
    margin: 0 0 var(--spacing-3);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-3) var(--spacing-2);
}

.mobile-nav-links li {
    margin: 0;
    border: none;
}

.mobile-nav-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    height: 100%;
    min-height: 82px;
    padding: var(--spacing-3) var(--spacing-1);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 11.5px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    text-align: center;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color-light);
    background: var(--color-bg-primary);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 4%, transparent);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mobile-nav-link .mobile-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin: 0;
    background: color-mix(in srgb, var(--color-info) 5%, var(--color-bg-secondary));
    border: 1px solid color-mix(in srgb, var(--color-info) 8%, var(--border-color-light));
    border-radius: var(--border-radius-lg);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.mobile-nav-link .mobile-nav-icon .tmx-icon {
    display: block;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
    color: var(--color-text-primary);
}

.mobile-nav-link__label {
    flex: none;
    width: 100%;
    min-width: 0;
    line-height: 1.25;
    letter-spacing: 0.01em;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}

.mobile-nav-link:hover {
    background: color-mix(in srgb, var(--color-info) 5%, var(--color-bg-primary));
    border-color: color-mix(in srgb, var(--color-info) 18%, var(--border-color-light));
    color: var(--color-info-dark);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-info) 8%, transparent);
    transform: translateY(-1px);
}

.mobile-nav-link:hover .mobile-nav-icon {
    background: color-mix(in srgb, var(--color-info) 10%, var(--color-bg-primary));
    border-color: color-mix(in srgb, var(--color-info) 22%, var(--border-color-light));
}

.mobile-nav-link.active {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-info) 12%, var(--color-bg-primary)) 0%,
        color-mix(in srgb, var(--color-info) 6%, var(--color-bg-primary)) 100%);
    border-color: color-mix(in srgb, var(--color-info) 28%, var(--border-color-light));
    color: var(--color-info-dark);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-info) 14%, transparent);
}

.mobile-nav-link.active .mobile-nav-icon {
    background: var(--color-bg-primary);
    border-color: color-mix(in srgb, var(--color-info) 30%, var(--border-color-light));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-info) 8%, transparent);
}

.mobile-nav-link.active .mobile-nav-icon .tmx-icon {
    color: var(--color-info-dark);
}

/* Account & settings — native grouped list */
.mobile-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.mobile-menu-group {
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    background: var(--color-bg-primary);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 4%, transparent);
}

.mobile-menu-group--logout {
    border-color: color-mix(in srgb, var(--color-error, #dc3545) 14%, transparent);
}

.mobile-menu-action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 10px 14px;
    margin: 0;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease;
}

.mobile-menu-group .mobile-menu-action-item + .mobile-menu-action-item {
    border-top: 1px solid color-mix(in srgb, var(--color-text-primary) 7%, transparent);
}

.mobile-menu-action-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-info) 10%, var(--color-bg-secondary));
    color: var(--color-info);
}

.mobile-menu-action-item__icon .material-icons {
    font-size: 20px;
    line-height: 1;
}

.mobile-menu-action-item__icon--theme {
    background: color-mix(in srgb, var(--color-warning, #f59e0b) 12%, var(--color-bg-secondary));
    color: var(--color-warning, #d97706);
}

.mobile-menu-action-item__icon--danger {
    background: color-mix(in srgb, var(--color-error, #dc3545) 12%, var(--color-bg-secondary));
    color: var(--color-error, #dc3545);
}

.mobile-menu-action-item__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-menu-action-item__label {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    color: var(--color-text-primary);
}

.mobile-menu-action-item__hint {
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    line-height: 1.25;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-menu-action-item__meta {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    padding-left: 4px;
}

.mobile-menu-action-item__chevron {
    flex-shrink: 0;
    font-size: 14px;
    color: color-mix(in srgb, var(--color-text-secondary) 70%, transparent);
    margin-left: 2px;
}

.mobile-menu-action-item:active {
    background: color-mix(in srgb, var(--color-text-primary) 5%, var(--color-bg-primary));
}

.mobile-menu-action-item--primary {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-info) 10%, var(--color-bg-primary)) 0%,
        color-mix(in srgb, var(--color-info) 4%, var(--color-bg-primary)) 100%);
}

.mobile-menu-action-item--primary .mobile-menu-action-item__icon {
    background: var(--color-info);
    color: var(--color-white);
}

.mobile-menu-action-item--primary .mobile-menu-action-item__label {
    color: var(--color-info-dark, var(--color-info));
}

.mobile-menu-group--logout .mobile-menu-action-item__label {
    color: var(--color-error, #dc3545);
}

.mobile-menu-group--logout .mobile-menu-action-item__hint {
    color: color-mix(in srgb, var(--color-error, #dc3545) 55%, var(--color-text-secondary));
}

/* Theme toggle in mobile menu */
.mobile-menu-action-item--theme {
    cursor: pointer;
}

.mobile-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    position: relative;
}

.mobile-theme-toggle .theme-icon-sun,
.mobile-theme-toggle .theme-icon-moon {
    position: absolute;
    font-size: 18px;
    line-height: 1;
    color: inherit;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

[data-bs-theme="dark"] .mobile-theme-mode-label::after {
    content: none;
}

[data-bs-theme="dark"] .mobile-theme-mode-label {
    font-size: 0;
}

[data-bs-theme="dark"] .mobile-theme-mode-label::before {
    content: "Dark";
    font-size: 13px;
}

[data-bs-theme="light"] .mobile-theme-mode-label {
    font-size: 13px;
}

[data-bs-theme="dark"] .mobile-theme-toggle .theme-icon-sun {
    opacity: 0;
    transform: rotate(90deg);
}

[data-bs-theme="dark"] .mobile-theme-toggle .theme-icon-moon {
    opacity: 1;
    transform: rotate(0deg);
}

[data-bs-theme="light"] .mobile-theme-toggle .theme-icon-sun {
    opacity: 1;
    transform: rotate(0deg);
}

[data-bs-theme="light"] .mobile-theme-toggle .theme-icon-moon {
    opacity: 0;
    transform: rotate(-90deg);
}

.mobile-register-btn .mobile-menu-action-item__icon {
    background: color-mix(in srgb, var(--color-info) 12%, var(--color-bg-secondary));
    color: var(--color-info);
}

@media (hover: hover) and (pointer: fine) {
    .mobile-menu-action-item:hover {
        background: color-mix(in srgb, var(--color-text-primary) 4%, var(--color-bg-primary));
    }

    .mobile-menu-action-item--primary:hover {
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--color-info) 14%, var(--color-bg-primary)) 0%,
            color-mix(in srgb, var(--color-info) 8%, var(--color-bg-primary)) 100%);
    }
}

@media (min-width: 992px) {
    .mobile-menu-panel {
        width: min(380px, 32vw);
    }
}

@media (max-width: 991px) {
    .topssec .space-between {
        gap: var(--spacing-4);
    }
}

/* Mobile - Adjust header spacing */
@media (max-width: 767px) {
    .topssec {
        padding: 10px 12px;
        background: var(--color-bg-secondary);
    }

    .topssec .container {
        padding-left: 0;
        padding-right: 0;
    }

    .burger-menu-btn {
        display: flex;
        width: 40px;
        height: 40px;
    }

    .header-brand-cluster {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        gap: 10px;
    }

    .topssec .logo {
        right: inherit !important;
        bottom: inherit !important;
        min-width: 0;
        flex: 1 1 auto;
    }

    .topssec .space-between {
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
    }

    .mobile_logo {
        display: block;
        width: auto !important;
        max-width: min(170px, 46vw) !important;
        height: 38px !important;
        object-fit: contain;
    }

    .ful_logo {
        display: none;
    }

    .customer-support-section {
        display: none !important;
    }

    .ritsude {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        justify-content: flex-end;
        padding: 0;
    }

    .right_menu {
        width: auto;
        min-width: 0;
    }

    .main_sec {
        width: auto;
        justify-content: flex-end;
        gap: 8px !important;
        flex-wrap: nowrap;
        align-items: center;
    }

    .register-btn-wrapper,
    .theme-toggle-wrapper,
    .signin-btn-wrapper {
        display: none !important;
    }

    .main_sec .sidebtn {
        flex-shrink: 0;
    }

    .currency-selector.flagss {
        margin: 0 !important;
    }

    .currency-selector .topa,
    .language-selector .topa {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 8px 12px !important;
        border-radius: 10px;
    }

    .currency-selector .reglognorml,
    .language-selector .reglognorml {
        gap: 6px;
    }

    .currency-selector .flags,
    .language-selector .language-code {
        font-size: 13px !important;
        font-weight: var(--font-weight-semibold);
    }

    .currency-selector .currency-arrow-icon,
    .language-selector .language-arrow-icon {
        display: none;
    }

    .language-selector .language-icon {
        width: 22px;
        height: 22px;
    }

    .language-selector .language-icon .tmx-icon {
        width: 18px;
        height: 18px;
    }

    .signin-dropdown-menu {
        right: 0;
        left: auto;
        min-width: min(280px, calc(100vw - 24px));
    }
}

/* ============================================
   Modern Footer Design
   ============================================ */
.modern-footer {
  background: light-dark(var(--color-white), var(--color-bg-primary));
  color: var(--color-white);
  padding: var(--spacing-0);
  border-top: 1px solid light-dark(#E0E0E0, var(--border-color-light));
}

/* Top Section */
.footer-top-section {
  padding: var(--spacing-8) var(--spacing-0);
  background: light-dark(#2C3E50, rgba(20, 20, 25, 0.8));
  /* background: linear-gradient(135deg, light-dark(#F8F9FA, rgba(30, 30, 35, 0.5)) 0%, light-dark(#FFFFFF, var(--color-bg-primary)) 100%); */
  border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
}

.footer-top-row {
  align-items: flex-start;
}

.footer-contact-col {
  padding: var(--spacing-0) var(--spacing-4);
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
}

.footer-contact-item i {
  font-size: var(--font-size-xl);
  color: var(--color-info);
  margin-top: var(--spacing-1);
  flex-shrink: 0;
  background: var(--color-bg-info);
  padding: var(--spacing-2);
  border-radius: var(--border-radius-md);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-text {
  flex: 1;
}

.contact-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  display: block;
  margin-bottom: var(--spacing-1);
  font-size: var(--font-size-sm);
}

.contact-text p {
  margin: var(--spacing-0);
color: var(--color-white);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.contact-link {
color: var(--color-white);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: var(--transition-all);
}

.contact-link:hover {
  color: var(--color-primary-primary);
}

.footer-services-col,
.footer-quicklinks-col {
  padding: var(--spacing-0) var(--spacing-4);
}

.footer-section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin: var(--spacing-0) var(--spacing-0) var(--spacing-5);
  font-family: var(--font-family-heading);
  letter-spacing: -0.02em;
  position: relative;
  padding-bottom: var(--spacing-3);
}

.footer-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-info), var(--color-info-light));
  border-radius: var(--border-radius-full);
}

.footer-services-list {
  list-style: none;
  padding: var(--spacing-0);
  margin: var(--spacing-0);
}

.footer-services-list li {
  margin-bottom: var(--spacing-3);
  position: relative;
  padding-left: var(--spacing-4);
}

.footer-services-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-info);
  font-weight: var(--font-weight-bold);
  opacity: 0;
  transform: translateX(-10px);
  transition: var(--transition-all);
}

.footer-services-list li:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.footer-services-list a {
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: var(--transition-all);
  display: inline-block;
  line-height: 1.6;
}

.footer-services-list a:hover {
  color: var(--color-info);
  transform: translateX(4px);
}

.footer-newsletter-col {
  padding: var(--spacing-0) var(--spacing-4);
}

.newsletter-form-wrapper {
  margin-bottom: var(--spacing-3);
}

.newsletter-input-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
  position: relative;
}

.newsletter-icon {
  position: absolute;
  left: var(--spacing-3);
  color: light-dark(#9E9E9E, var(--color-text-muted));
  font-size: var(--font-size-lg);
  pointer-events: none;
  z-index: 1;
}

.newsletter-input {
  flex: 1;
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-10);
  border: 1px solid light-dark(#E0E0E0, var(--border-color-medium));
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-sm);
  color: var(--color-white);
  background: light-dark(var(--color-white), var(--color-bg-secondary));
  transition: var(--transition-all);
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px var(--shadow-blue-default);
}

.newsletter-subscribe-btn {
  padding: var(--spacing-3) var(--spacing-8);
  background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-all);
  white-space: nowrap;
  box-shadow: 0 2px 8px var(--shadow-blue-default);
}

.newsletter-subscribe-btn:hover {
  background: linear-gradient(135deg, var(--color-info-dark) 0%, var(--color-info) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-blue-hover);
}

.newsletter-disclaimer {
  font-size: var(--font-size-xs);
  color: light-dark(#9E9E9E, var(--color-text-muted));
  margin: var(--spacing-0);
  text-align: left;
}

/* Mobile App Download Section */
.footer-mobile-app {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
}

.mobile-app-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin: var(--spacing-0) var(--spacing-0) var(--spacing-2);
  font-family: var(--font-family-heading);
}

.mobile-app-description {
  font-size: var(--font-size-sm);
color: var(--color-white);
  line-height: 1.6;
  margin: var(--spacing-0) var(--spacing-0) var(--spacing-4);
}

.mobile-app-buttons {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

.app-store-btn,
.play-store-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: light-dark(#000000, rgba(255, 255, 255, 0.1));
  border: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
  border-radius: var(--border-radius-lg);
  text-decoration: none;
  transition: var(--transition-all);
  min-width: 150px;
  justify-content: flex-start;
  flex: 1;
  max-width: 180px;
}

.app-store-btn {
  background: none;
  border:1px solid var(--color-white);
  color: var(--color-white);
}

.play-store-btn {
  background: none;
  border:1px solid var(--color-white);
  color: var(--color-white);
}

/* .app-store-btn:hover,
.play-store-btn:hover {
  background: var(--color-info);
  border-color: var(--color-info);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-blue-default);
  color: var(--color-white);
} */

.app-store-btn i,
.play-store-btn i {
  font-size: var(--font-size-xl);
}

.app-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.app-btn-small {
  font-size: var(--font-size-xs);
  opacity: 0.9;
}

.app-btn-large {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* Trust Badges Section */
.footer-trust-badges {
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-8);
  border-top: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
}

.trust-badges-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: light-dark(#1A1A1A, var(--color-text-primary));
  margin: var(--spacing-0) var(--spacing-0) var(--spacing-4);
  font-family: var(--font-family-heading);
}

.trust-badges-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
}

.trust-badge-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  background: light-dark(#F8F9FA, rgba(255, 255, 255, 0.05));
  border: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1));
  border-radius: var(--border-radius-md);
  transition: var(--transition-all);
}

.trust-badge-item:hover {
  background: light-dark(#F0F0F0, rgba(255, 255, 255, 0.1));
  border-color: var(--color-primary-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.trust-badge-item i {
  font-size: var(--font-size-lg);
  color: var(--color-primary-primary);
  flex-shrink: 0;
}

.trust-badge-item span {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
}

/* Middle Section */
.footer-middle-section {
  padding: var(--spacing-10) var(--spacing-0);
  background: light-dark(#2C3E50, rgba(20, 20, 25, 0.8));
  border-bottom: none;
}



.footer-social-col {
  padding: var(--spacing-0) var(--spacing-4);
}

.footer-social-col .footer-section-title {
  color: var(--color-white);
}

.footer-social-icons {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-4);
}

.footer-social-text {
  font-size: var(--font-size-sm);
  color: light-dark(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6));
  line-height: 1.6;
  margin: var(--spacing-0);
  max-width: 280px;
}

.social-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: light-dark(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 1px solid light-dark(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  border-radius: var(--border-radius-full);
  color: var(--color-white);
  text-decoration: none;
  transition: var(--transition-all);
  backdrop-filter: blur(10px);
}

.social-icon i {
  font-size: var(--font-size-lg);
}

.social-icon:hover {
  background: var(--color-info);
  border-color: var(--color-info);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 20px var(--shadow-blue-hover);
}

.footer-phone-col {
  padding: var(--spacing-0) var(--spacing-4);
}

.footer-phone-col .footer-section-title {
  color: var(--color-white);
  margin-bottom: var(--spacing-4);
}

.footer-phone-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.footer-support-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
}

.support-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.7));
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: var(--transition-all);
  padding: var(--spacing-2);
  border-radius: var(--border-radius-md);
  width: fit-content;
}

.support-link i {
  font-size: var(--font-size-base);
  color: var(--color-info);
}

.support-link:hover {
  color: var(--color-white);
  background: light-dark(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  transform: translateX(4px);
}

.footer-phone-info i {
  font-size: var(--font-size-2xl);
  color: var(--color-info);
  background: var(--color-bg-info);
  padding: var(--spacing-3);
  border-radius: var(--border-radius-full);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.phone-label {
  font-size: var(--font-size-sm);
  color: light-dark(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6));
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.phone-number {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-decoration: none;
  transition: var(--transition-all);
}

.phone-number:hover {
  color: var(--color-info);
  transform: translateX(4px);
}

.footer-payments-col,
.footer-support-col {
  padding: var(--spacing-0) var(--spacing-4);
}

.footer-support-col .footer-section-title {
  color: var(--color-white);
}

.footer-payments-col .footer-section-title {
  color: var(--color-white);
}

.footer-payment-logos {
  display: flex;
  gap: var(--spacing-1);
  flex-wrap: wrap;
  align-items: center;
}

.payment-logo {
  padding: var(--spacing-2) var(--spacing-2);
  background: light-dark(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 1px solid light-dark(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  text-align: center;
  min-width: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  transition: var(--transition-all);
  backdrop-filter: blur(10px);
  height: 47px;
}

.payment-logo:hover {
  background: light-dark(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  border-color: var(--color-primary-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.payment-logo img {
  width: 32px;
}

.payment-logo:nth-child(2) img {
  width: 28px;
}

.payment-logo:nth-child(3) img {
  width: 28px;
}

.payment-logo:nth-child(1) img {
  width: 30px;
}

.payment-logo:nth-child(4) img {
    width: 32px;
  }
.footer-security-badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
  flex-wrap: wrap;
}

.security-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: light-dark(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 1px solid light-dark(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  border-radius: var(--border-radius-md);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.security-badge i {
  font-size: var(--font-size-base);
  color: var(--color-primary-primary);
}

/* Bottom Section */
.footer-bottom-section {
  padding: var(--spacing-6) var(--spacing-0);
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border-primary);
}

.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.footer-copyright {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.footer-legal-links {
  display: flex;
  gap: var(--spacing-5);
  flex-wrap: wrap;
}

.footer-legal-links a {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: var(--transition-all);
  font-weight: var(--font-weight-medium);
  position: relative;
  padding: var(--spacing-1) var(--spacing-2);
}

.footer-legal-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary-primary);
  transition: var(--transition-all);
  transform: translateX(-50%);
}

.footer-legal-links a:hover {
  color: var(--color-white);
}

.footer-legal-links a:hover::after {
  width: calc(100% - 16px);
}

/* Responsive Footer */
@media (max-width: 991px) {
  .footer-top-row,
  .footer-middle-row {
    gap: var(--spacing-6);
  }
  
  .footer-contact-col,
  .footer-services-col,
  .footer-quicklinks-col,
  .footer-newsletter-col,
  .footer-social-col,
  .footer-phone-col,
  .footer-support-col,
  .footer-payments-col {
    margin-bottom: var(--spacing-6);
  }
  
  .footer-social-text {
    max-width: 100%;
  }
  
  .newsletter-input-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .newsletter-subscribe-btn {
    width: 100%;
  }
  
  .mobile-app-buttons {
    flex-direction: column;
  }
  
  .app-store-btn,
  .play-store-btn {
    width: 100%;
    justify-content: flex-start;
  }
  
  .trust-badges-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-legal-links {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .footer-top-section,
  .footer-middle-section {
    padding: var(--spacing-8) var(--spacing-0);
  }
  
  .footer-section-title {
    font-size: var(--font-size-base);
  }
  
  .footer-social-icons {
    justify-content: flex-start;
  }
  
  .footer-payment-logos {
    justify-content: flex-start;
  }
  
  .payment-logo {
    min-width: 70px;
    font-size: var(--font-size-xs);
    padding: var(--spacing-1) var(--spacing-3);
  }
  
  .footer-mobile-app,
  .footer-trust-badges {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
  }
  
  .mobile-app-title,
  .trust-badges-title {
    font-size: var(--font-size-base);
  }
  
  .trust-badges-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   MODERN LOGIN MODAL STYLES
   ============================================ */
.modern-login-modal {
    position: relative;
    background: var(--color-white);
    border-radius: 24px;
    padding: 0;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .modern-login-modal {
    background: var(--color-bg-primary);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modern-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-full);
    background: rgba(0, 0, 0, 0.05);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    padding: 0;
}

[data-bs-theme="dark"] .modern-close-btn {
    background: rgba(255, 255, 255, 0.1);
}

.modern-close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: rotate(90deg);
}

[data-bs-theme="dark"] .modern-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.modern-close-btn .material-icons {
    font-size: 20px;
    color: var(--color-text-primary);
}

/* Login Tabs */
.login-tabs-wrapper {
    display: flex;
    border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
    padding: 0 24px;
    margin-top: 16px;
}

.login-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.login-tab:hover {
    color: var(--color-text-primary);
    background: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.05));
}

.login-tab.active {
    color: var(--color-primary-primary);
    border-bottom-color: var(--color-primary-primary);
    font-weight: var(--font-weight-semibold);
}

.login-tab .tab-icon {
    display: flex;
    align-items: center;
}

.login-tab .tab-icon .material-icons {
    font-size: 18px;
}

.login-tab.active .tab-icon .material-icons {
    color: var(--color-primary-primary);
}

/* Modern Form Styles */
.modern-login-form {
    padding: 32px 24px;
}

.modern-form-group {
    margin-bottom: 24px;
}

.modern-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile Input Wrapper */
.mobile-input-wrapper {
    display: flex;
    gap: 0;
    border: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: all 0.3s ease;
}

.mobile-input-wrapper:focus-within {
    border-color: var(--color-primary-primary);
    box-shadow: 0 0 0 3px rgba(240, 152, 20, 0.1);
}

.country-code-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.05));
    border-right: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
    position: relative;
    min-width: 100px;
}

.country-flag {
    font-size: 20px;
    line-height: 1;
}

.country-code-select {
    border: none;
    background: transparent;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    padding: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    width: 50px;
}

.country-code-selector .dropdown-arrow {
    font-size: 18px;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.mobile-input {
    flex: 1;
    border: none;
    padding: 14px 16px;
    font-size: var(--font-size-base);
    background: transparent;
    color: var(--color-text-primary);
    outline: none;
}

.mobile-input::placeholder {
    color: var(--color-text-muted);
}

/* Modern Input with Icon */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon .input-icon {
    position: absolute;
    left: 16px;
    color: var(--color-text-secondary);
    font-size: 20px;
    pointer-events: none;
    z-index: 1;
}

.modern-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-base);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: all 0.3s ease;
    outline: none;
}

.modern-input:focus {
    border-color: var(--color-primary-primary);
    box-shadow: 0 0 0 3px rgba(240, 152, 20, 0.1);
}

.modern-input::placeholder {
    color: var(--color-text-muted);
}

.password-toggle {
    position: absolute;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    z-index: 2;
}

.password-toggle .material-icons {
    font-size: 20px;
}

.password-toggle:hover {
    color: var(--color-text-primary);
}

/* Continue Button */
.modern-continue-btn {
    width: 100%;
    padding: 14px 24px;
    background: light-dark(#E5E5E5, #4A4A4A);
    color: light-dark(#999, #CCC);
    border: none;
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: not-allowed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.modern-continue-btn:not(:disabled) {
    background: linear-gradient(135deg, var(--gradient-orange-start) 0%, var(--gradient-orange-mid) 50%, var(--gradient-orange-end) 100%);
    color: var(--color-white);
    cursor: pointer;
    box-shadow: 0 4px 12px var(--shadow-orange-default);
}

.modern-continue-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow-orange-hover);
}

.modern-continue-btn .material-icons {
    font-size: 20px;
}

/* Social Divider */
.social-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 32px 0 24px;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
}

.divider-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Social Login Buttons */
.social-login-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.social-login-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
}

.social-login-btn:hover {
    border-color: var(--color-primary-primary);
    background: light-dark(rgba(240, 152, 20, 0.05), rgba(240, 152, 20, 0.1));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.social-icon {
    width: 20px;
    height: 20px;
}

.social-login-btn .material-icons {
    font-size: 20px;
}

/* Login Terms */
.login-terms {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
}

.login-terms p {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
    text-align: center;
    margin: 0;
}

.login-terms a {
    color: var(--color-primary-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.login-terms a:hover {
    text-decoration: underline;
}

/* Modern Submit Button */
.modern-submit-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--gradient-orange-start) 0%, var(--gradient-orange-mid) 50%, var(--gradient-orange-end) 100%);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    margin-top: 8px;
    box-shadow: 0 4px 12px var(--shadow-orange-default);
}

.modern-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow-orange-hover);
}

.modern-submit-btn .material-icons {
    font-size: 20px;
}

/* Login Links */
.login-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    font-size: var(--font-size-sm);
}

.login-links a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-links a:hover {
    color: var(--color-primary-primary);
}

.login-links a strong {
    color: var(--color-primary-primary);
    font-weight: var(--font-weight-semibold);
}

/* Back to Mobile Button */
.back-to-mobile-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
    border-radius: var(--border-radius-lg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    transition: all 0.3s ease;
}

.back-to-mobile-btn:hover {
    border-color: var(--color-primary-primary);
    color: var(--color-primary-primary);
    background: light-dark(rgba(240, 152, 20, 0.05), rgba(240, 152, 20, 0.1));
}

.back-to-mobile-btn .material-icons {
    font-size: 18px;
}

/* Modern Alert */
.modern-alert {
    padding: 12px 16px;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: var(--font-size-sm);
}

.modern-alert.alert-danger {
    background: rgba(235, 71, 54, 0.1);
    color: var(--color-danger-primary);
    border: 1px solid rgba(235, 71, 54, 0.2);
}

.modern-alert .material-icons {
    font-size: 20px;
}

/* ============================================
   MODERN LOGIN FORM UI (Existing Structure)
   ============================================ */

/* Modal Dialog Updates */
#show_log .modal-dialog {
    max-width: 860px;
    margin: 40px auto;
    height: 100%;
    display: flex;
    align-items: center;
    align-self: center;
}

#show_log .modal-content {
    border: none;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25),
                0 8px 24px rgba(0, 0, 0, 0.15);
    background: var(--color-white);
    animation: modalFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

[data-bs-theme="dark"] #show_log .modal-content {
    background: var(--color-bg-primary);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

#show_log .modal-body {
    padding: 0;
}

/* Let Bootstrap dropdown menus escape rounded/clipping ancestors (register country code) */
#show_log .modal-dialog,
#show_log .modal-content,
#show_log .my_account_dropdown.mysign.exploreul {
    overflow: visible;
}

/* Close Button */
.my_account_dropdown .log_close {
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-4);
    width: var(--spacing-8);
    height: var(--spacing-8);
    border-radius: var(--border-radius-full);
    background: color-mix(in srgb, var(--color-black) var(--opacity-5), transparent);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: calc(var(--z-index-modal) + 1);
    transition: var(--transition-all);
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    opacity: var(--opacity-70);
}

[data-bs-theme="dark"] .my_account_dropdown .log_close {
    background: color-mix(in srgb, var(--color-white) var(--opacity-10), transparent);
}

.my_account_dropdown .log_close:hover {
    background: color-mix(in srgb, var(--color-black) var(--opacity-10), transparent);
    opacity: var(--opacity-100);
    transform: rotate(90deg);
}

[data-bs-theme="dark"] .my_account_dropdown .log_close:hover {
    background: color-mix(in srgb, var(--color-white) var(--opacity-20), transparent);
}

/* Main Container - Enhanced */
.my_account_dropdown.mysign.exploreul {
    position: relative;
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-3xl);
    padding: 0;
    max-width: min(var(--container-lg), 100%);
    overflow: hidden;
    box-shadow: 0 0 0 var(--border-width-thin) color-mix(in srgb, var(--color-black) var(--opacity-5), transparent);
}


[data-bs-theme="dark"] .my_account_dropdown.mysign.exploreul {
    background: var(--color-bg-primary);
}

/* Left Side Image Section — tokens for theme + dark mode */
.login-left-image {
    width: 50%;
    min-height: calc(var(--spacing-12) * 10 + var(--spacing-10));
    background: var(--gradient-blue);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.login-left-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 80% auto;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: var(--opacity-20);
    z-index: 1;
}

.login-left-image::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
    animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: var(--opacity-50);
    }
    50% {
        transform: scale(1.1);
        opacity: var(--opacity-80);
    }
}

.login-right-content{
    width: 50%;
    padding: var(--spacing-8) var(--spacing-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--color-bg-primary);
}

.login-form-header {
    margin-bottom: var(--spacing-3);
    text-align: center;
}
.input-wrapper{
    position: relative;
}
.login-form-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
    letter-spacing: var(--letter-spacing-tight);
}

.login-form-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.login-left-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><path d="M0,400 Q300,200 600,400 T1200,400 L1200,800 L0,800 Z" fill="rgba(255,255,255,0.1)"/><path d="M0,600 Q400,300 800,600 T1200,600 L1200,800 L0,800 Z" fill="rgba(255,255,255,0.05)"/></svg>') no-repeat center;
    background-size: cover;
    opacity: var(--opacity-10);
}

.login-image-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--spacing-10);
    color: var(--color-white);
}

.login-image-icon {
    width: var(--avatar-size-2xl);
    height: var(--avatar-size-2xl);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-white) 35%, transparent) 0%,
        color-mix(in srgb, var(--color-white) 25%, transparent) 100%
    );
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0;
    backdrop-filter: blur(15px);
    border: var(--border-width-thick) solid color-mix(in srgb, var(--color-white) 60%, transparent);
    box-shadow: var(--shadow-xl),
                0 var(--spacing-1) var(--spacing-4) var(--shadow-orange-default),
                0 0 0 var(--border-width-thin) color-mix(in srgb, var(--color-primary-primary) var(--opacity-20), transparent),
                inset 0 var(--spacing-1) var(--spacing-2) color-mix(in srgb, var(--color-white) 40%, transparent);
    transition: var(--transition-all);
    animation: float 3s ease-in-out infinite;
    position: relative;
}

.login-image-icon::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--border-width-medium));
    left: calc(-1 * var(--border-width-medium));
    right: calc(-1 * var(--border-width-medium));
    bottom: calc(-1 * var(--border-width-medium));
    border-radius: var(--border-radius-full);
    background: linear-gradient(135deg, var(--color-primary-primary) 0%, var(--color-primary-midtone) 50%, var(--color-primary-pastel) 100%);
    z-index: -1;
    opacity: var(--opacity-40);
}

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

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(calc(-1 * var(--spacing-3)));
    }
}

.login-image-icon .material-icons {
    font-size: var(--spacing-12);
    background: linear-gradient(135deg, var(--color-primary-primary) 0%, var(--color-primary-midtone) 50%, var(--color-primary-pastel) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 var(--spacing-1) var(--spacing-2) var(--shadow-orange-hover));
}

.login-logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-2);
}

.login-logo-text {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    background: linear-gradient(135deg, var(--color-primary-primary) 0%, var(--color-primary-midtone) 50%, var(--color-primary-pastel) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: lowercase;
    letter-spacing: var(--letter-spacing-widest);
    position: relative;
    padding: var(--spacing-2) var(--spacing-5);
    border-radius: var(--border-radius-lg);
    filter: drop-shadow(0 var(--spacing-1) var(--spacing-2) var(--shadow-orange-default));
}

.login-image-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-4);
    color: var(--color-white);
    text-shadow:
        0 var(--spacing-1) var(--spacing-4) color-mix(in srgb, var(--color-black) var(--opacity-40), transparent),
        0 var(--spacing-1) var(--spacing-2) color-mix(in srgb, var(--color-primary-primary) var(--opacity-30), transparent),
        0 var(--border-width-thin) var(--spacing-1) color-mix(in srgb, var(--color-black) var(--opacity-20), transparent);
    letter-spacing: var(--letter-spacing-tight);
}

.login-image-subtitle {
    font-size: var(--font-size-lg);
    color: color-mix(in srgb, var(--color-white) 98%, var(--color-black));
    margin: 0;
    text-shadow:
        0 var(--spacing-1) var(--spacing-3) color-mix(in srgb, var(--color-black) var(--opacity-30), transparent),
        0 var(--border-width-thin) var(--spacing-1) color-mix(in srgb, var(--color-primary-primary) var(--opacity-20), transparent);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
}

/* Sign Div Container - Updated for split layout */
.signdiv {
    width: 100%;
    padding: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Customer login modal: one row — shared benefits + stacked auth panes */
.signdiv.auth-modal-split {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
}

/* Login Form Container - Enhanced */
.insigndiv.for_sign_in {
    display: block;
    width: 100%;
    min-height: auto;
    background: transparent;
}


/* Social Login Section (Left) */
.leftpul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 0;
    margin-top: 0;
}

/* Social Login Buttons Styling - Enhanced */
.leftpul a,
.leftpul button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    border: 2px solid var(--border-color-light);
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.leftpul a::before,
.leftpul button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.leftpul a:hover::before,
.leftpul button:hover::before {
    left: 100%;
}

.leftpul a:hover,
.leftpul button:hover {
    border-color: var(--color-primary-primary);
    background: linear-gradient(135deg, rgba(240, 152, 20, 0.05) 0%, rgba(240, 152, 20, 0.1) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(240, 152, 20, 0.2);
}

.leftpul a:active,
.leftpul button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(240, 152, 20, 0.15);
}

.leftpul .fa,
.leftpul .material-icons {
    font-size: 20px;
}

/* Or Divider - Enhanced */
.centerpul {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 28px 0;
    position: relative;
}

.orbar {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    position: relative;
}

.orbar::before,
.orbar::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--border-color-light) 50%, 
        transparent 100%);
}

.orbar strong {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: var(--font-weight-semibold);
    padding: 6px 16px;
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-full);
    border: 1px solid var(--border-color-light);
    position: relative;
    z-index: 1;
}

/* Form Inputs Section (Right) - Enhanced */
.ritpul {
    width: 100%;
    margin-top: var(--spacing-3);
    padding: 0 var(--spacing-2);
}

.ritpul form {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Input Fields - Enhanced */
.rowput {
    position: relative;
    margin-bottom: 24px;
}

.rowput .input-icon-left {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: 20px;
    z-index: 2;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rowput:focus-within .input-icon-left {
    color: var(--color-primary-primary);
    transform: translateY(-50%) scale(1.1);
}

/* Legacy Font Awesome icons - hide them */
.rowput .fal,
.rowput .fa {
    display: none;
}

/* Registration form - hide Font Awesome icons */
.newacount_div .rowput .fal,
.newacount_div .rowput .fa {
    display: none;
}

/* Registration form input icons */
.newacount_div .rowput .input-icon-left {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: 20px;
    z-index: 2;
    pointer-events: none;
    transition: color 0.3s ease;
}

.newacount_div .rowput:focus-within .input-icon-left {
    color: var(--color-primary-primary);
}

/* Registration form password toggle */
.newacount_div .rowput .password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    z-index: 2;
    transition: color 0.2s ease;
}

.newacount_div .rowput .password-toggle-btn:hover {
    color: var(--color-primary-primary);
    background: rgba(240, 152, 20, 0.1);
    transform: translateY(-50%) scale(1.1);
}

.newacount_div .rowput .err_msg {
    display: none;
    color: var(--color-danger-primary);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-1);
    padding-left: var(--spacing-1);
    animation: slideDown 0.3s ease-out;
}

.newacount_div .rowput .err_msg.invalid-ip {
    display: block;
}

.newacount_div .rowput input.invalid-ip,
.newacount_div .rowput select.invalid-ip {
    border-color: var(--color-danger-primary);
    box-shadow: 0 0 0 3px rgba(235, 71, 54, 0.1);
}

.newacount_div .rowput .password-toggle-btn .material-icons {
    font-size: 20px;
}

.rowput .form-control.logpadding {
    width: 100%;
    padding: 10px 16px 10px 52px;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-base);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.rowput .form-control.logpadding:hover {
    border-color: var(--color-primary-midtone);
}

.rowput .form-control.logpadding:focus {
    border-color: var(--color-primary-primary);

}

.rowput .form-control.logpadding::placeholder {
    color: var(--color-text-muted);
}

/* Password Toggle Button - Enhanced */
.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.2s ease;
    border-radius: var(--border-radius-sm);
    width: 32px;
    height: 32px;
}

.password-toggle-btn:hover {
    color: var(--color-primary-primary);
    background: rgba(240, 152, 20, 0.1);
    transform: translateY(-50%) scale(1.1);
}

.password-toggle-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.password-toggle-btn .material-icons {
    font-size: 20px;
    transition: transform 0.2s ease;
}

/* Password field needs extra padding for toggle button */
.rowput .password.form-control.logpadding,
.rowput input[type="password"].form-control.logpadding {
    padding-right: 48px;
}

/* Select dropdown arrow icon */
.select-arrow-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: 20px;
    pointer-events: none;
    z-index: 2;
}

.rowput select.form-control.logpadding {
    padding-right: 48px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    cursor: pointer;
}

/* Submit Button — design-system blue (info gradient) */
.submitlogin {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--button-height-xl);
    padding: var(--spacing-3) var(--spacing-6);
    /* Use gradient stops — avoids nested light-dark() on --gradient-blue failing as one background value */
    background-color: var(--color-info);
    background-image: linear-gradient(135deg, var(--gradient-blue-start) 0%, var(--gradient-blue-mid) 50%, var(--gradient-blue-end) 100%);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-xl);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    cursor: pointer;
    transition: none;
    margin-top: var(--spacing-3);
    box-shadow: 0 var(--spacing-1) var(--spacing-4) var(--shadow-blue-default),
                0 var(--border-width-thick) var(--spacing-3) color-mix(in srgb, var(--color-info-dark) var(--opacity-25), transparent);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    position: relative;
    overflow: visible;
}

.submitlogin:active {
    box-shadow: 0 var(--spacing-1) var(--spacing-3) var(--shadow-blue-default);
}

.submitlogin:focus-visible {
    outline: var(--border-width-medium) solid var(--color-info-light);
    outline-offset: var(--spacing-1);
}

.submitlogin span {
    position: relative;
    z-index: 1;
}

/* Login Links - Enhanced */
.newAccountCredential {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    font-size: var(--font-size-sm);
    padding-top: 20px;
    border-top: 1px solid var(--border-color-light);
}

.dntacnt,
.misclog {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.dntacnt a,
.misclog a {
    color: var(--color-primary-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: all 0.2s ease;
    position: relative;
    padding: 4px 0;
}

.dntacnt a::after,
.misclog a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary-primary);
    transition: width 0.3s ease;
}

.dntacnt a:hover,
.misclog a:hover {
    color: var(--color-primary-midtone);
}

.dntacnt a:hover::after,
.misclog a:hover::after {
    width: 100%;
}

/* Reusable inline field validation (use with form_field_validation.js) */
.field-feedback__message {
  margin: var(--spacing-1) 0 0;
  padding: 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-medium);
  color: var(--color-danger-primary);
}

.field-feedback .form-control.invalid-ip,
.field-feedback input.form-control.invalid-ip,
.field-feedback select.form-control.invalid-ip,
.field-feedback select.country-code-select.invalid-ip,
.field-feedback textarea.form-control.invalid-ip {
  border-color: var(--color-danger-primary);
  box-shadow: 0 0 0 var(--spacing-1) color-mix(in srgb, var(--color-danger-primary) var(--opacity-15), transparent);
}

.field-feedback .form-control.invalid-ip:focus {
  border-color: var(--color-danger-primary);
  box-shadow: 0 0 0 var(--spacing-1) color-mix(in srgb, var(--color-danger-primary) var(--opacity-20), transparent);
}

.field-feedback:has(.form-control.invalid-ip) .input-icon-left,
.field-feedback:has(input.invalid-ip) .input-icon-left {
  color: var(--color-danger-primary);
}

/* Phone row: red wrapper when mobile input is invalid (suggest-register / validation) */
.field-feedback.phone-input-group .phone-input-wrapper:has(.mobile-number-input.invalid-ip) {
  border-color: var(--color-danger-primary);
  box-shadow: 0 0 0 var(--spacing-1) color-mix(in srgb, var(--color-danger-primary) var(--opacity-15), transparent);
}

.field-feedback.phone-input-group .phone-input-wrapper:has(.mobile-number-input.invalid-ip):focus-within {
  border-color: var(--color-danger-primary);
  box-shadow: 0 0 0 var(--spacing-1) color-mix(in srgb, var(--color-danger-primary) var(--opacity-20), transparent);
}

.field-feedback.phone-input-group:has(.mobile-number-input.invalid-ip) .country-code-icon,
.field-feedback.phone-input-group:has(.mobile-number-input.invalid-ip) .mobile-icon,
.field-feedback.phone-input-group:has(.mobile-number-input.invalid-ip) .select-arrow-icon {
  color: var(--color-danger-primary);
}

.field-feedback.phone-input-group .phone-input-wrapper:has(.country-code-select.invalid-ip),
.field-feedback.phone-input-group .phone-input-wrapper:has(.country-code-dropdown-toggle.invalid-ip) {
  border-color: var(--color-danger-primary);
  box-shadow: 0 0 0 var(--spacing-1) color-mix(in srgb, var(--color-danger-primary) var(--opacity-15), transparent);
}

.field-feedback.phone-input-group .phone-input-wrapper:has(.country-code-select.invalid-ip):focus-within,
.field-feedback.phone-input-group .phone-input-wrapper:has(.country-code-dropdown-toggle.invalid-ip):focus-within {
  border-color: var(--color-danger-primary);
  box-shadow: 0 0 0 var(--spacing-1) color-mix(in srgb, var(--color-danger-primary) var(--opacity-20), transparent);
}

.field-feedback.phone-input-group:has(.country-code-select.invalid-ip) .country-code-icon,
.field-feedback.phone-input-group:has(.country-code-select.invalid-ip) .select-arrow-icon,
.field-feedback.phone-input-group:has(.country-code-dropdown-toggle.invalid-ip) .country-code-icon,
.field-feedback.phone-input-group:has(.country-code-dropdown-toggle.invalid-ip) .country-code-dropdown-toggle::after {
  color: var(--color-danger-primary);
}

#show_log .field-feedback.phone-input-group .phone-input-wrapper:has(.mobile-number-input.invalid-ip),
#show_log .field-feedback.phone-input-group .phone-input-wrapper:has(.mobile-number-input.invalid-ip):focus-within {
  border-color: var(--color-danger-primary);
  box-shadow: 0 0 0 var(--spacing-1) color-mix(in srgb, var(--color-danger-primary) var(--opacity-20), transparent);
}

#show_log .field-feedback.phone-input-group .phone-input-wrapper:has(.country-code-select.invalid-ip),
#show_log .field-feedback.phone-input-group .phone-input-wrapper:has(.country-code-select.invalid-ip):focus-within,
#show_log .field-feedback.phone-input-group .phone-input-wrapper:has(.country-code-dropdown-toggle.invalid-ip),
#show_log .field-feedback.phone-input-group .phone-input-wrapper:has(.country-code-dropdown-toggle.invalid-ip):focus-within {
  border-color: var(--color-danger-primary);
  box-shadow: 0 0 0 var(--spacing-1) color-mix(in srgb, var(--color-danger-primary) var(--opacity-20), transparent);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Register Section - Enhanced */
.newacount_div.for_sign_up {
    padding: 0;
    display: none;
    animation: fadeInUp 0.5s ease-out;
}

.slpophd_new {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
    text-align: center;
    letter-spacing: -0.5px;
    position: relative;
    padding-bottom: var(--spacing-4);
}

.slpophd_new::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(135deg, var(--color-primary-primary) 0%, var(--color-primary-midtone) 100%);
    border-radius: var(--border-radius-full);
}

.othesend_regstr .ritpul form {
    width: 100%;
    animation: fadeInUp 0.5s ease-out;
}

.othesend_regstr {
    padding-top: var(--spacing-0);
}

/* Register Form Inputs - Enhanced */
.newacount_div .rowput {
    margin-bottom: 24px;
    width: 50%;
    float: left;
    padding: 0 var(--spacing-3);
    animation: fadeInUp 0.5s ease-out;
    animation-fill-mode: both;
}



.newacount_div .rowput:nth-child(1) { animation-delay: 0.1s; }
.newacount_div .rowput:nth-child(2) { animation-delay: 0.15s; }
.newacount_div .rowput:nth-child(3) { animation-delay: 0.2s; }
.newacount_div .rowput:nth-child(4) { animation-delay: 0.25s; }
.newacount_div .rowput:nth-child(5) { animation-delay: 0.3s; }
.newacount_div .rowput:nth-child(6) { animation-delay: 0.35s; }

.row_submit {
    margin-top: var(--spacing-4);
    clear: both;
}

.agree_terms-wrapper {
    margin-bottom: var(--spacing-4);
}
.my_account_dropdown a { color: var(--color-text-primary); text-decoration: none; cursor: pointer;}
.my_account_dropdown a:hover { color: var(--color-text-primary); text-decoration: none; }

.open_sign_in {
    margin-top: var(--spacing-5);
    float: left;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
    padding: var(--spacing-2) 0;
    position: relative;
}

.open_sign_in::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary-primary);
    transition: width 0.3s ease;
}

.open_sign_in:hover {
    color: var(--color-primary-primary);
}

.open_sign_in:hover::after {
    width: 100%;
}

/* Phone Input Group - Combined Country Code and Mobile Number */
.phone-input-group {
    padding: 0 var(--spacing-3) !important;
}

.phone-input-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid var(--border-color-light);
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.phone-input-wrapper:hover {
    border-color: var(--color-primary-midtone);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.phone-input-group:focus-within .phone-input-wrapper {
    border-color: var(--color-primary-primary);
    box-shadow: 0 0 0 4px rgba(240, 152, 20, 0.15),
                0 4px 12px rgba(240, 152, 20, 0.1);
    transform: translateY(-1px);
}

.country-code-section {
    display: flex;
    align-items: center;
    padding: 14px 12px;
    background: rgba(240, 152, 20, 0.05);
    border-right: 1px solid var(--border-color-light);
    gap: var(--spacing-2);
    min-width: 120px;
    position: relative;
}

.country-code-icon {
    color: var(--color-text-secondary);
    font-size: 20px;
    flex-shrink: 0;
}

.phone-input-group:focus-within .country-code-icon {
    color: var(--color-primary-primary);
}

.country-code-select {
    border: none;
    background: transparent;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    padding: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    flex: 1;
    min-width: 60px;
}

.country-code-section .select-arrow-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: 20px;
    pointer-events: none;
    z-index: 2;
}

.register-country-dropdown {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}

.country-code-dropdown-toggle {
    --bs-btn-color: var(--color-text-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--color-text-primary);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--color-text-primary);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    border: none;
    box-shadow: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: 0 0.25rem 0 0;
    text-align: left;
    gap: var(--spacing-2);
}

.country-code-dropdown-toggle:focus-visible {
    box-shadow: none;
}

.country-code-dropdown-toggle::after {
    margin-inline-start: auto;
    flex-shrink: 0;
}

.register-country-flag {
    flex-shrink: 0;
    width: 20px;
    height: auto;
    max-height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-black) 8%, transparent);
}

.register-country-flag--item {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-black) 6%, transparent);
}

.register-country-flag--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 15px;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1;
    background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
    border-radius: 2px;
}

.country-code-dropdown-label {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.country-code-dropdown-toggle.invalid-ip .country-code-dropdown-label {
    color: var(--color-danger-primary);
}

/* Register country dropdown — login modal (scoped overrides for global dropdown.css) */
#show_log .phone-input-wrapper {
    position: relative;
}

#show_log .register-country-dropdown {
    position: static;
    width: 100%;
}

#show_log .register-country-dropdown.is-open {
    z-index: 1061;
}

#show_log .phone-input-group:has(.register-country-dropdown.is-open),
#show_log .phone-input-wrapper:has(.register-country-dropdown.is-open),
#show_log .country-code-section:has(.register-country-dropdown.is-open) {
    overflow: visible;
    z-index: 1060;
}

#show_log .country-code-section {
    min-width: 108px;
    max-width: 132px;
    flex-shrink: 0;
    padding: 0;
    background: color-mix(in srgb, var(--color-info) 4%, var(--color-bg-primary));
}

#show_log .country-code-dropdown-toggle.dropdown-toggle {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-2);
    width: 100% !important;
    min-height: 100%;
    margin: 0;
    padding: 14px 10px 14px 12px !important;
    border: none;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

#show_log .country-code-dropdown-toggle.dropdown-toggle::after {
    display: inline-block !important;
    margin-inline-start: auto;
    vertical-align: middle;
    border-top-color: var(--color-text-secondary);
    transition: transform 0.2s ease;
}

#show_log .country-code-dropdown-toggle.show::after,
#show_log .register-country-dropdown.is-open .country-code-dropdown-toggle::after {
    transform: rotate(180deg);
    border-top-color: var(--color-info);
}

#show_log .country-code-dropdown-toggle.show,
#show_log .register-country-dropdown.is-open .country-code-dropdown-toggle {
    background: color-mix(in srgb, var(--color-info) 6%, transparent) !important;
}

#show_log .register-country-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--spacing-1));
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: var(--spacing-1);
    z-index: 1062;
    background: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--border-color-medium);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none !important;
    animation: none !important;
    transition: opacity 0.18s ease, visibility 0.18s ease, max-height 0.22s ease;
    display: block;
    list-style: none;
}

#show_log .register-country-dropdown-menu.show,
#show_log .register-country-dropdown-menu.open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    max-height: min(280px, 48vh) !important;
    overflow-y: auto;
    overflow-x: hidden;
    transform: none !important;
    animation: none !important;
}

#show_log .register-country-dropdown-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#show_log .register-country-dropdown-menu .register-country-option {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start !important;
    gap: var(--spacing-3);
    width: 100%;
    margin: 2px 0;
    padding: var(--spacing-2) var(--spacing-3) !important;
    border: none;
    border-radius: var(--border-radius-md);
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    transform: none !important;
    overflow: visible;
    position: relative;
    white-space: nowrap;
}

#show_log .register-country-option__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#show_log .register-country-option__code {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
}

#show_log .register-country-dropdown-menu .register-country-option::before {
    display: none !important;
    content: none !important;
}

#show_log .register-country-dropdown-menu .register-country-option:hover,
#show_log .register-country-dropdown-menu .register-country-option:focus-visible {
    background: color-mix(in srgb, var(--color-info) 10%, transparent);
    color: var(--color-text-primary);
    transform: none !important;
    padding-left: var(--spacing-3) !important;
    outline: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-info) 18%, transparent);
}

#show_log .register-country-dropdown-menu .register-country-option.active {
    background: color-mix(in srgb, var(--color-info) 14%, transparent);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-info) 28%, transparent);
    padding-left: var(--spacing-3) !important;
}

#show_log .register-country-dropdown-menu .register-country-option.active:hover {
    background: color-mix(in srgb, var(--color-info) 18%, transparent);
    transform: none !important;
}

#show_log .register-country-option__leading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    min-width: 22px;
}

#show_log .register-country-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

#show_log .register-country-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
    margin: var(--spacing-1) 0;
}

#show_log .register-country-dropdown-menu::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-text-muted) 35%, transparent);
    border-radius: 999px;
}

#show_log .register-country-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--color-info) 55%, transparent);
}

#show_log .mobile-number-section {
    border-left: 1px solid var(--border-color-light);
}

.phone-input-group:focus-within .select-arrow-icon {
    color: var(--color-primary-primary);
}

.mobile-number-section {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 14px 16px 14px 12px;
    gap: var(--spacing-2);
    position: relative;
}

.mobile-icon {
    color: var(--color-text-secondary);
    font-size: 20px;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

.phone-input-group:focus-within .mobile-icon {
    color: var(--color-primary-primary);
}

.mobile-number-input {
    border: none;
    background: transparent;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    padding: 0;
    outline: none;
    flex: 1;
    width: 100%;
}

.mobile-number-input::placeholder {
    color: var(--color-text-muted);
}

.newacount_div .rowput select.form-control.logpadding {
    padding-left: 48px;
    padding-right: 48px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    cursor: pointer;
    border: 2px solid var(--border-color-light);
    border-radius: var(--border-radius-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.newacount_div .rowput select.form-control.logpadding:hover {
    border-color: var(--color-primary-midtone);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.newacount_div .rowput select.form-control.logpadding:focus {
    border-color: var(--color-primary-primary);
    box-shadow: 0 0 0 4px rgba(240, 152, 20, 0.15),
                0 4px 12px rgba(240, 152, 20, 0.1);
    transform: translateY(-1px);
}

.newacount_div .rowput select.form-control.logpadding + .fa-mobile::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--color-text-secondary);
    pointer-events: none;
}

/* Terms Checkbox - Modern Design */
.agree_terms-wrapper {
    margin-bottom: var(--spacing-4);
}

.agree_terms {
    margin-bottom: 0;
    padding: var(--spacing-0);
    font-size: var(--font-size-xs);
    transition: all 0.3s ease;
}



.modern-checkbox-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.modern-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.modern-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    cursor: pointer;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
    user-select: none;
}

.checkbox-custom {
    position: relative;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border: 2px solid light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
    border-radius: 4px;
    background: var(--color-bg-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.modern-checkbox:checked + .modern-checkbox-label .checkbox-custom {
    background: linear-gradient(135deg, var(--gradient-orange-start) 0%, var(--gradient-orange-mid) 50%, var(--gradient-orange-end) 100%);
    border-color: var(--color-primary-primary);
    box-shadow: 0 2px 8px var(--shadow-orange-default);
}

.modern-checkbox:focus + .modern-checkbox-label .checkbox-custom {
    box-shadow: 0 0 0 3px rgba(240, 152, 20, 0.2);
}

.modern-checkbox-label:hover .checkbox-custom {
    border-color: var(--color-primary-primary);
    transform: scale(1.05);
}

.modern-checkbox:checked + .modern-checkbox-label:hover .checkbox-custom {
    box-shadow: 0 4px 12px var(--shadow-orange-hover);
}

.checkbox-check {
    font-size: 16px !important;
    color: var(--color-white);
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-checkbox:checked + .modern-checkbox-label .checkbox-check {
    opacity: 1;
    transform: scale(1);
}

.checkbox-text {
    flex: 1;
    line-height: 1.6;
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
}

.checkbox-text a {
    color: var(--color-primary-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: all 0.2s ease;
    position: relative;
}

.checkbox-text a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary-primary);
    transition: width 0.3s ease;
}

.checkbox-text a:hover {
    color: var(--color-primary-midtone);
}

.checkbox-text a:hover::after {
    width: 100%;
}

/* Invalid state */
.modern-checkbox.invalid-ip + .modern-checkbox-label .checkbox-custom {
    border-color: var(--color-danger-primary);
    background: rgba(235, 71, 54, 0.1);
}

/* Legacy checkbox styles (for backward compatibility) */
.squaredThree {
    position: relative;
    display: inline-block;
    margin-right: 8px;
}

.lbllbl {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.lbllbl a {
    color: var(--color-primary-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.lbllbl a:hover {
    text-decoration: underline;
}

/* Forgot Password Section (stacked in same column as login/register) */
.actual_forgot.for_forgot {
    display: none;
    padding: 0;
}

.actual_forgot .slpophd_new {
    margin-bottom: 24px;
}

/* Responsive */
@media (max-width: 1199px) {
    #show_log .modal-dialog {
        max-width: 95%;
    }
    
    .my_account_dropdown.mysign.exploreul {
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    .my_account_dropdown.mysign.exploreul {
        max-width: 100%;
        flex-direction: column;
        min-height: auto;
    }
    
    .login-left-image {
        width: 100%;
        min-height: 200px;
    }
    
    .signdiv {
        width: 100%;
        padding: 32px 24px;
    }
}

@media (max-width: 767px) {
    #show_log {
        --bs-modal-bg: rgba(15, 23, 42, 0.45);
    }

    #show_log .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        margin: 0;
        width: 100%;
        max-width: none;
        height: auto !important;
        display: block !important;
        align-items: stretch !important;
        transform: translateY(100%) !important;
        transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #show_log.show .modal-dialog,
    #show_log.modal.show .modal-dialog {
        transform: translateY(0) !important;
    }

    #show_log .modal-content {
        border: 0;
        border-radius: var(--border-radius-2xl) var(--border-radius-2xl) 0 0;
        box-shadow: var(--shadow-lg);
        max-height: none;
        overflow: hidden;
        background: var(--color-bg-primary);
    }

    #show_log .modal-body {
        padding: 0;
        overflow-y: auto;
        max-height: none;
    }

    #show_log .my_account_dropdown.mysign.exploreul {
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }

    #show_log .login-left-image {
        display: none !important;
    }

    #show_log .signdiv.auth-modal-split {
        display: block;
    }

    #show_log .login-auth-column,
    #show_log .login-right-content,
    #show_log .insigndiv.for_sign_in .login-right-content > .ritpul {
        width: 100%;
        max-width: none;
    }

    #show_log .login-right-content {
        padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    }

    #show_log .log_close {
        top: 14px;
        right: 14px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #f1f5f9;
        color: #475569;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        line-height: 1;
        z-index: 3;
    }

    #show_log .login-form-header {
        margin: 0 36px 18px 0;
        text-align: left;
    }

    #show_log .login-form-subtitle {
        margin: 0 0 6px;
        font-size: 13px;
        color: #64748b;
        font-weight: 500;
    }

    #show_log .login-form-title {
        margin: 0;
        font-size: 22px;
        line-height: 1.25;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -0.02em;
    }

    #show_log .rowput .input-wrapper {
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
    }

    #show_log .rowput .form-control.logpadding {
        height: 52px;
        border: 0;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    #show_log .rowput .input-icon-left {
        margin-left: 12px;
    }

    #show_log .submitlogin {
        width: 100%;
        height: 52px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    #show_log .login-social-divider span {
        font-size: 13px;
        font-weight: 600;
        color: #94a3b8;
    }

    #show_log .login-social-options {
        justify-content: center;
        gap: 14px;
    }

    #show_log .login-social-option .fbk-social-btn,
    #show_log .login-social-option .auth-google-signin-shell:not(.auth-google-signin-shell--native) {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
        padding: 0;
        border-radius: 50%;
        border: 1px solid #e2e8f0;
        justify-content: center;
    }

    #show_log .auth-pane-footer--split {
        justify-content: center;
        margin-top: 12px;
    }

    #show_log .for_sign_up .login-right-content,
    #show_log .for_forgot .login-right-content {
        padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    }

    .newAccountCredential {
        flex-direction: column;
        gap: var(--spacing-3);
        align-items: flex-start;
    }
}

/* Login modal refresh - email/mobile + social (design tokens) */
#show_log .my_account_dropdown.mysign.exploreul {
  max-width: min(var(--max-width-4xl), calc(100vw - var(--spacing-8)));
  border-radius: var(--border-radius-3xl);
  overflow: hidden;
}

#show_log .signdiv.auth-modal-split {
  padding: 0;
}

#show_log .login-left-image {
  display: flex;
  width: 42%;
  min-height: 0;
  align-self: stretch;
  background: #1c1c1c;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#show_log .login-left-image::before {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
}

#show_log .login-left-image::after {
  content: '';
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  animation: none;
  background: linear-gradient(180deg, rgb(12 12 13 / 81%) 0%, rgb(0 0 0 / 62%) 50%, rgba(0, 0, 0, 0.58) 100%);
  pointer-events: none;
}

#show_log .login-image-overlay {
  width: 100%;
  min-height: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
  padding: var(--spacing-5) var(--spacing-5);
}

#show_log .login-image-content {
  width: 100%;
  max-width: 20rem;
  padding: 0;
  color: var(--color-white);
  text-align: left;
}

#show_log .login-image-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: 3px var(--spacing-2);
  margin-bottom: var(--spacing-2);
  border-radius: var(--border-radius-full);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  font-size: 0.65rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

#show_log .login-image-badge .bi {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.95);
}

#show_log .login-image-title {
  color: var(--color-white);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  margin: 0 0 var(--spacing-2);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

#show_log .login-image-lead {
  margin: 0 0 var(--spacing-3);
  font-size: var(--font-size-xs);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
  max-width: 18rem;
}

#show_log .login-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

#show_log .login-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  margin-bottom: 0;
  border-radius: var(--border-radius-lg);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  box-shadow: none;
}

#show_log .login-benefit-item:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
}

#show_log .login-benefit-item__icon {
  width: 1.85rem;
  height: 1.85rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-md);
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

#show_log .login-benefit-item__icon .bi {
  font-size: 0.85rem;
}

#show_log .login-benefit-item__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

#show_log .login-benefit-item__text strong {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.98);
  line-height: 1.25;
}

#show_log .login-benefit-item__text span {
  font-size: 0.68rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
}

#show_log .login-image-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-3);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

#show_log .login-image-foot__pill {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  min-height: 2.75rem;
  border-radius: var(--border-radius-lg);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, border-color 0.2s ease;
}

#show_log .login-image-foot__pill:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
}

#show_log .login-image-foot__pill-icon {
  width: 1.85rem;
  height: 1.85rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-md);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#show_log .login-image-foot__pill-icon .bi {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1;
}

#show_log .login-image-foot__pill-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.94);
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* Legacy list item styles — keep for any older markup */
#show_log .login-benefits-list li:not(.login-benefit-item) {
  display: flex;
  align-items: start;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  text-align: left;
  margin-bottom: var(--spacing-4);
}

#show_log .login-benefits-list li:not(.login-benefit-item) i {
  margin-top: var(--border-width-thin);
  width: var(--spacing-8);
  height: var(--spacing-8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-full);
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  flex-shrink: 0;
}

#show_log .login-right-content {
  width: 100%;
  max-width: 100%;
  background: var(--color-bg-primary);
  padding: var(--spacing-6) var(--spacing-5);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

/* Narrow centered column for login + forgot (register stays full width for two-column fields) */
#show_log .insigndiv.for_sign_in .login-right-content > .ritpul,
#show_log .actual_forgot.for_forgot .login-right-content > .ritpul {
  width: 100%;
  max-width: min(26rem, 100%);
  margin-inline: auto;
  padding-left: var(--spacing-0);
  padding-right: var(--spacing-0);
}

#show_log .actual_forgot.for_forgot .ritpul--stacked .rowput {
  margin-bottom: var(--spacing-5);
}

#show_log .actual_forgot.for_forgot .ritpul--stacked .submitlogin {
  margin-top: var(--spacing-2);
}

#show_log .actual_forgot.for_forgot #recover-title-wrapper {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
  text-align: left;
}

#show_log .login-form-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

#show_log .login-form-subtitle {
  font-size: var(--font-size-sm);
}

#show_log .rowput {
  margin-bottom: var(--spacing-1);
}

#show_log .rowput .form-control {
  height: calc(var(--spacing-12) + var(--spacing-1));
  font-size: var(--font-size-base);
}

#show_log .rowput .form-control.logpadding {
  transition: none;
}

#show_log .submitlogin {
  min-height: var(--button-height-xl);
  font-size: var(--font-size-base);
  border-radius: var(--border-radius-xl);
  letter-spacing: var(--letter-spacing-wider);
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  background-color: var(--color-info);
  background-image: linear-gradient(135deg, var(--gradient-blue-start) 0%, var(--gradient-blue-mid) 50%, var(--gradient-blue-end) 100%);
  box-shadow: 0 var(--spacing-2) var(--spacing-5) var(--shadow-blue-default),
              0 var(--spacing-1) var(--spacing-2) color-mix(in srgb, var(--color-info-dark) var(--opacity-20), transparent);
}

#show_log .login-social-divider {
  margin: var(--spacing-5) 0 var(--spacing-4);
  text-align: center;
  position: relative;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

#show_log .login-social-divider::before,
#show_log .login-social-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34%;
  height: var(--border-width-thin);
  background: var(--border-color-light);
}

#show_log .login-social-divider::before {
  left: 0;
}

#show_log .login-social-divider::after {
  right: 0;
}

#show_log .login-social-options {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  width: 100%;
}

#show_log .login-social-option {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

#show_log .login-social-option > * {
  width: 100%;
}

#show_log .login-social-options .fbk-social-btn,
#show_log .login-social-options a.logspecify,
#show_log .login-social-options .auth-google-signin-shell:not(.auth-google-signin-shell--native) {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  width: 100% !important;
  min-height: var(--button-height-lg, 44px);
  margin: 0 !important;
  padding: var(--spacing-3) var(--spacing-4) !important;
  border: var(--border-width-thin) solid var(--border-color-medium) !important;
  border-radius: var(--border-radius-lg) !important;
  background: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-tight) !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-colors), var(--transition-shadow), var(--transition-transform);
  box-sizing: border-box;
}

#show_log .login-social-options .fbk-social-btn--visual {
  pointer-events: none;
  user-select: none;
}

#show_log .login-social-options .fbk-social-btn .bi,
#show_log .login-social-options a.logspecify .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-md, 20px);
  height: var(--icon-size-md, 20px);
  font-size: var(--icon-size-md, 20px);
  line-height: 1;
  flex-shrink: 0;
}

#show_log .login-social-options .fbk-social-btn--facebook .bi {
  color: #1877f2;
}

#show_log .login-social-options .fbk-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-md, 20px);
  height: var(--icon-size-md, 20px);
  flex-shrink: 0;
}

#show_log .login-social-options .fbk-social-icon svg {
  display: block;
  width: var(--icon-size-md, 20px);
  height: var(--icon-size-md, 20px);
}

#show_log .login-social-options .auth-google-signin-shell--native {
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height-lg, 44px);
  overflow: visible !important;
  position: static !important;
}

#show_log .login-social-options .auth-google-signin-shell--native .auth-google-btn-mount {
  position: static;
  inset: auto;
  z-index: auto;
  width: 100% !important;
  min-height: var(--button-height-lg, 44px);
  margin: 0;
  padding: 0;
  opacity: 1 !important;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

#show_log .login-social-options .auth-google-signin-shell--native .auth-google-btn-mount iframe,
#show_log .login-social-options .auth-google-signin-shell--native .auth-google-btn-mount > div,
#show_log .login-social-options .auth-google-signin-shell--native .auth-google-btn-mount .nsm7Bb-HzV7m-LgbsSe {
  opacity: 1 !important;
  margin: 0 auto !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 100% !important;
  pointer-events: auto !important;
}

.booklogin .auth-google-signin-shell,
.fbk-signin-social .auth-google-signin-shell {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  width: 100% !important;
  min-height: var(--button-height-lg, 44px);
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: var(--border-radius-lg) !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
}

.booklogin .auth-google-signin-shell .fbk-social-btn--visual,
.fbk-signin-social .auth-google-signin-shell .fbk-social-btn--visual {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  width: 100% !important;
  min-height: var(--button-height-lg, 44px);
  margin: 0 !important;
  padding: var(--spacing-3) var(--spacing-4) !important;
  border: var(--border-width-thin) solid var(--border-color-medium) !important;
  border-radius: var(--border-radius-lg) !important;
  background: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-tight) !important;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  user-select: none;
}

.booklogin .auth-google-btn-mount,
.fbk-signin-social .auth-google-btn-mount {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
}

.booklogin .auth-google-btn-mount iframe,
.booklogin .auth-google-btn-mount > div,
.booklogin .auth-google-btn-mount .nsm7Bb-HzV7m-LgbsSe,
.fbk-signin-social .auth-google-btn-mount iframe,
.fbk-signin-social .auth-google-btn-mount > div,
.fbk-signin-social .auth-google-btn-mount .nsm7Bb-HzV7m-LgbsSe {
  opacity: 0.001 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 100% !important;
  pointer-events: auto !important;
}

#show_log .login-social-options .g_id_signin,
#show_log .login-social-options #g_id_onload {
  display: none !important;
}

#show_log .login-social-options #fb-root,
#show_log .login-social-options #fb_app_id {
  display: none !important;
  height: 0;
  overflow: hidden;
}

#show_log .login-social-options .fbk-social-btn:hover,
#show_log .login-social-options a.logspecify:hover,
#show_log .login-social-options .auth-google-signin-shell:hover .fbk-social-btn--visual {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background: var(--color-bg-primary) !important;
}

#show_log .login-social-options .fbk-social-btn--facebook:hover {
  border-color: color-mix(in srgb, #1877f2 45%, var(--border-color-medium)) !important;
  background: color-mix(in srgb, #1877f2 6%, var(--color-bg-primary)) !important;
}

#show_log .login-social-options .auth-google-signin-shell:hover .fbk-social-btn--visual {
  border-color: color-mix(in srgb, #ea4335 35%, var(--border-color-medium)) !important;
  background: color-mix(in srgb, #4285f4 5%, var(--color-bg-primary)) !important;
}

@media (max-width: 480px) {
  #show_log .login-social-options {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  #show_log .login-social-option {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* Login OTP step: hide email row (JS); Change + Resend on one row */
#show_log .login-otp-secondary-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  margin-top: var(--spacing-3);
  width: 100%;
  flex-wrap: wrap;
}

#show_log .login-otp-secondary-row .login-otp-change-link {
  flex: 0 1 auto;
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: normal;
}

#show_log .login-submit-otp-slot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

/* Compact “Resend code” — light grey secondary (design tokens, not primary gradient) */
#show_log .login-submit-otp-slot .submitlogin {
  width: auto;
  max-width: none;
  min-height: 0;
  margin-top: 0;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-wide);
  border-radius: var(--border-radius-lg);
  color: var(--color-text-primary);
  background-color: var(--color-bg-secondary);
  background-image: none;
  border: var(--border-width-thin) solid var(--border-color-medium);
  box-shadow: var(--shadow-xs);
}

#show_log .login-submit-otp-slot .submitlogin:hover {
  background-color: var(--color-bg-tertiary);
  border-color: var(--border-color-dark);
}

#show_log .login-submit-otp-slot .submitlogin:active {
  box-shadow: var(--shadow-inner);
}

#show_log .login-submit-otp-slot .submitlogin:focus-visible {
  outline: var(--border-width-medium) solid var(--color-text-secondary);
  outline-offset: var(--spacing-1);
}

#show_log .login-step1-continue-wrap {
  margin-bottom: 0;
}

/* Register pane: stacked full-width fields (no two-column float) */
#show_log .newacount_div .ritpul form > #register_details_block > .rowput,
#show_log .newacount_div .ritpul form > #register_otp_section > .rowput {
  width: 100%;
  float: none;
  clear: both;
  padding-left: var(--spacing-0);
  padding-right: var(--spacing-0);
  margin-bottom: var(--spacing-3);
}

#show_log .newacount_div .phone-input-group {
  padding-left: var(--spacing-0) !important;
  padding-right: var(--spacing-0) !important;
}

#show_log .newacount_div .rowput .input-icon-left {
  left: var(--spacing-4);
}

/* Register form: loading state (CSS spinner + label; replaces legacy GIF) */
#show_log #register_user_form .auth-register-loader {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-3);
  border-radius: var(--border-radius-xl);
  background: color-mix(in srgb, var(--color-info) 7%, var(--color-bg-primary));
  border: var(--border-width-thin) solid color-mix(in srgb, var(--color-info) 20%, var(--border-color-light));
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-black) 6%, transparent);
}

#show_log #register_user_form .auth-register-loader:not(.d-none) {
  display: flex !important;
}

#show_log #register_user_form .auth-register-loader__spinner {
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  border-radius: var(--border-radius-full);
  border: 2px solid color-mix(in srgb, var(--color-info) 25%, transparent);
  border-top-color: var(--color-info);
  animation: auth-register-loader-spin 0.65s linear infinite;
}

#show_log #register_user_form .auth-register-loader__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
}

@keyframes auth-register-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Login form: loading state — inline spinner + label only (no panel) */
#show_log #login_auth_loading_image .auth-login-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-2);
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

#show_log #login_auth_loading_image .auth-login-loader__spinner {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: var(--border-radius-full);
  border: 2px solid color-mix(in srgb, var(--color-info) 25%, transparent);
  border-top-color: var(--color-info);
  animation: auth-register-loader-spin 0.65s linear infinite;
}

#show_log #login_auth_loading_image .auth-login-loader__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
}

#show_log #register_user_form .register-form-top-feedback {
  margin: 0 0 var(--spacing-4);
  padding: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-medium);
  color: var(--color-danger-primary);
  text-align: center;
  width: 100%;
}

#show_log #register_user_form .register-form-bottom-feedback {
  margin-top: var(--spacing-3);
  margin-bottom: 0;
  text-align: center;
  width: 100%;
}

#show_log #register_user_form .register-otp-sent-hint {
  margin: 0 0 var(--spacing-4);
  padding: 0;
  max-width: min(26rem, 100%);
  margin-inline: auto;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  text-align: center;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  box-shadow: none;
}

#show_log #register_user_form .register-otp-sent-hint__email {
  font-weight: var(--font-weight-semibold);
  color: var(--color-info);
}

/* Register validation / status: inline notice (replaces bulky Bootstrap alerts) */
#show_log .auth-register-notice {
  box-sizing: border-box;
  width: 100%;
  margin-inline: auto;
  margin-bottom: var(--spacing-5);
  padding: var(--spacing-2);
  border-radius: var(--border-radius-xl);
  border: var(--border-width-thin) solid var(--border-color-light);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  text-align: left;
  color: var(--color-text-info);
  background: var(--color-bg-primary);
}

#show_log .auth-register-notice__row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
}

#show_log .auth-register-notice__icon {
  font-size: var(--font-size-xl);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

#show_log .auth-register-notice__body {
  flex: 1;
  min-width: 0;
}

#show_log .auth-register-notice__accent {
  font-weight: var(--font-weight-semibold);
}

#show_log .auth-register-notice--info {
  background: color-mix(in srgb, var(--color-info) 11%, var(--color-bg-primary));
  border-color: color-mix(in srgb, var(--color-info) 22%, var(--border-color-light));
  border-left: var(--border-width-thick) solid var(--color-info);
}

#show_log .auth-register-notice--info .auth-register-notice__icon {
  color: var(--color-info-dark);
}

#show_log .auth-register-notice--info .auth-register-notice__accent {
  color: var(--color-info-dark);
}

#show_log .auth-register-notice--success {
  background: color-mix(in srgb, var(--color-success-primary) 12%, var(--color-bg-primary));
  border-color: color-mix(in srgb, var(--color-success-primary) 25%, var(--border-color-light));
  border-left: var(--border-width-thick) solid var(--color-success-primary);
}

#show_log .auth-register-notice--success .auth-register-notice__icon {
  color: var(--color-success-primary);
}

#show_log .auth-register-notice--success .auth-register-notice__accent {
  color: var(--color-success-obsidian);
}

#show_log .auth-register-notice--error {
  background: color-mix(in srgb, var(--color-danger-primary) 10%, var(--color-bg-primary));
  border-color: color-mix(in srgb, var(--color-danger-primary) 22%, var(--border-color-light));
  border-left: var(--border-width-thick) solid var(--color-danger-primary);
}

#show_log .auth-register-notice--error .auth-register-notice__icon {
  color: var(--color-danger-primary);
}

#show_log .auth-register-notice--error .auth-register-notice__body {
  color: var(--color-text-primary);
}

/* Single modal: shared hero + one column where login / register / forgot fade */
#show_log .login-auth-column {
  flex: 1;
  min-width: 0;
  position: relative;
  background: var(--color-bg-primary);
}

#show_log .login-auth-panes {
  position: relative;
  width: 100%;
  min-height: calc(var(--spacing-10) * 8);
}

#show_log .login-auth-panes > .for_sign_in,
#show_log .login-auth-panes > .for_sign_up,
#show_log .login-auth-panes > .for_forgot {
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

#show_log .login-auth-panes > .for_sign_in .login-right-content,
#show_log .login-auth-panes > .for_sign_up .login-right-content,
#show_log .login-auth-panes > .for_forgot .login-right-content {
  width: 100%;
  min-height: auto;
}

#show_log .auth-pane-footer {
  margin-top: var(--spacing-5);
  padding-top: var(--spacing-4);
  border-top: var(--border-width-thin) solid var(--border-color-light);
}

#show_log .auth-pane-footer--split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  width: 100%;
  max-width: min(26rem, 100%);
  margin-inline: auto;
}

#show_log .auth-footer-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-info);
  text-decoration: none;
  transition: none;
}

#show_log .auth-footer-link:hover {
  color: var(--color-info);
  text-decoration: underline;
}

#show_log .auth-footer-link--secondary {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

#show_log .auth-footer-link--secondary:hover {
  color: var(--color-text-secondary);
  text-decoration: underline;
}

#show_log .auth-footer-link--block {
  display: block;
  width: 100%;
  max-width: min(26rem, 100%);
  margin-inline: auto;
  margin-top: var(--spacing-5);
  padding-top: var(--spacing-1);
  text-align: center;
}

#show_log .open_sign_in {
  float: none;
  clear: both;
}

/* No brand-orange underline bar (global .open_sign_in uses primary ::after on hover) */
#show_log .open_sign_in::after,
#show_log .open_sign_in:hover::after {
  display: none;
  content: none;
}

#show_log .login-form-header .login-form-title {
  position: relative;
  padding-bottom: var(--spacing-3);
}

#show_log .login-form-header {
  max-width: min(26rem, 100%);
  margin-inline: auto;
  margin-bottom: var(--spacing-1);
}

#show_log .login-form-subtitle {
  max-width: min(26rem, 100%);
  margin-inline: auto;
  line-height: var(--line-height-relaxed);
}

#show_log .login-form-header .login-form-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--spacing-14);
  height: var(--border-width-medium);
  border-radius: var(--border-radius-full);
  background: linear-gradient(90deg, var(--color-info) 0%, var(--color-info-light) 100%);
}

/* #show_log — inputs, phone blocks, T&C: blue focus (no brand orange/yellow) */
#show_log .rowput .form-control.logpadding:hover,
#show_log .newacount_div .rowput .form-control.logpadding:hover {
  border-color: color-mix(in srgb, var(--color-info) 40%, var(--border-color-light));
  box-shadow: var(--shadow-sm);
}

#show_log .rowput .form-control.logpadding:focus,
#show_log .newacount_div .rowput .form-control.logpadding:focus {
  border-color: var(--color-info);
  box-shadow:
    0 0 0 var(--spacing-1) color-mix(in srgb, var(--color-info) var(--opacity-20), transparent),
    0 var(--spacing-1) var(--spacing-3) color-mix(in srgb, var(--color-info) var(--opacity-15), transparent);
  transform: none;
}

/* .field-feedback invalid beats blue focus in auth modal */
#show_log .field-feedback .form-control.logpadding.invalid-ip,
#show_log .field-feedback .form-control.logpadding.invalid-ip:hover,
#show_log .field-feedback .form-control.logpadding.invalid-ip:focus {
  border-color: var(--color-danger-primary);
  box-shadow: 0 0 0 var(--spacing-1) color-mix(in srgb, var(--color-danger-primary) var(--opacity-20), transparent);
}

#show_log .field-feedback.rowput:focus-within:has(.form-control.invalid-ip) .input-icon-left {
  color: var(--color-info);
}

#show_log .rowput:focus-within .input-icon-left,
#show_log .newacount_div .rowput:focus-within .input-icon-left {
  color: var(--color-info);
  transform: translateY(-50%);
}

#show_log .phone-input-group:focus-within .phone-input-wrapper {
  border-color: var(--color-info);
  box-shadow:
    0 0 0 var(--spacing-1) color-mix(in srgb, var(--color-info) var(--opacity-15), transparent),
    0 var(--spacing-1) var(--spacing-3) color-mix(in srgb, var(--color-info) var(--opacity-10), transparent);
  transform: none;
}

#show_log .phone-input-wrapper {
  transition: none;
  overflow: visible;
}

#show_log .phone-input-wrapper:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--color-info) 45%, var(--border-color-light));
}

#show_log .phone-input-group:focus-within .country-code-icon,
#show_log .phone-input-group:focus-within .mobile-icon,
#show_log .phone-input-group:focus-within .select-arrow-icon,
#show_log .phone-input-group:focus-within .country-code-dropdown-toggle:not(.invalid-ip)::after {
  color: var(--color-info);
}

#show_log .checkbox-text a {
  color: var(--color-info);
  transition: none;
}

#show_log .checkbox-text a::after {
  display: none;
}

#show_log .checkbox-text a:hover {
  color: var(--color-info);
  text-decoration: underline;
}

#show_log .modern-checkbox:checked + .modern-checkbox-label .checkbox-custom {
  background-color: var(--color-info);
  background-image: linear-gradient(135deg, var(--gradient-blue-start) 0%, var(--gradient-blue-mid) 50%, var(--gradient-blue-end) 100%);
  border-color: var(--color-info-dark);
  box-shadow: 0 var(--spacing-1) var(--spacing-2) var(--shadow-blue-default);
}

#show_log .modern-checkbox:focus + .modern-checkbox-label .checkbox-custom {
  box-shadow: 0 0 0 var(--spacing-1) color-mix(in srgb, var(--color-info) var(--opacity-20), transparent);
}

#show_log .modern-checkbox-label:hover .checkbox-custom {
  border-color: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
}

#show_log .modern-checkbox:checked + .modern-checkbox-label:hover .checkbox-custom {
  box-shadow: 0 var(--spacing-1) var(--spacing-2) var(--shadow-blue-default);
}

#show_log #login_change_identifier.btn-link,
#show_log #register_otp_back.btn-link {
  color: var(--color-info);
}

#show_log #login_change_identifier.btn-link:hover,
#show_log #register_otp_back.btn-link:hover {
  color: var(--color-info);
  text-decoration: underline;
}

@media (max-width: 991px) {
  #show_log .my_account_dropdown.mysign.exploreul {
    max-width: 92%;
  }

  #show_log .signdiv.auth-modal-split {
    flex-direction: column;
  }

  /* Keep shared benefits visible on small screens (compact strip) */
  #show_log .login-left-image {
    display: flex;
    width: 100%;
    min-height: auto;
    max-height: none;
  }

  #show_log .login-image-overlay {
    padding: var(--spacing-5);
  }

  #show_log .login-image-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-3);
  }

  #show_log .login-image-lead {
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-xs);
  }

  #show_log .login-benefits-list {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  #show_log .login-benefit-item {
    padding: var(--spacing-2) var(--spacing-3);
  }

  #show_log .login-benefit-item__icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  #show_log .login-image-foot {
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-2);
  }

  #show_log .login-auth-panes {
    min-height: calc(var(--spacing-12) * 6 + var(--spacing-4));
  }

  #show_log .login-right-content {
    width: 100%;
    padding: var(--spacing-7) var(--spacing-5);
  }

  #show_log .login-form-title {
    font-size: var(--font-size-2xl);
  }
}
.reglog {display: flex; align-items: center; gap: var(--spacing-2);}
.userimage{ width:30px; height:30px; border-radius:50%; overflow:hidden;}
.userimage img{ width:100%; height:100%; object-fit:cover;}

/* Mobile login bottom sheet — final overrides (after shared login modal rules) */
@media (max-width: 767px) {
  body.index_page.modal-open .modal-backdrop {
    z-index: 10049 !important;
  }

  body.index_page #show_log,
  body.index_page #show_log.show {
    z-index: 10050 !important;
  }

  body.index_page:has(#show_log.show) .home-mobile-bottom-nav {
    display: none !important;
  }

  #show_log {
    --bs-modal-bg: var(--color-bg-overlay);
  }

  #show_log .modal-dialog {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    display: block !important;
    align-items: stretch !important;
    transform: translateY(100%) !important;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  #show_log.show .modal-dialog,
  #show_log.modal.show .modal-dialog {
    transform: translateY(0) !important;
  }

  #show_log .modal-content {
    border: 0 !important;
    border-radius: var(--border-radius-2xl) var(--border-radius-2xl) 0 0 !important;
    box-shadow: var(--shadow-lg) !important;
    max-height: none !important;
    overflow: hidden !important;
    background: var(--color-bg-primary) !important;
  }

  #show_log .modal-body {
    padding: 0 !important;
    overflow-y: auto !important;
    max-height: none !important;
  }

  #show_log .my_account_dropdown.mysign.exploreul {
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #show_log .login-left-image {
    display: none !important;
  }

  #show_log .signdiv.auth-modal-split {
    display: block !important;
    flex-direction: column !important;
  }

  #show_log .login-auth-panes {
    min-height: 0 !important;
  }

  #show_log .login-right-content {
    width: 100% !important;
    max-width: none !important;
    padding: var(--spacing-5) var(--spacing-4) calc(var(--spacing-5) + env(safe-area-inset-bottom, 0px)) !important;
  }

  #show_log .log_close {
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3);
    width: var(--spacing-8);
    height: var(--spacing-8);
    border-radius: var(--border-radius-full);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    line-height: 1;
    z-index: 5;
    border: 0;
  }

  #show_log .login-form-header {
    margin: 0 40px var(--spacing-5) 0;
    text-align: left;
    max-width: none;
    margin-inline: 0;
  }

  #show_log .login-form-subtitle {
    margin: 0 0 var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    max-width: none;
    margin-inline: 0;
  }

  #show_log .login-form-title {
    position: relative;
    margin: 0;
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
    padding-bottom: var(--spacing-3);
  }

  #show_log .login-form-header .login-form-title::after,
  #show_log .login-form-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    transform: none;
    width: var(--spacing-8);
    height: var(--border-width-medium);
    margin-top: 0;
    border-radius: var(--border-radius-full);
    background: linear-gradient(90deg, var(--color-info) 0%, var(--color-info-light) 100%);
  }

  #show_log .rowput .input-wrapper {
    border: var(--border-width-thin) solid var(--border-color-light);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--color-bg-primary);
  }

  #show_log .rowput .form-control.logpadding {
    height: calc(var(--spacing-12) + var(--spacing-1));
    border: 0 !important;
    box-shadow: none !important;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: normal;
    text-transform: none;
  }

  #show_log .rowput .input-icon-left {
    margin-left: var(--spacing-3);
    color: var(--color-text-muted);
  }

  #show_log .submitlogin {
    width: 100% !important;
    height: calc(var(--spacing-12) + var(--spacing-1)) !important;
    min-height: calc(var(--spacing-12) + var(--spacing-1)) !important;
    margin-top: var(--spacing-4) !important;
    border: 0 !important;
    border-radius: var(--border-radius-lg) !important;
    background-color: var(--color-info) !important;
    background-image: linear-gradient(135deg, var(--gradient-blue-start) 0%, var(--gradient-blue-mid) 50%, var(--gradient-blue-end) 100%) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    box-shadow: 0 var(--spacing-2) var(--spacing-5) var(--shadow-blue-default) !important;
  }

  #show_log .login-social-divider {
    margin: var(--spacing-4) 0 var(--spacing-3);
  }

  #show_log .login-social-divider span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: lowercase;
  }

  #show_log .login-social-options {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--spacing-3) !important;
    margin-bottom: var(--spacing-2) !important;
  }

  #show_log .login-social-option {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  #show_log .login-social-option > * {
    width: auto !important;
  }

  #show_log .login-social-options .fbk-social-btn,
  #show_log .login-social-options a.logspecify {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-radius: var(--border-radius-full) !important;
    border: var(--border-width-thin) solid var(--border-color-light) !important;
    background: var(--color-bg-primary) !important;
    box-shadow: none !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  #show_log .login-social-options .fbk-social-btn span,
  #show_log .login-social-options a.logspecify span {
    display: none !important;
  }

  #show_log .login-social-options .fbk-social-btn .bi,
  #show_log .login-social-options a.logspecify .bi {
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
  }

  #show_log .login-social-options .auth-google-signin-shell--native {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: var(--border-radius-full) !important;
    overflow: hidden !important;
    border: var(--border-width-thin) solid var(--border-color-light) !important;
    background: var(--color-bg-primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #show_log .login-social-options .auth-google-signin-shell--native .auth-google-btn-mount,
  #show_log .login-social-options .auth-google-signin-shell--native .auth-google-btn-mount > div,
  #show_log .login-social-options .auth-google-signin-shell--native .auth-google-btn-mount iframe {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 auto !important;
  }

  #show_log .auth-pane-footer--split {
    justify-content: center !important;
    margin-top: var(--spacing-3) !important;
    margin-bottom: 0 !important;
  }

  #show_log .auth-pane-footer--split .auth-footer-link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-info);
  }

  #show_log .for_sign_up .login-right-content,
  #show_log .for_forgot .login-right-content {
    padding: var(--spacing-5) var(--spacing-4) calc(var(--spacing-5) + env(safe-area-inset-bottom, 0px)) !important;
  }
}