/* Approved Focus film. Product indigo stays separate from website purple. */
.qfilm{position:relative;width:100%;height:450px;min-height:450px;max-width:640px;margin-inline:auto;font-family:var(--font-product,'Inter'),sans-serif;color:#20222a;--purple:#6366f1;--product-tint:#f2f1fc;--ease:cubic-bezier(.16,1,.3,1)}
.qfilm *{box-sizing:border-box}
.qfilm button{font-family:inherit;font-weight:400;line-height:1.4;letter-spacing:normal;text-transform:none;color:inherit;cursor:pointer;box-shadow:none}
.qfilm button:disabled{cursor:default}
.qfilm :focus-visible{outline:3px solid #6366f1;outline-offset:5px}
.qfilm h3,.qfilm h4,.qfilm p{margin:0}
.qfilm h3{font-size:16px;font-weight:600;line-height:1.4}
.qfilm h4{font-size:14px;font-weight:600}
.qfilm .icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.qfilm .meta-icon{display:flex;gap:7px;align-items:center;color:#62616e;font-size:12px}
.qfilm .avatar{width:33px;height:33px;background:#ede6f6;color:#5c28a4;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:500;flex:none}
.qfilm .host-line{display:flex;gap:10px;align-items:center}
.qfilm .host-line strong{display:block;font-size:13px;font-weight:500}
.qfilm .host-line small{display:block;color:#61616d;font-size:11px;margin-top:3px}
.qfilm .month-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.qfilm .month-nav{display:flex;gap:15px;color:#62616e}
.qfilm .weekdays,.qfilm .days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.qfilm .weekdays{color:#62616e;font-size:11px;text-align:center;margin-bottom:12px}
.qfilm .days{row-gap:8px}
.qfilm .day{aspect-ratio:1;border:0;min-width:0;padding:0;border-radius:50%;background:transparent;position:relative;font-size:12px;font-variant-numeric:tabular-nums;transition:background .25s,color .25s,transform .5s var(--ease)}
.qfilm .day:disabled{color:#797885}
.qfilm .day:not(:disabled)::after{content:"";position:absolute;bottom:2px;left:calc(50% - 1px);width:2px;height:2px;border-radius:50%;background:#7541b7}
.qfilm .day[aria-pressed=true]{background:var(--purple);color:#fff}
.qfilm .day[aria-pressed=true]::after{display:none}
.qfilm .day:hover:not(:disabled){background:#eee5f8}
.qfilm .day[aria-pressed=true]:hover{background:var(--purple)}
.qfilm .timezone{margin-top:21px}
.qfilm .slot{position:relative;display:flex;align-items:center;justify-content:space-between;border:1px solid #ddd6e5;border-radius:7px;background:#fff;min-height:43px;padding:11px 13px;gap:8px;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;transition:border-color .22s,background .22s,color .22s}
.qfilm .slot .icon{opacity:0;transform:scale(.8);transition:opacity .25s,transform .3s var(--ease)}
.qfilm .slot[aria-pressed=true]{border-color:#9166c1;background:#f0e8f9;color:var(--purple)}
.qfilm .slot[aria-pressed=true] .icon{opacity:1;transform:none}
.qfilm .slot:hover{border-color:#9166c1}
.qfilm .date-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--purple);margin:13px 0 15px;background:#f4effa;padding:9px 10px;border-radius:6px}
.qfilm .slot-list{display:grid;gap:9px}
.qfilm .selection-meta{color:var(--purple);font-size:12px;line-height:1.5}
.qfilm .native-surface{background:#fff;border:1px solid var(--line);border-radius:12px}
.qfilm .motion-target{will-change:transform,opacity}
.qfilm .film-stage{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 45%}
.qfilm .film-view{position:absolute;width:570px;max-width:100%;top:25px;left:0;display:grid;grid-template-columns:1fr .78fr;transform-origin:50% 55%;overflow:hidden}
.qfilm .film-month{padding:25px 27px 29px}
.qfilm .film-host{margin-bottom:23px}
.qfilm .film-times{padding:26px 23px 25px;border-left:1px solid #e5ddeb}
.qfilm .film-times h3{font-size:15px}
.qfilm .film-view .day{font-size:12px}
.qfilm .film-pick{position:absolute;right:0;bottom:13px;width:315px;max-width:80%;padding:18px 21px;background:white;border:1px solid var(--line);border-radius:10px;display:flex;gap:12px;align-items:center}
.qfilm .film-pick .selection-meta{margin-top:5px}
.qfilm .film-pick h4{font-size:13px}
.qfilm .film-pick .avatar{width:31px;height:31px}
.qfilm .film-book{position:absolute;right:14px;top:-14px;background:#5c28a4;color:#fff;border-radius:6px;padding:8px 12px;font-size:11px;white-space:nowrap}
.qfilm .film-times .slot:nth-child(2){transform-origin:50% 50%}
@media(min-width:1500px){
.qfilm .film-view{top:55px}
.qfilm .film-pick{bottom:32px}
}
@media(max-width:950px){
.qfilm .film-month{padding:22px 17px}
.qfilm .film-times{padding-left:17px;padding-right:17px}
.qfilm .film-times h3{font-size:13px}
.qfilm .day{font-size:11px}
.qfilm .weekdays,.qfilm .days{gap:4px}
.qfilm .slot{padding:10px;font-size:12px}
.qfilm .film-view{top:42px}
}
@media(max-width:700px){
.qfilm .month-title{margin-bottom:18px}
.qfilm .month-title h3{font-size:13px}
.qfilm .month-nav{gap:4px}
.qfilm .month-nav .icon{width:13px;height:13px}
.qfilm .weekdays{font-size:9px}
.qfilm .days{row-gap:9px;gap:3px}
.qfilm .day{font-size:10px}
.qfilm .timezone{font-size:10px;gap:4px;margin-top:20px}
.qfilm .timezone .icon{width:12px;height:12px}
.qfilm .date-label{font-size:10px;padding:8px 5px;gap:3px}
.qfilm .date-label .icon{width:12px;height:12px}
.qfilm .slot{font-size:11px;padding:10px 8px;min-height:39px}
.qfilm .slot .icon{width:12px;height:12px}
.qfilm .selection-meta{font-size:10px}
.qfilm .film-view{top:34px;grid-template-columns:1fr .8fr}
.qfilm .film-month{padding:20px 12px}
.qfilm .film-times{padding:20px 12px}
.qfilm .film-times h3{font-size:12px}
.qfilm .film-host{margin-bottom:23px;gap:6px}
.qfilm .host-line strong{font-size:11px}
.qfilm .host-line small{font-size:10px}
.qfilm .host-line .avatar{width:25px;height:25px;font-size:9px}
.qfilm .film-view .day{font-size:10px}
.qfilm .film-pick{bottom:36px;max-width:88%;padding:16px}
.qfilm .film-pick h4{font-size:12px}
}
@media(max-width:350px){
.qfilm .film-month{padding-inline:9px}
.qfilm .film-times{padding-inline:9px}
.qfilm .slot{padding-inline:5px}
.qfilm .slot .icon{width:10px;height:10px}
}
@media(prefers-reduced-motion:reduce){
.qfilm .motion-target{will-change:auto}
}
.qfilm[data-phase="manual"] .motion-target{will-change:auto}
.qfilm{--purple:#6366f1;--product-tint:#f2f1fc}
.qfilm .film-view{border:0;box-shadow:0 14px 36px rgba(25,23,52,.10),0 2px 7px rgba(25,23,52,.04)}
.qfilm .film-pick{border:0;box-shadow:0 9px 25px rgba(25,23,52,.12),0 2px 5px rgba(25,23,52,.04)}
.qfilm .avatar,.qfilm .date-label{background:var(--product-tint);color:var(--purple)}
.qfilm .day:not(:disabled)::after{background:var(--purple)}
.qfilm .day:hover:not(:disabled):not([aria-pressed=true]){background:var(--product-tint)}
.qfilm .slot[aria-pressed=true]{background:var(--product-tint);border-color:var(--purple);color:var(--purple)}
.qfilm .slot:hover{border-color:var(--purple)}
.qfilm .film-book{background:var(--purple)}
.qfilm :focus-visible{outline-color:var(--purple)}

@media(min-width:1500px){.qfilm{height:480px}}

@media(prefers-reduced-motion:reduce){.qfilm *,.qfilm *::before,.qfilm *::after{animation:none!important;transition:none!important}}

.qfilm img.avatar{object-fit:cover;background:transparent}
