*{
    -webkit-tap-highlight-color:transparent;

}

/* ========== 介面色系（設定頁可切換，見 config_basic.php 的「介面色系」下拉選單）==========
   每個色系定義：--brand-1/--brand-2（主色漸層）、--brand-1-hover/--brand-2-hover（滑過/按下）、
   --cat-N-1/--cat-N-2（類別按鈕輪替用的 5 個同色系深淺，N=0~4） */
#wrapper.theme-purple, #wrapper {
  --brand-1: #8e24aa; --brand-2: #4a148c;
  --brand-1-hover: #9c27b0; --brand-2-hover: #6a1b9a; --brand-2-hover-rgb: 106,27,154;
  --cat-0-1: #8e24aa; --cat-0-2: #4a148c;
  --cat-1-1: #5e35b1; --cat-1-2: #311b92;
  --cat-2-1: #3949ab; --cat-2-2: #1a237e;
  --cat-3-1: #6a1b9a; --cat-3-2: #38006b;
  --cat-4-1: #512da8; --cat-4-2: #311b92;
  --panel-dark: #241a2b; --panel-dark-2: #2e2136; --panel-light: #f5eefa;
  --brand-light: #d7b2e1;
}
/* 黃色系用深金黃/芥末色，不用亮黃色，不然配白字會看不清楚 */
#wrapper.theme-yellow {
  --brand-1: #b8860b; --brand-2: #7a5c00;
  --brand-1-hover: #cc9900; --brand-2-hover: #997700; --brand-2-hover-rgb: 153,119,0;
  --cat-0-1: #b8860b; --cat-0-2: #7a5c00;
  --cat-1-1: #9e7d0a; --cat-1-2: #6b5400;
  --cat-2-1: #c9a227; --cat-2-2: #8a7000;
  --cat-3-1: #a67c00; --cat-3-2: #6e5200;
  --cat-4-1: #bfa130; --cat-4-2: #826d00;
  --panel-dark: #241f0f; --panel-dark-2: #2e2813; --panel-light: #faf6e8;
  --brand-light: #e6d5aa;
}
/* 咖啡色（原本紅色系太搶眼，改成比較穩重的深咖啡色） */
#wrapper.theme-red {
  --brand-1: #6d4c41; --brand-2: #3e2723;
  --brand-1-hover: #795548; --brand-2-hover: #4e342e; --brand-2-hover-rgb: 78,52,46;
  --cat-0-1: #6d4c41; --cat-0-2: #3e2723;
  --cat-1-1: #5d4037; --cat-1-2: #2e1a13;
  --cat-2-1: #8d6e63; --cat-2-2: #4e342e;
  --cat-3-1: #4e342e; --cat-3-2: #1b0f0b;
  --cat-4-1: #795548; --cat-4-2: #3e2723;
  --panel-dark: #241713; --panel-dark-2: #2e1e19; --panel-light: #f5efec;
  --brand-light: #ccc0bd;
}
#wrapper.theme-orange {
  --brand-1: #ef6c00; --brand-2: #bf360c;
  --brand-1-hover: #fb8c00; --brand-2-hover: #e65100; --brand-2-hover-rgb: 230,81,0;
  --cat-0-1: #ef6c00; --cat-0-2: #bf360c;
  --cat-1-1: #e64a19; --cat-1-2: #a3290c;
  --cat-2-1: #ff7043; --cat-2-2: #bf360c;
  --cat-3-1: #d84315; --cat-3-2: #8f2400;
  --cat-4-1: #f4511e; --cat-4-2: #a3290c;
  --panel-dark: #2a1710; --panel-dark-2: #351e15; --panel-light: #fdf0e6;
  --brand-light: #f9cca6;
}
#wrapper.theme-blue {
  --brand-1: #1565c0; --brand-2: #0d47a1;
  --brand-1-hover: #1e88e5; --brand-2-hover: #1565c0; --brand-2-hover-rgb: 21,101,192;
  --cat-0-1: #1565c0; --cat-0-2: #0d47a1;
  --cat-1-1: #0d47a1; --cat-1-2: #002171;
  --cat-2-1: #01579b; --cat-2-2: #002f6c;
  --cat-3-1: #1a237e; --cat-3-2: #0d1442;
  --cat-4-1: #0277bd; --cat-4-2: #014a7f;
  --panel-dark: #121f2e; --panel-dark-2: #172838; --panel-light: #eaf2fb;
  --brand-light: #adc9e9;
}
#wrapper.theme-green {
  --brand-1: #43a047; --brand-2: #1b5e20;
  --brand-1-hover: #66bb6a; --brand-2-hover: #2e7d32; --brand-2-hover-rgb: 46,125,50;
  --cat-0-1: #43a047; --cat-0-2: #1b5e20;
  --cat-1-1: #2e7d32; --cat-1-2: #003300;
  --cat-2-1: #00897b; --cat-2-2: #004d40;
  --cat-3-1: #7cb342; --cat-3-2: #33691e;
  --cat-4-1: #388e3c; --cat-4-2: #1b5e20;
  --panel-dark: #131f14; --panel-dark-2: #18281a; --panel-light: #eef7ee;
  --brand-light: #bddebf;
}
#wrapper.theme-black {
  --brand-1: #4a4a4a; --brand-2: #1a1a1a;
  --brand-1-hover: #616161; --brand-2-hover: #333333; --brand-2-hover-rgb: 51,51,51;
  --cat-0-1: #4a4a4a; --cat-0-2: #1a1a1a;
  --cat-1-1: #37474f; --cat-1-2: #102027;
  --cat-2-1: #546e7a; --cat-2-2: #263238;
  --cat-3-1: #616161; --cat-3-2: #212121;
  --cat-4-1: #455a64; --cat-4-2: #1c313a;
  --panel-dark: #1b1b1b; --panel-dark-2: #222222; --panel-light: #f2f2f2;
  --brand-light: #c0c0c0;
}
.keypad-popup, .keypad-inline, .keypad-key, .keypad-special { font-size: 24px; }
.keypad-special { width: 4.25em; margin: 0.125em; }
.keypad-spacebar { width: 13.25em; margin: 0.125em; }
.keypad-key, .keypad-tab, .keypad-space { width: 2em; margin: 0.125em; }
.keypad-half-space { width: 1em; margin-left: 0.125em; }

/* This custom.css is to overide the main css files*/
body {
  /*background: #F2F2F2 !important;*/
  background: #fff !important;
  margin-top: 0 !important;
  padding: 0 !important;
  animation: pageLoad 0.5s ease-in !important;
}
a {
  color: blue;
  font-weight: bold;

}
/* 20260807：曾經把全站 <a> 連結顏色都套上主題色，結果商品名稱、垃圾桶圖示全部變成同一種顏色，
   看起來很單調、也失去原本的顏色區別，所以改回只針對特定地方（footer、標題等，各自有自己的規則）套色，
   不再全面套用。深色底的按鈕（用 <a class="btn btn-primary/danger/..."> 做的）文字保留維持白色，
   .btn-default 不列在這裡，因為它底色是淺灰，本來就該用深色字，不用強制白色 */
#wrapper a.btn-primary,
#wrapper a.btn-danger,
#wrapper a.btn-success,
#wrapper a.btn-warning,
#wrapper a.btn-info {
  color: #fff !important;
}
/* 購物車：商品名稱維持中性深色（不跟著主題色跑），刪除垃圾桶改跟商品名稱同一個顏色，試試看視覺上會不會比較不亂 */
#register td.text-success > a {
  color: #333 !important;
}
#register .delete_item i {
  color: #333 !important;
}
/* 購物車表頭（刪除/商品名稱/價格/數量/小計），跟「選項」按鈕一樣用滿版主題色、白字 */
.cart-register-table thead th {
  background: var(--brand-2) !important;
  color: #fff !important;
  /* 20260827修：桌機橫向標籤陳列(.labels-top-layout)的類別圓角按鈕
     padding是10px 18px，比這裡繼承來的padding:5px 8px(見273行附近)
     高很多(41px vs 約33px)，兩排並排看起來高度不一致。這裡加高
     上下padding，讓表頭列視覺高度接近類別按鈕列。 */
  padding: 9px 8px !important;
}

#menu-trigger {
  top: 0;
  left:0;
  height:50px;
  width:50px;
  text-align:center;
  /* 原來藍色  background:#004E7A;*/
  background:black;
  /* 20260913加：原本(unicorn.css)只有手機窄螢幕(≤767px)才會顯示這顆☰，
     桌機寬螢幕預設display:none整個看不到——因為以前桌機側欄一律常駐
     顯示，不需要按鈕展開。現在側欄改成不分寬度一律預設收合(見#sidebar)，
     這顆☰要在所有寬度都看得到，使用者才點得到。 */
  display: block;
}

#menu-trigger i{
color:#fff;
padding-top: 9px;
text-shadow:none;
}

.header_company_name {
  display: flex;
  height: 50px;
  align-items: center;
  /*justify-content: space-between;*/
  /*justify-content: center;*/
}

/* 20260918加：「手機/平板」排版手動切換鈕——放在商店名稱旁邊(見
   partial/header.php)，只有收銀畫面+店員登入才會渲染。 */
#staff_layout_mode_toggle {
  position: fixed;
  left: 200px;
  top: 0;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 21;
}
#staff_layout_mode_toggle a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 15px;
}
#staff_layout_mode_toggle a:hover {
  background: rgba(255,255,255,0.3);
}
#wrapper:not(.staff-phone-mode) #staff_layout_mode_tablet_btn,
#wrapper.staff-phone-mode #staff_layout_mode_phone_btn {
  background: rgba(255,255,255,0.4);
}

/* 20260913加：店員收銀畫面頭部的分類下拉觸發鈕，取代商店名稱那個位置。
   20260915撤回：改回商店名稱常駐顯示，一度加過右邊切換鈕
   (#browse_mode_toggle)，後來又改成分類列/頁面列彼此對稱的入口分頁
   (.category-to-page-tab/.page-to-category-tab)，頭部不需要放任何
   額外控制項，這裡的CSS整組拿掉。 */

.translation_flags {
  display: flex;
    justify-content: space-between;
    align-content: space-around;
    flex-wrap: wrap;
  height: 90px;
  z-index: 10;
}

.turn_off_translate {
  display: flex;
  justify-content: center;
  
}

.flag-icon {
  position: relative;
  display: inline-block;
  width: 1.3333333333em;
  line-height: 1em; }
  .flag-icon:before {
    content: " "; }
  .flag-icon.flag-icon-squared {
    width: 1em; }

.flag-icon_footer {
  position: relative;
  display: inline-block;
  width: 2.6666666666em;
  line-height: 2em; }

/* 原來
.row {
  margin-left: 15px;
  margin-right: 15px;
}
*/
.row {
  margin-left: 0px;
  margin-right: 0px;
}

.category_list {
  width: 19%;
  float: left;
  position: relative;
}

.sale_register_leftbox{
	padding:0 !important;
/*  margin-top: 15px;*/
}
.receiving_register_leftbox{
  padding:0 !important;
  margin-top: 40px;
}

.sale_register_leftbox .row{
	margin:0;
	padding-left: 0px;
}

/* 所有表格，變成連選擇員工供應商商品等表格的check都變大了
.table input[type=checkbox]
{
  transform: scale(2);
}
*/

.flavor_select input[type=checkbox],
.flavor_select input[type=radio],
.taste_select input[type=radio],
.savor_select input[type=radio],
.topping_select input[type=checkbox],
.seasoning_select input[type=checkbox]
{
  transform: scale(1.5);
}

#seasoningmultiselect input[type=checkbox]
{
  transform: scale(1.5);
  /*舊版用; */
}

/* 也可以直接指定，記得要按Ctrl + F5
.table-responsive input[type=checkbox]
{
  transform: scale(1.5);
}
*/

.sale_register_rightbox input[type=checkbox],
.sale_register_rightbox input[type=radio]
{
  /**/
   transform: scale(1.5); 
}
.sale_register_rightbox {
  position: relative;
  float: right;
  right: 0;
  /*原top: -50px;*/
  top: 0px;
  padding:0;
}

body .sale_register_rightbox{
	font-size:16px;

}

.table-responsive .table>tbody>tr>td {

  vertical-align: middle;

}

.sale_register_rightbox .table>thead>tr>th, 
.sale_register_rightbox .table>tbody>tr>th, 
.sale_register_rightbox .table>tfoot>tr>th, 
.sale_register_rightbox .table>thead>tr>td, 
.sale_register_rightbox .table>tbody>tr>td, 
.sale_register_rightbox .table>tfoot>tr>td {
padding: 5px 8px;
line-height: 1.428571429;

border-top: 1px solid #ccc;
}

.sale_register_rightbox #customer_info_shell input[type="radio"],
.sale_register_rightbox #customer_info_shell input[type="checkbox"] {
	width:auto;
}

.sale_register_rightbox #customer_info_shell input{
width: 100%;	
}

.sale_register_rightbox #customer_info_shell #customer-avatar{
	width:30%;
	float:left;
}

.sale_register_rightbox #customer_info_shell #customer-info{
	width:70%;
	float:left;
}

.sale_register_rightbox #customer_info_shell img.img-polaroid{
	width:90%;
}

.sale_register_rightbox #customer_info_shell a#edit_customer{
	width:49%;
	margin-right: 2%;
	float:left;
	text-align:center;
	font-weight:bold;
}

.sale_register_rightbox #customer_info_shell a#delete_customer{
	width:49%;
	float:left;
	text-align:center;
	font-weight:bold;
}

/*top right menu font*/
#user-nav{
	top: 0;
	right:20px;
	height:50px !important;
	position: fixed;
	
}

#user-nav > ul{
	margin:0;	
}
#user-nav > ul > li > a {
  font-size: 15px;
  padding: 13px 10px;
  height:100%;
  color:#fff;
}

#user-nav > ul > li > a > span.text{
	color:#fff;
	opacity:1 !important;
}

#user-nav > ul > li > a:hover {
  color: #fff;
  background:black;
}

#user-nav .btn.disabled,
#user-nav .btn[disabled],
#user-nav fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
opacity: 1;
filter: alpha(opacity=1);
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}

/*sleeping*/
#sleeping > a {
	top: 0;
	height:50px !important;
  font-size: 20px;
  padding: 13px 10px;
  color:#fff;  
	margin:0;	
  position: absolute; 
  left : 200px; 
  z-index: 10;
 
}

#company_photo {
  text-align: center !important;
  padding: 20px !important;
  animation: fadeIn 0.6s ease-in !important;
  img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 220px;
  }
}

.blink-soft {
  animation: blinker 5s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

#wrapper{
	padding-bottom:0;
}
body[data-color="grey"] #header {
  background-image: none important;
  background-repeat: repeat-x;
  filter: none;
  border-bottom: 1px solid #434343;
}

body[data-color="grey"].flat #sidebar > ul > li.active
{
 background-image: none important;
  background-repeat: repeat-x;
  filter: none;
   
}
#header{
/*	background: #356BA1 !important; */
	background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%) !important;
 	border-bottom:0px solid #11233B !important;	
	z-index: 20;  
	height: 50px;
	position: fixed;
	left: 0;
	top: 0;
	
	
}
#header h1 {
  position: relative;
  top: -12px;
  width: 78px;
  background: none;
  line-height: 0px;
}
#header h1 a{
	height:100%;
	position:relative;
}
#header h1 a img {
	position:absolute;
	height:100%;
    padding-left: 0;
}
#footer{
	
	float: left;
	width: 100%;	
  text-align: center;
  color: #434343;
  text-shadow: none;
  font-size: 12px;
  font-weight: 200;
  padding: 0;
  background-color: #f4f6f6;
  position:relative;
}
#footer a {
  color: var(--brand-2);
}
#footer a:hover {
  color: var(--brand-2);
}

#sidebar{
	width:105px;
	position:fixed;
	/* 20260913改：原本桌機寬螢幕side一律常駐顯示(left:0)，只有手機窄螢幕
	   (≤767px)才預設收到畫面外、按☰展開。使用者要求參考Loyverse，不分
	   螢幕寬度一律預設收合，騰出空間給商品區，按左上角☰(#menu-trigger)
	   才展開——展開規則見下面body.menu-open #sidebar。收合時的位移量
	   -47px對應側欄實際寬度(見下面#sidebar.sales_minibar，全站一律套用
	   這個class，105px那個寬度事實上沒在用)，完全收到畫面外不留縫。 */
	left:-47px;
	top:0;
	min-height:100%;
	background:#3C3C3C;
	padding-top:50px;
	/* 20260828修：原本overflow:hidden，選單項目(使用者/值班中/狀態/登出等)
	   是一路往下排的<ul><li>清單，登出剛好在最後一項。側欄是position:fixed，
	   高度又被下面@media(max-width:1024px)強制撐到min-height:1000px，平板
	   橫向畫面高度大多只有600~800px，超出畫面的部分完全按不到也捲不到——
	   使用者反映「選單太長,無法下捲登出」。改成overflow-y:auto+限制實際
	   高度不超過視窗高度，選單項目多的話側欄自己內部可以捲動，不會有永遠
	   碰不到的項目。 */
	max-height: 100vh;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	/* 20260829加：防止瀏覽器的「捲動錨定」(scroll anchoring)在頁面互動
	   過程中悄悄調整這個容器的捲動位置——側欄剛變成可捲動的容器，如果
	   瀏覽器自動把它往下錨定一點點，最上面的值班圖示就會被捲出畫面外，
	   其他圖示間距看起來正常所以不容易發現，但點擊完全沒反應(使用者
	   實測回報)。 */
	overflow-anchor: none;
	transition: width 0.25s ease, left 0.25s ease;
	-moz-transition: width 0.25s ease, left 0.25s ease;
	-webkit-transition: width 0.25s ease, left 0.25s ease;
}
/* 20260913加：按☰(#menu-trigger)展開側欄，見js/unicorn.js的click handler
   （不分螢幕寬度都會切換body.menu-open這個class）。 */
body.menu-open #sidebar {
	left: 0;
}
/* 20260913加：≥768px(平板/桌機)側欄預設47px窄圖示列，文字(.hidden-minibar)
   原本要:hover才會顯示(見下面@media(min-width:768px)區塊)——但平板等
   觸控裝置點按沒有:hover這個概念，側欄改成主要靠點☰展開後，觸控裝置
   使用者只看得到圖示看不到文字，跟顧客那邊的選單/分類列表(一律都有文字)
   不一致。使用者要求展開時要跟顧客一樣完整顯示功能名稱，不能只有圖示。
   改成只要側欄有展開(body.menu-open)就直接顯示105px寬+文字，不用再靠
   :hover——:hover機制保留，滑鼠使用者一樣可以不點☰、單純移過去預覽。 */
body.menu-open #sidebar.sales_minibar,
body.menu-open #wrapper.minibar #sidebar ul {
	width: 105px !important;
}
body.menu-open #wrapper.minibar #sidebar ul .hidden-minibar {
	display: inline-block !important;
}

/* 20260825加：「最近列印」/「待處理訂單」浮動面板——預設隱藏，按左邊圖示
   側欄的按鈕（#btn_toggle_print_panel，見partial/header.php）才浮出來，
   蓋在商品區上面，不像以前用float:right常駐佔位置。
   20260826改：原本貼著左邊側欄按鈕正下方浮出來，剛好蓋住商品區最常被看的
   左上角，使用者反映改放到畫面右下角——那裡平常是空白的（購物車/結帳
   按鈕下方），浮出來也不會擋到正在操作的東西。 */
#print_status_float_panel {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 50;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
	padding: 10px;
	width: 320px;
	max-height: 80vh;
	overflow-y: auto;
}
#print_status_float_panel.open {
	display: block;
}

#sidebar ul{
	display: block;
	height: 100%;
	top: 0;
	/* 20260828修：這裡跟外層#sidebar(見469行附近)各自都有padding-top:50px，
	   疊加起來變成100px——標題列(#header)本身高度只有50px，多疊的這50px
	   是不需要的重複，導致側欄第一個圖示(值班中)上方空白比預期多一倍。
	   手機版(見下面@media max-width:767px)本來就有把這裡的padding-top
	   蓋成0，只是桌機/平板版沒蓋，這裡直接拿掉重複的50px，只留外層
	   #sidebar自己的50px負責清開標題列的空間。 */
	background: #3C3C3C;
	width:105px;
}
#sidebar li{
 width:105px;

}
#sidebar li a{
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-weight:700 !important;
  width:105px;
}
#sidebar li a span{
display:inline-block !important;
}
#sidebar li.active{
	/*background-color:#434343 !important;*/
/*原來藍色	background-color:#225E98 !important;*/
	background-color: var(--brand-2) !important;
}
#sidebar li.active2{
	background-color:brown !important;
}
#user-nav > ul > li > a > i,
#sidebar li a i {
  vertical-align: top;
  background-image: none;
  opacity: .8;
  margin-top: 2px;
  font-size: 18px;
  color: #fff;
}

#sidebar li a:hover i {
	opacity: 1;
}

#sidebar.sales_minibar{
	width:47px !important;
}

#sidebar.sales_minibar > ul > li.active > a{
	background-image:none !important;	
}

#sidebar.sales_minibar:hover{
	width:105px !important;	
}

#content-header h1,
#show_hide_grid_wrapper h1 {
/*color: #356BA1;	*/
  color: var(--brand-2);

  font-size: 30px;
  font-weight: 100;
}

/* unicorn.css 底層把 .text-info 寫死成紫色（例如報表頁「«選擇報表»」），這裡蓋掉讓它跟著色系走 */
#wrapper .text-info {
  color: var(--brand-2);
}

/* Content */
#content {
  padding-top:60px;
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
  display:block !important;
  width:100%;
  margin-left:0 !important;
  margin-top: 0;
  padding-left:105px;
  transition: padding 0.25s ease;
  -moz-transition: padding 0.25s ease;
  -webkit-transition: padding 0.25s ease;
}

/* 20260913改：原本側欄常駐顯示，這裡固定保留47px空間不讓內容被蓋住。
   現在側欄改成預設收合(見上面#sidebar)，內容預設不用再保留這塊空間，
   只有側欄真的展開(body.menu-open)時才需要讓出47px，避免內容被蓋住。 */
#content.sales_content_minibar{
	padding-left:0;
}
/* 20260913改：手機窄螢幕(≤767px)另外有一套既有的.menu-open #content{left:105px}
   位移機制(見下面@media(max-width:767px)區塊)，如果這裡的padding-left也在
   手機寬度生效，會變成「位移105px」+「再讓出47px」疊加、側欄展開時內容被
   推過頭。這裡限定只在≥768px(平板/桌機)生效，手機沿用原本那套位移機制、
   不受影響。 */
@media (min-width: 768px) {
	body.menu-open #content.sales_content_minibar {
		padding-left:47px;
	}
}
#content-header{
	background-color: #F2F2F2 !important;
	padding-top: 0;
	margin-top: 0px;
	border-top-left-radius: 0 !important;
	min-height:0 !important;
	float:left;
}

#content-header h1{
	float:left;
	display:block;
	margin-top:0;
	margin-left:0px;
}

#breadcrumb{
width: 100%;
float: left;
}

.widget-title span.label {
  border-right: 1px solid #cdcdcd;
  padding: 0px 5px 0px 5px;
}
.quick-actions i.fa fa-download,
.quick-actions i.fa fa-user {
  background-image: none;
}
.stat-boxes .right {
  width: 30%;
}
.controller-buttons li a {
  margin: 10px 0px;
}
/* Search input */
#search {
  top: 0;
  margin-top: 5px;
}
/*Custom Classes */
.display-block {
  display: block;
}
.nopadding {
  padding: 0px !important;
}
li.list-group-item.spacing {
  background: #f3f2f5 !important;
  border-left-width: 0px;
  border-right-width: 0px;
}
.btn-no-radius {
  border-radius: 0px;
}
.text-white {
  color: #FFFFFF !important;
}
/*  Pagination */

.dataTables_paginate .ui-button,
.pagination.alternate a {
  font-size: 12px;
  padding: 4px 10px !important;
  border-style: solid;
  border-width: 1px;
    /* for IE < 9 */
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  display: inline-block;
  line-height: 16px;
  background-color: #f5f5f5;
    background-image: linear-gradient(top, #ffffff, #e6e6e6);
  color: #333333;
  text-shadow: 0 1px 0 #ffffff;
  margin-right: 0;
}
.dataTables_paginate .ui-button:hover,
.pagination.alternate a:hover {
  background-color: #e8e8e8;
    background-image: linear-gradient(top, #f0f0f0, #dadada);
  color: #222222;
  text-shadow: 0 1px 0 #ffffff;
  cursor: pointer;
}

#tier_id
{
  margin-top: 4px;
  margin-left: 10px;
}
.item_tier_no_edit
{
  margin-top: 2px;
  font-size: 16px;
}

#suspend_sale_button,
#cancel_sale_button{
padding:6px 2px;	
}
@media (max-width: 1000px) {
  .category_list {
    width: 24%;
    float: left;
  }
  .spacing {
    clear: both !important;
  }
}
.input-small-mobiles {
  width: 85px !important;
}
#customer_info_shell a {
  width: 49%;
}

#customer_view_modal
{
	margin-bottom: 5px;
	font-size: 15px;
}
.nomargin {
  margin: 0 !important;
}
@media (max-width: 990px) {
  .category_container {
    width: 100% !important;

  }
  #content {
	padding-left:47px;
  }
  
  #sidebar{
	  width:47px;  
  }
  
  #sidebar:hover{
	  width:105px;  
  }
  
  #sidebar > ul > li.active > a{
	  background-image:none !important;  
  }
}
/* override search input style*/
/* Responsive design fix user nav */
#chart_wrapper {
  text-align: center;
}
#chart {
  margin: 0 auto;
  width: 90%;
  height: 500px;
}
/*Gritter styles*/
.gritter-item-error .gritter-item,
.gritter-item-warning .gritter-item,
.gritter-item-success .gritter-item {
  background: #76b5ad !important;
  border-width: 0px;
  color: #FFFFFF;
}
.gritter-item-warning .gritter-item {
  background: #c8b35d !important;
}
.gritter-title {
  font-size: 12px;
  font-weight: bold;
  padding: 0 0 7px 0;
  display: block;
  text-shadow: none;
}
/*Prevent a long list*/
.ui-autocomplete {
  max-height: 250px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
  /* add padding to account for vertical scrollbar */
  z-index: 10000;
}
/*Hack to make sure autocomplete is always on top*/
ul.ui-autocomplete.ui-menu {
  z-index: 10000;
}
/*Hack to make sure date picker is always on top*/
.datepicker {
  z-index: 10000;
}
ul.ui-autocomplete.ui-menu li a {
  padding-top: 7px;
  padding-bottom: 7px;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.autocomplete-touch-start {
  background-color: #ccc;
}
.autocomplete-touch-end {
  background-color: transparent;
}
.required {
  color: red !important;
}
.red_font {
  color: red !important;
}
.green_font {
  color: green !important;
}
.blue_font {
  color: blue !important;
}
.aqua_font {
  color: aqua !important;
}
.fuchsia_font {
  color: fuchsia !important;
}
.navy_font {
  color: navy !important;
}
.purple_font {
  color: purple !important;
}
#category_item_selection:before {
  display: table;
}
.category_item:before {
  content: " ";
  display: inline-block;
  height: 100%;
  vertical-align: text-bottom;
}
.category_item.change:before {
  content: " ";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  
}
.category_item.category:before {
  content: " ";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
/*20230728加*/
.labels.category:before {
  content: " ";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

#confirm:before {
  content: " ";
  color :white; 
  display: inline-block;
  height: 100%;
  
  vertical-align: middle;
}

#confirm.small {
  cursor: pointer;
  /*background-color: #B7B2B2;*/
	background-color: var(--brand-2);
  display: inline-block;
  height: 50px;
  margin-bottom: 0;
  margin-right:0;
  text-align: center;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  color :white;  
  font-weight:600;
  font-size: 15px;  
  padding:5px;
}

#confirm {
    display: inline-block !important;
    height: 200px;
    margin-bottom: 0;
    margin-right: 0;
    text-align: center;
    vertical-align: middle;
    cursor: pointer !important;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 20px 50px !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px rgba(245,87,108,0.35) !important;
    transition: all 0.3s ease !important;
}

@media (min-width: 481px) and (max-width: 767px) {
.category_item {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  cursor: pointer;
  background-color: #fff;
  height: 150px;  /* 原来是 210px */
  margin-bottom: 0;
  margin-right:0;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  font-weight:600;
  font-size: 15px;
}
.category_item.change {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  /*background-color: #B7B2B2;*/
  background-color: #fff;
  height: 50px;
  margin-bottom: 0;
  margin-right:0;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  font-weight:600;
  font-size: 15px;

}
.category_item.category {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
/*  background-color: #F4F6F6;*/
  background-color: #fff;
  height: 80px;
  margin-bottom: 0;
  margin-right:0;
  text-align: center;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  font-size: 20px;
  font-weight:600;
  padding:5px;
}

.labels.category {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
/*  background-color: #fff;*/
  /* 20260829改：使用者反映類別按鈕明顯太高，要求跟購物車表頭(商品名稱/
     數量/小計那一列)差不多高——量過購物車表頭實際高度約39px，這裡改成
     接近的值。 */
  height: 36px;
  margin-bottom: 0;
  margin-right:0;
  text-align: center;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  font-weight:600;
  font-size: 20px;
  padding:5px;
}

#back_to_categories.small {
  cursor: pointer;
  /*background-color: #B7B2B2;*/
	background-color: #fff;
  display: inline-block;
  height: 100px;
  margin-bottom: 0;
  margin-right:0;
  text-align: center;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  
  font-weight:600;
  font-size: 15px;  
  padding:5px;
}

#back_to_categories {
  cursor: pointer;
  background-color: #fff;
  display: inline-block;
  height: 150px;  /* 原来是 210px */
  margin-bottom: 0;
  margin-right:0;
  text-align: center;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  font-weight:600;
  font-size: 25px;  
  padding:5px;
}

}
@media (min-width: 769px) and (max-width: 1024px) {
.category_item {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  cursor: pointer;
  /*background-color: #B7B2B2;*/
  /* 20260829改：這個範圍(769-1024px)剛好是真實平板(桌機常駐購物車模式
     從750px開始)常落在的CSS寬度區間，之前只改了>=1025px那組，平板
     實機測試發現還是原本的高度，這裡也一併減半。 */
  height: 100px;
  margin-bottom: 0;
  margin-right:0;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  font-weight:600;
  font-size: 15px;
}
.category_item.change {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  /*background-color: #B7B2B2;*/
  background-color: #fff;
  height: 50px;
  margin-bottom: 0;
  margin-right:0;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  font-weight:600;
  font-size: 15px;  
  
}
.category_item.category {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
/*  background-color: #F4F6F6;*/
  background-color: #fff;
  height: 80px;
  margin-bottom: 0;
  margin-right:0;
  text-align: center;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  font-size: 30px;
  font-weight:600;
  padding:5px;
}

.labels.category {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
/*  background-color: #fff;*/
  /* 20260829改：使用者反映類別按鈕明顯太高，要求跟購物車表頭(商品名稱/
     數量/小計那一列)差不多高——量過購物車表頭實際高度約39px，這裡改成
     接近的值。 */
  height: 36px;
  margin-bottom: 0;
  margin-right:0;
  text-align: center;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  font-weight:600;
  font-size: 20px;
  padding:5px;
}

#back_to_categories.small {
  cursor: pointer;
  /*background-color: #B7B2B2;*/
	background-color: #fff;
  display: inline-block;
  height: 100px;
  margin-bottom: 0;
  margin-right:0;
  text-align: center;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  
  font-weight:600;
  font-size: 15px;  
  padding:5px;
}

#back_to_categories {
  cursor: pointer;
  /*background-color: #B7B2B2;*/
  background-color: #fff;
  display: inline-block;
  height: 200px;
  margin-bottom: 0;
  margin-right:0;
  text-align: center;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  
  font-weight:600;
  font-size: 25px;  
  padding:5px;
  
}
}

/* 大螢幕 (1025px 以上) 的商品顯示樣式 */
@media (min-width: 1025px) {
.category_item {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  cursor: pointer;
  background-color: #fff;
  /* 20260829改：使用者反映圖片太高，同一個畫面看不到幾樣商品，要求
     高度改成原本(210px)的一半——item_parent_class(有照片的商品卡)的
     照片是inset:0貼滿整張卡片，卡片變矮照片就跟著變矮，等於直接達成
     「圖片高度減半」。 */
  height: 105px;
  margin-bottom: 0;
  margin-right:0;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  font-weight:600;
  font-size: 16px;
}
.category_item.change {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background-color: #fff;
  height: 60px;
  margin-bottom: 0;
  margin-right:0;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  font-weight:600;
  font-size: 16px;
}
.category_item.category {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background-color: #fff;
  height: 90px;
  margin-bottom: 0;
  margin-right:0;
  text-align: center;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  font-size: 32px;
  font-weight:600;
  padding:5px;
}

.labels.category {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  /* 20260829改：使用者反映類別按鈕明顯太高，要求跟購物車表頭(商品名稱/
     數量/小計那一列)差不多高——實測購物車表頭這個寬度下高度約39px，
     這裡改成接近的值。 */
  height: 40px;
  margin-bottom: 0;
  margin-right:0;
  text-align: center;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  font-weight:600;
  font-size: 22px;
  padding:5px;
}

#back_to_categories.small {
  cursor: pointer;
  background-color: #fff;
  display: inline-block;
  height: 110px;
  margin-bottom: 0;
  margin-right:0;
  text-align: center;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  font-weight:600;
  font-size: 16px;
  padding:5px;
}

#back_to_categories {
  cursor: pointer;
  background-color: #fff;
  display: inline-block;
  height: 210px;
  margin-bottom: 0;
  margin-right:0;
  text-align: center;
  border-radius: 5px;
  border:1px solid #d5d5d5;
  font-weight:600;
  font-size: 28px;
  padding:5px;
}
}

.category_item p{
  display: inline-block;

  margin:1em 0 !important;
}

#back_to_categories {

  font-weight: 700;
  font-size: 25px;
  /*background:#333;*/
  color:#fff;
}
#back_to_categories:before {
  content: none;
}

.ui-toolbar{
	background:none;	
}
#category_item_selection_wrapper {
    display: none;
    position: relative;
    top: 0;
    background: #f5f7fa !important;
    padding: 2px !important;
    border-radius: 15px !important;
    border: none !important;
}
#category_item_selection_wrapper .pagination {
    border: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 0;
    margin: 0;
    width: 100%;
    height: 40px;
    float: left;
}
#hide_grid {
  display: none;
}
@media print {

 @page {
	 margin: 0;
	 padding: 0;
 }  
 
 /* Main */
 html {
   overflow-x: visible !important;
 }
 body {
   overflow-x: visible !important;
   overflow-y: visible !important;
 }
 
  body {
    margin: 0 !important;
    padding: 0 !important;
  }
  #content {
    margin: 0 !important;
    padding: 0 !important;
    transition: none;
  	-moz-transition: none;
  	-webkit-transition: none;
  }
  #gritter-notice-wrapper {
    display: none;
  }
  a:link:after,
  a:visited:after {
    display: none;
    content: "";
  }
  #receipt_wrapper {
    width: 84% !important;
    font-size: 10px;
    margin: 7px auto auto auto !important;
    padding: 0 !important;
  }
  

  
  
  
  
  #receipt_wrapper.receipt_small {
  	font-size: 10px !important;
  }

  #receipt_wrapper.receipt_medium {
  	font-size: 12px !important;
  }

  #receipt_wrapper.receipt_large {
  	font-size: 14px !important;
  }

  #receipt_wrapper.receipt_extra_large {
  	font-size: 16px !important;
  }
  
  #receipt_header, #statement_header
  {
  	margin: 0 !important;
	padding: 0 !important;
  }

  .table-responsive {
    width: auto !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    border: 1px solid #dddddd;
    -ms-overflow-style: auto !important;
	 font-size: 70%;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: normal !important;
  }
  
  .store_account_secondress
  {
  	margin-left: 90px;
  }
  
  #duplicate_receipt_holder.active
  {
  	display: block !important;
    page-break-before: always;
	 /*前面裁，後面不要裁;*/
  }

  #duplicate_receipt_holder2.active
  {
  	display: block !important;
 	    page-break-before: always;
	/*  page-break-after:always;*/
  /*前面裁，後面不要裁;*/
  }
  

}

body[data-color="grey"] #user-nav > ul {
  border-left-width: 0px;
}
body[data-color="grey"] #user-nav > ul li {
  border-right-width: 0px;
}
td.innertable {
  display: none;
  background-color: #cccccc;
  padding: 5px !important;
}

#sale-grid-big-wrapper, #receiving-grid-big-wrapper{
position:relative;	
margin-top:-10px;
margin-bottom:15px;
}

#show_hide_grid_wrapper {
position: absolute;
/*  bottom:-56px;*/
right:25%;
bottom:5px;
z-index: 10;  
/*z-index控制選單的顯示層級，愈小表示這個元件愈容易被其他東西蓋過去*/
background: #DFDFDF;

/*padding: 15px 10px 10px 10px;
border-left: 1px solid #C5C5C5;
border-bottom: 1px solid #C5C5C5;
border-right: 1px solid #C5C5C5;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;*/
}

#show_hide_grid_wrapper a#show_grid,
#show_hide_grid_wrapper a#hide_grid{
	text-align:center;	
}

.width_full_always {
  width: 100%;
}

#category_item_selection {
    float: left;
    position: relative;
    margin: 0;
    background-color: #fff;
    padding: 0px 15px 15px 15px !important;
    width: 100%;
}

/*20230728新增*/
#labels_item_selection{
	float:left;
  /*不會折，可能需設定高度	
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;*/
	position:relative;
	margin:0;
  /*padding:上 右 下 左;　padding:上下 左右;　padding:上 左右 下;　padding:四個邊同樣値;*/
	padding:0px 15px 15px 15px;
	width:100%;
  background-color: #fff;
}

category_item_selection_wrapper{
		overflow:visible;

}

@media (min-width: 768px) {
  .sales_minibar {
    width: 105px;
  }
  #wrapper.minibar #sidebar ul {
    width: 50px !important;
  }
  #wrapper.minibar #sidebar ul .hidden-minibar {
    display: none;
  }
  #wrapper.minibar #sidebar ul:hover {
    width: 105px !important;
  }
  #wrapper.minibar #sidebar ul:hover .hidden-minibar {
    display: inline-block;
  }
  .more_taxes_container {
    display: none;
  }
}
#register input[type="text"] {
  width: 100%;
}
/* 20220604加入*/
#register input[name="item_flavor"],
#register input[name="item_savor"],
#register input[name="item_topping"],
#register input[name="item_seasoning"]

{
  width: 60%;
  /*item_seasoning 是舊版用; */
}

#register input[name="item_comment"]

{
  width: 85%;
}

@media (min-width: 990px) and (max-width: 1024px) {
  .input-item-price{
	width: 20px
  }	
  .input-item-quantity{
	width: 20px
  }

  .input-item-taste{
	width: 30px
  }
  .input-small,
  .serial_item {
    width: 85px !important;
  }
  .item_name_heading
	{
	  width: 250px;
	}
}

 
.show-grid ul {
  border-collapse: collapse;
  border-left: 1px solid #cdcdcd;
  line-height: 22px;
  border-top: 1px solid #cdcdcd;
  margin: 0;
  padding: 0;
  overflow: auto;
  background: #fafafa;
  display: block;
}
.show-grid ul li {
  border-right: 1px 0 solid #cdcdcd;
  text-align: center;
  padding: 8px;
  display: block;
  line-height: 22px;
}
.show-grid ul li input {
  width: 100%;
}
.sale_register_rightbox h3 {
  font-size: 18px !important;
  line-height: 1em;
  
}

.sale_register_rightbox h3.sales_totals{
	color:#335E05;
}

.sale_register_rightbox h3.currency_totals{
	font-weight:700;
	color:#335E05;
}

.sale_register_rightbox ul li.spacing {
  padding: 4px 0px !important;
}
.sale_register_rightbox textarea {
  height: 45px !important;
  width: 100%;
}

.category_container {
  width: 79%;
}

/* 大螢幕時增加商品顯示區域寬度 */
@media (min-width: 1600px) {
  .category_container {
    width: 88%;
  }
}

@media (min-width: 1920px) {
  .category_container {
    width: 90%;
  }
}
#sale_details {
  clear: left;
}
.spacing input {
  width: auto !important;
}
.full_width_important {
  width: 100% !important;
}
@media (min-width: 992px) {
  .category_list {
    float: left;
  }
}

#receipt_wrapper_tabular {
  font-family:  Microsoft JhengHei, MingLiU, DFKai-sb, Arial; 
/* font-family: MingLiU; */
/* 微軟正黑體 : Microsoft JhengHei*/
/* 新細明體 : PMingLiU*/
/* 細明體 : MingLiU*/
/* 標楷體 : DFKai-sb*/
  width: 85%;
/*  左右邊界 原來是 2cm */  
  margin: 0 auto auto auto;
/*  列印自動裁切 */  
 
/*    page-break-before: always;*/
/*	page-break-after:always;*/
}

  #receipt_wrapper_90_percent {
  font-family:  Microsoft JhengHei, MingLiU, DFKai-sb, Arial; 
/* font-family: MingLiU; */
/* 微軟正黑體 : Microsoft JhengHei*/
/* 新細明體 : PMingLiU*/
/* 細明體 : MingLiU*/
/* 標楷體 : DFKai-sb*/
  width: 90%;
/*  左右邊界 原來是 2cm */  
  margin: 0 auto auto auto;
/*  列印自動裁切 */  
 
/*    page-break-before: always;*/
	page-break-after:always;
}

#receipt_wrapper_100_percent {
  font-family:  Microsoft JhengHei, MingLiU, DFKai-sb, Arial; 
/* font-family: MingLiU; */
/* 微軟正黑體 : Microsoft JhengHei*/
/* 新細明體 : PMingLiU*/
/* 細明體 : MingLiU*/
/* 標楷體 : DFKai-sb*/
  width: 100%;
/*  左右邊界 原來是 2cm */  
  margin: 20 auto auto auto;
/*  列印自動裁切 */  
 
/*    page-break-before: always;*/
	page-break-after:always;
 	
}

#website {
  margin-bottom: 15px;
}
#receipt_header, #statement_header {
  text-align: center;
}
#company_name {
  text-align: center;
  font-size: 200%;
  font-weight: bold;
}

#header_sale_id_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header_sale_id {
  text-align: left;
  font-size: 200%;
  font-weight: bold;
}

/* 20260824加：桌號+徽章的右側分組容器，讓#header_sale_id_row的
   space-between只在「訂單編號」跟「這一組」之間分兩邊 */
#header_sale_id_row_right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 20260824加：桌號，放在訂購方式徽章前面，同一列
   20260824改：18px放大到24px——使用者反映桌號字太小 */
#header_table_no {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* 20260824加：訂購方式（內用/外帶/外送）色塊徽章，放在收據頁訂單編號
   同一列右邊，跟標籤機貼紙上的徽章設計呼應（見Label_print_lib.php
   render_badge()），三種訂購方式各自固定一個顏色方便一眼辨識。 */
#header_order_type_badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}
.order_type_badge_dinein {
  background-color: #1976D2;
}
.order_type_badge_takeout {
  background-color: #EF6C00;
}
.order_type_badge_delivery {
  background-color: #2E7D32;
}
.order_type_badge_default {
  background-color: #616161;
}

#bold_font {
  font-size: 150%;
  font-weight: bold;
  margin-bottom: 0px;
  
}
#sale_time {
  margin-bottom: 5px;
}
#receipt_items {
  position: relative;
  border-collapse: collapse;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
}
#receipt_items td {
  position: relative;
  padding: 3px;
}
.short_name {
  display: none;
}
#sale_return_policy {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
#barcode {
  margin-top: 10px;
  text-align: center;
  font-family: Barcode1;

}
#signature {
  margin-top: 30px;
  text-align: center;
}
/*Receipt styles end*/
.controlss {
  float: left;
  padding: 0 5px 0 0;
}
.control-groups {
  padding-left: 20px;
}
.labels {
  padding: 0 5px 0 0;
}
.controll-croupz {
  padding: 15px 0;
  margin-bottom: 0;
}
.form-actionzz {
  padding: 10px 40px 10px 239px !important;
}
#report_summary {
  width: 90%;
  margin: auto;
  padding: 0;
  line-height: 40px;
  font-size: 16px;
  background: #FAFAFA;
  border: 1px solid #CDCDCD;
  border-radius: 0px 1px 3px #ccc;
  box-shadow: 0 1px 3px #CCCCCC;
  -moz-box-shadow: 0 1px 3px #CCCCCC;
  -webkit-box-shadow: 0 1px 3px #CCCCCC;
}
.summary_row {
  border-bottom: 1px solid #CDCDCD;
  padding: 0 15px;
}
.form-actionzsz {
  padding: 10px 15px 10px 0px !important;
  margin-top: 0;
  float: right;
}
.text-left {
  padding: 0 0 0 20px;
}
.table-sales {
  margin-top: 20px;
}
.no-padd {
  padding: 0;
}
.editss {
  padding: 0 20px;
}
.control-group-edit {
  padding: 0 25px;
}
.control-group-edit input,
.control-group-edit textarea {
  width: 300px;
  margin: 5px 0;
}
.control-group-edit select {
  width: 300px;
  margin: 5px 0;
  padding: 5px 7px;
  border: 1px solid #CCCCCC;
  border-radius: 3px;
  color: #808080;
  font-size: 13px;
  line-height: 18px;
}
.clear {
  clear: both;
}
#receivings_delete_form {
  float: left;
  margin-left: 13px;
}
.submitzz {
  float: left;
}
.delete_btnz {
  float: right;
}
.form-actionszs {
  padding: 10px 40px 10px 25px !important;
}
.controll-croups1 {
  float: left;
  width: 310px;
  padding: 0 0 0 20px;
}
textarea#comments {
  width: 100% !important;
}
.widget-contentz {
  padding-bottom: 50px !important;
}
.expand_all {
    font-weight: bold;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
}
#sortable_table td {
  line-height: 30px;
}
#location-top select {

  background: url("images/locations-icon.png") no-repeat scroll 15px center #3c3c3c;
  border: medium none;
  color: rgba(255, 255, 255, 0.55);
  height: 32px;
  padding: 5px 2px 5px 50px;
  width: 100%;
}

.control-group {
  margin: 10px 0;
}
.control-label {
  padding: 0px;
}
.expand {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: bold;
}
.logouts {
  background: url(images/logout-icon.png) 15px center no-repeat;
  padding: 3px 0px 4px 33px;
  height: 30px;
}
.logouts a {
  color: #a7a7a7 !important;
  padding: 7px 0 5px 15px !important;
}
.logouts a:hover {
  color: #FFFFFF !important;
}
.bulk-pop {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  margin: auto !important;
  width: 100% !important;
}
.bulks select {
  width: 100% !important;
}
.modal-body-popup {
  padding: 0px 20px !important;
}
.control-group-popup {
  margin: 0px !important;
}
.controls-popup input {
  width: 100%;
}
.controls-popup select {
  width: 100%;
  height: 32px;
  border: 1px solid #CCCCCC;
  border-radius: 3px;
  color: #808080;
  font-size: 13px;
  line-height: 18px;
  padding: 5px 10px;
}
.form-actions1 {
  float: left !important;
  margin: 8px 4px !important;
  padding: 0 !important;
}
.avatar_input {
  margin: auto;
}
#avatar {
  text-align: left;
}
.delete-checkbox,
.tax-checkboxes {
  text-align: left;
  width: 14px;
  background: none;
  border: none;
}
.company_names,
.form-inps,
.form-textarea {
  border: 1px solid #CCCCCC !important;
  border-radius: 3px !important;
  color: #808080 !important;
  display: inline-block !important;
  font-size: 13px !important;
  line-height: 18px !important;
  padding: 8px 10px !important;
  width: 100% !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.company_names:focus,
.form-inps:focus,
.form-textarea:focus {
  outline: 0;
  border-color: rgba(82, 168, 236, 0.8) !important;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6) !important;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6) !important;
}
.taxable-check {
  margin-top: 9px;
}
.image-upload {
  padding-top: 10px;
}
.widget-title1 {
  border: 1px solid #d9d9d9 !important;
  border-radius: none !important;
}
.margin10 {
  margin-bottom: 10px;
}
@media (max-width: 450px) {
  .delete-check {
    margin: auto;
  }
  .controll-croups1 {
    width: 100%;
    text-align: center;
    padding: 0;
  }
  .form-actions1 {
    text-align: center;
    width: 98%;
    padding: 0;
  }
  .avatar_input {
    width: 100%;
  }
}
#sidebar > ul > li > a {
  padding: 10px 0 !important;
}
#sidebar > ul > li > a i {
  width: 47px;
  text-align: center;
  margin-right: 0 !important;
}
.print-buttons {
  float: right;
  margin-top: 55px;
}
.print-buttons a {
  padding: 32px 14px 0;
  cursor: pointer;
  background: url(images/print-btn.png) no-repeat;
}
.report-sumary {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  width: 100% !important;
  margin-right: 0 !important;
}
.prod_image:hover,
.category_item.item.category_list p:hover {
  opacity: 1;

}

.prod_image {
    opacity: 1;
    position: absolute;
    top: 5%;
    width: auto;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transition: all 0.4s ease !important;
}

.prod_image.small {
  opacity: 1;
  position: absolute;
  top: 0;
  width: 0px;
}

.category_item.item.category_list > p {
  color: #000000;
  font-weight: 500;
  position: relative;
}
input[type="text"] {
  color: #444444 !important;
  
}
.forms-area {
  margin-bottom: 15px;
}
.sales_items_number {
  width: 10%;
}
.sales_item_taste {
  width: 15%;
}
.sales_price {
  width: 15%;
}
.sales_quality {
  width: 8%;
}
.sales_discount {
  width: 8%;
}
.cart_content_area {
  background: #fff;
}
.customer-basic-information {
  margin-top: 0px;
}
.sales_totals,
.currency_totals,
.amount_dues,
.sales_amount_due {
  margin: 0px;
}
.headings {
  margin-top: 7px;
}
.common_or {
  padding-top: 7px;
}
.small_button {
  margin: 0 auto;
}
.tiers_main {
  padding: 12px 0 0px;
}
.items_tiers {
  float: left;
  margin: 0px;
  margin-top: 0 !important;
  padding: 3px 15px 5px 0px;
  padding-right: 5px; 
  font-size: 13px !important;
}
.warning-buttons {
  width: 45% !important;
}

.btn_back_to_categories {
    width: 100%;
    height: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%) !important;
    color: white !important;
    padding: 0;
    margin-bottom: 0;
    cursor: pointer;
    border: none !important;
    border-radius: 15px !important;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(var(--brand-2-hover-rgb),0.35) !important;
    transition: all 0.3s ease !important;
}
.btn_back_to_categories i {
    font-size: 28px;
    margin-bottom: 6px;
}
.btn_confirm {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    color: white !important;
    padding: 20px !important;
    margin-bottom: 0;
    cursor: pointer;
    border: none !important;
    border-radius: 30px !important;
    font-weight: 600;
    font-size: 28px !important;
    box-shadow: 0 8px 20px rgba(245,87,108,0.35) !important;
    transition: all 0.3s ease !important;
}
.btn_confirm.small {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    color: white !important;
    padding: 12px !important;
    margin-bottom: 0;
    cursor: pointer;
    border: none !important;
    border-radius: 30px !important;
    font-weight: 600;
    font-size: 18px !important;
}
.button_dangers {
  width: 47% !important;
}
.input_mediums {
  width: 45%;
}
.input_large{
  width: 70%;
}
.input_extralarge{
  width: 80%;
}	
.input_full_large{
  width: 100%;
}
.email_receipt_checkbox {
  float: left;
}
.sale_form_main {
  visibility: visible;
  text-align: center;
  padding: 6px;
}
/* 20260825加：「整體銷售打折」這排上面加一條分隔線，跟上面的訂單編號查詢/
   清除重來區隔開來 */
#global_discount {
  padding-top: 10px;
  margin-top: 6px !important;
  border-top: 1px solid #eee;
}

/* 20260809改：購物車跟結帳表單（訂購方式/聯絡人/備註/金額/送出按鈕）原本無縫接在一起，
   容易讓人搞不清楚「這裡開始是在填怎麼取餐，不是在調整商品」。這幾塊本來就是分開的
   DOM 元素（表單/金額表格/送出按鈕區各自獨立），不強行合併成一塊，改成套同一套底色+
   圓角，中間留一點點縫，視覺上讀起來像同一個區域，風險比重排 HTML 結構低很多 */
#checkout_section_divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0 0;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%) !important;
  color: #fff;
  border-radius: 12px 12px 0 0;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(var(--brand-2-hover-rgb),0.35);
}
#customer_order_info,
#sale_details,
.sale_form_main {
  background: var(--panel-light, #f7f5fa) !important;
  box-sizing: border-box;
}
#customer_order_info {
  border-radius: 0 0 0 0;
  margin-top: 0 !important;
}
#sale_details {
  border-radius: 0;
  padding: 10px 4px;
}
/* #customer_order_info 表單跟 #sale_details 中間隔著空的 #messageBox1，
   會空出一小段沒有底色的縫，把外層 <li> 往上拉一點貼緊，視覺上才連得起來
   （要拉外層 <li> 本身，不能只拉裡面的 #sale_details，不然 li 自己的邊框
   會被子層的負 margin 頂穿，看起來像浮在外面） */
li:has(#sale_details) {
  margin-top: -20px !important;
}
.sale_form_main {
  border-radius: 0 0 12px 12px;
  padding-bottom: 16px;
}
/* 20260815加：訂單預覽頁「全部清除重來」跟「返回修改此訂單」這兩顆按鈕分別
   來自 receipt_order_component_buttons.php／receipt_order_component_edit_suspended.php
   兩個獨立元件，各自外層都包了一個 <div id="receipt_wrapper_content">
   （block 元素，這個 id 全站到處重複用，不能單獨選取），單純調整 include
   順序只能讓它們在 DOM 上前後相鄰，畫面上還是各自另起一行、隔很遠。
   用 display:contents 讓這兩層外殼在版面上「消失」，裡面的按鈕/表格直接變成
   .receipt_bottom_actions_row 的 flex 子項目，才能真的排在同一排；選擇器限定
   「.receipt_bottom_actions_row 的直接子層」，不會動到其他頁面同樣 id 的元素。 */
.receipt_bottom_actions_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.receipt_bottom_actions_row > #receipt_wrapper_content {
  display: contents;
}
.form-inps-tax {
  border: 1px solid #CCCCCC !important;
  border-radius: 3px !important;
  color: #808080 !important;
  display: inline-block !important;
  font-size: 13px !important;
  line-height: 18px !important;
  padding: 8px 10px !important;
  width: 95% !important;

}
.form-inps-tax:focus {
  outline: 0;
  border-color: rgba(82, 168, 236, 0.8) !important;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6) !important;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6) !important;
}
.tax-percent-icon {
  float: left;
  line-height: 32px;
  text-align: center;
  width: 5%;
}
.mobile_break {
  display: none;
}
.item_navigation {
  width: 250px !important;
  margin: 0 auto;
}
.previous_item {
  width: 125px;
  float: left;
  margin-top: 8px;
}
.next_item {
  width: 125px;
  float: right;
  margin-top: 8px;
}
.gritter-item {
  filter: none !important;
}
#gritter-notice-wrapper
{
	z-index: 10002;
}
.repors-summarys {
  width: 100% !important;
  background: none !important;
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-align: center;
  border: none !important;
}
#rollover_image {
  position: absolute;
  border: 1px solid #ccc;
  background: #333;
  padding: 5px;
  display: none;
  color: #fff;
}
body[data-color="grey"] #search {
  border: 1px solid #ccc;
}

@media (max-width: 1063px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid #dddddd;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
    /*color:purple;*/
  }
  .table-responsive > .table-bordered {
    border: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}
@media (max-width: 1024px) {
  #search {
    margin-right: 5px;
  }
  
  /* 20260828修：原本min-height:1000px !important，會強制側欄撐到至少
     1000px高，跟上面第469行附近新加的max-height:100vh衝突(min-height
     優先，會蓋掉max-height的限制)，導致平板橫向這種畫面高度不到1000px
     的裝置，側欄還是會被撐出視窗外、選單捲不到底部的登出。這裡拿掉，
     交給base規則的max-height:100vh+overflow-y:auto處理就好。 */
  #user-nav{
	  position:absolute;
  }
  /* 20260809改：#header、#sidebar 原本在這個斷點（≤1024px，涵蓋幾乎所有手機/
     平板）被改成 position:absolute，捲動頁面時會跟著捲走。#header 之前已經修過
     （點類別觸發長距離捲動時消失很明顯），現在 #sidebar（左邊漢堡選單展開的
     選單）也是同樣問題：捲到下面時按選單鈕，選單會出現在畫面外看不到，因為
     它是照文件排版的位置展開，不是照目前視窗位置。改成維持 position:fixed
     （見上面第 466 行的原始設定），不管捲到哪裡按選單都會固定顯示在畫面上 */

}
.edit-sale-header
{
  margin-top: 40px !important;
}
/* 20260809改：#ajax-loader 原本跟著文件排版走（#content-header 是 float:left，
   min-height:0），顯示/隱藏時圖片本身的高度會讓下面的內容跟著垂直位移一小段，
   捲動很遠的使用者按+/-送出時感覺像「畫面被推動」。改成 fixed 完全脫離文件流，
   顯示/隱藏都不會影響任何其他內容的位置 */
#ajax-loader
{
	display: none;
	position: fixed !important;
	top: 8px;
	left: 60px;
	z-index: 25;
}
@media (max-width: 993px) {
 #header
 {
  margin-top: 0px;
 }
  
}
.pricing-widget
{
  background-color: #ececec !important;
}

#dTable
{
	clear: both;
}
@media (max-width: 681px){
  .receiving-header
  {
    margin-top: 30px !important;
  }
  .sales_header_container
  {
    margin-top: 30px !important;
  }
}

.modal-dialog
{
	margin-top: 55px;
}
.widget-box
{
  margin-top: 0px;
  background: #ffffff;
}
.form-control
{
  border-radius: 3px !important;
}
.form-control:focus
{
  border-radius: 3px !important;
  border-color: skyblue !important;
  -webkit-box-shadow: 0 0 6px skyblue !important;
  -moz-box-shadow: 0 0 5px skyblue !important;
  box-shadow: 0 0 5px skyblue !important;

}
.modal .widget-box
{
  margin-top: 60px;
}
.stat-boxes .right
{
  
    padding: 10px 24px 6px 4px;
    font-size: 18px;
    font-weight: bold;
}
.stat-boxes-pages li
{
	margin :0 3px 3px;
}
.cmp-inps
{
  padding-left: 16px;
  padding-right: 30px;
}
.cmp-lbl
{
  padding-left: 11px !important;
}

.table > thead > tr > th:nth-child(2)
{
  text-align: center !important;
  
}

.sale-s
{
  top: 7px !important;
}
.table > tbody > tr
{
  background: #fff;
}
.ss
{
  margin-left: -8px !important;
}

a.clear-state
{
 margin-right: 10px;
 color: #fff !important;
}

#search_form
{
	margin-left: 15px;
}

#opener
{
	padding: 10px;
   display: inline-block;
}

#select_sales_person
{
	padding: 0 10px;
}

.ui-dialog-titlebar-close 
{
	background-image: url("../img/jquery-ui/ui-icons_888888_256x240.png") !important;
	background-position: -96px -128px !important;
}

#duplicate_receipt_holder
{
	display: none;
}

#duplicate_receipt_holder2
{
	display: none;
}

.credit_limit_warning
{
	font-weight: bold;
	color: red;
}

.credit_limit_ok
{
	font-weight: bold;
	color: green;
}

.left_text_align
{
	text-align: left;
	font-weight: bold;
}

.right_text_align
{
	text-align: right;
	font-weight: bold;
}

.right_text_align_small
{
	text-align: right;
	font-weight: bold;
  font-size: smaller;
}
.site-stats {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-stats > h4 > a {
  background-color: #F5F5F5;
  border: 1px solid #DDDDDD;
  cursor: pointer;
  margin: 20px 20px 10px;
  padding: 20px 20px 10px;
  position: relative;
  display: block;
}
.site-stats > h4 > a:hover {
  background-color: #EDEDED;
}
.site-stats > h4 > a .cc {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.site-stats > h4 > a:hover .cc {
  -webkit-transform: translateX(10px);
  -moz-transform: translateX(10px);
  -ms-transform: translateX(10px);
  -o-transform: translateX(10px);
  transform: translateX(10px);
}
.site-stats > h4 > a.divider {
  padding: 0;
  border-width: 1px 0 0;
  border-color: #DDDDDD;
  border-style: dashed;
}
.site-stats > h4 > a i {
  vertical-align: baseline;
}
.site-stats > h4 > a strong {
  font-weight: bold;
  font-size: 20px;
  margin-left: 5px;
}
.site-stats > h4 > a small {
  margin-left: 5px;
  font-size: 12px;
  color: #888888;
  font-style: italic;
}
.blink {
    animation-duration: 1s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    81% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
#google_translate_element{
  position:absolute;
  left:15px;
bottom:10px;
/*	display: none;全部消失*/
}
  #google_translate_element img {
      display: none;
  }
.menu-translate-header{ /*自訂選單*/
  position:absolute;
  right:15px;
top:0px;
}
/* disable google translate original text tooltips */
/*!important 是「更重要」的意思，對新的browser來說，是最高優先的意思；注意分號的位置 */
.goog-tooltip {
  display: none !important;
}
.goog-tooltip:hover {
  display: none !important;
}
/* 評分翻譯品質*/ 
#goog-gt-tt {
  display: none !important;
}
.goog-text-highlight {
  background-color: transparent !important;
  border: none !important; 
  box-shadow: none !important;
}

/* =========================================
   20251027 點餐介面美化 CSS
   ========================================= */

/* 1. 類別按鈕美化（快炒、海產、飯麵等）
   20260809改：這裡原本寫死一組靛藍轉紫色的漸層背景（base 跟 :hover 都有）。
   base 的背景跟後面「分類按鈕輪替配色」(.category.cat-color-N) 選擇器優先度打平，
   靠後面出現贏過去，所以平常看不出問題；但 :hover 多了一個偽類，優先度反而
   比 cat-color-N 高，不管主題選哪個顏色，只要進入 hover 狀態（手機點擊後常常會
   卡在 hover 不會自動退出）背景就會被這裡的寫死紫色蓋掉。拿掉這兩處背景色，
   顏色完全交給 cat-color-N 決定 */
.labels.category {
    color: white !important;
    border: none !important;
    /* 20260829改：使用者反映類別按鈕太圓，原本15px在現在已經縮小的按鈕
       高度(約36-40px)下比例上顯得像藥丸形狀，改成跟購物車表頭/一般按鈕
       同等級的6px，維持一致但不那麼圓 */
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    height: 80px !important;
    margin: 8px !important;
}

.labels.category:hover {
    transform: translateY(-5px) !important;
}

.labels.category:active {
    transform: translateY(-2px) scale(0.98) !important;
}

.labels.category b {
    font-size: 24px !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.labels.category span {
    font-size: 26px !important;
    font-weight: 800 !important;
    background: rgba(255,255,255,0.25) !important;
    padding: 5px 15px !important;
    border-radius: 20px !important;
}

/* 2. 商品按鈕美化 */
/* 20260913改：使用者要求邊框跟按鈕統一改成6px(不要太圓)，跟購物車
   儲存/結帳按鈕、頁面/類別按鈕一致。 */
.category_item.item {
    border: 2px solid #e8e8e8 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
    position: relative;
}

/* 20260923加：商品「售完」快速標記——店員在收銀畫面商品格右上角一鍵
   切換(.sold-out-toggle-btn)，標記後這裡疊一個紅色斜角戳章蓋在整個
   商品格上，不管卡片模式/清單模式/手機模式/顏色形狀代表格都是同一顆
   .category_item.item外層，疊在外層上一次到位，不用針對每種顯示模式
   分別處理。
   20260923修：戳章原本用.category_item.item.sold-out::after實作，
   實測完全沒顯示——本檔案line 6265/6295/6222已經有#wrapper.staff-phone-mode
   跟customer-list-layout模式下對.category_item.item::after整批
   `display:none!important;content:none!important;`的既有規則(給flex
   最後一列對齊用的清除技巧)，特異度比這裡高、又有!important，會直接
   蓋掉戳章。改成register_initial.php直接輸出一個真正的.sold-out-stamp
   DOM元素(不是虛擬的::after)，不會被那組規則影響。戳章本身
   pointer-events:none，真正擋掉加入購物車是靠JS click handler判斷
   .sold-out這個class(見register_initial.php)，這裡純視覺。 */
.category_item.item.sold-out {
    opacity: 0.7;
}
.sold-out-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-16deg);
    background: rgba(200, 30, 24, 0.92);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    padding: 3px 16px;
    border: 2px solid #fff;
    border-radius: 4px;
    letter-spacing: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    pointer-events: none;
    z-index: 15;
    white-space: nowrap;
}
/* 20261017改：不再有每格按鈕，改工具列#sold_out_mode_toggle進入售完模式 */
#sold_out_mode_toggle { margin-right: 6px; }
#sold_out_mode_toggle.is-active { background: #c81e18 !important; color: #fff !important; }
#category_item_selection_wrapper.sold-out-mode .category_item.item:not(.mix-category-header):not(.page-category-tile) {
    outline: 2px dashed #c81e18 !important;
    outline-offset: -2px !important;
    cursor: pointer;
}

.category_item.item:hover {
    border-color: #667eea !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(102,126,234,0.25) !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%) !important;
}

.category_item.item:active {
    transform: translateY(-2px) scale(0.98) !important;
}

.category_item.item p {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 8px !important;
}

.category_item.item span {
    font-size: 18px !important;
    font-weight: 700 !important;
    
}

/* 3. 商品圖片美化 */

.prod_image:hover {
    transform: scale(1.08) rotate(2deg) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
}

.btn_confirm:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(245,87,108,0.5) !important;
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%) !important;
}


#confirm:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(245,87,108,0.5) !important;
}

/* 5. 返回類別按鈕 */
#back_to_categories:hover,
.btn_back_to_categories:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(var(--brand-2-hover-rgb),0.45) !important;
    background: linear-gradient(135deg, var(--brand-1-hover) 0%, var(--brand-2-hover) 100%) !important;
}

/* 6. 整體容器美化 */
#sale-grid-big-wrapper {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%) !important;
    padding: 5px !important;
    border-radius: 20px !important;
}



/* 7. 公司 LOGO 美化 */

#company_photo img {
    border-radius: 15px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 220px !important;
}

/* 8. 動畫效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.category_item,
.labels.category {
    animation: fadeIn 0.4s ease-out !important;
}

/* 9. 按鈕按下效果 */
.category_item:active,
.labels.category:active,
.btn_confirm:active,
#confirm:active {
    transform: scale(0.95) !important;
}

/* 10. 手機版優化 */
/* 11. 浮動按鈕美化 */
/* 20260913改：使用者陸續指出「清除全部資料」「新增付款」這幾顆按鈕
   邊框太圓，要跟購物車下方「儲存/結帳」按鈕(6px)一致——這幾顆都是
   共用這裡的.btn-primary/.btn-danger/.btn-default全域樣式，直接改這裡
   一次套用到全站同類型按鈕，不用一顆一顆另外寫override。 */
.btn-danger,
.btn-default,
.btn-primary {
    border-radius: 6px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    transition: all 0.3s ease !important;
}

.btn-danger:hover,
.btn-default:hover,
.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.25) !important;
}

/* 12. 載入動畫 */
#ajax-loader {
    animation: pulse 1.5s ease-in-out infinite !important;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}


@keyframes pageLoad {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========================================= */
/* ========== 美化所有 select 下拉選單 ========== */

/* 基本樣式 - 針對所有 select */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 35px 10px 15px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    min-width: 120px;
}

select:hover {
    border-color: #4CAF50;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}

select:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

/* 商品選項下拉選單 - 在購物車內 */
select[id^="item_taste_select_"],
select[name="item_taste"] {
    background-color: #f8f9fa;
    border: 2px solid #dee2e6;
    font-size: 14px;
    padding: 8px 30px 8px 12px;
    min-width: 100px;
}

select[id^="item_taste_select_"]:hover,
select[name="item_taste"]:hover {
    background-color: #ffffff;
    border-color: #2196F3;
}

/* 訂購方式區域的桌號選單 */
select[name="table_number"],
.sale_register_rightbox select {
    background-color: #fff;
    border: 2px solid #ddd;
    padding: 10px 35px 10px 15px;
    font-size: 16px;
    font-weight: 600;
    color: #444;
    min-width: 140px;
}

.sale_register_rightbox select:hover {
    border-color: #FF9800;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2);
}

/* 選項文字樣式 */
select option {
    padding: 10px;
    font-size: 15px;
}

select option:hover {
    background-color: #f0f0f0;
}

/* 禁用狀態 */
select:disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    border-color: #e0e0e0;
}

/* 響應式調整 */
/* ========== 訂購方式區域完整修正 ========== */

/* 整個表格行高度統一 */
.sale_register_rightbox table tbody tr {
    height: 50px;
}

/* 訂購方式和桌號 - 父層對齊 */
.sale_register_rightbox table tbody tr td {
    vertical-align: middle !important;
    padding: 8px !important;
}

/* 訂購方式區塊 - flex 布局優化 */
/* 訂購方式區塊 */
td[width="120%"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px;
    height: auto !important;
    min-height: 45px;
    padding-right: 20px !important;
    border-right: 2px solid #e0e0e0 !important;
}

td[width="120%"] > span:first-child {
    font-weight: 600;
    margin-right: 12px;
    white-space: nowrap;
}

td[width="120%"] input[type="radio"] {
    margin: 0 6px 0 0 !important;
    transform: scale(1.3);
    vertical-align: middle;
}

td[width="120%"] input[type="radio"] + span {
    margin-right: 16px !important;
    font-size: 15px;
    white-space: nowrap;
}

/* 桌號區塊 */
td#table_no_section {
    padding: 8px 8px 8px 20px !important;
}

td#table_no_section > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 45px;
    gap: 10px;
}

td#table_no_section label,
td#table_no_section > div > span:first-child {
    font-weight: 600;
    white-space: nowrap;
}

select[name="table_no"],
select#table_no {
    height: 36px !important;
    padding: 5px 30px 5px 12px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    vertical-align: middle;
    margin: 0 !important;
    min-width: 110px;
}

td[width="120%"] br,
td#table_no_section br {
    display: none !important;
}

.sale_register_rightbox table tr td {
    vertical-align: middle !important;
}

/* 性別區塊 */
input[type="radio"][id^="gender_"] {
    margin: 0 6px 0 12px !important;
    transform: scale(1.3);
}

input[type="radio"][id^="gender_"]:first-of-type {
    margin-left: 0 !important;
}

input[type="radio"][id^="gender_"] + span {
    margin-right: 16px !important;
    font-size: 15px;
}

/* ========== iPad 版面優化 (768px - 1024px) ========== */

@media (min-width: 768px) and (max-width: 1024px) {
    
    /* 訂購方式區塊 - iPad 優化 */
    td[width="120%"] {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 15px !important;
        border-right: 2px solid #e0e0e0 !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        max-width: none !important;
    }
    
    td[width="120%"] > span:first-child {
        font-size: 15px;
        margin-right: 10px;
        flex-shrink: 0;
    }
    
    td[width="120%"] input[type="radio"] {
        margin: 0 5px 0 0 !important;
        transform: scale(1.25);
        flex-shrink: 0;
    }
    
    td[width="120%"] input[type="radio"] + span {
        margin-right: 14px !important;
        font-size: 14px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    td[width="120%"] input[type="radio"]:last-of-type + span {
        margin-right: 0 !important;
    }
    
    /* 桌號區塊 - iPad */
    td#table_no_section {
        padding: 10px 15px !important;
        width: auto !important;
    }
    
    td#table_no_section > div {
        gap: 10px !important;
    }
    
    select[name="table_no"],
    select#table_no {
        height: 38px !important;
        font-size: 15px !important;
        padding: 6px 32px 6px 12px !important;
        min-width: 120px;
    }
    
    /* 聯絡人輸入框 - iPad */
    input[name="contact_person"] {
        height: 38px !important;
        font-size: 15px !important;
        max-width: 200px;
    }
    
    /* 性別區塊 - iPad */
    td > div[style*="height"] {
        padding: 10px !important;
        gap: 6px !important;
    }
    
    input[type="radio"][id^="gender_"] {
        margin: 0 5px 0 10px !important;
        transform: scale(1.25);
    }
    
    input[type="radio"][id^="gender_"] + span {
        margin-right: 14px !important;
        font-size: 14px;
    }
    
    /* 手機號碼 - iPad */
    input[name="cellphone"],
    input#cellphone {
        height: 38px !important;
        font-size: 15px !important;
    }
}

/* ========== 手機版響應式 ========== */

/* ========== 商品類別按鈕 - 超大字體版 ========== */

/* 預設桌面版 (1024px以上) */
@media (min-width: 1024px) {
    
    /* 所有商品類別按鈕 */
    #category_item_selection .category_item,
    #category_item_selection a,
    .category_item_selection .category_item,
    .category_item_selection a,
    #category_item_selection_wrapper .category_item,
    #category_item_selection_wrapper a {
        font-size: 22px !important;
        font-weight: 700 !important;
        padding: 18px 12px !important;
        line-height: 1.5 !important;
        min-height: 80px !important;
    }
    
    /* 回上層按鈕 */
    #category_item_selection .back_to_category,
    .back_to_category,
    button.back_to_category,
    a.back_to_category {
        font-size: 22px !important;
        font-weight: 700 !important;
        padding: 18px 24px !important;
        min-height: 80px !important;
    }
    
    /* 商品名稱 */
    #category_item_selection .item_name,
    .category_item .item_name {
        font-size: 22px !important;
        font-weight: 700 !important;
        margin-bottom: 6px;
    }
    
    /* 價格 */
    #category_item_selection .price,
    #category_item_selection .item_price,
    .category_item .price {
        font-size: 20px !important;
        font-weight: 600 !important;
        color: #e74c3c;
    }
    
}

/* 超大螢幕 (1920px以上) - 巨大字體 */
/* 超大螢幕 (1920px以上) - 只放大文字，商品圖片使用默認樣式 */
@media (min-width: 1920px) {
    
    /* 商品選單項目放大文字 */
    #category_item_selection .category_item,
    #category_item_selection a,
    #category_item_selection_wrapper .category_item,
    #category_item_selection_wrapper a {
        font-size: 28px !important;
        padding: 22px 15px !important;
        min-height: 100px !important;
    }
    
    /* 返回按鈕放大文字 */
    #category_item_selection .back_to_category,
    .back_to_category {
        font-size: 28px !important;
        padding: 22px 28px !important;
        min-height: 100px !important;
    }
    
    /* 商品名稱放大文字 */
    #category_item_selection .item_name {
        font-size: 28px !important;
        margin-bottom: 8px;
    }
    
    /* 價格放大文字 */
    #category_item_selection .price,
    #category_item_selection .item_price {
        font-size: 26px !important;
    }
    
    /* 註：此處已移除 .category_item.item 和 .prod_image 的樣式設定 */
    /* 讓 1920px 的商品圖片大小與 1025-1599px 保持一致（無高度限制）*/

}

/* 4K 螢幕 (2560px以上) - 超巨大字體 */
@media (min-width: 2560px) {
    
    #category_item_selection .category_item,
    #category_item_selection a,
    #category_item_selection_wrapper .category_item,
    #category_item_selection_wrapper a {
        font-size: 34px !important;
        padding: 26px 18px !important;
        min-height: 120px !important;
    }
    
    #category_item_selection .back_to_category,
    .back_to_category {
        font-size: 34px !important;
        padding: 26px 32px !important;
        min-height: 120px !important;
    }
    
    #category_item_selection .item_name {
        font-size: 34px !important;
    }
    
    #category_item_selection .price,
    #category_item_selection .item_price {
        font-size: 32px !important;
    }

}

/* ========== 手機版響應式 (集中管理) ========== */
/* 原本分散在 16 個區塊，現已合併 */

@media (max-width: 767px) {

    .input-small-mobiles {
        width: 30%;
      }
      .forms_to {
        font-size: 66px;
        line-height: 20px;
      }
      .forms_to1 {
        font-size: 28px;
        line-height: 20px;
      }
      .form-horizontal-mobiles {
        text-align: center;
      }
      .form-horizontal-mobiles select {
        width: 100%;
      }
      .mobile_break {
        display: block !important;
      }
      #search-top {
        display: none;
      }

    .category_container {
        width: 100% !important;
      }
      #search {
        position: relative;
      }
      .category_list {
        width: 32%;
        float: left;
      }

    .edit_description {
        column-span: 3 !important;
      }
      .width_full {
        width: 100%;
      }

    /* 合併：sidebar 所有 mobile 定義 */
    #sidebar {
        width: 47px;
        left: -105px;
        overflow: auto;
        transition: all 0.25s ease !important;
        -moz-transition: all 0.25s ease !important;
        -webkit-transition: all 0.25s ease !important;
    }

    #sidebar.sales_minibar {
        width: 105px !important;
    }

    #sidebar ul {
        padding-top: 0;
    }

    /* 合併：content 所有 mobile 定義 */
    #content {
        padding-left: 0;
        margin-top: 0;
        margin-left: 0 !important;
        width: 100%;
    }

    #content.sales_content_minibar {
        padding-left: 0;
    }

    #content-header {
        margin-top: 0;
    }

    #custom-report {
        display: none;
    }

    /* 合併：sales_header_container 所有 mobile 定義 */
    .sales_header_container {
        width: 100%;
        clear: both;
    }
    .sales_header_container h1 {
        float: left;
        text-align: left !important;
        font-size: 2em !important;
    }
    .no_left_right_border {
        border-left: none;
        border-right: none;
    }
    #register_container {
        margin-top: 0;
        position: relative;
    }

    .sales_minibar {
        width: 105px !important;
      }
      #wrapper.minibar #sidebar ul {
        width: 105px !important;
      }

    .input-item-price{
    	width: 20px
      }	
      .input-item-quantity{
    	width: 10px
      }

      .input-item-taste{
    	width: 20px
      }

      .input-small,
      .serial_item {
        width: 85px !important;
      }

    .bulk-pop {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        margin: auto !important;
        width: 100% !important;
      }
      .controll-croups1 {
        width: 100%;
        text-align: center;
        padding: 0;
      }
      .form-actions1 {
        width: 98% !important;
        text-align: center !important;
      }
      #sidebar {
        overflow: auto;
      }

    #receipt_wrapper
          {
            margin-top: 0px; 
          }
          #receipt_header, #statement_header 
          {
            margin-top: 0px;
          }

    #header {
    	 height: 50px;
    	 left: 0;
    	 top: 0;
      }

      #content-header h1{
    	margin-left:0;  
      }

      #header h1
      {
      	top: 0px;
      }

      
    .stat-boxes .left,
      .stat-boxes .right {
        text-shadow: 0 1px 0 #ffffff;
        width: 100%;
      }
      .stat-boxes .right strong {
       font-size: 16px;
     }
      .stat-boxes .left {
        border-bottom: 1px solid #DCDCDC;
        border-right: 0px solid #DCDCDC;
        box-shadow: 1px 0 0 0 #FFFFFF;
    	-moz-box-shadow: 1px 0 0 0 #FFFFFF;
    	-webkit-box-shadow: 1px 0 0 0 #FFFFFF;
        margin-right: 12px;
        padding: 10px 14px 6px 4px;
        font-size: 10px;
        font-weight: bold;
      }
      .menu-open #header{
    	left: 105px;
    	border-left:1px solid #033B66;
    	box-shadow: 0 0 10px #000;
    	-moz-box-shadow: 0 0 10px #000;
    	-webkit-box-shadow: 0 0 10px #000;
      }

      .menu-open #footer{
    	left: 105px;
      }

      .menu-open #content #footer{
    	left: 0;
      }

      #header,
      #footer{
    	  left:0px;
    	  transition: all 0.25s ease !important;
    	-moz-transition: all 0.25s ease !important;
    	-webkit-transition: all 0.25s ease !important;
      }

      #content{
    	  left:0px;
    	 transition: all 0.25s ease !important;
    	-moz-transition: all 0.25s ease !important;
    	-webkit-transition: all 0.25s ease !important;
      }

      .menu-open #content {
    	left: 105px;
    }

    .menu-open #sidebar {
    	left:0;
    	border-right:1px solid #02243D;
    }

    .img-polaroid-s
    {
      width: 100% !important;
    }

    .sale-s
        {
          top: 0px;
        }

    .labels.category {
            height: 70px !important;
            margin: 5px !important;
        }

        .labels.category b {
            font-size: 20px !important;
        }

        .labels.category span {
            font-size: 22px !important;
        }

        .category_item.item p {
            font-size: 18px !important;
        }

        .category_item.item span {
            font-size: 18px !important;
        }

        .btn_confirm,
        #confirm {
            font-size: 24px !important;
            padding: 15px 30px !important;
        }

    select {
            font-size: 14px;
            padding: 8px 30px 8px 12px;
        }

        /* 訂購方式整行 */
        .sale_register_rightbox table tbody tr:first-child {
            display: flex;
            flex-wrap: wrap;
        }

        /* 訂購方式區塊 */
        td[width="120%"] {
            width: 100% !important;
            max-width: 280px !important;
            padding: 8px 10px !important;
            gap: 6px !important;
            border-right: none !important;
            flex-shrink: 0;
        }

        td[width="120%"] > span:first-child {
            font-size: 14px;
            margin-right: 6px;
        }

        td[width="120%"] input[type="radio"] {
            margin: 0 3px 0 0 !important;
            transform: scale(1.15);
        }

        td[width="120%"] input[type="radio"] + span {
            margin-right: 8px !important;
            font-size: 13px;
        }

        /* 桌號區塊 */
        td#table_no_section {
            width: auto !important;
            max-width: 180px !important;
            padding: 8px 5px !important;
            flex-shrink: 1;
        }

        td#table_no_section > div {
            gap: 6px !important;
            min-height: auto !important;
            height: auto !important;
        }

        td#table_no_section > div > span:first-child {
            font-size: 13px;
        }

        select[name="table_no"],
        select#table_no {
            height: 32px !important;
            font-size: 13px !important;
            padding: 4px 26px 4px 8px !important;
            min-width: 85px !important;
            max-width: 100px !important;
        }

        /* 聯絡人和性別各佔一行，無需特殊寬度分配 */

        input[name="contact_person"] {
            height: 32px !important;
            font-size: 13px !important;
            padding: 4px 8px !important;
            width: 100% !important;
            max-width: 160px;
        }

        /* 性別區塊：20260813 使用者反映外帶/外送時「小姐/先生/其他」字太小、
           圓點按鈕也太小，不好點，一起放大 */
        td > div[style*="height"] {
            height: auto !important;
            min-height: 40px !important;
            padding: 8px 4px !important;
            gap: 4px !important;
        }

        input[type="radio"][id^="gender_"] {
            margin: 0 4px 0 8px !important;
            transform: scale(1.5) !important;
        }

        input[type="radio"][id^="gender_"]:first-of-type {
            margin-left: 0 !important;
        }

        input[type="radio"][id^="gender_"] + span {
            margin-right: 10px !important;
            font-size: 17px !important;
        }

        /* 手機號碼區域 */
        .sale_register_rightbox table tbody tr td[colspan="2"] {
            padding: 8px 10px !important;
            line-height: 1.4 !important;
        }

        input[name="cellphone"],
        input#cellphone {
            height: 36px !important;
            font-size: 14px !important;
            padding: 6px 10px !important;
            margin-top: 4px !important;
            margin-bottom: 0 !important;
            width: 100% !important;
        }

        .sale_register_rightbox .form-control {
            margin-bottom: 0 !important;
        }

        input[type="checkbox"]#save_contact_info_in_browser {
            margin: 0 6px 0 0;
            transform: scale(1.2);
        }

}

/* ========== 小螢幕手機版響應式 ========== */
/* 原本分散在 4 個區塊，現已合併 */

@media (max-width: 480px) {

    /* 訂購方式整行
       20260813：#table_no_section、#pickup_time_section、#delivery_address_section、
       .contact_fields_row 這幾列需要依訂購方式用 jQuery .hide()/.show() 動態
       切換顯示——jQuery 只會設定沒有 !important 的 inline display，蓋不過這裡的
       !important，一定要排除掉，不然選內用/外帶/外送時，這些欄位在手機版永遠
       都會被強制顯示（就算內容本身被隱藏，空的整列還是會留下一段空白），版面
       完全沒有依訂購方式篩選 */
    .sale_register_rightbox table tbody tr:first-child:not(#table_no_section):not(#pickup_time_section):not(#delivery_address_section):not(.contact_fields_row):not(#legacy_order_type_radio_row),
    .sale_register_rightbox table tbody tr:not(#table_no_section):not(#pickup_time_section):not(#delivery_address_section):not(.contact_fields_row):not(#legacy_order_type_radio_row) {
        display: table-row !important;
    }
    #item {
    /*    width: 100%;*/
        margin-bottom: 5px;
      }

      .list-inline li {
        padding: 0;
      }
      .list-inline li,
      .list-inline li a {
        width: 100%;
      }
      #mode {
        clear: left;
        height: 30px;
        margin: 6px 0 8px;
        padding: 5px;
        width: 100%;
      }
      .new_item_btn {
        width: 43%;
      }
      #common_or a.btn {
        width: 90%;
      }
      #tier_id {
        float: left;
        height: 30px;
        margin: 1px 0 0 1px;
        padding: 5px;
        width: 100%;
        clear: both;
      }

    .category_container {
        width: 100% !important;
      }
      .category_list {
        width: 100%;
        float: left;
      }
      #user-nav {
        margin-top: 0px;
      }

    .category_item {
      display: flex;
      align-items: flex-end;
      justify-content: space-around;
      cursor: pointer;
      background-color: #fff;
      height: 150px;  /* 原来是 210px */
      margin-bottom: 0;
      margin-right:0;
      border-radius: 5px;
      border:1px solid #d5d5d5;
      font-weight:600;
      font-size: 15px;  
    }
    .category_item.change {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      /*background-color: #B7B2B2;*/
      background-color: #fff;
      /*display: inline-block;*/
      height: 50px;
      margin-bottom: 0;
      margin-right:0;
      /*text-align: center;*/
      border-radius: 5px;
      border:1px solid #d5d5d5;

      font-weight:600;
      font-size: 15px;  
      padding:5px;

    }
    .category_item.category {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    /*  background-color: #F4F6F6;*/
      background-color: #fff;
    /*  display: inline-block;*/
      height: 80px;
      margin-bottom: 0;
      margin-right:0;
      text-align: center;
      border-radius: 5px;
      border:1px solid #d5d5d5;
      font-size: 20px;
      font-weight:600;
      padding:5px;
    }

    .labels.category {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    /*  background-color: #fff;*/
      height: 50px;
      margin-bottom: 0;
      margin-right:0;
      text-align: center;
      border-radius: 5px;
      border:1px solid #d5d5d5;
      font-weight:600;
      font-size: 15px; 
      /*padding:上 右 下 左;　padding:上下 左右;　padding:上 左右 下;　padding:四個邊同樣値;*/
      padding:5px;
    }

    #back_to_categories.small {
      cursor: pointer;
      /*background-color: #B7B2B2;*/
    	background-color: #fff;
      display: inline-block;
      height: 100px;
      margin-bottom: 0;
      margin-right:0;
      text-align: center;
      border-radius: 5px;
      border:1px solid #d5d5d5;
      font-weight:600;
      font-size: 15px;  
      padding:5px;
    }

    #back_to_categories {
      cursor: pointer;
      background-color: #fff;
      display: inline-block;
      height: 150px;  /* 原来是 210px */
      margin-bottom: 0;
      margin-right:0;
      text-align: center;
      border-radius: 5px;
      border:1px solid #d5d5d5;
      font-weight:600;
      font-size: 25px;  
      padding:5px;
    }
    
    td[width="120%"] {
            max-width: 250px !important;
            gap: 4px !important;
        }

        td[width="120%"] > span:first-child {
            font-size: 13px;
            margin-right: 4px;
        }

        td[width="120%"] input[type="radio"] + span {
            margin-right: 6px !important;
            font-size: 12px;
        }

        td#table_no_section {
            max-width: 150px !important;
        }

        td#table_no_section > div > span:first-child {
            font-size: 12px;
        }

        select[name="table_no"],
        select#table_no {
            font-size: 12px !important;
            min-width: 75px !important;
            max-width: 90px !important;
        }

        input[name="contact_person"] {
            max-width: 140px;
            font-size: 12px !important;
        }

        /* 20260813：使用者反映外帶/外送的「小姐/先生/其他」字太小，這裡跟 767px
           那個區塊一起放大，不要被這條(480px以下適用、原本比767px那條更小)蓋回去 */
        input[type="radio"][id^="gender_"] + span {
            margin-right: 10px !important;
            font-size: 17px !important;
        }

        input[name="cellphone"],
        input#cellphone {
            height: 34px !important;
            font-size: 13px !important;
        }

        
}

/* ========== 平板橫向/小桌面響應式 (992px) ========== */
/* 原本分散在 2 個區塊，現已合併 */

@media (max-width: 992px) {

    .sale_register_rightbox {
        clear: both;
        position: relative;
        bottom: 20px;
        width: 100%;
        margin-top: 0;
    	top:20px;
      }

      .sale_register_leftbox .row{
    	margin:0;
    }

      #search-top {
        display: none;
      }

    #content {
      	border-bottom-left-radius: 0px;
    	  border-top-left-radius: 0px;
    	}

}


/* 1600px-1919px 中間尺寸優化 */
@media (min-width: 1600px) and (max-width: 1919px) {
    .category_item.item {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    .category_item.item.item_parent_class {
        min-height: 240px !important;
        justify-content: space-between !important;
    }
    
    .prod_image {
        height: 170px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    
    .prod_image img {
        max-height: 100% !important;
        width: auto !important;
        object-fit: cover !important;
    }
}
#register thead th {
  font-size: 1.4rem;
}

/* 標籤分類篩選：不是選中類別的商品要藏起來。因為 .item_parent_class（有圖片的商品卡）
   下面用 display:block !important，jQuery 的 .hide()/.toggle() 只會下 inline
   display:none（沒有 !important），會被蓋掉沒作用，所以另外用一個帶 !important
   的 class 來蓋，並且用 #labels_item_selection > 提高一點優先權確保一定贏 */
#labels_item_selection > .category_item.item.menu-filtered-hidden {
  display: none !important;
}

/* ========== 商品卡片重新設計：圖片鋪滿卡片 + 底部漸層資訊條（取代白色描邊文字）========== */
.category_item.item.item_parent_class {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #fff !important;
}
.category_item.item.item_parent_class .prod_image {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.category_item.item.item_parent_class .prod_image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
  margin: 0 !important;
}
.category_item.item.item_parent_class .prod_image.small {
  display: none !important;
}
.item-info-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  padding: 18px 8px 6px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.item-name {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.item-price {
  color: #ffd54f !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (min-width: 481px) {
  .item-name, .item-price {
    font-size: 15px !important;
  }
}

/* 20260913加：「商品價格」開關關掉時，商品格(無照片)只剩商品名稱這一行
   文字(register_initial.php不再產生.item-price/第二個.item-text，見
   showItemPrice)，讓名稱在格子裡垂直置中，比照Loyverse沒有價格時的排版。
   .category_item在好幾個@media斷點各自宣告justify-content:space-around/
   align-items:flex-end(用來把名稱+價格底部並排)，這裡用.no-price class
   +!important統一蓋掉，不用逐一斷點修改。有照片的商品(.item_parent_class)
   不需要這條規則——.item-info-bar只剩.item-name時，flex:1 1 auto本來就會
   自動填滿寬度，維持左下角對齊，不用額外置中。 */
.category_item.item.no-price:not(.item_parent_class),
/* 20261012加：有顯示價格時，沒照片的商品格名稱+價格也一起垂直置中，
   跟價格關閉時一致(原本只有.no-price才置中，有價格會貼底部)。
   排除分類標題列、分類/折扣捷徑格，這些有自己的排版。 */
.category_item.item:not(.item_parent_class):not(.mix-category-header):not(.page-category-tile):not(.grid-placeholder-cell) {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
}
/* 20261012加：舊卡片用的.category_item:before撐高偽元素(約48px)在直排flex
   裡也算一個項目，把名稱+價格往下推、看起來不在正中間，沒照片的格子隱藏它。 */
.category_item.item:not(.item_parent_class):not(.mix-category-header):not(.page-category-tile):not(.grid-placeholder-cell)::before {
  display: none !important;
}

/* 20260913加：顧客手機點餐畫面——本來就沒有照片的商品(沒有
   .item_parent_class，見register_initial.php只有image_src非空才會加
   這個class)，不該套用跟「有照片商品」一樣高的大格子，不然沒圖只是
   留一大塊空白，比照Loyverse，沒照片的商品本來就該是精簡的小格，
   跟使用者手動關閉「顯示圖片」時套用的.category_item.change同一種
   高度，不用等使用者自己關掉顯示圖片才會變小格。這裡刻意寫成不受
   @media斷點限制的全域規則(比照上面.no-price規則)，因為
   .category_item{height:...}在base theme裡分散在好幾個@media區塊各自
   宣告一次(150px/100px/105px)，只在單一斷點覆蓋會在其他斷點漏掉。
   店員的固定方格排版(#wrapper[class*="itemgridcols-"]那組規則)靠更高
   優先度的ID選擇器蓋過這裡，不受影響，維持店員畫面所有格子統一大小
   (比照Loyverse實際收銀畫面)。 */
.category_item.item:not(.item_parent_class):not(.mix-category-header):not(.grid-placeholder-cell):not(.menu-filtered-hidden):not([style*="display: none"]) {
  height: 50px !important;
}

/* ========== 20260915加：顧客手機自助點餐——原本「大圖鋪滿卡片+底部
   漸層文字」(上面約3968-4034行)一次只看得到1~2個商品，使用者參考別家
   App改成2欄小卡片：小圖在上面(正常流排版，不是absolute疊在上面)、
   名稱+價格用一般文字排在下面。只在顧客端(#wrapper.customer-session，
   header.php依$is_guest_session加的class)生效，店員畫面(不管手機/
   桌機)完全不受影響，維持原本大圖卡片。只在<750px(側邊類別欄模式的
   手機/平板寬度)套用，>=750px已經是桌機版購物車常駐右側排版
   (.pos-desktop-order-row，店員專用，顧客端不會走到這個寬度分支)。
   ========== */
@media (max-width: 749px) {
  /* 20260915修：使用者反映右上角總是缺一塊——原本用flex-wrap+
     width:calc(50% - 5px)手算2欄寬度，實測第一排的兩張卡片剛好卡在
     「2張卡片寬度+gap」精確等於容器可用寬度的邊界上(116+10+116剛好
     =242，容器內容寬度也是242)，瀏覽器內部用還沒四捨五入的次像素
     (sub-pixel)精度計算，只要多零點幾px就會判定「這排放不下第2張」，
     整張被擠到下一排、右上角留空——用getBoundingClientRect()實測
     確認過，隱藏第1張卡片完全不影響第2張的位置，證明兩者根本沒有被
     瀏覽器排進同一排。改用display:grid+grid-template-columns:1fr 1fr
     取代flex+calc手算寬度，grid對等寬欄位的次像素分配比flex+calc穩定，
     不會有這種卡在邊界的問題(桌機版既有的auto-fill grid排版也是用
     這個技巧，見上面約5234/5410行)。 */
  #wrapper.customer-session #category_item_selection_wrapper.labels-side-layout #labels_item_selection {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
  }
  /* Bootstrap的.row class帶::before/::after清浮動偽元素，display:grid
     模式下會被當成真正的grid項目搶走格子(見上面約4245-4250行同樣問題
     的說明)，這裡一併蓋掉。 */
  #wrapper.customer-session #category_item_selection_wrapper.labels-side-layout #labels_item_selection::before,
  #wrapper.customer-session #category_item_selection_wrapper.labels-side-layout #labels_item_selection::after {
    content: none !important;
    display: none !important;
  }
  #wrapper.customer-session #category_item_selection_wrapper.labels-side-layout #labels_item_selection > .category_item.item {
    width: auto !important;
  }
  #wrapper.customer-session #category_item_selection_wrapper.labels-side-layout #labels_item_selection > .category_item.item.mix-category-header {
    width: 100% !important;
    grid-column: 1 / -1 !important;
  }
  /* 20260915修：使用者反映點類別按鈕之後幾乎商品都還在，篩選完全沒作用
     ——根因是這條display:flex !important的選擇器(#wrapper.customer-session
     +3個class=1個ID+4個class)特異度比原本負責隱藏的
     #labels_item_selection > .category_item.item.menu-filtered-hidden
     (1個ID+3個class)還高，被篩選掉、應該display:none的商品(只要剛好
     有照片，同時帶.item_parent_class)被這裡的display:flex蓋回來，重新
     顯示。這裡補一個:not(.menu-filtered-hidden)排除，被篩選隱藏的商品
     不套用這條規則，維持display:none生效。 */
  #wrapper.customer-session .category_item.item.item_parent_class:not(.menu-filtered-hidden) {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }
  #wrapper.customer-session .category_item.item.item_parent_class .prod_image {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
  #wrapper.customer-session .category_item.item.item_parent_class .prod_image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  #wrapper.customer-session .item-info-bar {
    position: static !important;
    background: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    /* 20260917加：使用者反映商品名稱/價格整塊偏右邊——根因是這裡沒有
       設寬度，外層卡片(.category_item)有一條沒被蓋掉的舊規則
       align-items:flex-end(給原本大圖疊字卡片用的，見上面約968行)，
       這個文字區塊當flex-direction:column卡片的cross-axis(水平方向)
       子項目，沒有自己的width時就會被那條align-items:flex-end縮到
       文字本身寬度、貼齊卡片右邊，不是文字置中/靠右對齊的問題，是整個
       容器本身被推到右邊。補align-self:stretch蓋掉繼承的flex-end，
       讓文字區塊真的撐滿卡片寬度，裡面的文字才會從卡片左邊開始排。 */
    align-self: stretch !important;
    gap: 2px !important;
    padding: 6px 8px 8px !important;
    pointer-events: auto !important;
  }
  #wrapper.customer-session .item-name {
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    width: 100%;
  }
  #wrapper.customer-session .item-price {
    color: var(--brand-1) !important;
    font-size: 13px !important;
  }
  /* 沒照片的商品：原本是.category_item.item:not(.item_parent_class)固定
     height:50px的橫條(見上面約4061行)，2欄小卡片模式下沿用同樣的精簡
     橫條高度就好，不用比照有照片商品做成正方形卡片——沒圖硬撐成正方形
     反而會留一大塊空白，跟上面4049行那次20260913加的邏輯是同一個
     道理，寬度已經由上面的grid-template-columns:1fr 1fr統一決定，
     這裡不用再手動設width。 */
  #wrapper.customer-session .category_item.item:not(.item_parent_class) {
    width: auto !important;
  }
}

/* ========== 分類標示統一：跟「回上層」同一組紫色家族，4 種商品陳列方式共用（實際顏色由下面 .cat-color-N 決定，才能輪替） ========== */
.category_item.category,
.labels.category,
.category_item.item.mix-category-header {
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(var(--brand-2-hover-rgb),0.35) !important;
}
/* 按下去變成同色系的淡色（用主題自己的 --panel-light），不是只調亮一點點，
   這樣才看得出「有按/沒按」的差異，同時還是同一個色系家族
   20260809改：.selected 是標籤分類模式下「目前篩選中的類別」，跟 :hover 共用
   同一套淡色樣式，不用按著滑鼠也看得出目前選到哪一個 */
.category_item.category:hover,
.labels.category:hover,
.labels.category.selected,
.category_item.item.mix-category-header:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(var(--brand-2-hover-rgb),0.45) !important;
  background: var(--brand-light) !important;
  color: var(--brand-2) !important;
}
.category_item.category p,
.category_item.category span,
.labels.category b,
.labels.category span,
.category_item.item.mix-category-header span {
  color: #fff !important;
  text-shadow: none !important;
  background: none !important;
}
.category_item.category:hover p,
.category_item.category:hover span,
.labels.category:hover b,
.labels.category:hover span,
.labels.category.selected b,
.labels.category.selected span,
.category_item.item.mix-category-header:hover span {
  color: var(--brand-2) !important;
}
/* 數量徽章原本是白色半透明疊在深色底上，按下去底色變淡了，白色徽章會看不清楚，改用深色疊 */
.labels.category:hover span,
.labels.category.selected span {
  background: rgba(var(--brand-2-hover-rgb),0.18) !important;
}

/* 20260809改：單頁分類商品是一長條列表，類別標題原本跟商品卡一樣大小，混在
   商品格子裡不夠顯眼。改成貫穿整排的橫幅色帶，配色系仍然用 cat-color-N 輪替，
   跟前後類別、跟一般商品（白底卡片）一眼就能分開。
   顯示圖片時商品卡比較大，橫幅也跟著大一點；「顯示圖片」關閉、商品變純文字
   縮小後（套用 .change class），橫幅也跟著縮小，尺寸才跟純文字商品卡一致 */
.category_item.item.mix-category-header {
  position: relative !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  height: 80px !important;
  min-height: 80px !important;
  margin: 20px 0 12px 0 !important;
  border-radius: 12px !important;
}
.category_item.item.mix-category-header.change {
  height: 48px !important;
  min-height: 48px !important;
  margin: 12px 0 8px 0 !important;
}
/* 舊主題有一條 #category_item_selection_wrapper .category_item{min-height:80px !important}
   在 ≥1024px 用 ID 選擇器搶走 min-height，這裡要用同樣掛 ID 的選擇器才蓋得過去 */
#category_item_selection_wrapper .category_item.item.mix-category-header.change,
#category_item_selection .category_item.item.mix-category-header.change {
  min-height: 48px !important;
}
.mix-category-header-inner {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* 20260923改：使用者反映類別名稱跟數量分別貼在這一列的最左/最右兩端，
     隔太遠不容易一眼看出這個數量是在講哪個類別——改成靠左靠攏，數量緊
     接在名稱後面。 */
  justify-content: flex-start;
  gap: 12px;
  padding: 0 22px;
}
.mix-category-header.change .mix-category-header-inner {
  padding: 0 16px;
  gap: 8px;
}
.mix-category-header-inner span:first-child {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.25 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mix-category-header.change .mix-category-header-inner span:first-child {
  font-size: 15px !important;
}
.mix-category-header-inner span:last-child {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: rgba(255,255,255,0.25) !important;
  padding: 3px 14px !important;
  border-radius: 20px !important;
  flex-shrink: 0;
}
.mix-category-header.change .mix-category-header-inner span:last-child {
  font-size: 12px !important;
  padding: 2px 10px !important;
}

/* ========== 20260917加：「頁面」裡的分類捷徑格(比照Loyverse，格子裡
   放的是分類本身，不是分類底下商品展開排進格子)，點下去鑽入顯示該
   分類商品，外觀跟後台格狀編輯畫面pages/view.php的.category-cell一致
   (資料夾圖示+分類名稱、深灰藍底色)，讓人一眼看出這不是商品、是可以
   點進去的捷徑。 ========== */
.category_item.item.page-category-tile {
  background: #5a6b7a !important;
  color: #fff !important;
  align-items: center;
  justify-content: center;
}
.page-category-tile-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.page-category-tile-inner .fa-folder {
  font-size: 28px;
}
.page-category-tile-name {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 0 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 20260923加：「頁面」裡的折扣格——外觀比照上面分類捷徑格(同一個
   .page-category-tile-inner排版骨架)，只是換一個顏色(金棕色，跟後台
   pages/view.php的.discount-cell同一個顏色)+標籤圖示，一眼就能跟分類
   捷徑格(深灰藍/資料夾圖示)分開，點下去是套用折扣，不是鑽入分類。 */
.category_item.item.page-discount-tile {
  background: #8a6d3b !important;
}
.page-discount-tile-inner .fa-tag {
  font-size: 28px;
}
.page-discount-tile-value {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.85;
}
/* 20260923加：加價格(服務費等)用橘色+加號圖示，跟折扣格分開 */
.category_item.item.page-discount-tile.page-surcharge-tile {
  background: #d35400 !important;
}
.page-discount-tile-inner .fa-plus-circle {
  font-size: 28px;
}
/* 分類捷徑格鑽入某分類後顯示的麵包屑(見register_initial.php的
   showPageDrillBreadcrumb())，平常用Bootstrap的.hidden class(!important)
   蓋掉這裡的display:flex。 */
#page_drill_breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 15px;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}
#page_drill_breadcrumb a {
  color: #333;
  text-decoration: none;
}
#page_drill_breadcrumb_page_name:hover {
  text-decoration: underline;
}
.page-drill-breadcrumb-sep {
  color: #999;
}
#page_drill_breadcrumb_category_name {
  font-weight: 600;
}

/* ========== 分類按鈕輪替配色（同一紫色家族，避免整片同色太單調）========== */
/* 用兩個 class 疊起來的選擇器，優先度才贏得過 .labels.category / .category_item.category 這些舊規則 */
/* 類別快速跳轉按鈕改用跟商品格完全一樣的 col-xs-6 網格（不再自己寫死寬度，讓 bootstrap 各斷點自動跟商品格同步），margin 歸零改用 bootstrap 原生 padding 對齊 */
.labels.category {
  margin: 0 !important;
  padding: 8px 15px !important;
  box-sizing: border-box !important;
}
/* 20260829加：使用者反映類別按鈕明顯太高，要求跟購物車表頭差不多高
   (實測約39px)——上面調過.labels.category的height，但這裡是flex子
   項目，瀏覽器的flex「自動最小高度」是看內容(文字+padding)自動算，
   會蓋掉比它小的height，單純改height沒有用，要連這裡的padding也一起
   縮小、min-height也要蓋掉，height/min-height才會真的生效。 */
.labels.category {
  padding: 4px 15px !important;
  min-height: 0 !important;
  height: 40px !important;
}

.category.cat-color-0, .mix-category-header.cat-color-0 { background: linear-gradient(135deg, var(--cat-0-1) 0%, var(--cat-0-2) 100%) !important; }
.category.cat-color-1, .mix-category-header.cat-color-1 { background: linear-gradient(135deg, var(--cat-1-1) 0%, var(--cat-1-2) 100%) !important; }
.category.cat-color-2, .mix-category-header.cat-color-2 { background: linear-gradient(135deg, var(--cat-2-1) 0%, var(--cat-2-2) 100%) !important; }
.category.cat-color-3, .mix-category-header.cat-color-3 { background: linear-gradient(135deg, var(--cat-3-1) 0%, var(--cat-3-2) 100%) !important; }
.category.cat-color-4, .mix-category-header.cat-color-4 { background: linear-gradient(135deg, var(--cat-4-1) 0%, var(--cat-4-2) 100%) !important; }
/* 20260825加：「所有商品」用固定的中性深灰漸層，不用cat-color-0~4那組隨分類
   數量輪替的顏色（它不是真的分類，顏色不該跟著分類數量變動）。這裡沒漏連結到
   任何cat-color-N，是之前新增「所有商品」時漏掉配色，造成白底白字看不到文字。 */
.category.cat-color-all, .mix-category-header.cat-color-all { background: linear-gradient(135deg, #757575 0%, #424242 100%) !important; }

/* ========== Header 浮動小工具：手機版靠右上角，桌機/平板要讓開 #user-nav
   20260809改：原本 position:absolute 會跟著頁面捲走，改成 fixed 跟 #header 一樣固定在畫面上。
   顯示圖片/首頁圖案/顏色/排版 4 顆按鈕平排放不下，改成只留一個「個人偏好」總開關按鈕，
   按下展開 #header_settings_panel 收合面板，裡面才是原本那幾顆按鈕（改直排） ========== */
#header-utils {
  position: fixed;
  right: 20px;
  top: 0; /* 20261007改：容器跟 #header 同高50px並垂直置中，不再靠固定top推算
             (平板上容器被撐成44px高，按鈕會偏下) */
  height: 50px;
  align-items: center;
  z-index: 21;
  display: flex;
  gap: 6px;
}
@media (min-width: 768px) {
  #header-utils {
    right: 340px;
  }
}
/* 平板寬度(768~1199px)：右側 #user-nav(歡迎+時鐘+值班中+登出)本身就佔滿，
   「我的喜好」固定靠右340px會壓到歡迎訊息，這個寬度隱藏歡迎文字(只留人像圖示)讓位 */
@media (min-width: 768px) and (max-width: 1199px) {
  #user-nav .login-text { display: none; }
  #header-utils { right: 360px; }
}
#header-utils .btn {
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  height: 34px;
  padding: 0 12px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  white-space: nowrap;
}
#header-utils .btn:hover {
  background: rgba(255,255,255,0.32) !important;
}
/* 20260809改：現在只剩「我的喜好」這一顆按鈕，放大一點、改用實色圓角+陰影，
   跟旁邊淡淡的半透明底色分開，在滿版色塊的 header 上更醒目、更好按
   （選擇器要比 #header-utils .btn 更高優先度才蓋得過去，所以多寫一次 #header-utils）
   純白底色太搶眼、跟整體不搭，改用購物車「選項」按鈕同一套淺色（--brand-light） */
#header-utils #header_settings_toggle {
  position: relative;
  background: var(--brand-light) !important;
  color: var(--brand-2) !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 20px !important;
  font-size: 15px !important;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important;
}
#header-utils #header_settings_toggle:hover {
  background: var(--brand-light) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.3) !important;
}
#header_settings_toggle i {
  font-size: 17px;
}

/* 新使用者第一次看到「我的喜好」：按鈕輕輕跳動+發光，右上角紅點閃爍，配一顆
   一次性提示泡泡（見下面 #header_settings_hint）。按過一次就不會再有這些效果 */
@keyframes header-settings-attention {
  0%, 100% { transform: translateY(0); box-shadow: 0 4px 10px rgba(0,0,0,0.25); }
  50% { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.35); }
}
#header-utils #header_settings_toggle.attention {
  animation: header-settings-attention 1.6s ease-in-out infinite;
}
#header_settings_badge {
  display: none;
  position: absolute;
  top: -3px;
  right: -3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #e53935;
  border: 2px solid #fff;
}
#header_settings_badge.show {
  display: block;
  animation: header-settings-badge-pulse 1.6s infinite;
}
@keyframes header-settings-badge-pulse {
  0% { box-shadow: 0 0 0 0 rgba(229,57,53,0.6); }
  70% { box-shadow: 0 0 0 7px rgba(229,57,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,57,53,0); }
}

/* 指向「我的喜好」的一次性提示泡泡 */
#header_settings_hint {
  display: none;
  position: fixed;
  z-index: 1061;
  background: #fff;
  color: #333;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.6;
  width: 190px;
  cursor: pointer;
}
#header_settings_hint.show {
  display: block;
  animation: header-settings-hint-fade 0.3s ease-out;
}
#header_settings_hint:after {
  content: '';
  position: absolute;
  top: -6px;
  right: 24px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
}
@keyframes header-settings-hint-fade {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
  #header-utils {
    right: 8px;
    gap: 4px;
  }
  #header-utils .btn {
    height: 30px;
    padding: 0 10px !important;
    font-size: 13px;
  }
  #header-utils #header_settings_toggle {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }
}

/* 「個人偏好」展開面板：顯示圖片/首頁圖案/顏色/排版直排放在裡面 */
#header_settings_panel {
  display: none;
  position: fixed;
  z-index: 1060;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  padding: 8px;
  width: 150px;
}
#header_settings_panel.open {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#header_settings_panel .btn {
  background: var(--panel-light, #f5f5f5) !important;
  color: var(--brand-2, #333) !important;
  border: none !important;
  border-radius: 8px !important;
  height: 36px;
  padding: 0 12px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}
#header_settings_panel .btn:hover {
  background: var(--brand-light, #eee) !important;
}
/* 顯示圖片/首頁圖案這種開關型的按鈕，加一個「開」「關」小徽章，不然看不出目前是哪個狀態 */
.pref-toggle-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 9px;
  border-radius: 10px;
  background: #9e9e9e;
  color: #fff;
  flex-shrink: 0;
}
.pref-toggle-badge.on {
  background: #43a047;
}
.pref-toggle-badge.off {
  background: #9e9e9e;
}

/* 顧客自己選顏色的色塊選單（只存 localStorage，跟後台的介面色系設定分開） */
#customer_theme_swatches {
  display: none;
  position: fixed;
  z-index: 1060;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  padding: 10px;
  gap: 8px;
  width: 156px;
}
#customer_theme_swatches.open {
  display: flex;
  flex-wrap: wrap;
}
.customer_theme_swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #ccc;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.customer_theme_swatch.active {
  box-shadow: 0 0 0 2px #333;
}

/* 20260912加：商品名稱/類別名稱字級，後台設定(config_basic.php「商品
   名稱字級」「類別名稱字級」)，各自獨立(使用者要求「分成2個選項」，
   不要綁在一起變大)——用em相對縮放，蓋掉各種陳列方式(側欄/上方標籤/
   手機版)各自不同的基準字級，不用個別兜出每種模式的絕對px值。
   normal不用寫規則(維持原本字級)，medium/large/xlarge三段放大。
   20260912改：使用者反映沒有商品圖片時價格會跟著名稱一起變大、有圖片
   時卻不會，原本誤判成bug改成價格都不放大——使用者澄清「想要變大，
   不是要小」，其實是希望兩種情況一致都放大，不是都不放大。改成
   .item-price(有圖片時的價格)也一起加進來，名稱+價格(不管有沒有圖片)
   都一起放大。 */
#wrapper.itemname-fontsize-medium .item-name,
#wrapper.itemname-fontsize-medium .item-price,
#wrapper.itemname-fontsize-medium .item-text {
  font-size: 1.1em !important;
}
#wrapper.itemname-fontsize-large .item-name,
#wrapper.itemname-fontsize-large .item-price,
#wrapper.itemname-fontsize-large .item-text {
  font-size: 1.2em !important;
}
#wrapper.itemname-fontsize-xlarge .item-name,
#wrapper.itemname-fontsize-xlarge .item-price,
#wrapper.itemname-fontsize-xlarge .item-text {
  font-size: 1.4em !important;
}
/* 20260912修：類別名稱字級一開始設定「特大」沒效果——.labels.category b
   另外有#category_item_selection_wrapper.labels-side-layout/.labels-top-layout
   底下更高特異度(2個ID+3個class，見下面約4645/5021/5091行附近)的字級
   規則，蓋掉了我原本只有1個ID+3個class的版本。這裡補上同樣帶2個ID的
   選擇器，確保特異度贏過去（原本較低特異度的版本留著當其他陳列方式
   的保底）。
   20260912加：使用者反映類別旁邊的數字(.labels.category span，項目
   數量小圓角徽章)也要跟著一起放大/縮小，不是只有類別名稱文字，補上
   span選擇器，跟b用同一套特異度處理方式。
   20260915改：原本用em相對縮放(1.1em/1.2em/1.4em)，發現.labels.category
   跟.labels.page兩者所在的DOM位置繼承到的父層字級不一樣(.labels.category
   實測繼承22px、.labels.page實測繼承14px)，同樣的em倍率算出來的實際px
   完全不同(24.2px vs 15.4px)，導致「頁面」分頁按鈕看起來比「類別」按鈕
   小一截。改用絕對px(直接對應.labels.category原本用em算出來的實際值，
   畫面不變)，不再依賴各自的父層繼承字級，兩邊才能真正對到同一個數字。 */
#wrapper.categoryname-fontsize-medium .labels.category b,
#wrapper.categoryname-fontsize-medium .labels.category span,
#wrapper.categoryname-fontsize-medium #category_item_selection_wrapper #category_item_selection .labels.category b,
#wrapper.categoryname-fontsize-medium #category_item_selection_wrapper #category_item_selection .labels.category span,
#wrapper.categoryname-fontsize-medium .labels.page b,
#wrapper.categoryname-fontsize-medium .labels.page span {
  font-size: 24.2px !important;
}
#wrapper.categoryname-fontsize-large .labels.category b,
#wrapper.categoryname-fontsize-large .labels.category span,
#wrapper.categoryname-fontsize-large #category_item_selection_wrapper #category_item_selection .labels.category b,
#wrapper.categoryname-fontsize-large #category_item_selection_wrapper #category_item_selection .labels.category span,
#wrapper.categoryname-fontsize-large .labels.page b,
#wrapper.categoryname-fontsize-large .labels.page span {
  font-size: 26.4px !important;
}
#wrapper.categoryname-fontsize-xlarge .labels.category b,
#wrapper.categoryname-fontsize-xlarge .labels.category span,
#wrapper.categoryname-fontsize-xlarge #category_item_selection_wrapper #category_item_selection .labels.category b,
#wrapper.categoryname-fontsize-xlarge #category_item_selection_wrapper #category_item_selection .labels.category span,
#wrapper.categoryname-fontsize-xlarge .labels.page b,
#wrapper.categoryname-fontsize-xlarge .labels.page span {
  font-size: 30.8px !important;
}
/* 20260915改：使用者反映「頁面1/類別/頁面」這幾顆分頁按鈕(.labels.page)
   的字級應該跟一般分類按鈕(.labels.category)一樣接「類別名稱字級」，
   不是「購物車字級」——這兩者概念上都是「切換陳列內容」的分頁按鈕，
   跟購物車裡的商品明細是不同東西，接同一個設定比較合理。上面這三段
   跟.labels.category共用同一組#wrapper.categoryname-fontsize-X縮放
   規則；下面把先前誤接的cartfontsize-X版本拿掉，改回只留購物車按鈕
   自己那份。 */

/* 20260913加：使用者要求右邊購物車(商品名稱/數量/小計/價格)也要有獨立
   的字級設定——跟商品名稱/類別名稱字級同一套做法(config_basic.php
   後台設定「購物車字級」，小/中/大/特大四段，em相對縮放)，範圍限定在
   #cart_items_panel(購物車清單表格)裡：td.text.text-success(商品名稱+
   選項摘要)、.input-item-quantity(數量)、.price_col(價格，含可編輯的
   input跟純文字兩種情況)、td.text.text-main(小計)。
   20260913加：使用者反映「清除全部資料」「儲存」「結帳」這3顆按鈕的字
   也要一起變大，補上#cart_menu a(清除全部資料)、
   #cart_checkout_toggle_buttons button(儲存/上一步/結帳)。
   20260915加又撤回：「頁面1/類別/頁面」這幾顆分頁按鈕(.labels.page)
   的字級一度接到這裡(跟購物車按鈕同一套cartfontsize-X)，使用者後來
   認為概念上應該跟一般分類按鈕(.labels.category)一樣接「類別名稱
   字級」才對，改接到categoryname-fontsize-X去了(見上面約4468行附近)，
   這裡拿掉重複的.labels.page規則。 */
#wrapper.cartfontsize-medium #cart_items_panel td.text.text-success,
#wrapper.cartfontsize-medium #cart_items_panel .input-item-quantity,
#wrapper.cartfontsize-medium #cart_items_panel .price_col,
#wrapper.cartfontsize-medium #cart_items_panel td.text.text-main,
#wrapper.cartfontsize-medium #cart_menu a,
#wrapper.cartfontsize-medium #cart_checkout_toggle_buttons button {
  font-size: 1.1em !important;
}
#wrapper.cartfontsize-large #cart_items_panel td.text.text-success,
#wrapper.cartfontsize-large #cart_items_panel .input-item-quantity,
#wrapper.cartfontsize-large #cart_items_panel .price_col,
#wrapper.cartfontsize-large #cart_items_panel td.text.text-main,
#wrapper.cartfontsize-large #cart_menu a,
#wrapper.cartfontsize-large #cart_checkout_toggle_buttons button {
  font-size: 1.2em !important;
}
#wrapper.cartfontsize-xlarge #cart_items_panel td.text.text-success,
#wrapper.cartfontsize-xlarge #cart_items_panel .input-item-quantity,
#wrapper.cartfontsize-xlarge #cart_items_panel .price_col,
#wrapper.cartfontsize-xlarge #cart_items_panel td.text.text-main,
#wrapper.cartfontsize-xlarge #cart_menu a,
#wrapper.cartfontsize-xlarge #cart_checkout_toggle_buttons button {
  font-size: 1.4em !important;
}

/* 20260913加：商品格欄數(config_basic.php「商品格欄數」，桌機/平板常駐
   購物車排版才會用到)——原本.labels-side-layout/.labels-top-layout兩種
   陳列方式的#labels_item_selection都是display:grid+
   grid-template-columns:repeat(auto-fill, minmax(130px,1fr))，欄數依
   螢幕實際寬度自動決定；這裡直接蓋掉grid-template-columns，改成固定
   欄數，商品超過一排自然往下長、捲動看得到，不做分頁(使用者確認不需要
   像Loyverse那樣真正分頁切換)。兩種陳列方式共用同一個#labels_item_selection
   id，一條選擇器就能同時蓋到，不用各寫一份。 */
/* 20260916四度修改：
   v1(1fr撐滿)→v2(寫死130px，跟頁面模式對起來，但欄數調小格子沒變大)
   →v3(改回1fr，格子跟著欄數變大，但後台/前台各自撐滿「自己容器」的
   寬度，算出來大小對不起來)→v4(改成三邊共用同一條寫死公式算出絕對
   px，大小保證一致)——結果使用者反映前台(有側欄+購物車面板夾住，
   可用寬度本來就比後台窄)被這個寫死公式的參考寬度(650px)拖累，
   比實際可用寬度該有的樣子更小、留了一大片沒用到的空間，「前台應該
   要盡量填滿可用空間」這個需求被犧牲掉了。
   v5(這次，最終版)：認清「後台/前台像素完全一致」跟「前台盡量撐滿
   可用空間」這兩個需求，只要後台/前台是兩個容器寬度本來就不同的
   頁面，就無法同時滿足——這裡優先滿足後者(前台體驗優先於後台編輯
   工具的像素對齊)，改回repeat(N,1fr)讓格子撐滿這裡實際可用的寬度，
   欄數變小格子還是會變大。後台編輯畫面(pages/view.php)也改回1fr撐滿
   它自己的可用寬度，不再嘗試跟這裡對到同一個px——兩邊大小這次不強求
   完全相等，各自撐滿自己的可用空間。 */
#wrapper.itemgridcols-2 #labels_item_selection {
  grid-template-columns: repeat(2, 1fr) !important;
}
#wrapper.itemgridcols-3 #labels_item_selection {
  grid-template-columns: repeat(3, 1fr) !important;
}
#wrapper.itemgridcols-4 #labels_item_selection {
  grid-template-columns: repeat(4, 1fr) !important;
}
#wrapper.itemgridcols-5 #labels_item_selection {
  grid-template-columns: repeat(5, 1fr) !important;
}
#wrapper.itemgridcols-6 #labels_item_selection {
  grid-template-columns: repeat(6, 1fr) !important;
}
#wrapper.itemgridcols-7 #labels_item_selection { grid-template-columns: repeat(7, 1fr) !important; }
#wrapper.itemgridcols-8 #labels_item_selection { grid-template-columns: repeat(8, 1fr) !important; }
#wrapper.itemgridcols-9 #labels_item_selection { grid-template-columns: repeat(9, 1fr) !important; }
#wrapper.itemgridcols-10 #labels_item_selection { grid-template-columns: repeat(10, 1fr) !important; }
/* 20260913改：商品格列數——原本用CSS Grid的grid-template-rows明確排出
   N排「最少高度170px」的軌道，結果商品不夠塞滿時，沒商品的軌道還是會
   整條保留170px空間，好幾條疊在一起變成一大塊集中的空白(使用者反映
   「列與列之間空白太多」)，列數設越大空白越誇張，甚至把下方「頁面」
   按鈕列擠到畫面外。改成參考Loyverse的實際做法——不夠的格子直接補
   看得到邊框的「空白格子」佔位（JS的updateGridPlaceholders()，見
   register_initial.php），格子本身就是正常的grid項目，跟真商品共用
   同一套間距(grid-gap)，不會另外多出一大塊沒有分隔的空白。這裡改成
   只保留：如果有空白格子，給它一個最小高度(跟真商品格子一致)+邊框，
   不需要再對#labels_item_selection本身動grid-template-rows。 */
.grid-placeholder-cell {
  /* 20260913改：min-height:170px拿掉——跟真商品格子一樣改用
     aspect-ratio:1/1決定高度(見下面#wrapper[class*="itemgridcols-"]
     那條規則)，min-height固定170px會在欄數多、格子變窄時破壞方形
     比例(寬度已經縮小但高度還卡在170px不會跟著變窄)。
     20260916加：「頁面」篩選模式(見register_initial.php的
     applyPageFilter())也會用這個class畫空白格子，但那裡的格狀容器
     是寫死130px欄寬，不是itemgridcols-X那組class，下面那條aspect-
     ratio規則沒有涵蓋到——這裡直接寫一條不分陳列模式都適用的
     aspect-ratio:1/1，兩邊(店員固定欄數/頁面篩選)共用同一顆空格子
     長相，不用各自重寫一份。 */
  aspect-ratio: 1 / 1;
  background: transparent !important;
  border: 2px dashed rgba(0,0,0,0.08) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  pointer-events: none;
}
/* 20260913修：使用者反映固定欄數後，格子寬度不一致(某一欄明顯比其他
   欄寬)——查出根因是CSS Grid的1fr欄位預設還是會尊重欄內容的
   min-content寬度(等同minmax(auto,1fr))，只要「同一欄」裡任何一列的
   商品名稱是一長串沒有空白可斷行的英文/泰文(例如"abcdefghijklmnopq"
   這種純字母組合，沒有CJK/空白可以自然斷行)，那一整欄就會被撐寬，
   其他欄則維持原本較窄的寬度，造成「寬度不一致」。沒圖片的商品名稱/
   價格文字(.item-text)本身沒有做任何寬度限制或斷行處理，是這次會撐寬
   的主因(有圖片的.item-name有white-space:nowrap+overflow:hidden，但
   本身在position:absolute的資訊條裡，不會撐寬格子)。改成grid項目統一
   加min-width:0(允許縮到比內容min-content還窄，1fr才能真正平分)，
   .item-text補上overflow-wrap讓極端長字串在真的擠不下時能被迫斷行，
   不會逼欄位變寬。 */
#wrapper[class*="itemgridcols-"] #labels_item_selection > .category_item.item {
  min-width: 0 !important;
}
#wrapper[class*="itemgridcols-"] #labels_item_selection .item-text {
  overflow-wrap: break-word;
  word-break: break-word;
}
/* 20260913加：使用者要求商品格子改成方形(比照Loyverse)——格子寬度已經
   由固定欄數的1fr決定，這裡讓高度=寬度即可，不用另外算像素。這條規則
   同時套用到空白佔位格子(.grid-placeholder-cell也有.category_item.item
   這個class)，兩者會用同一套邏輯自動變方形、對齊。
   20260913修：使用者反映格子變成方形後，欄與欄之間空隙變超大(格子
   本身縮成~100px正方形，但grid欄位軌道其實還是原本1fr算出來的~155px
   寬，格子只佔軌道一角、右邊留白)——查出根因是.labels-side-layout/
   .labels-top-layout模式各自都有一條「width:auto!important」規則
   (在.category_item_selection_wrapper底下，讓商品格「依內容決定寬度」
   而非撐滿欄位，這是這兩種陳列模式原本設計的行為)，這條規則的特異度
   剛好跟這裡打平、又寫在後面，會贏過我原本只寫aspect-ratio的規則——
   width還是auto，然後auto寬度+aspect-ratio的計算方式是先决定「高度」
   (auto寬度沒有依據，瀏覽器退而求其次用grid列自動算出的高度當基準)，
   再用比例反推寬度，等於本末倒置(使用者原話「應該是橫向的欄寬為主,
   去改縱向,而不是以縱向的高度為主」)。這裡用更高特異度的選擇器明確
   蓋掉那條width:auto，強制width:100%撐滿欄位軌道，寬度才是決定高度
   的依據，兩種陳列模式(側邊/上方標籤)都要蓋到。 */
/* 20260918改：加上:not(.change)——使用者反映店員登入手機版時，「我的
   喜好→顯示圖片」開關切到關閉(想看純清單、不要圖片)完全沒有效果，
   商品格還是維持巨大的正方形。根因：.change這個class本來是負責把
   商品格切換成緊湊清單列(見上面.category_item.change的height:50px)，
   但店員畫面(非guest session)一律會在#wrapper掛上itemgridcols-N這個
   class(header.php的$is_guest_session判斷)，這裡的aspect-ratio:1/1
   !important不管有沒有.change都會套用、而且比.change的height:50px
   優先權更高，導致「顯示圖片」開關在店員畫面上形同虛設(不分手機/
   桌機都一樣)。加:not(.change)後，開關切到「關」時這條方形規則直接
   不生效，讓.change的緊湊清單樣式可以正常接手。 */
#wrapper[class*="itemgridcols-"] #labels_item_selection > .category_item.item:not(.change) {
  aspect-ratio: 1 / 1 !important;
  /* 20260913加：theme原生的.category_item選擇器在好幾個斷點各自寫死了
     height(150px/100px/105px不等，找不到帶!important的來源，用JS掃
     matches()過整份stylesheet才抓到)，這些「明確設定的高度」會讓
     aspect-ratio失效(寬高都已經是definite值，比例不需要再介入)。這裡
     蓋掉height讓它變回auto，寬度(見下面width:100%)才會是唯一的依據，
     aspect-ratio才能真正從寬度反推出正確高度。 */
  height: auto !important;
}
#wrapper[class*="itemgridcols-"] #category_item_selection_wrapper.labels-side-layout #labels_item_selection > .category_item.item,
#wrapper[class*="itemgridcols-"] #category_item_selection_wrapper.labels-top-layout #labels_item_selection > .category_item.item {
  width: 100% !important;
}

/* 捲到下方才浮出的「回到頂部」按鈕 */
#gotop_float {
  background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(var(--brand-2-hover-rgb),0.45) !important;
}
#gotop_float:hover {
  background: linear-gradient(135deg, var(--brand-1-hover) 0%, var(--brand-2-hover) 100%) !important;
}
/* 「前往購物車」浮動按鈕：一開始商品列表要滑很遠才看得到購物車，這顆從頁面
   最上面就看得到（不像回到頂部/重新整理要捲過一個畫面高度才浮出來），有文字
   標籤才看得懂是做什麼用的，所以不是圓形 icon 按鈕 */
/* 20260813：inline left:20px 剛好疊在「標籤分類」左側類別欄（sticky，類別多時
   會延伸到接近整個畫面高度）正上方，底下的分類按鈕會被蓋住點不到，改成水平置中，
   不管側欄寬度是 92px 還是 1200px 以上斷點的 208px 都不會再疊到 */
#show_cart_1 {
  background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 24px !important;
  height: 46px;
  padding: 0 18px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(var(--brand-2-hover-rgb),0.45) !important;
  /* 20261004改：原本水平置中，會蓋住頁面最下方的真實按鈕(建立訂單/修改訂單等)，
     改貼左下角，右下角已有重新整理/回頂部兩顆，中間留空 */
  left: 12px !important;
  bottom: 12px !important;
}
#show_cart_1:hover {
  background: linear-gradient(135deg, var(--brand-1-hover) 0%, var(--brand-2-hover) 100%) !important;
}
/* 20260827改：斷點從1200px降到750px——原本1200px在真實平板上幾乎永遠
   碰不到(平板作業系統會用DPI換算CSS寬度，實體解析度再高也一樣，例如
   1920×1200實體/320dpi換算後只有960px)，導致店員用平板時不管螢幕多大
   都只會看到手機版排版，桌機版(購物車常駐右側)形同虛設。使用者確認實際
   會用到的裝置是8吋/10吋Android平板(1280×800)+iPad，橫向使用——8吋
   1280×800平板換算下來CSS寬度粗估落在750~850px左右(取決於機型回報的
   dpi)，10吋同解析度換算通常有1000px以上；iPad橫向不管哪個型號CSS寬度
   都在1024px以上。改成750px，涵蓋最小的8吋平板情況，一般手機(直向
   ~400px)不受影響，手機橫向少數情況可能也會觸發到桌機版排版，這個app
   是店員專用、裝置固定，這個代價可以接受。以下所有原本
   @media(min-width:1200px)的地方都跟著改成750px，維持一致。 */

/* 20260825加：#show_cart_1是手機模式用的浮動按鈕，依捲動位置換圖示/文字
   （商品→購物車→結帳），方便長頁面不用自己捲。桌機大螢幕已經有常駐購物車
   面板+切換按鈕，不需要這顆捲動輔助按鈕，使用者反映商品區下方看到重複的
   「結帳」按鈕，其實就是這顆。 */
@media (min-width: 750px) {
  #show_cart_1 {
    display: none !important;
  }
}
#refresh_cart_1 {
  background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(var(--brand-2-hover-rgb),0.45) !important;
}
#refresh_cart_1:hover {
  background: linear-gradient(135deg, var(--brand-1-hover) 0%, var(--brand-2-hover) 100%) !important;
}

/* 全站主要按鈕（.btn-primary，例如「重新整理」「清空購物車」「修改訂單預覽」跟購物車裡的捲動鍵）跟著色系走 */
#wrapper .btn-primary {
  background-color: var(--brand-2) !important;
  border-color: var(--brand-2) !important;
}
#wrapper .btn-primary:hover,
#wrapper .btn-primary:focus,
#wrapper .btn-primary:active,
#wrapper .btn-primary.active {
  background-color: var(--brand-1) !important;
  border-color: var(--brand-1) !important;
}

/* 購物車「選項」按鈕改用淺色，跟類別按下去選中的淺色（--brand-light）同一套，
   不要跟「重新整理」「清空購物車」那些深色的主要按鈕搶視覺重量 */
#wrapper [id^="item_modifiers_button_"] {
  background-color: var(--brand-light) !important;
  border-color: var(--brand-light) !important;
  color: var(--brand-2) !important;
}
#wrapper [id^="item_modifiers_button_"]:hover,
#wrapper [id^="item_modifiers_button_"]:focus,
#wrapper [id^="item_modifiers_button_"]:active {
  background-color: var(--brand-light) !important;
  border-color: var(--brand-light) !important;
  color: var(--brand-2) !important;
}

/* 20260829加：仿照Loyverse，點購物車列彈出詳情視窗(數量+/-、備註、刪除都
   在裡面)，列表上不再需要垃圾桶圖示——見register.php的cart_line_row點擊
   處理跟showCartLineModal()。這裡把整欄隱藏(不是只藏圖示，欄位本身的
   寬度也一起收掉，購物車才會變窄，商品區才能多分到一點空間)。
   注意：#register是table-layout:fixed，欄寬由thead第一列的th決定，
   只靠:has()改body的td寬度蓋不掉——所以用display:none整欄拿掉(th跟td
   都要同一個class)，thead的th寬度也已經在register.php改成0%，空出來
   的14%併入商品名稱欄。 */
.delete_col {
  display: none;
}
/* 20260829加：參考Loyverse購物車外觀，價格欄也不要了(店員要調價格改用
   點列的詳情彈窗)，跟.delete_col一樣整欄用display:none收掉，register.php
   裡thead的th寬度也已經改成0%、空出來的14%併入商品名稱欄(42%→56%)。 */
.price_col {
  display: none;
}
/* 20260829加：選項不再是列表上獨立一整列(藍色「選項」按鈕+勾選面板)，
   改成灰色小字放在商品名稱下面(跟Loyverse一樣，顏色/字級不同但還是在
   同一個商品項目的儲存格內)，勾選要改的話改成點整列彈出詳情視窗處理
   (見register.php的showCartLineModal())。 */
.cart-line-modifier-summary {
  color: #999;
  font-size: 12px;
  font-weight: normal;
  white-space: normal;
}
/* 數量文字前面補一個「x 」，看起來像「花椰菜 x 1」這種收據格式，不用改
   register.php裡讀寫這個數字的JS邏輯(.qty-tap的文字內容還是純數字)。 */
.qty-tap::before {
  content: "x ";
  color: #999;
  font-weight: normal;
}
/* 20260829加：購物車項目清單下面那行「總計」——參考Loyverse，畫一條線
   跟上面的商品列表分開，字放大、加粗。
   20260829改：原本是表格的<tfoot><tr><td colspan="4">...，手機寬度下
   實測(手機/production都重現)table-layout:fixed把金額那格的寬度算成
   接近0px，數字被擠到看不見——改成拿到表格外面的普通flex div(見
   register.php)，不再是table的一部分，徹底避開欄寬計算的問題。 */
.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: #fff;
  border-top: 2px solid #333;
  padding: 12px 8px;
  font-size: 16px;
  font-weight: 700;
}
/* 20260923加：「折扣」改成當作購物車清單裡的最後一列(見register.php)，
   不是另外插在小計/總計中間的摘要行(討論後改用這個做法，可以直接沿用
   既有商品列的垃圾桶刪除機制，不用另外做一套刪除折扣的UI)——淡淡的
   底色跟真正的商品列區分開，一眼看出這不是可以調整數量的商品。 */
.cart-discount-item-row {
  background-color: #fdf6ec !important;
  cursor: pointer;
}
.cart-discount-item-row td {
  font-style: italic;
}
.cart-discount-item-row .fa-tag {
  margin-right: 4px;
  color: #8a6d3b;
}
.cart_line_row:hover,
.cart_line_row:active {
  background-color: #f0f0f0 !important;
}

/* 購物車數量：欄位太窄放不下 +/- 按鈕，改成點數字才跳出來 */
/* 20260809改：.qty-tap 從 <input readonly> 改成 <span>（見 register.php），
   不再是表單欄位、不會被瀏覽器當文字輸入框處理。inline 元素預設不吃 width/padding，
   補上 display:inline-block 讓它維持原本像小方塊按鈕的外觀 */
/* 20260809改：手機上這個數量方塊太小很難點準，先改成填滿整格寬度，結果太寬
   看起來很怪；改成固定尺寸、比正方形略寬一點（52x44），置中在儲存格裡，
   觸控範圍還是比原本大很多，但外觀比較正常 */
.qty-tap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 44px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  background: #f5f5f5 !important;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
/* position:fixed 而不是 absolute：購物車外層 .table-responsive 手機寬度下有
   overflow-y:hidden，absolute 彈窗不管往哪邊彈都會被裁掉，fixed 直接跳出裁切範圍，
   實際座標由 JS 依 .qty-tap 位置計算後寫進 inline style */
.qty-stepper {
  display: none;
  position: fixed;
  transform: translateX(-50%);
  z-index: 1050;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 26px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  padding: 6px;
  gap: 10px;
  white-space: nowrap;
}
.qty-stepper.open {
  display: inline-flex;
  align-items: center;
}
.qty-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--brand-2);
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.qty-btn:active {
  background: var(--brand-1);
}

/* ========== 標籤分類模式：左側類別、右側商品左右並排（取代原本上下排列）
   只有 display_item_by_category = labels_categories 時，#category_item_selection_wrapper
   才會多一個 .labels-side-layout class（見 register_initial.php），不影響其他 3 種陳列方式。
   左側類別欄用 position:sticky，捲動看商品時類別欄留在畫面上，不會跟著捲走。
   body 的 overflow-y 需要在標籤分類模式下蓋掉才能讓 sticky 生效，這段用 JS
   處理（見 register_initial.php），不用 CSS。 ========== */
#category_item_selection_wrapper.labels-side-layout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
#category_item_selection_wrapper.labels-side-layout #category_item_selection {
  flex: 0 0 92px;
  width: 92px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: -webkit-sticky;
  position: sticky;
  top: 58px;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 !important;
  padding: 2px !important;
}
#category_item_selection_wrapper.labels-side-layout #category_item_selection > * {
  width: 100% !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 56px;
  padding: 6px 4px !important;
  flex-shrink: 0;
  box-sizing: border-box !important;
}
#category_item_selection_wrapper.labels-side-layout #category_item_selection .labels.category b {
  font-size: 13px !important;
  line-height: 1.2 !important;
}
#category_item_selection_wrapper.labels-side-layout #category_item_selection .labels.category span {
  font-size: 12px !important;
  padding: 2px 8px !important;
}
/* 20260915修：使用者反映手機版(顧客自助點餐，側邊類別欄模式)商品格
   被擠成一條70px窄縫、右邊一大片空白——根因是這次session為了修Chrome
   格子壓扁問題(見上面約4610行)，在#labels_item_selection外面多包了
   一層#labels_item_selection_scroll，但這條flex:1 1 0是設在
   #labels_item_selection本身，包了一層之後它不再是
   .labels-side-layout(display:flex)的直接子元素，flex屬性對它完全
   沒作用；真正的flex直接子元素#labels_item_selection_scroll反而完全
   沒有flex設定，退回預設flex-basis:auto，內容撐不開就整個縮到最小
   內容寬度。這裡把flex:1 1 0/min-width:0補到#labels_item_selection_scroll
   上（真正的直接子元素），#labels_item_selection本身留著display:flex
   繼續管它自己內部商品卡片怎麼排。 */
#category_item_selection_wrapper.labels-side-layout #labels_item_selection_scroll {
  flex: 1 1 0;
  min-width: 0;
}
#category_item_selection_wrapper.labels-side-layout #labels_item_selection {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin: 0 !important;
}
/* 手機：右邊商品一排一個 */
#category_item_selection_wrapper.labels-side-layout #labels_item_selection > .category_item.item {
  width: 100% !important;
}
/* 單頁分類的類別標題橫幅：不管哪個斷點、右邊商品排幾欄，標題列永遠獨占一整排
   （比上面商品排欄的規則多一個 class，優先度更高，各斷點都贏得過） */
#category_item_selection_wrapper.labels-side-layout #labels_item_selection > .category_item.item.mix-category-header {
  width: 100% !important;
  flex: 0 0 100% !important;
}
/* 平板（約手機直向以上）：右邊商品變兩排 */
@media (min-width: 600px) {
  #category_item_selection_wrapper.labels-side-layout #labels_item_selection > .category_item.item {
    width: 50% !important;
  }
}
/* iPad 橫向、小桌機：右邊商品三排 */
@media (min-width: 750px) {
  #category_item_selection_wrapper.labels-side-layout #labels_item_selection > .category_item.item {
    width: 33.3333% !important;
  }
}
/* ========== 20260825加(20260827改斷點1200px→750px，理由見上面)：
   桌機大螢幕/平板橫向（>=750px）整組改成類似Loyverse POS的排版：
   分類從左側欄改成上方下拉選單、商品照片放大、購物車常駐右側不用捲到下面——
   只在.labels-side-layout（標籤分類/標籤連續）模式套用，其他陳列方式不受影響。
   手機直向（<750px）完全維持原本左側欄的樣子，不動。 ========== */

/* 下拉選單觸發按鈕預設一律隱藏，只有>=750px+labels-side-layout模式才顯示
   （見下面的media block）——這顆button是純CSS/JS新增元素，沒有這條手機版
   會照瀏覽器預設div display:block顯示出來，蓋在商品區最上面 */
#category_dropdown_trigger {
  display: none;
}

/* 手機/平板一律隱藏，這組切換按鈕只有桌機大螢幕常駐購物車模式才需要——這條
   一定要寫在下面@media(min-width:750px)那條display:flex規則「前面」，兩條
   選擇器特異度相同，同優先度下寫在後面的才會贏，寫反了會導致桌機版也被這條
   蓋掉、按鈕永遠出不來（實際踩過這個bug）。 */
#cart_checkout_toggle_buttons {
  display: none;
}

/* 商品區跟購物車並排（見register_initial.php的wrapAll，把#sale-grid-big-wrapper
   跟#register_container包進這層），購物車用sticky貼在右側，捲動商品時不會捲走 */
@media (min-width: 750px) {
  .pos-desktop-order-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  .pos-desktop-order-row #sale-grid-big-wrapper {
    margin-bottom: 0; /* 20260926：拿掉底部15px空白，跟頁尾文字貼近 */
    flex: 1 1 auto;
    min-width: 0;
    /* 20260827修：原本是overflow:hidden，只是為了「按結帳時商品區往左
       收合滑走」蓋掉橫向溢出用的，結果這個overflow:hidden把自己變成
       position:sticky(橫向標籤陳列的類別列，見4886行附近)的捲動容器，
       導致類別列在完全沒捲動的情況下也被強制往下推了58px(剛好等於sticky
       的top:58px設定值)，變成商品區上方一段浪費掉的空白，跟購物車面板
       對不齊。改成不設overflow(維持預設visible)，收合動畫的視覺效果
       不要了，問題直接消除。這裡故意保持不設overflow——下面
       #category_item_selection_wrapper的position:sticky要靠這一層
       維持visible，才能沿用跟#register_container(右邊購物車)同一個
       頁面級捲動context，不要在這裡重新踩一次同樣的坑。 */
    transition: flex-grow 0.25s ease, opacity 0.2s ease;
  }
  /* 20260915加：使用者反映商品數量很多、超過一屏時，商品類別/頁面列
     (現在固定放在商品格下方)會被推出畫面看不到、按不到。
     20260915第一版：比照右邊購物車面板的position:sticky+flex-grow+
     商品格內部overflow-y:auto——結果在Safari整組失敗(sticky容器沒有
     正確把可用高度分配給flex:1的子項目，留下一大塊空白)。
     20260915第二版：改用position:sticky+bottom:0直接貼在分類/頁面列
     本身，放棄有界高度——結果使用者反映「捲動時分類/頁面列會暫時蓋住
     正在經過的商品」，這不是使用者要的效果，使用者要的是商品格「自己
     內部捲動、分類列固定不動」(比照購物車面板)，不是「整頁捲、分類列
     用sticky追在底部」。
     20260915第三版(這次採用)：前兩版都是讓瀏覽器自己用CSS
     (flex-grow或sticky)去計算捲動區域該有多高，結果Chrome/Safari
     算出來的結果不一致，這是问题根本。這次改成不靠CSS猜——直接用JS
     量出目前顯示的分類列或頁面列實際高度，算出商品格捲動區
     (#labels_item_selection_scroll)該留多高，寫成inline style的px值
     (見register_initial.php的updateProductGridScrollHeight())。這裡
     的CSS只需要:(1)wrapper維持position:sticky貼在畫面上方(比照購物車
     面板同一招，注意這裡不再需要flex/max-height，交給JS算好的高度
     決定)、(2)捲動區只需要overflow-y:auto(高度由JS決定，不是CSS)、
     (3)分類/頁面列本身完全不用特殊定位，維持在捲動區「下面」的正常
     文件流位置，因為捲動區已經被JS量好高度精準卡住，分類/頁面列自然
     會緊接在捲動區下緣、不會被商品格擠到看不見，也不會反過來蓋住
     商品格內容。 */
  .pos-desktop-order-row #category_item_selection_wrapper.labels-top-layout,
  .pos-desktop-order-row #category_item_selection_wrapper.labels-side-layout {
    position: -webkit-sticky;
    position: sticky;
    top: 58px;
  }
  .pos-desktop-order-row #category_item_selection_wrapper.labels-top-layout #labels_item_selection_scroll,
  .pos-desktop-order-row #category_item_selection_wrapper.labels-side-layout #labels_item_selection_scroll {
    overflow-y: auto;
  }
  /* 20260825加：參考Loyverse——按「結帳」把商品區整個向左收合隱藏，讓購物車
     跟結帳表單改成並排、共用整個空出來的寬度，不用再侷限在右邊360px的
     小面板裡切換。flex-grow配合overflow:hidden做出「收合消失」的滑動感，
     不是生硬的display:none瞬間消失。 */
  .pos-desktop-order-row.checkout-expanded #sale-grid-big-wrapper {
    flex: 0 1 0;
    opacity: 0;
    pointer-events: none;
  }
  /* 20260825修：max-height原本算成100vh-24，沒扣掉上面標題列實際佔用的高度
     (實測約60px)，導致面板底部(含購物車/結帳切換按鈕)超出瀏覽器可視範圍，
     一進頁面看不到，要捲整個頁面才看得到——使用者回報「一開始的位置太低了/
     需要上移,看不到」。top/max-height都改成扣掉標題列高度，多留一點餘裕
     (40px)避免不同商家logo圖高度不一造成一樣的問題。
     20260825再改：購物車/結帳切換按鈕原本用position:sticky貼底，但內容不夠
     長時sticky不會觸發、按鈕只是接在內容後面，不是真正貼在面板最下面——
     使用者反映「這2個鈕應該保持在下方」。改成flex直排：#register_container
     本身變成flex column，捲動內容(.cart_and_checkout_equal_height)佔滿剩餘
     空間自己捲動，按鈕列固定當「頁尾」子項目，不管內容多短都會貼在面板
     實際最下面。 */
  .pos-desktop-order-row #register_container {
    /* 20260829改：360px改300px——購物車改成點列表彈出詳情視窗之後，垃圾桶
       圖示欄位收掉了，不需要留這麼寬，縮小一點讓左邊商品區能多分到空間、
       多排一點商品。 */
    flex: 0 0 300px;
    width: 300px;
    position: -webkit-sticky;
    position: sticky;
    /* 20260829改：使用者反映購物車面板上緣應該跟左邊類別標籤上緣對齊——
       這裡原本是60px，左邊#category_item_selection_wrapper的sticky
       top是58px(見4624/5030行附近)，兩邊對不起來，統一改成58px。 */
    top: 58px;
    max-height: calc(100vh - 100px);
    /* 20260827加：左邊商品區(#sale-grid-big-wrapper)本來就有白底漸層+圓角
       的卡片外觀(見2715行附近)，購物車面板完全沒有對應的卡片樣式，購物車
       商品一少，右邊看起來就矮一截、跟左邊不對稱(使用者反映"框框比左邊
       商品區矮一截")。加上同樣的卡片外觀，並用min-height頂到跟max-height
       一樣高，讓面板固定撐滿可視區域——結帳按鈕(flex直排的最後一個子項目)
       還是會貼齊面板最下方，中間留白是正常的，做法跟Square/Loyverse這類
       POS常見的「收據卡片」一樣。 */
    min-height: calc(100vh - 100px);
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
    /* 20260827修：原本四邊都留12px，購物車表頭(紫底)上面因此多出一條
       跟頁面同色的白色留白，看起來像不明所以的空白條(使用者反映"購物車
       上面白色是什麼")。表頭本身滿版紫底已經有視覺邊界，不需要留到12px
       這麼多，但完全不留(0px)又會比左邊商品區(#sale-grid-big-wrapper，
       本身有padding:5px，見2715行附近)高5px，兩邊看起來沒對齊(使用者
       反映"右邊比左邊高一點點")。改成留5px，跟左邊一致。overflow:hidden
       讓表頭的直角被卡片的圓角裁掉，邊緣才乾淨。 */
    padding: 5px 12px 12px 12px;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: flex-basis 0.25s ease, width 0.25s ease;
  }
  /* 商品區收合時，購物車面板跟著長寬，填滿空出來的空間 */
  .pos-desktop-order-row.checkout-expanded #register_container {
    flex: 1 1 auto;
    width: auto;
  }
  /* 購物車表格跟結帳表單原本是Bootstrap的9欄/3欄左右並排，塞進360px的側欄
     太窄，改成上下堆疊、都佔滿寬度；flex:1加min-height:0讓這塊佔滿扣掉按鈕列
     後的剩餘空間，自己內部捲動(overflow-y:auto)，按鈕列不會被推出視窗外 */
  .pos-desktop-order-row #register_container .cart_and_checkout_equal_height {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* 20260829加：配合下面#cart_checkout_toggle_buttons改成絕對定位貼底，
       這裡預留出跟按鈕列同樣高的下方留白，捲動到底部時內容才不會被浮在
       上面的按鈕列蓋住。 */
    padding-bottom: 56px;
  }
  .pos-desktop-order-row #register_container .row.col-md-9,
  .pos-desktop-order-row #register_container .col-md-3.sale_register_rightbox {
    width: 100% !important;
    float: none !important;
  }
  /* 20260826加：正常(未展開)模式下，右邊單純顯示購物車清單就好——結帳
     表單(訂購方式/聯絡人/手機號碼/備註等)本來就要點「結帳」才會展開看到，
     商品還在累加階段不需要先看到這些欄位，只是佔畫面空間、跟購物車
     清單擠在一起。 */
  .pos-desktop-order-row:not(.checkout-expanded) #checkout_form_panel {
    display: none;
  }
  /* 20260825加：商品區收合後，購物車清單(左)跟結帳表單(右)改成並排，各自
     獨立捲動(align-items:stretch讓兩欄都撐滿同樣高度)，不再共用同一條捲動
     軸——這樣新增付款/改數量造成的購物車內容變動，不會牽動結帳表單那邊的
     捲動位置，兩邊互不影響。
     20260825改：兩欄改成1:1平分寬度(原本購物車固定360px、結帳表單吃剩下
     空間)——商品名稱可能很長，購物車欄位太窄會被截斷，使用者要求分隔線
     移到正中間。 */
  .pos-desktop-order-row.checkout-expanded #register_container .cart_and_checkout_equal_height {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    overflow: visible;
  }
  .pos-desktop-order-row.checkout-expanded #cart_items_panel {
    display: block !important;
    overflow-y: auto;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
  }
  .pos-desktop-order-row.checkout-expanded #checkout_form_panel {
    display: block !important;
    overflow-y: auto;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
  }
  /* 20260825加：購物車/結帳切換按鈕，見register.php的JS(toggleClass)。
     20260829改：原本當#register_container這個flex column的「頁尾」子
     項目(flex:0 0 auto)——理論上會貼在面板最下面，但使用者反映實際上
     會跟著購物車/結帳模式切換「跳動」(一般模式撐滿寬度、結帳模式縮小
     靠右對齊，兩種寬度切換時視覺上像是位置在移動)。改成絕對定位直接
     貼死在購物車面板右下角，不再是flex排版的一部分，不管哪個模式、
     內容多少都固定在同一個視覺位置，比照Loyverse那種按鈕永遠釘在
     面板底部的做法。
     20260909修：這條規則原本沒加.pos-desktop-order-row前綴，跟同一個
     @media區塊裡其他規則的寫法不一致——結果任何session(包含真正的顧客
     掃碼點餐、沒有套用桌機版面的guest)只要瀏覽器寬度到>=750px，這3顆
     店員專用的按鈕(儲存/未付訂單、上一步、結帳)一樣會冒出來，跟
     register_initial.php特地判斷$is_customer_session/staffLayoutPreview
     才決定要不要加.pos-desktop-order-row這層class的設計完全對不起來。
     使用者反映用平板/桌機瀏覽器開兩個不同租戶的點餐頁，一個有這3顆
     按鈕一個沒有，查出來其實不是租戶設定差異，是兩個分頁當下的視窗
     寬度剛好一個過750px一個沒過——但不管視窗多寬，沒套用桌機版面的
     session本來就不該看到這組按鈕，補上前綴才符合原本的設計意圖。 */
  .pos-desktop-order-row #cart_checkout_toggle_buttons {
    display: flex;
    gap: 8px;
    background: #fff;
    padding: 10px 0 0;
    border-top: 1px solid #eee;
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .pos-desktop-order-row #cart_checkout_toggle_buttons button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
  }
  /* 20261018加：跟App離線點餐畫面的按鈕配色一致——結帳綠、儲存/未付訂單橘、
     上一步灰、開錢箱維持品牌色。 */
  .pos-desktop-order-row #cart_checkout_toggle_buttons #btn_show_checkout_panel {
    background: #2e9e4f;
  }
  .pos-desktop-order-row #cart_checkout_toggle_buttons #btn_save_suspend {
    background: #e6821e;
  }
  .pos-desktop-order-row #cart_checkout_toggle_buttons #btn_show_cart_panel {
    background: #8a8f98;
  }
  /* 20260825加：三顆按鈕原本會一起顯示，但「上一步」在還沒按「結帳」的
     正常模式下按下去什麼都不會發生(本來就已經是購物車畫面)，「儲存」
     「結帳」在已經展開結帳模式時同理也是死按鈕——各自只在「按下去真的
     有作用」的那個模式才顯示，沒作用的直接不顯示，不留著讓人誤按。 */
  .pos-desktop-order-row:not(.checkout-expanded) #btn_show_cart_panel {
    display: none;
  }
  .pos-desktop-order-row.checkout-expanded #btn_save_suspend,
  .pos-desktop-order-row.checkout-expanded #btn_show_checkout_panel {
    display: none;
  }
  /* 20260825加：展開結帳模式下，這排按鈕只剩「上一步」一顆，使用者要求
     不要繼續撐滿整排寬度(那樣看起來像購物車清單那欄也有份)，改成縮小、
     靠右對齊，跟真正完成銷售的#finish_sale_button一樣待在右半部
     (#checkout_form_panel)下方。
     20260829改：按鈕列改成position:absolute貼死面板右下角(見上面
     #cart_checkout_toggle_buttons)之後，align-self對絕對定位元素沒有
     作用了，改成把left拿掉、只留right，讓它自然縮到內容寬度、貼右對齊。 */
  .pos-desktop-order-row.checkout-expanded #cart_checkout_toggle_buttons {
    left: auto;
    padding-top: 0;
    border-top: none;
  }
  .pos-desktop-order-row.checkout-expanded #cart_checkout_toggle_buttons button {
    flex: 0 0 auto;
    padding: 6px 18px;
    font-size: 13px;
  }
  /* 20260825加：真正完成銷售的按鈕(#finish_sale_button)原本在付款明細
     內文裡，展開結帳模式下購物車清單獨立捲動、結帳表單也獨立捲動變長
     之後，要往下捲很多才找得到。改成sticky貼在#checkout_form_panel這個
     捲動區塊自己的底部——只調整CSS定位，不搬動DOM/表單結構，存款驗證等
     既有邏輯完全不動，比較安全。白底是因為sticky的時候底下內容還會
     從旁邊透出來，要蓋住。 */
  .pos-desktop-order-row.checkout-expanded #finish_sale {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 8px 0;
    z-index: 2;
  }
  .pos-desktop-order-row.checkout-expanded #finish_sale_button {
    padding: 6px 18px !important;
    font-size: 13px !important;
    background: #2e9e4f !important;
    border-color: #2e9e4f !important;
    color: #fff !important;
  }
  /* 20260825加：「結帳」這條紫色分隔列是手機模式用的(標出結帳表單從哪裡開始，
     長頁面捲動時方便辨認)，桌機大螢幕已經有#cart_checkout_toggle_buttons的
     「結帳」按鈕可以切換，這條分隔列重複了，不需要，隱藏掉。
     20260909修：同上面#cart_checkout_toggle_buttons的說明，原本沒加
     .pos-desktop-order-row前綴——沒套用桌機版面的顧客session只要視窗
     寬度到>=750px，這條分隔列會被跟著隱藏掉，等於失去「結帳表單從這裡
     開始」的視覺提示，卻沒有拿到對應的桌機版結帳按鈕替代，體驗變差。 */
  .pos-desktop-order-row #checkout_section_divider {
    display: none !important;
  }
}

/* 商品格：grid auto-fill排版，螢幕越寬欄數越多（每格最小200px，比手機版寬一點，
   讓照片有空間放大），不是固定欄數後格子跟著變大 */
@media (min-width: 750px) {
  /* 20260827修：200px改成130px——這個模式左邊還多一條92px的類別側欄，
     扣掉右側購物車360px之後，商品區可用寬度比橫向標籤模式(top-layout)
     更窄，200px門檻在平板寬度(實測960px整體寬度)下只排得出2欄，改成
     跟top-layout模式一致的130px，才能排出接近的欄數。 */
  #category_item_selection_wrapper.labels-side-layout #labels_item_selection {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
  }
  #category_item_selection_wrapper.labels-side-layout #labels_item_selection > .category_item.item {
    width: auto !important;
  }
  #category_item_selection_wrapper.labels-side-layout #labels_item_selection > .category_item.item.mix-category-header {
    grid-column: 1 / -1 !important;
  }
  /* 20260825修：#labels_item_selection原本是Bootstrap的.row，靠::before/::after
     這對「content:' ';display:table」的clearfix偽元素清浮動——改成display:grid
     後，這對偽元素沒有display:none，會被當成grid的第一個子項目、佔掉第一格，
     把所有真正的商品都往後推一格，造成商品區第一格看起來空白。這裡蓋掉偽元素，
     grid模式不需要clearfix（float已經不用了）。 */
  #category_item_selection_wrapper.labels-side-layout #labels_item_selection::before,
  #category_item_selection_wrapper.labels-side-layout #labels_item_selection::after {
    content: none;
    display: none;
  }
  /* 商品照片放大：原本圖片是inline style width:95%，這裡用!important蓋過去，
     照片區域改用固定比例的正方形，看起來比較像Loyverse的大圖卡片 */
  #category_item_selection_wrapper.labels-side-layout #labels_item_selection .prod_image {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  #category_item_selection_wrapper.labels-side-layout #labels_item_selection .prod_image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  /* 20260825改：原本做成「下拉選單觸發按鈕」，但按鈕自己只有一點寬，跟它同一排
     右邊的空間沒東西可放，看起來像浪費一大塊（使用者反映「快炒右邊一整個區域
     空白」）。改成使用者建議的做法——類別直接橫向排一整排在最上面，永遠都看得到，
     不用點按鈕展開/收合，就不會有「按鈕旁邊空一塊」的問題。下拉選單/觸發按鈕
     整組不再使用（保留display:none，JS的開關邏輯留著但沒有視覺效果，不影響）。 */
  #category_item_selection_wrapper.labels-side-layout #category_dropdown_trigger {
    display: none !important;
  }
  /* 類別數多時橫向捲動，不換行（跟下面.labels-top-layout模式同一套技巧：
     flex-wrap:nowrap + overflow-x:auto），不會把版面越撐越高 */
  #category_item_selection_wrapper.labels-side-layout #category_item_selection {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-height: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    gap: 8px;
  }
  #category_item_selection_wrapper.labels-side-layout #category_item_selection > * {
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap;
  }
  /* 20260829加：標籤分類這裡的類別按鈕列已經改成橫向排一整排(見上面
     20260825改的說明)，跟橫向標籤模式(labels-top-layout)長得一樣，
     但當初只有橫向標籤那邊補了「跟購物車表頭一樣高」的修正(40px)，
     這裡沿用的還是原本側邊直式選單設計的min-height:56px，導致兩種
     排版方式的類別按鈕高度不一致。這裡套用跟橫向標籤模式同樣的高度。 */
  #category_item_selection_wrapper.labels-side-layout #category_item_selection > * {
    padding: 6px 18px !important;
    height: 40px !important;
    min-height: 0 !important;
  }
  #category_item_selection_wrapper.labels-side-layout #category_item_selection .labels.category b {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  #category_item_selection_wrapper.labels-side-layout #category_item_selection .labels.category span {
    font-size: 12px !important;
    padding: 2px 8px !important;
  }
  /* 20260825修：base規則(4446行附近)把.labels-side-layout設成display:flex是給
     「側欄+商品格左右並排」用的，現在側欄改成絕對定位的下拉選單、不再佔用flex
     排版位置，容器要蓋回display:block，觸發按鈕才會乖乖疊在商品格「上面」，
     不會被flex排版當成側欄的另一個候補、跟商品格擠成左右兩欄、按鈕那欄留一整條
     空白（原本的bug：類別下方有一大塊空白浪費空間）。 */
  #category_item_selection_wrapper.labels-side-layout {
    display: block;
    position: relative;
  }
}

/* ========== 橫向標籤模式：類別在上面橫向排列（可左右滑動），商品在下面
   只有 display_item_by_category = top_tabs_categories 時，#category_item_selection_wrapper
   才會多一個 .labels-top-layout class（見 register_initial.php），不影響其他陳列方式。
   跟標籤分類共用同一套資料載入 + 篩選邏輯（見 register_initial.php 的 applyMenuLayout），
   只是 CSS 排版不同：類別欄從左側直排側欄改成上方橫排標籤列，一樣 sticky 貼在最上面。
   商品欄不用另外設定欄數，直接用 register.php 商品卡片本來就有的 Bootstrap 欄位
   class（col-lg-2 col-md-4 col-sm-3 col-xs-6），沒有側欄搶寬度，原生就能正常排版
   20260809修：漏了蓋掉 #category_item_selection_wrapper 本身的 display:none（base
   規則預設整塊隱藏，.labels-side-layout 有蓋但這裡忘記蓋），導致整塊排版方式選了
   「橫向標籤」後畫面完全空白 ========== */
#category_item_selection_wrapper.labels-top-layout {
  display: block;
  /* 20260827修：外層wrapper繼承了基礎規則(1208行附近)的灰底#f5f7fa+
     padding:2px+圓角15px，但這個wrapper同時包住按鈕列「和」下面整個
     商品格子(#labels_item_selection)，不是只包按鈕列。按鈕列自己已經
     有白底+陰影(見下方#category_item_selection規則)，外層這層灰底只會
     從按鈕列跟商品格子的間隙、以及整個外框邊緣露出來，變成一整塊不需要
     的灰色區域包住所有東西。這裡蓋掉即可，不影響按鈕列自己的白底樣式。 */
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
#category_item_selection_wrapper.labels-top-layout #category_item_selection {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: -webkit-sticky;
  position: sticky;
  top: 58px;
  z-index: 5;
  gap: 8px;
  margin: 0 !important;
  padding: 8px 4px !important;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
#category_item_selection_wrapper.labels-top-layout #category_item_selection > * {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  white-space: nowrap;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
}
#category_item_selection_wrapper.labels-top-layout #category_item_selection .labels.category b {
  font-size: 14px !important;
  line-height: 1.2 !important;
}
#category_item_selection_wrapper.labels-top-layout #category_item_selection .labels.category span {
  font-size: 12px !important;
  padding: 2px 8px !important;
}
/* 20260829加：使用者反映類別按鈕明顯太高，要求跟購物車表頭差不多高
   (實測約39px)。上面這個區塊padding:10px 18px+height:auto!important，
   內容(icon/文字/數字徽章)撐出來的自動高度大約落在56px上下，單純
   調.labels.category的height蓋不掉——這裡是flex子項目，height:auto的
   flex項目「自動最小高度」是看內容大小，比height優先。要蓋過去，
   要用同樣的選擇器(相同優先度時，後面的規則贏)，且padding也要一起
   縮小，不然內容還是會把高度撐開。 */
#category_item_selection_wrapper.labels-top-layout #category_item_selection > * {
  padding: 6px 18px !important;
  height: 40px !important;
  min-height: 0 !important;
}
/* 20260827修：原本這裡完全沒設定欄數，靠register.php商品卡片自帶的
   Bootstrap欄位class（col-lg-2 col-md-4 col-sm-3 col-xs-6）——當初這樣
   寫是因為top-layout「沒有側欄搶寬度，原生就能正常排版」，但後來加了
   桌機版購物車常駐右側(.pos-desktop-order-row)之後，商品區的實際寬度
   會被右側360px的購物車面板吃掉一塊，Bootstrap的欄位class只看「整個
   瀏覽器寬度」決定欄數，不知道旁邊已經被購物車佔掉空間，導致平板這種
   中等寬度下常常只排得出2欄，比Loyverse同樣寬度能排的欄數少很多。
   改成跟側邊標籤模式(labels-side-layout)一樣的auto-fill網格，欄數直接
   依「商品區實際剩餘寬度」自動排滿，不受購物車佔用空間影響。 */
#category_item_selection_wrapper.labels-top-layout #labels_item_selection {
  margin-top: 10px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
/* 20260829修：使用者反映橫向標籤模式下，篩選後的商品第1格永遠空白——
   根本原因是 #labels_item_selection 本身有 bootstrap 的 .row class，
   .row::before/::after 是舊版浮動排版用的clearfix技巧(content:" ";
   display:table;)，這兩個偽元素在一般block排版下不會佔位置，但這裡改成
   display:grid後，偽元素會變成「真正的格線項目」搶走第1格(::before)
   跟最後1格(::after)，把真正的商品全部往後推一格，造成視覺上第1個
   商品消失、變成一格空白。這裡直接關掉這兩個偽元素，不需要clearfix
   （grid本身就不會有float跑版問題）。 */
#category_item_selection_wrapper.labels-top-layout #labels_item_selection::before,
#category_item_selection_wrapper.labels-top-layout #labels_item_selection::after {
  content: none !important;
  display: none !important;
}
#category_item_selection_wrapper.labels-top-layout #labels_item_selection > .category_item.item {
  width: auto !important;
}
#category_item_selection_wrapper.labels-top-layout #labels_item_selection > .category_item.item.mix-category-header {
  grid-column: 1 / -1;
}

/* 20260901加：「櫃台店員」排版預覽的類別列本來想做成貼在左下角、固定
   貼底的效果(sticky+overflow-y:auto+絕對定位這組技巧)，20260912/13
   反覆實測發現這組技巧在「高度遠大於寬度」的窄長版面、不同瀏覽器/
   裝置模擬環境下經常不穩定重現(同樣的尺寸，有時看得到類別列、有時
   完全看不到)，換過動態高度量測、ResizeObserver、position:fixed
   改版都沒有徹底解決，使用者最後決定「算了，分類固定放在商品區上方
   就好」——改成完全不做特殊定位，類別列維持在HTML原本的位置(商品格
   「上面」，DOM順序#category_item_selection本來就在#labels_item_selection
   前面)，跟著頁面內容一起捲動，簡單、每個瀏覽器都保證一致。這裡曾經
   有過的sticky+絕對定位規則(.staff-preview-bottom-layout)整組拿掉。 */

/* 20260901加：店員畫面購物車最上方常駐的「訂購方式」(+選內用才出現的
   「桌號」)下拉選單(取代原本結帳展開才看得到的橫向單選鈕，見register.php
   的#staff_order_type_top_row說明)，比照Loyverse的做法，一開始就看得到、
   不佔太多寬度。margin-bottom放在外層.staff_order_type_top_row(inline
   style裡已經是display:flex)而不是個別選單身上，兩個選單才會底部切齊。 */
#staff_order_type_top_row {
  margin: 0 0 10px 0;
}
#staff_order_type_top_select,
#staff_table_no_top_select {
  width: auto;
  min-width: 110px;
  display: inline-block;
}

/* 20260813：購物車(左)跟結帳(右)兩欄用 flex 讓底色/邊框等高，
   Bootstrap 的 col-md-* 本身不會自動等高，只由各自內容撐開。
   一定要包在跟 col-md-* 同樣的 min-width:992px 中，不然手機版（Bootstrap
   本來會讓 col-md-9/col-md-3 各自變成 100% 寬、自然上下堆疊）會被這個
   flex 逼成並排、擠成兩個很窄的欄位，版面全部跑掉。 */
@media (min-width: 992px) {
  .cart_and_checkout_equal_height {
    display: flex;
    align-items: stretch;
  }
  .cart_and_checkout_equal_height > .row.col-md-9,
  .cart_and_checkout_equal_height > .sale_register_rightbox {
    float: none;
  }
}
/* #checkout_section_divider 原本的 margin-top:22px 是設計給它上面還有「訂單編號
   查詢」那段內容時的間距，訂單編號搬走後它變成右邊欄第一個元素，這個上邊界要
   歸零，「結帳」紫色標題列才會跟左邊購物車表格的「小計」表頭切齊 */
.sale_register_rightbox #checkout_section_divider {
  margin-top: 0;
}

/* 20260820加：DataTables 的排序功能全站其實一直都能點、能動，但完全沒有
   視覺提示（沒箭頭、hover 也沒變成手指游標）——因為 assets_helper.php
   只載入了 js/jquery.dataTables-1.13.5.min.js，從來沒載入過 DataTables
   官方那份負責畫排序箭頭的CSS（css/資料夾裡根本沒有這個檔案），導致使用者
   看著「訂單查詢」表頭完全看不出來可以點來排序。這裡用文字符號(▲▼)補上
   排序箭頭，取代圖片素材，改深色主題也不用另外準備一份淺色版的箭頭圖。
   涵蓋全站所有DataTables表格，不只「訂單查詢」這一頁。 */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  cursor: pointer;
  position: relative;
  padding-right: 20px !important;
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
}
table.dataTable thead th.sorting::after {
  content: "\25B2\25BC";
  opacity: 0.4;
  letter-spacing: -2px;
}
table.dataTable thead th.sorting_asc::after {
  content: "\25B2";
  opacity: 1;
}
table.dataTable thead th.sorting_desc::after {
  content: "\25BC";
  opacity: 1;
}

/* 20260826加：「訂單」頁面(suspendeds/order_panel.php)改成Loyverse收據頁
   的結構——左邊概要清單/右邊完整預覽，左右各半(1:1，使用者20260826改)。
   窄螢幕(<992px，例如平板直式)沒有足夠空間並排，改回上下堆疊，清單在上、
   預覽在下，避免內容被擠壓到看不清楚。 */
.order-master-detail-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.order-master-list-col {
  flex: 1 1 0;
  min-width: 0;
}
.order-detail-col {
  flex: 1 1 0;
  min-width: 0;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 24px;
  position: sticky;
  top: 12px;
}
/* 20260826加：使用者參考Loyverse收據頁——右邊預覽的收據本身應該是浮在
   淺灰底色上的白色卡片、四周留邊界，不是貼滿整個右欄邊到邊。收據內容
   #one-page-receipt這個id是receipt_order_component_*共用元件既有的
   結構，這裡只加卡片視覺，不動裡面的排版邏輯。 */
.order-detail-col #one-page-receipt {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  padding: 20px 24px;
  max-width: 480px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  .order-master-detail-row {
    display: block;
  }
  .order-master-list-col,
  .order-detail-col {
    flex: none;
    width: 100%;
  }
  .order-detail-col {
    margin-top: 16px;
    position: static;
  }
}

/* 20260829加：使用者反映商品卡片(沒有照片、純文字那種)的商品名稱字太大——
   卡片高度先前已經減半，字級沒跟著縮小，長一點的名稱(例如「越南河粉-Bún
   Việt Nam」)會擠成2~3行、把卡片撐爆或蓋住金額。這個字放在.item-text這個
   class(register_initial.php用JS產生，商品名稱/金額都用同一個class)，
   全域custom.css裡原本沒有specific規則管到它，字級是從外層.category_item
   繼承下來的，這裡直接針對.item-text覆蓋成比較小的字級。 */
.category_item.item .item-text {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

/* 20260829加：使用者反映「黑糖鮮奶」(有照片的商品，用.item-name/.item-price
   這組class，跟上面沒照片的.item-text是不同class)沒有跟著變小——原本
   .item-name/.item-price已經有font-size:15px!important，但實測算出來的
   字級是18px，追了半天才發現是theme本身(unicorn.css，載入順序在custom.css
   之前)有一條選擇器優先度更高的規則贏過去了，同優先度時後載入的檔案才會贏、
   但比對方優先度更高就贏不了，跟載入順序無關。改成用更長(更高優先度)的
   選擇器直接蓋過去，不跟它比載入順序。 */
.category_item.item.item_parent_class .item-name,
.category_item.item.item_parent_class .item-price {
  font-size: 13px !important;
}

/* 20260913加：店員收銀畫面，分類選單一度從「商品區上方常駐分頁列」改成
   「頭部下拉選單」，比照Loyverse。20260915撤回：浮動面板會蓋住左邊
   商品畫面，改回商品格上方常駐顯示(#category_item_selection)，跟顧客
   端共用同一份陳列邏輯，不用再另外掛class/浮動面板處理，這裡整組
   規則拿掉。 */

/* 20260913加：「頁面」——店家自訂商品集合（比照Loyverse），位置在商品格
   (#labels_item_selection)下方，跟頭部類別下拉是互斥的兩個瀏覽模式。
   視覺沿用跟.labels.category同一套配色token(--cat-N-1/2)，但不共用
   .category這個class本身——避免不小心撞到.labels.category相關規則
   (尤其是各種陳列模式底下的position:sticky/絕對定位，那些只認
   #category_item_selection這個特定容器，不該套用到這裡)，改用獨立的
   .labels.page，樣式在這裡完整定義一份，橫向捲動的技巧沿用既有
   #category_item_selection_wrapper.labels-side-layout #category_item_selection
   那組「flex-wrap:nowrap + overflow-x:auto」做法。 */
#pages_item_selection_wrapper {
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid #e0e0e0;
}
#pages_item_selection {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
}
.labels.page {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 20260913改：使用者要求比照Loyverse，頁面/類別按鈕平均展開撐滿整條
     橫向區塊，不要照文字內容自己決定寬度、靠左堆在一起留一大塊空白。
     flex:1配合下面的min-width，頁面數量少時平均分掉整排寬度；如果哪天
     頁面變多到擠不下最小寬度，overflow-x:auto(見#pages_item_selection)
     還是會接手變成橫向捲動，不會硬擠到文字重疊。 */
  flex: 1 1 0;
  min-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff !important;
  border: none !important;
  /* 20260913改：使用者反映邊框太圓，改成跟購物車下方「儲存/結帳」按鈕
     一樣的6px(見.pos-desktop-order-row #cart_checkout_toggle_buttons
     button)，視覺風格一致。 */
  border-radius: 6px !important;
  padding: 8px 18px !important;
  height: 40px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.labels.page:hover {
  transform: translateY(-2px);
}
.labels.page b {
  font-size: 14px !important;
  font-weight: 700 !important;
}
.labels.page span {
  font-size: 12px !important;
  font-weight: 700 !important;
  background: rgba(255,255,255,0.25) !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
}
.labels.page.selected {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.15) inset;
}
.page.cat-color-0 { background: linear-gradient(135deg, var(--cat-0-1) 0%, var(--cat-0-2) 100%) !important; }
.page.cat-color-1 { background: linear-gradient(135deg, var(--cat-1-1) 0%, var(--cat-1-2) 100%) !important; }
.page.cat-color-2 { background: linear-gradient(135deg, var(--cat-2-1) 0%, var(--cat-2-2) 100%) !important; }
.page.cat-color-3 { background: linear-gradient(135deg, var(--cat-3-1) 0%, var(--cat-3-2) 100%) !important; }
.page.cat-color-4 { background: linear-gradient(135deg, var(--cat-4-1) 0%, var(--cat-4-2) 100%) !important; }
/* 20260913加：頁面列最右邊「切回類別」按鈕，用中性灰色跟真正的頁面
   按鈕(彩色)區分開來，比照「所有商品」假分類同一套灰色配色。 */
.page.cat-color-all { background: linear-gradient(135deg, #757575 0%, #424242 100%) !important; }

/* 20260915加：店員點商品加入購物車，目前是jQuery Form Plugin用
   ajaxSubmit({target:"#register_container"})整段.html()蓋掉重貼
   （見register_initial.php的submitAddItem()），使用者反映「螢幕會
   閃一下」——調查過改成JSON局部更新的做法，但register.php本身是
   近3000行、多處id重複(例如"register"這個id同時出現在好幾張不同的
   table上)的舊版結帳模板，牽涉購物車列表/付款方式/訂單類型/外送地址/
   小計總計等十幾種欄位，真的要做JSON diff等於要把整份模板的渲染邏輯
   在JS端重新實作一份，風險（尤其是收銀/金額相關欄位算錯）遠大於解決
   「閃一下」這個純視覺問題的效益。改成純CSS淡出/淡入。
   20260915改：使用者反映改完還是有閃爍感、看久會不舒服，追出兩個
   疊加的問題：(1)原本opacity只降到0.45，暗/亮兩端反差太大，等於是
   一次明顯的「暗-亮」脈衝，改成0.85，幅度小很多，肉眼感覺是「輕輕
   停頓」不是「閃一下」；(2)點商品當下，左邊商品區(#category_item_
   selection_wrapper)同時在用jquery.loadmask()蓋一層灰色遮罩(css/
   jquery.loadmask.css只有固定opacity:0.5，完全沒有transition，
   show/hide都是瞬間硬切)，而且原本「查有沒有選項」跟「真正加入購物車」
   兩次AJAX各自mask/unmask一次，等於同一次點擊裡遮罩瞬間蓋上-收起-
   再蓋上-再收起，這個瞬間硬切+重複兩次疊加，才是使用者感受到「螢幕
   閃」「眼睛不舒服」的主要來源，比購物車本身的swap更明顯（因為商品區
   面積大很多、遮罩沒有任何淡入淡出）。這次商品區也拿掉loadmask，改用
   跟購物車同一套.cart-updating輕微淡化(這個高頻互動不需要真的擋住
   點擊——會不會重複送出本來就是靠JS變數submitting/checkingItemModifiers
   擋，不是靠遮罩擋，拿掉遮罩不影響正確性)，兩塊一起淡化/淡入，視覺
   上感覺是整體「呼吸」一下，不是忽暗忽亮的閃爍。舊版loadmask()/mask()
   仍保留給結帳/掛單等低頻、真的需要「請稍候」文字提示的操作使用，
   不動它們。 */
#register_container,
#category_item_selection_wrapper {
  transition: opacity 0.15s ease;
}
#register_container.cart-updating,
#category_item_selection_wrapper.cart-updating {
  opacity: 0.85;
}

/* ========== 20260917加：「在POS上的代表」——比照Loyverse，商品沒有
   上傳圖片時可以改用「顏色+形狀」代表這件商品，不是固定的灰底文字。
   這裡統一定義4種形狀的clip-path，商品編輯頁的形狀選擇器
   (application/views/items/form.php)跟收銀畫面商品格的實際渲染
   (register_initial.php)共用同一組規則，只是套用的元素尺寸/情境不同，
   改形狀只要改這裡一個地方。 ========== */
.pos-shape-square { border-radius: 8px; }
.pos-shape-circle { border-radius: 50%; }
.pos-shape-octagon {
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  border-radius: 0;
}
.pos-shape-scalloped {
  clip-path: polygon(50.0% 0.0%, 60.9% 9.4%, 75.0% 6.7%, 79.7% 20.3%, 93.3% 25.0%, 90.6% 39.1%, 100.0% 50.0%, 90.6% 60.9%, 93.3% 75.0%, 79.7% 79.7%, 75.0% 93.3%, 60.9% 90.6%, 50.0% 100.0%, 39.1% 90.6%, 25.0% 93.3%, 20.3% 79.7%, 6.7% 75.0%, 9.4% 60.9%, 0.0% 50.0%, 9.4% 39.1%, 6.7% 25.0%, 20.3% 20.3%, 25.0% 6.7%, 39.1% 9.4%);
  border-radius: 0;
}
/* 20260917加：收銀畫面商品格用「顏色+形狀」代表時的容器——填滿整個
   商品格圖片區(跟.prod_image同樣的定位方式)，形狀clip-path套用在這個
   容器本身，裡面只放商品名稱文字(不需要圖示，形狀本身+顏色已經有
   足夠的視覺辨識度，比照Loyverse實際畫面沒有另外疊圖示)。 */
.pos-representation-tile {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10%;
  box-sizing: border-box;
}
/* 20260918加：使用者反映名稱整個消失、只剩價格——根因是
   -webkit-line-clamp依賴display:-webkit-box才生效，但.pos-
   representation-name原本直接是display:flex;flex-direction:column
   的.pos-representation-tile底下的flex item，CSS規範會把flex item
   的-webkit-box「blockify」成別的display值(實測變成flow-root)，
   line-clamp因此完全失效、元素高度垮成0px，看起來像名稱憑空消失。
   改成中間多包一層.pos-representation-inner(純block、不是flex
   item，讓.pos-representation-tile只需要置中「這一個」子元素)，
   name/price在這層裡面用一般文件流堆疊(不是flex排版)，-webkit-box
   就不會被blockify。 */
.pos-representation-tile .pos-representation-inner {
  width: 100%;
  text-align: center;
}
.pos-representation-tile .pos-representation-name {
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-word;
  margin-bottom: 4px;
}
/* 20260918加：使用者反映商品名稱重複顯示——根因是色塊本身已經畫了
   名稱，價格原本是另外疊一條.item-info-bar又畫了一次名稱造成的，
   修法見register_initial.php的說明。價格改成併進色塊裡面同一個區塊，
   樣式比名稱小一點、半透明白色做區隔。 */
.pos-representation-tile .pos-representation-price {
  display: block;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  font-size: 0.85em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* 20260921：顏色和形狀商品在小卡片(顧客手機2欄，色塊只有約46px高)上文字會超出色塊、
   被clip-path裁掉(上緣名稱被切)。改成文字大小跟著色塊尺寸縮放(container query)，
   名稱最多2行、行高收緊、左右留白加大避開星形邊緣，確保名稱+價格塞得進色塊並置中。 */
.pos-representation-tile { container-type: size; padding: 4% 14%; }
.pos-representation-tile .pos-representation-inner { line-height: 1.15; }
.pos-representation-tile .pos-representation-name {
  font-size: 12px;
  font-size: clamp(11px, 20cqh, 26px);
  -webkit-line-clamp: 2;
  margin-bottom: 2px;
}
.pos-representation-tile .pos-representation-price {
  font-size: 10px;
  font-size: clamp(10px, 16cqh, 22px);
}
/* 20260921：使用者要求文字換成深色並置中 */
.pos-representation-tile .pos-representation-name,
.pos-representation-tile .pos-representation-price {
  color: #1b1b1b;
  text-shadow: 0 1px 2px rgba(255,255,255,0.45);
  text-align: center;
}
.pos-representation-tile .pos-representation-inner { margin: auto; }

/* 20260921：顧客手機/店員手機模式下，沒有圖片的商品(名稱+價格)原本擠在卡片底部、字很小，
   改成置中(水平+垂直)、字放大，名稱在上價格在下。 */
#wrapper.customer-session #labels_item_selection > .category_item.item:not(.item_parent_class):not(.mix-category-header):not(.grid-placeholder-cell):not(.menu-filtered-hidden):not([style*="display: none"]),
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item:not(.item_parent_class):not(.mix-category-header):not(.grid-placeholder-cell):not(.menu-filtered-hidden):not([style*="display: none"]):not(.page-category-tile) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 64px;
  height: auto !important;
  padding: 6px 8px !important;
}
#wrapper.customer-session #labels_item_selection > .category_item.item:not(.item_parent_class) .item-text,
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item:not(.item_parent_class) .item-text {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.25;
  width: 100%;
}

/* 20260921：顧客手機2欄格子大小不一——1fr欄會被長名稱/字串撐寬，改minmax(0,1fr)強制等寬；
   無圖片商品卡片統一固定高度，內容過長截斷，避免各卡片高矮不一。 */
#wrapper.customer-session #labels_item_selection {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* 20260922加：卡片模式在寬螢幕(平板橫向/桌機)也改成auto-fill自動排欄，比照清單模式的做法——
   窄螢幕(手機直向為主)維持固定2欄；:not(.customer-list-layout)避免蓋掉清單模式自己的欄數設定。 */
@media (min-width: 640px) {
  #wrapper.customer-session:not(.customer-list-layout) #labels_item_selection {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  }
}
#wrapper.customer-session #labels_item_selection > .category_item.item,
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item {
  min-width: 0 !important;
}
#wrapper.customer-session #labels_item_selection > .category_item.item:not(.item_parent_class):not(.mix-category-header):not(.grid-placeholder-cell):not(.menu-filtered-hidden):not([style*="display: none"]),
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item:not(.item_parent_class):not(.mix-category-header):not(.grid-placeholder-cell):not(.page-category-tile):not(.menu-filtered-hidden):not([style*="display: none"]) {
  height: 76px !important;
  min-height: 76px !important;
  overflow: hidden;
}
#wrapper.customer-session #labels_item_selection > .category_item.item:not(.item_parent_class) .item-text,
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item:not(.item_parent_class) .item-text {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 14px !important;
  line-height: 1.2;
}

/* 20260921：長名稱被固定高度裁切——改成最小高度76px、高度依內容自動撐開，
   同一列的格子(CSS Grid預設stretch)會自動等高，名稱完整顯示不截斷。 */
#wrapper.customer-session #labels_item_selection > .category_item.item:not(.item_parent_class):not(.mix-category-header):not(.grid-placeholder-cell):not(.menu-filtered-hidden):not([style*="display: none"]),
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item:not(.item_parent_class):not(.mix-category-header):not(.grid-placeholder-cell):not(.page-category-tile):not(.menu-filtered-hidden):not([style*="display: none"]) {
  height: auto !important;
  min-height: 76px !important;
  overflow: visible;
}

/* 20260921：顧客手機有圖片的商品，名稱/價格字放大、名稱置中(跟無圖片商品一致) */
#wrapper.customer-session .item-info-bar { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center; gap: 2px; }
#wrapper.customer-session .item-name { font-size: 14px !important; font-weight: 700 !important; text-align: center; line-height: 1.25; flex: 0 1 auto !important; width: 100%; white-space: normal !important; }
#wrapper.customer-session .item-price { font-size: 13px !important; font-weight: 700 !important; text-align: center; width: 100%; flex: 0 0 auto !important; }

/* ==========================================================================
   20260921：店員「手機模式」仿照Loyverse手機版(只作用在#wrapper.staff-phone-mode，平板/桌機不受影響)
   頂部綠色「儲存/收費」列 → 類別下拉+搜尋 → 3欄方格商品
   ========================================================================== */
#wrapper.staff-phone-mode #category_item_selection,
#wrapper.staff-phone-mode #pages_item_selection_wrapper,
#wrapper.staff-phone-mode #category_dropdown_trigger,
#wrapper.staff-phone-mode #page_drill_breadcrumb,
#wrapper.staff-phone-mode #show_cart_1 { display: none !important; }

#phone_action_bar { display: none; }
#wrapper.staff-phone-mode #phone_action_bar {
  display: flex; margin: 0 0 8px; border-radius: 4px; overflow: hidden; background: #43a047;
}
#phone_action_bar button {
  flex: 1 1 0; border: 0; background: transparent; color: #fff; font-size: 16px; font-weight: 600;
  min-height: 58px; padding: 8px; line-height: 1.3;
}
#phone_action_bar button + button { border-left: 1px solid rgba(255,255,255,0.35); }
#phone_action_bar button b { display: block; font-size: 16px; }
#phone_action_bar button:active { background: rgba(0,0,0,0.12); }

#phone_cat_bar, #phone_search_wrap { display: none; }
#wrapper.staff-phone-mode #phone_cat_bar {
  display: flex; align-items: stretch; margin-bottom: 8px; border: 1px solid #d5d5d5; border-radius: 4px; background: #fff;
}
#wrapper.staff-phone-mode #phone_cat_select {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-size: 16px; padding: 12px 10px; color: #333;
}
#wrapper.staff-phone-mode #phone_search_btn {
  flex: 0 0 48px; border: 0; border-left: 1px solid #d5d5d5; background: transparent; font-size: 18px; color: #555;
}
#wrapper.staff-phone-mode #phone_search_wrap { margin-bottom: 8px; }
#wrapper.staff-phone-mode #phone_search_input {
  display: block; width: 100%; box-sizing: border-box; border: 1px solid #d5d5d5; border-radius: 4px; padding: 10px; font-size: 16px;
}

#wrapper.staff-phone-mode #sale-grid-big-wrapper { padding: 8px; margin-top: 0; }
#wrapper.staff-phone-mode #labels_item_selection_scroll { height: auto !important; overflow: visible; }
#wrapper.staff-phone-mode.staff-phone-mode #labels_item_selection {
  display: grid !important; grid-template-columns: repeat(var(--phone-cols, 3), minmax(0, 1fr)) !important; gap: 8px; padding: 0; float: none; width: 100%;
}
#wrapper.staff-phone-mode.staff-phone-mode #labels_item_selection > .category_item.item:not(.mix-category-header):not(.grid-placeholder-cell):not(.menu-filtered-hidden):not(.phone-search-hidden):not([style*="display: none"]) {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important; width: auto !important; min-width: 0 !important;
  padding: 4px !important; margin: 0 !important; text-align: center !important; overflow: hidden; box-sizing: border-box;
  border-radius: 4px !important;
}
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item.phone-search-hidden { display: none !important; }
#wrapper.staff-phone-mode.staff-phone-mode #labels_item_selection > .category_item.item:not(.item_parent_class) .item-text {
  font-size: 14px !important; font-weight: 700; line-height: 1.2; width: 100%; justify-content: center !important; align-items: center !important;
}
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item .item-name { font-size: 13px !important; }
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item .item-price { font-size: 12px !important; }
/* 手機模式：「所有商品」的分類標題列在3欄方格裡會變成空白格，直接隱藏 */
#wrapper.staff-phone-mode:not(.phone-view-all) #labels_item_selection > .category_item.item.mix-category-header,
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item.page-category-tile.menu-filtered-hidden { display: none !important; }
#wrapper.staff-phone-mode #labels_item_selection::before,
#wrapper.staff-phone-mode #labels_item_selection::after { display: none !important; content: none !important; }

/* 20260921：手機模式按鈕改回系統主題色(不用綠色)；加訂單數量標題；收費後改成獨立的購物車/結帳全螢幕畫面 */
#wrapper.staff-phone-mode #phone_action_bar { background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%); }
#phone_order_title { display: none; }
#wrapper.staff-phone-mode #phone_order_title {
  display: flex; align-items: center; gap: 10px; padding: 4px 4px 8px; font-size: 18px; font-weight: 600; color: #333; cursor: pointer;
}
#phone_count {
  display: inline-block; min-width: 24px; padding: 0 6px; text-align: center; border: 1px solid #888; border-radius: 3px; font-size: 14px; line-height: 22px;
}
#phone_back_bar { display: none; }
#wrapper.staff-phone-mode.phone-cart-open #phone_back_bar { display: block; margin-bottom: 8px; }
#phone_back_btn {
  width: 100%; border: 0; border-radius: 4px; padding: 12px; font-size: 16px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
}
#wrapper.staff-phone-mode:not(.phone-cart-open) #register_container { display: none !important; }
#wrapper.staff-phone-mode.phone-cart-open #sale-grid-big-wrapper { display: none !important; }
#wrapper.staff-phone-mode.phone-cart-open #register_container { display: block !important; width: 100% !important; padding: 8px; box-sizing: border-box; }

/* 20260921：只有「所有商品」檢視才顯示分類標題(跨3欄整列)，單一分類不需要 */
/* 20260922改：使用者反映類別標題下方那塊淺灰色底是多餘的，拿掉改透明；
   字級22px太大，縮小回16px。 */
#wrapper.staff-phone-mode.phone-view-all #labels_item_selection > .category_item.item.mix-category-header {
  display: block !important; grid-column: 1 / -1; aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; width: auto !important;
  margin: 4px 0 0 !important; padding: 6px 10px !important; background: none !important; color: #666 !important; font-size: 20px !important;
  font-weight: 700 !important; border-radius: 4px !important; text-align: left !important; box-shadow: none !important;
}
#wrapper.staff-phone-mode.phone-view-all #labels_item_selection > .mix-category-header .mix-category-header-inner { display: flex; justify-content: flex-start; color: #666 !important; }
#wrapper.staff-phone-mode.phone-view-all #labels_item_selection > .mix-category-header span { color: #666 !important; font-size: 20px !important; }

/* 20260921：手機模式購物車上方已有常駐的訂購方式(內用/外帶/外送)下拉選單，
   結帳區塊裡的「訂購方式」單選鈕是重複的，隱藏(radio仍留在DOM，兩邊的同步邏輯不受影響) */
#wrapper.staff-phone-mode #legacy_order_type_radio_row,
#wrapper.staff-phone-mode tr:has(> td > input[name="order_type"]) { display: none !important; }

/* 20260921：「返回商品」改放在#register_container外面(購物車ajax更新會整個換掉裡面的內容，原本放裡面會不見)，並固定在頂端 */
#wrapper.staff-phone-mode.phone-cart-open #phone_back_bar { position: sticky; top: 50px; z-index: 30; background: #fff; padding: 8px; margin: 0; }

/* 20260921：手機模式商品格文字全部置中——.category_item::before(舊卡片用的54px撐高偽元素)在flex直排格子裡
   會把文字往下推，隱藏；有圖片商品的名稱條也改放在圖片正中央(半透明底)，不再貼底部 */
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item::before,
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item::after { display: none !important; content: none !important; }
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item.item_parent_class .item-info-bar {
  position: absolute !important; left: 0; right: 0; top: 0; bottom: 0; display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important; text-align: center !important;
  background: rgba(0,0,0,0.32) !important; padding: 4px !important;
}
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item.item_parent_class .item-name { white-space: normal !important; text-align: center; color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item.item_parent_class .item-price { color: #fff !important; text-align: center; }
/* 20260921：有圖片商品的名稱span原本flex:1會撐滿整個直排容器，名稱被推到頂端、價格在底部；改成不伸展，讓兩者一起垂直置中 */
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item.item_parent_class .item-info-bar .item-name,
#wrapper.staff-phone-mode #labels_item_selection > .category_item.item.item_parent_class .item-info-bar .item-price { flex: 0 0 auto !important; }

/* 20260921：顧客端「卡片/清單」畫面切換(header.php「我的喜好」面板裡的「清單畫面」開關)。
   清單畫面=一列一個商品，左邊名稱/說明/價格(.item-list-info，由register_initial.php
   buildListInfoHtml()產生)，右邊小圖(.prod_image)。預設(卡片)畫面完全不受影響。 */

.item-list-info { display: none; }
#wrapper.customer-session.customer-list-layout #labels_item_selection {
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; padding: 0; width: 100%;
}
#wrapper.customer-session.customer-list-layout #labels_item_selection > .grid-placeholder-cell { display: none !important; }
#wrapper.customer-session.customer-list-layout.customer-list-layout #labels_item_selection > .category_item.item:not(.mix-category-header):not(.grid-placeholder-cell):not(.page-category-tile):not(.menu-filtered-hidden):not(.phone-search-hidden):not(.item_parent_class):not([style*="display: none"]),
#wrapper.customer-session.customer-list-layout.customer-list-layout #labels_item_selection > .category_item.item.item_parent_class:not(.mix-category-header):not(.grid-placeholder-cell):not(.page-category-tile):not(.menu-filtered-hidden):not([style*="display: none"]) {
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
  gap: 12px; width: 100% !important; height: auto !important; min-height: 92px !important; aspect-ratio: auto !important;
  padding: 12px 14px !important; margin: 0 !important; text-align: left !important; float: none !important;
  background: #fff !important; color: #222 !important; border: 0 !important; border-bottom: 1px solid #ececec !important;
  border-radius: 0 !important; box-shadow: none !important; overflow: hidden; box-sizing: border-box; position: relative;
}
#wrapper.customer-session.customer-list-layout #labels_item_selection > .category_item.item::before,
#wrapper.customer-session.customer-list-layout #labels_item_selection > .category_item.item::after { display: none !important; content: none !important; }
#wrapper.customer-session.customer-list-layout #labels_item_selection > .category_item.item > .item-text,
#wrapper.customer-session.customer-list-layout #labels_item_selection > .category_item.item > .item-info-bar,
/* 20260924改：顏色和形狀的商品在清單畫面保留色塊(88px縮圖大小，位置跟照片同一邊)，不再隱藏 */
#wrapper.customer-session.customer-list-layout #labels_item_selection > .category_item.item > .item-list-info {
  display: block !important; order: 1; flex: 1 1 0 !important; width: auto !important; min-width: 0; text-align: left !important; margin: 0 !important;
}
#wrapper.customer-session.customer-list-layout .item-list-info .li-name { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; color: #222; word-break: break-word; }
#wrapper.customer-session.customer-list-layout .item-list-info .li-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 3px; font-size: 13px; line-height: 1.35; color: #888;
}
#wrapper.customer-session.customer-list-layout .item-list-info .li-price { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; color: #d9480f; }
#wrapper.customer-session.customer-list-layout #labels_item_selection > .category_item.item > .prod_image {
  /* 20260922修：使用者反映有圖片商品的名稱/金額整個不見——根因是.item_parent_class
     .prod_image的基礎規則用了position:absolute!important;inset:0!important;
     width:100%!important把照片撐滿整個格子(蓋在文字上面)，這裡原本沒加!important，
     贏不了，要跟著用!important才蓋得掉。 */
  position: static !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  order: 2; flex: 0 0 88px !important; width: 88px !important; height: 88px !important; margin: 0 !important; padding: 0 !important;
}
#wrapper.customer-session.customer-list-layout #labels_item_selection > .category_item.item > .prod_image img {
  width: 88px !important; height: 88px !important; max-height: 88px !important; object-fit: cover !important; border-radius: 8px !important; margin: 0 !important; display: block !important;
}
/* 20260921：清單畫面圖片放左邊(後台「顧客清單畫面圖片位置」設定)，沒圖片的商品文字直接靠左 */
#wrapper.customer-session.customer-list-layout.customer-list-img-left #labels_item_selection > .category_item.item > .prod_image { order: 0; }
/* 20260921：圖片在左時，沒有圖片的商品放一張同尺寸的灰色圖案佔位(像一般點餐App)，讓所有文字左邊對齊；
   每個分類都一致顯示(顧客把「顯示圖片」關閉時才不放) */
.li-thumb-ph { display: none; }
#wrapper.customer-session.customer-list-layout.customer-list-img-left:not(.customer-list-no-ph) #labels_item_selection > .category_item.item:not(.change) > .li-thumb-ph {
  display: flex !important; order: 0; flex: 0 0 88px; width: 88px; height: 88px; align-items: center; justify-content: center;
  background: #d9d9d9; border-radius: 8px; color: #9a9a9a; font-size: 32px;
}
/* 20260921：「我的喜好」面板裡的畫面版型，卡片/清單兩個並排選項，點一下直接切換 */
#header_settings_panel .header-layout-seg { display: flex; width: 100%; height: 36px; border-radius: 8px; overflow: hidden; background: var(--panel-light, #f5f5f5); box-sizing: border-box; }
#header_settings_panel .header-layout-seg a { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: var(--brand-2, #333); text-decoration: none; white-space: nowrap; }
#header_settings_panel .header-layout-seg a.active { background: var(--brand-2, #5b1a8f); color: #fff; font-weight: 700; }

/* 20260922加：顧客卡片畫面商品照片改成完整顯示(不裁切)——使用者反映格子太寬扁時，
   object-fit:cover會把長方形照片裁到只剩中間一小條，認不出來是什麼。改用contain讓
   整張照片縮小塞進格子，四周留白色空間，寧可留白也要看得出照片內容(比照清單縮圖
   同樣「完整照片」的效果)。只套用在顧客端，店員畫面(平板/手機)維持原本滿版裁切設計。 */
#wrapper.customer-session .category_item.item.item_parent_class .prod_image {
  background: #f2f2f2 !important;
}
#wrapper.customer-session .category_item.item.item_parent_class .prod_image img {
  object-fit: contain !important;
}

/* 20260922加：清單畫面在寬螢幕(平板橫向/桌機)改成多欄排列，避免整排都是滿版單欄、
   兩側留白浪費空間。窄螢幕(手機直向為主)維持原本單欄+分隔線的清單樣式不變。
   多欄時每個商品改用卡片邊框(不再只靠底線分隔)，因為同一列不同欄高度不一定對齊，
   單靠border-bottom會對不齊、看起來斷開。
   20260922改：使用者反映欄數可以再多一點——固定2欄/3欄改成auto-fill自動排欄，
   每欄最小240px，螢幕越寬欄數越多(不用另外訂斷點)，平板約3~4欄、桌機更寬還會
   自動排到5欄以上。 */
@media (min-width: 640px) {
  #wrapper.customer-session.customer-list-layout #labels_item_selection {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 12px !important; padding: 4px !important;
  }
  #wrapper.customer-session.customer-list-layout.customer-list-layout #labels_item_selection > .category_item.item:not(.mix-category-header):not(.grid-placeholder-cell):not(.page-category-tile):not(.menu-filtered-hidden):not(.phone-search-hidden):not(.item_parent_class):not([style*="display: none"]),
  #wrapper.customer-session.customer-list-layout.customer-list-layout #labels_item_selection > .category_item.item.item_parent_class:not(.mix-category-header):not(.grid-placeholder-cell):not(.page-category-tile):not(.menu-filtered-hidden):not([style*="display: none"]) {
    border: 1px solid #ececec !important; border-radius: 10px !important;
  }
}

/* 20260922加：店員點商品加入購物車時，飛一個小圓點到購物車面板/手機訂單徽章，
   讓「東西真的加進去了」看得到，不是每次都要低頭看購物車列表才確定。純視覺
   效果，用position:fixed+transition做位移動畫，跟頁面實際排版無關，不會有
   之前圖片疊字那類版面卡死的風險。 */
.fly-to-cart-ghost {
  position: fixed;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--brand-2, #4a148c);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  z-index: 3000;
  pointer-events: none;
  transition: left 0.45s cubic-bezier(.25,.1,.5,1), top 0.45s cubic-bezier(.25,.1,.5,1), transform 0.45s ease-in, opacity 0.45s ease-in;
}
/* 20260922修：使用者反映購物車「整個變大又縮回」很奇怪——原本這個彈跳效果
   同時套用在#register_container上，但那是購物車整塊面板(桌機是常駐側欄、
   手機是滿版購物車畫面)，縮放一整塊這麼大的區域看起來像版面在抖動/故障，
   不是「輕輕彈一下」的感覺。改成只保留在#phone_count這種小徽章上(縮放
   一個小圓點才自然)，大面板不再套用這個效果，靠小圓點飛過去本身已經
   足夠當作「東西到了」的提示。 */
#phone_count.fly-to-cart-bump {
  animation: flyToCartBump 0.26s ease-out;
}
@keyframes flyToCartBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
/* 20260924改：使用者反映按「類別」跟按「頁面」時，下方那排按鈕間距/
   位置不一樣——頁面列原本是按鈕平均撐滿整排(flex:1)、內距8px、外框
   左右留12px；類別列是照文字寬度、內距6px、貼齊左邊。店員桌機版統一成
   跟類別列一樣，切換時按鈕不會跳動。 */
.pos-desktop-order-row #pages_item_selection_wrapper {
  padding: 5px 0 0 0;
  border-top: none;
}
.pos-desktop-order-row #pages_item_selection .labels.page {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0;
  padding: 6px 18px !important;
}
/* 20260924加：使用者反映功能標題下方的路徑列(首頁 > 商品)字太小——
   unicorn.css原本#breadcrumb a是11px，放大到15px。 */
#breadcrumb a {
  font-size: 15px;
}
/* 20260924改：商品/類別/員工/供應商列表右上角的功能按鈕，原本螢幕小於
   1200px(iPad等)只剩圖示(hidden-lg/visible-lg)，使用者反映看不出來是
   做什麼的——改成一律「小圖示+文字」。 */
.toolbar-btn-label { margin-left: 4px; }
/* 20260925改：展開結帳時按鈕列改成整排——「上一步」靠左、「開錢箱」靠右
   (使用者要求，原本只有「上一步」一顆貼右)。「開錢箱」只在結帳模式顯示。 */
@media (min-width: 750px) {
  .pos-desktop-order-row:not(.checkout-expanded) #btn_open_cash_drawer {
    display: none;
  }
  /* 20260925再改：按鈕列只橫跨右邊結帳那一欄(對齊合計/總計/應付)，不是整個
     面板——左右兩欄平分寬度、中間gap 16px，所以右欄從50%+8px開始 */
  .pos-desktop-order-row.checkout-expanded #cart_checkout_toggle_buttons {
    left: calc(50% + 8px);
    justify-content: space-between;
  }
}
/* 20260925加：手機版結帳畫面頂部「上一步」+「開錢箱」並排(開錢箱有設定錢箱才出現) */
#wrapper.staff-phone-mode.phone-cart-open #phone_back_bar { display: flex; gap: 8px; }
#wrapper.staff-phone-mode.phone-cart-open #phone_back_btn { flex: 1 1 auto; width: auto; }
#phone_drawer_btn {
  flex: 0 0 auto; border: 0; border-radius: 4px; padding: 12px 16px; font-size: 16px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
}

/* 20260926改：商品名稱字級跟類別名稱字級統一——各陳列方式/手機/顧客端原本各自寫死px(商品13~17px、類別12~14px)，
   同樣設「小」看起來卻不一樣大。改成兩者設定值(小/中/大/特大)對應同一組字級：14/15.4/16.8/19.6px，價格比名稱小1px。
   用#wrapper#wrapper(連寫兩次ID)讓特異度贏過所有既有規則，不用逐一追每種版型的寫死值。 */
#wrapper#wrapper.itemname-fontsize-normal #labels_item_selection .item-name,
#wrapper#wrapper.itemname-fontsize-normal #labels_item_selection .item-text { font-size: calc(14px * 1) !important; }
#wrapper#wrapper.itemname-fontsize-normal #labels_item_selection .item-price { font-size: calc(13px * 1) !important; }
#wrapper#wrapper.categoryname-fontsize-normal #category_item_selection .labels.category b,
#wrapper#wrapper.categoryname-fontsize-normal #category_item_selection .labels.page b,
#wrapper#wrapper.categoryname-fontsize-normal #pages_item_selection .labels.page b { font-size: calc(14px * 1) !important; }
#wrapper#wrapper.itemname-fontsize-medium #labels_item_selection .item-name,
#wrapper#wrapper.itemname-fontsize-medium #labels_item_selection .item-text { font-size: calc(14px * 1.1) !important; }
#wrapper#wrapper.itemname-fontsize-medium #labels_item_selection .item-price { font-size: calc(13px * 1.1) !important; }
#wrapper#wrapper.categoryname-fontsize-medium #category_item_selection .labels.category b,
#wrapper#wrapper.categoryname-fontsize-medium #category_item_selection .labels.page b,
#wrapper#wrapper.categoryname-fontsize-medium #pages_item_selection .labels.page b { font-size: calc(14px * 1.1) !important; }
#wrapper#wrapper.itemname-fontsize-large #labels_item_selection .item-name,
#wrapper#wrapper.itemname-fontsize-large #labels_item_selection .item-text { font-size: calc(14px * 1.2) !important; }
#wrapper#wrapper.itemname-fontsize-large #labels_item_selection .item-price { font-size: calc(13px * 1.2) !important; }
#wrapper#wrapper.categoryname-fontsize-large #category_item_selection .labels.category b,
#wrapper#wrapper.categoryname-fontsize-large #category_item_selection .labels.page b,
#wrapper#wrapper.categoryname-fontsize-large #pages_item_selection .labels.page b { font-size: calc(14px * 1.2) !important; }
#wrapper#wrapper.itemname-fontsize-xlarge #labels_item_selection .item-name,
#wrapper#wrapper.itemname-fontsize-xlarge #labels_item_selection .item-text { font-size: calc(14px * 1.4) !important; }
#wrapper#wrapper.itemname-fontsize-xlarge #labels_item_selection .item-price { font-size: calc(13px * 1.4) !important; }
#wrapper#wrapper.categoryname-fontsize-xlarge #category_item_selection .labels.category b,
#wrapper#wrapper.categoryname-fontsize-xlarge #category_item_selection .labels.page b,
#wrapper#wrapper.categoryname-fontsize-xlarge #pages_item_selection .labels.page b { font-size: calc(14px * 1.4) !important; }
/* 20260926修：商品名稱實際文字包在.item-text裡的內層<span>，被早期通用規則
   .category_item.item span{font-size:18px!important}(約2869行)蓋成固定18px，
   上面的字級設定只作用在外層、看不出效果。內層span一律繼承外層字級。 */
#wrapper#wrapper #labels_item_selection .item-text > span,
#wrapper#wrapper #labels_item_selection .item-name span { font-size: inherit !important; }

/* 20260930加：一鍵收費區塊（仿Loyverse：收到的現金+收費、快速金額、其他付款方式按鈕） */
#quick_pay { padding: 8px 4px 12px; }
#quick_pay .qp-cash-label { font-size: 13px; opacity: .8; margin-bottom: 4px; }
#quick_pay .qp-cash-row { display: flex; gap: 10px; align-items: center; }
#quick_pay .qp-cash-row input { flex: 1 1 auto; min-width: 0; height: 44px; font-size: 20px; margin: 0; }
#quick_pay .qp-cash-row button { flex: 0 0 auto; min-width: 110px; height: 48px; font-size: 18px; }
#quick_pay .qp-quick-row { display: flex; gap: 8px; margin-top: 10px; }
#quick_pay .qp-quick-row button { flex: 1 1 0; height: 44px; font-size: 16px; }
#quick_pay .qp-other { margin-top: 10px; height: 48px; font-size: 18px; }
/* 20261018加：結帳區按鈕全部上色，配色跟App離線點餐一致——
   收費/完成=綠、快速金額=藍、其他付款=紫、掛單/儲存=橘、取消=紅、開錢箱=青 */
#wrapper:not(.customer-session) #quick_pay .qp-cash-row button#qp_cash_button,
#wrapper:not(.customer-session) #finish_sale_button { background: #2e9e4f !important; border-color: #2e9e4f !important; color: #fff !important; background-image: none !important; }
#wrapper:not(.customer-session) #quick_pay .qp-quick-row button.qp-quick { background: #1e7fd6 !important; border-color: #1e7fd6 !important; color: #fff !important; background-image: none !important; }
#wrapper:not(.customer-session) #quick_pay button.qp-other { background: #7b3fb8 !important; border-color: #7b3fb8 !important; color: #fff !important; background-image: none !important; }
#wrapper:not(.customer-session) #layaway_sale_button { background: #e6821e !important; border-color: #e6821e !important; color: #fff !important; background-image: none !important; }
#wrapper:not(.customer-session) #cancel_sale_button { background: #d9453f !important; border-color: #d9453f !important; color: #fff !important; background-image: none !important; }
#wrapper:not(.customer-session) #add_payment_button { background: #1e7fd6 !important; border-color: #1e7fd6 !important; color: #fff !important; background-image: none !important; }
#wrapper:not(.customer-session) #btn_open_cash_drawer { background: #1596a8 !important; color: #fff !important; }
#wrapper:not(.customer-session) #cart_checkout_toggle_buttons #btn_show_checkout_panel { background: #2e9e4f !important; }
#wrapper:not(.customer-session) #cart_checkout_toggle_buttons #btn_save_suspend { background: #e6821e !important; }
#wrapper:not(.customer-session) #cart_checkout_toggle_buttons #btn_show_cart_panel { background: #8a8f98 !important; }
#qp_change_overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 100000; display: flex; align-items: center; justify-content: center; }
#qp_change_overlay .qp-change-box { background: #222; color: #fff; padding: 28px 36px; border-radius: 10px; text-align: center; min-width: 320px; }
#qp_change_overlay .qp-change-line { font-size: 20px; opacity: .85; margin-bottom: 6px; }
#qp_change_overlay .qp-change-title { font-size: 22px; margin-top: 16px; }
#qp_change_overlay .qp-change-amount { font-size: 64px; font-weight: bold; color: #f0ad4e; margin: 4px 0 20px; }
#qp_change_overlay button { min-width: 120px; height: 52px; font-size: 20px; }

/* 20260930加：全站隱藏麵包屑列（「首頁」那一排）——只有一個回首頁連結，側邊選單
   已經有同樣功能，佔一整排高度浪費版面。HTML保留不動，要恢復只要拿掉這條。 */
#breadcrumb { display: none !important; }

/* 20260930加：店員手機模式「收費」畫面簡化(仿Loyverse)——
   A.購物車清單預設收合成只剩「總計(N) 金額 ▾」一行，點一下展開/收合；結帳區塊(應付/現金/收費)
     因此不用捲很久。折扣/加價在下面合計區塊本來就有逐列顯示。
   B.畫面最下方固定一條綠色「收費 NT$xxx」，任何捲動位置都能一鍵收費(等同現金欄位旁的收費鈕)。 */
#wrapper.staff-phone-mode.phone-cart-open:not(.phone-cart-expanded) #cart_items_panel #register,
#wrapper.staff-phone-mode.phone-cart-open:not(.phone-cart-expanded) #cart_menu { display: none !important; }
#wrapper.staff-phone-mode.phone-cart-open .cart-total-row { cursor: pointer; }
#wrapper.staff-phone-mode.phone-cart-open .cart-total-row .cart-total-amount::after { content: ' ▾'; font-weight: 400; }
#wrapper.staff-phone-mode.phone-cart-open.phone-cart-expanded .cart-total-row .cart-total-amount::after { content: ' ▴'; }
.qp-phone-bar { display: none; }
#wrapper.staff-phone-mode.phone-cart-open .qp-phone-bar {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  height: 56px; border: 0; font-size: 20px; font-weight: 700; color: #fff; background: #27a95c;
}
#wrapper.staff-phone-mode.phone-cart-open #register_container { padding-bottom: 72px !important; }

/* 20260930加：店員手機模式的收費畫面本身就是獨立結帳畫面，「結帳」區隔標題多餘，隱藏(顧客端長頁面仍保留) */
#wrapper.staff-phone-mode #checkout_section_divider { display: none !important; }

/* 20260924加：「顏色和形狀」商品(沒照片、後台設定底色)在顧客端要看得到顏色。
   (1)卡片畫面：色塊本來是position:absolute填滿格子，但顧客端有照片/色塊的格子
   (.item_parent_class)被改成高度auto，子元素全是absolute就整格塌成0高、看不到。
   改成一般流排版+正方形，跟有照片的商品同大小。 */
/* 20261006修：這條只適用手機寬度(<=749px，格子高度auto，見下方#wrapper.customer-session ...:not(.menu-filtered-hidden)那條)。
   750px以上(平板橫向/桌機)格子是固定高度(.category_item 100~105px+overflow:hidden)，正方形色塊會被塞進格子又被切掉，
   只剩底部一條色塊、名稱價格都看不到——750px以上維持上面.pos-representation-tile原本「絕對定位填滿整個格子」的做法。 */
@media (max-width: 749px) {
#wrapper.customer-session:not(.customer-list-layout) .category_item.item.item_parent_class > .pos-representation-tile {
  position: static !important; flex: 0 0 auto !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important;
}
}
/* (2)清單畫面：色塊當縮圖(88px)，文字資訊(名稱/價格)已經在右邊清單區塊，色塊內不重複畫文字 */
#wrapper.customer-session.customer-list-layout #labels_item_selection > .category_item.item > .pos-representation-tile {
  display: flex !important; position: static !important; order: 2; flex: 0 0 88px !important;
  width: 88px !important; height: 88px !important; aspect-ratio: auto !important; margin: 0 !important; padding: 0 !important;
}
#wrapper.customer-session.customer-list-layout #labels_item_selection > .category_item.item > .pos-representation-tile .pos-representation-inner { display: none !important; }
#wrapper.customer-session.customer-list-layout.customer-list-img-left #labels_item_selection > .category_item.item > .pos-representation-tile { order: 0; }

/* 20261005加：手機版結帳畫面頂部「上一步」旁的「儲存列印」按鈕(跟「開錢箱」同樣式) */
#phone_save_print_btn {
  flex: 0 0 auto; border: 0; border-radius: 4px; padding: 12px 16px; font-size: 16px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
}

/* 20261005加：「選擇顧客」視窗的日期下拉選單右側加向下三角形，看得出來可以下拉 */
#staff_class_date { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 34px; background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23aaa' stroke-width='2'/></svg>"); }


/* 20261019加：結帳區「加減」按鈕(桌機常駐購物車模式)，配色跟App離線點餐的「加減」一致(橘紅)；展開結帳模式只留「上一步」，這顆跟著隱藏 */
.pos-desktop-order-row #cart_checkout_toggle_buttons #btn_open_discounts { background: #ef6c00; }
#wrapper:not(.customer-session) #cart_checkout_toggle_buttons #btn_open_discounts { background: #ef6c00 !important; }
.pos-desktop-order-row.checkout-expanded #btn_open_discounts { display: none; }

/* 20261023加：所有下拉選單右邊固定畫向下箭頭。原本只有全站select規則有深灰色箭頭，深色頁面(後台設定頁)看不見，
   或被各頁自己的background樣式蓋掉。改用淺灰色(深色/淺色底都看得到)並強制套用，才知道那是下拉選單。
   (多選/多列的select不是下拉，不加) */
select:not([multiple]):not([size]) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 34px !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 8px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='2'/></svg>") !important;
}