/**
 * 纸鸢社 · kawaii-comic-ui 组件（插件精简版）
 */

.comic-card {
  position: relative;
  background: var(--comic-white);
  border: var(--comic-border);
  border-radius: var(--comic-radius-card);
  box-shadow: var(--comic-shadow-md);
  padding: var(--comic-space-6);
  margin-bottom: var(--comic-space-4);
  font-family: var(--comic-font-primary);
  transition: box-shadow var(--comic-transition-base) var(--comic-ease-bounce);
}

.comic-card-primary {
  border-color: var(--comic-primary);
  background: var(--comic-accent-light-blue);
}

.comic-card-secondary {
  border-color: var(--comic-secondary);
  background: var(--comic-accent-light-pink);
}

.comic-card__title {
  margin: 0 0 var(--comic-space-3);
  font-family: var(--comic-font-heading);
  font-size: var(--comic-text-xl);
  font-weight: var(--comic-weight-comic);
  color: var(--comic-black);
}

.comic-card__hint,
.comic-field__hint {
  margin: 0 0 var(--comic-space-4);
  color: var(--comic-gray-600);
  font-size: var(--comic-text-sm);
  line-height: var(--comic-line-relaxed);
}

.comic-badge {
  position: absolute;
  top: calc(var(--comic-space-4) * -1);
  right: var(--comic-space-4);
  padding: var(--comic-space-1) var(--comic-space-3);
  background: var(--comic-gradient-rainbow);
  color: var(--comic-white);
  border: var(--comic-border-thin);
  border-radius: var(--comic-radius-full);
  font-size: var(--comic-text-xs);
  font-weight: var(--comic-weight-bold);
  transform: rotate(5deg);
  box-shadow: var(--comic-shadow-sm);
}

.comic-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--comic-space-1) var(--comic-space-3);
  border-radius: var(--comic-radius-full);
  border: var(--comic-border-thin);
  font-size: var(--comic-text-xs);
  font-weight: var(--comic-weight-bold);
}

.comic-tag-primary {
  background: var(--comic-primary-soft);
  color: var(--comic-primary-dark);
}

.comic-field {
  margin-bottom: var(--comic-space-4);
}

.comic-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--comic-space-4);
}

.comic-float-field {
  --comic-float-label-bg: var(--comic-white);
  position: relative;
  margin-bottom: var(--comic-space-5);
}

.comic-card-primary .comic-float-field,
.comic-card-primary .comic-float-field .comic-input:focus + label,
.comic-card-primary .comic-float-field .comic-input.is-filled + label,
.comic-card-primary .comic-float-field .comic-textarea:focus + label,
.comic-card-primary .comic-float-field .comic-textarea.is-filled + label,
.comic-card-primary .comic-float-field select.comic-input:focus + label,
.comic-card-primary .comic-float-field select.comic-input.is-filled + label {
  --comic-float-label-bg: var(--comic-accent-light-blue);
}

.comic-card-secondary .comic-float-field,
.comic-card-secondary .comic-float-field .comic-input:focus + label,
.comic-card-secondary .comic-float-field .comic-input.is-filled + label,
.comic-card-secondary .comic-float-field .comic-textarea:focus + label,
.comic-card-secondary .comic-float-field .comic-textarea.is-filled + label {
  --comic-float-label-bg: var(--comic-accent-light-pink);
}

.shiroki-cp-payment-card .comic-float-field {
  --comic-float-label-bg: var(--comic-accent-light-blue);
}

.shiroki-cp-payment-card[data-active-pay="alipay"] .comic-float-field {
  --comic-float-label-bg: var(--comic-accent-light-yellow);
}

.comic-float-field .comic-input,
.comic-float-field .comic-textarea,
.comic-float-field select.comic-input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--comic-space-5) var(--comic-space-4) var(--comic-space-3);
  border: var(--comic-border-thin);
  border-radius: var(--comic-radius-md);
  background: var(--comic-white);
  color: var(--comic-black);
  font-family: var(--comic-font-primary);
  font-size: var(--comic-text-sm);
  box-shadow: var(--comic-shadow-sm);
  transition: box-shadow var(--comic-transition-fast) var(--comic-ease-out), border-color var(--comic-transition-fast) var(--comic-ease-out);
}

.comic-float-field select.comic-input {
  appearance: none;
  cursor: pointer;
  padding-right: var(--comic-space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--comic-space-4) center;
  background-size: 10px 6px;
}

.comic-float-field .shiroki-cp-select {
  position: relative;
  width: 100%;
}

.comic-float-field .shiroki-cp-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.comic-float-field .shiroki-cp-select-trigger {
  position: relative;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding-right: var(--comic-space-8);
}

.comic-float-field .shiroki-cp-select-trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--comic-space-4);
  width: 10px;
  height: 6px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  transition: transform var(--comic-transition-fast) var(--comic-ease-out);
}

.comic-float-field .shiroki-cp-select.is-open .shiroki-cp-select-trigger {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: var(--comic-primary);
  box-shadow: var(--comic-shadow-md), 0 0 0 4px var(--comic-primary-soft);
}

.comic-float-field .shiroki-cp-select.is-open .shiroki-cp-select-trigger::after {
  transform: translateY(-50%) rotate(180deg);
}

.comic-float-field .shiroki-cp-select-trigger:focus-visible {
  outline: none;
  border-color: var(--comic-primary);
  box-shadow: var(--comic-shadow-md), 0 0 0 4px var(--comic-primary-soft);
}

.comic-float-field:has(.shiroki-cp-select) label {
  top: 0;
  transform: translateY(-50%);
  font-size: var(--comic-text-xs);
  font-weight: var(--comic-weight-semibold);
  color: var(--comic-primary-dark);
  background: var(--comic-float-label-bg);
}

.comic-float-field .shiroki-cp-select-menu {
  display: none;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 10050;
  margin: 0;
  padding: var(--comic-space-1) 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  border: var(--comic-border-thin);
  border-top: none;
  border-bottom-left-radius: var(--comic-radius-md);
  border-bottom-right-radius: var(--comic-radius-md);
  background: var(--comic-white);
  box-shadow: var(--comic-shadow-md);
}

.comic-float-field .shiroki-cp-select.is-open .shiroki-cp-select-menu {
  display: block;
}

.comic-float-field .shiroki-cp-select-option {
  padding: var(--comic-space-2) var(--comic-space-4);
  font-size: var(--comic-text-sm);
  color: var(--comic-gray-800);
  cursor: pointer;
  transition: background-color var(--comic-transition-fast) var(--comic-ease-out),
    color var(--comic-transition-fast) var(--comic-ease-out);
}

.comic-float-field .shiroki-cp-select-option:hover,
.comic-float-field .shiroki-cp-select-option:focus {
  background: var(--comic-primary-soft);
  color: var(--comic-primary-dark);
  outline: none;
}

.comic-float-field .shiroki-cp-select-option.is-selected {
  background: var(--comic-accent-light-blue);
  color: var(--comic-primary-dark);
  font-weight: var(--comic-weight-semibold);
}

.shiroki-cp-order-modal .comic-float-field .shiroki-cp-select-menu {
  z-index: 100060;
}

.comic-float-field--textarea .comic-textarea {
  min-height: 120px;
  padding-top: var(--comic-space-6);
  resize: vertical;
}

.comic-float-field label {
  position: absolute;
  left: var(--comic-space-3);
  top: 50%;
  transform: translateY(-50%);
  max-width: calc(100% - var(--comic-space-6));
  padding: 0 var(--comic-space-1);
  background: transparent;
  color: var(--comic-gray-600);
  font-size: var(--comic-text-sm);
  font-weight: var(--comic-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition:
    top var(--comic-transition-base) var(--comic-ease-bounce),
    transform var(--comic-transition-base) var(--comic-ease-bounce),
    font-size var(--comic-transition-base) var(--comic-ease-out),
    color var(--comic-transition-fast) var(--comic-ease-out),
    background-color var(--comic-transition-fast) var(--comic-ease-out);
}

.comic-float-field--textarea label {
  top: var(--comic-space-5);
  transform: translateY(0);
}

.comic-float-field .comic-input:focus,
.comic-float-field .comic-textarea:focus,
.comic-float-field select.comic-input:focus {
  outline: none;
  border-color: var(--comic-primary);
  box-shadow: var(--comic-shadow-md), 0 0 0 4px var(--comic-primary-soft);
}

.comic-float-field .comic-input:focus + label,
.comic-float-field .comic-input.is-filled + label,
.comic-float-field .comic-textarea:focus + label,
.comic-float-field .comic-textarea.is-filled + label,
.comic-float-field select.comic-input:focus + label,
.comic-float-field select.comic-input.is-filled + label {
  top: 0;
  transform: translateY(-50%);
  font-size: var(--comic-text-xs);
  font-weight: var(--comic-weight-semibold);
  color: var(--comic-primary-dark);
  background: var(--comic-float-label-bg);
}

.comic-input,
.comic-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--comic-space-3) var(--comic-space-4);
  border: var(--comic-border-thin);
  border-radius: var(--comic-radius-md);
  background: var(--comic-white);
  color: var(--comic-black);
  font-family: var(--comic-font-primary);
  font-size: var(--comic-text-sm);
  box-shadow: var(--comic-shadow-sm);
  transition: box-shadow var(--comic-transition-fast) var(--comic-ease-out);
}

.comic-input:focus,
.comic-textarea:focus {
  outline: none;
  box-shadow: var(--comic-shadow-md), 0 0 0 4px var(--comic-primary-soft);
}

.comic-textarea {
  min-height: 96px;
  resize: vertical;
}

.comic-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--comic-space-2);
  padding: var(--comic-space-3) var(--comic-space-6);
  border: var(--comic-border);
  border-radius: var(--comic-radius-lg);
  background: var(--comic-white);
  color: var(--comic-black);
  font-family: var(--comic-font-heading);
  font-size: var(--comic-text-sm);
  font-weight: var(--comic-weight-bold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--comic-shadow-md);
  margin-bottom: 4px;
  overflow: hidden;
  transition: transform var(--comic-transition-base) var(--comic-ease-bounce), box-shadow var(--comic-transition-base) var(--comic-ease-bounce);
}

.comic-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.35), transparent);
  transition: left var(--comic-transition-slow) var(--comic-ease-out);
  pointer-events: none;
}

.comic-btn:hover::before {
  left: 100%;
}

.comic-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--comic-shadow-lg);
}

.comic-btn:active {
  transform: translateY(1px);
  box-shadow: var(--comic-shadow-active);
}

.comic-btn-primary {
  background: var(--comic-gradient-primary);
  color: var(--comic-white);
}

.comic-btn-secondary {
  background: var(--comic-gradient-secondary);
  color: var(--comic-white);
}

.comic-btn-accent {
  background: var(--comic-gradient-accent);
  color: var(--comic-white);
}

.comic-bubble {
  position: relative;
  padding: var(--comic-space-4);
  border: var(--comic-border-thin);
  border-radius: var(--comic-radius-bubble);
  background: var(--comic-accent-light-yellow);
  box-shadow: var(--comic-shadow-sm);
}

.comic-bubble::after {
  content: "";
  position: absolute;
  left: var(--comic-space-6);
  bottom: calc(var(--comic-space-3) * -1);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid var(--comic-black);
}

.comic-field-row .comic-float-field {
  margin-bottom: var(--comic-space-4);
}

@media (max-width: 768px) {
  .comic-field-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .comic-btn,
  .comic-card {
    transition: none;
  }
}