/* F4F AR Viewer — button + modal */

/* Only spacing by default, so the button keeps the theme's native look. */
.f4f-ar-button {
    margin-top: .75em;
}
/* Icon layout applied only when the icon is enabled in settings. */
.f4f-ar-button.f4f-ar-has-icon {
    display: inline-flex;
    align-items: center;
    gap: .4em;
}
.f4f-ar-button.f4f-ar-has-icon::before {
    content: "\1F5BC"; /* framed picture */
    font-size: 1.1em;
    line-height: 1;
}

.f4f-ar-modal[hidden] { display: none; }

.f4f-ar-modal {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vmin;
    box-sizing: border-box;
}

.f4f-ar-modal__backdrop {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(15, 15, 18, .72);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    cursor: pointer; /* lets iOS fire the delegated tap-to-close on this div */
}

.f4f-ar-modal__panel {
    position: relative;
    z-index: 1;
    background: #fff;
    color: #222;
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
    width: min(960px, 100%);
    max-height: 92vh;
    overflow: auto;
    padding: 1.4rem 1.4rem 1.1rem;
}

.f4f-ar-modal__title {
    margin: 0 2rem .8rem 0;
    font-size: 1.25rem;
}

/* Scoped under #f4f-ar-modal and fully reset so theme button styles
   (e.g. Storefront's padding / background / min-width) cannot bleed in. */
#f4f-ar-modal .f4f-ar-modal__close {
    position: absolute;
    top: .6rem;
    right: .7rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-width: 0;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: #f0f0f0;
    color: #333;
    font: 400 1.4rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-shadow: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
#f4f-ar-modal .f4f-ar-modal__close:hover { background: #e2e2e2; color: #333; }

.f4f-ar-stage {
    position: relative;
    width: 100%;
    background: #f4f4f4;
    border-radius: 8px;
    overflow: hidden;
}

/* The canvas's own 1200×800 attributes give it a 3:2 intrinsic ratio, so
   height:auto keeps it responsive without needing CSS aspect-ratio (which
   older iOS Safari lacks — it would otherwise collapse to zero height). */
.f4f-ar-canvas {
    display: block;
    width: 100%;
    height: auto;
}

.f4f-ar-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    color: #555;
    background: rgba(255, 255, 255, .6);
}
.f4f-ar-spinner[hidden] { display: none; }

.f4f-ar-note {
    margin: .8rem 0 0;
    font-size: .85rem;
    color: #666;
    text-align: center;
}

/* Room navigation arrows overlaid on the stage. Scoped + reset like the
   close button so theme button styles cannot distort them. */
#f4f-ar-modal .f4f-ar-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-width: 0;
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 20, 24, .55);
    color: #fff;
    font: 400 1.6rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    transition: background .15s ease;
}
#f4f-ar-modal .f4f-ar-nav:hover { background: rgba(20, 20, 24, .8); }
#f4f-ar-modal .f4f-ar-nav[hidden] { display: none; }
.f4f-ar-nav--prev { left: .6rem; }
.f4f-ar-nav--next { right: .6rem; }

.f4f-ar-bar {
    display: flex;
    justify-content: center;
    min-height: 1.2rem;
    margin-top: .6rem;
}
.f4f-ar-counter {
    font-size: .8rem;
    color: #777;
    letter-spacing: .03em;
}

.f4f-ar-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: .7rem;
    flex-wrap: wrap;
}
#f4f-ar-modal .f4f-ar-action {
    box-sizing: border-box;
    margin: 0;
    padding: .5rem .9rem;
    min-width: 0;
    border: 1px solid #d5d5d8;
    border-radius: 6px;
    background: #f4f4f5;
    color: #333;
    font: 600 .82rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
#f4f-ar-modal .f4f-ar-action:hover { background: #e9e9ea; }
#f4f-ar-modal .f4f-ar-action[hidden] { display: none; }
#f4f-ar-modal .f4f-ar-remove-room { color: #a12; border-color: #e2b8bf; background: #fbf2f3; }
#f4f-ar-modal .f4f-ar-remove-room:hover { background: #f6e6e8; }

/* Locks background scroll while the modal is open. */
body.f4f-ar-open { overflow: hidden; }

/* Phones: full-screen modal + larger tap targets (Apple recommends ~44px). */
@media (max-width: 600px) {
    .f4f-ar-modal { padding: 0; }
    .f4f-ar-modal__panel {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        padding: 1rem .8rem calc(1rem + env(safe-area-inset-bottom));
    }
    .f4f-ar-modal__title { font-size: 1.05rem; margin-right: 2.75rem; }
    #f4f-ar-modal .f4f-ar-modal__close { width: 2.75rem; height: 2.75rem; top: .4rem; right: .4rem; font-size: 1.6rem; }
    #f4f-ar-modal .f4f-ar-nav { width: 2.75rem; height: 2.75rem; }
    #f4f-ar-modal .f4f-ar-action { padding: .7rem 1rem; font-size: .9rem; }
}