/* ===========================================================
   Order page — "how to order" steps, contact buttons,
   and the inquire form panel.
   =========================================================== */

.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-bottom: 40px; }
.step-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 30px 24px; }
.step-card-num { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 700; color: var(--border-color); margin-bottom: 12px; }
.step-card-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.step-card-desc { font-size: 0.9rem; text-align: justify; color: var(--text-muted); }

.contacts-grid { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-top: 24px; }
.contact-card-btn { display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white) !important;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  border: none;
  cursor: pointer;
  font-family: inherit; }
.contact-card-btn:hover { transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15); }
.contact-card-btn svg { width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0; }
.btn-instagram { background: linear-gradient(45deg, #F58529, #D92E7F, #9B36B7); }
.btn-email { background-color: #5A524C; }

/* Payment method badges — informational only, not clickable.
   Actual payment is arranged with the artist directly. */
.payment-method-btn { cursor: default; position: relative; }
.payment-method-btn:hover { transform: none; filter: none; box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.payment-soon-badge { position: absolute; top: -8px; right: -8px; background: var(--accent-leather); color: var(--white); font-size: 0.62rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.btn-card { background-color: #344767; }
.btn-paypal { background: linear-gradient(135deg, #003087, #009cde); }
.btn-crypto { background-color: #26A17B; }

/* Visa/Mastercard marks shown next to the "to card" method */
.card-brand-icons { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.card-brand-icons svg { width: 28px; height: 18px; border-radius: 3px; }

/* "?" info hint — reveals payment details on hover/focus, doesn't navigate or act */
.payment-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(255,255,255,0.25); font-size: 0.68rem; font-weight: 800; line-height: 1; cursor: help; flex-shrink: 0; }
.payment-info-tip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); background: var(--text-main); color: var(--white); font-size: 0.74rem; font-weight: 500; line-height: 1.6; padding: 8px 12px; border-radius: var(--radius-sm); white-space: nowrap; text-align: left; box-shadow: 0 4px 14px rgba(0,0,0,0.25); opacity: 0; visibility: hidden; transition: opacity .2s ease; pointer-events: none; z-index: 10; }
.payment-info:hover .payment-info-tip, .payment-info:focus .payment-info-tip, .payment-info:focus-visible .payment-info-tip { opacity: 1; visibility: visible; }

#inquire, #contacts { scroll-margin-top: 90px; }
.inquire-wrapper { background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  box-shadow: var(--shadow-subtle);
  margin: 0 0 40px; }
.inquire-form-side { padding: 48px 44px; display: flex; flex-direction: column; }
.inquire-form-side form { display: flex; flex-direction: column; height: 100%; }
.form-group-grow { flex: 1 1 auto; display: flex; flex-direction: column; }
.form-group-grow .form-textarea { flex: 1 1 auto; min-height: 140px; resize: vertical; }
.form-status.form-status-compact { margin: 6px 0 4px; text-align: center; font-size: 0.78rem; min-height: 1.1em; }
.inquire-title { font-family: var(--font-serif); font-size: 2rem; letter-spacing: 0.08em; margin-bottom: 12px; text-transform: uppercase; }
.inquire-subtitle { font-size: 0.95rem; text-align: justify; color: var(--text-muted); margin-bottom: 32px; line-height: 1.6; }
.inquire-image-side { position: relative; background: #E8DCCF; }
.inquire-image-side img { width: 100%; height: 100%; object-fit: cover; }
.inquire-form-side .form-input,
.inquire-form-side .form-select,
.inquire-form-side .form-textarea { background: var(--bg-subtle) !important; }

@media (max-width: 900px) {
  .inquire-wrapper { grid-template-columns: 1fr; }
  .inquire-image-side { display: none; }
}