/* ============================================================
   農家マップ検索ページ - style_farmer_map.css
   ============================================================ */

:root {
    --fmap-teal: #0b5500;
    --fmap-teal-dark: #0f766e;
    --fmap-teal-light: #14b8a6;
    --fmap-teal-pale: #ccfbf1;
    --fmap-yellow: #facc15;
    --fmap-bg: #f8faf9;
    --fmap-shadow: 0 2px 12px rgba(0,0,0,0.08);
    --fmap-radius: 12px;
    /* Google ズームコントロールのオフセット（現在地ボタンの上） */
    --fmap-floating-ui-bottom: 86px;
}

/* ---- サイドバーが地図の上に表示されるように ---- */
.toggle_btn { z-index: 100 !important; }
.menu_nav   { z-index: 101 !important; }
.open #mask { z-index: 99  !important; }

/* ---- ページ全体 ---- */
.farmer-map-page {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 68px - env(safe-area-inset-bottom, 0px));
    background: var(--fmap-bg);
    overflow: hidden;
    padding-top: 15px;
}

/* ---- パンくず ---- */
/* style_common の .content-wrapper nav[aria-label="breadcrumb"]（padding-left:0.3rem）
   より特異性を上げないと左余白が潰れ、固定の .toggle_btn と重なる */
.fmap-breadcrumb-wrap {
    padding: 10px 16px 0 50px;
    background: #fff;
    flex-shrink: 0;
    z-index: 10;
}
.content-wrapper nav.fmap-breadcrumb-wrap {
    padding-left: max(1rem, calc(env(safe-area-inset-left, 0px) + 52px));
    padding-right: 16px;
    padding-top: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
}
.fmap-breadcrumb-wrap .breadcrumb {
    font-size: 0.78rem;
    margin: 0;
    padding: 0;
    background: transparent;
}
.fmap-breadcrumb-wrap .breadcrumb-item a {
    color: var(--fmap-teal);
    text-decoration: none;
    font-weight: 500;
}
.fmap-breadcrumb-wrap .breadcrumb-item a:hover {
    color: var(--fmap-teal-dark);
    text-decoration: underline;
}
.fmap-breadcrumb-wrap .breadcrumb-item.active {
    color: #64748b;
    font-weight: 500;
}
.fmap-breadcrumb-wrap .breadcrumb-item + .breadcrumb-item::before {
    content: "／";
    color: #94a3b8;
    padding: 0 0.35rem;
    font-weight: 400;
}

/* ---- タブ ---- */
.fmap-tabs {
    display: flex;
    gap: 0;
    padding: 0 16px;
    background: #fff;
    border-bottom: 1px solid #e5ebe9;
    flex-shrink: 0;
}
.fmap-tab {
    flex: 1;
    padding: 10px 0;
    border: none;
    background: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.fmap-tab.active {
    color: #1a2e2a;
    border-bottom-color: var(--fmap-yellow);
}
.fmap-tab.active i {
    color: var(--fmap-teal);
}
.fmap-tab:hover:not(.active) { color: #64748b; }

/* ---- フィルターバー ---- */
.fmap-filters {
    background: #fff;
    border-bottom: 1px solid #e5ebe9;
    flex-shrink: 0;
    z-index: 8;
}
.fmap-filters-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.fmap-filters-scroll::-webkit-scrollbar { display: none; }

.fmap-filter-dropdown {
    position: relative;
    flex-shrink: 0;
}
.fmap-filter-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 1.5px solid #d1ddd9;
    border-radius: 20px;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.fmap-filter-btn:hover,
.fmap-filter-btn.active {
    border-color: var(--fmap-teal);
    color: var(--fmap-teal);
    background: var(--fmap-teal-pale);
}
.fmap-filter-chevron {
    font-size: 0.6rem;
    transition: transform 0.2s;
}
.fmap-filter-btn.open .fmap-filter-chevron { transform: rotate(180deg); }

.fmap-filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    background: #fff;
    border-radius: var(--fmap-radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    padding: 12px;
    z-index: 50;
    animation: fmapFadeIn 0.15s ease;
}
.fmap-filter-panel.show { display: block; }
.fmap-filter-panel-area { min-width: 220px; }

@keyframes fmapFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fmap-filter-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 4px;
    font-size: 0.82rem;
    color: #334155;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
}
.fmap-filter-check:hover { background: #f1f5f9; }
.fmap-filter-check input[type="checkbox"] {
    accent-color: var(--fmap-teal);
    width: 16px;
    height: 16px;
}

.fmap-filter-select {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid #d1ddd9;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #334155;
    background: #fff;
    margin-bottom: 8px;
}
.fmap-filter-select:focus { border-color: var(--fmap-teal); outline: none; }

.fmap-filter-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}
.fmap-radius-group { margin-top: 4px; }

.fmap-filter-apply {
    display: block;
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    border: none;
    border-radius: 8px;
    background: var(--fmap-teal);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.fmap-filter-apply:hover { background: var(--fmap-teal-dark); }

/* フィルター検索 */
.fmap-filter-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid #d1ddd9;
    border-radius: 20px;
    background: #fff;
    flex-shrink: 0;
    min-width: 160px;
    transition: border-color 0.2s;
}
.fmap-filter-search:focus-within { border-color: var(--fmap-teal); }
.fmap-filter-search i { color: #94a3b8; font-size: 0.8rem; }
.fmap-search-input {
    border: none;
    outline: none;
    font-size: 0.8rem;
    width: 120px;
    color: #334155;
    background: transparent;
}
.fmap-search-input::placeholder { color: #94a3b8; }

/* アクティブフィルターチップ */
.fmap-active-filters {
    display: flex;
    gap: 6px;
    padding: 6px 16px 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
}
.fmap-active-filters::-webkit-scrollbar { display: none; }
.fmap-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 14px;
    background: var(--fmap-teal-pale);
    color: var(--fmap-teal-dark);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.fmap-chip-remove {
    cursor: pointer;
    font-size: 0.7rem;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.fmap-chip-remove:hover { opacity: 1; }

/* ---- マップコンテナ ---- */
.fmap-map-container {
    flex: 1;
    position: relative;
    min-height: 0;
}
.fmap-map {
    width: 100%;
    height: 100%;
}

.fmap-locate-btn {
    position: absolute;
    bottom: 32px;
    left: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--fmap-teal);
    font-size: 1.1rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 5;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fmap-locate-btn:hover {
    background: var(--fmap-teal);
    color: #fff;
}

/* ローディング */
.fmap-map-loading {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    transition: opacity 0.2s;
    pointer-events: none;
}
.fmap-map-loading.hidden {
    opacity: 0;
}
.fmap-map-loading-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    color: var(--fmap-teal);
    font-size: 1rem;
}

/* ---- カスタム InfoWindow ---- */
.fmap-infowindow {
    width: 260px;
    font-family: "Noto Sans JP", sans-serif;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
}
.fmap-iw-photo-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e8f3f1;
}
.fmap-iw-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.fmap-iw-photo-placeholder {
    width: 100%;
    height: 100%;
    background: #dff4ef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fmap-teal);
    font-size: 2rem;
}
.fmap-iw-body {
    padding: 10px 12px 12px;
}
.fmap-iw-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a2e2a;
    margin: 0 0 4px;
    line-height: 1.3;
}
.fmap-iw-catch {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fmap-iw-crops {
    font-size: 0.72rem;
    color: #475569;
    margin: 0 0 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fmap-iw-crops-dot {
    color: var(--fmap-teal);
    font-weight: 700;
}
.fmap-iw-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.fmap-iw-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    background: var(--fmap-teal-pale);
    color: var(--fmap-teal-dark);
}
.fmap-iw-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.72rem;
    color: #94a3b8;
    margin-bottom: 10px;
}
.fmap-iw-stats span {
    white-space: nowrap;
    flex-shrink: 0;
}
.fmap-iw-stats i { margin-right: 2px; }
.fmap-iw-cta {
    display: block;
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 8px;
    background: var(--fmap-teal);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}
.fmap-iw-cta:hover { background: var(--fmap-teal-dark); color: #fff; }

/* Google Maps InfoWindow overrides */
.gm-style-iw-c { padding: 0 !important; border-radius: var(--fmap-radius) !important; }
.gm-style-iw-d { overflow: hidden !important; padding: 0 !important; }
.gm-style-iw-tc { display: none; }

/* Google Maps コントロール：左の現在地ボタンと同じ bottom（余白でずれる場合は margin を打ち消し） */
.gm-bundled-control,
.gmnoprint[controlwidth],
gmp-internal-camera-control {
    bottom: var(--fmap-floating-ui-bottom) !important;
    margin-bottom: 0 !important;
}

/* ---- リスト表示 ---- */
.fmap-list-container {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}
.fmap-list {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fmap-list-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: var(--fmap-radius);
    box-shadow: var(--fmap-shadow);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
}
.fmap-list-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.fmap-list-card-photo {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center center;
    display: block;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--fmap-teal-pale), #e0f2f1);
}
.fmap-list-card-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b5500;
    font-size: 1.5rem;
}
.fmap-list-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fmap-list-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a2e2a;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fmap-list-card-catch {
    font-size: 0.73rem;
    color: #64748b;
    margin: 0 0 6px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fmap-list-card-crops {
    font-size: 0.7rem;
    color: #475569;
    margin: 0 0 4px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fmap-list-card-crops-dot {
    color: var(--fmap-teal);
    font-weight: 700;
}
.fmap-list-card-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.fmap-list-card-location {
    font-size: 0.7rem;
    color: #94a3b8;
}
.fmap-list-card-location i { margin-right: 2px; }
.fmap-list-card-distance {
    font-size: 0.68rem;
    color: var(--fmap-teal);
    font-weight: 600;
    background: var(--fmap-teal-pale);
    padding: 1px 6px;
    border-radius: 8px;
}
.fmap-list-card-heart {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: #d1ddd9;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s;
}
.fmap-list-card-heart.following { color: #ef4444; }
.fmap-list-card-heart:hover { color: #ef4444; }

.fmap-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #94a3b8;
    text-align: center;
}
.fmap-list-empty i { font-size: 2.5rem; margin-bottom: 12px; color: var(--fmap-teal-pale); }
.fmap-list-empty p { font-size: 0.88rem; margin: 0 0 16px; }

.fmap-reset-btn {
    padding: 8px 20px;
    border: 1.5px solid var(--fmap-teal);
    border-radius: 20px;
    background: #fff;
    color: var(--fmap-teal);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.fmap-reset-btn:hover {
    background: var(--fmap-teal);
    color: #fff;
}

/* ---- 件数表示 ---- */
.fmap-count {
    position: fixed;
    bottom: 136px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(15, 118, 110, 0.92);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.fmap-count.show { opacity: 1; }

/* ---- カスタムマーカー ---- */
.fmap-marker {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid var(--fmap-teal);
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.15s;
    position: relative;
}
.fmap-marker:hover { transform: scale(1.15); }
.fmap-marker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fmap-marker-default {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--fmap-teal-pale), #e0f2f1);
    color: var(--fmap-teal);
    font-size: 1.1rem;
}
.fmap-marker-heart {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #fff;
}

/* ---- レスポンシブ ---- */
@media (min-width: 768px) {
    .fmap-infowindow { width: 300px; }
    .fmap-iw-photo,
    .fmap-iw-photo-placeholder { height: 160px; }
    .fmap-list { padding: 16px 24px; }
    .fmap-list-card-photo { width: 100px; height: 100px; }
}

/* PC レイアウト（サイドバー対応） */
@media (min-width: 1025px) {
    .farmer-map-page {
        margin-left: 260px;
        height: calc(100vh - 64px);
    }
    .content-wrapper nav.fmap-breadcrumb-wrap {
        padding: 12px 24px 0 24px;
        margin-bottom: 0;
    }
    .fmap-filters-scroll { padding: 10px 24px; }
    .fmap-count { bottom: 32px; }

    .fmap-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 14px;
        padding: 20px 24px;
    }
}
@media (min-width: 1025px) and (max-width: 1279px) {
    .farmer-map-page { margin-left: 230px; }
}

/* ---- 未ログイン時のログイン案内 ---- */
.fmap-login-required {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0fdfa 0%, #e8f3f1 100%);
}
.fmap-login-required-inner {
    text-align: center;
    padding: 40px 24px;
}
.fmap-login-required-inner > i {
    font-size: 3rem;
    color: #b0d4cf;
    margin-bottom: 16px;
    display: block;
}
.fmap-login-required-inner h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2e2a;
    margin: 0 0 8px;
}
.fmap-login-required-inner p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 20px;
}
.fmap-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 28px;
    border-radius: 24px;
    background: var(--fmap-teal);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.fmap-login-btn:hover {
    background: var(--fmap-teal-dark);
    color: #fff;
}
.fmap-back-link {
    display: block;
    margin-top: 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a2e2a;
    text-decoration: none;
}
.fmap-back-link:hover {
    text-decoration: underline;
    color: #1a2e2a;
}