/* ========================================
   ArTechBD Checkout Page - Simplify Confirm Section
   Hide comment box and privacy/terms checkboxes
   ======================================== */

/* ========================================
   1. HIDE COMMENT/ADDITIONAL INFO BOX
   ======================================== */

/* Hide the textarea for additional comments */
.checkout-section.confirm-section .section-comments,
.checkout-section.confirm-section .section-body .section-comments,
.confirm-section .section-comments {
  display: none !important;
}

/* Hide the textarea specifically */
.checkout-section.confirm-section textarea,
.confirm-section textarea.form-control {
  display: none !important;
}

/* ========================================
   2. HIDE PRIVACY POLICY CHECKBOX
   ======================================== */

/* Hide the entire privacy policy checkbox div */
.checkout-section.confirm-section .checkbox:has(a[href*="information_id=3"]),
.confirm-section .section-body .checkbox:first-of-type {
  display: none !important;
}

/* Hide by text content */
.checkout-section.confirm-section .checkbox:has(.agree:contains("Privacy Policy")) {
  display: none !important;
}

/* ========================================
   3. HIDE TERMS & CONDITIONS CHECKBOX
   ======================================== */

/* Hide the entire terms & conditions checkbox div */
.checkout-section.confirm-section .checkbox:has(a[href*="information_id=5"]),
.confirm-section .section-body .checkbox:last-of-type {
  display: none !important;
}

/* Hide by text content */
.checkout-section.confirm-section .checkbox:has(.agree:contains("Terms & Conditions")) {
  display: none !important;
}

/* Hide all checkboxes in confirm section */
.checkout-section.confirm-section .checkbox {
  display: none !important;
}

/* ========================================
   4. IMPROVE BUTTON LAYOUT
   ======================================== */

/* Make confirm button section cleaner */
.checkout-section.confirm-section .buttons.confirm-buttons {
  margin-top: 0 !important;
  padding-top: 20px;
  border-top: 2px solid #e0e0e0;
}

/* Center the button or make it full-width */
.checkout-section.confirm-section .buttons .pull-right {
  width: 100%;
  float: none !important;
  text-align: center;
}

/* Style the confirm button */
#quick-checkout-button-confirm,
.checkout-section.confirm-section .btn-primary {
  width: 100%;
  max-width: 400px;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

#quick-checkout-button-confirm:hover,
.checkout-section.confirm-section .btn-primary:hover {
  background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}

#quick-checkout-button-confirm:active,
.checkout-section.confirm-section .btn-primary:active {
  transform: translateY(0);
}

/* ========================================
   5. CLEAN UP SECTION BODY
   ======================================== */

/* Remove extra spacing from hidden elements */
.checkout-section.confirm-section .section-body {
  padding: 20px 0;
}

/* Make section title stand out */
.checkout-section.confirm-section .section-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a202c;
  padding-bottom: 15px;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 20px;
}

/* ========================================
   6. RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
  #quick-checkout-button-confirm,
  .checkout-section.confirm-section .btn-primary {
    width: 100%;
    max-width: none;
    padding: 14px 24px;
    font-size: 16px;
  }
  
  .checkout-section.confirm-section .section-title {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  #quick-checkout-button-confirm,
  .checkout-section.confirm-section .btn-primary {
    padding: 12px 20px;
    font-size: 15px;
  }
}

/* ========================================
   7. ENSURE CHECKBOXES ARE ACCESSIBLE
   (Hidden but still in DOM for validation)
   ======================================== */

/* Keep checkboxes accessible but invisible */
.checkout-section.confirm-section .checkbox input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ========================================
   8. LOADING STATE
   ======================================== */

#quick-checkout-button-confirm[disabled],
#quick-checkout-button-confirm.loading {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========================================
   9. FOCUS STATE FOR ACCESSIBILITY
   ======================================== */

#quick-checkout-button-confirm:focus,
.checkout-section.confirm-section .btn-primary:focus {
  outline: 3px solid #2196F3;
  outline-offset: 3px;
}

/* ========================================
   10. ALTERNATIVE: MINIMAL SECTION
   If you want just title and button
   ======================================== */

.checkout-minimal .checkout-section.confirm-section .section-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.checkout-minimal .checkout-section.confirm-section {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}