/*
	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 */
}


/* 隱藏原本的時間字 */

a.cell.sb-cell.free {
  color: transparent !important;
  position: relative;
}

/* 用偽元素加上 "Book" 字樣 */
a.cell.sb-cell.free::after {
  content: "Book";
  color: #000; /* 改成你要的顏色 */
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 #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 */
}

/* 隱藏時間顯示區 */
div.time {
  display: none !important;
}


.paid-attribute-totals__duration{
  display: none !important;
}

/* Hide durations on confirm page */
.booking-info__details-time {
    display: none !important;
}

/* Replace person icon with dog emoji */

.plugin-group-booking::before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="white" transform="translate(0,2)"><path d="M3.348,4.007 C3.322,4.007 3.29,4.021 3.262,4.024 L3.293,3.994 L0.025,1.965 L0.011,2.562 L1.511,5.022 C1.234,5.363 1.038,5.728 1.038,6.01 L1.038,10.918 L3,10.918 L3,9.263 L5.98,7.929 L8.999,7.929 L9.666,10.918 L10.918,10.918 L10.918,5.328 L9.911,4.008 L3.348,4.008 Z"/><path d="M13.752,1.623 L13.336,0.238 L10.681,2.86 L12.01,4.243 L14.82,4.847 L16.012,3.975 L13.752,1.623 Z"/></g></svg>')!important;
  background-size: contain;
}

/* --- HIDE GROUP BOOKING COUNT (FLEX-AWARE & MOST POWERFUL) ONLY IN BOARDING CATEGORY --- */

/* --- 精準靶向：只在 data-category_id 為 "1" 的頁面中生效 --- */
[data-category_id="1"] .plugin-group-booking {
    /* --- Hides the element and its space. This is the ultimate goal. ---*/
    display: none !important;
}
 

.paid-attribute-footer {
background-color:#000!important;
}




/* --- 1. 基礎文字與字體 --- */
.custom-page p, 
.custom-page ul, 
.custom-page ol, 
.custom-page li {
    font-family: 'Nunito', sans-serif !important;
    color: #fff !important;
    line-height: 1.6 !important;
    background: transparent !important;
}

/* --- 2. 標題樣式：左側品牌色條 (#4FC2CC) --- */
.custom-page h1, 
.custom-page h2 {
    color: #4FC2CC !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    padding-left: 15px !important;
    border-left: 6px solid #4FC2CC !important;
    margin-top: 30px !important;
    margin-bottom: 20px !important;
}

/* 確保標題內的粗體標籤也是品牌色 */
.custom-page h1 b, .custom-page h2 b,
.custom-page h1 strong, .custom-page h2 strong {
    color: #4FC2CC !important;
}

/* --- 3. 自動按鈕化 (針對 Google Form 同 預約連結) --- */
/* 只要是在 custom-page 內的特定連結，都會自動變成圓角按鈕 */
.custom-page a[href*="docs.google.com"], 
.custom-page a[href*="happypawshouse.simplybook.me/v2/#book"] {
    display: inline-block !important;
    background-color: #4FC2CC !important;
    color: #ffffff !important;
    padding: 12px 30px !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(79, 194, 204, 0.3) !important;
    margin: 15px 0 !important;
    text-transform: none !important; /* 保持 Nunito 原本的友善感，不強行大寫 */
}

.custom-page a[href*="docs.google.com"]:hover, 
.custom-page a[href*="happypawshouse.simplybook.me/v2/#book"]:hover {
    background-color: #3eb1bb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(79, 194, 204, 0.5) !important;
    color: #ffffff !important;
}

/* --- 4. 列表樣式調整 --- */
.custom-page ul {
    padding-left: 20px !important;
}

.custom-page li {
    margin-bottom: 12px !important;
}

/* --- 5. 隱藏多餘的 HR 橫線 (讓視覺更乾淨) --- */
.custom-page hr {
    display: none !important;
}

/* --- 6. 引用塊 (Blockquote) 樣式美化 --- */
.custom-page blockquote {
    border-left: none !important;
    background-color: rgba(79, 194, 204, 0.05) !important;
    padding: 20px !important;
    border-radius: 15px !important;
    font-style: italic !important;
    margin: 20px 0 !important;
}


/* 強制將 Pricing 章節後面的第一個連結變成按鈕 */
/* 這不需要你在 HTML 加 class，CSS 會自動抓取網址 */
.custom-page a[href*="category/4"] {
    display: inline-block !important;
    background-color: #4FC2CC !important;
    color: #ffffff !important;
    padding: 14px 35px !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    margin: 20px 0 40px 26px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(79, 194, 204, 0.3) !important;
    text-transform: uppercase !important;
}

.custom-page a[href*="category/4"]:hover {
    background-color: #3eb1bb !important;
    transform: translateY(-2px) !important;
}



/* --- Happy Paws House: Nunito 圆润字体方案 --- */

/* 1. 引入 Nunito 字体（包含 400 正常体和 700 粗体） */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

/* 2. 强制覆盖全站字体，确保圆润效果 */
html, body, p, div, span, li, a, button, input, select, textarea {
    font-family: 'Nunito', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* 3. 解决“看不清”：优化字号和行高 */
body {
    font-size: 16px !important;    /* 基础字号调大到 16px */
    line-height: 1.6 !important;   /* 增加行间距，防止文字挤在一起 */
    color: #333333 !important;     /* 确保颜色足够深 */
}

/* 4. 标题加粗并使用品牌色（#4FC2CC） */
h1, h2, h3, .sb-title, .sb-service-name {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    color: #4FC2CC !important;
}

/* 5. 针对 SimplyBook 预约按钮和标签的微调 */
.btn, .label, .sb-booking-step-title {
    font-family: 'Nunito', sans-serif !important;
    text-transform: none !important; /* 防止强制大写导致圆体效果不明显 */
    letter-spacing: 0.2px;
}

/* 專門針對預約表格日期部分的強制修復 */
#main #main-content #sb_content #content-view #schedule .overview tr td.day {
    font-family: 'Nunito', sans-serif !important;
    font-size: 16px !important; /* 稍微放大一點點，15px 有時還是太小 */
    font-weight: 700 !important; /* 讓日期更醒目 */
}

/* 順便修復可能存在的其他表格文字 */
#schedule .overview tr td {
    font-family: 'Nunito', sans-serif !important;
}

/* 修改所有标题和弹窗标题的字体 */
.telegram-notifications--modal .modal-dialog .modal-content .modal-header .modal-title, 
h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important; /* 加粗让标题更醒目 */
    padding-left: 2px;
}


/* 1. 先處理 Telegram 彈窗標題（如果有的話） */
.telegram-notifications--modal .modal-dialog .modal-content .modal-header .modal-title {
    font-family: 'Nunito', sans-serif !important;
    color: rgb(79, 194, 204) !important;
}

/* 2. 強制修改全站所有的 h4 標籤（這是最關鍵的） */
.custom-page h4, .h4, [role="heading"][aria-level="4"] {
    font-family: 'Nunito', sans-serif !important;
    color: rgb(79, 194, 204) !important; 
    font-weight: 700 !important;
    display: block !important; /* 確保它是以標題形式顯示 */
}

/* 針對 H4 的 UI 優化：將其轉化為警告條風格 */
.custom-page h4, .h4 {
    font-family: 'Nunito', sans-serif !important;
    color: #4FC2CC !important; /* 你的品牌藍 */
    
    /* 佈局優化 */
    display: block !important;
    padding: 12px 15px !important;
    margin: 20px 0 !important;
    
    /* 邊框設計：模仿截圖左側的藍色條 */
    border-left: 5px solid #4FC2CC !important; 
    background: rgba(79, 194, 204, 0.08) !important; /* 淡淡的背景色，讓區塊浮現 */
    
    /* 字體微調 */
    font-size: 1.1em !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    
    /* 圓角讓它看起來更親切（符合狗狗主題） */
    border-radius: 0 8px 8px 0; 
}

/* 如果你想在文字前自動加上一個警告圖標，可以加這段 */
.custom-page h4::before {
    content: "⚠️ ";
    margin-right: 8px;
    font-size: 1em;
}

/* 1. RESTORE THE ARROWS (Font Awesome) */
.fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important; /* Ensures the arrow thickness is correct */
}

/* 2. HIDE THE 12:00 AM (The "Double Check" Method) */
/* If the previous one didn't work, we'll target the parent container's child */
h4.reschedule--selected-name span.txt-time {
    display: none !important;
    opacity: 0 !important;
    position: absolute !important;
}