/**
 * FanzaTik Main Stylesheet (World-Class Ultimate Version - Patched)
 *
 * @package FanzaTik
 * @version 11.1.0+ (Patched)
 *
 * CHANGE LOG:
 * - ADDED: Styles for the new actress archive buttons on the single video page.
 */

/* =================================================================
    1. Global Resets, Variables & Base Styles
   ================================================================= */
:root {
	--primary-color: #ff007f;
	--primary-gradient: linear-gradient(135deg, #ff007f, #e64a19);
	--background-color: #000000;
	--surface-color: #121212;
	--header-bg: rgba(18, 18, 18, 0.85);
	--header-border: #282828;
	--text-color: #ffffff;
	--text-color-muted: #aaaaaa;
	--overlay-gradient: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 20%, rgba(0,0,0,0.4) 40%, transparent 70%);
	--header-height: 60px;
	--mobile-tab-bar-height: calc(55px + env(safe-area-inset-bottom));
	--bottom-controls-height: calc(55px + env(safe-area-inset-bottom));
	--smooth-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { background-color: var(--background-color); color: var(--text-color); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.video-feed-is-active, body.modal-active, body.mobile-menu-is-active { overflow: hidden; }
a { color: var(--primary-color); text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; }
a:hover { opacity: 0.8; }
.site-content { padding-top: var(--header-height); }

/* =================================================================
    2. PC Header & Mega Menu
   ================================================================= */
.site-header { background-color: var(--header-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; border-bottom: 1px solid var(--header-border); }
.header-inner { display: flex; align-items: center; height: var(--header-height); padding: 0 24px; max-width: 1800px; margin: 0 auto; }
.header-pc { display: flex; align-items: center; width: 100%; gap: 24px; }
.header-mobile { display: none; }
.site-logo { font-size: 24px; font-weight: 800; color: var(--primary-color); letter-spacing: -1px; }
.main-navigation-pc { display: flex; align-items: center; gap: 8px; margin: 0 auto; }
.main-navigation-pc a { font-weight: 500; padding: 10px 16px; color: var(--text-color); font-size: 1em; display: flex; align-items: center; gap: 6px; border-radius: 6px; transition: background-color 0.2s ease; }
.menu-item-has-children { position: relative; }
.mega-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 600px; padding-top: 10px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0s 0.2s; z-index: 1100; }
.menu-item-has-children:hover .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.mega-menu-inner { background: var(--surface-color); border: 1px solid var(--header-border); border-radius: 8px; padding: 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.mega-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.header-icon-btn { background: none; border: none; color: var(--text-color); font-size: 20px; cursor: pointer; padding: 8px; }
.search-form-pc {
	position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.search-field {
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid var(--header-border);
	border-radius: 20px;
	color: var(--text-color);
	padding: 8px 40px 8px 20px;
	width: 220px;
	font-size: 14px;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 0 0 rgba(255, 0, 127, 0);
}
.search-submit {
    background: none;
    border: none;
    color: var(--text-color-muted);
    font-size: 16px;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    transition: color 0.3s ease;
}
.search-submit:hover {
    color: var(--primary-color);
}
.search-form-pc:focus-within {
    transform: scale(1.05);
}
.search-form-pc:focus-within .search-field {
    width: 280px;
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--primary-color);
    box-shadow: 0 0 15px 3px rgba(255, 0, 127, 0.3);
}
.search-form-pc:focus-within .search-submit {
    color: var(--primary-color);
}


/* =================================================================
    3. Mobile Header & Tab Bar
   ================================================================= */
.mobile-tab-bar { display: none; }
#mobile-search-container { display: none; background-color: #000; padding: 10px 15px; border-bottom: 1px solid var(--header-border); }

/* =================================================================
    4. Video Feed & Overlays
   ================================================================= */
#video-feed-container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; overflow-y: scroll; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; background-color: var(--background-color); }
#video-feed-container::-webkit-scrollbar { display: none; }
#video-feed-container { -ms-overflow-style: none; scrollbar-width: none; }
.video-slide { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; scroll-snap-align: start; }
.video-player-container, .video-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-player { object-fit: contain; background-color: #000; }
.video-tap-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; }
.video-overlay { position: absolute; bottom: var(--bottom-controls-height); left: 0; width: 100%; padding: 20px; background: var(--overlay-gradient); display: flex; align-items: flex-end; pointer-events: none; z-index: 10; }
.video-overlay > * { pointer-events: auto; }
.video-overlay-left { display: flex; flex-direction: column; gap: 12px; width: calc(100% - 80px); }
.video-title { font-size: 18px; font-weight: 600; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
.video-meta { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.meta-item { display: flex; align-items: flex-start; gap: 8px; }
.affiliate-area { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.affiliate-button { pointer-events: auto; background: var(--primary-gradient); color: white; font-weight: bold; font-size: 14px; padding: 10px 15px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; }
.affiliate-thumbnail-link { display: block; }
.affiliate-thumbnail { width: 90px; height: auto; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.2); }
.video-overlay-right { position: absolute; right: 10px; bottom: var(--bottom-controls-height); z-index: 20; }
.video-actions { display: flex; flex-direction: column; gap: 25px; }
.action-btn { background: none; border: none; color: white; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.action-btn-icon-wrapper {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(8px);
	transition: background 0.2s ease;
}
.action-btn-icon-wrapper i {
	font-size: 24px;
	transition: transform 0.2s ease;
}
.action-btn.active .action-btn-icon-wrapper {
	background: var(--primary-gradient);
}
.action-btn.active .action-btn-icon-wrapper i {
	transform: scale(1.15);
}
.slide-ad-overlay {
	position: absolute;
	top: calc(var(--header-height) + 20px);
	left: 20px;
	z-index: 25;
	max-width: 280px;
	width: 50%;
}
.slide-ad-link {
	display: block;
	line-height: 0;
}
.slide-ad-image {
	width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,0.2);
	box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}


/* =================================================================
    5. Single Video Page Styles
   ================================================================= */
.single-video-main { max-width: 1400px; margin: 0 auto; padding: 30px 20px; }
.single-ad-container { text-align: center; margin-bottom: 30px; }
.single-ad-container img { max-width: 100%; height: auto; border-radius: 8px; }
.single-video-layout { display: flex; flex-direction: row; gap: 40px; align-items: flex-start; }
.video-column { flex: 3; min-width: 0; position: sticky; top: calc(var(--header-height) + 30px); }
.details-column { flex: 2; min-width: 0; }
.video-player-wrapper { position: relative; width: 100%; padding-top: 56.25%; background-color: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.video-player-single { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.details-column .entry-header .entry-title { font-size: 26px; font-weight: 700; line-height: 1.4; margin-bottom: 20px; }
.affiliate-button.single-page-affiliate { display: flex; justify-content: center; align-items: center; width: 100%; font-size: 16px; padding: 15px 20px; border-radius: 10px; margin-bottom: 25px; }

/* ★★★ 修正点：ここから新しい女優別ボタンのスタイルを追加 ★★★ */
.actress-archive-links-wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: -10px; /* 購入ボタンとの間隔を少し詰める */
	margin-bottom: 25px;
}
.actress-archive-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	padding: 12px 20px;
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--text-color);
	border: 1px solid var(--header-border);
	border-radius: 10px;
	font-weight: 600;
	font-size: 15px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.actress-archive-button:hover {
	background-color: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color);
}
/* ★★★ 追加ここまで ★★★ */

.video-meta-single, .entry-content { background-color: var(--surface-color); padding: 20px; border-radius: 8px; border: 1px solid var(--header-border); margin-bottom: 25px; }
.meta-heading { font-size: 18px; font-weight: 600; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--header-border); }
.meta-row { display: flex; gap: 10px; margin-bottom: 12px; font-size: 15px; }
.meta-label { flex-shrink: 0; width: 90px; color: var(--text-color-muted); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.single-comments-section { max-width: 900px; margin: 50px auto 0; background-color: var(--surface-color); padding: 20px 30px 30px; border-radius: 12px; border: 1px solid var(--header-border); }

/* =================================================================
    6. Modals (Comments, Mobile Menus)
   ================================================================= */
.fzt-modal-container { position: fixed !important; top: 0; left: 0; width: 100%; height: 100%; z-index: 99998 !important; visibility: hidden; pointer-events: none; }
.fzt-modal-container.is-visible { visibility: visible; pointer-events: auto; }
.fzt-modal-scrim { position: absolute; inset: 0; background-color: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.3s ease-in-out; }
.fzt-modal-container.is-visible .fzt-modal-scrim { opacity: 1; }
.fzt-modal-panel { position: absolute; bottom: 0; left: 0; width: 100%; background-color: var(--surface-color); border-top-left-radius: 16px; border-top-right-radius: 16px; transform: translateY(100%); transition: transform 0.35s var(--smooth-out); display: flex; flex-direction: column; }
.fzt-modal-container.is-visible .fzt-modal-panel { transform: translateY(0); }
.fzt-modal-header { flex-shrink: 0; display: flex; justify-content: center; align-items: center; padding: 16px; border-bottom: 1px solid var(--header-border); position: relative; }
.fzt-modal-title { font-size: 16px; font-weight: 600; }
.fzt-modal-close { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: none; border: none; color: var(--text-color-muted); font-size: 24px; padding: 8px; }
#comments-modal-panel { max-height: 85vh; }
.comments-modal-body { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; }
.comments-list-wrapper { padding: 0 20px; flex-grow: 1; }
.comment-list { list-style: none; margin: 0; padding: 20px 0; }
.comment { display: flex; gap: 15px; margin-bottom: 20px; }
.comment-avatar img { border-radius: 50%; }
.comment-author { font-weight: bold; }
.comment-meta { font-size: 12px; color: var(--text-color-muted); }
.comment-content { margin-top: 4px; }
.comment-form-wrapper { flex-shrink: 0; padding: 15px; border-top: 1px solid var(--header-border); background-color: #000; }
#commentform-modal { display: flex; gap: 10px; align-items: center; }
#commentform-modal p { margin: 0; padding: 0; flex-grow: 1; }
#commentform-modal textarea { width: 100%; background: var(--surface-color); border: 1px solid var(--header-border); color: var(--text-color); padding: 10px 15px; border-radius: 20px; resize: none; height: 42px; font-size: 15px; }
#commentform-modal input[type="submit"] { background: var(--primary-color); border: none; color: white; width: 42px; height: 42px; border-radius: 50%; font-weight: bold; }
#mobile-taxonomy-menu .fzt-modal-panel { max-height: 80vh; }
.mobile-menu-body { flex-grow: 1; display: flex; position: relative; overflow: hidden; }
.mobile-menu-content { flex-grow: 1; overflow-y: auto; scroll-behavior: smooth; }
.mobile-menu-content ul { list-style: none; padding: 0; margin: 0; }
.mobile-menu-term-group { padding: 0 20px; }
.mobile-menu-term-header { font-size: 14px; color: var(--primary-color); background-color: var(--surface-color); padding: 12px 0 8px; position: sticky; top: 0; z-index: 1; }
.mobile-menu-content li a { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--header-border); color: var(--text-color); font-size: 15px; }
.mobile-menu-az-index { flex-shrink: 0; width: 35px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px 0; }
.az-index-link { color: var(--text-color-muted); font-size: 11px; font-weight: bold; padding: 2px 0; }
#sort-order-menu .fzt-modal-panel { max-height: 40vh; }
.sort-menu-list { list-style: none; padding: 10px; margin: 0; }
.sort-menu-list a { display: flex; align-items: center; gap: 15px; padding: 15px; color: var(--text-color); font-size: 16px; border-radius: 8px; }
.sort-menu-list a:hover { background-color: rgba(255,255,255,0.1); }
.sort-menu-list a i { font-size: 18px; width: 20px; text-align: center; color: var(--primary-color); }

/* =================================================================
    7. Responsive Styles
   ================================================================= */
@media (max-width: 1024px) {
    .header-pc { display: none; }
    .header-mobile { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 12px; }
    .mobile-tab-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: var(--mobile-tab-bar-height); padding-bottom: env(safe-area-inset-bottom); background-color: var(--header-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--header-border); display: flex; justify-content: space-around; z-index: 1000; }
    
    .tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-grow: 1; color: var(--text-color-muted); background: none; border: none; font-size: 11px; gap: 2px; padding-top: 6px; padding-bottom: 4px; transition: color .2s ease; }
    .tab-item i { font-size: 22px; margin-bottom: 3px; }
    .tab-item.active, .tab-item:active { color: var(--primary-color); }
	
    .single-video-main { padding: 20px 15px; }
	.single-video-layout { flex-direction: column; gap: 25px; }
	.video-column { position: static; }
    .details-column .entry-header .entry-title { font-size: 22px; }
    .single-comments-section { padding: 15px; }
}