/* Qurban Onboarding - Public (mobile-first) */

.qo-container{max-width:720px;margin:0 auto;padding:16px;box-sizing:border-box}
.qo-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;box-sizing:border-box}
.qo-title{font-size:20px;font-weight:700;margin:0 0 8px}
.qo-subtitle{margin:0 0 16px;color:#4b5563}

.qo-steps{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;padding:0;list-style:none}
.qo-steps li{flex:1 1 90px;padding:8px 10px;border-radius:999px;border:1px solid #e5e7eb;font-size:12px;text-align:center;color:#6b7280}
.qo-steps li.is-active{background:#111827;color:#fff;border-color:#111827}
.qo-steps li.is-done{background:#f3f4f6;color:#111827}

.qo-form-row{margin:0 0 12px}
.qo-label{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.qo-input{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:10px;font-size:16px;box-sizing:border-box}
.qo-help{font-size:12px;color:#6b7280;margin:6px 0 0}

/* Prevent long domain / billcode from breaking layout */
.qo-help code{display:inline-block;max-width:100%;overflow-wrap:anywhere;word-break:break-word}

.qo-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.qo-grid{grid-template-columns:1fr 1fr}}

.qo-actions{display:flex;gap:10px;flex-direction:column;margin-top:12px}
@media(min-width:640px){.qo-actions{flex-direction:row;justify-content:space-between}}

.qo-btn{display:inline-block;width:100%;padding:12px 14px;border-radius:10px;border:1px solid #111827;background:#111827;color:#fff;text-decoration:none;font-weight:700;text-align:center;cursor:pointer}
.qo-btn.qo-btn--secondary{background:#fff;color:#111827}
@media(min-width:640px){.qo-btn{width:auto;min-width:140px}}

.qo-notice{padding:12px;border-radius:10px;border:1px solid #e5e7eb;background:#f9fafb}
.qo-notice.qo-notice--error{border-color:#fecaca;background:#fef2f2;color:#991b1b}
.qo-notice.qo-notice--success{border-color:#bbf7d0;background:#f0fdf4;color:#14532d}

.qo-hidden{display:none !important}
.qo-inline-status{font-size:12px;margin-top:6px}
.qo-inline-status.is-ok{color:#14532d}
.qo-inline-status.is-bad{color:#991b1b}

.qo-table{width:100%;border-collapse:collapse}
.qo-table th,.qo-table td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left;font-size:14px}

/* Responsive table wrapper (mobile: horizontal scroll) */
.qo-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:640px){
  .qo-table{min-width:760px}
  .qo-table th,.qo-table td{white-space:nowrap}
}
.qo-badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid #e5e7eb;background:#f9fafb}
.qo-badge.is-good{border-color:#bbf7d0;background:#f0fdf4}
.qo-badge.is-warn{border-color:#fde68a;background:#fffbeb}
.qo-badge.is-bad{border-color:#fecaca;background:#fef2f2}

/* Dashboard layout */
.qo-dashboard-layout{display:grid;grid-template-columns:1fr;gap:12px}
/* Allow grid children to shrink, so content (tables) can scroll instead of overflowing the card */
.qo-dashboard-layout > *{min-width:0}

/* Mobile-first dashboard nav: horizontal scroll like a native app tab bar */
.qo-nav{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:4px 0;margin:0;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none}
.qo-nav::-webkit-scrollbar{display:none}
.qo-nav a{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;display:inline-block;padding:10px 12px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#111827;text-decoration:none !important;font-weight:700;font-size:14px}
.qo-nav a:hover{text-decoration:none !important}
.qo-nav a.is-active{background:#111827;color:#fff;border-color:#111827}

@media(min-width:768px){
  .qo-dashboard-layout{grid-template-columns:220px 1fr;align-items:start}
  .qo-nav{flex-direction:column;overflow:visible;position:sticky;top:16px;scroll-snap-type:none;scrollbar-width:auto}
  .qo-nav a{border-radius:12px;text-align:left}
}

/* Force no underline inside our UI (theme may override default anchor styles) */
.qo-container a,.qo-container a:hover,.qo-container a:focus{text-decoration:none !important}

.qo-panel{padding:12px;border:1px solid #e5e7eb;border-radius:12px;background:#f9fafb}
.qo-panel__header{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.qo-panel__title{font-weight:800;font-size:16px;line-height:1.2}

/* Orders mobile view (cards) */
.qo-orders-mobile{display:none}

/* Desktop orders table: keep it inside the card (scroll if needed) */
.qo-orders-desktop .qo-table{min-width:760px}
.qo-orders-desktop .qo-table th,.qo-orders-desktop .qo-table td{white-space:nowrap}

@media(max-width:640px){
  .qo-orders-desktop{display:none}
  .qo-orders-mobile{display:block}

  .qo-order-card{border:1px solid #e5e7eb;border-radius:12px;padding:12px;background:#fff;margin-bottom:10px}
  .qo-order-card__top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
  .qo-order-card__title{font-weight:900;font-size:15px;line-height:1.2}
  .qo-order-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
  .qo-order-card__label{font-size:11px;color:#6b7280;margin-bottom:4px}
  .qo-order-card__value{font-size:13px;font-weight:800}
  .qo-order-card__actions{display:flex;flex-direction:column;gap:10px;margin-top:10px}
}

@media(min-width:641px){
  .qo-orders-desktop{display:block}
  .qo-orders-mobile{display:none}
}