/* assets/modal-style.css */

/* ------------------------------------------------------------------------- */
/* Tinder風UIメインページ用 基本ページスタイル                               */
/* (カスタムページテンプレート 'template-tinder-main.php' 使用時)            */
/* ------------------------------------------------------------------------- */

/* body タグにカスタムページテンプレートやプラグインが付与するクラスを想定 */
/* 例: body.mts-tinder-ui-canvas (テンプレートから) または body.mts-tinder-ui-main-page (プラグインから) */
body.mts-tinder-ui-canvas,
body.mts-tinder-ui-main-page {
    background-color: #f0f2f5; /* UI全体の背景色 (例: 薄いグレー) */
    margin: 0;
    padding: 0;
    overflow: hidden; /* 画面全体のスクロールバーを隠す場合 (UI内でスクロールを管理) */
    height: 100vh; /* ビューポートの高さ全体を使用 */
    display: flex; /* 中のラッパー要素を中央揃えにする場合など */
    flex-direction: column;
}

/* WordPress管理バーが表示されている場合の調整 */
body.admin-bar.mts-tinder-ui-canvas,
body.admin-bar.mts-tinder-ui-main-page {
    min-height: calc(100vh - 32px); /* 管理バーの高さを考慮 */
}

/* カスタムページテンプレート内のラッパー要素のスタイル (例: #tinder-ui-wrapper) */
/* このセレクタは、template-tinder-main.php 内で定義したIDに合わせてください */
#tinder-ui-wrapper.tinder-ui-full-page-wrapper {
    width: 100%;
    flex-grow: 1; /* body の残りの高さを全て使用 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* カードがはみ出た場合など */
}

/* カードコンテナのスタイル */
.tinder-cards-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* カードを重ねる場合の基準 */
    width: 100%;        /* ラッパーいっぱいに */
    height: 100%;       /* ラッパーいっぱいに */
    max-width: 400px;   /* Tinder UIの最大幅 (任意) */
    max-height: 700px;  /* Tinder UIの最大高さ (任意) */
    /* background-color: lightblue; */ /* デバッグ用に背景色 */
}


/* ------------------------------------------------------------------------- */
/* Tinderカード自体のスタイル (前回提供したものをベースに調整)                 */
/* ------------------------------------------------------------------------- */

.tinder-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 少し濃い影 */
    overflow: hidden;
    
    width: 90vw;      /* ビューポート幅の90% */
    max-width: 360px; /* 最大幅 (コンテナより少し小さく) */
    height: 90%;     /* コンテナの高さの90% */
    max-height: 580px;/* 最大高さ */
    
    display: flex;
    flex-direction: column; /* 画像、情報、アクションを縦に並べる */
    
    position: absolute; /* スワイプUIライブラリで重ねる場合は設定 */
    user-select: none;  /* テキスト選択を防ぐ */
    cursor: grab;       /* ドラッグできることを示すカーソル */
    
    /* 初期トランジション（ドラッグ終了時などに戻るアニメーション用） */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 少しバウンス感のあるイージング */
}

/* ドラッグ中のカードスタイル */
.tinder-card.panning {
    transition: none !important; /* ドラッグ中はCSSトランジションを無効化 */
    cursor: grabbing;
}

/* カード内の画像ラッパー */
.tinder-card-image-wrapper {
    width: 100%;
    flex-shrink: 0; /* 画像エリアは縮まないように */
    /* 画像エリアの推奨アスペクト比 (例: 4:3 や 1:1 などデザインによる) */
    /* padding-top: 75%; /* アスペクト比 4:3 の場合 (height:0 と併用) */
    /* height: 0; */
    position: relative;
    background-color: #f0f0f0; /* 画像読み込み中の背景 */
}

.tinder-card-image-wrapper img.tinder-card-image {
    display: block;
    width: 100%;
    height: 280px; /* 画像の高さを固定する例 (横長画像もこの高さに収まる) */
                   /* または、アスペクト比を保ちたい場合は height: auto; */
    object-fit: cover; /* 指定した寸法に画像をフィットさせる方法 (cover, contain など) */
    border-top-left-radius: 12px;  /* カードの角丸に合わせる */
    border-top-right-radius: 12px;
}

/* カード情報エリア (画像の下) */
.tinder-card-info {
    padding: 15px 18px; /* 少し左右のパディングを調整 */
    text-align: left;
    background-color: #fff;
    flex-grow: 1; /* 残りのスペースを情報エリアが埋める */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直方向中央揃え（テキスト量が少ない場合） */
}

.tinder-card-info .tinder-card-title {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.4em; 
    font-weight: 700; /* 少し太く */
    color: #222;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tinder-card-info .tinder-card-excerpt {
    font-size: 0.9em;
    color: #666;
    line-height: 1.45;
    margin-bottom: 0; /* 下のアクションボタンとの間隔はactionで */
    height: calc(1.45em * 3); /* 約3行分 (line-height * 3) */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* カード内のアクションボタン群のコンテナ */
.tinder-card-actions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px 10px; /* 上下のパディング */
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0; /* このエリアは縮まないように */
}

.tinder-card-actions .tinder-action-btn {
    background-color: #fff;
    border: 1px solid #e0e0e0; /* 枠線を少し薄く */
    border-radius: 50%;
    width: 50px; 
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 少し影を調整 */
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
    color: #777; /* デフォルトのアイコン色 */
}

.tinder-card-actions .tinder-action-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.tinder-card-actions .tinder-action-btn i.fas {
    font-size: 20px;
    pointer-events: none;
}

/* 各アクションボタンのアイコン色 */
.tinder-card-actions .tinder-action-pass i { color: #fd6a6a; }     /* パス: 少し優しい赤 */
.tinder-card-actions .tinder-action-like i { color: #45e0a8; }     /* ライク: 少し優しい緑 */
.tinder-card-actions .tinder-action-superlike i { color: #4dabf7; } /* スーパーライク: 少し優しい青 */
.tinder-card-actions .tinder-action-details i { color: #aaa; }      /* 詳細: 薄いグレー */


/* ------------------------------------------------------------------------- */
/* (参考) テーマUI非表示ルール (カスタムページテンプレート使用時は通常不要)    */
/* ------------------------------------------------------------------------- */
/*
body.mts-tinder-ui-main-page .l-header,
body.mts-tinder-ui-main-page #header_bar,
body.mts-tinder-ui-main-page .l-footer,
body.mts-tinder-ui-main-page #footer_copy,
body.mts-tinder-ui-main-page .l-sidebar,
body.mts-tinder-ui-main-page .c-pageTitle,
body.mts-tinder-ui-main-page .p-page__title,
body.mts-tinder-ui-main-page #breadcrumb,
body.mts-tinder-ui-main-page .p-Page_header
{
    display: none !important;
}
*/