/* SM Subsales PWA centralized styles (renamed from BKMB->SM) */
/* Safe area insets for notched devices (iPhone X and later) */
:root{
  --sm-primary:#2d6cdf;
  --safe-area-inset-top:env(safe-area-inset-top,0);
  --safe-area-inset-bottom:env(safe-area-inset-bottom,0);
  --safe-area-inset-left:env(safe-area-inset-left,0);
  --safe-area-inset-right:env(safe-area-inset-right,0);
}
/* Ensure body fills viewport properly on all devices */
html,body{margin:0;padding:0;width:100%;height:100%;overflow-x:hidden;-webkit-overflow-scrolling:touch}
body{padding-top:var(--safe-area-inset-top);padding-bottom:var(--safe-area-inset-bottom);padding-left:var(--safe-area-inset-left);padding-right:var(--safe-area-inset-right)}
.sm-root{--sm-primary:#2d6cdf}
.sm-btn{background:var(--sm-primary);color:#fff;border:none;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600;box-shadow:0 6px 18px rgba(45,108,223,0.18);transition:transform .08s ease,box-shadow .12s ease}
.sm-btn:active{transform:translateY(1px)}
.sm-btn.secondary{background:#f3f4f6;color:#111;box-shadow:none}
#sm-pwa-ui{max-width:1100px;margin:0 auto}
.sm-header-sample{padding:8px;border-radius:6px;color:#fff;text-align:center}
/* Header layout - professional, responsive design with buttons on separate row */
.sm-header{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1100px;margin:0 auto;padding:10px 16px;padding-top:calc(10px + var(--safe-area-inset-top));position:relative;background:linear-gradient(180deg,#ffffff,#fbfdff);border-radius:8px;box-shadow:0 4px 12px rgba(16,24,40,0.06);flex-wrap:wrap}
.sm-header-left{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.sm-header-center{flex:1 1 auto;display:flex;align-items:center;gap:12px;justify-content:center;min-width:0}
.sm-brand-image{display:block;max-height:44px;width:auto;object-fit:contain}
/* If theme defines a generic .hidden, ensure our brand image is visible and responsive */
.sm-brand-image.hidden, #brandHeaderImage.hidden { display:block!important; visibility:visible!important; opacity:1!important; max-width:180px !important; height:auto !important }
.sm-brand-name{margin:0;font-size:1.125rem;font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-header-right{flex:1 1 100%;display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.sm-header-right .sm-btn{font-size:0.9rem;padding:8px 12px;white-space:nowrap}

/* Team display - inline with brand name in header center */
.sm-current-team{display:inline-flex;align-items:center;margin-left:12px;padding:4px 10px;background:rgba(45,108,223,0.12);border-radius:6px;font-size:0.85rem;font-weight:600;color:var(--sm-primary);white-space:nowrap}

/* Modern status dot: position in upper-right of header */
#headerStatus{position:absolute;top:calc(12px + var(--safe-area-inset-top));right:calc(16px + var(--safe-area-inset-right));width:10px;height:10px;border-radius:50%;background:orange;box-shadow:0 2px 6px rgba(2,6,23,0.12);display:block;transition:background-color .18s ease,transform .12s ease;z-index:1;pointer-events:none}
#headerStatus.status-online{background:#16a34a;transform:scale(1.06)}
/* hide inner textual dots if present; the small circle is the visible indicator */
#headerStatusText, #headerDot{display:none}
.sm-main{padding:12px;padding-left:calc(12px + var(--safe-area-inset-left));padding-right:calc(12px + var(--safe-area-inset-right));padding-bottom:calc(12px + var(--safe-area-inset-bottom))}
.sm-login-section{max-width:480px;margin:12px 0}
.sm-app-section{margin-top:12px}
.sm-leftcol{flex:1;min-width:320px}
.sm-aside{width:280px;min-width:220px}
/* Form layout: labels above inputs, clean spacing and responsive two/three column rows */
form, .sm-leftcol{box-sizing:border-box}
label{display:block;margin:8px 0 6px;font-weight:600;color:#0f172a}
input[type="text"], input[type="tel"], input[type="number"], input[type="email"], textarea, .sm-select, input, select{width:100%;padding:8px 10px;border:1px solid #e6e9ef;border-radius:8px;box-sizing:border-box;font-size:0.95rem}
textarea{min-height:80px}
.row{display:flex;gap:12px;align-items:flex-start}
.sm-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.sm-row .sm-leftcol{flex:1;min-width:280px}
.sm-row .sm-aside{width:280px;min-width:220px}
.col-2{flex:1;min-width:80px}
.col-3{flex:1;min-width:60px}
/* specifically style the quantity row for visual grouping */
.row-spaced .col-2 label, .row-spaced .col-3 label{margin-top:0}

/* Quantity column sizing: keep turkey/ham/combo inputs compact and prevent them from
	 forcing the row to grow too wide. Targets only direct children inside the spaced row. */
.row-spaced > .col-2, .row-spaced > .col-3 {
	flex: 1 1 0; /* allow shrinking/wrapping */
	min-width: 64px; /* small but usable on narrow screens */
	max-width: 160px; /* prevent very wide expansion */
}
.row-spaced > .col-2 input[type="number"], .row-spaced > .col-3 input[type="number"] {
	width: 100%;
	min-width: 0; /* allow flexbox to control width */
	text-align: center; /* nicer for quantity */
	padding: 6px 8px;
}
/* Remove default spinner visual on some browsers (keeps compact look) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }

/* Donation and order total */
.order-total{margin-top:8px;font-size:1.125rem;font-weight:700}
/* Make order total visually distinct as a colored pill */
.order-total span{background:var(--sm-primary);color:#fff;padding:6px 10px;border-radius:999px;display:inline-block}

/* Ensure address autocomplete dropdown and any injected element use full width for best validation UX */
.pac-container{width:100% !important;max-width:none !important;box-sizing:border-box}
/* Google PlaceAutocompleteElement may inject its own element; make adjacent elements full width */
#address, #address + * { width:100% !important; max-width:none !important; box-sizing:border-box }

/* Phone input validation visuals - only show red border when field has value and is invalid */
input[type="tel"]:user-invalid{border-color:#dc2626}
input[type="tel"]:invalid:focus{border-color:#2563eb}
input[type="tel"].invalid{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,0.06)}

/* Payment options layout - improved alignment */
.pay-options{margin-top:12px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pay-options label{display:flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap;margin:0}
.pay-options input[type="checkbox"]{margin:0;width:18px;height:18px;flex-shrink:0}
.check-number-row{margin-top:8px}

/* Button row spacing */
.btn-row{margin-top:12px}

/* Ensure generic hidden utility is available for plugin UI (kept important to override theme rules) */
.hidden{display:none!important}

/* Toggle switch for Individual Sales */
.sm-toggle-row{display:flex;justify-content:center;align-items:center;margin:16px 0;padding:12px 0}
.sm-toggle-label{display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:600;color:#0f172a}
.sm-toggle-text{font-size:1rem}
.sm-toggle-switch{position:relative;width:52px;height:28px}
.sm-toggle-switch input[type="checkbox"]{opacity:0;width:0;height:0;position:absolute}
.sm-toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#cbd5e1;border-radius:28px;transition:background .3s ease}
.sm-toggle-slider:before{position:absolute;content:"";height:22px;width:22px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .3s ease}
.sm-toggle-switch input[type="checkbox"]:checked + .sm-toggle-slider{background:var(--sm-primary)}
.sm-toggle-switch input[type="checkbox"]:checked + .sm-toggle-slider:before{transform:translateX(24px)}

/* Team display - inline with brand name in header center */
.sm-current-team{display:inline-flex;align-items:center;margin-left:12px;padding:4px 10px;background:rgba(45,108,223,0.12);border-radius:6px;font-size:0.85rem;font-weight:600;color:var(--sm-primary);white-space:nowrap}

@media (max-width:600px){
	.row{flex-direction:column}
	.sm-aside{width:100%;min-width:0;margin-top:12px}
	.pay-options{flex-direction:column;align-items:flex-start}
}

/* iPad and tablet optimizations (768px - 1024px) */
@media (min-width:601px) and (max-width:1024px){
	.sm-header{padding:10px 14px;gap:10px}
	.sm-header-right{gap:6px}
	.sm-header-right .sm-btn{font-size:0.85rem;padding:7px 10px}
	.sm-brand-name{font-size:1rem}
	.pay-options{gap:20px}
}

/* Small mobile phones */
@media (max-width:480px){
	.sm-header{flex-wrap:wrap;padding:8px 12px}
	.sm-header-left{order:1;flex:0 0 auto}
	.sm-header-center{order:2;flex:1 1 100%;justify-content:flex-start;margin-top:8px}
	.sm-header-right{order:3;flex:1 1 100%;justify-content:flex-start;gap:6px;flex-wrap:wrap;margin-top:8px}
	.sm-header-right .sm-btn{flex:1 1 auto;min-width:80px;font-size:0.85rem;padding:7px 10px}
	.sm-brand-name{font-size:0.95rem}
	#headerStatus{top:calc(10px + var(--safe-area-inset-top));right:calc(12px + var(--safe-area-inset-right));width:8px;height:8px}
}
.sm-select{display:block;margin-top:8px;padding:8px}
.sm-modal{position:fixed;left:calc(12px + var(--safe-area-inset-left));right:calc(12px + var(--safe-area-inset-right));top:calc(80px + var(--safe-area-inset-top));bottom:calc(12px + var(--safe-area-inset-bottom));background:#fff;border:1px solid #ddd;padding:12px;z-index:10000;overflow:auto;box-shadow:0 12px 32px rgba(0,0,0,0.25)}
.sm-modal .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sm-modal .modal-body{display:flex;gap:12px;flex-wrap:wrap}
.sm-modal .modal-col{flex:1;min-width:320px}
.sm-variant-flat .sm-btn{box-shadow:none;border-radius:6px}
.sm-variant-rounded .sm-btn{border-radius:24px}
.sm-variant-dark body, .sm-variant-dark .sm-modal{background:#111;color:#eee}
.sm-variant-dark .sm-btn{background:var(--sm-primary);color:#fff}
.order { border:1px solid #ddd; padding:8px; margin-bottom:8px }
.status-offline { color:orange }
.status-online { color:green }

/* Legacy header selectors removed - using top definitions */
.sm-header-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:orange;margin-right:6px}
.sm-header-dot.status-online{background:green}

/* Main layout - duplicates removed, see top of file for actual definitions */
/* Inlay popup */
.orders-inlay{position:fixed;right:calc(12px + var(--safe-area-inset-right));top:calc(76px + var(--safe-area-inset-top));width:420px;max-width:calc(100% - 24px - var(--safe-area-inset-left) - var(--safe-area-inset-right));background:#fff;border:1px solid #eee;border-radius:10px;box-shadow:0 12px 36px rgba(2,6,23,0.12);z-index:9999;padding:12px;max-height:calc(70vh - var(--safe-area-inset-bottom));overflow:auto}

@media (max-width:480px){
	.orders-inlay{left:calc(12px + var(--safe-area-inset-left));right:calc(12px + var(--safe-area-inset-right));top:calc(64px + var(--safe-area-inset-top));width:auto;max-width:calc(100% - 24px - var(--safe-area-inset-left) - var(--safe-area-inset-right));border-radius:8px;padding:10px}
}
.orders-inlay .inlay-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.orders-inlay table{width:100%;border-collapse:collapse}
.orders-inlay th,.orders-inlay td{padding:6px;border-bottom:1px solid #f3f3f3;text-align:left}

/* Small utilities */
.sm-select{display:block;margin-top:8px;padding:8px}

/* Modal for My Orders */
.sm-modal{position:fixed;left:12px;right:12px;top:80px;bottom:12px;background:#fff;border:1px solid #ddd;padding:12px;z-index:10000;overflow:auto;box-shadow:0 12px 32px rgba(0,0,0,0.25)}
.sm-modal .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sm-modal .modal-body{display:flex;gap:12px;flex-wrap:wrap}
.sm-modal .modal-col{flex:1;min-width:320px}
.order{border:1px solid #eee;padding:8px;margin-bottom:6px}

/* Variant tweaks (variants set on body via JS class) */
.sm-variant-flat .sm-btn{box-shadow:none;border-radius:6px}
.sm-variant-rounded .sm-btn{border-radius:24px}
.sm-variant-dark body, .sm-variant-dark .sm-modal{background:#111;color:#eee}
.sm-variant-dark .sm-btn{background:var(--sm-primary);color:#fff}

/* Small spacing utilities used in the template */
.row-spaced{margin-top:6px;margin-bottom:6px}
.order-total{margin-top:6px}
.pay-options{margin-top:8px;display:flex;gap:12px}
.check-number-row{margin-top:6px}
.btn-row{margin-top:10px}
.row-spaced{margin-top:6px;margin-bottom:6px}
.order-total{margin-top:6px}
.pay-options{margin-top:8px;display:flex;gap:12px}
.check-number-row{margin-top:6px}
.btn-row{margin-top:10px}

/* Responsive header tweaks */
@media (max-width:900px) {
	.sm-header{flex-direction:row;align-items:center;padding:10px}
	.sm-brand-name{font-size:1rem}
	.sm-brand-image{max-height:44px}
}

@media (max-width:600px) {
	.sm-header{flex-direction:column;align-items:stretch;padding:10px}
	.sm-header-center{order:1;margin:6px 0;justify-content:flex-start}
	.sm-header-right{order:2;justify-content:flex-end;width:100%;gap:8px}
	.sm-brand-image{max-height:36px}
	#headerStatus{top:8px;right:10px;width:10px;height:10px}
}

/* Snackbar / Toast */
.sm-snackbar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:20000;background:rgba(20,20,20,0.95);color:#fff;padding:10px 14px;border-radius:8px;box-shadow:0 8px 24px rgba(2,6,23,0.3);display:flex;align-items:center;gap:12px;max-width:92%;min-width:220px}
.sm-snackbar.hidden{display:none}
.sm-snackbar.show{display:flex}
.sm-snackbar .sm-snackbar-action{background:transparent;border:1px solid rgba(255,255,255,0.12);padding:6px 10px;border-radius:6px;color:#fff}

/* Small pending badge used in My Orders */
.sm-badge{display:inline-block;background:#f59e0b;color:#fff;padding:2px 8px;border-radius:999px;font-size:12px;margin-left:8px}

/* Name suggestions dropdown */
.sm-suggestions{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e6e9ef;border-top:none;border-radius:0 0 8px 8px;max-height:200px;overflow-y:auto;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,0.1);margin-top:-1px}
.sm-suggestions.hidden{display:none}
.sm-suggestion-item{padding:10px 12px;cursor:pointer;border-bottom:1px solid #f3f4f6;transition:background 0.1s}
.sm-suggestion-item:hover{background:#f8fafc}
.sm-suggestion-item:last-child{border-bottom:none}