/* =========================================================
   SIMPLEX / CITT STYLE - CLEANED & DEDUPED
   ========================================================= */

/* ===== Variables ===== */
:root {
  --color-main: #132441;
  --color-main-2: #18234b;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-inset: 0 0 12px 0 rgba(255, 255, 255, 0.25) inset;
  --glass-bg: rgba(0, 0, 0, 0.1);
  --glass-blur: blur(30px);

  /* Camera guide vars */
  --namecard-ratio: 1.585185185; /* 85.6/54 */
  --guide-w: 88%;
  --guide-max-w: 720px;
  --guide-radius: 12px;
  --guide-dim: rgba(0,0,0,.35);
  --guide-stroke: 2px;
}

/* ===== Basic ===== */
button { font-family: Arial, sans-serif; }

blockquote, dl, figure, form, ol, p, pre, ul { margin-bottom: 0 !important; }

/* ===== Layout wrappers ===== */
.home-page-cus {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.form-all-wapper { display: flex; }
.form-all-choose-job {
  width: 50%;
  margin-top: 52px;
  text-align: left;
  padding-right: 20px;
}
.form-all-choose-job.submitted { width: fit-content !important; }

.form-group-wrapper {
  padding: 12px;
  padding-bottom: 30px;
  width: 50%;
}
.form-group-wrapper.submitted { width: 100% !important; }

.form-layout { width: 100%; }
.form-layout-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-layout label {
  font-size: 16px;
  text-align: left;
  font-weight: 400;
  color: var(--color-main);
  margin-bottom: 4px;
}

.upload-img-form {
  width: 100%;
  text-align: left;
  margin-top: 16px;
}
.upload-img-form span { color: var(--color-main); }

.row-add { margin-bottom: -40px !important; }
.row-add .col { padding-bottom: 50px; }

/* ===== Form base (broad) ===== */
#content form { width: 100%; }

form input[type="file"],
form input[type="text"],
form select,
form button { width: 100%; }

#content form select {
  width: 100%;
  margin-bottom: 10px;
  background: #ececec;
  border-radius: var(--radius-8);
  color: var(--color-main);
}

#content form button {
  border-radius: var(--radius-8);
  border: 1px solid var(--color-main);
  padding: 4px 20px;
  background: var(--color-main);
  box-shadow: var(--shadow-inset);
  text-transform: none;
}

/* ===== Upload form wrapper ===== */
#citt-upload-form {
  text-align: center;
  width: 70%;
  border-radius: 20px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  padding: 8px;
  padding-top: 20px;
  padding-bottom: 0;
  margin-top: 0 !important;
}

#citt-upload-form .form-submit-cus { padding: 15px 0; }

#citt-upload-form .submit-form {
  font-weight: 400;
  text-transform: none;
  font-size: 16px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 16px;
  padding: 10px 80px;
}

/* ===== Custom file upload ===== */
.custom-file-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--radius-4);
  padding: 12px 32px;
  width: 80%;
  font-family: sans-serif;
  font-size: 20px;
  overflow: hidden;
  gap: 8px;
  box-shadow: 2px 4px 4px rgba(0,0,0,.2);
  border: 1px solid #b5b5b5;
  cursor: pointer;
}

.custom-file-upload label {
  background-color: #0f1d3d;
  color: #fff;
  padding: 6px 14px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.custom-file-upload .file-name {
  color: #777;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
  text-align: left;
  margin-left: 20px;
}

.custom-file-upload input[type="file"] { display: none; }

.upload-placeholder {
  color: #ccc;
  margin-left: auto;
  pointer-events: none;
  user-select: none;
  padding-right: 6px;
}

#citt-image-input {
  display: block;
  margin: 10px auto;
}

/* ===== Input group with camera button ===== */
.input-group {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: var(--radius-10);
  padding: 5px;
  width: 100%;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
}

.camera-button {
  background: #fff;
  border: none;
  padding: 8px;
  border-radius: var(--radius-10);
  cursor: pointer;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
  margin-bottom: 0;
}
.camera-button img { width: 24px; height: 24px; }

/* ===== Stage A ===== */
#stage-a {
  border-radius: 20px;
  border: 0 solid #b5b5b5;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  padding: 44px 63px 8px 64px;
  width: fit-content;
}
#stage-a .wrap-stage { text-align: center; }
#stage-a #title-fix-ai {
  color: var(--color-main);
  font-size: 32px;
  text-align: center;
}

.title-step,
#industry-label { color: var(--color-main); }

#start-camera {
  background: #fff;
  color: var(--color-main);
  border-radius: var(--radius-4);
}
#go-next {
  border-radius: var(--radius-10);
  background-color: var(--color-main);
  color: #fff;
  margin-bottom: 0 !important;
}
#go-prev { margin-bottom: 0 !important; }

#preview-before,
#preview-after {
  width: fit-content;
  margin-top: 8px;
}

.btnProcess,
.btnManual,
.btnRotate,
.btnDownload,
.btnDelete {
  margin-bottom: 0 !important;
  text-transform: none;
}

/* ===== Stage B result ===== */
#stage-b .wrap {
  display: flex;
  justify-content: space-between;
}
#stage-b #citt-result { margin-top: 20px; font-weight: bold; }
#stage-b #citt-result img { width: 100%; height: 100%; }

#citt-result textarea {
  height: 200px;
  border-radius: var(--radius-12);
  overflow-y: scroll;
  scrollbar-width: none;
  box-shadow: 0 0 11px rgba(0,0,0,.25) inset;
}
#citt-result img { width: 16px; height: 16px; }

.ort-text-all { display: flex; gap: 35px; }
.ort-text-left, .ort-text-right {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.ort-text-p { color: var(--color-main); padding-bottom: 10px; }

#supplier-options,
#industry-wrapper,
#sub-options { margin-left: 4px; }

#business-options,
#industry-group,
#service-options { color: var(--color-main); }

#citt-save-btn {
  background: var(--color-main);
  text-transform: none;
  color: #fff;
  border-radius: var(--radius-8);
  padding: 0 30px;
  display: flex;
  gap: 12px;
  font-size: 20px;
  margin-bottom: 0;
  align-items: center;
  font-weight: 400;
}
#citt-save-btn.is-busy { pointer-events: none; opacity: .6; }

.btn-save-center {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
#stage-b #citt-result .btn-save-center img { width: 20px; height: 20px; }

/* ===== Page headings / text ===== */
.page-ds h3 {
  text-align: center;
  font-size: 32px;
  color: var(--color-main);
  border-bottom: 1px solid var(--color-main);
  padding: 30px 0;
}
.page-ds p { margin: 0; margin-top: 20px; }

/* ===== Filters + search ===== */
.list-name-card {
  display: flex;
  gap: 10px;
  margin: 0;
  border-radius: var(--radius-8);
}
.list-name-card input[type="text"] {
  width: 100%;
  padding-left: 36px;
  border-radius: var(--radius-8);
  height: 48px;
}
.list-name-card button {
  width: 100%;
  margin-bottom: 0;
  border-radius: var(--radius-8);
  font-size: 16px;
  text-transform: none;
  font-weight: 400;
  color: #fff;
  padding: 0 10px;
  margin-right: 0;
}

/* grouped selects (desktop default) */
.list-name-card #country,
.list-name-card #industry,
.list-name-card #region,
.list-name-card #status_filter {
  width: 45%;
  border-radius: var(--radius-8);
  padding: 10px;
  height: 100%;
  margin-bottom: 0;
}

.search-text {
  width: 100%;
  position: relative;
}
.search-text img {
  position: absolute;
  left: 12px;
  top: 16px;
}
#advance-search-fields { width: 100%; }

.submit-form,
#toggle-advance-search { background: var(--color-main-2); }

.submit-form:hover,
#toggle-advance-search:hover { background-color: #2a3970; }

.searchform .button.icon { background: var(--color-main-2); }

/* ===== Folder lists ===== */
.lists-folder {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 16px;
  padding: 18px 30px;
  margin: 20px 0 0;
  border: 1px solid rgba(19, 36, 65, 0.1);
  border-radius: var(--radius-8);
}
.lists-folder a { text-transform: capitalize; }
.lists-folder span { border: 1px solid var(--color-main); height: 25px; }

.list-folders {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 16px;
  padding: 20px 0 0;
  margin: 0;
}
.list-folders img { display: block; }

.list-folders a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  text-decoration: none;
  color: #fff;
}
.list-folders a:hover { color: #fff; }

.list-name-card .list-folders { display: none; }

/* ===== Tables ===== */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 20px;
  border-radius: 20px;
}
.form-table-wrap-all,
.table-wrap {
  border-radius: var(--radius-12);
  border: 0 solid #b5b5b5;
  background: var(--glass-bg);
  padding: 20px;
  backdrop-filter: var(--glass-blur);
}
.form-table-wrap-all { margin-bottom: 24px; }

.ocr-data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.table-wrap .ocr-data-table {
  width: 1500px;
  border-collapse: collapse;
  margin-top: 20px;
}

.ocr-data-table th,
.ocr-data-table td {
  padding: 15px;
  text-align: left;
  font-size: 14px;
}
.table-wrap .ocr-data-table th {
  color: #000;
  font-weight: bold;
  width: 15%;
  border-bottom: 1px solid;
  text-align: center;
}
.ocr-data-table th:first-child { width: 3%; }
.table-wrap .ocr-data-table th:nth-child(3) { width: 20%; }
.ocr-data-table .width-table-text { width: 25%; }

tr.highlighted-row {
  background-color: #fff3cd !important;
  transition: background-color .3s ease;
}

.info-card .text-left { text-align: left; }
.info-card td {
  color: #666;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  text-align: center;
}

/* ===== Pagination ===== */
.citt-pagination {
  margin: 20px 0;
  text-align: center;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
.citt-pagination .page-next,
.citt-pagination .page-number,
.citt-pagination .page-prev { color: #000; }
.citt-pagination .page-next,
.citt-pagination .page-prev { letter-spacing: 1.2px; }
.citt-pagination .current { background-color: #fff; color: #132440; }

.pagination-ad-sale { display: flex; gap: 20px; }
.pagination-ad-sale .current {
  background-color: #ebe5e5;
  color: #132440;
  padding: 6px 14px;
  border-radius: var(--radius-8);
}

/* ===== Download button ===== */
#download-btn {
  display: inline-block;
  padding: 8px 16px;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-4);
  cursor: pointer;
  left: 0;
}
#download-btn img { width: 30px; }

/* ===== OCR result layout ===== */
.ocr-result-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.ocr-image-left { display: none; } /* was duplicated; default off */
.ocr-image {
  width: 100%;
  display: flex;
  transition: transform .3s ease;
  border-radius: 5px;
}
.ocr-image img {
  max-width: 400px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.ocr-summary { text-align: right; }

.seclect-category { display: flex; gap: 20px; }

.ocr-text { min-width: 100%; height: auto; }

/* ===== Popup OCR ===== */
.ocr-popup-width {
  margin: auto;
  background: #fff;
  max-width: 530px;
  padding: 20px;
  position: relative;
  top: 15%;
  height: 600px;
  border-radius: var(--radius-8);
}

#popup-content #download-btn { position: absolute; top: 4px; }

#close-popup {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding-right: 16px;
  z-index: 10;
}
#ocr-popup #close-popup { margin-right: 0; }

/* ===== Flip animation ===== */
.switch-img-btn { margin-top: 4px; margin-bottom: 0; padding-left: 30px; }
.switch-img-btn img { width: 20px; }

.switchable-img { transition: transform .4s cubic-bezier(.4,.2,.2,1); }
.switchable-img.flip-anim { transform: rotateY(-180deg); }

.popup-flip-wrap {
  perspective: 1000px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 10px;
  height: 260px;
}
.popup-flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform .5s cubic-bezier(.4,.2,.2,1);
  transform-style: preserve-3d;
}
.popup-flip-inner.flipped { transform: rotateY(180deg); }

.popup-flip-front,
.popup-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-flip-front img,
.popup-flip-back img {
  max-height: 483px;
  position: absolute;
  min-width: 480px;
  top: 44px;
}

.popup-flip-back { transform: rotateY(-180deg); }

#popup-switch-btn {
  display: inline-block;
  padding: 8px 16px;
  color: #000;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-4);
  cursor: pointer;
  margin-bottom: 10px;
  position: absolute;
  bottom: -8px;
  padding-left: 0;
}
#popup-switch-btn img { width: 24px; }

/* ===== Status / messages ===== */
.bg-inactive { background: #ffe5e5 !important; }

.citt-msg { font-size: 12px; color: #555; }
.citt-msg.is-success { color: #008a00; }
.citt-msg.is-error { color: #c00; }

.is-success { color: #15803d; }
.is-error { color: #b91c1c; }

/* ===== Admin tables / actions ===== */
.table-admin {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}
.table-admin-overlow { overflow-x: auto; }
.table-admin input,
.table-admin select { width: fit-content !important; }

.ocr-text-admin { min-width: 400px; }
.branch-amdin { width: 300px; }

.button-filter,
.citt-edit-btn,
.citt-delete-btn,
.citt-cancel-btn,
.citt-save-btn {
  background-color: var(--color-main) !important;
  border-radius: var(--radius-8) !important;
  color: #fff !important;
}
.citt-status-select { border-radius: var(--radius-4); }

.citt-edit-btn,
.citt-delete-btn,
.citt-cancel-btn,
.citt-save-btn { margin-bottom: 0 !important; }

.citt-delete-btn:hover { color: red !important; }

.wapper-admin h1,
.wp-list-table tr th,
.wp-list-table tr td { color: #333; }

#citt-pick-next {
  color: #000;
  text-transform: none;
  font-size: 18px;
}

/* ===== Cards / wrappers ===== */
.citt-wrap,
.wapper-admin {
  max-width: 100%;
  margin: 24px auto;
  background: #fff;
  border-radius: var(--radius-12);
  padding: 20px;
}

.citt-role-head {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.citt-role-head p { color: #333; }

.citt-role-grid {
  display: grid;
  gap: 20px;
  width: 100%;
  overflow-x: auto;
}
@media (max-width: 900px) {
  .citt-role-grid { grid-template-columns: 1fr; }
}

.citt-actions { margin-top: 16px; display: flex; gap: 8px; align-items: center; }
.citt-search { margin-left: auto; }
.citt-search input { min-width: 220px; }

.citt-wrap h1 {
  margin: 16px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-main);
}

.citt-actions button,
.citt-users-table .button-save-pw,
.citt-del .button {
  background-color: var(--color-main);
  border-radius: var(--radius-10);
  white-space: nowrap;
}

.edit-action .button {
  margin-bottom: 10px !important;
  margin-left: 16px;
}

.grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cardW), 1fr));
  gap: 14px;
}

.hint-title { color: #fff; }

select.new-role,
.password-wrapper input { border-radius: var(--radius-8) !important; }

/* ===== Users table ===== */
.citt-sticky { position: sticky; top: 16px; }

.citt-users-table {
  width: 1700px;
  border-collapse: collapse;
  overflow-x: auto;
}
.citt-users-table th,
.citt-users-table td {
  border-bottom: 1px solid #eee;
  padding: 10px 8px;
  text-align: left;
  vertical-align: middle;
  color: #333;
}

.role-badge {
  display: inline-block;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* ===== Cropper modal ===== */
#cropper-modal {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  top: 3%;
}

.preview-all {
  display: flex;
  gap: 30px;
  justify-content: center;
}
.preview-all span {
  color: var(--color-main);
  font-size: 16px;
  margin-bottom: 8px;
}
#stage-b .preview-all img {
  height: 200px;
  border-radius: var(--radius-4);
  width: 100%;
}

/* ===== Hide / show blocks in stage-b ===== */
#stage-b .addnew-deleteAll .bar-wrap,
.card .ph button.btn-replace-cropped span,
.gallery-item .card .ph #start-camera { display: none; }

#pick-gallery-item .card .ph .update-take-photo { display: none; }

.citt-ocr-table textarea { border-radius: var(--radius-12); }

/* ===== Loading indicator ===== */
.image-upload-indicator {
  margin: 15px 0;
  padding: 12px 20px;
  background: rgba(255,255,255,.95);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: slideDown .3s ease-out;
}
.upload-progress { display: flex; align-items: center; gap: 12px; }

.upload-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.upload-text { font-size: 14px; color: #333; font-weight: 500; }

@keyframes spin { 0%{transform: rotate(0)} 100%{transform: rotate(360deg)} }
@keyframes slideDown { from{opacity:0; transform: translateY(-10px)} to{opacity:1; transform: translateY(0)} }

/* ===== Popup modal (confirm) ===== */
.citt-popup-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
}
.citt-popup-overlay.show { opacity: 1; visibility: visible; }

.citt-popup-modal {
  background: #fff;
  border-radius: var(--radius-12);
  padding: 30px;
  max-width: 420px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  transform: scale(.8);
  transition: transform .3s ease;
  text-align: center;
  padding-bottom: 20px;
}
.citt-popup-overlay.show .citt-popup-modal { transform: scale(1); animation: citt-popup-bounce .4s ease; }

.citt-popup-icon { width: 80px; height: 80px; margin: 0 auto 20px; display: block; }
.citt-popup-title { font-size: 24px; font-weight: 600; color: var(--color-main); margin-bottom: 8px; }
.citt-popup-message { font-size: 16px; color: #666; margin-bottom: 25px; line-height: 1.5; }

.citt-popup-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.citt-popup-btn {
  padding: 4px 24px;
  border: none;
  border-radius: var(--radius-8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
  display: inline-block;
}

.citt-popup-btn-primary {
  background-color: var(--color-main);
  color: #fff;
  text-transform: none;
}
.citt-popup-btn-primary:hover { background-color: #0f1d35; transform: translateY(-1px); }

.citt-popup-btn-secondary {
  background-color: #f8f9fa;
  color: var(--color-main);
  border: 1px solid #dee2e6;
  text-transform: none;
}
.citt-popup-btn-secondary:hover { background-color: #e9ecef; transform: translateY(-1px); }

@keyframes citt-popup-bounce {
  0% { transform: scale(.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(.9); }
  100% { transform: scale(1); opacity: 1; }
}

#citt-confirm-yes,
#citt-confirm-no { color: #fff; }

/* ===== Custom select dropdown icon (shared) ===== */
#country,
#supplier_type,
#industry,
#status_filter,
#user_filter_select,
.status_filter2 {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"%3E%3Cpath d="M1 1L6 6L11 1" stroke="%23132441" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
  padding-right: 40px !important;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  position: relative;
}

#country:hover,
#supplier_type:hover,
#industry:hover,
#status_filter:hover,
#user_filter_select:hover,
.status_filter2:hover {
  border-color: var(--color-main);
  box-shadow: 0 2px 8px rgba(19, 36, 65, 0.1);
}

#country:focus,
#supplier_type:focus,
#industry:focus,
#status_filter:focus,
#user_filter_select:focus,
.status_filter2:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(19, 36, 65, 0.1);
}

#country.has-value,
#supplier_type.has-value,
#industry.has-value,
#status_filter.has-value,
#user_filter_select.has-value,
.status_filter2.has-value {
  background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"%3E%3Cpath d="M1 1L6 6L11 1" stroke="%23132441" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0"/%3E%3C/svg%3E') !important;
  animation: fadeOutDropdownIcon .5s ease-out forwards;
}

#country:not(.has-value),
#supplier_type:not(.has-value),
#industry:not(.has-value),
#status_filter:not(.has-value),
#user_filter_select:not(.has-value),
.status_filter2:not(.has-value) {
  animation: fadeInDropdownIcon .4s ease-in forwards;
}

@keyframes fadeInDropdownIcon {
  0% { background-size: 8px 5px; }
  50% { background-size: 10px 6.5px; }
  100% { background-size: 12px 8px; }
}

/* Smooth transition for options */
#country option,
#supplier_type option,
#industry option,
#status_filter option,
.status_filter2 option,
#user_filter_select option { transition: all .2s ease; }

/* User select wrap with left icon */
.user-filter-select-wrap {
  position: relative;
  width: 100%;
}
.user-filter-select-wrap select {
  width: 100%;
  padding: 8px 40px 8px 40px;
  border-radius: 6px;
}
.user-filter-select-wrap::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("/wp-content/plugins/convert-img-to-text/assets/image/user.png") no-repeat center / contain;
  z-index: 10;
}

/* ===== Misc ===== */
.count-card { text-align: right; }
.save-load-new {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.save-load-new img { width: 25px; height: 25px; }

#citt-save-status {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex-direction: column;
}

#citt-reload-btn {
  color: #fff;
  cursor: pointer;
  background-color: var(--color-main);
  border-radius: var(--radius-16);
  padding: 10px;
  padding-bottom: 4px;
  padding-top: 6px;
}

#fieldOptions { display: flex; flex-wrap: wrap; }

.image-input {
  display: flex;
  justify-content: center;
  gap: 50px;
}

/* ===== Front / back blocks ===== */
#backside,
#frontside {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}

/* ===== Hide supplier/industry groups by default ===== */
#supplier-options,
#business-options,
#service-options,
#industry-wrapper,
#sub-options { display: none; }

/* =========================================================
   CAMERA GUIDE - KEEP ONLY ONE VERSION (FIX object-fit cover)
   ========================================================= */
#camera-container { width: 100%; }
#camera-container .cam-wrap { width: 100%; }

/* Camera preview box: stable size so guide/crop doesn't shift */
#camera-container .height-cam {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-12);
  background: #000;
}

/* Video must be cover to match JS crop mapping */
#camera-container #cam-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* MUST */
}

/* Overlay guide */
#camera-container #cam-guide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 50;
}

/* Guide box: rect is taken from this element (no border affecting rect) */
#camera-container #cam-guide-box {
  width: min(var(--guide-w), var(--guide-max-w));
  aspect-ratio: var(--namecard-ratio);
  position: relative;
  border-radius: var(--guide-radius);
  box-shadow: 0 0 0 9999px var(--guide-dim);
  background: transparent;
}

/* Draw dashed border in pseudo-element so rect isn't offset */
#camera-container #cam-guide-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--guide-stroke) dashed rgba(255,255,255,.95);
  border-radius: inherit;
}

/* Corner marks (optional) */
#camera-container #cam-guide-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(#fff,#fff) left 10px top 10px / 22px 2px no-repeat,
    linear-gradient(#fff,#fff) left 10px top 10px / 2px 22px no-repeat,
    linear-gradient(#fff,#fff) right 10px top 10px / 22px 2px no-repeat,
    linear-gradient(#fff,#fff) right 10px top 10px / 2px 22px no-repeat,
    linear-gradient(#fff,#fff) left 10px bottom 10px / 22px 2px no-repeat,
    linear-gradient(#fff,#fff) left 10px bottom 10px / 2px 22px no-repeat,
    linear-gradient(#fff,#fff) right 10px bottom 10px / 22px 2px no-repeat,
    linear-gradient(#fff,#fff) right 10px bottom 10px / 2px 22px no-repeat;
  opacity: .85;
}

/* Camera controls */
.cam-controls { margin-top: 20px; }

@media (max-width: 480px) {
  :root { --guide-w: 92%; }
}

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

/* Desktop: row layout for OCR result */
@media (min-width: 768px) {
  .ocr-result-container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .ocr-image { height: auto; display: flex; }
  .camera-mobile { display: none; }
}

/* Mobile */
@media (max-width: 768px) {
  .preview-all { flex-direction: column; gap: 20px; }
  .table-wrap { padding-bottom: 0; }
  .count-card { text-align: left; }

  .page-ds { margin-top: 30px; border-radius: var(--radius-8); padding-bottom: 48px; }
  .home-page-cus { flex-direction: column; margin-top: 30px; border-radius: var(--radius-8); padding-bottom: 48px; }

  .page-ds h3 { font-size: 24px; padding: 20px 0; }

  #country,
  .list-name-card #region { margin-bottom: 20px; }

  .lists-folder {
    margin: 28px 15px 0;
    overflow-y: auto;
    height: 260px;
    padding: 18px 15px;
  }

  .switch-img-btn img { width: 16px; }
  .popup-flip-front img, .popup-flip-back img { min-width: auto !important; }

  .sidebar-menu-tabs { display: none !important; }

  #content form button {
    background: var(--color-main);
    width: 100%;
    padding: 0 20px;
    font-size: 14px;
  }

  .list-name-card { flex-direction: column; padding: 0; }

  .list-name-card #country,
  .list-name-card #industry,
  .list-name-card #region,
  .list-name-card #status_filter,
  #user-filter-mobile {
    width: 100%;
    font-size: 14px;
  }

  .form-group-wrapper { padding: 15px 0; width: 100%; }
  #citt-upload-form { padding-left: 0; padding-right: 0; width: 100%; }
  #citt-upload-form .form-submit-cus { padding: 15px 0 0; }
  #citt-upload-form .submit-form { padding: 4px 40px; }

  .bg-blur, #citt-result { padding: 25px 15px !important; }

  .form-all-wapper { flex-direction: column; padding: 12px; }
  .form-all-choose-job { width: 100%; padding-right: 0; margin-top: 0; }
  #preview-before, #preview-after { width: 100%; }
  .form-layout-wrapper { padding: 0 !important; }

  #content form select { margin-bottom: 0; }
  .table-wrap { padding: 12px; }
  .form-table-wrap-all { padding: 12px; }

  .user-filter-select-wrap { display: none; }
  .list-name-card .user-filter-select-wrap { display: block; }

  .img-front-back { gap: 12px; }
  .ort-text-all { flex-direction: column; gap: 20px; }
  .ort-text-left, .ort-text-right { width: 100%; }
  #citt-result { padding: 20px 15px; }

  #stage-b .bar #start-camera,
  #stage-b .bar-wrap { display: none !important; }
  #stage-b .addnew-deleteAll .bar-wrap { display: block !important; }

  #stage-b .addnew-deleteAll .custom-file-upload {
    font-size: 14px !important;
    padding: 10px 30px !important;
    width: 100% !important;
    margin-bottom: 12px;
  }

  .home-page-cus #stage-b .btn-delete-all {
    justify-content: center;
    width: 100% !important;
    font-size: 14px !important;
  }

  #stage-b .bar { width: 100% !important; }
  .addnew-deleteAll { padding-top: 10px; }

  #backside, #frontside {
    margin-bottom: 0;
    font-size: 12px;
    padding: 4px 12px;
  }

  .gallery-item .card .ph {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
  }

  .card .ph button.btn-replace-cropped,
  .gallery-item .card .ph #start-camera {
    position: unset !important;
    padding: 4px 12px !important;
    font-size: 12px;
    border: 0.75px solid #b5b5b5;
    box-shadow: 2px 4px 4px rgba(0,0,0,.2);
    border-radius: var(--radius-8);
  }

  .gallery-item .card .ph #start-camera,
  .card .ph button.btn-replace-cropped span { display: block !important; }

  .update-camera-container video { width: 100%; border-radius: var(--radius-8); }

  #pick-gallery-item .card .ph .update-take-photo {
    display: block;
    font-size: 12px;
    border: 0.75px solid #b5b5b5;
    box-shadow: 2px 4px 4px rgba(0,0,0,.2);
    background: #fff;
    padding: 4px 12px;
  }

  .list-name-card .list-folders { display: block; }
  .list-folders.test-user { display: none !important; }

  .user-filter-mobile {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: var(--radius-4);
    padding: 10px;
    font-size: 16px;
    display: none;
    background: #fff;
    height: 100%;
  }
  .list-name-card .user-filter-mobile { display: block; }

  .list-name-card .submit-form { padding: 4px 20px !important; }

  /* Stage A mobile */
  #stage-a {
    padding: 20px;
    height: 100%;
    width: 100%;
  }
  #stage-a #title-fix-ai {
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
  }

  /* table admin mobile */
  .table-admin {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .table-admin input,
  .table-admin select { width: 100% !important; }
  .table-admin .button-filter { width: fit-content !important; }

  .hint-title { color: #333; }
  .gallery-item {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }

  .list-folders { padding: 20px 15px 0; }
  .list-folders a { color: #333; }

  .page-ds p { padding: 0 15px; padding-left: 4px; }

  .bar #start-camera {
    display: flex;
    width: 100%;
    margin-right: 0;
    padding: 4px 0;
    text-transform: none;
    justify-content: center;
    gap: 8px;
    margin-bottom: 0;
    box-shadow: 1.575px 3.149px 3.149px rgba(0,0,0,.2);
    border: 0.787px solid #b5b5b5;
    font-size: 14px;
    align-items: center;
  }

  .citt-popup-modal { padding: 20px; margin: 20px; }
  .citt-popup-buttons { flex-direction: column; gap: 0; }
  .citt-popup-btn { width: 100%; }

  .custom-file-upload,
  #stage-b .custom-file-upload { font-size: 14px; width: 100%; }

  .citt-users-table td .new-role { width: 250px; }

  .grid-camera { margin-top: auto; }
}

/* Desktop-only rule: hide user-filter mobile select */
@media (min-width: 769px) {
  .user-filter-mobile { display: none !important; }
}

/* ===== Checkboxes (custom) ===== */
#business-options input[type="checkbox"],
#service-options input[type="checkbox"],
#industry-group input[type="checkbox"],
#sub-options input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-4);
  border: 2px solid #d1d5db;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: all .2s ease;
  margin-right: 6px;
  vertical-align: middle;
  margin-bottom: 4px;
}

#business-options input[type="checkbox"]:hover,
#service-options input[type="checkbox"]:hover,
#industry-group input[type="checkbox"]:hover,
#sub-options input[type="checkbox"]:hover {
  border-color: #60a5fa;
  background-color: #eff6ff;
}

#business-options input[type="checkbox"]:checked,
#service-options input[type="checkbox"]:checked,
#industry-group input[type="checkbox"]:checked,
#sub-options input[type="checkbox"]:checked {
  background: linear-gradient(136deg, #36dff1 11.31%, #2764e7 81.69%) !important;
  padding: 10px;
  border-radius: var(--radius-4);
}

#business-options input[type="checkbox"]:checked::after,
#service-options input[type="checkbox"]:checked::after,
#industry-group input[type="checkbox"]:checked::after,
#sub-options input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -52%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

#business-options label,
#service-options label,
#industry-group label,
#sub-options label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-right: 16px;
  margin-bottom: 8px;
  user-select: none;
  color: var(--color-main);
  font-weight: 300;
  font-size: 16px;
}

/* ===== OCR text display/edit ===== */
.ocr-text-display {
  width: 100%;
  height: 180px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #ddd;
  background: #f9f9f9;
  border-radius: var(--radius-12);
  text-align: left;
}
.ocr-text-edit { font-size: 14px; line-height: 1.5; }
.ocr-text-display a { color: #0073aa; text-decoration: none; }
.ocr-text-display a:hover { text-decoration: underline; }

/* ===== FIX camera crop: ép video hiển thị kiểu cover + overlay khung đúng vị trí ===== */
.height-cam{
  position: relative;
  width: 100%;
  height: 60vh;            /* quan trọng: cố định chiều cao để khung/crop không “trôi” */
  overflow: hidden;
  border-radius: 12px;
}

#cam-video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* quan trọng: mapping crop theo cover */
  object-position: center;
  background: #000;
}

/* Overlay khung cắt */
#cam-guide{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#cam-guide-box{
  width: 92%;
  max-width: 560px;
  aspect-ratio: 1050 / 600; /* tỉ lệ namecard ngang */
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.35);
  background: transparent;
}
/* ✅ FIX camera preview scaling (rất quan trọng) */
#cam-video, .cam-video{
  height: 100%;
  object-fit: cover;
}