/* =====================================================================================================================
   THE ENTRY SCREEN — THE LIGHT DESIGN (owner, 2026-10-09, stage 2). views/site/_entryScreen.php.
   Every colour, size and font is the designer's (osgt-entry-SVETLYI/nadpisi-cveta-shrifty.txt). Desktop 1440×900:
   frame lines 20 and 26 px from the edge, header lowered 18 px, logo 52 high, links centred 36 apart, emblem 248,
   rule 56×1, title 56/64, buttons from 224×56 with a 16 gap. Phone 375×812: one frame line 8 px in, logo 38,
   emblem 164, rule 44×1, title 34/40, full-width buttons 52 high with a 12 gap, links at the bottom over a thin rule.
   ===================================================================================================================== */
@font-face { font-family: "OsgtOnest"; font-weight: 600; font-display: swap; src: url("../fonts/entry/Onest-600.woff2") format("woff2"); }
@font-face { font-family: "OsgtOnest"; font-weight: 700; font-display: swap; src: url("../fonts/entry/Onest-700.woff2") format("woff2"); }
@font-face { font-family: "OsgtRaleway"; font-weight: 500; font-display: swap; src: url("../fonts/entry/Raleway-500.woff2") format("woff2"); }
@font-face { font-family: "OsgtRaleway"; font-weight: 600; font-display: swap; src: url("../fonts/entry/Raleway-600.woff2") format("woff2"); }
@font-face { font-family: "OsgtRaleway"; font-weight: 700; font-display: swap; src: url("../fonts/entry/Raleway-700.woff2") format("woff2"); }
@font-face { font-family: "OsgtVazirmatn"; font-weight: 400; font-display: swap; src: url("../fonts/entry/Vazirmatn-400.woff2") format("woff2"); }
@font-face { font-family: "OsgtVazirmatn"; font-weight: 700; font-display: swap; src: url("../fonts/entry/Vazirmatn-700.woff2") format("woff2"); }

/* The old header belongs to the registration and the tour that follow; the entry screen carries its own. */
body.is-entry .welcomeHeader { display: none; }
.swiper-slide.oeSlide { height: auto; }
/* ⚠ The slide keeps the old `.welcomeStep` class for the slider, which makes it a flex row: the screen must fill it. */
.swiper-slide.oeSlide > .oe { width: 100%; flex: 1 1 auto; }
/* ⚠ The old phone styles pad every `.welcomeStep` 20 px at the top; the entry screen starts at the edge. */
.swiper-slide.oeSlide { padding: 0; }

.oe {
    position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; box-sizing: border-box;
    color: #17253F; font-family: OsgtRaleway, "Helvetica Neue", Arial, sans-serif;
    background: radial-gradient(ellipse 60% 56% at 50% 40%, #FFFFFF 0%, #F7F8FA 52%, #EDF1F6 100%);
}
.oe *, .oe *::before, .oe *::after { box-sizing: border-box; }
.oe[dir="rtl"] { font-family: OsgtVazirmatn, OsgtRaleway, Arial, sans-serif; }
.oe a { text-decoration: none; color: inherit; }

/* the double frame */
.oeFrame { position: absolute; inset: 20px; border: 1px solid rgba(23, 37, 63, .14); pointer-events: none; z-index: 1; }
.oeFrame::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(23, 37, 63, .07); }

/* the header */
.oeHead {
    position: relative; z-index: 3; margin-top: 18px; height: 96px; padding: 0 48px;
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.oeLogo img { height: 52px; width: auto; display: block; }
.oeNav { display: flex; gap: 36px; align-items: center; }
.oeNav a {
    color: #4A5872; font-weight: 500; font-size: 15px; line-height: 20px; padding: 6px 0;
    border-bottom: 1.5px solid transparent; white-space: nowrap;
}
.oeNav a:hover { color: #17253F; border-bottom-color: #17253F; }
.oeNavBottom { display: none; }

/* the language switch */
.oeLang { position: relative; }
.oeLang > summary {
    list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
    border-radius: 999px; border: 1px solid #D0D6DE; background: #FFFFFF; color: #17253F; cursor: pointer;
    font: 600 14px/1 OsgtRaleway, Arial, sans-serif; box-shadow: 0 1px 2px rgba(9, 21, 42, .05);
}
.oeLang > summary::-webkit-details-marker { display: none; }
.oeFlag { width: 20px; height: 20px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px rgba(23, 37, 63, .15); flex: none; }
.oeLangMenu {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: 232px; z-index: 5; padding: 6px;
    background: #FFFFFF; border: 1px solid #E3E8EE; border-radius: 14px; box-shadow: 0 18px 48px rgba(9, 21, 42, .16);
}
.oeLangMenu a {
    display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 9px;
    font: 500 15px/20px OsgtRaleway, Arial, sans-serif; color: #4A5872;
}
.oeLangMenu a .oeFlag { width: 22px; height: 22px; }
.oeLangMenu a:hover { color: #17253F; background: #F5F7FA; }
.oeLangMenu a.on { background: #EEF4FE; color: #17253F; }
.oeLangMenu a[lang="fa"] span { font-family: OsgtVazirmatn, sans-serif; }
.oeTick { margin-inline-start: auto; color: #266DF0; display: flex; }

/* the middle */
.oeMain {
    position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 0 24px 56px;
}
.oeEmblem { position: relative; display: flex; justify-content: center; }
.oeEmblem img { height: 248px; width: auto; display: block; position: relative; z-index: 1; }
.oeRing {
    position: absolute; left: 50%; top: 62%; border-radius: 50%; border: 1px solid rgba(23, 37, 63, .07);
    transform: translate(-50%, -50%); pointer-events: none;
}
.oeRing1 { width: 520px; height: 520px; }
.oeRing2 { width: 760px; height: 760px; }
.oeRing3 { width: 1040px; height: 1040px; }
.oeRule { width: 56px; height: 1px; background: rgba(23, 37, 63, .22); margin: 36px 0 30px; position: relative; z-index: 1; }
/* ⚠ `.oe h1.oeTitle`, not `.oeTitle`: the old `.welcomeStep h1` would otherwise set the font. */
.oe h1.oeTitle {
    margin: 0; font-family: OsgtOnest, "Helvetica Neue", Arial, sans-serif; font-weight: 700; letter-spacing: -.02em;
    font-size: 56px; line-height: 64px; max-width: 1000px; text-align: center; color: #17253F; position: relative; z-index: 1;
}
.oe[dir="rtl"] h1.oeTitle { font-family: OsgtVazirmatn, OsgtOnest, sans-serif; letter-spacing: 0; }
.oeBtns { display: flex; gap: 16px; margin-top: 44px; position: relative; z-index: 1; }
.oeBtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; min-width: 224px;
    padding: 0 32px; border-radius: 14px; font-weight: 600; font-size: 16px; line-height: 20px; white-space: nowrap; cursor: pointer;
}
.oe a.oeBtnPrimary { background: #266DF0; color: #FFFFFF; box-shadow: 0 8px 22px rgba(38, 109, 240, .25); }
.oe a.oeBtnPrimary:hover { background: #0048CD; }
.oe a.oeBtnOutline { background: #FFFFFF; color: #0048CD; border: 1.5px solid #7C889C; }
.oe a.oeBtnOutline:hover { background: #EEF4FE; border-color: #0048CD; }
.oe[dir="rtl"] .oeArr { transform: scaleX(-1); }

/* the phone */
@media (max-width: 760px) {
    .oeFrame { inset: 8px; }
    .oeFrame::after { display: none; }
    .oeHead { margin-top: 8px; height: 72px; padding: 0 24px; }
    .oeLogo img { height: 38px; }
    .oeNavTop { display: none; }
    .oeNavBottom {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; position: relative; z-index: 2;
        margin: 0 24px 28px; padding-top: 18px; border-top: 1px solid rgba(23, 37, 63, .12);
    }
    .oeMain { padding: 0 16px 32px; }
    .oeEmblem img { height: 164px; }
    .oeRing1 { width: 340px; height: 340px; }
    .oeRing2 { width: 500px; height: 500px; }
    .oeRing3 { width: 680px; height: 680px; }
    .oeRule { width: 44px; margin: 26px 0 22px; }
    .oe h1.oeTitle { font-size: 34px; line-height: 40px; }
    .oeBtns { flex-direction: column; gap: 12px; width: 100%; margin-top: 32px; }
    .oeBtn { height: 52px; width: 100%; min-width: 0; }
}

/* =====================================================================================================================
   THE LIGHT REGISTRATION (owner, 2026-10-09, stage 3). views/site/_registration.php.
   The designer's values (osgt-vhod-registraciya/podpisi-cveta-razmery.txt). Desktop: header 84, emblem 64, title 28/36,
   lead 15/23 up to 470 wide, card 460 with 28/30 padding and radius 20, label 14/20 600, field 52 high radius 10 border
   1.5, 14 between fields, code cell 52×60 at 26 px, button full width 52 high radius 14. Phone 375: header 72, emblem 56,
   title 26/32, lead 14/22, card full width with 24/20 padding, code cell 44×56; the form scrolls.
   ===================================================================================================================== */
/* The old header and its back link belong to the tour; the registration carries its own (as the entry screen does). */
body.is-entry .welcomeHeader { display: none; }
.swiper-slide.oeRegSlide { padding: 0; height: auto; }
.swiper-slide.oeRegSlide > .oe { width: 100%; flex: 1 1 auto; }

.oeRegHead { margin-top: 12px; height: 84px; }
.oeRegMain {
    position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 0 24px 28px;
}
.oeRegStep { display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; }
.oeRegStep[hidden] { display: none; }
.oeRegTop { text-align: center; }
.oeRegEmblem { height: 64px; width: auto; display: block; margin: 0 auto 14px; }
.oe h1.oeT2 {
    margin: 0; font: 700 28px/36px OsgtOnest, Arial, sans-serif; letter-spacing: -.015em; color: #17253F; text-align: center;
}
.oe[dir="rtl"] h1.oeT2 { font-family: OsgtVazirmatn, OsgtOnest, sans-serif; letter-spacing: 0; }
.oeSub { margin: 8px auto 0; font: 500 15px/23px OsgtRaleway, Arial, sans-serif; color: #4A5872; text-align: center; max-width: 470px; }
.oeSub b { color: #17253F; font-weight: 600; }
.oeSubTight { margin: 0 auto; }
.oeCard {
    width: 460px; max-width: 100%; margin-top: 20px; padding: 28px 30px; display: flex; flex-direction: column; gap: 14px;
    background: #FFFFFF; border: 1px solid #E3E8EE; border-radius: 20px;
    box-shadow: 0 1px 2px rgba(9, 21, 42, .04), 0 18px 44px rgba(9, 21, 42, .07);
}
.oeCardCode { gap: 16px; }
.oeCardDone { margin-top: 0; gap: 18px; text-align: center; }
.oeF { display: flex; flex-direction: column; gap: 7px; }
.oeLab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 600 14px/20px OsgtRaleway, Arial, sans-serif; color: #17253F; }
.oeLab i { font-style: normal; font-weight: 500; font-size: 13px; color: #5E6B80; }
.oe .oeIn {
    width: 100%; height: 52px; padding: 0 16px; border-radius: 10px; border: 1.5px solid #7C889C; background: #FFF;
    font: 500 16px/24px OsgtRaleway, Arial, sans-serif; font-variant-numeric: lining-nums; color: #17253F; outline: none;
    box-shadow: none; margin: 0;
}
.oe .oeIn::placeholder { color: #5E6B80; opacity: 1; }
.oe .oeIn:focus { border-color: #0048CD; outline: 2px solid #0048CD; outline-offset: 1px; }
.oe .oeIn.is-auto { background: #F7F9FB; border-color: #B8C0CC; }
.oe .oeIn.is-err, .oe .oeCode.is-err .oeCell { border-color: #F03226; }
.oe[dir="rtl"] .oeIn[dir="ltr"] { text-align: right; }
.oeHelp { display: flex; gap: 6px; align-items: center; font: 500 13px/18px OsgtRaleway, Arial, sans-serif; color: #087740; }
.oeMsg { display: flex; gap: 8px; align-items: flex-start; font: 500 14px/20px OsgtRaleway, Arial, sans-serif; color: #C8190E; }
.oeMsg svg { margin-top: 2px; flex: none; }
.oeChk { display: flex; gap: 12px; align-items: flex-start; font: 500 14px/22px OsgtRaleway, Arial, sans-serif; color: #4A5872; cursor: pointer; margin: 0; }
.oeChk a { color: #0048CD; text-decoration: underline; text-underline-offset: 2px; }
.oeChk input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.oeBox {
    flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #7C889C; background: #FFF;
    display: flex; align-items: center; justify-content: center; color: transparent;
}
.oeChk input:checked + .oeBox { background: #266DF0; border-color: #266DF0; color: #FFF; }
.oeChk input:focus-visible + .oeBox { outline: 2px solid #0048CD; outline-offset: 1px; }
.oeF.is-err .oeBox { border-color: #F03226; }
.oe .oeWide {
    width: 100%; height: 52px; border: none; border-radius: 14px; background: #266DF0; color: #FFFFFF; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px;
    font: 600 16px/20px OsgtRaleway, Arial, sans-serif; box-shadow: 0 8px 22px rgba(38, 109, 240, .25);
}
.oe .oeWide:hover { background: #0048CD; color: #FFFFFF; }
.oe .oeWide.is-busy { background: #4F87F3; box-shadow: none; cursor: default; }
.oeSpin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #FFF; animation: oeSpin .8s linear infinite; }
.oeWide.is-busy .oeSpin { display: block; }
@keyframes oeSpin { to { transform: rotate(360deg); } }
.oeSmall { margin: 16px 0 0; font: 500 14px/22px OsgtRaleway, Arial, sans-serif; color: #4A5872; text-align: center; }
.oeSmallTight { margin: 2px 0 0; }
.oe .oeSmall a { color: #0048CD; font-weight: 600; }
.oeCode { display: flex; gap: 10px; justify-content: center; }
.oe .oeCell {
    width: 52px; height: 60px; padding: 0; border-radius: 10px; border: 1.5px solid #7C889C; background: #FFF; text-align: center;
    font: 600 26px/1 OsgtOnest, Arial, sans-serif; color: #17253F; outline: none; margin: 0; caret-color: #0048CD;
}
.oe .oeCell:focus { border-color: #0048CD; outline: 2px solid #0048CD; outline-offset: 1px; }
.oeOk { width: 64px; height: 64px; border-radius: 50%; background: #EAF6EF; color: #087740; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.oe[dir="rtl"] .oeLab, .oe[dir="rtl"] .oeSub, .oe[dir="rtl"] .oeSmall, .oe[dir="rtl"] .oeChk, .oe[dir="rtl"] .oeMsg,
.oe[dir="rtl"] .oeHelp, .oe[dir="rtl"] .oeWide { font-family: OsgtVazirmatn, OsgtRaleway, sans-serif; }

@media (max-width: 760px) {
    .oeRegHead { margin-top: 8px; height: 72px; padding: 0 16px; }
    .oeRegMain { padding: 16px 16px 40px; }
    .oeRegEmblem { height: 56px; margin-bottom: 16px; }
    .oe h1.oeT2 { font-size: 26px; line-height: 32px; }
    .oeSub { font-size: 14px; line-height: 22px; }
    .oeCard { width: 100%; padding: 24px 20px; }
    .oe .oeCell { width: 44px; height: 56px; }
    .oeCode { gap: 8px; }
}

/* =====================================================================================================================
   THE LOG IN WINDOW (owner, 2026-10-09, stage 5). views/site/auth/login.php — the registration's card and fields, plus
   the refusal banner over the fields (#FDECEB / #C8190E), the «show password» eye and «Забыли пароль?» on the right.
   ===================================================================================================================== */
#main.auth-layout:has(.oeLogin) { background: none; min-height: 0; }
.oeLogin { flex: 1 1 auto; }
.oeCardLogin { gap: 16px; }
.oeBanner {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: #FDECEB; color: #C8190E;
    font: 500 14px/20px OsgtRaleway, Arial, sans-serif;
}
.oeBanner[hidden] { display: none; }
.oeBanner svg { margin-top: 2px; flex: none; }
.oeInWrap { position: relative; }
.oe .oeInWrap .oeIn { padding-inline-end: 52px; }
.oeEye {
    position: absolute; top: 8px; inset-inline-end: 8px; width: 36px; height: 36px; border: 0; background: none; padding: 0;
    color: #5E6B80; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px;
}
.oeEye:hover, .oeEye[aria-pressed="true"] { color: #0048CD; }
.oeEye:focus-visible { outline: 2px solid #0048CD; outline-offset: 1px; }
.oe a.oeForgot { align-self: flex-end; margin-top: -4px; font: 600 14px/20px OsgtRaleway, Arial, sans-serif; color: #0048CD; }
.oeF[hidden] { display: none; }
.oe[dir="rtl"] .oeBanner, .oe[dir="rtl"] a.oeForgot { font-family: OsgtVazirmatn, OsgtRaleway, sans-serif; }
/* the second-factor code's «sent» note uses the banner's place, not its alarm colour */
.oeBanner.is-info { background: #EEF4FE; color: #17253F; }