@charset "utf-8";
/* ============================================================
 * 「推薦有禮」頁樣式  2026-10-02
 * 由 Web/Tpl/default/Web/Coupon/invite.html 引入
 * 客戶《集運問題總結 1.1》第 3 條：「我要使用」按鈕改為「推薦有禮」，
 * 點擊後直接看推廣碼 —— 本頁就是那個頁面。
 * 設計：紅金色系（與活動券頁一致）＋卡片式，PC/手機共用同一份
 * ============================================================ */
.jvi{max-width:1080px;width:100%;margin:0 auto 40px;padding:0 12px;
	box-sizing:border-box;text-align:left;color:#3a2a24;
	font-family:"Microsoft JhengHei","PingFang TC","Heiti TC","Noto Sans TC",Arial,sans-serif;}
.jvi a{text-decoration:none;}

/* ------------------------------- 主視覺 */
.jvi_hero{position:relative;margin-top:14px;border-radius:16px;overflow:hidden;
	background:linear-gradient(120deg,#8a0a05 0%,#c01b13 48%,#ef5a24 100%);
	box-shadow:0 10px 26px rgba(160,20,10,.28);}
.jvi_hero_in{position:relative;z-index:2;padding:34px 28px 30px;}
.jvi_tag{display:inline-block;padding:6px 14px;border-radius:20px;font-size:14px;
	background:rgba(255,255,255,.16);border:1px solid rgba(255,220,150,.55);
	color:#ffe6a8;letter-spacing:1px;}
.jvi_tag i{display:inline-block;width:8px;height:8px;border-radius:50%;
	background:#ffd466;margin-right:8px;vertical-align:middle;}
.jvi_h1{margin:16px 0 0;color:#fff;font-size:44px;line-height:1.18;font-weight:900;letter-spacing:2px;
	text-shadow:0 3px 0 rgba(120,4,10,.5),0 10px 24px rgba(90,3,8,.35);}
.jvi_h1 small{display:block;margin-top:10px;font-size:18px;font-weight:normal;
	letter-spacing:1px;color:#ffe6a8;text-shadow:none;}
.jvi_award{margin-top:18px;display:inline-block;padding:12px 20px;border-radius:12px;
	background:rgba(255,255,255,.14);border:1px dashed rgba(255,220,150,.7);color:#fff;}
.jvi_award_l{font-size:14px;color:#ffe6a8;margin-right:10px;}
.jvi_award b{font-size:30px;color:#fff3c4;letter-spacing:1px;
	text-shadow:0 2px 0 rgba(120,4,10,.5);vertical-align:-2px;}
.jvi_award_r{display:block;margin-top:6px;font-size:13px;color:#ffeed6;opacity:.95;}
.jvi_hero_btns{margin-top:22px;}
.jvi_btn,.jvi_btn2{display:inline-block;padding:14px 36px;border-radius:32px;
	font-size:18px;font-weight:bold;cursor:pointer;margin:0 12px 10px 0;
	transition:transform .15s ease,box-shadow .15s ease;}
.jvi_btn{color:#b3121a;background:linear-gradient(180deg,#fffdf2,#ffd977 55%,#f0a81e);
	box-shadow:0 6px 0 #c9820f,0 12px 22px rgba(120,60,0,.3),inset 0 2px 0 rgba(255,255,255,.9);}
.jvi_btn:hover{transform:translateY(-2px);}
.jvi_btn2{color:#fff;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.7);}
.jvi_btn2:hover{background:rgba(255,255,255,.2);}

/* ------------------------------- 卡片區 */
.jvi_sec{margin-top:22px;padding:22px 24px 24px;background:#fff;border:1px solid #f2e6df;
	border-radius:14px;box-shadow:0 2px 10px rgba(120,90,70,.06);}
.jvi_sec h2{margin:0 0 16px;font-size:22px;font-weight:bold;color:#c2181f;
	border-left:5px solid #f0a81e;padding-left:12px;line-height:1.3;}
.jvi_sec h2 em{font-style:normal;font-size:13px;color:#a08d83;font-weight:normal;margin-left:10px;}
.jvi_sec p{margin:8px 0;font-size:15px;line-height:1.85;color:#5b4a42;}

/* 我的推廣碼 */
.jvi_code_box{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:12px;
	background:linear-gradient(120deg,#fff8ec,#ffeccb);border:1px dashed #e8b96a;}
.jvi_code_l{font-size:14px;color:#a06a1e;white-space:nowrap;}
.jvi_code_r{flex:1 1 auto;min-width:0;}
.jvi_code_r b{font-size:30px;letter-spacing:3px;color:#c2181f;word-break:break-all;}
.jvi_code_tip,.jvi_code_tip2{margin-top:10px !important;font-size:14px;color:#7a6a60;line-height:1.8;}
.jvi_link_row{display:flex;gap:10px;margin-top:12px;}
.jvi_link_row input{flex:1 1 auto;min-width:0;height:42px;line-height:42px;padding:0 12px;
	border:1px solid #e2d5cd;border-radius:8px;font-size:14px;color:#5b4a42;background:#fffdfa;}
.jvi_copy{flex:0 0 auto;height:42px;padding:0 20px;border:0;border-radius:8px;
	background:linear-gradient(180deg,#ff8b6f,#e8402c);color:#fff;font-size:14px;font-weight:bold;
	cursor:pointer;box-shadow:0 3px 0 #b71d10;}
.jvi_copy:active{transform:translateY(2px);box-shadow:0 1px 0 #b71d10;}
.jvi_sec_logout{background:linear-gradient(120deg,#fff6f4,#fffdf8);}
.jvi_logout_btns{margin-top:14px;}
.jvi_sec_logout .jvi_btn{color:#b3121a;}
.jvi_sec_logout .jvi_btn2{color:#c2181f;background:#fff;border:2px solid #f0a81e;}

/* 參與方式 */
.jvi_steps{display:flex;flex-wrap:wrap;gap:14px;}
.jvi_step{flex:1 1 30%;min-width:240px;padding:16px 18px;border-radius:12px;
	background:#fffaf4;border:1px solid #f6e7d6;}
.jvi_step_no{display:inline-block;margin-bottom:8px;padding:3px 12px;border-radius:14px;
	background:linear-gradient(180deg,#ffd977,#f0a81e);color:#8a3b00;font-size:13px;font-weight:bold;}
.jvi_step b{display:block;font-size:17px;color:#c2181f;margin-bottom:6px;}
.jvi_step_txt{font-size:14px;line-height:1.8;color:#5b4a42;}

/* 注意事項 */
.jvi_ul{margin:0;padding:0;list-style:none;}
.jvi_ul li{position:relative;padding:7px 0 7px 20px;font-size:14.5px;line-height:1.8;color:#5b4a42;}
.jvi_ul li::before{content:"";position:absolute;left:2px;top:16px;width:8px;height:8px;
	border-radius:50%;background:#f0a81e;}
.jvi_ul li b{color:#c2181f;}

/* 底部 CTA */
.jvi_cta{margin-top:22px;padding:26px 24px;border-radius:14px;text-align:center;
	background:linear-gradient(120deg,#fff3e4,#ffe3cf);border:1px solid #f4ddc7;}
.jvi_cta h2{margin:0 0 6px;font-size:24px;color:#c2181f;}
.jvi_cta p{margin:0 0 16px;font-size:15px;color:#7a6a60;}
.jvi_cta .jvi_btn2{color:#c2181f;background:#fff;border:2px solid #f0a81e;}

/* ------------------------------- 手機 */
@media (max-width:640px){
	.jvi{padding:0 10px;}
	.jvi_hero{border-radius:12px;}
	.jvi_hero_in{padding:24px 18px 22px;}
	.jvi_h1{font-size:28px;letter-spacing:1px;}
	.jvi_h1 small{font-size:14px;}
	.jvi_award b{font-size:24px;}
	.jvi_btn,.jvi_btn2{padding:12px 22px;font-size:16px;margin-right:8px;}
	.jvi_sec{padding:16px 16px 18px;}
	.jvi_sec h2{font-size:19px;}
	.jvi_code_box{display:block;}
	.jvi_code_r b{font-size:24px;}
	.jvi_link_row{display:block;}
	.jvi_link_row input{width:100%;box-sizing:border-box;}
	.jvi_copy{width:100%;margin-top:10px;}
	.jvi_step{flex:1 1 100%;min-width:0;}
}