/* ── SCOA Registration Plugin – Frontend Styles ── */

*,
*::before,
*::after {
     box-sizing: border-box;
}

.scoa-wrap {
     font-family: 'Zalando', sans-serif;
     color: #1a1a1a;
     max-width: 700px;
     margin: 0 auto;
}

/* ── Notice banners ───────────────────────────────────────────────────────── */
.scoa-notice {
     padding: 12px 18px;
     border-radius: 6px;
     margin: 16px 0;
     font-size: 16px;
     border-left: 4px solid transparent;
}
.scoa-notice-warning {
     background: #fff8e1;
     border-left-color: #f59e0b;
     color: #7c4a00;
}
.scoa-notice-info {
     background: #e8f4fd;
     border-left-color: #2563eb;
     color: #1e3a5f;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.scoa-card {
     background: #fff;
     padding: 36px;
     border-radius: 12px;
}

/* ── Form ─────────────────────────────────────────────────────────────────── */
.scoa-form {
     padding: 0;
}

/* ── Field groups (text inputs) ───────────────────────────────────────────── */
.scoa-field-group {
     padding: 12px 0;
}
.scoa-field-group:last-of-type {
     border-bottom: none;
}

.scoa-label {
     display: block;
     font-size: 18px;
     font-weight: 400;
     color: #0e1115;
     margin-bottom: 13px;
     text-transform: uppercase;
     letter-spacing: 0.03em;
}
.scoa-input {
     width: 100%;
     border: 1px solid rgba(0, 0, 0, 0.2) !important;
     border-radius: 8px !important;
     padding: 15px 14px !important;
     font-size: 16px !important;
     color: #0e1115;
     background: #f5f5f6;
     outline: none;
     transition: border-color 0.2s;
     -webkit-appearance: none;
}
.scoa-input:focus {
     box-shadow: 0 0 0 3px rgba(181, 43, 58, 0.08);
}
.scoa-input::placeholder {
     color: #3a3c44;
}

/* ── Options groups ───────────────────────────────────────────────────────── */
.scoa-options-group {
     background: #fff;
     margin-top: 12px;
     border-radius: 0;
     overflow: hidden;
}

.scoa-category-label {
     color: #b52b3a;
     font-size: 18px;
     font-weight: 400;
     letter-spacing: 0.02em;
}

/* ── Option Row (radio) ───────────────────────────────────────────────────── */
.scoa-option-row {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 13px 20px;
     border: 1px solid #e2e2e2;
     background: linear-gradient(180deg, #fff, #f5f5f6);
     border-radius: 6px;
     margin: 20px 0;
     cursor: pointer;
     position: relative;
}

.scoa-option-row.selected {
     background: #fff8f8;
}
.scoa-option-row.is-pending-due {
     border-color: #2563eb;
     background: #f0f7ff;
}

.scoa-radio {
     width: 18px;
     height: 18px;
     accent-color: rgb(0, 0, 221);
     flex-shrink: 0;
     cursor: pointer;
}

.scoa-option-label {
     flex: 1;
     font-size: 18px;
     font-weight: 400;
     color: #0e1115;
     line-height: 1.4;
}

.scoa-price {
     font-size: 18px;
     font-weight: 400;
     color: #0e1115;
     white-space: nowrap;
     margin-left: auto;
}

/* ── Quantity Controls ────────────────────────────────────────────────────── */
.scoa-qty-wrap {
     display: flex;
     align-items: center;
     gap: 10px;
     border: 1px solid #ddd;
     border-radius: 6px;
     overflow: hidden;
     background: #f9f9f9;
     flex-shrink: 0;
}
.scoa-qty-btn {
     background: #f0f0f0 !important;
     border: none !important;
     width: 32px;
     height: 32px;
     font-size: 18px;
     cursor: pointer;
     color: #0e1115 !important;
     line-height: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
}
.scoa-qty-btn:hover {
     background: #e2e2e2 !important;
}
.scoa-qty-btn:active {
     background: #d0d0d0 !important;
}
.scoa-qty-input {
     width: 42px;
     border: none;
     border-left: 1px solid #ddd;
     border-right: 1px solid #ddd;
     text-align: center;
     font-size: 14px;
     font-weight: 400;
     background: #fff;
     padding: 4px 0;
     height: 32px;
     -moz-appearance: textfield;
     outline: none;
}
.scoa-qty-input::-webkit-inner-spin-button,
.scoa-qty-input::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
}

.scoa-btn-pay:hover:not(:disabled) {
     background: #991f2c;
}

/* Qty controls hidden until row is selected */
.scoa-option-row.has-qty .scoa-qty-wrap {
     display: none;
}
.scoa-option-row.has-qty.selected .scoa-qty-wrap {
     display: flex;
}

/* ── Total row ────────────────────────────────────────────────────────────── */
.scoa-total-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 14px 24px;
     background: #f5f5f5;
     border-top: 1px solid #e8e8e8;
     margin-top: 12px;
}
.scoa-total-label {
     font-size: 16px;
     font-weight: 600;
     color: #000;
     text-transform: uppercase;
}
.scoa-total-amount {
     font-size: 18px;
     font-weight: 600;
     color: #b52b3a;
}

/* ── Error message ────────────────────────────────────────────────────────── */
.scoa-error-msg {
     background: #fff0f0;
     color: #b52b3a;
     border: 1px solid #fac8cb;
     border-radius: 6px;
     padding: 10px 16px;
     margin: 12px 16px 0;
     font-size: 0.88rem;
}

/* ── Submit Button ────────────────────────────────────────────────────────── */
.scoa-btn-pay {
     display: block !important;
     width: 100% !important;
     margin: 14px 0 !important;
     background: #b52b3a !important;
     color: #fff !important;
     border: none;
     border-radius: 6px !important;
     padding: 16px 24px !important;
     cursor: pointer;
     letter-spacing: 0.03em;
     text-align: center;
}
.scoa-btn-text,
.scoa-btn-loader {
     color: #fff !important;
     font-size: 18px !important;
     font-weight: 600 !important;
}
.scoa-btn-pay:active:not(:disabled) {
     transform: scale(0.99) !important;
}
.scoa-btn-pay:disabled {
     opacity: 0.65 !important;
     cursor: not-allowed !important;
}

/* ── Responsive Fixes for Mobile ───────────────────────────────────────────── */
@media (max-width: 600px) {
     .scoa-card {
          padding: 20px 15px;
          border-radius: 8px;
     }

     .scoa-label {
          font-size: 16px;
          margin-bottom: 8px;
     }

     .scoa-input {
          padding: 12px !important;
          font-size: 15px !important;
     }

     .scoa-option-row {
          flex-wrap: wrap;
          padding: 15px;
          gap: 10px;
          margin: 12px 0;
     }

     .scoa-option-label {
          font-size: 16px;
          width: 100%;
          order: 1;
     }

     .scoa-radio {
          order: 0;
     }

     .scoa-price {
          font-size: 16px;
          order: 2;
          margin-left: 30px;
          color: #b52b3a;
          font-weight: 400;
     }

     .scoa-qty-wrap {
          order: 3;
          margin-left: auto;
     }

     .scoa-total-row {
          padding: 15px;
          flex-direction: column;
          align-items: flex-start;
          gap: 5px;
     }

     .scoa-btn-pay {
          padding: 14px 20px;
          font-size: 16px;
          width: 100% !important;
          margin: 10px 0 !important;
     }

     .scoa-gateway-wrap {
          padding: 0;
     }

     .scoa-category-label {
          font-size: 16px;
          margin-top: 20px;
          line-height: 1.3;
     }
}