/* Styles of list/templates/list/create_card_form.html, moved out of its inline <style>. */

/* Scope the modal design tokens to the modal itself (NOT :root) so they win
   for everything inside it. The included amazon_search.html redefines these
   same token names on :root with dark values; scoping here to the modal
   element means descendants resolve the light values from the nearer
   ancestor, keeping the modal bright/white regardless of :root order. */
.ws-modal-create-wish {
  --ws-ink: #0b0d10;
  --ws-bg: rgba(255,255,255,0.96);
  --ws-border: rgba(0,0,0,0.06);
  --ws-shadow: 0 18px 50px rgba(0,0,0,.25);
  --ws-brand: #fea64d;
  --ws-brand-2: #ffb977;
  --ws-brand-3: #ffddb5;
}

/* Modal shell — bright/white, matching the reservation confirmation modal */
.ws-modal-create-wish .modal-dialog { max-width: 760px; }
.ws-modal-create-wish .modal-content {
  background: var(--ws-bg);
  border: 1px solid var(--ws-border);
  border-radius: 16px;
  box-shadow: var(--ws-shadow);
  color: var(--ws-ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

/* Header — subtle brand accent line on a light surface */
.ws-modal-create-wish .modal-header {
  background: linear-gradient(135deg, rgba(254,166,77,.10), rgba(255,217,181,.06));
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: relative;
}
.ws-modal-create-wish .modal-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(135deg,#fea64d 0%,#ffb977 40%,#ffddb5 100%);
  opacity: .75;
}
.ws-modal-create-wish .modal-title {
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--ws-ink);
}
.ws-modal-create-wish .btn-close {
  filter: invert(0);
  opacity: .7;
}
.ws-modal-create-wish .btn-close:hover { opacity: 1; }

/* Tabs (Bootstrap nav-tabs) */
.ws-modal-create-wish .nav-tabs {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 0 .75rem;
  background: rgba(0,0,0,0.02);
}

/* Dark font for modal tabs on the light surface */
.ws-modal-create-wish .nav-tabs .nav-link {
  color: rgba(11,13,16,0.72) !important;
  font-weight: 600;
  transition: all 0.2s ease;
}

.ws-modal-create-wish .nav-tabs .nav-link:hover {
  color: #0b0d10 !important;
  background-color: rgba(0,0,0,0.04);
}

/* Active tab: understated — dark text with a slim brand underline
   (inset shadow avoids the layout shift a real border would cause). */
.ws-modal-create-wish .nav-tabs .nav-link.active {
  color: #0b0d10 !important;
  background: transparent;
  background-image: none;
  font-weight: 700;
  border: none;
  box-shadow: inset 0 -2.5px 0 var(--ws-brand);
}
/* Tab sub-labels are marked .text-white-50 for the old dark theme — recolor
   them so they stay legible on the light surface. */
.ws-modal-create-wish .nav-tabs .text-white-50 { color: rgba(11,13,16,0.5) !important; }
.ws-modal-create-wish .nav-tabs .nav-link.active .text-white-50 { color: rgba(11,13,16,0.62) !important; }

/* Body spacing */
.ws-modal-create-wish .tab-content { padding: 1rem 1rem 1.25rem; }
.ws-modal-create-wish .container { padding-top: .25rem; padding-bottom: .5rem; }

/* Form look */
.ws-modal-create-wish .form-label { color: var(--ws-ink); font-weight: 600; }
.ws-modal-create-wish .form-control {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  color: #0b0d10;
}
.ws-modal-create-wish .form-control:focus {
  box-shadow: 0 0 0 .2rem rgba(254,166,77,.25);
  border-color: var(--ws-brand-2);
}

/* Footer */
.ws-modal-create-wish .modal-footer {
  border-top: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.02);
}

/* Buttons — flat solid brand (consistent with the search button) */
.ws-modal-create-wish .btn-brand {
  background-color: var(--ws-brand);
  background-image: none;
  border: none;
  color: #16181d;
  font-weight: 600;
  border-radius: 10px;
  transition: background-color .15s ease, transform .1s ease;
}
.ws-modal-create-wish .btn-brand:hover {
  background-color: #f5993d;
  transform: translateY(-1px);
  color: #0b0d10;
}

.ws-modal-create-wish .btn-secondary {
  background: #f4f6f8;
  border: 1px solid #e7e9ee;
  color: #0b0d10;
  border-radius: 10px;
}
.ws-modal-create-wish .btn-secondary:hover {
  background: #eef1f5;
  border-color: #e2e5ea;
}

/* Amazon include area quick polish */
.ws-modal-create-wish .footer_amazon { color: transparent; height: .25rem; }
.ws-modal-create-wish .ws-muted { color: rgba(11,13,16,0.72); }

/* Custom-wish ("Freier Wunsch") card — mirror the Amazon search card so both
   tabs read as one consistent, contained surface (not bare edge-to-edge fields). */
.ws-modal-create-wish #custom-wish-card .card {
  background: #f7f8fa;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ws-modal-create-wish #custom-wish-card .card-body { padding: 1.5rem; }
.ws-modal-create-wish #custom-wish-card .card-title {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.25rem;
  color: #0b0d10;
}
/* Lighter, quieter labels so the inputs lead — not the labels. */
.ws-modal-create-wish #custom-wish-card .form-label {
  font-size: .85rem;
  font-weight: 500;
  color: rgba(11,13,16,0.68);
  margin-bottom: .35rem;
}
/* Slightly tighter vertical rhythm between fields. */
.ws-modal-create-wish #custom-wish-card .card-body .mb-3 { margin-bottom: .9rem !important; }