.elementor-1392 .elementor-element.elementor-element-a51a148{--display:flex;--margin-top:0px;--margin-bottom:30px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-02ed0d5 *//* ==========================================
   KINNO PAYMENT FORM
========================================== */

.payment-form {

  max-width: 520px;

  margin: auto;

  padding: clamp(16px, 4vw, 28px);

  display: flex;

  flex-direction: column;

  gap: clamp(12px, 2.5vw, 18px);

}


/* ==========================================
   HEADING
========================================== */

.payment-form h2 {

  margin: 0;

  font-size: clamp(21px, 4vw, 28px);

  font-weight: 600;

  color: #111;

}


/* ==========================================
   INTRO
========================================== */

.payment-intro {

  margin: -5px 0 5px;

  font-size: 13px;

  line-height: 1.6;

  color: #777;

}


/* ==========================================
   LABELS
========================================== */

.payment-form > label,
.receipt-label {

  font-size: 14px;

  font-weight: 500;

  color: #222;

}


/* ==========================================
   REQUIRED ASTERISK
========================================== */

.required {

  color: #F8A500 !important;

  font-weight: 600;

}


/* ==========================================
   FIELD NOTES
========================================== */

.field-note {

  margin: -8px 0 0;

  font-size: 11px;

  line-height: 1.5;

  color: #999;

}


/* ==========================================
   INPUTS
========================================== */

.payment-form input,
.payment-form textarea,
.payment-form select {

  width: 100%;

  box-sizing: border-box;

  padding: clamp(12px, 3vw, 16px);

  border: 1px solid #ddd;

  border-radius: 10px;

  background: #fff;

  color: #111;

  font-family: inherit;

  font-size: clamp(13px, 2.5vw, 15px);

}


/* ==========================================
   PLACEHOLDERS
========================================== */

.payment-form input::placeholder,
.payment-form textarea::placeholder {

  color: #999;

}


/* ==========================================
   TEXTAREA
========================================== */

.payment-form textarea {

  min-height: 110px;

  resize: vertical;

}


/* ==========================================
   SELECT
========================================== */

.payment-form select {

  height: clamp(44px, 6vw, 52px);

  appearance: none;

  -webkit-appearance: none;

  background-color: #fff;

  background-image:
    url("data:image/svg+xml;utf8,<svg fill='%23F8A500' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5H5z'/></svg>");

  background-repeat: no-repeat;

  background-position:
    right 12px center;

  background-size: 16px;

  padding-right: 40px;

}


/* ==========================================
   PAYMENT ROW
========================================== */

.row {

  display: flex;

  gap: 10px;

}


.row select {

  width: 40%;

}


.row input {

  width: 60%;

}


/* ==========================================
   EVENT / PROJECT DETAILS
========================================== */

.event-details-section {

  display: flex;

  flex-direction: column;

  gap: clamp(12px, 2.5vw, 18px);

}


.event-details-heading {

  display: flex;

  flex-direction: column;

  gap: 4px;

}


.event-details-heading strong {

  font-size: 15px;

  font-weight: 600;

  color: #111;

}


.event-details-heading small {

  font-size: 12px;

  line-height: 1.5;

  color: #777;

}


/* ==========================================
   BANK PAYMENT BOX
========================================== */

.bank-payment-box {

  padding: 20px;

  border-radius: 14px;

  background: #fffaf0;

  border: 1px solid
    rgba(248, 165, 0, 0.3);

}


/* ==========================================
   BANK HEADING
========================================== */

.bank-payment-heading {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 18px;

}


.bank-payment-icon {

  width: 42px;

  height: 42px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #F8A500;

  color: #111;

  font-size: 18px;

  font-weight: 700;

}


.bank-payment-heading strong {

  display: block;

  font-size: 16px;

  color: #111;

}


.bank-payment-heading small {

  display: block;

  margin-top: 3px;

  font-size: 12px;

  line-height: 1.4;

  color: #777;

}


/* ==========================================
   ACCOUNT SECTION
========================================== */

.account-section {

  margin-bottom: 16px;

}


.account-section:last-of-type {

  margin-bottom: 0;

}


/* ==========================================
   ACCOUNT SECTION TITLE
========================================== */

.account-section-title {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 10px 2px;

  font-size: 14px;

  color: #111;

}


.account-section-title strong {

  font-size: 14px;

  font-weight: 600;

}


.account-currency-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 24px;

  height: 24px;

  border-radius: 50%;

  background: #F8A500;

  color: #111;

  font-size: 13px;

  font-weight: 700;

}


/* ==========================================
   BANK DETAILS
========================================== */

.bank-details {

  background: #fff;

  border-radius: 10px;

  overflow: hidden;

}


.bank-detail-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding: 13px 14px;

  border-bottom: 1px solid #eee;

}


.bank-detail-row:last-child {

  border-bottom: none;

}


.bank-detail-row span {

  font-size: 12px;

  color: #777;

}


.bank-detail-row strong {

  font-size: 13px;

  color: #111;

  text-align: right;

  word-break: break-word;

}


/* ==========================================
   ACCOUNT NUMBER + COPY
========================================== */

.copy-row {

  align-items: center;

}


.copy-value {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 8px;

}


.copy-value strong {

  font-size: 14px;

  letter-spacing: .3px;

}


/* ==========================================
   SMALL COPY BUTTON
========================================== */

.copy-button {

  width: auto !important;

  min-width: 0 !important;

  padding: 5px 8px !important;

  margin: 0 !important;

  border: 1px solid #F8A500 !important;

  border-radius: 6px !important;

  background: #fffaf0 !important;

  color: #111 !important;

  cursor: pointer;

  font-size: 11px !important;

  line-height: 1.2 !important;

  font-weight: 500 !important;

  font-family: inherit !important;

  box-shadow: none !important;

  transform: none !important;

}


.copy-button:hover {

  background: #fff5df !important;

  color: #111 !important;

  box-shadow: none !important;

  transform: none !important;

}


/* ==========================================
   BANK NOTE
========================================== */

.bank-note {

  margin: 13px 0 0;

  font-size: 12px;

  line-height: 1.5;

  color: #777;

}


/* ==========================================
   RECEIPT UPLOAD
========================================== */

.receipt-upload {

  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 10px;

}


/* ==========================================
   RECEIPT PICKER
========================================== */

.receipt-picker {

  width: 100%;

  min-height: 150px;

  box-sizing: border-box;

  border: 1.5px dashed #F8A500;

  border-radius: 12px;

  background: #fffaf0;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 20px 15px;

  cursor: pointer;

  overflow: hidden;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;

}


.receipt-picker:hover {

  background: #fff5df;

  border-color: #d98d00;

  transform: translateY(-1px);

}


/* ==========================================
   DEFAULT RECEIPT CONTENT
========================================== */

.receipt-default {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 100%;

}


/* ==========================================
   RECEIPT ICON
========================================== */

.receipt-icon {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: #F8A500;

  color: #111;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  font-weight: 600;

  margin-bottom: 10px;

}


/* ==========================================
   RECEIPT TEXT
========================================== */

.receipt-picker-text {

  display: flex;

  flex-direction: column;

  gap: 5px;

}


.receipt-picker-text strong {

  font-size: 15px;

  font-weight: 600;

  color: #111;

}


.receipt-picker-text span {

  font-size: 13px;

  color: #666;

}


.receipt-picker-text small {

  font-size: 11px;

  color: #999;

}


/* ==========================================
   IMAGE PREVIEW
========================================== */

.receipt-preview {

  display: none;

  width: 100%;

  height: 250px;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  border-radius: 9px;

}


.receipt-preview img {

  display: block;

  max-width: 100%;

  max-height: 250px;

  width: auto;

  height: auto;

  object-fit: contain;

  border-radius: 8px;

}


/* ==========================================
   PDF PREVIEW
========================================== */

.pdf-preview {

  display: none;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  width: 100%;

  min-height: 110px;

}


.pdf-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 50px;

  height: 50px;

  border-radius: 10px;

  background: #F8A500;

  color: #111;

  font-size: 12px;

  font-weight: 700;

}


.pdf-preview strong {

  font-size: 14px;

  color: #111;

}


.pdf-preview span {

  max-width: 90%;

  font-size: 12px;

  color: #777;

  word-break: break-word;

}


/* ==========================================
   HIDE ACTUAL FILE INPUT
========================================== */

#receipt {

  position: absolute;

  width: 1px;

  height: 1px;

  opacity: 0;

  pointer-events: none;

}


/* ==========================================
   SELECTED FILE
========================================== */

.receipt-name {

  display: none;

  padding: 10px 12px;

  border-radius: 8px;

  background: #f7f7f7;

  border: 1px solid #e5e5e5;

  font-size: 13px;

  color: #333;

  word-break: break-word;

}


/* ==========================================
   SUBMIT BUTTON
========================================== */

.payment-form button {

  width: 100%;

  padding: 15px;

  border: none;

  border-radius: 10px;

  background: #F8A500;

  color: #111;

  cursor: pointer;

  font-size: 15px;

  font-weight: 600;

  font-family: inherit;

  transition:
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    opacity .25s ease;

}


.payment-form button:hover {

  background: #d98d00;

  transform: translateY(-2px);

  box-shadow:
    0 6px 16px
    rgba(248,165,0,.22);

}


.payment-form button:disabled {

  opacity: .6;

  cursor: not-allowed;

  transform: none;

  box-shadow: none;

}


/* ==========================================
   FOCUS
========================================== */

.payment-form input:focus,
.payment-form select:focus,
.payment-form textarea:focus {

  outline: none;

  border-color: #F8A500;

  box-shadow:
    0 0 0 2px
    rgba(248,165,0,.08);

}


/* ==========================================
   TRUST NOTE
========================================== */

.trust-note {

  margin: -5px 0 0;

  font-size: 11px;

  line-height: 1.5;

  color: #999;

  text-align: center;

}

/* ==========================================
   TABLET DROPDOWN FIX
========================================== */

@media (min-width: 601px) and (max-width: 1024px) {

  .payment-form select {

    padding-top: 8px !important;

    padding-bottom: 8px !important;

    padding-left: 12px !important;

    padding-right: 38px !important;

    height: 48px !important;

    line-height: normal !important;

    font-size: 14px;

    box-sizing: border-box;

  }


  .row select {

    padding-top: 8px !important;

    padding-bottom: 8px !important;

    padding-left: 12px !important;

    padding-right: 38px !important;

    height: 48px !important;

    line-height: normal !important;

  }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

  .payment-form {

    padding: 16px;

  }


  .row {

    flex-direction: column;

  }


  .row select,
  .row input {

    width: 100%;

  }


  .bank-payment-box {

    padding: 16px;

  }


  .bank-detail-row {

    align-items: flex-start;

    flex-direction: column;

    gap: 4px;

  }


  .bank-detail-row strong {

    text-align: left;

  }


  .copy-row {

    gap: 8px;

  }


  .copy-value {

    width: 100%;

    justify-content: flex-start;

  }


  .copy-button {

    width: auto !important;

    padding: 5px 8px !important;

  }


  .receipt-picker {

    min-height: 140px;

  }


  .receipt-preview {

    height: 220px;

  }


  .receipt-preview img {

    max-height: 220px;

  }

}/* End custom CSS */