/* ==========================================================================
   ShortsPro Core — CSS cốt lõi cho player + grid + tương tác
   Theme (ShortsPro Theme) mở rộng thêm phần layout tổng thể.
   ========================================================================== */

:root{
	--sp-bg: #0F0F14;
	--sp-surface: #1C1C24;
	--sp-surface-2: #22222C;
	--sp-text: #F5F5F7;
	--sp-text-muted: #9A9AA5;
	--sp-accent: #F5387D;
	--sp-accent-2: #FF6B6B;
	--sp-radius: 18px;
	--sp-radius-sm: 10px;
}

.shortspro-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
	gap:16px;
}

.shortspro-card{
	display:block;
	background:var(--sp-surface);
	border-radius:var(--sp-radius);
	overflow:hidden;
	text-decoration:none;
	color:var(--sp-text);
	transition:transform .15s ease;
}
.shortspro-card:hover{ transform:translateY(-3px); }

.shortspro-card__thumb{ position:relative; aspect-ratio:9/16; background:#000; }
.shortspro-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.shortspro-card__thumb-placeholder{ width:100%; height:100%; background:linear-gradient(135deg,var(--sp-surface-2),var(--sp-surface)); }

.shortspro-card__views{
	position:absolute; left:8px; bottom:8px;
	display:flex; align-items:center; gap:4px;
	background:rgba(0,0,0,.55); color:#fff;
	padding:3px 8px; border-radius:999px; font-size:12px;
}

.shortspro-card__body{ padding:10px 12px; }
.shortspro-card__title{ font-size:14px; font-weight:600; margin:0 0 6px; line-height:1.3; }
.shortspro-card__tags{ margin:0 0 8px; font-size:12px; color:var(--sp-accent); display:flex; gap:6px; }
.shortspro-card__author{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--sp-text-muted); }
.shortspro-card__author img{ width:20px; height:20px; border-radius:50%; object-fit:cover; }

/* ---------- Universal player ---------- */
.shortspro-player{
	position:relative;
	width:100%;
	max-width:420px;
	aspect-ratio:9/16;
	margin:0 auto;
	background:#000;
	border-radius:var(--sp-radius);
	overflow:hidden;
	scroll-snap-align:start;
}

.shortspro-player__media{ position:absolute; inset:0; }
.shortspro-player__video,
.shortspro-player__embed iframe{
	width:100%; height:100%; object-fit:cover; border:0; display:block;
}
.shortspro-player__embed{ width:100%; height:100%; }

.shortspro-player__playbtn{
	position:absolute; inset:0; width:100%; height:100%;
	background:transparent; border:0; cursor:pointer;
}

.shortspro-player__empty{
	display:flex; align-items:center; justify-content:center;
	height:100%; color:var(--sp-text-muted); font-size:14px;
}

.shortspro-player__side{
	position:absolute; right:10px; bottom:90px; z-index:5;
	display:flex; flex-direction:column; align-items:center; gap:18px;
}
.sp-action{
	background:none; border:0; color:#fff; display:flex; flex-direction:column; align-items:center;
	gap:4px; font-size:12px; cursor:pointer; text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.sp-action .sp-icon{ font-size:26px; line-height:1; }
.sp-action.is-active{ color:var(--sp-accent); }
.sp-action.sp-like.is-active .sp-icon{ transform:scale(1.15); }

.shortspro-player__info{
	position:absolute; left:0; right:64px; bottom:16px; z-index:4;
	padding:0 14px; color:#fff;
}
.sp-author{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.sp-author img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
.sp-author a{ color:#fff; font-weight:600; text-decoration:none; }
.sp-follow{
	margin-left:6px; background:var(--sp-accent); color:#fff; border:0;
	border-radius:999px; width:22px; height:22px; font-size:14px; cursor:pointer;
}
.sp-follow.is-following{ width:auto; padding:2px 10px; font-size:11px; }
.sp-desc{ margin:0 0 6px; font-size:14px; }
.sp-tags a{ color:#fff; opacity:.9; text-decoration:none; margin-right:8px; font-size:13px; }

/* Feed dọc kiểu TikTok: cuộn snap từng video toàn màn hình */
.shortspro-feed-vertical{
	height:100vh; overflow-y:scroll; scroll-snap-type:y mandatory;
}
.shortspro-feed-vertical .shortspro-player{
	max-width:100%; height:100vh; aspect-ratio:auto; border-radius:0;
}

@media (max-width:600px){
	.shortspro-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Modal dùng chung (playlist, đăng nhập/đăng ký) — nạp sẵn ở đây để
   hoạt động cả khi theme không phải ShortsPro Theme (vd. dùng shortcode). ---------- */
.sp-modal-overlay{
	position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9999;
	display:flex; align-items:center; justify-content:center; padding:20px;
}
.sp-modal{ background:var(--sp-surface); border-radius:16px; padding:20px; width:100%; max-width:360px; color:var(--sp-text); }
.sp-modal h3{ margin-top:0; }
.sp-modal__close{ background:none; border:0; color:var(--sp-text-muted); cursor:pointer; }

.sp-auth-modal{ max-width:380px; position:relative; }
.sp-auth-modal .sp-modal__close{ position:absolute; top:10px; right:10px; font-size:20px; line-height:1; }
.sp-auth-modal__tabs{ display:flex; gap:8px; margin-bottom:18px; }
.sp-auth-modal__tabs button{
	flex:1; background:var(--sp-surface-2); border:0; color:var(--sp-text-muted);
	border-radius:10px; padding:9px 0; cursor:pointer; font-weight:600; font-size:13px;
}
.sp-auth-modal__tabs button.is-active{ background:var(--sp-accent); color:#fff; }

.sp-auth-form{ display:flex; flex-direction:column; gap:12px; }
.sp-auth-form label{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--sp-text-muted); }
.sp-auth-form input[type=text], .sp-auth-form input[type=email], .sp-auth-form input[type=password]{
	background:var(--sp-bg); border:1px solid var(--sp-surface-2); color:var(--sp-text);
	border-radius:8px; padding:10px 12px; font-size:14px;
}
.sp-auth-checkbox{ flex-direction:row !important; align-items:center; gap:8px !important; }
.sp-auth-submit{
	background:linear-gradient(135deg,var(--sp-accent),var(--sp-accent-2)); color:#fff; border:0;
	border-radius:999px; padding:10px 18px; font-weight:600; cursor:pointer; margin-top:4px;
}
.sp-auth-message{ font-size:13px; border-radius:10px; padding:8px 12px; }
.sp-auth-message.is-error{ background:rgba(245,56,125,.15); color:#FF9CBB; }
.sp-auth-message.is-success{ background:rgba(74,222,128,.15); color:#4ADE80; }