/* ===== Sticky Account FAB ===== */ .account-fab{ position: fixed; right: 5px; bottom: 2px; z-index: 1200; display: inline-flex; align-items: center; gap: 8px; height: 40px; /* small and tidy */ padding: 0 12px; border-radius: 999px; background: #8288ec; /* brand accent */ color: #fff; font-weight: 700; font-size: 0.92rem; text-decoration: none; box-shadow: 0 8px 22px rgba(0,0,0,.18); transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease; } .account-fab:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.22); } .account-fab:active{ transform: translateY(0); } .account-fab:focus-visible{ outline: 3px solid #e4d964; outline-offset: 3px; } .account-fab .fa-user{ font-size: 1rem; line-height: 1; } /* Extra-small variant on very narrow screens */ @media (max-width: 420px){ .account-fab{ height: 36px; padding: 0 10px; font-size: 0.86rem; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 6px 18px rgba(0,0,0,.18); } } /* If a bottom bar exists (e.g., single_tour's .mobile-cta), bump the FAB up so nothing overlaps. Add class "with-bottom-bar" to only on pages that have a bottom bar. */ body.with-bottom-bar .account-fab{ bottom: calc(76px + env(safe-area-inset-bottom)); /* 64px bar + spacing */ } /* Optional: hide the label on ultra-tight layouts (icon-only) */ /* @media (max-width: 360px){ .account-fab .af-label{ display: none; } .account-fab{ padding: 0 10px; } } */ /* Modal */ .auth-modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:1000} .auth-modal.open{display:flex} .auth-dialog{ width:min(680px,92vw); background:#fff; border-radius:16px; border:1px solid #e6ece9; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden; } .auth-close{ position:absolute; right:10px; top:8px; background:#fff; border:1px solid #e6ece9; width:36px; height:36px; border-radius:50%; cursor:pointer; } .auth-header{padding:16px 16px 10px; border-bottom:1px solid #eef2ef} .auth-header h2{margin:0} .auth-sub{margin:4px 0 10px; color:#6a7280} .auth-tabs{display:flex; gap:8px} .auth-tab{appearance:none; border:1px solid #e6ece9; background:#f7faf9; border-radius:999px; padding:8px 12px; font-weight:700; cursor:pointer} .auth-tab.active{background:#2e8b57; border-color:#2e8b57; color:#fff} .auth-panes{padding:14px 16px} .auth-pane{display:none} .auth-pane.active{display:block} .grid.two{display:grid; grid-template-columns:1fr 1fr; gap:10px} @media (max-width:640px){ .grid.two{grid-template-columns:1fr} } label{display:grid; gap:6px} input[type="text"], input[type="email"], input[type="tel"], input[type="password"]{ border:1px solid #d9e3de; border-radius:10px; padding:10px; font:inherit; width:100%; } .btn{display:inline-flex; align-items:center; gap:8px; border-radius:999px; border:1px solid #e6ece9; padding:10px 14px; font-weight:800; cursor:pointer; text-decoration:none} .btn.primary{background:#2e8b57; color:#fff; border-color:#2e8b57} .btn:hover{filter:brightness(.98)} .muted{color:#7a8491} .small{font-size:.9rem} .split{display:flex; justify-content:space-between; margin-top:8px} /* Better spacing so button doesn't touch fields */ .auth-pane .btn.primary { margin-top: 10px; } /* Password wrap with inline toggle button */ .has-toggle .pw-wrap{ position: relative; display: flex; align-items: center; } .has-toggle .pw-wrap input{ padding-right: 42px; /* space for eye button */ } .pw-toggle{ position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 1px solid #e6ece9; background: #fff; width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .pw-toggle i{ font-size: .95rem; color: #485260; } /* Match/mismatch hint */ .pw-hint{ margin-top: 4px; display: inline-block; } .pw-ok{ color: #2e8b57; font-weight: 700; } .pw-bad{ color: #c0392b; font-weight: 700; } /* Slightly larger gap between columns so nothing feels cramped */ .grid.two{ gap: 12px; }