/* ===== One Click Order Modal ===== */

/* Overlay */
.overlay_kviz {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 3005;
  display: none;
}

/* Modal container */
.quiz {
  --font-family: 'MacPaw Fixel Display', sans-serif;
  --second-family: 'Fixel Display', sans-serif;
  --font5: 'Fixel Text', sans-serif;
  position: fixed;
  top: 0;
  right: 0;
  width: 550px;
  height: 100%;
  background: #fff;
  z-index: 3006;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0;
}

.quiz * {
  box-sizing: border-box;
}

.quiz p {
  margin: 0;
  padding: 0;
}

.quiz svg {
  pointer-events: none;
}

.none {
  display: none !important;
}

.hidden {
  display: none;
}

.error {
  border: 2px solid rgba(255, 0, 0, 0.548) !important;
}

/* Page wrapper */
.quiz_page {
  width: 100%;
  padding: 32px 28px;
  margin: 0;
  font-family: var(--font5);
}

/* Title bar */
.title_block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.quiz_title {
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 19px;
  line-height: 120%;
  text-transform: uppercase;
  color: #0f0f0e;
  margin: 0;
}

.quiz_page-close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz_page-close svg {
  width: 12px;
  height: 12px;
}

/* Product info card */
.quiz_product-info {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid #E3E3E3;
  border-bottom: 1px solid #E3E3E3;
  margin-bottom: 20px;
}

.quiz_product-thumb {
  width: auto;
  height: 105px;
  object-fit: cover;
  flex-shrink: 0;
}

.quiz_product-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quiz_product-name {
  font-family: var(--second-family);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  color: #0f0f0e;
  margin: 0;
  line-height: 140%;
}

.quiz_product-price {
  font-family: var(--font5);
  font-size: 13px;
  font-weight: 500;
  color: #0f0f0e;
}

.quiz_price-old {
  text-decoration: line-through;
  color: #757575;
  font-weight: 400;
  margin-right: 6px;
}

.quiz_price-special {
  color: #e00;
  font-weight: 500;
}

/* Product color info */
.quiz_product-color {
  font-size: 12px;
  color: #5e5e5e;
}

/* Options (sizes) */
.quiz_option-group {
  margin-bottom: 20px;
}

.quiz_option-group .quiz_form-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quiz_option-values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quiz_option-value {
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.quiz_option-radio {
  display: none;
}

.quiz_option-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: 40px;
  padding: 0 16px;
  font-family: var(--font5);
  font-size: 13px;
  text-transform: uppercase;
  color: #0f0f0e;
  border-bottom: 1px solid #E3E3E3;
  transition: background 0.15s, color 0.15s;
}

.quiz_option-value:last-child .quiz_option-label {
  border-right: none;
}

.quiz_option-label.active,
.quiz_option-radio:checked + .quiz_option-label {
  background: #0f0f0e;
  color: #fff;
}

/* Form labels */
.quiz_form-label {
  font-family: var(--font5);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  color: #141414;
  display: block;
}

/* Form inputs */
.quiz_form-input,
.quiz_form input[type="text"],
.quiz_form input[type="tel"],
.quiz_form textarea {
  width: 100%;
  height: 44px;
  padding: 12px 16px;
  border: 1px solid #E3E3E3;
  background: #fff;
  font-family: var(--font5);
  font-size: 13px;
  color: #141414;
  border-radius: 0;
  outline: none;
  margin-bottom: 12px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.quiz_form-input:focus,
.quiz_form input:focus,
.quiz_form textarea:focus {
  border-color: #141414;
}

.quiz_form textarea {
  height: auto;
  min-height: 44px;
  resize: vertical;
}

/* Comment input */
.quiz_comment-input {
  height: auto;
  min-height: 44px;
  padding: 12px 16px;
  resize: vertical;
}

/* Form */
.quiz_form {
  display: flex;
  flex-direction: column;
}

/* Payment method section */
.quiz_pay {
  margin-top: 8px;
}

.quiz_pay-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Part payment info */
.quiz .part-payment-container {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.quiz .part-payment-text {
  font-size: 12px;
  color: #5e5e5e;
}

/* Submit button */
.quiz_button {
  margin-top: 20px;
  width: 100%;
  height: 48px;
  background: #0f0f0e;
  font-family: var(--second-family);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #0f0f0e;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.quiz_button:hover {
  background: #fff;
  color: #0f0f0e;
}

.quiz_button:disabled {
  background: #d0d0d0;
  color: #a0a0a0;
  border-color: #d0d0d0;
  cursor: default;
}

.kviz_button {
  margin-top: 10px !important;
  background: transparent !important;
  color: black !important;
  border: 1px solid #000 !important;
}

/* Progress steps (hidden by default in one-page mode) */
.quiz_progres-wrapper {
  display: none;
}

/* Payment methods inside quiz */
.quiz .table {
  width: 100%;
  border: none;
  margin-bottom: 20px !important;
}

.quiz .table td {
  padding: 0 !important;
  border: none;
}

.quiz b,
.quiz strong {
  display: block;
  font-family: var(--font5);
  font-weight: 400;
  font-size: 13px;
  text-transform: uppercase;
  color: #0f0f0e;
  margin-bottom: 8px;
}

.quiz input[name='payment_method'],
.quiz input[type='radio'] {
  accent-color: #000;
  margin-top: 2px;
}

.quiz label {
  line-height: 1.5;
  font-size: 13px;
}

.form_radio-wrapper {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}

.form_radio-wrapper label {
  padding-left: 0;
  font-family: var(--font5);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  color: #0f0f0e;
}

.form_radio-wrapper input[type='radio'] {
  accent-color: #000;
}

.panel-title {
  display: none;
}

.panel-body {
  padding: 0;
}

.control-label {
  font-family: var(--font5);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  color: #141414;
  margin-bottom: 6px !important;
}

/* Select styling */
.quiz select.quiz_form-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%230f0f0e' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding-right: 32px;
}

/* Size table link */
.quiz_size-table-link {
  font-size: 12px;
  color: #0f0f0e;
  text-decoration: underline;
  cursor: pointer;
}

/* ===== Page 3: Shipping / Confirmation ===== */

.title_block-wrapper {
  display: none;
}

.quiz_progres-wrapper {
  display: none;
}

.title_done {
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 17px;
  text-transform: uppercase;
  color: #0f0f0e;
  margin: 0 0 16px;
}

.order_done {
  padding: 0;
  border: none;
}

.order_done .panel-body {
  padding: 0;
}

/* Shipping methods inside quiz */
.quiz #collapse-shipping-method {
  display: block !important;
  height: auto !important;
}

.quiz #collapse-shipping-method .radio,
.quiz #collapse-shipping-method .form-group {
  margin-bottom: 12px;
}

.quiz #collapse-shipping-method label {
  font-family: var(--font5);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 25px;
}

.quiz #collapse-shipping-method input[type="text"],
.quiz #collapse-shipping-method select {
  width: 100%;
  height: 44px;
  padding: 12px 16px;
  border: 1px solid #E3E3E3;
  background: #fff;
  font-family: var(--font5);
  font-size: 13px;
  color: #141414;
  border-radius: 0;
  outline: none;
  box-sizing: border-box;
}

.quiz #collapse-shipping-method .control-label {
  font-size: 13px;
  margin-bottom: 6px !important;
}

.quiz_form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.quiz_form-label-row span {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
}

/* Cart items inside quiz (page 2/3) */
.quiz .cart_order-wrapper {
  max-height: none;
  padding: 0;
}

.quiz .cart_order {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #E3E3E3;
}

.quiz .cart_order:last-child {
  border-bottom: none;
}

.quiz .cart_order-img {
  width: 70px;
  height: 90px;
  object-fit: cover;
  flex-shrink: 0;
}

.quiz .cart_order-text {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-transform: uppercase;
}

.quiz .order_text-title {
  font-family: var(--second-family);
  font-size: 13px;
  font-weight: 500;
  color: #0f0f0e;
  opacity: 1;
}

.quiz .cart_color {
  font-size: 12px;
  color: #5e5e5e;
  line-height: 140%;
}

.quiz .cart_order-price {
  font-size: 13px;
  font-weight: 500;
}

.quiz .cart-score {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 8px;
}

.quiz .cart_modal-score {
  width: 36px;
  height: 36px;
  background: transparent;
  color: #0f0f0e;
  border: 1px solid #E3E3E3;
  border-radius: 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.quiz .modal_score {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border: 1px solid #E3E3E3;
  border-left: none;
  border-right: none;
}

.quiz .modal_score-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: 8px;
}

.ui-autocomplete {
  z-index: 3010;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .quiz {
    width: 100%;
  }

  .quiz_page {
    padding: 20px 16px;
  }

  .quiz_title {
    font-size: 17px;
  }
}