/* ========================================
   Flash message modal (dialog)
   ======================================== */
.modal-wrap {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal-wrap .overlay {
  opacity: .5;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}
.modal-container {
  position: fixed;
  z-index: 1100;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 930px;
  background: #fff;
  translate: -50% -50%;
}
.modal-container .close {
  position: absolute;
  z-index: 10;
  top: 20px;
  right: 20px;
}
.modal-container .close .a {
  display: block;
  width: 24px;
  height: 24px;
  background: url(/assets/event2027/wdm/ico_close-dda04855ac15265dd4d16aa7fc584df4e50fd7cca80228f2d6d8b57f5175f374.svg) no-repeat center center / contain;
  cursor: pointer;
}
.modal-container .close .a:hover {
  opacity: .7;
}
.modal-container .container {
  overflow: auto;
  padding: 48px 40px;
  background: #fff;
  max-height: calc(100svh - 80px);
}
@media (max-width: 767px) {
  .modal-container .container {
    padding: 48px 24px;
  }
}
.modal-container.-dialog {
  max-width: 690px;
}
.modal-container.-dialog .p-head-group {
  display: block;
}
.modal-container.-dialog .p-head-group .head {
  text-align: center;
}
.modal-container.-dialog .modal-body {
  text-align: center;
}
.modal-container .dialog-btns {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}
.modal-container .dialog-btns .-btn {
  min-width: 150px;
  text-align: center;
}

/* ========================================
   Tooltip
   ======================================== */
.a.-tip {
  position: relative;
  cursor: pointer;
}
.p-tooltip {
  position: absolute;
  z-index: 100;
  bottom: calc(100% + 8px);
  left: 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--black, #333);
  color: #fff;
  font-size: 13px;
  line-height: 1.6;
  white-space: nowrap;
  pointer-events: auto;
}
.p-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 6px;
  border: 6px solid transparent;
  border-top-color: var(--black, #333);
}

/* ========================================
   PayJP card form
   ======================================== */
.p-form .payjs-outer {
  height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--gray-border, #ccc);
  border-radius: 4px;
}
.p-form .cardnumber {
  display: flex;
  align-items: center;
  gap: 8px 16px;
}
.p-form .cardnumber .payjs-outer {
  flex: 1;
  width: 100%;
  max-width: 320px;
}
.p-form .cardnumber .logo img {
  width: auto;
  height: 24px;
}
.p-form .securitycode .payjs-outer {
  width: 128px;
}
.p-form .expirydate .payjs-outer {
  width: 128px;
}
.p-form .payment-amount {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.p-form .card-list {
  display: flex;
  gap: 8px;
}
.p-form .card-list img {
  width: auto;
  height: 24px;
}
@media (max-width: 767px) {
  .p-form .payment-amount {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
#payjpMessage {
  display: block;
  margin-top: 8px;
  color: var(--red, #f00);
  font-size: 14px;
}
.p-form .price {
  font-weight: 700;
}
.p-form .price .num {
  font-size: 28px;
}
@media (max-width: 767px) {
  .p-form .cardnumber .payjs-outer {
    max-width: 100%;
  }
}

/* ========================================
   CSV file input
   ======================================== */
.p-form input[type=file] {
  outline: none;
  width: 100%;
  height: 48px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--gray-border);
  border-radius: 4px;
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--black);
  font-family: inherit;
  font-size: inherit;
}
.p-form input[type=file]:focus {
  border-color: var(--black);
}
.p-form input[type=file]::file-selector-button {
  height: 28px;
  margin-right: 12px;
  padding: 0 16px;
  border: 1px solid var(--gray-border);
  border-radius: 4px;
  background: var(--gray-background, #f5f5f5);
  color: var(--black);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.p-form input[type=file]::file-selector-button:hover {
  background: var(--gray-border);
}

/* Confirm modal error message */
.p-confirm.-member .message-error {
  grid-column: 1 / -1;
  color: #EB4830;
}

/* Validation error message (error_on helper outputs .error-message) */
.p-form .item .error-message {
  color: #EB4830;
}

/* ========================================
   Entry index disabled item
   ======================================== */
.p-entry-index .items .item .a.-disabled {
  display: grid;
  grid-template-columns: 1fr auto 240px auto;
  gap: 48px;
  align-items: center;
  padding: 16px 40px;
  border: 1px solid var(--gray-border);
  border-radius: 8px;
  color: var(--black);
  text-decoration: none;
  line-height: 1.5;
  background: var(--gray-background, #f5f5f5);
  cursor: default;
}
@media (width < 1024px) {
  .p-entry-index .items .item .a.-disabled {
    gap: 24px;
  }
}
@media (width < 768px) {
  .p-entry-index .items .item .a.-disabled {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 16px;
  }
}

/* ========================================
   Profile image fallback
   ======================================== */
.profile-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--gray-background, #f0f0f0);
  min-height: 40px;
}