/* COCO AI: cocoa-brown identity; keep transaction layouts and status colors intact. */
:root {
  --coco-ink: #4d2d20;
  --coco-accent: #8b4b32;
  --coco-hover: #6e3825;
  --coco-copper: #a85d3c;
  --coco-tint: #f4e8df;
  --coco-paper: #faf8f5;
  --coco-line: #e9e0d8;
}
.coco-lockup {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  color: var(--coco-ink);
  text-decoration: none;
  line-height: 1;
}
.coco-lockup .coco-mark {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.coco-type { display: flex; flex-direction: column; gap: 6px; }
.coco-wordmark {
  display: block;
  font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1.6px;
  line-height: .98;
  color: var(--coco-ink);
}
.coco-wordmark span { color: var(--coco-copper); }
.coco-lockup .coco-caption {
  display: block;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 1.5px;
  font-weight: 500;
  color: #786153;
  white-space: nowrap;
}
.coco-lockup:focus-visible { outline: 3px solid #c8997d; outline-offset: 5px; border-radius: 5px; }
.coco-redeem {
  --bg: var(--coco-paper);
  --ink: #322820;
  --muted: #76695f;
  --line: var(--coco-line);
  --blue: var(--coco-accent);
  --tint: var(--coco-tint);
  background: var(--coco-paper);
  color: var(--ink);
}
body.coco-redeem { background: var(--coco-paper); }
.coco-redeem .primary:hover { background: var(--coco-hover); }
.coco-redeem .notice { border-color: #e7cbb9; color: #714029; }
.coco-redeem nav { color: #6c584c; }
.coco-redeem input:not([type=checkbox]), .coco-redeem textarea, .coco-redeem select { background: #fdfbf9; border-color: #e0d7cf; }
.coco-redeem input:focus, .coco-redeem textarea:focus, .coco-redeem select:focus { border-color: var(--coco-accent); }
.coco-redeem :is(button,a,summary):focus-visible { outline-color: #c8997d; }
.coco-redeem .eyebrow { color: #866650; }
.coco-redeem dialog::backdrop { background: #35231966; }
.coco-redeem .site-footer { color: #817168; }
/* Merchant login and the existing admin UI retain their established layout. */
.coco-admin, .coco-admin-login {
  --primary: var(--coco-accent);
  --primary-hover: var(--coco-hover);
  --primary-soft: var(--coco-tint);
  --accent: var(--coco-accent);
  --accent-glow: #8b4b3224;
  --bg: var(--coco-paper);
  --bg-page: var(--coco-paper);
  --bg-dark: var(--coco-paper);
  --shadow-focus: 0 0 0 4px #8b4b3224;
}
.coco-admin-login { background: var(--coco-paper); }
.coco-admin-login .coco-lockup { margin-bottom: 25px; }
.coco-admin .sidebar-brand { gap: 9px; }
.coco-admin .coco-lockup .coco-mark { width: 52px; height: 52px; flex-basis: 52px; }
.coco-admin .coco-wordmark { font-size: 28px; }
.coco-admin .bg-glow { display: none; }
/* Shop styling is isolated from other ACG themes and installed plugins. */
.coco-shop {
  --acg-primary: var(--coco-accent);
  --acg-secondary: var(--coco-copper);
  --acg-border: var(--coco-line);
  --bs-primary: var(--coco-accent);
  --bs-primary-rgb: 139,75,50;
  --bs-link-color: var(--coco-accent);
  --bs-link-hover-color: var(--coco-hover);
  background-color: var(--coco-paper);
}
body.coco-shop { background-image: none !important; }
.coco-shop .navbar-acg { background: #fffdfb; border-bottom: 1px solid var(--coco-line); }
.coco-shop .navbar-brand.coco-lockup { margin-right: 28px; padding: 4px 0; }
.coco-shop .navbar-brand.coco-lockup .coco-mark { width: 56px; height: 56px; flex-basis: 56px; }
.coco-shop .navbar-brand.coco-lockup .coco-wordmark { font-size: 30px; }
.coco-shop .navbar-acg .nav-link:hover, .coco-shop .navbar-acg .nav-link.active { color: var(--coco-accent); }
.coco-shop .btn-primary {
  --bs-btn-bg: var(--coco-accent);
  --bs-btn-border-color: var(--coco-accent);
  --bs-btn-hover-bg: var(--coco-hover);
  --bs-btn-hover-border-color: var(--coco-hover);
  --bs-btn-active-bg: var(--coco-hover);
  --bs-btn-active-border-color: var(--coco-hover);
  --bs-btn-disabled-bg: var(--coco-accent);
  --bs-btn-disabled-border-color: var(--coco-accent);
  --bs-btn-focus-shadow-rgb: 139,75,50;
}
.coco-shop .form-control:focus { border-color: #b88060; box-shadow: 0 0 0 3px #8b4b321a; }
.coco-shop .auth-wrapper { background: var(--coco-paper); }
.coco-shop .auth-card { color: #322820; }
.coco-shop .brand-header { margin-bottom: 22px; }
.coco-shop .brand-header .coco-lockup { text-align: left; }
.coco-shop .brand-header .coco-mark { width: 76px; height: 76px; flex-basis: 76px; }
.coco-shop .auth-subtitle, .coco-shop .form-floating>label, .coco-shop .form-check { color: #73645a; }
.coco-shop .text-link { color: var(--coco-accent); }
.coco-shop .text-link:hover { color: var(--coco-hover); }
.coco-shop .btn-gradient { background: var(--coco-accent); border-color: var(--coco-accent); box-shadow: none; }
.coco-shop .btn-gradient:hover { background: var(--coco-hover); }
.coco-shop .form-check-input:checked { background-color: var(--coco-accent); border-color: var(--coco-accent); }
.uc-brand__logo.coco-account-mark { object-fit: contain; width: 46px; height: 46px; border-radius: 0; }
@media (max-width:991.98px) {
  .coco-shop .navbar-acg>.container { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; }
  .coco-shop .navbar-brand.coco-lockup { grid-column: 1; grid-row: 1; justify-self: start; }
  .coco-shop .navbar-acg .lang-switch { grid-column: 2; grid-row: 1; margin-left: 0 !important; }
  .coco-shop .navbar-toggler { grid-column: 3; grid-row: 1; margin: 0; }
  .coco-shop #navbarNav { grid-column: 1 / -1; grid-row: 2; }
  .coco-shop .navbar-acg :is(.user-login-box,.user-info-box) { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin: 0 0 8px !important; }
  .coco-shop #navbarNav:not(.show)~:is(.user-login-box,.user-info-box) { display: none; }
}
@media (max-width:650px) {
  .coco-lockup { gap: 7px; }
  .coco-lockup .coco-mark { width: 50px; height: 50px; flex-basis: 50px; }
  .coco-wordmark { font-size: 27px; letter-spacing: -1.3px; }
  .coco-lockup .coco-caption { font-size: 9px; letter-spacing: .8px; }
  .coco-redeem .topbar { padding-left: 14px; padding-right: 17px; }
  .coco-redeem .topbar nav { gap: 13px; }
  .coco-shop .navbar-brand.coco-lockup { margin-right: 10px; }
  .coco-shop .navbar-brand.coco-lockup .coco-mark { width: 44px; height: 44px; flex-basis: 44px; }
  .coco-shop .navbar-brand.coco-lockup .coco-wordmark { font-size: 25px; }
  .coco-shop .navbar-brand.coco-lockup .coco-caption { font-size: 9px; }
}
@media (max-width:380px) {
  .coco-redeem .topbar nav { gap: 10px; font-size: 11px; }
  .coco-redeem .coco-lockup .coco-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .coco-redeem .coco-wordmark { font-size: 24px; }
}