/* WebX Reviews Suite - v11 CSS (hero + modal + improved upload UI) */
.webx-review-hero{padding:36px 0;border-top:0;border-bottom:0;background:transparent;}
.webx-review-hero-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 18px;box-sizing:border-box;}
.webx-hero-left{display:flex;flex-direction:column;gap:8px;}
.webx-hero-title{font-size:28px;font-weight:600;margin:0;color:#111;}
.webx-hero-stars{display:flex;align-items:center;gap:14px;}
.webx-stars-display{color:#0b8f6b;font-size:20px;letter-spacing:4px}
.webx-hero-sub{font-size:14px;color:#666;}
.webx-hero-right{display:flex;align-items:center;justify-content:flex-end;}
.webx-hero-btn{background:#0b8f6b;color:#fff;padding:12px 22px;border-radius:6px;border:none;cursor:pointer;font-weight:700;font-size:15px;box-shadow:0 6px 18px rgba(11,143,107,0.12);}

/* modal basics */
.webx-modal{position:fixed;left:0;top:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:99999;padding:20px;}
.webx-modal-inner{background:#fff;border-radius:10px;max-width:720px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.35);padding:28px;position:relative;transform:none;}
.webx-modal-close{position:absolute;right:12px;top:8px;border:none;background:transparent;font-size:26px;cursor:pointer;}
.webx-modal h2{margin:0 0 8px;font-size:20px;text-align:center;}
.webx-stars-select{display:flex!important;justify-content:center!important;align-items:center!important;gap:18px!important;flex-wrap:wrap!important;margin:10px 0 6px 0!important;width:100%!important;box-sizing:border-box!important;padding:0 8px!important;}
.webx-stars-select .star{font-size:36px!important;line-height:1!important;background:transparent!important;border:none!important;cursor:pointer!important;color:#bfbfbf!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:6px 8px!important;transition:transform .12s ease,color .12s ease!important;}
.webx-stars-select .star.active{color:#0b8f6b!important;transform:translateY(-2px) scale(1.03)!important;}
.webx-step-actions{display:flex!important;justify-content:flex-start!important;gap:10px!important;margin-top:14px!important;}
.webx-btn{background:#0b8f6b;color:#fff;padding:10px 14px;border-radius:6px;border:none;cursor:pointer;font-weight:700;}
#webx-review-comment{width:100%;min-height:110px;padding:12px;border:1px solid #e6e6e6;border-radius:6px;box-sizing:border-box;}
#webx-uploaded-photos{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
#webx-uploaded-photos img{width:72px;height:72px;object-fit:cover;border:1px solid #eee;border-radius:6px;}
/* improved upload box */
.webx-photo-upload-box{border:2px dashed #0b8f6b;padding:20px;border-radius:12px;text-align:center;cursor:pointer;transition:0.18s ease;background:#f9fffc;}
.webx-photo-upload-box:hover{background:#e9fff4;border-color:#087c5c;}
.webx-upload-label{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;}
.webx-upload-icon{font-size:36px;margin-bottom:6px;}
.webx-upload-text{font-size:15px;font-weight:700;color:#0b8f6b;}
.webx-upload-sub{font-size:12px;color:#666;}
#webx-photo-preview{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.webx-preview-thumb{width:80px;height:80px;border-radius:6px;object-fit:cover;border:1px solid #ddd;}
/* progress bar */
.webx-progress-bar{background:#f1f1f1;border-radius:8px;overflow:hidden;height:10px;width:100%;}
.webx-progress-fill{background:#0b8f6b;height:100%;width:0%;transition:width .2s ease;}
.webx-progress-text{font-size:13px;color:#333;}
.webx-modal-footer{margin-top:12px;text-align:center;font-size:13px;color:#666;}

/* responsive */
@media (max-width:880px){
  .webx-review-hero-inner{flex-direction:column;align-items:center;text-align:center;padding:18px;}
  .webx-hero-right{width:100%;margin-top:12px;}
  .webx-hero-btn{width:220px;max-width:100%;}
  .webx-hero-title{font-size:22px;}
  .webx-modal-inner{max-width:96%;padding:18px;}
  .webx-stars-select .star{font-size:32px!important;}
}