/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme example child theme.
Author: Nick
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */


/*================================================================
Remove the black outline when focus on links
=================================================================*/
a:focus {outline: 0 !important;}

/*================================================================
Fonts
=================================================================*/


/*================================================================
Header
=================================================================*/
#site-navigation-wrap .dropdown-menu > li.hello > a {pointer-events: none;}


/*================================================================
Footer
=================================================================*/
.footer-logo img {margin-left:0;}
.footer-box.col-4 .footer-widget.widget_block {display: inline-block; vertical-align: top;}
#footer-bottom.no-footer-nav #copyright { border-top: solid 1px #000; padding-top: 15px; padding-bottom: 20px;}

/*================================================================
Menu
=================================================================*/
.oceanwp-mobile-menu-icon a {font-size: 22px; color: #22c177;}

/*================================================================
Reset theme default 
=================================================================*/
input[type=button], input[type=reset], input[type=submit], button[type=submit], .button, body div.wpforms-container-full .wpforms-form input[type=submit], body div.wpforms-container-full .wpforms-form button[type=submit], body div.wpforms-container-full .wpforms-form .wpforms-page-button, .woocommerce-cart .wp-element-button, .woocommerce-checkout .wp-element-button, .wp-block-button__link {letter-spacing: unset; text-transform: unset;}

form input:focus:invalid, form textarea:focus:invalid {color:#000 !important;}
form select:focus:invalid {color:#1e2019 !important;}
form input[type=number] {max-width: unset;}

/*================================================================
Home
=================================================================*/
.home #main #content-wrap {padding-bottom: 0;}
h1, h2 {text-align: center;}
body .greenbutton {display:inline-block; color: #fff; background-color: #22c177; border-radius:100px; transition:linear 0.25s all; font-weight: 700; }
body .greenbutton:hover {background-color: #0b71b7 !important; color: #fff; }
body .mainbutton {font-size: 22px; padding:18px 40px; text-transform:uppercase; }
body .mainbutton div {font-size: 14px; font-weight: 400; margin-top: 3px; text-transform:none; } 
body .subbutton {font-size: 16px !important; padding:11px 30px 13px 30px; }
body .arrowbutton {background-image: url(https://danapoket.com/wp-content/themes/oceanwp-child-theme-master/images/icon-button-arrow.svg); background-repeat: no-repeat; background-position: right 20px center; background-size: 10px auto; padding: 11px 37px 13px 25px; }
body .sidebarbutton {display:block; border:solid 2px #22c177; border-radius:12px; font-size: 16px !important; padding:0; color:#000; font-weight:400; background-color: #fff; }
body .sidebarbutton:hover {color: #fff; background-color: #22c177 !important;}
body .sidebarbutton > div {border:solid 3px #fff; border-radius:10px; padding:8px 13px 8px 13px; }
body .sidebarbutton.active {color: #fff; background-color: #22c177;}
body .sidebarbutton:not(:last-child) {margin-bottom: 10px;}
body .sidebarbutton.result {border-color:#ff811e;}
body .sidebarbutton.result.active, body .sidebarbutton.result:hover {background-color:#ff811e !important;}
body .dangerbutton {background-color: #ca0202;}

body .penyedia-buttons .greenbutton {border: solid 1px #22c177;} 
body .penyedia-buttons .greenbutton:hover {border: solid 1px #0b71b7;} 
body .penyedia-buttons .outlinebutton {background-color: unset; color: #22c177;} 
body .penyedia-buttons .outlinebutton:hover {background-color: unset; color: #fff; } 
body .penyedia-buttons .bluebutton {border: solid 1px #0b71b7; background-color:#0b71b7; color: #fff; } 
body .penyedia-buttons .bluebutton:hover {border: solid 1px #03426d; background-color:#03426d !important; color: #fff; } 


.home .cta {text-align: center;}
form .cta {text-align: right; padding-top: 20px;}
form .cta.left {text-align: left;} 

#section-heading {}
#section-heading h2 span {position: relative; display: inline-block;}
#section-heading h2 span:after {content:''; width:100%; height:50px; position:absolute; left: 0; bottom:-12px; background-image: url(https://danapoket.com/wp-content/themes/oceanwp-child-theme-master/images/underline-kakitangan.svg); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; }

#section-masthead {margin:auto auto 80px auto; max-width: 1000px;}
#section-masthead .masthead-wrapper {display: flex; align-items: center; text-align:center; gap:30px; font-size:20px; line-height: 1.2em; }
#section-masthead .masthead-wrapper > div:first-child {width: calc(60% - 15px);}
#section-masthead .masthead-wrapper > div:last-child {width: calc(40% - 15px);}
#section-masthead .masthead-wrapper h3 {color: #22c177; font-size: 26px; font-weight: 900;}
#section-masthead .masthead-wrapper p {margin-bottom: 30px;}
#section-masthead .usp {max-width: 320px; margin: auto;}
#section-masthead .usp-list {width: 235px; margin:0 auto 30px auto;}
#section-masthead .usp-list .usp-item {display: flex; align-items: center; text-align:center; gap:8px; margin-bottom:10px; }
#section-masthead .usp-list .usp-item > div:first-child {width: 40px;}
#section-masthead .usp-list .usp-item > div:first-child img {width:auto; height: 35px; margin: auto;}
#section-masthead .usp-list .usp-item > div:last-child {}

#section-calculator {margin-bottom: 80px;}
#section-calculator > p {max-width:900px; text-align: center; margin:auto auto 20px auto;}
.calculator-wrapper {display: flex; justify-content: center; align-items: center; text-align:center; gap:30px; max-width: 900px; margin: auto;}
.calculator-wrapper > div:first-child {width: 45%;}
.calculator-wrapper > div:last-child {width: 55%;}

.calculator-wrapper .calculator-container {background: #ffffff; border-radius: 15px; padding: 30px; max-width: 450px;}
.calculator-container {text-align: left; }
.calculator-container label {font-weight: bold; display: block; margin-top: 20px;}
.calculator-container label:first-child {margin-top: 0;}
.calculator-container label span {font-weight: normal;}
.calculator-container small { display: block; margin-bottom: 7px; font-size: 0.85em; font-style: italic; font-weight:normal;}
.calculator-container input[type="range"] {	width: 100%; margin-bottom: 6px;}
.calculator-container .min-max-range {display: flex; justify-content: space-between; font-size: 0.85em; margin-bottom: 10px; font-weight:normal;}
.calculator-container #calculateBtn {margin-top:5px;cursor: pointer;}
.calculator-container #calculateBtn:hover {}
.calculator-container p {margin-top: 20px;}
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: #edf2ef;
  border-radius: 4px;
  outline: none;
  transition: background 0.3s;
  margin-top: 5px;
  margin-bottom: 10px;
}

/* customize range styling  */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    #22c177 0%,
    #22c177 50%, /* This will be overridden with JS */
    #edf2ef 50%,
    #edf2ef 100%
  );
  outline: none;
  transition: background 0.3s;
  margin-top: 5px;
  margin-bottom: 10px;
}

/* Thumb styling */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #22c177;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  margin-top: -2px;
}
input[type="range"]::-moz-range-thumb {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #22c177;
  cursor: pointer;
  border: none;
}
input[type="range"]::-moz-range-track {
  height: 8px;
  background: transparent;
  border-radius: 4px;
}

.calculator-container .penyedia-logo {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease;
  height:60px; width:auto;
}
.calculator-container .penyedia-logo.active-penyedia {
  opacity: 1;
  border: 2px solid #22c177;
  border-radius: 5px;
}
.calculator-container .penyedia-options {margin-bottom: 15px;}
.calculator-container .penyedia-options span {display: inline-block; margin-right: 5px;}

#section-mengapa {margin-bottom: 80px;}
#section-mengapa h2 > img {height: 28px; width: auto; margin-top: -5px;}
#section-mengapa > p {max-width:800px; text-align: center; margin:auto auto 20px auto;}
.mengapa-list {display: flex; align-items:flex-start; text-align:center; gap:20px; margin-bottom:20px; padding-top:10px;}
.mengapa-list .mengapa-item {width: 20%;}
.mengapa-list .mengapa-item div:first-child {align-content:center; height: 60px; margin-bottom: 10px;}
.mengapa-list .mengapa-item div:first-child img {width: auto; height: 60px; margin:auto;}
.mengapa-list .mengapa-item:nth-child(2) div:first-child img {height: 55px;}
.mengapa-list .mengapa-item h4 {margin-bottom: 3px;}
.mengapa-list .mengapa-item p {margin:0; font-size: 14px; line-height: 1.2em;}

#section-produk {margin-bottom: 80px;}
#section-produk h4 {margin-bottom: 0; margin-top: 3px;}
#section-produk p {max-width:800px; text-align: center; margin:auto auto 20px auto;}
.produk-highlights {display: flex; align-items:stretch; text-align:center; gap:10px; max-width: 800px; margin:auto auto 20px auto; flex-wrap: wrap;}
/*
.produk-highlights > div:first-child {align-content: center; width: 40%; border: solid 1px #22c177; border-radius: 12px; padding:25px;} 
.produk-highlights > div:first-child img {width: 180px; margin: auto auto 25px auto;}
.produk-highlights > div:last-child {width: calc(60% - 10px); } 
.produk-features {display: flex; align-items:stretch; text-align:center; flex-wrap: wrap; gap:10px;}
.produk-features > div {border: solid 1px #22c177; border-radius: 12px; padding:20px; width: calc(50% - 5px);}
.produk-features > div img {width: 85px; margin: auto auto 10px auto;}
.produk-rebate {display: flex; justify-content: center; text-align:center; gap:10px; max-width: 800px; margin:-10px auto 20px auto; border: solid 1px #22c177; border-radius: 12px; padding:25px;}
.produk-rebate-wrap {display: flex; align-items: center; gap:10px; margin: auto;} 
.produk-rebate-wrap:first-child img {width: 80px; }
.produk-rebate-wrap:last-child {text-align:left;} 
*/
.produk-highlights > .produk-logo {align-content: center; width: 40%; border: solid 1px #22c177; border-radius: 12px; padding:25px;} 
.produk-highlights > .produk-logo img {width: 180px; margin: auto auto 25px auto;}
.produk-highlights > .produk-features {width: calc(60% - 10px); } 
.produk-highlights > .produk-rebate {width: 100%;}
.produk-features {display: flex; align-items:stretch; text-align:center; flex-wrap: wrap; gap:10px;}
.produk-features > div {border: solid 1px #22c177; border-radius: 12px; padding:20px; width: calc(50% - 5px);}
.produk-features > div img {width: 85px; margin: auto auto 10px auto;}

.produk-features-2 {display: flex; align-items:stretch; text-align:center; flex-wrap: wrap; gap:10px; width: 100%;}
.produk-features-2 > div {border: solid 1px #22c177; border-radius: 12px; padding:20px; width: calc(50% - 5px);
  display: flex; align-items: center; gap:10px; margin: auto; justify-content: center; height: 100%;} 
.produk-features-2 > div:first-child > div:first-child img {width: 80px; margin: auto auto 10px auto;}
.produk-features-2 > div:last-child > div:first-child img {width: 65px; margin: auto auto 10px auto;}
.produk-features-2 > div > div:last-child {text-align:left;}
/*.produk-rebate {border: solid 1px #22c177; border-radius: 12px; padding:25px;}
.produk-rebate-wrap {display: flex; align-items: center; gap:10px; margin: auto; justify-content: center;} 
.produk-rebate-wrap:first-child img {width: 80px; }
.produk-rebate-wrap:last-child {text-align:left;} */

.penyedia-buttons {text-align: center; margin-bottom: 40px;}
.penyedia-buttons .subbutton {margin: 0 5px;}

#section-cara {margin-bottom: 80px;}
#section-cara h2 > img {height: 30px; width:auto; margin-top: -6px;}
#section-cara p {max-width:800px; text-align: center; margin:auto auto 20px auto;}
.cara-list {display: flex; align-items:stretch; text-align:center; gap:15px; max-width: 800px; margin:auto auto 20px auto;}
.cara-item {width: calc(33.33% - 8.5px); border: solid 1px #22c177; border-radius: 12px; padding:40px 30px; font-size:15px; line-height:1.1em; } 
.cara-item img {width:30px; margin:auto auto 7px auto;} 
.cara-item ul {text-align: left; margin:0; padding: 0; list-style: none;} 
.cara-item ul li {background-image: url(https://danapoket.com/wp-content/themes/oceanwp-child-theme-master/images/icon-checked.svg); background-repeat: no-repeat; background-position: left top; background-size: 14px; padding-left: 18px; margin-bottom: 10px;} 

#section-pengerusi {margin-bottom: 80px;}
.pengerusi-wrapper {display: flex; align-items: center; text-align:center; gap:30px; max-width: 900px; margin:auto;}
.pengerusi-wrapper > div {width: calc(50% - 15px);}
.pengerusi-wrapper h3 {color: #22c177; font-size: 22px; font-weight: 900; margin-top:20px;}

#section-soalan {margin-bottom: 80px;} 
.soalan-list {max-width: 800px; margin: auto;}
.soalan-item {}
.soalan-item .question {border: solid 1px #1e2019; padding: 15px 45px 15px 15px; background-image: url(https://danapoket.com/wp-content/themes/oceanwp-child-theme-master/images/icon-expand.svg); background-repeat: no-repeat; background-position: right 15px center; background-size: 25px; transition: margin 0.4s ease; cursor: pointer;}
.soalan-item .question:hover {border: solid 1px #22c177;}
.soalan-item .question.active {border: solid 1px #22c177; background-image: url(https://danapoket.com/wp-content/themes/oceanwp-child-theme-master/images/icon-collapse.svg); margin-bottom:15px;}
.soalan-item .answer {padding:0 15px; margin-bottom: 17px; font-size:14px; overflow: hidden; max-height: 0; transition: max-height 0.4s ease;}
.soalan-item .answer.active {} 

#section-dapatkan {display: flex; align-items: center; text-align:center; gap:30px; max-width: 900px; margin:auto;}
#section-dapatkan > div {width: calc(50% - 15px);}


@media only screen and (max-width: 1199px) {
}
@media only screen and (max-width: 1023px) {
  .content-area, .content-left-sidebar .content-area {margin-bottom: 0;}

  .home h1 span {display: block;}
  .home .mainbutton {font-size: 20px; padding:16px 35px; }
  .home .mainbutton div {font-size: 14px; margin-top: 2px; } 
  .home .subbutton {font-size: 15px; padding:10px 25px 12px 25px; }

  #section-heading h2 {margin-bottom: 60px;}

  #section-masthead {margin-bottom: 70px;}
  #section-masthead .masthead-wrapper { gap:20px;}
  #section-masthead .masthead-wrapper > div:first-child {width: calc(55% - 10px);}
  #section-masthead .masthead-wrapper > div:last-child {width: calc(45% - 10px);}

  #section-calculator {margin-bottom: 70px;}
  .calculator-wrapper {gap:20px; }
  .calculator-wrapper > div:first-child {width: 50%;}
  .calculator-wrapper > div:last-child {width: 50%;}

  #section-mengapa {margin-bottom: 70px;}
  .mengapa-list .mengapa-item div:first-child img {height: 50px; }
  .mengapa-list .mengapa-item:nth-child(2) div:first-child img {height: 55px; }

  #section-produk {margin-bottom: 70px;}
  #section-cara {margin-bottom: 70px;}
  #section-pengerusi {margin-bottom: 70px;}
  #section-soalan {margin-bottom: 70px;} 
}
@media only screen and (max-width: 767px) {
  #main #content-wrap {padding-top: 40px;}

  #section-masthead {margin-bottom: 60px;}
  #section-masthead .masthead-wrapper {flex-direction: column; font-size:17px;}
  #section-masthead .masthead-wrapper > div:first-child {width: unset; max-width: 400px;}
  #section-masthead .masthead-wrapper > div:last-child {width: unset;}

  #section-calculator {margin-bottom: 60px;}
  .calculator-wrapper {flex-direction: column;}
  .calculator-wrapper > div:first-child {width: unset; max-width: 350px;}
  .calculator-wrapper > div:last-child {width: unset; max-width: 350px;}

  #section-mengapa {margin-bottom: 60px;}
  .mengapa-list {flex-direction: column; max-width: 350px; margin-left: auto; margin-right: auto; margin-bottom: 30px; gap: 5px;}
  .mengapa-list .mengapa-item {width: 100%; display: flex; align-items: center; margin-bottom:20px; }
  .mengapa-list .mengapa-item h4 {margin-top: -11px;}
  .mengapa-list .mengapa-item p {font-size: 13px;}
  .mengapa-list .mengapa-item div:first-child {width: 90px; margin-right: 5px;}
  .mengapa-list .mengapa-item div:first-child img {height: 60px;}
  .mengapa-list .mengapa-item div:last-child {text-align: left; width: calc(100% - 95px);}
  .mengapa-list .mengapa-item:nth-child(2) div:first-child img {height: 57px; }

  #section-produk {margin-bottom: 60px;}
  .produk-highlights {flex-direction: column; max-width: 500px;}
  .produk-highlights > .produk-logo {width: unset;}
  .produk-highlights > .produk-features {width: unset;}
  /*.produk-rebate {flex-direction: column; max-width: 500px;}*/
  .produk-features {order: 2;}
  .produk-features-2 {order:1;}

  .produk-features-2 > div {flex-direction: column;} 
  .produk-features-2 > div:first-child > div:first-child img {width: 60px; }
  .produk-features-2 > div:last-child > div:first-child img {width: 53px; }
  .produk-features-2 > div > div:last-child {text-align:center;}
  /*
.produk-features-2 {display: flex; align-items:stretch; text-align:center; flex-wrap: wrap; gap:10px; width: 100%;}
.produk-features-2 > div {border: solid 1px #22c177; border-radius: 12px; padding:20px; width: calc(50% - 5px);
  display: flex; align-items: center; gap:10px; margin: auto; justify-content: center; height: 100%;} 
.produk-features-2 > div:first-child > div:first-child img {width: 80px; margin: auto auto 10px auto;}
.produk-features-2 > div:lastst-child > div:first-child img {width: 70px; margin: auto auto 10px auto;}
.produk-features-2 > div > div:last-child {text-align:left;} */

  #section-cara {margin-bottom: 60px;}
  .cara-list {flex-direction: column;}
  .cara-item {padding:30px; width: unset; max-width: 250px; margin-left: auto; margin-right: auto;}

  #section-pengerusi {margin-bottom: 60px;}
  .pengerusi-wrapper {flex-direction: column-reverse; gap: unset;}
  .pengerusi-wrapper > div:first-child {width: unset;}
  .pengerusi-wrapper > div:last-child {width: unset; max-width: 350px;}

  #section-soalan {margin-bottom: 60px;} 

  #section-dapatkan {flex-direction: column-reverse;}
  #section-dapatkan > div {width: unset; }
  #section-dapatkan > div:first-child {max-width: 350px;}
}
@media only screen and (max-width: 479px) {
  #main #content-wrap {padding-top: 30px;}
  /*#section-masthead .masthead-wrapper h3 {font-size: 18px;}
  .mengapa-list .mengapa-item div:first-child {margin-right: 0;}
  .mengapa-list .mengapa-item div:first-child img {width: 35px;}
  .mengapa-list .mengapa-item div:last-child {width: calc(100% - 67px);}
  .mengapa-list .mengapa-item:nth-child(2) div:first-child img {width: 40px;}*/
  .produk-features > div {width: 100%;}

  .produk-features-2 > div {width: 100%;} 
  /*.produk-rebate {order:1;}
  .produk-rebate-wrap { flex-direction: column;} 
  .produk-rebate-wrap:first-child img {width: 60px; }
  .produk-rebate-wrap:last-child {text-align:center;} */

  /*.home .kkmb-buttons .subbutton {margin-bottom: 5px;}*/
  .cara-item {padding: 20px;}
  #section-cara h2 > img {height: 25px;}
  #section-cara p {margin-bottom: 10px;}
  #section-pengerusi .pengerusi-wrapper h3 {font-size: 18px;}
  .soalan-item .question {padding: 10px 45px 10px 10px;}
  .soalan-item .question.active {margin-bottom: 10px;}
  .soalan-item .answer {padding: 0 10px; margin-bottom: 12px; }
}


/*================================================================
Modal
=================================================================*/
/* Hide content by default */
.modal-kelayakan-content,
.modal-yuran-content,
.modal-tnc-content,
.modal-privacy-content {display: none;}

/* Modal overlay */
.modal-container {
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
}
/* Modal box */
.modal-content {
    background-color: #fff;
    padding: 20px;
    max-width: 600px;
    width: 90%;
    margin: auto;
    position: relative;
    border-radius: 8px;
}
/* Close button */
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

.yuran-chart {border-top: solid 1px rgba(0, 0, 0, 0.15); padding-top: 9px; }
.yuran-chart > div {display: flex; margin-bottom: 9px; padding-bottom: 9px; border-bottom: solid 1px rgba(0, 0, 0, 0.15);}
.yuran-chart > div > div:first-child {width: calc(100% - 175px);}
.yuran-chart > div > div:last-child {width: 165px; padding-left: 10px; position: relative;}
.yuran-chart > div > div:last-child:before {content: ':'; position:absolute; left:0; top:0; }


/*================================================================
Application - setup 
=================================================================*/
form label {display: block;} 
form label:not(:last-child) {margin-bottom: 15px;}
form label small { display: block; font-size: 0.85em; margin:5px 0; font-style: italic; font-weight: normal;}
form label small.note {color: red; }
form input[type=text], form input[type=password], form input[type=email], form input[type=url], form input[type=search], form textarea, form input[type=number], form input[type=file] {display: block; width: 100%; border:none !important; background: #edf2ef; padding:6px 10px; border-radius: 5px !important; color: #000; font-weight: normal;}

form input[type=text] {text-transform:uppercase; }
form input[type=email], form input[type=url] {text-transform: lowercase;}
form textarea.tandatangan {height:300px;}

form input[type="date"] {background-color: #edf2ef; font-weight: normal;}

form input[type=file]::-webkit-file-upload-button {visibility: hidden;}
form input[type=file] {cursor: pointer; margin-bottom:10px;} 
form input[type=file]::before {
  content: ''; width:100%; display: inline-block; outline: none; white-space: nowrap; -webkit-user-select: none;
  background-image: url(https://danapoket.com/wp-content/themes/oceanwp-child-theme-master/images/icon-upload.svg); background-repeat: no-repeat; background-position: left top 3px; background-size: 14px; padding-left: 20px; font-size: 15.5px;
}
form input[type="file"].file-selected::before {
  background-image: url(https://danapoket.com/wp-content/themes/oceanwp-child-theme-master/images/icon-upload-selected.svg);
}
form input[type=file]:hover::before { /*border-color: black;*/}
form input[type=file]:active::before { /*background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);*/}
form input[type=file]:hover {color: #0b71b7;}

form .radio-group {display: flex; gap: 20px; margin-top: 5px;align-items: flex-start;}
form .radio-group label {display: flex; align-items: center; cursor: pointer; font-weight: normal; }
form .radio-group input[type="radio"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; /*accent-color: #cfd6d1;*/ width: 20px; height: 20px; border: solid 5px #edf2ef; border-radius: 50%; margin-right:4px; background-color:#edf2ef; }
form .radio-group input[type="radio"]:checked {background-color: #4e6758; }

form .select-field,
.dp-sidebar-mobile .select-field { appearance: none; -webkit-appearance: none; -moz-appearance: none; font-weight: normal; background-color: #edf2ef; border: none; padding: 6px 35px 6px 10px; border-radius: 5px; background-image: url('data:image/svg+xml;utf8,<svg fill="%23666" height="25" viewBox="0 0 24 24" width="25" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); background-repeat: no-repeat; background-position: right 5px center; background-size: 25px; cursor: pointer; font-size: 15px;}
.dp-sidebar-mobile .select-field {border: solid 1.5px #22c177; height: 45px; border-radius: 10px; }

.dp-main-container {display: flex; justify-content: center; align-items: flex-start; gap:20px;} 
.dp-main-container h3 {font-size: 20px; text-decoration: underline; }
.dp-main-container section {background: #ffffff; border-radius: 15px; padding: 30px; margin-bottom: 15px;} 
.dp-content {width: 850px;} /*no sidebar*/
.dp-sidebar {width: 250px;} 
.with-sidebar .dp-content {width: 580px;} 

.dp-sidebar-mobile {display: none;}

.twocol {display: flex; flex-wrap: wrap; gap:0 30px;}
.twocol > label, .twocol > div {width: calc(50% - 15px);}
.twocol .fullwidthfield {width: 100%;}
.calculator-wrapper .twocol {display: block;}
.calculator-wrapper .twocol > label, .calculator-wrapper .twocol > div {width: unset;}
form .calculator-container .result {text-align: center; font-size: 18px; margin-top: 40px; } 

.alert-error {color: red;}

/*================================================================
Application pages
=================================================================*/
form input[type=file].prapengesahan-upload-1::before {content: 'Kad Pengenalan (Depan)';}
form input[type=file].prapengesahan-upload-2::before {content: 'Kad Pengenalan (Belakang)';}
form input[type=file].prapengesahan-upload-3::before {content: 'Slip Gaji (1 bulan yang terkini)';}

form input[type=file].maklumat-upload-1::before {content: 'Surat Pengesahan Jawatan';}
form input[type=file].maklumat-upload-2::before {content: 'Surat Kebenaran Potongan Gaji Melalui Angkasa';}
form input[type=file].maklumat-upload-3::before {content: 'Slip Gaji (3 bulan yang terkini) - 1';}
form input[type=file].maklumat-upload-4::before {content: 'Slip Gaji (3 bulan yang terkini) - 2';}
form input[type=file].maklumat-upload-5::before {content: 'Slip Gaji (3 bulan yang terkini) - 3';}
form input[type=file].maklumat-upload-6::before {content: 'Penyata Bank (bahagian depan)';}
/* ringgitease */
form input[type=file].maklumat-upload-7::before {content: 'Surat Penyata Penyelesaian - 1';}
form input[type=file].maklumat-upload-8::before {content: 'Surat Penyata Penyelesaian - 2';}
form input[type=file].maklumat-upload-9::before {content: 'Surat Penyata Penyelesaian - 3';}
form input[type=file].maklumat-upload-10::before {content: 'Surat Penyata Penyelesaian - 4';}
form input[type=file].maklumat-upload-11::before {content: 'Surat Penyata Penyelesaian - 5';}


/*login -----------------------------------------*/
.login-terms {margin-top: 20px; margin-bottom: 0;}
.dp-main-container.login {max-width: 350px; margin:auto;}

/*listing ---------------------------------------*/
table.listing {  width: 100%; border-collapse: collapse; margin-bottom: unset;}
.listing thead tr {background-color: #f0f4f1;}
.listing th, .listing td {padding: 15px 10px; text-align: left;}
.listing th { text-transform:none; background:#f0f4f1; }
.listing th:first-child {border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.listing th:last-child {border-top-right-radius: 10px; border-bottom-right-radius: 10px;}

.listing .list-empty {}
.listing .list-empty tr {}
.listing .list-empty tr td {}
.listing .list-empty tr td:before {content: ""; display: block; height: 10px; background: rgba(0,0,0,0.1); width:100%; }
.list-empty-message {text-align: center; margin-top: 20px;}

.listing .list-content {} 
.listing .list-content tr td span {display: none; font-weight: bold;}
.dp-main-container.listing .downloadbutton {float: right; background-image: url(https://danapoket.com/wp-content/themes/oceanwp-child-theme-master/images/icon-download-white.svg); padding:8px 16px 10px 36px; background-position: left 18px top 12px; } 

.list-pagination {margin-top: 20px;}
.list-pagination .page-numbers {border: solid 1px #22c177; padding: 3px 8px; margin: 0 1px;}
.list-pagination .page-numbers.current {border: solid 1px #000; }
.list-pagination .page-numbers.prev, .list-pagination .page-numbers.next {display: none;}

/*pra-pengesahan --------------------------------*/
.prapengesahan-tnc {background: #edf2ef; padding: 10px; border-radius: 5px; height: 200px; overflow-y: scroll; font-weight: normal; text-align: justify;}

.prapengesahan-result > div:first-child {background-repeat: no-repeat; background-position: left top; background-size: 80px; min-height:80px; padding-left: 90px;}
.prapengesahan-result .alert {background-image: url(https://danapoket.com/wp-content/themes/oceanwp-child-theme-master/images/icon-alert.svg);}
.prapengesahan-result .success {background-image: url(https://danapoket.com/wp-content/themes/oceanwp-child-theme-master/images/icon-success.svg);}
.prapengesahan-result .failed {background-image: url(https://danapoket.com/wp-content/themes/oceanwp-child-theme-master/images/icon-failed.svg);}
.prapengesahan-result .success-proceed {margin-top: 20px; }

/*details ----------------------------------------*/
.info-row {display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #ccc;}
.info-row .label {width: 200px; text-align: left;}
.info-row .value {width: calc(100% - 200px); text-align: left;}
.info-row .documents {display: flex; flex-direction: column; gap: 12px; width:100%; }
.info-row .documents > div:not(:last-child) {border-bottom: 1px solid #ccc; padding-bottom:10px; }
.info-row .documents > div a {background-image: url(https://danapoket.com/wp-content/themes/oceanwp-child-theme-master/images/icon-openfile.svg); background-repeat: no-repeat; background-position: right center; background-size: 14px; padding-right: 20px;}

#maklumat-7 .detail-container > div:not(.first-row) {border-top: solid 1px #000000; padding-top:30px; margin-top: 30px;}
#maklumat-7 .tahniah-icon {display:flex; justify-content: center; align-items: center; color: #0000ff; font-weight: bold; gap: 8px; font-size: 20px;}
#maklumat-7 .tahniah-icon > div:first-child {width: 90px;}
#maklumat-7 .tahniah-icon > div:last-child {width: calc(100% - 100px);}
#maklumat-7 .tahniah-data > div:not(:first-child) {margin-top: 8px;}
#maklumat-7 .tahniah-remarks {}
#maklumat-7 .pending {background-repeat: no-repeat; background-position: left top; background-size: 80px; min-height:80px; padding-left: 90px; background-image: url(https://danapoket.com/wp-content/themes/oceanwp-child-theme-master/images/icon-alert.svg);
}

.section-wrapper {display: none; transition: all 0.3s ease;}
.section-wrapper.show {display: block;}

.filter-dropdown { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #edf2ef; border: none; padding: 6px 35px 6px 10px; border-radius: 5px; background-image: url('data:image/svg+xml;utf8,<svg fill="%23666" height="25" viewBox="0 0 24 24" width="25" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); background-repeat: no-repeat; background-position: right 5px center; background-size: 25px; cursor: pointer; font-size: 15px;
  width: auto; margin-bottom: 15px;}

h3.pdf {background-image: url('https://danapoket.com/wp-content/themes/oceanwp-child-theme-master/images/icon-pdf.svg'); background-repeat: no-repeat; background-size: 43px auto; background-position: center right; padding-right: 51px; display: inline-block; }

/*forms  ----------------------------------------*/
.doc-link {color: #4a4a4a; }
.genpdf-link {color: #4a4a4a; }

.maklumat-steps {width: 100%;}
.maklumat-steps ol { counter-reset: custom-counter; list-style: none; padding-left: 0; display: flex; justify-content: center; align-items: center; max-width: 950px; margin-left: auto; margin-right: auto; gap: 0 10px;}
.maklumat-steps ol li {counter-increment: custom-counter; position: relative; padding-left: 2.2em; margin-bottom: 1em; color: #adadad;}
.maklumat-steps ol li.active {color: #1e2019;}
.maklumat-steps ol li::before {content: counter(custom-counter); position: absolute; left: 0; top: 5px; width: 1.8em; height: 1.8em; border-radius: 50%; background-color: #adadad; color: white; text-align: center; line-height: 1.8em; font-weight: bold;}
.maklumat-steps ol li.active::before { background-color: #1e2019;}

.step-heading {text-align: center;}

.downloadbutton {display:block; background-image: url(https://danapoket.com/wp-content/themes/oceanwp-child-theme-master/images/icon-download.svg); background-repeat: no-repeat; background-position: left 10px top 13px; background-size: 14px; background-color: #edf2ef; padding:11px 11px 11px 30px; border-radius: 5px; margin-bottom: 10px; color:#4a4a4a; }

.maklumat-tnc {background: #edf2ef; padding: 10px; border-radius: 5px; height: 250px; overflow-y: scroll; font-weight: normal;}

.signature-container {position: relative; /*width: 400px; height: 300px;*/ width: 100%; max-width: 330px; aspect-ratio: 4 / 3;}
.tandatangan-canvas { /*width: 100%; height: 300px;*/ width: 100%; max-width: 330px; aspect-ratio: 4 / 3;background: #edf2ef; cursor: crosshair;}
body .subbutton.clear-signature {display: inline-block; cursor: pointer; font-size: 14px !important; padding: 4px 10px; border-radius: 5px; margin-top: 5px;}

.langkah-note {text-align:center; margin-top: 15px; line-height: 1em; color:red; font-style: italic; font-weight: bold;}


@media only screen and (max-width: 1199px) {
}
@media only screen and (max-width: 1023px) {
  body .sidebarbutton {font-size: 14px !important;}
  body .sidebarbutton > div {padding: 6px 10px;}
  .dp-main-container section {padding:20px;}
  .dp-content {width: 100%; }
  .dp-sidebar {width: 200px;}
  .with-sidebar .dp-content {width: calc(100% - 220px);}
  .info-row .label {width: 160px;}
  .info-row .value {width: calc(100% - 160px);}
}
@media only screen and (max-width: 767px) {
  .dp-main-container {flex-direction: column; gap: unset;}
  .dp-content {max-width: 500px; margin-left: auto; margin-right: auto;}
  .dp-sidebar {width: 100%; display: none;}
  .dp-sidebar-mobile {display:block; width: 100%; max-width: 500px; margin: 10px auto 20px auto;}
  .with-sidebar .dp-content {width: 100%; max-width: 500px; margin-left: auto; margin-right: auto;}
  .twocol {flex-direction: column; gap: unset;}
  .twocol > label, .twocol > div {width: 100%;}
  form label {font-weight: bold;}

  .info-row {flex-direction: column;}
  .info-row:first-child {padding-top: 0;}
  .info-row .label {font-weight: bold; padding-bottom: 2px; width: 100%;}
  .info-row .value {width: 100%;}

  .maklumat-steps { overflow-x: auto; -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */ padding: 0 10px; margin-bottom:20px; }
  .maklumat-steps ol {flex-wrap: nowrap; justify-content: flex-start; gap: 20px; min-width: max-content; }
  .maklumat-steps ol li {flex: 0 0 auto; white-space: nowrap; margin-bottom: 0; }

  /* Hide scrollbar while keeping scroll functionality */
  .maklumat-steps {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
  }
  .maklumat-steps::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
  }

  .listing thead {display: none;}

  .listing .list-empty {}
  .listing .list-empty tr {display: flex; flex-wrap: wrap; width: 100%; flex-direction: column; border-bottom: 1px solid #e9e9e9; padding: 15px 0;}
  .listing .list-empty tr td {display: block; padding: 2px 0; border-bottom: unset;}
  .listing .list-empty tr td:nth-child(1):before {width: 60%;}
  .listing .list-empty tr td:nth-child(2):before {width: 50%;}
  .listing .list-empty tr td:nth-child(3):before {width: 65%;}
  .listing .list-empty tr td:nth-child(4):before {width: 45%;}
  .listing .list-empty tr td:nth-child(5):before {width: 55%;}

  .listing .list-content tr { display: flex; flex-wrap: wrap; width: 100%; flex-direction: column; border-bottom: 1px solid #e9e9e9; padding: 15px 0;}
  .listing .list-content tr:first-child {padding-top: 0;}
  .listing .list-content tr td {display: block; padding: 2px 0; border-bottom: unset;}
  .listing .list-content tr td span {display: inline-block; width: 70px;}

  .dp-main-container.listing .downloadbutton {display: none;}
  .listing .status-filter {display:none;}
}
@media only screen and (max-width: 479px) {
}



/*================================================================
Float WhatsApp
=================================================================*/
.whatsapp-float {
  position: fixed;
  right: 12px;
  bottom: 15px;
  z-index: 99999;
  transition: bottom 0.3s ease, right 0.3s ease;
}
.whatsapp-float img {
  border-radius: 50%;
  transition: transform .3s;
  display: block;
}
.whatsapp-float img:hover { transform: scale(1.06); }

@media (max-width: 479px) {
  .whatsapp-float {
    right: 3px;
    bottom: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { transition: none; }
  .whatsapp-float img { transition: none; }
}