@charset "utf-8";
/* CSS Document */



/* PARTNR 動態區塊整體定位 (完美對齊 styledisplay.html 的 top: 53%) */
.partnr-sections-wrapper {
position: absolute !important;
top: 53% !important; 
left: 2% !important;
width: 96% !important;
display: flex;
flex-direction: column;
gap: 15px;
z-index: 8;
box-sizing: border-box;
padding-bottom: 100px;
}

/* 確保心心按鈕在 card 內部正確呈現 */
.partnr-card .heart-btn {
position: static !important;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: rgba(255, 255, 255, 0.15);
border: none;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
outline: none;
transition: all 0.25s ease-in-out;
}
/* ==========================================================================
   PARTNR 頁面整體容器
   — container 改為 flex 縱向排列，讓導覽區與板塊區分開
   ========================================================================== */

.container.partnr-page {
  display: flex;
  flex-direction: column;
  height: auto !important;
}

/* ==========================================================================
   導覽區：包住背景圖片與所有導覽按鈕
   — position: relative，讓按鈕的 top/left % 相對於此區域計算
   — 高度由背景圖片自然撐起，與其他頁面完全一致
   ========================================================================== */
.partnr-nav-zone {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

/* 導覽區內的背景圖片：正常流，撐起導覽區高度 */
.partnr-nav-zone .bg-image {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   三大板塊包裝層：正常文件流，在導覽區下方向下延伸
   ========================================================================== */
.partnr-sections-wrapper {
  width: 96%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px 0 60px 0;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #141414 0%, #1e1e1e 100%);
  border-radius: 0 0 12px 12px;
}

/* ==========================================================================
   上中下三大板塊容器
   ========================================================================== */
.partnr-section {
  width: 100%;
  height: 440px;
  background: rgba(20, 20, 20, 0.85);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-sizing: border-box;
  overflow: hidden;
}

/* ==========================================================================
   板塊內水平滑動軌道
   ========================================================================== */
.partnr-row-slider {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 10px 15px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 153, 0, 0.45) rgba(255, 255, 255, 0.05);
}

.partnr-row-slider::-webkit-scrollbar { height: 5px; }
.partnr-row-slider::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
.partnr-row-slider::-webkit-scrollbar-thumb {
  background: rgba(255, 153, 0, 0.5);
  border-radius: 10px;
}

/* ==========================================================================
   卡片基本樣式
   ========================================================================== */
.partnr-card {
  flex: 0 0 auto;
  height: 100%;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #fff;
}

/* 各卡片寬度 */
.flex-card-presc    { width: 400px; }
.flex-card-engrave  { width: 300px; }
.flex-card-gfx      { width: 380px; flex-shrink: 0; }
.flex-card-partnum  { width: 300px; }
.flex-card-desc     { width: 380px; }
.flex-card-remarks  { width: 380px; }
.flex-card-summary  { width: 300px; }
.flex-card-cust     { width: 300px; }
.flex-card-checkout { width: 300px; }

/* 顏色框線 */
.card-green   { border: 2px solid #00ff66; background: rgba(0, 50, 20, 0.6); }
.card-orange  { border: 2px solid #ff9900; background: rgba(50, 30, 0, 0.6); }
.card-purple  { border: 2px solid #cc00ff; background: rgba(40, 0, 50, 0.6); }
.card-blue    { border: 2px solid #00e5ff; background: rgba(0, 40, 50, 0.6); }
.card-gray    { border: 2px solid #aaaaaa; background: rgba(40, 40, 40, 0.6); }
.card-cyan    { border: 2px solid #00ffff; background: rgba(0, 50, 50, 0.6); }
.card-yellow  { border: 2px solid #ffff00; background: rgba(50, 50, 0, 0.6); }
.card-red     { border: 2px solid #ff0055; background: rgba(50, 0, 20, 0.6); }

/* ==========================================================================
   心心按鈕：覆寫 items.css 的 card-heart absolute 定位，改為 inline 正常流
   ========================================================================== */
.partnr-sections-wrapper .heart-btn {
  position: static !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  outline: none;
  transition: all 0.25s ease-in-out;
}

.partnr-sections-wrapper .heart-btn .heart-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2px;
  pointer-events: none;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

.partnr-sections-wrapper .heart-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.12);
}

.partnr-sections-wrapper .heart-btn:active {
  transform: scale(0.92);
}

.partnr-sections-wrapper .heart-btn.active {
  background: rgba(255, 59, 48, 0.22);
}

.partnr-sections-wrapper .heart-btn.active .heart-icon {
  fill: #ff3b30;
  stroke: #ff3b30;
}

/* ==========================================================================
   心心排列輔助 class
   ========================================================================== */

/* 文字與心心水平並排 */
.presc-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Prescription lenses：Far 和 Short 左右並排 */
.presc-info-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 6px;
}

.presc-type-half {
  flex: 1 1 0;
  min-width: 0;
}

.presc-type-half small {
  display: block;
  margin-top: 2px;
  font-size: 0.58rem;
  color: #ccc;
  line-height: 1.3;
  word-break: break-word;
}

/* Customer provides graphics design：Formats + 心心 + Code 同一行 */
.gfx-formats-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin-bottom: 4px;
}

.gfx-formats-row .gfx-code-tag {
  font-size: 0.6rem;
  color: #ccc;
  white-space: nowrap;
}

/* ==========================================================================
   Prescription 表格
   ========================================================================== */
.presc-table td {
  background: #ffd000;
  color: #000;
  padding: 2px;
  text-align: center;
}
.presc-table input {
  width: 100%;
  border: none;
  background: transparent;
  text-align: center;
  color: #000;
}
.presc-table tbody tr:nth-child(3) td,
.presc-table tbody tr:nth-child(4) td {
  background: #ff9900;
}
.presc-table tbody tr {
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.presc-table tbody tr.row-active {
  opacity: 1;
  pointer-events: auto;
}






/* 輸入值不合理/錯誤時的亮紅樣式 */
.input-error {
  border: 2px solid #ff3333 !important;
  background-color: #ffe6e6 !important;
  color: #cc0000 !important;
  outline: none;
}







/* ==========================================================================
   Graphics 圖片滑動區
   ========================================================================== */
.graphics-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  height: 180px;
  margin-top: 5px;
}

.graphics-slider-wrapper {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.graphics-slider-wrapper::-webkit-scrollbar { height: 4px; }
.graphics-slider-wrapper::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}
.graphics-slider-wrapper::-webkit-scrollbar-thumb {
  background: #cc00ff;
  border-radius: 4px;
}

.gfx-img-item {
  flex: 0 0 110px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.gfx-img-box {
  width: 200px;
  height: 140px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(204, 0, 255, 0.4);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gfx-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gfx-item-label {
  font-size: 0.55rem;
  color: #ddd;
  margin-top: 2px;
}

.gfx-footer-note {
  font-size: 0.5rem;
  color: #aaa;
  line-height: 1.2;
  margin-top: 4px;
}

/* 綠色圓角按鈕 - 對齊原稿樣式 */
.btn-green-sm,
.btn-green-md,
.btn-yellow-md {
background-color: #28a745 !important; /* 綠色背景 */
color: #ffffff !important; /* 白色文字 */
border: none !important;
border-radius: 12px !important; /* 圓角邊框 */
padding: 6px 16px !important;
font-weight: bold;
font-size: 13px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-green-sm:hover,
.btn-green-md:hover,
.btn-yellow-md:hover {
background-color: #218838 !important; /* 滑鼠懸停深綠色 */
transform: translateY(-1px);
}

/* 左側上下直排容器 */
.partnr-column-left {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}

/* 2-1 上藍框 */
.card-blue {
border: 2px solid #00bcff;
background: rgba(0, 20, 40, 0.75);
border-radius: 10px;
padding: 12px;
}

.partnum-hint {
font-size: 11px;
color: #cccccc;
line-height: 1.3;
margin: 8px 0;
}

/* 2-2 下粉紅/紫框 */
.card-pink {
border: 2px solid #e056fd; /* 粉紫邊框 */
background: rgba(40, 10, 30, 0.75);
border-radius: 10px;
padding: 12px;
}

/* 照片展示組合 */
.photo-display-row {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 10px;
}

.photo-item {
text-align: center;
}

.glasses-img {
max-width: 110px;
height: auto;
object-fit: contain;
filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.5));
}

.photo-caption {
font-size: 11px;
color: #ffffff;
margin-top: 4px;
}

/* ==========================================================================
   多國貨幣價格區塊樣式 (對齊圖片)
   ========================================================================== */
.price-container {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
}

.price-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.price-item.price-right {
  justify-content: flex-start;
  padding-left: 20px;
}

.price-label {
  color: #ffffff;
  font-weight: bold;
  min-width: 35px;
}

.price-value {
  color: #ffffff;
  font-weight: bold;
  font-size: 1.1rem;
}

/* 紫框 Template 暗色淡化樣式 */
.gfx-img-item.is-dimmed {
  opacity: 0.25;
  filter: grayscale(80%);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.gfx-img-item.is-highlighted {
  opacity: 1;
  filter: none;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Check out 按鈕基礎樣式 */
.btn-checkout {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 6px;
  border: none;
  transition: all 0.3s ease;
  margin-top: 15px;
}

/* 資料不齊全：暗灰色、不可點擊 */
.btn-checkout.checkout-btn-disabled,
.btn-checkout:disabled {
  background-color: #444444 !important;
  color: #888888 !important;
  cursor: not-allowed !important;
  opacity: 0.6;
  box-shadow: none !important;
  transform: none !important;
}

/* 資料齊全：亮綠色、可點擊 */
.btn-checkout.checkout-btn-enabled {
  background-color: #28a745 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  opacity: 1;
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
}

.btn-checkout.checkout-btn-enabled:hover {
  background-color: #218838 !important;
  transform: translateY(-2px);
}

/* Customer Order Nr. 顯示文字樣式 */
.order-num-box {
  margin-top: 15px;
  font-size: 0.8rem;
  color: #cccccc;
  font-weight: bold;
}

/* ==========================================================================
   紅色區域：心心計數與優惠提示樣式
   ========================================================================== */
.heart-discount-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed #ff0055;
  border-radius: 8px;
  padding: 8px;
  margin: 10px 0;
  text-align: center;
}

.heart-count-display {
  font-size: 0.85rem;
  font-weight: bold;
  color: #ff3b30;
  margin-bottom: 4px;
}

.discount-banner {
  font-size: 0.75rem;
  color: #ffcc00;
  line-height: 1.3;
  transition: all 0.3s ease;
}

/* 達成優惠條件時的高亮效果 (>= 11 或 > 10 個心心) */
.discount-banner.discount-applied {
  color: #00ff66;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(0, 255, 102, 0.6);
}