@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap'); :root { --ink: #0a0a0f; --ink-light: #14141e; --ink-mid: #1e1e2e; --surface: #ffffff; --surface-2: #f7f7fc; --surface-3: #efeff8; --border: #e4e4f0; --border-dark:#d0d0e8; --gold: #f5a623; --gold-light: #ffd07a; --accent: #6c63ff; --accent-2: #ff6584; --accent-3: #43d9ad; --text: #1a1a2e; --text-mid: #4a4a6a; --text-soft: #8888aa; --shadow-sm: 0 1px 3px rgba(10,10,20,.06),0 1px 2px rgba(10,10,20,.04); --shadow-md: 0 4px 16px rgba(10,10,20,.08),0 2px 6px rgba(10,10,20,.05); --shadow-lg: 0 16px 48px rgba(10,10,20,.12),0 8px 20px rgba(10,10,20,.07); --shadow-xl: 0 32px 80px rgba(10,10,20,.18); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --transition: 0.22s cubic-bezier(.4,0,.2,1); --font-display:'Poppins',sans-serif; --font-body: 'DM Sans',sans-serif; } /* ── DARK THEME (toggle via ) ── */ [data-theme="dark"] { color-scheme: dark; --ink: #f0f0f8; --ink-light: #e4e4f0; --ink-mid: #d4d4e8; --surface: #16161f; --surface-2: #1c1c28; --surface-3: #252532; --border: #32324a; --border-dark:#404058; --text: #eaeaf4; --text-mid: #b4b4cc; --text-soft: #9090ac; --shadow-sm: 0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25); --shadow-md: 0 4px 16px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.28); --shadow-lg: 0 16px 48px rgba(0,0,0,.45),0 8px 20px rgba(0,0,0,.32); --shadow-xl: 0 32px 80px rgba(0,0,0,.55); } [data-theme="dark"] .fh-navbar { background: rgba(22,22,31,.94); border-bottom-color: var(--border); } [data-theme="dark"] .fh-dropdown-menu { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .fh-mobile-nav { background: var(--surface); border-bottom-color: var(--border); } [data-theme="dark"] .fh-stats-bar { background: var(--surface-2); border-bottom-color: var(--border); } [data-theme="dark"] .fh-search-input:focus { background: var(--surface-2); box-shadow: 0 0 0 3px rgba(108,99,255,.22); } [data-theme="dark"] .fh-notif-btn { background: var(--surface-2); border-color: var(--border); } [data-theme="dark"] .fh-badge { border-color: var(--surface); } [data-theme="dark"] .btn-nav-primary { background: #e8e8f4; color: #14141c !important; } [data-theme="dark"] .btn-nav-primary:hover { background: var(--accent); color: #fff !important; } [data-theme="dark"] .btn-nav-outline:hover { background: rgba(108,99,255,.1); } [data-theme="dark"] .fh-admin-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); } [data-theme="dark"] .fh-page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } [data-theme="dark"] .fh-sort-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } [data-theme="dark"] .autocomplete-dropdown { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .fh-service-cat-tag { background: rgba(22,22,31,.92); } [data-theme="dark"] .fh-save-btn { background: var(--surface-2); } [data-theme="dark"] .fh-flash-container .fh-alert { background: var(--surface-2); } /* ── MISSING DARK MODE FIXES ── */ [data-theme="dark"] .fh-hero-search-inner { background: var(--surface); box-shadow: 0 20px 60px rgba(0,0,0,.6); } [data-theme="dark"] .fh-page-btn { background: var(--surface); border-color: var(--border); color: var(--text-mid); } [data-theme="dark"] .fh-chat-typing, [data-theme="dark"] .fh-chat-service-card { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="dark"] .fh-timeline-dot { background: var(--surface); border-color: var(--border); } /* Keep marketing “dark panels” visually dark ( --ink becomes light text in dark theme ) */ [data-theme="dark"] .fh-hero { background: #0a0a12; } [data-theme="dark"] .fh-footer, [data-theme="dark"] .fh-trust-section, [data-theme="dark"] .fh-page-banner, [data-theme="dark"] .fh-profile-hero { background: #0c0c14; } [data-theme="dark"] .btn-dark-fh { background: #e8e8f4; color: #14141c !important; } [data-theme="dark"] .btn-dark-fh:hover { background: var(--accent); color: #fff !important; } [data-theme="dark"] .fh-chatbox-header { background: linear-gradient(135deg, #14141f, #1e1e2c); } [data-theme="dark"] .fh-auth-page { background: linear-gradient(135deg, #12121c 0%, #1a1a26 100%); } [data-theme="dark"] .fh-service-card, [data-theme="dark"] .fh-panel, [data-theme="dark"] .fh-testimonial, [data-theme="dark"] .fh-cat-card, [data-theme="dark"] .fh-dash-stat, [data-theme="dark"] .fh-notif-item, [data-theme="dark"] .fh-support-card, [data-theme="dark"] .fh-faq-q, [data-theme="dark"] .fh-checkout-step, [data-theme="dark"] .fh-sort-bar, [data-theme="dark"] .fh-browse-sidebar, [data-theme="dark"] .fh-chatbox, [data-theme="dark"] .fh-order-chat, [data-theme="dark"] .fh-table-wrap { background: var(--surface); } [data-theme="dark"] .fh-auth-form-side { background: var(--surface); } [data-theme="dark"] .fh-chatbox-messages, [data-theme="dark"] .fh-chat-input-area, [data-theme="dark"] .fh-order-chat-messages { background: var(--surface-2); } [data-theme="dark"] .fh-chat-bubble.bot, [data-theme="dark"] .fh-inquiry-bubble.theirs { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="dark"] .fh-input, [data-theme="dark"] .fh-textarea, [data-theme="dark"] .fh-select, [data-theme="dark"] .fh-chat-input { background: var(--surface-2); border-color: var(--border); color: var(--text); } [data-theme="dark"] .fh-input:focus, [data-theme="dark"] .fh-textarea:focus, [data-theme="dark"] .fh-select:focus { background: var(--surface-3); } /* ── RESET & BASE ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html { width:100%; overflow-x:hidden; } body { font-family:var(--font-body); background:var(--surface); color:var(--text); font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-kerning:normal; font-stretch:normal; font-synthesis:none; width:100%; max-width:100%; overflow-x:hidden; } h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--ink);letter-spacing:-.015em;line-height:1.15;} a{color:var(--accent);text-decoration:none;transition:color var(--transition);} a:hover{color:color-mix(in srgb,var(--accent) 80%,var(--ink));} /* ── SCROLLBAR ── */ ::-webkit-scrollbar{width:6px;height:6px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--border-dark);border-radius:99px;} /* ── CONTAINER ── */ .container{ width:100%; max-width:1280px; margin-left:auto; margin-right:auto; padding-left:24px; padding-right:24px; } /* ══════════════════════════════════ NAVBAR ══════════════════════════════════ */ .fh-navbar { position:sticky;top:0;z-index:1000; background:rgba(255,255,255,.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); height:68px; width:100%; } .fh-navbar-inner { max-width:1280px; margin:0 auto; padding:0 24px; height:68px; display:flex; align-items:center; gap:12px; overflow:visible; min-width:0; } .fh-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:1;min-width:0;} .fh-logo-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .fh-logo-wordmark{display:flex;flex-direction:column;line-height:1;} .fh-logo-main{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.012em;} .fh-logo-sub{font-family:var(--font-body);font-size:9px;font-weight:500;color:var(--text-soft);letter-spacing:.12em;text-transform:uppercase;} .fh-search-wrap{flex:1;max-width:380px;position:relative;margin:0 8px;} .fh-search-input{width:100%;height:40px;border:1.5px solid var(--border);border-radius:99px;padding:0 40px 0 40px;font-family:var(--font-body);font-size:14px;color:var(--text);background:var(--surface-2);outline:none;transition:all var(--transition);} .fh-search-input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(108,99,255,.1);} .fh-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-soft);font-size:15px;pointer-events:none;} .fh-search-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:99px;border:none;background:var(--accent);color:white;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition);} .fh-search-btn:hover{background:color-mix(in srgb,var(--accent) 85%,black);} .fh-nav-links{display:flex;align-items:center;gap:2px;list-style:none;flex-shrink:0;} .fh-nav-links a{font-family:var(--font-body);font-size:13.5px;font-weight:500;color:var(--text-mid);padding:6px 10px;border-radius:var(--radius-sm);transition:all var(--transition);white-space:nowrap;} .fh-nav-links a:hover{color:var(--accent);background:rgba(108,99,255,.07);} .fh-nav-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0;position:relative;z-index:1010;} .fh-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;font-family:var(--font-display);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;} .fh-profile-dropdown > .fh-avatar-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-user-select: none; user-select: none; } .fh-profile-dropdown > .fh-avatar-summary::-webkit-details-marker { display: none; } .fh-profile-dropdown > .fh-avatar-summary:focus-visible { outline: 3px solid rgba(108,99,255,.28); outline-offset: 2px; } .fh-profile-dropdown .fh-dropdown-menu { display: none; } .fh-profile-dropdown[open] .fh-dropdown-menu { display: block; } .fh-notif-btn{position:relative;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);color:var(--text-mid);font-size:16px;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all var(--transition);} .fh-notif-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(108,99,255,.06);} .fh-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;background:var(--accent-2);color:white;font-size:9px;font-weight:700;border-radius:99px;border:2px solid white;display:flex;align-items:center;justify-content:center;padding:0 3px;} .btn-nav-primary{height:36px;padding:0 18px;border-radius:99px;background:var(--ink);color:white!important;font-family:var(--font-body);font-size:13px;font-weight:600;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:all var(--transition);white-space:nowrap;} .btn-nav-primary:hover{background:var(--accent);transform:translateY(-1px);} .btn-nav-outline{height:36px;padding:0 16px;border-radius:99px;background:transparent;color:var(--text-mid)!important;font-family:var(--font-body);font-size:13px;font-weight:500;border:1.5px solid var(--border);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:all var(--transition);} .btn-nav-outline:hover{border-color:var(--accent);color:var(--accent)!important;} .fh-theme-toggle{ width:36px;height:36px;border-radius:var(--radius-sm); border:1.5px solid var(--border); background:var(--surface); color:var(--text-mid); font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all var(--transition); } .fh-theme-toggle:hover{ border-color:var(--accent); color:var(--accent); background:rgba(108,99,255,.06); } .fh-theme-toggle:focus-visible{ outline:3px solid rgba(108,99,255,.35); outline-offset:2px; } .fh-hamburger{display:none;width:36px;height:36px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:none;color:var(--text);font-size:20px;cursor:pointer;align-items:center;justify-content:center;} /* Desktop/Mobile visibility helpers */ .fh-desktop-only{display:flex;} /* Dropdown */ .fh-dropdown{position:relative;} .fh-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:220px;padding:8px;display:none;z-index:5000;animation:dropIn .15s ease;} @keyframes dropIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}} .fh-dropdown-header{padding:10px 12px 12px;border-bottom:1px solid var(--border);margin-bottom:6px;} .fh-dropdown-header .name{font-weight:700;font-size:14px;color:var(--ink);} .fh-dropdown-header .email{font-size:12px;color:var(--text-soft);} .fh-dropdown-header .role-tag{display:inline-block;margin-top:4px;font-size:10px;font-weight:600;padding:2px 8px;border-radius:99px;background:rgba(108,99,255,.1);color:var(--accent);text-transform:uppercase;letter-spacing:.06em;} .fh-dropdown-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);color:var(--text-mid);font-size:14px;text-decoration:none;transition:all var(--transition);cursor:pointer;border:none;background:none;width:100%;text-align:left;} .fh-dropdown-item:hover{background:var(--surface-2);color:var(--accent);} .fh-dropdown-item.danger:hover{background:rgba(255,101,132,.08);color:var(--accent-2);} .fh-dropdown-divider{height:1px;background:var(--border);margin:6px 0;} /* Mobile Nav Drawer */ .fh-mobile-nav{position:fixed;top:68px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:999;display:none;flex-direction:column;padding:8px 0;} .fh-mobile-nav.open{display:flex;} .fh-mobile-nav-item{display:flex;align-items:center;gap:10px;padding:12px 20px;color:var(--text-mid);font-size:14px;font-weight:500;text-decoration:none;transition:background var(--transition);} .fh-mobile-nav-item:hover{background:var(--surface-2);color:var(--accent);} /* Flash messages */ .fh-flash-container{max-width:1280px;margin:14px auto 0;padding:0 24px;} .fh-alert{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-radius:var(--radius-md);font-size:14px;margin-bottom:10px;border:1px solid;} .fh-alert-success{background:rgba(67,217,173,.1);border-color:rgba(67,217,173,.3);color:#0d6654;} .fh-alert-danger{background:rgba(255,101,132,.1);border-color:rgba(255,101,132,.3);color:#a01535;} .fh-alert-warning{background:rgba(245,166,35,.1);border-color:rgba(245,166,35,.3);color:#7a5a00;} .fh-alert-info{background:rgba(108,99,255,.08);border-color:rgba(108,99,255,.25);color:#4a44cc;} .fh-alert-close{margin-left:auto;background:none;border:none;cursor:pointer;color:inherit;opacity:.5;font-size:16px;padding:0;flex-shrink:0;} .fh-alert-close:hover{opacity:1;} /* Autocomplete */ .autocomplete-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:9999;overflow:hidden;max-height:320px;overflow-y:auto;} .autocomplete-item{display:flex;align-items:center;gap:10px;padding:11px 16px;text-decoration:none;color:var(--text);font-size:14px;border-bottom:1px solid var(--border);transition:background var(--transition);} .autocomplete-item:last-child{border-bottom:none;} .autocomplete-item:hover{background:var(--surface-2);} .autocomplete-item .cat-badge{font-size:11px;color:var(--text-soft);background:var(--surface-3);padding:2px 8px;border-radius:99px;margin-left:auto;flex-shrink:0;} .autocomplete-item .price-tag{font-size:12px;font-weight:600;color:var(--accent);flex-shrink:0;} /* ══════════════════════════════════ HERO ══════════════════════════════════ */ .fh-hero{background:var(--ink);position:relative;overflow:hidden;padding:80px 0 72px;} .fh-hero-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:1; } .fh-hero::before{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 80% 60% at 20% 50%,rgba(108,99,255,.35) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 20%,rgba(67,217,173,.2) 0%,transparent 55%),radial-gradient(ellipse 50% 50% at 60% 80%,rgba(255,101,132,.15) 0%,transparent 50%);pointer-events:none;} .fh-hero::after{content:'';position:absolute;inset:0;z-index:0;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none;opacity:.6;} .fh-hero .container{position:relative;z-index:3;} .fh-hero-content{position:relative;z-index:1;text-align:center;} .fh-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;padding:6px 14px;border-radius:99px;border:1px solid rgba(245,166,35,.3);background:rgba(245,166,35,.08);} .fh-hero h1{font-family:var(--font-display);font-size:clamp(2.2rem,4.5vw,3.8rem);font-weight:700;color:white;line-height:1.1;margin-bottom:20px;letter-spacing:-.015em;} .gradient-text{background:linear-gradient(135deg,var(--gold),var(--accent-2),var(--accent-3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .fh-hero-sub{font-size:16px;color:rgba(255,255,255,.65);max-width:520px;margin:0 auto 32px;line-height:1.6;} .fh-hero-search{max-width:560px;margin:0 auto 28px;position:relative;} .fh-hero-search-inner{display:flex;align-items:center;background:var(--surface);border-radius:var(--radius-xl);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;height:58px;} .fh-hero-search-icon{padding:0 14px 0 20px;color:var(--text-soft);font-size:18px;flex-shrink:0;} .fh-hero-search input{flex:1;border:none;outline:none;font-family:var(--font-body);font-size:15px;color:var(--text);background:transparent;padding:0;min-width:0;} .fh-hero-search input::placeholder{color:var(--text-soft);} .fh-hero-search-submit{margin:6px;height:46px;padding:0 24px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--accent-2)));color:white;font-family:var(--font-display);font-weight:700;font-size:14px;border:none;cursor:pointer;white-space:nowrap;transition:all var(--transition);flex-shrink:0;} .fh-hero-search-submit:hover{transform:scale(1.02);box-shadow:0 6px 20px rgba(108,99,255,.4);} .fh-hero-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;align-items:center;} .fh-hero-tag{font-size:13px;color:rgba(255,255,255,.7);padding:5px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.15);text-decoration:none;transition:all var(--transition);backdrop-filter:blur(4px);} .fh-hero-tag:hover{background:rgba(255,255,255,.12);color:white;border-color:rgba(255,255,255,.3);} /* ══════════════════════════════════ STATS BAR ══════════════════════════════════ */ .fh-stats-bar{background:var(--surface-2);border-bottom:1px solid var(--border);padding:22px 0;} .fh-stat{text-align:center;padding:0 28px;} .fh-stat-num{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--ink);display:block;letter-spacing:-.012em;} .fh-stat-label{font-size:12px;color:var(--text-soft);font-weight:500;letter-spacing:.04em;} .fh-stat-divider{width:1px;height:36px;background:var(--border);} /* ══════════════════════════════════ SECTION HEADERS ══════════════════════════════════ */ .fh-section-header{margin-bottom:32px;} .fh-section-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;} .fh-section-title{font-family:var(--font-display);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:700;color:var(--ink);margin:0;line-height:1.18;} .fh-section-subtitle{font-size:15px;color:var(--text-soft);margin-top:8px;line-height:1.55;} /* ══════════════════════════════════ CATEGORY CARDS ══════════════════════════════════ */ .fh-cat-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 12px;border-radius:var(--radius-lg);border:1.5px solid var(--border);background:var(--surface);text-decoration:none;color:var(--text);transition:all var(--transition);text-align:center;} .fh-cat-card:hover{border-color:var(--accent);background:rgba(108,99,255,.04);transform:translateY(-3px);box-shadow:var(--shadow-md);color:var(--accent);} .fh-cat-icon{font-size:1.8rem;margin-bottom:10px;display:block;line-height:1;} .fh-cat-name{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink);margin-bottom:3px;} .fh-cat-card:hover .fh-cat-name{color:var(--accent);} .fh-cat-count{font-size:11px;color:var(--text-soft);} /* ══════════════════════════════════ SERVICE CARDS ══════════════════════════════════ */ .fh-service-card{border-radius:var(--radius-lg);border:1.5px solid var(--border);background:var(--surface);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);height:100%;display:flex;flex-direction:column;} .fh-service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 22%,var(--border));} .fh-service-img-wrap{position:relative;height:190px;overflow:hidden;} .fh-service-img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;} .fh-service-card:hover .fh-service-img{transform:scale(1.05);} .fh-service-cat-tag{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.95);color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.12);text-transform:uppercase;letter-spacing:.03em;} .fh-save-btn{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:var(--surface);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-soft);font-size:15px;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:all var(--transition);text-decoration:none;} .fh-save-btn:hover{color:var(--accent-2);transform:scale(1.1);} .fh-service-body{padding:15px 15px 14px;flex:1;display:flex;flex-direction:column;} .fh-service-seller{display:flex;align-items:center;gap:8px;margin-bottom:9px;} .fh-seller-avatar-sm{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-display);} .fh-seller-name{font-size:12px;font-weight:500;color:var(--text-mid);} .fh-service-title-link{text-decoration:none;display:block;} .fh-service-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink);line-height:1.35;margin-bottom:9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;} .fh-service-title-link:hover .fh-service-title{color:var(--accent);} .fh-service-rating{display:flex;align-items:center;gap:5px;margin-bottom:12px;min-height:18px;} .fh-stars{color:var(--gold);font-size:12px;letter-spacing:1px;} .fh-rating-num{font-size:12px;font-weight:600;color:var(--text-mid);} .fh-review-count{font-size:12px;color:var(--text-soft);} .fh-service-footer{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border);} .fh-service-price{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink);line-height:1;} .fh-service-price small{font-family:var(--font-body);font-size:11px;font-weight:500;color:var(--text-soft);display:block;margin-bottom:5px;line-height:1;} .fh-btn-view{font-size:12px;font-weight:700;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:gap var(--transition),color var(--transition);} .fh-btn-view:hover{gap:8px;color:color-mix(in srgb,var(--accent) 85%,black);} .fh-delivery-tag{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-soft);} /* ══════════════════════════════════ BUTTONS ══════════════════════════════════ */ .btn-primary-fh{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 28px;border-radius:var(--radius-lg);background:var(--accent);color:white;font-family:var(--font-display);font-weight:700;font-size:15px;border:none;cursor:pointer;text-decoration:none;transition:all var(--transition);white-space:nowrap;} .btn-primary-fh:hover{background:color-mix(in srgb,var(--accent) 85%,black);color:white;transform:translateY(-2px);box-shadow:0 8px 24px rgba(108,99,255,.35);} .btn-dark-fh{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 28px;border-radius:var(--radius-lg);background:var(--ink);color:white;font-family:var(--font-display);font-weight:700;font-size:15px;border:none;cursor:pointer;text-decoration:none;transition:all var(--transition);} .btn-dark-fh:hover{background:var(--accent);color:white;transform:translateY(-2px);} .btn-outline-fh{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;border-radius:var(--radius-lg);background:transparent;color:var(--text-mid);font-family:var(--font-body);font-weight:600;font-size:14px;border:1.5px solid var(--border);cursor:pointer;text-decoration:none;transition:all var(--transition);} .btn-outline-fh:hover{border-color:var(--accent);color:var(--accent);background:rgba(108,99,255,.06);} .btn-sm-fh{height:36px;padding:0 18px;font-size:13px;} .btn-gold-fh{background:linear-gradient(135deg,var(--gold),#e09416);color:white;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 28px;border-radius:var(--radius-lg);font-family:var(--font-display);font-weight:700;font-size:15px;border:none;cursor:pointer;text-decoration:none;transition:all var(--transition);} .btn-gold-fh:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,166,35,.35);color:white;} .btn-primary-fh:focus-visible,.btn-dark-fh:focus-visible,.btn-outline-fh:focus-visible,.btn-gold-fh:focus-visible,.fh-btn-view:focus-visible,.fh-service-title-link:focus-visible{ outline:3px solid rgba(108,99,255,.3); outline-offset:2px; } /* ══════════════════════════════════ FORM ELEMENTS ══════════════════════════════════ */ .fh-form-label{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--ink);margin-bottom:6px;display:block;letter-spacing:-.01em;} .fh-input{width:100%;height:46px;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:0 14px;font-family:var(--font-body);font-size:14px;color:var(--text);background:var(--surface);outline:none;transition:all var(--transition);} .fh-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,99,255,.1);} .fh-textarea{width:100%;min-height:120px;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;font-family:var(--font-body);font-size:14px;color:var(--text);background:var(--surface);outline:none;resize:vertical;transition:all var(--transition);} .fh-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,99,255,.1);} .fh-select{width:100%;height:46px;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:0 36px 0 14px;font-family:var(--font-body);font-size:14px;color:var(--text);background:var(--surface);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238888aa' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;transition:all var(--transition);} .fh-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,99,255,.1);} /* ══════════════════════════════════ PANELS & CARDS ══════════════════════════════════ */ .fh-panel{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:28px;} .fh-panel-title{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--ink);margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border);} /* Tags & Badges */ .fh-tag{display:inline-flex;align-items:center;font-size:12px;font-weight:500;padding:4px 12px;border-radius:99px;background:var(--surface-3);color:var(--text-mid);} .fh-badge-accent{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;background:rgba(108,99,255,.1);color:var(--accent);} .fh-badge-gold{background:rgba(245,166,35,.12);color:#b37b00;} .fh-badge-green{background:rgba(67,217,173,.15);color:#1a8066;} .fh-badge-red{background:rgba(255,101,132,.12);color:#c02045;} .fh-tag-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:500;padding:4px 12px;border-radius:99px;background:var(--surface-3);color:var(--text-mid);border:1px solid var(--border);text-decoration:none;transition:all var(--transition);} .fh-tag-chip:hover{background:rgba(108,99,255,.08);border-color:var(--accent);color:var(--accent);} /* Status badges */ .status-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 12px;border-radius:99px;letter-spacing:.02em;} .status-pending{background:rgba(245,166,35,.15);color:#a07010;} .status-active{background:rgba(67,217,173,.15);color:#0d7060;} .status-completed{background:rgba(108,99,255,.12);color:var(--accent);} .status-cancelled{background:rgba(255,101,132,.12);color:#c02045;} /* ══════════════════════════════════ FOOTER ══════════════════════════════════ */ .fh-footer{background:var(--ink);color:rgba(255,255,255,.65);padding:64px 0 32px;position:relative;overflow:hidden;} .fh-footer::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 20% -10%,rgba(108,99,255,.2) 0%,transparent 60%);pointer-events:none;} .fh-footer-brand .fh-logo-main{color:white;} .fh-footer-tagline{font-size:13px;color:rgba(255,255,255,.45);margin-top:8px;max-width:220px;} .fh-footer-heading{font-family:var(--font-display);font-size:13px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;} .fh-footer-links{list-style:none;} .fh-footer-links li{margin-bottom:8px;} .fh-footer-links a{font-size:13px;color:rgba(255,255,255,.45);text-decoration:none;transition:color var(--transition);} .fh-footer-links a:hover{color:white;} .fh-footer-social{display:flex;gap:10px;margin-top:6px;} .fh-social-btn{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:transparent;color:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:15px;transition:all var(--transition);} .fh-social-btn:hover{background:rgba(255,255,255,.1);color:white;border-color:rgba(255,255,255,.3);} .fh-footer-pay-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;} .fh-pay-tag{font-size:11px;font-weight:600;padding:5px 12px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);background:rgba(255,255,255,.04);} .fh-footer-divider{height:1px;background:rgba(255,255,255,.08);margin:40px 0 24px;} .fh-footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;} .fh-footer-copy{font-size:12px;color:rgba(255,255,255,.3);} /* ══════════════════════════════════ TRUST SECTION ══════════════════════════════════ */ .fh-page-banner{background:#0a0a0f;padding:40px 0;position:relative;overflow:hidden;} .fh-trust-section{background:var(--ink);padding:60px 0;position:relative;overflow:hidden;} .fh-trust-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 80% 50%,rgba(108,99,255,.2) 0%,transparent 65%);pointer-events:none;} .fh-trust-item{text-align:center;position:relative;z-index:1;} .fh-trust-icon{font-size:1.8rem;margin-bottom:10px;display:block;} .fh-trust-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:white;margin-bottom:4px;} .fh-trust-desc{font-size:13px;color:rgba(255,255,255,.5);} /* ══════════════════════════════════ TESTIMONIALS ══════════════════════════════════ */ .fh-testimonial{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:24px;height:100%;} .fh-testimonial-text{font-size:14.5px;color:var(--text-mid);line-height:1.7;margin-bottom:16px;font-style:italic;} .fh-testimonial-author{display:flex;align-items:center;gap:10px;} .fh-testimonial-name{font-weight:700;font-size:14px;color:var(--ink);} .fh-testimonial-role{font-size:12px;color:var(--text-soft);} /* ══════════════════════════════════ BROWSE ══════════════════════════════════ */ .fh-browse-sidebar{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:20px;position:sticky;top:88px;} .fh-filter-title{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text-soft);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;} .fh-filter-option{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition);font-size:14px;color:var(--text-mid);text-decoration:none;} .fh-filter-option:hover{background:var(--surface-2);color:var(--accent);} .fh-filter-option.active{background:rgba(108,99,255,.08);color:var(--accent);font-weight:600;} .fh-sort-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);margin-bottom:20px;flex-wrap:wrap;} .fh-sort-btn{font-size:13px;font-weight:500;padding:5px 14px;border-radius:99px;border:1.5px solid transparent;color:var(--text-mid);background:none;cursor:pointer;transition:all var(--transition);text-decoration:none;} .fh-sort-btn:hover{border-color:var(--border);color:var(--text);} .fh-sort-btn.active{background:var(--ink);color:white;border-color:var(--ink);} .fh-pagination{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:32px;} .fh-page-btn{width:38px;height:38px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--surface);color:var(--text-mid);font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all var(--transition);} .fh-page-btn:hover{border-color:var(--accent);color:var(--accent);} .fh-page-btn.active{background:var(--accent);border-color:var(--accent);color:white;} .fh-page-btn.disabled{opacity:.4;pointer-events:none;} /* ══════════════════════════════════ PROFILE ══════════════════════════════════ */ .fh-profile-hero{background:var(--ink);padding:48px 0 80px;position:relative;overflow:hidden;} .fh-profile-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 100% at 30% 50%,rgba(108,99,255,.25) 0%,transparent 65%);pointer-events:none;} .fh-profile-avatar{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;font-family:var(--font-display);font-weight:800;font-size:32px;display:flex;align-items:center;justify-content:center;border:3px solid rgba(255,255,255,.2);flex-shrink:0;} .fh-profile-name{font-family:var(--font-display);font-size:26px;font-weight:800;color:white;} .fh-stat-box{text-align:center;padding:16px;border-radius:var(--radius-md);background:var(--surface-2);} .fh-stat-box-num{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--ink);} .fh-stat-box-label{font-size:12px;color:var(--text-soft);font-weight:500;} /* ══════════════════════════════════ CHECKOUT ══════════════════════════════════ */ .fh-checkout-step{display:flex;align-items:flex-start;gap:16px;padding:20px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);margin-bottom:10px;cursor:pointer;transition:all var(--transition);} .fh-checkout-step.selected{border-color:var(--accent);background:rgba(108,99,255,.04);} .fh-checkout-step:hover{border-color:var(--border-dark);} .fh-payment-radio{display:none;} .fh-checkout-icon{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;} .fh-checkout-step.selected .fh-checkout-icon{background:rgba(108,99,255,.1);} /* ══════════════════════════════════ ORDER CHAT ══════════════════════════════════ */ .fh-order-chat{border:1.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;} .fh-order-chat-header{background:var(--surface-2);padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;} .fh-order-chat-messages{min-height:200px;max-height:340px;overflow-y:auto;padding:16px;background:var(--surface);display:flex;flex-direction:column;gap:10px;} .fh-order-chat-input{border-top:1px solid var(--border);padding:12px;background:var(--surface-2);display:flex;gap:8px;align-items:flex-end;} /* ══════════════════════════════════ INQUIRY CHAT ══════════════════════════════════ */ .fh-inquiry-box{background:linear-gradient(135deg,rgba(108,99,255,.06),rgba(67,217,173,.04));border:1.5px solid rgba(108,99,255,.2);border-radius:var(--radius-lg);padding:24px;} .fh-inquiry-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;} .fh-inquiry-icon{width:40px;height:40px;border-radius:50%;background:rgba(108,99,255,.12);color:var(--accent);font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .fh-inquiry-title{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--ink);} .fh-inquiry-subtitle{font-size:13px;color:var(--text-soft);} .fh-inquiry-messages{max-height:240px;overflow-y:auto;margin-bottom:14px;display:flex;flex-direction:column;gap:8px;} .fh-inquiry-msg{display:flex;flex-direction:column;max-width:80%;} .fh-inquiry-msg.mine{align-items:flex-end;margin-left:auto;} .fh-inquiry-msg.theirs{align-items:flex-start;} .fh-inquiry-bubble{padding:9px 14px;border-radius:12px;font-size:13.5px;line-height:1.45;} .fh-inquiry-bubble.mine{background:var(--accent);color:white;border-radius:12px 4px 12px 12px;} .fh-inquiry-bubble.theirs{background:var(--surface);border:1px solid var(--border);border-radius:4px 12px 12px 12px;color:var(--text);} .fh-inquiry-sender{font-size:10.5px;color:var(--text-soft);margin-bottom:3px;} /* ══════════════════════════════════ CHATBOT ══════════════════════════════════ */ .fh-chat-toggle{position:fixed;bottom:28px;right:28px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--accent-2)));color:white;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 8px 32px rgba(108,99,255,.45);z-index:1050;transition:all var(--transition);} .fh-chat-toggle:hover{transform:scale(1.08);box-shadow:0 12px 40px rgba(108,99,255,.55);} .fh-chatbox{position:fixed;bottom:100px;right:28px;width:360px;max-height:520px;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);display:none;flex-direction:column;z-index:1049;overflow:hidden;animation:chatSlide .2s ease;} @keyframes chatSlide{from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}} .fh-chatbox.open{display:flex;} .fh-chatbox-header{background:linear-gradient(135deg,var(--ink),var(--ink-mid));padding:16px 18px;display:flex;align-items:center;gap:10px;} .fh-chatbox-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;} .fh-chatbox-info{flex:1;} .fh-chatbox-name{font-family:var(--font-display);font-weight:700;color:white;font-size:14px;} .fh-chatbox-status{font-size:11px;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:4px;} .fh-chatbox-online{width:6px;height:6px;border-radius:50%;background:var(--accent-3);display:inline-block;} .fh-chatbox-close{background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;font-size:18px;padding:0;transition:color var(--transition);} .fh-chatbox-close:hover{color:white;} .fh-chatbox-messages{flex:1;overflow-y:auto;padding:16px;background:var(--surface-2);max-height:300px;display:flex;flex-direction:column;gap:10px;} .fh-chat-msg{display:flex;flex-direction:column;max-width:85%;} .fh-chat-msg.user{align-items:flex-end;margin-left:auto;} .fh-chat-msg.bot{align-items:flex-start;} .fh-chat-bubble{padding:10px 14px;border-radius:16px;font-size:13.5px;line-height:1.5;} .fh-chat-bubble.bot{background:var(--surface);border:1px solid var(--border);border-radius:4px 16px 16px 16px;color:var(--text);} .fh-chat-bubble.user{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--accent-2)));color:white;border-radius:16px 4px 16px 16px;} .fh-chat-time{font-size:10px;color:var(--text-soft);margin-top:3px;} .fh-chat-service-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px;margin-top:6px;text-decoration:none;display:flex;align-items:center;gap:10px;color:var(--text);transition:all var(--transition);font-size:13px;} .fh-chat-service-card:hover{border-color:var(--accent);background:rgba(108,99,255,.04);} .fh-chat-service-img{width:36px;height:36px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0;} .fh-chat-service-title{font-weight:600;font-size:12.5px;color:var(--ink);line-height:1.3;} .fh-chat-service-price{font-size:12px;color:var(--accent);font-weight:700;} .fh-chat-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;} .fh-chat-suggestion{font-size:11.5px;padding:5px 12px;border-radius:99px;border:1px solid var(--accent);color:var(--accent);background:rgba(108,99,255,.06);cursor:pointer;transition:all var(--transition);font-weight:500;} .fh-chat-suggestion:hover{background:var(--accent);color:white;} .fh-chat-typing{display:flex;align-items:center;gap:4px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:4px 16px 16px 16px;width:fit-content;} .fh-chat-dot{width:6px;height:6px;border-radius:50%;background:var(--text-soft);animation:typingDot 1.2s infinite;} .fh-chat-dot:nth-child(2){animation-delay:.2s;} .fh-chat-dot:nth-child(3){animation-delay:.4s;} @keyframes typingDot{0%,60%,100%{transform:scale(1);opacity:.4;}30%{transform:scale(1.3);opacity:1;}} .fh-chat-input-area{padding:12px;border-top:1px solid var(--border);background:var(--surface);display:flex;align-items:center;gap:8px;} .fh-chat-input{flex:1;height:40px;border:1.5px solid var(--border);border-radius:99px;padding:0 14px;font-family:var(--font-body);font-size:13.5px;outline:none;transition:border-color var(--transition);} .fh-chat-input:focus{border-color:var(--accent);} .fh-chat-send{width:36px;height:36px;border-radius:50%;background:var(--accent);color:white;border:none;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all var(--transition);flex-shrink:0;} .fh-chat-send:hover{transform:scale(1.1);background:color-mix(in srgb,var(--accent) 85%,black);} /* ══════════════════════════════════ HELP & SUPPORT ══════════════════════════════════ */ .fh-faq-item{border:1.5px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:10px;transition:border-color var(--transition);} .fh-faq-item:hover{border-color:var(--border-dark);} .fh-faq-q{padding:16px 20px;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:var(--surface);user-select:none;} .fh-faq-q .arrow{transition:transform var(--transition);color:var(--text-soft);} .fh-faq-item.open .fh-faq-q .arrow{transform:rotate(180deg);} .fh-faq-a{padding:0 20px;font-size:14px;color:var(--text-mid);max-height:0;overflow:hidden;transition:all var(--transition);line-height:1.7;} .fh-faq-item.open .fh-faq-a{max-height:300px;padding:0 20px 16px;} .fh-support-card{text-align:center;padding:28px 20px;border:1.5px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);transition:all var(--transition);} .fh-support-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent);} .fh-support-icon{width:56px;height:56px;border-radius:var(--radius-md);background:rgba(108,99,255,.1);color:var(--accent);font-size:24px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;} /* ══════════════════════════════════ DASHBOARD ══════════════════════════════════ */ .fh-dash-stat{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:22px;display:flex;align-items:flex-start;gap:16px;} .fh-dash-stat-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;} .fh-dash-stat-num{font-family:var(--font-display);font-size:24px;font-weight:800;color:var(--ink);} .fh-dash-stat-label{font-size:13px;color:var(--text-soft);} /* ══════════════════════════════════ TIMELINE ══════════════════════════════════ */ .fh-timeline{position:relative;padding-left:28px;} .fh-timeline-item{position:relative;margin-bottom:24px;padding-left:8px;} .fh-timeline-item::before{content:'';position:absolute;left:-20px;top:22px;width:2px;height:calc(100% + 8px);background:var(--border);} .fh-timeline-item:last-child::before{display:none;} .fh-timeline-dot{position:absolute;left:-26px;top:4px;width:14px;height:14px;border-radius:50%;border:2px solid var(--border);background:var(--surface);} .fh-timeline-item.done .fh-timeline-dot{background:var(--accent-3);border-color:var(--accent-3);} .fh-timeline-item.active .fh-timeline-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(108,99,255,.2);} /* ══════════════════════════════════ STAR RATING ══════════════════════════════════ */ .fh-star-input{display:flex;flex-direction:row-reverse;gap:4px;} .fh-star-label{color:#d1d5db;cursor:pointer;transition:color .15s;font-size:1.6rem;} .fh-star-input input:checked ~ .fh-star-label,.fh-star-label:hover,.fh-star-label:hover ~ .fh-star-label{color:var(--gold);} /* ══════════════════════════════════ AUTH ══════════════════════════════════ */ .fh-auth-page{min-height:100vh;background:linear-gradient(135deg,var(--ink) 0%,var(--ink-mid) 100%);display:flex;align-items:stretch;} .fh-auth-side{flex:1;display:none;background:radial-gradient(ellipse 80% 80% at 30% 50%,rgba(108,99,255,.4) 0%,transparent 70%),radial-gradient(ellipse 50% 60% at 80% 80%,rgba(67,217,173,.2) 0%,transparent 60%);padding:48px;flex-direction:column;justify-content:center;border-right:1px solid rgba(255,255,255,.06);} .fh-auth-form-side{flex:0 0 440px;background:var(--surface);display:flex;flex-direction:column;justify-content:center;padding:48px 44px;} .fh-auth-title{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--ink);margin-bottom:6px;} .fh-auth-sub{font-size:14px;color:var(--text-soft);margin-bottom:32px;} .fh-role-card{border:2px solid var(--border);border-radius:var(--radius-md);padding:16px;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;gap:12px;} .fh-role-card:hover{border-color:var(--accent);background:rgba(108,99,255,.04);} .fh-role-card.selected{border-color:var(--accent);background:rgba(108,99,255,.06);} .fh-role-card input{display:none;} .fh-role-icon{font-size:24px;flex-shrink:0;} .fh-role-title{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink);} .fh-role-desc{font-size:12px;color:var(--text-soft);} /* ══════════════════════════════════ NOTIFICATIONS ══════════════════════════════════ */ .fh-notif-item{display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--surface);margin-bottom:10px;transition:all var(--transition);} .fh-notif-item.unread{border-color:rgba(108,99,255,.2);background:rgba(108,99,255,.03);} .fh-notif-item:hover{box-shadow:var(--shadow-sm);} .fh-notif-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:6px;} .fh-notif-title{font-weight:700;font-size:14px;color:var(--ink);} .fh-notif-body{font-size:13px;color:var(--text-soft);margin-top:2px;} .fh-notif-time{font-size:11px;color:var(--text-soft);margin-top:4px;} /* ══════════════════════════════════ EMPTY STATES ══════════════════════════════════ */ .fh-empty-state{text-align:center;padding:60px 20px;} .fh-empty-icon{font-size:3.5rem;margin-bottom:16px;opacity:.4;} .fh-empty-title{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--ink);margin-bottom:8px;} .fh-empty-sub{font-size:14px;color:var(--text-soft);margin-bottom:24px;} /* ══════════════════════════════════ ADMIN ══════════════════════════════════ */ .fh-admin-tab{padding:8px 18px;border-radius:99px;border:1.5px solid var(--border);background:none;font-size:14px;font-weight:500;color:var(--text-mid);cursor:pointer;transition:all var(--transition);} .fh-admin-tab.active{background:var(--ink);color:white;border-color:var(--ink);} .fh-admin-tab:hover:not(.active){border-color:var(--accent);color:var(--accent);} .fh-table{width:100%;border-collapse:collapse;} .fh-table th{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);padding:10px 14px;border-bottom:2px solid var(--border);text-align:left;white-space:nowrap;} .fh-table td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:14px;color:var(--text);vertical-align:middle;} .fh-table tr:hover td{background:var(--surface-2);} .fh-table-wrap{overflow-x:auto;border-radius:var(--radius-md);border:1.5px solid var(--border);} /* ══════════════════════════════════ BREADCRUMB ══════════════════════════════════ */ .fh-breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-soft);flex-wrap:wrap;} .fh-breadcrumb a{color:var(--text-soft);text-decoration:none;transition:color var(--transition);} .fh-breadcrumb a:hover{color:var(--accent);} .fh-breadcrumb-sep{color:var(--border-dark);} /* ══════════════════════════════════ UTILITIES ══════════════════════════════════ */ .section-pad{padding:72px 0;} .section-pad-sm{padding:40px 0;} .divider{height:1px;background:var(--border);margin:24px 0;} .hover-lift{transition:transform var(--transition),box-shadow var(--transition);} .hover-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);} .line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .fw-black{font-weight:800!important;} .text-accent{color:var(--accent)!important;} .text-gold{color:var(--gold)!important;} .me-1{margin-right:4px;} .me-2{margin-right:8px;} .ms-2{margin-left:8px;} /* ══════════════════════════════════ RESPONSIVE ══════════════════════════════════ */ @media (min-width:900px){ .fh-auth-side{display:flex;} } @media (max-width:1024px){ .fh-search-wrap{max-width:280px;} .fh-nav-links a{padding:6px 8px;font-size:13px;} } @media (max-width:768px){ .fh-nav-auth-desktop{display:none!important;} .fh-hamburger{display:flex;} .fh-desktop-only{display:none!important;} .fh-chatbox{width:calc(100vw - 16px);right:8px;bottom:86px;} .fh-auth-form-side{flex:1;padding:32px 20px;} .fh-panel{padding:16px;} .fh-hero{padding:52px 0 44px;} .fh-hero h1{font-size:2rem;} .fh-hero-search{max-width:100%;} .fh-hero-search-submit{padding:0 18px;font-size:13px;} .section-pad{padding:44px 0;} .section-pad-sm{padding:24px 0;} .fh-stat{padding:8px 16px;} .fh-stat-divider{height:24px;} .container{padding-left:16px;padding-right:16px;} .fh-navbar-inner{padding:0 12px;gap:8px;} .fh-nav-actions{gap:4px;margin-left:auto;} .fh-theme-toggle,.fh-hamburger{width:34px;height:34px;font-size:16px;} .fh-notif-btn{width:34px;height:34px;font-size:15px;} .fh-avatar{width:34px;height:34px;font-size:13px;} .fh-logo-main{font-size:15px;} .fh-logo-sub{font-size:8px;} .browse-grid{grid-template-columns:1fr!important;} .fh-browse-sidebar{position:static!important;} .service-detail-grid{grid-template-columns:1fr!important;} .checkout-grid{grid-template-columns:1fr!important;} .order-grid{grid-template-columns:1fr!important;} .profile-grid{grid-template-columns:1fr!important;} .account-grid{grid-template-columns:1fr!important;} .post-grid{grid-template-columns:1fr!important;} .fh-service-img-wrap{height:180px;} .fh-service-body{padding:14px;} .fh-service-price{font-size:18px;} .fh-section-title{font-size:clamp(1.35rem,5vw,1.7rem);} } @media (max-width:480px){ .fh-hero-tags{display:none;} .fh-logo-sub{display:none;} .fh-logo-main{font-size:14px;} .fh-logo-icon svg{width:32px;height:32px;} .fh-navbar-inner{padding:0 10px;gap:6px;} } /* ══════════════════════════════════ DEFINITIVE GRID & OVERFLOW RULES (single source of truth) ══════════════════════════════════ */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } section, .fh-hero, .fh-trust-section, .fh-stats-bar, .fh-footer { max-width: 100%; overflow: hidden; } /* Navbar must allow dropdown menus to extend below the bar (avoid clipping / “thin line” glitch). */ .fh-navbar { max-width: 100%; overflow: visible; } /* SERVICE GRID — fixed columns, no auto-fill overflow */ .fh-service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; width: 100%; max-width: 100%; } @media (max-width: 1100px) { .fh-service-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 800px) { .fh-service-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .fh-service-grid { grid-template-columns: 1fr; } } /* CATEGORY GRID */ .fh-cat-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; width: 100%; } @media (max-width: 1000px) { .fh-cat-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 500px) { .fh-cat-grid { grid-template-columns: repeat(3, 1fr); } } /* FOOTER GRID */ .fh-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; width: 100%; } @media (max-width: 900px) { .fh-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 480px) { .fh-footer-grid { grid-template-columns: 1fr; } } /* TRUST GRID */ .fh-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; position: relative; z-index: 1; } @media (max-width: 768px) { .fh-trust-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .fh-trust-grid { grid-template-columns: repeat(2, 1fr); } } /* STATS BAR */ .fh-stats-bar-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 860px; margin: 0 auto; width: 100%; } /* UNIFORM CARD HEIGHTS */ .fh-service-card { height: 100%; min-height: 340px; }