/* Styles for the Laravel store screens (cart, checkout, account, flash messages).
   Built on the tokens in style.css: --ink, --teal, --teal-dark, --coral, --line. */

/* Mobile menu toggle (style.css hides .navlinks under 720px and shows .navlinks.open) */
.nav-toggle { display: none; border: 0; background: transparent; color: #fff; font-size: 22px; padding: 8px 12px; cursor: pointer; }
@media (max-width: 720px) { .nav-toggle { display: block; } }
.cart-button { text-decoration: none; }

/* Flash messages */
.flash-wrap { padding-top: 14px; }
.flash { padding: 12px 16px; border-radius: 8px; font: 14px/1.5 Arial, sans-serif; margin-bottom: 8px; }
.flash a { margin-left: 8px; font-weight: 700; color: inherit; text-decoration: underline; }
.flash-success { background: #e8f7ef; color: #146c43; border: 1px solid #bfe6d0; }
.flash-error { background: #fdeeea; color: #a2381f; border: 1px solid #f6c9bd; }

/* Inline add-to-cart forms keep the card layout */
.cart-form { margin: 0; }
.cart-form .add-cart { margin-top: 0; }
.add-cart.added { background: var(--teal); color: #fff; }
.field-error { color: #b4361f; font: 12px Arial, sans-serif; margin-top: 4px; }

/* Generic store panels */
.store-panel { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 10px 26px rgba(7,59,120,.06); font-family: Arial, sans-serif; }
.store-panel h2, .store-panel h3 { margin: 0 0 14px; color: var(--teal-dark); }
.store-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 950px) { .store-grid { grid-template-columns: 1fr; } }

/* Cart table */
.cart-table { width: 100%; border-collapse: collapse; font: 14px Arial, sans-serif; }
.cart-table th { text-align: left; color: #6b7c80; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.cart-table td { padding: 14px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink); }
.cart-item { display: flex; gap: 12px; align-items: center; }
.cart-thumb { width: 52px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 6px; background: #eef5fc; font-size: 26px; overflow: hidden; }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item small { display: block; color: #7a8a8e; }
.qty-input { width: 64px; padding: 7px; border: 1px solid #cfdcda; border-radius: 6px; font-size: 14px; }
.link-btn { border: 0; background: none; color: #b4361f; cursor: pointer; font: 13px Arial, sans-serif; padding: 0; }
.cart-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .cart-table thead { display: none; }
  .cart-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .cart-table td { border: 0; padding: 2px 0; }
  .cart-table td:first-child { grid-column: 1 / -1; }
}

/* Order summary */
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: #4f6266; }
.summary-row.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; font-size: 18px; font-weight: 700; color: var(--teal-dark); }
.summary-note { font-size: 12px; color: #1b8a5a; margin: 6px 0 0; }
.summary-items { max-height: 280px; overflow: auto; margin-bottom: 8px; }
.summary-items div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--ink); border-bottom: 1px dashed var(--line); }
.store-panel .btn { display: block; width: 100%; text-align: center; border: 0; cursor: pointer; font-size: 15px; margin-top: 14px; }

/* Forms */
.store-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.store-form label { display: grid; gap: 6px; font: 700 13px Arial, sans-serif; color: var(--teal-dark); }
.store-form .wide { grid-column: 1 / -1; }
.store-form input, .store-form select, .store-form textarea { width: 100%; padding: 11px 12px; border: 1px solid #cfdcda; border-radius: 6px; font: 14px Arial, sans-serif; color: var(--ink); background: #fff; }
.store-form input:focus, .store-form select:focus, .store-form textarea:focus { outline: 2px solid rgba(11,99,182,.25); border-color: var(--teal); }
.store-form .check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.store-form .check input { width: auto; }
@media (max-width: 720px) { .store-form { grid-template-columns: 1fr; } }

.pay-options { display: grid; gap: 10px; }
.pay-option { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid #cfdcda; border-radius: 8px; cursor: pointer; font: 14px Arial, sans-serif; color: var(--ink); }
.pay-option input { width: auto; accent-color: var(--teal); }
.pay-option small { display: block; color: #7a8a8e; font-weight: 400; }
.pay-option:has(input:checked) { border-color: var(--teal); background: #eef5fc; }

/* Auth */
.auth-wrap { max-width: 460px; margin: 0 auto; }
.auth-wrap .store-form { grid-template-columns: 1fr; }
.auth-switch { text-align: center; margin-top: 16px; font: 14px Arial, sans-serif; }
.auth-switch a { color: var(--coral); font-weight: 700; }

/* Order status */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font: 700 11px Arial, sans-serif; text-transform: uppercase; letter-spacing: .03em; background: #eef2f2; color: #4f6266; }
.badge-paid, .badge-delivered, .badge-confirmed, .badge-closed { background: #e3f6ec; color: #146c43; }
.badge-pending, .badge-new, .badge-processing, .badge-in_progress { background: #fff5dc; color: #8a5a00; }
.badge-shipped { background: #e6f0fb; color: #1d5ba8; }
.badge-failed, .badge-cancelled, .badge-refunded { background: #fdeeea; color: #a2381f; }
.order-steps { display: flex; gap: 0; margin: 18px 0; font: 12px Arial, sans-serif; }
.order-steps span { flex: 1; text-align: center; padding: 10px 4px; background: #eef2f2; color: #7a8a8e; border-right: 2px solid #fff; }
.order-steps span.done { background: var(--teal); color: #fff; font-weight: 700; }
.order-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 12px 0 18px; font: 14px Arial, sans-serif; }
.order-meta b { display: block; color: #7a8a8e; font-size: 12px; font-weight: 400; }
.thank-icon { width: 64px; height: 64px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 32px; }
.center { text-align: center; }
.empty-state { text-align: center; padding: 40px 20px; font-family: Arial, sans-serif; color: #6b7c80; }
.empty-state .btn { display: inline-block; width: auto; margin-top: 14px; }

/* Pagination */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 18px; font: 13px Arial, sans-serif; flex-wrap: wrap; }
.pager a, .pager span { padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--teal-dark); }
.pager .active { background: var(--teal-dark); color: #fff; border-color: var(--teal-dark); }
.pager .disabled { color: #b4c0c2; }

/* Search results */
.search-section { margin-bottom: 30px; }

/* School cards with an uploaded photo / logo */
.school-tile.has-photo { background-size: cover; background-position: center; color: #fff; }
.school-tile.has-photo b, .school-tile.has-photo small { text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.school-tile.has-photo .school-logo { border-color: rgba(255,255,255,.9); background: rgba(255,255,255,.12); color: #fff; }
.school-logo-img { object-fit: contain; background: #fff !important; padding: 4px; }

/* Stationery / uniform cards with an uploaded product photo */
.su-image.su-photo { display: block; height: 190px; overflow: hidden; background: #f6f9f9; border-bottom: 1px solid var(--line); padding: 12px; }
.su-image.su-photo img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; transition: transform .3s ease; }
.su-card:hover .su-photo img { transform: scale(1.04); }
.su-image.su-photo .discount { position: absolute; top: 10px; left: 10px; z-index: 1; font-size: 10px; filter: none; line-height: 1.4; }
.su-image.su-photo small { z-index: 1; }
@media (max-width: 720px) { .su-image.su-photo { height: 140px; } }