.container{
width: 90%!important;
max-width: 90%!important;
} .moselaner-container {
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
} .moselaner-container * {
box-sizing: border-box;
} .moselaner-container .moselaner-item-title,
.moselaner-container h2,
.moselaner-container h3,
.moselaner-container p {
color: inherit!important;
} .moselaner-filters {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 25px;
margin-bottom: 35px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.moselaner-filter-form {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: end;
}
.moselaner-filter {
display: flex;
flex-direction: column;
}
.moselaner-filter label {
font-weight: 600;
margin-bottom: 8px;
color: #333;
font-size: 14px;
}
.moselaner-filters select,
.moselaner-filters input {
padding: 12px 14px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 14px;
transition: all 0.3s ease;
background: white;
color: #333;
font-weight: 500;
}
.moselaner-filters select:focus,
.moselaner-filters input:focus {
outline: none;
border-color: #dd141a;
box-shadow: 0 0 0 0.2rem rgba(221, 20, 26, 0.15);
}
.moselaner-filters select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dd141a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 40px;
transition: all 0.3s ease;
}
.moselaner-filters select:hover {
border-color: #dd141a;
box-shadow: 0 2px 4px rgba(221, 20, 26, 0.1);
}
.moselaner-filters input:hover {
border-color: #dd141a;
box-shadow: 0 2px 4px rgba(221, 20, 26, 0.1);
}
.moselaner-filters input[type="date"] {
position: relative;
}
.moselaner-filters input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0.8;
cursor: pointer;
filter: invert(18%) sepia(95%) saturate(4460%) hue-rotate(355deg) brightness(91%) contrast(95%);
transition: opacity 0.3s ease;
}
.moselaner-filters input[type="date"]:hover::-webkit-calendar-picker-indicator {
opacity: 1;
}
.moselaner-button {
background: #dd141a;
color: white;
border: 2px solid #dd141a;
padding: 12px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
text-align: center;
min-width: 100px;
}
.moselaner-button:hover {
background: #b8111a;
border-color: #b8111a;
box-shadow: 0 4px 8px rgba(221, 20, 26, 0.2);
}
.moselaner-button:active {
background: #9a0e15;
border-color: #9a0e15;
transform: translateY(1px);
}
.moselaner-filter:last-child {
display: flex;
gap: 12px;
justify-content: flex-start;
}
.moselaner-button-reset {
background: transparent;
color: #dd141a;
border: 2px solid #dd141a;
margin-left: 0;
}
.moselaner-button-reset:hover {
background: #dd141a;
color: white;
box-shadow: 0 4px 8px rgba(221, 20, 26, 0.2);
} .moselaner-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-bottom: 30px;
} @media (max-width: 1200px) {
.moselaner-filter-form {
max-width: 100%;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
}
@media (max-width: 992px) {
.moselaner-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.moselaner-filters {
padding: 20px 15px;
}
.moselaner-filter-form {
grid-template-columns: 1fr;
gap: 15px;
}
.moselaner-filter:last-child {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.moselaner-button {
padding: 16px 20px;
font-size: 16px;
width: 100%;
}
.moselaner-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.moselaner-item-content {
padding: 16px;
}
.moselaner-item-price {
font-size: 14px;
padding: 6px 12px;
}
}
.moselaner-item {
border: 1px solid #e9ecef;
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: white;
display: flex;
flex-direction: column;
height: 100%;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.moselaner-item:hover {
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(221, 20, 26, 0.15);
}
.moselaner-item-image {
position: relative;
height: 200px;
overflow: hidden;
}
.moselaner-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.moselaner-item-price {
position: absolute;
top: 0;
left: 0;
background: #dd141a;
color: white;
padding: 8px 16px;
font-weight: bold;
font-size: 16px;
border-radius: 0 0 8px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
z-index: 2;
}
.moselaner-item-content {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.moselaner-container .moselaner-item .moselaner-item-title,
.moselaner-grid .moselaner-item .moselaner-item-title {
font-size: 18px!important;
font-weight: 700!important;
margin-bottom: 12px!important;
color: black!important;
line-height: 1.3!important;
}
.moselaner-container .moselaner-item .moselaner-item-title a,
.moselaner-grid .moselaner-item .moselaner-item-title a {
text-decoration: none!important;
color: inherit!important;
}
.moselaner-container .moselaner-item .moselaner-item-title a:hover,
.moselaner-grid .moselaner-item .moselaner-item-title a:hover {
color: #dd141a!important;
}
.moselaner-item-date {
color: #666;
margin-bottom: 10px;
}
.moselaner-item-category {
background: #dd141a;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
display: inline-block;
text-transform: uppercase;
}
.moselaner-item-info {
flex-grow: 1;
margin-bottom: 15px;
}
.moselaner-item-actions {
margin-top: auto;
}
.moselaner-item-country,
.moselaner-item-dates {
color: #666;
margin-bottom: 8px;
font-size: 14px;
}
.moselaner-item-theme {
color: #dd141a;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
} .moselaner-pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 30px;
}
.moselaner-pagination a {
padding: 8px 12px;
border: 1px solid #ddd;
text-decoration: none;
color: #333;
border-radius: 4px;
transition: all 0.3s ease;
}
.moselaner-pagination a:hover,
.moselaner-pagination a.active {
background: #dd141a;
color: white;
border-color: #dd141a;
} .moselaner-detail {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.moselaner-detail h2 {
color: #333;
margin-bottom: 20px;
}
.moselaner-detail img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 20px;
} .bdates {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.bdates thead {
background: #f5f5f5;
}
.bdates th,
.bdates td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.bdates th {
font-weight: bold;
color: #333;
}
.bdates tbody tr:hover {
background: #f9f9f9;
}
.bdates .lnkBooking {
background: #4CAF50;
color: white;
padding: 8px 16px;
text-decoration: none;
border-radius: 4px;
display: inline-block;
transition: background 0.3s ease;
}
.bdates .lnkBooking:hover {
background: #45a049;
} .availability-indicator {
font-weight: bold;
padding: 4px 8px;
border-radius: 4px;
display: inline-block;
font-size: 14px;
}
.availability-green {
color: #2e7d32;
background-color: #e8f5e8;
border: 1px solid #4caf50;
}
.availability-yellow {
color: #ef6c00;
background-color: #fff3e0;
border: 1px solid #ff9800;
}
.availability-red {
color: #c62828;
background-color: #ffebee;
border: 1px solid #f44336;
}
.availability-indicator::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px;
}
.availability-green::before {
background-color: #4caf50;
}
.availability-yellow::before {
background-color: #ff9800;
}
.availability-red::before {
background-color: #f44336;
} .moselaner-texts {
margin: 30px 0;
}  .moselaner-back {
margin-top: 30px;
text-align: center;
}
.moselaner-back .button {
background: #dd141a;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px;
display: inline-block;
transition: background 0.3s ease;
}
.moselaner-back .button:hover {
background: #dd141a;
} @media (max-width: 1024px) {
.bdates {
border: none !important;
background: transparent !important;
box-shadow: none !important;
width: 100% !important;
table-layout: auto !important;
}
.bdates thead {
display: none !important;
}
.bdates tbody {
display: block !important;
}
.bdates tr {
display: block !important;
margin-bottom: 15px !important;
background: white !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
border: 1px solid #e9ecef !important;
overflow: hidden !important;
width: 100% !important;
}
.bdates td {
display: block !important;
padding: 12px 15px !important;
border: none !important;
border-bottom: 1px solid #f0f0f0 !important;
position: relative !important;
min-height: 20px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.bdates td:last-child {
border-bottom: none !important;
padding: 15px !important;
text-align: center !important;
background: #f8f9fa !important;
} .bdates .lnkBooking {
padding: 12px 20px !important;
font-size: 14px !important;
font-weight: 600 !important;
display: block !important;
width: 100% !important;
text-align: center !important;
border-radius: 6px !important;
box-sizing: border-box;
}
.booking-unavailable,
.booking-checking {
font-size: 12px !important;
padding: 12px 20px !important;
display: block !important;
width: 100% !important;
text-align: center !important;
border-radius: 6px !important;
box-sizing: border-box;
font-weight: 600;
} .availability-indicator {
font-size: 12px;
padding: 6px 10px;
border-radius: 4px;
display: inline-block;
font-weight: 600;
} .text-section {
margin-bottom: 20px;
border-radius: 8px;
}
.moselaner-detail .text-section h3,
.moselaner-container .text-section h3 {
padding: 12px 16px !important;
font-size: 1.1em !important;
}
.text-content {
padding: 16px;
}
.text-content h4 {
font-size: 1.1em;
margin: 20px 0 15px 0;
padding: 12px 16px;
}
.text-content h5 {
font-size: 1em;
margin: 20px 0 12px 0;
padding: 10px 16px;
}
.text-content p {
padding: 0 8px;
margin-bottom: 12px;
font-size: 14px;
line-height: 1.6;
text-align: left;
}
.text-content ul {
margin: 15px 0;
padding: 12px 16px;
}
.text-content li {
margin-bottom: 6px;
font-size: 14px;
line-height: 1.5;
}
.text-content .intro-paragraph {
margin-bottom: 20px;
padding: 16px;
}
.text-content .intro-paragraph p {
font-size: 1em;
line-height: 1.6;
padding: 0;
} .moselaner-detail {
padding: 15px;
max-width: 100%;
}
.moselaner-detail h2 {
font-size: 1.4em;
margin-bottom: 15px;
padding: 0 5px;
}
.moselaner-detail img {
margin-bottom: 15px;
border-radius: 6px;
}
.moselaner-back {
margin-top: 20px;
padding: 0 5px;
}
.moselaner-back .button {
padding: 14px 24px;
font-size: 16px;
width: 100%;
display: block;
text-align: center;
} .mobile-label {
display: block;
font-weight: bold;
color: #333;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.mobile-value {
display: block;
}
} @media only screen and (max-width: 480px),
only screen and (max-device-width: 480px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 480px) { .bdates {
border: none !important;
background: transparent !important;
box-shadow: none !important;
display: block !important;
}
.bdates thead {
display: none !important;
}
.bdates tbody {
display: block !important;
}
.bdates tr {
display: block !important;
margin-bottom: 12px !important;
background: white !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
border: 1px solid #e9ecef !important;
overflow: hidden !important;
width: 100% !important;
}
.bdates td {
display: block !important;
padding: 10px 12px !important;
border: none !important;
border-bottom: 1px solid #f0f0f0 !important;
position: relative !important;
width: 100% !important;
font-size: 14px !important;
box-sizing: border-box !important;
}
.bdates td:last-child {
border-bottom: none !important;
padding: 15px !important;
text-align: center !important;
background: #f8f9fa !important;
}
.mobile-label {
display: block !important;
font-weight: bold !important;
color: #333 !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin-bottom: 3px !important;
}
.mobile-value {
display: block !important;
}
.bdates .lnkBooking {
padding: 10px 15px !important;
font-size: 13px !important;
min-height: 44px !important; display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
box-sizing: border-box !important;
}
.booking-unavailable,
.booking-checking {
padding: 10px 15px !important;
font-size: 11px !important;
min-height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
box-sizing: border-box !important;
}
.availability-indicator {
font-size: 11px !important;
padding: 4px 8px !important;
}
} @media (min-width: 1025px) {
.mobile-label {
display: none;
}
.mobile-value {
display: inline;
}
}  .text-content h4 {
color: #2d3436;
font-size: 1.3em;
font-weight: 700;
margin: 30px 0 20px 0;
padding: 15px 20px;
border-left: 4px solid #dd141a;
background: #f8f9fa;
border-radius: 0 8px 8px 0;
} .text-content .intro-paragraph {
margin-bottom: 25px;
padding: 20px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 8px;
border-left: 4px solid #dd141a;
}
.text-content .intro-paragraph p {
font-size: 1.1em;
line-height: 1.8;
color: #2d3436;
margin: 0;
font-weight: 500;
} .text-content p {
margin-bottom: 18px;
text-align: justify;
line-height: 1.8;
padding: 0 10px;
color: #333;
}
.text-content p:last-child {
margin-bottom: 0;
}
.text-content h5 {
color: #dd141a;
background: #ffffff;
font-size: 1.1em;
font-weight: 600;
margin: 25px 0 15px 0;
padding: 12px 20px;
border-radius: 8px;
border: 2px solid #dd141a;
position: relative;
}
.text-content h5::before {
content: '';
position: absolute;
left: -2px;
top: -2px;
bottom: -2px;
width: 4px;
background: #dd141a;
border-radius: 8px 0 0 8px;
}
.text-content ul {
margin: 20px 0;
padding: 15px 20px;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #dd141a;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.text-content li {
margin-bottom: 8px;
padding-left: 10px;
position: relative;
list-style: none;
}
.text-content li:before {
content: "✓";
color: #dd141a;
font-weight: bold;
position: absolute;
left: -15px;
}
.text-content p {
margin-bottom: 15px;
text-align: justify;
line-height: 1.7;
padding: 0 10px;
color: #333;
} .text-section {
margin-bottom: 40px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
overflow: hidden;
border: 1px solid #e9ecef;
}
.moselaner-detail .text-section h3,
.moselaner-container .text-section h3 {
background: #dd141a!important;
color: white!important;
margin: 0!important;
padding: 18px 24px!important;
font-size: 1.3em!important;
font-weight: 600!important;
}
.text-content {
padding: 24px;
line-height: 1.7;
color: #2d3436;
} .lnkBooking, .lnkOrder {
background: #dd141a !important;
color: white !important;
border: none !important;
padding: 10px 20px !important;
border-radius: 6px !important;
font-weight: 500 !important;
text-decoration: none !important;
display: inline-block !important;
transition: all 0.3s ease !important;
font-size: 14px !important;
position: relative !important;
}
.lnkBooking:hover, .lnkOrder:hover {
background: #b8111a !important;
transform: translateY(-1px) !important;
box-shadow: 0 3px 8px rgba(221, 20, 26, 0.2) !important;
color: white !important;
}
.lnkBooking:active, .lnkOrder:active {
transform: translateY(0) !important;
box-shadow: 0 1px 4px rgba(221, 20, 26, 0.2) !important;
} .text-content h5:hover {
border-color: #b8111a;
transition: all 0.3s ease;
}
.text-section:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
transition: all 0.3s ease;
} .availability-gray {
color: #757575;
background-color: #f5f5f5;
border: 1px solid #bdbdbd;
}
.availability-gray::before {
background-color: #bdbdbd;
} .booking-unavailable {
color: #757575;
font-weight: 600;
font-size: 14px;
padding: 8px 16px;
background: #f5f5f5;
border: 1px solid #bdbdbd;
border-radius: 4px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.booking-checking {
color: #ef6c00;
font-weight: 500;
font-size: 14px;
padding: 8px 16px;
background: #fff3e0;
border: 1px solid #ff9800;
border-radius: 4px;
display: inline-block;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
} .moselaner-404 {
display: flex;
justify-content: center;
align-items: center;
min-height: 500px;
padding: 20px;
}
.moselaner-404-content {
max-width: 600px;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
}
.moselaner-404-hero {
width: 100%;
height: 200px;
overflow: hidden;
}
.moselaner-404-hero-image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.moselaner-404-text {
text-align: center;
padding: 40px 30px;
}
.moselaner-404-title {
color: #dd141a;
font-size: 2rem;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.2;
}
.moselaner-404-message {
color: #666;
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 30px;
}
.moselaner-404-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.moselaner-button-primary {
background: #dd141a;
color: white;
border: 2px solid #dd141a;
}
.moselaner-button-primary:hover {
background: #b8111a;
border-color: #b8111a;
}
.moselaner-button-secondary {
background: transparent;
color: #dd141a;
border: 2px solid #dd141a;
}
.moselaner-button-secondary:hover {
background: #dd141a;
color: white;
}
@media (max-width: 768px) {
.moselaner-404 {
padding: 15px;
}
.moselaner-404-content {
border-radius: 8px;
}
.moselaner-404-hero {
height: 150px;
}
.moselaner-404-text {
padding: 30px 20px;
}
.moselaner-404-title {
font-size: 1.6rem;
}
.moselaner-404-message {
font-size: 1rem;
}
.moselaner-404-actions {
flex-direction: column;
align-items: stretch;
}
.moselaner-404-actions .moselaner-button {
width: 100%;
}
}