/* Mobile Styles */
@media screen and (max-width: 768px) {
    body {
        background-color: #202630;
    }

    /* Header Layout */
    .header {
        background-color: #202630;
        padding: 0 16px;
        height: 56px; /* Slightly shorter on mobile usually */
        position: relative;
        z-index: 100;
        border-bottom: none; /* Remove border to match seamless background */
    }

    .header-container {
        justify-content: space-between;
    }

    /* Hide Desktop Elements */
    .nav-links,
    .header-actions {
        display: none !important;
    }

    /* Mobile Header Elements */
    .mobile-header-right {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .mobile-register-btn {
        background-color: #FCD535;
        color: #181A20;
        font-size: 14px;
        font-weight: 500;
        padding: 6px 12px;
        border-radius: 4px;
        text-decoration: none;
        line-height: 1.5;
    }

    .mobile-register-btn:hover {
        background-color: #F0B90B;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #EAECEF;
        cursor: pointer;
    }

    /* Main Content Adjustments */
    .main-content {
        padding: 24px 16px;
    }

    .verification-container {
        padding: 0;
    }

    .verify-header-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
        margin-bottom: 16px;
    }

    .verify-logo {
        width: 48px;
        height: 48px;
    }

    .page-title {
        font-size: 24px;
        line-height: 32px;
        text-align: center;
    }

    .page-subtitle {
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        margin-bottom: 32px;
    }

    /* Search Section Mobile */
    .search-section {
        flex-direction: column;
        gap: 12px;
        background: transparent;
        border: none;
        padding: 0;
    }

    .search-dropdown {
        order: 1;
        width: 100%;
        height: 48px;
        background-color: var(--input-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px; /* Rounded corners as requested */
        justify-content: space-between;
        padding: 0 12px;
    }

    /* Mobile Bottom Sheet Dropdown */
    .search-dropdown-menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-top: 0;
        background-color: #202630;
        border-radius: 16px 16px 0 0;
        padding: 12px 0 32px 0; /* Extra padding for bottom safe area */
        max-height: 70vh;
        overflow-y: auto;
        z-index: 2001;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
        border: none;
        animation: slideUp 0.3s ease-out;
    }

    .search-dropdown-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 2000;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .search-dropdown-overlay.show {
        display: block;
        opacity: 1;
    }

    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .search-dropdown-item {
        padding: 16px 24px;
        font-size: 16px;
        border-bottom: none;
    }

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

    /* Increased specificity and forced height for the input wrapper */
    .search-section .input-wrapper {
        order: 2;
        width: 100%;
        height: 50px !important;
        min-height: 50px !important;
        background-color: var(--input-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px; /* Rounded corners */
    }

    .search-btn {
        order: 4;
        width: 100%;
        height: 48px;
        border-radius: 8px;
        margin-left: 0; /* Reset desktop margin */
    }

    /* Disclaimer Box */
    .disclaimer-box {
        order: 3;
        flex-direction: row;
        align-items: flex-start;
        padding: 12px;
        font-size: 12px;
        line-height: 16px;
        background-color: #35352c;
        border-radius: 8px;
        margin-bottom: 0; /* Remove large desktop margin */
    }

    /* Safety Section Mobile */
    .safety-section-telegram {
        flex-direction: column;
        padding: 0 5px 0; /* Reduced bottom padding to 0 */
        margin-top: 12px; /* Small margin */
        margin-bottom: 0; /* Override desktop 80px margin */
        gap: 24px;
    }

    .safety-image {
        width: 100%;
        max-width: 240px;
        margin: 0 auto;
    }

    .safety-content {
        text-align: left;
        padding-left: 0;
    }

    .safety-title {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .safety-text {
        font-size: 13px;
        line-height: 20px;
        color: #B7BDC6; /* Slightly lighter text for better readability on dark bg */
    }

    /* Bottom Safety Grid */
    .safety-section-bottom {
        margin-top: 15px;
    }

    .safety-section-bottom .safety-title {
        margin-bottom: 16px;
    }

    .safety-grid {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 0; /* Reduced gap significantly */
    }

    .safety-item {
        padding: 2px 0; /* Reduced vertical padding to bring items closer */
        gap: 4px; /* Reduced gap between icon and text */
    }

    /* Footer Mobile */
    .footer {
        padding: 24px 16px;
        background-color: #202630 !important; /* Ensure background matches body */
    }

    .footer-container {
        flex-direction: column;
        gap: 32px;
    }

    /* Reorder: Links (Right) first, then Community (Left) */
    .footer-right {
        order: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .footer-left {
        order: 2;
        width: 100%;
    }

    .footer-section-title {
        font-size: 16px;
        margin-bottom: 16px;
        text-align: left;
    }

    .social-icons {
        display: flex;
        flex-wrap: wrap;
        gap: 24px; /* Adjust gap to fit icons */
        margin-bottom: 32px;
        justify-content: flex-start;
    }

    .social-icon {
        width: 24px;
        height: 24px;
        color: #eaecef;
    }

    .footer-settings {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 24px;
    }

    .setting-item {
        font-size: 14px;
        color: #EAECEF; /* Brighter text for mobile */
    }

    .theme-toggle {
        width: auto; /* Allow it to shrink */
        gap: 8px;
    }

    /* Footer Links (Accordion Style) */
    /* .footer-right styles are already defined above with order: 1 */

    .footer-col {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
    }

    .footer-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 0; /* Reset desktop margin */
        padding: 0;
    }

    /* Style the Headers to look like accordion items */
    .footer-col h4,
    .footer-group h4 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 12px 0;
        margin: 0;
        font-size: 16px;
        font-weight: 400;
        color: #EAECEF;
        cursor: pointer;
    }

    /* Add Plus Icon */
    .footer-col h4::after,
    .footer-group h4::after {
        content: "+";
        font-size: 20px;
        font-weight: 300;
        color: #EAECEF;
    }

    /* Hide Links initially (Collapsed state) */
    .footer-col a,
    .footer-group a {
        display: none;
        padding: 8px 0 8px 32px; /* Indent to align with 2nd char of title (approx 32px) */
        color: #707A8A;
        font-size: 14px;
        text-decoration: none;
    }

    /* Expanded State */
    .footer-col.active > a,
    .footer-group.active > a {
        display: block;
    }

    /* Rotate Icon when active */
    .footer-col.active > h4::after,
    .footer-group.active > h4::after {
        content: "-"; /* Or rotate the plus */
        transform: rotate(0deg); /* If using rotation */
    }
    
    /* Footer Bottom Bar */
    .footer-bottom-bar {
        display: block !important;
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid #2B3139;
        text-align: center;
    }

    .footer-bottom-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        color: #707A8A;
        font-size: 12px;
    }

    .footer-bottom-container a {
        color: #707A8A;
        text-decoration: none;
    }

    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: #202630;
        z-index: 2000;
        display: none; /* Toggled by JS */
        flex-direction: column;
        overflow-y: auto;
    }

    .mobile-menu-overlay.active {
        display: flex;
    }

    .mobile-menu-header {
        padding: 16px;
        display: flex;
        justify-content: flex-end;
    }

    .mobile-menu-close {
        cursor: pointer;
        padding: 8px;
    }

    .mobile-menu-content {
        flex: 1;
        padding: 0 24px 48px;
    }

    .mobile-auth-buttons {
        display: flex;
        gap: 16px;
        margin-bottom: 24px;
    }

    .mobile-auth-btn {
        flex: 1;
        text-align: center;
        padding: 10px 0;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
    }

    .mobile-auth-btn.login-btn {
        background-color: #2B3139;
        color: #EAECEF;
    }

    .mobile-auth-btn.register-btn {
        background-color: #FCD535;
        color: #181A20;
    }

    .mobile-search-container {
        margin-bottom: 24px;
    }

    .mobile-search-input-wrapper {
        background-color: #2B3139;
        border-radius: 24px;
        height: 40px;
        display: flex;
        align-items: center;
        padding: 0 12px;
    }

    .mobile-search-input-wrapper input {
        background: transparent;
        border: none;
        color: #EAECEF;
        font-size: 14px;
        width: 100%;
        margin-left: 8px;
        outline: none;
    }
    
    .mobile-search-input-wrapper input::placeholder {
        color: #5E6673;
    }

    .mobile-nav-list {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .mobile-nav-item {
        color: #EAECEF;
        text-decoration: none;
        font-size: 16px;
        font-weight: 400;
    }

    /* For direct links */
    a.mobile-nav-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* For dropdown containers */
    div.mobile-nav-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    div.mobile-nav-item.has-dropdown {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .mobile-sub-menu {
        display: none;
        flex-direction: column;
        padding-left: 36px;
        margin-top: 24px;
        gap: 24px;
    }

    .mobile-nav-item.active .mobile-sub-menu {
        display: flex;
    }

    .mobile-arrow-icon {
        transition: transform 0.3s ease;
    }

    .mobile-nav-item.active .mobile-arrow-icon {
        transform: rotate(180deg);
    }

    .sub-menu-group {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .sub-menu-title {
        color: #5E6673;
        font-size: 14px;
        margin-bottom: -8px;
    }

    .sub-menu-item {
        color: #EAECEF;
        text-decoration: none;
        font-size: 16px;
        display: block;
    }

    .nav-item-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .yellow-dot {
        width: 6px;
        height: 6px;
        background-color: #FCD535;
        border-radius: 50%;
        display: inline-block;
    }

    .theme-toggle-btn {
        background-color: transparent;
        border-radius: 8px;
        padding: 2px;
        display: flex;
        align-items: center;
        gap: 2px;
        border: 1px solid #474D57;
        height: 32px; /* Match approximate text line-height/container */
        box-sizing: border-box;
    }
    
    .theme-icon-wrapper {
        width: 28px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        color: #848E9C;
        cursor: pointer;
    }

    .theme-icon-wrapper.active {
        background-color: #2B3139;
        color: #EAECEF;
    }

    .theme-icon-wrapper.active svg {
        fill: none; /* Reset fill if needed, or keep as is */
        stroke: #EAECEF;
    }

    .theme-toggle-btn svg {
        width: 16px;
        height: 16px;
    }

    .nav-icon-placeholder {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .mobile-menu-footer {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .menu-footer-link {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #EAECEF;
        text-decoration: none;
        font-size: 14px;
    }
}