/* Swiper Card Slider CSS (swiper-card.css) */


/* Swiperコンテナの基本設定 */
.pricing-card-carousel .swiper-wrapper {
    padding-bottom: 0 !important;
}

/* ページネーションの配置 (HTMLで静的なフレックスコンテナ内に配置したため、CSSはリセット) */
.pricing-card-carousel .swiper-pagination-cards {
    position: static !important;
    width: auto !important; /* 中央揃えは親のflex containerが担当 */
    text-align: center;
    margin: 0;
}

/* ページネーションのドットのスタイル */
.pricing-card-carousel .swiper-pagination-bullet {
    /* 画像の背景が濃い紫なので、ドットの色は白または薄い灰色に見えるようにする */
    background: white; 
    opacity: 0.5;
    transition: opacity 0.3s;
}
.pricing-card-carousel .swiper-pagination-bullet-active {
    background: #AED144 !important; /* アクティブなドットの色を緑に */
    opacity: 1;
}


/* ナビゲーションボタンの配置解除 (HTMLで静的なフレックスコンテナ内に配置したため、絶対配置の干渉をリセット) */
.pricing-card-carousel .swiper-button-prev-card,
.pricing-card-carousel .swiper-button-next-card {
    position: static !important; /* 絶対配置を解除 */
    margin: 0 !important;
    transform: none !important;
    background-image: none !important; 
    /* HTMLでTailwindのクラスによってサイズとスタイルが制御されるため、ここで追加のスタイルは不要 */
}

@media (min-width: 1024px) {
    .pricing-card-carousel .swiper-button-prev-card,
    .pricing-card-carousel .swiper-button-next-card {
        display: flex; /* デスクトップで表示 */
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.2); /* 半透明の白 */
        border-radius: 9999px; /* 真円 */
        transition: background-color 0.3s;
    }
    .pricing-card-carousel .swiper-button-prev-card:hover,
    .pricing-card-carousel .swiper-button-next-card:hover {
        background-color: rgba(255, 255, 255, 0.4);
    }
}

.pricing-card-carousel .swiper-button-prev-card {
    left: 0; 
}
.pricing-card-carousel .swiper-button-next-card {
    right: 0; 
}

/* 矢印SVGの色 (白) */
.pricing-card-carousel .swiper-button-prev-card svg,
.pricing-card-carousel .swiper-button-next-card svg {
    color: white;
    width: 1.5rem;
    height: 1.5rem;
}

/* 1280px以上でのパディング調整はJSの slidesOffsetBefore に任せるため削除 */
/* @media (min-width: 1280px) { ... } */


/* Ajuste para mobile: JSで制御するため、このブロックを削除またはコメントアウト */
/*
@media (max-width: 767px) {
    .pricing-card-carousel .swiper-wrapper {
        padding-left: 20px !important; 
        padding-right: 20px !important; 
    }
}
*/