/**
 * Copyright © Inn. All rights reserved.
 *
 * Plain CSS (not LESS) so the file can be served as-is via <link>; this avoids
 * the need for a theme-side @import and keeps the widget self-contained.
 * The custom property --inn-osm-height is set inline by the widget block so
 * each instance can carry its own height without a separate stylesheet.
 */

.inn-osm-widget {
    position: relative;
    width: 100%;
    margin: 1.25rem 0;
}

.inn-osm-widget .inn-osm-iframe,
.inn-osm-widget .inn-osm-placeholder {
    width: 100%;
    height: var(--inn-osm-height, 400px);
    border: 0;
    display: block;
    box-sizing: border-box;
    border-radius: 6px;
    overflow: hidden;
}

.inn-osm-widget .inn-osm-placeholder {
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.08)),
        repeating-linear-gradient(
            45deg,
            #f5f5f0 0,
            #f5f5f0 14px,
            #ececec 14px,
            #ececec 28px
        );
    color: #2b2b2b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    border: 1px solid #d8d8d8;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.inn-osm-widget .inn-osm-placeholder:hover,
.inn-osm-widget .inn-osm-placeholder:focus-visible {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    outline: none;
}

.inn-osm-widget .inn-osm-placeholder:focus-visible {
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.4);
}

.inn-osm-widget .inn-osm-placeholder__inner {
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.inn-osm-widget .inn-osm-placeholder__icon {
    color: #444;
    margin-bottom: 0.25rem;
}

.inn-osm-widget .inn-osm-placeholder__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.inn-osm-widget .inn-osm-placeholder__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #555;
}

.inn-osm-widget .inn-osm-placeholder__button {
    appearance: none;
    background: #2b2b2b;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 0.6rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.4rem;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.inn-osm-widget .inn-osm-placeholder__button:hover {
    background: #000;
}

.inn-osm-widget .inn-osm-placeholder__button:active {
    transform: translateY(1px);
}

.inn-osm-widget .inn-osm-placeholder__privacy {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
}

.inn-osm-widget .inn-osm-placeholder__privacy a {
    color: #555;
    text-decoration: underline;
}

.inn-osm-widget .inn-osm-link {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    text-align: right;
}

.inn-osm-widget .inn-osm-link a {
    color: #555;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .inn-osm-widget .inn-osm-iframe,
    .inn-osm-widget .inn-osm-placeholder {
        height: clamp(220px, 60vw, var(--inn-osm-height, 400px));
    }
}