/* =========================================================
   File: Quote-cart_Temp1_patch_2026_CLEAN.css
   Scope: Quote-Cart_B.asp
   Notes:
   - Keep only ONE layout strategy (layout-max centered + flex columns)
   - Avoid table:first-of-type hacks; target .cart_panel/.cart_body instead
========================================================= */

 
/* =========================================================
   1) Cart modal default hidden
========================================================= */
#cart_problem{ display:none; visibility:hidden; }
#cart_problem.show{ display:block; visibility:visible; }

/* =========================================================
   2) Footer overlay hotfix
========================================================= */
footer.float_bot_out#footer{ position:relative; z-index:1; }
footer.float_bot_out#footer .footer{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
  transform:none !important;
  z-index:1 !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  clear:both !important;
}
footer.float_bot_out#footer .footer *{ box-sizing:border-box; }

/* =========================================================
   3) Main layout strategy (KEEP ONE)
   - Use layout-max centered, same family as header/footer
========================================================= */
main.main_out{
  max-width: var(--layout-max, 1300px) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;

  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  box-sizing: border-box;
}
main.main_out > aside.float_left_out{ flex:0 0 auto !important; }
main.main_out > section.float_right_out{
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* =========================================================
   4) Outer blue + inner white card
========================================================= */
main.main_out > section.float_right_out > .content_panel.cart_panel{
  background:#eef7ff !important;
  background-image:none !important;
  border-radius:14px;
  padding: 18px 18px 22px 18px;
  box-sizing:border-box;
}

/* White cart body should look like a card and stretch */
main.main_out > section.float_right_out > .content_panel.cart_panel .cart_body{
  width: 100% !important;
  box-sizing: border-box;
  background:#fff !important;
  border-radius:12px;
  padding: 14px 14px 18px 14px;
}

/* Make tables inside cart body full width (avoid legacy width=96%) */
main.main_out > section.float_right_out > .content_panel.cart_panel .cart_body table{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   5) Title / steps / typography baseline
========================================================= */
main.main_out > section.float_right_out > .content_panel.cart_panel .h1_title,
.float_right_out.content_panel.cart_panel h1,
.float_right_out.content_panel.cart_panel .page_title,
.float_right_out.content_panel.cart_panel .cart_title{
  margin: 0;
  padding: 6px 0 10px 0;
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #123;
}

/* Steps block spacing */
main.main_out > section.float_right_out > .content_panel.cart_panel .cart_steps,
.float_right_out.content_panel.cart_panel .flow_steps{
  max-width: 980px;
  margin: 6px auto 10px auto;
}

/* Baseline typography inside cart body */
main.main_out > section.float_right_out > .content_panel.cart_panel .cart_body{
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #222;
}
main.main_out > section.float_right_out > .content_panel.cart_panel .cart_body *{
  font-family: inherit;
}

/* Legacy <font> cleanup */
main.main_out > section.float_right_out > .content_panel.cart_panel .cart_body font{
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  font-weight: inherit !important;
}

/* =========================================================
   6) Buttons (restore green)
========================================================= */
.cart_body input[type="button"],
.cart_body input[type="submit"],
.cart_body button{
  background-color:#14932F !important;
  color:#fff !important;
  border:1px solid #085746 !important;
  border-radius:6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor:pointer;
}
.cart_body input[type="button"]:hover,
.cart_body input[type="submit"]:hover,
.cart_body button:hover{
  background-color:#095e4d !important;
}
.cart_body input[type="button"]:disabled,
.cart_body input[type="submit"]:disabled,
.cart_body button:disabled{
  background-color:#7faea4 !important;
  border-color:#7faea4 !important;
  color:#fff !important;
  cursor:default;
}

/* =========================================================
   7) Cart items table: header + spacing
========================================================= */
.cart_body table.cart_items tr:first-child td{
  background-color:#A9A5A5 !important;
  color:#000 !important;
  font-weight:700 !important;
  font-size: 14px !important;
}

/* Increase breathing room */
.cart_body table.cart_items td{ padding-bottom: 6px; }
.cart_body table.cart_items input[type="button"],
.cart_body table.cart_items input[type="submit"],
.cart_body table.cart_items button{ margin-bottom: 10px !important; }

/* =========================================================
   8) Section title bars (.cart_section_title) – ONE definitive rule
========================================================= */
td.cart_section_title{
  background-color:#A9A5A5 !important;
  color:#000 !important;
  font-weight:700 !important;
  padding: 6px 8px;
  border-radius: 4px;
  letter-spacing: .2px;

  /* Keep title readable */
  display: table-cell !important;
  white-space: normal !important;
  overflow: visible !important;
  line-height: 18px !important;
}
td.cart_section_title *{
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* =========================================================
   9) Own carrier row
========================================================= */
.own_carrier_row{ text-align:center; white-space: normal; }
.own_carrier_row select,
.own_carrier_row input[type="text"],
.own_carrier_row input[type="radio"]{ vertical-align: middle; }

/* If you wrap remember block with <span class="remember_block"> ... */
.own_carrier_row .remember_block{
  display:inline-block;
  white-space: nowrap;
  margin-left: 10px;
}

/* =========================================================
   10) Shipping select box polish + flex group (A3)
========================================================= */
#shipping_company_select{ border-radius: 10px; overflow-x: auto; }
#shipping_company_select td{ padding-top: 6px; padding-bottom: 6px; white-space: normal; }
#shipping_company_select label{ margin-right: 3px; cursor: pointer; font-weight: 600; }
#shipping_company_select input[type="radio"]{ margin-right: 2px; transform: scale(1.05); }

/* Enable flex only when td has class ship_options */
#shipping_company_select td.ship_options{
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  padding: 12px 12px !important;
  text-align: left !important;
}

/* =========================================================
   11) Mobile padding
========================================================= */
@media (max-width: 860px){
  main.main_out > section.float_right_out > .content_panel.cart_panel{
    padding: 12px 10px 14px 10px;
  }
  main.main_out > section.float_right_out > .content_panel.cart_panel .cart_body{
    padding: 12px 10px 14px 10px;
  }
  .h1_title{ font-size: 19px; }
}




/* =====================================================
   Fix: remove top blank gap caused by #Progress_bar
   Default hide; show only when it has text or loading state
===================================================== */
#Progress_bar{
  display: none;        /* 不占位 */
}

/* 当 JS/ASP 真的要显示时：给它加 .show */
#Progress_bar.show{
  display: block;
  padding: 6px 10px;
}
 
 

.cart_body table.cart_items{
  border-collapse: separate !important;
  border-spacing: 0 10px;  /* 每个条目之间 10px 间距 */
}

/* 每行做成卡片线 */
.cart_body table.cart_items tr{
  background: #fff;
  box-shadow: 0 1px 0 #dcdcdc;
}






/* =====================================================
   Cart – Summary bar (clean + professional)
===================================================== */

.cart_summary_bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  max-width: 980px;
  margin: 10px auto 14px auto;
  padding: 10px 14px;

  background: #ffffff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;

  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #223;
}

/* 让内部所有碎片继承统一字号（避免 legacy 干扰） */
.cart_summary_bar *{
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* 左侧：图标 + 主句 */
.cart_summary_left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* 图标 */
.cart_summary_left i.fa-shopping-cart{
  font-size: 18px !important;
  color: #0a3;
  flex: 0 0 auto;
}

/* 主句文本 */
.cart_summary_text{
  font-weight: 700;
  color: #123;
}

/* 数量强调 */
.cart_summary_bar .cart_count{
  font-weight: 800;
}

/* 右侧说明 */
.cart_summary_right{
  text-align: right;
}

.cart_summary_note{
  font-weight: 400;
  color: #445;
}

/* Remaining 强调 */
.cart_summary_bar .cart_remaining{
  font-weight: 800;
  color: #c00 !important;
}

/* 小屏：自动换行变成上下布局 */
@media (max-width: 860px){
  .cart_summary_bar{
    flex-direction: column;
    align-items: flex-start;
  }
  .cart_summary_right{
    text-align: left;
  }
}