/* RMPT e-POS V16.0 — AI Layout Styles.
   These only apply when the 'ai' layout is selected in Settings → Layouts.
   The v10-cash-register-1102.js sets a data-attribute or class on .r81pos
   based on the active template, so we scope everything to that state. */

/* ===================================================================
   AI CASH REGISTER LAYOUT
   When 'ai' layout is active, the POS shell gets enhanced styling
   that makes it feel like a modern, smart checkout experience.
   =================================================================== */

/* AI layout marker — v10-cash-register adds data-template="ai" */
.r81pos[data-cash-template="ai"] {
  --ai-accent: #0d9488;
  --ai-surface: #f0fdf4;
}

/* Recent items strip at top of browse area */
.r81pos[data-cash-template="ai"] .r81pos-browse {
  border-radius: 16px;
  border-color: #e5e7eb;
  background: #fff;
}

/* Product grid — larger cards with more visual weight */
.r81pos[data-cash-template="ai"] .catalog-grid {
  gap: 12px;
}
.r81pos[data-cash-template="ai"] .product-tile,
.r81pos[data-cash-template="ai"] .p-card {
  border-radius: 14px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: all .15s ease;
}
.r81pos[data-cash-template="ai"] .product-tile:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(13,148,136,.12);
  border-color: #99f6e4;
  background: #f0fdfa;
}
.r81pos[data-cash-template="ai"] .product-tile strong {
  color: var(--ai-accent);
  font-size: 16px;
  font-weight: 800;
}

/* Cart panel — wider, premium card feel */
.r81pos[data-cash-template="ai"] .cart-panel {
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.r81pos[data-cash-template="ai"] .cart-head {
  background: #f9fafb;
  padding: 16px 18px;
  border-bottom: 1px solid #f3f4f6;
  border-radius: 16px 16px 0 0;
}
.r81pos[data-cash-template="ai"] .cart-head b {
  font-size: 15px;
  font-weight: 800;
  color: #111827;
}
.r81pos[data-cash-template="ai"] .cart-line {
  padding: 14px 18px;
  border-bottom: 1px solid #f9fafb;
  transition: background .12s;
}
.r81pos[data-cash-template="ai"] .cart-line:hover {
  background: #f0fdf4;
}

/* Grand total — extra prominent */
.r81pos[data-cash-template="ai"] .totals .grand {
  font-size: 28px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -.8px;
}

/* Checkout button — full-width, tall, bold */
.r81pos[data-cash-template="ai"] .cart-foot .btn.green,
.r81pos[data-cash-template="ai"] .v11-checkout {
  min-height: 52px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
  letter-spacing: -.3px;
  box-shadow: 0 4px 14px rgba(5,150,105,.2);
}
.r81pos[data-cash-template="ai"] .cart-foot .btn.green:hover,
.r81pos[data-cash-template="ai"] .v11-checkout:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(5,150,105,.25);
}

/* Search bar — prominent, glowing focus */
.r81pos[data-cash-template="ai"] .r81pos-bar input,
.r81pos[data-cash-template="ai"] #pSearch {
  border-radius: 14px;
  min-height: 48px;
  font-size: 15px;
  border: 2px solid #e5e7eb;
  padding: 12px 18px;
}
.r81pos[data-cash-template="ai"] .r81pos-bar input:focus,
.r81pos[data-cash-template="ai"] #pSearch:focus {
  border-color: var(--ai-accent);
  box-shadow: 0 0 0 4px rgba(13,148,136,.1), 0 4px 12px rgba(13,148,136,.08);
}

/* Category pills — rounded, teal-themed */
.r81pos[data-cash-template="ai"] .r81pos-browse-head select {
  border-radius: 10px;
  font-weight: 600;
}

/* Payment grid — larger, touch-friendly buttons */
.r81pos[data-cash-template="ai"] .r81pos-pay-grid .r81pos-pay-btn,
.r81pos[data-cash-template="ai"] .pay-grid .btn {
  border-radius: 12px;
  min-height: 52px;
  font-weight: 700;
  font-size: 15px;
}

/* VAT summary — subtle card */
.r81pos[data-cash-template="ai"] .r81pos-vat {
  background: #f9fafb;
  border-radius: 10px;
  padding: 10px 14px;
  border: 1px solid #f3f4f6;
}

/* Idle state — friendlier message */
.r81pos[data-cash-template="ai"] .r81pos-idle {
  padding: 48px 24px;
  text-align: center;
}
.r81pos[data-cash-template="ai"] .r81pos-idle b {
  font-size: 16px;
  color: #374151;
}
.r81pos[data-cash-template="ai"] .r81pos-idle small {
  color: #9ca3af;
}

/* ===================================================================
   AI REPAIR LAYOUT
   When 'ai' layout is selected for repair booking, the booking flow
   gets a diagnostic-first experience with clearer progress.
   =================================================================== */

/* Progress bar — more prominent step indicator */
body[data-repair-layout="ai"] .v12-repair-progress,
.v12-repair-progress.ai-layout {
  background: linear-gradient(to right, #f0fdfa, #f9fafb);
  padding: 18px 24px;
  border-bottom: 2px solid #e5e7eb;
}

/* Device search — hero-style prominent search */
body[data-repair-layout="ai"] .v12-device-search {
  border: 2px solid #99f6e4;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(13,148,136,.1);
  padding: 28px;
}
body[data-repair-layout="ai"] .v12-device-search input {
  min-height: 52px;
  font-size: 16px;
  border-radius: 14px;
}

/* Problem selection — card-style with clear selected state */
body[data-repair-layout="ai"] .v12-problem {
  border-radius: 14px;
  padding: 16px 18px;
  min-height: 56px;
  border: 2px solid #e5e7eb;
  transition: all .15s ease;
}
body[data-repair-layout="ai"] .v12-problem:hover {
  border-color: #99f6e4;
  background: #f0fdfa;
  transform: translateY(-1px);
}
body[data-repair-layout="ai"] .v12-problem.selected {
  border-color: #0d9488;
  background: #e6faf8;
  box-shadow: 0 4px 12px rgba(13,148,136,.1);
}
body[data-repair-layout="ai"] .v12-problem.selected span {
  background: #0d9488;
  width: 24px;
  height: 24px;
}

/* Part/product cards — premium cards in repair flow */
body[data-repair-layout="ai"] .v12-rec-card {
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  padding: 18px;
  transition: all .15s ease;
}
body[data-repair-layout="ai"] .v12-rec-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  border-color: #99f6e4;
}

/* Quote sidebar — darker, premium feel */
body[data-repair-layout="ai"] .v12-quote {
  border-radius: 16px;
  background: #fafbfc;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
body[data-repair-layout="ai"] .v12-quote h3 {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
}
body[data-repair-layout="ai"] .v12-quote-total {
  background: #f0fdf4;
  border-radius: 12px;
  padding: 16px;
}
body[data-repair-layout="ai"] .v12-quote-total strong {
  font-size: 24px;
  font-weight: 800;
  color: #0d9488;
}

/* Book Repair button — hero CTA */
body[data-repair-layout="ai"] #v12Book,
body[data-repair-layout="ai"] #v12CustomerNext {
  min-height: 52px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(13,148,136,.2);
}

/* Booking summary — dark premium card */
body[data-repair-layout="ai"] .v12-book-summary {
  border-radius: 20px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

/* Customer form — cleaner spacing */
body[data-repair-layout="ai"] .v12-customer-search input {
  min-height: 48px;
  border-radius: 14px;
  font-size: 15px;
}
body[data-repair-layout="ai"] .v12-selected-customer {
  border-radius: 14px;
  background: #f0fdf4;
  border: 1px solid #99f6e4;
  padding: 16px;
}

/* ===================================================================
   MOTION — respect user preference
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  .r81pos[data-cash-template="ai"] *,
  body[data-repair-layout="ai"] * {
    transition-duration: .001ms !important;
  }
}