/* AlphaCon Assessment Styles with Payment Integration */
* { box-sizing: border-box; }

.pm-assessment { max-width: 900px; margin: 30px auto; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; color: #2c3e50; }
.pm-assessment h2 { color: #089; text-align: center; font-size: 28px; margin-bottom: 20px; }
.pm-assessment h3 { color: #089; font-size: 20px; margin-top: 25px; margin-bottom: 15px; }
.pm-assessment h4 { color: #2c3e50; font-size: 18px; margin-top: 20px; margin-bottom: 12px; }

/* ============================================================================
   PAYMENT GATE STYLES
   ============================================================================ */

.pm-payment-gate { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 2px solid #089; border-radius: 12px; padding: 40px; margin: 30px 0; }
.pm-payment-content h3 { text-align: center; color: #089; margin-top: 0; }
.pm-payment-content > p { text-align: center; font-size: 16px; color: #6c757d; }

.pm-payment-option { background: white; border-radius: 10px; padding: 30px; margin: 25px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.pm-test-mode-banner { background: #fff3cd; border: 2px solid #ffc107; border-radius: 8px; padding: 15px; margin-bottom: 20px; text-align: center; color: #856404; }

.pm-voucher-section h4 { margin-top: 0; display: flex; align-items: center; gap: 8px; }
.pm-voucher-input-group { display: flex; gap: 10px; margin: 15px 0; }
.pm-voucher-input-group input { flex: 1; }
.pm-voucher-feedback { margin-top: 15px; padding: 15px; border-radius: 8px; font-weight: 600; }
.pm-voucher-feedback.pm-success { background: #d4edda; color: #155724; border: 2px solid #c3e6cb; }
.pm-voucher-feedback.pm-error { background: #f8d7da; color: #721c24; border: 2px solid #f5c6cb; }

.pm-btn-verify-voucher { padding: 12px 25px; font-size: 16px; font-weight: 600; color: white; background: #089; border: none; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; }
.pm-btn-verify-voucher:hover:not(:disabled) { background: #067; transform: translateY(-1px); }
.pm-btn-verify-voucher:disabled { background: #ccc; cursor: not-allowed; }

.pm-payment-divider { text-align: center; margin: 30px 0; position: relative; }
.pm-payment-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #dee2e6; }
.pm-payment-divider span { position: relative; background: #f8f9fa; padding: 0 20px; color: #6c757d; font-weight: 600; }

.pm-pricing-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 25px 0; }

.pm-pricing-card { background: white; border: 3px solid #dee2e6; border-radius: 12px; padding: 25px 20px; text-align: center; transition: all 0.3s ease; position: relative; }
.pm-pricing-card:hover { border-color: #089; transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,136,153,0.2); }

.pm-pricing-card.pm-popular { border-color: #28a745; box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3); }
.pm-pricing-card.pm-popular::before { content: '⭐ POPULAR'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #28a745; color: white; padding: 4px 15px; border-radius: 20px; font-size: 12px; font-weight: 700; }

.pm-pricing-badge { background: #089; color: white; padding: 6px 15px; border-radius: 20px; display: inline-block; font-weight: 600; font-size: 14px; margin-bottom: 15px; }
.pm-pricing-badge-popular { background: #28a745; color: white; padding: 6px 15px; border-radius: 20px; display: inline-block; font-weight: 600; font-size: 14px; margin-bottom: 15px; }

.pm-pricing-amount { font-size: 32px; font-weight: 700; color: #2c3e50; margin: 10px 0; }
.pm-pricing-per-test { font-size: 14px; color: #6c757d; margin: 5px 0; }
.pm-pricing-gst { font-size: 13px; color: #6c757d; font-style: italic; margin-bottom: 10px; }
.pm-pricing-save { background: #ff6b6b; color: white; padding: 4px 12px; border-radius: 15px; display: inline-block; font-size: 13px; font-weight: 600; margin: 8px 0; }

.pm-btn-select-price { width: 100%; padding: 12px 20px; font-size: 16px; font-weight: 600; color: white; background: linear-gradient(135deg, #089 0%, #067 100%); border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; margin-top: 15px; }
.pm-btn-select-price:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,136,153,0.4); }
.pm-btn-select-price:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; }

.pm-popular .pm-btn-select-price { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); }
.pm-popular .pm-btn-select-price:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4); }

.pm-payment-info { background: #f8f9fa; border-left: 4px solid #089; padding: 20px; margin-top: 30px; border-radius: 6px; }
.pm-payment-info p { margin: 8px 0; font-size: 15px; }

.pm-payment-loading { text-align: center; padding: 40px 20px; }
.pm-payment-loading h3 { color: #089; }

.pm-voucher-codes-display { background: #f8f9fa; border: 2px solid #dee2e6; border-radius: 8px; padding: 20px; margin: 20px 0; max-height: 300px; overflow-y: auto; }
.pm-voucher-code-item { background: white; border: 2px solid #089; border-radius: 6px; padding: 12px 15px; margin: 8px 0; font-family: 'Courier New', monospace; font-size: 16px; font-weight: 600; color: #089; text-align: center; }

.pm-btn-proceed-after-payment { display: block; margin: 30px auto 0; max-width: 300px; }

/* ============================================================================
   ORIGINAL ASSESSMENT STYLES
   ============================================================================ */

.pm-anti-cheat-warning { background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%); border: 3px solid #ffc107; border-radius: 12px; padding: 30px; margin: 30px 0; box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2); }
.pm-anti-cheat-warning h3 { color: #856404; margin-top: 0; margin-bottom: 20px; font-size: 22px; }
.pm-warning-content ul { list-style: none; padding-left: 0; margin: 20px 0; }
.pm-warning-content ul li { padding: 12px 0 12px 30px; position: relative; line-height: 1.6; }
.pm-warning-content ul li:before { content: '⚠️'; position: absolute; left: 0; }

.pm-acknowledgement-section { background: white; border: 2px solid #ffc107; border-radius: 8px; padding: 20px; margin: 25px 0; }
.pm-acknowledgement-label { display: block; padding: 12px 0; cursor: pointer; font-weight: 500; }
.pm-acknowledgement-label input { margin-right: 10px; cursor: pointer; }

.pm-btn-start-assessment { display: block; width: 100%; max-width: 300px; margin: 20px auto 0; padding: 15px 30px; font-size: 18px; font-weight: 600; color: white; background: linear-gradient(135deg, #28a745 0%, #20c997 100%); border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); }
.pm-btn-start-assessment:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(40, 167, 69, 0.4); }
.pm-btn-start-assessment:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; }

#pm-assessment-content { animation: pmFadeIn 0.5s ease; }
@keyframes pmFadeIn { from { opacity: 0; } to { opacity: 1; } }

#pm-assessment-countdown { position: sticky; top: 0; background: white; z-index: 100; padding: 10px 0; border-bottom: 2px solid #dee2e6; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
#pm-countdown-clock { font-size: 22px; color: #dc3545; font-weight: 700; }

@supports not (position: sticky) { #pm-assessment-countdown { position: fixed; top: 0; left: 0; right: 0; max-width: 900px; margin: 0 auto; } #pm-assessment-content { padding-top: 60px; } }

.pm-assessment-instructions { background: #e7f3ff; border-left: 4px solid #089; padding: 15px 20px; margin: 20px 0; border-radius: 4px; }

.pm-candidate-info-section { background: #f8f9fa; border: 2px solid #089; border-radius: 8px; padding: 25px; margin: 25px 0; }
.pm-candidate-info-section h3 { margin-top: 0; color: #089; }
.pm-form-group { margin-bottom: 20px; }
.pm-form-group label { display: block; font-weight: 600; margin-bottom: 8px; color: #2c3e50; }
.pm-wide-input { width: 100%; padding: 12px 15px; font-size: 16px; border: 2px solid #dee2e6; border-radius: 6px; transition: border-color 0.3s ease; }
.pm-wide-input:focus { outline: none; border-color: #089; }

.pm-assessment-progress { background: white; border: 2px solid #dee2e6; border-radius: 8px; padding: 15px 20px; margin: 20px 0; }
.pm-assessment-progress-text { font-weight: 600; color: #2c3e50; margin-bottom: 10px; display: block; }
.pm-assessment-progress-bar { width: 100%; height: 25px; background: #e9ecef; border-radius: 12px; overflow: hidden; }
.pm-assessment-progress-fill { background: linear-gradient(90deg, #28a745 0%, #20c997 100%); height: 100%; transition: width 0.3s ease; }

.pm-question-block { background: white; border: 2px solid #dee2e6; border-radius: 10px; padding: 25px; margin: 25px 0; transition: border-color 0.3s ease; }
.pm-question-block:hover { border-color: #089; }
.pm-question-block.pm-locked { background: #f8f9fa; border-color: #dc3545; }
.pm-question-block h3 { color: #089; margin-top: 0; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
.pm-question-text { font-size: 17px; line-height: 1.7; margin-bottom: 20px; color: #2c3e50; font-weight: 500; }

.pm-mc-header { display: flex; justify-content: flex-end; margin-bottom: 15px; }
.pm-mc-timer { display: inline-block; padding: 8px 16px; background: #ffc107; color: #333; border-radius: 20px; font-weight: 600; font-size: 14px; transition: all 0.3s ease; }
.pm-mc-timer[data-state="idle"] { background: #e9ecef; color: #6c757d; }
.pm-mc-timer[data-state="running"] { background: #ffc107; animation: pmPulse 1s infinite; }
@keyframes pmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.pm-multiple-choice-options { display: flex; flex-direction: column; gap: 12px; }
.pm-option-label { display: flex; align-items: center; padding: 15px 18px; background: #f8f9fa; border: 2px solid #dee2e6; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; font-size: 16px; line-height: 1.5; }
.pm-option-label:hover { background: #e7f3ff; border-color: #089; }
.pm-option-label input { margin-right: 12px; cursor: pointer; }
.pm-option-label span { font-weight: 600; margin-right: 8px; color: #089; }

.pm-text-answer { width: 100%; min-height: 120px; padding: 15px; font-size: 16px; border: 2px solid #dee2e6; border-radius: 8px; font-family: inherit; line-height: 1.6; resize: vertical; transition: border-color 0.3s ease; }
.pm-text-answer:focus { outline: none; border-color: #089; }

.pm-answer-feedback { margin-top: 15px; padding: 12px 15px; border-radius: 6px; font-weight: 500; }
.pm-answer-feedback.pm-correct { background: #d4edda; border-left: 4px solid #28a745; color: #155724; }
.pm-answer-feedback.pm-incorrect { background: #f8d7da; border-left: 4px solid #dc3545; color: #721c24; }
.pm-answer-feedback.pm-submitted { background: #fff3cd; border-left: 4px solid #ffc107; color: #856404; }

.pm-assessment-actions { text-align: center; margin: 40px 0; }
.pm-btn-submit-assessment { padding: 15px 40px; font-size: 18px; font-weight: 600; color: white; background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); }
.pm-btn-submit-assessment:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 123, 255, 0.4); }
.pm-btn-submit-assessment:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; }

#pm-assessment-results { animation: pmFadeIn 0.5s ease; }
.pm-results-summary { background: #f8f9fa; border: 2px solid #089; border-radius: 10px; padding: 25px; margin: 25px 0; text-align: center; }
.pm-results-summary p { font-size: 18px; margin: 10px 0; }

.pm-btn-review-answers, .pm-btn-retake-assessment { margin: 10px; padding: 12px 30px; font-size: 16px; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; }
.pm-btn-review-answers { background: #089; color: white; }
.pm-btn-review-answers:hover { background: #067; transform: translateY(-2px); }
.pm-btn-retake-assessment { background: #6c757d; color: white; }
.pm-btn-retake-assessment:hover { background: #545b62; transform: translateY(-2px); }

.pm-assessment.pm-loading { opacity: 0.6; pointer-events: none; }

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
  .pm-assessment { padding: 15px; margin: 15px auto; }
  .pm-assessment h2 { font-size: 24px; }
  .pm-payment-gate { padding: 25px 20px; }
  .pm-payment-option { padding: 20px 15px; }
  .pm-pricing-options { grid-template-columns: 1fr; gap: 15px; }
  .pm-voucher-input-group { flex-direction: column; }
  .pm-anti-cheat-warning { padding: 20px; }
  .pm-candidate-info-section { padding: 20px; }
  .pm-question-block { padding: 20px; }
  .pm-question-text { font-size: 16px; }
  .pm-option-label { padding: 12px 15px; font-size: 15px; }
  #pm-countdown-clock { font-size: 18px; }
  .pm-btn-start-assessment, .pm-btn-submit-assessment { font-size: 16px; padding: 12px 25px; }
}

@media print {
  .pm-payment-gate,
  .pm-anti-cheat-warning,
  #pm-assessment-countdown,
  .pm-mc-timer,
  .pm-assessment-actions,
  .pm-btn-review-answers,
  .pm-btn-retake-assessment { display: none; }
  .pm-question-block { page-break-inside: avoid; }
}