@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/wahba_furniture/fonts/Tajawal-400-ar.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200F, U+25CC, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/wahba_furniture/fonts/Tajawal-700-ar.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200F, U+25CC, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  --wahba-orange: #f36a21;
  --wahba-orange-dark: #cb4b0d;
  --wahba-orange-soft: #fff4ed;
  --wahba-ink: #171717;
  --wahba-muted: #6b7280;
  --wahba-border: #e7e5e4;
  --font-stack: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}

html,
body,
input,
textarea,
select,
button,
option,
.page-card,
.web-footer,
.navbar {
  font-family: var(--font-stack) !important;
}

/* Frappe renders this before page content. Keep loading state intentional. */
.splash.centered {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf8f6;
}

.splash.centered > img {
  width: 86px !important;
  height: 86px !important;
  max-width: 86px !important;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

body[data-path="login"] {
  min-height: 100vh;
  background: #faf8f6;
  color: var(--wahba-ink);
}

body[data-path="login"]::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 80% 12%, rgba(243, 106, 33, 0.12), transparent 28%),
    radial-gradient(circle at 12% 88%, rgba(243, 106, 33, 0.07), transparent 24%);
}

body[data-path="login"] #page-login,
body[data-path="login"] #page-login .page-content-wrapper,
body[data-path="login"] #page-login main.container,
body[data-path="login"] #page-login .page_content,
body[data-path="login"] #page-login .page_content > div,
body[data-path="login"] #page-login section.for-login {
  min-height: 100vh;
}

body[data-path="login"] #page-login .page-content-wrapper {
  padding: 0 !important;
}

body[data-path="login"] #page-login main.container {
  width: 100%;
  max-width: none;
  padding: 32px 24px;
}

body[data-path="login"] #page-login .page_content,
body[data-path="login"] #page-login .page_content > div,
body[data-path="login"] #page-login section.for-login {
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-path="login"] #page-login section:not(.for-login) {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

body[data-path="login"] .login-content.page-card {
  position: relative;
  width: min(100%, 430px);
  min-height: 0;
  padding: 34px;
  gap: 24px;
  border: 1px solid var(--wahba-border);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(50, 34, 24, 0.12);
  overflow: hidden;
}

body[data-path="login"] .login-content.page-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 5px;
  background: var(--wahba-orange);
}

body[data-path="login"] .page-card-head {
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  text-align: center !important;
}

body[data-path="login"] .page-card-head > img.app-logo {
  width: 104px !important;
  height: 104px !important;
  max-width: 104px !important;
  max-height: 104px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none;
}

body[data-path="login"] .page-card-head-text {
  align-items: center;
  gap: 5px !important;
}

body[data-path="login"] .wahba-brand-name {
  color: var(--wahba-orange-dark);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

body[data-path="login"] .page-card-head h4 {
  color: var(--wahba-ink);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

body[data-path="login"] .page-card-subtitle {
  max-width: 300px;
  color: var(--wahba-muted) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  text-align: center;
}

body[data-path="login"] .page-card-body,
body[data-path="login"] .page-card-actions {
  width: 100%;
}

body[data-path="login"] .form-label {
  margin-bottom: 7px;
  color: #3f3f46;
  font-size: 14px;
  font-weight: 700;
}

body[data-path="login"] .form-control {
  height: 46px;
  border: 1px solid #d6d3d1;
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

body[data-path="login"] .form-control:focus {
  border-color: var(--wahba-orange);
  box-shadow: 0 0 0 3px rgba(243, 106, 33, 0.12);
}

body[data-path="login"] .forgot-password-message {
  margin-top: 8px;
  text-align: start;
}

body[data-path="login"] a {
  color: var(--wahba-orange-dark);
}

body[data-path="login"] .btn-login {
  min-height: 46px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
}

body[data-path="login"] .btn-login.btn-default,
body[data-path="login"] .btn-primary,
body[data-path="login"] .btn-login:first-child {
  border-color: var(--wahba-orange) !important;
  background: var(--wahba-orange) !important;
  color: #fff !important;
}

body[data-path="login"] .btn-login.btn-default:hover,
body[data-path="login"] .btn-primary:hover,
body[data-path="login"] .btn-primary:focus,
body[data-path="login"] .btn-login:first-child:hover {
  border-color: var(--wahba-orange-dark) !important;
  background: var(--wahba-orange-dark) !important;
}

body[data-path="login"] .btn-login-option:not(:first-child) {
  border-color: #d6d3d1 !important;
  background: #fff !important;
  color: #44403c !important;
}

body[data-path="login"] .web-footer,
body[data-path="login"] .page-footer {
  display: none !important;
}

@media (max-width: 600px) {
  .splash.centered > img {
    width: 76px !important;
    height: 76px !important;
    max-width: 76px !important;
    border-radius: 0;
  }

  body[data-path="login"] #page-login main.container {
    padding: 20px 14px;
  }

  body[data-path="login"] .login-content.page-card {
    width: 100%;
    padding: 28px 22px;
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(50, 34, 24, 0.11);
  }

  body[data-path="login"] .page-card-head > img.app-logo {
    width: 92px !important;
    height: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
    border-radius: 0 !important;
  }

  body[data-path="login"] .page-card-head h4 {
    font-size: 23px;
  }
}