/* ============================================
   FACEBOOK LOGIN - MOBILE RESPONSIVE CSS
   With container size controls
   ============================================ */

/* Show banner on mobile */
@media screen and (max-width: 768px) {
  .fb-ios-banner {
    display: block !important;
  }
}

/* Hide banner on desktop */
@media screen and (min-width: 769px) {
  .fb-ios-banner {
    display: none !important;
  }
}

/* ============================================
   MOBILE STYLES
   ============================================ */

@media screen and (max-width: 768px) {
  
  /* ---- LOGIN CONTAINER - MAIN CONTROLS ---- */
  /* This is the main white card container */
  .x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x2lah0s.x2bj2ny.xic84rp.x12fhftt.x18q7qi4.xvr7zsw {
    width: 100% !important;
    max-width: 380px !important;  /* Make it narrower */
    min-width: 280px !important;
    margin: 10px auto !important;
    padding: 16px 14px !important;  /* Reduce padding */
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1) !important;
  }

  /* The form inside the container */
  .xgg1l89.x1cg5xbb.x8y9jov.xnh2hec {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hide hero image on mobile */
  .x1ja2u2z.x9f619.x78zum5.xdt5ytf.x193iq5w.x1l7klhg.x1iyjqo2.xs83m0k img {
    display: none !important;
  }
  
  /* Hide the "Explore the things you love" text on mobile */
  .x1gytzn5.x1s688f.x1wne1f8 {
    display: none !important;
  }
  
  /* Hide "Log into Facebook" heading */
  .x1ejgnnb.xza2c7i.x1apb90u.x1215byi {
    display: none !important;
  }

  /* ---- LOGO CONTROLS ---- */
  .x106a9eq {
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .x106a9eq svg {
    display: inline-block !important;
    width: 40px !important;  /* Smaller logo */
    height: 40px !important;
    margin: 0 auto 6px auto !important;
    color: #1877f2 !important;
  }

  /* ---- INPUT FIELD CONTROLS ---- */
  .xjhjgkd input[type="text"],
  .xjhjgkd input[type="password"] {
    width: 100% !important;
    padding: 12px 14px !important;  /* Smaller padding */
    font-size: 15px !important;
    border: 1px solid #dddfe2 !important;
    border-radius: 6px !important;
    background: #f5f6f7 !important;
    height: 44px !important;  /* Smaller height */
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
  }

  /* ---- BUTTON CONTROLS ---- */
  .xtvsq51 {
    width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    background: #1877f2 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    height: 44px !important;  /* Smaller height */
    cursor: pointer !important;
  }

  /* Create account button */
  .x1qhmfi1 {
    width: 100% !important;
    padding: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: #42b72a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    display: block !important;
    text-align: center !important;
    cursor: pointer !important;
    margin-top: 6px !important;
    text-decoration: none !important;
  }

  /* ---- FORGOT PASSWORD LINK ---- */
  .x3nfvp2 a {
    display: block !important;
    text-align: center !important;
    padding: 10px 0 !important;
    font-size: 13px !important;
    color: #1877f2 !important;
    text-decoration: none !important;
  }

  /* ---- DIVIDER ---- */
  .x14nfmen.xjm9jq1 {
    margin: 12px 0 !important;
    border: none !important;
    border-top: 1px solid #dadde1 !important;
  }

  /* ---- META LOGO ---- */
  .x1kpxq89.x1247r65 {
    display: block !important;
    margin: 12px auto 0 auto !important;
    max-width: 80px !important;
  }

  /* ---- FOOTER LINKS ---- */
  .x9f619.x1ja2u2z.x78zum5.x2lah0s.x1n2onr6.x1nhvcw1.x1cy8zhl.x1q0g3np {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2px 12px !important;
    padding: 6px 0 !important;
  }

  .x9f619.x1ja2u2z.x78zum5.x2lah0s.x1n2onr6.x1nhvcw1.x1cy8zhl.x1q0g3np span {
    font-size: 11px !important;
    color: #8a8d91 !important;
  }

  /* ---- LANGUAGE SELECTOR ---- */
  .x9f619.x1ja2u2z.x78zum5.x2lah0s.x1n2onr6.x1nhvcw1.x6s0dn4 {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2px 10px !important;
    padding: 4px 0 !important;
  }

  .x9f619.x1ja2u2z.x78zum5.x2lah0s.x1n2onr6.x1nhvcw1.x6s0dn4 span {
    font-size: 11px !important;
    color: #8a8d91 !important;
  }

  /* ---- FORM CONTAINER FIX ---- */
  form#login_form {
    width: 100% !important;
  }

  /* Remove extra padding */
  .x13zrc24 {
    padding-top: 0 !important;
  }
  
  .x1t1ogtf {
    padding-bottom: 0 !important;
  }
  
  .x70ekce {
    padding-left: 0 !important;
  }
  
  .xp3wktp {
    padding-right: 0 !important;
  }
}

/* ============================================
   EXTRA SMALL PHONES (480px and below)
   ============================================ */

@media screen and (max-width: 480px) {
  .x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x2lah0s.x2bj2ny.xic84rp.x12fhftt.x18q7qi4.xvr7zsw {
    max-width: 320px !important;  /* Even narrower on small phones */
    min-width: 260px !important;
    padding: 14px 12px !important;
    margin: 8px auto !important;
  }

  .xjhjgkd input[type="text"],
  .xjhjgkd input[type="password"] {
    padding: 10px 12px !important;
    font-size: 14px !important;
    height: 40px !important;
    margin-bottom: 8px !important;
  }

  .xtvsq51 {
    padding: 10px !important;
    font-size: 15px !important;
    height: 40px !important;
  }

  .x1qhmfi1 {
    padding: 8px !important;
    font-size: 13px !important;
  }

  .x106a9eq svg {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 4px !important;
  }

  .x1kpxq89.x1247r65 {
    max-width: 60px !important;
  }

  .fb-ios-banner {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  .x3nfvp2 a {
    padding: 8px 0 !important;
    font-size: 12px !important;
  }

  .x14nfmen.xjm9jq1 {
    margin: 10px 0 !important;
  }

  .x9f619.x1ja2u2z.x78zum5.x2lah0s.x1n2onr6.x1nhvcw1.x1cy8zhl.x1q0g3np span {
    font-size: 10px !important;
  }

  .x9f619.x1ja2u2z.x78zum5.x2lah0s.x1n2onr6.x1nhvcw1.x6s0dn4 span {
    font-size: 10px !important;
  }
}

/* ============================================
   LANDSCAPE MODE
   ============================================ */

@media screen and (max-height: 500px) and (orientation: landscape) {
  .x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x2lah0s.x2bj2ny.xic84rp.x12fhftt.x18q7qi4.xvr7zsw {
    padding: 10px 16px !important;
    max-width: 450px !important;
    margin: 5px auto !important;
  }

  .xjhjgkd input[type="text"],
  .xjhjgkd input[type="password"] {
    padding: 6px 12px !important;
    height: 32px !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  .xtvsq51 {
    padding: 8px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  .x1qhmfi1 {
    padding: 6px !important;
    font-size: 12px !important;
  }

  .x106a9eq svg {
    width: 28px !important;
    height: 28px !important;
    margin-bottom: 4px !important;
  }

  .x3nfvp2 a {
    padding: 6px 0 !important;
    font-size: 12px !important;
  }

  .x14nfmen.xjm9jq1 {
    margin: 8px 0 !important;
  }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
  .x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x2lah0s.x2bj2ny.xic84rp.x12fhftt.x18q7qi4.xvr7zsw {
    background: #242526 !important;
  }

  .xjhjgkd input[type="text"],
  .xjhjgkd input[type="password"] {
    background: #3a3b3c !important;
    border-color: #4e4f50 !important;
    color: #e4e6eb !important;
  }

  .xjhjgkd input[type="text"]::placeholder,
  .xjhjgkd input[type="password"]::placeholder {
    color: #8a8d91 !important;
  }

  .x14nfmen.xjm9jq1 {
    border-color: #3e4042 !important;
  }

  .x9f619.x1ja2u2z.x78zum5.x2lah0s.x1n2onr6.x1nhvcw1.x1cy8zhl.x1q0g3np span,
  .x9f619.x1ja2u2z.x78zum5.x2lah0s.x1n2onr6.x1nhvcw1.x6s0dn4 span {
    color: #8a8d91 !important;
  }
}