/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}

/* ===== 共用變數：日後改圓角/主色只改這裡 ===== */
:root {
  --sf-btn-radius: 0.5rem;     /* 統一圓角 */
  --sf-green: #417F4D;         /* 品牌深綠 */
}

/* ========== Login 按鈕（桌面版） ========== */

/* 容器：拿掉紅底改透明，隱藏會佔位的空購物車 */
.header__client-panel .items-wrapper {
  background-color: transparent !important;
  padding: 0 !important;
}
.client-panel__item-cart { display: none !important; }

/* 讓登入項目與其容器撐滿整條寬度 */
.client-panel__item-user {
  flex: 1 1 100% !important;
  margin: 0 !important;
}
.client-panel__item-user .login-container {
  display: block !important;
  width: 100% !important;
}

/* 關鍵：按鈕要用 block-level flex（不可 inline-flex）才吃得到 width:100% 並置中 */
.client-panel__item-user .btn--open-client-info {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--sf-green) !important;
  border: none !important;
  border-radius: var(--sf-btn-radius) !important;
  cursor: pointer !important;
}

/* 把圖示換成文字 */
.client-panel__item-user .logged-out {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}
.client-panel__item-user .logged-out .item-container__icon--sign-in {
  display: none !important;
}
.client-panel__item-user .logged-out::after {
  content: "Login" !important;   /* 想只顯示 Login 改這行 */
  font-size: 15px !important;
  color: #ffffff !important;
  font-weight: bold !important;
  line-height: 1 !important;
}

/* ========== 立即預約按鈕：圓角與 Login 一致 ========== */
a.btn.book.btn-has-icon {
  border-radius: var(--sf-btn-radius) !important;
}

/* ========== 手機版（≤768px）：放大 Login 外框 ========== */
@media (max-width: 768px) {
  .client-panel__item-user .btn--open-client-info {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    border-radius: var(--sf-btn-radius) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* 手機版若也想顯示文字，把字體調小一點 */
  .client-panel__item-user .logged-out::after {
    font-size: 14px !important;
  }
}

/* ===== 1. Banner 背景：Ken Burns 緩慢縮放 ===== */
/* 鎖定含背景圖的 hero section（裡面包著 .container-fluid.column > .wrapper） */
section:has(> .container-fluid.column .btn.book) {
  overflow: hidden;
  animation: sfKenBurns 20s ease-in-out infinite alternate;
  will-change: background-size, background-position;
}

@keyframes sfKenBurns {
  0%   { background-size: 100% auto; background-position: 50% 0%; }
  100% { background-size: 115% auto; background-position: 50% 30%; }
}

/* ===== 2.「立即預約」按鈕：脈動 / 呼吸 + hover 上浮 ===== */
.btn.book {
  animation: sfPulse 2.2s ease-in-out infinite;
  transition: transform .2s ease, box-shadow .2s ease;
}

@keyframes sfPulse {
  0%   { box-shadow: 0 0 0 0 rgba(65,127,77,0.45); transform: scale(1); }
  70%  { box-shadow: 0 0 0 14px rgba(65,127,77,0); transform: scale(1.03); }
  100% { box-shadow: 0 0 0 0 rgba(65,127,77,0); transform: scale(1); }
}

.btn.book:hover {
  animation-play-state: paused;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}