/* =========================
       FARE SECTION
    ========================= */

    .ferry-fare-row {
        align-items: stretch;
    }

    .ferry-fare-row > div {
        margin-bottom: 25px;
    }


    /* =========================
       CARD
    ========================= */

    .ferry-fare-card {
        position: relative;

        height: 100%;

        padding: 25px;

        background: #fff;

        border: 1px solid #e5e7eb;
        border-radius: 14px;

        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);

        overflow: hidden;

        transition: all 0.3s ease;
    }

    .ferry-fare-card:hover {
        transform: translateY(-6px);

        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.11);
    }


    /* =========================
       HEADER
    ========================= */

    .fare-header {
        display: flex;

        align-items: center;
        justify-content: space-between;

        padding-bottom: 18px;

        border-bottom: 1px solid #eee;
    }

    .fare-header h4 {
        margin: 5px 0 0;

        font-size: 21px;
        font-weight: 700;

        color: #222;
    }

    .fare-label {
        color: #777;

        font-size: 11px;

        font-weight: 600;

        text-transform: uppercase;

        letter-spacing: .5px;
    }


    /* =========================
       ICON
    ========================= */

    .fare-icon {
        width: 48px;
        height: 48px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background: #eaf4ff;

        color: #007bff;

        font-size: 20px;
    }

    .luxury .fare-icon {
        background: #fff4e5;
        color: #d97706;
    }

    .premium .fare-icon {
        background: #eaf4ff;
        color: #007bff;
    }

    .economy .fare-icon {
        background: #eaf8ef;
        color: #198754;
    }


    /* =========================
       STARTING PRICE
    ========================= */

    .fare-price {
        padding: 18px 0;

    }

    .fare-price small {
        display: block;

        color: #888;

        font-size: 11px;
    }

    .fare-price strong {
        color: #198754;

        font-size: 28px;

        font-weight: 800;
    }

    .fare-price span {
        color: #888;

        font-size: 12px;
    }


    /* =========================
       FERRY LIST
    ========================= */

    .price-list {
        list-style: none;

        padding: 0;
        margin: 0;
    }

    .price-list li {
        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 12px;

        padding: 14px 0;

        border-bottom: 1px solid #f0f0f0;
    }

    .price-list li:last-child {
        border-bottom: none;
    }


    /* Ferry Information */

    .ferry-info {
        display: flex;

        flex-direction: column;

        gap: 4px;

        min-width: 0;
    }

    .ferry-info strong {
        color: #333;

        font-size: 13px;
    }

    .ferry-info span {
        color: #888;

        font-size: 11px;
    }

    .ferry-info i {
        color: #007bff;

        margin-right: 3px;
    }


    /* =========================
       PRICE BUTTON
    ========================= */

    .price-btn {
        flex-shrink: 0;

        padding: 6px 10px;

        background: #f1f8ff;

        color: #007bff;

        border-radius: 5px;

        font-size: 12px;

        font-weight: 700;

        transition: all 0.3s ease;
    }

    .price-btn:hover {
        background: #007bff;

        color: #fff;

        text-decoration: none;
    }


    /* =========================
       VIEW BUTTON
    ========================= */

    .view-ferries-btn {
        display: flex;

        align-items: center;
        justify-content: center;

        gap: 8px;

        margin-top: 20px;

        padding: 11px;

        border-radius: 6px;

        background: #007bff;

        color: #fff;

        font-size: 12px;

        font-weight: 600;

        text-transform: uppercase;
    }

    .view-ferries-btn:hover {
        background: #0056b3;

        color: #fff;

        text-decoration: none;
    }


    /* =========================
       POPULAR BADGE
    ========================= */

    .popular-badge {
        position: absolute;

        top: 15px;
        right: -35px;

        padding: 5px 40px;

        background: #007bff;

        color: #fff;

        font-size: 10px;

        font-weight: 600;

        transform: rotate(45deg);

        z-index: 2;
    }

    .popular-badge i {
        margin-right: 3px;
    }


    /* =========================
       MOBILE
    ========================= */

    @media (max-width: 767px) {

        .ferry-fare-card {
            padding: 20px;
        }

        .fare-header h4 {
            font-size: 19px;
        }

        .fare-price strong {
            font-size: 25px;
        }

    }