/*
Theme Name:     Hello Elementor Child
Template:       hello-elementor
Theme URI:      https://elementor.com/hello-theme/
Description:    Child theme for Hello Elementor
Author:         Czarina Bayena
Version:        1.0
Text Domain:    hello-elementor-child
*/
 
.card{
  margin: 0 auto;
  background:#fff;
  border:1px solid #e7e7ea;
  border-radius:14px;
  padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
 
#payForm{
  margin-top: 4px;
}

#payForm label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:#1f2937;
  margin:0 0 6px;
  letter-spacing:.2px;
}

#payForm label.muted{
  font-weight:600;
  color:#6b7280;
}

#payForm input{
  width:100%;
  height:44px;
  padding:10px 12px;
  border:1px solid #d7dbe3;
  border-radius:10px;
  background:#fff;
  color:#111827;
  font-size:15px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#payForm input::placeholder{
  color:#9aa3b2;
}

/* Focus + validation */
#payForm input:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 4px rgba(59,130,246,.15);
}

#payForm input:required:invalid:not(:focus):not(:placeholder-shown){
  border-color:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.12);
}

/* ---------- 3) Layout helpers ---------- */
#payForm .field{
  display:flex;
  flex-direction:column;
}

#payForm .grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

#payForm .grid-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
}

#payForm .mt-14{ margin-top:14px; }
#payForm .mt-18{ margin-top:18px; }

/* ---------- 4) Card label + icons (for CC number row) ---------- */
/* Label layout */
.card-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* Card number input row wrapper */
#payForm .card-row{
  position:relative;
}

/* Icons container (absolute inside the row) */
#payForm .card-icons{
  position:absolute;
  right:10px;
  top:25px;              /* aligns near input */
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:none;
  opacity:.85;
}

/* If you also use <i> (Font Awesome) icons */
#payForm .card-icons i{
  font-size:30px;
  line-height:1;
  transition:transform .15s ease, opacity .15s ease;
}

/* If you use SVG icons */
#payForm .card-icons svg{
  height:18px;
  width:auto;
  display:block;
  filter:grayscale(15%);
}

/* Add space to the input when icons are present */
#payForm .has-icons input{
  padding-right:120px;
}

/* Brand colors */
#payForm .card-icons .fa-cc-visa{ color:#1A1F71 !important; }
#payForm .card-icons .fa-cc-mastercard{ color:#EB001B; }
#payForm .card-icons .fa-cc-amex{ color:#2E77BC; }
#payForm .card-icons .fa-cc-discover{ color:#FF6000; }

/* Optional polish on focus */
#ccNumber:focus ~ .card-icons i,
.card-label:has(+ #ccNumber:focus) .card-icons i{
  transform:translateY(-1px);
  opacity:1;
}

 
#anetError.err{
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
}

 
#payForm .btn{
  width:100%;
  margin-top:18px;
  height:46px;
  border:0;
  border-radius:12px;
  background:#111827;
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:transform .06s ease, opacity .15s ease;
}

#payForm .btn:hover{ opacity:.95; }
#payForm .btn:active{ transform:translateY(1px); }
#payForm .btn:disabled{
  opacity:.65;
  cursor:not-allowed;
}
 
@media (max-width:680px){
  #payForm .grid-2,
  #payForm .grid-3{
    grid-template-columns:1fr;
  }
 
  #payForm .card-icons{ display:none; }

 
  #payForm .has-icons input{ padding-right:12px; }
}

@media (max-width:480px){
  .card-label{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
}

 
  #payForm .card-icons i{
    font-size:26px;
  }
	

.card .search{
  margin-bottom:10px;
}

.card .search form{
  margin:0;
}

.card .search input[type="search"]{
  width:100%;
  height:44px;
  padding:10px 12px;
  border:1px solid #d7dbe3;
  border-radius:10px;
  background:#fff;
  color:#111827;
  font-size:15px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.card .search input[type="search"]::placeholder{
  color:#9aa3b2;
}

.card .search input[type="search"]:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 4px rgba(59,130,246,.15);
}


.card .table-wrap,
.card [style*="overflow:auto"]{
  border:1px solid #e7e7ea;
  border-radius:12px;
  background:#fff;
}

#reportTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:900px; 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

#reportTable th,
#reportTable td{
  padding:12px 14px;
  font-size:14px;
  vertical-align:top;
  text-align:left;
  border-bottom:1px solid #eef0f4;
  color:#111827;
  background:#fff;
}


#reportTable thead th{
  position:sticky; 
  top:0;
  z-index:1;
  background:#f9fafb;
  color:#1f2937;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2px;
  border-bottom:1px solid #e7e7ea;
}

#reportTable thead th:first-child{
  border-top-left-radius:12px;
}
#reportTable thead th:last-child{
  border-top-right-radius:12px;
}

/* Zebra + hover */
#reportTable tbody tr:nth-child(even) td{
  background:#fcfcfd;
}
#reportTable tbody tr:hover td{
  background:#f6faff;
}

/* Muted cell text */
#reportTable td.muted,
#reportTable .muted{
  color:#6b7280;
}

#reportTable .nowrap{
  white-space:nowrap;
}


.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1.1;
  border:1px solid transparent;
  white-space:nowrap;
}

.badge.unpaid{
  background:#fef2f2;
  color:#991b1b;
  border-color:#fecaca;
}


.badge.paid{
  background:#ecfdf5;
  color:#065f46;
  border-color:#a7f3d0;
}
.badge.pending{
  background:#fffbeb;
  color:#92400e;
  border-color:#fde68a;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.actions .act{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid #d7dbe3;
  background:#fff;
  color:#111827;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:transform .06s ease, opacity .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.actions .act:hover{
  border-color:#cbd5e1;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}

.actions .act:active{
  transform:translateY(1px);
}

.actions form .act[type="submit"]{
  border-color:#fecaca;
  color:#991b1b;
  background:#fff;
}

.actions form .act[type="submit"]:hover{
  background:#fef2f2;
}


.actions .act:focus-visible{
  outline:none;
  border-color:#3b82f6;
  box-shadow:0 0 0 4px rgba(59,130,246,.15);
}

@media (max-width:680px){
  #reportTable{
    min-width:760px; /* still scrolls horizontally but less aggressive */
  }
  #reportTable th,
  #reportTable td{
    padding:10px 12px;
  }
}

}

/* ---------- Base form wrapper ---------- */
.card form{
  margin-top:4px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---------- Grid layout ---------- */
.card form .grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

/* Full-width rows (textarea) */
.card form .grid > div:nth-child(4){
  grid-column:1 / -1;
}

/* ---------- Labels ---------- */
.card form label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:#1f2937;
  margin:0 0 6px;
  letter-spacing:.2px;
}

/* ---------- Inputs, selects, textarea ---------- */
.card form input,
.card form select,
.card form textarea{
  width:100%;
  height:44px;
  padding:10px 12px;
  border:1px solid #d7dbe3;
  border-radius:10px;
  background:#fff;
  color:#111827;
  font-size:15px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Textarea specifics */
.card form textarea{
  min-height:96px;
  height:auto;
  resize:vertical;
}

/* Placeholder */
.card form input::placeholder,
.card form textarea::placeholder{
  color:#9aa3b2;
}

/* ---------- Focus state ---------- */
.card form input:focus,
.card form select:focus,
.card form textarea:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 4px rgba(59,130,246,.15);
}

/* ---------- Validation (matches your payForm rules) ---------- */
.card form input:required:invalid:not(:focus):not(:placeholder-shown),
.card form select:required:invalid:not(:focus){
  border-color:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.12);
}

/* ---------- Select styling ---------- */
.card form select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px;
  background-repeat:no-repeat;
  padding-right:36px;
}

/* ---------- Button row ---------- */
.card .row-center{
  display:flex;
  justify-content:center;
}

/* Button already matches your system, this just ensures spacing */
.card form .btn{
  width:100%;
  max-width:280px;
}

/* ---------- Mobile ---------- */
@media (max-width:680px){
  .card form .grid{
    grid-template-columns:1fr;
  }

  .card form .btn{
    max-width:100%;
  }
}