/* ===================================================================== * eMaids — New mobile booking design (NYC pilot) — VISTA 1:1 * --------------------------------------------------------------------- * ARCHIVO NUEVO. Súbelo completo a: * /wp-content/themes/emaids/css/booking-mobile-nyc.css * * Es el CSS de la maqueta new-mobile-booking-2.html (scope #emaids-booking-widget), * envuelto en @media (max-width:1024px) + body.emaids-mb-on para que: * - solo aplique en móvil/tablet (<=1024px) * - NUNCA afecte al desktop (>1024px), que queda intacto. * El widget es una VISTA autocontenida; el formulario real se oculta en * móvil (sigue vivo en el DOM para el motor de precios y el envío). * * NOTA DE TIPOGRAFÍA: el tema corre sobre Genesis (root font-size 62.5% => * 1rem≈10px). Por eso los tamaños de fuente de la maqueta (pensados para * 1rem=16px) se compensan con valores rem mayores. El bloque "Ajustes de * legibilidad móvil" al final gana a la maqueta para textos clave. * ===================================================================== */ @media screen and (max-width: 1024px) { /* ---- Ocultar el formulario real y el intro viejo (motor sigue activo) ---- SIN depender de body.emaids-mb-on (que el JS añade después): así se ocultan desde el primer pintado y NO se ve el formulario viejo / "A Modern Cleaning Service" mientras carga el widget. Seguro: este CSS solo se encola en la página de booking de NYC. */ #booking-container #booking-form { display: none !important; } #booking-container .form-intro, #booking-container .text.blue.center, #booking-container > .container.med > hr { display: none !important; } #booking-container .container.med { box-shadow: none !important; padding: 0 !important; margin: 0 !important; } #booking-container { padding: 0 !important; } /* El header del sitio es sticky (~115px) y tapaba el inicio del widget: empujamos el contenido hacia abajo para que el paso 1 se vea completo. */ body.emaids-mb-on #emaids-booking-widget { padding-top: 70px !important; } /* ===================== Estilos de la maqueta v2 (1:1) ===================== */ #emaids-booking-widget { --blue:#1b75bb; --blue-dark:#135a92; --blue-deep:#14598f; --blue-soft:#e9f2fa; --blue-tint:#f3f8fc; --ink:#15293d; --ink-soft:#5d6f81; --ink-mute:#8696a8; --paper:#f5f8fb; --card:#ffffff; --line:#d9e3ec; --line-soft:#eef2f6; --green:#1f9c84; --green-deep:#0a6a50; --green-soft:#e9f6f2; --warn:#b3261e; --warn-soft:#fdf1ef; --warn-line:#f3c8c2; --radius:14px; --radius-sm:12px; --radius-lg:22px; --pill:999px; --shadow-xs:0 1px 2px rgba(21,41,61,.05); --shadow-sm:0 2px 6px rgba(21,41,61,.05),0 1px 2px rgba(21,41,61,.04); --shadow-md:0 6px 22px -4px rgba(21,41,61,.12),0 2px 6px rgba(21,41,61,.05); --shadow-lg:0 22px 52px -10px rgba(21,41,61,.22),0 6px 16px rgba(21,41,61,.08); } #emaids-booking-widget *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; } #emaids-booking-widget{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:#eef2f7; color:var(--ink); width:100%; display:block; padding:0; margin:0 auto; -webkit-font-smoothing:antialiased; } #emaids-booking-widget .phone{ width:100%; max-width:430px; min-height:auto; background:var(--paper); display:block; margin:0 auto; box-shadow:var(--shadow-md),0 0 0 1px var(--line); } #emaids-booking-widget .phone > header{ border-radius:24px 24px 0 0; } #emaids-booking-widget .phone > .pricebar{ border-radius:0 0 24px 24px; } #emaids-booking-widget svg.i{ width:20px; height:20px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } /* =================== HEADER / STEP NAV (círculos + conector) =================== Queda sticky JUSTO debajo del header del sitio: `top`=alto del header medido en runtime (--mb-headtop); 0 si no hay header fijo. */ #emaids-booking-widget header{ background:rgba(255,255,255,.94); -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line-soft); padding:14px 16px 12px; position:sticky; top:var(--mb-headtop, 0px); z-index:25; } #emaids-booking-widget .stepnav{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; position:relative; } #emaids-booking-widget .stepnav::before{ content:""; position:absolute; left:16%; right:16%; top:17px; height:2px; background:var(--line); border-radius:2px; z-index:0; } #emaids-booking-widget .stepnav button{ position:relative; z-index:1; background:none; border:none; cursor:default; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:7px; padding:2px 4px; color:var(--ink-mute); min-height:auto; transition:color .18s cubic-bezier(.2,.7,.2,1); } #emaids-booking-widget .stepnav .num{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff; border:1.5px solid var(--line); font-size:1.3rem; font-weight:800; line-height:1; color:var(--ink-mute); box-shadow:var(--shadow-xs); transition:all .18s cubic-bezier(.2,.7,.2,1); } #emaids-booking-widget .stepnav .lbl{ font-size:.92rem; font-weight:700; line-height:1.1; text-transform:uppercase; letter-spacing:.05em; } #emaids-booking-widget .stepnav button.now{ color:var(--blue); } #emaids-booking-widget .stepnav button.now .num{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 0 0 4px rgba(27,117,187,.14); transform:scale(1.06); } #emaids-booking-widget .stepnav button.done{ cursor:pointer; color:var(--green); } #emaids-booking-widget .stepnav button.done .num{ background:var(--green); border-color:var(--green); color:#fff; } #emaids-booking-widget .stepnav button.done:active{ transform:scale(.97); } #emaids-booking-widget .stepnav button.locked{ opacity:.85; } #emaids-booking-widget .stepnav .bar{ display:none; } /* =================== CONTENT =================== */ #emaids-booking-widget main{ flex:none; padding:22px 18px 120px; overflow:visible; } #emaids-booking-widget .screen{ display:none; animation:emaidsMbSlide .25s ease; } #emaids-booking-widget .screen.active{ display:block; } @keyframes emaidsMbSlide{ from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} } #emaids-booking-widget .eyebrow{ display:inline-flex; align-items:center; gap:6px; color:var(--blue); font-size:1.15rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; background:var(--blue-soft); padding:5px 11px; border-radius:var(--pill); } #emaids-booking-widget h1{ color:var(--blue); font-size:1.6rem; font-weight:700; line-height:1.22; margin-bottom:6px; letter-spacing:-.01em; } #emaids-booking-widget h2{ font-size:1.2rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); font-weight:800; margin:28px 0 6px; display:flex; align-items:center; gap:8px; } #emaids-booking-widget h2 svg.i{ width:15px; height:15px; color:var(--blue); } #emaids-booking-widget .sub{ color:var(--ink-soft); font-size:1.3rem; margin-bottom:16px; line-height:1.45; } /* =================== FORM CONTROLS =================== */ #emaids-booking-widget label{ display:block; font-size:1.4rem; font-weight:700; margin:14px 0 6px; color:var(--ink); } #emaids-booking-widget label .req{ color:var(--warn); margin-left:2px; } #emaids-booking-widget label .opt{ font-weight:500; color:var(--ink-mute); } #emaids-booking-widget input, #emaids-booking-widget select, #emaids-booking-widget textarea{ width:100%; font-size:1.3rem; padding:13px; border:1.5px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--ink); appearance:none; font-family:inherit; transition:border-color .18s,box-shadow .18s; } #emaids-booking-widget input::placeholder, #emaids-booking-widget textarea::placeholder{ color:var(--ink-mute); } #emaids-booking-widget select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235d6f81' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:38px; cursor:pointer; } #emaids-booking-widget input:focus, #emaids-booking-widget select:focus, #emaids-booking-widget textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(27,117,187,.16); } #emaids-booking-widget input.invalid, #emaids-booking-widget select.invalid, #emaids-booking-widget textarea.invalid{ border-color:var(--warn); background:#fff7f6; box-shadow:0 0 0 4px rgba(179,38,30,.10); } #emaids-booking-widget .formerror{ display:none; color:var(--warn); background:var(--warn-soft); border:1px solid var(--warn-line); border-radius:var(--radius-sm); padding:11px 13px; margin:0 0 14px; font-size:.82rem; font-weight:700; line-height:1.4; } #emaids-booking-widget .formerror.show{ display:block; } #emaids-booking-widget .row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } #emaids-booking-widget .hint{ font-size:1rem; color:var(--ink-soft); margin-top:7px; line-height:1.4; } #emaids-booking-widget .hint.good{ color:var(--green); font-weight:700; display:flex; align-items:center; gap:6px; } #emaids-booking-widget .hint a{ color:var(--blue); font-weight:700; } #emaids-booking-widget .mb-captcha{ margin:16px 0 4px; } #emaids-booking-widget .mb-captcha .invalid-recaptcha{ color:var(--warn); font-size:.82rem; font-weight:700; margin-top:6px; display:block; } #emaids-booking-widget .ziphint-loading{ display:flex; align-items:center; gap:8px; color:var(--blue); font-weight:700; } #emaids-booking-widget .mb-spinner{ width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--blue); border-radius:50%; animation:mbspin .7s linear infinite; flex-shrink:0; } @keyframes mbspin{ to{ transform:rotate(360deg); } } /* =================== CHIPS =================== */ #emaids-booking-widget .chips{ display:flex; flex-wrap:wrap; gap:8px; } #emaids-booking-widget .chip{ border:1.5px solid var(--line); background:var(--card); border-radius:var(--pill); padding:10px 15px; font-size:1.3rem; font-weight:600; color:var(--ink); cursor:pointer; min-height:44px; font-family:inherit; display:inline-flex; align-items:center; gap:6px; box-shadow:var(--shadow-xs); transition:all .18s cubic-bezier(.2,.7,.2,1); } #emaids-booking-widget .chip:active{ transform:scale(.97); } #emaids-booking-widget .chip.sel{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 4px 12px -2px rgba(27,117,187,.32); } #emaids-booking-widget .chip .save{ font-size:1.1rem; color:var(--green); font-weight:800; background:var(--green-soft); padding:3px 8px; border-radius:var(--pill); } #emaids-booking-widget .chip.sel .save{ background:rgba(255,255,255,.22); color:#fff; } #emaids-booking-widget .chip.locked{ opacity:.45; cursor:not-allowed; pointer-events:none; background:var(--line-soft); border-color:var(--line); color:var(--ink-mute); box-shadow:none; } #emaids-booking-widget .chip.locked .save{ background:var(--line); color:var(--ink-mute); } /* =================== FREQ LOCK NOTE (servicios one-time) =================== */ #emaids-booking-widget .freqlock-note{ display:none; margin-top:10px; font-size:1rem; line-height:1.45; color:var(--ink-soft); background:var(--blue-soft); border:1px solid #cfe1f1; border-radius:var(--radius-sm); padding:10px 12px; align-items:flex-start; gap:8px; } #emaids-booking-widget .freqlock-note.show{ display:flex; } #emaids-booking-widget .freqlock-note svg.i{ width:15px; height:15px; color:var(--blue); flex-shrink:0; margin-top:1px; stroke-width:2; } #emaids-booking-widget .freqlock-note b{ color:var(--ink); font-weight:800; } /* =================== FREQ NOTE (cómo se cobra el plan recurrente) =================== */ #emaids-booking-widget .freqnote{ display:none; margin-top:14px; border:1.5px solid #cfe6dd; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-xs); } #emaids-booking-widget .freqnote.show{ display:block; } #emaids-booking-widget .freqnote .fn-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; background:linear-gradient(135deg,#eef8f3 0%,#e3f1ea 100%); border-bottom:1px solid #d6ece4; font-size:1.1rem; font-weight:800; color:var(--ink); } #emaids-booking-widget .freqnote .fn-head svg.i{ width:16px; height:16px; color:var(--green); stroke-width:2; } #emaids-booking-widget .freqnote .fn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); } #emaids-booking-widget .freqnote .fn-col{ background:#fff; padding:14px; display:flex; flex-direction:column; gap:4px; min-width:0; } #emaids-booking-widget .freqnote .fn-col .fn-lbl{ font-size:.92rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); line-height:1.1; } #emaids-booking-widget .freqnote .fn-col .fn-price{ font-size:1.6rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.1; margin-top:3px; } #emaids-booking-widget .freqnote .fn-col .fn-meta{ font-size:1rem; color:var(--ink-soft); font-weight:600; line-height:1.3; } #emaids-booking-widget .freqnote .fn-col.fn-after{ background:var(--green-soft); } #emaids-booking-widget .freqnote .fn-col.fn-after .fn-lbl{ color:var(--green); } #emaids-booking-widget .freqnote .fn-col.fn-after .fn-meta{ color:var(--green); font-weight:800; } #emaids-booking-widget .freqnote .fn-foot{ padding:10px 14px; font-size:1rem; color:var(--ink-soft); line-height:1.45; display:flex; align-items:center; gap:6px; background:#fff; border-top:1px solid var(--line-soft); } #emaids-booking-widget .freqnote .fn-foot svg.i{ width:13px; height:13px; color:var(--ink-soft); stroke-width:1.8; } /* =================== SERVICE CARDS =================== */ #emaids-booking-widget .cards{ display:grid; gap:10px; } #emaids-booking-widget .scard{ display:flex; gap:13px; align-items:flex-start; text-align:left; border:1.5px solid var(--line); background:var(--card); border-radius:var(--radius); padding:15px; cursor:pointer; width:100%; font-family:inherit; box-shadow:var(--shadow-xs); transition:all .18s cubic-bezier(.2,.7,.2,1); } #emaids-booking-widget .scard.sel{ border-color:var(--blue); background:linear-gradient(180deg,var(--blue-tint),#fff); box-shadow:0 0 0 1px var(--blue),0 8px 22px -8px rgba(27,117,187,.25); } #emaids-booking-widget .scard .ic{ width:44px; height:44px; border-radius:12px; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .18s cubic-bezier(.2,.7,.2,1); } #emaids-booking-widget .scard.sel .ic{ background:var(--blue); color:#fff; } #emaids-booking-widget .scard b{ display:block; font-size:.94rem; color:var(--ink); font-weight:800; letter-spacing:-.01em; } #emaids-booking-widget .scard small{ color:var(--ink-soft); font-size:.79rem; line-height:1.45; display:block; margin-top:4px; } #emaids-booking-widget .scard .more{ font-size:.75rem; color:var(--blue); font-weight:700; margin-top:8px; display:inline-block; cursor:pointer; } #emaids-booking-widget .scard .details{ display:none; margin-top:8px; font-size:.78rem; color:var(--ink-soft); line-height:1.55; } #emaids-booking-widget .scard.expanded .details{ display:block; } /* =================== HOURS STEPPER =================== */ #emaids-booking-widget .hours{ display:none; margin-top:14px; background:var(--blue-tint); border:1px solid var(--blue-soft); border-radius:var(--radius); padding:14px; } #emaids-booking-widget .hours.show{ display:block; } #emaids-booking-widget .hrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; } #emaids-booking-widget .hrow b{ font-size:.9rem; color:var(--ink); } #emaids-booking-widget .stepper{ display:flex; align-items:center; gap:10px; } #emaids-booking-widget .stepper button{ width:42px; height:42px; border-radius:50%; border:1.5px solid var(--blue); background:var(--card); color:var(--blue); font-size:1.3rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; transition:all .18s; } #emaids-booking-widget .stepper button:active{ transform:scale(.93); } #emaids-booking-widget .stepper span{ font-size:1.15rem; font-weight:800; min-width:56px; text-align:center; color:var(--ink); } #emaids-booking-widget .hourwarn{ display:none; margin-top:11px; font-size:.78rem; color:var(--warn); font-weight:600; line-height:1.45; } #emaids-booking-widget .hourwarn.show{ display:block; } /* =================== EXTRAS =================== */ #emaids-booking-widget .mb-extras{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; } #emaids-booking-widget .ex{ border:1.5px solid var(--line); background:var(--card); border-radius:var(--radius); padding:13px; text-align:left; cursor:pointer; font-size:.82rem; font-weight:700; color:var(--ink); display:flex; gap:11px; align-items:center; min-height:58px; font-family:inherit; box-shadow:var(--shadow-xs); transition:all .18s cubic-bezier(.2,.7,.2,1); } #emaids-booking-widget .ex:active{ transform:scale(.98); } #emaids-booking-widget .ex svg.i{ color:var(--ink-soft); transition:color .18s; } #emaids-booking-widget .ex small{ display:block; font-weight:500; color:var(--ink-mute); font-size:.69rem; margin-top:2px; } #emaids-booking-widget .ex.sel{ border-color:var(--green); background:var(--green-soft); color:var(--green-deep); box-shadow:0 0 0 1px var(--green); } #emaids-booking-widget .ex.sel svg.i{ color:var(--green); } #emaids-booking-widget .ex.sel small{ color:var(--green-deep); opacity:.75; } #emaids-booking-widget .ex .tick{ display:none; margin-left:auto; color:var(--green); width:18px; height:18px; stroke-width:2.4; } #emaids-booking-widget .ex.sel .tick{ display:block; } /* =================== NOTICES =================== */ #emaids-booking-widget .notice{ background:var(--warn-soft); border:1.5px solid var(--warn-line); border-radius:var(--radius); padding:14px; font-size:.84rem; line-height:1.5; margin-top:12px; display:none; color:var(--ink); } #emaids-booking-widget .notice.show{ display:block; } #emaids-booking-widget .notice b{ display:block; margin-bottom:4px; color:var(--warn); font-weight:800; } #emaids-booking-widget .notice a{ color:var(--blue); font-weight:800; } /* =================== TRUST ROW (step 1) =================== */ #emaids-booking-widget .trustrow{ display:flex; align-items:stretch; gap:0; margin:16px 0 4px; background:linear-gradient(135deg,#eef8f3 0%,#e3f1ea 100%); border:1px solid #d1e8dd; border-radius:var(--radius); padding:12px 4px; box-shadow:var(--shadow-xs); } #emaids-booking-widget .tr-seg{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:5px; padding:2px 6px; text-align:center; } #emaids-booking-widget .tr-seg + .tr-seg{ border-left:1px solid rgba(31,156,132,.18); } #emaids-booking-widget .tr-seg .dot{ width:32px; height:32px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 1px 3px rgba(31,156,132,.18); } #emaids-booking-widget .tr-seg .dot svg.i{ width:17px; height:17px; color:var(--green); stroke-width:2; } #emaids-booking-widget .tr-seg b{ font-size:.92rem; color:var(--ink); font-weight:800; line-height:1.25; } #emaids-booking-widget .tr-seg span{ font-size:.9rem; color:var(--ink-soft); line-height:1.3; font-weight:600; } #emaids-booking-widget .tr-seg .tr-eyebrow{ font-size:.9rem; color:var(--ink-mute); font-weight:600; letter-spacing:.02em; text-transform:none; margin-bottom:-2px; } /* =================== REVIEW BLOCK =================== */ #emaids-booking-widget .review{ background:var(--card); border:1.5px solid var(--line); border-radius:var(--radius); padding:4px 16px; margin-top:8px; box-shadow:var(--shadow-xs); } #emaids-booking-widget .rrow{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid var(--line-soft); font-size:.86rem; } #emaids-booking-widget .rrow:last-child{ border:none; } #emaids-booking-widget .rrow .k{ display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-weight:600; flex-shrink:0; font-size:1.3rem; } #emaids-booking-widget .rrow .k svg.i{ width:16px; height:16px; color:var(--blue); } #emaids-booking-widget .rrow .v{ font-weight:700; text-align:right; flex:1; min-width:0; color:var(--ink); } #emaids-booking-widget .rrow .edit{ background:var(--blue-soft); border:none; color:var(--blue); font-weight:800; font-size:.76rem; cursor:pointer; font-family:inherit; padding:6px 12px; white-space:nowrap; border-radius:var(--pill); transition:all .18s; } #emaids-booking-widget .rrow .edit:active{ background:var(--blue); color:#fff; } /* =================== TOTALS =================== */ #emaids-booking-widget .totals{ margin-top:16px; background:var(--card); border:1.5px solid var(--line); border-radius:var(--radius); padding:6px 16px; box-shadow:var(--shadow-xs); } #emaids-booking-widget .srow{ display:flex; justify-content:space-between; align-items:center; font-size:.9rem; padding:10px 0; border-bottom:1px dashed var(--line); color:var(--ink-soft); } #emaids-booking-widget .srow:last-child{ border:none; } #emaids-booking-widget .srow.total{ font-weight:800; font-size:1.05rem; color:var(--ink); padding-top:12px; border-top:1px solid var(--line); border-bottom:none; } #emaids-booking-widget .srow.due{ font-weight:800; font-size:.95rem; color:var(--green); padding-top:6px; border:none; } #emaids-booking-widget .srow .neg{ color:var(--green); font-weight:800; } #emaids-booking-widget .recurnote{ display:none; font-size:1rem; color:var(--green); font-weight:700; margin-top:10px; background:var(--green-soft); border:1px solid #c8e3d6; border-radius:var(--radius-sm); padding:9px 12px; line-height:1.4; text-align:center; } /* =================== STICKY PRICE BAR =================== */ #emaids-booking-widget .pricebar{ position:sticky; bottom:0; left:auto; transform:none; width:100%; max-width:430px; margin:0 auto; background:rgba(255,255,255,.92); -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px); border-top:1px solid var(--line); padding:12px 18px calc(12px + env(safe-area-inset-bottom)); z-index:30; box-shadow:0 -10px 28px rgba(21,41,61,.10); } #emaids-booking-widget .pricerow{ display:flex; align-items:center; justify-content:space-between; gap:10px; } #emaids-booking-widget .ptotal{ cursor:pointer; user-select:none; display:flex; flex-direction:column; gap:0; } #emaids-booking-widget .ptotal small{ display:flex; align-items:center; gap:4px; font-size:1.3rem; color:var(--ink-soft); font-weight:700; text-transform:none; } #emaids-booking-widget .ptotal b{ font-size:1.5rem; letter-spacing:-.01em; color:var(--ink); line-height:1.15; } #emaids-booking-widget .ptotal .freq{ font-size:1.3rem; color:var(--green); font-weight:800; margin-left:4px; } #emaids-booking-widget .btns{ display:flex; align-items:center; gap:2px; } #emaids-booking-widget .nextbtn{ background:var(--blue); color:#fff; border:none; border-radius:var(--pill); font-size:1.5rem; font-weight:800; padding:14px 22px; cursor:pointer; min-height:48px; font-family:inherit; letter-spacing:.01em; box-shadow:0 6px 18px -4px rgba(27,117,187,.45); transition:all .18s cubic-bezier(.2,.7,.2,1); } #emaids-booking-widget .nextbtn:active{ background:var(--blue-dark); transform:scale(.97); } #emaids-booking-widget .nextbtn:disabled{ background:var(--line); color:var(--ink-soft); box-shadow:none; } /* estado "enviando": spinner en el botón + overlay anti doble-envío */ #emaids-booking-widget .nextbtn.loading{ position:relative; pointer-events:none; padding-left:44px; } #emaids-booking-widget .nextbtn.loading:before{ content:""; position:absolute; left:18px; top:50%; width:16px; height:16px; margin-top:-8px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:emaidsSpin .75s linear infinite; } #emaids-booking-widget .backlink{ display:flex; align-items:center; gap:3px; background:none; border:none; color:var(--ink-soft); font-size:1.3rem; font-weight:700; cursor:pointer; padding:10px 8px; font-family:inherit; border-radius:var(--pill); transition:all .18s; } #emaids-booking-widget .backlink svg.i{ width:20px; height:20px; } #emaids-booking-widget .backlink:disabled{ opacity:.55; cursor:not-allowed; } /* =================== PROCESSING / DONE OVERLAY =================== */ #emaids-booking-widget .bookingProcessing{ position:fixed; inset:0; z-index:70; background:rgba(21,41,61,.45); display:none; align-items:center; justify-content:center; padding:20px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } #emaids-booking-widget .bookingProcessing.show{ display:flex; } #emaids-booking-widget .processingCard{ width:100%; max-width:340px; background:var(--card); border-radius:var(--radius-lg); padding:28px 22px; text-align:center; box-shadow:var(--shadow-lg); border:1px solid var(--line); } #emaids-booking-widget .processingCard .spin{ width:42px; height:42px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--blue); display:block; margin:0 auto 16px; animation:emaidsSpin .75s linear infinite; } #emaids-booking-widget .processingCard b{ display:block; font-size:1.5rem; margin-bottom:7px; font-weight:800; } #emaids-booking-widget .processingCard p{ font-size:1.15rem; color:var(--ink-soft); line-height:1.5; } /* ---- Overlay "Almost done!" (procesando el envío real) ---- */ #emaids-booking-widget .almostCard{ padding-top:26px; } #emaids-booking-widget .almostCard b{ color:var(--ink); font-size:1.65rem; margin-bottom:9px; } #emaids-booking-widget .almostCard p{ font-size:1.18rem; max-width:280px; margin:0 auto; } /* Caja del reloj de arena + destellos decorativos alrededor */ #emaids-booking-widget .hourbox{ position:relative; width:150px; height:118px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; } /* Anillo: arco verde (~⅓, arriba-derecha) sobre aro casi blanco. Icono estático en el centro */ #emaids-booking-widget .hourring{ position:relative; width:86px; height:86px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--green); } #emaids-booking-widget .hourring::before{ content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from -14deg, #3fbfa4 0 5%, var(--green) 5% 37%, #e7eef1 37% 100%); } #emaids-booking-widget .hourring::after{ content:""; position:absolute; inset:6px; border-radius:50%; background:var(--card); } #emaids-booking-widget .hourring svg.i{ position:relative; z-index:1; width:40px; height:40px; stroke-width:1.7; } /* Destellos (4 puntas) y puntos */ #emaids-booking-widget .hourbox .spk{ position:absolute; line-height:0; } #emaids-booking-widget .hourbox .spk svg.i{ display:block; stroke:none; } #emaids-booking-widget .hourbox .s1{ top:10px; left:20px; color:var(--green); opacity:.45; } #emaids-booking-widget .hourbox .s1 svg.i{ width:18px; height:18px; } #emaids-booking-widget .hourbox .s2{ top:30px; right:14px; color:var(--green); opacity:.30; } #emaids-booking-widget .hourbox .s2 svg.i{ width:13px; height:13px; } #emaids-booking-widget .hourbox .s3{ top:6px; right:30px; color:var(--green); opacity:.22; } #emaids-booking-widget .hourbox .s3 svg.i{ width:10px; height:10px; } #emaids-booking-widget .hourbox .dot{ position:absolute; border-radius:50%; } #emaids-booking-widget .hourbox .d1{ width:7px; height:7px; bottom:24px; left:26px; background:var(--green); opacity:.40; } #emaids-booking-widget .hourbox .d2{ width:9px; height:9px; bottom:16px; right:32px; background:var(--green); opacity:.25; } /* Caja de aviso "no refrescar/cerrar/volver" (fondo verde suave) */ #emaids-booking-widget .waitnote{ display:flex; gap:12px; text-align:left; align-items:flex-start; background:var(--green-soft); border:1px solid #d3ebe4; border-radius:var(--radius-sm); padding:13px 15px; margin:18px 0 2px; } #emaids-booking-widget .waitnote .wn-ic{ flex-shrink:0; color:var(--blue); margin-top:1px; } #emaids-booking-widget .waitnote .wn-ic svg.i{ width:24px; height:24px; stroke-width:1.8; } #emaids-booking-widget .waitnote .wn-tx{ font-size:1.08rem; line-height:1.5; color:var(--ink-soft); } #emaids-booking-widget .waitnote .wn-tx b{ display:block; color:var(--green); font-size:1.08rem; font-weight:800; margin-bottom:2px; } /* Separador fino + spinner azul inferior */ #emaids-booking-widget .wn-sep{ display:block; height:1px; background:var(--line); margin:22px auto 0; max-width:260px; } #emaids-booking-widget .donespin{ width:40px; height:40px; border:3px solid var(--line); border-top-color:var(--blue); margin:18px auto 2px; } @keyframes emaidsSpin{ to{ transform:rotate(360deg); } } /* =================== SUMMARY SHEET =================== */ #emaids-booking-widget .sheet{ position:fixed; bottom:0; left:50%; transform:translateX(-50%) translateY(100%); width:100%; max-width:430px; background:var(--card); z-index:40; border-radius:var(--radius-lg) var(--radius-lg) 0 0; padding:22px 18px calc(24px + env(safe-area-inset-bottom)); box-shadow:var(--shadow-lg); transition:transform .3s ease; max-height:80vh; overflow-y:auto; } #emaids-booking-widget .sheet.open{ transform:translateX(-50%) translateY(0); } #emaids-booking-widget .sheet::before{ content:""; display:block; width:40px; height:4px; background:var(--line); border-radius:4px; margin:-6px auto 14px; } #emaids-booking-widget .sheet h3{ font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; color:var(--ink-soft); font-weight:800; } #emaids-booking-widget .sheet h3 button{ background:var(--line-soft); border:none; font-size:1rem; cursor:pointer; color:var(--ink-soft); width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; line-height:1; } #emaids-booking-widget .sumitem{ display:flex; gap:11px; align-items:center; font-size:.87rem; padding:8px 0; color:var(--ink); } #emaids-booking-widget .sumitem svg.i{ width:17px; height:17px; color:var(--blue); } #emaids-booking-widget .scrim{ position:fixed; inset:0; background:rgba(21,41,61,.4); z-index:35; opacity:0; pointer-events:none; transition:opacity .3s; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } #emaids-booking-widget .scrim.open{ opacity:1; pointer-events:auto; } /* =================== PROMO + PAYMENT =================== */ #emaids-booking-widget .promoBox{ background:var(--card); border:1.5px solid var(--line); border-radius:var(--radius); padding:14px; margin:6px 0 2px; box-shadow:var(--shadow-xs); } #emaids-booking-widget .promoRow{ display:flex; gap:8px; align-items:center; } #emaids-booking-widget .promoRow input{ flex:1; } #emaids-booking-widget .promoBtn{ border:none; background:var(--blue); color:#fff; border-radius:var(--pill); font-weight:800; font-size:.85rem; padding:13px 18px; min-height:48px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all .18s; } #emaids-booking-widget .promoBtn:active{ background:var(--blue-dark); transform:scale(.96); } /* estado "Remove": quitar un promo ya aplicado (look neutro, no azul) */ #emaids-booking-widget .promoBtn.is-remove{ background:var(--card); color:var(--ink-soft); border:1.5px solid var(--line); } #emaids-booking-widget .promoBtn.is-remove:active{ background:var(--line-soft); } #emaids-booking-widget .promoRow input:read-only{ background:var(--line-soft); color:var(--ink-soft); } #emaids-booking-widget .promoMsg{ font-size:1.1rem; color:var(--ink-soft); line-height:1.4; margin-top:8px; } #emaids-booking-widget .promoMsg.good{ color:var(--green); font-weight:800; } #emaids-booking-widget .promoMsg.bad{ color:var(--warn); font-weight:800; } #emaids-booking-widget .paynote{ display:flex; gap:11px; align-items:flex-start; background:var(--blue-soft); border-radius:var(--radius); padding:14px; font-size:.84rem; line-height:1.5; margin-top:8px; color:var(--ink); } #emaids-booking-widget .paynote svg.i{ color:var(--blue); margin-top:2px; flex-shrink:0; } #emaids-booking-widget .paynote b{ font-weight:800; } #emaids-booking-widget .check{ display:flex; gap:11px; align-items:flex-start; margin-top:14px; font-size:1.1rem; color:var(--ink-soft); line-height:1.5; cursor:pointer; } #emaids-booking-widget .check input{ width:21px; height:21px; margin-top:1px; flex-shrink:0; accent-color:var(--blue); } #emaids-booking-widget .legal{ font-size:1.2rem; color:var(--ink-mute); line-height:1.55; margin-top:16px; } #emaids-booking-widget .legal a{ color:var(--blue); font-weight:700; } #emaids-booking-widget details.lm{ margin-top:12px; } #emaids-booking-widget details.lm summary{ font-size:.78rem; font-weight:700; color:var(--blue); cursor:pointer; list-style:none; } #emaids-booking-widget details.lm summary::-webkit-details-marker{ display:none; } #emaids-booking-widget details.lm summary::after{ content:" \25be"; font-size:.7rem; } #emaids-booking-widget details.lm[open] summary::after{ content:" \25b4"; } #emaids-booking-widget details.lm p{ font-size:.73rem; color:var(--ink-mute); line-height:1.6; margin-top:9px; } /* =================== CONFIRMATION =================== */ #emaids-booking-widget .confirm{ text-align:center; padding-top:32px; } #emaids-booking-widget .confirm .big{ width:82px; height:82px; border-radius:50%; background:linear-gradient(135deg,var(--green-soft) 0%,#d4ecdf 100%); color:var(--green); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; box-shadow:0 12px 28px -6px rgba(31,156,132,.35); } #emaids-booking-widget .confirm .big svg.i{ width:38px; height:38px; stroke-width:2.4; } #emaids-booking-widget .estbanner{ background:var(--green-soft); border:1px solid #c8e3d6; border-radius:var(--radius); padding:16px; margin-top:18px; display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; } #emaids-booking-widget .estbanner b{ font-size:1.4rem; color:var(--ink); font-weight:800; display:block; margin-top:2px; } #emaids-booking-widget .estbanner small{ font-size:.75rem; color:var(--ink-soft); display:block; font-weight:800; text-transform:uppercase; letter-spacing:.06em; } #emaids-booking-widget .estbanner .right{ font-size:.74rem; color:var(--ink-soft); text-align:right; line-height:1.5; } /* ---- Ajustes de legibilidad móvil (textos de campos más grandes) ---- Va al final para ganar a las reglas de la maqueta. Sube solo los textos que quedaban pequeños; el tema usa root 62.5% (1rem≈10px). */ #emaids-booking-widget input, #emaids-booking-widget select, #emaids-booking-widget textarea{ font-size:1.4rem !important; padding:14px !important; } #emaids-booking-widget .chip{ font-size:1rem; padding:12px 16px; } #emaids-booking-widget .scard b{ font-size:1.08rem; } #emaids-booking-widget .scard small{ font-size:.92rem; } #emaids-booking-widget .scard .more{ font-size:.88rem; } #emaids-booking-widget .scard .details{ font-size:.92rem; } #emaids-booking-widget .ex{ font-size:.95rem; } #emaids-booking-widget .ex small{ font-size:.78rem; } #emaids-booking-widget .srow{ font-size:1.3rem; } #emaids-booking-widget .srow.total{ font-size:1.5rem; } #emaids-booking-widget .srow.due{ font-size:1.3rem; } #emaids-booking-widget .rrow, #emaids-booking-widget .rrow .v{ font-size:1.2rem; } #emaids-booking-widget .notice, #emaids-booking-widget .paynote{ font-size:1.1rem; } #emaids-booking-widget .promoMsg{ font-size:.88rem; } #emaids-booking-widget .nextbtn{ font-size:1.5rem; } #emaids-booking-widget .ptotal b{ font-size:1.4rem; } #emaids-booking-widget .sumitem{ font-size:1rem; } #emaids-booking-widget .freqnote .fn-col .fn-price{ font-size:1.5rem; } #emaids-booking-widget .formerror{ font-size:.95rem; } /* Selector de horas (Hourly / Move In-Out): textos acordes al resto */ #emaids-booking-widget .hrow b{ font-size:1.4rem; } #emaids-booking-widget .stepper span{ font-size:1.5rem; } #emaids-booking-widget .stepper button{ font-size:1.8rem; } #emaids-booking-widget .hourwarn{ font-size:1.1rem; } /* ---- Checkboxes de aceptación: restaurar el check nativo ---- La regla genérica de la maqueta (input{appearance:none;border-radius}) los dejaba redondos y sin marca al seleccionarse. Restauramos el checkbox real (cuadrado, con palomita) y color de marca. Va al final para ganar. */ #emaids-booking-widget input[type="checkbox"]{ -webkit-appearance:auto !important; appearance:auto !important; width:22px !important; height:22px !important; min-width:22px; padding:0 !important; margin:2px 0 0 !important; border-radius:4px !important; accent-color:var(--blue); flex-shrink:0; background:none !important; } @media (prefers-reduced-motion:reduce){ #emaids-booking-widget .screen, #emaids-booking-widget .sheet, #emaids-booking-widget .scrim{ animation:none; transition:none; } } /* Ocultar el chat de tawk.to SOLO en esta página (se superpone a la barra de precio sticky). El widget se inyecta como iframe(s) al ; los tapamos por varios selectores conocidos de tawk para cubrir distintas versiones. Como este CSS solo se encola en /new-york-city/booking/ y <=1024px, no afecta a tawk en ninguna otra página ni en desktop. */ body.emaids-mb-on iframe[title="chat widget"], body.emaids-mb-on iframe[title*="chat" i], body.emaids-mb-on .widget-visible, body.emaids-mb-on .tawk-min-container, body.emaids-mb-on #tawkchat-container, body.emaids-mb-on #tawkchat-minified-container, body.emaids-mb-on div[class^="tawk-"], body.emaids-mb-on div[id^="tawk"] { display:none !important; } }