/**
 * RCP Update Card Form Styles
 * 
 * Styles specific to the RCP update card component
 */

/* Form Container */
#rcp_update_card_form.rcp_form {
  --rcp-form-spacing: var(--wp--preset--spacing--20);
  --rcp-form-radius: 8px;
  --rcp-form-border: var(--wp--preset--color--borderline);
  --rcp-form-text: var(--wp--preset--color--contrast);
  --rcp-form-accent: var(--wp--preset--color--accent);

  width: 100%;
  max-width: 100%;
  font-family: inherit;
}

/* Form Title */
#rcp_update_card_form h3 {
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--contrast);
  margin: 0 0 var(--wp--preset--spacing--20) 0;
  font-weight: 500;
  padding-bottom: var(--wp--preset--spacing--10);
  border-bottom: 1px solid var(--wp--preset--color--borderline);
  width: 100%;
}

/* Saved Payment Methods List */
.rcp-gateway-saved-payment-methods {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--wp--preset--spacing--30) 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
}

.rcp-gateway-saved-payment-methods li {
  padding: 0;
  margin: 0;
  width: 100%;
}

.rcp-gateway-saved-payment-methods label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--10);
  padding: var(--wp--preset--spacing--20);
  border: 1px solid var(--wp--preset--color--borderline);
  border-radius: 8px;
  background: var(--wp--preset--color--base);
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.rcp-gateway-saved-payment-methods label:hover {
  border-color: var(--wp--preset--color--accent);
  background: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 2%,
    var(--wp--preset--color--base)
  );
}

.rcp-gateway-saved-payment-methods input[type='radio'] {
  margin-right: var(--wp--preset--spacing--10);
}

/* Card Details */
.rcp-gateway-saved-card-brand {
  font-weight: 500;
  color: var(--wp--preset--color--contrast);
}

.rcp-gateway-saved-card-ending-label,
.rcp-gateway-saved-card-expires-label {
  color: var(--wp--preset--color--contrast-2);
  font-size: var(--wp--preset--font-size--small);
}

.rcp-gateway-saved-card-last-4,
.rcp-gateway-saved-card-expiration {
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--small);
}

.rcp-gateway-saved-card-current {
  color: var(--wp--preset--color--accent-2);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
}

.rcp-gateway-saved-payment-method-sep {
  color: var(--wp--preset--color--contrast-2);
  font-size: var(--wp--preset--font-size--small);
}

/* Delete Link */
.rcp-gateway-saved-card-delete a {
  color: red;
  text-decoration: underline;
  font-size: var(--wp--preset--font-size--small);
  transition: all 0.3s ease-in-out;
  display: inline-block;
  font-weight: 500;
}

.rcp-gateway-saved-card-delete a:hover {
  color: darkred;
  text-decoration: none;
}

/* Add New Card Option */
.rcp-gateway-add-payment-method-wrap label {
  border-style: dashed;
}

/* Credit Card Fields */
.rcp-gateway-new-card-fields {
  width: 100%;
  margin-bottom: var(--wp--preset--spacing--20);
}

.rcp_card_fieldset {
  border: 1px solid var(--wp--preset--color--borderline);
  border-radius: 8px;
  padding: var(--wp--preset--spacing--20);
  margin: 0 0 var(--wp--preset--spacing--20) 0;
  background: var(--wp--preset--color--base);
}

/* Card Name Wrap - No top margin */
#rcp_card_name_wrap {
  margin-top: 0;
  margin-bottom: 0;
}

/* Labels */
.rcp_card_fieldset label {
  display: block;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--contrast);
  margin-bottom: var(--wp--preset--spacing--10);
  font-weight: 500;
}

/* Card Name Input */
.rcp_card_name {
  width: 100%;
  height: 46px;
  padding: 0 1rem;
  border: 1px solid var(--wp--preset--color--borderline);
  border-radius: 6px;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--base);
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.rcp_card_name:focus {
  outline: none;
  border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent);
}

/* Stripe Card Element */
#rcp-card-element {
  padding: 0.75rem 1rem;
  border: 1px solid var(--wp--preset--color--borderline);
  border-radius: 6px;
  background: var(--wp--preset--color--base);
  transition: all 0.3s ease-in-out;
}

.StripeElement--focus {
  border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent);
}

.StripeElement--invalid {
  border-color: var(--wp--preset--color--accent-3);
}

/* Error Messages */
#rcp-card-element-errors {
  color: var(--wp--preset--color--accent-3);
  font-size: var(--wp--preset--font-size--small);
  margin-top: var(--wp--preset--spacing--10);
}

.rcp_message.error {
  display: flex;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  margin-inline: 0 !important;
  width: 100% !important;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
}

.rcp_message.error p {
  display: block !important;
  background-color: #f8d7da !important;
  border: 1px solid #f5c2c7 !important;
  color: #842029 !important;
  border-radius: 0.375rem !important;
  margin: 0 !important;
  padding: var(--wp--preset--spacing--10) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: var(--wp--preset--font-size--small) !important;
  line-height: 1.5 !important;
}

/* Submit Button Wrap - Reduced top margin */
#rcp_submit_wrap {
  margin-top: var(--wp--preset--spacing--20);
  margin-bottom: 0px;
}

#rcp_submit {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  border: none;
  border-radius: var(--button-border-radius);
  padding: var(--button-padding-y) var(--button-padding-x);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  text-align: center;
  min-width: 200px;
}

#rcp_submit:hover {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 90%, white);
}

/* Success Messages */
.rcp_success {
  color: #00a32a;
  font-size: var(--wp--preset--font-size--small);
  margin: var(--wp--preset--spacing--10) 0;
  padding: var(--wp--preset--spacing--20);
  border-radius: var(--rcp-form-radius);
  background: color-mix(in srgb, #00a32a 10%, transparent);
}

/* Loading Overlay */
.blockUI.blockOverlay {
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--base) 95%,
    transparent
  ) !important;
  opacity: 1 !important;
  border-radius: 7px !important;
}

.blockUI.blockMsg {
  border: 1px solid var(--wp--preset--color--borderline) !important;
  background-color: var(--wp--preset--color--base) !important;
  color: var(--wp--preset--color--contrast) !important;
  border-radius: 8px !important;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2) !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: var(--wp--preset--font-size--medium) !important;
  font-weight: 500 !important;
  display: block !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10000 !important;
  min-width: 200px !important;
  text-align: center !important;
  opacity: 1 !important;
  transition: none !important;
}

.blockUI.blockMsg::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--wp--preset--color--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: rcp-loading-spinner 0.6s linear infinite;
  margin: 0 auto var(--wp--preset--spacing--10) auto;
}

@keyframes rcp-loading-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .rcp-gateway-saved-payment-methods label:hover {
    background: color-mix(
      in srgb,
      var(--wp--preset--color--accent) 4%,
      var(--wp--preset--color--base)
    );
  }

  .rcp_card_name,
  #rcp-card-element {
    background: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--borderline);
  }

  .rcp_card_name:focus,
  .StripeElement--focus {
    border-color: var(--wp--preset--color--accent);
    box-shadow: 0 0 0 3px
      color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
  }

  .rcp_message.error p {
    background-color: #2c0b0e !important;
    border-color: #842029 !important;
    color: #ea868f !important;
  }

  .blockUI.blockOverlay {
    background-color: color-mix(
      in srgb,
      var(--wp--preset--color--contrast) 10%,
      transparent
    ) !important;
  }
}

.rcp-gateway-saved-payment-methods {
  margin: 0 0 var(--wp--preset--spacing--10) 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .rcp-gateway-saved-payment-methods label {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--10);
  }

  .rcp-gateway-saved-payment-methods input[type='radio'] {
    align-self: flex-start;
  }

  .rcp-gateway-saved-card-delete {
    margin-top: var(--wp--preset--spacing--10);
    width: 100%;
    text-align: right;
  }

  #rcp_submit {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 600px) {
  .rcp_card_fieldset {
    padding: var(--wp--preset--spacing--20);
  }

  .rcp_card_name,
  #rcp-card-element {
    font-size: var(--wp--preset--font-size--small);
  }
}