/* Shared visual rollout. All colors and elevations resolve through design-tokens.css. */

body.public-site {
  background: var(--sji-page);
  color: var(--sji-ink);
}

body.public-site :is(h1, h2, h3, h4, h5, h6),
body.admin-ui :is(h1, h2, h3, h4, h5, h6) {
  color: var(--sji-ink);
}

body.public-site :is(
  .card, .home-release-card, .home-market-card, .home-package-card, .home-profile-card,
  .home-why-card, .catalog-card, .book-recommend-card-v3, .compact-recommendation-card,
  .cart-item, .checkout-panel, .checkout-item, .official-template-card, .helper-panel,
  .order-hero-ticket, .order-step, .hki-panel, .format-commerce-card, .package-addon
) {
  border-color: color-mix(in srgb, var(--sji-gold) 28%, var(--sji-line)) !important;
  background-color: var(--sji-paper) !important;
  box-shadow: var(--sji-shadow-card) !important;
  transition: transform var(--sji-transition), border-color var(--sji-transition), box-shadow var(--sji-transition);
}

body.public-site :is(
  .home-release-card, .home-market-card, .home-package-card, .home-profile-card,
  .home-why-card, .catalog-card, .book-recommend-card-v3, .compact-recommendation-card,
  .cart-item, .checkout-panel, .official-template-card, .helper-panel, .order-hero-ticket,
  .order-step, .hki-panel, .format-commerce-card, .package-addon
) {
  border-radius: var(--sji-radius-card) !important;
}

@media (hover:hover) and (pointer:fine) {
  body.public-site :is(
    .home-release-card, .home-market-card, .home-package-card, .home-profile-card,
    .home-why-card, .catalog-card, .book-recommend-card-v3, .compact-recommendation-card,
    .official-template-card, .helper-panel, .order-step, .format-commerce-card, .package-addon
  ):hover {
    transform: translateY(-6px);
    border-color: rgba(214, 158, 28, .68) !important;
    box-shadow: var(--sji-shadow-card-hover) !important;
  }
}

body.public-site .catalog-card {
  overflow: hidden;
  background: var(--sji-paper) !important;
}
body.public-site .catalog-card-rail {
  min-height: 40px;
  overflow: visible;
  padding: .45rem .65rem;
  border-color: var(--sji-line) !important;
  background: var(--sji-head-gradient) !important;
}
body.public-site .catalog-card-rail .catalog-cover-badge {
  display: inline-flex;
  max-width: calc(100% - .4rem);
  min-width: 0;
  justify-content: center;
  padding: .38rem .65rem;
  border: 1px solid rgba(214, 158, 28, .58);
  background: var(--sji-premium) !important;
  color: var(--sji-premium-text);
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  text-overflow: clip;
  box-shadow: 0 5px 14px rgba(3, 71, 31, .14);
}
body.public-site .catalog-action.info,
body.public-site .btn-book-info {
  border-color: rgba(214, 158, 28, .62) !important;
  background: var(--sji-soft) !important;
  color: var(--sji-ink) !important;
}
body.public-site .catalog-action.info:hover,
body.public-site .btn-book-info:hover {
  background: var(--sji-soft-hover) !important;
}

body.public-site :is(.service-package-choose, .hki-button, .official-template-download),
body.admin-ui :is(.btn-primary, .btn-warning) {
  border-color: var(--sji-gold-deep) !important;
  background: var(--sji-gold-gradient) !important;
  color: var(--sji-ink) !important;
  box-shadow: var(--sji-shadow-cta) !important;
  transition: transform .24s var(--sji-ease), box-shadow .24s var(--sji-ease), filter .24s var(--sji-ease);
}
body.public-site :is(.service-package-choose, .hki-button, .official-template-download):hover,
body.admin-ui :is(.btn-primary, .btn-warning):hover {
  transform: translateY(-3px);
  filter: saturate(1.06) brightness(1.03);
  box-shadow: var(--sji-shadow-cta-hover) !important;
}

body.public-site :is(.form-control, .form-select, textarea),
body.admin-ui :is(.form-control, .form-select, textarea) {
  border-color: var(--sji-line) !important;
  border-radius: var(--sji-radius-control) !important;
  background-color: var(--sji-paper) !important;
}
body.public-site :is(.form-control, .form-select, textarea):focus,
body.admin-ui :is(.form-control, .form-select, textarea):focus {
  border-color: var(--sji-gold) !important;
  box-shadow: 0 0 0 4px rgba(214, 158, 28, .13) !important;
}

body.admin-ui :is(
  .supreme-card, .orders-summary-card, .admin-service-card, .template-admin-card, .sub-summary-card
) {
  border: 1px solid color-mix(in srgb, var(--sji-gold) 24%, var(--sji-line)) !important;
  border-radius: var(--sji-radius-card) !important;
  background: var(--sji-paper) !important;
  box-shadow: var(--sji-shadow-card) !important;
}
body.admin-ui :is(.stat-card, .orders-summary-card) i {
  color: var(--sji-gold-deep);
}

body.admin-login-page .login-card {
  border-color: color-mix(in srgb, var(--sji-gold) 30%, var(--sji-line)) !important;
  background: var(--sji-paper) !important;
  box-shadow: var(--sji-shadow-card-hover) !important;
}
body.admin-login-page .login-icon,
body.admin-login-page .btn-login {
  background: var(--sji-premium-gradient) !important;
}
body.admin-login-page .login-card::before {
  background: var(--sji-gold-gradient) !important;
}

@media (max-width: 680px) {
  body.public-site :is(
    .home-release-card, .catalog-card, .book-recommend-card-v3,
    .compact-recommendation-card, .cart-item, .checkout-panel, .official-template-card,
    .order-step, .format-commerce-card, .package-addon
  ) {
    border-radius: 18px !important;
  }
  body.public-site .catalog-card-rail {
    min-height: 38px;
    padding: .4rem .55rem;
  }
  body.public-site .catalog-card-rail .catalog-cover-badge {
    max-width: 100%;
    padding: .34rem .5rem;
    font-size: .51rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.public-site :is(
    .card, .home-release-card, .catalog-card, .book-recommend-card-v3,
    .compact-recommendation-card, .official-template-card, .order-step, .format-commerce-card
  ),
  body.admin-ui :is(.supreme-card, .orders-summary-card, .admin-service-card) {
    transition: none !important;
  }
}