/*--------------------------------------------------------------
>>> Some Global Styles for AnWP Football Leagues Admin part:
----------------------------------------------------------------*/
/* AlpineJS support */
[fl-x-cloak] { display: none !important; }

/* FL - X New Modal */
.anwp-x-modal {
	position: fixed;
	inset: 0;
	z-index: 100110;
	align-items: start;
	justify-content: center;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(1px);
	padding-top: 50px;
	display: flex;
}

/*
 * <dialog> overrides for the FL Selector.
 *
 * The element is a <dialog> opened via .showModal() so it enters the browser's
 * top-layer and stacks correctly when nested above other modal dialogs (Edit
 * Block dialog → Shortcode Builder dialog → FL Selector dialog).
 *
 * The browser auto-manages: focus on open, inert background, Escape to close,
 * and the ::backdrop pseudo-element. No fl-x-trap needed.
 *
 * Browser UA stylesheet adds these defaults to any open <dialog>:
 *   position: absolute; margin: auto; width: fit-content; height: fit-content;
 *   border: solid; padding: 1em; background-color: Canvas; color: CanvasText;
 * We neutralize them so the modal keeps its full-viewport flex layout.
 *
 * For `display`, normal author rules outrank normal UA rules regardless of
 * specificity - the UA's `dialog:not([open]) { display: none }` LOSES to our
 * `.anwp-x-modal { display: flex }`. We add an explicit author rule below.
 */
.anwp-x-modal[open] {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	padding: 50px 0 0 0;
	color: inherit;
}

.anwp-x-modal:not([open]) {
	display: none;
}

/* Hide the dialog's auto-backdrop - the dialog itself has the dark+blur bg. */
.anwp-x-modal::backdrop {
	background: transparent;
}

.anwp-x-modal__wrapper {
	max-width: 800px;
	width: 100%;
	flex-direction: column;
	background-color: #fff;
	position: relative;
}

.anwp-x-modal__close-button {
	position: absolute;
	left: -15px;
	top: -15px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	background-color: #fff;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.anwp-x-modal__close-button span {
	font-size: 14px;
	line-height: 14px;
}

.anwp-x-modal__header {
	padding: 15px 20px;
	border-bottom: 1px solid #ddd;
	background-color: #f5f5f5;
}

.anwp-x-modal__header > h3 > span {
	text-transform: capitalize;
}

.anwp-x-modal__section {
	padding: 15px 20px;
	background-color: #fff;
	border-top: 1px solid #ddd;
}

.anwp-x-modal__section--secondary {
	background-color: #f5f5f5;
}

.anwp-x-modal__footer {
	display: flex;
	justify-content: flex-end;
	background-color: #f5f5f5;
	padding: 15px 20px;
	border-top: 1px solid #ddd;
}

.anwp-x-modal__spinner {
	float: none !important;
	margin: 30px auto;
	position: relative;
	top: -15px;
}

.anwp-x-modal__selected-wrapper {
	padding: 0;
	max-height: 150px;
	overflow: auto;
	display: flex;
	flex-wrap: wrap;
	margin-right: -3px;
	margin-left: -3px;
}

.anwp-x-modal__selected-item {
	padding: 2px 10px 2px 5px;
	border: 1px solid #d4d4d4;
	margin: 3px;
	background-color: #fff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	min-height: 30px;
	height: 30px;
}

.anwp-x-modal__selected-item button {
	margin-right: 10px !important;
	display: flex !important;
	align-items: center;
	border-radius: 6px !important;

	color: #890000 !important;
	font-size: 12px !important;
	line-height: 12px !important;
}

.anwp-x-selector {
	display: flex;
}

.anwp-x-selector button {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.anwp-x-modal__search-bar {
	display: flex;
	flex-wrap: wrap;
	padding: 5px 10px 10px;
}

.anwp-x-modal__bar-group {
	display: flex;
	flex-direction: column;
	margin: 10px;
}

.anwp-x-modal__bar-group label {
	margin-bottom: 2px;
	color: #111;
}

.anwp-x-modal__bar-group .ts-wrapper {
	min-height: 30px;
	min-width: 100px;
}

.anwp-x-modal__bar-group .ts-control > input {
	min-width: unset;
}

.anwp-x-modal__bar-group .ts-wrapper.single .ts-control {
	background-image: none;
}

.anwp-x-modal__bar-group  .ts-control {
	padding-top: 5px;
	padding-bottom: 5px;
}

.anwp-x-modal__bar-group .plugin-dropdown_input .dropdown-input {
	padding: 2px 8px;
}

#anwp-x-modal__field__season + .ts-wrapper {
	width: 110px;
}

#anwp-x-modal__field__league + .ts-wrapper {
	width: 220px;
}

#anwp-x-modal__field__country + .ts-wrapper {
	width: 180px;
}

#anwp-x-modal__field__club + .ts-wrapper, #anwp-x-modal__field__club-home + .ts-wrapper, #anwp-x-modal__field__club-away + .ts-wrapper {
	width: 180px;
}

.anwp-x-modal__bar-group .ts-wrapper.single .ts-control:not(.rtl)::after {
	left: 8px;
}

.anwp-x-modal__section-main {
	max-height: 300px;
	overflow-y: auto;
}

.anwp-x-modal__section-main table thead td,
.anwp-x-modal__section-main table tfoot td {
	white-space: nowrap;
}

.anwp-x-modal__section-main {
	border-top: 1px solid #ddd;
}

.anwp-x-modal__clear-filter {
	margin-right: auto;
	font-size: 14px;
	color: #85181d;
	cursor: pointer;
}

.anwp-x-modal__section-action {
	padding: 0 !important;
	width: 30px;
	height: 30px;
	border-radius: 8px !important;

	display: flex !important;
	justify-content: center;

	font-size: 24px !important;
	line-height: 24px !important;
}

.ts-control .anwp-d-flex {
	display: flex !important;
}

/* ///////////////////////////////////////////// */
/* Others */
.anwp-fl-help-link {
	border-radius: 50%;
	background-color: #ededed;
	color: #737373;
	font-size: 11px;
	width: 16px;
	height: 16px;
	text-align: center;
	text-decoration: none;
	line-height: 14px;
	border: 1px solid #eaeaea;
}
.anwp-fl-help-header-link {
	border-radius: 50%;
	background-color: #fff;
	color: #717171;
	font-size: 13px;
	width: 22px;
	height: 22px;
	text-align: center;
	text-decoration: none;
	line-height: 20px;
	border: 1px solid #d9d9d9;
	display: inline-block;
	margin-top: 4px;
}

body > .vs__dropdown-menu {
	z-index: 1000000 !important;
}

.anwp-fl-selector .dashicons {
	display: flex;
}

/* Update - 2024-09-29 - Temp Safari 18 fix //////////////////////////////////////////// */
:root #post-body #postbox-container-2 {
	clear: right;
}

/* Update - 2022-03-13 ///////////////////////////////////////////////////////////////// */
#sub-accordion-section-fl_club .customize-control-image img.attachment-thumb {
	width: 80px;
	height: 80px;
	object-fit: contain;
}

#custom_countries_repeat.cmb-repeatable-group .cmb-group-title {
	margin: 0;
}

#customize-control-anwp-fl-customizer-match_list-match_slim_bottom_line-stadium,
#customize-control-anwp-fl-customizer-match_list-match_slim_bottom_line-referee,
#customize-control-anwp-fl-customizer-match_list-match_slim_bottom_line-referee_assistants,
#customize-control-anwp-fl-customizer-match_list-match_slim_bottom_line-referee_fourth {
	margin-bottom: 0;
}

#customize-control-anwp-fl-customizer-match_list-match_slim_bottom_line-stadium .customize-inside-control-row,
#customize-control-anwp-fl-customizer-match_list-match_slim_bottom_line-referee .customize-inside-control-row,
#customize-control-anwp-fl-customizer-match_list-match_slim_bottom_line-referee_assistants .customize-inside-control-row,
#customize-control-anwp-fl-customizer-match_list-match_slim_bottom_line-referee_fourth .customize-inside-control-row {
	padding: 0;
}

/* Update - 2020-11-29 ///////////////////////////////////////////////////////////////// */
.d-none {
	display: none !important;
}

.anwp-mr-2 {
	margin-left: 0.5rem !important;
}

.anwp-ml-2 {
	margin-right: 0.5rem !important;
}

.anwp-mt-2 {
	margin-top: 0.5rem;
}


.anwp-d-flex {
	display: flex !important;
}

.anwp-d-flex--noimp {
	display: flex;
}

.anwp-flex-wrap--noimp {
	flex-wrap: wrap;
}

.anwp-items-start--noimp {
	align-items: flex-start;
}

.anwp-fl-selector--visible.anwp-d-flex {
	display: flex !important;
}

.anwp-align-items-center {
	align-items: center;
}

.anwp-flex-grow-1 {
	-ms-flex-positive: 1!important;
	flex-grow: 1!important;
}

.anwp-w-10 {
	width: 100px;
}

.anwp-w-80 {
	width: 80px;
}

.anwp-w-90 {
	width: 90px;
}

.anwp-w-100 {
	width: 100px;
}

.anwp-w-120 {
	width: 120px;
}

.anwp-w-150 {
	width: 150px;
}

/* Update - 2020-10-24 ///////////////////////////////////////////////////////////////// */
.anwp-fl-selector--visible {
	display: inline-block !important;
}

.wp-customizer .anwp-fl-selector--visible {
	margin-top: 3px;
}


.anwp-alert-warning {
	color: #856404;
	background-color: #fff3cd;
	padding: 5px 10px;
	border: 1px solid #fdcc38 !important;
}

/* Update - 2020-06-16 ///////////////////////////////////////////////////////////////// */
.anwp-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	stroke-width: 4px;
	stroke: #495057;
	fill: #fff;

	transition: stroke 0.15s ease-in-out;
}

.anwp-icon--octi {
	stroke: none;
	fill: #495057;
	stroke-width: 2px;
}

/* Update - 2020-02-09 ///////////////////////////////////////////////////////////////// */
.anwp-g-admin-list-input.hasDatepicker {
	width: 100px;
}

/* CMB2 notice */
.anwp-fl-cmb2-notice h3 {
	margin: 15px 0 5px;
	font-size: 1.2em;
}

.anwp-fl-cmb2-notice img {
	float: right;
	width: 95px;
	margin-left: 15px;
	margin-top: 15px;
	margin-bottom: 10px;
}

.anwp-fl-cmb2-notice img:first-child {
	margin-left: 10px;
}

.anwp-fl-cmb2-notice p {
	margin: 10px 0;
}

.anwp-fl-cmb2-notice p.anwp-notice-clear-both {
	clear: both;
	margin: 0 !important;
}

.anwp-fl-cmb2-notice a.button + a.button {
	margin-right: 5px;
}

/* //////////////////////////////////////////////////////////////////// */
.cmb-repeat-table .cmb-remove-row > .cmb-remove-row-button {
	min-height: 10px !important;
}

.anwp-shortcode-select2-dropdown {
	z-index: 105000 !important;
}

.anwp-metabox-tabs__control-item span {
	width: min-content !important;
	margin: auto;
}

.anwp-metabox-tabs__control-item {
	text-align: center;
}

.menu-top.toplevel_page_anwp-football-leagues {
	margin-top: 11px;
}


.anwp-line-height-1 {
	line-height: 1 !important;
}

.anwp-line-height-1-2 {
	line-height: 1.2 !important;
}

.anwp-line-height-1-4 {
	line-height: 1.4 !important;
}

.anwp-line-height-1-6 {
	line-height: 1.6 !important;
}

.anwp-min-height-unset {
	min-height: unset !important;
}

.anwp-outline-none {
	outline: none !important;
}

.anwp-box-shadow-none {
	box-shadow: none !important;
}

body.wp-admin.post-type-anwp_competition table.wp-list-table.fixed,
body.wp-admin.post-type-anwp_club table.wp-list-table.fixed,
body.wp-admin.post-type-anwp_match table.wp-list-table.fixed {
	table-layout: auto;
}

body.wp-admin.post-type-anwp_club table.wp-list-table.fixed #anwpfl_club_logo,
body.wp-admin.post-type-anwp_club table.wp-list-table.fixed #club_id
{
	width: 70px;
}

body.wp-admin.post-type-anwp_competition table.wp-list-table tr.type-anwp_competition.status-stage_secondary td.has-row-actions div.row-actions {
	display: none;
}

.anwp-g-label-like {
	text-transform: uppercase;
	color: #999;
	font-weight: normal;
	font-size: 12px;
}

.anwp-g-float-left {
	float: right;
}

.anwp-g-admin-list-input {
	line-height: 28px;
	height: 28px;
	vertical-align: middle;
}

.anwp-admin-competition-icon {
	width: 16px;
	height: 16px;
	display: inline-block;
	position: relative;
	top: 3px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAuNDc5IDEuMDY0IDE5LjA5OSAxOC45MzYiPjxwYXRoIGZpbGw9IiNhMGE1YWEiIGQ9Ik02IDE5SDV2MWgxMHYtMWgtMXYtMWgtMS4xMzVhNy4xNjQgNy4xNjQgMCAwIDEtLjc2NS0xLjUgMTAuMTkgMTAuMTkgMCAwIDEtLjU1My0yLjQ3MWMxLjc4LS42MzkgMy4xMjMtMi4zNDcgMy4zOTEtNC40MzcgMS40NjctLjgyOCAzLjIyMi0yLjA2NyAzLjkwNi0zLjMwNS45OC0xLjY1Ny45OC0zLjMxNCAwLTQuMTQzLS45NTUtLjgwNy0yLjg0MS0uODI4LTMuODQ0LjcwM1YxLjA2NEg1LjAxNnYxLjcxOWMtMS4wMTQtMS40NjYtMi44Ni0xLjQzNC0zLjgwMS0uNjM5LS45ODEuODI5LS45ODEgMi40ODYgMCA0LjE0My42NzQgMS4yMjEgMi4zODkgMi40NDEgMy44NDIgMy4yNjguMjU3IDIuMTA3IDEuNjA2IDMuODMxIDMuMzk2IDQuNDc0QTEwLjE5IDEwLjE5IDAgMCAxIDcuOSAxNi41YTcuMTY0IDcuMTY0IDAgMCAxLS43NjUgMS41SDZ2MXoiLz48L3N2Zz4=) !important;
}

.anwp-admin-competition-icon + strong {
	border-bottom: 1px dotted #aaa;
}

.anwp-admin-table-scores {
	background-color: #777;
	padding: 5px;
	color: #fff;
	display: inline-block;
	line-height: 1.1;
	font-weight: 600;
	margin-left: 10px;
	margin-bottom: 5px;
	min-width: 15px;
	text-align: center;
}

.anwp-text-nowrap {
	white-space: nowrap !important;
}

.anwp-g-stage-wrap {
	margin-top: 8px;
	line-height: 1.3;
}

body.wp-admin.edit-php.post-type-anwp_competition .fixed .column-tags {
	width: 1%;
}

.anwp-global-info {
	color: #0c5460;
	background-color: #d1ecf1;
	margin: 15px 0;

	position: relative;
	padding: 0.75rem 1.25rem;
	border: #bee5eb 1px solid;
	border-radius: 0;

	width: 95%;
	box-sizing: border-box;
}

.anwp-admin-table-club-logo {
	max-height: 40px !important;
	width: auto !important;
}

.anwp-term-metabox-row.mb-large {
	margin-bottom: 30px;
}

.anwp-term-metabox-row.mb-small {
	margin-bottom: 10px;
}

.anwp-term-metabox-row .cmb2-media-item {
	margin-top: 10px;
}

.anwp-term-metabox-row .cmb2-media-item img {
	height: 100px;
	width: auto !important;
}

/* Handle admin notices */
.anwp-visible-after-header {
	display: none;
}

h1 ~ .anwp-visible-after-header {
	display: block;
}

/* TinyMCE Button Icon */
.mce-btn .anwpfl-button-icon {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAATlBMVEUAAABQUFBSUlJQUFBVVVVUVFRTU1NSUlJVVVVVVVVUVFRUVFRUVFRUVFRTU1NTU1NVVVVTU1NVVVVUVFRUVFRUVFRTU1NVVVVUVFRUVFRAXnBrAAAAGXRSTlMAEB8gMEBQYGBvcH+Aj5Cfn6CvsL/P39/vosrVfwAAAM1JREFUeAFFz2FyhCAMQOGXImjFpbsUArn/RYuZne434w/fYAw4Oauaad35SLMdYdoy/vNjRBA1l3G5C8R5xXP10h8sxxBIY2O5OqIJ0PHsat6QKcT1HL8+bMfVBO2kFrsV3GtnHaM/PXZv39MyYWDdXNsD2XfKhpV76xHSa6q5y9CvTVfzhbyNrVN3wnwv5PG5fnQ26BHn38d1TGaknLhmSxpAGhJ9JrmFINHvQek/NvYttCYg/cJd5u63qIW3Qz2Go83Ex1G7mdZTuP0BS4oRV3QnQSgAAAAASUVORK5CYII=);
}

.mce-anwpfl-small small {
	font-size: 11px;
	color: #777;
}

.mce-anwpfl-popup .mce-widget.mce-btn.mce-listbox > button {
	overflow: hidden;
}

.mce-anwpfl-popup {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 100%;
}

body.wp-admin.widgets-php div.widget[id*="_anwpfl-widget-"] .widget-title > h3 {
	position: relative;
	padding-right: 34px;
}

body.wp-admin.widgets-php div.widget[id*="_anwpfl-widget-"] .widget-title > h3:before {
	content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="rgb(100,100,100)" d="M0 9.984c0 5.519 4.481 10 10 10s10-4.481 10-10c0-5.52-4.481-10-10-10s-10 4.48-10 10zm7.53-.219l-2.318 2.106 1.045 3.951 3.165 1.097 3.102-2.884-1.189-2.935L7.53 9.765zM3.199 4.091a8.987 8.987 0 0 1 6.184-3.087l.145.771-3.421 3.601-2.167.122-.741-1.407zm4.466 4.661L6.95 5.939l3.189-3.355c.69.059 1.515.275 2.353.646.381.169.737.357 1.06.557l.336 4.472-2.181 1.911-4.042-1.418zM2.529 4.966A8.949 8.949 0 0 0 1.001 9.86l1.128-.335.883-3.643-.483-.916zM1.045 10.89a8.99 8.99 0 0 0 3.473 6.229l.768-1.06-1.081-4.083-1.694-1.521-1.466.435zm9.161 8.091a8.975 8.975 0 0 0 6.404-2.893l-.845-1.485-2.387.004-3.34 3.104.168 1.27zm8.701-10.296a8.985 8.985 0 0 0-2.935-5.432l-1.407.668.315 4.195 2.135 1.662 1.892-1.093zm.091 1.103l.002.196a8.96 8.96 0 0 1-1.71 5.276l-.712-1.25.997-3.401 1.423-.821z" fill-rule="evenodd"/></svg>');
	display: inline-block;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 14px;
	right: 10px;
}

body.wp-admin.widgets-php div.widget[id*="_anwpfl-widget-premium-"] .widget-title > h3:before {
	content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="rgb(201,95,5)" d="M0 9.984c0 5.519 4.481 10 10 10s10-4.481 10-10c0-5.52-4.481-10-10-10s-10 4.48-10 10zm7.53-.219l-2.318 2.106 1.045 3.951 3.165 1.097 3.102-2.884-1.189-2.935L7.53 9.765zM3.199 4.091a8.987 8.987 0 0 1 6.184-3.087l.145.771-3.421 3.601-2.167.122-.741-1.407zm4.466 4.661L6.95 5.939l3.189-3.355c.69.059 1.515.275 2.353.646.381.169.737.357 1.06.557l.336 4.472-2.181 1.911-4.042-1.418zM2.529 4.966A8.949 8.949 0 0 0 1.001 9.86l1.128-.335.883-3.643-.483-.916zM1.045 10.89a8.99 8.99 0 0 0 3.473 6.229l.768-1.06-1.081-4.083-1.694-1.521-1.466.435zm9.161 8.091a8.975 8.975 0 0 0 6.404-2.893l-.845-1.485-2.387.004-3.34 3.104.168 1.27zm8.701-10.296a8.985 8.985 0 0 0-2.935-5.432l-1.407.668.315 4.195 2.135 1.662 1.892-1.093zm.091 1.103l.002.196a8.96 8.96 0 0 1-1.71 5.276l-.712-1.25.997-3.401 1.423-.821z" fill-rule="evenodd"/></svg>');
}

.anwp-option-desc {
	display: block;
	font-size: 85%;
	color: #777;
	margin-top: 3px;
	font-weight: 400;
}

/*--------------------------------------------------------------
# Select2
--------------------------------------------------------------*/
.anwp-b-wrap .select2-container--default.select2-container--focus .select2-selection--multiple, .anwp-b-wrap .select2-container--default .select2-selection--multiple,
.anwp-b-wrap .select2-container--default.select2-container--focus .select2-selection--single, .anwp-b-wrap .select2-container--default .select2-selection--single {
	background-color: #fff;
}

.select2-container li {
	margin-bottom: 0;
}

/* Tom-Select dropdown appended to body for z-index fix */
body > .ts-dropdown {
	z-index: 100110 !important;
}

/*--------------------------------------------------------------
# Shortcode Dialog (native <dialog> with manual backdrop)
--------------------------------------------------------------*/
#anwpfl-shortcode-dialog-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100040;
	background: rgba(0, 0, 0, 0.5);
}

#anwpfl-shortcode-dialog-backdrop[hidden] {
	display: none;
}

#anwpfl-shortcode-dialog {
	position: fixed;
	inset: 0;
	margin: auto;
	z-index: 100050;
	max-width: 700px;
	width: 90vw;
	max-height: 80vh;
	height: fit-content;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	padding: 0;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.anwpfl-shortcode-dialog__header {
	display: flex;
	align-items: center;
	padding: 15px 20px;
	border-bottom: 1px solid #ddd;
	background-color: #f5f5f5;
}

.anwpfl-shortcode-dialog__header label {
	margin-left: 8px;
	white-space: nowrap;
}

.anwpfl-shortcode-dialog__header select {
	flex-grow: 1;
}

.anwpfl-shortcode-dialog__header .spinner {
	margin-right: 8px;
}

.anwpfl-shortcode-dialog__content {
	padding: 10px 20px;
	max-height: 400px;
	overflow-y: auto;
}

.anwpfl-shortcode-dialog__footer {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 15px 20px;
	background-color: #f5f5f5;
	border-top: 1px solid #ddd;
}

/*--------------------------------------------------------------
# Competition Clone Dialog
--------------------------------------------------------------*/
#anwp-fl-competition-clone-dialog {
	max-width: 500px;
	width: 90vw;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	padding: 0;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

#anwp-fl-competition-clone-dialog::backdrop,
#anwp-fl-builder-shortcode-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

#anwp-fl-builder-shortcode-dialog {
	max-width: 700px;
	width: 90vw;
	max-height: 80vh;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	padding: 0;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.anwp-shortcode-docs-link {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	border: 1px solid #9ca3af;
	background-color: #eff6ff;

	padding: 0.625rem 0.75rem;
	margin-bottom: 1rem;
}

.anwp-shortcode-docs-link b {
	margin: 0 0.5rem;
	color: #1e40af;
}

.anwp-shortcode-docs-link .anwp-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	stroke-width: 0;
	stroke: none;
	fill: #2563eb;
}

/*--------------------------------------------------------------
# Shortcode Builder - Collapsible Sections
--------------------------------------------------------------*/
.fl-section-toggle {
	transition: background-color 0.15s ease;
	border-radius: 3px;
	margin-right: -5px;
	padding-right: 5px !important;
}

.fl-section-toggle:hover {
	color: #2271b1;
	background-color: #f0f6fc;
}

.fl-section-toggle:hover .dashicons {
	color: #2271b1;
}

.fl-section-toggle strong {
	font-weight: 600;
}

/* Section content visual grouping */
.fl-section > div[fl-x-show] {
	border-right: 3px solid #e5e7eb;
	padding-right: 15px;
	margin-right: 2px;
}

/*--------------------------------------------------------------
# Shortcode Builder - Output Styling
--------------------------------------------------------------*/
.anwp-shortcode-output {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	word-break: break-word;
	white-space: pre-wrap;
}

/*--------------------------------------------------------------
# Shortcode Builder - Form Field Styling
--------------------------------------------------------------*/
.fl-shortcode-fields input[type="text"].fl-shortcode-attr,
.fl-shortcode-fields input[type="number"].fl-shortcode-attr {
	max-width: 400px;
}

.fl-shortcode-fields input[type="number"].fl-shortcode-attr {
	max-width: 140px;
}

.fl-shortcode-fields select.fl-shortcode-attr {
	max-width: 400px;
}

.fl-shortcode-fields .fl-shortcode-attr--small {
	max-width: 140px;
}

.fl-shortcode-fields .fl-shortcode-select2 {
	max-width: 100%;
}

/*--------------------------------------------------------------
# Shortcode Builder - Section Cards (Vue Match Edit Pattern)
--------------------------------------------------------------*/
/* Section wrapper - border color set here (not via anwp- utilities) for TinyMCE modal compatibility */
.fl-section-card {
	margin-bottom: 1rem;
	border: 1px solid #9ca3af;
}

/* Header button reset + layout */
.fl-section-card__header {
	display: flex;
	align-items: center;
	padding: 0.5rem 0.75rem;
	cursor: pointer;
	border: none;
	border-bottom: 1px solid #9ca3af;
	text-align: right;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	transition: background-color 0.15s ease;
}

/* Section icon (dashicon in header) */
.fl-section-card__icon {
	font-size: 16px;
	width: 16px;
	height: 16px;
	margin-left: 0.5rem;
	color: #9ca3af;
}

/* Collapse toggle arrow (dashicon in header) */
.fl-section-card__toggle {
	font-size: 14px;
	width: 14px;
	height: 14px;
	margin-right: auto;
}

.fl-section-card__header:hover {
	background-color: #f0f6fc !important;
}

.fl-section-card__content {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	background: #fff;
	padding: 1rem 0.5rem;
}

.fl-section-card__header:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px #2271b1;
}

/* Field wrapper - vertical stack, constrain width, align to bottom of row */
.fl-shortcode-fields .fl-field {
	display: flex;
	flex-direction: column;
	margin: 0.5rem;
	margin-bottom: 1rem;
	max-width: 220px !important;
	align-self: flex-end;
}

/* Field input width classes (applied to inputs) */
.fl-shortcode-fields .fl-shortcode-attr--narrow {
	width: 120px !important;
}

.fl-shortcode-fields .fl-shortcode-attr--medium {
	min-width: 180px;
	max-width: 300px;
}

.fl-shortcode-fields .fl-shortcode-attr--wide {
	width: 400px;
}

.fl-shortcode-fields .fl-shortcode-attr--selector {
	width: 150px !important;
}

.fl-shortcode-fields .fl-shortcode-attr--multiselect {
	width: 400px !important;
}

/*
 * Icon-in-button helpers (CPT screens, TinyMCE shortcode dialog, list-table filters).
 *
 * Mirrors the .fl-btn-icon rule in scss/core/admin/modules/_buttons.scss
 * but lives here so it's available on every admin screen (global.css loads
 * everywhere, styles.css only on plugin pages).
 *
 * WP 7.0 background:
 *   wp-includes/css/buttons.css ships per-size dashicon line-heights:
 *     .wp-core-ui .button .dashicons          { line-height: 1.9; vertical-align: top; }
 *     .wp-core-ui .button.button-small .dashicons { line-height: 1.1; }
 *   To beat that with inline-flex centering we prefix with .wp-core-ui .button
 *   (specificity 0,4,0 = matches WP, source order wins) and explicitly reset
 *   line-height / vertical-align on the dashicon span.
 */
.wp-core-ui .button.fl-btn-icon,
.wp-core-ui .button.fl-field__selector-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	line-height: 1;
}

.wp-core-ui .button.fl-btn-icon .dashicons,
.wp-core-ui .button.fl-field__selector-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 1;
	vertical-align: baseline;
}

/* .button-small is 24px tall in WP 7.0 - drop icon to 16px */
.wp-core-ui .button.fl-btn-icon.button-small .dashicons,
.wp-core-ui .button.fl-field__selector-btn.button-small .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Selector open button */
.fl-field__selector-btn {
	margin-right: 0.25rem;
}

/* Field wrapper override for wide inputs */
.fl-shortcode-fields .fl-field:has(.fl-shortcode-attr--multiselect),
.fl-shortcode-fields .fl-field:has(.fl-shortcode-attr--wide) {
	max-width: 420px !important;
}

/* Field label - compact with 2-line limit */
.fl-shortcode-fields .fl-field label {
	margin-bottom: 4px;
	line-height: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Section descriptions footer */
.fl-section-descriptions {
	width: 100%;
	margin-top: 0.75rem;
	padding: 0.75rem 0.5rem 0;
	border-top: 1px solid #9ca3af;
	font-size: 12px;
	line-height: 1.4;
	color: #6b7280;
}

.fl-section-description + .fl-section-description {
	margin-top: 3px;
}

.fl-section-description strong {
	color: #374151;
}

/*--------------------------------------------------------------
# Shortcode Builder - Two-Column Layout
--------------------------------------------------------------*/
.fl-shortcode-builder {
	display: flex;
	gap: 1.5rem;
}

.fl-shortcode-builder__form {
	max-width: 800px;
	flex: 1 1 auto;
	min-width: 0;
}

.fl-shortcode-builder__preview {
	flex-shrink: 0;
}

.fl-preview-panel {
	position: sticky;
	top: 46px; /* Below WP admin bar */
	max-height: calc(100vh - 78px);
	overflow: auto;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 1100px) {
	.fl-shortcode-builder {
		flex-direction: column;
	}
	.fl-shortcode-builder__preview {
		width: 100% !important; /* Override Alpine binding on mobile */
	}
	.fl-preview-panel {
		position: static;
		max-height: none;
	}
}

/* Builder dialog: dialog is max-width 700px, two-column layout doesn't fit.
   Force stacking regardless of viewport width. */
#anwp-fl-builder-shortcode-dialog .fl-shortcode-builder {
	flex-direction: column;
}
#anwp-fl-builder-shortcode-dialog .fl-shortcode-builder__preview {
	width: 100% !important; /* Override Alpine binding */
}
#anwp-fl-builder-shortcode-dialog .fl-preview-panel {
	position: static;
	max-height: none;
}

/*--------------------------------------------------------------
# Shortcode Builder - Preview Panel
--------------------------------------------------------------*/
.fl-preview-iframe-wrap {
	position: relative;
	min-height: 200px;
}

.fl-preview-loading-overlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

/* Spin animation for refresh icon */
@keyframes anwp-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(-360deg); }
}

.anwp-spin {
	animation: anwp-spin 1s linear infinite;
}

/* Fix dashicon alignment in buttons */
.fl-preview-panel button .dashicons {
	vertical-align: middle;
	margin-top: -2px;
}

/*--------------------------------------------------------------
# Preview Width Toggle
--------------------------------------------------------------*/
.fl-preview-width-toggle {
	display: inline-flex;
	gap: 0;
}

.fl-preview-width-toggle .button {
	border-radius: 0;
	margin-right: -1px;
	min-width: 50px;
}

.fl-preview-width-toggle .button:first-child {
	border-radius: 0 3px 3px 0;
	margin-right: 0;
}

.fl-preview-width-toggle .button:last-child {
	border-radius: 3px 0 0 3px;
}
