.pause-vacation-intro { margin:18px 0 20px; padding:18px; background:#f4f3f0; }
.pause-vacation-intro > p { margin:0; color:#242824; font-size:.95rem; line-height:1.65; }
.pause-vacation-intro ul { display:grid; gap:12px; padding:0; margin:20px 0 0; list-style:none; }
.pause-vacation-intro li { display:flex; align-items:flex-start; gap:10px; font-size:.85rem; line-height:1.5; }
.pause-vacation-intro li > span { display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:50%; background:#d7e7d1; color:#2a3c2d; font-weight:800; }
.pause-card-profile .pause-choose-dates { display:flex; align-items:center; justify-content:center; gap:12px; min-height:54px; border-radius:99px; background:#293a2a; font-size:.8rem; }
.pause-choose-dates svg { width:21px; height:21px; flex:none; }
.pause-card-profile:has(.pause-vacation-intro) { padding:22px; border-radius:30px; }
.pause-card-profile:has(.pause-vacation-intro) h3 { font-size:1.6rem; line-height:1.25; margin-top:20px; letter-spacing:-.035em; }
.pause-card-profile:has(.pause-vacation-intro) .pause-tag { background:#d7e7d1; color:#243727; }
.pause-flow-open { overflow:hidden; }
.pause-flow-dialog { --flow-green:#293a2a; --flow-muted:#70675e; --flow-grey:#f2f1ed; --flow-soft-green:#d7e7d1; box-sizing:border-box; width:100%; max-width:480px; height:100dvh; max-height:100dvh; margin:0 auto; padding:0; border:0; border-radius:0; background:#faf9f6; color:#242824; font-family:var(--font-sans,"Manrope",sans-serif); overflow:auto; overscroll-behavior:contain; }
.pause-flow-dialog::backdrop { background:rgba(26,35,27,.48); }
.pause-flow-dialog * { box-sizing:border-box; }
.pause-flow-dialog [hidden] { display:none !important; }
.pause-flow-dialog button { font:inherit; cursor:pointer; }
.pause-flow-dialog button:disabled { cursor:not-allowed; opacity:.45; }
.pause-flow-dialog button:focus-visible,.pause-flow-dialog input:focus-visible { outline:3px solid #7e9775; outline-offset:4px; }
.pause-flow-dialog svg { width:21px; height:21px; flex:none; }
.pause-flow-shell { max-width:460px; margin:0 auto; padding:calc(20px + env(safe-area-inset-top,0px)) 22px calc(28px + env(safe-area-inset-bottom,0px)); }
.pause-flow-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px; }
.pause-flow-nav button { display:flex; align-items:center; gap:6px; min-height:40px; padding:4px 0; border:0; background:transparent; color:#303b31; font-size:.85rem; font-weight:700; }
.pause-flow-step { padding:6px 11px; border-radius:99px; background:var(--flow-soft-green); color:var(--flow-green); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.pause-flow-progress { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:28px; }
.pause-flow-progress span { height:6px; border-radius:9px; background:#e7e6e2; }
.pause-flow-progress .is-complete { background:#40543f; }
.pause-flow-dialog h2 { margin:0 0 14px; color:var(--flow-green); font-family:var(--font-display,"Exo 2",sans-serif); font-size:clamp(1.8rem,8vw,2.15rem); line-height:1.08; letter-spacing:-.04em; font-weight:800; overflow-wrap:break-word; }
.pause-flow-dialog h2:focus { outline:none; }
.pause-flow-intro { margin:0 0 24px; font-size:.94rem; line-height:1.6; color:#474d46; }
.pause-flow-date-card { display:grid; gap:18px; margin:0 0 26px; padding:20px; background:#fff; box-shadow:0 2px 6px rgba(36,40,36,.03); }
.pause-flow-date { display:grid; gap:8px; width:100%; min-width:0; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.pause-flow-date > span:first-child { font-size:.67rem; letter-spacing:.025em; text-transform:uppercase; font-weight:800; color:#79685c; }
.pause-flow-date-value { position:relative; display:flex; align-items:center; gap:12px; min-height:60px; padding:12px; background:var(--flow-grey); }
.pause-flow-date-value > svg { color:#40543f; }
.pause-flow-date-value strong { min-width:0; flex:1; font-size:.9rem; font-weight:700; line-height:1.5; text-transform:capitalize; }
.pause-flow-edit { display:flex; color:#7b8177; }
.pause-flow-date:focus-visible { outline:3px solid #7e9775; outline-offset:3px; }
.pause-date-dialog { box-sizing:border-box; width:calc(100% - 28px); max-width:370px; max-height:calc(100dvh - 28px); margin:auto; padding:20px 14px 14px; border:1px solid #e2e0dc; border-radius:24px; background:#faf9f6; color:#293a2a; font-family:var(--font-sans,"Manrope",sans-serif); overflow:auto; box-shadow:0 18px 70px rgba(30,40,30,.2); }
.pause-date-dialog::backdrop { background:rgba(26,35,27,.45); }
.pause-date-dialog * { box-sizing:border-box; }
.pause-date-dialog h3 { margin:0 8px 18px; font-size:1.15rem; line-height:1.3; }
.pause-date-dialog button { min-width:40px; min-height:44px; padding:0; border:0; border-radius:12px; background:transparent; color:inherit; font:inherit; font-weight:700; cursor:pointer; }
.pause-date-dialog button:focus-visible { outline:3px solid #7e9775; outline-offset:1px; }
.pause-date-dialog button:disabled { color:#aaa9a1; cursor:not-allowed; }
.pause-date-month { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; }
.pause-date-month strong { text-transform:capitalize; font-size:.95rem; }
.pause-date-month svg { width:20px; height:20px; vertical-align:middle; }
.pause-date-dialog table { width:100%; border-collapse:separate; border-spacing:2px; table-layout:fixed; text-align:center; }
.pause-date-dialog th { height:32px; color:#7b8077; font-size:.7rem; font-weight:600; }
.pause-date-dialog abbr { text-decoration:none; }
.pause-date-dialog td { padding:0; }
.pause-date-dialog td button { width:100%; min-width:0; font-size:.95rem; }
.pause-date-dialog td button:not(:disabled):hover { background:#e7ebe3; }
.pause-date-dialog button[aria-current="date"] { box-shadow:inset 0 0 0 1px #a9b6a2; }
.pause-date-dialog button[aria-pressed="true"] { background:#293a2a !important; color:#fff; }
.pause-date-dialog p { margin:12px 8px; color:#70675e; font-size:.8rem; line-height:1.5; }
.pause-date-dialog .pause-date-close { width:100%; padding:10px; background:#eeede8; font-size:.8rem; }
.pause-flow-date-divider { display:block; height:20px; width:1px; margin:0 auto; background:#e1e2dc; }
.pause-flow-duration { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:30px; background:#f5f5f1; color:#474d46; font-size:.72rem; line-height:1.4; }
.pause-flow-duration > span { flex:1; }
.pause-flow-duration strong { max-width:57%; padding:8px 12px; border-radius:22px; background:#40543f; color:#fff; font-size:.7rem; letter-spacing:.02em; }
.pause-flow-hint { margin:0; color:var(--flow-muted); font-size:.7rem; line-height:1.5; }
.pause-flow-primary { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:54px; padding:14px 18px; border:0; border-radius:99px; background:var(--flow-green); color:#fff; font-weight:800 !important; font-size:.78rem !important; text-transform:uppercase; letter-spacing:.035em; box-shadow:0 7px 12px rgba(41,58,42,.09); }
.pause-flow-text-button { display:block; width:100%; min-height:48px; margin:10px 0 0; border:0; background:transparent; color:#776154; font-size:.85rem !important; font-weight:700 !important; }
.pause-flow-range { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:7px 10px; margin:0 0 18px; border-radius:99px; background:var(--flow-grey); color:#50584c; font-size:.65rem; text-transform:uppercase; }
.pause-flow-range svg { width:15px; height:15px; }
.pause-flow-classes { display:grid; gap:12px; margin:0 0 22px; padding:0; list-style:none; }
.pause-flow-classes li { display:grid; grid-template-columns:54px minmax(0,1fr); gap:6px 12px; align-items:center; padding:17px; background:#fff; border-radius:27px; box-shadow:0 6px 18px rgba(36,40,36,.025); }
.pause-flow-class-time { display:grid; place-items:center; grid-row:span 2; min-height:36px; padding:5px; background:#eeede9; border-radius:99px; font-size:.88rem; }
.pause-flow-class-date { display:block; color:#786357; text-transform:uppercase; font-size:.65rem; line-height:1.5; font-weight:800; }
.pause-flow-classes li strong { display:block; font-family:var(--font-display); font-size:1rem; line-height:1.3; }
.pause-flow-class-tag { display:inline-flex; justify-self:start; align-items:center; gap:5px; grid-column:2; padding:5px 10px; border-radius:99px; background:var(--flow-soft-green); color:#253528; font-size:.64rem; }
.pause-flow-class-tag svg { width:14px; height:14px; }
.pause-flow-protected { display:flex; gap:12px; margin:0 0 26px; padding:20px; border-radius:28px; background:var(--flow-grey); }
.pause-flow-protected > svg { box-sizing:content-box; padding:9px; border-radius:50%; background:#40543f; color:#fff; }
.pause-flow-protected strong { color:var(--flow-green); font-family:var(--font-display); font-size:.95rem; }
.pause-flow-protected p { margin:6px 0 0; font-size:.88rem; line-height:1.65; color:#474d46; }
.pause-flow-summary { display:grid; gap:12px; margin-bottom:22px; padding:18px; border-radius:30px; background:#fff; }
.pause-flow-summary > header { display:flex; align-items:center; gap:8px; margin:0 0 4px; color:var(--flow-green); }
.pause-flow-summary > header strong { flex:1; font-size:.7rem; text-transform:uppercase; }
.pause-flow-summary > header > span { padding:4px 8px; background:#eee8df; border-radius:99px; color:#827769; font-size:.65rem; }
.pause-flow-summary-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:9px 6px; padding:14px; border-radius:18px; background:var(--flow-grey); }
.pause-flow-summary-row > span,.pause-flow-summary-row > div > span { color:#776357; font-size:.65rem; text-transform:uppercase; font-weight:800; }
.pause-flow-summary-row small { padding:4px 8px; border-radius:99px; background:#e9e5df; color:#574c40; font-size:.62rem; }
.pause-flow-summary-row > strong { grid-column:1 / -1; font-family:var(--font-display); font-size:1rem; line-height:1.4; letter-spacing:-.02em; }
.pause-flow-summary-row > p { grid-column:1 / -1; justify-self:start; margin:0; padding:4px 8px; border-radius:99px; background:#e2e9dd; color:#42523e; font-size:.63rem; line-height:1.5; }
.pause-flow-expiry { padding:15px 13px; border-radius:19px; background:#40543f; color:#f3f4ee; }
.pause-flow-expiry > header { display:flex; align-items:center; justify-content:space-between; gap:7px; margin:0 0 15px; font-size:.65rem; text-transform:uppercase; font-weight:800; }
.pause-flow-expiry small { padding:4px 8px; border-radius:99px; background:#d7e7d1; color:#293a2a; font-size:.65rem; white-space:nowrap; }
.pause-flow-expiry > div { display:grid; grid-template-columns:minmax(0,1fr) 18px minmax(0,1.5fr); gap:9px; align-items:center; }
.pause-flow-expiry > div > span { display:grid; gap:5px; color:#c5d1bf; font-size:.63rem; }
.pause-flow-expiry del { line-height:1.5; font-size:.75rem; }
.pause-flow-expiry strong { color:#eff4e9; font-family:var(--font-display); font-size:1.1rem; line-height:1.3; }
.pause-flow-expiry > p { margin:14px 0 0; color:#e1e8db; font-size:.78rem; line-height:1.55; }
.pause-flow-cancel-summary { grid-template-columns:20px minmax(0,1fr) auto; }
.pause-flow-cancel-summary > div > strong { display:block; margin-top:5px; font-size:.8rem; }
.pause-flow-cancel-summary svg { color:#827267; }
.pause-flow-conditions { margin:0 0 25px; padding:20px; border-radius:26px; background:#efeeea; }
.pause-flow-conditions > strong { display:flex; align-items:center; gap:7px; color:var(--flow-green); font-size:.7rem; text-transform:uppercase; }
.pause-flow-conditions p { display:flex; gap:7px; margin:12px 0 0; color:#3d453a; font-size:.76rem; line-height:1.55; }
.pause-flow-conditions p > svg { width:15px; height:15px; margin-top:3px; border-radius:50%; background:#293a2a; color:#fff; padding:2px; }
.pause-flow-error { padding:14px; margin:0 0 18px; border:1px solid #cf6868; border-radius:14px; background:#fff0f0; color:#9b2222; font-size:.85rem; line-height:1.55; }
.pause-flow-success { display:grid; justify-items:center; gap:22px; padding-top:22px; text-align:center; }
.pause-flow-success-tag { display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:99px; background:var(--flow-soft-green); color:var(--flow-green); font-size:.7rem; text-transform:uppercase; font-weight:800; letter-spacing:.04em; }
.pause-flow-success-tag svg { width:14px; height:14px; }
.pause-flow-success-symbol { position:relative; display:grid; place-items:center; width:80px; height:80px; border-radius:50%; background:var(--flow-soft-green); color:var(--flow-green); margin:7px 0; }
.pause-flow-success-symbol > svg { width:46px; height:46px; }
.pause-flow-success-symbol > span { position:absolute; right:-2px; bottom:-2px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--flow-green); color:#fff; }
.pause-flow-success-symbol > span svg { width:17px; height:17px; }
.pause-flow-success h2 { margin:0; font-size:clamp(2rem,9vw,2.5rem); }
.pause-flow-success > p { margin:0 0 12px; font-size:.95rem; line-height:1.75; color:#474d46; }
@media(min-width:650px) { .pause-flow-dialog { margin:24px auto; height:calc(100dvh - 48px); max-height:calc(100dvh - 48px); border-radius:26px; } }
@media(max-width:360px) { .pause-flow-shell { padding-left:16px; padding-right:16px; } .pause-flow-date-card { padding:15px; } .pause-flow-date-value { gap:8px; padding:10px; } .pause-flow-edit { display:none; } .pause-flow-summary { padding:13px; } .pause-flow-cancel-summary { grid-template-columns:18px 1fr; } .pause-flow-cancel-summary small { grid-column:2; justify-self:start; } .pause-card-profile:has(.pause-vacation-intro) { padding:17px; } .pause-card-profile .pause-profile-heading { flex-wrap:wrap; } }
@media(prefers-reduced-motion:no-preference) { .pause-flow-shell { animation:pause-flow-enter .2s ease-out; } @keyframes pause-flow-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } }