/* --- Shaka Manta 深海聚寶盆 — Frontend Styles v1.1.2 --- */

:root {
    --sm-dark:  #3e3028;
    --sm-cream: #f5e6d3;
    --sm-teal:  #4a90a2;
    --sm-gold:  #c9a84c;
    --sm-green: #2ecc71;
}

/* --- Rule A ------------------------------------------------ */
.sm-rule-a-notice {
    margin-top: 16px;
    padding: 0;
    background: none;
    border: none;
    display: block;
}
.sm-rule-a-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px 11px 14px;
    background: linear-gradient(135deg, #0f1c35 0%, #1a2744 60%, #0d1829 100%);
    border: none;
    border-left: 4px solid var(--sm-gold);
    border-radius: 8px;
    color: var(--sm-cream);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: filter .2s, transform .15s;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
/* 波光反射 */
.sm-rule-a-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%);
    pointer-events: none;
}
/* 魚 emoji 前綴 */
.sm-rule-a-link::after {
    content: '🐡';
    font-size: 18px;
    flex-shrink: 0;
    order: -1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.sm-rule-a-link span {
    flex: 1;
}
/* 箭頭 */
.sm-rule-a-link .sm-rule-a-arrow {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: var(--sm-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #1e3a42;
    font-style: normal;
    transition: transform .2s;
}
.sm-rule-a-link:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    color: var(--sm-cream);
    text-decoration: none;
}
.sm-rule-a-link:hover .sm-rule-a-arrow {
    transform: translateX(3px);
}

/* --- Rule B 核心區塊 --------------------------------------- */
.sm-rule-b-notice {
    background: var(--sm-dark);
    border: 1px dashed var(--sm-cream);
    border-radius: 8px;
    padding: 14px 16px;
    color: var(--sm-cream);
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}
/* 明確覆蓋主題預設的 margin-bottom: 34px */
.sm-rule-b-notice p {
    margin: 8px 0 8px !important;
    font-size: 15px;
    color: var(--sm-cream);
}
.sm-rule-b-notice--reached { border-color: var(--sm-green); }
.sm-rule-b-notice--reached p {
    color: var(--sm-green);
    font-weight: 700;
    margin: 8px 0 8px !important;
}

/* Progress bar */
.sm-rule-b-progress {
    height: 8px;
    background: rgba(255,255,255,.15);
    border-radius: 4px;
    overflow: hidden;
}
.sm-rule-b-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--sm-teal), var(--sm-gold));
    border-radius: 4px;
    transition: width .5s ease;
    min-width: 4px;
}
.sm-rule-b-notice--reached .sm-rule-b-bar { background: var(--sm-green); }

/* --- Rule B — Side Cart（JS 注入）------------------------- */
.sm-rule-b-wrapper {
    padding: 0 14px;
    /* 下方空間讓按鈕不被擠掉 */
    margin-bottom: 12px;
}
.sm-rule-b-wrapper .sm-rule-b-notice {
    margin: 10px 0 0;
}

/* --- Rule B — 購物車頁面（放在總計標題上方）--------------- */
.sm-rule-b-cart-page {
    margin: 0 0 20px;   /* 上方不需要，下方與「購物車總計」標題保持距離 */
}
.sm-rule-b-cart-page .sm-rule-b-notice {
    font-size: 16px;
    padding: 18px 20px;
}
.sm-rule-b-cart-page .sm-rule-b-notice p {
    font-size: 16px;
    margin: 8px 0 8px !important;
}

/* --- Rule B — 結帳頁 --------------------------------------- */
.sm-rule-b-checkout {
    margin-bottom: 20px;
}
.sm-rule-b-checkout .sm-rule-b-notice {
    font-size: 15px;
    padding: 14px 18px;
}

/* --- Rule C: Order Bump ------------------------------------ */
/* wrapper = 視覺 card，確保 nav 和 bumps 都在同一個框內 */
.sm-order-bump-wrapper {
    width: 100%;
    margin-bottom: 20px;   /* 與規則 B 的間距 */
    background: var(--sm-dark);
    border: 1px dashed var(--sm-cream);
    border-radius: 8px;
    padding: 16px;
    color: var(--sm-cream);
}
.sm-order-bump { /* 輪播單張，不加額外 box 樣式 */ }
.sm-order-bump__inner {
    display: flex;
    align-items: flex-start;   /* 圖片與文字都靠頂對齊 */
    gap: 14px;
}
.sm-order-bump__img {
    width: 160px !important;   /* 加 !important 防 theme 的 img { height:auto } 覆蓋 */
    height: 160px !important;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    display: block;
}
.sm-order-bump__content { flex: 1 1 0; min-width: 0; }
.sm-order-bump__text {
    font-size: 13px; color: var(--sm-gold);
    font-weight: 600;
    letter-spacing: .03em; margin: 0 0 2px !important;
}
.sm-order-bump__name  { font-size: 16px; font-weight: 700; color: var(--sm-cream); margin: 0 0 5px !important; }
.sm-order-bump__price { margin: 0 !important; font-size: 16px; color: var(--sm-teal); font-weight: 700; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sm-order-bump__price .woocommerce-Price-amount { color: inherit; }
/* 劃掉的原價 */
.sm-order-bump__price del,
.sm-order-bump__price del .woocommerce-Price-amount { color: rgba(245,230,211,.4); font-weight: 400; }
.sm-order-bump__price ins { text-decoration: none; color: var(--sm-teal); font-weight: 700; }
.sm-order-bump__price ins .woocommerce-Price-amount { color: inherit; }
/* button 現在在 content 內部，用 margin-top 控距 */
.sm-order-bump__action { margin-top: 12px; }

.sm-bump-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 18px; border-radius: 6px;
    font-size: 14px; font-weight: 700;
    cursor: pointer; border: none;
    transition: background .2s, opacity .2s, transform .1s;
    white-space: nowrap;
}
.sm-bump-btn--add { background: var(--sm-teal); color: #fff; }
.sm-bump-btn--add:hover:not(:disabled) { background: #3a7a8e; }
.sm-bump-btn--add:active:not(:disabled) { transform: scale(.96); }
.sm-bump-btn--add:disabled { opacity: .6; cursor: default; }
.sm-bump-btn--added {
    background: rgba(46,204,113,.15); color: var(--sm-green);
    border: 1px solid var(--sm-green); cursor: default;
}

/* --- Rule C: 多張輪播導覽 ---------------------------------- */
.sm-bump-carousel__nav {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-top: 10px;
}
.sm-bump-carousel__btn {
    background: none;
    border: none;
    color: rgba(245,230,211,.4);
    padding: 0 4px;
    cursor: pointer;
    font-size: 24px; line-height: 1;
    transition: color .2s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.sm-bump-carousel__btn:hover { color: var(--sm-cream); }
@media (max-width: 480px) {
    /* 手機沒有 hover，箭頭常態稍亮 */
    .sm-bump-carousel__btn { color: rgba(245,230,211,.6); }
}
.sm-bump-carousel__dots { display: flex; gap: 5px; align-items: center; }
.sm-bump-carousel__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(245,230,211,.25);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.sm-bump-carousel__dot.active { background: var(--sm-gold); transform: scale(1.3); }

/* --- Responsive -------------------------------------------- */
@media (max-width: 480px) {
    .sm-order-bump__inner  { flex-direction: column; gap: 0; align-items: stretch; }
    .sm-order-bump__img    { width: 100% !important; height: 200px !important; border-radius: 4px; }
    .sm-order-bump__content { padding-top: 12px; }
    /* 手機：button 與 price 靠近，按鈕全寬固定 */
    .sm-order-bump__action { margin-top: 8px; width: 100%; }
    .sm-bump-btn           { width: 100%; display: flex; }
    /* 手機字型 */
    .sm-order-bump__text   { font-size: 13px; margin: 0 0 2px !important; }
    .sm-order-bump__name   { font-size: 17px; margin: 0 0 5px !important; }
    .sm-order-bump__price  { font-size: 17px; }
    .sm-rule-b-notice      { font-size: 14px; padding: 12px 14px; }
    .sm-rule-b-notice p    { font-size: 14px; }
}