/* ====== FILE PATH: /opt/printhub/server/app/static/kiosk/style.css ============ */

/* 🔒 Disable browser gestures */
html, body {
  touch-action: manipulation;
}

/* ===============================
   GLOBAL
================================ */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f4f6f8;
  font-family: Arial, sans-serif;
}

/* ===============================
   SCREEN SYSTEM
================================ */
.screen {
  display: none;
}

.screen.active {
  display: block;
  padding-top: 80px; /* header offset */
}

/* ===============================
   DEVICE DISABLED SCREEN
================================ */

#screen-device-disabled {
  position: fixed;
  inset: 0;
  z-index: 5000;

  background: #000;
  color: #fff;
}

.device-disabled-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.device-disabled-box h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.device-disabled-box p {
  font-size: 18px;
  opacity: 0.9;
}


/* ===============================
   ADS SCREEN
================================ */
/* ===============================
   ADS SCREEN (VIDEO FIXED)
================================ */
.ads-screen {
  position: fixed;

  top: 70px;                 /* 👈 header height */
  left: 0;
  width: 100%;
  height: calc(100% - 70px); /* 👈 remaining space */

  background: #000;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;
}

.ads-screen video {
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: top center;   /* 🔥 small improvement */
  background: #000;

  transition: all 0.3s ease;
}


/* ===============================
   HEADER
================================ */
.global-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;

  width: 100%;
  height: 70px;
  padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: #fff;
  border-bottom: 2px solid #ddd;
}

.header-logo {
  height: 50px;
}

.header-center {
  text-align: center;
}

.brand-title {
  font-size: 22px;
  font-weight: bold;
  color: #0d6efd;
}

.brand-sub {
  font-size: 14px;
  color: #444;
}

/* ===============================
   KIOSK PRIMARY BUTTONS
================================ */
.big-btn {
  height: 110px;              /* DOUBLE height for touch */
  font-size: 28px;
  font-weight: bold;
  border-radius: 14px;
  touch-action: manipulation;
}

/* ===============================
   RATES TABLE
================================ */
.rate-desc-table,
.rate-value-table {
  width: 100%;
}

.rate-desc-table td {
  font-size: 14px;
  padding: 6px;
  text-align: center;
}

.rate-value-table td {
  font-size: 15px;
  font-weight: bold;
  padding: 6px;
  text-align: center;
}

/* ===============================
   PRINTER STATUS
================================ */
.printer-desc,
.printer-status {
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
}

.printer-status span {
  display: block;
  text-align: center;
}

/* ===============================
   CARDS
================================ */
.card {
  margin-bottom: 6px;
  text-align: center;
}

/* ===============================
   BOTTOM ACTION BAR
================================ */
.helpline-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1500;

  width: 100%;
  padding: 6px;

  background: #fff;
  border-top: 2px solid #ccc;
}


.action-btn {
  font-size: 1rem;
  padding: 10px;
}

/* ===============================
   POPUPS (HELPLINE / QR / OFFERS)
================================ */
.helpline-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;

  padding: 20px;
  text-align: center;
  background: rgba(0,0,0,0.85);
}

.helpline-img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 10px;
}


/* ===============================
   NUMERIC KEYPAD (WALLET LOGIN)
================================ */

.keypad {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;

  background: #ffffff;
  padding: 14px;
  border-radius: 12px;

  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  grid-gap: 10px;
  justify-content: center;
}

.keypad-grid button {
  height: 60px;
  width: 70px;

  font-size: 18px;
  font-weight: bold;

  border-radius: 8px;
  border: 1px solid #ccc;

  background: #f8f9fa;
}

.keypad-grid button:active {
  background: #e0e0e0;
}

/* CLEAR button */
.keypad-grid button:nth-child(10) {
  background: #f8d7da;
  color: #842029;
}

/* OK button */
.keypad-grid button:nth-child(12) {
  background: #198754;
  color: #ffffff;
}

/* ===============================
   FILE SELECTION GRID
================================ */

.file-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.file-item {
  position: relative;
  border: 2px solid #ddd;
  border-radius: 10px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  background: #fff;
}

.file-item.selected {
  border-color: #0d6efd;
}

.file-item img {
  width: 100%;
  height: 90px;
  object-fit: contain;
}

.select-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #0d6efd;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===============================
   PRINT PREVIEW
================================ */

.preview-box {
  width: 100%;
  height: 70vh;
  border: 2px solid #ccc;
  background: #fff;
}


/* ===============================
   PRINT PREVIEW IFRAME
=============================== */
.preview-box img {
  width: 100%;
  height: 100%;
  border: none;
  background: #f5f5f5;
}


/* ===============================
   LOCAL DOCUMENT BROWSER (FIXED)
================================ */

#screen-local-browser {
  padding-top: 80px;
  padding-bottom: 90px;
  background: #f4f6f8;
}

/* USE EXISTING file-grid */
#localGrid.file-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* USE EXISTING file-item */
#localGrid .file-item {
  border-radius: 14px;
  padding: 16px 10px;
  background: #fff;
}

/* ICON inside file-item */
#localGrid .file-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 6px;
}

/* FILE NAME */
#localGrid .file-item div {
  font-size: 13px;
  word-break: break-word;
}

/* BOTTOM BACK BAR */
#screen-local-browser .local-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background: #fff;
  border-top: 2px solid #ccc;
  z-index: 1600;
}

/* Folder specific styling */
.file-item.folder {
  border: 2px dashed #f4c430;
  background: #fffbea;
}

/* Folder icon slightly bigger */
.file-item.folder img {
  width: 64px;
  height: 64px;
}

/* Folder label */
.file-item.folder div {
  font-weight: 600;
}


/* ===============================
   CONFIRM PRINT (CENTERED BOX)
================================ */

.confirm-box {
  width: 100%;
  max-width: 420px;   /* 👈 perfect kiosk width */
  margin-top: 40px;
}

.confirm-box .card {
  border-radius: 14px;
}

.confirm-box hr {
  margin: 10px 0;
}

/* ===============================
   WALLET DEBIT POPUP
================================ */

.wallet-popup{

  display:none;

  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.85);

  z-index:4000;

  align-items:center;
  justify-content:center;

}

.wallet-popup-box{

  width:380px;
  background:#fff;
  padding:20px;
  border-radius:12px;

}

/* when wallet popup is open */
.wallet-popup-open .keypad{
  z-index: 5000;
}


/* ===============================
   SUBTEXT FONT
================================ */
.btn-subtext{
    font-size:16px;       /* smaller than main text */
    font-weight:500;
    opacity:0.9;
}

/* Different color for better visibility */
.btn-primary .btn-subtext{
    color:#e6f0ff;
}

.btn-success .btn-subtext{
    color:#d4ffd4;
}


/* ===============================
   PRINT OPTION BUTTON
================================ */
.option-btn {
  font-weight: bold;
  padding: 12px;
}

.option-btn.active {
  background: #0d6efd !important;
  color: #fff !important;
  border-color: #0d6efd !important;
}


/* ===============================
   COPIES SIMPLE CONTROL
================================ */

.copies-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.copies-btn {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: none;
  background: #212529;
  color: #fff;
  font-size: 24px;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;
}

.copies-btn:active {
  background: #000;
}

.copies-value {
  min-width: 40px;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}

/* Fix vertical alignment with label */
.copies-control {
  margin-top: 2px;
}

/* Ensure consistent height with dropdown */
#page_range {
  height: 48px;
}


/* ===============================
   TOOLS
================================ */
.big-btn.active {
  border: 3px solid #000;
  transform: scale(0.98);
}