.member-gym-rentals{display:grid;gap:12px;margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid #c9dfd3}
.member-gym-rentals h2{margin:0 0 2px;color:#0d3224;font-size:24px}
.member-gym-rentals .member-gym-card-face{box-sizing:border-box;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,32%);grid-template-rows:auto auto 1fr auto;align-items:center;gap:6px 10px;width:100%;aspect-ratio:1.586;min-height:min-content;padding:14px;border:2px solid #aef0cd;border-radius:8px;background:#063d2c;color:#fff;text-align:left;font:inherit;cursor:pointer}
.member-gym-rentals .member-gym-card-face{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 340' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%2363d39a' stroke-opacity='.33' stroke-width='1.7'%3E%3Cpath d='M206 163L424 0M322 77L420 161M267 276L560 60M327 340L560 171'/%3E%3Ccircle cx='550' cy='173' r='55'/%3E%3C/g%3E%3C/svg%3E");
 background-size:100% 100%;
 background-repeat:no-repeat;
}
.member-gym-card-face::before{content:"";position:absolute;inset:4px;border:1px solid #85bda4;border-radius:5px;pointer-events:none}
.member-gym-card-face:focus-visible{outline:2px solid #178653;outline-offset:3px}
.member-gym-rental{max-width:500px}
.member-gym-rental-top{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.member-gym-rental-brand,.member-gym-rental-status{font-size:13px;font-weight:700}
.member-gym-rental-name{grid-column:1;font-size:28px;line-height:1.12;overflow-wrap:anywhere}
.member-gym-rental-holder{grid-column:1;display:flex;align-items:center;gap:9px;min-width:0;font-size:17px;font-weight:700;overflow-wrap:anywhere}
.member-gym-avatar{display:block;flex:0 0 48px;width:48px;height:48px;padding:3px;border-radius:6px;background:#a5efc5}
.member-gym-avatar img{display:block;width:100%;height:100%;object-fit:contain}
.member-gym-rental-seal{grid-column:2;grid-row:2/4;display:block;width:100%;max-width:168px;justify-self:center;color:#efcc7e;transform:rotate(-7deg) scale(.94)}
.member-gym-rental-status{color:#f2d9b8;text-align:right;white-space:nowrap}
.member-gym-rental-status[data-state=active]{color:#a9f6cd}
.member-gym-rental-status[data-state=upcoming]{color:#c1e1ff}
.member-gym-rental-dates{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));font-size:13px;color:#c5ecd5}
.member-gym-rental-dates>span{min-width:0}
.member-gym-rental-dates>span+span{border-left:1px solid #529a7f;padding-left:10px}
.member-gym-rental-dates time{display:block;margin-top:2px;color:#fff;font-size:15px;font-weight:700}
.member-gym-rentals .member-gym-card-dialog{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;background:transparent;overflow:hidden}
.member-gym-card-dialog::backdrop{background:#031b14e8}
.member-gym-rentals .member-gym-card-dialog .member-gym-card-face{position:absolute;top:50%;left:50%;width:min(94vw,149vh,780px);width:min(94dvw,149dvh,780px);transform:translate(-50%,-50%) scale(var(--card-scale,1));padding:20px;gap:8px 16px}
.member-gym-card-dialog .member-gym-rental-name{font-size:36px}
.member-gym-card-dialog .member-gym-rental-holder{font-size:22px}
.member-gym-card-dialog .member-gym-avatar{flex-basis:68px;width:68px;height:68px}
.member-gym-card-dialog .member-gym-rental-dates time{font-size:20px}
@media(orientation:portrait){
 .member-gym-rentals .member-gym-card-dialog .member-gym-card-face{width:min(94vh,149vw,780px);width:min(94dvh,149dvw,780px);transform:translate(-50%,-50%) rotate(90deg) scale(var(--card-scale,1))}
}