.rm-resource-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    transition: transform .3s;
    contain: layout style paint
}
.rm-resource-container:hover { transform: translateY(-4px) }

.rm-image-container {
    position: relative;
    flex: 1;
    min-width: 300px;
    display: grid;
    gap: 10px;
    padding: 10px;
    contain: layout style paint;
    aspect-ratio: 16/9
}
.rm-main-image { grid-column: 1/-1; position: absolute; width: 100%; height: 100%; display: none }
.rm-main-image.active { display: block }
.rm-main-image img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 8px; transition: transform .3s; will-change: transform; contain: content
}
.rm-main-image img:hover { transform: scale(1.02) }

.rm-content { flex: 1; display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center; margin-top: 50px }
.rm-description { line-height: 1.6; font-size: 1.1rem; text-align: center }

.rm-buy-button,.rm-price {
    background: #0050A8; color: #fff; padding: 5px; border-radius: 8px; font-weight: 600; display: inline-flex; align-items: center
}
.rm-price::before { content: '$'; font-size: .9em; margin-right: .25rem; opacity: .9 }
.rm-buy-button { border: none; padding: 10px; text-transform: uppercase; letter-spacing: .5px }
.rm-buy-button:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37,99,235,.3) }

.next-btn,.prev-btn { position: absolute; top: 50%; transform: translateY(-10%); background: rgba(255,255,255,.9); border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.15) }

.rm-lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.9); display: flex; justify-content: center; align-items: center; z-index: 9999 }
.rm-lightbox-content { position: relative; max-width: 90%; max-height: 90% }
.rm-lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; width: auto; height: auto }
.rm-lightbox-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: #f2acac; border: none; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center }

.prev-btn { left: 10px }
.next-btn { right: 10px }

.rm-layout-left { flex-direction: row }
.rm-layout-right { flex-direction: row-reverse }
.rm-layout-top { flex-direction: column }
.rm-layout-bottom { flex-direction: column-reverse }

.rm-custom-price-item { justify-content: space-between; padding: 5px; margin: 10px auto; box-shadow: 0 2px 8px #f99d5a }
.rm-custom-price-label { font-weight: 600; font-size: 1.3rem }
.rm-custom-price-amount { font-weight: 700; background: #449d00; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
body.dark-mode .rm-custom-price-label { color: var(--light-gray); }

/* New payment UI bits */
.rm-price-selector{margin:10px 0;padding:10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.rm-price-title{font-weight:600;margin-bottom:8px}
.rm-price-option{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:6px;background:#fafafa;margin-bottom:6px}
.rm-gateway-buttons{display:flex;gap:10px;margin-top:12px}
.rm-gateway-btn{background:#0050A8;color:#fff;border:none;border-radius:6px;padding:10px 14px;cursor:pointer}
.rm-btn-crypto{background:#0E9F6E}
