/* public/assets/vx/voucher-show.css */

/* ===== layout ===== */
.vx-wrap{padding:10px 0 16px;}
.vx-shell{
  border:1px solid rgba(148,163,184,.18);
  background:rgb(255, 255, 255);
  border-radius:18px;
  padding:18px;
  box-shadow:0 18px 55px rgb(255, 255, 255);
}
.vx-breadcrumbs{margin-bottom:14px;font-size:14px;opacity:.9;display:flex;gap:10px;flex-wrap:wrap;}
.vx-bc-sep{opacity:.55;}

/* grid */
.vx-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:start;}
@media (min-width: 980px){ .vx-grid{grid-template-columns: 1.55fr .95fr;} }

/* cards */
.vx-card{
  border:1px solid rgba(0, 0, 0, 0.345);
  background:rgb(255, 255, 255);
  border-radius:4px;
}
.vx-soft{padding:16px;}
.vx-title{font-size:30px;line-height:1.15;color:#000000;font-weight:600;margin:0;word-break:break-word;}

/* main cards go left on desktop */
@media (min-width: 980px){
  .vx-main{grid-column:1;}
  .vx-ordercard{
    grid-column:2;
    grid-row:1 / span 30;
    position: sticky;
    top: 12px;
  }
}

/* ===== header ===== */
.vx-head{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
.vx-img{
  width:112px;height:112px;border-radius:18px;overflow:hidden;flex:0 0 auto;
  border:1px solid rgba(148,163,184,.16);background: rgba(2,6,23,.35);
  display:grid;place-items:center;
}
.vx-img img{width:100%;height:100%;object-fit:cover;display:block;}
.vx-img .vx-ph{font-size:26px;opacity:.9;}

.vx-meta{margin-top:6px;color:#ff4d00;font-size:13px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.vx-stars{color:#fbbf24;letter-spacing:1px;font-weight:900;}
.vx-dot{opacity:.55;}

/* trust badges */
.vx-badges{margin-top:10px;display:flex;gap:4px;flex-wrap:wrap;align-items:center;}
.vx-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:2px 4px;border-radius:4px;
  border:1px solid rgba(0, 0, 0, 0.557);
  background: rgba(247, 194, 194, 0.331);
  color:#000000;font-weight:300;font-size:12px;
}
.vx-ico{
  width:24px;height:24px;border-radius:999px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgb(255, 255, 255);
  font-weight:1000;
}
.vx-ico.green{background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.40), rgba(2,6,23,.20));}
.vx-ico.blue{background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.40), rgba(2,6,23,.20));}

.vx-pillrow{margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;}
.vx-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:2px 6px;border-radius:4px;
  border:1px solid rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.737);
  color:#000000;font-weight:500;font-size:13px;
}
.vx-pill strong{color:#009dff;font-weight:600;}

/* ===== sections ===== */
.vx-h2{color:#000000;font-size:16px;font-weight:800;margin:0;}
.vx-box{
  margin-top:10px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:14px;
  padding:14px;
  background: rgb(255, 255, 255);
  color:#000000;
  font-size:13px;
  line-height:1.7;
  word-break:break-word;
}

/* ===== order card ===== */
.vx-order{padding:16px;}
.vx-order h3{margin:0 0 6px;color:#000000;font-size:18px;font-weight:600;}
.vx-help{color:#000000;font-size:12.5px;line-height:1.6;margin:0 0 12px; display:none !important;}
.vx-label{display:block;color:#000000;font-size:12.5px;font-weight:1000;margin:12px 0 6px;}
.vx-input{
  width:90%;padding:12px 14px;border-radius:4px;
  border:1px solid rgba(0, 0, 0, 0.434);
  background: rgba(2, 6, 23, 0.126);
  color:#000000;outline:none;
}

/* BuyType */
.vx-buytype{display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:#000000;font-weight:1000;}
.vx-buyopt{display:flex;gap:8px;align-items:center;cursor:pointer;white-space:nowrap;}

.vx-qtyrow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.vx-max{
    color: #000000;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: -px;
    width: 10%;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.434);
    background: rgba(2, 6, 23, 0.126);
    color: #000000;
    outline: none;
}
.vx-max span{color:#000000;}

/* Payment list */
.vx-paylist{display:flex;flex-direction:column;gap:12px;}
.vx-paywrap{position:relative;}
.vx-payinput{position:absolute;opacity:0;pointer-events:none;}

.vx-paylabel{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(2,6,23,.20));
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  cursor:pointer;
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.vx-paylabel:hover{transform: translateY(-1px);}

.vx-rdot{
  width:14px;height:14px;border-radius:999px;flex:0 0 auto;
  border:2px solid rgba(226,232,240,.35);
  background: transparent;
  box-shadow: 0 0 0 4px rgba(0,0,0,.10);
}

.vx-paylogo{
  width:44px;height:44px;border-radius:999px;flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.92);
  overflow:hidden;
}
.vx-paylogo img{width:70%;height:70%;object-fit:contain;display:block;}
.vx-paylogo--esewa{box-shadow: 0 0 0 2px rgba(34,197,94,.18);}
.vx-paylogo--khalti{box-shadow: 0 0 0 2px rgba(168,85,247,.18);}
.vx-paylogo--fonepay{box-shadow: 0 0 0 2px rgba(239,68,68,.18);}

.vx-paytext{min-width:0;display:flex;flex-direction:column;gap:2px;}
.vx-payname{color:#f8fafc;font-weight:1000;font-size:14px;line-height:1.1;}
.vx-paysub{color:#94a3b8;font-size:12px;line-height:1.2;}

.vx-paycheck{
  margin-left:auto;
  width:28px;height:28px;border-radius:999px;flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid rgba(148,163,184,.35);
  background: rgba(2,6,23,.20);
  color:#fff;
  opacity:0;
  transform: scale(.96);
  transition: opacity .12s ease, transform .12s ease;
}

.vx-payinput:checked + .vx-paylabel{
  border:2px solid rgba(239,68,68,.85);
  box-shadow: 0 0 0 3px rgba(239,68,68,.12), 0 18px 55px rgba(0,0,0,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(2,6,23,.22));
}
.vx-payinput:checked + .vx-paylabel .vx-rdot{
  border-color: rgba(239,68,68,.95);
  background: rgba(239,68,68,.95);
  box-shadow: 0 0 0 4px rgba(239,68,68,.14);
}
.vx-payinput:checked + .vx-paylabel .vx-paycheck{
  opacity:1;
  transform: scale(1);
  border-color: rgba(239,68,68,.60);
  background: rgba(239,68,68,.20);
}

/* totals + button */
.vx-total{margin-top:4px;color:#000000;font-size:13px;}
.vx-total strong{color:#000000;font-size:18px;}
.vx-btn{
  width:100%;margin-top:12px;
  border:0;border-radius:16px;
  padding:13px 16px;font-weight:1000;font-size:14px;
  cursor:pointer;color:#000000;
  background: linear-gradient(135deg, rgba(249,115,22,.55), rgba(168,85,247,.55));
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}
.vx-btn:disabled{opacity:.55;cursor:not-allowed;}

/* review stars input */
.vx-star-input{display:inline-flex;flex-direction:row-reverse;gap:6px;}
.vx-star-input input{display:none;}
.vx-star-input label{
  cursor:pointer;
  font-size:20px;
  color: rgba(148,163,184,.55);
  transition: color .12s ease;
}
.vx-star-input input:checked ~ label,
.vx-star-input label:hover,
.vx-star-input label:hover ~ label{
  color:#fbbf24;
}

.vx-flash{margin-bottom:12px;border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.6;}
.vx-flash.ok{border:1px solid rgba(34,197,94,.35);background: rgba(34,197,94,.08);color:#d1fae5;}
.vx-flash.err{border:1px solid rgba(239,68,68,.35);background: rgba(239,68,68,.08);color:#fee2e2;}

.vx-review-item{padding:12px 0;border-top:1px solid rgba(148,163,184,.12);}
.vx-review-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.vx-review-name{color:#000000;font-weight:1000;font-size:13px;}
.vx-review-time{color:#000000;font-size:12px;}
.vx-review-stars{color:#fbbf24;letter-spacing:1px;font-weight:900;font-size:12px;}
.vx-review-text{margin-top:6px;color:#000000;font-size:13px;line-height:1.7;white-space:pre-wrap;word-break:break-word;}

/* messages */
.vx-msg{margin-top:10px;border-radius:14px;padding:10px 12px;font-size:12.5px;line-height:1.55;display:none;}
.vx-msg.ok{border:1px solid rgba(34,197,94,.35);background: rgba(34,197,94,.08);color:#d1fae5;display:block;}
.vx-msg.err{border:1px solid rgba(239,68,68,.35);background: rgba(239,68,68,.08);color:#fee2e2;display:block;}
.vx-msg.info{border:1px solid rgba(59,130,246,.30);background: rgba(59,130,246,.08);color:#dbeafe;display:block;}

/* ===== MOBILE UX improvements ===== */
@media (max-width: 520px){
  .vx-shell{padding:14px;border-radius:16px;}
  .vx-soft{padding:14px;}
  .vx-title{font-size:24px;}
  .vx-head{flex-wrap:nowrap;}
  .vx-img{width:92px;height:92px;border-radius:16px;}
}

/* Mobile sticky bottom bar */
.vx-stickybar{display:none;}
@media (max-width: 980px){
  .vx-wrap{padding-bottom:86px;}
  .vx-stickybar{
    position:fixed;left:0;right:0;bottom:0;z-index:999;
    display:block;
    padding:10px 12px;
    background: rgba(2,6,23,.82);
    border-top:1px solid rgba(148,163,184,.18);
    backdrop-filter: blur(10px);
  }
  .vx-stickyinner{
    max-width:1100px;
    margin:0 auto;
    display:flex;
    gap:10px;
    align-items:center;
  }
  .vx-stickyTotal{
    flex:1;min-width:0;
    color:#cbd5f5;font-size:12px;line-height:1.2;
  }
  .vx-stickyTotal strong{
    display:block;
    color:#f8fafc;
    font-size:18px;
    margin-top:3px;
  }
  .vx-stickybtn{
    flex:0 0 auto;
    border:0;border-radius:16px;
    padding:12px 14px;
    font-weight:1000;
    font-size:14px;
    cursor:pointer;
    color:#000000;
    background: linear-gradient(135deg, rgba(249,115,22,.62), rgba(168,85,247,.62));
    box-shadow: 0 18px 45px rgba(0,0,0,.25);
    min-width:150px;
  }
  .vx-stickybtn:disabled{opacity:.55;cursor:not-allowed;}
}

/* ===== FIX: badges horizontal on MOBILE ===== */
@media (max-width: 520px){
  .vx-badges{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding-bottom: 2px;
  }
  .vx-badges::-webkit-scrollbar{ height: 0; }
  .vx-badge{ flex: 0 0 auto; }
   .vx-badge{
    font-size: 12px;          /* 🔧 text size (change this) */
    padding: 6px 10px;        /* 🔧 badge padding (change this) */
    gap: 8px;                 /* 🔧 icon-text gap */
  }

  .vx-ico{
    width: 20px;              /* 🔧 icon circle size */
    height: 20px;
    font-size: 12px;          /* 🔧 emoji/text size inside circle */
    line-height: 1;
  }

}

/* ===== FIX: Buy Type horizontal on DESKTOP ===== */
@media (min-width: 980px){
  .vx-buytype{
    flex-wrap: nowrap !important;
    gap: 18px;
  }
  .vx-buyopt{ flex: 0 0 auto; }

}