/* ========================================================================= css/request.css — the rental request page at /request ------------------------------------------------------------------------- Everything here is scoped under #view-request or a .rq- prefix. The page reuses the site's own variables, so it inherits the type and colour without redefining any of it. The states the page can be in are driven by classes on #view-request: .is-returning the email is on file .is-unverified on file, but this device has not proved it yet Rules for those live at the bottom. ========================================================================= */ #view-request .rq-grid{display:grid;grid-template-columns:1.3fr 0.9fr;gap:44px;} #view-request .rq-grid > *{min-width:0;} @media(max-width:900px){ #view-request .rq-grid{grid-template-columns:1fr;gap:26px;} /* On a phone the quote leads: what you are asking for comes before what we are asking you. */ #view-request .rq-grid > div:last-child{order:-1;} } #view-request h1.rq-h{font-family:var(--ts-display);font-size:32px;margin:0 0 6px;} #view-request .notres{display:inline-flex;gap:7px;margin:8px 0 22px;padding:7px 12px;border-radius:999px; background:#FDF6E3;border:1px solid #ECD9A8;color:#7A4E00;font-size:12.5px;} #view-request .sec{background:var(--ts-card);border:1.5px solid var(--ts-line);border-radius:var(--ts-radius-card); padding:20px 22px;margin:0 0 14px;} #view-request .sec-h{display:flex;align-items:baseline;gap:10px;margin:0 0 16px;} #view-request .sec-n{font-family:var(--ts-mono);font-size:11px;color:var(--ts-mute);} #view-request .sec-h h2{font-family:var(--ts-display);font-size:19px;margin:0;} #view-request .grp{font-family:var(--ts-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase; color:var(--ts-red);font-weight:600;margin:26px 0 15px;} /* A heading that opens a section already has the section head above it. */ #view-request .sec-h + .grp{margin-top:0;} #view-request .grp.plain{color:var(--ts-mute);font-weight:400;} #view-request label.fld{display:block;font-family:var(--ts-mono);font-size:10.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--ts-mute);margin:0 0 5px;} #view-request .fw{margin:0 0 14px;} /* The row gap alone spaces the rows; without this the fields inside also carry their own bottom margin and the pairs sit 27px apart while a single field below them sits 14px apart. */ #view-request .r2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 14px;} #view-request .r2 .fw{margin-bottom:0;} @media(max-width:560px){ #view-request .r2{grid-template-columns:1fr;}} #view-request input[type=text], #view-request input[type=email], #view-request input[type=tel], #view-request input[type=number], #view-request textarea, #view-request input[type=file]{width:100%; border:1.5px solid var(--ts-line);border-radius:10px;padding:11px 13px; font-family:var(--ts-body);font-size:14px;background:var(--ts-card);outline:none;} #view-request textarea{min-height:80px;resize:vertical;} #view-request .note{font-size:12.5px;color:var(--ts-mute);margin-top:7px;} /* The mileage and the fee are the answer to the question the renter just asked, so they are set at reading size in full ink rather than in the muted 12.5px the rest of the note uses. */ #view-request .feeline{display:block;font-size:15px;line-height:1.45;color:var(--ts-ink);} #view-request .feeline .fee{color:var(--ts-red);} #view-request .feesum{font-size:12.5px;color:var(--ts-mute);font-weight:400;} #view-request .opt{display:flex;gap:11px;align-items:flex-start;border:1.5px solid var(--ts-line); border-radius:11px;padding:12px 14px;margin:0 0 9px;cursor:pointer;} #view-request .opt.on{border-color:var(--ts-red);background:#FDF5F4;} #view-request .opt.off{opacity:.5;cursor:not-allowed;background:var(--ts-cloud);} #view-request .opt.off .d{color:#8E1B16;} #view-request .opt .t{font-weight:600;font-size:14.5px;} #view-request .opt .d{font-size:13px;color:var(--ts-mute);margin-top:2px;} #view-request .reveal{margin:2px 0 12px 28px;padding-left:14px;border-left:2px solid var(--ts-line);} #view-request .reveal[hidden], #view-request .qline[hidden], #view-request .qrow[hidden], #view-request .sub[hidden]{display:none;} #view-request .rq{font-size:13px;line-height:1.65;margin:0 0 10px;} #view-request .rq b{color:var(--ts-ink);} #view-request .rq ul{margin:5px 0 0;padding-left:18px;} #view-request .warnbox{background:#FCEBEA;border:1px solid #F3C9C6;color:#8E1B16;border-radius:9px; padding:9px 12px;font-size:12.5px;margin:0 0 10px;} #view-request .coibox{background:var(--ts-cloud);border-radius:9px;padding:11px 13px;font-size:13px; line-height:1.6;margin:0 0 4px;} #view-request .coibox .lab{font-family:var(--ts-mono);font-size:9.5px;letter-spacing:.05em; text-transform:uppercase;color:var(--ts-mute);display:block;margin-bottom:4px;} #view-request .chk{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:14px;} #view-request .chk .d{font-size:12.5px;color:var(--ts-mute);display:block;} #view-request .pill{display:inline-block;padding:1px 7px;border-radius:999px;font-family:var(--ts-mono); font-size:9px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;border:1px solid;} #view-request .pill.ok{background:#E7F4EC;border-color:#BFE0CB;color:#17603A;} #view-request .pill.warn{background:#FDF6E3;border-color:#ECD9A8;color:#7A4E00;} #view-request .feebox{background:#E7F4EC;border:1px solid #BFE0CB;border-radius:10px;padding:11px 13px; margin:10px 0 0;font-size:13.5px;} #view-request .feebox .big{font-size:17px;font-weight:700;} #view-request .verify{background:var(--ts-cloud);border-radius:10px;padding:13px 15px;} #view-request .rq-retbar{background:var(--ts-cloud);border:1.5px solid var(--ts-line); border-radius:var(--ts-radius-card);padding:15px 18px;margin:0 0 14px; display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;} #view-request .rq-retbar b{font-size:15px;} #view-request .rq-retbar .d{display:block;font-size:13px;color:var(--ts-mute);margin-top:2px;} #view-request .rq-retbar .row{display:flex;gap:9px;} #view-request .rq-retbar input{max-width:210px;} #view-request .codebox{background:#FDF6E3;border:1px solid #ECD9A8;border-radius:10px;padding:13px 15px;} #view-request .codebox .row{display:flex;gap:9px;margin-top:10px;} #view-request .codebox input{max-width:150px;letter-spacing:.18em;font-family:var(--ts-mono);} #view-request .onfile{background:var(--ts-cloud);border-radius:10px;padding:13px 15px;font-size:14px; line-height:1.65;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;} #view-request .onfile a{color:var(--ts-red);font-size:12.5px;white-space:nowrap;} #view-request .verify.done{background:#E7F4EC;border:1px solid #BFE0CB;} #view-request .mini{font-family:var(--ts-mono);font-size:10.5px;color:var(--ts-mute);} #view-request .addbtn{background:var(--ts-ink);color:#fff;border:0;border-radius:999px;padding:9px 18px; font-family:var(--ts-body);font-size:13.5px;font-weight:600;cursor:pointer;margin-top:8px;} #view-request .addbtn.added{background:#17603A;} #view-request .addbtn.added:hover{background:#8E1B16;} /* With every item listed, #view-request a big order can out-grow the screen. Let the card itself scroll rather than hiding items behind a button. */ /* 68px is the height of the sticky site nav; the card has to clear it or its heading hides behind the bar as soon as the page scrolls. */ #view-request .rail{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow:auto;} @media(max-width:900px){ #view-request .rail{position:static;max-height:none;overflow:visible;}} #view-request .quote{background:var(--ts-card);border:1.5px solid var(--ts-line); border-radius:var(--ts-radius-card);overflow:hidden;} #view-request .quote-h{padding:15px 20px;border-bottom:1px solid var(--ts-line); display:flex;justify-content:space-between;align-items:baseline;} #view-request .quote-h h3{font-family:var(--ts-display);font-size:19px;margin:0;} #view-request .quote-h a{font-size:12px;color:var(--ts-red);} #view-request .qdates{display:flex;gap:10px;padding:13px 20px;background:var(--ts-cloud); border-bottom:1px solid var(--ts-line);font-size:13px;} #view-request .qdates .lab{font-family:var(--ts-mono);font-size:9.5px;letter-spacing:.05em; text-transform:uppercase;color:var(--ts-mute);display:block;} #view-request .qdates .tsdp-wrap{display:block;margin-top:4px;} /* The panel is a summary, not a form, so the trigger is sized down to sit in it - but it keeps its border, because the whole point of the change is that these dates no longer look like fixed text. */ #view-request .qdates .tsdp-trigger{padding:6px 9px;font-size:13px;gap:6px;border-radius:8px;} #view-request .qtime{display:block;margin-top:4px;font-size:11px;color:var(--ts-mute);} /* Gear that stopped being free when the dates moved. Sits under the item name on its own line so it cannot be mistaken for part of the title. */ #view-request .qavail{display:block;margin-top:3px;font-size:11.5px;font-weight:600;} #view-request .qavail.out{color:#8E1B16;} #view-request .qavail.low{color:#7A4E00;} #view-request .qitems{padding:6px 20px;} #view-request .qrow{display:flex;justify-content:space-between;gap:10px;padding:9px 0;font-size:13.5px; border-bottom:1px solid var(--ts-line);} #view-request .qrow:last-child{border-bottom:0;} #view-request .qsum{padding:13px 20px;border-top:1px solid var(--ts-line);font-size:13.5px;} #view-request .qline{display:flex;justify-content:space-between;padding:3px 0;} #view-request .qline.big{font-size:17px;font-weight:700;padding-top:9px;margin-top:6px; border-top:1px solid var(--ts-line);} #view-request .qline .mut{color:var(--ts-mute);} #view-request .qline.disc span:last-child{color:#17603A;} #view-request .qcov{margin:11px 20px;padding:9px 12px;border-radius:9px;font-size:12.5px;border:1px solid;} #view-request .qcov.ok{background:#E7F4EC;border-color:#BFE0CB;color:#17603A;} #view-request .qcov.todo{background:#FDF6E3;border-color:#ECD9A8;color:#7A4E00;} #view-request .qcov.none{background:#FCEBEA;border-color:#F3C9C6;color:#8E1B16;} #view-request .qsend{padding:0 20px 18px;} #view-request .btn[disabled]{background:var(--ts-line);color:var(--ts-mute);cursor:not-allowed;} #view-request .sendwhy{margin-top:8px;font-size:12.5px;color:#8E1B16;text-align:center;} #view-request .sendwhy[hidden]{display:none;} #view-request .btn{width:100%;background:var(--ts-red);color:#fff;border:0;border-radius:999px;padding:14px; font-family:var(--ts-body);font-size:15px;font-weight:600;cursor:pointer;} #view-request .bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--ts-card); border-top:1.5px solid var(--ts-line);padding:11px 16px; box-shadow:0 -6px 22px rgba(17,17,17,.1);align-items:center;gap:12px;} #view-request .bar .tot{flex:1;font-size:13px;} #view-request .bar .tot b{font-size:17px;display:block;} #view-request .sendsec{display:none;} @media(max-width:900px){ #view-request .sendsec{display:block;} /* the card's own Send, #view-request which is now above the questions */ #view-request .qsend{display:none;} } #view-request .bar button{background:var(--ts-red);color:#fff;border:0;border-radius:999px;padding:12px 22px; font-family:var(--ts-body);font-size:14.5px;font-weight:600;} @media(max-width:900px){ #view-request .bar{display:flex;}} /* ---- who is filling it in ---------------------------------------------- */ #view-request .new-only, #view-request .ret-only, #view-request .verify-only, #view-request .verified-only{display:block;} #view-request.is-returning .new-only{display:none;} #view-request:not(.is-returning) .ret-only{display:none;} /* An unrecognised device has proved nothing yet, so it is shown nothing. */ #view-request:not(.is-unverified) .verify-only{display:none;} #view-request.is-unverified .verified-only{display:none;} #view-request.is-returning:not(.is-unverified) .rq-retbar{display:none;} /* ---- the page head ----------------------------------------------------- The heading sits inside the left column rather than in a .ts-page-head above the grid, so the quote card lines up with the title instead of starting a heading and a pill lower down. That means this section owns the space under the nav. */ #view-request .ts-section.tight{padding-top:40px;} #view-request .ts-eyebrow{margin-bottom:10px;} /* The Places suggestion box is a web component with its own input inside a shadow root, so it cannot inherit our input styling the normal way. These are the parts Google exposes for theming; the rest is its own. Sized to match .fw input so the field does not jump when suggestions switch on. */ /* color-scheme:light is doing real work. The rest of the site ignores the visitor's dark-mode setting, but Google's widget honours it, so on a machine set to dark the address box rendered black inside a cream form. */ #view-request gmp-place-autocomplete{display:block;width:100%;margin-bottom:0; color-scheme:light; --gmp-mat-color-surface:#fff; --gmp-mat-color-on-surface:var(--ts-ink); --gmp-mat-color-outline:var(--ts-line); --gmp-mat-color-primary:var(--ts-red); --gmp-mat-font-family:var(--ts-body);}