:root {
  --qcod-gold: #dda900;
  --qcod-gold-dark: #bd9000;
  --qcod-ink: #171717;
  --qcod-muted: #686868;
  --qcod-line: #e5e5e5;
}

body.qasra-cod-open { overflow: hidden; }

.qasra-cod-button {
  display: flex;
  width: 100%;
  min-height: 62px;
  margin: -16px 0 28px;
  padding: 10px 22px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  background: var(--qcod-ink);
  border: 2px solid var(--qcod-ink);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, background-color .2s ease;
}

.qasra-cod-button:hover { background: #292929; transform: translateY(-1px); }
.qasra-cod-button:focus-visible { outline: 3px solid rgba(221, 169, 0, .5); outline-offset: 3px; }
.qasra-cod-button__icon { font-size: 24px; }
.qasra-cod-button b,
.qasra-cod-button small { display: block; }
.qasra-cod-button b { font-size: 16px; line-height: 1.2; }
.qasra-cod-button small { margin-top: 2px; color: #ddd; font-size: 12px; font-weight: 500; }

.qasra-cod[hidden],
.qasra-cod [hidden] { display: none !important; }

.qasra-cod {
  position: fixed;
  z-index: 1000000;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
  color: var(--qcod-ink);
  font-family: Arial, Helvetica, sans-serif;
}

.qasra-cod__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .62);
  opacity: 0;
  transition: opacity .18s ease;
}

.qasra-cod__dialog {
  position: relative;
  width: min(100%, 680px);
  max-height: min(900px, calc(100dvh - 40px));
  overflow: auto;
  padding: 32px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
  opacity: 0;
  transform: translateY(16px) scale(.985);
  transition: opacity .18s ease, transform .18s ease;
  scrollbar-width: thin;
}

.qasra-cod.is-open .qasra-cod__backdrop,
.qasra-cod.is-open .qasra-cod__dialog { opacity: 1; }
.qasra-cod.is-open .qasra-cod__dialog { transform: none; }

.qasra-cod__close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 16px;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  color: #222;
  background: #f3f3f3;
  border: 0;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.qasra-cod__header { padding-right: 45px; }
.qasra-cod__eyebrow { color: var(--qcod-gold-dark); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.qasra-cod__header h2 { margin: 5px 0 7px; font-size: clamp(26px, 4vw, 36px); line-height: 1.1; }
.qasra-cod__header p { margin: 0; color: var(--qcod-muted); font-size: 14px; line-height: 1.5; }

.qasra-cod__product {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  margin: 24px 0;
  padding: 12px;
  background: #f8f7f3;
  border: 1px solid #eee9db;
  border-radius: 14px;
}

.qasra-cod__product img { width: 66px; height: 66px; object-fit: cover; background: #fff; border-radius: 9px; }
.qasra-cod__product strong,
.qasra-cod__product span { display: block; }
.qasra-cod__product strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.qasra-cod__product span { margin-top: 5px; color: var(--qcod-muted); font-size: 12px; }
.qasra-cod__product > b { color: var(--qcod-gold-dark); font-size: 15px; white-space: nowrap; }

.qasra-cod__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.qasra-cod__field { display: grid; gap: 7px; }
.qasra-cod__field--wide { grid-column: 1 / -1; }
.qasra-cod__field > span { font-size: 13px; font-weight: 700; }
.qasra-cod__field input,
.qasra-cod__field select,
.qasra-cod__field textarea {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px 13px;
  color: var(--qcod-ink);
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 10px;
  box-shadow: none;
  font: inherit;
  font-size: 15px;
}
.qasra-cod__field textarea { min-height: 78px; resize: vertical; }
.qasra-cod__field input:focus,
.qasra-cod__field select:focus,
.qasra-cod__field textarea:focus { border-color: var(--qcod-gold); outline: 3px solid rgba(221, 169, 0, .15); }
.qasra-cod__honeypot { position: fixed !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; }
.qasra-cod__error { margin: 14px 0 0; padding: 10px 12px; color: #9b1c1c; background: #fff1f1; border: 1px solid #f5c2c2; border-radius: 9px; font-size: 13px; }
.qasra-cod__submit {
  display: flex;
  width: 100%;
  min-height: 56px;
  margin-top: 20px;
  padding: 12px 20px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  background: var(--qcod-gold);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.qasra-cod__submit b { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .45); }
.qasra-cod__submit:disabled { cursor: wait; opacity: .65; }
.qasra-cod__trust { margin: 12px 0 0; color: var(--qcod-muted); font-size: 11px; text-align: center; }

.qasra-cod__success { padding: 38px 10px 10px; text-align: center; }
.qasra-cod__success-icon { display: grid; width: 72px; height: 72px; margin: 0 auto 18px; place-items: center; color: #fff; background: #27a55b; border-radius: 50%; font-size: 38px; }
.qasra-cod__success h2 { margin: 0 0 10px; font-size: 28px; }
.qasra-cod__success p { max-width: 430px; margin: 0 auto 20px; color: var(--qcod-muted); line-height: 1.5; }
.qasra-cod__order-number { margin: 18px auto; padding: 14px; background: #f7f7f7; border-radius: 10px; }
.qasra-cod__confirmation,
.qasra-cod__continue { display: block; width: min(100%, 340px); min-height: 50px; margin: 10px auto; padding: 14px 20px; border-radius: 999px; font-weight: 750; text-decoration: none; }
.qasra-cod__confirmation { color: #fff; background: var(--qcod-gold); }
.qasra-cod__continue { color: var(--qcod-ink); background: #fff; border: 1px solid #ccc; cursor: pointer; }

@media (max-width: 640px) {
  .qasra-cod { padding: 0; align-items: end; }
  .qasra-cod__dialog { width: 100%; max-height: calc(100dvh - 20px); padding: 25px 18px calc(20px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; transform: translateY(28px); }
  .qasra-cod__header { padding-right: 38px; }
  .qasra-cod__header h2 { font-size: 27px; }
  .qasra-cod__product { grid-template-columns: 56px minmax(0, 1fr); margin: 18px 0; }
  .qasra-cod__product img { width: 56px; height: 56px; }
  .qasra-cod__product > b { grid-column: 2; margin-top: -8px; }
  .qasra-cod__grid { grid-template-columns: 1fr; gap: 12px; }
  .qasra-cod__field--wide { grid-column: auto; }
  .qasra-cod-button { margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .qasra-cod__backdrop,
  .qasra-cod__dialog,
  .qasra-cod-button { transition: none; }
}