:root{
--ivory:#F7F2E9;
--paper:#FBF8F2;
--maroon:#7A2E2E;
--maroon-deep:#5A1F1F;
--gold:#B8863B;
--ink:#332A22;
--ink-soft:#5C5044;
--line:#E3D8C4;
}

.loader {
  position: relative;
  text-align: center;
  margin: 15px auto 35px auto;
  z-index: 9999;
  display: block;
  width: 80px;
  height: 80px;
  border: 10px solid rgba(0, 0, 0, .3);
  border-radius: 50%;
  border-top-color: #01582d;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}


/** MODAL STYLING **/

.modal-content {
  border-radius: 0px;
  box-shadow: 0 0 20px 8px rgba(0, 0, 0, 0.7);
}

.modal-backdrop.show {
  opacity: 0.75;
}

.loader-txt {
  p {
    font-size: 13px;
    color: #666;
    small {
      font-size: 11.5px;
      color: #999;
    }
  }
}

/*#billdesc{
	padding-top: 50px;
}
#tujuan_kunjungan{
    width: 100%;
    height: 30px;
}
option {
    height: 30px;
    line-height: 30px;
}*/

.editOption{
   /* width: 90%;
    height: 36px;
    padding: 10px 20px;*/
    position: relative;
   /* margin-bottom: 10px;*/
    top: 5px;
    
}

#load {
	width: 100%;
	height: 100%;
	position: fixed;
	text-indent: 100%;
	background: #f5f6f7 url('<?= base_url('assets/images/Icon/7YQl.gif')?>') no-repeat center;
	z-index: 1;
	opacity: 0.8;
	/*background-size: 8%;*/

}

.spinner {
	display: none;
}

@media (max-width: 720px) {
	.padd {
		padding: 2em 0;
	}
}

  /* ===== MODAL THEME ===== */
  #modalKonfirmasi .modal-content{
    background:var(--ivory);
    border:none;
    border-radius:14px;
    overflow:hidden;
  }
  #modalKonfirmasi .modal-header{
    background:#01582d;
    color:var(--paper);
    border-bottom:none;
    padding:22px 28px;
    position:relative;
  }
  #modalKonfirmasi .modal-header .glyph{
    width:26px;height:26px;
    margin-right:12px;
    flex-shrink:0;
  }
  #modalKonfirmasi .modal-title{
    font-size:17px;
    font-weight:600;
    line-height:1.4;
    display:flex;
    align-items:center;
    color: #fff;
  }
  #modalKonfirmasi .modal-header .eyebrow{
    font-family:'Helvetica Neue',Arial,sans-serif;
    font-size:10px;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:700;
    display:block;
    margin-bottom:4px;
  }
  #modalKonfirmasi .close{
    color:var(--paper);
    opacity:0.8;
    text-shadow:none;
    font-weight:300;
  }
  #modalKonfirmasi .close:hover{ color:var(--gold); opacity:1; }

  #modalKonfirmasi .modal-body{
    padding:0 28px;
    max-height:60vh;
    overflow-y:auto;
    background:var(--ivory);
  }
  #modalKonfirmasi .modal-body::-webkit-scrollbar{ width:8px; }
  #modalKonfirmasi .modal-body::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }

  #modalKonfirmasi .chapter{ margin:28px 0; }
  #modalKonfirmasi .chapter-head{
    display:flex;
    align-items:baseline;
    gap:14px;
    border-bottom:2px solid var(--maroon);
    padding-bottom:8px;
    margin-bottom:14px;
  }
  #modalKonfirmasi .chapter-num{
    font-family:'Helvetica Neue',Arial,sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.1em;
    color:var(--paper);
    background:var(--maroon);
    padding:3px 10px;
    border-radius:2px;
  }
  #modalKonfirmasi .chapter-title{
    font-size:16.5px;
    font-weight:600;
    color:var(--maroon-deep);
    margin:0;
  }
  #modalKonfirmasi .sub{
    font-family:'Helvetica Neue',Arial,sans-serif;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--gold);
    margin:18px 0 8px;
  }
  #modalKonfirmasi .lead-p{
    font-size:14px;
    color:var(--ink-soft);
    margin:-4px 0 12px;
  }
  #modalKonfirmasi ol.rules, #modalKonfirmasi ul.rules{
    margin:0; padding-left:0; list-style:none;
  }
  #modalKonfirmasi ol.rules li, #modalKonfirmasi ul.rules li{
    position:relative;
    padding:7px 0 7px 30px;
    border-bottom:1px dashed var(--line);
    font-size:14px;
    line-height:1.55;
  }
  #modalKonfirmasi ol.rules li:last-child, #modalKonfirmasi ul.rules li:last-child{ border-bottom:none; }
  #modalKonfirmasi ol.rules{ counter-reset:item; }
  #modalKonfirmasi ol.rules li{ counter-increment:item; }
  #modalKonfirmasi ol.rules li::before{
    content:counter(item);
    position:absolute; left:0; top:7px;
    width:19px;height:19px;
    border-radius:50%;
    background:var(--ivory);
    border:1.4px solid var(--gold);
    color:var(--maroon-deep);
    font-family:'Helvetica Neue',Arial,sans-serif;
    font-size:10px; font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  #modalKonfirmasi ul.rules li::before{
    content:"◆";
    position:absolute; left:2px; top:9px;
    color:var(--gold);
    font-size:8px;
  }
  #modalKonfirmasi ol.rules.abc{ counter-reset:letitem; }
  #modalKonfirmasi ol.rules.abc li{ counter-increment:letitem; }
  #modalKonfirmasi ol.rules.abc li::before{
    content: counter(letitem, lower-alpha);
    background:transparent; border:none; width:auto; height:auto;
    color:var(--maroon); font-weight:700;
    font-family:'Iowan Old Style',Georgia,serif;
    top:7px;
  }
  #modalKonfirmasi .subgroup{
    background:var(--paper);
    border:1px solid var(--line);
    border-left:4px solid var(--gold);
    border-radius:6px;
    padding:14px 18px 4px;
    margin:10px 0 18px;
  }
  #modalKonfirmasi .subgroup-label{
    font-family:'Helvetica Neue',Arial,sans-serif;
    font-size:11px; font-weight:700;
    color:var(--maroon); letter-spacing:0.04em;
    margin-bottom:4px;
  }
  #modalKonfirmasi table.schedule{
    width:100%; border-collapse:collapse; margin:12px 0 18px;
    font-size:13.5px; font-family:'Helvetica Neue',Arial,sans-serif;
  }
  #modalKonfirmasi table.schedule th{
    background:var(--maroon); color:var(--paper); text-align:left;
    padding:8px 14px; font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  }
  #modalKonfirmasi table.schedule td{
    padding:8px 14px; border-bottom:1px solid var(--line); background:var(--paper);
  }
  #modalKonfirmasi table.dana{ width:100%; border-collapse:collapse; margin:12px 0 16px; font-size:13.5px; }
  #modalKonfirmasi table.dana th{
    font-family:'Helvetica Neue',Arial,sans-serif; text-align:left; font-size:10.5px;
    letter-spacing:0.05em; text-transform:uppercase; color:var(--gold);
    border-bottom:2px solid var(--gold); padding:6px 12px;
  }
  #modalKonfirmasi table.dana td{ padding:9px 12px; border-bottom:1px solid var(--line); }
  #modalKonfirmasi table.dana td.amount{
    text-align:right; font-weight:600; color:var(--maroon-deep);
    white-space:nowrap; font-family:'Helvetica Neue',Arial,sans-serif;
  }
  #modalKonfirmasi .bank-card{
    background:var(--maroon-deep); color:var(--paper); border-radius:10px;
    padding:18px 20px; margin-top:14px; display:flex; flex-wrap:wrap; gap:16px;
    justify-content:space-between; font-family:'Helvetica Neue',Arial,sans-serif; font-size:13px;
  }
  #modalKonfirmasi .bank-card .field-label{
    font-size:10px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.65; margin-bottom:3px;
  }
  #modalKonfirmasi .bank-card .field-value{ font-size:14.5px; font-weight:600; }
  #modalKonfirmasi .bank-card a{ color:var(--gold); text-decoration:none; border-bottom:1px solid var(--gold); font-weight:600; }
  #modalKonfirmasi .packing-grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin-top:10px;
  }
  #modalKonfirmasi .pack-item{
    display:flex; align-items:center; gap:8px; background:var(--paper);
    border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:13px;
  }
  #modalKonfirmasi .pack-item .box{ flex-shrink:0; width:13px; height:13px; border:1.5px solid var(--gold); border-radius:3px; }
  #modalKonfirmasi .pack-item.required{ border-color:var(--gold); background:#FBF3E4; }
  #modalKonfirmasi .pack-item.required .box{ background:var(--gold); }
  #modalKonfirmasi .callout{
    background:#F3E4E4; border:1px solid #DDB9B9; border-radius:8px;
    padding:16px 18px; font-size:13.5px; color:var(--maroon-deep);
  }
  #modalKonfirmasi .callout strong{ color:var(--maroon-deep); }

  /* footer / agree area di dalam modal */
  #modalKonfirmasi .modal-footer{
    border-top:1px solid var(--line);
    background:var(--paper);
    padding:20px 28px;
    display:block;
  }
  .agree-check{
    display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none;
    font-family:'Helvetica Neue',Arial,sans-serif;
  }
  .agree-check input{ position:absolute; opacity:0; width:0; height:0; }
  .agree-check .checkmark{
    flex-shrink:0; width:22px; height:22px; border:1.6px solid var(--gold);
    border-radius:5px; background:var(--ivory); position:relative;
    transition:background .15s ease, border-color .15s ease;
  }
  .agree-check input:checked + .checkmark{ background:var(--maroon); border-color:var(--maroon); }
  .agree-check input:checked + .checkmark::after{
    content:""; position:absolute; left:6px; top:2px; width:6px; height:11px;
    border:solid var(--paper); border-width:0 2px 2px 0; transform:rotate(45deg);
  }
  .agree-check input:focus-visible + .checkmark{
    outline:2px solid var(--maroon-deep); outline-offset:2px;
  }
  .agree-check input:disabled + .checkmark{
    opacity:0.6; cursor:not-allowed;
  }
  .agree-text{ font-size:14.5px; color:var(--ink); font-weight:500; }

  .confirm-btn{
    margin-top:16px; width:100%; padding:12px 20px;
    background:var(--maroon); color:var(--paper); border:none; border-radius:8px;
    font-family:'Helvetica Neue',Arial,sans-serif; font-size:14px; font-weight:700;
    letter-spacing:0.03em; cursor:pointer; transition:background .15s ease, transform .1s ease, opacity .15s ease;
    display:flex; align-items:center; justify-content:center; gap:10px;
  }
  .confirm-btn:hover:not(:disabled){ background:var(--maroon-deep); }
  .confirm-btn:active:not(:disabled){ transform:scale(0.99); }
  .confirm-btn:disabled{ background:#C9BCAE; cursor:not-allowed; opacity:0.75; }
  .confirm-btn .btn-spinner{ display:none; }
  .confirm-btn.is-loading .btn-label{ display:none; }
  .confirm-btn.is-loading .btn-spinner{ display:inline-flex; align-items:center; gap:8px; }

  @media (max-width:600px){
    #modalKonfirmasi .modal-header{ padding:18px 20px; }
    #modalKonfirmasi .modal-body{ padding:0 20px; }
    #modalKonfirmasi .modal-footer{ padding:16px 20px; }
  }