/* ============================================================ Cal popup Aurex — calendario custom (estratto da talk.css, ricolorato in oro) + il modal che lo ospita. Caricato da /it/scopri-aurex DOPO shell.css. Eredita i token del design system; gli accenti diventano oro perché la pagina è . ============================================================ */ /* ===== Cal popup modal (overlay che ospita il calendario custom Aurex) ===== */ .cal-modal{position:fixed;inset:0;z-index:1200;display:none} .cal-modal.is-open{display:block} .cal-modal__backdrop{position:absolute;inset:0;background:rgba(4,8,16,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .26s var(--ease)} .cal-modal.is-open .cal-modal__backdrop{opacity:1} .cal-modal__dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.985);opacity:0;width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);transition:transform .3s var(--ease),opacity .3s var(--ease)} .cal-modal.is-open .cal-modal__dialog{transform:translate(-50%,-50%) scale(1);opacity:1} .cal-modal__close{position:absolute;top:-15px;right:-15px;z-index:5;width:38px;height:38px;border-radius:999px;border:0;cursor:pointer;background:var(--card-2);color:var(--soft-grey);box-shadow:inset 0 0 0 1px var(--hair),0 10px 28px -10px rgba(0,0,0,.75);display:grid;place-items:center;transition:color .16s var(--ease),background .16s var(--ease)} .cal-modal__close:hover{color:var(--bone);background:#19233f} .cal-modal__close svg{width:17px;height:17px} body.cal-open{overflow:hidden} @media (max-width:560px){ .cal-modal__dialog{left:0;top:0;width:100%;height:100%;max-width:none;transform:none;border-radius:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;justify-content:flex-start;padding:62px 12px 24px} .cal-modal.is-open .cal-modal__dialog{transform:none} .cal-modal__close{top:14px;right:14px;position:fixed} } /* small inline spinner for the confirm button (mirrors the site's .aq-spin) */ .bc-spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;display:inline-block;animation:bcSpin .7s linear infinite} @keyframes bcSpin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.bc-spin{animation:none}} /* ===== Calendario (.bc-*) ===== */ .bc-cal { position: relative; width: 100%; max-width: 720px; background: linear-gradient(180deg, #14203f 0%, var(--card-2) 46%); border-radius: var(--r-box); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), inset 0 1px 0 rgba(255,255,255,0.06), 0 40px 90px -40px rgba(0,0,0,0.7); display: flex; flex-direction: column; height: 620px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: hidden; } .bc-cal::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 80% at 80% 0%, rgba(201,162,39,0.16), transparent 55%); z-index: 0; } .bc-cal > * { position: relative; z-index: 1; } /* Header: title + host avatar + duration pill */ .bc-head { padding: 18px 24px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .bc-head__l { min-width: 0; } .bc-title { font-family: var(--font); font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: var(--bone); line-height: 1.2; } .bc-sub { margin-top: 4px; font-size: 13px; color: var(--muted); letter-spacing: -0.005em; } .bc-head__r { display: flex; flex-direction: row; align-items: center; gap: 12px; flex: 0 0 auto; } .bc-avs { display: inline-flex; } .bc-av { width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center top; box-shadow: 0 0 0 2px var(--card-2); } .bc-av + .bc-av { margin-left: -12px; } .bc-dur { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 11px; border-radius: var(--r-pill); background: rgba(201,162,39,0.10); box-shadow: inset 0 0 0 1px rgba(201,162,39,0.34); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-hi); white-space: nowrap; } .bc-dur::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); } /* Step progress rail */ .bc-steps { display: flex; align-items: center; gap: 0; padding: 0 28px 16px; } .bc-step { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .bc-step__dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--muted); background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--hair); transition: all .3s var(--ease); } .bc-step__lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); transition: color .3s var(--ease); white-space: nowrap; } .bc-step__line { flex: 1 1 auto; height: 1px; background: var(--hair); margin: 0 12px; min-width: 16px; } .bc-step.is-active .bc-step__dot { color: #fff; background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 12px rgba(201,162,39,0.5); } .bc-step.is-active .bc-step__lbl { color: var(--bone); } .bc-step.is-done .bc-step__dot { color: #fff; background: rgba(201,162,39,0.30); box-shadow: inset 0 0 0 1px rgba(201,162,39,0.55); } .bc-step.is-done .bc-step__lbl { color: var(--soft-grey); } .bc-hr { height: 1px; background: var(--hair); margin: 0 28px; } /* Stage (animated content area) */ .bc-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .bc-stage { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; animation: bcIn .3s var(--ease); } @keyframes bcIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce){ .bc-stage { animation: none; } } /* STEP 1 — pick date + time */ .bc-pick { display: grid; grid-template-columns: minmax(0,1.34fr) minmax(0,1fr); flex: 1 1 auto; min-height: 0; } .bc-cal-col { padding: 14px 22px 12px; } .bc-time-col { border-left: 1px solid var(--hair); padding: 18px 18px 14px 20px; display: flex; flex-direction: column; min-height: 0; } .bc-month { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .bc-month__name { font-family: var(--font); font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: var(--bone); } .bc-nav { display: flex; gap: 6px; } .bc-nav__btn { width: 32px; height: 32px; border-radius: 9px; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--soft-grey); background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--hair); transition: all .18s var(--ease); } .bc-nav__btn:hover:not(:disabled) { background: rgba(255,255,255,0.09); color: var(--bone); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); } .bc-nav__btn:disabled { opacity: 0.3; cursor: default; } .bc-nav__btn svg { width: 15px; height: 15px; } .bc-dow { display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: 6px; } .bc-dow span { text-align: center; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .bc-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; } .bc-day { position: relative; aspect-ratio: 1; border: 0; border-radius: 10px; cursor: pointer; background: transparent; color: var(--soft-grey); font-family: var(--font); font-size: 14px; font-weight: 450; letter-spacing: -0.01em; display: grid; place-items: center; transition: background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease), transform .12s var(--ease); } .bc-day:hover:not(:disabled):not(.is-sel) { background: rgba(255,255,255,0.07); color: var(--bone); } .bc-day:disabled { color: rgba(194,201,217,0.22); cursor: default; } .bc-day.is-empty { visibility: hidden; } .bc-day.is-today { box-shadow: inset 0 0 0 1px rgba(201,162,39,0.5); color: var(--bone); } .bc-day.is-sel { background: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 6px 18px -6px rgba(201,162,39,0.8); } .bc-day.is-sel:hover { background: var(--accent); } .bc-day__dot { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent-hi); opacity: 0.6; } .bc-day.is-sel .bc-day__dot, .bc-day:disabled .bc-day__dot { display: none; } /* Time column */ .bc-time-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; } .bc-time-date { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); } .bc-time-count { font-size: 11px; color: var(--muted); white-space: nowrap; } .bc-time-tz { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); margin-bottom: 12px; } .bc-time-tz svg { width: 12px; height: 12px; opacity: 0.8; } .bc-time-back { display: none; } .bc-slots { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-right: 6px; margin-right: -6px; flex: 1 1 auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; } .bc-slots::-webkit-scrollbar { width: 6px; } .bc-slots::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 999px; } .bc-slot { flex: 0 0 auto; width: 100%; padding: 13px 14px; border: 0; cursor: pointer; border-radius: 11px; background: rgba(255,255,255,0.03); box-shadow: inset 0 0 0 1px var(--hair); font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; color: var(--bone); text-align: center; transition: background .16s var(--ease), box-shadow .16s var(--ease), color .16s var(--ease), transform .12s var(--ease); animation: bcSlotIn .34s var(--ease); } @keyframes bcSlotIn { from { transform: translateX(10px); } to { transform: none; } } @media (prefers-reduced-motion: reduce){ .bc-slot { animation: none; } } .bc-slot:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgba(201,162,39,0.55); background: rgba(201,162,39,0.08); } .bc-slot.is-sel { background: var(--accent); color: #fff; box-shadow: 0 6px 18px -8px rgba(201,162,39,0.9); } /* Empty state (no day chosen / loading) */ .bc-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 10px; color: var(--muted); } .bc-empty__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--hair); color: var(--soft-grey); } .bc-empty__ic svg { width: 22px; height: 22px; } .bc-empty__t { font-size: 13.5px; line-height: 1.5; max-width: 19ch; } /* Footer CTA (shared across steps) */ .bc-foot { padding: 14px 24px 18px; } .bc-cta { width: 100%; padding: 14px 22px; border: 0; border-radius: var(--r-pill); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font); font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em; background: var(--accent); color: #fff; transition: background .2s var(--ease), opacity .2s var(--ease), box-shadow .2s var(--ease); box-shadow: 0 10px 30px -12px rgba(201,162,39,0.8); } .bc-cta:hover:not(:disabled) { background: var(--accent-hover); } .bc-cta:disabled { cursor: default; background: rgba(255,255,255,0.06); color: var(--muted); box-shadow: inset 0 0 0 1px var(--hair); } /* While the booking call is in flight keep the button "live" blue (not the grey disabled look) so the spinner reads clearly as "sending". */ .bc-cta.is-loading:disabled { cursor: wait; background: var(--accent); color: #fff; box-shadow: 0 10px 30px -12px rgba(201,162,39,0.8); opacity: 0.92; } .bc-cta .arr { width: 15px; height: 15px; transition: transform .26s var(--ease); } .bc-cta:hover:not(:disabled) .arr { transform: translateX(4px); } .bc-foot__note { margin-top: 12px; text-align: center; font-size: 12px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 7px; } .bc-foot__note svg { width: 13px; height: 13px; opacity: 0.8; } .bc-error { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--no-red, #ff6b6b); } /* STEP 2 — details form */ .bc-form-stage { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .bc-recap { display: flex; align-items: center; gap: 12px; margin: 4px 24px 16px; padding: 10px 12px; border-radius: 14px; background: rgba(201,162,39,0.08); box-shadow: inset 0 0 0 1px rgba(201,162,39,0.26); } .bc-recap__ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(201,162,39,0.16); color: var(--accent-hi); } .bc-recap__ic svg { width: 17px; height: 17px; } .bc-recap__txt { flex: 1 1 auto; min-width: 0; } .bc-recap__when { display: block; font-size: 14px; font-weight: 600; color: var(--bone); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bc-recap__meta { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; } .bc-recap__host { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.14); } .bc-recap__av { width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center top; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); } .bc-recap__htxt { display: flex; flex-direction: column; line-height: 1.15; } .bc-recap__hk { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .bc-recap__hn { font-size: 13px; font-weight: 600; color: var(--bone); } .bc-recap__edit { flex: 0 0 auto; background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: var(--accent-hi); font-family: var(--font); font-size: 12.5px; font-weight: 600; padding: 6px 7px; border-radius: 8px; transition: background .16s var(--ease); } .bc-recap__edit:hover { background: rgba(201,162,39,0.12); } .bc-recap__edit svg { width: 13px; height: 13px; } .bc-form { flex: 1 1 auto; overflow-y: auto; padding: 0 24px 4px; display: flex; flex-direction: column; gap: 15px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; } .bc-form::-webkit-scrollbar { width: 6px; } .bc-form::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 999px; } .bc-field { display: flex; flex-direction: column; gap: 7px; } .bc-flabel { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft-grey); } .bc-flabel .opt { color: var(--muted); font-weight: 500; letter-spacing: 0.04em; text-transform: none; } .bc-input, .bc-textarea { width: 100%; background: #212E52; color: var(--bone); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); border-radius: var(--r-input); padding: 13px 15px; font-family: var(--font); font-size: 16px; letter-spacing: -0.005em; transition: box-shadow .18s var(--ease), background .18s var(--ease); } .bc-input { height: 48px; padding: 0 15px; } .bc-input::placeholder, .bc-textarea::placeholder { color: #8E98B8; } .bc-input:focus, .bc-textarea:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px rgba(201,162,39,0.18); background: #25315A; } .bc-textarea { resize: none; min-height: 64px; line-height: 1.45; } /* phone field */ .bc-phone { display: flex; gap: 8px; position: relative; } .bc-cc { position: relative; flex: 0 0 auto; } .bc-cc__btn { height: 100%; display: flex; align-items: center; gap: 7px; padding: 0 32px 0 12px; cursor: pointer; border: 0; border-radius: var(--r-input); background: #212E52; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); color: var(--bone); font-family: var(--font); transition: box-shadow .18s var(--ease); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5ADC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 13px 13px; } .bc-cc__btn:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24); } .bc-cc__flag { width: 21px; height: 15px; border-radius: 3px; object-fit: cover; display: block; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,0.14); } .bc-cc__iso { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--soft-grey); } .bc-cc__code { font-size: 15px; font-weight: 600; color: var(--bone); } .bc-cc__chev { display: inline-flex; color: var(--muted); } .bc-cc__chev svg { width: 13px; height: 13px; } .bc-phone__input { flex: 1 1 auto; min-width: 0; } .bc-cc__list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 230px; max-height: 220px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #101a36; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 24px 50px -20px rgba(0,0,0,0.8); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; } .bc-cc__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--soft-grey); } .bc-cc__opt-l { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; } .bc-cc__opt:hover { background: rgba(255,255,255,0.06); color: var(--bone); } .bc-cc__opt.is-sel { background: rgba(201,162,39,0.16); color: var(--bone); } .bc-cc__opt-code { font-family: var(--mono); font-size: 12.5px; color: var(--muted); } /* reason chips */ .bc-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bc-reason { padding: 11px 12px; border: 0; cursor: pointer; border-radius: 10px; text-align: left; background: rgba(255,255,255,0.03); box-shadow: inset 0 0 0 1px var(--hair); font-family: var(--font); font-size: 13.5px; font-weight: 500; color: var(--soft-grey); transition: all .16s var(--ease); display: flex; align-items: center; gap: 9px; } .bc-reason__tick { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1.5px var(--muted); display: grid; place-items: center; transition: all .16s var(--ease); } .bc-reason__tick svg { width: 9px; height: 9px; opacity: 0; transition: opacity .16s var(--ease); color: #fff; } .bc-reason:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); color: var(--bone); } .bc-reason.is-sel { background: rgba(201,162,39,0.10); box-shadow: inset 0 0 0 1px rgba(201,162,39,0.5); color: var(--bone); } .bc-reason.is-sel .bc-reason__tick { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); } .bc-reason.is-sel .bc-reason__tick svg { opacity: 1; } .bc-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--soft-grey); line-height: 1.45; cursor: pointer; } .bc-consent input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--accent); cursor: pointer; } .bc-consent a { color: var(--accent-hi); text-decoration: none; transition: filter .15s ease; } .bc-consent a:hover { filter: brightness(1.2); } /* STEP 3 — confirmed */ .bc-done { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 28px 36px 30px; gap: 9px; overflow-y: auto; min-height: 0; } .bc-done > * { flex-shrink: 0; } .bc-done__check { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 8px; background: var(--accent); color: #fff; box-shadow: 0 0 0 5px rgba(201,162,39,0.12); } .bc-done__check svg { width: 24px; height: 24px; } .bc-done__t { font-family: var(--font); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--bone); } .bc-done__sub { font-size: 14px; color: var(--soft-grey); line-height: 1.5; max-width: 34ch; } .bc-done__sub b { color: var(--bone); } .bc-card-when { flex: 0 0 auto; margin-top: 14px; width: 100%; max-width: 390px; border-radius: 16px; background: rgba(255,255,255,0.03); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; } .bc-card-when__row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 18px; text-align: left; } .bc-card-when__row + .bc-card-when__row { border-top: 1px solid var(--hair); } .bc-card-when__ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(201,162,39,0.14); color: var(--accent-hi); } .bc-card-when__ic svg { width: 16px; height: 16px; } .bc-card-when__row > span:last-child { min-width: 0; } .bc-card-when__k { display: block; font-size: 11px; color: var(--muted); font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; } .bc-card-when__v { display: block; font-size: 14px; line-height: 1.3; color: var(--bone); font-weight: 500; margin-top: 2px; } .bc-addcal { flex: 0 0 auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .bc-addcal__btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--r-pill); border: 0; cursor: pointer; background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--hair); color: var(--soft-grey); font-family: var(--font); font-size: 13px; font-weight: 500; text-decoration: none; transition: all .16s var(--ease); } .bc-addcal__btn:hover { background: rgba(255,255,255,0.08); color: var(--bone); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); } .bc-addcal__btn svg { width: 14px; height: 14px; } .bc-restart { margin-top: 14px; background: transparent; border: 0; cursor: pointer; color: var(--muted); font-family: var(--font); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; transition: color .16s var(--ease); } .bc-restart:hover { color: var(--soft-grey); } @media (max-width: 560px){ .bc-cal { height: auto; min-height: 0; max-height: calc(100dvh - 76px); max-width: 100%; } .bc-pick { grid-template-columns: 1fr; } .bc-time-col { border-left: 0; border-top: 1px solid var(--hair); } /* orari a 2 colonne + piu' respiro: ne vedi ~12-14 invece di 2 */ .bc-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; max-height: 44vh; } .bc-slot { padding: 12px 10px; } /* giorno scelto -> calendario via, orari a tutta modale + "back" */ .bc-pick--day .bc-cal-col { display: none; } .bc-pick--day .bc-time-col { border-top: 0; padding-top: 4px; } .bc-pick--day .bc-slots { max-height: 58vh; } .bc-time-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-bottom: 10px; background: transparent; border: 0; cursor: pointer; color: var(--accent-hi); font-family: var(--font); font-size: 13px; font-weight: 600; padding: 4px 2px; letter-spacing: -0.005em; } .bc-reasons { grid-template-columns: 1fr; } /* --- compattazione mobile: modale piu' corta, orari su subito --- */ .bc-day { aspect-ratio: auto; height: 33px; font-size: 13.5px; } .bc-grid { gap: 1px; } .bc-dow { margin-bottom: 3px; } .bc-cal-col { padding: 6px 16px 4px; } .bc-month { margin-bottom: 8px; } .bc-title { font-size: 17px; } .bc-head { flex-direction: column; align-items: flex-start; padding: 13px 18px 10px; gap: 10px; } .bc-head__r { flex-direction: row; align-items: center; align-self: stretch; justify-content: space-between; } .bc-recap { gap: 10px; margin: 4px 16px 14px; padding: 9px 11px; } .bc-recap__host { padding-left: 10px; gap: 8px; } .bc-recap__hk { display: none; } .bc-recap__edit-t { display: none; } .bc-recap__edit { padding: 6px; } .bc-form, .bc-form-stage .bc-foot { padding-left: 16px; padding-right: 16px; } .bc-done { padding: 22px 16px 24px; gap: 9px; } .bc-done__sub { max-width: 30ch; } .bc-card-when { max-width: 100%; margin-top: 12px; } .bc-card-when__row { min-height: 64px; padding: 12px 14px; } .bc-addcal { width: 100%; } .bc-addcal__btn { flex: 1 1 100px; justify-content: center; } .bc-done [data-done-video] { max-width: none !important; width: 100%; margin-top: 14px !important; } } @media (min-height: 760px) and (min-width: 561px){ .bc-done { justify-content: center; } } /* ===== Gold accent is light: text/icons sitting ON it must be dark navy ===== */ .bc-day.is-sel, .bc-slot.is-sel, .bc-cta:not(:disabled), .bc-cta.is-loading:disabled, .bc-done__check { color: var(--apex-night); } .bc-cta:not(:disabled) .arr, .bc-done__check svg { color: var(--apex-night); } .bc-cta.is-loading:disabled .bc-spin { border-color: rgba(12,20,40,.30); border-top-color: var(--apex-night); }