/* iOS Cordova Tweak */
.device-cordova.device-ios {
  height: 100vh;
}

/* Your app custom styles here */
.card-color-green {
  background-color: forestgreen;
}

.card-color-white {
  background-color: white;
}

.card-color-yellow {
  background-color: #E6F23C;
}

.bg-color-yellow {
  background-color: #f3e62a;
  color: rgb(0, 0, 0);
}

.card-color-orange {
  background-color: #bd6d03;
}

.card-color-red {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: white;
}

.btn-color-greenWhite {
  background-color: forestgreen;
  color: white;
}

.card-color-brown {
  background-color: #998369;
  color: white;
}

.btn-color-blueWhite {
  background-color: navy;
  color: white;
}

.card-color-blue {
  background-color: navy;
}

.card-color-steel-blue {
  background-color: navy;
}


/* Custom Button */

.btn-standard {
  width: 85px !important;
}

:root {
  --f7-popup-border-radius: 0px;
  --f7-popup-tablet-width: 630px;
  --f7-popup-tablet-height: 630px;
  --f7-popup-transition-duration: 400ms;
  --f7-popup-push-border-radius: 10px;
  --f7-popup-push-offset: var(--f7-safe-area-top);
  --f7-table-head-font-size: 12px;
  --f7-table-body-font-size: 14px;
  --f7-table-footer-font-size: 12px;
  --f7-table-input-height: 24px;
  --f7-table-input-font-size: 14px;
  --f7-table-collapsible-cell-padding: 3px;
  --f7-table-link-icon-only-icon-size: 20px;
  --f7-table-sortable-icon-color: #000;
  /*
  --f7-popup-tablet-border-radius: var(--f7-popup-border-radius);
  */
}

.ios {
  --f7-popup-box-shadow: none;
}

.md {
  --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
}

.aurora {
  --f7-popup-tablet-border-radius: 4px;
  --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
}


/*additional css by aris */

/*table color */
.table-color-tomato {
  background-color: #FF887C;
}

.table-color-lightgray {
  background-color: lightgray;
}

.table-color-green {
  background: linear-gradient(#4a8a4a, forestgreen);
  /* Standard syntax */
  background: -webkit-linear-gradient(#4a8a4a, forestgreen);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#4a8a4a, forestgreen);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#4a8a4a, forestgreen);
  /* For Firefox 3.6 to 15 */
  color: white;
}

.table-color-yellow {
  background-color: #e2e209;
}

.table-color-lightblue {
  background-color: navy;
}

.table-color-orange {
  background: linear-gradient(#f57d51, #ff4500);
  /* Standard syntax */
  background: -webkit-linear-gradient(#f57d51, #ff4500);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#f57d51, #ff4500);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#f57d51, #ff4500);
  /* For Firefox 3.6 to 15 */
  color: white;
}

.table-color-red {
  background: linear-gradient(#b53737, #b20000);
  /* Standard syntax */
  background: -webkit-linear-gradient(#b53737, #b20000);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#b53737, #b20000);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#b53737, #b20000);
  /* For Firefox 3.6 to 15 */
  background-color: #b20000;
  color: white;

}

.table-color-white-dop {
  background-color: #dcdcf15e;
}

/*end table color */

/*text color */
.text-add-colour-blue-fb {
  color: navy;
}

.text-add-colour-black-soft {
  color: #4c4c4c;
}

.text-add-colour-tomato {
  color: #FF887C;
}

.text-add-colour-red {
  color: #b20000;
}

.text-add-colour-green {
  color: #0f470f;
}

.text-add-colour-white {
  color: #DCDCDCFA;
}

.text-add-colour-gray {
  color: dimgray;
}

/*end text color */

/*text param*/
.text-bold {
  font-weight: bold;
}

/*end*/

/*Col Border */
div[class*="col-border"] {
  border: 0.2px solid black;
  height: 35px;
  padding: 4px;
}

.grid-resizable-demo {
  --f7-grid-row-gap: 16px;
}

.grid-resizable-demo div[class*="col"] {
  margin-bottom: 0;
}

.grid-resizable-demo .demo-col-center-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*end*/

/*Margin For Minimize Padding element (request client)*/
.margin-3 {
  margin-top: -3px !important;
}

.margin-5 {
  margin-top: -5px !important;
}

.margin-4 {
  margin-top: -4px !important;
}

.margin-8 {
  margin-top: -8px !important;
}

.margin-10 {
  margin-top: -10px !important;
}

.margin-2 {
  margin-top: -2px !important;
}

.margin-1 {
  margin-top: -1px !important;
}

.margin-10 {
  margin-top: -10px !important;
}

.margin-6 {
  margin-top: -6px !important;
}

.margin-12 {
  margin-top: -12px !important;
}

.margin-15 {
  margin-top: -15px !important;
}

.margin-16 {
  margin-top: -16px !important;
}

.margin-18 {
  margin-top: -18px !important;
}

.margin-20 {
  margin-top: -20px !important;
}

.margin-23 {
  margin-top: -23px !important;
}

.margin-25 {
  margin-top: -25px !important;
}

.margin-27 {
  margin-top: -27px !important;
}

.margin-37 {
  margin-top: -37px !important;
}

.margin-35 {
  margin-top: -35px !important;
}

.margin-50 {
  margin-top: -50px !important;
}

.margin-65 {
  margin-top: -65px !important;
}

/*End Margin*/

/*Dark Mode Req Client */
.bg-dark-gray {
  background-color: dimgray !important;
}

.bg-dark-hover-button-choose {
  background-color: dimgray !important;
}

.bg-dark-gray-young {
  background: linear-gradient(lightgray, #686665);
  /* Standard syntax */
  background: -webkit-linear-gradient(lightgray, #686665);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(lightgray, #686665);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(lightgray, #686665);
  /* For Firefox 3.6 to 15 */
}

.bg-dark-gray-medium {
  background: linear-gradient(315deg, #14418F, #056BBC);
  /* Standard syntax */
  background: -webkit-linear-gradient(315deg, #14418F, #056BBC);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(315deg, #14418F, #056BBC);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(315deg, #14418F, #056BBC);
  /* For Firefox 3.6 to 15 */
}

.bg-dark-gray-black {
  background: linear-gradient(#3d3d3d, black);
  /* Standard syntax */
  background: -webkit-linear-gradient(#3d3d3d, black);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#3d3d3d, black);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#3d3d3d, black);
  /* For Firefox 3.6 to 15 */
}

.bg-dark-gray-cover {
  background-color: #1c1c1d;
}

.border-actived {
  border-width: thin;
  border-style: solid;
  border-color: white;
}

.border-actived-gray {
  border-width: thin;
  border-style: solid;
  border-color: gray;
}

/*end Dark Mode Req Client */
/*Color Pallete */
.palete {
  float: left;
  width: 25px;
  height: 25px;
  margin: 5px;
  border: 1px solid white;
}

.page-button {
  float: left;
  width: 25px;
  height: 25px;
  margin: 5px;
  border: 1px solid white;
}

/*End Color Pallete */



:root .theme-dark,
:root.theme-dark {
  --f7-table-cell-border-color: rgba(255, 255, 255, 0.15);
  --f7-table-sortable-icon-color: #fff;
  --f7-table-input-text-color: #fff;
}

.ios {
  --f7-table-head-font-weight: 600;
  --f7-table-head-cell-height: 39px;
  --f7-table-head-icon-size: 13px;
  --f7-table-body-cell-height: 39px;
  --f7-table-cell-padding-vertical: 2px;
  --f7-table-cell-padding-horizontal: 2px;
  --f7-table-edge-cell-padding-horizontal: 2px;
  --f7-table-label-cell-padding-horizontal: 2px;
  --f7-table-checkbox-cell-width: 18px;
  /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
  /* --f7-table-actions-link-color: var(--f7-theme-color); */
  --f7-table-title-font-size: 17px;
  --f7-table-title-font-weight: 600;
  --f7-table-card-header-height: 59px;
  --f7-table-footer-height: 39px;
  --f7-table-head-text-color: rgba(0, 0, 0, 0.45);
  --f7-table-cell-border-color: rgba(0, 0, 0, 0.22);
  --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
  --f7-table-footer-text-color: rgba(0, 0, 0, 0.45);
  --f7-table-input-text-color: #000;
}

.ios .theme-dark,
.ios.theme-dark {
  --f7-table-head-text-color: rgba(255, 255, 255, 0.55);
  --f7-table-footer-text-color: rgba(255, 255, 255, 0.55);
  --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.08);
}

.md {
  --f7-table-head-font-weight: 500;
  --f7-table-head-cell-height: 51px;
  --f7-table-head-icon-size: 16px;
  --f7-table-body-cell-height: 43px;
  --f7-table-cell-padding-vertical: 2px;
  --f7-table-cell-padding-horizontal: 2px;
  --f7-table-edge-cell-padding-horizontal: 2px;
  --f7-table-label-cell-padding-horizontal: 2px;
  --f7-table-checkbox-cell-width: 18px;
  --f7-table-title-font-size: 20px;
  --f7-table-title-font-weight: 400;
  --f7-table-card-header-height: 59px;
  --f7-table-footer-height: 51px;
  --f7-table-head-text-color: rgba(0, 0, 0, 0.54);
  --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
  --f7-table-actions-cell-link-color: rgba(0, 0, 0, 0.54);
  --f7-table-selected-row-bg-color: #f5f5f5;
  --f7-table-actions-link-color: rgba(0, 0, 0, 0.54);
  --f7-table-footer-text-color: rgba(0, 0, 0, 0.54);
  --f7-table-input-text-color: #212121;
}

.md .theme-dark,
.md.theme-dark {
  --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
  --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
  --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.05);
  --f7-table-actions-cell-link-color: rgba(255, 255, 255, 0.54);
  --f7-table-actions-link-color: rgba(255, 255, 255, 0.54);
}

.aurora {
  --f7-table-link-icon-only-icon-size: 18px;
  --f7-table-head-font-weight: 400;
  --f7-table-head-cell-height: 28px;
  --f7-table-head-icon-size: 18px;
  --f7-table-body-cell-height: 28px;
  --f7-table-cell-padding-vertical: 2px;
  --f7-table-cell-padding-horizontal: 2px;
  --f7-table-edge-cell-padding-horizontal: 2px;
  --f7-table-label-cell-padding-horizontal: 2px;
  --f7-table-checkbox-cell-width: 22px;
  /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
  /* --f7-table-actions-link-color: var(--f7-theme-color); */
  --f7-table-title-font-size: 14px;
  --f7-table-title-font-weight: 600;
  --f7-table-card-header-height: 37px;
  --f7-table-footer-height: 28px;
  --f7-table-head-text-color: rgba(0, 0, 0, 0.6);
  --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
  --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
  --f7-table-footer-text-color: rgba(0, 0, 0, 0.5);
  --f7-table-input-text-color: #000;
}

.aurora .theme-dark,
.aurora.theme-dark {
  --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.03);
  --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
  --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
}

.popup-status {
  left: 5% !important;
  top: 60px !important;
  width: 90% !important;
  height: 90% !important;
}

.card-color-red-important {
  background-color: #b20000 !important;
  color: white !important;
}

/* .text-oneLine {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  padding: 10px;
} */

.text-oneLine {
  --max-lines: 1;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
  padding-right: 1rem;
}

.text-oneLine::before {
  position: absolute;
  content: "...";
  bottom: 0;
  right: 0;
}

.text-oneLine::after {
  content: "";
  position: absolute;
  right: 0;
  width: 100px;
}

.announcement {
  animation-name: blinkingText;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
}

@keyframes blinkingText {
  /* from {
    background-color: white;
  } */

  to {
    background-color: transparent;
  }
}


.f-s-0 {
  font-size: 0px !important;
}

.f-s-1 {
  font-size: 1px !important;
}

.f-s-2 {
  font-size: 2px !important;
}

.f-s-3 {
  font-size: 3px !important;
}

.f-s-4 {
  font-size: 4px !important;
}

.f-s-5 {
  font-size: 5px !important;
}

.f-s-6 {
  font-size: 6px !important;
}

.f-s-7 {
  font-size: 7px !important;
}

.f-s-8 {
  font-size: 8px !important;
}

.f-s-9 {
  font-size: 9px !important;
}

.f-s-10 {
  font-size: 10px !important;
}

.f-s-11 {
  font-size: 11px !important;
}

.f-s-12 {
  font-size: 12px !important;
}

.f-s-13 {
  font-size: 13px !important;
}

.f-s-14 {
  font-size: 14px !important;
}

.f-s-15 {
  font-size: 15px !important;
}

.f-s-16 {
  font-size: 16px !important;
}

.f-s-17 {
  font-size: 17px !important;
}

.f-s-18 {
  font-size: 18px !important;
}

.f-s-19 {
  font-size: 19px !important;
}

.f-s-20 {
  font-size: 20px !important;
}

.f-s-21 {
  font-size: 21px !important;
}

.f-s-22 {
  font-size: 22px !important;
}

.f-s-23 {
  font-size: 23px !important;
}

.f-s-24 {
  font-size: 24px !important;
}

.f-s-25 {
  font-size: 25px !important;
}

.f-s-26 {
  font-size: 26px !important;
}

.f-s-27 {
  font-size: 27px !important;
}

.f-s-28 {
  font-size: 28px !important;
}

.f-s-29 {
  font-size: 29px !important;
}

.f-s-30 {
  font-size: 30px !important;
}

.f-s-31 {
  font-size: 31px !important;
}

.f-s-32 {
  font-size: 32px !important;
}

.f-s-33 {
  font-size: 33px !important;
}

.f-s-34 {
  font-size: 34px !important;
}

.f-s-35 {
  font-size: 35px !important;
}

.f-s-36 {
  font-size: 36px !important;
}

.f-s-37 {
  font-size: 37px !important;
}

.f-s-38 {
  font-size: 38px !important;
}

.f-s-39 {
  font-size: 39px !important;
}

.f-s-40 {
  font-size: 40px !important;
}

.f-s-41 {
  font-size: 41px !important;
}

.f-s-42 {
  font-size: 42px !important;
}

.f-s-43 {
  font-size: 43px !important;
}

.f-s-44 {
  font-size: 44px !important;
}

.f-s-45 {
  font-size: 45px !important;
}

.f-s-46 {
  font-size: 46px !important;
}

.f-s-47 {
  font-size: 47px !important;
}

.f-s-48 {
  font-size: 48px !important;
}

.f-s-49 {
  font-size: 49px !important;
}

.f-s-50 {
  font-size: 50px !important;
}

.f-s-51 {
  font-size: 51px !important;
}

.f-s-52 {
  font-size: 52px !important;
}

.f-s-53 {
  font-size: 53px !important;
}

.f-s-54 {
  font-size: 54px !important;
}

.f-s-55 {
  font-size: 55px !important;
}

.f-s-56 {
  font-size: 56px !important;
}

.f-s-57 {
  font-size: 57px !important;
}

.f-s-58 {
  font-size: 58px !important;
}

.f-s-59 {
  font-size: 59px !important;
}

.f-s-60 {
  font-size: 60px !important;
}

.f-s-61 {
  font-size: 61px !important;
}

.f-s-62 {
  font-size: 62px !important;
}

.f-s-63 {
  font-size: 63px !important;
}

.f-s-64 {
  font-size: 64px !important;
}

.f-s-65 {
  font-size: 65px !important;
}

.f-s-66 {
  font-size: 66px !important;
}

.f-s-67 {
  font-size: 67px !important;
}

.f-s-68 {
  font-size: 68px !important;
}

.f-s-69 {
  font-size: 69px !important;
}

.f-s-70 {
  font-size: 70px !important;
}

.f-s-71 {
  font-size: 71px !important;
}

.f-s-72 {
  font-size: 72px !important;
}

.f-s-73 {
  font-size: 73px !important;
}

.f-s-74 {
  font-size: 74px !important;
}

.f-s-75 {
  font-size: 75px !important;
}

.f-s-76 {
  font-size: 76px !important;
}

.f-s-77 {
  font-size: 77px !important;
}

.f-s-78 {
  font-size: 78px !important;
}

.f-s-79 {
  font-size: 79px !important;
}

.f-s-80 {
  font-size: 80px !important;
}

/*end additional css by aris*/

/* Custom CSS by Aryakk */

.table-header-theme {
  color: #1C1C1D;
  background-color: #CFECFE;
  border-top: solid 1px;
  border-left: solid 1px;
  border-color: #737373;
  font-weight: bold;
}

.table-body-theme {
  color: #1C1C1D;
  background-color: #FFFFFF;
}

.btn-primary-theme {
  width: 100%;
  height: 42px;
  padding: 0 10px;
  background: linear-gradient(315deg, #14418F, #056BBC);
  color: #fff;
  border-radius: 4px;
  border: none;
  box-sizing: border-box;
}

.information-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 16px;
  border-bottom: 2px solid #e0e0e0;
  background: #CFECFE;
  border: 1px solid #727272;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  color: #1C1C1D;
  font-weight: 500;
}

.spk-info {
  flex: 1;
  padding-right: 16px;
  margin: 0px 16px;
  border-right: 2px solid #727272;
}

.partner-info {
  flex: 1;
  padding-right: 16px;
}

/* End of custom CSS by Aryakk */


/* ========== NOTIFICATION STYLES ========== */
#notifIcon {
  position: relative;
  cursor: pointer;
}

#notifIcon i {
  color: #fff;
  font-size: 22px;
}

.notif-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  background: #ff6b35;
  color: white;
  font-size: 10px;
  font-weight: bold;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

#notifPanel {
  position: fixed;
  top: 50px;
  right: 5px;
  width: 320px;
  max-height: 70vh;
  background: #1a1a2e;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  z-index: 99998;
  overflow: hidden;
}

.notif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: #050609;
  border-bottom: 1px solid #1b1b2f;
}

.notif-panel-header button i {
  font-size: 20px;
}

.notif-panel-body {
  max-height: 350px;
  overflow-y: auto;
}

#notifList {
  list-style: none;
  margin: 0;
  padding: 0;
}

#notifList .notification-item {
  padding: 12px 15px;
  border-bottom: 1px solid #2d3a4f;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

#notifList .notification-item:hover {
  background: rgba(255, 107, 53, 0.1);
}

#notifList .notification-item:active {
  transform: scale(0.98);
  background: rgba(255, 107, 53, 0.25) !important;
}

#notifList .notification-item.unread {
  background: rgba(255, 107, 53, 0.15);
  border-left: 3px solid #ff6b35;
}

#notifList .notif-title {
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  margin-bottom: 4px;
}

#notifList .notif-body {
  font-size: 12px;
  color: #a0a0a0;
  margin-bottom: 4px;
}

#notifList .notification-item:not(.unread) .notif-body {
  color: #666;
}

#notifList .notif-time {
  font-size: 11px;
  color: #ff6b35;
}

#notifList .empty-notification {
  padding: 40px 20px;
  text-align: center;
  color: #666;
}

#notifList .empty-notification p {
  margin: 0;
}

.toast-notification {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  background: linear-gradient(135deg, #ff8c00 0%, #ffab40 100%);
  border-radius: 12px;
  padding: 15px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  max-width: 320px;
  min-width: 260px;
  animation: slideInDown 0.3s ease-out;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slideInDown {
  from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
}

.toast-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.toast-icon {
  font-size: 24px;
  flex-shrink: 0;
  filter: drop-shadow(0px 0px 2px rgba(80,80,80,0.8));
}

.toast-text h4 {
  margin: 0 0 5px 0;
  font-size: 14px;
  font-weight: 600;
  color: #000;
}

.toast-text p {
  margin: 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.75);
  line-height: 1.4;
}

/* ========== NOTIFICATION DETAIL POPUP ========== */
.notif-detail-popup .page-content {
  background: #1a1a2e !important;
}

.notif-detail-popup .navbar {
  --f7-navbar-bg-color: #0f0f1e;
  --f7-navbar-text-color: #fff;
  --f7-navbar-link-color: #ff6b35;
}

.notif-detail-popup .block {
  margin-top: 0;
}

/* ========== END NOTIFICATION DETAIL POPUP ========== */

/* Dark Input Style */
.input-dark-style::placeholder {
  color: #95a5a6;
  opacity: 1;
}

.input-dark-style:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
}

/* Select dropdown arrow hide default */
select.input-dark-style {
  background-image: none;
}

/* Remove spinner from number input */
.input-dark-style[type="number"]::-webkit-inner-spin-button,
.input-dark-style[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-dark-style[type="number"] {
  -moz-appearance: textfield;
}

/* Button hover/active effect */
.button:active {
  opacity: 0.8;
  transform: scale(0.98);
}

/* Textarea styling */
textarea.input-dark-style {
  font-family: inherit;
  line-height: 1.5;
}

/* =============================================
   CSS UNTUK VALIDASI PAYMENT FORM
   Border merah + text error + animasi
   ============================================= */

/* Error border animation */
.input-error {
  border: 2px solid #e74c3c !important;
  animation: shake 0.3s ease-in-out;
}

/* Valid border - hijau dengan animasi */
.input-valid {
  border: 2px solid #27ae60 !important;
  animation: fadeInGreen 0.3s ease-in-out;
  transition: border-color 0.3s ease;
}

/* Fade in green animation */
@keyframes fadeInGreen {
  from {
    border-color: transparent;
  }
  to {
    border-color: #27ae60;
  }
}

/* Shake animation untuk error input */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* Error text styling */
.error-text-payment {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 5px;
  padding-left: 5px;
  animation: fadeIn 0.3s ease-in-out;
}

/* Fade in animation untuk error text */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Toast error styling */
.toast-error {
  background: #e74c3c !important;
  color: white !important;
}

/* Toast success styling */
.toast-success {
  background: #27ae60 !important;
  color: white !important;
}

/* Upload button error state */
#btn_upload_payment.error-state {
  border: 2px solid #e74c3c !important;
  animation: pulse 1s ease-in-out infinite;
}

/* Pulse animation untuk tombol upload error */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
  }
}

/* Input focus state (override error saat focus) */
.input-dark-style:focus {
  outline: none;
  border: 2px solid #3498db !important;
}

/* Select focus state */
.input-dark-style:focus {
  border-color: #3498db !important;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* Error icon styling */
.error-text-payment .f7-icons {
  font-size: 14px;
  vertical-align: middle;
  margin-right: 3px;
}

/* Disabled button state */
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Loading state untuk tombol */
button.loading {
  position: relative;
  pointer-events: none;
}

button.loading::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* Responsive untuk mobile */
@media (max-width: 768px) {
  .error-text-payment {
    font-size: 11px;
  }
  
  .error-text-payment .f7-icons {
    font-size: 13px;
  }
}

/* ===== VALID INPUT STATE ===== */
/* Input yang sudah terisi dengan benar */
input.valid-input,
select.valid-input {
  border: 2px solid #27ae60 !important;
  transition: border-color 0.3s ease;
}

/* Checkmark icon untuk input valid (optional) */
.input-valid-wrapper {
  position: relative;
}

.input-valid-wrapper::after {
  content: '✓';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #27ae60;
  font-weight: bold;
  font-size: 18px;
  pointer-events: none;
  animation: checkmarkBounce 0.3s ease;
}

@keyframes checkmarkBounce {
  0% {
    transform: translateY(-50%) scale(0);
  }
  50% {
    transform: translateY(-50%) scale(1.2);
  }
  100% {
    transform: translateY(-50%) scale(1);
  }
}

.input-valid {
    border: 2px solid #27ae60 !important;
}

.input-error {
    border: 2px solid #e74c3c !important;
}