/**
 * Authyo EVF — How to Use Tab Styles
 * @since 1.0.1
 */

/* Override the admin.css grid that forces #howto tab into 2 columns */
#howto.authyo-everest-forms-tab.active {
	display: block !important;
	grid-template-columns: none !important;
}

.authyo-evf-howto-wrap { max-width: 100%; margin-top: 0; }

/* Video card */
.authyo-evf-howto-video-card { background: #f8f9fa; border: 1px solid #dcdcde; border-radius: 8px; padding: 20px; margin-bottom: 24px; max-width: 75%; }

.authyo-evf-howto-video-header { display: flex; align-items: center; gap: 15px; margin-bottom: 16px; }
.authyo-evf-howto-video-header .dashicons { font-size: 28px; width: 28px; height: 28px; color: #2271b1; flex-shrink: 0; }
.authyo-evf-howto-video-header h3 { margin: 0 0 4px 0; font-size: 16px; color: #1d2327; }
.authyo-evf-howto-video-header p  { margin: 0; color: #646970; font-size: 13px; }

.authyo-evf-howto-video-wrapper {
	position: relative; padding-bottom: 42%; height: 0; overflow: hidden;
	max-width: 75%; background: #000; border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.authyo-evf-howto-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Info grid — 2 columns side by side */
.authyo-evf-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0 0 28px; }

.authyo-evf-info-card { background: #fff; border: 1px solid #dcdcde; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.05); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; }
.authyo-evf-info-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); transform: translateY(-2px); }

.authyo-evf-info-header { background: linear-gradient(135deg,#f6f7f7 0%,#ffffff 100%); border-bottom: 1px solid #e5e5e5; padding: 16px 20px; }
.authyo-evf-info-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #1d2327; }

.authyo-evf-info-body { padding: 20px; flex: 1; }
.authyo-evf-info-body ol, .authyo-evf-info-body ul { margin: 0; padding-left: 20px; }
.authyo-evf-info-body li { margin-bottom: 10px; font-size: 14px; line-height: 1.6; color: #2c3338; }
.authyo-evf-info-body li:last-child { margin-bottom: 0; }
.authyo-evf-info-body a { color: #2271b1; text-decoration: none; }
.authyo-evf-info-body a:hover { text-decoration: underline; }
.authyo-evf-info-body strong { font-weight: 600; color: #1d2327; }

@media screen and (max-width: 782px) {
	.authyo-evf-info-grid { grid-template-columns: 1fr; gap: 16px; }
	.authyo-evf-howto-video-card,
	.authyo-evf-howto-video-wrapper { max-width: 100%; }
	.authyo-evf-howto-video-wrapper { padding-bottom: 56%; }
	.authyo-evf-howto-video-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}