/* ==========================================================
   DR.EOPI - PC VIP BOOKING BUTTON + POPUP
   ========================================================== */

/* Replace circular booking icon with a premium horizontal CTA */
.desktop-contact-rail .quick-booking-vip{
  width:236px;
  min-height:66px;
  border:1px solid rgba(231,203,154,.45);
  border-radius:18px;
  padding:10px 13px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 24px;
  align-items:center;
  gap:10px;
  color:#fff;
  cursor:pointer;
  text-align:left;
  background:
    radial-gradient(circle at 10% 20%,rgba(255,255,255,.12),transparent 34%),
    linear-gradient(135deg,#2d654b 0%,#214b38 56%,#163d2c 100%);
  box-shadow:0 13px 32px rgba(21,65,45,.28),inset 0 1px 0 rgba(255,255,255,.13);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.desktop-contact-rail .quick-booking-vip:hover{
  transform:translateY(-3px);
  box-shadow:0 17px 38px rgba(21,65,45,.34),inset 0 1px 0 rgba(255,255,255,.16);
  filter:saturate(1.05);
}
.quick-booking-icon{
  width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#f0d5a0,#c99350);
  color:#264936;
  font:900 19px Arial,Helvetica,sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.quick-booking-copy{display:flex;flex-direction:column;min-width:0}
.quick-booking-copy strong{font:850 14px/1.15 Arial,Helvetica,sans-serif;color:#fff}
.quick-booking-copy small{margin-top:4px;font:600 9.5px/1.25 Arial,Helvetica,sans-serif;color:#d7e6de;white-space:normal}
.quick-booking-arrow{font-size:19px;color:#f0d4a0}

/* Popup */
.global-booking-modal{
  position:fixed;inset:0;z-index:11000;
  display:none;align-items:center;justify-content:center;
  padding:22px;
}
.global-booking-modal.open{display:flex}
.global-booking-backdrop{
  position:absolute;inset:0;background:rgba(8,25,17,.66);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.global-booking-dialog{
  position:relative;z-index:1;
  width:min(720px,100%);
  max-height:min(90vh,830px);
  overflow:auto;
  border-radius:24px;
  padding:30px;
  background:
    radial-gradient(circle at 100% 0,rgba(232,205,158,.18),transparent 30%),
    #fff;
  border:1px solid rgba(36,77,58,.12);
  box-shadow:0 32px 90px rgba(0,0,0,.28);
  animation:globalBookingIn .34s cubic-bezier(.22,1,.36,1);
}
@keyframes globalBookingIn{
  from{opacity:0;transform:translateY(26px) scale(.97)}
  to{opacity:1;transform:none}
}
.global-booking-close{
  position:absolute;right:17px;top:17px;
  width:42px;height:42px;border-radius:12px;
  border:1px solid #dae3dd;background:#fff;color:#214b38;
  font:300 30px/1 Arial,Helvetica,sans-serif;cursor:pointer;
}
.global-booking-head{padding:2px 58px 18px 0;border-bottom:1px solid #edf0ed;margin-bottom:18px}
.global-booking-kicker{display:block;color:#a7783f;font-size:10px;font-weight:850;letter-spacing:.16em}
.global-booking-head h3{margin:5px 0 7px;font-size:29px;color:#243a2f}
.global-booking-head p{margin:0;color:#718078;font-size:13px;line-height:1.6}
.global-booking-form{display:grid;gap:13px}
.global-booking-grid{display:grid;gap:13px}
.global-booking-grid.two{grid-template-columns:1fr 1fr}
.global-booking-form label{font-size:12px;font-weight:800;color:#34463d}
.global-booking-form input,
.global-booking-form select,
.global-booking-form textarea{
  width:100%;margin-top:6px;
  border:1px solid #d9e1dc;border-radius:11px;
  background:#fbfcfb;color:#2d4036;
  padding:12px 13px;font:inherit;outline:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.global-booking-form input,
.global-booking-form select{height:47px}
.global-booking-form textarea{resize:vertical;min-height:105px}
.global-booking-form input:focus,
.global-booking-form select:focus,
.global-booking-form textarea:focus{
  border-color:#316c51;background:#fff;
  box-shadow:0 0 0 3px rgba(49,108,81,.09)
}
.global-booking-submit{
  height:50px;border:0;border-radius:12px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(135deg,#2d654b,#173f2d);
  color:#fff;font:850 14px Arial,Helvetica,sans-serif;
  cursor:pointer;box-shadow:0 10px 22px rgba(31,78,55,.16);
}
.global-booking-submit:hover{filter:brightness(1.05);transform:translateY(-1px)}
.global-booking-foot{
  margin-top:14px;padding-top:13px;border-top:1px solid #edf0ed;
  color:#758179;font-size:10.5px;text-align:center;
}
body.global-booking-open{overflow:hidden}

@media(max-width:900px){
  /* Requested VIP button is PC-only; mobile continues to use bottom toolbar. */
  .desktop-contact-rail .quick-booking-vip{display:none!important}
}
@media(max-width:620px){
  .global-booking-modal{padding:12px}
  .global-booking-dialog{padding:22px 15px;border-radius:18px}
  .global-booking-grid.two{grid-template-columns:1fr}
  .global-booking-head h3{font-size:24px}
}


/* ==========================================================
   FIX: REMOVE HOME BOOKING BLOCK / MOBILE POPUP / BACKTOP RIGHT
   ========================================================== */

/* Mobile Đặt lịch uses button but keeps same visual as toolbar link */
@media(max-width:900px){
  .mobile-bottom-tools .mobile-booking-popup-btn{
    min-height:52px;
    border:0;
    border-radius:13px;
    background:#244d3a;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font:inherit;
    cursor:pointer;
    width:100%;
  }
  .mobile-bottom-tools .mobile-booking-popup-btn b{
    font-weight:800;
  }

  /* Popup works on mobile too */
  .global-booking-modal{
    padding:12px;
  }
}

/* Keep Back To Top on the bottom-right even when contact/booking rail is on left */
@media(min-width:901px){
  .desktop-contact-rail .quick-icon.backtop{
    position:fixed !important;
    right:18px !important;
    left:auto !important;
    bottom:22px !important;
    z-index:190 !important;
  }

  .desktop-contact-rail .quick-icon.backtop em{
    left:auto !important;
    right:64px !important;
    transform:translateY(-50%) translateX(5px) !important;
  }

  .desktop-contact-rail .quick-icon.backtop:hover em{
    transform:translateY(-50%) translateX(0) !important;
  }

  .desktop-contact-rail .quick-icon.backtop em::after{
    left:auto !important;
    right:-5px !important;
    border-width:5px 0 5px 5px !important;
    border-color:transparent transparent transparent #202a25 !important;
  }
}


/* Final coordination with new right contact rail */
@media(min-width:901px){
  .desktop-contact-rail .contact-fab-backtop{
    position:relative!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
  }
  .desktop-booking-left{
    position:fixed!important;
    left:22px!important;
    right:auto!important;
    bottom:24px!important;
    z-index:191!important;
    width:246px!important;
  }
}


/* ==========================================================
   PET FAREWELL - FIX FINAL NÚT ĐẶT LỊCH PC
   Button nằm ngoài .desktop-contact-rail nên phải style trực tiếp.
   ========================================================== */
@media(min-width:901px){
  .quick-booking-vip.desktop-booking-left{
    position:fixed!important;
    left:22px!important;
    right:auto!important;
    bottom:24px!important;
    z-index:191!important;
    width:274px!important;
    min-width:0!important;
    min-height:70px!important;
    height:auto!important;
    margin:0!important;
    padding:9px 14px 9px 10px!important;
    display:grid!important;
    grid-template-columns:50px minmax(0,1fr) 22px!important;
    align-items:center!important;
    gap:11px!important;
    border:1px solid rgba(226,190,129,.38)!important;
    border-radius:18px!important;
    background:linear-gradient(135deg,#2b6149 0%,#204d39 52%,#173e2f 100%)!important;
    box-shadow:0 14px 32px rgba(19,59,42,.25),inset 0 1px 0 rgba(255,255,255,.13)!important;
    color:#fff!important;
    opacity:1!important;
    visibility:visible!important;
    overflow:hidden!important;
    cursor:pointer!important;
    text-align:left!important;
    transform:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .quick-booking-vip.desktop-booking-left::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg,rgba(255,255,255,.07),transparent 44%);
    pointer-events:none;
  }
  .quick-booking-vip.desktop-booking-left .quick-booking-icon{
    position:relative!important;
    z-index:1!important;
    width: 35px!important;
    height: 35px!important;
    display:grid!important;
    place-items:center!important;
    border-radius: 20px!important;
    background:linear-gradient(145deg,#efd39a,#ce9a54)!important;
    color:#214c38!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important;
  }
  .quick-booking-vip.desktop-booking-left .quick-booking-icon svg{
    width:25px!important;
    height:25px!important;
    display:block!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }
  .quick-booking-vip.desktop-booking-left .quick-booking-copy{
    position:relative!important;
    z-index:1!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-width:0!important;
  }
  .quick-booking-vip.desktop-booking-left .quick-booking-copy strong{
    display:block!important;
    margin:0!important;
    color:#fff!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:15px!important;
    line-height:1.16!important;
    font-weight:800!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
  }
  .quick-booking-vip.desktop-booking-left .quick-booking-copy small{
    display:block!important;
    margin:4px 0 0!important;
    color:#d9e8e0!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:10.5px!important;
    line-height:1.3!important;
    font-weight:600!important;
    white-space:normal!important;
  }
  .quick-booking-vip.desktop-booking-left .quick-booking-arrow{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    color:#efcb89!important;
    font-size:20px!important;
    line-height:1!important;
    margin:0!important;
    transition:transform .2s ease!important;
  }
  .quick-booking-vip.desktop-booking-left:hover{
    transform:translateY(-3px)!important;
    box-shadow:0 18px 38px rgba(19,59,42,.32),inset 0 1px 0 rgba(255,255,255,.16)!important;
    border-color:rgba(239,203,137,.6)!important;
  }
  .quick-booking-vip.desktop-booking-left:hover .quick-booking-arrow{
    transform:translateX(4px)!important;
  }
}
@media(max-width:900px){
  .quick-booking-vip.desktop-booking-left{display:none!important}
}
\n

/* ==========================================================
   PET FAREWELL - BOOKING BUTTON COMPACT FINAL
   ========================================================== */
@media(min-width:901px){
  .quick-booking-vip.desktop-booking-left{
    position:fixed!important;
    left:18px!important;
    right:auto!important;
    bottom:20px!important;
    z-index:191!important;
    width:max-content!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    height:48px!important;
    padding:5px 13px 5px 5px!important;
    display:flex!important;
    grid-template-columns:none!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:9px!important;
    border-radius:12px!important;
    border:1px solid rgba(224,185,118,.38)!important;
    background:linear-gradient(135deg,#285d46 0%,#194532 100%)!important;
    box-shadow:0 8px 20px rgba(18,55,39,.20)!important;
    overflow:hidden!important;
    color:#fff!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  .quick-booking-vip.desktop-booking-left .quick-booking-icon{
    flex:0 0 36px!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    border-radius:9px!important;
    display:grid!important;
    place-items:center!important;
    background:linear-gradient(145deg,#edca87,#ce9850)!important;
    color:#194532!important;
    box-shadow:none!important;
  }
  .quick-booking-vip.desktop-booking-left .quick-booking-icon svg{
    width:19px!important;
    height:19px!important;
  }
  .quick-booking-vip.desktop-booking-left .quick-booking-copy{
    display:block!important;
    min-width:0!important;
    flex:0 0 auto!important;
  }
  .quick-booking-vip.desktop-booking-left .quick-booking-copy strong{
    display:block!important;
    margin:0!important;
    color:#fff!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
  }
  .quick-booking-vip.desktop-booking-left .quick-booking-copy small,
  .quick-booking-vip.desktop-booking-left .quick-booking-arrow{
    display:none!important;
  }
  .quick-booking-vip.desktop-booking-left:hover{
    transform:translateY(-1px)!important;
    box-shadow:0 10px 24px rgba(18,55,39,.26)!important;
  }
}
@media(max-width:900px){
  .quick-booking-vip.desktop-booking-left{display:none!important}
}