
.kyka-gb-controller { display: none; }

.elementor-editor-active .kyka-gb-controller,
.elementor-editor-preview .kyka-gb-controller { display: block; }

.kyka-gb-editor-note {
	padding: 12px 14px;
	border: 1px dashed rgba(127,127,127,.6);
	border-radius: 8px;
	font: 12px/1.5 Arial, sans-serif;
}

.kyka-gb-editor-note strong,
.kyka-gb-editor-note span { display: block; }

/* Target */
.kyka-gb-target {
	--kyka-padding: 28px;
	--kyka-list-height: 560px;
	--kyka-message-width: 88%;
	--kyka-message-gap: 37px;
	--kyka-wrapper-radius: 0px;
	--kyka-bg-color: #2A2A2A;
	--kyka-overlay-color: rgba(0,0,0,.28);
	--kyka-bg-image: none;
	--kyka-title-color: #fff;
	--kyka-title-font: "Cormorant Garamond";
	--kyka-title-size: 38px;
	--kyka-label-color: rgba(255,255,255,.60);
	--kyka-input-color: #fff;
	--kyka-placeholder: rgba(255,255,255,.43);
	--kyka-input-bg: rgba(255,255,255,.025);
	--kyka-input-border: rgba(255,255,255,.28);
	--kyka-input-radius: 0px;
	--kyka-rsvp-color: rgba(255,255,255,.68);
	--kyka-rsvp-border: rgba(255,255,255,.34);
	--kyka-rsvp-active-bg: #f3f0e8;
	--kyka-rsvp-active-text: #242421;
	--kyka-rsvp-radius: 50px;
	--kyka-submit-color: #fff;
	--kyka-submit-bg: rgba(255,255,255,.055);
	--kyka-submit-border: rgba(255,255,255,.58);
	--kyka-submit-radius: 50px;
	--kyka-name-color: #fff;
	--kyka-name-font: "Cormorant Garamond";
	--kyka-name-size: 19px;
	--kyka-message-color: rgba(255,255,255,.83);
	--kyka-message-size: 12px;
	--kyka-attending-bg: rgba(133,157,137,.25);
	--kyka-maybe-bg: rgba(183,169,139,.18);
	--kyka-not-bg: rgba(166,110,110,.20);
	--kyka-page-color: rgba(255,255,255,.72);
	--kyka-page-border: rgba(255,255,255,.22);
	--kyka-page-active-bg: #F3F0E8;
	--kyka-page-active-color: #242421;
	--kyka-page-radius: 50px;
}

.kyka-gb-target .guestbook-box-content {
	position: relative !important;
	padding: var(--kyka-padding) !important;
	background-color: var(--kyka-bg-color) !important;
	background-image: linear-gradient(var(--kyka-overlay-color), var(--kyka-overlay-color)), var(--kyka-bg-image) !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	color: #fff !important;
	border-radius: var(--kyka-wrapper-radius) !important;
	overflow: hidden !important;
}

.kyka-gb-target .guestbook-box-content > * {
	position: relative;
	z-index: 1;
}

/* bersihkan icon / pseudo liar */
.kyka-gb-target #hidden-avatar,
.kyka-gb-target .user-guestbook > div:first-child,
.kyka-gb-target .guestbook-list i,
.kyka-gb-target .guestbook-list svg,
.kyka-gb-target .guestbook-list [class*="icon"],
.kyka-gb-target .guestbook-list [class*="Icon"] {
	display: none !important;
}

.kyka-gb-target .user-guestbook::before,
.kyka-gb-target .user-guestbook::after,
.kyka-gb-target .user-guestbook > div:first-child::before,
.kyka-gb-target .user-guestbook > div:first-child::after,
.kyka-gb-target .guestbook::before,
.kyka-gb-target .guestbook::after,
.kyka-gb-target .guestbook-name::before,
.kyka-gb-target .guestbook-name::after,
.kyka-gb-target .guestbook-message::before,
.kyka-gb-target .guestbook-message::after {
	display: none !important;
	content: none !important;
}

.kyka-gb-target .kyka-rsvp-heading {
	text-align: center;
	margin: 0 0 32px;
}

.kyka-gb-target .kyka-rsvp-heading h2 {
	margin: 0 !important;
	color: var(--kyka-title-color) !important;
	font-family: var(--kyka-title-font), Georgia, serif !important;
	font-size: var(--kyka-title-size) !important;
	font-weight: 500 !important;
	line-height: .95 !important;
}

.kyka-gb-target .kyka-rsvp-heading-line {
	width: 38px;
	height: 1px;
	margin: 13px auto 0;
	background: rgba(255,255,255,.35);
}

.kyka-gb-target #post-guestbook-box {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.kyka-gb-target #post-guestbook-box .guestbook-label {
	display: block !important;
	margin: 0 0 9px !important;
	padding: 0 !important;
}

.kyka-gb-target #post-guestbook-box .guestbook-label label {
	display: block !important;
	margin: 0 !important;
	color: var(--kyka-label-color) !important;
	font-family: Arial, sans-serif !important;
	font-size: 9px !important;
	font-weight: 600 !important;
	letter-spacing: 1.7px !important;
	text-transform: uppercase !important;
}

.kyka-gb-target input[name="guestbook-name"],
.kyka-gb-target textarea[name="guestbook-message"] {
	box-sizing: border-box !important;
	width: 100% !important;
	color: var(--kyka-input-color) !important;
	background: var(--kyka-input-bg) !important;
	border: 1px solid var(--kyka-input-border) !important;
	border-radius: var(--kyka-input-radius) !important;
	box-shadow: none !important;
	outline: none !important;
	font: 13px/1.5 Arial, sans-serif !important;
}

.kyka-gb-target input[name="guestbook-name"] {
	height: 52px !important;
	padding: 0 15px !important;
	margin: 0 0 17px !important;
}

.kyka-gb-target textarea[name="guestbook-message"] {
	min-height: 105px !important;
	padding: 14px 15px 30px !important;
	margin: 0 !important;
	resize: vertical !important;
}

.kyka-gb-target input[name="guestbook-name"]::placeholder,
.kyka-gb-target textarea[name="guestbook-message"]::placeholder {
	color: var(--kyka-placeholder) !important;
	font-family: Georgia, serif !important;
	font-style: italic !important;
	opacity: 1 !important;
}

.kyka-gb-target .kyka-rsvp-buttons {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin: 0 0 18px !important;
}

.kyka-gb-target .kyka-rsvp-buttons select[name="confirm"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.kyka-gb-target .kyka-rsvp-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 34px !important;
	padding: 0 13px !important;
	margin: 0 !important;
	color: var(--kyka-rsvp-color) !important;
	background: transparent !important;
	border: 1px solid var(--kyka-rsvp-border) !important;
	border-radius: var(--kyka-rsvp-radius) !important;
	box-shadow: none !important;
	font: 600 8px/1 Arial, sans-serif !important;
	letter-spacing: .9px !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
}

.kyka-gb-target .kyka-rsvp-button.active {
	color: var(--kyka-rsvp-active-text) !important;
	background: var(--kyka-rsvp-active-bg) !important;
	border-color: var(--kyka-rsvp-active-bg) !important;
}

.kyka-gb-target .kyka-message-wrapper { position: relative !important; }

.kyka-gb-target .kyka-message-counter {
	position: absolute;
	right: 10px;
	bottom: 8px;
	color: var(--kyka-placeholder);
	font: 9px/1 Arial, sans-serif;
	pointer-events: none;
}

.kyka-gb-target #post-guestbook-box .elementor-button-wrapper {
	width: 100% !important;
	margin: 17px 0 0 !important;
}

.kyka-gb-target #post-guestbook-box button[type="submit"] {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 41px !important;
	padding: 10px 20px !important;
	color: var(--kyka-submit-color) !important;
	background: var(--kyka-submit-bg) !important;
	border: 1px solid var(--kyka-submit-border) !important;
	border-radius: var(--kyka-submit-radius) !important;
	box-shadow: none !important;
	font: 600 12px/1 Georgia, serif !important;
	letter-spacing: 1.1px !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
}

.kyka-gb-target .guestbook-list {
	width: 100% !important;
	height: auto !important;
	max-height: var(--kyka-list-height) !important;
	margin: 46px 0 0 !important;
	padding: 0 3px 10px !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.kyka-gb-target .user-guestbook {
	display: flex !important;
	width: 100% !important;
	margin: 0 0 var(--kyka-message-gap) !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.kyka-gb-target .user-guestbook .guestbook {
	width: var(--kyka-message-width) !important;
	max-width: var(--kyka-message-width) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.kyka-gb-target.kyka-alternate .user-guestbook:nth-child(odd) {
	justify-content: flex-start !important;
}
.kyka-gb-target.kyka-alternate .user-guestbook:nth-child(odd) .guestbook {
	text-align: left !important;
}
.kyka-gb-target.kyka-alternate .user-guestbook:nth-child(even) {
	justify-content: flex-end !important;
}
.kyka-gb-target.kyka-alternate .user-guestbook:nth-child(even) .guestbook {
	text-align: right !important;
}

.kyka-gb-target .guestbook-name {
	display: inline-block !important;
	margin: 0 6px 5px 0 !important;
	color: var(--kyka-name-color) !important;
	font-family: var(--kyka-name-font), Georgia, serif !important;
	font-size: var(--kyka-name-size) !important;
	font-weight: 500 !important;
	font-style: italic !important;
	text-decoration: none !important;
}

.kyka-gb-target .wdp-confirm {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 18px !important;
	padding: 3px 8px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(255,255,255,.08) !important;
	font: 600 8px/1 Arial, sans-serif !important;
	color: rgba(255,255,255,.82) !important;
	background: rgba(255,255,255,.13) !important;
}

.kyka-gb-target .wdp-confirm.kyka-attending { background: var(--kyka-attending-bg) !important; }
.kyka-gb-target .wdp-confirm.kyka-maybe { background: var(--kyka-maybe-bg) !important; }
.kyka-gb-target .wdp-confirm.kyka-not-attending { background: var(--kyka-not-bg) !important; }

.kyka-gb-target .guestbook-message {
	display: block !important;
	margin: 5px 0 0 !important;
	padding: 0 !important;
	color: var(--kyka-message-color) !important;
	background: transparent !important;
	border: 0 !important;
	font: 400 var(--kyka-message-size)/1.65 Arial, sans-serif !important;
}

@media (max-width: 767px) {
	.kyka-gb-target .guestbook-box-content {
		padding: calc(var(--kyka-padding) * .9) !important;
	}
	.kyka-gb-target .kyka-rsvp-button {
		min-height: 33px !important;
		padding: 0 11px !important;
	}
}


/* =========================================================
   COMMENT PAGINATION
========================================================= */

.kyka-gb-target .user-guestbook.kyka-page-hidden {
	display: none !important;
}

.kyka-gb-target .kyka-pagination {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 7px !important;
	width: 100% !important;
	margin: 18px 0 0 !important;
	padding: 0 !important;
}

.kyka-gb-target .kyka-page-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 32px !important;
	height: 32px !important;
	padding: 0 9px !important;
	margin: 0 !important;
	color: var(--kyka-page-color) !important;
	background: transparent !important;
	border: 1px solid var(--kyka-page-border) !important;
	border-radius: var(--kyka-page-radius) !important;
	box-shadow: none !important;
	font: 600 10px/1 Arial, sans-serif !important;
	cursor: pointer !important;
	transition: .2s ease !important;
}

.kyka-gb-target .kyka-page-btn.active {
	color: var(--kyka-page-active-color) !important;
	background: var(--kyka-page-active-bg) !important;
	border-color: var(--kyka-page-active-bg) !important;
}

.kyka-gb-target .kyka-page-btn:disabled {
	opacity: .3 !important;
	cursor: default !important;
}

.kyka-gb-target .kyka-page-dots {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 18px !important;
	color: var(--kyka-page-color) !important;
	font: 600 10px/1 Arial, sans-serif !important;
}
