/* Theme Name: AuTuLoniyo Theme URI: https://autuloniyo.com/ Author: AuTuL Gaming Description: Custom WordPress theme for AuTuL Gaming HUB and its gaming product catalog. Version: 4.7.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 Text Domain: autuloniyo License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html */ :root { --autul-bg: #050816; --autul-bg-alt: #0f172a; --autul-panel: #10213d; --autul-text: #ffffff; --autul-accent: #00e5ff; --autul-gold: #ffcc00; --autul-border: rgba(0, 229, 255, 0.22); } html { box-sizing: border-box; scroll-behavior: smooth; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; background: linear-gradient(180deg, var(--autul-bg) 0%, #08111f 100%); color: var(--autul-text); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; } img { display: block; max-width: 100%; height: auto; } a { color: var(--autul-accent); text-decoration: none; } a:hover, a:focus { color: var(--autul-gold); } #page { min-height: 100vh; display: flex; flex-direction: column; } /* ========================================================== AUTULONIYO UNIVERSAL HEADER & COMPACT NAVBAR (ALL PAGES) ========================================================== */ .site-header { background: linear-gradient(180deg, rgba(5, 12, 26, 0.98), rgba(8, 18, 36, 0.98)) !important; border-bottom: 2px solid rgba(0, 198, 255, 0.90) !important; box-shadow: 0 0 16px rgba(0, 190, 255, 0.24) !important; width: 100% !important; box-sizing: border-box !important; position: relative !important; z-index: 999 !important; } /* Desktop Header (min-width: 901px) */ @media (min-width: 901px) { .site-header { display: grid !important; grid-template-columns: minmax(260px, max-content) minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 28px !important; padding: 10px 32px !important; } .autul-shop-drawer-toggle { display: none !important; } .site-branding { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; text-align: left !important; } .custom-logo { display: block !important; max-width: 48px !important; height: auto !important; } .site-title { margin: 0 !important; line-height: 1 !important; } .site-title a { font-size: clamp(20px, 1.6vw, 26px) !important; font-weight: 900 !important; color: #ffcc00 !important; text-shadow: 0 0 16px rgba(255, 204, 0, 0.5) !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } .site-description { margin: 3px 0 0 !important; font-size: 10.5px !important; color: rgba(220, 240, 255, 0.85) !important; letter-spacing: 0.4px !important; } .main-navigation { margin: 0 !important; width: auto !important; } .main-navigation ul { display: flex !important; align-items: center !important; gap: 14px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .main-navigation li a { color: #dcf2ff !important; font-size: 13.5px !important; font-weight: 700 !important; padding: 6px 14px !important; border: 1px solid rgba(0, 229, 255, 0.28) !important; border-radius: 999px !important; background: rgba(12, 26, 52, 0.72) !important; transition: all 0.2s ease !important; } .main-navigation li a:hover, .main-navigation li.current-menu-item > a { color: #ffcc00 !important; border-color: #ffcc00 !important; box-shadow: 0 0 12px rgba(255, 204, 0, 0.35) !important; } .autul-header-shop-btn { display: inline-flex !important; align-items: center !important; padding: 7px 16px !important; font-size: 13px !important; font-weight: 800 !important; color: #050d1a !important; background: linear-gradient(135deg, #ffcc00, #ffb300) !important; border-radius: 8px !important; box-shadow: 0 0 14px rgba(255, 204, 0, 0.45) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } } /* Mobile Header (max-width: 900px) */ @media (max-width: 900px) { .site-header { display: grid !important; grid-template-columns: 46px minmax(0, 1fr) 46px !important; align-items: center !important; column-gap: 8px !important; min-height: 56px !important; height: auto !important; padding: 6px 12px !important; margin: 0 !important; } /* GLOWING COMPACT "A" LOGO ON MOBILE (IDENTICAL TO PC VIEW) */ .custom-logo-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } .custom-logo { display: block !important; max-width: 28px !important; max-height: 28px !important; width: auto !important; height: auto !important; margin: 0 !important; animation: constantLightning 0.5s infinite alternate ease-in-out !important; } /* HIDE THE UNNECESSARY "Primary Menu" BUTTON */ .menu-toggle, .main-navigation { display: none !important; } .site-branding { grid-column: 2 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 2px 8px !important; margin: 0 auto !important; padding: 0 !important; width: 100% !important; } .site-title { margin: 0 !important; line-height: 1 !important; } .site-title a { font-size: clamp(15px, 4.2vw, 19px) !important; letter-spacing: 0.04em !important; word-spacing: 0.08em !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; color: #ffcc00 !important; text-shadow: 0 0 12px rgba(255, 204, 0, 0.45) !important; font-weight: 900 !important; } .site-description { margin: 2px auto 0 !important; font-size: clamp(8px, 2.3vw, 10px) !important; line-height: 1.1 !important; color: rgba(230, 246, 255, 0.88) !important; white-space: nowrap !important; text-align: center !important; } /* SLEEK 3-LINE HAMBURGER TOGGLE */ .autul-shop-drawer-toggle { grid-column: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 4px !important; width: 40px !important; height: 40px !important; border-radius: 8px !important; border: 1px solid rgba(0, 229, 255, 0.45) !important; background: rgba(10, 25, 48, 0.85) !important; box-shadow: 0 0 10px rgba(0, 229, 255, 0.25) !important; cursor: pointer !important; padding: 0 !important; box-sizing: border-box !important; } .autul-shop-drawer-toggle span { display: block !important; width: 18px !important; height: 2px !important; border-radius: 999px !important; background: #00e5ff !important; box-shadow: 0 0 6px rgba(0, 229, 255, 0.6) !important; } .autul-header-shop-btn { display: none !important; } } /* User Account Icon Button (Universal) */ .autul-header-actions { display: flex !important; align-items: center !important; gap: 10px !important; } .autul-header-user-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; border: 1px solid rgba(0, 229, 255, 0.5) !important; background: rgba(10, 25, 48, 0.8) !important; color: #00e5ff !important; box-shadow: 0 0 10px rgba(0, 229, 255, 0.2) !important; overflow: hidden !important; text-decoration: none !important; transition: all 0.2s ease !important; } .autul-header-user-btn:hover { border-color: #ffcc00 !important; color: #ffcc00 !important; box-shadow: 0 0 14px rgba(255, 204, 0, 0.4) !important; } .autul-header-user-avatar { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* ========================================================== UNIVERSAL OFF-CANVAS SLIDE-IN DRAWER ========================================================== */ .autul-shop-drawer-backdrop { position: fixed !important; inset: 0 !important; background: rgba(3, 7, 18, 0.78) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; z-index: 99998 !important; opacity: 0; transition: opacity 0.3s ease !important; pointer-events: none; } .autul-shop-drawer-backdrop.is-open { opacity: 1 !important; pointer-events: auto !important; } .autul-shop-drawer { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: min(320px, 84vw) !important; background: linear-gradient(180deg, #071326 0%, #040914 100%) !important; border-right: 1px solid rgba(0, 229, 255, 0.35) !important; box-shadow: 10px 0 35px rgba(0, 0, 0, 0.65) !important; z-index: 99999 !important; transform: translateX(-110%); transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important; overflow-y: auto !important; display: none; } .autul-shop-drawer.is-open { transform: translateX(0) !important; display: block !important; } .autul-shop-drawer-shell { padding: 20px 18px 30px !important; display: flex !important; flex-direction: column !important; gap: 18px !important; } .autul-shop-drawer-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding-bottom: 14px !important; border-bottom: 1px solid rgba(0, 229, 255, 0.2) !important; } .autul-shop-drawer-title { margin: 0 !important; font-size: 16px !important; font-weight: 900 !important; color: #ffcc00 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .autul-shop-drawer-close { width: 32px !important; height: 32px !important; border-radius: 8px !important; border: 1px solid rgba(0, 229, 255, 0.35) !important; background: rgba(12, 26, 52, 0.8) !important; color: #00e5ff !important; font-size: 20px !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; } .autul-shop-drawer-nav ul, .autul-drawer-links { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } .autul-shop-drawer-nav li a, .autul-drawer-links li a { display: flex !important; align-items: center !important; padding: 12px 16px !important; border-radius: 10px !important; color: #dcf2ff !important; font-size: 14.5px !important; font-weight: 700 !important; background: rgba(12, 26, 52, 0.5) !important; border: 1px solid rgba(0, 229, 255, 0.16) !important; text-decoration: none !important; transition: all 0.2s ease !important; } .autul-shop-drawer-nav li a:hover, .autul-drawer-links li a:hover, .autul-drawer-links li a.is-active { color: #ffcc00 !important; background: rgba(0, 229, 255, 0.12) !important; border-color: rgba(255, 204, 0, 0.45) !important; transform: translateX(4px) !important; } .autul-drawer-links a.autul-drawer-highlight { color: #ffcc00 !important; border-color: rgba(255, 204, 0, 0.45) !important; background: rgba(255, 204, 0, 0.08) !important; } /* ========================================================== OPTIMIZED ACCOUNT / PORTAL / LOGIN PAGE SPACING ========================================================== */ .site-main { flex: 1; padding: 1.5rem 0 3rem; } .page-template-default .site-main, .page .site-main { padding: 1.2rem 0 2.5rem !important; } @media (max-width: 900px) { .page-template-default .site-main, .page .site-main { padding: 0.8rem 10px 2rem !important; } } .entry-title, .page-title, .widget-title { color: var(--autul-gold); } .entry-content, .entry-summary, .page-content, .comment-content { color: var(--autul-text); } .widget-area { margin-bottom: 2rem; } .widget { padding: 1.5rem; background: rgba(16, 33, 61, 0.78); border: 1px solid rgba(255, 204, 0, 0.14); border-radius: 18px; } .site-footer { margin-top: auto; padding: 1.8rem 0 2.2rem; background: linear-gradient(180deg, rgba(5, 10, 21, 0.97), rgba(10, 25, 47, 0.96)); border-top: 1px solid rgba(0, 168, 255, 0.22); } .footer-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; width: min(1100px, 92vw); margin: 0 auto; } .footer-branding { display: flex; align-items: center; gap: 0.9rem; } .footer-logo { width: 64px; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } .footer-title { color: var(--autul-gold); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.04em; } .footer-tagline, .copyright-text { margin: 0; color: rgba(255, 255, 255, 0.82); } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .screen-reader-text:focus { left: 5px; top: 5px; z-index: 100000; width: auto; height: auto; margin: 0; padding: 12px 16px; background: #fff; color: #000; clip: auto; border-radius: 8px; } /* ========================================================== ACCOUNT & LOGIN INTERFACE UX OPTIMIZATION (ALL DEVICES) ========================================================== */ .site-main { overflow-x: hidden; } .page-template-default .entry-header, .page .entry-header, .woocommerce-account .entry-header { text-align: center; margin: 0 0 1rem; } /* Ensure account/login/registration forms remain centered, crisp, and touch-friendly */ .woocommerce-account .woocommerce, .woocommerce-form-login, .woocommerce-form-register, .autul-portal-card { max-width: 480px; margin: 0 auto !important; box-sizing: border-box !important; } @media (max-width: 900px) { .page-template-default .entry-header, .page .entry-header, .woocommerce-account .entry-header { margin: 0 0 0.5rem; } .page-template-default .entry-title, .page .entry-title, .woocommerce-account .entry-title { font-size: 1.35rem !important; } } /* ========================================================== FORCE HIDE WORDPRESS ADMIN BAR & RESTORE FLUSH TOP THEME ========================================================== */ #wpadminbar, #wpadminbar * { display: none !important; height: 0 !important; visibility: hidden !important; pointer-events: none !important; } html, html.wp-toolbar, html[lang] { margin-top: 0 !important; padding-top: 0 !important; } body.admin-bar, body.logged-in { margin-top: 0 !important; padding-top: 0 !important; } /* ========================================================== LOGGED-IN USER THEME CONTENTS (NAVBAR & DRAWER) ========================================================== */ .autul-header-user-badge-wrap { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 5px 12px !important; background: rgba(12, 26, 52, 0.8) !important; border: 1px solid rgba(0, 229, 255, 0.4) !important; border-radius: 999px !important; text-decoration: none !important; transition: all 0.2s ease !important; } .autul-header-user-badge-wrap:hover { border-color: #ffcc00 !important; box-shadow: 0 0 12px rgba(255, 204, 0, 0.4) !important; } .autul-header-user-status-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #00ff88 !important; box-shadow: 0 0 8px #00ff88 !important; flex-shrink: 0 !important; } .autul-header-user-name { font-size: 13px !important; font-weight: 700 !important; color: #e0f4ff !important; max-width: 110px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .autul-header-logout-btn { display: inline-flex !important; align-items: center !important; padding: 5px 11px !important; font-size: 12px !important; font-weight: 700 !important; color: #ff9999 !important; border: 1px solid rgba(255, 75, 75, 0.35) !important; background: rgba(40, 15, 20, 0.6) !important; border-radius: 999px !important; text-decoration: none !important; transition: all 0.2s ease !important; } .autul-header-logout-btn:hover { color: #ffffff !important; background: rgba(255, 75, 75, 0.85) !important; border-color: #ff4b4b !important; box-shadow: 0 0 10px rgba(255, 75, 75, 0.5) !important; } /* User Card in Mobile Drawer */ .autul-drawer-user-card { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 14px !important; background: rgba(16, 33, 61, 0.7) !important; border: 1px solid rgba(0, 229, 255, 0.25) !important; border-radius: 12px !important; box-shadow: 0 0 14px rgba(0, 229, 255, 0.15) !important; margin-bottom: 6px !important; } .autul-drawer-user-avatar-wrap { width: 44px !important; height: 44px !important; border-radius: 50% !important; overflow: hidden !important; border: 1.5px solid #00e5ff !important; box-shadow: 0 0 8px rgba(0, 229, 255, 0.4) !important; flex-shrink: 0 !important; } .autul-drawer-avatar { width: 100% !important; height: 100% !important; object-fit: cover !important; } .autul-drawer-user-info { display: flex !important; flex-direction: column !important; gap: 2px !important; overflow: hidden !important; } .autul-drawer-user-tag { font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: 0.08em !important; color: #00ff88 !important; text-transform: uppercase !important; } .autul-drawer-user-name { margin: 0 !important; font-size: 13.5px !important; font-weight: 700 !important; color: #ffffff !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .autul-drawer-links a.autul-drawer-logout-link { color: #ff9999 !important; border-color: rgba(255, 75, 75, 0.3) !important; background: rgba(40, 15, 20, 0.4) !important; } .autul-drawer-links a.autul-drawer-logout-link:hover { color: #ffffff !important; background: rgba(255, 75, 75, 0.7) !important; border-color: #ff4b4b !important; } .autul-drawer-links a.autul-drawer-login-link { color: #00e5ff !important; border-color: rgba(0, 229, 255, 0.3) !important; background: rgba(0, 229, 255, 0.08) !important; } .autul-drawer-sub-menu, .autul-shop-drawer-nav .sub-menu { list-style: none !important; margin: 6px 0 6px 14px !important; padding: 6px 0 6px 10px !important; border-left: 2px solid rgba(0, 229, 255, 0.4) !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } .autul-drawer-sub-menu li, .autul-shop-drawer-nav .sub-menu li { list-style: none !important; margin: 0 !important; padding: 0 !important; } .autul-drawer-sub-menu li a, .autul-shop-drawer-nav .sub-menu li a { display: flex !important; align-items: center !important; padding: 9px 12px !important; font-size: 13px !important; font-weight: 600 !important; color: rgba(220, 240, 255, 0.9) !important; background: rgba(8, 18, 36, 0.65) !important; border: 1px solid rgba(0, 229, 255, 0.18) !important; border-radius: 8px !important; text-decoration: none !important; gap: 6px !important; } .autul-drawer-sub-menu li a:hover, .autul-shop-drawer-nav .sub-menu li a:hover { color: #ffcc00 !important; border-color: rgba(255, 204, 0, 0.5) !important; background: rgba(255, 204, 0, 0.1) !important; } .autul-sub-bullet { color: #00e5ff !important; font-size: 11px !important; } .autul-sub-chevron { margin-left: auto !important; transition: transform 0.25s ease !important; } @media (max-width: 900px) { .autul-header-user-badge-wrap, .autul-header-logout-btn { display: none !important; } } /* ========================================================== HOMEPAGE-IDENTICAL HEADER BRANDING (DESKTOP & MOBILE) ========================================================== */ @keyframes constantLightning { 0% { filter: drop-shadow(0 0 5px #ffcc00); transform: scale(1); } 50% { filter: drop-shadow(0 0 25px #00e5ff) drop-shadow(0 0 45px #00a8ff) contrast(1.3); transform: scale(1.02); } 100% { filter: drop-shadow(0 0 8px #ffcc00); transform: scale(1); } } @keyframes autulGlobalTitleCleanGoldShine { 0% { background-position: -180% 50%; } 40% { background-position: 280% 50%; } 100% { background-position: 280% 50%; } } @media (min-width: 901px) { .site-branding { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px 14px !important; margin: 0 !important; text-align: left !important; } .custom-logo { display: block !important; max-width: 56px !important; height: auto !important; margin: 0 !important; animation: constantLightning 0.5s infinite alternate ease-in-out !important; } .site-title { margin: 0 !important; line-height: 1 !important; } .site-title a { display: block !important; position: relative !important; font-size: clamp(20px, 1.55vw, 28px) !important; line-height: 1 !important; letter-spacing: 0.04em !important; word-spacing: 0.1em !important; text-align: left !important; text-transform: uppercase !important; font-weight: 900 !important; color: #ffcc00 !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .95), 0 0 7px rgba(255, 204, 0, .62), 0 0 13px rgba(255, 204, 0, .26), 0 0 16px rgba(0, 234, 255, .08) !important; } .site-title a::before { content: attr(data-autul-shine-text) !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; font: inherit !important; letter-spacing: inherit !important; word-spacing: inherit !important; text-transform: inherit !important; white-space: nowrap !important; color: transparent !important; -webkit-text-fill-color: transparent !important; background-image: linear-gradient( 100deg, rgba(255, 204, 0, 0) 0%, rgba(255, 204, 0, 0) 38%, rgba(255, 214, 64, .45) 44%, rgba(255, 248, 186, 1) 49%, rgba(255, 255, 255, .96) 51%, rgba(255, 218, 76, .58) 56%, rgba(255, 204, 0, 0) 64%, rgba(255, 204, 0, 0) 100% ) !important; background-size: 260% 100% !important; background-position: -180% 50% !important; -webkit-background-clip: text !important; background-clip: text !important; animation: autulGlobalTitleCleanGoldShine 6.2s cubic-bezier(.5, 0, .18, 1) infinite !important; pointer-events: none !important; } .site-description { width: 100% !important; margin: -2px 0 0 68px !important; font-size: 10px !important; line-height: 1.08 !important; color: rgba(220, 240, 255, 0.85) !important; letter-spacing: 0.4px !important; white-space: nowrap !important; } } /* ========================================================== PROFILE AVATAR DROPDOWN MENU (CLICKS ONLY, ZERO CLUTTER) ========================================================== */ .autul-header-profile-menu-wrap { position: relative !important; display: inline-flex !important; align-items: center !important; } .autul-header-profile-trigger { position: relative !important; cursor: pointer !important; border: 1.5px solid rgba(0, 229, 255, 0.55) !important; background: rgba(10, 25, 48, 0.9) !important; box-shadow: 0 0 10px rgba(0, 229, 255, 0.25) !important; padding: 0 !important; } .autul-header-profile-trigger:hover, .autul-header-profile-trigger[aria-expanded="true"] { border-color: #ffcc00 !important; box-shadow: 0 0 16px rgba(255, 204, 0, 0.5) !important; } .autul-header-profile-badge-dot { position: absolute !important; bottom: -1px !important; right: -1px !important; width: 9px !important; height: 9px !important; border-radius: 50% !important; background: #00ff88 !important; border: 1.5px solid #050d1a !important; box-shadow: 0 0 6px #00ff88 !important; } .autul-header-profile-dropdown { position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; width: 240px !important; background: linear-gradient(180deg, #09172e 0%, #050d1a 100%) !important; border: 1px solid rgba(0, 229, 255, 0.45) !important; border-radius: 14px !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 229, 255, 0.2) !important; padding: 12px !important; z-index: 10005 !important; display: none; opacity: 0; transform: translateY(-8px); transition: opacity 0.22s ease, transform 0.22s ease !important; box-sizing: border-box !important; } .autul-header-profile-dropdown.is-open { display: block !important; opacity: 1 !important; transform: translateY(0) !important; } .autul-profile-dropdown-head { display: flex !important; align-items: center !important; gap: 10px !important; padding-bottom: 10px !important; border-bottom: 1px solid rgba(0, 229, 255, 0.2) !important; margin-bottom: 8px !important; } .autul-profile-dropdown-avatar { width: 38px !important; height: 38px !important; border-radius: 50% !important; overflow: hidden !important; border: 1.5px solid #00e5ff !important; flex-shrink: 0 !important; } .autul-profile-dropdown-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .autul-profile-dropdown-meta { display: flex !important; flex-direction: column !important; overflow: hidden !important; } .autul-profile-dropdown-tag { font-size: 8.5px !important; font-weight: 800 !important; letter-spacing: 0.08em !important; color: #00ff88 !important; text-transform: uppercase !important; } .autul-profile-dropdown-name { font-size: 13px !important; color: #ffffff !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .autul-profile-dropdown-links { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .autul-profile-dropdown-links a { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 12px !important; border-radius: 8px !important; color: #dcf2ff !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.18s ease !important; } .autul-profile-dropdown-links a:hover { background: rgba(0, 229, 255, 0.12) !important; color: #ffcc00 !important; transform: translateX(3px) !important; } .autul-dropdown-divider { height: 1px !important; background: rgba(0, 229, 255, 0.15) !important; margin: 4px 0 !important; } .autul-profile-dropdown-links a.autul-profile-dropdown-logout { color: #ff9999 !important; } .autul-profile-dropdown-links a.autul-profile-dropdown-logout:hover { background: rgba(255, 75, 75, 0.2) !important; color: #ff4b4b !important; } /* ========================================================== MY ACCOUNT MEMBER DASHBOARD & EXPANDED PROFILE STYLES ========================================================== */ .autul-portal-container { width: min(920px, 94vw) !important; margin: 0 auto !important; } .autul-account-alert { display: flex !important; align-items: center !important; gap: 12px !important; padding: 14px 18px !important; border-radius: 12px !important; margin-bottom: 18px !important; font-weight: 700 !important; font-size: 14px !important; } .autul-account-alert-success { background: rgba(0, 255, 136, 0.12) !important; border: 1px solid #00ff88 !important; color: #00ff88 !important; box-shadow: 0 0 16px rgba(0, 255, 136, 0.25) !important; } /* 1. Hero Card */ .autul-account-hero-card { background: linear-gradient(180deg, #0a172e 0%, #060e1d 100%) !important; border: 1px solid rgba(0, 229, 255, 0.35) !important; border-radius: 20px !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 229, 255, 0.15) !important; padding: 24px !important; display: flex !important; flex-direction: column !important; gap: 22px !important; } .autul-account-hero-top { display: flex !important; align-items: center !important; gap: 18px !important; padding-bottom: 20px !important; border-bottom: 1px solid rgba(0, 229, 255, 0.2) !important; position: relative !important; } .autul-account-avatar-wrap { width: 76px !important; height: 76px !important; border-radius: 50% !important; overflow: hidden !important; border: 2px solid #00e5ff !important; box-shadow: 0 0 16px rgba(0, 229, 255, 0.45) !important; flex-shrink: 0 !important; background: #050d1a !important; } .autul-account-avatar { width: 100% !important; height: 100% !important; object-fit: cover !important; } .autul-account-hero-info { display: flex !important; flex-direction: column !important; gap: 4px !important; flex: 1 !important; } .autul-account-member-badge { align-self: flex-start !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.08em !important; color: #00ff88 !important; background: rgba(0, 255, 136, 0.12) !important; border: 1px solid rgba(0, 255, 136, 0.45) !important; border-radius: 999px !important; padding: 2px 10px !important; text-transform: uppercase !important; } .autul-account-user-title { margin: 0 !important; font-size: clamp(20px, 3vw, 26px) !important; font-weight: 900 !important; color: #ffffff !important; letter-spacing: 0.02em !important; } .autul-account-meta-line { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 10px !important; font-size: 12.5px !important; color: rgba(220, 240, 255, 0.8) !important; } .autul-account-meta-line strong { color: #ffcc00 !important; } .autul-meta-divider { color: rgba(0, 229, 255, 0.4) !important; } .autul-account-hero-actions { margin-left: auto !important; } .autul-account-logout-pill { display: inline-flex !important; align-items: center !important; padding: 6px 16px !important; font-size: 13px !important; font-weight: 700 !important; color: #ff9999 !important; border: 1px solid rgba(255, 75, 75, 0.4) !important; background: rgba(40, 15, 20, 0.6) !important; border-radius: 999px !important; text-decoration: none !important; transition: all 0.2s ease !important; } .autul-account-logout-pill:hover { color: #ffffff !important; background: rgba(255, 75, 75, 0.85) !important; border-color: #ff4b4b !important; box-shadow: 0 0 14px rgba(255, 75, 75, 0.4) !important; } /* 2. Hub Shortcut Cards Grid */ .autul-account-hub-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; } .autul-hub-tile { display: flex !important; flex-direction: column !important; gap: 8px !important; background: rgba(12, 25, 48, 0.65) !important; border: 1px solid rgba(0, 229, 255, 0.22) !important; border-radius: 14px !important; padding: 16px !important; text-decoration: none !important; transition: all 0.22s ease !important; } .autul-hub-tile:hover { background: rgba(14, 32, 62, 0.85) !important; border-color: #00e5ff !important; box-shadow: 0 0 16px rgba(0, 229, 255, 0.3) !important; transform: translateY(-2px) !important; } .autul-hub-tile-icon { color: #00e5ff !important; } .autul-hub-tile-title { margin: 0 !important; font-size: 15px !important; font-weight: 800 !important; color: #ffcc00 !important; } .autul-hub-tile-desc { margin: 0 !important; font-size: 12px !important; line-height: 1.4 !important; color: rgba(220, 240, 255, 0.75) !important; flex: 1 !important; } .autul-hub-tile-link { font-size: 12px !important; font-weight: 700 !important; color: #00e5ff !important; margin-top: 4px !important; } /* 3. Expanded Profile Details Form */ .autul-account-form-section { background: rgba(8, 18, 36, 0.75) !important; border: 1px solid rgba(0, 229, 255, 0.25) !important; border-radius: 16px !important; padding: 22px !important; display: flex !important; flex-direction: column !important; gap: 18px !important; } .autul-account-form-head { border-bottom: 1px solid rgba(0, 229, 255, 0.16) !important; padding-bottom: 12px !important; } .autul-account-form-title { margin: 0 !important; font-size: 18px !important; font-weight: 900 !important; color: #ffcc00 !important; letter-spacing: 0.02em !important; } .autul-account-form-subtitle { margin: 4px 0 0 !important; font-size: 12px !important; color: rgba(220, 240, 255, 0.75) !important; } .autul-account-edit-form { display: flex !important; flex-direction: column !important; gap: 16px !important; } .autul-form-avatar-box { display: flex !important; align-items: center !important; gap: 16px !important; padding: 14px !important; background: rgba(12, 26, 52, 0.6) !important; border: 1px dashed rgba(0, 229, 255, 0.35) !important; border-radius: 12px !important; } .autul-form-avatar-preview { width: 64px !important; height: 64px !important; border-radius: 50% !important; overflow: hidden !important; border: 2px solid #00e5ff !important; flex-shrink: 0 !important; } .autul-avatar-img-preview { width: 100% !important; height: 100% !important; object-fit: cover !important; } .autul-form-avatar-controls { display: flex !important; flex-direction: column !important; gap: 6px !important; } .autul-avatar-upload-label { display: inline-block !important; cursor: pointer !important; font-size: 13px !important; font-weight: 700 !important; color: #00e5ff !important; background: rgba(0, 229, 255, 0.12) !important; border: 1px solid rgba(0, 229, 255, 0.4) !important; padding: 6px 14px !important; border-radius: 8px !important; transition: all 0.2s ease !important; } .autul-avatar-upload-label:hover { background: rgba(0, 229, 255, 0.25) !important; border-color: #00e5ff !important; color: #ffffff !important; } .autul-file-input { display: none !important; } .autul-form-hint { margin: 0 !important; font-size: 11px !important; color: rgba(220, 240, 255, 0.65) !important; } .autul-form-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 16px !important; } .autul-form-group { display: flex !important; flex-direction: column !important; gap: 6px !important; } .autul-form-group-full { grid-column: 1 / -1 !important; } .autul-form-label { font-size: 12px !important; font-weight: 700 !important; color: #dcf2ff !important; letter-spacing: 0.02em !important; } .autul-input, .autul-select, .autul-textarea { width: 100% !important; padding: 10px 14px !important; background: rgba(6, 14, 28, 0.9) !important; border: 1px solid rgba(0, 229, 255, 0.35) !important; border-radius: 8px !important; color: #ffffff !important; font-size: 13.5px !important; box-sizing: border-box !important; transition: all 0.2s ease !important; outline: none !important; } .autul-input:focus, .autul-select:focus, .autul-textarea:focus { border-color: #00e5ff !important; box-shadow: 0 0 12px rgba(0, 229, 255, 0.4) !important; background: rgba(10, 22, 44, 0.95) !important; } .autul-select option { background: #0a172e !important; color: #ffffff !important; } .autul-textarea { resize: vertical !important; } .autul-form-submit-box { display: flex !important; justify-content: flex-start !important; margin-top: 8px !important; } .autul-account-submit-btn { background: linear-gradient(135deg, #ffcc00, #ffb300) !important; color: #050d1a !important; font-size: 14px !important; font-weight: 900 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; padding: 12px 28px !important; border-radius: 8px !important; border: none !important; cursor: pointer !important; box-shadow: 0 0 18px rgba(255, 204, 0, 0.45) !important; transition: all 0.2s ease !important; } .autul-account-submit-btn:hover { transform: scale(1.02) !important; box-shadow: 0 0 26px rgba(255, 204, 0, 0.65) !important; } @media (max-width: 768px) { .autul-account-hero-top { flex-direction: column !important; text-align: center !important; align-items: center !important; } .autul-account-hero-actions { margin: 8px auto 0 !important; } .autul-account-meta-line { justify-content: center !important; } .autul-account-hub-grid { grid-template-columns: 1fr !important; } .autul-form-grid { grid-template-columns: 1fr !important; } .autul-form-avatar-box { flex-direction: column !important; text-align: center !important; } .autul-form-submit-box { justify-content: center !important; } .autul-account-submit-btn { width: 100% !important; } } /* ========================================================== MOBILE-OPTIMIZED LOGIN & REGISTRATION INTERFACE ========================================================== */ .autul-account-page-main, .autul-login-page-main, .page-template-default .site-main, .woocommerce-account .site-main { padding: 14px 10px 32px !important; width: 100% !important; box-sizing: border-box !important; } /* Force 1-column stacked layout on mobile for WooCommerce two-column login/register */ .woocommerce-account .u-columns.col2-set, .woocommerce-account #customer_login, .col2-set { display: flex !important; flex-direction: column !important; gap: 20px !important; width: 100% !important; max-width: 480px !important; margin: 0 auto !important; } .woocommerce-account .u-column1.col-1, .woocommerce-account .u-column2.col-2, .col2-set .col-1, .col2-set .col-2 { width: 100% !important; max-width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; } /* Card Styling for Login & Register forms */ .woocommerce-account form.login, .woocommerce-account form.register, .woocommerce-form-login, .woocommerce-form-register, .autul-portal-card, .login, .register { background: linear-gradient(180deg, #0a172e 0%, #060e1d 100%) !important; border: 1px solid rgba(0, 229, 255, 0.35) !important; border-radius: 16px !important; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 229, 255, 0.15) !important; padding: 22px 18px !important; margin: 0 auto !important; box-sizing: border-box !important; width: 100% !important; max-width: 460px !important; } /* Form Titles */ .woocommerce-account form.login h2, .woocommerce-account form.register h2, .autul-portal-title { color: #ffcc00 !important; font-size: 20px !important; font-weight: 900 !important; margin: 0 0 14px 0 !important; text-align: center !important; letter-spacing: 0.02em !important; } /* Form Rows & Full Width on Mobile */ .woocommerce-account .woocommerce-form-row, .woocommerce-account .form-row, .woocommerce-account .form-row-wide, .woocommerce-account .form-row-first, .woocommerce-account .form-row-last, .form-row { width: 100% !important; float: none !important; margin: 0 0 14px 0 !important; padding: 0 !important; } /* Input Fields - Touch Friendly (48px high, 16px font to prevent mobile zoom) */ .woocommerce-account input[type="text"], .woocommerce-account input[type="email"], .woocommerce-account input[type="password"], .woocommerce-account input[type="tel"], .woocommerce-account input[type="date"], .woocommerce-account select, .woocommerce-account textarea, .autul-portal-card input[type="text"], .autul-portal-card input[type="password"], .autul-portal-card input[type="email"] { width: 100% !important; height: 48px !important; min-height: 48px !important; padding: 10px 14px !important; background: rgba(6, 14, 28, 0.95) !important; border: 1px solid rgba(0, 229, 255, 0.35) !important; border-radius: 8px !important; color: #ffffff !important; font-size: 16px !important; box-sizing: border-box !important; outline: none !important; transition: all 0.2s ease !important; -webkit-appearance: none !important; } .woocommerce-account input:focus, .woocommerce-account select:focus, .woocommerce-account textarea:focus, .autul-portal-card input:focus { border-color: #00e5ff !important; box-shadow: 0 0 14px rgba(0, 229, 255, 0.45) !important; background: rgba(10, 22, 44, 0.98) !important; } /* Submit Buttons - Golden & 48px Height */ .woocommerce-account button[type="submit"], .woocommerce-account input[type="submit"], .woocommerce-account .woocommerce-button, .woocommerce-form-login__submit, .woocommerce-form-register__submit, .autul-portal-card button[type="submit"] { width: 100% !important; height: 48px !important; min-height: 48px !important; background: linear-gradient(135deg, #ffcc00, #ffb300) !important; color: #050d1a !important; font-size: 15px !important; font-weight: 900 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; border: none !important; border-radius: 8px !important; cursor: pointer !important; box-shadow: 0 0 18px rgba(255, 204, 0, 0.45) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-top: 10px !important; transition: all 0.2s ease !important; } .woocommerce-account button[type="submit"]:hover, .woocommerce-account input[type="submit"]:hover, .autul-portal-card button[type="submit"]:hover { transform: scale(1.02) !important; box-shadow: 0 0 26px rgba(255, 204, 0, 0.65) !important; } /* Remember Me & Lost Password */ .woocommerce-account .woocommerce-form-login__rememberme { display: flex !important; align-items: center !important; gap: 8px !important; margin: 8px 0 12px !important; color: rgba(220, 240, 255, 0.85) !important; font-size: 13.5px !important; } .woocommerce-account .woocommerce-LostPassword, .woocommerce-account .lost_password { text-align: center !important; margin-top: 12px !important; font-size: 13px !important; } .woocommerce-account .woocommerce-LostPassword a, .woocommerce-account .lost_password a { color: #00e5ff !important; text-decoration: none !important; } .woocommerce-account .woocommerce-LostPassword a:hover, .woocommerce-account .lost_password a:hover { color: #ffcc00 !important; } /* Homepage Drawer Links - Prominent & Focused */ .autul-home-drawer-links { display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 10px 0 !important; } .autul-home-drawer-links li a { padding: 14px 18px !important; font-size: 15px !important; font-weight: 800 !important; border-radius: 12px !important; } /* ========================================================================== GLOBAL ZERO-FLASH TAP HIGHLIGHT & TOUCH SELECTION ELIMINATION (MOBILE) Completely removes the blue/gray flash box when buttons, titles, or links are tapped ========================================================================== */ html, body, *, *::before, *::after { -webkit-tap-highlight-color: transparent !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; } a, button, input, select, textarea, label, h1, h2, h3, h4, h5, h6, p, span, div, .autul-header-user-btn, .autul-status-info-btn, .autul-status-modal-close-btn, .autul-status-modal-ok-btn, .wa-order-btn, .autul-cart-submit, .autul-cart-link, .autul-cart-qty-button, .autul-account-logout-pill, .autul-desc-toggle-btn, .autul-mobile-zoom-btn, .autul-shop-drawer-toggle, .autul-shop-drawer-close, .autul-dropdown-item-link, .autul-drawer-links a, .site-title, .entry-title, .product_title { -webkit-tap-highlight-color: transparent !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; -webkit-touch-callout: none !important; outline: none !important; } button, .autul-header-user-btn, .autul-status-info-btn, .wa-order-btn, .autul-cart-submit, .autul-cart-link, .autul-account-logout-pill, .autul-desc-toggle-btn, .autul-account-member-badge, .autul-profile-dropdown-tag, .autul-drawer-user-tag, .autul-shop-drawer-toggle { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } /* ========================================================================== UNIVERSAL "A" LOGO GLOWING LIGHTNING ANIMATION (HEADER & FOOTER, ALL PAGES, PC & MOBILE) ========================================================================== */ @keyframes constantLightning { 0% { filter: drop-shadow(0 0 5px #ffcc00); transform: scale(1); } 50% { filter: drop-shadow(0 0 20px #00e5ff) drop-shadow(0 0 35px #00a8ff) contrast(1.25); transform: scale(1.02); } 100% { filter: drop-shadow(0 0 8px #ffcc00); transform: scale(1); } } html body .custom-logo, html body .site-branding .custom-logo, html body .custom-logo-link .custom-logo, html body .footer-logo, html body .footer-branding .footer-logo, html body .site-footer .footer-logo { animation: constantLightning 0.5s infinite alternate ease-in-out !important; } /* ========================================================================== PERFECT PC FOOTER BRANDING, ZERO-BOX TRANSPARENT FOOTER LOGO & UNIVERSAL GLOW ========================================================================== */ @keyframes constantLightning { 0% { filter: drop-shadow(0 0 4px #ffcc00); transform: scale(1); } 50% { filter: drop-shadow(0 0 18px #00e5ff) drop-shadow(0 0 32px #00a8ff) contrast(1.25); transform: scale(1.02); } 100% { filter: drop-shadow(0 0 7px #ffcc00); transform: scale(1); } } html body .custom-logo, html body .site-branding .custom-logo, html body .custom-logo-link .custom-logo, html body .custom-logo-link img, html body .footer-logo, html body .footer-branding .footer-logo, html body .site-footer .footer-logo { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; animation: constantLightning 0.5s infinite alternate ease-in-out !important; will-change: filter, transform !important; } @media (min-width: 901px) { .site-footer .footer-branding, .home .footer-branding, .footer-branding { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 2px !important; margin: 0 !important; text-align: left !important; flex-shrink: 0 !important; } .site-footer .footer-tagline, .home .footer-tagline, .footer-tagline { margin: 0 0 0 48px !important; display: block !important; text-align: left !important; white-space: nowrap !important; } } /* UNIVERSAL FOOTER & HEADER LOGO GLOW ON ALL SHOP & CATALOG PAGES */ @keyframes constantLightning { 0% { filter: drop-shadow(0 0 5px #ffcc00); transform: scale(1); } 50% { filter: drop-shadow(0 0 25px #00e5ff) drop-shadow(0 0 45px #00a8ff) contrast(1.3); transform: scale(1.02); } 100% { filter: drop-shadow(0 0 8px #ffcc00); transform: scale(1); } } html body .site-footer .footer-logo, html body .footer-branding .footer-logo, html body .footer-logo, html body .site-branding .custom-logo, html body .custom-logo-link .custom-logo, html body .custom-logo { display: block !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; animation: constantLightning 0.5s infinite alternate ease-in-out !important; will-change: filter, transform !important; } /* ========================================================================== AUTULONIYO TERMS OF SERVICE & REGISTRATION MODAL STYLES ========================================================================== */ /* Registration Checkbox */ .autul-terms-checkbox-group { margin: 18px 0 14px !important; padding: 12px 14px !important; border-radius: 10px !important; background: rgba(4, 12, 26, 0.75) !important; border: 1px dashed rgba(0, 229, 255, 0.35) !important; transition: all 0.25s ease !important; } .autul-terms-agreement-label { display: flex !important; align-items: flex-start !important; gap: 10px !important; cursor: pointer !important; margin: 0 !important; font-size: 12.5px !important; color: #d8eeff !important; line-height: 1.45 !important; } .autul-terms-agreement-label input[type="checkbox"] { margin-top: 2px !important; width: 17px !important; height: 17px !important; accent-color: #00ff88 !important; cursor: pointer !important; } .autul-terms-agreement-label.is-agreed { border-color: rgba(0, 255, 136, 0.6) !important; } .autul-terms-modal-trigger, .autul-terms-inline-link { color: #00e5ff !important; text-decoration: underline !important; font-weight: 700 !important; transition: color 0.2s ease !important; } .autul-terms-modal-trigger:hover, .autul-terms-inline-link:hover { color: #ffcc00 !important; text-shadow: 0 0 8px rgba(255, 204, 0, 0.5) !important; } .autul-terms-required-mark { color: #ff4757 !important; font-weight: 900 !important; } .autul-terms-hint-text { margin: 5px 0 0 27px !important; color: rgba(160, 200, 235, 0.7) !important; font-size: 11px !important; line-height: 1.3 !important; } /* Terms Modal Backdrop */ .autul-terms-modal-backdrop { position: fixed !important; inset: 0 !important; z-index: 100010 !important; background: rgba(2, 6, 14, 0.88) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; display: none; align-items: center !important; justify-content: center !important; padding: 16px !important; box-sizing: border-box !important; opacity: 0; transition: opacity 0.25s ease !important; } .autul-terms-modal-backdrop.is-open { display: flex !important; opacity: 1 !important; } .autul-terms-modal-card { background: linear-gradient(180deg, #071326 0%, #040a16 100%) !important; border: 1px solid rgba(0, 229, 255, 0.45) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 24px rgba(0, 229, 255, 0.25) !important; border-radius: 16px !important; width: 100% !important; max-width: 640px !important; max-height: 90vh !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; box-sizing: border-box !important; transform: scale(0.96); transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1) !important; } .autul-terms-modal-backdrop.is-open .autul-terms-modal-card { transform: scale(1) !important; } .autul-terms-modal-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 16px 20px !important; border-bottom: 1px solid rgba(0, 229, 255, 0.2) !important; background: rgba(8, 20, 38, 0.85) !important; } .autul-terms-modal-title-wrap { display: flex !important; align-items: center !important; gap: 12px !important; } .autul-terms-modal-icon { font-size: 24px !important; } .autul-terms-modal-title { margin: 0 !important; font-size: 18px !important; font-weight: 900 !important; color: #ffcc00 !important; letter-spacing: 0.5px !important; } .autul-terms-modal-date { font-size: 11px !important; color: #7eeeff !important; display: block !important; margin-top: 2px !important; } .autul-terms-modal-close-btn { background: transparent !important; border: 1px solid rgba(0, 229, 255, 0.3) !important; color: #a0d8ef !important; font-size: 22px !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; transition: all 0.2s ease !important; } .autul-terms-modal-close-btn:hover { background: rgba(255, 71, 87, 0.25) !important; border-color: #ff4757 !important; color: #ffffff !important; } .autul-terms-scroll-notice { background: rgba(0, 229, 255, 0.1) !important; border-bottom: 1px solid rgba(0, 229, 255, 0.2) !important; padding: 7px 16px !important; font-size: 11.5px !important; font-weight: 700 !important; color: #7eeeff !important; text-align: center !important; transition: all 0.25s ease !important; } .autul-terms-scroll-notice.is-done { background: rgba(0, 255, 136, 0.15) !important; border-bottom-color: rgba(0, 255, 136, 0.4) !important; color: #00ff88 !important; } .autul-terms-modal-body { padding: 20px 22px !important; overflow-y: auto !important; max-height: 400px !important; font-size: 13px !important; line-height: 1.6 !important; color: #d8eeff !important; box-sizing: border-box !important; } .autul-terms-modal-body::-webkit-scrollbar { width: 6px; } .autul-terms-modal-body::-webkit-scrollbar-track { background: rgba(5, 12, 24, 0.6); } .autul-terms-modal-body::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.4); border-radius: 3px; } .autul-terms-modal-footer { padding: 14px 20px !important; border-top: 1px solid rgba(0, 229, 255, 0.2) !important; background: rgba(8, 20, 38, 0.85) !important; text-align: center !important; } .autul-terms-agree-btn { width: 100% !important; padding: 12px 20px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: 0.5px !important; cursor: not-allowed !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.45) !important; transition: all 0.25s ease !important; box-sizing: border-box !important; } .autul-terms-agree-btn.is-unlocked { cursor: pointer !important; background: #00ff88 !important; border-color: #00ff88 !important; color: #04101e !important; box-shadow: 0 0 18px rgba(0, 255, 136, 0.6) !important; } .autul-terms-agree-btn.is-unlocked:hover { background: #33ff9f !important; transform: translateY(-1px) scale(1.02) !important; box-shadow: 0 0 24px rgba(0, 255, 136, 0.8) !important; } /* Callout boxes inside Terms */ .autul-terms-callout-box { border-radius: 8px !important; padding: 10px 14px !important; margin: 10px 0 !important; font-size: 12.5px !important; line-height: 1.5 !important; } .autul-terms-callout-warning { background: rgba(255, 180, 0, 0.1) !important; border-left: 3px solid #ffcc00 !important; color: #fff0b3 !important; } .autul-terms-callout-danger { background: rgba(255, 71, 87, 0.12) !important; border-left: 3px solid #ff4757 !important; color: #ffd2d6 !important; } .autul-terms-sec-title { color: #00e5ff !important; font-size: 14.5px !important; font-weight: 800 !important; margin: 16px 0 6px !important; border-bottom: 1px solid rgba(0, 229, 255, 0.15) !important; padding-bottom: 4px !important; } /* Order Placement Terms Reminder Line */ .autul-order-terms-reminder { font-size: 11px !important; line-height: 1.4 !important; color: rgba(200, 230, 255, 0.72) !important; text-align: center !important; margin: 9px auto 0 !important; max-width: 360px !important; } .autul-product-terms-reminder { margin-top: 10px !important; max-width: 100% !important; } /* Dedicated Terms Page Main Wrapper */ .autul-terms-page-main { padding: 30px 16px 60px !important; min-height: 70vh !important; box-sizing: border-box !important; } .autul-terms-shell { max-width: 880px !important; margin: 0 auto !important; } .autul-terms-breadcrumbs { margin-bottom: 16px !important; font-size: 12px !important; color: rgba(200, 230, 255, 0.6) !important; } .autul-terms-breadcrumbs a { color: #00e5ff !important; text-decoration: none !important; } .autul-terms-sep { margin: 0 6px !important; } .autul-terms-card { background: linear-gradient(180deg, rgba(7, 19, 38, 0.95), rgba(4, 10, 22, 0.98)) !important; border: 1px solid rgba(0, 229, 255, 0.35) !important; border-radius: 18px !important; padding: 30px 32px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important; } .autul-terms-header { margin-bottom: 24px !important; border-bottom: 1px solid rgba(0, 229, 255, 0.22) !important; padding-bottom: 18px !important; } .autul-terms-badge-row { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; margin-bottom: 10px !important; } .autul-terms-status-pill { display: inline-block !important; font-size: 10px !important; font-weight: 800 !important; color: #00e5ff !important; background: rgba(0, 229, 255, 0.12) !important; border: 1px solid rgba(0, 229, 255, 0.4) !important; padding: 2px 8px !important; border-radius: 999px !important; letter-spacing: 0.5px !important; } .autul-terms-date-pill { display: inline-block !important; font-size: 10px !important; font-weight: 800 !important; color: #ffcc00 !important; background: rgba(255, 204, 0, 0.12) !important; border: 1px solid rgba(255, 204, 0, 0.4) !important; padding: 2px 8px !important; border-radius: 999px !important; } .autul-terms-title { font-size: clamp(22px, 3.2vw, 32px) !important; font-weight: 900 !important; color: #ffcc00 !important; margin: 0 0 6px !important; } .autul-terms-subtitle { font-size: 13.5px !important; color: rgba(220, 240, 255, 0.8) !important; margin: 0 !important; } .autul-terms-content { font-size: 14px !important; line-height: 1.7 !important; color: #e2f2ff !important; } .autul-terms-footer { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important; margin-top: 32px !important; border-top: 1px solid rgba(0, 229, 255, 0.22) !important; padding-top: 20px !important; } .autul-terms-back-btn, .autul-terms-support-btn { display: inline-flex !important; align-items: center !important; padding: 9px 18px !important; border-radius: 8px !important; font-size: 12.5px !important; font-weight: 800 !important; text-decoration: none !important; transition: all 0.2s ease !important; } .autul-terms-back-btn { background: rgba(0, 229, 255, 0.12) !important; border: 1px solid rgba(0, 229, 255, 0.45) !important; color: #7eeeff !important; } .autul-terms-back-btn:hover { background: #00e5ff !important; color: #04101e !important; } .autul-terms-support-btn { background: rgba(37, 211, 102, 0.12) !important; border: 1px solid rgba(37, 211, 102, 0.45) !important; color: #25d366 !important; } .autul-terms-support-btn:hover { background: #25d366 !important; color: #ffffff !important; } /* Terms Progress Tracker */ .autul-terms-scroll-notice { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 10px 18px !important; background: rgba(8, 22, 44, 0.95) !important; border-bottom: 1px solid rgba(0, 229, 255, 0.28) !important; box-sizing: border-box !important; } .autul-terms-notice-text { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 12px !important; color: #d8eeff !important; } .autul-terms-step-badge { font-size: 9.5px !important; font-weight: 900 !important; color: #ffcc00 !important; background: rgba(255, 204, 0, 0.15) !important; border: 1px solid rgba(255, 204, 0, 0.45) !important; padding: 2px 7px !important; border-radius: 999px !important; letter-spacing: 0.5px !important; flex-shrink: 0 !important; } .autul-terms-step-badge.is-done { color: #00ff88 !important; background: rgba(0, 255, 136, 0.15) !important; border-color: rgba(0, 255, 136, 0.5) !important; } .autul-terms-progress-track { width: 100% !important; height: 6px !important; background: rgba(255, 255, 255, 0.12) !important; border-radius: 999px !important; overflow: hidden !important; } .autul-terms-progress-bar { height: 100% !important; background: linear-gradient(90deg, #00e5ff, #00ff88) !important; border-radius: 999px !important; transition: width 0.15s ease !important; box-shadow: 0 0 10px rgba(0, 229, 255, 0.6) !important; } .autul-terms-progress-label { font-size: 10.5px !important; color: #7eeeff !important; font-weight: 700 !important; letter-spacing: 0.3px !important; } .autul-terms-progress-label.is-done { color: #00ff88 !important; } /* Modal Footer Buttons Row */ .autul-terms-modal-footer { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 18px !important; border-top: 1px solid rgba(0, 229, 255, 0.22) !important; background: rgba(6, 16, 32, 0.95) !important; } .autul-terms-agree-btn { flex: 1.4 !important; margin: 0 !important; } .autul-terms-decline-btn { flex: 1 !important; padding: 12px 16px !important; border-radius: 10px !important; font-size: 13.5px !important; font-weight: 800 !important; background: rgba(255, 71, 87, 0.12) !important; border: 1px solid rgba(255, 71, 87, 0.45) !important; color: #ff4757 !important; cursor: pointer !important; transition: all 0.2s ease !important; box-sizing: border-box !important; } .autul-terms-decline-btn:hover { background: #ff4757 !important; color: #ffffff !important; box-shadow: 0 0 16px rgba(255, 71, 87, 0.6) !important; transform: translateY(-1px) !important; } /* End Card inside Terms scroll box */ .autul-terms-end-card { margin-top: 24px !important; padding: 18px !important; border-radius: 12px !important; background: rgba(0, 255, 136, 0.08) !important; border: 1.5px dashed rgba(0, 255, 136, 0.45) !important; text-align: center !important; } .autul-terms-end-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #00ff88 !important; color: #04101e !important; font-weight: 900 !important; font-size: 18px !important; margin-bottom: 8px !important; box-shadow: 0 0 14px rgba(0, 255, 136, 0.6) !important; } .autul-terms-end-title { margin: 0 0 4px !important; color: #00ff88 !important; font-size: 14.5px !important; font-weight: 800 !important; } .autul-terms-end-text { margin: 0 !important; color: #d8eeff !important; font-size: 12.5px !important; line-height: 1.45 !important; } /* Declined warning pill below checkbox */ .autul-terms-declined-warning { margin-top: 6px !important; padding: 6px 10px !important; border-radius: 6px !important; background: rgba(255, 71, 87, 0.15) !important; border: 1px solid rgba(255, 71, 87, 0.5) !important; color: #ff6b81 !important; font-size: 11px !important; line-height: 1.35 !important; font-weight: 700 !important; } /* ========================================================== AUTULONIYO TERMS & PROFILE UPGRADES ========================================================== */ /* 1. Username Prefix Group */ .autul-input-prefix-group { position: relative !important; display: flex !important; align-items: stretch !important; width: 100% !important; } .autul-fixed-prefix { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 14px !important; background: rgba(0, 229, 255, 0.12) !important; border: 1px solid rgba(0, 229, 255, 0.35) !important; border-right: none !important; border-radius: 8px 0 0 8px !important; color: #00e5ff !important; font-weight: 800 !important; font-size: 15px !important; text-shadow: 0 0 8px rgba(0, 229, 255, 0.6) !important; user-select: none !important; } .autul-input.autul-input-has-prefix { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; flex: 1 !important; } /* 2. Upgraded "I Do Not Agree" Decline Button */ .autul-terms-decline-btn { flex: 1 !important; padding: 12px 16px !important; border-radius: 10px !important; font-size: 13.5px !important; font-weight: 800 !important; letter-spacing: 0.4px !important; background: linear-gradient(135deg, rgba(255, 71, 87, 0.22) 0%, rgba(214, 48, 49, 0.38) 100%) !important; border: 1.5px solid rgba(255, 71, 87, 0.75) !important; color: #ffffff !important; text-shadow: 0 0 10px rgba(255, 71, 87, 0.8) !important; box-shadow: 0 4px 16px rgba(255, 71, 87, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; cursor: pointer !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } .autul-terms-decline-btn:hover { background: linear-gradient(135deg, rgba(255, 71, 87, 0.5) 0%, rgba(214, 48, 49, 0.85) 100%) !important; border-color: #ff4757 !important; color: #ffffff !important; box-shadow: 0 6px 24px rgba(255, 71, 87, 0.7), 0 0 16px rgba(255, 71, 87, 0.9) !important; transform: translateY(-1.5px) scale(1.02) !important; } /* 3. Glowing Yellow Warning Triangle & Agreement Alert */ .autul-warning-triangle { display: inline-block !important; color: #ffcc00 !important; font-size: 15px !important; text-shadow: 0 0 10px rgba(255, 204, 0, 0.95), 0 0 18px rgba(255, 204, 0, 0.6) !important; margin-right: 6px !important; vertical-align: -1px !important; filter: drop-shadow(0 0 4px #ffcc00) !important; } .autul-terms-declined-warning { margin-top: 8px !important; padding: 8px 12px !important; border-radius: 8px !important; background: rgba(255, 71, 87, 0.16) !important; border: 1.5px solid rgba(255, 71, 87, 0.65) !important; color: #ffb8c2 !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 600 !important; box-shadow: 0 0 14px rgba(255, 71, 87, 0.25) !important; } .autul-terms-declined-warning strong { color: #ffffff !important; margin-right: 4px !important; } /* 4. Instant Avatar Preview Notice Banner */ .autul-avatar-save-notice { display: none; align-items: center; gap: 10px; padding: 10px 16px; margin: 12px 0 16px; border-radius: 8px; background: rgba(0, 229, 255, 0.12); border: 1.5px solid #00e5ff; color: #e1f4ff; font-size: 13px; font-weight: 700; box-shadow: 0 0 15px rgba(0, 229, 255, 0.3); } .autul-avatar-save-notice .autul-notice-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #00ff88; color: #04101e; font-weight: 900; font-size: 12px; } /* 5. Non-Stretchable Gamer Bio Textarea & Live Character Counter */ .autul-bio-textarea { resize: none !important; /* Non-stretchable by touch/mouse */ overflow-y: hidden !important; min-height: 82px !important; line-height: 1.5 !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .autul-form-label-row { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 6px !important; } .autul-bio-char-count { font-size: 11.5px !important; color: rgba(140, 180, 210, 0.85) !important; font-weight: 600 !important; } /* 6. Bio Display on Hero Overview Card with Read More Toggle */ .autul-account-hero-bio-wrap { display: flex !important; align-items: flex-start !important; gap: 8px !important; margin-top: 10px !important; padding: 8px 12px !important; border-radius: 8px !important; background: rgba(0, 229, 255, 0.05) !important; border: 1px solid rgba(0, 229, 255, 0.15) !important; font-size: 12.5px !important; color: #cbe6fa !important; line-height: 1.45 !important; max-width: 650px !important; } .autul-hero-bio-icon { font-size: 14px !important; margin-top: 2px !important; } .autul-bio-dots-toggle { background: none !important; border: none !important; padding: 0 4px !important; color: #00e5ff !important; font-weight: 700 !important; font-size: 12px !important; cursor: pointer !important; text-decoration: underline !important; display: inline !important; } .autul-bio-dots-toggle:hover { color: #ffcc00 !important; } /* 7. Order Placement Terms Reminder Line */ .autul-order-terms-reminder { font-size: 11px !important; line-height: 1.4 !important; color: rgba(200, 230, 255, 0.72) !important; text-align: center !important; margin: 9px auto 0 !important; max-width: 420px !important; } .autul-terms-reminder-link { color: #00e5ff !important; text-decoration: underline !important; font-weight: 700 !important; } .autul-terms-reminder-link:hover { color: #ffcc00 !important; } /* ========================================================== AUTULONIYO ADVANCED PROFILE & INPUT GROUP REFINEMENTS ========================================================== */ /* Seamless Username @ Prefix Container (No Border Crossing) */ .autul-input-prefix-group { position: relative !important; display: flex !important; align-items: stretch !important; width: 100% !important; background: rgba(4, 12, 24, 0.75) !important; border: 1.5px solid rgba(0, 229, 255, 0.35) !important; border-radius: 8px !important; overflow: hidden !important; transition: all 0.25s ease !important; box-sizing: border-box !important; } .autul-input-prefix-group:focus-within { border-color: #00e5ff !important; box-shadow: 0 0 16px rgba(0, 229, 255, 0.45) !important; } .autul-fixed-prefix { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 14px !important; background: rgba(0, 229, 255, 0.14) !important; border: none !important; border-right: 1.5px solid rgba(0, 229, 255, 0.25) !important; color: #00e5ff !important; font-weight: 800 !important; font-size: 15px !important; text-shadow: 0 0 8px rgba(0, 229, 255, 0.6) !important; user-select: none !important; flex-shrink: 0 !important; margin: 0 !important; } .autul-input.autul-input-has-prefix { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; flex: 1 !important; padding: 10px 14px !important; color: #ffffff !important; font-size: 14px !important; margin: 0 !important; } .autul-input.autul-input-has-prefix:focus { border: none !important; outline: none !important; box-shadow: none !important; } /* Smart Country Phone Input Group */ .autul-phone-input-group { position: relative !important; display: flex !important; align-items: stretch !important; width: 100% !important; background: rgba(4, 12, 24, 0.75) !important; border: 1.5px solid rgba(0, 229, 255, 0.35) !important; border-radius: 8px !important; overflow: hidden !important; transition: all 0.25s ease !important; box-sizing: border-box !important; } .autul-phone-input-group:focus-within { border-color: #00e5ff !important; box-shadow: 0 0 16px rgba(0, 229, 255, 0.45) !important; } .autul-phone-dial-code { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 12px !important; background: rgba(0, 229, 255, 0.12) !important; border-right: 1.5px solid rgba(0, 229, 255, 0.25) !important; color: #00e5ff !important; font-weight: 800 !important; font-size: 13.5px !important; letter-spacing: 0.5px !important; user-select: none !important; flex-shrink: 0 !important; } .autul-phone-input-field { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; flex: 1 !important; padding: 10px 14px !important; color: #ffffff !important; font-size: 14px !important; margin: 0 !important; } .autul-phone-input-field:focus { border: none !important; outline: none !important; box-shadow: none !important; } .autul-phone-format-hint { display: block !important; margin-top: 5px !important; font-size: 11px !important; color: rgba(140, 185, 220, 0.75) !important; font-style: italic !important; } /* Gamer Bio Box (Strictly Non-Stretchable, Smart Inside-Box 0/512 Counter) */ .autul-bio-box-wrap { position: relative !important; width: 100% !important; background: rgba(4, 12, 24, 0.75) !important; border: 1.5px solid rgba(0, 229, 255, 0.35) !important; border-radius: 8px !important; overflow: hidden !important; transition: all 0.25s ease !important; box-sizing: border-box !important; } .autul-bio-box-wrap:focus-within { border-color: #00e5ff !important; box-shadow: 0 0 16px rgba(0, 229, 255, 0.4) !important; } .autul-bio-textarea { width: 100% !important; height: 95px !important; min-height: 95px !important; max-height: 95px !important; resize: none !important; /* Non-stretchable by touch or mouse */ background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; padding: 10px 14px 4px !important; color: #e6f6ff !important; font-size: 13.5px !important; line-height: 1.5 !important; box-sizing: border-box !important; display: block !important; } .autul-bio-box-bottom { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 4px 12px 6px !important; border-top: 1px solid rgba(0, 229, 255, 0.12) !important; background: rgba(2, 8, 18, 0.4) !important; } .autul-bio-box-hint { font-size: 11px !important; color: rgba(140, 185, 220, 0.6) !important; font-style: italic !important; } .autul-bio-inner-counter { font-size: 11.5px !important; font-weight: 700 !important; color: #00e5ff !important; background: rgba(0, 229, 255, 0.12) !important; padding: 1px 7px !important; border-radius: 5px !important; border: 1px solid rgba(0, 229, 255, 0.22) !important; } /* Remove checkmark icon from End of Terms card */ .autul-terms-end-icon { display: none !important; } /* ========================================================== CAMERA & PEN ICONS FOR AVATAR CIRCLE & UPLOAD BUTTON ========================================================== */ /* Circular Avatar Preview Container */ .autul-form-avatar-preview { position: relative !important; width: 88px !important; height: 88px !important; border-radius: 50% !important; border: 2px solid #00e5ff !important; box-shadow: 0 0 16px rgba(0, 229, 255, 0.45) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; background: #04101e !important; } /* Floating Edit Badge on Avatar Circle with Camera & Pen */ .autul-avatar-circle-badge { position: absolute !important; bottom: -2px !important; right: -2px !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: linear-gradient(135deg, #00e5ff 0%, #0099ff 100%) !important; border: 2px solid #04101e !important; box-shadow: 0 0 12px rgba(0, 229, 255, 0.85) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 2px !important; cursor: pointer !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; z-index: 5 !important; } .autul-avatar-circle-badge:hover { transform: scale(1.15) !important; box-shadow: 0 0 18px rgba(0, 229, 255, 1) !important; background: linear-gradient(135deg, #00ff88 0%, #00e5ff 100%) !important; } .autul-badge-cam { font-size: 11px !important; line-height: 1 !important; } .autul-badge-pen { font-size: 10px !important; line-height: 1 !important; margin-left: -2px !important; } /* Upload Button with Cool Camera and Pen Icons */ .autul-avatar-upload-label { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 10px 18px !important; border-radius: 8px !important; background: linear-gradient(135deg, rgba(0, 229, 255, 0.16) 0%, rgba(0, 150, 255, 0.28) 100%) !important; border: 1.5px solid #00e5ff !important; color: #ffffff !important; font-size: 13.5px !important; font-weight: 800 !important; letter-spacing: 0.4px !important; text-shadow: 0 0 8px rgba(0, 229, 255, 0.6) !important; box-shadow: 0 4px 14px rgba(0, 229, 255, 0.25) !important; cursor: pointer !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; user-select: none !important; } .autul-avatar-upload-label:hover { background: linear-gradient(135deg, rgba(0, 229, 255, 0.35) 0%, rgba(0, 150, 255, 0.5) 100%) !important; border-color: #00ff88 !important; box-shadow: 0 6px 20px rgba(0, 229, 255, 0.5), 0 0 14px rgba(0, 255, 136, 0.4) !important; transform: translateY(-1.5px) !important; } .autul-avatar-btn-icon-cam { font-size: 15px !important; filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.8)) !important; transition: transform 0.25s ease !important; } .autul-avatar-upload-label:hover .autul-avatar-btn-icon-cam { transform: scale(1.18) !important; } .autul-avatar-btn-icon-pen { font-size: 14px !important; filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.8)) !important; transition: transform 0.25s ease !important; } .autul-avatar-upload-label:hover .autul-avatar-btn-icon-pen { transform: rotate(20deg) scale(1.18) !important; } /* ========================================================== TOS MODAL HEADER ONE-LINE TITLE & DOWN-ARROW SCROLL GUIDE ========================================================== */ /* Strict One-Line Modal Title */ .autul-terms-modal-header { display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 14px 20px !important; border-bottom: 1px solid rgba(0, 229, 255, 0.22) !important; background: rgba(8, 20, 38, 0.95) !important; } .autul-terms-modal-title-wrap { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: nowrap !important; width: 100% !important; } .autul-terms-modal-headings { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; flex: 1 !important; } .autul-terms-modal-title { margin: 0 !important; font-size: clamp(14.5px, 2.5vw, 17px) !important; font-weight: 800 !important; color: #00e5ff !important; white-space: nowrap !important; /* Strictly in one line */ line-height: 1.25 !important; text-shadow: 0 0 10px rgba(0, 229, 255, 0.45) !important; letter-spacing: 0.3px !important; } /* Progress Row & Bouncing Down-Arrow Scroll Guide */ .autul-terms-progress-row { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: 6px !important; gap: 10px !important; } .autul-terms-progress-label { font-size: 11.5px !important; color: #00e5ff !important; font-weight: 700 !important; letter-spacing: 0.3px !important; } .autul-terms-scroll-indicator { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 11px !important; font-weight: 800 !important; color: #ffcc00 !important; text-shadow: 0 0 8px rgba(255, 204, 0, 0.7) !important; background: rgba(255, 204, 0, 0.12) !important; padding: 2px 9px !important; border-radius: 12px !important; border: 1px solid rgba(255, 204, 0, 0.45) !important; cursor: pointer !important; user-select: none !important; transition: all 0.25s ease !important; animation: autulArrowBounce 1.5s infinite ease-in-out !important; } .autul-terms-scroll-indicator:hover { background: rgba(255, 204, 0, 0.25) !important; box-shadow: 0 0 10px rgba(255, 204, 0, 0.5) !important; } .autul-scroll-indicator-arrow { font-size: 13px !important; font-weight: 900 !important; display: inline-block !important; line-height: 1 !important; } @keyframes autulArrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } .autul-terms-scroll-indicator.is-done { animation: none !important; color: #00ff88 !important; background: rgba(0, 255, 136, 0.12) !important; border-color: rgba(0, 255, 136, 0.45) !important; text-shadow: 0 0 8px rgba(0, 255, 136, 0.7) !important; } /* Flag Emojis Inside Country Select & Dial Code Box */ .autul-phone-dial-code { gap: 4px !important; white-space: nowrap !important; } /* ========================================================== CUSTOM INSTANT 0MS SVG FLAG COUNTRY SELECT COMPONENT ========================================================== */ .autul-country-select-wrapper { position: relative !important; width: 100% !important; } .autul-custom-select-trigger { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding: 10px 14px !important; border-radius: 8px !important; background: rgba(4, 12, 24, 0.75) !important; border: 1.5px solid rgba(0, 229, 255, 0.35) !important; color: #ffffff !important; font-size: 14px !important; cursor: pointer !important; transition: all 0.25s ease !important; box-sizing: border-box !important; user-select: none !important; } .autul-custom-select-trigger:hover, .autul-custom-select-trigger:focus, .autul-custom-select-trigger[aria-expanded="true"] { border-color: #00e5ff !important; box-shadow: 0 0 16px rgba(0, 229, 255, 0.4) !important; outline: none !important; } .autul-custom-select-selected { display: inline-flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; flex: 1 !important; } .autul-flag-img-sm { width: 22px !important; height: 15px !important; object-fit: cover !important; border-radius: 2.5px !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; flex-shrink: 0 !important; vertical-align: middle !important; } .autul-country-label { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-weight: 600 !important; color: #e1f4ff !important; } .autul-custom-select-caret { font-size: 10px !important; color: #00e5ff !important; margin-left: 8px !important; transition: transform 0.2s ease !important; } .autul-custom-select-trigger[aria-expanded="true"] .autul-custom-select-caret { transform: rotate(180deg) !important; } /* Custom Dropdown Panel */ .autul-custom-select-dropdown { position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; width: 100% !important; max-height: 280px !important; background: #061224 !important; border: 1.5px solid #00e5ff !important; border-radius: 10px !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 229, 255, 0.35) !important; z-index: 1000 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } .autul-country-search-box { padding: 8px 10px !important; background: rgba(3, 9, 18, 0.95) !important; border-bottom: 1px solid rgba(0, 229, 255, 0.2) !important; } .autul-country-search-input { width: 100% !important; padding: 7px 12px !important; border-radius: 6px !important; background: rgba(8, 20, 38, 0.9) !important; border: 1px solid rgba(0, 229, 255, 0.3) !important; color: #ffffff !important; font-size: 12.5px !important; outline: none !important; box-sizing: border-box !important; } .autul-country-search-input:focus { border-color: #00ff88 !important; box-shadow: 0 0 10px rgba(0, 255, 136, 0.4) !important; } .autul-country-options-list { overflow-y: auto !important; max-height: 230px !important; padding: 4px 0 !important; } .autul-country-group-label { padding: 6px 12px 4px !important; font-size: 10.5px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; color: #00e5ff !important; background: rgba(0, 229, 255, 0.08) !important; border-top: 1px solid rgba(0, 229, 255, 0.12) !important; border-bottom: 1px solid rgba(0, 229, 255, 0.12) !important; } .autul-country-opt { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 14px !important; cursor: pointer !important; transition: background 0.15s ease !important; color: #e6f6ff !important; font-size: 13px !important; } .autul-country-opt:hover { background: rgba(0, 229, 255, 0.18) !important; color: #ffffff !important; } .autul-country-opt.is-selected { background: rgba(0, 229, 255, 0.28) !important; font-weight: 700 !important; color: #00e5ff !important; } .autul-country-opt-name { flex: 1 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .autul-country-opt-code { font-size: 11px !important; color: rgba(140, 190, 230, 0.75) !important; font-weight: 700 !important; flex-shrink: 0 !important; } /* Phone Dial Code with Flag */ .autul-phone-dial-code { display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; } /* Fix: Collapsible Country Dropdown - Hidden by default, open only with .is-open */ .autul-custom-select-dropdown { display: none !important; position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; width: 100% !important; max-height: 280px !important; background: #061224 !important; border: 1.5px solid #00e5ff !important; border-radius: 10px !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 229, 255, 0.4) !important; z-index: 1000 !important; overflow: hidden !important; flex-direction: column !important; } .autul-custom-select-dropdown.is-open { display: flex !important; } .autul-flag-img-sm { width: 24px !important; height: 17px !important; object-fit: cover !important; border-radius: 3px !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important; flex-shrink: 0 !important; vertical-align: middle !important; display: inline-block !important; } .autul-phone-dial-code .autul-flag-img-sm { margin-right: 2px !important; } /* ========================================================== OFFICIAL COLOR EMOJI FLAGS & CLEAN DROPDOWN RESTORATION ========================================================== */ /* Load Google Noto Color Emoji for true full-color flags on Windows */ @import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap'); select.autul-select, .autul-phone-dial-code { font-family: 'Noto Color Emoji', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } /* Remove any broken custom dropdown rules */ .autul-custom-select-wrapper, .autul-custom-select-trigger, .autul-custom-select-dropdown { display: none !important; } /* ========================================================== PERFECT PROFILE REFINEMENTS (PC & MOBILE) ========================================================== */ /* 1. Mobile Profile Card Metadata: Stacked one by one per line */ @media (max-width: 768px) { .autul-account-meta-line { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; margin-top: 6px !important; } .autul-account-meta-line .autul-meta-divider { display: none !important; } .autul-meta-item { display: block !important; width: 100% !important; font-size: 12.5px !important; word-break: break-word !important; } } /* 2. Update Account Details Title with (i) Button & Smooth Collapsible Info Box */ .autul-account-form-title-row { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 4px !important; } .autul-section-info-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: rgba(0, 229, 255, 0.14) !important; border: 1px solid #00e5ff !important; color: #00e5ff !important; font-size: 12px !important; font-weight: 800 !important; cursor: pointer !important; transition: all 0.25s ease !important; line-height: 1 !important; } .autul-section-info-btn:hover { background: #00e5ff !important; color: #04101e !important; box-shadow: 0 0 12px rgba(0, 229, 255, 0.8) !important; transform: scale(1.1) !important; } .autul-collapsible-info-box { display: none; align-items: flex-start; gap: 10px; padding: 10px 14px; margin: 8px 0 14px; border-radius: 8px; background: rgba(0, 229, 255, 0.08); border: 1px solid rgba(0, 229, 255, 0.3); color: #d8eeff; font-size: 12.5px; line-height: 1.45; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); animation: autulFadeSlide 0.25s ease; } @keyframes autulFadeSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .autul-collapsible-info-box .autul-info-icon { font-size: 15px; line-height: 1.2; } .autul-collapsible-info-box .autul-info-body strong { color: #00e5ff; display: block; margin-bottom: 2px; } .autul-collapsible-info-box .autul-info-text { margin: 0; color: #cbe6fa; } /* 3. Dynamic Quick Save Button Below Avatar (Shows only during preview) */ .autul-avatar-quick-save-wrap { margin-top: 10px !important; } .autul-avatar-quick-save-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 9px 18px !important; border-radius: 8px !important; background: linear-gradient(135deg, #00ff88 0%, #00b894 100%) !important; border: 1.5px solid #00ff88 !important; color: #04101e !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.5px !important; cursor: pointer !important; box-shadow: 0 0 16px rgba(0, 255, 136, 0.6) !important; transition: all 0.25s ease !important; animation: autulPulseGlow 1.8s infinite alternate !important; } .autul-avatar-quick-save-btn:hover { background: #33ff9f !important; transform: translateY(-1.5px) scale(1.02) !important; box-shadow: 0 0 22px rgba(0, 255, 136, 0.9) !important; } @keyframes autulPulseGlow { 0% { box-shadow: 0 0 12px rgba(0, 255, 136, 0.5); } 100% { box-shadow: 0 0 22px rgba(0, 255, 136, 0.9); } } /* 4. Country Field Container with Vector SVG Flag Badge on Left */ .autul-country-field-wrap { position: relative !important; display: flex !important; align-items: stretch !important; width: 100% !important; background: rgba(4, 12, 24, 0.75) !important; border: 1.5px solid rgba(0, 229, 255, 0.35) !important; border-radius: 8px !important; overflow: hidden !important; transition: all 0.25s ease !important; box-sizing: border-box !important; } .autul-country-field-wrap:focus-within { border-color: #00e5ff !important; box-shadow: 0 0 16px rgba(0, 229, 255, 0.45) !important; } .autul-country-flag-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 12px !important; background: rgba(0, 229, 255, 0.12) !important; border-right: 1.5px solid rgba(0, 229, 255, 0.25) !important; flex-shrink: 0 !important; user-select: none !important; } .autul-svg-flag { width: 24px !important; height: 16px !important; border-radius: 2.5px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important; display: block !important; } .autul-select.autul-select-has-flag { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; flex: 1 !important; padding: 10px 14px !important; color: #ffffff !important; font-size: 14px !important; margin: 0 !important; } /* Ensure no custom dropdown interference */ .autul-custom-select-wrapper, .autul-custom-select-dropdown { display: none !important; } /* ========================================================================== AuTuLoniyo Seamless Username Box (Single Outer Border) ========================================================================== */ .autul-input-prefix-group { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; background: rgba(4, 12, 24, 0.75) !important; border: 1.5px solid rgba(0, 229, 255, 0.35) !important; border-radius: 8px !important; overflow: hidden !important; transition: all 0.25s ease !important; box-sizing: border-box !important; } .autul-input-prefix-group:focus-within { border-color: #00e5ff !important; box-shadow: 0 0 16px rgba(0, 229, 255, 0.45) !important; } .autul-fixed-prefix { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 2px 0 14px !important; background: transparent !important; border: none !important; border-right: none !important; color: #00e5ff !important; font-weight: 800 !important; font-size: 15px !important; text-shadow: 0 0 8px rgba(0, 229, 255, 0.6) !important; user-select: none !important; flex-shrink: 0 !important; margin: 0 !important; } .autul-input-has-prefix { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; flex: 1 !important; padding: 10px 14px 10px 4px !important; color: #ffffff !important; font-size: 15px !important; margin: 0 !important; } .autul-input-has-prefix:focus { border: none !important; outline: none !important; box-shadow: none !important; } /* ========================================================================== AuTuLoniyo TOS 2-Second Swipe Down Gesture Animation Overlay ========================================================================== */ #autulTermsScrollBox { position: relative !important; } .autul-swipe-overlay-prompt { position: sticky !important; top: 45% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 9999 !important; pointer-events: none !important; display: flex !important; justify-content: center !important; align-items: center !important; width: max-content !important; margin: 0 auto !important; animation: autulSwipePulse 2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important; } .autul-swipe-anim-badge { background: rgba(3, 17, 34, 0.95) !important; border: 2px solid #00e5ff !important; border-radius: 50px !important; padding: 12px 24px !important; box-shadow: 0 0 30px rgba(0, 229, 255, 0.6), inset 0 0 15px rgba(0, 229, 255, 0.3) !important; display: flex !important; align-items: center !important; gap: 10px !important; color: #e1f4ff !important; font-weight: 700 !important; font-size: 14px !important; text-shadow: 0 0 8px rgba(0, 229, 255, 0.8) !important; } .autul-swipe-hand-icon { font-size: 22px !important; display: inline-block !important; animation: autulHandSwipe 1s ease-in-out infinite !important; } .autul-swipe-down-arrow { font-size: 18px !important; display: inline-block !important; animation: autulArrowBounce 1s ease-in-out infinite !important; } @keyframes autulHandSwipe { 0% { transform: translateY(-8px); opacity: 0.6; } 50% { transform: translateY(8px); opacity: 1; } 100% { transform: translateY(-8px); opacity: 0.6; } } @keyframes autulArrowBounce { 0% { transform: translateY(-4px); } 50% { transform: translateY(6px); } 100% { transform: translateY(-4px); } } @keyframes autulSwipePulse { 0% { opacity: 0; transform: translate(-50%, -40%) scale(0.85); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 25% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(0.9); } } .autul-swipe-fadeout { opacity: 0 !important; transition: opacity 0.3s ease-out !important; } /* ========================================================================== Mobile 2-Line TOS Header & Single Line Profile Metadata ========================================================================== */ .autul-terms-modal-date { font-size: 11.5px !important; color: rgba(220, 240, 255, 0.75) !important; display: flex !important; align-items: center !important; gap: 6px !important; } .autul-terms-modal-date .autul-date-sep { color: rgba(0, 229, 255, 0.6) !important; } @media (max-width: 768px) { .autul-terms-modal-date { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; } .autul-terms-modal-date .autul-date-sep { display: none !important; } .autul-terms-modal-date .autul-date-part, .autul-terms-modal-date .autul-univ-part { display: block !important; font-size: 11px !important; line-height: 1.3 !important; } .autul-account-meta-line { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; margin-top: 6px !important; } .autul-account-meta-line .autul-meta-divider { display: none !important; } } /* ========================================================================== AuTuLoniyo PC Country Picker (Desktop Only) & Dead-Center Swipe Animation ========================================================================== */ @media (min-width: 769px) { .autul-select-has-flag { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; } .autul-pc-country-picker { display: flex !important; flex: 1 !important; position: relative !important; width: 100% !important; } .autul-pc-picker-btn { width: 100% !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 14px !important; background: rgba(6, 14, 28, 0.95) !important; border: 1px solid rgba(0, 229, 255, 0.35) !important; border-radius: 0 8px 8px 0 !important; color: #ffffff !important; font-size: 14.5px !important; cursor: pointer !important; outline: none !important; transition: all 0.2s ease !important; box-sizing: border-box !important; } .autul-pc-picker-btn:hover, .autul-pc-picker-btn:focus { border-color: #00e5ff !important; box-shadow: 0 0 12px rgba(0, 229, 255, 0.3) !important; } .autul-pc-picker-label { color: #ffffff !important; font-weight: 600 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .autul-pc-picker-arrow { color: #00e5ff !important; font-size: 11px !important; margin-left: 10px !important; transition: transform 0.2s ease !important; } .autul-pc-picker-dropdown { position: absolute !important; top: calc(100% + 4px) !important; left: 0 !important; right: 0 !important; background: #030d1a !important; border: 1.5px solid #00e5ff !important; border-radius: 8px !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 229, 255, 0.3) !important; z-index: 99999 !important; overflow: hidden !important; } .autul-pc-search-box { padding: 8px 10px !important; border-bottom: 1px solid rgba(0, 229, 255, 0.25) !important; background: rgba(4, 18, 36, 0.8) !important; } .autul-pc-search-input { width: 100% !important; padding: 8px 12px !important; background: rgba(2, 8, 16, 0.9) !important; border: 1px solid rgba(0, 229, 255, 0.4) !important; border-radius: 6px !important; color: #ffffff !important; font-size: 13px !important; outline: none !important; box-sizing: border-box !important; } .autul-pc-search-input:focus { border-color: #00e5ff !important; box-shadow: 0 0 8px rgba(0, 229, 255, 0.4) !important; } .autul-pc-country-list { max-height: 260px !important; overflow-y: auto !important; padding: 4px 0 !important; } .autul-pc-country-list::-webkit-scrollbar { width: 6px !important; } .autul-pc-country-list::-webkit-scrollbar-thumb { background: #00e5ff !important; border-radius: 3px !important; } .autul-pc-country-item { display: flex !important; align-items: center !important; padding: 8px 14px !important; cursor: pointer !important; gap: 12px !important; transition: background 0.15s ease !important; } .autul-pc-country-item:hover { background: rgba(0, 229, 255, 0.15) !important; } .autul-pc-item-flag { width: 24px !important; height: 16px !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .autul-pc-item-flag svg { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 2px !important; } .autul-pc-item-name { flex: 1 !important; color: #e1f4ff !important; font-size: 13.5px !important; font-weight: 500 !important; } .autul-pc-item-code { color: #00e5ff !important; font-size: 12.5px !important; font-weight: 700 !important; margin-left: auto !important; } } @media (max-width: 768px) { .autul-pc-country-picker { display: none !important; } .autul-select-has-flag { display: block !important; } } /* Dead-Center Screen Swipe Down Overlay Animation */ .autul-swipe-overlay-prompt { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 9999999 !important; pointer-events: none !important; display: flex !important; justify-content: center !important; align-items: center !important; animation: autulSwipePulse 2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important; } .autul-swipe-anim-badge { background: rgba(3, 17, 34, 0.96) !important; border: 2px solid #00e5ff !important; border-radius: 20px !important; padding: 18px 28px !important; box-shadow: 0 0 40px rgba(0, 229, 255, 0.7), inset 0 0 20px rgba(0, 229, 255, 0.35) !important; display: flex !important; align-items: center !important; gap: 16px !important; color: #e1f4ff !important; backdrop-filter: blur(8px) !important; } .autul-swipe-gesture-visual { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; } .autul-swipe-hand-icon { font-size: 28px !important; animation: autulHandSwipe 1s ease-in-out infinite !important; } .autul-swipe-down-arrow { font-size: 20px !important; animation: autulArrowBounce 1s ease-in-out infinite !important; } .autul-swipe-text-group { display: flex !important; flex-direction: column !important; gap: 2px !important; text-align: left !important; } .autul-swipe-title { font-size: 16px !important; font-weight: 800 !important; color: #00e5ff !important; text-shadow: 0 0 10px rgba(0, 229, 255, 0.8) !important; } .autul-swipe-subtitle { font-size: 12px !important; color: rgba(220, 240, 255, 0.85) !important; } @keyframes autulHandSwipe { 0% { transform: translateY(-8px); opacity: 0.6; } 50% { transform: translateY(8px); opacity: 1; } 100% { transform: translateY(-8px); opacity: 0.6; } } @keyframes autulArrowBounce { 0% { transform: translateY(-4px); } 50% { transform: translateY(6px); } 100% { transform: translateY(-4px); } } @keyframes autulSwipePulse { 0% { opacity: 0; transform: translate(-50%, -40%) scale(0.85); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 25% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(0.9); } } .autul-swipe-fadeout { opacity: 0 !important; transition: opacity 0.3s ease-out !important; } /* ========================================================================== AuTuLoniyo Single Unified Username Box (Locked Glowing @, No Dual Boxes) ========================================================================== */ .autul-username-single-box { display: flex !important; align-items: center !important; width: 100% !important; min-height: 48px !important; background: rgba(6, 14, 28, 0.95) !important; border: 1.5px solid rgba(0, 229, 255, 0.35) !important; border-radius: 8px !important; padding: 0 14px !important; box-sizing: border-box !important; transition: all 0.25s ease !important; } .autul-username-single-box:focus-within { border-color: #00e5ff !important; box-shadow: 0 0 16px rgba(0, 229, 255, 0.45) !important; } .autul-username-fixed-at { color: #00e5ff !important; font-weight: 800 !important; font-size: 16px !important; text-shadow: 0 0 8px rgba(0, 229, 255, 0.8) !important; user-select: none !important; flex-shrink: 0 !important; margin-right: 6px !important; line-height: 1 !important; } .autul-username-bare-input { flex: 1 !important; width: 100% !important; border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; padding: 10px 0 !important; margin: 0 !important; color: #ffffff !important; font-size: 15px !important; font-weight: 500 !important; } .autul-username-bare-input:focus { border: none !important; outline: none !important; box-shadow: none !important; } /* ========================================================================== Clean Country Field Wrap (Mobile & PC Unified, Flag Badge + Standard Select) ========================================================================== */ .autul-country-field-wrap { display: flex !important; align-items: stretch !important; width: 100% !important; position: relative !important; } .autul-country-flag-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; min-width: 52px !important; background: rgba(4, 12, 24, 0.95) !important; border: 1px solid rgba(0, 229, 255, 0.35) !important; border-right: none !important; border-radius: 8px 0 0 8px !important; padding: 0 6px !important; flex-shrink: 0 !important; box-sizing: border-box !important; } .autul-country-flag-badge svg, .autul-country-flag-badge .autul-svg-flag { width: 26px !important; height: 16px !important; border-radius: 2px !important; } .autul-select-has-flag { display: block !important; position: static !important; opacity: 1 !important; pointer-events: auto !important; width: 100% !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; flex: 1 !important; } .autul-pc-country-picker { display: none !important; } /* ========================================================================== TOS Pure Visual Swipe Down Logo Animation (Zero Extra Text) ========================================================================== */ .autul-swipe-overlay-prompt { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 9999999 !important; pointer-events: none !important; display: flex !important; justify-content: center !important; align-items: center !important; animation: autulSwipePulse 2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important; } .autul-swipe-visual-only { background: rgba(3, 17, 34, 0.96) !important; border: 2.5px solid #00e5ff !important; border-radius: 50% !important; width: 90px !important; height: 90px !important; box-shadow: 0 0 40px rgba(0, 229, 255, 0.8), inset 0 0 20px rgba(0, 229, 255, 0.45) !important; display: flex !important; align-items: center !important; justify-content: center !important; backdrop-filter: blur(8px) !important; } .autul-swipe-gesture-visual { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; } .autul-swipe-hand-icon { font-size: 32px !important; line-height: 1 !important; display: inline-block !important; animation: autulHandSwipe 0.9s ease-in-out infinite !important; } .autul-swipe-down-arrow { font-size: 22px !important; line-height: 1 !important; display: inline-block !important; animation: autulArrowBounce 0.9s ease-in-out infinite !important; } @keyframes autulHandSwipe { 0% { transform: translateY(-8px); opacity: 0.5; } 50% { transform: translateY(8px); opacity: 1; } 100% { transform: translateY(-8px); opacity: 0.5; } } @keyframes autulArrowBounce { 0% { transform: translateY(-4px); opacity: 0.5; } 50% { transform: translateY(6px); opacity: 1; } 100% { transform: translateY(-4px); opacity: 0.5; } } @keyframes autulSwipePulse { 0% { opacity: 0; transform: translate(-50%, -40%) scale(0.85); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 25% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(0.9); } } .autul-swipe-fadeout { opacity: 0 !important; transition: opacity 0.3s ease-out !important; } /* ========================================================================== AuTuLoniyo PC Country Trigger & 4-Stack Rectangular Selection Modal ========================================================================== */ @media (min-width: 769px) { .autul-select-has-flag { display: none !important; } .autul-pc-country-trigger { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 48px !important; padding: 10px 14px !important; background: rgba(6, 14, 28, 0.95) !important; border: 1px solid rgba(0, 229, 255, 0.35) !important; border-radius: 0 8px 8px 0 !important; color: #ffffff !important; font-size: 14.5px !important; cursor: pointer !important; box-sizing: border-box !important; outline: none !important; transition: all 0.25s ease !important; } .autul-pc-country-trigger:hover, .autul-pc-country-trigger:focus { border-color: #00e5ff !important; box-shadow: 0 0 14px rgba(0, 229, 255, 0.4) !important; } .autul-pc-trigger-name { font-weight: 600 !important; color: #e1f4ff !important; } .autul-pc-trigger-arrow { color: #00e5ff !important; font-size: 11px !important; margin-left: 8px !important; } } @media (max-width: 768px) { .autul-select-has-flag { display: block !important; } .autul-pc-country-trigger { display: none !important; } } .autul-country-modal-backdrop { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(1, 6, 14, 0.88) !important; backdrop-filter: blur(10px) !important; z-index: 999998 !important; display: none !important; align-items: center !important; justify-content: center !important; padding: 24px !important; box-sizing: border-box !important; } .autul-country-modal-backdrop.is-open { display: flex !important; animation: autulModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } .autul-country-modal-card { width: 100% !important; max-width: 1080px !important; max-height: 86vh !important; background: #030e1d !important; border: 1.5px solid #00e5ff !important; border-radius: 16px !important; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 229, 255, 0.35) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; box-sizing: border-box !important; } .autul-country-modal-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 18px 24px !important; border-bottom: 1px solid rgba(0, 229, 255, 0.25) !important; background: rgba(4, 16, 32, 0.95) !important; } .autul-country-modal-title-wrap { display: flex !important; align-items: center !important; gap: 12px !important; } .autul-country-modal-icon { font-size: 26px !important; } .autul-country-modal-title { margin: 0 !important; font-size: 18px !important; font-weight: 800 !important; color: #00e5ff !important; text-shadow: 0 0 10px rgba(0, 229, 255, 0.6) !important; line-height: 1.2 !important; } .autul-country-modal-subtitle { font-size: 11.5px !important; color: rgba(220, 240, 255, 0.7) !important; display: block !important; margin-top: 2px !important; } .autul-country-modal-close { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(0, 229, 255, 0.3) !important; color: #00e5ff !important; font-size: 16px !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; } .autul-country-modal-close:hover { background: rgba(255, 75, 75, 0.2) !important; border-color: #ff4b4b !important; color: #ff9999 !important; transform: scale(1.08) !important; } .autul-country-modal-toolbar { padding: 14px 24px !important; background: rgba(2, 8, 18, 0.8) !important; border-bottom: 1px solid rgba(0, 229, 255, 0.15) !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } .autul-country-search-wrap { display: flex !important; align-items: center !important; background: rgba(6, 20, 38, 0.95) !important; border: 1.5px solid rgba(0, 229, 255, 0.4) !important; border-radius: 8px !important; padding: 0 14px !important; gap: 10px !important; transition: all 0.2s ease !important; } .autul-country-search-wrap:focus-within { border-color: #00e5ff !important; box-shadow: 0 0 15px rgba(0, 229, 255, 0.4) !important; } .autul-country-search-icon { font-size: 16px !important; color: #00e5ff !important; } .autul-country-search-input { flex: 1 !important; background: transparent !important; border: none !important; outline: none !important; color: #ffffff !important; font-size: 14px !important; padding: 11px 0 !important; } .autul-country-category-tabs { display: flex !important; align-items: center !important; gap: 8px !important; overflow-x: auto !important; padding-bottom: 2px !important; } .autul-category-tab { padding: 6px 14px !important; background: rgba(6, 20, 40, 0.7) !important; border: 1px solid rgba(0, 229, 255, 0.25) !important; border-radius: 20px !important; color: rgba(220, 240, 255, 0.8) !important; font-size: 12.5px !important; font-weight: 600 !important; cursor: pointer !important; white-space: nowrap !important; transition: all 0.2s ease !important; } .autul-category-tab:hover, .autul-category-tab.is-active { background: rgba(0, 229, 255, 0.16) !important; border-color: #00e5ff !important; color: #00e5ff !important; box-shadow: 0 0 10px rgba(0, 229, 255, 0.3) !important; } .autul-country-modal-body { flex: 1 !important; overflow-y: auto !important; padding: 20px 24px !important; display: flex !important; flex-direction: column !important; gap: 24px !important; } .autul-country-modal-body::-webkit-scrollbar { width: 8px !important; } .autul-country-modal-body::-webkit-scrollbar-thumb { background: #00e5ff !important; border-radius: 4px !important; } .autul-country-cat-section { display: flex !important; flex-direction: column !important; gap: 12px !important; } .autul-country-cat-header { display: flex !important; align-items: center !important; gap: 8px !important; padding-bottom: 6px !important; border-bottom: 1px dashed rgba(0, 229, 255, 0.25) !important; } .autul-cat-title { margin: 0 !important; font-size: 14.5px !important; font-weight: 700 !important; color: #ffcc00 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .autul-country-4stack-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; } .autul-country-grid-card { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; background: rgba(5, 17, 34, 0.85) !important; border: 1px solid rgba(0, 229, 255, 0.22) !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.18s ease !important; box-sizing: border-box !important; } .autul-country-grid-card:hover { background: rgba(0, 229, 255, 0.15) !important; border-color: #00e5ff !important; box-shadow: 0 0 14px rgba(0, 229, 255, 0.45) !important; transform: translateY(-1.5px) !important; } .autul-grid-card-flag { width: 24px !important; height: 16px !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .autul-grid-card-flag svg, .autul-grid-card-flag .autul-svg-flag { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 2px !important; } .autul-grid-card-name { flex: 1 !important; color: #e1f4ff !important; font-size: 13px !important; font-weight: 600 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .autul-grid-card-code { color: #00e5ff !important; font-size: 12px !important; font-weight: 700 !important; margin-left: auto !important; flex-shrink: 0 !important; } /* ========================================================================== Ultra-Specific Single-Box Username Fix (Eliminates Nested Overlapping Box) ========================================================================== */ .woocommerce-account #autulUsernameBox, .autul-portal-card #autulUsernameBox, .autul-username-single-box { display: flex !important; align-items: center !important; width: 100% !important; min-height: 48px !important; background: rgba(6, 14, 28, 0.95) !important; border: 1.5px solid rgba(0, 229, 255, 0.35) !important; border-radius: 8px !important; padding: 0 14px !important; box-sizing: border-box !important; transition: all 0.25s ease !important; overflow: hidden !important; } .woocommerce-account #autulUsernameBox:focus-within, .autul-username-single-box:focus-within { border-color: #00e5ff !important; box-shadow: 0 0 16px rgba(0, 229, 255, 0.45) !important; } .autul-username-fixed-at { color: #00e5ff !important; font-weight: 800 !important; font-size: 16px !important; text-shadow: 0 0 8px rgba(0, 229, 255, 0.8) !important; user-select: none !important; flex-shrink: 0 !important; margin-right: 8px !important; line-height: 1 !important; border: none !important; background: transparent !important; box-shadow: none !important; } .woocommerce-account input#autul_reg_user, .woocommerce-account .autul-username-single-box input[type="text"], .autul-portal-card input#autul_reg_user, #autul_reg_user, .autul-username-bare-input { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; padding: 10px 0 !important; margin: 0 !important; color: #ffffff !important; font-size: 15px !important; font-weight: 500 !important; width: 100% !important; } .woocommerce-account input#autul_reg_user:focus, #autul_reg_user:focus, .autul-username-bare-input:focus { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; } /* ========================================================================== Profile Card & Form Spacing (Clean, Generous Breathing Room) ========================================================================== */ .autul-account-hero-card { margin-bottom: 28px !important; } .autul-account-form-section { margin-bottom: 32px !important; } .autul-account-hub-grid { margin-top: 8px !important; } /* ========================================================================== Password Hardness Level Indicator ========================================================================== */ .autul-pwd-strength-wrap { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-top: 8px !important; padding: 10px 12px !important; background: rgba(4, 14, 28, 0.75) !important; border: 1px solid rgba(0, 229, 255, 0.2) !important; border-radius: 8px !important; } .autul-pwd-strength-track { width: 100% !important; height: 6px !important; background: rgba(2, 6, 12, 0.9) !important; border-radius: 4px !important; overflow: hidden !important; } .autul-pwd-strength-bar { height: 100% !important; border-radius: 5px !important; transition: width 0.3s ease-out, background-color 0.3s ease-out, box-shadow 0.3s ease-out !important; } .autul-pwd-strength-meta { display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 11.5px !important; } .autul-pwd-strength-label { color: rgba(220, 240, 255, 0.7) !important; } .autul-pwd-strength-text { font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } /* ========================================================================== In-Theme Centered Security Notice Modal (Mobile & PC Responsive) ========================================================================== */ .autul-security-modal-backdrop { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(1, 6, 14, 0.8) !important; backdrop-filter: blur(8px) !important; z-index: 99999999 !important; display: none !important; align-items: center !important; justify-content: center !important; padding: 16px !important; box-sizing: border-box !important; } .autul-security-modal-backdrop.is-open { display: flex !important; animation: autulModalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } .autul-security-modal-card { width: 100% !important; max-width: 420px !important; background: #040e1d !important; border: 1.5px solid #00e5ff !important; border-radius: 14px !important; padding: 24px 22px !important; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 229, 255, 0.4) !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; box-sizing: border-box !important; } .autul-security-modal-icon-badge { width: 52px !important; height: 52px !important; border-radius: 50% !important; background: rgba(0, 229, 255, 0.12) !important; border: 1px solid #00e5ff !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 0 15px rgba(0, 229, 255, 0.5) !important; margin-bottom: 12px !important; } .autul-sec-icon { font-size: 26px !important; } .autul-security-modal-title { margin: 0 0 8px 0 !important; font-size: 17px !important; font-weight: 800 !important; color: #00e5ff !important; text-shadow: 0 0 10px rgba(0, 229, 255, 0.6) !important; } .autul-security-modal-desc { margin: 0 0 18px 0 !important; font-size: 13.5px !important; color: #e1f4ff !important; line-height: 1.5 !important; } .autul-security-modal-btn { padding: 10px 28px !important; background: linear-gradient(135deg, #ffcc00, #ff9900) !important; border: none !important; border-radius: 24px !important; color: #050d1a !important; font-size: 13.5px !important; font-weight: 800 !important; cursor: pointer !important; box-shadow: 0 0 16px rgba(255, 204, 0, 0.45) !important; transition: all 0.2s ease !important; } .autul-security-modal-btn:hover { transform: scale(1.05) !important; box-shadow: 0 0 22px rgba(255, 204, 0, 0.7) !important; } /* ========================================================================== TOS Gesture Swipe Animation (Matching User Hand/Chevron Diagram) ========================================================================== */ .autul-swipe-card-box { background: rgba(3, 14, 28, 0.96) !important; border: 2px solid #00e5ff !important; border-radius: 20px !important; padding: 18px 24px !important; box-shadow: 0 0 45px rgba(0, 229, 255, 0.8), inset 0 0 20px rgba(0, 229, 255, 0.4) !important; display: flex !important; align-items: center !important; justify-content: center !important; backdrop-filter: blur(8px) !important; } .autul-swipe-art-container { position: relative !important; width: 72px !important; height: 110px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .autul-chevron-stack { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; position: absolute !important; top: 4px !important; } .autul-chevron { font-size: 13px !important; line-height: 1 !important; color: rgba(0, 229, 255, 0.3) !important; font-weight: 900 !important; } .autul-chevron.c1 { animation: autulChevronFlow 1.1s infinite 0.1s !important; } .autul-chevron.c2 { animation: autulChevronFlow 1.1s infinite 0.25s !important; } .autul-chevron.c3 { animation: autulChevronFlow 1.1s infinite 0.4s !important; } .autul-chevron.c4 { animation: autulChevronFlow 1.1s infinite 0.55s !important; } @keyframes autulChevronFlow { 0%, 100% { color: rgba(0, 229, 255, 0.25); text-shadow: none; } 50% { color: #00ff88; text-shadow: 0 0 8px #00ff88; } } .autul-touch-anchor { position: absolute !important; bottom: 24px !important; width: 20px !important; height: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .autul-touch-dot { width: 14px !important; height: 14px !important; border-radius: 50% !important; background: #00e5ff !important; box-shadow: 0 0 10px #00e5ff !important; } .autul-touch-pulse-ring { position: absolute !important; width: 26px !important; height: 26px !important; border-radius: 50% !important; border: 1.5px solid #00e5ff !important; animation: autulTouchRingPulse 1.1s infinite ease-out !important; } @keyframes autulTouchRingPulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } } .autul-hand-glide-wrap { position: absolute !important; bottom: 0px !important; animation: autulHandSwipeUp 1.1s infinite ease-in-out !important; } @keyframes autulHandSwipeUp { 0% { transform: translateY(16px); opacity: 0.6; } 35% { transform: translateY(0px); opacity: 1; } 70% { transform: translateY(-26px); opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } } /* ========================================================================== AuTuLoniyo Top Spenders Leaderboard Modal & Button Styles ========================================================================== */ .autul-rank-leaderboard-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 5px 14px !important; background: rgba(255, 204, 0, 0.12) !important; border: 1px solid rgba(255, 204, 0, 0.45) !important; border-radius: 20px !important; color: #ffcc00 !important; font-size: 12px !important; font-weight: 800 !important; cursor: pointer !important; transition: all 0.2s ease !important; margin-top: 4px !important; width: max-content !important; } .autul-rank-leaderboard-btn:hover { background: rgba(255, 204, 0, 0.22) !important; box-shadow: 0 0 14px rgba(255, 204, 0, 0.5) !important; transform: scale(1.03) !important; } .autul-rank-modal-backdrop { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(1, 6, 14, 0.88) !important; backdrop-filter: blur(10px) !important; z-index: 999999 !important; display: none !important; align-items: center !important; justify-content: center !important; padding: 20px !important; box-sizing: border-box !important; } .autul-rank-modal-backdrop.is-open { display: flex !important; animation: autulModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } .autul-rank-modal-card { width: 100% !important; max-width: 680px !important; max-height: 84vh !important; background: #030e1d !important; border: 1.5px solid #ffcc00 !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 204, 0, 0.35) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; box-sizing: border-box !important; } .autul-rank-modal-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 16px 22px !important; border-bottom: 1px solid rgba(255, 204, 0, 0.3) !important; background: rgba(12, 22, 38, 0.95) !important; } .autul-rank-modal-title-wrap { display: flex !important; align-items: center !important; gap: 12px !important; } .autul-rank-modal-icon { font-size: 26px !important; } .autul-rank-modal-title { margin: 0 !important; font-size: 18px !important; font-weight: 800 !important; color: #ffcc00 !important; text-shadow: 0 0 10px rgba(255, 204, 0, 0.5) !important; line-height: 1.2 !important; } .autul-rank-modal-subtitle { font-size: 11.5px !important; color: rgba(220, 240, 255, 0.7) !important; display: block !important; margin-top: 2px !important; } .autul-rank-modal-close { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 204, 0, 0.3) !important; color: #ffcc00 !important; font-size: 16px !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; } .autul-rank-modal-close:hover { background: rgba(255, 75, 75, 0.2) !important; border-color: #ff4b4b !important; color: #ff9999 !important; } .autul-rank-modal-toolbar { padding: 12px 22px !important; background: rgba(4, 12, 24, 0.9) !important; border-bottom: 1px solid rgba(0, 229, 255, 0.15) !important; } .autul-rank-tabs { display: flex !important; gap: 10px !important; } .autul-rank-tab { flex: 1 !important; padding: 9px 16px !important; background: rgba(6, 20, 38, 0.8) !important; border: 1px solid rgba(0, 229, 255, 0.3) !important; border-radius: 8px !important; color: rgba(220, 240, 255, 0.8) !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.2s ease !important; text-align: center !important; } .autul-rank-tab.is-active, .autul-rank-tab:hover { background: rgba(255, 204, 0, 0.16) !important; border-color: #ffcc00 !important; color: #ffcc00 !important; box-shadow: 0 0 12px rgba(255, 204, 0, 0.35) !important; } .autul-rank-modal-body { flex: 1 !important; overflow-y: auto !important; padding: 16px 22px !important; } .autul-rank-table { display: flex !important; flex-direction: column !important; gap: 8px !important; } .autul-rank-row { display: flex !important; align-items: center !important; padding: 10px 14px !important; background: rgba(6, 18, 36, 0.75) !important; border: 1px solid rgba(0, 229, 255, 0.18) !important; border-radius: 10px !important; gap: 12px !important; transition: all 0.18s ease !important; } .autul-rank-row.is-top3 { background: rgba(18, 30, 48, 0.9) !important; border-color: rgba(255, 204, 0, 0.4) !important; } .autul-rank-row:hover { border-color: #00e5ff !important; box-shadow: 0 0 12px rgba(0, 229, 255, 0.3) !important; transform: translateX(2px) !important; } .autul-rank-pos-col { width: 58px !important; flex-shrink: 0 !important; } .autul-rank-badge { font-size: 13px !important; font-weight: 800 !important; color: #00e5ff !important; } .autul-pos-1 { color: #ffd700 !important; text-shadow: 0 0 8px #ffd700 !important; } .autul-pos-2 { color: #e0e0e0 !important; text-shadow: 0 0 8px #ffffff !important; } .autul-pos-3 { color: #cd7f32 !important; text-shadow: 0 0 8px #cd7f32 !important; } .autul-rank-user-col { flex: 1 !important; display: flex !important; align-items: center !important; gap: 10px !important; overflow: hidden !important; } .autul-rank-avatar { width: 32px !important; height: 32px !important; border-radius: 50% !important; overflow: hidden !important; border: 1px solid #00e5ff !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; background: #050d1a !important; } .autul-rank-avatar-img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .autul-rank-avatar-shield { font-size: 16px !important; } .autul-rank-username { color: #ffffff !important; font-size: 13.5px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .autul-rank-tier-col { flex-shrink: 0 !important; } .autul-rank-tier-pill { display: inline-block !important; padding: 3px 8px !important; font-size: 11px !important; font-weight: 700 !important; border: 1px solid !important; border-radius: 12px !important; background: rgba(0, 0, 0, 0.4) !important; } .autul-rank-spend-col { margin-left: auto !important; flex-shrink: 0 !important; } .autul-rank-spend-val { font-size: 13px !important; font-weight: 800 !important; color: #00ff88 !important; text-shadow: 0 0 8px rgba(0, 255, 136, 0.4) !important; } .autul-rank-empty { padding: 30px !important; text-align: center !important; color: rgba(220, 240, 255, 0.6) !important; } /* Leaderboard Privacy Settings in Profile */ .autul-rank-privacy-box { background: rgba(4, 14, 28, 0.75) !important; border: 1px solid rgba(0, 229, 255, 0.25) !important; border-radius: 10px !important; padding: 14px 18px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 10px !important; } .autul-rank-privacy-head { display: flex !important; align-items: center !important; gap: 10px !important; } .autul-rank-privacy-icon { font-size: 22px !important; } .autul-rank-privacy-titles { display: flex !important; flex-direction: column !important; gap: 2px !important; } .autul-rank-privacy-title { font-size: 13.5px !important; color: #ffcc00 !important; } .autul-rank-privacy-desc { font-size: 11px !important; color: rgba(220, 240, 255, 0.65) !important; } .autul-rank-privacy-grid { display: flex !important; flex-direction: column !important; gap: 8px !important; } .autul-rank-toggle-item { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 12.5px !important; color: #e1f4ff !important; cursor: pointer !important; } /* ========================================================================== Mobile Optical Centering for CREATE ACCOUNT Button ========================================================================== */ .autul-account-submit-btn, button.autul-account-submit-btn, input[type="submit"].autul-account-submit-btn { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1 !important; min-height: 52px !important; padding: 14px 20px !important; box-sizing: border-box !important; font-size: 14.5px !important; font-weight: 900 !important; letter-spacing: 0.05em !important; } /* ========================================================================== PC Mouse Scroll Animation Visual ========================================================================== */ .autul-mouse-scroll-card { padding: 22px 28px !important; } .autul-pc-mouse-visual { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; } .autul-mouse-wheel { animation: autulMouseWheelRoll 1.1s infinite ease-in-out !important; } @keyframes autulMouseWheelRoll { 0% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(8px); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } } .autul-mouse-flow-chevrons { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 1px !important; margin-top: 2px !important; } .autul-flow-arrow { font-size: 12px !important; color: rgba(0, 229, 255, 0.3) !important; line-height: 1 !important; } .autul-flow-arrow.fa1 { animation: autulFlowArrow 1.1s infinite 0.1s !important; } .autul-flow-arrow.fa2 { animation: autulFlowArrow 1.1s infinite 0.3s !important; } .autul-flow-arrow.fa3 { animation: autulFlowArrow 1.1s infinite 0.5s !important; } @keyframes autulFlowArrow { 0%, 100% { color: rgba(0, 229, 255, 0.2); } 50% { color: #00ff88; text-shadow: 0 0 6px #00ff88; } } /* Fixed Ceiling Overlap on Country Modal */ .autul-country-modal-card { box-sizing: border-box !important; border: 1.5px solid #00e5ff !important; border-radius: 16px !important; overflow: hidden !important; margin: 0 !important; } .autul-country-modal-header { border-top-left-radius: 14px !important; border-top-right-radius: 14px !important; margin: 0 !important; box-sizing: border-box !important; } /* ========================================================================== Dual Shimmer & Lightning Blue Glow on Top Spender Rank Button ========================================================================== */ .autul-shimmer-glow-btn { position: relative !important; overflow: hidden !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 18px !important; background: linear-gradient(135deg, rgba(255, 204, 0, 0.15) 0%, rgba(0, 229, 255, 0.18) 100%) !important; border: 1.5px solid rgba(255, 204, 0, 0.6) !important; border-radius: 24px !important; color: #ffcc00 !important; font-size: 13px !important; font-weight: 800 !important; cursor: pointer !important; transition: all 0.25s ease !important; box-shadow: 0 0 16px rgba(255, 204, 0, 0.5), 0 0 24px rgba(0, 229, 255, 0.35) !important; animation: autulDualShimmerGlow 3s infinite alternate ease-in-out !important; } @keyframes autulDualShimmerGlow { 0% { border-color: rgba(255, 204, 0, 0.7); box-shadow: 0 0 14px rgba(255, 204, 0, 0.6), 0 0 24px rgba(0, 229, 255, 0.35); color: #ffcc00; } 50% { border-color: rgba(0, 229, 255, 0.85); box-shadow: 0 0 20px rgba(0, 229, 255, 0.7), 0 0 30px rgba(255, 204, 0, 0.45); color: #00e5ff; } 100% { border-color: rgba(255, 204, 0, 0.85); box-shadow: 0 0 18px rgba(255, 204, 0, 0.7), 0 0 26px rgba(0, 229, 255, 0.5); color: #ffcc00; } } /* Security Notice 2 Lines */ .autul-security-modal-desc { display: flex !important; flex-direction: column !important; gap: 6px !important; align-items: center !important; text-align: center !important; margin: 0 0 20px 0 !important; font-size: 15px !important; font-weight: 600 !important; color: #e1f4ff !important; } .autul-sec-line1 { color: #ffcc00 !important; font-weight: 700 !important; } .autul-sec-line2 { color: #00e5ff !important; font-weight: 800 !important; font-size: 16px !important; text-shadow: 0 0 8px rgba(0, 229, 255, 0.6) !important; } /* Avatar Preview Circle Refinements */ .has-preview #autulAvatarCircleBadge, #autulAvatarQuickSaveWrap[style*="block"] ~ * #autulAvatarCircleBadge { display: none !important; } .autul-avatar-notice-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; border-radius: 50% !important; background: #00ff88 !important; color: #050d1a !important; font-weight: 900 !important; font-size: 13px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin-right: 10px !important; box-shadow: 0 0 10px rgba(0, 255, 136, 0.5) !important; } /* ========================================================================== AuTuLoniyo Refined Security Modal, Password & Status Styles ========================================================================== */ /* Security Modal 3-Second Loading Bar */ .autul-sec-timer-track { width: 100% !important; max-width: 260px !important; height: 6px !important; background: rgba(2, 6, 14, 0.9) !important; border: 1px solid rgba(0, 229, 255, 0.35) !important; border-radius: 4px !important; overflow: hidden !important; margin: 14px auto 4px auto !important; position: relative !important; } .autul-sec-timer-bar { height: 100% !important; width: 0%; background: linear-gradient(90deg, #ffcc00, #ff7700) !important; box-shadow: 0 0 14px rgba(255, 204, 0, 0.85) !important; border-radius: 4px !important; } .autul-sec-line1 { display: block !important; color: #ffaa00 !important; font-weight: 700 !important; font-size: 15px !important; margin-bottom: 4px !important; } .autul-sec-line2 { display: block !important; color: #00e5ff !important; font-weight: 800 !important; font-size: 16px !important; letter-spacing: 0.5px !important; } /* Password Field Wrap & Show/Hide Eye Toggle */ .autul-password-wrap { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; } .autul-password-wrap .autul-password-input { width: 100% !important; padding-right: 48px !important; } .autul-password-toggle-btn { position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; background: transparent !important; border: none !important; color: rgba(0, 229, 255, 0.75) !important; cursor: pointer !important; font-size: 16px !important; line-height: 1 !important; padding: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; transition: all 0.2s ease !important; z-index: 5 !important; } .autul-password-toggle-btn:hover { color: #00e5ff !important; background: rgba(0, 229, 255, 0.15) !important; filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.6)) !important; } .autul-password-toggle-btn.is-showing { color: #ffaa00 !important; filter: drop-shadow(0 0 8px rgba(255, 170, 0, 0.7)) !important; } /* Password Hardness Bar Refinements */ .autul-pwd-strength-wrap { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-top: 8px !important; padding: 10px 14px !important; background: rgba(4, 14, 28, 0.85) !important; border: 1px solid rgba(0, 229, 255, 0.25) !important; border-radius: 8px !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important; } .autul-pwd-strength-track { width: 100% !important; height: 8px !important; background: rgba(2, 6, 12, 0.95) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 5px !important; overflow: hidden !important; position: relative !important; } .autul-pwd-strength-bar { height: 100% !important; min-width: 0 !important; transition: width 0.3s ease-out, background-color 0.3s ease-out, box-shadow 0.3s ease-out !important; border-radius: 5px !important; } .autul-pwd-strength-meta { display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 12px !important; } .autul-pwd-strength-label { color: rgba(220, 240, 255, 0.75) !important; font-weight: 600 !important; } .autul-pwd-strength-text { font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; font-size: 12px !important; } /* Customer Status Detail Collapsible Card */ .autul-status-detail-box { width: 100% !important; animation: autulModalFadeIn 0.2s ease forwards !important; } .autul-status-detail-card { background: rgba(4, 16, 32, 0.9) !important; border: 1px solid rgba(0, 229, 255, 0.25) !important; border-radius: 8px !important; padding: 12px 14px !important; } .autul-status-detail-head { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 6px !important; font-size: 13.5px !important; } .autul-status-detail-spend { font-size: 12px !important; color: #00e5ff !important; font-weight: 700 !important; } .autul-status-detail-perks { margin: 0 0 8px 0 !important; font-size: 12.5px !important; color: rgba(220, 240, 255, 0.85) !important; line-height: 1.4 !important; } .autul-status-tiers-summary { padding-top: 6px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; font-size: 11px !important; color: rgba(220, 240, 255, 0.65) !important; } /* Sign In Submit Button Centering */ .autul-signin-btn-centered { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 8px !important; line-height: 1.2 !important; padding: 14px 24px !important; } /* Avatar Preview Badge Removal */ .autul-avatar-circle-badge { display: none !important; } /* Password Field Wrap & Show/Hide Text Toggle */ .autul-password-wrap { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; } .autul-password-wrap .autul-password-input { width: 100% !important; padding-right: 68px !important; } .autul-password-toggle-btn { position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; background: rgba(0, 229, 255, 0.08) !important; border: 1px solid rgba(0, 229, 255, 0.3) !important; border-radius: 6px !important; color: #00e5ff !important; cursor: pointer !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; padding: 5px 10px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; z-index: 5 !important; user-select: none !important; } .autul-password-toggle-btn:hover { color: #ffffff !important; background: rgba(0, 229, 255, 0.2) !important; border-color: #00e5ff !important; box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important; } .autul-password-toggle-btn.is-showing { background: rgba(255, 170, 0, 0.12) !important; border-color: rgba(255, 170, 0, 0.5) !important; color: #ffaa00 !important; box-shadow: 0 0 10px rgba(255, 170, 0, 0.4) !important; } .autul-password-toggle-btn.is-showing:hover { background: rgba(255, 170, 0, 0.25) !important; border-color: #ffaa00 !important; color: #ffffff !important; } /* ========================================================================== Profile Card & Membership Status Alignment Refinements ========================================================================== */ /* Center Inactive Member badge on mobile and PC */ .autul-account-badge-row { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .autul-account-member-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1.2 !important; } @media (max-width: 768px) { .autul-account-hero-info { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; width: 100% !important; } .autul-account-badge-row { margin: 0 auto 8px auto !important; align-self: center !important; justify-content: center !important; text-align: center !important; } .autul-account-member-badge { align-self: center !important; justify-content: center !important; text-align: center !important; } } /* Membership Status Modal Side-by-Side Row */ .autul-status-pill-and-rank-row { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; flex-wrap: nowrap !important; } .autul-status-modal-rank-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 5px 14px !important; font-size: 11.5px !important; font-weight: 800 !important; border-radius: 999px !important; white-space: nowrap !important; margin: 0 !important; line-height: 1.2 !important; cursor: pointer !important; } /* ========================================================================== TOS Progress Row PC Center Alignment (Untouched on Mobile) ========================================================================== */ @media (min-width: 769px) { .autul-terms-progress-row { display: flex !important; align-items: center !important; justify-content: center !important; gap: 28px !important; margin-top: 8px !important; } } /* ========================================================================== AuTuLoniyo Account Badge Responsive Alignment (PC: Top of Name / Mobile: Dead Center) ========================================================================== */ /* PC (Default): Aligned directly on top of customer name */ .autul-account-badge-row { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; align-self: flex-start !important; gap: 8px !important; margin: 0 0 6px 0 !important; width: auto !important; } .autul-account-member-badge { align-self: flex-start !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; line-height: 1.2 !important; } .autul-badge-balance-spacer { display: none !important; } /* Mobile: Perfectly centered in the middle of the screen */ @media (max-width: 768px) { .autul-account-hero-top { flex-direction: column !important; align-items: center !important; text-align: center !important; } .autul-account-hero-info { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; width: 100% !important; } .autul-account-badge-row { display: flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; margin: 0 auto 8px auto !important; width: 100% !important; gap: 8px !important; } .autul-badge-balance-spacer { display: inline-block !important; width: 22px !important; /* Exact width of the (i) info button to guarantee dead center */ height: 22px !important; visibility: hidden !important; flex-shrink: 0 !important; } .autul-account-member-badge { align-self: center !important; justify-content: center !important; text-align: center !important; } } /* ========================================================================== AuTuLoniyo Country Search & Highlighting Refinements (PC Modal & Mobile List) ========================================================================== */ /* PC Modal Filter & Match Highlight */ .autul-country-grid-card.is-hidden { display: none !important; } .autul-country-cat-section.is-hidden { display: none !important; } .autul-country-grid-card.is-matched { display: flex !important; border: 1.5px solid #00e5ff !important; background: rgba(0, 229, 255, 0.22) !important; box-shadow: 0 0 18px rgba(0, 229, 255, 0.65), inset 0 0 10px rgba(0, 229, 255, 0.2) !important; transform: translateY(-2px) !important; } .autul-country-grid-card.is-matched .autul-grid-card-name { color: #00e5ff !important; font-weight: 800 !important; text-shadow: 0 0 10px rgba(0, 229, 255, 0.7) !important; } .autul-country-grid-card.is-matched .autul-grid-card-code { color: #ffffff !important; background: #00a8cc !important; box-shadow: 0 0 8px rgba(0, 229, 255, 0.7) !important; padding: 2px 6px !important; border-radius: 4px !important; font-weight: 800 !important; } /* Mobile Country Search Bar: Hidden on PC, Visible on Mobile */ .autul-mobile-country-search-wrap { display: none !important; } @media (max-width: 768px) { .autul-mobile-country-search-wrap { display: block !important; margin-bottom: 8px !important; width: 100% !important; } .autul-mobile-country-search { width: 100% !important; padding: 9px 14px !important; font-size: 13px !important; background: rgba(4, 14, 28, 0.9) !important; border: 1px solid rgba(0, 229, 255, 0.4) !important; border-radius: 8px !important; color: #ffffff !important; box-sizing: border-box !important; } .autul-mobile-country-search:focus { border-color: #00e5ff !important; box-shadow: 0 0 12px rgba(0, 229, 255, 0.5) !important; outline: none !important; } } /* ========================================================================== Mobile-Only Refinements for Membership Status Modal (PC Untouched) ========================================================================== */ @media (max-width: 768px) { .autul-status-modal-backdrop { padding: 12px 10px 48px 10px !important; height: 100% !important; min-height: 100dvh !important; box-sizing: border-box !important; } .autul-status-modal-card { width: 95vw !important; max-height: calc(100dvh - 64px) !important; padding: 18px 14px 32px 14px !important; border-radius: 18px !important; margin: auto !important; box-sizing: border-box !important; } .autul-status-pill-and-rank-row { display: flex !important; flex-direction: column !important; /* One button per line on mobile */ align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; } .autul-status-current-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 6px 18px !important; font-size: 12.5px !important; width: auto !important; } .autul-status-modal-rank-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 6px 18px !important; font-size: 11.5px !important; width: auto !important; } .autul-status-modal-footer { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 12px !important; padding-top: 14px !important; margin-bottom: 12px !important; /* Complete bottom visibility */ } .autul-status-policy-note { text-align: center !important; font-size: 10.5px !important; max-width: 100% !important; } .autul-status-modal-ok-btn { width: 100% !important; max-width: 240px !important; padding: 10px 20px !important; font-size: 13px !important; } } /* ========================================================================== AuTuLoniyo Customer Status Card Header & 2-Line Perks Styling ========================================================================== */ /* PC Resolution: Title on left, 'You Spent: ...' on right */ .autul-status-detail-head { margin-bottom: 8px !important; } .autul-status-title-spend-group { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; width: 100% !important; } .autul-status-head-title { font-size: 14.5px !important; font-weight: 800 !important; letter-spacing: 0.3px !important; } .autul-status-detail-spend { color: #00e5ff !important; font-weight: 700 !important; font-size: 12px !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; } .autul-spend-prefix { color: rgba(220, 240, 255, 0.75) !important; font-weight: 600 !important; } /* 2-Line Elegant Tier Privileges Split */ .autul-status-detail-perks { margin: 0 0 10px 0 !important; font-size: 12.5px !important; color: rgba(220, 240, 255, 0.9) !important; line-height: 1.5 !important; } .autul-perks-head-label { display: inline-block !important; margin-right: 4px !important; } .autul-status-perks-line { display: block !important; margin-top: 2px !important; } .autul-status-tiers-summary { padding-top: 8px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; font-size: 11.5px !important; color: rgba(220, 240, 255, 0.75) !important; } /* Mobile Resolution: Put 'You Spent: ...' info right beneath Inactive Member title */ @media (max-width: 768px) { .autul-status-title-spend-group { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 3px !important; width: 100% !important; } .autul-status-head-title { text-align: center !important; font-size: 14.5px !important; } .autul-status-detail-spend { display: block !important; text-align: center !important; font-size: 11.5px !important; white-space: normal !important; margin-top: 2px !important; } .autul-status-detail-perks { text-align: center !important; } .autul-status-tiers-summary { text-align: center !important; } } /* ========================================================================== AuTuLoniyo Email OTP Verification Card Styling ========================================================================== */ .autul-otp-card { max-width: 440px !important; } .autul-otp-input-wrap { display: flex !important; justify-content: center !important; margin: 10px 0 !important; } .autul-otp-code-input { font-family: monospace, -apple-system, sans-serif !important; font-size: 26px !important; font-weight: 800 !important; letter-spacing: 10px !important; text-align: center !important; color: #00e5ff !important; background: rgba(3, 12, 26, 0.95) !important; border: 1.5px solid #00e5ff !important; box-shadow: 0 0 16px rgba(0, 229, 255, 0.35) !important; border-radius: 12px !important; padding: 12px 16px !important; width: 220px !important; max-width: 100% !important; } .autul-otp-code-input:focus { border-color: #00e5ff !important; box-shadow: 0 0 24px rgba(0, 229, 255, 0.65) !important; outline: none !important; } /* ========================================================================== AuTuLoniyo 64-District Searchable City Selector, DOB Age Notice & OTP Resend ========================================================================== */ /* 64-District Dropdown Trigger & Menu */ .autul-bd-city-picker-wrap { position: relative !important; width: 100% !important; } .autul-bd-city-trigger { width: 100% !important; padding: 12px 14px !important; background: rgba(4, 12, 24, 0.85) !important; border: 1.5px solid rgba(0, 229, 255, 0.35) !important; border-radius: 8px !important; color: #ffffff !important; font-size: 14px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; cursor: pointer !important; transition: all 0.2s ease !important; text-align: left !important; box-sizing: border-box !important; } .autul-bd-city-trigger:hover, .autul-bd-city-trigger:focus { border-color: #00e5ff !important; box-shadow: 0 0 14px rgba(0, 229, 255, 0.35) !important; outline: none !important; } .autul-bd-city-trigger-arrow { color: #00e5ff !important; font-size: 11px !important; } .autul-bd-city-dropdown-menu { position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; width: 100% !important; background: #051326 !important; border: 1.5px solid #00e5ff !important; border-radius: 10px !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 24px rgba(0, 229, 255, 0.35) !important; z-index: 99999 !important; overflow: hidden !important; box-sizing: border-box !important; } .autul-bd-city-search-box { padding: 10px !important; background: #030c18 !important; border-bottom: 1px solid rgba(0, 229, 255, 0.25) !important; position: sticky !important; top: 0 !important; z-index: 2 !important; } .autul-bd-city-search-input { width: 100% !important; padding: 9px 12px !important; background: rgba(6, 20, 38, 0.95) !important; border: 1px solid rgba(0, 229, 255, 0.45) !important; border-radius: 6px !important; color: #ffffff !important; font-size: 13px !important; box-sizing: border-box !important; } .autul-bd-city-search-input:focus { border-color: #00e5ff !important; box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important; outline: none !important; } .autul-bd-city-list { max-height: 240px !important; overflow-y: auto !important; padding: 6px 0 !important; } .autul-bd-city-group-label { padding: 6px 12px 4px 12px !important; font-size: 10.5px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: #ffcc00 !important; background: rgba(255, 204, 0, 0.06) !important; border-bottom: 1px solid rgba(255, 204, 0, 0.15) !important; } .autul-bd-city-option { padding: 9px 14px !important; font-size: 13.5px !important; color: #e2f2ff !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: space-between !important; transition: background 0.15s ease !important; } .autul-bd-city-option:hover { background: rgba(0, 229, 255, 0.18) !important; color: #00e5ff !important; font-weight: 700 !important; } .autul-bd-city-option.is-selected { background: rgba(0, 229, 255, 0.14) !important; color: #00e5ff !important; font-weight: 800 !important; } .autul-city-check { color: #00ff88 !important; font-weight: 900 !important; } /* DOB Age Validation Notices */ .autul-dob-age-notice { margin-top: 8px !important; padding: 12px 14px !important; border-radius: 10px !important; font-size: 12.5px !important; line-height: 1.5 !important; } .autul-dob-age-notice.is-under15 { background: rgba(255, 71, 87, 0.14) !important; border: 1.5px solid #ff4757 !important; color: #ff6b81 !important; box-shadow: 0 0 14px rgba(255, 71, 87, 0.25) !important; } .autul-dob-age-notice.is-minor-consent { background: rgba(255, 170, 0, 0.14) !important; border: 1.5px solid #ffaa00 !important; color: #ffeaa7 !important; box-shadow: 0 0 16px rgba(255, 170, 0, 0.25) !important; } /* OTP Verification Resend Button & 60s Cooldown */ .autul-otp-actions-row { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 14px !important; margin-top: 18px !important; padding-top: 16px !important; border-top: 1px solid rgba(0, 229, 255, 0.18) !important; } .autul-resend-otp-form { width: 100% !important; display: flex !important; justify-content: center !important; margin: 0 !important; } .autul-resend-otp-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 10px 22px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.04em !important; color: #00e5ff !important; background: rgba(0, 229, 255, 0.12) !important; border: 1.5px solid rgba(0, 229, 255, 0.55) !important; box-shadow: 0 0 14px rgba(0, 229, 255, 0.3) !important; cursor: pointer !important; transition: all 0.2s ease !important; } .autul-resend-otp-btn:hover:not(:disabled) { background: rgba(0, 229, 255, 0.25) !important; border-color: #00e5ff !important; color: #ffffff !important; box-shadow: 0 0 20px rgba(0, 229, 255, 0.6) !important; transform: translateY(-1px) !important; } .autul-resend-otp-btn:disabled, .autul-resend-otp-btn.is-cooldown { color: rgba(148, 184, 215, 0.6) !important; background: rgba(10, 24, 44, 0.6) !important; border-color: rgba(148, 184, 215, 0.25) !important; box-shadow: none !important; cursor: not-allowed !important; transform: none !important; } .autul-otp-cancel-btn { font-size: 12.5px !important; font-weight: 700 !important; color: rgba(220, 240, 255, 0.7) !important; text-decoration: none !important; transition: color 0.2s ease !important; } .autul-otp-cancel-btn:hover { color: #00e5ff !important; } /* ========================================================================== AuTuLoniyo Mobile Country Dropdown with Inside Search & Mobile Spend Split ========================================================================== */ /* PC Default: Hide mobile custom country dropdown */ .autul-mob-country-dropdown-wrap { display: none !important; } /* Mobile Only: Replace native country select with custom searchable dropdown inside */ @media (max-width: 768px) { .autul-country-field-wrap { overflow: visible !important; } .autul-select-has-flag { display: none !important; } .autul-mob-country-dropdown-wrap { display: block !important; flex: 1 !important; position: relative !important; } .autul-mob-country-trigger { width: 100% !important; height: 46px !important; padding: 0 14px !important; background: transparent !important; border: none !important; color: #ffffff !important; font-size: 14px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; cursor: pointer !important; text-align: left !important; box-sizing: border-box !important; } .autul-mob-country-trigger-text { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .autul-mob-country-trigger-arrow { color: #00e5ff !important; font-size: 11px !important; margin-left: 8px !important; flex-shrink: 0 !important; } .autul-mob-country-menu { position: absolute !important; top: calc(100% + 6px) !important; left: -52px !important; width: calc(100% + 52px) !important; background: #051326 !important; border: 1.5px solid #00e5ff !important; border-radius: 10px !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95), 0 0 24px rgba(0, 229, 255, 0.4) !important; z-index: 999999 !important; overflow: hidden !important; box-sizing: border-box !important; } .autul-mob-country-list { max-height: 250px !important; overflow-y: auto !important; padding: 6px 0 !important; } .autul-mob-country-option { padding: 10px 14px !important; font-size: 13.5px !important; color: #e2f2ff !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: space-between !important; border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; } .autul-mob-country-option.is-selected { background: rgba(0, 229, 255, 0.16) !important; color: #00e5ff !important; font-weight: 800 !important; } } /* Spend Info: PC Side-by-Side vs Mobile 2-Line Stack */ .autul-spend-30d-part, .autul-spend-lifetime-part { display: inline !important; } .autul-spend-pc-sep { display: inline !important; margin: 0 4px !important; color: rgba(220, 240, 255, 0.5) !important; } @media (max-width: 768px) { .autul-status-detail-spend { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; text-align: center !important; } .autul-spend-30d-part, .autul-spend-lifetime-part { display: block !important; line-height: 1.35 !important; } .autul-spend-pc-sep { display: none !important; } } /* Date of Birth 3-Select Dropdowns (Month, Day, Year) */ .autul-dob-select-grid { display: grid !important; grid-template-columns: 1fr 1fr 1.15fr !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; } @media (max-width: 480px) { .autul-dob-select-grid { gap: 6px !important; } } .autul-dob-select { width: 100% !important; height: 42px !important; background: rgba(6, 17, 33, 0.88) !important; background-color: #061121 !important; border: 1px solid rgba(0, 229, 255, 0.32) !important; border-radius: 9px !important; color: #e0f2fe !important; font-size: 13px !important; font-weight: 600 !important; padding: 0 10px !important; cursor: pointer !important; outline: none !important; box-sizing: border-box !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .autul-dob-select:focus { border-color: #00e5ff !important; box-shadow: 0 0 10px rgba(0, 229, 255, 0.45) !important; } .autul-dob-select option { background: #08172c !important; color: #ffffff !important; } /* Ensure mobile country dropdown wrap is visible and select is hidden on mobile */ @media (max-width: 768px) { .autul-select.autul-select-has-flag { display: none !important; } .autul-mob-country-dropdown-wrap { display: block !important; } .autul-mobile-country-search-wrap { display: none !important; } } /* ========================================================================== AuTuLoniyo Living Flow & Glow Circulating Light Engine Living circulating light that flows smoothly across background & perimeter ========================================================================== */ @keyframes autulLivingFlowCirculate { 0% { background-position: 0% 50%; border-color: rgba(255, 204, 0, 0.75); box-shadow: 0 0 16px rgba(255, 204, 0, 0.5), 0 0 28px rgba(0, 229, 255, 0.35); } 25% { background-position: 50% 100%; border-color: rgba(0, 229, 255, 0.85); box-shadow: 0 0 22px rgba(0, 229, 255, 0.65), 0 0 32px rgba(0, 255, 136, 0.4); } 50% { background-position: 100% 50%; border-color: rgba(0, 255, 136, 0.85); box-shadow: 0 0 20px rgba(0, 255, 136, 0.6), 0 0 30px rgba(255, 204, 0, 0.45); } 75% { background-position: 50% 0%; border-color: rgba(0, 229, 255, 0.85); box-shadow: 0 0 22px rgba(0, 229, 255, 0.65), 0 0 32px rgba(255, 204, 0, 0.5); } 100% { background-position: 0% 50%; border-color: rgba(255, 204, 0, 0.75); box-shadow: 0 0 16px rgba(255, 204, 0, 0.5), 0 0 28px rgba(0, 229, 255, 0.35); } } @keyframes autulLivingPillFlow { 0% { background-position: 0% 50%; filter: drop-shadow(0 0 6px currentColor); } 50% { background-position: 100% 50%; filter: drop-shadow(0 0 15px currentColor); } 100% { background-position: 0% 50%; filter: drop-shadow(0 0 6px currentColor); } } @keyframes autulConicFlowRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .autul-rank-leaderboard-btn, .autul-shimmer-glow-btn, .autul-status-modal-rank-btn { position: relative !important; overflow: hidden !important; background: linear-gradient(125deg, rgba(255, 204, 0, 0.22) 0%, rgba(0, 229, 255, 0.28) 30%, rgba(0, 255, 136, 0.22) 60%, rgba(255, 204, 0, 0.22) 100%) !important; background-size: 300% 300% !important; border: 1.5px solid rgba(255, 204, 0, 0.7) !important; animation: autulLivingFlowCirculate 6s ease-in-out infinite !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; } .autul-rank-leaderboard-btn:hover, .autul-shimmer-glow-btn:hover, .autul-status-modal-rank-btn:hover { transform: scale(1.04) translateY(-1px) !important; box-shadow: 0 0 26px rgba(255, 204, 0, 0.85), 0 0 42px rgba(0, 229, 255, 0.75) !important; } .autul-rank-leaderboard-btn::before, .autul-shimmer-glow-btn::before, .autul-status-modal-rank-btn::before { content: "" !important; position: absolute !important; top: -65% !important; left: -65% !important; width: 230% !important; height: 230% !important; background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 204, 0, 0.45) 90deg, rgba(0, 229, 255, 0.6) 180deg, rgba(0, 255, 136, 0.5) 270deg, transparent 360deg) !important; animation: autulConicFlowRotate 5s linear infinite !important; opacity: 0.45 !important; pointer-events: none !important; border-radius: inherit !important; } .autul-rank-leaderboard-btn > *, .autul-shimmer-glow-btn > *, .autul-status-modal-rank-btn > * { position: relative !important; z-index: 2 !important; } /* Membership Status Indicators & Badges Living Flow */ .autul-status-current-pill, .autul-account-member-badge, .autul-profile-dropdown-tag, .autul-drawer-user-tag { position: relative !important; background-size: 250% 250% !important; animation: autulLivingPillFlow 5s ease infinite !important; } .autul-header-profile-badge-dot, .autul-profile-dropdown-tag span:first-child, .autul-status-current-pill span:first-child { animation: autulLivingPillFlow 4s ease infinite alternate !important; } /* Resend Button 50% Reduced Size */ .autul-resend-otp-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; padding: 5px 11px !important; border-radius: 999px !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 0.03em !important; color: #00e5ff !important; background: rgba(0, 229, 255, 0.12) !important; border: 1px solid rgba(0, 229, 255, 0.55) !important; box-shadow: 0 0 10px rgba(0, 229, 255, 0.25) !important; cursor: pointer !important; transition: all 0.2s ease !important; min-height: 24px !important; line-height: 1.2 !important; } .autul-resend-otp-btn .autul-resend-icon { font-size: 10px !important; line-height: 1 !important; } /* Verify Email Button 10% Reduced Size */ .autul-verify-email-btn { padding: 11px 20px !important; font-size: 13.5px !important; min-height: 42px !important; letter-spacing: 0.04em !important; width: auto !important; max-width: 90% !important; margin-left: auto !important; margin-right: auto !important; }