/**
 * 우측 플로팅 패널
 *
 *  - 전화상담 / 카카오톡 / TOP : 흰 바탕 원형 아이콘 버튼. 글자 없이 아이콘만.
 *  - 맞춤여행 문의하기(.floating-btn) : 기존 알약 버튼 + 글자 그대로 유지.
 *    (front/custom-travel 페이지가 .fcta 스택 맨 위에 끼워 넣는다)
 *
 * partials/floating-cta.blade.php 가 이 파일을 함께 불러온다.
 */
.fcta {
    position: fixed;
    right: 24px;
    bottom: 32px;
    z-index: 58;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* ------------------------------------------------------------------
 * 알약 버튼 - 맞춤여행 문의하기 전용
 *
 * 넓은 화면에서는 글자까지 보이고, 좁아지면 아이콘만 남았다가
 * 마우스를 올리면 왼쪽으로 펼쳐진다.
 * ------------------------------------------------------------------ */
.fcta-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 200px;
    padding: 14px 18px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    transition: transform .18s ease, box-shadow .18s ease;
}
.fcta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
}

.fcta-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.fcta-txt b { font-size: 15px; font-weight: 700; }
.fcta-txt em { font-style: normal; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }

.fcta-ico { width: 34px; height: 34px; margin-left: auto; flex-shrink: 0; }
.fcta-talk { margin-left: auto; flex-shrink: 0; width: 40px; height: 34px; }
.fcta-talk svg { width: 100%; height: 100%; display: block; }

/* 본문(최대 1200px)을 침범하지 않을 만큼 여백이 없으면 아이콘만 남긴다.
   기준 : 왼쪽여백 24 + 버튼 200 + 간격 16 = 240px 이 좌우 여백보다 작아야 한다. */
@media (max-width: 1679px) {
    .fcta { right: 16px; }
    .fcta-btn {
        width: 56px;
        height: 56px;
        padding: 0 13px;
        justify-content: flex-end;
        gap: 0;
        overflow: hidden;
        transition: width .22s ease, transform .18s ease, box-shadow .18s ease;
    }
    .fcta-btn:hover { width: 200px; }
    .fcta-txt {
        margin-right: 12px;
        opacity: 0;
        white-space: nowrap;
        transition: opacity .18s ease;
    }
    .fcta-btn:hover .fcta-txt { opacity: 1; }
    .fcta-ico { margin-left: 0; width: 30px; height: 30px; }
}

/* 모바일 - 하단 탭바(64px) 위로 올려서 가리지 않게 둔다 */
@media (max-width: 768px) {
    .fcta { right: 14px; bottom: calc(14px + var(--tabbar-h, 64px)); }
    .fcta-btn {
        width: 48px;
        height: 48px;
        padding: 0;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }
    .fcta-btn:hover { width: 48px; }
    .fcta-txt { display: none; }
    .fcta-ico { margin: 0; width: 24px; height: 24px; }
}

/* TOP - 스크롤을 내렸을 때만 나타난다 (JS가 .show 를 붙인다).
   display 로 껐다 켜야 숨어 있는 동안 flex gap 자리가 남지 않는다. */
.fcta-top { display: none; }
.fcta-top.show { display: flex; animation: fctaTopIn .2s ease; }
@keyframes fctaTopIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ==================================================================
 * 흰 바탕 원형 아이콘 - 전화 / 카카오톡 / TOP
 *
 * 위 알약 규칙과 특이도가 같으므로(0,1,0) 반드시 뒤에 둔다.
 * 맞춤여행 문의하기(.floating-btn)는 이 선택자에 걸리지 않아 그대로 남는다.
 * ================================================================== */
.fcta-tel,
.fcta-kakao,
.fcta-top {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: visible;
    border: 1px solid #E5E7EB;
    border-radius: 50%;
    background: #fff;
    color: #1F2937;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    transition: transform .18s ease, box-shadow .18s ease;
}
.fcta-top { display: none; }
.fcta-top.show { display: flex; }

/* 좁은 화면에서 알약이 펼쳐지는 규칙(0,2,0)을 되돌린다 */
.fcta-tel:hover,
.fcta-kakao:hover,
.fcta-top:hover {
    width: 44px;
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

/* 글자는 쓰지 않는다 - 아이콘만 */
.fcta-tel .fcta-txt,
.fcta-kakao .fcta-txt,
.fcta-top b { display: none; }

.fcta-tel .fcta-ico { margin: 0; width: 26px; height: 26px; }
.fcta-kakao .fcta-talk { margin: 0; width: 28px; height: 24px; }
.fcta-top svg { width: 24px; height: 24px; margin: 0; }

@media (max-width: 768px) {
    .fcta-tel,
    .fcta-kakao,
    .fcta-top { width: 40px; height: 40px; }
    .fcta-tel:hover,
    .fcta-kakao:hover,
    .fcta-top:hover { width: 40px; }
    .fcta-tel .fcta-ico { width: 24px; height: 24px; }
    .fcta-kakao .fcta-talk { width: 26px; height: 22px; }
    .fcta-top svg { width: 22px; height: 22px; }
}