/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.light-style .menu .app-brand.demo {
  height: 64px;
}

.dark-style .menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo {
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  width: 30px;
  height: 30px;
}

.app-brand-logo.demo svg {
  width: 1.7rem;
  height: 1.7rem;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.45px;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 62px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 231px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}
.admin-status-bar {
	position: fixed;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%);
	min-width: 250px;
	padding: 8px 14px;
	background: rgba(0,0,0,.75);
	color: #fff;
	font-size: 13px;
	border-radius: 999px;
	z-index: 99999;
	display: flex;
	gap: 8px;
	transition: all .4s ease;
}

.admin-status-bar.show { bottom: 20px; }

/* status colors */
.admin-success { background: rgba(40,167,69,.9); }
.admin-warning { background: rgba(255,193,7,.9); color:#000; }
.admin-danger  { background: rgba(220,53,69,.9); }

.admin-status-dot {
	width: 10px;
	height: 10px;
	margin: 5px;
	border-radius: 50%;
	animation: pulse 1.4s infinite;
}

/* dot colors */
.admin-success .admin-status-dot { background:#28a745; }
.admin-warning .admin-status-dot { background:#ffc107; }
.admin-danger  .admin-status-dot { background:#dc3545; }

.verification-overlay{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background: rgba(0,0,0,0.6);
	backdrop-filter: blur(6px);
	z-index: 9999;
	animation: fadeIn .3s ease;
	display:flex;
	justify-content:center;
	align-items:center;
}

.verification-card{
	background:white;
	padding:40px;
	border-radius:16px;
	text-align:center;
	width:420px;
	max-width:90%;
	box-shadow:0 20px 60px rgba(0,0,0,.3);
}

.role-select-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background: rgba(0,0,0,0.35);
	backdrop-filter: blur(6px);

	display: flex;
	justify-content: center;
	align-items: center;

	z-index: 9999;
}

.role-card {
	background: #fff;
	padding: 30px;
	border-radius: 14px;
	width: 380px;
	max-width: 90%;

	box-shadow: 0 20px 60px rgba(0,0,0,0.25);

	animation: scaleIn .25s ease;
}

@keyframes scaleIn {
	from {
		transform: scale(.9);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes fadeIn{
	from{ opacity:0 }
	to{ opacity:1 }
}

@keyframes pulse {
	0%{transform:scale(1)}
	50%{transform:scale(1.5);opacity:.5}
	100%{transform:scale(1)}
}

@media (max-width: 991px){

	.bottom-navbar{
		display:none;
		position:absolute;
		top:60px;
		left:0;
		width:100%;
		background:#fff;
		z-index:999;
	}

	.bottom-navbar.show-mobile-menu{
		display:block;
		animation: slideDown .3s ease;
	}

	@keyframes slideDown{
		from{
			transform:translateY(-20px);
			opacity:0;
		}
		to{
			transform:translateY(0);
			opacity:1;
		}
	}

}

.text-red {
	color: red;
}

.text-big {
	text-transform:uppercase
}

.card {
    border: none;
	  margin-bottom: 20px;
    padding:15px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    backdrop-filter: blur(16px);
}

/* text style */
.card-body{
    padding: 10px;
}

.card-text{
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

/* link style */
.card a{
    text-decoration: none;
}

/* =========================
   KHUSUS MENU LAYANAN
========================= */

#layanan {
    row-gap: 15px;
}

#layanan .menu-card {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: relative;
}

/* hover hanya di layanan */
#layanan .menu-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* image animasi */
#layanan .menu-card img {
    transition: transform 0.4s ease;
}

#layanan .menu-card:hover img {
    transform: scale(1.08);
}

/* overlay aman */
#layanan .menu-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.08));
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
}

#layanan .menu-card:hover::after {
    opacity: 1;
}

/* efek klik */
#layanan .menu-card:active {
    transform: scale(0.96);
}

.kk-card {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
	background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: relative;
	padding: 30px;
}

/* image */
.kk-card img {
    transition: transform 0.4s ease;
}

.kk-card:hover img {
    transform: scale(1.08);
}

/* overlay FIX */
.kk-card::after {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none; /* 🔥 INI KUNCI */
}

.kk-card:hover::after {
    opacity: 1;
}

/* text */
.kk-title {
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
}

.kk-desc {
    font-size: 12px;
    color: #666;
}

.is-invalid {
    border: 1px solid #dc3545 !important;
}