/* yitian-footer-floating.css
   Elementor 共用 Footer / Floating / Phone popup 樣式。
   已補回 footer desktop/mobile RWD 與 .m-hide / .d-hide 切換。
*/

:root{
  --cream:#f2f0e3;
  --green:#3c605e;
}

/* Floating buttons */
.floating{
  position:fixed;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:18px;
  z-index:55;
}
.float-btn{
  width:80px;
  height:80px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.18));
  transition:.25s;
}
.float-btn:hover{transform:translateX(4px)}

.phone-pop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:.25s;
  transform:none;
  width:auto;
}
.phone-pop.show{
  opacity:1;
  pointer-events:auto;
}
.phone-pop>img{
  width:min(360px,82vw);
  height:auto;
  box-shadow:0 14px 35px rgba(0,0,0,.25);
  cursor:pointer;
}

/* Desktop footer */
.footer{
  height:183px;
  background:var(--green) url('https://yi-tian.tw/assets/footer-bg.png') center/cover no-repeat;
  color:#f2f0e3;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:45px 7vw;
}
.footer-logo{
  width:300px;
  height:auto;
}
.footer-nav{
  display:flex;
  gap:22px;
  align-items:center;
  font-size:14px;
  letter-spacing:.18em;
}
.footer-nav a{
  color:#f2f0e3;
  text-decoration:none;
}
.footer-nav a:hover{color:#d6c678}
.footer-nav a:not(:last-child):after{
  content:'|';
  margin-left:12px;
  color:rgba(255,255,255,.45);
}
.copyright{
  font-size:14px;
  letter-spacing:.08em;
  margin-top:5px;
  text-align:right;
  color:#f2f0e3;
}

/* 桌機顯示 m-hide，隱藏 d-hide */
.d-hide{display:none!important;}
.m-hide{display:flex!important;}

.mobile-top{display:none;}

@media(max-width:900px){
  .floating{left:12px;}
  .float-btn{width:60px;height:60px;}
  .phone-pop{left:68px;width:280px;}

  .footer{
    height:auto;
    display:block;
    padding:34px 24px;
  }
  .footer-logo{
    width:220px;
    margin-bottom:26px;
  }
  .footer-nav{
    flex-wrap:wrap;
    gap:14px;
  }
  .copyright{text-align:left;}
}

@media(max-width:520px){
  /* 手機版不顯示左側 floating，僅顯示 mobile-top */
  .floating{display:none!important;}

  .phone-pop{
    left:50%!important;
    top:50%!important;
    width:84vw!important;
    transform:translate(-50%,-50%)!important;
  }

  /* 手機切換：隱藏桌機 footer，顯示手機 footer */
  .m-hide{display:none!important;}
  .d-hide{display:flex!important;}

  .footer.d-hide{
    min-height:202px!important;
    height:auto!important;
    padding:0!important;
    background:#3c605e!important;
    color:#f2f0e3!important;
    display:block!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    overflow:hidden!important;
  }

  .footer.d-hide > div{
    width:100%!important;
  }

  .footer.d-hide .footer-logo{
    content:url('https://yi-tian.tw/assets/mobile/footer-logo.svg')!important;
    width:200px!important;
    height:auto!important;
    margin:20px auto 12px!important;
  }

  .footer.d-hide .footer-nav{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:center!important;
    align-items:center!important;
    gap:0!important;
    width:100%!important;
    margin:0 auto 8px!important;
    color:#f2f0e3!important;
    font-size:12px!important;
    letter-spacing:.2em!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }

  .footer.d-hide .footer-nav a{
    color:#f2f0e3!important;
    white-space:nowrap!important;
    padding:0 5px!important;
  }

  .footer.d-hide .footer-nav a:not(:last-child):after{
    content:'|'!important;
    margin-left:5px!important;
    color:rgba(255,255,255,.55)!important;
  }

  .footer.d-hide .copyright{
    width:100%!important;
    text-align:center!important;
    font-size:12px!important;
    letter-spacing:.1em!important;
    line-height:1.5!important;
    margin:0!important;
    color:#f2f0e3!important;
    opacity:.9!important;
  }

  .mobile-top{
    display:block!important;
    position:fixed;
    left:4px;
    bottom:42px;
    z-index:60;
    width:38px;
    height:42px;
    padding:0;
    border:0;
    background:transparent;
    filter:drop-shadow(0 3px 7px rgba(0,0,0,.18));
  }
}