/* --- Custom Styles for Ayyara Cruises Section --- */

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth; 
}

/* Menggunakan max-width untuk membatasi lebar di layar desktop, sesuai dengan main content */
.ayyara-container {
    max-width: 1000px; /* Menyesuaikan dengan perkiraan lebar wrapper */
    margin-left: auto;
    margin-right: auto;
}

/* --- Custom Styles for Ship Specs and Clickability --- */
.spec-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0; 
}
.spec-item .icon {
    color: #2563eb; /* Blue-600 */
    width: 20px;
    height: 20px;
}
.spec-item .text {
    font-size: 0.95rem; 
    font-weight: 500;
    color: #1f2937;
}
.specs-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}
.specs-link:hover .specs-container {
    border-color: #2563eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* --- Duration Tabs --- */
.duration-nav {
    min-width: 100px;
}
.tab-btn {
    transition: all 0.2s;
    font-weight: 600;
    padding: 12px 16px;
    text-align: center;
}
.tab-btn.active-duration {
    background-color: #2563eb;
    color: white;
    border-radius: 6px 0 0 6px;
}
.tab-btn:not(.active-duration) {
    background-color: #f3f4f6;
    color: #4b5563;
    border-radius: 0;
}
/* Responsif untuk tab durasi di mobile */
@media (max-width: 1023px) {
    .duration-nav {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
    .tab-btn {
        flex-shrink: 0;
        border-radius: 0 !important;
    }
    .tab-btn.active-duration {
        border-bottom: 3px solid #2563eb;
        background-color: white !important;
        color: #2563eb !important;
    }
}


/* --- Inner Tabs (Kabin, Fasilitas) --- */
.inner-tab {
    transition: color 0.2s, border-bottom 0.2s;
    padding-bottom: 8px;
}
.inner-tab.active-inner {
    color: #2563eb; 
    font-weight: 700;
    border-bottom: 3px solid #2563eb;
}
.inner-tab:not(.active-inner) {
    color: #4b5563; 
    font-weight: 500;
    border-bottom: 3px solid transparent;
}

/* Ensure table content is legible */
#price-table-container th {
    text-align: left !important;
}

/*Image Placeholder */