/* QR Code Payment Specific Styles */
      .payment_method_qrcode .payment_box {
          padding: 20px;
          background: #f8fafc;
          border-radius: 8px;
          margin-top: 10px;
      }
      
      .payment-icon {
          height: 24px;
          margin-left: 8px;
          vertical-align: middle;
      }
      
      .qrcode-flow {
          position: relative;
      }
      
      .qrcode-step {
          transition: all 0.3s ease;
      }
      
      .qrcode-container {
          text-align: center;
          padding: 15px;
          background: white;
          border-radius: 8px;
          box-shadow: 0 2px 10px rgba(0,0,0,0.05);
          margin-bottom: 20px;
          position: relative;
      }
      
      .qrcode-image {
          width: 400px;
          height: 200px;
          display: block;
          margin: 0 auto;
          border: 1px solid #eee;
          padding: 10px;
          background: white;
      }
      
      .instruction {
          text-align: center;
          color: #555;
          margin: 15px 0;
          font-size: 15px;
      }
      
      .timer-container {
          position: absolute;
          top: 50%;
          left: 75%;
          transform: translate(-50%, -50%);
      }
      
      .circular-timer {
          width: 60px;
          height: 60px;
          position: relative;
      }
      
      .timer-circle {
          width: 100%;
          height: 100%;
          transform: rotate(-90deg);
      }
      
      .timer-circle-bg {
          fill: none;
          stroke: #f0f0f0;
          stroke-width: 3;
      }
      
      .timer-circle-fill {
          fill: none;
          stroke: #4CAF50;
          stroke-width: 3;
          transition: stroke-dasharray 1s linear;
      }
      
      .timer-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 12px;
          font-weight: bold;
          color: #555;
      }
      
      .upload-container {
          margin: 20px 0;
      }
      
      .upload-area {
          border: 2px dashed #ddd;
          border-radius: 8px;
          padding: 30px;
          text-align: center;
          cursor: pointer;
          transition: all 0.3s;
      }
      
      .upload-area:hover {
          border-color: #aaa;
          background: #f9f9f9;
      }
      
      .upload-area p {
          margin-top: 10px;
          color: #777;
      }
      
      .upload-preview {
          position: relative;
          text-align: center;
          margin-top: 15px;
      }
      
      #previewImage {
          max-width: 100%;
          max-height: 200px;
          border-radius: 4px;
          border: 1px solid #eee;
      }
      
      .change-btn {
          background: #f0f0f0;
          border: none;
          padding: 5px 10px;
          border-radius: 4px;
          margin-top: 10px;
          cursor: pointer;
          font-size: 13px;
      }
      
      .requirements {
          background: #f8f8f8;
          padding: 15px;
          border-radius: 8px;
          margin-top: 20px;
      }
      
      .requirements ul {
          margin: 10px 0 0 20px;
          padding: 0;
          font-size: 13px;
          color: #666;
      }
      
      .small-text {
          font-size: 13px;
          margin-bottom: 5px;
          color: #555;
      }
      
      .success-message {
          text-align: center;
          padding: 20px;
      }
      
      .success-message h4 {
          color: #4CAF50;
          margin: 15px 0 5px;
      }
      
      .success-message p {
          color: #666;
      }
      
      .scan-complete-btn {
          display: block;
          width: 100%;
          margin-top: 15px;
      }
      
      /* Disabled state for place order button */
      #placeOrderBtn[disabled] {
          opacity: 0.7;
          cursor: not-allowed;
          background-color: #ccc !important;
      }