/* =========================================
   FERRY SEARCH PAGE
========================================= */

.slw-ferry-search-section {
    padding: 35px 0 30px;
    background: #f7f9fb;
}

.slw-ferry-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.slw-ferry-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #ff6545;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.slw-ferry-search-header h1,
.slw-ferry-listing-heading h2 {
    margin: 0 0 7px;
    color: #123b40;
    font-size: 27px;
    font-weight: 700;
}

.slw-ferry-search-header p,
.slw-ferry-listing-heading p {
    margin: 0;
    color: #718096;
    font-size: 13px;
}

.slw-ferry-header-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #e8f4f3;
    color: #0c6466;
    font-size: 25px;
}

.slw-ferry-search-card {
    padding: 24px;
    background: #fff;
    border: 1px solid #e7ebef;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(15, 40, 55, .05);
}

.slw-ferry-label {
    display: block;
    margin-bottom: 8px;
    color: #263b50;
    font-size: 12px;
    font-weight: 600;
}

.slw-ferry-label i {
    margin-right: 4px;
    color: #0c7778;
}

.slw-ferry-input {
    width: 100%;
    height: 47px;
    border: 1px solid #dce3e9;
    border-radius: 8px;
    background-color: #fff;
    color: #263b50;
    font-size: 13px;
    box-shadow: none;
}

.slw-ferry-input:focus {
    border-color: #0c7778;
    box-shadow: 0 0 0 3px rgba(12, 119, 120, .08);
}

.slw-ferry-hint {
    display: block;
    margin-top: 4px;
    color: #8996a5;
    font-size: 10px;
}

.slw-ferry-search-btn {
    width: 100%;
    min-height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    background: #ff5435;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: .2s ease;
}

.slw-ferry-search-btn:hover {
    background: #e94327;
    color: #fff;
    transform: translateY(-1px);
}

.col-lg-1-5 {
    flex: 0 0 auto;
    width: 12.5%;
}

/* =========================================
   FERRY LISTING
========================================= */

.slw-ferry-listing-section {
    padding: 35px 0 60px;
    background: #f7f9fb;
}

.slw-ferry-listing-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.slw-ferry-listing-heading h2 {
    font-size: 23px;
}

.slw-ferry-result-count {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #e4e9ee;
    border-radius: 30px;
    background: #fff;
    color: #0c6466;
    font-size: 12px;
    font-weight: 600;
}

/* Sidebar */

.slw-ferry-sidebar {
    padding: 20px;
    border: 1px solid #e5eaf0;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(15, 40, 55, .04);
}

.slw-ferry-sidebar-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 17px;
    margin-bottom: 10px;
    border-bottom: 1px solid #edf0f2;
}

.slw-ferry-sidebar-heading > i {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eaf5f5;
    color: #0c6466;
    font-size: 19px;
}

.slw-ferry-sidebar-heading h3 {
    margin: 0 0 4px;
    color: #123b40;
    font-size: 14px;
    font-weight: 700;
}

.slw-ferry-sidebar-heading p {
    margin: 0;
    color: #8996a5;
    font-size: 11px;
}

.slw-ferry-route-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.slw-ferry-route-list li {
    border-bottom: 1px solid #edf0f2;
}

.slw-ferry-route-list li:last-child {
    border-bottom: 0;
}

.slw-ferry-route-list li a {
    display: block;
    padding: 13px 5px;
    color: inherit;
    text-decoration: none;
}

.slw-ferry-route {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
}

.slw-ferry-route i {
    color: #0c7778;
}

.slw-ferry-route-price {
    margin-top: 8px;
    color: #ff5435;
    font-size: 15px;
    font-weight: 700;
}

.slw-ferry-route-price small {
    color: #8996a5;
    font-size: 10px;
    font-weight: 400;
}

.slw-ferry-route-time {
    margin-top: 5px;
    color: #8996a5;
    font-size: 10px;
}

.slw-ferry-sidebar-empty {
    padding: 20px 5px;
    color: #8996a5;
    font-size: 12px;
}

/* Ferry card */

.slw-ferry-results {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.slw-ferry-card {
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #e3e8ed;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(15, 40, 55, .045);
    transition: .2s ease;
}

.slw-ferry-card:hover {
    border-color: #cbdcdd;
    box-shadow: 0 10px 25px rgba(15, 40, 55, .08);
    transform: translateY(-2px);
}

.slw-ferry-card-image {
    position: relative;
    min-height: 260px;
    background: #e9eef2;
}

.slw-ferry-card-image img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    position: absolute;
    inset: 0;
    object-fit: cover;
}

.slw-ferry-image-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 1;
    padding: 7px 11px;
    border-radius: 30px;
    background: #0c7778;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
}

.slw-ferry-image-tag i {
    margin-right: 4px;
}

.slw-ferry-card-content {
    min-width: 0;
    padding: 20px 22px;
}

.slw-ferry-card-top h3 {
    margin: 0 0 10px;
    color: #142e3d;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.slw-ferry-card-top h3 a {
    color: inherit;
    text-decoration: none;
}

.slw-ferry-card-top h3 a:hover {
    color: #0c7778;
}

.slw-ferry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.slw-ferry-tags span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid #e6ebef;
    border-radius: 6px;
    background: #f8fafc;
    color: #526579;
    font-size: 10px;
}

.slw-ferry-tags i {
    color: #ff6545;
}

/* Journey */

.slw-ferry-journey {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    margin-top: 12px;
    border-bottom: 1px solid #edf0f2;
}

.slw-ferry-journey-point {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.slw-ferry-point-label {
    color: #8996a5;
    font-size: 10px;
}

.slw-ferry-journey-point strong {
    color: #123b40;
    font-size: 17px;
    font-weight: 700;
}

.slw-ferry-journey-point > span:last-child {
    color: #526579;
    font-size: 12px;
}

.slw-ferry-arrival {
    text-align: right;
}

.slw-ferry-journey-middle {
    text-align: center;
    color: #8996a5;
    font-size: 10px;
}

.slw-ferry-journey-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    color: #0c7778;
}

.slw-ferry-journey-line:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #cbdcdd;
}

.slw-ferry-journey-line i {
    position: relative;
    z-index: 1;
    padding: 0 8px;
    background: #fff;
    font-size: 18px;
}

/* Price */

.slw-ferry-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 0;
}

.slw-ferry-price > span {
    display: block;
    margin-bottom: 4px;
    color: #8996a5;
    font-size: 11px;
}

.slw-ferry-price > div {
    color: #ff5435;
    font-size: 21px;
    font-weight: 700;
}

.slw-ferry-price small {
    color: #718096;
    font-size: 11px;
    font-weight: 400;
}

.slw-ferry-toins {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid #f1e5c9;
    border-radius: 8px;
    background: #fffaf0;
}

.slw-ferry-toins img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.slw-ferry-toins strong {
    display: block;
    color: #9a7026;
    font-size: 12px;
}

.slw-ferry-toins small {
    color: #8996a5;
    font-size: 10px;
}

/* Buttons */

.slw-ferry-card-actions {
    display: flex;
    gap: 10px;
}

.slw-ferry-detail-btn,
.slw-ferry-book-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 43px;
    padding: 10px 15px;
    border: 1px solid #0c7778;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: .2s ease;
}

.slw-ferry-detail-btn {
    background: #fff;
    color: #0c7778;
}

.slw-ferry-detail-btn:hover {
    background: #eaf5f5;
    color: #0c6466;
}

.slw-ferry-book-btn {
    background: #ff5435;
    border-color: #ff5435;
    color: #fff;
}

.slw-ferry-book-btn:hover {
    background: #e94327;
    border-color: #e94327;
    color: #fff;
}

/* Empty State */

.slw-ferry-empty {
    padding: 65px 20px;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    background: #fff;
    text-align: center;
}

.slw-ferry-empty-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #eaf5f5;
    color: #0c7778;
    font-size: 28px;
}

.slw-ferry-empty h3 {
    color: #123b40;
    font-size: 20px;
    font-weight: 700;
}

.slw-ferry-empty p {
    max-width: 450px;
    margin: 8px auto 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.7;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1199px) {

    .slw-ferry-card {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .slw-ferry-card-content {
        padding: 17px;
    }

    .slw-ferry-card-top h3 {
        font-size: 16px;
    }

    .col-lg-1-5 {
        width: 16.666667%;
    }
}

@media (max-width: 991px) {

    .slw-ferry-search-section {
        padding-top: 25px;
    }

    .slw-ferry-listing-section {
        padding-top: 25px;
    }

    .slw-ferry-card {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .col-lg-1-5 {
        width: 50%;
    }
}

@media (max-width: 767px) {

    .slw-ferry-search-header h1 {
        font-size: 23px;
    }

    .slw-ferry-header-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .slw-ferry-search-card {
        padding: 16px;
    }

    .slw-ferry-listing-heading {
        align-items: flex-start;
        gap: 10px;
    }

    .slw-ferry-listing-heading h2 {
        font-size: 20px;
    }

    .slw-ferry-result-count {
        padding: 7px 10px;
        white-space: nowrap;
        font-size: 10px;
    }

    .slw-ferry-card {
        display: block;
    }

    .slw-ferry-card-image {
        min-height: 210px;
    }

    .slw-ferry-card-image img {
        min-height: 210px;
    }

    .slw-ferry-card-content {
        padding: 16px;
    }

    .slw-ferry-card-top h3 {
        font-size: 16px;
    }

    .slw-ferry-journey {
        grid-template-columns: minmax(0, 1fr) 75px minmax(0, 1fr);
        gap: 6px;
        padding: 17px 0;
    }

    .slw-ferry-journey-point strong {
        font-size: 15px;
    }

    .slw-ferry-journey-point > span:last-child {
        font-size: 11px;
    }

    .slw-ferry-price > div {
        font-size: 19px;
    }

    .slw-ferry-card-actions {
        gap: 8px;
    }

    .slw-ferry-detail-btn,
    .slw-ferry-book-btn {
        padding: 10px 8px;
        font-size: 11px;
    }
}

@media (max-width: 420px) {

    .slw-ferry-search-header h1 {
        font-size: 20px;
    }

    .slw-ferry-header-icon {
        display: none;
    }

    .slw-ferry-card-image,
    .slw-ferry-card-image img {
        min-height: 180px;
    }

    .slw-ferry-journey {
        grid-template-columns: minmax(0, 1fr) 55px minmax(0, 1fr);
    }

    .slw-ferry-journey-point strong {
        font-size: 14px;
    }

    .slw-ferry-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .slw-ferry-toins {
        width: 100%;
    }
}

/* =========================================
   FERRY SEARCH - HORIZONTAL DESKTOP LAYOUT
========================================= */

.slw-ferry-search-section {
    width: 100%;
    padding: 45px 0 40px;
    background:
        linear-gradient(90deg, rgba(4, 48, 40, .92), rgba(4, 48, 40, .65)),
        linear-gradient(135deg, #064e43, #0c7778);
}

.slw-ferry-search-header {
    margin-bottom: 22px;
}

.slw-ferry-search-header h1 {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
}

.slw-ferry-search-header p {
    color: rgba(255,255,255,.85);
}

/* Search card */
.slw-ferry-search-card {
    padding: 22px;
    background: rgba(255,255,255,.98);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0,0,0,.12);
}

/* Override Bootstrap row with CSS Grid */
.slw-ferry-search-card form .row {
    display: grid !important;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(0, 2fr)
        minmax(75px, .8fr)
        minmax(75px, .8fr)
        minmax(0, 1.4fr)
        65px;
    gap: 12px !important;
    align-items: end;
    margin: 0 !important;
}

/* Reset Bootstrap column widths */
.slw-ferry-search-card form .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.slw-ferry-search-card .slw-ferry-label {
    white-space: nowrap;
    font-size: 11px;
    margin-bottom: 8px;
}

.slw-ferry-search-card .slw-ferry-input {
    height: 46px;
    font-size: 12px;
}

.slw-ferry-search-card .slw-ferry-hint {
    font-size: 9px;
}

.slw-ferry-search-btn {
    height: 46px;
    min-height: 46px;
    padding: 8px;
}

/* =========================================
   AVAILABLE ROUTES - SIDEBAR + LISTING
========================================= */

.slw-ferry-listing-section {
    padding: 40px 0 60px;
    background: #fff;
}

.slw-ferry-listing-heading {
    margin-bottom: 25px;
}

/* Main listing row */
.slw-ferry-listing-section > .container > .row.g-4 {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 25px !important;
    align-items: start;
    margin: 0 !important;
}

/* Reset Bootstrap columns */
.slw-ferry-listing-section > .container > .row.g-4 > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Sidebar */
.slw-ferry-sidebar {
    position: relative;
    width: 100%;
    max-height: 700px;
    overflow-y: auto;
    padding: 18px;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
    background: #fff;
}

/* Cards column */
.slw-ferry-results {
    width: 100%;
    min-width: 0;
}

/* Ferry cards */
.slw-ferry-card {
    width: 100%;
    grid-template-columns: 245px minmax(0, 1fr);
}

/* =========================================
   RESPONSIVE SEARCH
========================================= */

@media (max-width: 1199px) and (min-width: 768px) {

    .slw-ferry-search-card form .row {
        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(0, 1.5fr)
            minmax(75px, .7fr)
            minmax(75px, .7fr)
            minmax(0, 1.2fr)
            55px;
        gap: 8px !important;
    }

    .slw-ferry-listing-section > .container > .row.g-4 {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 18px !important;
    }

    .slw-ferry-card {
        grid-template-columns: 190px minmax(0, 1fr);
    }
}

/* Tablet and mobile */
@media (max-width: 767px) {

    .slw-ferry-search-section {
        padding: 28px 0;
    }

    .slw-ferry-search-header h1 {
        font-size: 23px;
    }

    .slw-ferry-search-card {
        padding: 16px;
    }

    .slw-ferry-search-card form .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 10px !important;
    }

    .slw-ferry-search-card form .row > [class*="col-"] {
        width: 100% !important;
    }

    /* Date and search button full width */
    .slw-ferry-search-card form .row > :nth-child(5),
    .slw-ferry-search-card form .row > :nth-child(6) {
        grid-column: 1 / -1;
    }

    .slw-ferry-search-btn {
        width: 100%;
    }

    /* Listing becomes one column */
    .slw-ferry-listing-section > .container > .row.g-4 {
        display: flex !important;
        flex-direction: column;
        gap: 18px !important;
    }

    .slw-ferry-sidebar {
        display: none;
    }

    .slw-ferry-card {
        display: block;
    }
}

/* ==========================================================
   SLW FERRY DETAIL PAGE - append to the existing common CSS
   No separate listing/detail framework is required.
   ========================================================== */
.slw-ferry-detail-page {
    padding: 34px 0 52px;
    background: #f7f9fb;
}
.slw-ferry-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 370px;
    gap: 30px;
    align-items: start;
}
.slw-ferry-detail-main { min-width: 0; }
.slw-ferry-detail-gallery {
    position: relative;
    height: 390px;
    overflow: hidden;
    border-radius: 20px;
    background: #e8eef1;
    box-shadow: 0 10px 30px rgba(20, 48, 65, .08);
}
.slw-ferry-detail-gallery > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slw-ferry-gallery-tag {
    position: absolute; left: 18px; bottom: 18px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 30px;
    color: #fff; background: rgba(0, 91, 91, .92);
    font-size: 12px; font-weight: 700;
}
.slw-ferry-detail-heading { padding: 25px 2px 18px; }
.slw-ferry-eyebrow { display: block; color: #ff573b; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 7px; }
.slw-ferry-detail-heading h1 { color: #123d49; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; font-weight: 750; margin: 0 0 15px; }
.slw-ferry-detail-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.slw-ferry-detail-tags span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid #e2e9ed; border-radius: 7px; color: #526773; background: #fff; font-size: 12px; }
.slw-ferry-detail-tags i { color: #087b78; }
.slw-ferry-trust-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 17px; margin: 0 0 20px; border: 1px solid #e8eef1; border-radius: 14px; background: #fff; }
.slw-ferry-trust-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.slw-ferry-trust-icon, .slw-ferry-section-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 11px; color: #087b78; background: #e9f6f4; font-size: 18px; }
.slw-ferry-trust-item strong, .slw-ferry-trust-item small { display: block; }
.slw-ferry-trust-item strong { color: #203d49; font-size: 12px; }
.slw-ferry-trust-item small { color: #84939b; font-size: 10px; margin-top: 3px; }
.slw-ferry-info-card { padding: 23px 25px; margin-bottom: 18px; border: 1px solid #e7edf0; border-radius: 15px; background: #fff; box-shadow: 0 5px 18px rgba(20, 48, 65, .035); }
.slw-ferry-section-title { display: flex; align-items: center; gap: 13px; margin-bottom: 17px; }
.slw-ferry-section-title h2 { color: #183f4b; font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.slw-ferry-section-title p { color: #89979e; font-size: 12px; margin: 0; }
.slw-ferry-info-copy { color: #596d77; font-size: 14px; line-height: 1.75; margin: 0; }
.slw-ferry-rich-content { color: #5a6d76; font-size: 14px; line-height: 1.8; }
.slw-ferry-rich-content > :last-child { margin-bottom: 0; }
.slw-ferry-rich-content ul, .slw-ferry-rich-content ol { padding-left: 21px; margin: 0 0 12px; }
.slw-ferry-rich-content li { padding-left: 4px; margin-bottom: 7px; }
.slw-ferry-rich-content li::marker { color: #0a8a83; }

.slw-ferry-booking-column { min-width: 0; }
.slw-ferry-booking-card { position: sticky; top: 105px; overflow: hidden; border: 1px solid #e4ebee; border-radius: 17px; background: #fff; box-shadow: 0 12px 34px rgba(16, 52, 67, .09); }
.slw-ferry-booking-card-head { padding: 22px 23px 18px; color: #fff; background: linear-gradient(125deg, #06463f, #087b78); }
.slw-ferry-booking-card-head > span { color: #a9e3da; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.slw-ferry-booking-card-head h2 { color: #fff; font-size: 21px; font-weight: 750; margin: 7px 0 4px; }
.slw-ferry-booking-card-head p { color: rgba(255,255,255,.78); font-size: 12px; margin: 0; }
.slw-ferry-booking-form { padding: 20px 22px 18px; }
.slw-ferry-price-box { display: flex; justify-content: space-between; align-items: center; padding: 0 0 18px; margin-bottom: 17px; border-bottom: 1px dashed #dce5e8; }
.slw-ferry-price-box small { display: block; color: #83939a; font-size: 11px; }
.slw-ferry-price-value { color: #ff573b; font-size: 27px; font-weight: 800; line-height: 1.35; margin: 2px 0; }
.slw-ferry-price-value span { font-size: 15px; }
.slw-ferry-price-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; color: #087b78; background: #e9f6f4; font-size: 20px; }
.slw-ferry-form-field { margin-bottom: 15px; min-width: 0; }
.slw-ferry-form-field label { display: block; color: #294550; font-size: 12px; font-weight: 700; margin-bottom: 7px; }
.slw-ferry-form-field label i { color: #087b78; margin-right: 5px; }
.slw-ferry-form-field label span { color: #ef5947; }
.slw-ferry-form-field .form-control { min-height: 44px; border: 1px solid #dce5e9; border-radius: 8px; color: #405761; background-color: #fff; font-size: 12px; box-shadow: none; }
.slw-ferry-form-field .form-control:focus { border-color: #0b8982; box-shadow: 0 0 0 3px rgba(11,137,130,.1); }
.slw-ferry-form-field > small:not(.slw-ferry-error) { display: block; color: #91a0a6; font-size: 10px; margin-top: 5px; }
.slw-ferry-error { display: block; color: #dc3545; font-size: 11px; margin: -2px 0 5px; }
.slw-ferry-passenger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.slw-ferry-book-submit { width: 100%; min-height: 48px; display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 5px; border: 0; border-radius: 8px; color: #fff; background: #ff573b; font-size: 13px; font-weight: 750; transition: background .2s ease, transform .2s ease; }
.slw-ferry-book-submit:hover { color: #fff; background: #ed492e; transform: translateY(-1px); }
.slw-ferry-secure-note { color: #89989f; text-align: center; font-size: 10px; margin: 12px 0 0; }
.slw-ferry-secure-note i { color: #0a8a83; margin-right: 4px; }

.slw-similar-ferry-section { padding: 45px 0 65px; overflow: hidden; background: #fff; }
.slw-similar-ferry-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 23px; }
.slw-similar-ferry-heading h2 { color: #173e4a; font-size: 27px; font-weight: 750; margin: 0 0 5px; }
.slw-similar-ferry-heading p { color: #84939b; font-size: 13px; margin: 0; }
.slw-similar-ferry-card { height: 100%; overflow: hidden; border: 1px solid #e5ecef; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(20,48,65,.05); }
.slw-similar-ferry-image { position: relative; display: block; height: 185px; overflow: hidden; background: #e8eef1; }
.slw-similar-ferry-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.slw-similar-ferry-card:hover .slw-similar-ferry-image img { transform: scale(1.04); }
.slw-similar-ferry-image span { position: absolute; left: 13px; top: 13px; padding: 6px 10px; border-radius: 20px; color: #fff; background: #087b78; font-size: 10px; }
.slw-similar-ferry-body { padding: 16px; }
.slw-similar-ferry-body h3 { min-height: 42px; margin: 0 0 14px; font-size: 15px; line-height: 1.4; font-weight: 700; }
.slw-similar-ferry-body h3 a { color: #1d414d; text-decoration: none; }
.slw-similar-ferry-route { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 8px; align-items: center; padding: 12px 0; border-top: 1px solid #edf1f3; border-bottom: 1px solid #edf1f3; }
.slw-similar-ferry-route > div { min-width: 0; }
.slw-similar-ferry-route strong, .slw-similar-ferry-route small { display: block; }
.slw-similar-ferry-route strong { color: #23434e; font-size: 13px; }
.slw-similar-ferry-route small { overflow: hidden; color: #89979e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.slw-similar-ferry-duration { text-align: center; color: #087b78; }
.slw-similar-ferry-duration small { color: #89979e; }
.slw-similar-ferry-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; }
.slw-similar-ferry-footer > span { color: #829198; font-size: 10px; }
.slw-similar-ferry-footer strong { display: block; color: #ff573b; font-size: 15px; }
.slw-similar-ferry-footer a { flex: 0 0 auto; color: #087b78; font-size: 11px; font-weight: 700; text-decoration: none; }
.slw-similar-ferry-pagination { position: static; margin-top: 25px; }
.slw-similar-ferry-pagination .swiper-pagination-bullet-active { background: #087b78; }

@media (max-width: 1199.98px) {
    .slw-ferry-detail-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; }
    .slw-ferry-detail-gallery { height: 340px; }
    .slw-ferry-trust-row { padding: 14px; }
    .slw-ferry-trust-item { gap: 7px; }
    .slw-ferry-trust-icon { width: 36px; height: 36px; flex-basis: 36px; }
}
@media (max-width: 991.98px) {
    .slw-ferry-detail-layout { grid-template-columns: minmax(0, 1fr); }
    .slw-ferry-booking-column { order: -1; }
    .slw-ferry-booking-card { position: static; }
    .slw-ferry-booking-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
    .slw-ferry-price-box, .slw-ferry-passenger-grid, .slw-ferry-book-submit, .slw-ferry-secure-note { grid-column: 1 / -1; }
    .slw-ferry-form-field { margin-bottom: 13px; }
}
@media (max-width: 767.98px) {
    .slw-ferry-detail-page { padding: 20px 0 35px; }
    .slw-ferry-detail-gallery { height: 260px; border-radius: 14px; }
    .slw-ferry-detail-heading { padding: 20px 0 14px; }
    .slw-ferry-detail-heading h1 { font-size: 25px; }
    .slw-ferry-trust-row { grid-template-columns: 1fr; gap: 13px; padding: 15px; }
    .slw-ferry-trust-item small { font-size: 11px; }
    .slw-ferry-info-card { padding: 18px; border-radius: 12px; }
    .slw-ferry-section-title h2 { font-size: 16px; }
    .slw-ferry-booking-form { padding: 17px; }
    .slw-ferry-booking-card-head { padding: 19px 18px; }
    .slw-similar-ferry-section { padding: 35px 0 48px; }
    .slw-similar-ferry-heading h2 { font-size: 23px; }
}
@media (max-width: 480px) {
    .slw-ferry-booking-form { display: block; }
    .slw-ferry-passenger-grid { display: grid; }
    .slw-ferry-detail-gallery { height: 215px; }
    .slw-ferry-detail-tags { gap: 6px; }
    .slw-ferry-detail-tags span { font-size: 10px; padding: 6px 8px; }
    .slw-similar-ferry-image { height: 155px; }
    .slw-similar-ferry-footer { align-items: flex-start; flex-direction: column; }
}
/* ==========================================
   SIMILAR FERRIES - RESPONSIVE CARD LAYOUT
========================================== */

.slw-similar-ferry-section {
    padding: 45px 0 65px;
    background: #fff;
    overflow: hidden;
}

.slw-similar-ferry-section .container {
    max-width: 1280px;
}

.slw-similar-ferry-heading {
    margin-bottom: 25px;
}

.slw-similar-ferry-heading h2 {
    font-size: 26px;
    font-weight: 700;
    color: #123d49;
}

/* Swiper fallback: show grid when JS is unavailable */
.slw-similar-ferry-swiper:not(.swiper-initialized) .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    transform: none !important;
}

.slw-similar-ferry-swiper .swiper-slide {
    height: auto;
    min-width: 0;
}

.slw-similar-ferry-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e5ecef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(20, 48, 65, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.slw-similar-ferry-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(20, 48, 65, .11);
}

.slw-similar-ferry-image {
    position: relative;
    display: block;
    width: 100%;
    height: 190px;
    flex-shrink: 0;
    overflow: hidden;
    background: #e8eef1;
}

.slw-similar-ferry-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slw-similar-ferry-image span {
    position: absolute;
    top: 13px;
    left: 13px;
    padding: 6px 12px;
    border-radius: 20px;
    color: #fff;
    background: #087b78;
    font-size: 11px;
}

.slw-similar-ferry-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 17px;
}

.slw-similar-ferry-body h3 {
    min-height: 42px;
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
}

.slw-similar-ferry-body h3 a {
    color: #183f4b;
    text-decoration: none;
}

.slw-similar-ferry-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 13px 0;
    border-top: 1px solid #edf1f3;
    border-bottom: 1px solid #edf1f3;
}

.slw-similar-ferry-route > div {
    min-width: 0;
}

.slw-similar-ferry-route strong {
    display: block;
    color: #23434e;
    font-size: 13px;
}

.slw-similar-ferry-route small {
    display: block;
    overflow: hidden;
    color: #89979e;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 5px;
}

.slw-similar-ferry-duration {
    text-align: center;
    color: #087b78;
}

.slw-similar-ferry-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 15px;
}

.slw-similar-ferry-footer > span {
    color: #829198;
    font-size: 11px;
}

.slw-similar-ferry-footer strong {
    display: block;
    color: #ff573b;
    font-size: 17px;
}

.slw-similar-ferry-footer a {
    flex-shrink: 0;
    color: #087b78;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.slw-similar-ferry-pagination {
    position: static;
    margin-top: 25px;
}

.slw-similar-ferry-pagination .swiper-pagination-bullet-active {
    background: #087b78;
}

/* Tablet */
@media (max-width: 991px) {
    .slw-similar-ferry-swiper:not(.swiper-initialized) .swiper-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 575px) {
    .slw-similar-ferry-swiper:not(.swiper-initialized) .swiper-wrapper {
        grid-template-columns: 1fr;
    }

    .slw-similar-ferry-image {
        height: 210px;
    }
}

.slw-similar-ferry-swiper {
    width: 100%;
    overflow: hidden;
}

.slw-similar-ferry-swiper .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
}

.slw-similar-ferry-swiper .swiper-slide {
    flex-shrink: 0;
    height: auto;
}

.slw-similar-ferry-controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 18px;
}

.slw-similar-ferry-controls button {
    width: 38px;
    height: 38px;
    border: 1px solid #dce6e9;
    border-radius: 50%;
    background: #fff;
    color: #087b78;
    cursor: pointer;
}

.slw-similar-ferry-controls button:hover {
    background: #087b78;
    color: #fff;
}

.slw-similar-ferry-pagination {
    position: relative !important;
    margin-top: 22px;
}

/* =========================================
   FERRY BOOKING FORM - FIELD WIDTH FIX
========================================= */

.slw-ferry-booking-card,
.slw-ferry-booking-form {
    width: 100%;
    min-width: 0;
}

.slw-ferry-booking-form {
    box-sizing: border-box;
}

.slw-ferry-booking-form .slw-ferry-form-field {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.slw-ferry-booking-form .slw-ferry-form-field label {
    display: block;
    width: 100%;
}

/* Select dropdown and date input */
.slw-ferry-booking-form .slw-ferry-form-field select,
.slw-ferry-booking-form .slw-ferry-form-field input,
.slw-ferry-booking-form .slw-ferry-form-field .form-control,
.slw-ferry-booking-form .slw-ferry-form-field .form-select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px;
    box-sizing: border-box !important;
    flex: 0 0 100% !important;
}

/* Passenger fields - equal two columns */
.slw-ferry-booking-form .slw-ferry-passenger-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
    width: 100%;
}

.slw-ferry-booking-form .slw-ferry-passenger-grid .slw-ferry-form-field {
    width: 100% !important;
    min-width: 0 !important;
}

.slw-ferry-booking-form .slw-ferry-passenger-grid select {
    width: 100% !important;
    min-width: 0 !important;
}

/* Prevent long departure-time text from expanding field */
.slw-ferry-booking-form #departure_time {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Submit button */
.slw-ferry-booking-form .slw-ferry-book-submit {
    display: flex;
    width: 100% !important;
}

/* Desktop and mobile */
@media (max-width: 991px) {
    .slw-ferry-booking-form .slw-ferry-form-field {
        width: 100% !important;
    }
}