/**
 * Legacy Shortcodes Ultimate — minimal styles
 *
 * Replaces the full SU plugin CSS (~2600 lines) with just what we need.
 * Same class names for compatibility.
 *
 * @package MyChooz_Aesthetic
 */

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.su-u-clearfix::after { content: ''; display: table; clear: both; }

/* ==========================================================================
   LIST [su_list]
   ========================================================================== */

.su-list { margin-bottom: 1.5em; }
.su-list,
.su-list ul { position: relative; margin: 0; padding: 0 !important; list-style: none; }
.su-list ul li {
	position: relative;
	display: block;
	margin: 0;
	padding: 10px 0 10px 1.5em;
	list-style-type: none;
	line-height: 1.6;
}
/* Icon via <i class="sui"> element */
.su-list .su-list-icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	line-height: 1;
	width: 1.2em;
	text-align: center;
}

/* When su_list wraps <p> instead of <ul><li> */
.su-list > p {
	position: relative;
	padding: 10px 0 10px 1.5em;
	margin-top: 0;
	margin-bottom: 0;
}

/* Hide empty <p> tags that create extra spacing */
.su-list p:empty {
	display: none;
	margin: 0;
	padding: 0;
}
.su-list > p > .su-list-icon {
	position: absolute;
	left: 0;
	top: 0.15em;
	font-size: 14px;
	width: 1.2em;
	text-align: center;
}

/* Smileys inside SU list — don't treat as icon */
.su-list ul li > img.wp-smiley {
	position: static !important;
	display: inline !important;
	vertical-align: text-bottom;
	margin: 0 2px;
	height: 1em;
	width: 1em;
}

/* ==========================================================================
   ROW / COLUMN [su_row] [su_column]
   ========================================================================== */

.su-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 1.5em;
}
.su-row::after { content: ''; display: table; clear: both; }
.su-row > p { display: none; }

.su-column { box-sizing: border-box; float: none !important; }
.su-column-inner { padding: 0; }
.su-column-inner img { width: 100%; height: auto; }

.su-column-size-1-1 { width: 100%; }
.su-column-size-1-2 { width: calc(50% - 8px); }
.su-column-size-1-3 { width: calc(33.33% - 11px); }
.su-column-size-2-3 { width: calc(66.66% - 5px); }
.su-column-size-1-4 { width: calc(25% - 12px); }
.su-column-size-3-4 { width: calc(75% - 4px); }

@media (max-width: 768px) {
	.su-row { flex-direction: column; gap: 8px; }
	.su-column { width: 100% !important; }
}

/* ==========================================================================
   SERVICE [su_service]
   ========================================================================== */

.su-service { margin-bottom: 1em; }
.su-service-title {
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 4px;
}
.su-service-content {
	font-size: 14px;
	color: var(--mca-muted, #6b7280);
}

/* ==========================================================================
   SPOILER [su_spoiler]
   ========================================================================== */

.su-spoiler {
	margin-bottom: 8px;
	border: 1px solid var(--mca-border, #e5e7eb);
	border-radius: 8px;
	overflow: hidden;
	background: var(--mca-surface, #fff);
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.su-spoiler-title {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background 0.15s ease;
	user-select: none;
}
.su-spoiler-title:hover { background: #f9fafb; }

.su-spoiler-icon {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	border: 1.5px solid var(--mca-border, #e5e7eb);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
	font-size: 18px;
	font-weight: 300;
	line-height: 1;
	color: var(--mca-muted, #6b7280);
}
.su-spoiler-icon::before {
	content: '+';
}
.su-spoiler-title:hover .su-spoiler-icon {
	border-color: var(--mca-primary, #e71d1d);
	color: var(--mca-primary, #e71d1d);
}
.su-spoiler:not(.su-spoiler-closed) .su-spoiler-icon {
	background: var(--mca-primary, #e71d1d);
	border-color: var(--mca-primary, #e71d1d);
	color: #fff;
}
.su-spoiler:not(.su-spoiler-closed) .su-spoiler-icon::before {
	content: '−';
}

.su-spoiler-content {
	padding: 0 16px 16px;
	border-top: 1px solid var(--mca-border, #e5e7eb);
	padding-top: 16px;
}

.su-spoiler-closed > .su-spoiler-content {
	display: none;
}

/* Fancy style — same as default in v1 */
.su-spoiler-style-fancy {
	border: 1px solid var(--mca-border, #e5e7eb);
	background: var(--mca-surface, #fff);
	border-radius: 8px;
}
.su-spoiler-style-fancy > .su-spoiler-title {
	background: transparent;
}
.su-spoiler-style-fancy > .su-spoiler-content {
	border-top: 1px solid var(--mca-border, #e5e7eb);
}

/* ==========================================================================
   ACCORDION [su_accordion]
   ========================================================================== */

.su-accordion { margin-bottom: 1.5em; }
.su-accordion .su-spoiler { margin-bottom: 0; border-radius: 0; }
.su-accordion .su-spoiler:first-child { border-radius: var(--mca-radius-sm, 6px) var(--mca-radius-sm, 6px) 0 0; }
.su-accordion .su-spoiler:last-child { border-radius: 0 0 var(--mca-radius-sm, 6px) var(--mca-radius-sm, 6px); }
.su-accordion .su-spoiler + .su-spoiler { border-top: none; }

/* ==========================================================================
   TABS [su_tabs]
   ========================================================================== */

.su-tabs { margin-bottom: 1.5em; }

.su-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-bottom: 2px solid var(--mca-border, #e5e7eb);
	margin-bottom: 0;
}

.su-tabs-nav span {
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--mca-muted, #6b7280);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	white-space: nowrap;
	transition: color 0.15s, border-color 0.15s;
	user-select: none;
}
.su-tabs-nav span:hover { color: var(--mca-text, #1a1a1a); }
.su-tabs-nav span.su-tabs-current {
	color: var(--mca-text, #1a1a1a);
	border-bottom-color: var(--mca-primary, #e71d1d);
	font-weight: 600;
}

.su-tabs-pane {
	display: none;
	padding: 16px 0;
}
.su-tabs-pane.su-tabs-pane-open,
.su-tabs-pane-open {
	display: block;
}

@media (max-width: 600px) {
	.su-tabs-nav span { padding: 8px 12px; font-size: 13px; }
}

/* ==========================================================================
   YOUTUBE [su_youtube]
   ========================================================================== */

.su-youtube { margin-bottom: 1.5em; }
.su-u-responsive-media-yes {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.su-u-responsive-media-yes iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   BUTTON [su_button]
   ========================================================================== */

.su-button {
	display: inline-block;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.su-button:hover { opacity: 0.85; }
.su-button span {
	display: inline-block;
	line-height: 1.3;
}
.su-button-center { text-align: center; margin-bottom: 1em; }

/* ==========================================================================
   QUOTE [su_quote]
   ========================================================================== */

.su-quote {
	margin-bottom: 1.5em;
	padding: 20px 24px;
	background: #f9fafb;
	border-left: 4px solid var(--mca-primary, #e71d1d);
	border-radius: 0 var(--mca-radius-sm, 6px) var(--mca-radius-sm, 6px) 0;
}
.su-quote-inner { font-style: italic; line-height: 1.6; }
.su-quote-cite {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	font-style: normal;
	color: var(--mca-muted, #6b7280);
}
.su-quote-cite::before { content: '— '; }
.su-quote-cite a { color: inherit; }

/* ==========================================================================
   BOX [su_box]
   ========================================================================== */

.su-box {
	margin-bottom: 1.5em;
	border: 2px solid #333;
	overflow: hidden;
}
.su-box-title {
	padding: 10px 16px;
	font-weight: 600;
	font-size: 15px;
}
.su-box-content {
	padding: 16px;
}

/* ==========================================================================
   TOOLTIP [su_tooltip]
   ========================================================================== */

.su-tooltip-button {
	border-bottom: 1px dotted var(--mca-muted, #6b7280);
	cursor: help;
}