:root{
  --bg:#222428; /* dark page bg */
  --card:#ffffff;
  --muted:#9aa0a6;
  --accent:#ffd24d;
  --dark:#111;
  --line:#e9e9e9;
  --btn:#2b2b2b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Montserrat', Arial, sans-serif;
  background:var(--bg);
  color:var(--dark);
  -webkit-font-smoothing:antialiased;
}

/* page wrapper to mimic screenshot spacing */
.page{
  max-width:1200px;
  margin:30px auto;
  padding:30px;
}

/* centered round logo above card */
.logo-wrap{display:flex;justify-content:center;margin-bottom:-60px;z-index:2}
.logo{
  width:120px;height:120px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 0 rgba(0,0,0,.18);
  border:6px solid #111; overflow:hidden
}
.logo img{width:80%;height:80%;object-fit:contain}

.card{
  background:var(--card);
  border-radius:12px;padding:48px 56px 36px;box-shadow:0 2px 0 rgba(0,0,0,0.25);
}

.meta{color:var(--muted);font-size:14px;margin-bottom:12px}
.title{font-size:34px;margin:0 0 18px 0;line-height:1.05;font-weight:800}

.layout{display:flex;gap:48px}
.left{flex:1;min-width:300px}
.right{flex:1.6}

/* left column styles */
label{display:block;margin-top:18px;font-weight:600;color:#222}
.input{display:flex;align-items:center}
input[type=text], select{
  width:100%;padding:12px 14px;border-radius:6px;border:1px solid var(--line);font-size:15px;margin-top:8px;background:#fff;
}

/* telephone with whatsapp icon */
.phone-wrap{display:flex;align-items:center}
.phone-icon{width:44px;height:44px;border:1px solid var(--line);border-right:none;border-radius:6px 0 0 6px;background:#fff;display:flex;align-items:center;justify-content:center}
.phone-icon svg{width:22px;height:22px}
.phone-input{flex:1}

/* right column: order details */
.detail-header{display:flex;align-items:center;justify-content:space-between}
.ticket-controls{display:flex;gap:12px;align-items:center;margin-top:8px}
.ticket-select-wrap{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;padding:6px 10px;background:#fafafa}
.ticket-select{flex:1;border:0;background:transparent;padding:10px;font-size:15px}

.btn{padding:12px 16px;border-radius:6px;border:none;cursor:pointer}
.btn-ghost{background:#efefef}
.btn-primary{background:var(--btn);color:#fff}

.ticket-list{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);min-height:180px;color:var(--muted)}

/* ticket row */
.ticket-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #eee;font-size:14px}
.ticket-label{max-width:60%;line-height:1.4;font-weight:700;text-transform:uppercase;color:#222}
.qty-control{display:flex;align-items:center;gap:8px}
.qty-control button{width:36px;height:36px;border-radius:6px;border:1px solid #dcdcdc;background:#fff;font-size:18px;cursor:pointer}
.qty{min-width:28px;text-align:center;font-weight:700}
.ticket-price{min-width:110px;text-align:right;font-weight:700}
.delete{background:none;border:none;font-size:18px;color:#d33;cursor:pointer;margin-left:12px}

#totalBox{display:flex;justify-content:space-between;font-size:18px;font-weight:700;padding:18px 0;border-top:1px solid #eee}

.order-actions{margin-top:18px}
.pay-btn{width:100%;padding:14px;border-radius:8px;border:0;background:#111;color:#fff;font-size:16px;cursor:pointer}

.footer-link{text-align:center;margin-top:22px}
.footer-link a{color:#111;text-decoration:underline}

.small-note{color:var(--muted);font-size:13px}

/* responsive */
@media (max-width:920px){
  .layout{flex-direction:column}
  .logo-wrap{margin-bottom:8px}
  .card{padding:24px}
}