/* AF ShopBook V27 — portal polish based on production visual QA */

/*
 * The global brand stylesheet replaces every .portal-brand img with the compact
 * AF mark via the CSS content property. The portal header needs the complete
 * wordmark, so render it as a theme-aware background instead of an <img>.
 */
.portal-brand-v26 {
  flex: 0 0 248px;
  width: 248px;
  height: 58px;
  border-radius: 0;
  background: url("assets/af-shopbook-logo-light.png") center / contain no-repeat;
}
.portal-brand-v26 .brand-full-logo {
  display: none !important;
  content: normal !important;
}
html[data-theme="dark"] .portal-brand-v26 {
  background-image: url("assets/af-shopbook-logo-dark.png");
}

/* Light mode must remain light. The dark renewal panel is now dark-mode only. */
html[data-theme="light"] .subscription-action {
  color: var(--portal-ink);
  border-inline-end: 1px solid var(--portal-line);
  background:
    radial-gradient(circle at 18% 16%, rgba(254,121,13,.17), transparent 31%),
    linear-gradient(145deg, #fffaf5, #f7f9fc 70%);
}
html[data-theme="light"] .subscription-action::after {
  color: rgba(25,30,41,.035);
}
html[data-theme="light"] .subscription-action b {
  color: var(--portal-ink);
}
html[data-theme="light"] .subscription-action p {
  color: #667085;
}
html[data-theme="light"] .subscription-action .action-icon {
  color: var(--portal-orange);
  background: rgba(254,121,13,.12);
  border: 1px solid rgba(254,121,13,.20);
}
html[data-theme="light"] .subscription-support {
  color: #8b4b12;
}
html[data-theme="dark"] .subscription-action {
  color: #fff;
  background:
    radial-gradient(circle at 22% 15%, rgba(254,121,13,.24), transparent 28%),
    linear-gradient(145deg, #1d2430, #10151d);
}

/* Cleaner entitlement checklist: less visual noise while keeping plan gating clear. */
.entitlements-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.entitlement-item {
  position: relative;
  min-height: 84px;
  padding: 15px 15px 15px 48px;
  border: 1px solid var(--portal-line);
  background: color-mix(in srgb, var(--portal-soft) 92%, #fff);
  overflow: hidden;
}
html[dir="rtl"] .entitlement-item {
  padding: 15px 48px 15px 15px;
}
.entitlement-item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--portal-orange);
  opacity: .65;
}
.entitlement-item > span {
  position: absolute;
  inset-inline-start: 13px;
  top: 50%;
  translate: 0 -50%;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 1000;
}
.entitlement-item.enabled > span {
  color: #087a4f;
  background: #e3f8ee;
  border: 1px solid #c4ecd9;
}
.entitlement-item.locked > span {
  color: #a65b00;
  background: #fff0db;
  border: 1px solid #f2d19e;
}
.entitlement-item b {
  white-space: normal;
  line-height: 1.45;
}
.entitlement-item small {
  margin-top: 5px;
}
html[data-theme="dark"] .entitlement-item {
  background: #111822;
}
html[data-theme="dark"] .entitlement-item.enabled > span {
  color: #69ddb1;
  background: #123b2d;
  border-color: #205b46;
}

/* Inventory rows never expose database IDs and use a calm icon instead of a tag. */
.inventory-records article {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  min-height: 64px;
  padding: 11px 13px;
  gap: 12px;
}
.inventory-record-type {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--portal-orange);
  background: rgba(254,121,13,.10);
  border: 1px solid rgba(254,121,13,.18);
  font-size: 1rem;
  line-height: 1;
}
.inventory-records article b {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.inventory-records article strong {
  padding: 6px 9px;
  border-radius: 9px;
  background: var(--portal-soft);
  border: 1px solid var(--portal-line);
}

@media (max-width: 980px) {
  .portal-brand-v26 { flex-basis: 212px; width: 212px; height: 50px; }
  .entitlements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .portal-brand-v26 { flex-basis: 174px; width: 174px; height: 44px; }
}
@media (max-width: 560px) {
  .portal-brand-v26 { flex-basis: 142px; width: 142px; height: 38px; }
  .entitlements-grid { grid-template-columns: 1fr; }
  .inventory-records article { grid-template-columns: 34px minmax(0, 1fr); }
  .inventory-records article strong { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}