/* ============================================================
   Cannyboy — login screen, filamentphp.com calm-cream style.
   Light, warm, dotted-grid backdrop + bordered card with
   corner-cross marks and a serif wordmark. RTL aware.
   ============================================================ */

:root {
    --cb-cream:    #fbf8f2;
    --cb-surface:  #ffffff;
    --cb-border:   #e7dcc6;
    --cb-ink:      #1c1814;
    --cb-amber:    #f59e0b;
    --cb-amber-2:  #d98207;
    --cb-dot:      rgba(146, 110, 58, .12);
}

/* ---------- stage ---------- */
.fi-simple-layout {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
}
html:not(.dark) .fi-simple-layout {
    background-color: var(--cb-cream);
    background-image: radial-gradient(var(--cb-dot) 1px, transparent 1.4px);
    background-size: 22px 22px;
}
/* hide the cream wash in dark mode */
html.dark .cb-bg { display: none; }

/* soft amber wash, top-left + bottom-right — calm, not flashy */
.cb-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.cb-bg::before, .cb-bg::after {
    content: ""; position: absolute; width: 46vmax; height: 46vmax;
    border-radius: 50%; filter: blur(80px); opacity: .5;
}
.cb-bg::before { top: -16vmax; inset-inline-end: -12vmax;
    background: radial-gradient(circle, rgba(245,200,120,.55), transparent 65%); }
.cb-bg::after { bottom: -18vmax; inset-inline-start: -12vmax;
    background: radial-gradient(circle, rgba(214,180,140,.4), transparent 65%); }

/* ---------- card ---------- */
.fi-simple-page { position: relative; z-index: 2; }

.fi-simple-header { display: none !important; }   /* we inject our own brand */

.fi-simple-main {
    position: relative;
    overflow: visible;
    animation: cb-card-in .7s cubic-bezier(.16,.84,.34,1) both;
}
html:not(.dark) .fi-simple-main {
    background: var(--cb-surface) !important;
    border: 1px solid var(--cb-border) !important;
    border-radius: 1rem !important;
    box-shadow:
        0 24px 60px -32px rgba(70, 50, 20, .35),
        0 1px 0 rgba(255, 255, 255, .8) inset !important;
}

/* the filament-signature corner crosses */
.fi-simple-main::before,
.fi-simple-main::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    pointer-events: none;
    background:
        linear-gradient(var(--cb-amber), var(--cb-amber)) center/100% 1.4px no-repeat,
        linear-gradient(var(--cb-amber), var(--cb-amber)) center/1.4px 100% no-repeat;
    opacity: .55;
}
.fi-simple-main::before { top: -7px; inset-inline-start: -7px; }
.fi-simple-main::after  { bottom: -7px; inset-inline-end: -7px; }

@keyframes cb-card-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- brand mark (injected before form) ---------- */
.cb-brand { text-align: center; margin-bottom: 1.75rem; }
.cb-brand__mark {
    font-family: 'Bodoni Moda', 'Didot', Georgia, serif;
    font-weight: 600; font-size: 2.4rem; line-height: 1; letter-spacing: .01em;
    color: var(--cb-ink); direction: ltr;
    display: inline-flex; align-items: center; gap: .5rem;
}
.cb-brand__mark::before {
    content: ""; width: .62rem; height: .62rem; border-radius: 2px;
    background: var(--cb-amber); box-shadow: 0 1px 6px rgba(245,158,11,.5);
}
.cb-brand__mark em { font-style: italic; color: var(--cb-amber); }
.cb-brand__rule { display: flex; align-items: center; gap: .7rem; width: 72%; margin: .9rem auto .5rem; }
.cb-brand__rule::before, .cb-brand__rule::after {
    content: ""; height: 1px; flex: 1;
    background: linear-gradient(90deg, transparent, rgba(28,24,20,.16), transparent);
}
.cb-brand__rule span {
    font-family: 'Vazirmatn', sans-serif; font-size: .68rem; font-weight: 600;
    letter-spacing: .22em; color: rgba(28,24,20,.42);
}
.cb-brand__sub { font-family: 'Vazirmatn', sans-serif; font-size: .88rem; color: rgba(28,24,20,.5); }

/* ---------- form polish ---------- */
.fi-simple-main .fi-input,
.fi-simple-main .fi-input-wrp { border-radius: .6rem !important; }
.fi-simple-main .fi-input-wrp { border-color: var(--cb-border) !important; }
.fi-simple-main .fi-input-wrp:focus-within {
    border-color: var(--cb-amber) !important;
    box-shadow: 0 0 0 2px rgba(245,158,11,.16) !important;
}
.fi-simple-main .fi-fo-field-wrp-label { font-family: 'Vazirmatn', sans-serif; }

.fi-simple-main .fi-btn[type="submit"],
.fi-simple-main .fi-ac-action.fi-btn {
    background: linear-gradient(180deg, #f7ad2e, var(--cb-amber-2)) !important;
    border: 1px solid rgba(180, 120, 10, .35) !important;
    box-shadow: 0 8px 20px -10px rgba(245,158,11,.6), 0 1px 0 rgba(255,255,255,.35) inset !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.fi-simple-main .fi-btn[type="submit"]:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 14px 28px -12px rgba(245,158,11,.7), 0 1px 0 rgba(255,255,255,.4) inset !important;
}

/* ---------- footer tagline (injected after form) ---------- */
.cb-foot {
    text-align: center; margin-top: 1.5rem;
    font-family: 'Vazirmatn', sans-serif; font-size: .74rem; letter-spacing: .03em;
    color: rgba(28,24,20,.38);
}
.cb-foot b { color: var(--cb-amber-2); font-weight: 700; }

/* ---------- dark-mode legibility for injected brand/foot ---------- */
html.dark .cb-brand__mark { color: #f3ede2; }
html.dark .cb-brand__sub,
html.dark .cb-brand__rule span { color: rgba(243, 237, 226, .55); }
html.dark .cb-brand__rule::before,
html.dark .cb-brand__rule::after {
    background: linear-gradient(90deg, transparent, rgba(243, 237, 226, .22), transparent);
}
html.dark .cb-foot { color: rgba(243, 237, 226, .4); }

/* ---------- PWA install button (login) ---------- */
.cb-install-wrap { text-align: center; margin-top: 1.1rem; }
.cb-install {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: 'Vazirmatn', sans-serif; font-size: .82rem; font-weight: 600;
    color: var(--cb-amber-2);
    background: #fff; border: 1px solid var(--cb-border); border-radius: .65rem;
    padding: .55rem 1rem; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cb-install:hover {
    background: #fffaf0; border-color: var(--cb-amber); transform: translateY(-1px);
    box-shadow: 0 8px 18px -12px rgba(245,158,11,.6);
}
.cb-install:active { transform: translateY(0); }
.cb-install svg { width: 1rem; height: 1rem; }
.cb-install__tip {
    margin-top: .6rem; font-family: 'Vazirmatn', sans-serif; font-size: .72rem;
    line-height: 1.8; color: rgba(28,24,20,.5);
}
html.dark .cb-install {
    background: rgba(255,255,255,.06); color: #f7c870; border-color: rgba(255,255,255,.14);
}
html.dark .cb-install:hover { background: rgba(255,255,255,.10); }
html.dark .cb-install__tip { color: rgba(243,237,226,.5); }

@media (prefers-reduced-motion: reduce) {
    .fi-simple-main { animation: none !important; }
}
@media (max-width: 640px) {
    .cb-brand__mark { font-size: 2rem; }
    /* fixed/large blobs are heavy on phones — calm them down */
    .cb-bg::before, .cb-bg::after { filter: blur(60px); opacity: .4; }
    .fi-simple-main { margin-inline: .25rem; }
}