/* ===========================================================
   사은품 - 상품상세 디자인
   설치 위치: /rb/rb.mod/gift/gift.css

   extend/rb_gift.extend.php 가 상품상세(item.php)에서만 이 파일을
   add_stylesheet 로 불러옵니다. data/ 폴더 쓰기권한이 없어도 됩니다.
   색상은 사이트 강조컬러(rb_config.co_color)를 --rb-point 변수로 받아 씁니다.
   =========================================================== */

/* ── 안내 배너 ─────────────────────────────────────────────
   "3개 더 담으시면 사은품을 선택하실 수 있어요"
   "사은품 2개 선택 가능 (1/2 선택함)"
   ───────────────────────────────────────────────────────── */
.rb-gift-guide {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: -0.2px;
}

.rb-gift-guide b {
    font-weight: 700;
}

.rb-gift-guide::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
}

/* 아직 조건 미달 - 차분한 회색 */
.rb-gift-guide.is-off {
    background: #f5f6f8;
    color: #6b7280;
}
.rb-gift-guide.is-off b {
    color: #374151;
}
.rb-gift-guide.is-off::before {
    background-color: #c9ced6;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E");
}

/* 선택 가능 - 브랜드 컬러 */
.rb-gift-guide.is-on {
    background: var(--rb-point-weak, rgba(0, 70, 255, 0.07));
    color: var(--rb-point-dark, #0038CC);
}
.rb-gift-guide.is-on b {
    color: var(--rb-point, #0046FF);
}
.rb-gift-guide.is-on::before {
    background-color: var(--rb-point, #0046FF);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.rb-gift-guide-sub {
    color: #9aa0a6;
    font-size: 12px;
    font-weight: 400;
}


/* ── 선택된 사은품 행 ──────────────────────────────────────
   기존 옵션 행과 같은 틀을 쓰되, 살짝만 구분되게 합니다.
   과하게 칠하면 장바구니 담기 전에 시선이 분산됩니다.
   ───────────────────────────────────────────────────────── */
#sit_sel_option li.rb-gift-li {
    background: var(--rb-point-soft, rgba(0, 70, 255, 0.04));
}

/* 사은품 배지 */
.rb-gift-tag {
    display: inline-block;
    margin-right: 5px;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--rb-point, #0046FF);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    line-height: 17px;
    vertical-align: 1px;
    letter-spacing: -0.2px;
}

/* 수량은 1개 고정이므로 증감 버튼을 감춥니다.
   (값 자체는 JS 와 서버 양쪽에서 1로 고정합니다) */
#sit_sel_option li.rb-gift-li .sit_qty_plus,
#sit_sel_option li.rb-gift-li .sit_qty_minus {
    display: none !important;
}

#sit_sel_option li.rb-gift-li input[name^="ct_qty"] {
    width: 34px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #6b7280;
    text-align: center;
    pointer-events: none;
}

/* "무료" 표기 */
#sit_sel_option li.rb-gift-li .sit_opt_prc {
    color: var(--rb-point, #0046FF);
    font-weight: 700;
}

/* 삭제 버튼은 남겨둡니다 - 고객이 사은품을 바꿀 수 있어야 합니다 */


/* ── 모바일 ───────────────────────────────────────────── */
@media all and (max-width: 768px) {
    .rb-gift-guide {
        margin-top: 8px;
        padding: 10px 12px;
        font-size: 12.5px;
        border-radius: 8px;
    }
    .rb-gift-guide-sub {
        font-size: 11px;
    }
    .rb-gift-tag {
        font-size: 10px;
        padding: 1px 6px;
        line-height: 16px;
    }
}