/* START: Base page styling
   What it does: Sets the shared dark background, default font, and light text used by public-facing pages. */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #111827;
  color: #ffffff;
}
/* END: Base page styling */

/* START: Centered page container
   What it does: Centers the public page content vertically and horizontally with padding for smaller screens. */
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
/* END: Centered page container */

/* START: Redemption workspace layout
   What it does: Splits the redemption screen into a stable lookup panel and a separate result/action panel. */
.redemption-workspace {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  position: relative;
}

.redemption-workspace::before,
.redemption-workspace::after {
  content: "";
  position: fixed;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: #4b5563;
  border-radius: 999px;
  opacity: 0.72;
  pointer-events: none;
}

.redemption-workspace::before {
  left: calc(50% - 5px);
}

.redemption-workspace::after {
  left: calc(50% + 5px);
}
/* END: Redemption workspace layout */

/* START: Main public page card
   What it does: Styles the redemption and device approval card surfaces. */
.card {
  width: 100%;
  max-width: 420px;
  background: #1f2937;
  padding: 28px;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
/* END: Main public page card */

/* START: Device approval two-column layout
   What it does: Keeps request/replacement details on the left and manager actions visible in a dedicated right column. */
.device-approval-card {
  max-width: 960px;
}

.device-approval-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
  gap: 28px;
  align-items: start;
}

.device-approval-details {
  min-width: 0;
  font-size: 16px;
  font-weight: normal;
}

.device-approval-actions {
  align-self: center;
  display: grid;
  gap: 12px;
}

.device-approval-actions button {
  margin-top: 0;
}

.device-approval-actions .reject-device-button {
  background: #b91c1c;
  border: 1px solid #f87171;
  color: #ffffff;
}

.device-approval-actions .reject-device-button:hover {
  background: #991b1b;
}

.device-approval-actions #approvalActionResult {
  margin-top: 2px;
}
/* END: Device approval two-column layout */

/* START: Lookup and result panel sizing
   What it does: Keeps the split redemption cards aligned and gives mobile scrolling a clear target. */
.lookup-panel,
.result-panel {
  box-sizing: border-box;
  align-self: center;
  justify-self: center;
}

.lookup-panel {
  max-width: 480px;
}

.result-panel {
  min-height: 360px;
  scroll-margin-top: 18px;
  width: 100%;
  max-width: 520px;
}

.result-card-shell {
  box-sizing: border-box;
  max-width: 520px;
}
/* END: Lookup and result panel sizing */

/* START: Public page heading style
   What it does: Sets the primary heading size and removes extra top spacing. */
h1 {
  margin-top: 0;
  font-size: 26px;
}
/* END: Public page heading style */

/* START: Result panel heading style
   What it does: Gives the customer result panel a clear but compact title. */
h2 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 22px;
  text-align: center;
}
/* END: Result panel heading style */

/* START: Form label style
   What it does: Gives form labels spacing and bold weight for staff readability. */
label {
  display: block;
  margin-top: 16px;
  margin-bottom: 6px;
  font-weight: bold;
}
/* END: Form label style */

/* START: Form input style
   What it does: Styles phone, code, and other public form inputs with full width and readable spacing. */
input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px;
  border-radius: 10px;
  border: 1px solid #4b5563;
  font-size: 16px;
}
/* END: Form input style */

/* START: Money input wrapper
   What it does: Adds a fixed dollar sign prefix to currency amount fields while keeping the input easy to read. */
.money-input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  background: #ffffff;
  border: 1px solid #4b5563;
  border-radius: 10px;
  overflow: hidden;
}

.money-input-wrapper span {
  flex: 0 0 auto;
  padding-left: 13px;
  color: #111827;
  font-size: 18px;
  font-weight: bold;
}

.money-input-wrapper input {
  border: none;
  border-radius: 0;
  padding-left: 7px;
}

.money-input-wrapper input:focus {
  outline: none;
}
/* END: Money input wrapper */

/* START: Primary button style
   What it does: Provides the default large button styling for public page actions. */
button {
  width: 100%;
  margin-top: 22px;
  padding: 14px;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}
/* END: Primary button style */

/* START: Result action button row
   What it does: Places customer reward, bonus, and earned-points actions in a separate row below the result card. */
.result-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  padding: 0 4px;
}

.result-actions.two-button-row button:last-child {
  grid-column: 3;
}

.result-actions button {
  min-height: 58px;
  margin-top: 0;
  padding: 12px 10px;
  background: #2563eb;
  color: #f9fafb;
  border: 1px solid #60a5fa;
  font-size: 14px;
  line-height: 1.15;
}

.result-actions button:hover {
  background: #1d4ed8;
}

.result-actions button.action-redeem {
  background: #0891b2;
  border-color: #67e8f9;
}

.result-actions button.action-redeem:hover {
  background: #0e7490;
}

.result-actions button.action-bonus {
  background: #2563eb;
  border-color: #60a5fa;
}

.result-actions button.action-bonus:hover {
  background: #1d4ed8;
}

.result-actions button.action-earned {
  background: #7c3aed;
  border-color: #c4b5fd;
}

.result-actions button.action-earned:hover {
  background: #6d28d9;
}

.result-actions button:disabled,
.result-actions button:disabled:hover,
.result-actions button.action-redeem:disabled,
.result-actions button.action-redeem:disabled:hover,
.result-actions button.action-bonus:disabled,
.result-actions button.action-bonus:disabled:hover,
.result-actions button.action-earned:disabled,
.result-actions button.action-earned:disabled:hover {
  background: #374151;
  border-color: #4b5563;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none;
}
/* END: Result action button row */

/* START: Result message box
   What it does: Styles the large status message that appears after lookups, redemptions, and approval actions. */
.result {
  margin-top: 24px;
  padding: 20px;
  border-radius: 14px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
/* END: Result message box */

/* START: Bonus manager authorization row
   What it does: Keeps manager selection and the compact masked PIN field aligned while allowing a clean mobile stack. */
.bonus-authorization-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 10px;
  margin-top: 16px;
  text-align: left;
}

.bonus-authorization-row label {
  display: block;
  font-weight: bold;
  min-width: 0;
}

.bonus-authorization-row select,
.bonus-authorization-row input {
  box-sizing: border-box;
  height: 42px;
  margin-top: 6px;
  padding: 0 10px;
  width: 100%;
}
/* END: Bonus manager authorization row */

/* START: Empty result state
   What it does: Shows a calm waiting message before a customer lookup has been submitted. */
.result-empty {
  background: #111827;
  border: 1px dashed #4b5563;
  color: #d1d5db;
  font-size: 18px;
  font-weight: bold;
}
/* END: Empty result state */

/* START: Hidden utility class
   What it does: Hides elements until JavaScript reveals them. */
.hidden {
  display: none;
}
/* END: Hidden utility class */

/* START: Green success status
   What it does: Marks successful results and approvals with a green background. */
.green {
  background: #16a34a;
}
/* END: Green success status */

/* START: Yellow warning status
   What it does: Marks warning or ineligible states with a yellow background. */
.yellow {
  background: #ca8a04;
}
/* END: Yellow warning status */

/* START: Red error status
   What it does: Marks errors, rejections, and blocked states with a red background. */
.red {
  background: #dc2626;
}
/* END: Red error status */

/* START: Store logo image
   What it does: Keeps store logos responsive inside the public card. */
.logo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-bottom: 16px;
}
/* END: Store logo image */

/* START: Store name display
   What it does: Shows the active store name below the page title. */
#storeName {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #9ca3af;
  letter-spacing: 1px;
}
/* END: Store name display */

/* START: Mobile back-to-lookup button
   What it does: Provides a floating shortcut back to the lookup form on stacked small screens. */
#mobileBackToLookup {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 9997;
  width: auto;
  margin: 0;
  background: #2563eb;
  color: #f9fafb;
  border: 1px solid #60a5fa;
  box-shadow: 0 14px 32px rgba(0,0,0,0.35);
}
/* END: Mobile back-to-lookup button */

/* START: Small screen redemption layout
   What it does: Stacks lookup above results and enables the guided back-to-lookup control for tablet and phone widths. */
@media (max-width: 860px) {
  .container {
    align-items: flex-start;
    padding: 16px;
  }

  .redemption-workspace {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 86px;
  }

  .redemption-workspace::before,
  .redemption-workspace::after {
    display: none;
  }

  .card {
    max-width: 100%;
  }

  .device-approval-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .device-approval-actions {
    position: static;
  }

  .result-panel {
    min-height: 300px;
  }

  .result-actions {
    grid-template-columns: 1fr;
  }

  .result-actions.two-button-row button:last-child {
    grid-column: auto;
  }

  #mobileBackToLookup.visible {
    display: block;
  }
}
/* END: Small screen redemption layout */

/* START: Narrow bonus authorization layout
   What it does: Stacks manager and PIN controls only when a phone-width result card cannot fit both comfortably. */
@media (max-width: 480px) {
  .bonus-authorization-row {
    grid-template-columns: 1fr;
  }
}
/* END: Narrow bonus authorization layout */