@charset "UTF-8";



/* Base styles - Compatible with older Opera versions */

:root {

    --primary-color: #CD2000;

    --secondary-color: #123f8c;

    --accent-color: #FFD800;

    --text-color: #17233d;

    --light-bg: #f5f8ff;

    --white: #ffffff;

    --footer-bg: #0b2f6d;

    --link-color: #123f8c;

    --border-color: #d7e2f6;

}



/* Fallback classes for browsers that don't support CSS variables */

.fallback-primary-bg { background-color: #CD2000; }

.fallback-secondary-bg { background-color: #123f8c; }

.fallback-accent-bg { background-color: #FFD800; }

.fallback-light-bg { background-color: #f5f8ff; }

.fallback-white-bg { background-color: #ffffff; }



.fallback-primary-color { color: #CD2000; }

.fallback-secondary-color { color: #123f8c; }

.fallback-accent-color { color: #FFD800; }

.fallback-text-color { color: #17233d; }

.fallback-white-color { color: #ffffff; }



html {

    font-size: 16px;

    line-height: 1.5;

    scroll-behavior: smooth;

}



body {

    font-family: 'Inter', 'Arial', sans-serif;

    margin: 0;

    padding: 0;

    /* Fallback colors for older Opera versions */

    background-color: #f5f8ff;

    background-color: var(--light-bg);

    color: #333333;

    color: var(--text-color);

}



/* Typography */

h1 {

    font-size: 2.5rem;

    color: #CD2000;

    margin-bottom: 1rem;

    line-height: 1.2;

    font-weight: 700;

}



h2 {

    font-size: 2rem;

    color: #CD2000;

    margin-bottom: 0.8rem;

    line-height: 1.3;

    font-weight: 600;

}



h3 {

    font-size: 1.75rem;

    color: #CD2000;

    margin-bottom: 0.6rem;

    line-height: 1.3;

    font-weight: 500;

}



p {

    margin-bottom: 1rem;

    line-height: 1.6;

    font-size: 1.1rem;

}



/* Links */

a {

    color: #123f8c;

    text-decoration: none;

    transition: color 0.3s ease;

}



a:hover {

    color: #CD2000;

    text-decoration: underline;

}



/* Layout */

.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Lists */

ul, ol {

    margin: 1rem 0;

    padding-left: 2rem;

}



li {

    margin-bottom: 0.5rem;

}



/* Tables */

table {

    width: 100%;

    border-collapse: collapse;

    margin: 1rem 0;

}



th, td {

    padding: 0.75rem;

    text-align: left;

    border: 1px solid #ddd;

}



th {

    background-color: #f8f9fa;

    font-weight: bold;

}



/* Images */

img {

    max-width: 100%;

    height: auto;

    display: block;

    margin: 1rem 0;

}



/* Make all images square (1:1) while preserving responsiveness. Use aspect-ratio where supported and a fallback. */

img {

    /* Prefer aspect-ratio to enforce 1:1 */

    aspect-ratio: 1 / 1;

    /* Ensure the image covers the square area without distortion */

    object-fit: cover;

    /* For older browsers, enforce a height equal to width as a fallback using inline-block (keeps responsiveness) */

    height: auto; /* keep default for most contexts; aspect-ratio will control it when supported */

}



/* Forms */

form {

    margin: 1rem 0;

}



input, textarea, select {

    width: 100%;

    padding: 0.5rem;

    margin-bottom: 1rem;

    border: 1px solid #ddd;

    border-radius: 4px;

}



button {

    padding: 0.5rem 1rem;

    background-color: #123f8c;

    color: white;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    transition: background-color 0.3s ease;

}



button:hover {

    background-color: #0b2f6d;

    color: white;

}



/* Responsive design */

@media (max-width: 768px) {

    html {

        font-size: 15px; /* Немного уменьшаем для лучшей мобильной читаемости */

    }



    .container {

        padding: 0 15px;

    }

    

    /* Оптимизируем размеры для планшетов */

    p {

        font-size: 1.05rem;

    }

}



/* Code blocks */

code {

    background-color: #f8f9fa;

    padding: 0.2rem 0.4rem;

    border-radius: 3px;

    font-family: 'Courier New', Courier, monospace;

}



pre {

    background-color: #f8f9fa;

    padding: 1rem;

    border-radius: 4px;

    overflow-x: auto;

}



/* Custom classes */

.highlight {

    background-color: #FFD800;

    padding: 1rem;

    border-radius: 4px;

    margin: 1rem 0;

}



.note {

    background-color: #d4edda;

    padding: 1rem;

    border-radius: 4px;

    margin: 1rem 0;

}



.warning {

    background-color: #f8d7da;

    padding: 1rem;

    border-radius: 4px;

    margin: 1rem 0;

}



/* Header and Navigation */

header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    background-color: var(--white);

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    z-index: 1000;

}



/* Make nav a flex container so logo and links can align horizontally */

nav {

    padding: 1rem 0;

    display: flex;

    align-items: center;

    gap: 1rem;

}



nav ul {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    justify-content: flex-end;

    gap: 1rem;

    align-items: center;

    flex: 1 1 auto; /* allow ul to take available space */

}



/* Logo inline with nav */

.nav-logo {

    display: inline-flex;

    align-items: center;

    text-decoration: none;

}

.nav-logo img {

    height: 35px;

    width: auto;

    display: block;

}



/* On wide screens keep logo to the left and navigation links to the right */

@media (min-width: 769px) {

    nav { padding-left: 20px; padding-right: 20px; }

    .nav-logo { order: 0; }

    nav ul { order: 1; }

}



nav a {

    color: var(--primary-color);

    text-decoration: none;

    padding: 0.5rem 1rem;

    font-weight: 500;

    transition: all 0.3s ease;

}



nav a:hover {

    color: var(--secondary-color);

}



/* Hero Section */

.hero {

    padding: 4rem 0 4rem;

    background: linear-gradient(135deg, #CD2000 0%, #CD2000 58%, #FFD800 100%);

    color: var(--white);

    text-align: center;

    margin-top: 4rem;

}



.hero h1 {

    font-size: 2.5rem;

    margin-bottom: 1rem;

    color: var(--white);

    line-height: 1.2;

    letter-spacing: -0.02em;

    font-weight: 700;

    opacity: 0;

    animation: hero-fade-in 1.5s ease-out 0.2s forwards;

}

@keyframes hero-fade-in {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.hero .lead {

    font-size: 1.1rem;

    margin-bottom: 1.5rem;

    opacity: 0.9;

}



.cta-button {

    display: inline-block;

    padding: 1rem 2rem;

    background-color: #05aa23;

    color: white;

    text-decoration: none;

    border-radius: 30px;

    transition: transform 0.3s ease;

}



.cta-button:hover {

    background-color: #05aa23;

    color: white;

    transform: translateY(-3px);

}

.cta-button--primary {

    background-color: #CD2000;

    font-weight: 700;

    letter-spacing: 0.2px;

    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);

}

.cta-button--primary:hover {

    background-color: #CD2000;

}



/* Back link on detail pages */

.back-link {

    color: var(--primary-color);

    text-decoration: none;

    font-weight: 600;

    display: inline-block;

    margin-top: 1rem;

}

.back-link:hover {

    text-decoration: underline;

}



/* Prominent booking button for detail pages */

.booking-button {

    display: inline-block;

    background: #123f8c;

    color: white;

    padding: 0.8rem 1.2rem;

    border-radius: 8px;

    text-decoration: none;

    font-weight: 700;

}

.booking-button:hover {

    background: #0b2f6d;

    color: white;

    transform: translateY(-2px);

}



/* Footer */

footer {

    padding: 2rem 0;

    background-color: var(--primary-color);

    color: var(--white);

    text-align: center;

    margin-top: auto;

}



/* About Section */

.about {

    padding: 3rem 0;

    background-color: var(--white);

}



.about-content {

    display: grid;

    grid-template-columns: 3fr 2fr;

    gap: 4rem;

    align-items: center;

}



.skills-list {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    padding: 0;

    list-style: none;

}



.skills-list li {

    background-color: var(--light-bg);

    padding: 0.5rem 1rem;

    border-radius: 20px;

    font-size: 1rem;

    width: 250px;

}







.profile-img {

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    display: block;

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}



/* Projects Section */

.projects {

    padding: 3rem 0;

    background-color: var(--light-bg);

    /* local card variables */

    --card-radius: 12px;

    --card-gap: 1.5rem;

    --card-transition: 260ms cubic-bezier(.2,.9,.3,1);

    --card-elevation: 0 6px 20px rgba(24,49,82,0.12);

    --card-bg: var(--white);

}



.project-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: var(--card-gap);

    margin-top: 3rem;

    align-items: stretch;

    max-width: 1200px;

    margin-left: auto;

    margin-right: auto;

    width: 100%;

}



.project-card {

    background: var(--card-bg);

    border-radius: var(--card-radius);

    overflow: hidden;

    box-shadow: var(--card-elevation);

    display: flex;

    flex-direction: column;

    position: relative; /* needed so .badge (absolute) positions against the card */

    transition: transform var(--card-transition), box-shadow var(--card-transition);

    will-change: transform;

}



.project-card img {

    width: 100%;

    height: 180px;

    object-fit: cover;

    display: block;

}



.project-info {

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    align-items: center;

    padding: 0.75rem 0.5rem 0.1rem;

    margin: 0;

    background-color: var(--white);

}



.project-info .info-left {

    margin: 0;

    color: var(--text-color);

    font-size: 1rem;

}



.project-info .info-right {

    margin: 0;

    color: var(--text-color);

    font-size: 1rem;

    text-align: right;

}



.project-card > h3 {

    margin: 0.1rem 0.5rem 0.25rem;

    font-size: 1rem;

    color: var(--primary-color);

}

.project-card > p {

    margin: 0 1rem 1rem;

    color: var(--text-color);

    font-size: 1rem;

    flex: 1 0 auto;

}



.project-links {

    display: flex;

    gap: 0.5rem;

    padding: 0.75rem 1rem 1rem;

    margin-top: auto; /* push links to bottom of the card */

    align-items: center;

}



/* Universal button styles - based on project-links .button but without flex properties */

.button {

    display: inline-block;

    text-align: center;

    padding: 0.6rem 0.9rem;

    border-radius: 8px;

    background: #123f8c;

    color: white;

    text-decoration: none;

    transition: transform var(--card-transition), box-shadow var(--card-transition);

    font-size: 0.9rem;

    line-height: 1.2;

    letter-spacing: 0.01em;

    word-wrap: break-word;

    white-space: nowrap;

    cursor: pointer;

    border: none;

    font-weight: 500;

}



.button:hover,

.button:focus {

    background: #0b2f6d;

    color: white;

    transform: translateY(-4px);

    box-shadow: 0 10px 28px rgba(44,62,80,0.18);

}



.button:focus-visible {

    outline: 2px solid var(--accent-color);

    outline-offset: 2px;

}



.project-links .button {

    flex: 1 1 auto;

    text-align: center;

    padding: 0.6rem 0.9rem;

    border-radius: 8px;

    background: #123f8c;

    color: white;

    text-decoration: none;

    transition: transform var(--card-transition), box-shadow var(--card-transition);

    font-size: 0.9rem;

    line-height: 1.2;

    letter-spacing: 0.01em;

    font-weight: 500;

    min-width: 0; /* Allow shrinking */

    word-wrap: break-word;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    display: flex;

    align-items: center;

    justify-content: center;

}

.project-links .button:hover,

.project-links .button:focus {

    background: #0b2f6d;

    color: white;

    transform: translateY(-4px);

    box-shadow: 0 10px 28px rgba(44,62,80,0.18);

}

.project-links .button:focus-visible {

    outline: 3px solid rgba(196,215,237,0.45);

    outline-offset: 3px;

}



.project-card:hover,

.project-card:focus-within {

    transform: translateY(-6px);

    box-shadow: 0 16px 40px rgba(24,49,82,0.16);

}



.project-card .badge {

    position: absolute;

    top: 30px;

    left: 8px;

    background: rgba(0,0,0,0.6);

    color: #fff;

    padding: 0.35rem 0.6rem;

    border-radius: 999px;

    font-size: 1rem;

    transition: all 0.3s ease;

    cursor: help;

}



/* Статусы доступности мест */

.project-card .badge.badge-available {

    background: rgba(8, 140, 56, 0.85); /* Зеленый - много мест (≥5) */

}



.project-card .badge.badge-low {

    background: rgba(205, 32, 0, 0.85); /* Мало мест (≤4) */

    animation: pulse 2s infinite;

}



.project-card .badge.badge-full {

    background: rgba(183, 7, 7, 0.85); /* Красный - нет мест */

    font-weight: bold;

}



/* Анимация для badge с малым количеством мест */

@keyframes pulse {

    0%, 100% { transform: scale(1); }

    50% { transform: scale(1.05); }

}



.project-card .badge1 {

    position: absolute;

    top: 30px;

    right: 8px;

    background: rgba(205, 32, 0, 0.821);

    color: #fff;

    padding: 0.35rem 0.6rem;

    border-radius: 999px;

    font-size: 1rem;

}









@media (max-width: 768px) {

    .project-grid {

        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

        gap: 1.25rem;

    }

    .project-links .button {

        padding: 0.5rem 0.7rem;

        font-size: 0.85rem;

    }

    .partners-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 1.25rem;

    }

    .hero {

        margin-top: 70px;

    }

}



@media (max-width: 640px) {

    .hero {

        margin-top: 4rem;

    }

   

    .project-grid {

        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

        gap: 1rem;

    }

    .project-card .badge,

    .project-card .badge1 {

        padding: 0.25rem 0.5rem;

        font-size: 1.1rem;

    }

    .project-card .badge {

        top: 30px;

        left: 6px;

    }

    .project-card .badge1 {

        top: 30px;

        right: 6px;

    }

    .project-info {

        padding: 0.8rem 1rem 0.3rem;

    }

    .project-info .info-left, .project-info .info-right {

        font-size: 1.1rem;

    }

   

    .project-links {

        flex-direction: column;

        gap: 0.5rem;

        padding: 0.75rem 1rem 1rem;

    }

    .project-links .button {

        width: 100%;

        padding: 0.7rem 1rem;

        font-size: 0.9rem;

        white-space: normal;

        text-overflow: unset;

    }

}



@media (max-width: 520px) {

    /* Дополнительные оптимизации для маленьких экранов */

    html {

        font-size: 14px;

    }

    .hero {

        margin-top: 3rem;

    }

    .hero h1 {

        font-size: 2rem;

        letter-spacing: -0.01em;

    }

    

    p {

        font-size: 1rem;

        line-height: 1.5;

    }

    

    .project-card img {

        height: 140px;

    }

    .project-card > h3 {

        font-size: 1rem;

        font-weight: 600;

    }

    .project-grid {

        grid-template-columns: 1fr;

    }

    .project-card .badge,

    .project-card .badge1 {

        padding: 0.2rem 0.4rem;

        font-size: 0.9rem;

    }

    .project-card .badge {

        top: 20px;

        left: 5px;

    }

    .project-card .badge1 {

        top: 20px;

        right: 5px;

    }

    .project-info {

        padding: 0.3rem 0.3rem 0.3rem;

    }

    .project-info .info-left, .project-info .info-right {

        font-size: 1rem;

    }

   

    .project-links {

        flex-direction: column;

        gap: 0.5rem;

    }

}



/* Vertical layout for very small screens */

@media (max-width: 480px) {

    .project-info {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.2rem;

        padding: 0.5rem 0.5rem 0.3rem;

    }

    

    .project-info .info-right {

        text-align: left;

    }

}





/* Hamburger menu for small screens */

.nav-toggle {

    display: none;

    background: #123f8c;

    color: white;

    border: none;

    font-size: 1.2rem;

    padding: 0.45rem 0.6rem;

    cursor: pointer;

    border-radius: 8px;

    box-shadow: 0 4px 10px rgba(44,62,80,0.12);

}

.nav-toggle:hover {

    background: #0b2f6d;

    color: white;

    filter: brightness(0.95);

}

.nav-toggle:focus-visible {

    outline: 3px solid rgba(196,215,237,0.6);

    outline-offset: 3px;

}



@media (max-width: 768px) {

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        width: auto;
        margin: 0;
    }

    nav.container {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.75rem;
        align-items: center;
    }

    nav.container ul {

        display: none; /* hidden until toggle */

        flex-direction: column;

        gap: 0;

        grid-column: 1 / -1;
        grid-row: 2;

        width: 100%;

        margin: 0.5rem 0 0;

        padding: 0.25rem 0;

        border-top: 1px solid rgba(9, 52, 95, 0.12);

        order: initial;

    }

    nav.container.nav-open ul {

        display: flex;

    }

    nav.container ul li {

        width: 100%;

        text-align: left;

    }

    nav.container ul li a {

        display: block;

        padding: 0.75rem 0.5rem;

    }

    .nav-logo {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        margin: 0;
        order: initial;
    }

    .language-switcher {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        order: initial;
    }

}

@media (prefers-reduced-motion: reduce) {

    .project-card,

    .project-links .button {

        transition: none;

        transform: none;

    }

}



/* Partners Section */

.partners {

    padding: 3rem 0;

    background-color: var(--white);

}



.partners h2 {

    text-align: center;

    margin-bottom: 2.5rem;

    color: var(--primary-color);

}



.partners-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1.5rem;

    margin-top: 2rem;

}



.partner-card {

    background: var(--light-bg);

    border-radius: 8px;

    padding: 1.5rem;

    text-align: center;

    text-decoration: none;

    color: inherit;

    transition: all 0.3s ease;

    border: 1px solid #e0e9f3;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.partner-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 16px rgba(9, 52, 95, 0.12);

    border-color: var(--secondary-color);

}



.partner-logo {

    width: 125px;

    height: 125px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1.5rem;

    background: var(--white);

    border-radius: 8px;

    border: 1px solid #e0e9f3;

}



.partner-logo img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}



.partner-card h3 {

    margin: 0 0 0.8rem 0;

    font-size: 1.25rem;

    color: var(--primary-color);

    line-height: 1.3;

}



.partner-card p {

    font-size: 0.95rem;

    color: #666;

    margin: 0;

    flex-grow: 1;

    display: flex;

    align-items: center;

    line-height: 1.5;

}



/* Gallery Section */

.gallery {

    padding: 3rem 0;

    background-color: var(--light-bg);

}



.gallery-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    gap: 1.5rem;

    margin-top: 2rem;

}



.gallery-img {

    width: 100%;

    /* Use aspect-ratio to make square thumbnails; height is determined by width */

    aspect-ratio: 1 / 1;

    height: auto;

    object-fit: cover;

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}





/* Gallery show more button */

.gallery-show-more-container {

    text-align: center;

    margin-top: 2rem;

}



.show-more-btn {

    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));

    color: white;

    border: none;

    padding: 12px 24px;

    font-size: 1rem;

    border-radius: 25px;

    cursor: pointer;

    transition: all 0.3s ease;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    box-shadow: 0 4px 15px rgba(205, 32, 0, 0.3);

}



.show-more-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(205, 32, 0, 0.4);

    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));

}



.show-more-btn:active {

    transform: translateY(0);

}







/* Image protection styles */

.gallery-img,

img {

    user-select: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    pointer-events: auto;

    -webkit-user-drag: none;

    -khtml-user-drag: none;

    -moz-user-drag: none;

    -o-user-drag: none;

}



/* Enhanced Footer Styles */

.footer-content {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 2rem;

    padding: 2rem 0;

}



.footer-section h4 {

    color: var(--accent-color);

    margin-bottom: 1.5rem;

}



/* Footer newsletter form */

.footer-newsletter {

    margin-top: 0.5rem;

    display: flex;

    flex-direction: column; /* stack vertically */

    gap: 0.1rem; /* minimal spacing > 0 */

    align-items: flex-start; /* left-align items */

}

.footer-newsletter input[type="email"] {

    padding: 0.6rem 0.8rem;

    border-radius: 6px;

    border: 1px solid rgba(255,255,255,0.15);

    background-color: rgba(255,255,255,0.05);

    color: var(--white);

    width: 100%;

    max-width: 300px; /* reasonable width for footer */

}

.footer-newsletter input::placeholder {

    color: rgba(255,255,255,0.7);

}

.newsletter-button, .ctn-button {

    padding: 0.5rem 0.7rem;

    background-color: var(--accent-color);

    color: var(--footer-bg);

    border: none;

    border-radius: 6px;

    cursor: pointer;

    width: auto; /* don't stretch full width */

}

.newsletter-button:hover {

    filter: brightness(0.95);

}



/* Accessibility helper (visually-hidden label) */

.visually-hidden {

    position: absolute !important;

    height: 1px; width: 1px;

    overflow: hidden;

    clip: rect(1px, 1px, 1px, 1px);

    white-space: nowrap;

}



@media (max-width: 520px) {

    .footer-newsletter {

        align-items: stretch; /* make input/button full width on small screens */

        padding-right: 0.5rem; /* small inset from the right edge */

    }

    .footer-newsletter input[type="email"],

    .newsletter-button {

        width: 100%;

        max-width: none;

        

    }

}



.footer-section ul {

    list-style: none;

    padding: 0;

}



.footer-section ul li {

    margin-bottom: 0.5rem;

}



.footer-section a {

    color: var(--white);

    text-decoration: none;

    transition: color 0.3s ease;

}



.footer-section a:hover {

    color: var(--accent-color);

}



.footer-bottom {

    padding-top: 2rem;

    border-top: 1px solid rgba(255,255,255,0.1);

}



/* Tour Selection Form Enhancements */

select {

    width: 100%;

    padding: 0.75rem;

    border: 1px solid var(--border-color);

    border-radius: 5px;

    background-color: var(--white);

    color: var(--text-color);

    cursor: pointer;

}



select:focus {

    outline: none;

    border-color: var(--secondary-color);

}



input[type="date"] {

    width: 100%;

    padding: 0.75rem;

    border: 1px solid var(--border-color);

    border-radius: 5px;

    background-color: var(--white);

    color: var(--text-color);

}



.project-card img {

    width: 100%;

    /* Make project images square as well */

    aspect-ratio: 1 / 1;

    height: auto;

    object-fit: cover;

}



.project-card h3 {

    padding: 1.5rem 1.5rem 0.5rem;

    margin: 0;

}



.project-card p {

    padding: 0 1.5rem 1.5rem;

    margin: 0;

    color: #666;

    font-size: 1.3rem;

}



.project-links {

    padding: 0 1.5rem 1.5rem;

    display: flex;

    gap: 1rem;

    margin-top: auto; /* ensure buttons sit at the bottom of the card */

    align-items: center;

}



@media (max-width: 520px) {

    .project-links {

        flex-direction: column;

        gap: 0.5rem;

    }

}



/* Contact Section */

.contact {

    padding: 3rem 0;

    background-color: var(--white);

}

.booking-page .contact {

    padding-top: 5rem;

}

.contact--centered .container {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}



.contact-content {

    display: grid;

    grid-template-columns: 3fr 2fr;

    gap: 4rem;

}

.contact-content--centered {

    display: block;

    width: 100%;

    max-width: 720px;

    margin: 0 auto;

}

.contact-content--centered .contact-info {

    width: 100%;

    text-align: center;

}

.contact-content--centered .social-links {

    justify-content: center;

}

.contact-content--centered .cta-button {

    margin-left: auto;

    margin-right: auto;

}



.form-group {

    margin-bottom: 1.5rem;

}



label {

    display: block;

    margin-bottom: 0.5rem;

    font-weight: 500;

}



input, textarea {

    width: 100%;

    padding: 0.75rem;

    border: 1px solid #ddd;

    border-radius: 5px;

    transition: border-color 0.3s ease;

}



input:focus, textarea:focus {

    outline: none;

    border-color: var(--secondary-color);

}

.form-group.has-field-error input,
.form-group.has-field-error select,
.form-group.has-field-error textarea,
.checkbox-group.has-field-error .checkmark {

    border-color: #c62828;

    background-color: #fff5f5;

}

.field-tip {

    margin-top: 0.45rem;

    color: #9f1d1d;

    font-size: 0.9rem;

    line-height: 1.35;

}

.form-inline-notice {

    margin-bottom: 1rem;

    padding: 0.8rem 1rem;

    border-radius: 6px;

    font-size: 0.95rem;

    line-height: 1.4;

}

.form-inline-notice-error {

    background: #fff2f2;

    border: 1px solid #f0b6b6;

    color: #8f1717;

}

.form-inline-notice-success {

    background: #edf8ef;

    border: 1px solid #aad8b4;

    color: #1d6b32;

}

.booking-success-notice {

    display: grid;

    gap: 0.45rem;

    padding: 1.1rem 1.25rem;

    font-size: 1.05rem;

    border-width: 2px;

}

.booking-success-notice strong {

    font-size: 1.25rem;

}

.booking-success-order {

    font-weight: 700;

    color: #145225;

}



.submit-button {

    background-color: #123f8c;

    color: white;

    padding: 1rem 2rem;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    transition: background-color 0.3s ease;

}



/* Checkbox styles for newsletter subscription */

.checkbox-group {

    margin-bottom: 1.5rem;

}



.checkbox-label {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    cursor: pointer;

    font-weight: normal;

    font-size: 0.7em; /* Уменьшен на 30% от базового размера */

    margin-bottom: 0;

    position: relative;

    padding-left: 25px;

    user-select: none;

}



.checkbox-label input[type="checkbox"] {

    position: absolute;

    opacity: 0;

    cursor: pointer;

    height: 0;

    width: 0;

}



.checkmark {

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    height: 16px;

    width: 16px;

    background-color: #fff;

    border: 2px solid #ddd;

    border-radius: 3px;

    transition: all 0.3s ease;

    flex-shrink: 0;

}



.checkbox-label:hover .checkmark {

    border-color: var(--secondary-color);

}



.checkbox-label input[type="checkbox"]:checked ~ .checkmark {

    background-color: var(--secondary-color);

    border-color: var(--secondary-color);

}



.checkmark:after {

    content: "";

    position: absolute;

    display: none;

}



.checkbox-label input[type="checkbox"]:checked ~ .checkmark:after {

    display: block;

}



.checkbox-label .checkmark:after {

    left: 5px;

    top: 1px;

    width: 5px;

    height: 8px;

    border: solid white;

    border-width: 0 2px 2px 0;

    transform: rotate(45deg);

}



.checkbox-error .checkmark {

    border-color: #e74c3c !important;

    background-color: #ffeaea !important;

    animation: shake 0.3s ease-in-out;

}



.checkbox-error .checkbox-label {

    color: #e74c3c;

}



.payment-radio-label {

    font-size: 0.95rem;

    padding-left: 28px;

    margin-bottom: 6px;

}



.payment-radio-label:last-child {

    margin-bottom: 0;

}



.payment-radio-label input[type="radio"] {

    position: absolute;

    opacity: 0;

    cursor: pointer;

    height: 0;

    width: 0;

}



.payment-radio-label .checkmark {

    border-radius: 50%;

}



.payment-radio-label .checkmark:after {

    left: 4px;

    top: 4px;

    width: 6px;

    height: 6px;

    border: none;

    border-radius: 50%;

    background-color: var(--secondary-color);

    transform: none;

}



.payment-radio-label input[type="radio"]:checked ~ .checkmark {

    background-color: #fff;

    border-color: var(--secondary-color);

}



.payment-radio-label input[type="radio"]:checked ~ .checkmark:after {

    display: block;

}



@keyframes shake {

    0%, 100% { transform: translateY(-50%) translateX(0); }

    25% { transform: translateY(-50%) translateX(-2px); }

    75% { transform: translateY(-50%) translateX(2px); }

}



.submit-button:hover {

    background-color: #123f8c;

    color: white;

}



.contact-info {

    padding: 2rem;

    background-color: var(--light-bg);

    border-radius: 10px;

    font-size: 1rem;

}



.social-links {

    margin-top: 2rem;

    display: flex;

    gap: 1rem;

}



.footer-section .social-links {

    justify-content: center;

}

.social-links a {

    color: var(--primary-color);

    width: 32px;

    height: 32px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 32px;

    font-size: 0;

    line-height: 0;

    transition: color 0.3s ease;

}



.social-links a:hover {

    color: var(--secondary-color);

}



.social-icon {

    width: 24px;

    height: 24px;

    display: block;

    object-fit: contain;

    transition: transform 0.3s ease, opacity 0.3s ease;

}



.social-links a:hover .social-icon {

    transform: scale(1.1);

    opacity: 0.8;

}



/* Responsive Design */

@media (max-width: 768px) {

    .hero h1 {

        font-size: 2.3rem;

    }

    

    .about-content,

    .contact-content {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    

    .about-image {

        order: -1;

    }

    

    nav ul {

        justify-content: center;

    }

}



/* Container */

.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 1.5rem;

}



/* Trip detail page helpers */

.trip-page {

    padding: 6rem 1rem 4rem;

}

.celojums-hero {

    display: grid;

    grid-template-columns: 360px 1fr;

    gap: 1.5rem;

    align-items: start;

}

.celojums-image {

    width: 100%;

    height: auto;

    border-radius: 8px;

    box-shadow: 0 6px 18px rgba(0,0,0,0.12);

}

.trip-section {

    margin-top: 2rem;

}



/* Filters Section */

.filters {

    background-color: var(--white);

    padding: 0.5rem;

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.08);

    margin-bottom: 0.5rem;

}



.filter-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 0.6rem;

    margin-bottom: 0.25rem;

}



.date-group {

    display: grid;

    grid-template-columns: repeat(2, minmax(180px, 1fr));

    gap: 0.6rem;

}



@media (max-width: 768px) {

    .filter-grid {

        gap: 0.5rem;

    }

    

    .date-group {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 0.5rem;

    }

    

    .partners-grid {

        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

        gap: 1.5rem;

    }

}



.filter-group {

    display: flex;

    flex-direction: column;

}



.filter-group label {

    margin-bottom: 0.3rem;

    font-weight: 500;

    color: var(--text-color);

    font-size: 0.85rem;

}



.filter-group input {

    padding: 0.6rem 0.9rem;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    font-size: 0.9rem;

    line-height: 1.2;

    max-width: 160px;

}

.filter-group input[type="date"] {

    width: 180px;

    min-width: 180px;

    max-width: 180px;

}

.filter-group input[type="date"]::-webkit-calendar-picker-indicator {

    width: 2rem;

    height: 2rem;

    margin-left: 0.35rem;

    padding: 0.15rem;

    cursor: pointer;

}



/* Горизонтальное расположение чекбоксов */

.checkbox-filters-row {

    display: flex;

    gap: 1rem;

    padding: 0.75rem 0;

    background-color: transparent;

    align-items: center;

}



.checkbox-inline {

    margin-bottom: 0 !important;

    padding-left: 28px;

}



.checkbox-inline .checkbox-box {

    display: inline-block;

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    height: 18px;

    width: 18px;

    background-color: #fff;

    border: 2px solid var(--border-color);

    border-radius: 3px;

    transition: all 0.3s ease;

}



.checkbox-inline input[type="checkbox"]:checked ~ .checkbox-box {

    background-color: var(--secondary-color);

    border-color: var(--secondary-color);

}



.checkbox-inline input[type="checkbox"]:checked ~ .checkbox-box:after {

    display: block;

}



.checkbox-inline .checkbox-box:after {

    content: "";

    position: absolute;

    left: 5px;

    top: 2px;

    width: 5px;

    height: 8px;

    border: solid white;

    border-width: 0 2px 2px 0;

    transform: rotate(45deg);

    display: none;

}



.checkbox-inline span:not(.checkbox-box) {

    font-size: 0.9rem;

    color: var(--text-color);

    user-select: none;

}



@media (max-width: 768px) {

    .checkbox-filters-row {

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 0.5rem 1rem;

        padding: 0.5rem 0;

    }

    

    .checkbox-inline {

        padding-left: 28px;

        width: 100%;

    }

}



@media (max-width: 520px) {

    .date-group {

        grid-template-columns: 1fr;

    }

    

    .checkbox-filters-row {

        grid-template-columns: 1fr;

    }

}



.filter-buttons {

    display: flex;

    gap: 0.75rem;

}



.filter-apply, .filter-reset {

    padding: 0.6rem 0.9rem;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    font-weight: 500;

    transition: all 0.3s ease;

    font-size: 0.9rem;

    line-height: 1.2;

}



.filter-apply {

    background-color: #123f8c;

    color: white;

}



.filter-apply:hover {

    background-color: #0b2f6d;

    color: white;

}



.filter-reset {

    background-color: var(--light-bg);

    color: var(--text-color);

    border: 1px solid var(--border-color);

}



.filter-reset:hover {

    background-color: var(--accent-color);

}



.show-more-container {

    text-align: center;

    margin-top: 3rem;

}



.show-more-button {

    display: inline-block;

    padding: 1rem 2rem;

    background-color: #123f8c;

    color: white;

    text-decoration: none;

    border-radius: 8px;

    font-weight: 500;

    transition: all 0.3s ease;

}



.show-more-button:hover {

    background-color: #0b2f6d;

    color: white;

    transform: translateY(-2px);

}



/* Responsive: stack image above info on small screens for trip pages */

@media (max-width: 768px) {

    .trip-page {

        padding: 5rem 1rem 3rem;

    }

    .celojums-hero {

        grid-template-columns: 1fr;

    }

    .celojums-image {

        max-width: 100%;

        margin-bottom: 0.75rem;

    }

}



/* Utility Classes */

.text-center {

    text-align: center;

}



.mb-0 { margin-bottom: 0; }

.mb-1 { margin-bottom: 1rem; }

.mb-2 { margin-bottom: 2rem; }

.mb-3 { margin-bottom: 3rem; }



.mt-0 { margin-top: 0; }

.mt-1 { margin-top: 1rem; }

.mt-2 { margin-top: 2rem; }

.mt-3 { margin-top: 3rem; }



/* Utility classes */

.text-center {

    text-align: center;

}



.text-right {

    text-align: right;

}



.mt-1 { margin-top: 1rem; }

.mt-2 { margin-top: 2rem; }

.mb-1 { margin-bottom: 1rem; }

.mb-2 { margin-bottom: 2rem; }

.mx-auto {

    margin-left: auto;

    margin-right: auto;

}



/* Form Notifications */

.form-notification {

    margin: 1rem 0;

    padding: 1rem;

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    animation: slideIn 0.3s ease-out;

    position: relative;

}



.form-notification.success {

    background-color: #d4edda;

    border: 1px solid #c3e6cb;

    color: #155724;

}



.form-notification.error {

    background-color: #f8d7da;

    border: 1px solid #f5c6cb;

    color: #721c24;

    /* Специальные стили для ошибок валидации под кнопкой */

    margin-top: 0.75rem;

    font-size: 0.95rem;

}



.notification-content h4 {

    margin: 0 0 0.5rem 0;

    font-size: 1.2rem;

}



.notification-content p {

    margin: 0.5rem 0;

    font-size: 1.3rem;

}



.notification-content button {

    margin-top: 0.5rem;

    padding: 0.5rem 1rem;

    background-color: transparent;

    border: 1px solid currentColor;

    border-radius: 4px;

    color: inherit;

    cursor: pointer;

    transition: background-color 0.3s ease;

}



.notification-content button:hover {

    background-color: rgba(0,0,0,0.1);

}



@keyframes slideIn {

    from {

        opacity: 0;

        transform: translateY(-20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Form loading state */

.submit-button:disabled {

    background-color: #6c757d;

    cursor: not-allowed;

    opacity: 0.7;

}





/* Cookie Consent Banner */

.cookie-consent-banner {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    width: 100%;

    background-color: var(--primary-color);

    color: var(--white);

    padding: 1.5rem;

    z-index: 99999;

    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3);

    animation: slideUp 0.3s ease-in-out;

    box-sizing: border-box;

}



.cookie-consent-content {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 2rem;

}



.cookie-consent-banner p {

    margin: 0;

    font-size: 0.95rem;

    line-height: 1.5;

    flex: 1;

}



.cookie-consent-banner a {

    color: var(--link-color);

    text-decoration: underline;

}



.cookie-consent-banner a:hover {

    text-decoration: none;

}



.cookie-consent-buttons {

    display: flex;

    gap: 1rem;

    flex-shrink: 0;

}



.cookie-btn {

    padding: 0.6rem 1.2rem;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    font-size: 0.95rem;

    font-weight: 600;

    transition: all 0.3s ease;

    white-space: nowrap;

}



.cookie-accept {

    background-color: var(--accent-color);

    color: var(--primary-color);

}



.cookie-accept:hover {

    background-color: #e8eefc;

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}



.cookie-decline {

    background-color: transparent;

    color: var(--white);

    border: 2px solid var(--white);

}



.cookie-decline:hover {

    background-color: rgba(255, 255, 255, 0.1);

    transform: translateY(-2px);

}



@media (max-width: 768px) {

    .cookie-consent-content {

        flex-direction: column;

        align-items: flex-start;

        gap: 1rem;

    }



    .cookie-consent-buttons {

        width: 100%;

        flex-direction: column;

    }



    .cookie-btn {

        width: 100%;

    }

}



@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(100%);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* ===== Image Protection Styles ===== */
img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    pointer-events: none;
}

/* Allow clicks for functional elements */
.nav-logo img,
.social-icon {
    pointer-events: auto;
}

/* ===== Form Validation Error Styles ===== */
.checkbox-label.error {
    border: 2px solid #dc3545;
    padding: 8px;
    border-radius: 4px;
    background-color: #fff5f5;
    animation: shake 0.4s ease-in-out;
}

.checkbox-label.error span::after {
    content: ' ⚠️';
    color: #dc3545;
    font-weight: bold;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* ===== Form Notification Styles ===== */
.form-notification {
    margin: 20px 0;
    padding: 15px;
    border-radius: 8px;
    animation: slideDown 0.3s ease-in-out;
}

.form-notification.success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.form-notification.error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.form-notification button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    margin-top: 10px;
    text-decoration: underline;
}

.form-notification.success button {
    color: #155724;
}

.form-notification.error button {
    color: #721c24;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Language Switcher Styles ===== */
.language-switcher {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 0 10px;
}

.language-switcher .lang-link {
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    font-size: 0.9rem;
}

.language-switcher .lang-link:hover {
    background-color: #f0f0f0;
    border-color: var(--primary-color);
}

.language-switcher .lang-link.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .language-switcher {
        gap: 3px;
        padding: 0 5px;
    }

    .language-switcher .lang-link {
        padding: 4px 8px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .language-switcher {
        gap: 2px;
        padding: 0 3px;
    }

    .language-switcher .lang-link {
        padding: 3px 6px;
        font-size: 0.8rem;
    }
}

/* Quick Categories Section */
.quick-categories {
    padding: 64px 0;
    background: linear-gradient(180deg, #FFD800 0%, #fff1f2 100%);
}

.quick-categories--trips {
    padding: 18px 0 24px;
    background: transparent;
}

.quick-categories h2 {
    text-align: center;
    margin-bottom: 24px;
}

.quick-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.quick-categories-sprite {
    display: none;
}

.quick-category-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #d7e5f3;
    background-color: #ffffff;
    box-shadow: 0 3px 10px rgba(9, 52, 95, 0.08);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.quick-category-card:hover {
    transform: translateY(-2px);
    text-decoration: none;
    border-color: #FFD800;
    box-shadow: 0 7px 18px rgba(9, 52, 95, 0.12);
}

.quick-category-card--active {
    border-color: #123f8c;
    box-shadow: 0 7px 18px rgba(55, 93, 129, 0.18);
}

.quick-category-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
    min-height: 36px;
    max-height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background-color: #123f8c;
    flex-shrink: 0;
    overflow: hidden;
}

.quick-category-icon svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
    max-width: 18px;
    min-height: 18px;
    max-height: 18px;
    display: block;
    flex: 0 0 18px;
    fill: currentColor;
}

.quick-category-icon--full svg {
    width: 30px;
    height: 30px;
    min-width: 30px;
    max-width: 30px;
    min-height: 30px;
    max-height: 30px;
    flex-basis: 30px;
}

.quick-category-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #123f8c;
    line-height: 1.3;
}

.quick-category-card[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    background: #123f8c;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 6px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 6;
}

.quick-category-card[data-tooltip]:hover::after,
.quick-category-card[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
    .quick-categories {
        padding: 36px 0;
    }

    .quick-categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .quick-category-card {
        gap: 8px;
        padding: 9px 10px;
        border-radius: 10px;
        min-height: 54px;
    }

    .quick-category-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        max-width: 30px;
        min-height: 30px;
        max-height: 30px;
    }

    .quick-category-icon svg {
        width: 15px;
        height: 15px;
        min-width: 15px;
        max-width: 15px;
        min-height: 15px;
        max-height: 15px;
        flex-basis: 15px;
    }

    .quick-category-icon--full svg {
        width: 24px;
        height: 24px;
        min-width: 24px;
        max-width: 24px;
        min-height: 24px;
        max-height: 24px;
        flex-basis: 24px;
    }

    .quick-category-label {
        font-size: 0.86rem;
        line-height: 1.2;
    }

    .quick-category-card[data-tooltip]::after {
        display: none;
    }
}

/* Shared FAQ block for tour pages */
.tour-faq-section {
    padding: 20px 0 10px;
}

.tour-faq-section h3 {
    margin-bottom: 12px;
}

.tour-faq-list {
    display: grid;
    gap: 8px;
}

.tour-faq-item {
    border: 1px solid #d6dce3;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.tour-faq-item summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    padding: 12px 14px;
}

.tour-faq-item summary::-webkit-details-marker {
    display: none;
}

.tour-faq-item p {
    margin: 0;
    padding: 0 14px 12px;
    color: #303030;
}

.payment-note {
    display: inline-block;
    margin-left: 6px;
    color: var(--text-color);
    font-size: 0.85em;
    font-weight: 600;
}

.booking-agreement-note {
    margin: 8px 0 0;
    color: var(--text-color);
    font-size: 0.95rem;
    line-height: 1.45;
}

.booking-agreement-note a {
    color: var(--text-color);
    font-weight: 700;
    text-decoration: underline;
}

.order-status-page {
    min-height: 60vh;
    padding: 48px 16px;
    background: var(--background-color, #f6f8fb);
}

.order-status-panel {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 28px;
    background: #FFD800;
    border: 1px solid #d7dde6;
    border-radius: 8px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.08);
}

.order-status-eyebrow {
    margin: 0 0 8px;
    color: var(--primary-color, #153a8a);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.order-status-panel h1 {
    margin: 0 0 10px;
    color: var(--text-color, #1f2937);
    font-size: 32px;
    line-height: 1.2;
}

.order-status-intro {
    margin: 0 0 22px;
    color: var(--text-color, #1f2937);
}

.order-status-message {
    padding: 14px 16px;
    border-radius: 8px;
    font-weight: 700;
}

.order-status-error {
    background: #fff1f2;
    color: #991b1b;
    border: 1px solid #fecdd3;
}

.order-status-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0;
}

.order-status-summary > div {
    padding: 14px;
    border: 1px solid #d7dde6;
    border-radius: 8px;
    background: #f8fafc;
}

.order-status-summary span {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 13px;
}

.order-status-summary strong {
    display: block;
    color: var(--text-color, #1f2937);
    font-size: 18px;
    line-height: 1.25;
}

.order-status-details {
    margin: 0 0 22px;
    padding: 16px;
    border-left: 4px solid var(--primary-color, #153a8a);
    background: #f8fafc;
}

.order-status-details p {
    margin: 0 0 8px;
}

.order-status-details p:last-child {
    margin-bottom: 0;
}

.order-status-panel h2 {
    margin: 22px 0 12px;
    color: var(--text-color, #1f2937);
    font-size: 22px;
}

.order-status-items {
    border: 1px solid #d7dde6;
    border-radius: 8px;
    overflow: hidden;
}

.order-status-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border-bottom: 1px solid #d7dde6;
}

.order-status-item:last-child {
    border-bottom: 0;
}

.order-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.order-status-button,
.order-status-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
}

.order-status-button {
    background: var(--primary-color, #153a8a);
    color: #ffffff;
}

.order-status-secondary {
    border: 1px solid #d7dde6;
    color: var(--text-color, #1f2937);
    background: #ffffff;
}

@media (max-width: 760px) {
    .order-status-panel {
        padding: 20px;
    }

    .order-status-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .order-status-summary {
        grid-template-columns: 1fr;
    }

    .order-status-item {
        flex-direction: column;
        gap: 4px;
    }
}

.extra-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) minmax(74px, auto) 72px;
    gap: 8px;
    margin-bottom: 6px;
    align-items: center;
}

.extra-row span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.extra-row input[type="number"] {
    width: 100%;
    min-width: 0;
}

@media (max-width: 520px) {
    .extra-row {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .extra-row input[type="number"] {
        grid-column: 2;
    }
}

.project-card .badge.badge-on-request {
    background: rgba(205, 32, 0, 0.88);
    font-weight: bold;
}

/* Trips page RyanBus palette */
.trip-page .quick-category-card {
    border-color: rgba(205, 32, 0, 0.16);
    box-shadow: 0 3px 10px rgba(205, 32, 0, 0.08);
}

.trip-page .quick-category-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 7px 18px rgba(205, 32, 0, 0.14);
}

.trip-page .quick-category-card--active {
    border-color: var(--primary-color);
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(205, 32, 0, 0.18);
}

.trip-page .quick-category-icon {
    background-color: var(--primary-color);
    color: var(--accent-color);
    border: 2px solid rgba(255, 216, 0, 0.9);
}

.trip-page .quick-category-card--active .quick-category-icon,
.trip-page .quick-category-card:hover .quick-category-icon {
    background-color: var(--accent-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.trip-page .quick-category-label {
    color: var(--primary-color);
}

.trip-page .quick-category-card[data-tooltip]::after {
    background: var(--primary-color);
}

.trip-page .filter-apply {
    background-color: var(--primary-color);
}

.trip-page .filter-apply:hover {
    background-color: #CD2000;
}

.trip-page .filter-reset {
    background-color: var(--accent-color);
    color: var(--primary-color);
}

.trip-page .filter-reset:hover {
    background-color: #FFD800;
    color: var(--primary-color);
}

.trip-page .project-links .button {
    background: var(--secondary-color);
}

.trip-page .project-links .button:hover,
.trip-page .project-links .button:focus {
    background: #0b2f6d;
}

.trip-page .project-links .button:nth-child(2) {
    background: var(--primary-color);
}

.trip-page .project-links .button:nth-child(2):hover,
.trip-page .project-links .button:nth-child(2):focus {
    background: #CD2000;
}

.trip-page .project-card .badge.badge-available {
    background: rgba(18, 63, 140, 0.9);
}

.trip-page .project-card .badge.badge-low {
    background: rgba(255, 216, 0, 0.94);
    color: var(--text-color);
}

.trip-page .project-card .badge.badge-full,
.trip-page .project-card .badge.badge-on-request {
    background: rgba(205, 32, 0, 0.9);
}