/* AuthLayout.css (no-sidebar edition, RTL/LTR aware) */ /* ================= Root Vars ================= */ :root { --maroon: #8A1538; --maroon-600: #8A1538; --ink: #1d1d1f; --warning: #874D00; --card-border: #D3BBC2; --soft-bg: #FFFFFF; } p { padding: 0; margin: 0; } /* ================= Base Font & Direction ================= */ /* Same base font as site.css */ html, body { font-family: "Cairo", sans-serif; font-weight: 500; font-style: normal; } html[lang^="ar"], html[lang^="ar"] body, html[lang^="ar"] input, html[lang^="ar"] textarea, html[lang^="ar"] select, html[lang^="ar"] button { font-family: "Cairo", sans-serif; } /* Direction driven by (same pattern as site.css) */ html[dir="rtl"], body[dir="rtl"] { direction: rtl; } html[dir="ltr"], body[dir="ltr"] { direction: ltr; } /* Inputs: only force RTL when the page is RTL (if needed on auth pages) */ html[dir="rtl"] [type=email], html[dir="rtl"] [type=number], html[dir="rtl"] [type=tel], html[dir="rtl"] [type=url] { direction: rtl; } html[dir="ltr"] [type=email], html[dir="ltr"] [type=number], html[dir="ltr"] [type=tel], html[dir="ltr"] [type=url] { direction: ltr; } /* ================= Layout / App Content ================= */ .wrapper { display: flex; flex-direction: column; min-height: 100vh; } /* No sidebar → never reserve space */ .app-content { margin: 0 !important; padding: 0 !important; transition: none; } /* ================= Global Resets / Base ================= */ html, body { padding: 0 !important; margin: 0 !important; background-color: #FCF9FA !important; } html { position: relative; min-height: 100vh; height: 100%; } body { margin-bottom: 60px; min-height: 100vh; height: 100%; } /* Focus rings (same spirit as site.css) */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 4px rgba(211,187,194,.35); } /* ================= Cards / Common ================= */ .es-card { background: #fff; padding: 18px 16px; box-shadow: 0 2px 6px rgba(0,0,0,.03); border-radius: 8px; border: 1px solid #D3BBC2; animation: popIn .3s ease; } .es-card-warning { background: #fff; padding: 18px 16px; box-shadow: 0 2px 6px rgba(0,0,0,.03); border-radius: 8px; border: 1px solid #AD6800; } .link-underline { color: var(--maroon) !important; text-decoration-color: var(--maroon) !important; } /* Toggle */ .form-check-input.es-switch { width: 48px; height: 24px; border-color: #D3BBC2; background-color: #E9DFE4; cursor: pointer; } .form-check-input.es-switch:checked { background-color: var(--maroon); border-color: var(--maroon); } .form-check-input.es-switch:focus { box-shadow: 0 0 0 3px rgba(211,187,194,.5); } /* Base button geometry */ .es-search__btn { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; } /* Button side per direction */ html[dir="rtl"] .es-search__btn { right: 12px; left: auto; } html[dir="ltr"] .es-search__btn { left: 12px; right: auto; } /* ================= Buttons / Small UI Bits ================= */ /* Use logical margin so it flips in RTL/LTR */ .req-star { color: #dc3545; margin-inline-start: .25rem; } .btn-maroon { background: var(--maroon) !important; border: 1px solid var(--maroon) !important; color: #fff !important; border-radius: 8px !important; box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05) !important; transition: all .2s ease; } .btn-maroon:hover { background: var(--maroon-600); border-color: var(--maroon-600); } .btn-maroon-outline { display: flex; width: 182px; padding: 10px; justify-content: center; align-items: center; gap: 10px; border-radius: 8px; border: 1px solid #8A1538; box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05); } /* Link color */ a { color: #8A1538; text-decoration: underline; text-decoration-color: #8A1538; } /* ================= Success / Error Cards ================= */ .es-success { padding: 25px 16px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.05); max-width: 420px; min-height: 400px; margin-inline: auto; } .es-success__icon-wrap { background: #F6FFED; border-radius: 12px; padding: 84px; display: flex; justify-content: center; margin-bottom: 20px; } .es-success__icon { background: #52C41A; color: #fff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 0 0 16px rgba(76,175,80,.15); } .es-success__icon i { font-weight: bold; } .es-success__title { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; color: #1d1d1f; } .es-success__desc { font-size: .95rem; color: #555; margin-bottom: 20px; line-height: 1.6; } .es-error { padding: 25px 16px; background: #fff; border: 1px solid #E9DFE4; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.05); max-width: 420px; min-height: 400px; margin-inline: auto; } .es-error__icon-wrap { background: #FFF1F0; border-radius: 12px; padding: 84px; display: flex; justify-content: center; margin-bottom: 20px; } .es-error .eicon { background: #F5222D; color: #fff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 0 0 16px rgba(245,34,45,.15); } .es-error__title { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; color: #1d1d1f; } .es-error__desc { font-size: .95rem; color: #5a5a5a; margin-bottom: 18px; line-height: 1.65; } .btn-resend { display: inline-block; margin-top: .25rem; color: #B0212D; text-decoration: none; font-weight: 600; } .btn-resend:hover { text-decoration: underline; } /* ===== MODALS ===== */ html.dark-mode .es-overlay { background: var(--overlay-bg); } html.dark-mode .es-modal, html.dark-mode .modal-content { background: var(--bg-card); border-color: var(--border-primary); } html.dark-mode .modal-header, html.dark-mode .modal-footer { border-color: var(--border-primary); } html.dark-mode .modal-title { color: var(--text-primary); } html.dark-mode .modal-body { color: var(--text-secondary); } html.dark-mode .btn-close { filter: invert(1); } /* ================= Overlay + Modal ================= */ .es-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 1; visibility: visible; transition: opacity .3s ease, visibility .3s ease; } .es-overlay.hidden { opacity: 0; visibility: hidden; } .es-modal { max-width: 480px; width: 100%; padding: 1rem; box-sizing: border-box; } /* ================= Forms ================= */ .form-label.fw-semibold { color: rgba(0,0,0,.88); text-align: start; /* flips with dir */ font-family: "Cairo", sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.5; text-transform: capitalize; display: block; margin-bottom: 0.5rem; } .form-label.fw-bold { color: rgba(0,0,0,.88); text-align: start; font-family: "Cairo", sans-serif; font-size: 1rem; line-height: 1.5; text-transform: capitalize; display: block; margin-bottom: 0.5rem; } /* Keep the special Auth look, but make alignment dir-aware */ .custom-input { display: flex; flex-direction: column; gap: 12px; font-family: "Cairo", sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: 0.02em; word-spacing: 0.16em; color: rgba(0,0,0,.88); border: 1px solid #D3BBC2; border-radius: 4px !important; background-color: #fff; box-sizing: border-box; padding: 12px; } /* RTL: align to end, text right */ html[dir="rtl"] .custom-input { align-items: flex-start; text-align: right; } /* LTR: align to start, text left */ html[dir="ltr"] .custom-input { align-items: flex-end; text-align: left; } .custom-input:focus { border-color: #D3BBC2; outline: none; box-shadow: 0 0 0 3px rgba(211,187,194,.5); } .custom-input::placeholder { color: rgba(0,0,0,.6); font-size: 1rem; } /* Helper text colors */ .text-maroon { color: #8A1538; } .text-warning { color: var(--warning) !important; } /* ================= Search pill (RTL/LTR aware) ================= */ /* Search Input CSS */ .es-search-container .es-search.no-filters { width: 100%; max-width: 700px; } .es-search-container .es-search { position: relative; } /* Base (no left/right assumptions) */ .es-search__input { width: 100%; padding-block: 12px; padding-inline: 16px; border: 2px solid #D3BBC2; background: #FFF; border-radius: 8px; transition: all .2s ease; font-size: 1rem; line-height: 1.5; letter-spacing: 0.02em; word-spacing: 0.16em; color: rgba(0, 0, 0, .88); } /* Focus */ .es-search__input:focus { border-color: #80002a; outline: none; box-shadow: 0 0 0 3px rgba(128, 0, 42, 0.1); } /* Text + caret + padding flip with dir */ html[dir="rtl"] .es-search__input { direction: rtl; text-align: right; padding-inline-start: 45px; } html[dir="ltr"] .es-search__input { direction: ltr; text-align: left; padding-inline-start: 45px; /* space for icon on the left */ padding-inline-end: 16px; } /* Placeholder alignment */ html[dir="rtl"] .es-search__input::placeholder { text-align: right; } html[dir="ltr"] .es-search__input::placeholder { text-align: left; } /* ===== Reusable pill search (RTL/LTR aware) ===== */ /* ================= Borders helpers ================= */ .border-success { padding: 10px; gap: 8px; background: #F6FFED; border: 1px solid #135200; border-radius: 8px; } .border-alert { padding: 10px; gap: 8px; background: #FFFBE6; border: 1px solid #96621C; border-radius: 8px; } .border-alert.span { color: #96621C; } .border-maroon { border: 1px solid #8A1538; padding: 10px; gap: 8px; background: #FCF9FA; border-radius: 8px; } .border-maroon.span { color: var(--maroon); } /* ================= Animations ================= */ @keyframes popIn { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } .icon-wrapper { background-color: #EBE4E6; color: #8A1538; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 22px; flex-shrink: 0; } /*Animation for chatbot & complaint page */ .chat-area { animation: fadeInBounce 0.8s ease-out, wiggle 0.5s ease-in-out 1s 3; } @keyframes fadeInBounce { 0% { opacity: 0; transform: translateY(50px); } 60% { transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } } /* ===== DARK MODE FOR AUTH LAYOUT ===== */ html.dark-mode, html.dark-mode body { --bg-primary: #1a1a1a; --bg-secondary: #242424; --bg-card: #2d2d2d; --bg-input: #1a1a1a; --text-primary: #ffffff; --text-secondary: #e0e0e0; --text-muted: #b0b0b0; --border-primary: #444444; --border-secondary: #3a3a3a; --accent: #E6E504; --maroon: #a82050; } /* Auth page backgrounds */ html.dark-mode .wrapper { background-color: var(--bg-primary) !important; } /* Cards */ html.dark-mode .es-card { background: var(--bg-card) !important; border-color: var(--border-primary) !important; } /* Headings - Yellow */ html.dark-mode .es-card h5, html.dark-mode .es-card h6, html.dark-mode h5, html.dark-mode h6 { color: var(--accent) !important; } /* Labels - Yellow */ html.dark-mode .form-label.fw-semibold, html.dark-mode .form-label.fw-bold, html.dark-mode .form-label, html.dark-mode label { color: var(--accent) !important; } /* Inputs - Black bg, white text */ html.dark-mode .custom-input, html.dark-mode .form-control, html.dark-mode select, html.dark-mode textarea { background-color: var(--bg-input) !important; border-color: var(--border-primary) !important; color: var(--text-primary) !important; } /* Placeholders - White */ html.dark-mode .custom-input::placeholder, html.dark-mode .form-control::placeholder, html.dark-mode input::placeholder, html.dark-mode textarea::placeholder { color: rgba(255, 255, 255, 0.6) !important; } /* Text */ html.dark-mode .text-muted { color: var(--text-muted) !important; } html.dark-mode p { color: var(--text-secondary) !important; } /* Links - white by default, accent reserved for hover/focus */ html.dark-mode a { color: var(--text-primary) !important; text-decoration-color: var(--text-primary) !important; } html.dark-mode a:hover, html.dark-mode a:focus-visible { color: var(--accent) !important; text-decoration-color: var(--accent) !important; } /* Icons - Yellow */ html.dark-mode i.bi, html.dark-mode .bi { color: var(--accent); } /* Radio buttons */ html.dark-mode .form-check-label { color: var(--text-primary) !important; } html.dark-mode .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } /* Chatbot iframe modal */ .chatbot-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.25); z-index: 9999; } .chatbot-modal.is-open { display: block; } .chatbot-panel { position: fixed; inset-inline-end: 16px; inset-block-end: 16px; width: min(420px, calc(100vw - 32px)); height: min(680px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); overflow: hidden; } .chatbot-panel iframe { width: 100%; height: 100%; border: 0; } .chatbot-close { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 10; width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255,255,255,0.9); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } @media (max-width: 991.98px) { .chatbot-panel { inset-inline: 10px; inset-block-end: 10px; width: auto; height: min(760px, calc(100dvh - 20px)); max-height: calc(100dvh - 20px); border-radius: 10px; } .chatbot-close { width: 32px; height: 32px; } }