/* =====================================================================
   Sailing Adventures — Frontend Stylesheet
   Premium directory styling (trips + boats) + image carousel
   ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. Design Tokens
 * ------------------------------------------------------------------- */
.sa-directory {
    /* Palette — deep sea blues with a warm coral accent */
    --sa-color-primary:        #1d3557;
    --sa-color-primary-hover:  #142845;
    --sa-color-primary-soft:   #e7ecf3;
    --sa-color-accent:         #e76f51;
    --sa-color-accent-hover:   #d65d3f;

    --sa-color-text:           #1a1f2e;
    --sa-color-text-muted:     #6b7383;
    --sa-color-text-subtle:    #9aa3b2;

    --sa-color-bg:             #ffffff;
    --sa-color-surface:        #f7f8fa;
    --sa-color-surface-alt:    #fafbfc;
    --sa-color-border:         #e4e7ec;
    --sa-color-border-strong:  #d0d5dd;

    --sa-color-success:        #0f9d58;
    --sa-color-success-soft:   #e6f5ee;
    --sa-color-danger:         #c0392b;
    --sa-color-danger-soft:    #fceae8;

    /* Typography */
    --sa-font-family:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Layout & Shadows */
    --sa-card-radius:          14px;
    --sa-shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.04);
    --sa-shadow-md:            0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.02);
    --sa-shadow-lg:            0 12px 24px rgba(29, 53, 87, 0.08), 0 4px 8px rgba(0, 0, 0, 0.02);
    
    /* Animation */
    --sa-transition-fast:      0.2s ease;
    --sa-transition-main:      0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    font-family: var(--sa-font-family);
    color: var(--sa-color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.sa-directory * {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------
 * 2. Filter Bar (Airbnb-style search component)
 * ------------------------------------------------------------------- */
.sa-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--sa-color-bg);
    border: 1px solid var(--sa-color-border);
    padding: 16px 24px;
    border-radius: var(--sa-card-radius);
    box-shadow: var(--sa-shadow-sm);
    margin-bottom: 32px;
}

.sa-filter-bar__group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
}

.sa-filter-bar__label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sa-color-text);
}

.sa-filter-bar__select-wrapper {
    position: relative;
    min-width: 200px;
    flex: 1;
}

.sa-filter-bar__select {
    width: 100%;
    appearance: none;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 11px 42px 11px 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--sa-color-text);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.sa-filter-bar__select:hover {
    border-color: #b0bac8;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}

.sa-filter-bar__select:focus {
    outline: none;
    border-color: var(--sa-color-primary);
    box-shadow: 0 0 0 3px var(--sa-color-primary-soft);
}

.sa-filter-bar__select-wrapper::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7383' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.sa-filter-bar__submit {
    background: var(--sa-color-primary);
    color: #ffffff;
    border: none;
    padding: 11px 24px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--sa-transition-fast);
    box-shadow: var(--sa-shadow-sm);
}

.sa-filter-bar__submit:hover {
    background: var(--sa-color-primary-hover);
    box-shadow: var(--sa-shadow-md);
}

/* ---------------------------------------------------------------------
 * 2b. JS-Ready Directory Filters (.sa-directory-filters)
 * ------------------------------------------------------------------- */
.sa-directory-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 28px;
}

.sa-directory-filters__item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sa-directory-filters__label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--sa-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.sa-filter-select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 200px;
    padding: 10px 40px 10px 16px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7383' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    background-size: 10px 6px;
    border: 1px solid var(--sa-color-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--sa-color-text);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sa-filter-select:hover {
    border-color: var(--sa-color-border-strong);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
}

.sa-filter-select:focus {
    outline: none;
    border-color: var(--sa-color-primary);
    box-shadow: 0 0 0 3px var(--sa-color-primary-soft);
}

/* Active/selected state — subtle highlight */
.sa-filter-select.is-active {
    border-color: var(--sa-color-primary);
    background-color: var(--sa-color-primary-soft);
    font-weight: 600;
}

@media (max-width: 640px) {
    .sa-directory-filters {
        flex-direction: column;
        gap: 10px;
    }
    .sa-directory-filters__item {
        width: 100%;
    }
    .sa-filter-select {
        width: 100%;
        min-width: 0;
    }
}

/* ---------------------------------------------------------------------
 * 3. Responsive Grid Layout
 * ------------------------------------------------------------------- */
.sa-grid,
.sa-grid--boats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
    align-items: stretch;
}

/* Kortelės paslėpimas per JS filtrą — display:none be animacijos;
   sklandumas pasiekiamas grid opacity perėjimu JS pusėje. */
.sa-card.is-hidden {
    display: none !important;
}

/* JS-valdomas „rezultatų nerasta" pranešimas */
.sa-directory-no-results {
    text-align: center;
    padding: 56px 24px 48px;
    color: var(--sa-color-text-muted);
}

.sa-directory-no-results.is-hidden {
    display: none !important;
}

.sa-directory-no-results p {
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.6;
}

.sa-reset-filters-btn {
    display: inline-block;
    background: none;
    border: 1px solid var(--sa-color-border-strong);
    border-radius: 8px;
    padding: 8px 20px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sa-color-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sa-reset-filters-btn:hover {
    background: var(--sa-color-primary-soft);
    border-color: var(--sa-color-primary);
    color: var(--sa-color-primary);
}

/* ---------------------------------------------------------------------
 * 4. Premium Airbnb Card Component [PERRAŠYTA CLAUDE]
 * ------------------------------------------------------------------- */
.sa-directory .sa-grid .sa-card,
.sa-directory .sa-grid--boats .sa-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), 
                border-color 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin: 0;
    padding: 0;
    position: relative;
}

.sa-directory .sa-grid .sa-card:hover,
.sa-directory .sa-grid--boats .sa-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(29, 53, 87, 0.14), 0 6px 16px rgba(16, 24, 40, 0.08);
    border-color: #c5d0dc;
}

/* ---------------------------------------------------------------------
 * 5. Media Containers & Image Handling
 * ------------------------------------------------------------------- */
.sa-card__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--sa-color-surface);
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 16px 16px 0 0;
}

.sa-card__image {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.sa-card__image-wrapper img,
.sa-card__image img,
.sa-card__image-wrapper .wp-post-image,
.sa-card__image .wp-post-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    aspect-ratio: 4 / 3 !important;
    transition: transform 0.4s ease;
    will-change: transform;
}

.sa-card:hover .sa-card__image img,
.sa-card:hover .sa-carousel__slide img {
    transform: scale(1.05);
}

/* ---------------------------------------------------------------------
 * 6. Vanilla JS Image Carousel (Trips)
 * ------------------------------------------------------------------- */
.sa-carousel {
    width: 100%;
    height: 100%;
    position: relative;
}

.sa-carousel__track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform var(--sa-transition-main);
}

.sa-carousel__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
}

.sa-carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sa-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--sa-color-text);
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    transition: opacity var(--sa-transition-fast), background var(--sa-transition-fast), transform var(--sa-transition-fast);
}

.sa-carousel__btn--prev { left: 12px; }
.sa-carousel__btn--next { right: 12px; }

.sa-carousel__btn:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.05);
}

.sa-carousel__btn:active {
    transform: translateY(-50%) scale(0.95);
}

.sa-card:hover .sa-carousel__btn {
    opacity: 1;
}

.sa-carousel__dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
    padding: 4px 8px;
    border-radius: 10px;
}

.sa-carousel__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    border: none;
    cursor: pointer;
    transition: transform var(--sa-transition-fast), background var(--sa-transition-fast);
}

.sa-carousel__dot[aria-current="true"] {
    background: #ffffff;
    transform: scale(1.3);
}

/* ---------------------------------------------------------------------
 * 7. Modern SVG Fallback Asset (Placeholder)
 * ------------------------------------------------------------------- */
.sa-card__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sa-color-surface), var(--sa-color-primary-soft));
    position: relative;
}

.sa-card__image-placeholder svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
}

.sa-card__image-placeholder-icon {
    font-size: 3rem;
    filter: drop-shadow(0 2px 4px rgba(29,53,87,0.1));
    z-index: 2;
    transform: translateY(-10px);
}

/* ---------------------------------------------------------------------
 * 8. Badges & Micro-tags
 * ------------------------------------------------------------------- */
.sa-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 6;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--sa-shadow-sm);
}

.sa-badge--beginner {
    background: rgba(231, 111, 81, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.15);
}

/* ---------------------------------------------------------------------
 * 9. Card Content & Hierarchy [PERRAŠYTA CLAUDE]
 * ------------------------------------------------------------------- */
.sa-directory .sa-grid .sa-card .sa-card__body,
.sa-directory .sa-grid--boats .sa-card .sa-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    padding: 22px;
    margin: 0;
    background: transparent;
}

.sa-card__meta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.sa-card__region { color: var(--sa-color-text-muted); }
.sa-card__date { color: var(--sa-color-accent); }

.sa-card__title {
    margin: 0 0 4px 0;
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.sa-card__title a {
    color: var(--sa-color-text);
    text-decoration: none;
    transition: color var(--sa-transition-fast);
}

.sa-card__title a:hover { color: var(--sa-color-primary); }

.sa-card__location {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 12px 0;
    font-size: 0.82rem;
    color: var(--sa-color-text-muted);
}
.sa-card__location-icon { font-size: 0.85em; line-height: 1; }

.sa-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 6px 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sa-color-text);
}
.sa-card__rating-star { color: #f5a623; font-size: 0.95em; }
.sa-card__rating-count { font-weight: 500; color: var(--sa-color-text-muted); }

.sa-card__pricing {
    margin-top: 12px;
    margin-bottom: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--sa-color-border);
    flex-shrink: 0;
}

.sa-price {
    font-size: 1.55rem;
    color: var(--sa-color-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.sa-price strong { font-weight: 800; }
.sa-price small {
    font-size: 0.85rem;
    color: var(--sa-color-text-muted);
    font-weight: 500;
}

/* ---------------------------------------------------------------------
 * 9b. Card CTA Button
 * ------------------------------------------------------------------- */
.sa-card__cta {
    margin-top: auto;
    padding-top: 14px;
}

/* Astra's theme-wide button CSS (`button, .ast-button, .button, input[type=submit]...`)
   paints its own background/color on every <button> in the page. .sa-button
   below already fights this with !important; .sa-card__btn needs the same
   treatment since Teirautis/Plačiau/Book-now are real <button> elements.
   Colors are hardcoded hex, NOT var(--sa-color-primary) — a custom property
   that fails to resolve (wrong load order, stripped by some optimizer, etc.)
   silently falls back to the property's initial value (transparent) even
   though the declaration itself is !important, which looked exactly like
   "white until hover" even after the !important was added. Hardcoding
   removes that failure mode entirely.
   NOTE: deliberately NOT `button.sa-btn`/`a.sa-btn` here — that tag+class
   combo would out-specificity the color-coded .sa-btn--accept/--decline/
   --secondary variants (see sa-front.css) and repaint them all navy. The
   plain .sa-btn base default (also navy) lives in sa-front.css instead,
   at equal specificity to its variants so normal source order applies. */
.sa-card__btn,
.sa-modal-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 11px 20px !important;
    background-color: #0a192f !important;
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    letter-spacing: 0.01em !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 150ms ease, box-shadow 0.2s ease, letter-spacing 0.2s ease;
    box-shadow: 0 2px 6px rgba(29, 53, 87, 0.18);
    box-sizing: border-box;
}

.sa-card__btn:hover, .sa-card__btn:focus,
.sa-modal-btn:hover, .sa-modal-btn:focus {
    background-color: #1e293b !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(29, 53, 87, 0.32);
    letter-spacing: 0.04em;
    text-decoration: none !important;
}

.sa-card__btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(29, 53, 87, 0.18);
}

/* ---------------------------------------------------------------------
 * 10. Specifications Attributes List
 * ------------------------------------------------------------------- */
.sa-meta-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sa-meta-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.sa-meta-list__label { color: var(--sa-color-text-muted); }
.sa-meta-list__value { font-weight: 600; color: var(--sa-color-text); }
.sa-meta-list__value--highlight { color: var(--sa-color-primary); font-weight: 700; }

.sa-slot-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
}

.sa-slot-badge--full {
    background: var(--sa-color-danger-soft);
    color: var(--sa-color-danger);
}

/* ---------------------------------------------------------------------
 * 11. Contact / CTA Section (Bottom-anchored) [PERRAŠYTA CLAUDE]
 * ------------------------------------------------------------------- */
.sa-directory .sa-grid .sa-card .sa-card__contact,
.sa-directory .sa-grid--boats .sa-card .sa-card__contact {
    margin-top: auto;
    width: 100%;
    background: var(--sa-color-surface);
    border-radius: 10px;
    padding: 14px;
    border: 1px solid var(--sa-color-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.sa-card__contact--unlocked strong {
    display: block;
    font-size: 0.72rem;
    color: var(--sa-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
    font-weight: 600;
}

.sa-card__contact--unlocked p {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--sa-color-text);
    line-height: 1.4;
}

.sa-directory .sa-grid .sa-card .sa-card__contact--locked,
.sa-directory .sa-grid--boats .sa-card .sa-card__contact--locked {
    align-items: stretch;
    text-align: center;
}

.sa-card__contact-blur-text {
    margin: 0 0 8px 0;
    font-size: 0.88rem;
    color: var(--sa-color-text-subtle);
    user-select: none;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    opacity: 0.45;
    text-align: center;
    width: 100%;
    line-height: 1.4;
    pointer-events: none;
}

.sa-directory .sa-grid .sa-card .sa-card__contact-btn,
.sa-directory .sa-grid--boats .sa-card .sa-card__contact-btn {
    position: static;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--sa-color-primary);
    color: #ffffff;
    border: 1px solid var(--sa-color-primary);
    padding: 10px 22px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(29, 53, 87, 0.12), 0 2px 4px rgba(29, 53, 87, 0.08);
    transition: background var(--sa-transition-fast), box-shadow var(--sa-transition-fast), transform 150ms ease;
    cursor: pointer;
    box-sizing: border-box;
    z-index: 2;
}

.sa-directory .sa-grid .sa-card .sa-card__contact-btn:hover,
.sa-directory .sa-grid--boats .sa-card .sa-card__contact-btn:hover {
    background: var(--sa-color-primary-hover);
    border-color: var(--sa-color-primary-hover);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(29, 53, 87, 0.25), 0 2px 4px rgba(29, 53, 87, 0.12);
    transform: translateY(-1px);
}

.sa-directory .sa-grid .sa-card .sa-card__contact-btn:active,
.sa-directory .sa-grid--boats .sa-card .sa-card__contact-btn:active {
    transform: translateY(0);
}

/* ---------------------------------------------------------------------
 * 11b. Inquiry Modal
 * ------------------------------------------------------------------- */

/* Full-screen overlay — hidden by default, flex when .is-open */
.sa-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sa-modal-overlay.is-open {
    display: flex;
}

/* Modal content box */
.sa-modal-content {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12);
    animation: saModalIn 0.25s cubic-bezier(0.34, 1.36, 0.64, 1);
}

@keyframes saModalIn {
    from { opacity: 0; transform: scale(0.93) translateY(16px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);     }
}

/* Remove the card-like wrapper inside modal — modal itself is the container */
.sa-modal-content .sa-inquiry-form-wrapper {
    margin: 0;
    border-radius: 20px;
    box-shadow: none;
    border: none;
}

/* Close button — top-right X */
.sa-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.07);
    color: var(--sa-color-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.15s ease, color 0.15s ease;
}

.sa-modal-close:hover {
    background: rgba(0, 0, 0, 0.14);
    color: var(--sa-color-text);
}

@media (max-width: 600px) {
    .sa-modal-overlay { padding: 0; align-items: flex-end; }
    .sa-modal-content {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        animation: saModalInMobile 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
    }
    .sa-modal-content .sa-inquiry-form-wrapper {
        border-radius: 20px 20px 0 0;
    }
    @keyframes saModalInMobile {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0);    }
    }
}

/* ---------------------------------------------------------------------
 * 12. Empty States
 * ------------------------------------------------------------------- */
.sa-no-results,
.sa-directory--empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--sa-color-surface);
    border-radius: var(--sa-card-radius);
    border: 1px dashed var(--sa-color-border-strong);
    color: var(--sa-color-text-muted);
    font-size: 1.05rem;
    width: 100%;
}

/* ---------------------------------------------------------------------
 * 13. System Pagination Architecture
 * ------------------------------------------------------------------- */
.sa-pagination { display: flex; justify-content: center; margin-top: 20px; }
.sa-pagination__list { display: flex; list-style: none; padding: 0; margin: 0; gap: 6px; }

.sa-pagination__item .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-decoration: none;
    color: var(--sa-color-text);
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--sa-transition-fast);
}

.sa-pagination__item a.page-numbers:hover {
    background: var(--sa-color-surface);
    color: var(--sa-color-primary);
}

.sa-pagination__item .page-numbers.current {
    background: var(--sa-color-primary);
    color: #ffffff;
}

.sa-pagination__item .page-numbers.dots {
    background: transparent;
    color: var(--sa-color-text-subtle);
}

/* ---------------------------------------------------------------------
 * 14. Responsive Breakpoints (Directory Cards)
 * ------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .sa-grid, .sa-grid--boats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
    .sa-filter-bar { padding: 12px 14px; }
    .sa-filter-bar__label { flex: 1 1 100%; }
    .sa-carousel__btn { width: 30px; height: 30px; }
}

@media (max-width: 640px) {
    .sa-grid, .sa-grid--boats { grid-template-columns: 1fr; gap: 16px; }
    .sa-card__body { padding: 16px; }
    .sa-card__title { font-size: 1.05rem; }
    .sa-price { font-size: 1.35rem; }
    .sa-meta-list__value--highlight { font-size: 1.05rem; }
    .sa-filter-bar__submit { flex: 1; }
}

/* ---------------------------------------------------------------------
 * 15. Accessibility (Core Web Vitals)
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sa-card, .sa-card img, .sa-carousel__track, .sa-carousel__btn, .sa-carousel__dot {
        transition: none !important;
        transform: none !important;
    }
}

/* ---------------------------------------------------------------------
 * 16. Auth forms (login + register)
 * ------------------------------------------------------------------- */
.sa-auth-container {
    --sa-color-primary:        #1d3557;
    --sa-color-primary-hover:  #142845;
    --sa-color-text:           #1a1f2e;
    --sa-color-text-muted:     #6b7383;
    --sa-color-text-subtle:    #9aa3b2;
    --sa-color-bg:             #ffffff;
    --sa-color-surface:        #f7f8fa;
    --sa-color-border:         #e4e7ec;
    --sa-color-border-strong:  #d0d5dd;
    --sa-color-danger:         #c0392b;
    --sa-color-danger-soft:    #fbecea;
    --sa-radius-md:  10px;
    --sa-radius-lg:  12px;
    --sa-radius-xl:  16px;
    --sa-shadow-card: 0 4px 16px rgba(16, 24, 40, 0.06), 0 2px 4px rgba(16, 24, 40, 0.04);
    --sa-transition: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --sa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    font-family: var(--sa-font);
    color: var(--sa-color-text);
    line-height: 1.55;
    display: flex;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.sa-auth-container *, .sa-auth-container *::before, .sa-auth-container *::after { box-sizing: border-box; }
.sa-auth-card { width: 100%; max-width: 440px; background: var(--sa-color-bg); border: 1px solid var(--sa-color-border); border-radius: var(--sa-radius-xl); padding: 36px 32px 28px; box-shadow: var(--sa-shadow-card); }
.sa-auth-card--centered { text-align: center; }
.sa-auth-card--centered .sa-btn { margin-top: 18px; }
.sa-auth-card__header { margin-bottom: 22px; }
.sa-auth-card__title { font-size: 1.5rem; font-weight: 700; color: var(--sa-color-text); }
.sa-auth-card__subtitle { font-size: 0.925rem; color: var(--sa-color-text-muted); }
.sa-auth-card__footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--sa-color-border); text-align: center; font-size: 0.9rem; color: var(--sa-color-text-muted); }
.sa-auth-notice { padding: 12px 14px; margin-bottom: 18px; border-radius: var(--sa-radius-md); font-size: 0.9rem; border: 1px solid transparent; }
.sa-auth-notice--error { background: var(--sa-color-danger-soft); border-color: rgba(192, 57, 43, 0.25); color: var(--sa-color-danger); }
.sa-auth-form { display: flex; flex-direction: column; gap: 16px; }
.sa-auth-form__field { display: flex; flex-direction: column; gap: 6px; }
.sa-auth-form__label { font-size: 0.825rem; font-weight: 600; color: var(--sa-color-text); }
.sa-auth-form__input { width: 100%; height: 44px; padding: 0 14px; font-size: 0.95rem; border: 1px solid var(--sa-color-border-strong); border-radius: var(--sa-radius-md); }
.sa-auth-form__input:focus { outline: none; border-color: var(--sa-color-primary); box-shadow: 0 0 0 3px rgba(29, 53, 87, 0.15); }
.sa-auth-form__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 2px 0 6px; }
.sa-auth-form__checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--sa-color-text-muted); cursor: pointer; }
.sa-auth-form__link { font-size: 0.875rem; font-weight: 600; color: var(--sa-color-primary); text-decoration: none; }
.sa-auth-form__submit { width: 100%; height: 46px; margin-top: 6px; font-size: 0.95rem; }
.sa-auth-form__honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

@media (max-width: 480px) {
    .sa-auth-container { padding: 1.5rem 0.75rem; }
    .sa-auth-card { padding: 28px 22px 22px; border-radius: var(--sa-radius-lg); }
    .sa-auth-card__title { font-size: 1.3rem; }
    .sa-auth-form__row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------------------------------------------------------------------
 * 17. Profile form
 * ------------------------------------------------------------------- */
.sa-profile-container {
    --sa-color-primary:        #1d3557;
    --sa-color-primary-hover:  #142845;
    --sa-color-text:           #1a1f2e;
    --sa-color-text-muted:     #6b7383;
    --sa-color-text-subtle:    #9aa3b2;
    --sa-color-bg:             #ffffff;
    --sa-color-surface:        #f7f8fa;
    --sa-color-border:         #e4e7ec;
    --sa-color-border-strong:  #d0d5dd;
    --sa-color-success:        #0f9d58;
    --sa-color-success-soft:   #e6f5ee;
    --sa-color-danger:         #c0392b;
    --sa-color-danger-soft:    #fbecea;
    --sa-radius-md:  10px;
    --sa-radius-lg:  12px;
    --sa-radius-xl:  16px;
    --sa-shadow-card: 0 4px 16px rgba(16, 24, 40, 0.06), 0 2px 4px rgba(16, 24, 40, 0.04);
    --sa-transition: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --sa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    font-family: var(--sa-font); color: var(--sa-color-text); line-height: 1.55; display: flex; justify-content: center; padding: 2.5rem 1rem;
}

.sa-profile-container *, .sa-profile-container *::before, .sa-profile-container *::after { box-sizing: border-box; }
.sa-profile-card { width: 100%; max-width: 560px; background: var(--sa-color-bg); border: 1px solid var(--sa-color-border); border-radius: var(--sa-radius-xl); padding: 36px 32px 28px; box-shadow: var(--sa-shadow-card); }
.sa-profile-card__header { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--sa-color-border); }
.sa-profile-card__title { font-size: 1.5rem; font-weight: 700; color: var(--sa-color-text); }
.sa-profile-notice { padding: 12px 14px; margin-bottom: 22px; border-radius: var(--sa-radius-md); font-size: 0.92rem; border: 1px solid transparent; display: flex; align-items: flex-start; gap: 8px; }
.sa-profile-notice--success { background: var(--sa-color-success-soft); border-color: rgba(15, 157, 88, 0.25); color: var(--sa-color-success); }
.sa-profile-notice--error { background: var(--sa-color-danger-soft); border-color: rgba(192, 57, 43, 0.25); color: var(--sa-color-danger); }
.sa-profile-form { display: flex; flex-direction: column; gap: 18px; }
.sa-profile-form__field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; }
.sa-profile-form__row { display: flex; gap: 16px; }
.sa-profile-form__label { font-size: 0.825rem; font-weight: 600; color: var(--sa-color-text); }
.sa-profile-form__input { width: 100%; height: 44px; padding: 0 14px; font-size: 0.95rem; border: 1px solid var(--sa-color-border-strong); border-radius: var(--sa-radius-md); }
.sa-profile-form__input:focus { outline: none; border-color: var(--sa-color-primary); box-shadow: 0 0 0 3px rgba(29, 53, 87, 0.15); }
.sa-profile-form__input[readonly] { background: var(--sa-color-surface); color: var(--sa-color-text-muted); cursor: not-allowed; }
.sa-profile-form__submit { align-self: flex-start; height: 46px; padding: 0 28px; margin-top: 8px; }

@media (max-width: 600px) {
    .sa-profile-form__row { flex-direction: column; gap: 18px; }
    .sa-profile-form__submit { align-self: stretch; width: 100%; }
}
@media (max-width: 480px) {
    .sa-profile-container { padding: 1.5rem 0.75rem; }
    .sa-profile-card { padding: 28px 22px 22px; border-radius: var(--sa-radius-lg); }
}

/* ---------------------------------------------------------------------
 * 18. WordPress Plugin Custom Forms Wrapper
 * ------------------------------------------------------------------- */
.sa-form-wrapper,
.sa-inquiry-form-wrapper {
    max-width: 720px;
    margin: 2rem auto;
    padding: 2.5rem 2.5rem 40px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f0f4f8;
    box-shadow: 0 4px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1a1f2e;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
}

.sa-form__title,
.sa-form-wrapper h3,
.sa-inquiry-form-wrapper h3 {
    margin: 0 0 1.75rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1d3557;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.sa-form { display: flex; flex-direction: column; gap: 1.25rem; }
.sa-form-row { display: flex; flex-direction: column; margin: 0; }
.sa-form-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.01em;
}
.sa-form-row .required { color: #ef4444; margin-left: 2px; }
.sa-form-row-group { display: flex; gap: 1rem; margin: 0; }
.sa-form-row-half { flex: 1; min-width: 0; }

.sa-form input[type="text"],
.sa-form input[type="email"],
.sa-form input[type="password"],
.sa-form input[type="tel"],
.sa-form input[type="number"],
.sa-form input[type="date"],
.sa-form input[type="url"],
.sa-form select,
.sa-form textarea {
    width: 100%;
    padding: 11px 16px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #1a1f2e;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.sa-form input::placeholder,
.sa-form textarea::placeholder { color: #9ca3af; }

.sa-form input:hover,
.sa-form select:hover,
.sa-form textarea:hover { border-color: #b0bac8; }

.sa-form input:focus,
.sa-form select:focus,
.sa-form textarea:focus {
    outline: none;
    border-color: #1d3557;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(29, 53, 87, .10);
}

.sa-form textarea { resize: vertical; min-height: 130px; }

/* Custom select arrow */
.sa-form select,
.sa-form__select-wrap select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7383' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
    padding-right: 42px;
}
.sa-form__select-wrap { position: relative; }

/* Submit row — standalone div, NOT a .sa-form-row */
.sa-form-submit {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-top: 8px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
}

.sa-form-privacy {
    margin: 0;
    font-size: 0.78rem;
    color: #9ca3af;
    line-height: 1.5;
    background: none;
}

.sa-form__scope-note {
    margin: 0 0 16px;
    padding: 10px 14px;
    background: var(--sa-color-primary-soft, #e7ecf3);
    color: var(--sa-color-primary, #1d3557);
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.sa-form-direct-contact {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--sa-color-border, #e4e7ec);
    font-size: 0.85rem;
    color: var(--sa-color-text-muted, #6b7383);
    text-align: center;
}
.sa-form-direct-contact a {
    color: var(--sa-color-primary, #1d3557) !important;
    font-weight: 600;
    text-decoration: none;
}
.sa-form-direct-contact a:hover { text-decoration: underline; }

/* Primary buttons — high-specificity chain + align-self to override any flex-stretch */
.sa-inquiry-form-wrapper .sa-form-submit .sa-button,
.sa-form-wrapper .sa-form-submit .sa-button,
.sa-form .sa-form-submit .sa-button,
.sa-inquiry-form-wrapper .sa-button,
.sa-form-wrapper .sa-button,
.sa-form .sa-button,
.sa-button {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: flex-start !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 28px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: #ffffff !important;
    background: #1d3557 !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
    box-shadow: 0 2px 8px rgba(29,53,87,.25) !important;
    text-decoration: none !important;
    line-height: 1 !important;
    box-sizing: content-box !important;
}
.sa-inquiry-form-wrapper .sa-form-submit .sa-button:hover,
.sa-form-wrapper .sa-form-submit .sa-button:hover,
.sa-form .sa-form-submit .sa-button:hover,
.sa-inquiry-form-wrapper .sa-button:hover,
.sa-form-wrapper .sa-button:hover,
.sa-form .sa-button:hover,
.sa-button:hover {
    background: #142845 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(29,53,87,.30) !important;
}
.sa-button:active { transform: translateY(0) !important; }

/* "Siųsti užklausą" specifically (page + modal share .sa-inquiry-form-wrapper)
   was too tall/bulky — same specificity as the shared rule above, so this
   wins via source order without shrinking the hero/calendar buttons that
   also use .sa-button elsewhere. */
.sa-inquiry-form-wrapper .sa-form-submit .sa-button {
    padding: 10px 24px !important;
    font-size: 15px !important;
    border-radius: 6px !important;
    width: auto !important;
    display: inline-block !important;
}

.sa-button-secondary,
.sa-form .sa-button-secondary {
    background: #f0f4f7 !important;
    color: #1d3557 !important;
    box-shadow: none !important;
}
.sa-button-secondary:hover,
.sa-form .sa-button-secondary:hover {
    background: #e2e8f0 !important;
    color: #1d3557 !important;
    box-shadow: none !important;
}

/* Notices */
.sa-notice {
    padding: 12px 16px;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    font-size: 0.9rem;
    border-left: 4px solid;
    line-height: 1.5;
}
.sa-notice-success { background: #f0fdf4; color: #15803d; border-left-color: #22c55e; }
.sa-notice-error   { background: #fef2f2; color: #b91c1c; border-left-color: #f87171; }
.sa-notice-info    { background: #eff6ff; color: #1d4ed8; border-left-color: #60a5fa; }

@media (max-width: 480px) {
    .sa-form-wrapper,
    .sa-inquiry-form-wrapper { margin: 0.75rem; padding: 1.25rem 1.25rem 40px; }
    .sa-form-row-group { flex-direction: column; gap: 1rem; }
    .sa-form-submit { align-items: stretch !important; }
    .sa-inquiry-form-wrapper .sa-form-submit .sa-button,
    .sa-form-wrapper .sa-form-submit .sa-button,
    .sa-form .sa-form-submit .sa-button {
        width: 100% !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   19. SA HYBRID NAVIGATION - CLEAN & ISOLATED RESET
   Suppress Astra's own header elements so only our [sa_header_navigation]
   shortcode is visible. astra_header_display filter (PHP) already prevents
   Astra from rendering its header; these CSS rules are a belt-and-suspenders
   fallback in case the filter fires after output has already started.
   ========================================================================== */
/*
 * #masthead is the outer <header> Astra always renders.
 * #ast-desktop-header / #ast-mobile-header are the builder row wrappers inside it.
 * The PHP filter above (returning 'disabled') is the primary suppression;
 * these rules are a CSS fallback in case the filter fires after output starts.
 */
#masthead,
#ast-desktop-header,
#ast-mobile-header,
.main-header-bar-wrap,
.main-header-bar,
.ast-main-header-bar-alignment,
.ast-above-header-wrap,
.ast-below-header-wrap {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.sa-nav {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e4e7ec !important;
    padding: 0 1.5rem !important;
    box-sizing: border-box !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 999999 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.sa-nav__container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.sa-nav__brand {
    position: relative;
    display: inline-block;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #0a192f !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.sa-nav__brand-text {
    display: inline-block;
    color: #0a192f;
}

/* Wind-sweep shimmer: a translucent highlight travels across the wordmark
   once every 30s (~2.4s sweep), simulating wind catching a sail. Only runs
   where background-clip:text is supported — the @supports guard means
   unsupported browsers simply keep the plain navy text (never transparent
   with no visible fill). background-position is animated on a gradient
   rather than moving any geometry, so there's no layout/paint cost. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .sa-nav__brand-text {
        color: transparent;
        background-image: linear-gradient(
            100deg,
            #0a192f 0%,
            #0a192f 42%,
            rgba(255, 255, 255, 0.9) 50%,
            #0a192f 58%,
            #0a192f 100%
        );
        background-size: 280% 100%;
        background-position: 220% 0;
        -webkit-background-clip: text;
        background-clip: text;
        animation: sa-brand-shimmer 30s ease-in-out infinite;
        will-change: background-position;
    }
}

@keyframes sa-brand-shimmer {
    0%     { background-position: 220% 0; }
    8%     { background-position: -120% 0; }
    8.1%, 100% { background-position: 220% 0; }
}

/* Wave motion: a thin gradient line beneath the text fades in, rolls left
   to right, and fades out in sync with the shimmer above (same ~2.4s
   window every 30s). transform + opacity only, so this stays on the
   GPU-composited path. */
.sa-nav__brand-wave-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(10, 25, 47, 0.55), transparent);
    opacity: 0;
    transform: scaleX(0.4) translateX(-60%);
    transform-origin: left center;
    pointer-events: none;
    animation: sa-brand-wave-pulse 30s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes sa-brand-wave-pulse {
    0%, 100% { opacity: 0; transform: scaleX(0.4) translateX(-60%); }
    1%       { opacity: 0.9; }
    8%       { opacity: 0.9; transform: scaleX(0.9) translateX(60%); }
    8.1%     { opacity: 0; transform: scaleX(0.4) translateX(-60%); }
}

@media (prefers-reduced-motion: reduce) {
    .sa-nav__brand-text { animation: none; }
    .sa-nav__brand-wave-line { animation: none; opacity: 0; }
}

.sa-nav__primary {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2rem !important;
    margin: 0 auto 0 4rem !important;
}

.sa-nav__link {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    /* Top-level items render as either <a> (plain links) or <button>
       (dropdown triggers like "Vartotojo zona ▼") — without a shared box
       model the two sit on different baselines. */
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

/* Defensive: Astra's own default header markup (ul.main-header-menu > li >
   a/button) is currently disabled site-wide via astra_header_display in
   class-sa-navigation.php, so nothing renders it — but keep this in sync
   in case that ever changes, so the same baseline issue can't reappear. */
.main-navigation ul.main-header-menu > li {
    display: inline-flex !important;
    align-items: center !important;
}
.main-navigation ul.main-header-menu > li > a,
.main-navigation ul.main-header-menu > li > button,
.main-navigation ul.main-header-menu > li .ast-menu-toggle {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.sa-nav__actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 12px;
    margin-left: auto;
}

.sa-nav .sa-nav__actions > * {
    display: inline-flex;
    align-items: center;
    margin: 0;
    vertical-align: middle;
}

.sa-nav .sa-nav__actions > ul {
    list-style: none;
    padding: 0;
    gap: 8px;
}

.sa-nav .sa-nav__actions > ul > li {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.sa-nav__btn-cta {
    background: #e76f51 !important;
    color: #ffffff !important;
    padding: 0.65rem 1.25rem !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
}
.sa-nav__btn-cta:hover {
    background: #cf5e3f !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.sa-nav__btn-cta-icon { display: none !important; }

.sa-nav__social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: var(--sa-color-primary-soft, #e7ecf3) !important;
    color: var(--sa-color-primary, #1d3557) !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    flex-shrink: 0;
}
.sa-nav__social-link:hover {
    background: var(--sa-color-primary, #1d3557) !important;
    color: #ffffff !important;
}

/* Mobile hamburger toggle button */
.sa-nav__mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
.sa-nav__mobile-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #0f2942;
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.22s ease;
}
.sa-nav.is-open .sa-nav__mobile-toggle .sa-nav__mobile-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sa-nav.is-open .sa-nav__mobile-toggle .sa-nav__mobile-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sa-nav.is-open .sa-nav__mobile-toggle .sa-nav__mobile-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
    /* Nav bar stays fixed height — never wraps */
    .sa-nav {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        padding: 0 1rem !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 999999 !important;
    }

    .sa-nav__container {
        height: 64px !important;
        flex-wrap: nowrap !important;
        padding: 0 !important;
        gap: 0 !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* Hide primary nav and actions — show hamburger */
    .sa-nav__primary,
    .sa-nav__actions {
        display: none !important;
    }

    .sa-nav__mobile-toggle { display: flex !important; }

    /* Open state: absolute panel below nav bar, overlays page content */
    .sa-nav.is-open .sa-nav__primary,
    .sa-nav.is-open .sa-nav__actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        margin: 0 !important;
        position: absolute !important;
        top: 64px !important;
        left: -1rem !important;
        right: -1rem !important;
        background: #ffffff !important;
        border-top: 1px solid #e4e7ec !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
        padding: 8px 20px !important;
        z-index: 999998 !important;
        text-align: center !important;
    }

    .sa-nav.is-open .sa-nav__actions {
        top: auto !important;
        border-top: none !important;
        box-shadow: none !important;
        border-bottom: 1px solid #e4e7ec !important;
        padding-bottom: 16px !important;
    }

    .sa-nav.is-open .sa-nav__link,
    .sa-nav.is-open .sa-nav__dropdown-toggle {
        font-size: 1rem !important;
        padding: 12px 0 !important;
        width: 100% !important;
        border-bottom: 1px solid #f1f5f9 !important;
        color: #1d3557 !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .sa-nav.is-open .sa-nav__btn-cta {
        display: inline-flex !important;
        width: auto !important;
        height: auto !important;
        min-width: 160px !important;
        align-self: center !important;
        justify-content: center !important;
        margin: 12px 0 !important;
        padding: 0.65rem 1.5rem !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    .sa-nav.is-open .sa-nav__btn-cta-text { display: inline !important; }
    .sa-nav.is-open .sa-nav__btn-cta-icon { display: none !important; }

    .sa-nav.is-open .sa-nav__dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        border-left: 3px solid #e4e7ec !important;
        border-radius: 0 !important;
        margin: 0 0 4px 16px !important;
        width: auto !important;
        padding: 4px 0 !important;
    }
}

/*
 * The 8px gap between the toggle button and the dropdown is bridged by
 * padding-bottom on the parent .sa-nav__dropdown so the hover zone extends
 * through the visual gap — the menu won't collapse as the mouse crosses it.
 */
.sa-nav__dropdown {
    position: relative !important;
    /* Symmetric top+bottom — bottom-only padding made .sa-nav__primary's
       flex centering (align-items: center) visually shift the button
       upward relative to plain <a> siblings that have no padding at all.
       padding-top restores the same vertical center; the bottom half is
       still the intentional hover bridge to the dropdown menu below. */
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.sa-nav__dropdown-toggle {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: auto !important;
    box-sizing: border-box !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    white-space: nowrap !important;
}
.sa-nav__dropdown-toggle:hover { color: #1d3557 !important; }

.sa-nav__chevron {
    font-size: 0.55rem !important;
    opacity: 0.6 !important;
    transition: transform 0.2s ease !important;
}
.sa-nav__dropdown.is-open .sa-nav__chevron,
.sa-nav__dropdown:hover .sa-nav__chevron { transform: rotate(180deg) !important; }

.sa-nav__link--login { color: #4a5568 !important; }

.sa-nav__link--has-sub {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    line-height: inherit !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.sa-nav__dropdown-menu {
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;          /* flush to parent bottom; gap covered by padding-bottom on parent */
    background: #ffffff !important;
    border: 1px solid #e4e7ec !important;
    border-radius: 8px !important;
    width: 220px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    padding: 6px 0 !important;
    display: none !important;
    z-index: 9999999 !important;
}

@media (hover: hover) {
    .sa-nav__dropdown:hover .sa-nav__dropdown-menu { display: block !important; }
}
.sa-nav__dropdown.is-open .sa-nav__dropdown-menu { display: block !important; }

.sa-nav__dropdown-item {
    display: block !important;
    padding: 0.7rem 1.2rem !important;
    color: #344054 !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
}
.sa-nav__dropdown-item:hover { background: #f9fafb !important; }
.sa-nav__dropdown-divider { height: 1px !important; background: #f2f4f7 !important; margin: 4px 0 !important; }

.sa-mobile-only-link { display: none !important; }

/* ==========================================================================
   20. RESPONSIVE / MOBILE NAV OVERRIDES
   ========================================================================== */
@media (max-width: 768px) {
    .sa-nav { height: 70px !important; padding: 0 1rem !important; }
    .sa-nav__container { height: 100% !important; }
    .sa-nav__btn-cta-text { display: none !important; }
    .sa-nav__btn-cta { display: none !important; }
    .sa-nav__btn-cta-icon { display: inline !important; font-size: 1.4rem !important; }
    .sa-nav__primary { gap: 1.25rem !important; margin: 0 auto !important; }
}

@media (max-width: 480px) {
    .sa-nav__container { flex-wrap: nowrap !important; }
    .sa-nav__primary { display: none !important; }
    .sa-mobile-only-link { display: block !important; }
    .sa-nav__dropdown-menu {
        right: 0 !important;
        left: auto !important;
        width: 190px !important;
    }
}

/* ==========================================================================
   21. HOMEPAGE & INTERACTIVE CALENDAR STYLES
   ========================================================================== */
.sa-hero {
    background: linear-gradient(135deg, #1d3557 0%, #457b9d 100%);
    color: #ffffff;
    padding: 6rem 2rem;
    text-align: center;
    border-radius: 12px;
    margin: 2rem auto;
    max-width: 1200px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.sa-hero__title { font-size: 3rem; font-weight: 800; margin-bottom: 1rem; letter-spacing: -0.02em; }
.sa-hero__subtitle { font-size: 1.25rem; max-width: 600px; margin: 0 auto 2rem; opacity: 0.9; line-height: 1.6; }
.sa-hero__cta { display: inline-block; background: #e76f51; color: #ffffff; padding: 0.85rem 2rem; border-radius: 24px; font-weight: 600; text-decoration: none; }
.sa-hero__cta:hover { background: #d85c3f; color: #ffffff; }

.sa-calendar-container {
    max-width: 900px;
    margin: 4rem auto;
    padding: 2rem;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: visible !important;
}

.sa-calendar-grid {
    overflow: visible !important;
}

.sa-calendar-container .sa-calendar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px;
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e4e7ec;
}

.sa-calendar-container .sa-calendar-header > h2,
.sa-calendar-container .sa-calendar-header > h3,
.sa-calendar-container .sa-calendar-header > h4,
.sa-calendar-container .sa-calendar-header > span,
.sa-calendar-container .sa-calendar-header > div:not(#sa-cal-prev):not(#sa-cal-next) {
    flex: 1 1 auto;
    text-align: center;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1f2e;
    letter-spacing: -0.01em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sa-calendar-header #sa-cal-prev,
.sa-calendar-header #sa-cal-next,
.sa-calendar-container #sa-cal-prev,
.sa-calendar-container #sa-cal-next {
    width: auto !important; 
    height: 38px !important;
    padding: 0 16px !important; 
    border-radius: 20px !important; 
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    background: #ffffff;
    color: #1a1f2e;
    border: 1px solid #d0d5dd;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    font-family: inherit;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 150ms ease;
}

.sa-calendar-container #sa-cal-prev:hover,
.sa-calendar-container #sa-cal-next:hover,
.sa-calendar-container #sa-cal-prev:focus-visible,
.sa-calendar-container #sa-cal-next:focus-visible {
    background: #1d3557;
    border-color: #1d3557;
    color: #ffffff;
    outline: none;
    transform: translateY(-1px);
}

.sa-calendar-container #sa-cal-prev:active,
.sa-calendar-container #sa-cal-next:active {
    transform: translateY(0);
}

.sa-calendar-lead { color: #6b7383; font-size: 0.95rem; }
.sa-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.sa-calendar-day-name { text-align: center; font-weight: 700; color: #4a5568; padding: 10px 0; font-size: 0.9rem; text-transform: uppercase; }
.sa-calendar-day { background: #f8fafb; border: 1px solid #e4e7ec; border-radius: 8px; min-height: 85px; padding: 8px; position: relative; display: flex; flex-direction: column; justify-content: space-between; }
.sa-calendar-day--empty { background: transparent !important; border: none !important; }
.sa-calendar-day-number { font-weight: 600; color: #2d3748; font-size: 0.95rem; }
.sa-calendar-events-dots { display: flex; gap: 4px; margin-top: auto; flex-wrap: wrap; }
.sa-calendar-dot { width: 8px; height: 8px; background: #e76f51; border-radius: 50%; display: inline-block; }
.sa-calendar-day--has-events { background: #f0f7fc; border-color: #bee3f8; cursor: pointer; }

/* Premium stilius kalendoriaus tooltip'ui */
.sa-calendar-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px !important;
    padding: 16px !important;
    background: #1d3557 !important; 
    color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(29, 53, 87, 0.25) !important;
    border: none !important;
    z-index: 999999 !important;
    display: none;
}

.sa-calendar-tooltip::after { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    transform: translateX(-50%); 
    border-width: 6px; 
    border-style: solid; 
    border-color: #1d3557 transparent transparent transparent !important; 
}

.sa-calendar-day--has-events:hover .sa-calendar-tooltip { display: block; }
.sa-calendar-tooltip-item { margin-bottom: 6px; font-size: 0.88rem; line-height: 1.4; }

.sa-calendar-tooltip .sa-calendar-trip-link {
    display: block !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding-bottom: 8px !important;
}

.sa-calendar-tooltip .sa-calendar-trip-link:hover { color: #fca311; text-decoration: underline; }

.sa-calendar-tooltip .sa-calendar-trip-link strong {
    display: block !important; 
    color: #e76f51 !important; 
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
}

.sa-calendar-tooltip .sa-calendar-trip-boat {
    display: block !important;
    color: #a9c7d8 !important; 
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.sa-calendar-locked-item { color: #e2e8f0; }
.sa-calendar-lock-link { color: #fca311; text-decoration: none; font-size: 0.8rem; font-weight: 600; display: block; margin-top: 4px; }
.sa-calendar-lock-link:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .sa-calendar-day { min-height: 60px; padding: 4px; }
    .sa-calendar-tooltip { width: 180px; }
    .sa-calendar-container .sa-calendar-header { gap: 10px; }
    .sa-calendar-container #sa-cal-prev, .sa-calendar-container #sa-cal-next { padding: 0 10px !important; height: 34px !important; }
    .sa-calendar-container .sa-calendar-header > h2 { font-size: 1rem; }
}

/* ==========================================================================
   22. CARD DETAIL OVERRIDES (high-specificity corrections)
   ========================================================================== */

/* Boat card: clear old inline-style-based image div */
.sa-card--boat .sa-card__image-wrapper .sa-card__image[style] {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Slot meta items */
.sa-directory .sa-grid .sa-meta-list__item,
.sa-directory .sa-grid--boats .sa-meta-list__item {
    padding: 5px 0;
    border-bottom: 1px solid #f1f5f9;
}
.sa-directory .sa-grid .sa-meta-list__item:last-child,
.sa-directory .sa-grid--boats .sa-meta-list__item:last-child {
    border-bottom: none;
}

/* ============================================================
   20. Hero Section — [sa_hero_section]
   ============================================================ */
.sa-hero--video {
    width: 100%;
    margin: 0;
    border-radius: 0;
    height: 80vh;
    min-height: 450px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #0a1624;
    position: relative;
}

.sa-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.sa-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.sa-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(8, 18, 36, 0.35) 0%,
        rgba(8, 18, 36, 0.60) 55%,
        rgba(8, 18, 36, 0.82) 100%
    );
}

.sa-hero__content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    padding: 0 28px;
    color: #fff;
}

.sa-hero__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 18px;
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, 0.06);
}

.sa-hero__title {
    font-size: clamp(2.2rem, 5.5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.sa-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.175rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 auto 36px;
    max-width: 600px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.sa-hero__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: #fff;
    color: var(--sa-color-primary, #1d3557);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    border-radius: 14px;
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.sa-hero__cta-btn:hover {
    background: #f0f4ff;
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36);
    text-decoration: none;
}

@media (max-width: 768px) {
    .sa-hero__title {
        font-size: 28px !important;
        line-height: 1.15 !important;
    }
    .sa-hero__subtitle {
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin-bottom: 28px !important;
    }
}

@media (max-width: 640px) {
    .sa-hero--video {
        height: 75vh;
        min-height: 480px;
    }
    .sa-hero__cta-btn {
        width: 100%;
        max-width: 340px;
        justify-content: center;
    }
}

/* Form submit button spacing */
.sa-form-submit {
    margin-top: 24px !important;
    position: static !important;
    bottom: auto !important;
}

/* Astra hamburger menu icon color */
.ast-mobile-menu-buttons .ast-button-wrap .menu-toggle,
.ast-mobile-menu-buttons .ast-button-wrap .menu-toggle svg,
.ast-mobile-menu-buttons .ast-button-wrap .menu-toggle svg path,
.ast-mobile-menu-buttons .ast-button-wrap .menu-toggle svg line,
.ast-mobile-menu-buttons .ast-button-wrap .menu-toggle svg rect {
    color: #0f2942 !important;
    fill: #0f2942 !important;
    stroke: #0f2942 !important;
}
.ast-header-break-point .main-header-bar .ast-button-wrap .menu-toggle {
    color: #0f2942 !important;
}

body .ast-mobile-menu-trigger-toggle,
body .ast-mobile-menu-trigger-toggle * {
    color: #0f2942 !important;
    fill: #0f2942 !important;
    stroke: #0f2942 !important;
}

body [data-sa-mega-menu-toggle],
body .menu-toggle .ast-icon {
    fill: #0f2942 !important;
}

/* Form submit button — force static block flow */
.sa-form-submit {
    display: block !important;
    clear: both !important;
    position: static !important;
    margin: 32px 0 0 0 !important;
    width: 100% !important;
}

form.sa-submission-form,
.sa-form-card {
    height: auto !important;
    min-height: 100% !important;
    padding-bottom: 60px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Extra: force form wrapper and its direct parent to expand */
.sa-form-wrapper,
.sa-inquiry-form-wrapper,
.sa-form-wrapper > *,
.sa-inquiry-form-wrapper > * {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
.sa-form-wrapper,
.sa-inquiry-form-wrapper {
    padding-bottom: 80px !important;
    margin-bottom: 40px !important;
    position: relative !important;
}