/* WebX WA Order Tracker — Widget CSS v1.1 (CSS vars driven) */
.twp-wrap,.twp-wrap *{box-sizing:border-box;margin:0;padding:0;}
.twp-wrap{font-family:'Segoe UI',sans-serif;width:100%;margin-top:16px;}

/* Banner */
.twp-banner{background:var(--twp-banner-bg,#1a1a1a);border-radius:10px;overflow:hidden;width:100%;}
.twp-top-bar{background:var(--twp-accent,#e24b4a);padding:7px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.twp-top-bar-left{display:flex;align-items:center;gap:6px;}
.twp-top-dot{width:5px;height:5px;background:#fff;border-radius:50%;opacity:0.8;}
.twp-top-txt{font-size:10px;font-weight:800;color:#fff;letter-spacing:1.5px;text-transform:uppercase;}
.twp-top-brand{font-size:10px;font-weight:700;color:rgba(255,255,255,0.7);letter-spacing:2px;text-transform:uppercase;}
.twp-inner{padding:16px 16px 14px;}
.twp-amount-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.twp-amount{font-size:48px;font-weight:900;color:var(--twp-amt-color,#e24b4a);line-height:1;font-family:'Georgia',serif;}
.twp-amount-info{text-align:right;}
.twp-amount-info strong{display:block;font-size:13px;font-weight:800;color:#fff;line-height:1.3;}
.twp-amount-info span{font-size:11px;color:var(--twp-sub-color,#888);}
.twp-desc{font-size:12px;color:var(--twp-sub-color,#777);line-height:1.65;margin-bottom:12px;}
.twp-desc strong{color:#ccc;}
.twp-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.twp-pill{font-size:10px;color:var(--twp-pill-text,#aaa);border:0.5px solid var(--twp-pill-border,#333);padding:3px 10px;border-radius:20px;}
.twp-btn-row{display:flex;border-radius:6px;overflow:hidden;}
.twp-btn{flex:1;background:var(--twp-accent,#e24b4a);border:none;padding:14px 10px;color:var(--twp-btn-text,#fff);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:filter 0.2s;line-height:1.3;}
.twp-btn:hover{filter:brightness(0.85);}
.twp-ibtn{width:42px;min-width:42px;background:#2e2e2e;border:none;border-left:1px solid #111;color:var(--twp-accent,#f09595);cursor:pointer;font-family:'Georgia',serif;font-size:15px;font-weight:700;font-style:italic;transition:background 0.2s;}
.twp-ibtn:hover{background:#111;}

/* Info box */
.twp-info{background:var(--twp-info-bg,#111);padding:14px 16px;border-top:2px solid var(--twp-info-border,#e24b4a);}
.twp-info-title{font-size:10px;font-weight:700;color:var(--twp-accent,#f09595);margin:0 0 8px;letter-spacing:2px;text-transform:uppercase;}
.twp-info-row{font-size:12px;color:var(--twp-info-text,rgba(255,255,255,0.75));line-height:1.8;padding:4px 0 4px 14px;position:relative;border-bottom:1px solid rgba(255,255,255,0.05);}
.twp-info-row:last-of-type{border-bottom:none;}
.twp-info-dash{position:absolute;left:0;color:var(--twp-accent,#e24b4a);font-weight:700;}
.twp-info-close{margin-top:10px;background:transparent;border:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.6);padding:6px 14px;font-size:10px;cursor:pointer;letter-spacing:1px;text-transform:uppercase;}
.twp-secure{font-size:10px;color:var(--twp-secure-color,#444);text-align:center;padding:8px 0 2px;letter-spacing:0.5px;}

/* Popup header */
.twp-ph{background:var(--twp-ph-bg,#1a1a1a);padding:20px 18px 18px;position:relative;flex-shrink:0;}
.twp-ph-close{position:absolute;top:12px;right:12px;background:rgba(255,255,255,0.1);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
.twp-ph-close:hover{background:rgba(255,255,255,0.2);}
.twp-ph-bar{height:3px;background:var(--twp-ph-bar,#e24b4a);border-radius:2px;margin-bottom:12px;}
.twp-ph-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);padding:3px 10px;border-radius:999px;margin-bottom:8px;}
.twp-ph-badge span{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--twp-badge-color,#f09595);}
.twp-ph-title{font-size:19px;font-weight:900;color:#fff;margin:0 0 4px;line-height:1.2;}
.twp-ph-sub{font-size:12px;color:rgba(255,255,255,0.5);margin:0;line-height:1.5;}
.twp-ph-sub strong{color:var(--twp-badge-color,#f09595);}

/* How it works */
.twp-how{padding:14px 18px;background:var(--twp-how-bg,#f9f9f9);border-bottom:1px solid #eee;flex-shrink:0;}
.twp-how-lbl{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--twp-accent,#a32d2d);margin:0 0 12px;}
.twp-step{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;}
.twp-step:last-child{margin-bottom:0;}
.twp-step-n{width:24px;height:24px;min-width:24px;background:var(--twp-step-num-bg,#e24b4a);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.twp-step-n span{font-size:11px;font-weight:800;color:#fff;}
.twp-step-t{font-size:13px;font-weight:700;color:var(--twp-step-title,#1a1a1a);margin:0 0 2px;}
.twp-step-s{font-size:12px;color:var(--twp-step-sub,#666);margin:0;line-height:1.4;}

/* Form */
.twp-form{padding:16px 18px 0;flex:1;}
.twp-pay-row{display:flex;justify-content:space-between;align-items:center;background:var(--twp-pay-row-bg,#fff3f3);border:1px solid var(--twp-pay-row-border,#f09595);padding:12px 14px;margin-bottom:14px;border-radius:8px;}
.twp-pay-lbl{font-size:13px;font-weight:800;color:#1a1a1a;}
.twp-pay-row-amt{font-size:22px;font-weight:900;color:var(--twp-pay-amt,#e24b4a);font-family:'Georgia',serif;}
.twp-prod-box{background:#f9f9f9;border:1px solid #ddd;padding:9px 12px;margin-bottom:12px;border-radius:8px;}
.twp-prod-lbl{font-size:10px;color:var(--twp-accent,#a32d2d);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin:0 0 2px;}
.twp-prod-name{font-size:13px;color:#1a1a1a;font-weight:600;margin:0;line-height:1.4;}
.twp-flbl{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--twp-label-color,#1a1a1a);display:block;margin-bottom:6px;}
.twp-fwrap{margin-bottom:12px;}
.twp-input{width:100%;background:var(--twp-input-bg,#f9f9f9);border:1px solid var(--twp-input-border,#ddd);border-radius:8px;padding:12px 13px;font-size:14px;color:#1a1a1a;outline:none;transition:border-color 0.15s,background 0.15s;-webkit-appearance:none;}
.twp-input:focus{border-color:var(--twp-accent,#e24b4a);background:#fff;}
.twp-wa-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--twp-wa-btn,#25D366);color:#fff;padding:16px;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;transition:filter 0.2s;margin-bottom:10px;border-radius:8px;border:none;width:100%;cursor:pointer;}
.twp-wa-btn:hover{filter:brightness(0.9);}
.twp-wa-btn:disabled{filter:grayscale(1);cursor:not-allowed;}
.twp-terms{font-size:11px;color:#aaa;text-align:center;margin:0 0 14px;line-height:1.6;}
.twp-terms a{color:var(--twp-accent,#e24b4a);font-weight:600;text-decoration:none;}

/* Popup footer */
.twp-pf{background:var(--twp-footer-bg,#1a1a1a);padding:12px 18px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap;flex-shrink:0;}
.twp-pf span{font-size:11px;color:var(--twp-footer-text,rgba(255,255,255,0.45));}