/* ==========================================================================
   ATRAVIAN Mobile Authentication — Clean consolidated stylesheet
   --------------------------------------------------------------------------
   هذا الملف خاص بصفحتي تسجيل الدخول وتسجيل لاعب جديد على الموبايل العمودي.
   تم توحيد القواعد النهائية وحذف إصدارات CSS القديمة المتكررة والمتعارضة.
   ========================================================================== */

@media screen and (max-width: 768px) and (orientation: portrait) {
    :root {
        --tg-login-panel-width-v10: 292px;
        --tg-login-field-height-v10: 52px;
        --tg-login-button-height-v10: 56px;
        --tg-signup-panel-width-v11: 292px;
        --tg-signup-field-height-v11: 52px;
        --tg-signup-button-height-v11: 56px;
        --tg-auth-frame-height: 880px;
        --tg-auth-warriors-natural-ratio: 580 / 205;
        --tg-auth-paper-top: #ffffff;
        --tg-auth-paper-mid: #f7f4ec;
        --tg-auth-paper-bottom: #dfdbd2;
        --tg-login-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='11' cy='7' r='4.2' fill='%23654D2D'/%3E%3Cpath d='M3.2 18.5c0-3.25 3.5-5.9 7.8-5.9s7.8 2.65 7.8 5.9v.6H3.2v-.6z' fill='%23654D2D'/%3E%3C/g%3E%3C/svg%3E");
        --tg-login-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect x='4' y='9' width='14' height='10' rx='2' fill='%23654D2D'/%3E%3Cpath d='M7 9V6.9C7 4.75 8.79 3 11 3s4 1.75 4 3.9V9h-2V7c0-1.14-.9-2.06-2-2.06S9 5.86 9 7v2H7z' fill='%23654D2D'/%3E%3Ccircle cx='11' cy='13.5' r='1.4' fill='%23F3EEE2'/%3E%3Cpath d='M10.35 14.7h1.3v2.2h-1.3z' fill='%23F3EEE2'/%3E%3C/g%3E%3C/svg%3E");
        --tg-signup-icon-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect x='2.5' y='4.5' width='18' height='14' rx='2.2' fill='%23654D2D'/%3E%3Cpath d='M4.4 6.2l7.1 5.35 7.1-5.35' stroke='%23F3EEE2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.4 16.8l5.2-4.5m9 4.5l-5.2-4.5' stroke='%23F3EEE2' stroke-width='1.45' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
        --tg-signup-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'%3E%3Cpath fill='%235A7A2A' stroke='%23B8943E' stroke-width='1.2' d='M10 1.2l7.4 2.7v5.9c0 4.6-2.8 8.6-7.4 10.9C5.4 18.4 2.6 14.4 2.6 9.8V3.9L10 1.2z'/%3E%3Cpath fill='%23F4D77E' d='M9.2 5h1.6v8.8H9.2zM6.4 8.6h7.2v1.6H6.4z'/%3E%3C/svg%3E");
    }

    html,
    html body.tg-public-auth,
    html body.tg-public-auth,
    html body.tg-public-auth {
        height: var(--tg-mobile-visual-height) !important;
        min-height: var(--tg-mobile-visual-height) !important;
        max-height: var(--tg-mobile-visual-height) !important;
        overflow: hidden !important;
        background-color: #cfd9ab !important;
        background-image: url("../../../img_rtl/layout/bgOpenBoxLandscape-mobile.jpg") !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: 100% 100% !important;
    }

    html body.tg-public-auth div#background,
    html body.tg-public-auth div#background::before,
    html body.tg-public-auth div#background::after,
    html body.tg-public-auth div#bodyWrapper,
    html body.tg-public-auth div#center,
    html body.tg-public-auth div#center div#contentOuterContainer,
    html body.tg-public-auth div#center div#contentOuterContainer.size1,
    html body.tg-public-auth div#center div#contentOuterContainer.size2 {
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    html body.tg-public-auth div#background,
    html body.tg-public-auth div#bodyWrapper,
    html body.tg-public-auth div#center {
        overflow: hidden !important;
    }

    html body.tg-public-auth #tgMobileDrawerToggleLeft,
    html body.tg-public-auth #tgMobileDrawerToggleRight,
    html body.tg-public-auth .tgMobileDrawerToggle,
    html body.tg-public-auth .tgPremiumGreenGoldDrawerArrow {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html body.tg-public-auth
        div#center div#contentOuterContainer > div.tg-mobile-window-frame {
        flex: 0 0 var(--tg-auth-frame-height) !important;
        height: var(--tg-auth-frame-height) !important;
        min-height: var(--tg-auth-frame-height) !important;
        max-height: var(--tg-auth-frame-height) !important;
    }

    html body.tg-public-auth .tg-mobile-window-frame .btn,
    html body.tg-public-auth .tg-mobile-window-frame .tg-auth-submit {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        padding: 0 !important;
        text-align: center !important;
        clear: both !important;
    }

    html body.tg-public-auth .tg-mobile-window-frame .btn button,
    html body.tg-public-auth .tg-mobile-window-frame .tg-auth-submit button {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        float: none !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    /* الشكل الموحد لزر الدخول والتسجيل: إطار ذهبي وداخل أخضر داكن. */
    html body.tg-public-auth .tg-mobile-window-frame button.green.tg-auth-primary-button,
    html body.tg-public-auth .tg-mobile-window-frame button.green.tg-auth-primary-button:hover,
    html body.tg-public-auth .tg-mobile-window-frame button.green.tg-auth-primary-button:focus,
    html body.tg-public-auth .tg-mobile-window-frame button.green.tg-auth-primary-button:active {
        position: relative !important;
        display: block !important;
        float: none !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding: 4px !important;
        box-sizing: border-box !important;
        color: #fffaf0 !important;
        border: 2px solid #6b4b21 !important;
        outline: 0 !important;
        background: linear-gradient(180deg, #d7bd78 0%, #a77c37 100%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 249, 208, 0.85),
            inset 0 -1px 0 rgba(78, 47, 16, 0.45),
            0 2px 3px rgba(50, 31, 14, 0.30) !important;
        text-align: center !important;
        text-shadow: none !important;
        transform: none !important;
        overflow: hidden !important;
    }

    html body.tg-public-auth .tg-mobile-window-frame button.green.tg-auth-primary-button .button-container {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #29400d !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, #5f8738 0%, #436f28 52%, #355d22 100%) !important;
        box-shadow:
            inset 0 2px 0 rgba(198, 229, 126, 0.48),
            inset 0 -2px 0 rgba(21, 52, 13, 0.55),
            inset 2px 0 0 rgba(104, 145, 58, 0.50),
            inset -2px 0 0 rgba(104, 145, 58, 0.50) !important;
    }

    html body.tg-public-auth .tg-mobile-window-frame button.green.tg-auth-primary-button .button-background {
        display: none !important;
    }

    html body.tg-public-auth .tg-mobile-window-frame button.green.tg-auth-primary-button .button-content {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        color: #fffaf0 !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-align: center !important;
        text-shadow: 0 2px 0 rgba(36, 50, 16, 0.75) !important;
        white-space: nowrap !important;
    }

    html body.tg-public-auth .tg-mobile-window-frame button.green.tg-auth-primary-button:hover .button-container,
    html body.tg-public-auth .tg-mobile-window-frame button.green.tg-auth-primary-button:focus .button-container {
        filter: brightness(1.06) !important;
    }

    html body.tg-public-auth .tg-mobile-window-frame button.green.tg-auth-primary-button:active .button-container {
        transform: translateY(1px) !important;
        filter: brightness(0.96) !important;
    }

    /* حارس فوري يمنع ظهور أيقونتي الدخول القديمتين أثناء أول لحظة تحميل. */
    html body.tg-public-auth.login #content.login
        .loginTable tr.account.tg-auth-field-row > td:last-child::before,
    html body.tg-public-auth.login #content.login
        .loginTable tr.pass.tg-auth-field-row > td:last-child::before {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: none !important;
        pointer-events: none !important;
    }
}

/* TG_SIGNUP_PRIMARY_BUTTON_LIMIT_V1 — الحد الأقصى المطلوب لزر بدء التسجيل. */
@media screen and (max-width: 768px) {
    html.tg-page-anmelden body.tg-public-auth #content.signup .btn button.green.tg-auth-primary-button,
    html.tg-page-anmelden body.tg-public-auth #content.signup .btn button.green.tg-auth-primary-button:hover,
    html.tg-page-anmelden body.tg-public-auth #content.signup .btn button.green.tg-auth-primary-button:focus,
    html.tg-page-anmelden body.tg-public-auth #content.signup .btn button.green.tg-auth-primary-button:active {
        width: 180px !important;
        min-width: 0 !important;
        max-width: 180px !important;
        height: 50px !important;
        min-height: 0 !important;
        max-height: 50px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        box-sizing: border-box !important;
    }

    html.tg-page-anmelden body.tg-public-auth #content.signup .btn button.green.tg-auth-primary-button .button-container,
    html.tg-page-anmelden body.tg-public-auth #content.signup .btn button.green.tg-auth-primary-button .button-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 50px !important;
        font-size: 15px !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }
}

/* ======================== Login layout ======================== */
@media screen and (max-width: 768px) and (orientation: portrait) {
    html body.tg-public-auth #content.login {
        position: relative !important;
        padding: 10px 12px 24px !important;
    }

    html body.tg-public-auth #content.login .outerLoginBox,
    html body.tg-public-auth #content.login .innerLoginBox,
    html body.tg-public-auth #content.login form#loginForm,
    html body.tg-public-auth #content.login .greenbox.passwordForgotten.tg-auth-password-box {
        position: relative !important;
        z-index: 2 !important;
    }

    html body.tg-public-auth #content.login .outerLoginBox {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: transparent !important;
    }

    html body.tg-public-auth #content.login .outerLoginBox > h2 {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 2px auto 16px !important;
        padding: 0 0 18px !important;
        color: #2e2a22 !important;
        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        text-align: center !important;
    }

    html body.tg-public-auth #content.login .outerLoginBox > h2::after {
        content: "" !important;
        position: absolute !important;
        right: 50% !important;
        bottom: 2px !important;
        width: 184px !important;
        height: 10px !important;
        transform: translateX(50%) !important;
        background: linear-gradient(to right, transparent 0, #d1c4a9 18%, #d1c4a9 82%, transparent 100%) center 4px / 100% 1px no-repeat,
            radial-gradient(circle, #9f8961 0 1.5px, transparent 1.7px) center center / 10px 10px no-repeat;
        opacity: 0.95 !important;
    }

    html body.tg-public-auth #content.login .innerLoginBox {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 auto !important;
        background: transparent !important;
        overflow: visible !important;
    }

    html body.tg-public-auth #content.login form#loginForm {
        width: 100% !important;
        max-width: var(--tg-login-panel-width-v10) !important;
        margin: 0 auto !important;
    }

    html body.tg-public-auth #content.login form#loginForm > table.loginTable {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: var(--tg-login-panel-width-v10) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body.tg-public-auth #content.login form#loginForm > table.loginTable > tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.tg-public-auth #content.login .loginTable tr.account.tg-auth-field-row,
    html body.tg-public-auth #content.login .loginTable tr.pass.tg-auth-field-row {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body.tg-public-auth #content.login .loginTable tr.account.tg-auth-field-row > td:first-child,
    html body.tg-public-auth #content.login .loginTable tr.pass.tg-auth-field-row > td:first-child {
        display: none !important;
    }

    html body.tg-public-auth #content.login .loginTable tr.account.tg-auth-field-row > td:last-child,
    html body.tg-public-auth #content.login .loginTable tr.pass.tg-auth-field-row > td:last-child {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body.tg-public-auth #content.login .loginTable tr.account.tg-auth-field-row input.text,
    html body.tg-public-auth #content.login .loginTable tr.pass.tg-auth-field-row input.text,
    html body.tg-public-auth #content.login .loginTable tr.account.tg-auth-field-row input[type="text"],
    html body.tg-public-auth #content.login .loginTable tr.pass.tg-auth-field-row input[type="password"] {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: var(--tg-login-field-height-v10) !important;
        min-height: var(--tg-login-field-height-v10) !important;
        max-height: var(--tg-login-field-height-v10) !important;
        margin: 0 auto !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        border: 2px solid #baa888 !important;
        border-radius: 8px !important;
        background: rgba(255,255,255,0.96) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 1px 2px rgba(79, 57, 31, 0.08) !important;
        color: #40362b !important;
        font-size: 17px !important;
        line-height: 1.2 !important;
        text-align: right !important;
    }

    html body.tg-public-auth #content.login .loginTable tr.account.tg-auth-field-row input.text::placeholder,
    html body.tg-public-auth #content.login .loginTable tr.pass.tg-auth-field-row input.text::placeholder,
    html body.tg-public-auth #content.login .loginTable tr.account.tg-auth-field-row input[type="text"]::placeholder,
    html body.tg-public-auth #content.login .loginTable tr.pass.tg-auth-field-row input[type="password"]::placeholder {
        color: #635541 !important;
        opacity: 0.98 !important;
    }

    html body.tg-public-auth #content.login .loginTable tr.account.tg-auth-field-row span.error,
    html body.tg-public-auth #content.login .loginTable tr.pass.tg-auth-field-row span.error {
        display: block !important;
        min-height: 0 !important;
        margin: 4px auto 0 !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    html body.tg-public-auth #content.login .loginTable tr.pass.tg-auth-field-row span.error br {
        display: none !important;
    }

    html body.tg-public-auth #content.login .loginTable tr.lowResOption.tg-auth-lowres-row {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
    }

    html body.tg-public-auth #content.login .loginTable tr.lowResOption.tg-auth-lowres-row > td.tg-lowres-control {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.tg-public-auth #content.login .loginTable tr.lowResOption.tg-auth-lowres-row .tg-lowres-label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        color: #494031 !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    html body.tg-public-auth #content.login .loginTable tr.lowResOption.tg-auth-lowres-row .tg-lowres-label input.checkbox {
        order: 2 !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
    }

    html body.tg-public-auth #content.login .loginTable tr.lowResOption.tg-auth-lowres-row .tg-lowres-label span {
        order: 1 !important;
    }

    /* رفع زر الدخول وحده للأعلى بنسبة 30% من ارتفاعه، مع إبقاء الرابط أسفله في مساره الطبيعي. */
    html body.tg-public-auth #content.login .tg-auth-submit {
        position: relative !important;
        width: 100% !important;
        max-width: var(--tg-login-panel-width-v10) !important;
        margin: 14px auto 0 !important;
        transform: translateY(-30%) !important;
        z-index: 3 !important;
    }

    html body.tg-public-auth #content.login .tg-auth-submit button.green.tg-auth-primary-button,
    html body.tg-public-auth #content.login .tg-auth-submit button.green.tg-auth-primary-button:hover,
    html body.tg-public-auth #content.login .tg-auth-submit button.green.tg-auth-primary-button:focus,
    html body.tg-public-auth #content.login .tg-auth-submit button.green.tg-auth-primary-button:active {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: var(--tg-login-button-height-v10) !important;
        min-height: var(--tg-login-button-height-v10) !important;
        max-height: var(--tg-login-button-height-v10) !important;
        border-radius: 8px !important;
    }

    html body.tg-public-auth #content.login .tg-auth-submit button.green.tg-auth-primary-button .button-content {
        font-size: 22px !important;
    }

    html body.tg-public-auth #content.login .greenbox.passwordForgotten.tg-auth-password-box {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: var(--tg-login-panel-width-v10) !important;
        height: auto !important;
        min-height: 32px !important;
        margin: 10px auto 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        text-align: center !important;
        transform: none !important;
        z-index: 3 !important;
    }

    html body.tg-public-auth #content.login .tg-auth-password-box > .greenbox-top,
    html body.tg-public-auth #content.login .tg-auth-password-box > .greenbox-bottom {
        display: none !important;
    }

    html body.tg-public-auth #content.login .tg-auth-password-box > .greenbox-content {
        position: relative !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
        text-align: center !important;
    }

    html body.tg-public-auth #content.login .tg-auth-password-box .passwordForgottenLink {
        position: relative !important;
        display: flex !important;
        float: none !important;
        clear: both !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    html body.tg-public-auth #content.login .tg-auth-password-box a.showPWForgottenLink {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 28px !important;
        padding: 0 4px 10px !important;
        color: #3f372d !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    html body.tg-public-auth #content.login .tg-auth-password-box a.showPWForgottenLink img {
        display: none !important;
    }

    html body.tg-public-auth #content.login .tg-auth-password-box a.showPWForgottenLink::after {
        content: "" !important;
        position: absolute !important;
        right: 50% !important;
        bottom: 0 !important;
        width: 148px !important;
        height: 8px !important;
        transform: translateX(50%) !important;
        background: linear-gradient(to right, transparent 0, #d0c3aa 14%, #d0c3aa 86%, transparent 100%) center 3px / 100% 1px no-repeat,
            radial-gradient(circle, #8ca53f 0 1.5px, transparent 1.7px) center center / 10px 8px no-repeat;
    }

    html body.tg-public-auth #content.login .tg-auth-password-box .showPasswordForgotten {
        margin-top: 10px !important;
    }

    @media screen and (max-width: 390px) {
        html body.tg-public-auth #content.login .outerLoginBox > h2 {
            font-size: 20px !important;
        }

        html body.tg-public-auth #content.login .loginTable tr.account.tg-auth-field-row input.text,
        html body.tg-public-auth #content.login .loginTable tr.pass.tg-auth-field-row input.text,
        html body.tg-public-auth #content.login .loginTable tr.account.tg-auth-field-row input[type="text"],
        html body.tg-public-auth #content.login .loginTable tr.pass.tg-auth-field-row input[type="password"] {
            font-size: 16px !important;
        }

        html body.tg-public-auth #content.login .loginTable tr.lowResOption.tg-auth-lowres-row .tg-lowres-label,
        html body.tg-public-auth #content.login .tg-auth-password-box a.showPWForgottenLink {
            font-size: 14px !important;
        }

    }
}

/* ======================== Signup layout ======================= */
@media screen and (max-width: 768px) and (orientation: portrait) {
    html body.tg-public-auth #content.signup {
        position: relative !important;
        width: 100% !important;
        padding: 10px 12px 170px !important;
        overflow: visible !important;
    }

    html body.tg-public-auth #content.signup > h1.titleInHeader {
        display: none !important;
    }

    html body.tg-public-auth #content.signup .tg-signup-intro {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 2px auto 16px !important;
        padding: 0 0 18px !important;
        min-height: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #2e2a22 !important;
        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        text-align: center !important;
        box-shadow: none !important;
    }

    html body.tg-public-auth #content.signup .tg-signup-intro::after {
        content: "" !important;
        position: absolute !important;
        right: 50% !important;
        bottom: 2px !important;
        width: 184px !important;
        height: 10px !important;
        transform: translateX(50%) !important;
        background: linear-gradient(to right, transparent 0, #d1c4a9 18%, #d1c4a9 82%, transparent 100%) center 4px / 100% 1px no-repeat,
            radial-gradient(circle, #9f8961 0 1.5px, transparent 1.7px) center center / 10px 10px no-repeat;
    }

    html body.tg-public-auth #content.signup form[name="snd"] {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    html body.tg-public-auth #content.signup form[name="snd"] > * {
        position: relative !important;
        z-index: 1 !important;
    }

    html body.tg-public-auth #content.signup form[name="snd"] > table {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: var(--tg-signup-panel-width-v11) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body.tg-public-auth #content.signup form[name="snd"] > table > tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.tg-public-auth #content.signup tr.tg-auth-field-row {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body.tg-public-auth #content.signup tr.tg-auth-field-row > th {
        display: none !important;
    }

    html body.tg-public-auth #content.signup tr.tg-auth-field-row > td {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body.tg-public-auth #content.signup tr.tg-auth-field-row > td::before {
        content: "" !important;
        position: absolute !important;
        top: 26px !important;
        left: 14px !important;
        width: 22px !important;
        height: 22px !important;
        transform: translateY(-50%) !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: contain !important;
        opacity: 0.93 !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    html body.tg-public-auth #content.signup tr.tg-signup-name-row > td::before {
        background-image: var(--tg-login-icon-user) !important;
    }

    html body.tg-public-auth #content.signup tr.tg-signup-email-row > td::before {
        background-image: var(--tg-signup-icon-email) !important;
    }

    html body.tg-public-auth #content.signup tr.tg-signup-password-row > td::before {
        background-image: var(--tg-login-icon-lock) !important;
    }

    html body.tg-public-auth #content.signup tr.tg-auth-field-row input.text,
    html body.tg-public-auth #content.signup tr.tg-auth-field-row input[type="text"],
    html body.tg-public-auth #content.signup tr.tg-auth-field-row input[type="email"],
    html body.tg-public-auth #content.signup tr.tg-auth-field-row input[type="password"] {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: var(--tg-signup-field-height-v11) !important;
        min-height: var(--tg-signup-field-height-v11) !important;
        max-height: var(--tg-signup-field-height-v11) !important;
        margin: 0 auto !important;
        padding: 0 16px 0 48px !important;
        box-sizing: border-box !important;
        border: 2px solid #baa888 !important;
        border-radius: 8px !important;
        background: rgba(255,255,255,0.96) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 1px 2px rgba(79,57,31,0.08) !important;
        color: #40362b !important;
        font-size: 17px !important;
        line-height: 1.2 !important;
        text-align: right !important;
    }

    /* تكبير نص الشرح الباهت 10% إضافية عن إصدار v23: من 84% إلى 92.4%. */
    html body.tg-public-auth #content.signup tr.tg-auth-field-row input::placeholder {
        color: rgba(99, 85, 65, 0.50) !important;
        opacity: 1 !important;
        font-size: 92.4% !important;
        font-weight: 400 !important;
        transition: opacity 0.14s ease !important;
    }

    html body.tg-public-auth #content.signup tr.tg-auth-field-row input:focus::placeholder {
        color: transparent !important;
        opacity: 0 !important;
    }

    html body.tg-public-auth #content.signup tr.tg-auth-field-row input.tg-email-invalid {
        border-color: #b9372f !important;
        box-shadow: 0 0 0 2px rgba(185, 55, 47, 0.12), inset 0 1px 0 rgba(255,255,255,0.88) !important;
    }

    html body.tg-public-auth #content.signup tr.tg-auth-field-row .tg-email-live-error {
        display: none !important;
        color: #a82019 !important;
        font-weight: 700 !important;
        direction: rtl !important;
    }

    html body.tg-public-auth #content.signup tr.tg-auth-field-row .tg-email-live-error:not(:empty) {
        display: block !important;
    }

    html body.tg-public-auth #content.signup tr.tg-auth-field-row span.error {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 4px auto 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    html body.tg-public-auth #content.signup form[name="snd"] > br {
        display: none !important;
    }

    html body.tg-public-auth #content.signup .tg-signup-terms-title {
        position: relative !important;
        display: block !important;
        width: var(--tg-signup-panel-width-v11) !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 18px auto 8px !important;
        padding: 0 0 9px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #3d352b !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        text-align: center !important;
        box-shadow: none !important;
    }

    html body.tg-public-auth #content.signup .tg-signup-terms-title::after {
        content: "" !important;
        position: absolute !important;
        right: 50% !important;
        bottom: 0 !important;
        width: 150px !important;
        height: 7px !important;
        transform: translateX(50%) !important;
        background: linear-gradient(to right, transparent 0, #d0c3aa 14%, #d0c3aa 86%, transparent 100%) center 3px / 100% 1px no-repeat,
            radial-gradient(circle, #8ca53f 0 1.5px, transparent 1.7px) center center / 10px 7px no-repeat;
    }

    html body.tg-public-auth #content.signup .checks.tg-signup-terms {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        width: var(--tg-signup-panel-width-v11) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(178,158,119,0.55) !important;
        border-radius: 8px !important;
        background: rgba(251,248,240,0.82) !important;
        color: #3f372d !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    html body.tg-public-auth #content.signup .checks.tg-signup-terms::before {
        content: "" !important;
        display: block !important;
        flex: 0 0 20px !important;
        width: 20px !important;
        height: 22px !important;
        background-image: var(--tg-signup-icon-shield) !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: contain !important;
    }

    html body.tg-public-auth #content.signup .checks.tg-signup-terms input.check {
        order: 3 !important;
        flex: 0 0 20px !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        margin: 0 !important;
    }

    html body.tg-public-auth #content.signup .checks.tg-signup-terms label {
        order: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
    }

    html body.tg-public-auth #content.signup .checks.tg-signup-terms.tg-terms-invalid {
        border-color: #c53b32 !important;
        background: rgba(255, 235, 232, .94) !important;
        box-shadow: 0 0 0 2px rgba(197, 59, 50, .12) !important;
    }

    html body.tg-public-auth #content.signup .tg-signup-terms-error {
        display: block !important;
        width: var(--tg-signup-panel-width-v11) !important;
        max-width: 100% !important;
        min-height: 20px !important;
        margin: 7px auto 0 !important;
        padding: 0 !important;
        color: #a82019 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        text-align: center !important;
        direction: rtl !important;
    }

    html body.tg-public-auth #content.signup .tg-signup-terms-error:empty {
        display: none !important;
    }

    html body.tg-public-auth #content.signup .btn {
        width: 100% !important;
        max-width: var(--tg-signup-panel-width-v11) !important;
        min-height: var(--tg-signup-button-height-v11) !important;
        margin: 16px auto 0 !important;
    }

    html body.tg-public-auth #content.signup .btn button.green.tg-auth-primary-button,
    html body.tg-public-auth #content.signup .btn button.green.tg-auth-primary-button:hover,
    html body.tg-public-auth #content.signup .btn button.green.tg-auth-primary-button:focus,
    html body.tg-public-auth #content.signup .btn button.green.tg-auth-primary-button:active {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: var(--tg-signup-button-height-v11) !important;
        min-height: var(--tg-signup-button-height-v11) !important;
        max-height: var(--tg-signup-button-height-v11) !important;
        border-radius: 8px !important;
    }

    html body.tg-public-auth #content.signup .btn button.green.tg-auth-primary-button .button-content {
        font-size: 22px !important;
    }

    @media screen and (max-width: 390px) {
        html body.tg-public-auth #content.signup .tg-signup-intro {
            font-size: 20px !important;
        }

        html body.tg-public-auth #content.signup tr.tg-auth-field-row input.text,
        html body.tg-public-auth #content.signup tr.tg-auth-field-row input[type="text"],
        html body.tg-public-auth #content.signup tr.tg-auth-field-row input[type="email"],
        html body.tg-public-auth #content.signup tr.tg-auth-field-row input[type="password"] {
            font-size: 16px !important;
        }

        html body.tg-public-auth #content.signup .checks.tg-signup-terms {
            gap: 7px !important;
            font-size: 14px !important;
        }

    }
}

/* ==========================================================================
   Shared final frame, paper and warriors layer
   ========================================================================== */
@media screen and (max-width: 768px) and (orientation: portrait) {
    html body.tg-public-auth
        div#center div#contentOuterContainer > div.tg-mobile-window-frame > div.contentContainer {
        position: relative !important;
        background-color: var(--tg-auth-paper-bottom) !important;
        background-image: linear-gradient(180deg, var(--tg-auth-paper-top) 0%, var(--tg-auth-paper-top) 49%, var(--tg-auth-paper-mid) 70%, #fbf7ee 84%, #dad4c7 100%) !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: 100% 100% !important;
    }

    html body.tg-public-auth
        .tg-mobile-window-frame div.contentContainer > div#content.login,
    html body.tg-public-auth
        .tg-mobile-window-frame div.contentContainer > div#content.signup {
        min-height: 100% !important;
        box-sizing: border-box !important;
        padding-bottom: 215px !important;
        background-color: transparent !important;
        background-image: none !important;
    }

    html body.tg-public-auth .tg-mobile-window-frame div.contentContainer > .tg-auth-warriors {
        position: absolute !important;
        right: 21px !important;
        bottom: 16px !important;
        left: 21px !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: var(--tg-auth-warriors-natural-ratio) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        pointer-events: none !important;
        z-index: 5 !important;
        background-color: transparent !important;
        background-image: url("../../../img_rtl/layout/auth-warriors-v3.png") !important;
        background-repeat: no-repeat !important;
        background-position: center bottom !important;
        background-size: 100% 100% !important;
        filter: none !important;
    }

    html body.tg-public-auth #content.login .outerLoginBox,
    html body.tg-public-auth #content.login .innerLoginBox,
    html body.tg-public-auth #content.login form#loginForm,
    html body.tg-public-auth #content.login .greenbox.passwordForgotten.tg-auth-password-box,
    html body.tg-public-auth #content.login .tg-auth-password-box > .greenbox-content,
    html body.tg-public-auth #content.login .tg-auth-password-box .showPasswordForgotten,
    html body.tg-public-auth #content.login form.tg-forgot-password-form {
        background-color: transparent !important;
        background-image: none !important;
    }


    html body.tg-public-auth #content.login .loginTable tr.lowResInfo {
        display: none !important;
    }

    html body.tg-public-auth #content.login .tg-auth-password-box .showPasswordForgotten.hide {
        display: none !important;
    }

    html body.tg-public-auth #content.login .tg-auth-password-box .showPasswordForgotten:not(.hide) {
        display: block !important;
    }
}

/* ======================== Reference footer ==================== */
@media screen and (max-width: 768px) and (orientation: portrait) {
    html body.tg-public-auth.tg-auth-login-page div#header,
    html body.tg-public-auth.tg-auth-signup-page div#header {
        --tg-mobile-bottom-nav-height: 111px;
        position: fixed !important;
        top: auto !important;
        right: auto !important;
        bottom: 0 !important;
        left: 50% !important;
        display: block !important;
        width: calc(var(--tg-mobile-content-width) + 16px) !important;
        min-width: calc(var(--tg-mobile-content-width) + 16px) !important;
        max-width: calc(var(--tg-mobile-content-width) + 16px) !important;
        height: var(--tg-mobile-bottom-nav-height) !important;
        min-height: var(--tg-mobile-bottom-nav-height) !important;
        max-height: var(--tg-mobile-bottom-nav-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        transform: translateX(-50%) !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: #a59380 !important;
        background-image: none !important;
        box-shadow: none !important;
        isolation: isolate !important;
        z-index: 999999 !important;
    }

    html body.tg-public-auth.tg-auth-login-page div#header::before,
    html body.tg-public-auth.tg-auth-signup-page div#header::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 12px !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
        background: linear-gradient(
            to bottom,
            #8e7d6d 0,
            #8e7d6d 2px,
            #f3efef 2px,
            #f3efef 7px,
            #dfd7cf 7px,
            #e3dbcd 10px,
            #a29e92 10px,
            #a29e92 12px
        ) !important;
        border: 0 !important;
        box-shadow: none !important;
        z-index: 3 !important;
    }

    html body.tg-public-auth.tg-auth-login-page div#header::after,
    html body.tg-public-auth.tg-auth-signup-page div#header::after {
        content: "" !important;
        position: absolute !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 8px !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
        background: linear-gradient(
            to bottom,
            #c3b6a6 0,
            #c3b6a6 3px,
            #cabdb0 3px,
            #cabdb0 8px
        ) !important;
        border: 0 !important;
        box-shadow: none !important;
        z-index: 3 !important;
    }

    html body.tg-public-auth.tg-auth-login-page div#header div#mtop,
    html body.tg-public-auth.tg-auth-signup-page div#header div#mtop {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
        z-index: 4 !important;
    }

    html body.tg-public-auth.tg-auth-login-page div#header a#logo,
    html body.tg-public-auth.tg-auth-signup-page div#header a#logo {
        position: absolute !important;
        top: calc(50% + 3px) !important;
        right: 14px !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        width: 272px !important;
        min-width: 272px !important;
        max-width: 272px !important;
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        transform: translateY(-50%) !important;
        direction: ltr !important;
        text-decoration: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        filter: none !important;
        -webkit-tap-highlight-color: transparent !important;
        z-index: 5 !important;
    }

    html body.tg-public-auth.tg-auth-login-page div#header a#logo::before,
    html body.tg-public-auth.tg-auth-signup-page div#header a#logo::before {
        content: "" !important;
        position: relative !important;
        display: block !important;
        flex: 0 0 48px !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
        clip-path: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        background-image: url("../../../travian_default/img/layout/logoBig.png") !important;
        background-repeat: no-repeat !important;
        background-position: left center !important;
        background-size: 199px 72px !important;
        box-shadow: none !important;
        filter: none !important;
        text-shadow: none !important;
        overflow: hidden !important;
    }

    html body.tg-public-auth.tg-auth-login-page div#header a#logo::after,
    html body.tg-public-auth.tg-auth-signup-page div#header a#logo::after {
        content: "ATRAVIAN" !important;
        position: relative !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 34px !important;
        font-weight: 400 !important;
        font-style: normal !important;
        line-height: 1 !important;
        letter-spacing: 0.7px !important;
        white-space: nowrap !important;
        text-align: left !important;
        text-shadow: 0 1px 0 rgba(87, 69, 52, 0.28) !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.tg-public-auth.tg-auth-login-page div#header a#logo:active,
    html body.tg-public-auth.tg-auth-signup-page div#header a#logo:active {
        transform: translateY(-50%) scale(0.985) !important;
        filter: brightness(0.97) !important;
    }

    @media screen and (max-width: 390px) {
        html body.tg-public-auth.tg-auth-login-page div#header a#logo,
        html body.tg-public-auth.tg-auth-signup-page div#header a#logo {
            right: 11px !important;
            width: 258px !important;
            min-width: 258px !important;
            max-width: 258px !important;
            gap: 6px !important;
        }

        html body.tg-public-auth.tg-auth-login-page div#header a#logo::after,
        html body.tg-public-auth.tg-auth-signup-page div#header a#logo::after {
            font-size: 32px !important;
            letter-spacing: 0.4px !important;
        }

    }
}

@media screen and (max-width: 390px) and (orientation: portrait) {
    :root {
        --tg-login-panel-width-v10: 286px;
        --tg-signup-panel-width-v11: 286px;
        --tg-auth-frame-height: 875px;
    }

    html body.tg-public-auth
        .tg-mobile-window-frame div.contentContainer > div#content.login,
    html body.tg-public-auth
        .tg-mobile-window-frame div.contentContainer > div#content.signup {
        padding-bottom: 205px !important;
    }
}

/* ======================== Public auth switcher + hero ======================= */
@media screen and (max-width: 768px) and (orientation: portrait) {
    html body.tg-public-auth .tg-auth-intro {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 6px auto 18px !important;
        padding: 0 6px !important;
        text-align: center !important;
        direction: rtl !important;
    }

    html body.tg-public-auth .tg-auth-intro__emblem {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 auto 10px !important;
        border: 1px solid #b99856 !important;
        border-radius: 50% !important;
        background: linear-gradient(180deg, #f8efcf 0%, #d4b066 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(65,43,18,.18) !important;
        color: #8a6832 !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    html body.tg-public-auth .tg-auth-intro__title {
        margin: 0 auto 6px !important;
        color: #5b4124 !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    html body.tg-public-auth .tg-auth-intro__subtitle {
        margin: 0 auto !important;
        color: #776650 !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 1.45 !important;
        text-align: center !important;
    }

    html body.tg-public-auth .tg-auth-switcher {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px auto 14px !important;
        padding: 0 !important;
        direction: rtl !important;
    }

    html body.tg-public-auth .tg-auth-switcher__tab {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        border: 2px solid #c2ac84 !important;
        background: linear-gradient(180deg, #ffffff 0%, #f4efe4 100%) !important;
        color: #6a5336 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-shadow: 0 1px 2px rgba(89, 67, 41, 0.12) !important;
        transition: filter .15s ease !important;
    }

    html body.tg-public-auth .tg-auth-switcher__tab:hover,
    html body.tg-public-auth .tg-auth-switcher__tab:focus {
        filter: brightness(0.98) !important;
    }

    html body.tg-public-auth .tg-auth-switcher__tab--secondary {
        border-radius: 0 12px 12px 0 !important;
        border-left-width: 1px !important;
    }

    html body.tg-public-auth .tg-auth-switcher__tab--active {
        border-radius: 12px 0 0 12px !important;
        border-right-width: 1px !important;
        border-color: #6a8f33 !important;
        background: linear-gradient(180deg, #6f993b 0%, #527c2a 52%, #426621 100%) !important;
        color: #fffdf7 !important;
        text-shadow: 0 1px 0 rgba(31, 54, 13, 0.6) !important;
        box-shadow: inset 0 1px 0 rgba(200,229,126,.45), 0 2px 4px rgba(51, 39, 18, 0.18) !important;
        z-index: 2 !important;
    }

    html body.tg-public-auth .tg-auth-switcher__tab--active::after {
        content: "" !important;
        position: absolute !important;
        right: 50% !important;
        bottom: -9px !important;
        width: 16px !important;
        height: 16px !important;
        background: linear-gradient(135deg, #5f8733 0%, #426621 100%) !important;
        border-right: 2px solid #6a8f33 !important;
        border-bottom: 2px solid #6a8f33 !important;
        transform: translateX(50%) rotate(45deg) !important;
        box-sizing: border-box !important;
    }

    html body.tg-public-auth .tg-auth-switcher__divider {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 16px !important;
        margin: 0 auto 12px !important;
    }

    html body.tg-public-auth .tg-auth-switcher__divider::before {
        content: "" !important;
        position: absolute !important;
        right: 50% !important;
        top: 7px !important;
        width: 64% !important;
        height: 1px !important;
        transform: translateX(50%) !important;
        background: linear-gradient(to left, transparent 0%, #ddcfb2 20%, #cdbb97 50%, #ddcfb2 80%, transparent 100%) !important;
    }

    html body.tg-public-auth .tg-auth-switcher__divider::after {
        content: "◆" !important;
        position: absolute !important;
        right: 50% !important;
        top: -3px !important;
        transform: translateX(50%) !important;
        color: #a98c57 !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    html body.tg-public-auth #content.login .outerLoginBox > h2.tg-auth-desktop-welcome {
        display: none !important;
    }

    html body.tg-public-auth #content.login .greenbox.passwordForgotten.tg-auth-password-box {
        margin-top: -2px !important;
    }

    html body.tg-public-auth .tg-auth-bottom-link {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px auto 6px !important;
        padding: 0 !important;
        color: #4c4336 !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        direction: rtl !important;
        z-index: 3 !important;
    }

    html body.tg-public-auth .tg-auth-bottom-link__text {
        color: #4c4336 !important;
        font-weight: 700 !important;
    }

    html body.tg-public-auth .tg-auth-bottom-link__action {
        color: #567a2a !important;
        font-weight: 700 !important;
        text-decoration: underline !important;
    }

    html body.tg-public-auth #content.signup .tg-signup-intro,
    html body.tg-public-auth #content.signup .tg-signup-terms-title {
        display: none !important;
    }

    html body.tg-public-auth #content.signup {
        padding-top: 6px !important;
    }

    html body.tg-public-auth #content.signup form[name="snd"] {
        margin-top: 0 !important;
    }
}


/* ======================== Public auth switcher refinements v27 ======================= */
@media screen and (max-width: 768px) and (orientation: portrait) {
    html body.tg-public-auth .tg-auth-intro {
        margin: 8px auto 16px !important;
    }

    html body.tg-public-auth .tg-auth-intro__crest {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 240px !important;
        height: 42px !important;
        margin: 0 auto 10px !important;
    }

    html body.tg-public-auth .tg-auth-intro__crest::before,
    html body.tg-public-auth .tg-auth-intro__crest::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        width: 82px !important;
        height: 18px !important;
        transform: translateY(-50%) !important;
        opacity: 0.98 !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-position: center !important;
    }

    html body.tg-public-auth .tg-auth-intro__crest::before {
        right: calc(50% + 28px) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='18' viewBox='0 0 86 18'%3E%3Cpath d='M1 9h24c3.8 0 6.1-5 8.9-5 2.4 0 3.6 4 6.1 4 2.5 0 3.8-4 6.1-4 2.8 0 5 5 8.9 5h24' fill='none' stroke='%23b19057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='13' cy='9' r='1.7' fill='%23b19057'/%3E%3Ccircle cx='73' cy='9' r='1.7' fill='%23b19057'/%3E%3C/svg%3E") !important;
    }

    html body.tg-public-auth .tg-auth-intro__crest::after {
        left: calc(50% + 28px) !important;
        transform: translateY(-50%) scaleX(-1) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='18' viewBox='0 0 86 18'%3E%3Cpath d='M1 9h24c3.8 0 6.1-5 8.9-5 2.4 0 3.6 4 6.1 4 2.5 0 3.8-4 6.1-4 2.8 0 5 5 8.9 5h24' fill='none' stroke='%23b19057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='13' cy='9' r='1.7' fill='%23b19057'/%3E%3Ccircle cx='73' cy='9' r='1.7' fill='%23b19057'/%3E%3C/svg%3E") !important;
    }

    html body.tg-public-auth .tg-auth-intro__crest-shield {
        position: relative !important;
        z-index: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 38px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        border: 1px solid #bc9b61 !important;
        background: linear-gradient(180deg, #f8efcf 0%, #ddbc7b 100%) !important;
        color: #9a7844 !important;
        font-size: 25px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-shadow: 0 1px 0 rgba(255,255,255,.6) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 1px 2px rgba(60, 44, 22, .12) !important;
        clip-path: polygon(50% 0%, 92% 12%, 92% 56%, 50% 100%, 8% 56%, 8% 12%) !important;
    }

    html body.tg-public-auth .tg-auth-switcher {
        direction: rtl !important;
    }

    html body.tg-public-auth .tg-auth-switcher__tab {
        height: 50px !important;
        font-size: 15px !important;
        padding: 0 8px !important;
    }

    html body.tg-public-auth .tg-auth-switcher > a:first-child {
        border-radius: 12px 0 0 12px !important;
        border-right-width: 1px !important;
    }

    html body.tg-public-auth .tg-auth-switcher > a:last-child {
        border-radius: 0 12px 12px 0 !important;
        border-left-width: 1px !important;
    }

    html body.tg-public-auth .tg-auth-switcher__tab--active {
        border-color: #6a8f33 !important;
        background: linear-gradient(180deg, #6f993b 0%, #527c2a 52%, #426621 100%) !important;
        color: #fffdf7 !important;
        text-shadow: 0 1px 0 rgba(31, 54, 13, 0.6) !important;
        box-shadow: inset 0 1px 0 rgba(200,229,126,.45), 0 2px 4px rgba(51, 39, 18, 0.18) !important;
        z-index: 2 !important;
    }

    html body.tg-public-auth .tg-auth-switcher__tab--secondary {
        background: linear-gradient(180deg, #ffffff 0%, #f4efe4 100%) !important;
        color: #6a5336 !important;
        text-shadow: none !important;
        box-shadow: 0 1px 2px rgba(89, 67, 41, 0.12) !important;
        z-index: 1 !important;
    }

    html body.tg-public-auth .tg-auth-switcher__tab--active::after {
        content: "" !important;
        position: absolute !important;
        right: 50% !important;
        bottom: -9px !important;
        width: 16px !important;
        height: 16px !important;
        background: linear-gradient(135deg, #5f8733 0%, #426621 100%) !important;
        border-right: 2px solid #6a8f33 !important;
        border-bottom: 2px solid #6a8f33 !important;
        transform: translateX(50%) rotate(45deg) !important;
        box-sizing: border-box !important;
    }
}


/* TG_AUTH_SWITCHER_REDUCE_20_V30
   تصغير زري تسجيل الدخول/تسجيل جديد بنسبة 20% على الموبايل فقط. */
@media screen and (max-width: 768px) and (orientation: portrait) {
    html body.tg-public-auth .tg-auth-switcher {
        width: 80% !important;
        max-width: 80% !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html body.tg-public-auth .tg-auth-switcher__tab {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 6px !important;
        font-size: 13px !important;
        border-width: 1px !important;
    }

    html body.tg-public-auth .tg-auth-switcher > a:first-child {
        border-radius: 10px 0 0 10px !important;
    }

    html body.tg-public-auth .tg-auth-switcher > a:last-child {
        border-radius: 0 10px 10px 0 !important;
    }

    html body.tg-public-auth .tg-auth-switcher__tab--active::after {
        bottom: -7px !important;
        width: 13px !important;
        height: 13px !important;
        border-right-width: 1px !important;
        border-bottom-width: 1px !important;
    }

    html body.tg-public-auth .tg-auth-switcher__divider::before {
        width: 52% !important;
    }
}