﻿/*
Source file: website-review-form.html inline <style> block(s)
Extraction date/time: 2026-07-19 14:10:21 -04:00
Mechanical migration copy, no cleanup.
*/

    .website-review-form-page .review-page-hero{
      padding:22px 26px;
    }

    .website-review-form-page .review-page-hero p{
      max-width:300px;
      font-size:15px;
      font-family:Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .website-review-form-page .review-form-card{
      margin-top:18px;
      padding:24px;
      border-radius:24px;
      box-shadow:0 18px 46px rgba(19,20,27,.08);
      font-family:Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .website-review-form-page .review-form-card h2{
      font-family:Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size:clamp(26px,3.4vw,38px);
      font-weight:850;
      letter-spacing:-.03em;
      margin-bottom:18px;
    }

    .website-review-form-page .review-form-grid{
      gap:14px;
    }

    .website-review-form-page .review-field{
      gap:6px;
    }

    .website-review-form-page .review-field label,
    .website-review-form-page .review-rating-label,
    .website-review-form-page .review-choice-label{
      color:color-mix(in srgb,var(--reviews-text) 62%,var(--reviews-muted));
      font-size:13px;
      font-weight:760;
      letter-spacing:.01em;
      text-transform:none;
    }

    .website-review-form-page .review-field input,
    .website-review-form-page .review-field select,
    .website-review-form-page .review-field textarea{
      min-height:48px;
      border-radius:14px;
      background:rgba(255,255,255,.72);
      font-family:Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-weight:620;
      transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
    }

    .website-review-form-page .review-field textarea{
      min-height:132px;
    }

    body[data-theme="dark"].website-review-form-page .review-field input,
    body[data-theme="dark"].website-review-form-page .review-field select,
    body[data-theme="dark"].website-review-form-page .review-field textarea{
      background:rgba(255,255,255,.07);
    }

    .website-review-form-page .review-field:not(.has-error) input:invalid,
    .website-review-form-page .review-field:not(.has-error) select:invalid,
    .website-review-form-page .review-field:not(.has-error) textarea:invalid{
      border-color:var(--reviews-line);
      box-shadow:none;
    }

    .website-review-form-page .review-field input:focus,
    .website-review-form-page .review-field select:focus,
    .website-review-form-page .review-field textarea:focus,
    .website-review-form-page .review-field input:focus-visible,
    .website-review-form-page .review-field select:focus-visible,
    .website-review-form-page .review-field textarea:focus-visible{
      outline:none;
      border-color:color-mix(in srgb,var(--reviews-text) 18%,var(--reviews-line));
      box-shadow:0 8px 22px rgba(19,20,27,.06);
    }

    body[data-theme="dark"].website-review-form-page .review-field input:focus,
    body[data-theme="dark"].website-review-form-page .review-field select:focus,
    body[data-theme="dark"].website-review-form-page .review-field textarea:focus,
    body[data-theme="dark"].website-review-form-page .review-field input:focus-visible,
    body[data-theme="dark"].website-review-form-page .review-field select:focus-visible,
    body[data-theme="dark"].website-review-form-page .review-field textarea:focus-visible{
      border-color:rgba(255,255,255,.24);
      box-shadow:0 8px 22px rgba(0,0,0,.18);
    }

    .website-review-form-page .review-file-input{
      position:absolute;
      width:1px;
      height:1px;
      opacity:0;
      overflow:hidden;
      pointer-events:none;
    }

    .website-review-form-page .review-file-input,
    .website-review-form-page .review-file-input:focus,
    .website-review-form-page .review-file-input:focus-visible{
      outline:none;
      border:0;
      box-shadow:none;
    }

    .website-review-form-page .review-file-upload{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
    }

    .website-review-form-page .review-file-trigger{
      min-height:42px;
      padding:9px 13px;
      border:1px solid var(--reviews-line);
      border-radius:12px;
      background:rgba(255,255,255,.72);
      color:var(--reviews-text);
      font-family:Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-weight:850;
      cursor:pointer;
      transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
    }

    .website-review-form-page .review-file-trigger:hover{
      transform:translateY(-1px);
      border-color:color-mix(in srgb,var(--reviews-text) 18%,var(--reviews-line));
      box-shadow:0 8px 18px rgba(19,20,27,.07);
    }

    .website-review-form-page .review-file-trigger:focus,
    .website-review-form-page .review-file-trigger:focus-visible{
      outline:none;
      border-color:color-mix(in srgb,var(--reviews-text) 18%,var(--reviews-line));
      box-shadow:0 8px 18px rgba(19,20,27,.07);
    }

    .website-review-form-page .review-file-status{
      color:var(--reviews-muted);
      font-size:13px;
      font-weight:800;
      line-height:1.35;
      pointer-events:none;
      user-select:text;
    }

    body[data-theme="dark"].website-review-form-page .review-file-trigger{
      background:rgba(255,255,255,.09);
      border-color:rgba(255,255,255,.18);
    }

    .website-review-form-page .review-field.has-error input,
    .website-review-form-page .review-field.has-error select,
    .website-review-form-page .review-field.has-error textarea,
    .website-review-form-page .review-field.has-error input:focus,
    .website-review-form-page .review-field.has-error select:focus,
    .website-review-form-page .review-field.has-error textarea:focus,
    .website-review-form-page .review-field.has-error input:focus-visible,
    .website-review-form-page .review-field.has-error select:focus-visible,
    .website-review-form-page .review-field.has-error textarea:focus-visible{
      border-color:#e53e4d;
      box-shadow:0 0 0 3px rgba(229,62,77,.10);
    }

    .website-review-form-page .review-field select{
      appearance:none;
      padding-right:42px;
      cursor:pointer;
    }

    .website-review-form-page .review-field select:disabled{
      color:var(--reviews-muted);
      cursor:not-allowed;
      opacity:.72;
    }

    .website-review-form-page .review-field.select-field{
      position:relative;
    }

    .website-review-form-page .review-field.select-field::after{
      content:"";
      position:absolute;
      right:17px;
      top:42px;
      width:8px;
      height:8px;
      border-right:2px solid var(--reviews-muted);
      border-bottom:2px solid var(--reviews-muted);
      transform:rotate(45deg);
      pointer-events:none;
    }

    .website-review-form-page .review-service-selector{
      gap:10px;
      padding:0;
      border:0;
      background:transparent;
      box-shadow:none;
    }

    .website-review-form-page .review-service-picker{
      display:grid;
      gap:12px;
      padding:16px;
      border-radius:24px;
      background:linear-gradient(135deg,rgba(12,14,22,.97),rgba(26,29,42,.92));
      border:1px solid rgba(255,255,255,.14);
      color:#f7f3ea;
      box-shadow:0 22px 58px rgba(12,14,22,.18), inset 0 1px 0 rgba(255,255,255,.10);
    }

    .website-review-form-page .review-service-picker-title{
      margin:0;
      color:#f7f3ea;
      font-size:18px;
      font-weight:900;
      line-height:1.15;
    }

    .website-review-form-page .review-service-cats,
    .website-review-form-page .review-service-subs{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    .website-review-form-page .review-service-cats{
      width:max-content;
      max-width:100%;
      padding:8px;
      border-radius:999px;
      background:rgba(0,0,0,.20);
      border:1px solid rgba(255,255,255,.10);
    }

    .website-review-form-page .review-service-subs{
      width:max-content;
      max-width:100%;
      align-self:start;
      box-sizing:border-box;
      min-height:60px;
      padding:10px;
      border-radius:22px;
      background:rgba(3,5,12,.42);
      border:1px solid rgba(255,255,255,.11);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }

    .website-review-form-page .review-service-subs:empty{
      display:none;
    }

    .website-review-form-page .review-service-cat,
    .website-review-form-page .review-service-sub{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.08);
      color:rgba(247,243,234,.86);
      font-family:Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size:14px;
      font-weight:900;
      line-height:1.15;
      cursor:pointer;
      backdrop-filter:blur(12px);
      transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .website-review-form-page .review-service-cat{
      padding:10px 18px;
    }

    .website-review-form-page .review-service-cat[data-category-value="Handyman"]{
      --tab-color:#8b2cff;
    }

    .website-review-form-page .review-service-cat[data-category-value="Moving"]{
      --tab-color:#00f5b8;
    }

    .website-review-form-page .review-service-cat[data-category-value="Painting"]{
      --tab-color:#ff7a1a;
    }

    .website-review-form-page .review-service-cat[data-category-value="Cleaning"]{
      --tab-color:#245bff;
    }

    .website-review-form-page .review-service-sub{
      min-height:40px;
      padding:9px 14px;
      color:rgba(247,243,234,.82);
      background:rgba(255,255,255,.10);
    }

    .website-review-form-page .review-service-cat:hover,
    .website-review-form-page .review-service-cat.active{
      transform:translateY(-1px);
      color:#fff;
      background:var(--tab-color);
      border-color:color-mix(in srgb, var(--tab-color) 88%, white 12%);
      box-shadow:0 0 0 1px color-mix(in srgb, var(--tab-color) 28%, transparent) inset, 0 0 10px color-mix(in srgb, var(--tab-color) 22%, transparent), 0 10px 24px color-mix(in srgb, var(--tab-color) 14%, transparent);
    }

    .website-review-form-page .review-service-sub:hover,
    .website-review-form-page .review-service-sub.active{
      transform:translateY(-1px);
      color:#11131a;
      background:#fff;
      border-color:rgba(255,255,255,.86);
      box-shadow:0 0 0 1px rgba(255,255,255,.20) inset, 0 8px 20px rgba(255,255,255,.12);
    }

    .website-review-form-page .review-field.has-error .review-service-picker{
      border-color:rgba(229,62,77,.58);
      box-shadow:0 22px 58px rgba(12,14,22,.18), 0 0 0 3px rgba(229,62,77,.12), inset 0 1px 0 rgba(255,255,255,.10);
    }

    .website-review-form-page .review-rating-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

    .website-review-form-page .review-rating-text{
      color:var(--reviews-muted);
      font-size:12px;
      font-weight:850;
    }

    .website-review-form-page .review-rating{
      gap:10px;
    }

    .website-review-form-page .review-star{
      position:relative;
      overflow:hidden;
      width:50px;
      height:50px;
      border-radius:15px;
      background:rgba(255,255,255,.74);
      color:#b7bbc5;
      font-size:28px;
      line-height:1;
      transform:translateY(0) scale(1);
      transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
    }

    .website-review-form-page .review-star::after{
      content:"";
      position:absolute;
      inset:-35%;
      background:linear-gradient(105deg,transparent 36%,rgba(255,218,128,.26) 50%,transparent 64%);
      opacity:0;
      transform:translateX(-130%) rotate(10deg);
      pointer-events:none;
      animation:review-star-shimmer 9s ease-in-out infinite;
    }

    .website-review-form-page .review-star:nth-child(2)::after{animation-delay:.18s}
    .website-review-form-page .review-star:nth-child(3)::after{animation-delay:.36s}
    .website-review-form-page .review-star:nth-child(4)::after{animation-delay:.54s}
    .website-review-form-page .review-star:nth-child(5)::after{animation-delay:.72s}

    @keyframes review-star-shimmer{
      0%,68%,100%{
        opacity:0;
        transform:translateX(-130%) rotate(10deg);
      }
      72%{
        opacity:.42;
      }
      82%{
        opacity:.16;
        transform:translateX(130%) rotate(10deg);
      }
      86%{
        opacity:0;
        transform:translateX(130%) rotate(10deg);
      }
    }

    .website-review-form-page .review-rating:hover .review-star::after,
    .website-review-form-page .review-star.is-selected::after,
    .website-review-form-page .review-star.is-preview::after{
      animation:none;
      opacity:0;
    }

    .website-review-form-page .review-star:hover,
    .website-review-form-page .review-star.is-preview{
      transform:translateY(-2px) scale(1.04);
      color:#ef9800;
      border-color:rgba(239,152,0,.42);
      background:#fff8de;
    }

    .website-review-form-page .review-star.is-selected{
      color:#ef9800;
      border-color:#efb633;
      background:linear-gradient(180deg,#fff8dc,#ffefb8);
      box-shadow:0 10px 22px rgba(239,152,0,.16);
    }

    .website-review-form-page .review-text-helper{
      margin:-1px 0 0;
      color:color-mix(in srgb,var(--reviews-text) 48%,var(--reviews-muted));
      font-size:12px;
      font-weight:650;
      line-height:1.45;
    }

    .website-review-form-page .review-form-submit{
      margin-top:18px;
      min-height:50px;
      font-family:Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-weight:800;
    }

    .website-review-form-page .review-permission{
      padding:14px;
      border:1px solid var(--reviews-line);
      border-radius:16px;
      background:rgba(255,255,255,.58);
    }

    .website-review-form-page .review-permission,
    .website-review-form-page .review-permission:focus,
    .website-review-form-page .review-permission:focus-within,
    .website-review-form-page .review-permission:focus-visible,
    .website-review-form-page .review-permission:active{
      outline:none;
      box-shadow:none;
    }

    .website-review-form-page .review-permission input[type="checkbox"]{
      accent-color:#22c55e;
      outline:none;
      box-shadow:none;
    }

    .website-review-form-page .review-permission input[type="checkbox"]:focus,
    .website-review-form-page .review-permission input[type="checkbox"]:focus-visible,
    .website-review-form-page .review-permission input[type="checkbox"]:active{
      outline:none;
      box-shadow:none;
    }

    .website-review-form-page .review-field.has-error .review-permission input[type="checkbox"]{
      accent-color:#22c55e;
      border-color:#22c55e;
      box-shadow:none;
    }

    body[data-theme="dark"].website-review-form-page .review-permission{
      background:rgba(255,255,255,.06);
    }

    @media (max-width:760px){
      .website-review-form-page .review-form-grid{
        grid-template-columns:1fr;
      }

      .website-review-form-page .review-field.full{
        grid-column:auto;
      }

      .website-review-form-page .review-service-picker{
        padding:14px;
        border-radius:22px;
      }

      .website-review-form-page .review-service-cats{
        width:100%;
        border-radius:20px;
      }

      .website-review-form-page .review-service-cat{
        flex:1 1 calc(50% - 5px);
      }

    }

    @media (max-width:520px){
      .website-review-form-page .review-page-hero,
      .website-review-form-page .review-form-card{
        padding:20px;
        border-radius:22px;
      }

      .website-review-form-page .review-rating{
        gap:7px;
      }

      .website-review-form-page .review-star{
        width:44px;
        height:44px;
        font-size:25px;
      }

      .website-review-form-page .review-service-cats,
      .website-review-form-page .review-service-subs{
        width:100%;
        gap:8px;
        padding:8px;
      }

      .website-review-form-page .review-service-cat,
      .website-review-form-page .review-service-sub{
        width:100%;
        min-height:42px;
        padding:10px 12px;
        font-size:13px;
      }
    }

    @media (prefers-reduced-motion:reduce){
      .website-review-form-page .review-star::after{
        animation:none;
      }
    }
  
