/* ================= ROOT ================= */

:root {
  --bg-main: #071a14;
  --bg-card: #0f2d23;
  --accent: #2ecc71;
  --accent-dark: #1f8f5f;
  --text-main: #e8f5ef;
  --text-muted: #9fb8ad;
}

/* ================= BASE ================= */

html { font-size: 16px; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 20% 20%, rgba(46,204,113,0.05), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(46,204,113,0.05), transparent 40%),
    var(--bg-main);
  color: var(--text-main);
}

.header{
  text-align:center;
  margin:25px;
}

.header h2{
  margin-bottom:6px;
}

.header p{
  opacity:0.8;
}

/* PREMIUM BACK BUTTON */

.back-btn {
  display: inline-flex;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: white;
  font-size: 11px;
  cursor: pointer;
  transition: 0.25s ease;
}

.back-btn:hover {
  background: rgba(255,255,255,0.15);
  transform: translateY(-1px);
}

/* ================= LAYOUT ================= */

.container {
  max-width: 420px;
  margin: auto;
  padding: 10px 20px 120px;
  padding-bottom: 20px;
  box-sizing: border-box;
  overflow: visible;
  text-align: center auto;
}

#app {
  padding: 0;
}

.footer {
  text-align: center;
  padding: 40px 0;
  opacity: 0.6;
}

/* ================= PRODUCT ================= */

.product-card {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: 0.2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

.product-card img {
  width: 100%;
  height: 220px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
}

.price {
  font-weight: 600;
  margin-top: 6px;
  color: var(--accent);
}

.product-img {
  width: 100%;
  border-radius: 20px;
  margin: 20px 0;
}

.product-footer {
  position: sticky;
  margin-top: 30px;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* ================= OPTIONS ================= */

.option-group {
  display: grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.option-btn {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: var(--text-main);
  cursor: pointer;
  font-size: 14px;
  transition: 0.2s;
}

.option-btn{

  height:40px;
  border-radius:12px;

  border:1px solid rgba(255,255,255,0.2);

  background:rgba(255,255,255,0.04);
  color:white;

  font-weight:500;
  font-size:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:0.2s;

}

.option-btn:hover {
  border-color: var(--accent);
}

.option-btn.active {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

/* ================= QUANTITY ================= */

.qty-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,0.08);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.qty-btn:hover {
  background: rgba(255,255,255,0.2);
}

/* ================= INPUT ================= */

.input,
textarea.input {
  width: 90%;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(135deg, #133a2d, #0f2d23);
  color: #fff;
  font-size: 15px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  outline: none;
  transition: 0.25s ease;
  margin-bottom: 10px;
}

.input::placeholder,
textarea.input::placeholder {
  color: rgba(255,255,255,0.45);
}

.input:focus,
textarea.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46,204,113,0.25);
}

textarea.input {
  min-height: 110px;
  resize: none;
}

input,
textarea {
  color: #fff !important;
}

input:focus,
textarea:focus {
  background: linear-gradient(135deg, #133a2d, #0f2d23) !important;
  color: #fff !important;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #133a2d inset !important;
  -webkit-text-fill-color: #fff !important;
}

/* ================= BUTTON SYSTEM ================= */

.btn {
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: 0.25s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: #fff;
  box-shadow: 0 6px 18px rgba(46,204,113,0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
}

.btn-outline:hover {
  background: var(--accent);
  color: var(--bg-main);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ================= DELIVERY ================= */

.delivery-card {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  transition: 0.25s ease;
  margin-bottom: 12px;
}

.delivery-card:hover {
  background: rgba(255,255,255,0.1);
}

.delivery-card.active {
  border: 1px solid var(--accent);
  background: rgba(46,204,113,0.15);
}

/* ================= SUMMARY ================= */

.summary-box {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
}

.summary-box div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.summary-box div:last-child {
  font-weight: 700;
  font-size: 16px;
}

/* ================= CART DRAWER ================= */

/* ================= CART DRAWER ================= */

.cart-drawer{
position:fixed;
left:0;
right:0;
bottom:0;
max-height:80vh;
background:linear-gradient(135deg,#0f2d23,#133a2d);
border-radius:18px 18px 0 0;
transform:translateY(100%);
transition:transform .35s ease;
z-index:20;
display:flex;
flex-direction:column;
}

.cart-drawer.open{
transform:translateY(0);
}

.drawer-header{
padding:18px;
font-weight:600;
display:flex;
justify-content:space-between;
border-bottom:1px solid rgba(255,255,255,.08);
}

.drawer-body{
padding:18px;
display:flex;
flex-direction:column;
gap:18px;
overflow:auto;
}

.drawer-overlay{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background: rgba(0,0,0,0.4);

opacity: 0;
pointer-events: none;
transition: 0.2s;

z-index: 5;
}

.drawer-overlay.show{
opacity: 1;
pointer-events: auto;
}

.drawer-footer{
padding:18px;
display:flex;
flex-direction:column;
gap:14px;
border-top:1px solid rgba(255,255,255,.08);
}

.drawer-grand{
display:flex;
justify-content:space-between;
font-weight:600;
font-size:15px;
}

.drawer-footer .btn{
width:100%;
padding:14px;
border-radius:10px;
font-weight:600;
}

.cart-bar{
position:fixed;
bottom:0;
left:0;
right:0;
height:52px;
padding:0 18px;
display:flex;
align-items:center;
justify-content:space-between;
background:linear-gradient(90deg,#0f2d23,#133a2d);
box-shadow:0 -8px 20px rgba(0,0,0,.35);
z-index:1000;
font-weight:600;
color:white;
}

.cart-drawer.open{
  transform: translateY(0);
}

.cart-item {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.cart-detail {
  font-size: 13px;
  opacity: 0.7;
}

.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  margin-top: 8px;
}

.qty-control button {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
}

/* ================= TOAST ================= */

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  bottom: 100px;
  background: var(--accent-dark);
  color: white;
  padding: 12px 20px;
  border-radius: 999px;
  opacity: 0;
  transition: 0.3s ease;
  font-size: 14px;
  z-index: 2000;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ================= PAYMENT ================= */

.order-received {
  background-color: #10d684;
  border-radius: 10px;
  padding:1px 10px;
  margin: 15px;
  font-size: 15px;
}  

.order-received h2,OI{
  color: rgb(34, 34, 34);
  stroke: 10px;
  font-weight: bold;
}

.order-amount {
  font-size: 15px;
  text-align: center;
  padding: -10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif
}  

.download-btn {
  display: block;
  padding: 5px;
  border-radius: 10px;
  text-align: center;
  margin: 11px;
  text-decoration: none;
}

.payment-note {
  background: rgba(255,255,255,0.05);
  padding: 11px;
  border: 11px;
  border-radius: 12px;
  margin: 11px;
  font-size: 14px;
  line-height: 1.6;
}

/* ================= CART FIX ================= */

.cart-item {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cart-item h4 {
  margin: 0;
  font-size: 15px;
}

.remove-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  transition: 0.2s;
}

.remove-btn:hover {
  background: rgba(255,255,255,0.15);
}

.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  margin-top: 8px;
  overflow: hidden;
}

.qty-control button {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  font-weight: 600;
}

.qty-control span {
  padding: 0 12px;
}

@media (max-width: 480px) {

  .cart-bar{
    height:50px;
    font-size:14px;
    margin: 10px;
    border-radius: 22px;

  }

}

.shirt-preview{
  position:relative;
  display:flex;
  justify-content:center;
}

.shirt-name{
  position:absolute;
  top:38%;
  left:50%;
  transform:translate(-50%, -50%);
  
  font-size:22px;
  font-weight:700;
  letter-spacing:1px;

  color:white;
  text-transform:uppercase;

  pointer-events:none;
}

.shirt-name{
  text-shadow:
  0 0 2px rgba(0,0,0,0.5),
  0 0 4px rgba(0,0,0,0.5);
}

.section{
  margin-top:22px;
}

.section:first-of-type{
  margin-top:14px;
}

.section > div:first-child{
  font-weight:600;
  margin-bottom:10px;
}

.option-group{
  display:grid;
  flex-wrap:wrap;
  gap:8px;
}

.option-btn{
  min-width:44px;
  height:36px;
  padding:0 10px;
  border-radius:18px;
}

.input{
  width: 90%;
  margin-top:6px;
}

.section small{
  display:block;
  margin-top:6px;
  opacity:.65;
  font-size:12px;
}

.qty-wrapper{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:6px;
}

.product-footer{
  padding:20px;
}

.option-btn.active{

  background:var(--accent);

  border-color:var(--accent);

  color:white;

  font-weight:600;

  box-shadow:0 4px 12px rgba(0,0,0,0.25);

}

.option-btn:hover{

  transform:translateY(-1px);

  border-color:var(--accent);

}

.section{
  margin-top:24px;
}

.section:first-of-type .option-group{
  grid-template-columns:repeat(3,1fr);
}

@media (max-width:420px){
.section:first-of-type .option-group{
  grid-template-columns:1fr;
}
}

.type-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
}

.option-btn.type-option{
  flex:1 1 110px;
  min-width:105px;
  max-width:100%;
  height:auto;
  min-height:54px;
  padding:10px 12px;
  border-radius:999px;
  text-align:center;
  line-height:1.15;
  white-space:normal;
  word-break:keep-all;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}

.type-option span{
  display:block;
}

.type-option small{
  display:block;
  font-size:12px;
  line-height:1;
  opacity:.82;
  font-weight:700;
}

.type-option.active small{
  opacity:.95;
}

@media (max-width:420px){
.option-btn.type-option{
  flex:1 1 calc(50% - 10px);
  min-width:0;
  font-size:14px;
}
}

@media (max-width:340px){
.option-btn.type-option{
  flex:1 1 100%;
}
}

.new-badge{

background:#ff4757;
color:white;
font-size:10px;
padding:2px 6px;
border-radius:6px;
margin-left:6px;

}

.site-footer{

text-align:center;
margin-top:30px;
opacity:.6;
font-size:12px;

}

.pickup-note{

font-size:12px;
opacity:.7;

}

.site-footer{

text-align:center;
margin-top:40px;
font-size:13px;
opacity:.85;

}

.site-footer a{

color:#00ff9c;
text-decoration:none;

}

.powered{

margin-top:6px;
font-size:15px;
opacity:.6;

}

.price-box{
display:flex;
gap:8px;
align-items:center;
}

.old-price{
text-decoration:line-through;
opacity:.6;
font-size:13px;
}

.promo-price{
color:#2ecc71;
font-weight:700;
font-size:18px;
}

.size-guide{
margin-top:50px;
text-align:left;
}

.size-guide-card{
background:
linear-gradient(180deg, rgba(24,73,54,.98), rgba(8,34,25,.98));
border:1px solid rgba(139,211,169,.18);
border-radius:18px;
box-shadow:0 18px 40px rgba(0,0,0,.32);
overflow:hidden;
}

.size-guide-heading{
padding:22px 18px 16px;
text-align:center;
}

.size-guide-heading h2{
margin:0 0 8px;
font-size:24px;
line-height:1.15;
color:#f4fff8;
}

.size-guide-heading p{
margin:0 auto 8px;
max-width:330px;
color:#c9dfd3;
font-size:13px;
line-height:1.45;
}

.size-note{
color:#9fd7b7;
font-size:12px;
font-weight:600;
}

.size-tabs{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:8px;
padding:0 14px 16px;
}

.size-tab{
appearance:none;
border:1px solid rgba(255,255,255,.14);
border-radius:10px;
background:rgba(3,16,12,.46);
color:#d9efe4;
cursor:pointer;
font-weight:700;
font-size:12px;
line-height:1.2;
min-height:42px;
padding:10px 8px;
transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.size-tab:hover{
background:rgba(46,204,113,.14);
border-color:rgba(46,204,113,.35);
}

.size-tab.active{
background:#2ecc71;
border-color:#73eba0;
color:#052018;
box-shadow:0 8px 18px rgba(46,204,113,.2);
}

.size-panel{
background:rgba(1,11,8,.22);
border-top:1px solid rgba(255,255,255,.1);
padding:16px 14px 18px;
}

.size-panel-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
}

.size-panel-header h3{
margin:0;
font-size:15px;
line-height:1.25;
color:#ffffff;
}

.size-panel-header span{
color:#9fb8ad;
font-size:11px;
white-space:nowrap;
}

.size-table-wrap{
width:100%;
max-width:100%;
overflow-x:auto;
padding-bottom:8px;
scrollbar-color:#2ecc71 rgba(255,255,255,.08);
}

.size-table{
width:100%;
min-width:540px;
border-collapse:separate;
border-spacing:0;
background:#082019;
border:1px solid rgba(255,255,255,.1);
border-radius:12px;
overflow:hidden;
}

.size-table th,
.size-table td{
border-right:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
padding:10px 9px;
font-size:12px;
line-height:1.25;
text-align:center;
white-space:nowrap;
}

.size-table th{
background:#123c2d;
color:#eafff2;
font-weight:800;
letter-spacing:0;
position:sticky;
top:0;
z-index:1;
}

.size-table td:first-child,
.size-table th:first-child{
font-weight:800;
color:#f6fff9;
background:rgba(18,60,45,.72);
position:sticky;
left:0;
z-index:2;
}

.size-table th:first-child{
z-index:3;
}

.size-table tr:last-child td{
border-bottom:0;
}

.size-table th:last-child,
.size-table td:last-child{
border-right:0;
}

.size-image-details{
margin-top:12px;
color:#b8d8c7;
font-size:12px;
}

.size-image-details summary{
cursor:pointer;
display:inline-flex;
font-weight:700;
}

.size-reference-image{
display:block;
width:100%;
max-width:320px;
margin:12px auto 0;
border-radius:12px;
border:1px solid rgba(255,255,255,.12);
}

@media (max-width:420px){
.size-guide{
margin-top:38px;
}

.size-guide-heading{
padding:20px 14px 14px;
}

.size-guide-heading h2{
font-size:22px;
}

.size-tabs{
grid-template-columns:repeat(2, minmax(0, 1fr));
padding:0 10px 12px;
gap:7px;
}

.size-tab{
min-height:38px;
font-size:11px;
padding:8px 6px;
}

.size-panel{
padding:14px 10px 16px;
}

.size-panel-header{
align-items:flex-start;
flex-direction:column;
gap:4px;
}

.size-panel-header span{
white-space:normal;
}

.size-table{
min-width:500px;
}

.size-table th,
.size-table td{
padding:8px 7px;
font-size:11px;
}
}

.size-logo{
width:120px;
margin-bottom:10px;
}

.site-header{
text-align:center;
}

.site-logo{
width:120px;
}

.site-footer{

text-align:center;
margin-top:33px;
padding:0 50px 75px;
font-size:13px;
opacity:.8;

}

.site-footer a{

color:#2cff7a;
text-decoration:none;

}

.order-notice{

background: rgba(0,255,150,0.08);
border: 1px solid rgba(0,255,150,0.25);

padding: 15px;
margin: 20px 0;

border-radius: 12px;

font-size: 10px;
line-height: 1.6;

backdrop-filter: blur(6px);

}

.order-notice strong{
color:#aeffcc;
}

.order-notice p{
margin:5px 0;
}

#countdownBox{

margin:10px;
padding:10px;

background: rgba(0,0,0,0.3);
border-radius:10px;

text-align:center;
font-size:13px;

}

#countdownTimer{

font-size:16px;
font-weight:700;
color:#ffcc00;

}

#orderClosedBanner{

background: rgba(255,0,0,0.15);
border:1px solid red;

padding:10px;
margin-bottom:10px;

border-radius:10px;
text-align:center;

font-weight:700;
color:#ff4d4d;

}

.order-status-banner.open{
background:rgba(46,204,113,.14)!important;
border-color:#2ecc71!important;
color:#7dffad!important;
}

.order-status-banner.upcoming{
background:rgba(255,193,7,.12)!important;
border-color:#ffc107!important;
color:#ffd45c!important;
}

.order-status-banner.unavailable{
background:rgba(255,152,0,.12)!important;
border-color:#ff9800!important;
color:#ffbd66!important;
}

.public-loading{
min-height:60vh;
display:grid;
place-items:center;
padding:30px;
color:#bce8ce;
font-size:14px;
text-align:center;
}

#content{
max-height:70vh;
overflow:auto;
}

.pack-section{
margin-bottom:15px;
border-radius:12px;
background:#0b2f24;
overflow:hidden;
}

.pack-header{
padding:12px;
background:#0f3a2f;
cursor:pointer;
display:flex;
justify-content:space-between;
font-weight:600;
}

.pack-body{
display:none;
padding:10px;
}

.pack-body.active{
display:block;
}

.pack-sub{
font-size:13px;
opacity:.7;
margin:10px 0 5px;
}

.pack-item{
padding:8px;
margin-bottom:5px;
background:#0f2d23;
border-radius:8px;
}

.pack-item.done{
opacity:.4;
text-decoration:line-through;
}

.receipt-container{
padding:20px;
display:flex;
flex-direction:column;
align-items:center;
}

.receipt-card{
width:100%;
max-width:400px;
background:#0f2f25;
border-radius:16px;
padding:20px;
color:#fff;
box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.receipt-header{
text-align:center;
margin-bottom:15px;
}

.receipt-header h2{
margin:0;
}

.receipt-info{
font-size:14px;
line-height:1.6;
margin-bottom:10px;
}

.receipt-items{
margin-top:10px;
}

.item-card{
background:#143c2f;
padding:10px;
border-radius:10px;
margin-bottom:10px;
font-size:13px;
}

.download-btn{
margin-top:20px;
padding:12px;
width:100%;
max-width:400px;
background:#2ecc71;
border:none;
border-radius:10px;
color:#fff;
font-weight:bold;
}

.receipt-top{
display:flex;
align-items:center;
gap:10px;
margin-bottom:15px;
}

.logo{
width:50px;
height:50px;
object-fit:contain;
}

.receipt-table{
width:100%;
border-collapse:collapse;
font-size:13px;
margin-top:10px;
}

.receipt-table th{
text-align:left;
padding:8px;
border-bottom:1px solid rgba(255,255,255,0.2);
}

.receipt-table td{
padding:8px;
border-bottom:1px solid rgba(255,255,255,0.1);
}

.watermark{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:80px;
opacity:0.03;
font-weight:bold;
pointer-events:none;
}

.badge{
display:inline-block;
padding:6px 12px;
border-radius:8px;
font-weight:600;
font-size:12px;
margin-left:6px;
}

.paid{
background:#2ecc71;
color:#000;
}

.waiting{
background:#f1c40f;
color:#000;
}

.packed{
background:#9b59b6;
color:#fff;
}

.receipt-card{
position:relative;
}

.pack-body{
display:none;
padding:10px;
transition: all 0.25s ease;
}

.pack-body.active{
display:block;
}

.paid-stamp{
  position:absolute;
  top:20px;
  right:20px;
  border:3px solid #22c55e;
  color:#22c55e;
  font-weight:800;
  padding:6px 14px;
  font-size:18px;
  border-radius:6px;
  transform:rotate(-10deg);
  opacity:0.9;
  letter-spacing:1px;
}

.invoice-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.invoice-top .left,
.invoice-top .right{
  width:30%;
  font-size:13px;
}

.invoice-top .center{
  width:40%;
  text-align:center;
}

.logo{
  width:60px;
  margin-bottom:6px;
}

.company{
  font-size:12px;
  opacity:.8;
  line-height:1.5;
}

.total-box{
  margin-top:15px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  font-size:14px;
}

.total-box div{
  width:220px;
  display:flex;
  justify-content:space-between;
}

.total-box .grand{
  font-weight:800;
  font-size:16px;
  border-top:1px solid rgba(255,255,255,0.2);
  padding-top:6px;
}

.invoice-bottom{
  display:flex;
  justify-content:space-between;
  margin:20px 0;
  gap:20px;
}

.invoice-bottom .cust,
.invoice-bottom .order{
  width:48%;
  font-size:13px;
}

.invoice-bottom .order{
  text-align:right;
}

.sub{
  opacity:.7;
  font-size:11px;
}

.payment-container{
max-width:460px;
margin:0 auto;
padding:32px 18px;
}

.payment-card{
background:linear-gradient(180deg,#0a2c23,#061a14);
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
box-shadow:0 20px 50px rgba(0,0,0,.3);
padding:24px;
}

.payment-title{font-size:22px;font-weight:800;margin-bottom:8px;}
.payment-amount{font-size:32px;font-weight:800;margin:14px 0;}
.timer{color:#ffd166;font-size:14px;margin-bottom:16px;}
.qr-box{background:#fff;border-radius:14px;padding:12px;margin:16px 0;}
.qr-box img{display:block;width:100%;}
.payment-bank{display:grid;gap:4px;background:rgba(255,255,255,.06);border-radius:10px;padding:12px;}
.steps{display:grid;gap:7px;font-size:14px;line-height:1.5;margin:18px 0;}
.btn-main{width:100%;padding:14px;border:0;border-radius:10px;background:#2ecc71;color:#fff;font:inherit;font-weight:800;cursor:pointer;}
.payment-lock{max-width:460px;margin:80px auto;padding:32px 20px;text-align:center;}

/* ================= RECEIPT UPGRADE ================= */

.receipt-card{
max-width:430px;
}

.receipt-company{
display:flex;
flex-direction:column;
text-align:center;
gap:4px;
}

.receipt-company .logo{
margin:0 auto 4px;
}

.invoice-meta{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin:20px 0;
}

.invoice-meta .cust,
.invoice-meta .order{
font-size:13px;
line-height:1.6;
}

.invoice-meta .order{
text-align:right;
}

.receipt-table{
font-size:12px;
}

.status-stamp{
position:absolute;
top:138px;
right:22px;
border:3px solid #f1c40f;
color:#f1c40f;
font-weight:800;
padding:6px 14px;
font-size:17px;
border-radius:6px;
transform:rotate(-10deg);
opacity:.92;
letter-spacing:1px;
text-transform:uppercase;
}

.status-stamp.paid{
border-color:#22c55e;
color:#22c55e;
font-size:24px;
}

.status-stamp.packed,
.status-stamp.shipped{
border-color:#3498db;
color:#3498db;
}

.courier-box{
background:#143c2f;
border-radius:10px;
padding:10px;
font-size:12px;
line-height:1.5;
margin-top:12px;
}

.courier-box h3{
margin:0 0 8px;
font-size:14px;
}

.track-btn{
display:inline-block;
margin-top:10px;
padding:8px 10px;
border-radius:8px;
background:#2ecc71;
color:#04150f;
font-weight:700;
text-decoration:none;
}

.receipt-thanks{
text-align:center;
margin-top:15px;
font-size:12px;
opacity:.7;
}

.shipped{
background:#3498db;
color:#fff;
}

@media (max-width:640px){
.receipt-container{
padding:12px;
}

.receipt-card{
padding:14px;
border-radius:12px;
}

.invoice-meta{
grid-template-columns:1fr;
gap:10px;
}

.invoice-meta .order{
text-align:left;
}

.receipt-table{
display:block;
overflow-x:auto;
white-space:nowrap;
}

.total-box div{
width:100%;
}

.status-stamp{
top:120px;
right:16px;
font-size:16px;
}
}