/* CloneMyKey — Order HOLD (account panel UI)
   Palette mirrors account-panel.css: --cmk-red #D0272F, tint #FCE9EA. */

:root {
  --oh-red: #D0272F;
  --oh-red-dark: #A41E25;
  --oh-red-tint: #FCE9EA;
  --oh-ink: #1F2937;
  --oh-mute: #6B7280;
  --oh-line: #E5E7EB;
  --oh-bg: #F6F7F9;
  --oh-warn: #F59E0B;
  --oh-warn-tint: #FEF3C7;
  --oh-ok: #10B981;
  --oh-ok-tint: #D1FAE5;
}

/* ---- Buttons ---- */
.cmk-oh-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--oh-red); background: #fff; color: var(--oh-red);
  font: inherit; font-weight: 700; font-size: .92rem; line-height: 1;
  padding: 10px 14px; border-radius: 10px; cursor: pointer; text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.cmk-oh-btn:hover { background: var(--oh-red); color: #fff; }
.cmk-oh-btn:active { transform: translateY(1px); }
.cmk-oh-btn:focus-visible { outline: 3px solid rgba(208,39,47,.35); outline-offset: 2px; }
.cmk-oh-btn--held { background: var(--oh-red-tint); border-color: var(--oh-red-tint); color: var(--oh-red-dark); }
.cmk-oh-btn--held:hover { background: var(--oh-red); border-color: var(--oh-red); color: #fff; }
.cmk-oh-btn--hold { background: var(--oh-red); color: #fff; text-transform: uppercase; letter-spacing: .04em; padding: 14px 20px; font-size: 1rem; box-shadow: 0 6px 16px rgba(208,39,47,.3); }
.cmk-oh-btn--hold:hover { background: var(--oh-red-dark); border-color: var(--oh-red-dark); }
.cmk-oh-btn--hold[disabled] { opacity: .6; cursor: progress; }
.cmk-oh-btn--ghost { border-color: var(--oh-line); color: var(--oh-ink); }
.cmk-oh-btn--ghost:hover { background: var(--oh-bg); color: var(--oh-ink); }
.cmk-oh-btn--inline { flex: 0 0 auto; }

/* The account panel's own .cmk-ap-btn styles win when both classes are present; keep the red accent. */
.cmk-ap-btn.cmk-oh-btn { border-color: var(--oh-red); color: var(--oh-red); }
.cmk-ap-btn.cmk-oh-btn:hover { background: var(--oh-red); color: #fff; }
.cmk-ap-btn.cmk-oh-btn--held { background: var(--oh-red-tint); border-color: var(--oh-red-tint); color: var(--oh-red-dark); }

.cmk-oh-intro { margin: -6px 0 16px; color: var(--oh-mute); font-size: .95rem; }

/* ---- View order banner ---- */
.cmk-oh-banner {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 18px; padding: 14px 16px;
  border: 2px solid var(--oh-red); border-radius: 12px; background: #fff;
}
.cmk-oh-banner--held { background: var(--oh-red-tint); }
.cmk-oh-banner__icon { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.cmk-oh-banner__body { flex: 1 1 auto; min-width: 0; font-size: .95rem; line-height: 1.45; }
.cmk-oh-banner__body strong { display: block; color: var(--oh-red-dark); margin-bottom: 2px; }
.cmk-oh-banner__body blockquote { margin: 8px 0 0; padding: 8px 12px; background: #fff; border-left: 4px solid var(--oh-red); border-radius: 6px; font-size: .9rem; }
@media (max-width: 640px) {
  .cmk-oh-banner { flex-wrap: wrap; }
  .cmk-oh-banner .cmk-oh-btn { width: 100%; justify-content: center; }
}

/* ---- Addresses / edit-address box ---- */
.cmk-oh-addr-box {
  margin: 0 0 22px; padding: 16px 18px;
  border: 1px solid #fde68a; background: var(--oh-warn-tint); border-radius: 12px;
}
.cmk-oh-addr-box__head { display: flex; gap: 12px; align-items: flex-start; }
.cmk-oh-addr-box__icon { color: var(--oh-warn); flex: 0 0 auto; margin-top: 2px; }
.cmk-oh-addr-box__head strong { display: block; color: var(--oh-ink); font-size: 1.02rem; margin-bottom: 4px; }
.cmk-oh-addr-box__head p { margin: 0; color: #4B5563; font-size: .93rem; line-height: 1.5; }
.cmk-oh-addr-box__orders { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.cmk-oh-addr-box__orders li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid var(--oh-line); border-radius: 10px; padding: 10px 12px;
}
.cmk-oh-addr-box__order { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cmk-oh-addr-box__order a { font-weight: 800; color: var(--oh-ink); text-decoration: none; }
.cmk-oh-addr-box__order small { color: var(--oh-mute); font-size: .8rem; }
.cmk-oh-addr-box__ship { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
@media (max-width: 560px) {
  .cmk-oh-addr-box__orders li { flex-direction: column; align-items: stretch; }
  .cmk-oh-addr-box__orders .cmk-oh-btn { justify-content: center; }
  .cmk-oh-addr-box__ship { white-space: normal; }
}

/* ---- Modal ---- */
.cmk-oh-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.cmk-oh-modal[hidden] { display: none; }
.cmk-oh-modal.is-open { opacity: 1; pointer-events: auto; }
.cmk-oh-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
.cmk-oh-modal__panel {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto;
  background: #fff; border-radius: 16px; border-top: 6px solid var(--oh-red);
  box-shadow: 0 20px 60px rgba(15,23,42,.3); padding: 26px 24px 22px; color: var(--oh-ink);
  transform: translateY(8px); transition: transform .18s ease;
}
.cmk-oh-modal.is-open .cmk-oh-modal__panel { transform: none; }
.cmk-oh-modal__x { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--oh-mute); cursor: pointer; }
.cmk-oh-modal__stop { font-size: 40px; text-align: center; line-height: 1; }
.cmk-oh-modal h2 { margin: 8px 0 6px; font-size: 1.4rem; text-align: center; }
.cmk-oh-modal__lead { margin: 0 0 16px; color: var(--oh-mute); text-align: center; font-size: .95rem; line-height: 1.5; }
.cmk-oh-modal label { display: block; font-weight: 700; margin-bottom: 6px; }
.cmk-oh-modal textarea { width: 100%; border: 2px solid var(--oh-line); border-radius: 10px; padding: 12px; font: inherit; resize: vertical; min-height: 120px; box-sizing: border-box; }
.cmk-oh-modal textarea:focus { outline: none; border-color: var(--oh-red); box-shadow: 0 0 0 3px rgba(208,39,47,.15); }
.cmk-oh-modal__hint { margin: 6px 0 12px; font-size: .82rem; color: var(--oh-mute); }
.cmk-oh-modal__error { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--oh-red-tint); color: var(--oh-red-dark); font-size: .9rem; }
.cmk-oh-modal__error[hidden] { display: none; }
.cmk-oh-modal__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.cmk-oh-modal__actions .cmk-oh-btn--hold { flex: 1 1 auto; justify-content: center; }
.cmk-oh-modal__done { text-align: center; }
.cmk-oh-modal__done[hidden] { display: none; }
.cmk-oh-modal__check { width: 64px; height: 64px; border-radius: 50%; background: var(--oh-ok-tint); color: var(--oh-ok); font-size: 34px; font-weight: 900; line-height: 64px; margin: 4px auto 10px; }
.cmk-oh-modal__done h3 { margin: 0 0 6px; font-size: 1.25rem; }
.cmk-oh-modal__done p { color: var(--oh-mute); margin: 0 0 14px; }
body.cmk-oh-modal-open { overflow: hidden; }

/* Account-panel status badge for the custom status (orders list + view order). */
.cmk-ap-order-card__status--cmk-hold { background: var(--oh-red); color: #fff; }
/* Stock WooCommerce orders table badge */
.woocommerce-orders-table__cell-order-status .status-cmk-hold,
.order-status.status-cmk-hold { color: var(--oh-red); font-weight: 700; }