/*
 * eko-world-loginfix.v5.css - sign-in form (/login.html, /ekoloko/login.html), phone and desktop.
 * Owner report 2026-10-07: on a phone the username and password fields came out unequal and squeezed.
 * Root cause: each field was one flex row (input + "remember me" label), and the longer label text squeezed the input.
 *
 * v5 (owner request 2026-10-08): THE PHONE KEEPS THE ORIGINAL LEAF, 1:1.
 *   v2-v4 dropped the leaf on phones and painted a flat leaf-green rounded panel.
 *   The phone now draws the same orig/leaf-big.webp (its own 1019x713 ratio) behind
 *   the stacked form, exactly like the desktop, so the phone reads as the original
 *   login. The field fixes from v2 are kept: both inputs the same width, 40px tall,
 *   dark leaf-green fill with light text, the eye button at the visual left.
 *   The "כניסה" button keeps the original Flash art (orig/form-login-*.webp).
 *
 * Phones and short landscape (max-width 600px, or max-height 500px up to 1100px wide).
 * Wider screens keep the leaf layout; only the tap sizes and the "remember me" wording are set here.
 * Loaded after eko-world-loginpage.v20.css and eko-world-entry-polish.
 */
@font-face { font-family: 'EkoSpacerBold'; src: url('fonts/spacer-bold-v1.woff') format('woff'); font-display: swap; unicode-range: U+0590-05FF; }
@font-face { font-family: 'EkoSpacer'; src: url('fonts/spacer-v1.woff') format('woff'); font-display: swap; unicode-range: U+0590-05FF; }

/* the "remember me" wording says what it remembers (aria-labels already did) */
#eko-world-login label[for="eko-world-remember-user"] > span, #eko-world-login label[for="eko-world-remember"] > span { display: none !important; }
#eko-world-login label[for="eko-world-remember-user"]::after { content: "זכור שם משתמש"; }
#eko-world-login label[for="eko-world-remember"]::after { content: "השאר אותי מחובר"; }

@media (min-width: 601px) and (min-height: 501px), (min-width: 1101px) {
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login label.eko-world-remember { display: inline-flex !important; align-items: center !important; min-height: 44px !important; gap: 6px; white-space: nowrap; }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login label.eko-world-remember input[type="checkbox"] { width: 24px !important; height: 24px !important; margin: 0 !important; flex: none; }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login .eko-world-reveal { min-width: 44px !important; min-height: 44px !important; }
}

/* ======== phones: the ORIGINAL leaf holds the stacked form ======== */
@media (max-width: 600px), (max-height: 500px) and (max-width: 1100px) {
  /* the view is a plain column; the leaf is drawn behind the form */
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card:has(#eko-world-login) .eko-auth-view { background: none !important; }

  /* the form: a plain block at the leaf's own width; the leaf is its ::before */
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login.eko-world-form {
    position: relative !important; display: block !important; box-sizing: border-box !important;
    width: 100% !important; max-width: 440px !important; height: auto !important; min-height: 0 !important;
    margin: 0 auto !important; padding: 13.5% 0 0 !important;
    background: transparent !important; border-radius: 0 !important; direction: rtl;
  }
  /* the original leaf, at its own 1019x713 ratio - never a green box */
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card:has(#eko-world-login) .eko-world-form::before {
    content: '' !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; z-index: 0 !important;
    width: 100% !important; height: auto !important; aspect-ratio: 1019 / 713 !important;
    background: url('orig/leaf-big.webp') center / 100% 100% no-repeat !important; pointer-events: none;
  }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card:has(#eko-world-login) .eko-world-form::after { display: none !important; content: none !important; background: none !important; }

  /* the fields, on the leaf body: label above input, both equal width */
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login .eko-world-field {
    position: relative !important; z-index: 1 !important;
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "label" "input" "rem" !important; grid-auto-flow: row !important;
    justify-content: stretch !important; align-items: stretch !important; gap: 2px !important; box-sizing: border-box !important;
    width: 60% !important; height: auto !important; min-height: 0 !important; margin: 0 31% 6px 9% !important; padding: 0 !important; transform: none !important; text-align: right;
  }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login .eko-world-field > label:not(.eko-world-remember) {
    grid-area: label !important; position: static !important; width: auto !important; margin: 0 !important; padding: 0 !important; text-align: start !important;
    font: bold 16px/1.15 Arial, sans-serif !important; color: #fff !important; text-shadow: 0 0 2px #2a4a0c, 0 1px 2px #2a4a0c, 0 0 1px #2a4a0c !important;
  }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login .eko-world-field > input,
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login .eko-world-field > .eko-world-password { grid-area: input !important; }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login .eko-world-field > label.eko-world-remember { grid-area: rem !important; justify-self: start !important; }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login .eko-world-password { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login input#eko-world-username,
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login input#eko-world-password {
    position: static !important; display: block !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important;
    height: 40px !important; min-height: 40px !important; max-height: 40px !important; margin: 0 !important; padding: 0 12px !important;
    border: 1px solid #4a6418 !important; border-bottom-color: #8db044 !important; border-radius: 3px !important;
    background: #5f7e22 !important; color: #fff8dc !important; caret-color: #fff8dc;
    font: 16px/40px Arial, sans-serif !important; text-align: start !important; box-shadow: inset 0 3px 3px -1px #46601a !important; direction: rtl;
  }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login input#eko-world-password { padding-inline: 12px 42px !important; }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login input#eko-world-username:focus-visible,
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login input#eko-world-password:focus-visible { outline: 2px solid #ffe26a !important; outline-offset: 1px !important; }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login .eko-world-reveal {
    position: absolute !important; inset-block: 2px !important; inset-inline-end: 2px !important; inset-inline-start: auto !important; left: auto !important; right: auto !important;
    width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 !important; transform: none !important;
  }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login label.eko-world-remember {
    position: static !important; display: flex !important; align-items: center !important; gap: 8px !important; width: auto !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important;
    font: bold 14px/1.2 'EkoSpacer', Arial, sans-serif !important; color: #fff !important; white-space: nowrap; text-shadow: 0 1px 2px #2a4a0c;
  }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login label.eko-world-remember input[type="checkbox"] {
    position: static !important; width: 22px !important; height: 22px !important; min-width: 22px !important; margin: 0 !important; flex: none !important; accent-color: #4a6a1a;
  }
  /* the original "כניסה" button, just under the leaf (leaf bottom = 70% of the width) */
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login > button[type="submit"] {
    position: relative !important; z-index: 1 !important; align-self: center !important; margin: calc(70% - 13.5% - 112px + 6px) auto 0 !important;
  }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login .eko-world-forgot { position: relative !important; z-index: 1 !important; margin: 8px 0 0 !important; text-align: center !important; font-size: 15px !important; }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login .eko-world-forgot a { display: inline-flex !important; align-items: center !important; min-height: 44px !important; }
}

/* the parrot stays on the phone, in the sky above the leaf */
@media (max-width: 600px), (max-height: 500px) and (max-width: 1100px) {
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card:has(#eko-world-login) .eko-world-tuki { display: block !important; }
}

/* v4: the "remember me" boxes read as boxes: dark leaf-green fill, white rim, white tick when set (phones) */
@media (max-width: 600px), (max-height: 500px) and (max-width: 1100px) {
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login label.eko-world-remember input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; border: 2px solid #fff !important; border-radius: 6px !important; background: #4a6a1a no-repeat center / 16px 16px !important; box-shadow: inset 0 2px 3px rgba(0,0,0,.25) !important; }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login label.eko-world-remember input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") !important; }
  #eko-player-auth[data-auth-state="signed_out"] #eko-auth-card #eko-world-login label.eko-world-remember input[type="checkbox"]:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px !important; }
}