/* The customer panel, on top of /product.css.
 *
 * ⛔ NOTHING HERE REDESIGNS ANYTHING. product.css already sets the page background (#f0f5f8), the
 * text colour (#153449), the accent (#10645c / #105f59), the Vazirmatn face, the card (`section`),
 * the table and the `.primary` button. This file adds only what the panel needs and did not exist:
 * the balance figure, a message strip, the ticket bubbles, and a few small controls. Every colour
 * below is one product.css already uses.
 *
 * ⛔ AND IT IS A FILE, NOT A STYLE ATTRIBUTE. The vhost sends `style-src 'self'` with no nonce, so an
 * inline style is dropped silently - the rule would look present and do nothing.
 */

.cp-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.cp-inline { display: inline; margin: 0; }
.cp-link { background: none; border: 0; padding: 0; font: inherit; color: #10645c; cursor: pointer; }
.cp-link:hover { text-decoration: underline; }

.cp-number { font-size: clamp(30px, 6vw, 48px); font-weight: 750; color: #105f59; margin: 8px 0; }
.cp-balance { border-inline-start: 4px solid #105f59; }
.cp-quiet { color: #425d6e; font-size: .95rem; }

.cp-ok { border-inline-start: 4px solid #105f59; background: #ecf7f3; }
.cp-bad { border-inline-start: 4px solid #b57516; background: #fff9eb; }

/* The form controls product.css does not define, kept to the same shape as its own inputs. */
.field { display: block; margin: 14px 0; font-weight: 650; }
.inp {
  display: block; width: 100%; margin-top: 6px; font: inherit; color: inherit;
  background: white; border: 1px solid #8ca4b4; border-radius: 8px; padding: 10px 14px;
}
textarea.inp { resize: vertical; min-height: 96px; font-family: inherit; }
.btn {
  background: white; color: #105f59; border: 1px solid #105f59; border-radius: 8px;
  padding: 10px 18px; font: inherit; cursor: pointer;
}
.btn:hover { background: #ecf7f3; }
.cp-code {
  width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem; word-break: break-all; background: #f7fbfc; border: 1px solid #d2dfe7;
  border-radius: 8px; padding: 12px;
}

/* A ticket thread: the customer on the start side, the administrator on the end side, so a glance
   says who wrote what without depending on colour alone - the label above each message says it too. */
.cp-msg { border: 1px solid #d2dfe7; border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.cp-msg p { margin: 4px 0; }
.cp-msg-customer { background: #ecf7f3; margin-inline-end: 12%; }
.cp-msg-admin { background: #ffffff; margin-inline-start: 12%; border-inline-start: 3px solid #105f59; }

/* The panel is read on a phone at the reception desk more often than on a desktop. */
@media (max-width: 650px) {
  .cp-msg-customer, .cp-msg-admin { margin-inline: 0; }
  .cp-nav { width: 100%; gap: 12px; }
  .cp-number { font-size: 32px; }
}

/* A viewer who has asked for less motion gets none. There is no animation in this panel, and this
   states that on purpose so a future addition inherits the rule rather than forgetting it. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* First-party fail-open captcha widget + the sign-in language picker. Colours product.css already
   uses; no motion. */
.cp-captcha { display: flex; align-items: center; gap: 9px; margin: 14px 0; padding: 10px 13px;
  border: 1px solid #d2dfe7; border-radius: 9px; background: #f7fbfc; font-size: .95rem; color: #425d6e; }
.cp-captcha-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #8ca4b4; flex: 0 0 auto; }
.cp-captcha-dot.ok { background: #105f59; border-color: #105f59; }
.cp-langs { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-langs a { font-size: 12px; color: #425d6e; text-decoration: none; border: 1px solid #d2dfe7;
  border-radius: 7px; padding: 3px 8px; background: white; }
.cp-langs a.on { background: #105f59; color: white; border-color: #105f59; }