/* drudow.com/print-shops: the corner of the site for print shops. Built on
   landing.css (nav, buttons, sections, the questions, the footer); only
   what's new to this page is here. */

.ps-actions { justify-content: center; margin-top: 30px; }
.ps-url { margin-top: 18px; font-size: 16.5px; color: #5f636e; }
.ps-url a { color: #23252b; border-bottom: 2px solid #ffb61e; }

.ps-setup { padding-top: 90px; padding-bottom: 30px; }

/* ------------------------------------------- at the counter, and the screen */
.ps-counter { padding: 110px 0 100px; }
.ps-counter-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.ps-steps { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 16px; }
.ps-steps li { display: flex; gap: 16px; align-items: flex-start; }
.ps-steps .num { width: 36px; height: 36px; flex: none; margin-top: -3px; border-radius: 50%; background: #ffb61e; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; padding-top: 3px; }
.ps-steps p { font-size: 18px; color: #4a4e57; }
.ps-steps b { color: #23252b; font-weight: 600; }

/* A sketch of the shop's page: the waiting list and the file viewer. */
.ps-screen { border-radius: 22px; border: 2px solid #23252b; background: #ffffff; box-shadow: 10px 10px 0 #ffb61e; overflow: hidden; }
.ps-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #fbf5e8; border-bottom: 2px solid #23252b; }
.ps-bar i { width: 11px; height: 11px; border-radius: 50%; background: #e3cf9f; }
.ps-bar span { margin-left: 10px; padding: 3px 14px 1px; border-radius: 999px; background: #ffffff; border: 1.5px solid #ece3d0; font-size: 14px; color: #5f636e; }
.ps-panes { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 330px; }
.ps-queue { padding: 18px 16px; border-right: 2px solid #f1e9d8; display: flex; flex-direction: column; gap: 10px; }
.ps-qh { display: flex; align-items: center; gap: 8px; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 19px; }
.ps-qh span { min-width: 26px; height: 26px; padding: 3px 8px 0; border-radius: 999px; background: #23252b; color: #fffdf7; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.ps-job { padding: 11px 13px 9px; border-radius: 14px; border: 2px solid #ece3d0; display: flex; flex-direction: column; gap: 2px; }
.ps-job b { font-family: "Baloo 2", sans-serif; font-size: 19px; line-height: 1.1; }
.ps-job span { font-size: 13px; line-height: 1.35; color: #5f636e; }
.ps-job.on { border-color: #23252b; background: #fff6df; }
.ps-view { padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.ps-vh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ps-vh b { font-family: "Baloo 2", sans-serif; font-size: 22px; }
.ps-print { padding: 7px 16px 4px; border-radius: 999px; background: #23252b; color: #fffdf7; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 15px; }
.ps-paper { flex: 1; min-height: 150px; padding: 16px 14px; border-radius: 10px; border: 1.5px solid #ece3d0; background: #fffdf7; display: flex; flex-direction: column; gap: 9px; }
.ps-paper i { display: block; height: 7px; border-radius: 4px; background: #ece3d0; }
.ps-paper i:nth-child(1) { width: 55%; background: #e3cf9f; }
.ps-paper i:nth-child(3) { width: 82%; }
.ps-paper i:nth-child(5) { width: 64%; }
.ps-paper i:nth-child(6) { width: 40%; }
.ps-done { padding: 9px 14px 6px; border-radius: 12px; background: #25d366; color: #0b2e17; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 16px; text-align: center; box-shadow: 0 4px 0 #179247; }

/* -------------------------------------------------------- customers' files */
.ps-private { padding-top: 20px; padding-bottom: 40px; }
.ps-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.ps-card { padding: 24px 22px 22px; border-radius: 24px; background: #ffffff; border: 2px solid #ece3d0; }
.ps-card h3 { font-size: 22px; font-weight: 700; line-height: 1.15; }
.ps-card p { margin-top: 8px; font-size: 16.5px; color: #4a4e57; }
.ps-card b { color: #23252b; font-weight: 600; }

/* ------------------------------------------------------------ what you earn */
.ps-earnings { padding: 100px 0 20px; }
.ps-earn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: 44px auto 0; }
.ps-fig { padding: 24px 22px 20px; border-radius: 24px; background: #23252b; color: #fffdf7; display: flex; flex-direction: column; gap: 6px; }
.ps-fig b { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 46px; line-height: 1; color: #ffc94d; }
.ps-fig span { font-size: 17px; color: #e8e9ec; }
.ps-fine { list-style: none; padding: 0; margin: 28px auto 0; max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.ps-fine li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; color: #4a4e57; }
.ps-fine svg { width: 22px; height: 22px; flex: none; margin-top: 1px; color: #179247; }
.ps-fine b { color: #23252b; font-weight: 600; }

/* The monthly goal: the same fuse as the shop's Earnings tab, full. */
.ps-goal { max-width: 980px; margin: 22px auto 0; padding: 26px 28px; border-radius: 26px; border: 2px solid #23252b; background: linear-gradient(135deg, #fff6df, #ffe7a8); box-shadow: 8px 8px 0 #23252b; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.ps-goal-k { font-size: 14px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: #8a5300; }
.ps-goal-h { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 40px; line-height: 1.05; margin-top: 6px; color: #23252b; }
.ps-goal-h span { color: #b45f00; }
.ps-goal p { margin-top: 10px; font-size: 17px; color: #4a4e57; }
.ps-goal p b { color: #23252b; font-weight: 600; }
.ps-goal-bar { position: relative; height: 64px; }
.ps-goal-bar i { position: absolute; left: 0; right: 96px; top: 50%; height: 22px; transform: translateY(-50%); border-radius: 999px; background: linear-gradient(90deg, #ffd56b, #ffb61e 40%, #f59300); box-shadow: 0 8px 18px -8px rgba(245, 147, 0, 0.8); }
.ps-goal-bar i::before { content: ""; position: absolute; left: -8px; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translateY(-50%); background: radial-gradient(circle, #fff 0 22%, #ffe9a6 42%, rgba(255, 182, 30, 0) 70%); box-shadow: 0 0 14px 5px rgba(255, 200, 70, 0.75); }
.ps-goal-bar b { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 104px; height: 60px; border-radius: 18px; background: #23252b; color: #ffc94d; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; }

@media (max-width: 1140px) {
  .ps-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .ps-setup { padding-top: 64px; }
  .ps-counter { padding: 70px 0 60px; }
  .ps-counter-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ps-earnings { padding-top: 70px; }
  .ps-earn { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .ps-goal { grid-template-columns: minmax(0, 1fr); max-width: 520px; box-shadow: 6px 6px 0 #23252b; }
  .ps-goal-h { font-size: 32px; }
}
@media (max-width: 620px) {
  .ps-cards { grid-template-columns: minmax(0, 1fr); }
  .ps-panes { grid-template-columns: minmax(0, 1fr); }
  .ps-queue { border-right: none; border-bottom: 2px solid #f1e9d8; }
  .ps-paper { min-height: 110px; }
  .ps-screen { box-shadow: 6px 6px 0 #ffb61e; }
}