/*
 * Table of Contents
 *
 * 1. Dropdown Styles
 * 2. Tour Guide Widget Styles
 * 3. Layout and Form Styles
 * 4. Button and Control Styles
 * 5. Notifications and Miscellaneous Styles
 * 6. Media Queries
 */

/* 
========================================
1. Dropdown Styles
========================================
*/

/* Dropdown container */
.tour-guide-wp-page-wrap .tour-guide-dropdown {
	position: relative;
	display: inline-block;
}

/* Dropdown content (hidden by default) */
.tour-guide-dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 999;
}

/* Links inside dropdown */
.tour-guide-dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/* Dropdown link hover effect */
.tour-guide-dropdown-content a:hover {
	background-color: #f1f1f1;
}

/* Show dropdown on hover */
.tour-guide-dropdown:hover .tour-guide-dropdown-content {
	display: block;
}

.tour-guide-table-options .btn-icon {
	display: inline-flex;
	justify-items: center;
	justify-content: center;
	padding: 5px 8px;
	margin-right: 2px;
}

/* 
========================================
2. Tour Guide Widget Styles
========================================
*/

/* Card header for the widget */
.tour-guide-widget .card .card-header:first-child {
	border-radius: inherit;
	border-bottom: none;
	border-color: unset;
	background: transparent;
}

/* Text area in widget */
.tour-guide-widget textarea.form-control {
	height: auto;
}

/* Admin menu icon scaling */
.toplevel_page_tour-guide .wp-menu-image.svg {
	transform: scale(0.9);
}

/* Centered text in widget wrapper */
.tour-guide-wp-page-wrap .text-center {
	text-align: center;
}

/* Widget card */
.tour-guide-wp-page-wrap form .card {
	width: 100%;
	max-width: 100%;
}

/* Widget form group */
.tour-guide-wp-page-wrap .tour-guide-form-group {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 2px;
	margin-top: 15px;
}

/* Widget form control */
.tour-guide-wp-page-wrap .form-control {
	width: 100%;
	max-width: inherit;
}

/* Checkbox alignment in form group */
.tour-guide-wp-page-wrap .tour-guide-form-group.tour-guide-checkbox {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

/* Checkbox input */
.tour-guide-wp-page-wrap .tour-guide-form-group.tour-guide-checkbox input {
	width: auto;
	margin-top: 2px;
}

/* Widget container button */
#tour-guide-widget-container button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

/* 
========================================
3. Layout and Form Styles
========================================
*/

/* Responsive table in widget */
.tour-guide-wp-page-wrap .table-responsive {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Tour select and control adjustments */
.tour-guide-widget .tour-guide-tour-select-wrapper,
.tour-guide-widget .tour-guide-controls {
	min-width: unset;
}

/* Accordion in widget */
.tour-guide-widget .tour-guide-accordion .card {
	margin-top: unset;
	min-width: unset;
	padding: 1px;
}

/* 
========================================
4. Button and Control Styles
========================================
*/

/* Buttons in widget */
.tour-guide-widget .button,
.tour-guide-widget .btn.button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-height: unset;
	line-height: normal;
	margin-bottom: 0px;
	cursor: pointer;
}

/* Accordion button alignment */
.tour-guide-accordion .card-header .btn-block {
	justify-content: start;
}

/* Widget button link */
.tour-guide-widget .btn-link {
	text-decoration: none;
	background: none;
	border: none;
}

/* Small buttons */
.tour-guide-widget .button.button-extra-small:not(.btn-info),
.tour-guide-widget .btn.button-extra-small:not(.btn-info) {
	height: auto;
	min-height: min-content;
	background: transparent;
	border: none;
}

/* Widget control buttons */
.tour-guide-widget .tour-guide-widget-controls .button,
.tour-guide-widget .button-link:focus,
.tour-guide-widget .button-link:hover,
.tour-guide-widget .button.button-extra-small:hover,
.tour-guide-widget .button.button-extra-small:focus {
	box-shadow: none;
	outline: none;
	background: none;
	border: none;
}

/* Step removal button */
.tour-guide-widget .button.remove-step {
	margin-left: 5px;
	line-height: normal;
	margin-top: -4px;
	display: block;
}

.tour-guide-widget .btn-icon {
	display: inline-flex;
	justify-items: center;
	justify-content: center;
	padding: 5px 8px !important;
	margin-right: 2px;
}

/* Icon scaling in widget */
.tour-guide-widget
	.tour-guide-widget-controls
	.button:not(.tour-guide-widget-btn) {
	transform: scale(var(--tour-guide-icon-scale));
}

/* Sequence list item display */
.tour-guide-widget .click-sequence-list-item {
	display: flex;
}

/* Form group margin in widget */
.tour-guide-widget .form-group {
	margin-bottom: 15px;
}

/* Form control settings */
.tour-guide-widget .form-control {
	display: block;
	width: 100%;
	min-height: 35px;
	padding: 6px 12px;
	line-height: normal;
	box-sizing: border-box;
}

/* 
========================================
5. Notifications and Miscellaneous Styles
========================================
*/

/* Toast notification styling */
.tour-guide-widget-toast-notification {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999999;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.tour-guide-widget-toast-notification .notice {
	max-width: 40vw;
}
/* 
========================================
6. Media Queries
========================================
*/

/* Checkbox width adjustment for larger screens */
@media (min-width: 768px) {
	.tour-guide-form-group.tour-guide-checkbox label,
	.tour-guide-form-group.tour-guide-checkbox input {
		width: 40%;
	}
}

@media (min-width: 1024px) {
	.tour-guide-form-group.tour-guide-checkbox label,
	.tour-guide-form-group.tour-guide-checkbox input {
		width: 30%;
	}
}